zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#82 jquery convertion changes

master
Agriya Dev5 2021-03-12 16:29:36 +05:30
parent b1a7cf34e8
commit fd503ab41a
5 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/editor/EditorStartup.js
View File

@ -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 = $('<input type="file">').change(importImage);
$(window).on('importImages', () => imgImport.click());
}

4
src/editor/Rulers.js
View File

@ -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;
}
/**

4
src/editor/panels/BottomPanelHandlers.js
View File

@ -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);
}

2
src/editor/panels/LeftPanelHandlers.js
View File

@ -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');
}
}

35
src/editor/svgedit.js
View File

@ -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);
}