From 348bd6b1ba6fee5591411da58f4427385d5c440a Mon Sep 17 00:00:00 2001
From: mateusz-sz <mateusz.sz@protonmail.com>
Date: Mon, 16 Jan 2023 13:55:31 +0100
Subject: [PATCH] Implement Circuit public zooming methods. (#93)

---
 src/index.mjs | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/index.mjs b/src/index.mjs
index 3c2b39c..2d95c94 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -113,6 +113,14 @@ export class Circuit extends HeadlessCircuit {
     displayOn(elem) {
         return this._makePaper(elem, this._graph);
     }
+    scaleAndRefreshPaper(paper, scale) {
+        paper.scale(Math.pow(1.1, scale));
+
+        const graph = paper.model;
+        paper.freeze();
+        graph.resetCells(graph.getCells());
+        paper.unfreeze();
+    }
     _makePaper(elem, graph) {
         this._engine.observeGraph(graph);
         const opts = _.merge({ el: elem, model: graph }, paperOptions);
@@ -182,16 +190,20 @@ export class Circuit extends HeadlessCircuit {
                 });
             });
 
+            // Since ids are generated dynamically, we should ensure,
+            // that we use a selector that escapes possible special characters
+            const btnIdSelector = btnId.replace(/[^A-Za-z0-9\s]/g, '\\$&');
+            const zoomInBtn = $(`#${btnIdSelector}_zoomIn`);
+            const zoomOutBtn = $(`#${btnIdSelector}_zoomOut`);
+
             let scaleIndex = 0;
-            $(`button#${btnId}_zoomIn`).click((e) => {
+            zoomInBtn.click(() => {
                 scaleIndex++;
-                paper.scale(Math.pow(1.1, scaleIndex));
-                graph.resetCells(graph.getCells());
+                this.scaleAndRefreshPaper(paper, scaleIndex);
             });
-            $(`button#${btnId}_zoomOut`).click((e) => {
+            zoomOutBtn.click(() => {
                 scaleIndex--;
-                paper.scale(Math.pow(1.1, scaleIndex));
-                graph.resetCells(graph.getCells());
+                this.scaleAndRefreshPaper(paper, scaleIndex);
             });
         });
         this.listenTo(paper, 'open:memorycontent', (subcircuitModal, closeCallback) => {