Fix zoom-to-mouse problem

turns out that the view container, '#canvas' in our case, must be in absolute display in order for zooming to properly calculate and scroll to mouse position. draw2d in their examples they use some jquery layout plugin that achieved such effect.
AlaaSarhan · Nov 20, 2019 · 571f965 · 571f965
1 parent d34cfda
commit 571f965
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 5 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -12,16 +12,20 @@
             background-color: #eee;
             margin: 0;
             padding: 0;
+            overflow: hidden;
         }
 
         .quickMock__toolbar {
             border-bottom: 1px solid grey;
             padding: 16px;
+            height: 40px;
         }
 
         .quickMock__canvas {
             width: 1000px;
             height: 1000px;
+            position: absolute;
+            overflow: scroll;
         }
     </style>
 </head>
@@ -31,12 +35,14 @@
     <script type="text/javascript">
     window.onload = function () {
         const { canvas, elements, draw2d } = LibQMock.createApp('canvas', 1000, 1000)
+
         const win = elements.createWindow({ title: "I'm window", width: 400, height: 400 })
         const win2 = elements.createWindow({ title: "I'm inside window", width: 200, height: 200 })
         canvas.add(win2, 200, 200)
         canvas.add(win, 100, 100)
         canvas.add(new draw2d.shape.basic.Label({ text: "I'm inside inner window", bgColor: 'grey'}), 230, 230)
 
+
         window.addEventListener('keyup', (e) => {
             switch(e.key) {
                 case 'y':
@@ -49,5 +55,5 @@
         })
     }
     </script>
-<script type="text/javascript" src="libqmock-c6bc2f1219d1ee2f214a.js"></script></body>
+<script type="text/javascript" src="libqmock-cf91cc219150643297c1.js"></script></body>
 </html>
diff --git a/dist/libqmock-c6bc2f1219d1ee2f214a.js.map b/dist/libqmock-c6bc2f1219d1ee2f214a.js.map
diff --git a/dist/libqmock-c6bc2f1219d1ee2f214a.js → dist/libqmock-cf91cc219150643297c1.js b/dist/libqmock-c6bc2f1219d1ee2f214a.js → dist/libqmock-cf91cc219150643297c1.js
diff --git a/dist/libqmock-cf91cc219150643297c1.js.map b/dist/libqmock-cf91cc219150643297c1.js.map
diff --git a/lib/App.js b/lib/App.js
@@ -3,7 +3,7 @@ import elements from '../lib/elements'
 
 export default function createApp( canvasContainerId, width, height ) {
     const canvas = new draw2d.Canvas( canvasContainerId, width, height )
-
+    canvas.setScrollArea('#'+canvasContainerId)
     return {
         canvas,
         elements,

diff --git a/lib/demo.ejs b/lib/demo.ejs
@@ -12,16 +12,20 @@
             background-color: #eee;
             margin: 0;
             padding: 0;
+            overflow: hidden;
         }
 
         .quickMock__toolbar {
             border-bottom: 1px solid grey;
             padding: 16px;
+            height: 40px;
         }
 
         .quickMock__canvas {
             width: 1000px;
             height: 1000px;
+            position: absolute;
+            overflow: scroll;
         }
     </style>
 </head>
@@ -31,12 +35,14 @@
     <script type="text/javascript">
     window.onload = function () {
         const { canvas, elements, draw2d } = LibQMock.createApp('canvas', 1000, 1000)
+
         const win = elements.createWindow({ title: "I'm window", width: 400, height: 400 })
         const win2 = elements.createWindow({ title: "I'm inside window", width: 200, height: 200 })
         canvas.add(win2, 200, 200)
         canvas.add(win, 100, 100)
         canvas.add(new draw2d.shape.basic.Label({ text: "I'm inside inner window", bgColor: 'grey'}), 230, 230)
 
+
         window.addEventListener('keyup', (e) => {
             switch(e.key) {
                 case 'y':