Dodano funkcje przybliżania, oddalania i

przewijania planszy.

README.md

@@ -28,9 +28,9 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
 - [x] 14. Usunięcie tekstu
 
 ### Plansza i akcje na niej
-- [ ] 15. Przybliżenie planszy
+- [x] 15. Przybliżenie planszy
-- [ ] 16. Oddalenie planszy
+- [x] 16. Oddalenie planszy
-- [ ] 17. Przewijanie planszy
+- [x] 17. Przewijanie planszy
 
 *P.S. Jak będzie brakować funkcjonalności:*
 - Obracanie kształtu

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>

style.css

@@ -69,4 +69,48 @@
  .toolbar-wrapper {
      padding-bottom: 30px;
      padding: 20px;
- }
+ }
+
+.zoom-wrapper {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    padding: 10px 20px !important;
+}
+
+.zoom-wrapper button {
+    background: white;
+    color: #3498db;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+    outline: none;
+}
+
+.zoom-wrapper button:hover {
+    background: #2980b9;
+    color: white;
+    transform: scale(1.1);
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
+}
+
+.zoom-wrapper button:active {
+    transform: scale(0.95);
+}
+
+/* Fajny efekt przy najechaniu */
+.zoom-wrapper button i {
+    transition: transform 0.3s ease;
+}
+
+.zoom-wrapper button:hover i {
+    transform: scale(1.2);
+}