From fd503ab41aad15f946bcf88957f8135b628049e3 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 12 Mar 2021 16:29:36 +0530 Subject: [PATCH] #82 jquery convertion changes --- src/editor/EditorStartup.js | 28 +++++++++---------- src/editor/Rulers.js | 4 +-- src/editor/panels/BottomPanelHandlers.js | 4 +-- src/editor/panels/LeftPanelHandlers.js | 2 +- src/editor/svgedit.js | 35 +++++++++++++----------- 5 files changed, 38 insertions(+), 35 deletions(-) diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index d0542829..087d1688 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -115,7 +115,7 @@ class EditorStartup { this.layersPanel = new LayersPanel(this); const {undoMgr} = this.svgCanvas; - this.workarea = $('#workarea'); + this.workarea = document.getElementById('workarea'); this.canvMenu = document.getElementById('se-cmenu_canvas'); this.exportWindow = null; this.defaultImageURL = this.configObj.curConfig.imgPath + 'logo.svg'; @@ -255,7 +255,7 @@ class EditorStartup { this.svgCanvas.setGroupTitle(evt.currentTarget.value); }); - const wArea = this.workarea[0]; + const wArea = this.workarea; let lastX = null, lastY = null, panning = false, keypan = false; @@ -291,7 +291,7 @@ class EditorStartup { this.svgCanvas.spaceKey = keypan = true; e.preventDefault(); } else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){ - this.workarea.css('cursor', zoomOutIcon); + this.workarea.style.cursor = zoomOutIcon; e.preventDefault(); } else { return; @@ -304,7 +304,7 @@ class EditorStartup { this.svgCanvas.spaceKey = keypan = false; e.preventDefault(); } else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){ - this.workarea.css('cursor', zoomInIcon); + this.workarea.style.cursor = zoomInIcon; e.preventDefault(); } else { return; @@ -404,10 +404,10 @@ class EditorStartup { $('#svg_editor').find('button, select, input:not(#text)').focus(() => { inp = this; this.uiContext = 'toolbars'; - this.workarea.mousedown(unfocus); + this.workarea.addEventListener('mousedown', unfocus); }).blur(() => { this.uiContext = 'canvas'; - this.workarea.unbind('mousedown', unfocus); + this.workarea.removeEventListener('mousedown', unfocus); // Go back to selecting text if in textedit mode if (this.svgCanvas.getMode() === 'textedit') { $('#text').focus(); @@ -418,12 +418,12 @@ class EditorStartup { window.addEventListener('resize', (evt) => { Object.entries(winWh).forEach(([type, val]) => { const curval = $(window)[type](); - this.workarea[0]['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2; + this.workarea['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2; winWh[type] = curval; }); }); - this.workarea.scroll(() => { + this.workarea.addEventListener('scroll', () => { // TODO: jQuery's scrollLeft/Top() wouldn't require a null check this.rulers.manageScroll(); }); @@ -448,8 +448,8 @@ class EditorStartup { this.layersPanel.populateLayers(); const centerCanvas = () => { - // this centers the canvas vertically in the this.workarea (horizontal handled in CSS) - this.workarea.css('line-height', this.workarea.height() + 'px'); + // this centers the canvas vertically in the this.workarea (horizontal handled in CSS) + this.workarea.style.lineHeight = this.workarea.style.height; }; $(window).bind('load resize', centerCanvas); @@ -716,10 +716,10 @@ class EditorStartup { } }; - this.workarea[0].addEventListener('dragenter', this.onDragEnter); - this.workarea[0].addEventListener('dragover', this.onDragOver); - this.workarea[0].addEventListener('dragleave', this.onDragLeave); - this.workarea[0].addEventListener('drop', importImage); + this.workarea.addEventListener('dragenter', this.onDragEnter); + this.workarea.addEventListener('dragover', this.onDragOver); + this.workarea.addEventListener('dragleave', this.onDragLeave); + this.workarea.addEventListener('drop', importImage); const imgImport = $('').change(importImage); $(window).on('importImages', () => imgImport.click()); } diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js index bae0a3e0..da2fc6bc 100644 --- a/src/editor/Rulers.js +++ b/src/editor/Rulers.js @@ -27,8 +27,8 @@ class Rulers { manageScroll () { const rulerX = document.getElementById('ruler_x'); const rulerY = document.getElementById('ruler_y'); - if (rulerX) rulerX.scrollLeft = this.editor.workarea[0].scrollLeft; - if (rulerY) rulerY.scrollTop = this.editor.workarea[0].scrollTop; + if (rulerX) rulerX.scrollLeft = this.editor.workarea.scrollLeft; + if (rulerY) rulerY.scrollTop = this.editor.workarea.scrollTop; } /** diff --git a/src/editor/panels/BottomPanelHandlers.js b/src/editor/panels/BottomPanelHandlers.js index d79f7fbc..9179741b 100644 --- a/src/editor/panels/BottomPanelHandlers.js +++ b/src/editor/panels/BottomPanelHandlers.js @@ -67,8 +67,8 @@ class BottomPanelHandlers { width: 0, height: 0, // center pt of scroll position - x: (wArea[0].scrollLeft + wArea.width() / 2) / zoom, - y: (wArea[0].scrollTop + wArea.height() / 2) / zoom, + x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom, + y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom, zoom: zoomlevel }, true); } diff --git a/src/editor/panels/LeftPanelHandlers.js b/src/editor/panels/LeftPanelHandlers.js index 212a95b3..ba390898 100644 --- a/src/editor/panels/LeftPanelHandlers.js +++ b/src/editor/panels/LeftPanelHandlers.js @@ -43,7 +43,7 @@ class LeftPanelHandlers { */ clickSelect () { if (this.updateLeftPanel('tool_select')) { - this.editor.workarea.css('cursor', 'auto'); + this.editor.workarea.style.cursor = "auto"; this.svgCanvas.setMode('select'); } } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 84e2351f..2cca94cf 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ /* globals jQuery seConfirm seAlert */ /** * The main module for the visual SVG this. @@ -462,20 +463,20 @@ class Editor extends EditorStartup { const wArea = this.workarea; const cnvs = $('#svgcanvas'); - let w = this.workarea.width(), h = this.workarea.height(); + let w = parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")), h = parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")); const wOrig = w, hOrig = h; const oldCtr = { - x: wArea[0].scrollLeft + wOrig / 2, - y: wArea[0].scrollTop + hOrig / 2 + x: wArea.scrollLeft + wOrig / 2, + y: wArea.scrollTop + hOrig / 2 }; const multi = this.configObj.curConfig.canvas_expansion; w = Math.max(wOrig, this.svgCanvas.contentW * zoom * multi); h = Math.max(hOrig, this.svgCanvas.contentH * zoom * multi); if (w === wOrig && h === hOrig) { - this.workarea.css('overflow', 'hidden'); + this.workarea.style.overflow = 'hidden'; } else { - this.workarea.css('overflow', 'scroll'); + this.workarea.style.overflow = 'scroll'; } const oldCanY = cnvs.height() / 2; @@ -508,18 +509,18 @@ class Editor extends EditorStartup { if (center) { // Go to top-left for larger documents - if (this.svgCanvas.contentW > wArea.width()) { + if (this.svgCanvas.contentW > parseFloat(getComputedStyle(wArea, null).width.replace("px", ""))) { // Top-left - this.workarea[0].scrollLeft = offset.x - 10; - this.workarea[0].scrollTop = offset.y - 10; + this.workarea.scrollLeft = offset.x - 10; + this.workarea.scrollTop = offset.y - 10; } else { // Center - wArea[0].scrollLeft = scrollX; - wArea[0].scrollTop = scrollY; + wArea.scrollLeft = scrollX; + wArea.scrollTop = scrollY; } } else { - wArea[0].scrollLeft = newCtr.x - wOrig / 2; - wArea[0].scrollTop = newCtr.y - hOrig / 2; + wArea.scrollLeft = newCtr.x - wOrig / 2; + wArea.scrollTop = newCtr.y - hOrig / 2; } if (this.configObj.curConfig.showRulers) { this.rulers.updateRulers(cnvs, zoom); @@ -606,7 +607,9 @@ class Editor extends EditorStartup { stroke-width: ${1 / this.svgCanvas.getZoom()}px; } `; - $('#wireframe_rules').text(this.workarea.hasClass('wireframe') ? rule : ''); + if(document.querySelectorAll("#wireframe_rules").length > 0){ + document.querySelector("#wireframe_rules").textContent = (this.workarea.classList.contains('wireframe') ? rule : ''); + } } /** @@ -772,7 +775,7 @@ class Editor extends EditorStartup { // res = this.svgCanvas.getResolution(), // Currently unused wArea = this.workarea; // const canvasPos = $('#svgcanvas').position(); // Currently unused - const zInfo = this.svgCanvas.setBBoxZoom(bbox, wArea.width() - scrbar, wArea.height() - scrbar); + const zInfo = this.svgCanvas.setBBoxZoom(bbox, parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) - scrbar, parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) - scrbar); if (!zInfo) { return; } const zoomlevel = zInfo.zoom, bb = zInfo.bbox; @@ -1541,8 +1544,8 @@ class Editor extends EditorStartup { */ pasteInCenter () { const zoom = this.svgCanvas.getZoom(); - const x = (this.workarea[0].scrollLeft + this.workarea.width() / 2) / zoom - this.svgCanvas.contentW; - const y = (this.workarea[0].scrollTop + this.workarea.height() / 2) / zoom - this.svgCanvas.contentH; + const x = (this.workarea.scrollLeft + parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")) / 2) / zoom - this.svgCanvas.contentW; + const y = (this.workarea.scrollTop + parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")) / 2) / zoom - this.svgCanvas.contentH; this.svgCanvas.pasteElements('point', x, y); }