Feature/#122 other properties

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
     "@types/lodash.clonedeep": "^4.5.9",
+    "immer": "^10.1.1",
     "konva": "^9.3.12",
     "lodash.clonedeep": "^4.5.0",
     "react": "^18.3.1",

src/common/components/front-components/button-shape.tsx

@@ -17,7 +17,10 @@ export const getButtonShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   buttonShapeRestrictions;
 
 export const ButtonShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+  (
+    { x, y, width, height, id, onSelected, text, otherProps, ...shapeProps },
+    ref
+  ) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(buttonShapeRestrictions, width, height);
 
@@ -37,9 +40,9 @@ export const ButtonShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={14}
-          stroke="black"
+          stroke={otherProps?.stroke ?? 'black'}
           strokeWidth={2}
-          fill="white"
+          fill={otherProps?.backgroundColor ?? 'white'}
         />
         <Text
           x={0}

src/common/components/front-components/input-shape.tsx

@@ -1,5 +1,5 @@
 import { ShapeSizeRestrictions } from '@/core/model';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ShapeProps } from './shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
@@ -17,10 +17,23 @@ export const getInputShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   inputShapeRestrictions;
 
 export const InputShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
+  (
+    { x, y, width, height, id, onSelected, text, otherProps, ...shapeProps },
+    ref
+  ) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(inputShapeRestrictions, width, height);
 
+    const stroke = useMemo(
+      () => otherProps?.stroke ?? 'black',
+      [otherProps?.stroke]
+    );
+
+    const fill = useMemo(
+      () => otherProps?.backgroundColor ?? 'white',
+      [otherProps?.backgroundColor]
+    );
+
     return (
       <Group
         x={x}
@@ -37,9 +50,9 @@ export const InputShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={5}
-          stroke="black"
+          stroke={stroke}
           strokeWidth={2}
-          fill="white"
+          fill={fill}
         />
         <Text
           x={10}

src/common/components/front-components/shape.model.ts

@@ -1,7 +1,7 @@
 // Important: we extend from Shapeconfig so we can get additional shape params
 // TODO: we will need to add more props like for instance text content
 
-import { ShapeType } from '@/core/model';
+import { OtherProps, ShapeType } from '@/core/model';
 import { ShapeConfig } from 'konva/lib/Shape';
 
 // but we have to check how to pass it to the shape (there will be different types of shapes)
@@ -12,4 +12,5 @@ export interface ShapeProps extends ShapeConfig {
   width: number;
   height: number;
   onSelected: (id: string, type: ShapeType) => void;
+  otherProps?: OtherProps;
 }

src/core/model/index.ts

@@ -52,6 +52,11 @@ export interface Coord {
   y: number;
 }
 
+export interface OtherProps {
+  stroke?: string;
+  backgroundColor?: string;
+}
+
 export interface ShapeModel {
   id: string;
   x: number;
@@ -63,4 +68,5 @@ export interface ShapeModel {
   hasLateralTransformer: boolean;
   editType?: EditType;
   text?: string;
+  otherProps?: OtherProps;
 }

src/core/providers/canvas/canvas.model.ts

@@ -1,4 +1,11 @@
-import { Coord, ShapeModel, ShapeRefs, ShapeType, Size } from '@/core/model';
+import {
+  Coord,
+  OtherProps,
+  ShapeModel,
+  ShapeRefs,
+  ShapeType,
+  Size,
+} from '@/core/model';
 import Konva from 'konva';
 import { Node, NodeConfig } from 'konva/lib/Node';
 
@@ -16,8 +23,14 @@ export interface SelectionInfo {
   selectedShapeRef: React.MutableRefObject<Node<NodeConfig> | null>;
   selectedShapeId: string;
   selectedShapeType: ShapeType | null;
+  getSelectedShapeData: () => ShapeModel | undefined;
   setZIndexOnSelected: (action: ZIndexAction) => void;
   updateTextOnSelected: (text: string) => void;
+  // TODO: Update, A. KeyOf B. Move To useSelectionInfo
+  updateOtherPropsOnSelected: <K extends keyof OtherProps>(
+    key: K,
+    value: OtherProps[K]
+  ) => void;
 }
 
 export interface CanvasContextModel {

src/core/providers/canvas/use-selection.hook.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import Konva from 'konva';
-import { ShapeRefs, ShapeType } from '@/core/model';
+import { OtherProps, ShapeModel, ShapeRefs, ShapeType } from '@/core/model';
 import { DocumentModel, SelectionInfo, ZIndexAction } from './canvas.model';
 import { performZIndexAction } from './zindex.util';
 
@@ -69,6 +69,24 @@ export const useSelection = (
     }));
   };
 
