Merge branch 'dev' into feature/#446-Tabs-bar-headings-should-enlarge…

…-width-2
Lemoncode · Nov 17, 2024 · e3ea74d · e3ea74d
2 parents b88a23b + 3dac014
commit e3ea74d
Show file tree

Hide file tree

Showing 22 changed files with 220 additions and 52 deletions.
diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts
@@ -89,6 +89,26 @@ export const POSTIT_SHAPE: DefaultStyleShape = {
   DEFAULT_TEXT_DECORATION,
 };
 
+interface FontValues {
+  HEADING1: number;
+  HEADING2: number;
+  HEADING3: number;
+  NORMALTEXT: number;
+  SMALLTEXT: number;
+  PARAGRAPH: number;
+  LINK: number;
+}
+
+export const FONT_SIZE_VALUES: FontValues = {
+  HEADING1: 28,
+  HEADING2: 24,
+  HEADING3: 18,
+  NORMALTEXT: 18,
+  SMALLTEXT: 14,
+  PARAGRAPH: 14,
+  LINK: 20,
+};
+
 export const LINK_SHAPE: DefaultStyleShape = {
   ...BASIC_SHAPE,
   DEFAULT_FILL_TEXT: '#0000FF',

diff --git a/src/common/components/mock-components/front-rich-components/modal/modal.tsx b/src/common/components/mock-components/front-rich-components/modal/modal.tsx
@@ -53,7 +53,7 @@ export const Modal = forwardRef<any, ShapeProps>((props, ref) => {
   const buttonWidth =
     (restrictedWidth - (buttons.length + 1) * buttonSpacing) / buttons.length;
 
-  const { stroke, strokeStyle, fill, textColor } = useShapeProps(
+  const { stroke, strokeStyle, fill, textColor, fontSize } = useShapeProps(
     otherProps,
     BASIC_SHAPE
   );
@@ -99,7 +99,7 @@ export const Modal = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth - 60}
         text={modalTitle}
         fontFamily="Arial"
-        fontSize={18}
+        fontSize={fontSize}
         fill="white"
         wrap="none"
         ellipsis={true}

diff --git a/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading1-text-shape.tsx
@@ -40,10 +40,8 @@ export const Heading1Shape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, textDecoration, fontStyle, fontVariant } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { textColor, textDecoration, fontStyle, fontVariant, fontSize } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +59,7 @@ export const Heading1Shape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={30}
+        fontSize={fontSize}
         fill={textColor}
         align="center"
         verticalAlign="middle"

diff --git a/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading2-text-shape.tsx
@@ -40,10 +40,8 @@ export const Heading2Shape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +59,7 @@ export const Heading2Shape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={25}
+        fontSize={fontSize}
         fill={textColor}
         align="center"
         verticalAlign="middle"

diff --git a/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx b/src/common/components/mock-components/front-text-components/heading3-text-shape.tsx
@@ -41,10 +41,8 @@ export const Heading3Shape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -62,7 +60,7 @@ export const Heading3Shape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={20}
+        fontSize={fontSize}
         fill={textColor}
         align="center"
         verticalAlign="middle"

diff --git a/src/common/components/mock-components/front-text-components/link-text-shape.tsx b/src/common/components/mock-components/front-text-components/link-text-shape.tsx
@@ -41,7 +41,10 @@ export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, textDecoration } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { textColor, textDecoration, fontSize } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -59,7 +62,7 @@ export const LinkShape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={20}
+        fontSize={fontSize}
         fill={textColor}
         align="center"
         verticalAlign="middle"

diff --git a/src/common/components/mock-components/front-text-components/normaltext-shape.tsx b/src/common/components/mock-components/front-text-components/normaltext-shape.tsx
@@ -40,10 +40,8 @@ export const NormaltextShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +59,7 @@ export const NormaltextShape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={18}
+        fontSize={fontSize}
         fill={textColor}
         align="center"
         verticalAlign="middle"

diff --git a/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx b/src/common/components/mock-components/front-text-components/paragraph-text-shape.tsx
@@ -40,7 +40,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { textColor, fontSize } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -58,7 +58,7 @@ export const ParagraphShape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={14}
+        fontSize={fontSize}
         fill={textColor}
         align="left"
         ellipsis={true}

diff --git a/src/common/components/mock-components/front-text-components/smalltext-shape.tsx b/src/common/components/mock-components/front-text-components/smalltext-shape.tsx
@@ -40,10 +40,8 @@ export const SmalltextShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { textColor, fontVariant, fontStyle, textDecoration } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { textColor, fontVariant, fontStyle, textDecoration, fontSize } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +59,7 @@ export const SmalltextShape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={14}
+        fontSize={fontSize}
         fill={textColor}
         align="center"
         verticalAlign="middle"

diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts
@@ -32,6 +32,11 @@ export const useShapeProps = (
     [otherProps?.fontStyle]
   );
 
+  const fontSize = useMemo(
+    () => otherProps?.fontSize ?? defaultStyleShape.DEFAULT_FONT_SIZE,
+    [otherProps?.fontSize]
+  );
+
   const textDecoration = useMemo(
     () =>
       otherProps?.textDecoration ?? defaultStyleShape.DEFAULT_TEXT_DECORATION,
@@ -74,6 +79,7 @@ export const useShapeProps = (
     selectedBackgroundColor,
     fontVariant,
     fontStyle,
+    fontSize,
     textDecoration,
   };
 };
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -163,6 +163,7 @@ export interface OtherProps {
   textColor?: string;
   fontVariant?: string;
   fontStyle?: string;
+  fontSize?: number;
   textDecoration?: string;
   checked?: boolean;
   icon?: IconInfo;

diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts
@@ -101,6 +101,7 @@ export interface CanvasContextModel {
   setActivePage: (pageId: string) => void;
   deletePage: (pageIndex: number) => void;
   editPageTitle: (pageIndex: number, newName: string) => void;
+  activePageIndex: number;
   isThumbnailContextMenuVisible: boolean;
   setIsThumbnailContextMenuVisible: React.Dispatch<
     React.SetStateAction<boolean>

diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx
@@ -307,6 +307,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         setActivePage,
         deletePage,
         editPageTitle,
+        activePageIndex: document.activePageIndex,
         isThumbnailContextMenuVisible,
         setIsThumbnailContextMenuVisible,
       }}

diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -1,6 +1,7 @@
 import {
   INPUT_SHAPE,
   BASIC_SHAPE,
+  FONT_SIZE_VALUES,
   LINK_SHAPE,
 } from '@/common/components/mock-components/front-components/shape.const';
 import { ShapeType, OtherProps } from '@/core/model';
@@ -124,6 +125,7 @@ export const generateDefaultOtherProps = (
         fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
+        fontSize: FONT_SIZE_VALUES.HEADING1,
       };
 
     case 'heading2':
@@ -132,34 +134,42 @@ export const generateDefaultOtherProps = (
         fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
+        fontSize: FONT_SIZE_VALUES.HEADING2,
       };
     case 'heading3':
       return {
         textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`,
         fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
+        fontSize: FONT_SIZE_VALUES.HEADING3,
       };
     case 'link':
       return {
         textColor: `${LINK_SHAPE.DEFAULT_FILL_TEXT}`,
         textDecoration: 'underline',
+        fontSize: FONT_SIZE_VALUES.LINK,
       };
     case 'normaltext':
       return {
         textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`,
         fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
+        fontSize: FONT_SIZE_VALUES.NORMALTEXT,
       };
     case 'smalltext':
       return {
         textColor: `${BASIC_SHAPE.DEFAULT_STROKE_COLOR}`,
         fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
         fontStyle: `${INPUT_SHAPE.DEFAULT_FONT_STYLE}`,
         textDecoration: `${INPUT_SHAPE.DEFAULT_TEXT_DECORATION}`,
+        fontSize: FONT_SIZE_VALUES.SMALLTEXT,
       };
     case 'paragraph':
+      return {
+        fontSize: FONT_SIZE_VALUES.PARAGRAPH,
+      };
     case 'label':
       return {
         textColor: '#000000',

diff --git a/src/pods/properties/components/font-size/font-size.module.css b/src/pods/properties/components/font-size/font-size.module.css
@@ -0,0 +1,32 @@
+.container {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.container :first-child {
+  flex: 1;
+}
+
+.button {
+  border: none;
+  color: var(--text-color);
+  background-color: inherit;
+  width: var(--space-lg);
+  height: var(--space-lg);
+  border-radius: var(--border-radius-s);
+  font-size: var(--fs-xs);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-s);
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: var(--primary-100);
+}
diff --git a/src/pods/properties/components/font-size/font-size.tsx b/src/pods/properties/components/font-size/font-size.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import classes from './font-size.module.css';
+
+interface Props {
+  fontSize: number | undefined;
+  label: string;
+  onChange: (fontSize: number) => void;
+}
+
+export const FontSize: React.FC<Props> = props => {
+  const { label, fontSize, onChange } = props;
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    onChange(Number(value));
+  };
+
+  return (
+    <div className={classes.container}>
+      <p>{label}</p>
+      <select value={fontSize} onChange={handleChange}>
+        <option value="8">8</option>
+        <option value="9">9</option>
+        <option value="10">10</option>
+        <option value="11">11</option>
+        <option value="12">12</option>
+        <option value="14">14</option>
+        <option value="16">16</option>
+        <option value="18">18</option>
+        <option value="20">20</option>
+        <option value="22">22</option>
+        <option value="24">24</option>
+        <option value="26">26</option>
+        <option value="28">28</option>
+        <option value="36">36</option>
+        <option value="48">48</option>
+        <option value="72">72</option>
+      </select>
+    </div>
+  );
+};
diff --git a/src/pods/properties/components/font-size/index.ts b/src/pods/properties/components/font-size/index.ts
@@ -0,0 +1 @@
+export * from './font-size';
diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx
@@ -12,6 +12,7 @@ import { ActiveElementSelector } from './components/active-element-selector/acti
 import { FontStyle } from './components/font-style';
 import { FontVariant } from './components/font-variant/font-variant';
 import { TextDecoration } from './components/text-decoration/text-decoration';
+import { FontSize } from './components/font-size';
 
 export const PropertiesPod = () => {
   const { selectionInfo } = useCanvasContext();
@@ -165,6 +166,15 @@ export const PropertiesPod = () => {
               }
             />
           )}
+          {selectedShapeData?.otherProps?.fontSize && (
+            <FontSize
+              label="Font Size"
+              fontSize={selectedShapeData?.otherProps?.fontSize}
+              onChange={fontSize =>
+                updateOtherPropsOnSelected('fontSize', fontSize)
+              }
+            />
+          )}
         </>
       )}
       {selectedShapeData?.otherProps?.activeElement !== undefined && (