#82 workarea related javascript convertion changes

SVG-Edit · Mar 12, 2021 · e572058 · e572058
1 parent 835a345
commit e572058
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js
@@ -46,10 +46,11 @@ export default {
 
     // Define dynamic animation of the view box.
     const updateViewBox = function () {
-      const portHeight = Number.parseFloat($('#workarea').css('height'));
-      const portWidth = Number.parseFloat($('#workarea').css('width'));
-      const portX = $('#workarea').scrollLeft();
-      const portY = $('#workarea').scrollTop();
+      const warea = document.getElementById('workarea');
+      const portHeight = parseFloat(getComputedStyle(warea, null).height.replace("px", ""));
+      const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", ""));
+      const portX = warea.scrollLeft;
+      const portY = warea.scrollTop;
       const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
       const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
       const overviewWidth = $('#overviewMiniView').attr('width');
@@ -65,12 +66,12 @@ export default {
       $('#overview_window_view_box').css('top', viewBoxY + 'px');
       $('#overview_window_view_box').css('left', viewBoxX + 'px');
     };
-    $('#workarea').scroll(function () {
+    document.getElementById('workarea').addEventListener('scroll', () => {
       if (!(overviewWindowGlobals.viewBoxDragging)) {
         updateViewBox();
       }
     });
-    $('#workarea').resize(updateViewBox);
+    document.getElementById('workarea').addEventListener('resize', updateViewBox);
     updateViewBox();
 
     // Compensate for changes in zoom and canvas size.
@@ -101,9 +102,8 @@ export default {
 
       const portX = viewBoxX / overviewWidth * windowWidth;
       const portY = viewBoxY / overviewHeight * windowHeight;
-
-      $('#workarea').scrollLeft(portX);
-      $('#workarea').scrollTop(portY);
+      document.getElementById('workarea').scrollLeft = portX;
+      document.getElementById('workarea').scrollTop = portY;
     };
     const onStart = function () {
       overviewWindowGlobals.viewBoxDragging = true;

diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable no-alert */
 /* globals $ */
 import SvgCanvas from '../../svgcanvas/svgcanvas.js';
@@ -29,11 +30,11 @@ class LayersPanel {
    * @returns {void}
    */
   changeSidePanelWidth (delta) {
-    const rulerX = $('#ruler_x');
+    const rulerX = document.querySelector('#ruler_x');
     $('#sidepanels').width('+=' + delta);
     $('#layerpanel').width('+=' + delta);
-    rulerX.css('right', Number.parseInt(rulerX.css('right')) + delta);
-    this.editor.workarea.css('right', Number.parseInt(this.editor.workarea.css('right')) + delta);
+    rulerX.style.right = (parseFloat(getComputedStyle(rulerX, null).right.replace("px", ""))  + delta) + "px";
+    this.editor.workarea.style.right = (parseFloat(getComputedStyle(this.editor.workarea, null).right.replace("px", "")) + delta) + "px";
     this.svgCanvas.runExtensions('workareaResized');
   }