+  // TODO: Rather implement this using immmer
+
+  const updateOtherPropsOnSelected = <K extends keyof OtherProps>(
+    key: K,
+    value: OtherProps[K]
+  ) => {
+    setDocument(prevDocument => ({
+      shapes: prevDocument.shapes.map(shape =>
+        shape.id === selectedShapeId
+          ? { ...shape, otherProps: { ...shape.otherProps, [key]: value } }
+          : shape
+      ),
+    }));
+  };
+
+  const getSelectedShapeData = (): ShapeModel | undefined =>
+    document.shapes.find(shape => shape.id === selectedShapeId);
+
   return {
     transformerRef,
     shapeRefs,
@@ -77,7 +95,9 @@ export const useSelection = (
     selectedShapeRef,
     selectedShapeId,
     selectedShapeType,
+    getSelectedShapeData,
     setZIndexOnSelected,
     updateTextOnSelected,
+    updateOtherPropsOnSelected,
   };
 };

src/pods/canvas/canvas.model.ts

@@ -1,4 +1,11 @@
-import { Coord, ShapeType, Size, ShapeModel, EditType } from '@/core/model';
+import {
+  Coord,
+  ShapeType,
+  Size,
+  ShapeModel,
+  EditType,
+  OtherProps,
+} from '@/core/model';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -233,6 +240,18 @@ const getShapeEditInlineType = (shapeType: ShapeType): EditType | undefined => {
   return result;
 };
 
+export const generateDefaultOtherProps = (
+  shapeType: ShapeType
+): OtherProps | undefined => {
+  switch (shapeType) {
+    case 'input':
+    case 'button':
+      return { stroke: '#000000', backgroundColor: '#FFFFFF' };
+    default:
+      return undefined;
+  }
+};
+
 // TODO: create interfaces to hold Coordination and Size
 // coordinate: { x: number, y: number }
 // size: { width: number, height: number }
@@ -251,6 +270,7 @@ export const createShape = (coord: Coord, shapeType: ShapeType): ShapeModel => {
     hasLateralTransformer: doesShapeHaveLateralTransformer(shapeType),
     text: generateDefaultTextValue(shapeType),
     editType: getShapeEditInlineType(shapeType),
+    otherProps: generateDefaultOtherProps(shapeType),
   };
 };
 

src/pods/canvas/shape-renderer/simple-component/button.renderer.tsx

@@ -26,6 +26,7 @@ export const renderButton = (
       onTransformEnd={handleTransform}
       isEditable={shape.allowsInlineEdition}
       text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };

src/pods/canvas/shape-renderer/simple-component/input.renderer.tsx

@@ -26,6 +26,7 @@ export const renderInput = (
       onTransformEnd={handleTransform}
       isEditable={shape.allowsInlineEdition}
       text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };

src/pods/properties/components/color-picker.component.tsx

@@ -0,0 +1,20 @@
+interface Props {
+  label: string;
+  color: string;
+  onChange: (color: string) => void;
+}
+
+export const ColorPicker: React.FC<Props> = props => {
+  const { label, color, onChange } = props;
+
+  return (
+    <div>
+      <label>{label}</label>
+      <input
+        type="color"
+        value={color}
+        onChange={e => onChange(e.target.value)}
+      />
+    </div>
+  );
+};

src/pods/properties/properties.pod.tsx

@@ -1,22 +1,42 @@
 import { useCanvasContext } from '@/core/providers';
 import classes from './properties.pod.module.css';
 import { ZIndexOptions } from './components/zindex/zindex-option.component';
+import { ColorPicker } from './components/color-picker.component';
 
 export const PropertiesPod = () => {
   const { selectionInfo } = useCanvasContext();
+  const { getSelectedShapeData, updateOtherPropsOnSelected } = selectionInfo;
 
   const selectedShapeID = selectionInfo?.selectedShapeRef.current ?? null;
 
   if (!selectedShapeID) {
     return null;
   }
 
+  const selectedShapeData = getSelectedShapeData();
+
   return (
     <div>
       <div className={classes.title}>
         <p>Properties</p>
       </div>
       <ZIndexOptions selectionInfo={selectionInfo} />
+      {selectedShapeData?.otherProps?.stroke && (
+        <ColorPicker
+          label="Color"
+          color={selectedShapeData.otherProps.stroke}
+          onChange={color => updateOtherPropsOnSelected('stroke', color)}
+        />
+      )}
+      {selectedShapeData?.otherProps?.backgroundColor && (
+        <ColorPicker
+          label="Background Color"
+          color={selectedShapeData.otherProps.backgroundColor}
+          onChange={color =>
+            updateOtherPropsOnSelected('backgroundColor', color)
+          }
+        />
+      )}
     </div>
   );
 };