From 1bf1e1b389ff8fd0087a6cdc80e15d44c9e4396e Mon Sep 17 00:00:00 2001
From: Kuba <sdpgrpg@gmail.com>
Date: Tue, 18 Nov 2025 22:14:09 +0100
Subject: [PATCH] =?UTF-8?q?Dodano=20funkcje=20przybli=C5=BCania,=20oddalan?=
 =?UTF-8?q?ia=20i=20przewijania=20planszy.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  |  6 +++---
 index.html | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  | 46 ++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index ea8e85f..b4bf5ab 100644
--- a/README.md
+++ b/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
-- [ ] 16. Oddalenie planszy
-- [ ] 17. Przewijanie planszy
+- [x] 15. Przybliżenie planszy
+- [x] 16. Oddalenie planszy
+- [x] 17. Przewijanie planszy
 
 *P.S. Jak będzie brakować funkcjonalności:*
 - Obracanie kształtu
diff --git a/index.html b/index.html
index ee73fb7..5b13e99 100644
--- a/index.html
+++ b/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>
diff --git a/style.css b/style.css
index deddd34..26efc0b 100644
--- a/style.css
+++ b/style.css
@@ -69,4 +69,48 @@
  .toolbar-wrapper {
      padding-bottom: 30px;
      padding: 20px;
- }
\ No newline at end of file
+ }
+
+.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);
+}
\ No newline at end of file