diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js index cc6e0bc1..f455ec1f 100644 --- 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 index 1ae435bd..18505549 100644 --- 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'); }