Dodano funkcje przybliżania, oddalania i

przewijania planszy.

index.html

@@ -18,6 +18,11 @@
             <div id="shape-diamond" class="shape" data-type="diamond"></div>
             <div id="shape-text" class="shape" data-type="text">Tekst</div>
         </div>
+        <p>Zoom</p>
+        <div class="zoom-wrapper toolbar-wrapper">
+            <button id="zoom-in">+</button>
+            <button id="zoom-out">-</button>
+        </div>
     </div>
     <div class="canvas-container">
         <div id="paper"></div>
@@ -207,7 +212,8 @@
             selectedElement = elementView.model;
         });
 
-        paper.on('blank:pointerdown', function () {
+        let panStart = null;
+        paper.on('blank:pointerdown', function (evt) {
             if (activeElementView) {
                 if (typeof activeElementView.hideTools === 'function') {
                     activeElementView.hideTools();
@@ -218,6 +224,29 @@
                 activeElementView = null;
             }
             selectedElement = null;
+            //ruszanie caloscia
+            panStart = {
+                x: evt.clientX,
+                y: evt.clientY,
+                tx: paper.translate().tx,
+                ty: paper.translate().ty
+            };
+            paper.$el.css('cursor', 'grabbing');
+        });
+
+        $(document).on('mousemove', function (evt) {
+            if (panStart) {
+                const dx = evt.clientX - panStart.x;
+                const dy = evt.clientY - panStart.y;
+                paper.translate(panStart.tx + dx, panStart.ty + dy);
+            }
+        });
+
+        $(document).on('mouseup', function () {
+            if (panStart) {
+                panStart = null;
+                paper.$el.css('cursor', 'default');
+            }
         });
 
         //add text to text block - START
@@ -240,6 +269,33 @@
             }
         });
         //add text to text block - END
+
+        // Zoom
+        const zoomStep = 0.2;
+        const minScale = 0.2;
+        const maxScale = 3.0;
+
+        $('#zoom-in').click(function () {
+            const currentScale = paper.scale().sx;
+            const newScale = Math.min(maxScale, currentScale + zoomStep);
+            paper.scale(newScale, newScale);
+        });
+
+        $('#zoom-out').click(function () {
+            const currentScale = paper.scale().sx;
+            const newScale = Math.max(minScale, currentScale - zoomStep);
+            paper.scale(newScale, newScale);
+        });
+
+        // Zoom za pomoca kolka myszy
+        paper.on('blank:mousewheel cell:mousewheel', function (evt, x, y, delta) {
+            evt.preventDefault();
+            const oldScale = paper.scale().sx;
+            const zoomFactor = 0.2;
+            let newScale = oldScale * (1 + delta * zoomFactor);
+            newScale = Math.max(minScale, Math.min(maxScale, newScale));
+            paper.scale(newScale, newScale, x, y);
+        });
     });
     </script>
 </body>