Merge pull request #74 from Lemoncode/feature/#73-zoom-support

Feature/#73 zoom support

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

@@ -2,33 +2,40 @@ import { ShapeSizeRestrictions } from '@/core/model';
 import { forwardRef } from 'react';
 import { ShapeProps } from './shape.model';
 import { Group, Rect, Text } from 'react-konva';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 
-export const getInputShapeSizeRestrictions = (): ShapeSizeRestrictions => ({
+const inputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 60,
   minHeight: 50,
   maxWidth: -1,
   maxHeight: 50,
   defaultWidth: 190,
   defaultHeight: 50,
-});
+};
+
+export const getInputShapeSizeRestrictions = (): ShapeSizeRestrictions =>
+  inputShapeRestrictions;
 
 export const InputShape = forwardRef<any, ShapeProps>(
   ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+    const { width: restrictedWidth, height: restrictedHeight } =
+      fitSizeToShapeSizeRestrictions(inputShapeRestrictions, width, height);
+
     return (
       <Group
         x={x}
         y={y}
         ref={ref}
-        width={width}
-        height={height}
+        width={restrictedWidth}
+        height={restrictedHeight}
         {...shapeProps}
         onClick={() => onSelected(id, 'input')}
       >
         <Rect
           x={0}
           y={0}
-          width={width + 10}
-          height={height}
+          width={restrictedWidth}
+          height={restrictedHeight}
           cornerRadius={5}
           stroke="black"
           strokeWidth={2}
@@ -37,7 +44,8 @@ export const InputShape = forwardRef<any, ShapeProps>(
         <Text
           x={10}
           y={20}
-          width={width}
+          width={width - 10}
+          height={height - 20}
           text="Input text..."
           fontFamily="Comic Sans MS, cursive"
           fontSize={15}

src/common/utils/shapes/shape-restrictions.ts

@@ -0,0 +1,23 @@
+import { ShapeSizeRestrictions, Size } from '@/core/model';
+
+// TODO Add Unit tests, issue: #45
+export const fitSizeToShapeSizeRestrictions = (
+  shapeSizeRestrictions: ShapeSizeRestrictions,
+  width: number,
+  height: number
+): Size => {
+  const newWidth =
+    shapeSizeRestrictions.maxWidth !== -1
+      ? Math.min(shapeSizeRestrictions.maxWidth, width)
+      : width;
+
+  const newHeight =
+    shapeSizeRestrictions.maxHeight !== -1
+      ? Math.min(shapeSizeRestrictions.maxHeight, height)
+      : height;
+
+  return {
+    width: Math.max(newWidth, shapeSizeRestrictions.minWidth),
+    height: Math.max(newHeight, shapeSizeRestrictions.minHeight),
+  };
+};

src/core/model/index.ts

@@ -19,6 +19,16 @@ export type ShapeType =
   | 'timepickerinput';
 /* | "text"| "button" |  "radio" | "image"*/
 
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export interface Coord {
+  x: number;
+  y: number;
+}
+
 export interface ShapeModel {
   id: string;
   x: number;

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

@@ -3,4 +3,6 @@ import { ShapeModel } from '@/core/model';
 export interface CanvasContextModel {
   shapes: ShapeModel[];
   setShapes: React.Dispatch<React.SetStateAction<ShapeModel[]>>;
+  scale: number;
+  setScale: React.Dispatch<React.SetStateAction<number>>;
 }

src/core/providers/canvas/canvas.provider.tsx

@@ -9,9 +9,10 @@ interface Props {
 export const CanvasProvider: React.FC<Props> = props => {
   const { children } = props;
   const [shapes, setShapes] = React.useState<ShapeModel[]>([]);
+  const [scale, setScale] = React.useState(1);
 
   return (
-    <CanvasContext.Provider value={{ shapes, setShapes }}>
+    <CanvasContext.Provider value={{ shapes, setShapes, scale, setScale }}>
       {children}
     </CanvasContext.Provider>
   );

src/pods/canvas/canvas.model.ts

@@ -1,5 +1,6 @@
-import { ShapeModel, ShapeType } from '@/core/model';
+import { Coord, ShapeType, Size, ShapeModel } from '@/core/model';
 import { v4 as uuidv4 } from 'uuid';
+
 import {
   getComboBoxShapeSizeRestrictions,
   getInputShapeSizeRestrictions,
@@ -11,16 +12,6 @@ import {
 } from '@/common/components/front-components';
 import { getBrowserWindowShapeSizeRestrictions } from '@/common/components/front-containers';
 
-export interface Size {
-  width: number;
-  height: number;
-}
-
-export interface Coord {
-  x: number;
-  y: number;
-}
-
 const getDefaultSizeFromShape = (shapeType: ShapeType): Size => {
   switch (shapeType) {
     case 'combobox':

src/pods/canvas/canvas.pod.tsx

@@ -14,9 +14,10 @@ import {
   moveZIndexTopOneLevel,
   moveZIndexToTop,
 } from './zindex.util';
+import { ShapeModel } from '@/core/model';
 
 export const CanvasPod = () => {
-  const { shapes, setShapes } = useCanvasContext();
+  const { shapes, setShapes, scale } = useCanvasContext();
 
   const {
     shapeRefs,
@@ -98,6 +99,7 @@ export const CanvasPod = () => {
         onMouseDown={handleClearSelection}
         onTouchStart={handleClearSelection}
         ref={stageRef}
+        scale={{ x: scale, y: scale }}
       >
         <Layer>
           {

src/pods/canvas/canvas.util.ts

@@ -1,6 +1,6 @@
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
 import { getButtonShapeSizeRestrictions } from '@/common/components/front-components/button-shape';
-import { Coord, Size } from './canvas.model';
+import { Coord } from '@/core/model';
 import {
   getComboBoxShapeSizeRestrictions,
   getInputShapeSizeRestrictions,
@@ -14,28 +14,6 @@ import { getBrowserWindowShapeSizeRestrictions } from '@/common/components/front
 import { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types';
 import { Stage } from 'konva/lib/Stage';
 
-// TODO Add Unit tests, issue: #45
-export const fitSizeToShapeSizeRestrictions = (
-  shapeSizeRestrictions: ShapeSizeRestrictions,
-  width: number,
-  height: number
-): Size => {
-  const newWidth =
-    shapeSizeRestrictions.maxWidth !== -1
-      ? Math.min(shapeSizeRestrictions.maxWidth, width)
-      : width;
-
-  const newHeight =
-    shapeSizeRestrictions.maxHeight !== -1
-      ? Math.min(shapeSizeRestrictions.maxHeight, height)
-      : height;
-
-  return {
-    width: Math.max(newWidth, shapeSizeRestrictions.minWidth),
-    height: Math.max(newHeight, shapeSizeRestrictions.minHeight),
-  };
-};
-
 const defaultShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 0,
   minHeight: 0,

src/pods/canvas/shape-renderer/index.tsx

@@ -1,4 +1,4 @@
-import { ShapeModel } from '../canvas.model';
+import { ShapeModel } from '@/core/model';
 import { ShapeRendererProps } from './model';
 import {
   renderComboBox,

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

@@ -1,5 +1,5 @@
+import { ShapeModel } from '@/core/model';
 import { ShapeRendererProps } from '../model';
-import { ShapeModel } from '../../canvas.model';
 import { ButtonShape } from '@/common/components/front-components/button-shape';
 
 export const renderButton = (

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

@@ -1,6 +1,6 @@
 import { CheckBoxShape } from '@/common/components/front-components/checkbox-shape';
 import { ShapeRendererProps } from '../model';
-import { ShapeModel } from '../../canvas.model';
+import { ShapeModel } from '@/core/model';
 
 export const renderCheckbox = (
   shape: ShapeModel,

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

@@ -1,6 +1,6 @@
 import { ComboBoxShape } from '@/common/components/front-components';
-import { ShapeModel } from '../../canvas.model';
 import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
 
 export const renderComboBox = (
   shape: ShapeModel,

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

@@ -1,6 +1,6 @@
 import { DatepickerInputShape } from '@/common/components/front-components';
-import { ShapeModel } from '../../canvas.model';
 import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
 
 export const renderDatepickerinput = (
   shape: ShapeModel,

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

@@ -1,6 +1,6 @@
 import { InputShape } from '@/common/components/front-components/input-shape';
 import { ShapeRendererProps } from '../model';
-import { ShapeModel } from '../../canvas.model';
+import { ShapeModel } from '@/core/model';
 
 export const renderInput = (
   shape: ShapeModel,

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

@@ -1,4 +1,4 @@
-import { ShapeModel } from '../../canvas.model';
+import { ShapeModel } from '@/core/model';
 import { ShapeRendererProps } from '../model';
 import { Group, Text } from 'react-konva';
 

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

@@ -1,6 +1,6 @@
 import { TextAreaShape } from '@/common/components/front-components/textarea-shape';
 import { ShapeRendererProps } from '../model';
-import { ShapeModel } from '../../canvas.model';
+import { ShapeModel } from '@/core/model';
 
 export const renderTextArea = (
   shape: ShapeModel,

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

@@ -1,6 +1,6 @@
 import { TimepickerInputShape } from '@/common/components/front-components';
-import { ShapeModel } from '../../canvas.model';
 import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
 
 export const renderTimepickerinput = (
   shape: ShapeModel,

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

@@ -1,5 +1,5 @@
+import { ShapeModel } from '@/core/model';
 import { ShapeRendererProps } from '../model';
-import { ShapeModel } from '../../canvas.model';
 import { ToggleSwitch } from '@/common/components/front-components/toggleswitch-shape';
 
 export const renderToggleSwitch = (

src/pods/canvas/shape-renderer/simple-container/browserwindow.render.tsx

@@ -1,6 +1,6 @@
 import { BrowserWindowShape } from '@/common/components/front-containers';
-import { ShapeModel } from '../../canvas.model';
 import { ShapeRendererProps } from '../model';
+import { ShapeModel } from '@/core/model';
 
 export const renderBrowserWindow = (
   shape: ShapeModel,

src/pods/canvas/use-monitor-shape.hook.ts

@@ -7,7 +7,8 @@ import {
   convertFromDivElementCoordsToKonvaCoords,
 } from './canvas.util';
 import Konva from 'konva';
-import { createShape, ShapeModel } from './canvas.model';
+import { createShape } from './canvas.model';
+import { ShapeModel } from '@/core/model';
 
 export const useMonitorShape = (
   dropRef: React.MutableRefObject<null>,

src/pods/canvas/use-selection.hook.ts

@@ -1,9 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
-import { ShapeModel, ShapeRefs } from './canvas.model';
+import { ShapeRefs } from './canvas.model';
 import Konva from 'konva';
-import { ShapeType } from '@/core/model';
-
-
+import { ShapeModel, ShapeType } from '@/core/model';
 
 export const useSelection = (shapes: ShapeModel[]) => {
   const transformerRef = useRef<Konva.Transformer>(null);

src/pods/canvas/use-transform.hook.ts

@@ -1,11 +1,6 @@
 import { Node, NodeConfig } from 'konva/lib/Node';
-import { Coord, ShapeModel, Size } from './canvas.model';
 import { Box } from 'konva/lib/shapes/Transformer';
-import {
-  fitSizeToShapeSizeRestrictions,
-  getShapeSizeRestrictions,
-} from './canvas.util';
-import { ShapeType } from '@/core/model';
+import { Coord, ShapeModel, ShapeType, Size } from '@/core/model';
 
 interface TransFormSelectedInfo {
   selectedShapeRef: React.MutableRefObject<Node<NodeConfig> | null>;
@@ -17,8 +12,7 @@ export const useTransform = (
   setShapes: (value: React.SetStateAction<ShapeModel[]>) => void,
   transformSelectedInfo: TransFormSelectedInfo
 ) => {
-  const { selectedShapeId, selectedShapeRef, selectedShapeType } =
-    transformSelectedInfo;
+  const { selectedShapeId, selectedShapeRef } = transformSelectedInfo;
 
   const updateShapeSizeAndPosition = (
     id: string,
@@ -54,17 +48,11 @@ export const useTransform = (
     node.scaleY(1);
   };
 
-  const handleTransformerBoundBoxFunc = (_: Box, newBox: Box) => {
-    const limitedSize = fitSizeToShapeSizeRestrictions(
-      getShapeSizeRestrictions(selectedShapeType),
-      newBox.width,
-      newBox.height
-    );
-    return {
-      ...newBox,
-      width: limitedSize.width,
-      height: limitedSize.height,
-    };
+  const handleTransformerBoundBoxFunc = (oldBox: Box, newBox: Box) => {
+    if (newBox.width < 5 || newBox.height < 5) {
+      return oldBox;
+    }
+    return newBox;
   };
 
   return { handleTransform, handleTransformerBoundBoxFunc };

src/pods/canvas/zindex.util.ts

@@ -1,4 +1,4 @@
-import { ShapeModel } from './canvas.model';
+import { ShapeModel } from '@/core/model';
 
 // TOO Add Unit tests to all these methods: #65
 export const moveZIndexToTop = (

src/pods/toolbar/components/zoom-in-button/zoom-in-button.tsx

@@ -1,10 +1,13 @@
 import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
 import { ZoomInIcon } from '@/common/components/icons/zoom-in.component';
+import { useCanvasContext } from '@/core/providers';
 
 export const ZoomInButton = () => {
+  const { setScale } = useCanvasContext();
+
   const handleClick = () => {
-    console.log('ZoomIn');
+    setScale(prevScale => prevScale * 1.1);
   };
 
   return (

src/pods/toolbar/components/zoom-out-component/zoom-out-button.tsx

@@ -1,10 +1,13 @@
 import { ZoomOutIcon } from '@/common/components/icons/zoom-out.component';
 import ToolbarButton from '../toolbar-button/toolbar-button';
 import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { useCanvasContext } from '@/core/providers';
 
 export const ZoomOutButton = () => {
+  const { setScale } = useCanvasContext();
+
   const handleClick = () => {
-    console.log('ZoomOut');
+    setScale(prevScale => prevScale * 0.9);
   };
 
   return (