Implemented scalable window

rohit20v · Jan 1, 2025 · 0fa4367 · 0fa4367
1 parent 0a74ae0
commit 0fa4367
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 12 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -10,28 +10,34 @@ import {Shapes} from "./utils/types.ts";
 import {createShape} from "./utils/createShape.ts";
 import Konva from "konva";
 import {KonvaEventObject} from "konva/lib/Node";
+import {useScreenZoom} from "./hooks/useScreenZoom.ts";
 
 
 function App() {
     const [tool, setTool] = useState(TOOLS.PENCIL)
-
     const [shapes, setShapes] = useState<Shapes[]>([])
-
     const [selectColor, setSelectedColor] = useState<string>()
     const [strokeWidth, setStrokeWidth] = useState<number>()
+    const [scale, setScale] = useState(1)
+    const [position, setPosition] = useState<{ x: number, y: number }>({x: 0, y: 0})
 
     const stageRef = useRef<StageType>();
     const isDrawing = useRef<boolean>()
     const transformerRef = useRef<Konva.Transformer>();
     const shapeId = useRef<string>()
 
+
     const isDraggable = tool === TOOLS.SELECT
 
+    const {handleWheel} = useScreenZoom({stageRef, scale, setScale, position, setPosition})
+
     const handleOnPointerMove = () => {
         if (tool === TOOLS.SELECT || !isDrawing.current) return;
 
         const stage = stageRef.current;
-        const {x, y} = stage.getPointerPosition();
+        const pointerPos = stage.getPointerPosition();
+        const x = (pointerPos.x - position.x) / scale
+        const y = (pointerPos.y - position.y) / scale
 
         setShapes(shapes.map((currentShape) => {
             if (currentShape.id === shapeId.current) {
@@ -77,8 +83,9 @@ function App() {
         if (tool === TOOLS.SELECT) return;
 
         const stage = stageRef.current;
-        const {x, y} = stage.getPointerPosition();
-
+        const pointerPos = stage.getPointerPosition();
+        const x = (pointerPos.x - position.x) / scale
+        const y = (pointerPos.y - position.y) / scale
         const id = uuid()
 
         shapeId.current = id;
@@ -132,14 +139,19 @@ function App() {
                 onPointerDown={handleOnPointerDown}
                 onPointerMove={handleOnPointerMove}
                 onPointerUp={handleOnPointerUp}
+                onWheel={handleWheel}
+                scaleX={scale}
+                scaleY={scale}
+                x={position.x}
+                y={position.y}
+                draggable={tool === TOOLS.SELECT}
             >
                 <Layer>
                     <Rect
-                        x={0}
-                        y={0}
-                        width={window.innerWidth}
-                        height={window.innerHeight}
-                        fill={"white"}
+                        x={-100000}
+                        y={-100000}
+                        width={200000}
+                        height={200000}
                         id={"background"}
                         onClick={() => transformerRef.current.nodes([])}
                     />

diff --git a/src/components/ToolPickerContainer.tsx b/src/components/ToolPickerContainer.tsx
@@ -74,7 +74,7 @@ const ToolPickerContainer = ({tool, setTool, stageRef, setSelectedColor, setStro
 
                     <ColorPickerTool color={selectedColor} isVisible={isPickerVisible} onChange={handleColorChange}
                                      onToggle={togglePicker}/>
-                    <input type="range" min={0} max={16} value={strokeSize}
+                    <input type="range" min={0} max={24} value={strokeSize}
                            onChange={(event) => setStrokeSize(Number(event.target.value))}/>
 
                     {/*<ThemeToggler onClick={toggleTheme} theme={theme}/>*/}

diff --git a/src/hooks/useScreenZoom.ts b/src/hooks/useScreenZoom.ts
@@ -0,0 +1,38 @@
+import {KonvaEventObject} from "konva/lib/Node";
+import {Stage} from "konva/lib/Stage";
+import React from "react";
+
+export const useScreenZoom = ({stageRef, scale, setScale, position, setPosition}: {
+    stageRef: React.RefObject<Stage>
+    scale: number,
+    setScale: (newScale: number) => void
+    position: { x: number, y: number }
+    setPosition: (newPosition: { x: number, y: number }) => void
+
+}) => {
+    const handleWheel = (e: KonvaEventObject<WheelEvent>) => {
+        e.evt.preventDefault();
+
+        const stage = stageRef.current;
+        const oldScale = scale;
+
+        const pointer = stage.getPointerPosition();
+        const mousePointTo = {
+            x: (pointer.x - position.x) / oldScale,
+            y: (pointer.y - position.y) / oldScale,
+        };
+
+        const newScale = e.evt.deltaY < 0 ? oldScale * 1.1 : oldScale / 1.1;
+        const limitedScale = Math.min(Math.max(0, newScale), 5);
+        setScale(limitedScale);
+
+        const newPos = {
+            x: pointer.x - mousePointTo.x * limitedScale,
+            y: pointer.y - mousePointTo.y * limitedScale,
+        };
+
+        setPosition(newPos);
+    };
+
+    return {handleWheel};
+};
diff --git a/src/utils/createShape.ts b/src/utils/createShape.ts
@@ -8,7 +8,7 @@ export const createShape = (tool: string, id: string, x: number, y: number, sele
         case TOOLS.CIRCLE:
             return {id, x, y, fill: selectColor, strokeWidth, stroke: "black", type: 'circle', radius: 0};
         case TOOLS.ARROW:
-            return {id, points, fill: selectColor, strokeWidth, stroke: "black", type: 'arrow'};
+            return {id, points, fill: selectColor, strokeWidth: strokeWidth * 2, stroke: selectColor, type: 'arrow'};
         case TOOLS.PENCIL:
             return {id, points, fill: selectColor, strokeWidth, stroke: selectColor, type: 'pencil'};
         case TOOLS.TRIANGLE: