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

#83 jquery convert to pure javascript changes (#84)

master
Agriya Dev5 2021-03-16 14:30:40 +05:30 committed by GitHub
parent 6e1f7d2a07
commit c71284391b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 138 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/editor/Editor.js
View File

@ -413,8 +413,8 @@ class Editor extends EditorStartup {
if (url.startsWith('data:')) { if (url.startsWith('data:')) {
// data URI found // data URI found
$('#image_url').hide(); $id("image_url").style.display = 'none';
$('#change_image_url').show(); $id("change_image_url").style.display = 'block';
} else { } else {
// regular URL // regular URL
this.svgCanvas.embedImage(url, function (dataURI) { this.svgCanvas.embedImage(url, function (dataURI) {
@ -422,8 +422,8 @@ class Editor extends EditorStartup {
$('#url_notice').toggle(!dataURI); $('#url_notice').toggle(!dataURI);
this.defaultImageURL = url; this.defaultImageURL = url;
}); });
$('#image_url').show(); $id("image_url").style.display = 'block';
$('#change_image_url').hide(); $id("change_image_url").style.display = 'none';
} }
} }
@ -451,7 +451,7 @@ class Editor extends EditorStartup {
updateCanvas (center, newCtr) { updateCanvas (center, newCtr) {
const zoom = this.svgCanvas.getZoom(); const zoom = this.svgCanvas.getZoom();
const wArea = this.workarea; const wArea = this.workarea;
const cnvs = $('#svgcanvas'); const cnvs = $id("svgcanvas");
let w = parseFloat(getComputedStyle(this.workarea, null).width.replace("px", "")), h = parseFloat(getComputedStyle(this.workarea, null).height.replace("px", "")); 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 wOrig = w, hOrig = h;
@ -469,9 +469,11 @@ class Editor extends EditorStartup {
this.workarea.style.overflow = 'scroll'; this.workarea.style.overflow = 'scroll';
} }
const oldCanY = cnvs.height() / 2; const oldCanY = parseFloat(getComputedStyle(cnvs, null).height.replace("px", "")) / 2;
const oldCanX = cnvs.width() / 2; const oldCanX = parseFloat(getComputedStyle(cnvs, null).width.replace("px", "")) / 2;
cnvs.width(w).height(h);
cnvs.style.width = w + "px";
cnvs.style.height = h + "px";
const newCanY = h / 2; const newCanY = h / 2;
const newCanX = w / 2; const newCanX = w / 2;
const offset = this.svgCanvas.updateCanvas(w, h); const offset = this.svgCanvas.updateCanvas(w, h);
@ -518,7 +520,7 @@ class Editor extends EditorStartup {
} }
if (this.configObj.urldata.storagePrompt !== true && this.storagePromptState === 'ignore') { if (this.configObj.urldata.storagePrompt !== true && this.storagePromptState === 'ignore') {
$('#dialog_box').hide(); if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
} }
} }
@ -959,7 +961,7 @@ class Editor extends EditorStartup {
* @returns {void} Resolves to `undefined` * @returns {void} Resolves to `undefined`
*/ */
cancelOverlays (e) { cancelOverlays (e) {
$('#dialog_box').hide(); if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
const $editorDialog = document.getElementById('se-svg-editor-dialog'); const $editorDialog = document.getElementById('se-svg-editor-dialog');
const editingsource = $editorDialog.getAttribute('dialog') === 'open'; const editingsource = $editorDialog.getAttribute('dialog') === 'open';
if (!editingsource && !this.docprops && !this.configObj.preferences) { if (!editingsource && !this.docprops && !this.configObj.preferences) {
@ -999,7 +1001,6 @@ class Editor extends EditorStartup {
* and `false` after the user confirms. * and `false` after the user confirms.
*/ */
async openPrep () { async openPrep () {
// $('#main_menu').hide();
if (this.svgCanvas.undoMgr.getUndoStackSize() === 0) { if (this.svgCanvas.undoMgr.getUndoStackSize() === 0) {
return true; return true;
} }
@ -1202,7 +1203,7 @@ class Editor extends EditorStartup {
resolve(); resolve();
}, },
complete () { complete () {
$('#dialog_box').hide(); if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
} }
}); });
}); });

1
src/editor/EditorStartup.js
View File

@ -521,7 +521,6 @@ class EditorStartup {
document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage; document.getElementById('se-prompt-dialog').title = editorObj.uiStrings.notification.loadingImage;
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
// $('#main_menu').hide();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0]; const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) { if (!file) {
document.getElementById('se-prompt-dialog').setAttribute('close', true); document.getElementById('se-prompt-dialog').setAttribute('close', true);

1
src/editor/MainMenu.js
View File

@ -265,7 +265,6 @@ class MainMenu {
} }
this.editor.configObj.preferences = true; this.editor.configObj.preferences = true;
const $editDialog = document.getElementById("se-edit-prefs"); const $editDialog = document.getElementById("se-edit-prefs");
// $('#main_menu').hide();
// Update background color with current one // Update background color with current one
const canvasBg = this.editor.configObj.curPrefs.bkgd_color; const canvasBg = this.editor.configObj.curPrefs.bkgd_color;
const url = this.editor.configObj.pref("bkgd_url"); const url = this.editor.configObj.pref("bkgd_url");

9
src/editor/Rulers.js
View File

@ -39,7 +39,7 @@ class Rulers {
*/ */
updateRulers (scanvas, zoom) { updateRulers (scanvas, zoom) {
if (!zoom) { zoom = this.svgCanvas.getZoom(); } if (!zoom) { zoom = this.svgCanvas.getZoom(); }
if (!scanvas) { scanvas = $('#svgcanvas'); } if (!scanvas) { scanvas = document.getElementById('svgcanvas'); }
let d, i; let d, i;
const limit = 30000; const limit = 30000;
@ -63,7 +63,12 @@ class Rulers {
const hcanv = $hcanv[0]; const hcanv = $hcanv[0];
// Set the canvas size to the width of the container // Set the canvas size to the width of the container
let rulerLen = scanvas[lentype](); let rulerLen;
if(lentype === 'width'){
rulerLen = parseFloat(getComputedStyle(scanvas, null).width.replace("px", ""));
} else if(lentype === 'height'){
rulerLen = parseFloat(getComputedStyle(scanvas, null).height.replace("px", ""));
}
const totalLen = rulerLen; const totalLen = rulerLen;
hcanv.parentNode.style[lentype] = totalLen + 'px'; hcanv.parentNode.style[lentype] = totalLen + 'px';
let ctx = hcanv.getContext('2d'); let ctx = hcanv.getContext('2d');

8
src/editor/components/jgraduate/Slider.js
View File

@ -328,10 +328,10 @@ export default class Slider {
}); });
// initialize this control // initialize this control
arrow.src = options.arrow && options.arrow.image; arrow.src = options.arrow && options.arrow.image;
arrow.w = (options.arrow && options.arrow.width) || arrow.width(); arrow.w = (options.arrow && options.arrow.width) || parseFloat(getComputedStyle(arrow, null).width.replace("px", ""));
arrow.h = (options.arrow && options.arrow.height) || arrow.height(); arrow.h = (options.arrow && options.arrow.height) || parseFloat(getComputedStyle(arrow, null).height.replace("px", ""));
bar.w = (options.map && options.map.width) || bar.width(); bar.w = (options.map && options.map.width) || parseFloat(getComputedStyle(bar, null).width.replace("px", ""));
bar.h = (options.map && options.map.height) || bar.height(); bar.h = (options.map && options.map.height) || parseFloat(getComputedStyle(bar, null).height.replace("px", ""));
bar.addEventListener('mousedown', mouseDown); bar.addEventListener('mousedown', mouseDown);
bind.call(that, draw); bind.call(that, draw);
} }

4
src/editor/extensions/ext-arrows/ext-arrows.js
View File

@ -25,6 +25,7 @@ export default {
const svgEditor = this; const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const const
addElem = svgCanvas.addSVGElementFromJson, addElem = svgCanvas.addSVGElementFromJson,
{nonce, $} = S, {nonce, $} = S,
@ -285,7 +286,8 @@ export default {
return Object.assign(contextTools[i], contextTool); return Object.assign(contextTools[i], contextTool);
}), }),
callback () { callback () {
$('#arrow_panel').hide(); $id("arrow_panel").style.display = 'none';
// Set ID so it can be translated in locale file // Set ID so it can be translated in locale file
$('#arrow_list option')[0].id = 'connector_no_arrow'; $('#arrow_list option')[0].id = 'connector_no_arrow';
}, },

12
src/editor/extensions/ext-closepath/ext-closepath.js
View File

@ -25,15 +25,17 @@ export default {
name: 'closepath', name: 'closepath',
async init ({importLocale, $}) { async init ({importLocale, $}) {
const svgEditor = this; const svgEditor = this;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
let selElems; let selElems;
const updateButton = function (path) { const updateButton = function (path) {
const seglist = path.pathSegList, const seglist = path.pathSegList,
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1, closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
showbutton = closed ? '#tool_openpath' : '#tool_closepath', showbutton = closed ? 'tool_openpath' : 'tool_closepath',
hidebutton = closed ? '#tool_closepath' : '#tool_openpath'; hidebutton = closed ? 'tool_closepath' : 'tool_openpath';
$(hidebutton).hide(); $id("hidebutton").style.display = 'none';
$(showbutton).show(); $id("showbutton").style.display = 'block';
}; };
const showPanel = function (on) { const showPanel = function (on) {
$('#closepath_panel').toggle(on); $('#closepath_panel').toggle(on);
@ -89,7 +91,7 @@ export default {
return Object.assign(buttons[i], button); return Object.assign(buttons[i], button);
}), }),
callback () { callback () {
$('#closepath_panel').hide(); $id("closepath_panel").style.display = 'none';
}, },
selectedChanged (opts) { selectedChanged (opts) {
selElems = opts.elems; selElems = opts.elems;

6
src/editor/extensions/ext-foreignobject/ext-foreignobject.js
View File

@ -7,7 +7,6 @@
* @copyright 2010 Jacques Distler, 2010 Alexis Deveria * @copyright 2010 Jacques Distler, 2010 Alexis Deveria
* *
*/ */
const loadExtensionTranslation = async function (lang) { const loadExtensionTranslation = async function (lang) {
let translationModule; let translationModule;
try { try {
@ -26,6 +25,7 @@ export default {
const svgEditor = this; const svgEditor = this;
const {$, text2xml, NS} = S; const {$, text2xml, NS} = S;
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const const
// {svgcontent} = S, // {svgcontent} = S,
// addElem = svgCanvas.addSVGElementFromJson, // addElem = svgCanvas.addSVGElementFromJson,
@ -183,10 +183,10 @@ export default {
return Object.assign(contextTools[i], contextTool); return Object.assign(contextTools[i], contextTool);
}), }),
callback () { callback () {
$('#foreignObject_panel').hide(); $id("foreignObject_panel").style.display = 'none';
const endChanges = function () { const endChanges = function () {
$('#svg_source_editor').hide(); $id("svg_source_editor").style.display = 'none';
editingforeign = false; editingforeign = false;
$('#svg_source_textarea').blur(); $('#svg_source_textarea').blur();
toggleSourceButtons(false); toggleSourceButtons(false);

9
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -24,6 +24,7 @@ export default {
name: 'imagelib', name: 'imagelib',
async init ({$, decode64, dropXMLInternalSubset}) { async init ({$, decode64, dropXMLInternalSubset}) {
const svgEditor = this; const svgEditor = this;
const {$id} = svgEditor.svgCanvas;
const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {uiStrings, canvas: svgCanvas} = svgEditor; const {uiStrings, canvas: svgCanvas} = svgEditor;
@ -41,7 +42,7 @@ export default {
* @returns {void} * @returns {void}
*/ */
function closeBrowser () { function closeBrowser () {
$('#imgbrowse_holder').hide(); $id("imgbrowse_holder").style.display = 'none';
document.activeElement.blur(); // make sure focus is the body to correct issue #417 document.activeElement.blur(); // make sure focus is the body to correct issue #417
} }
@ -352,7 +353,7 @@ export default {
}); });
preview.empty(); preview.empty();
multiArr = []; multiArr = [];
$('#imgbrowse_holder').hide(); $id("imgbrowse_holder").style.display = 'none';
}).css({ }).css({
position: 'absolute', position: 'absolute',
bottom: 10, bottom: 10,
@ -390,7 +391,7 @@ export default {
$('<button><img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + uiStrings.common.cancel + '</button>') $('<button><img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + uiStrings.common.cancel + '</button>')
.appendTo(browser) .appendTo(browser)
.on('click touchend', function () { .on('click touchend', function () {
$('#imgbrowse_holder').hide(); $id("imgbrowse_holder").style.display = 'none';
}).css({ }).css({
position: 'absolute', position: 'absolute',
top: 5, top: 5,
@ -445,7 +446,7 @@ export default {
}).append(`<span>${description}</span>`); }).append(`<span>${description}</span>`);
}); });
} else { } else {
$('#imgbrowse_holder').show(); $id("imgbrowse_holder").style.display = 'block';
} }
} }

6
src/editor/extensions/ext-markers/ext-markers.js
View File

@ -48,6 +48,7 @@ export default {
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {$} = S; const {$} = S;
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const // {svgcontent} = S, const // {svgcontent} = S,
addElem = svgCanvas.addSVGElementFromJson; addElem = svgCanvas.addSVGElementFromJson;
const mtypes = ['start', 'mid', 'end']; const mtypes = ['start', 'mid', 'end'];
@ -567,7 +568,10 @@ export default {
name: strings.name, name: strings.name,
svgicons: '', svgicons: '',
callback () { callback () {
$('#marker_panel').addClass('toolset').hide(); if($id("marker_panel") !== null) {
$id("marker_panel").classList.add('toolset');
$id("marker_panel").style.display = 'none';
}
}, },
/* async */ addLangData ({importLocale, lang}) { /* async */ addLangData ({importLocale, lang}) {
return {data: strings.langList}; return {data: strings.langList};

7
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@ -26,6 +26,7 @@ export default {
const svgEditor = this; const svgEditor = this;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
// Configuration of the MathJax extention. // Configuration of the MathJax extention.
@ -178,14 +179,14 @@ export default {
// Add functionality and picture to cancel button. // Add functionality and picture to cancel button.
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true)) $('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true))
.on('click touched', function () { .on('click touched', function () {
$('#mathjax').hide(); $id("mathjax").style.display = 'none';
}); });
// Add functionality and picture to the save button. // Add functionality and picture to the save button.
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true)) $('#tool_mathjax_save').prepend($.getSvgIcon('ok', true))
.on('click touched', function () { .on('click touched', function () {
saveMath(); saveMath();
$('#mathjax').hide(); $id("mathjax").style.display = 'none';
}); });
// MathJax preprocessing has to ignore most of the page. // MathJax preprocessing has to ignore most of the page.
@ -231,7 +232,7 @@ export default {
locationX = opts.mouse_x / zoom; locationX = opts.mouse_x / zoom;
locationY = opts.mouse_y / zoom; locationY = opts.mouse_y / zoom;
$('#mathjax').show(); $id("mathjax").style.display = 'block';
return {started: false}; // Otherwise the last selected object dissapears. return {started: false}; // Otherwise the last selected object dissapears.
} }
return undefined; return undefined;

73
src/editor/extensions/ext-overview_window/ext-overview_window.js
View File

@ -1,3 +1,4 @@
/* eslint-disable max-len */
/** /**
* @file ext-overview_window.js * @file ext-overview_window.js
* *
@ -7,9 +8,12 @@
* *
*/ */
import { dragmove } from '../../../editor/dragmove/dragmove.js'; import { dragmove } from '../../../editor/dragmove/dragmove.js';
export default { export default {
name: 'overview_window', name: 'overview_window',
init ({$, isChrome}) { init ({$, isChrome}) {
const svgEditor = this;
const {$id} = svgEditor.svgCanvas;
const overviewWindowGlobals = {}; const overviewWindowGlobals = {};
// Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
// https://code.google.com/p/chromium/issues/detail?id=565120. // https://code.google.com/p/chromium/issues/detail?id=565120.
@ -42,7 +46,8 @@ export default {
'</div>' + '</div>' +
'</div>' + '</div>' +
'</div>'; '</div>';
$('#sidepanels').append(propsWindowHtml); // eslint-disable-next-line no-unsanitized/method
$id("sidepanels").insertAdjacentHTML( 'beforeend', propsWindowHtml );
// Define dynamic animation of the view box. // Define dynamic animation of the view box.
const updateViewBox = function () { const updateViewBox = function () {
@ -51,20 +56,20 @@ export default {
const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", "")); const portWidth = parseFloat(getComputedStyle(warea, null).width.replace("px", ""));
const portX = warea.scrollLeft; const portX = warea.scrollLeft;
const portY = warea.scrollTop; const portY = warea.scrollTop;
const windowWidth = Number.parseFloat($('#svgcanvas').css('width')); const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = Number.parseFloat($('#svgcanvas').css('height')); const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = $('#overviewMiniView').attr('width'); const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = $('#overviewMiniView').attr('height'); const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxX = portX / windowWidth * overviewWidth; const viewBoxX = portX / windowWidth * overviewWidth;
const viewBoxY = portY / windowHeight * overviewHeight; const viewBoxY = portY / windowHeight * overviewHeight;
const viewBoxWidth = portWidth / windowWidth * overviewWidth; const viewBoxWidth = portWidth / windowWidth * overviewWidth;
const viewBoxHeight = portHeight / windowHeight * overviewHeight; const viewBoxHeight = portHeight / windowHeight * overviewHeight;
$('#overview_window_view_box').css('min-width', viewBoxWidth + 'px'); $id("overview_window_view_box").style.minWidth = viewBoxWidth + 'px';
$('#overview_window_view_box').css('min-height', viewBoxHeight + 'px'); $id("overview_window_view_box").style.minHeight = viewBoxHeight + 'px';
$('#overview_window_view_box').css('top', viewBoxY + 'px'); $id("overview_window_view_box").style.top = viewBoxY + 'px';
$('#overview_window_view_box').css('left', viewBoxX + 'px'); $id("overview_window_view_box").style.left = viewBoxX + 'px';
}; };
document.getElementById('workarea').addEventListener('scroll', () => { document.getElementById('workarea').addEventListener('scroll', () => {
if (!(overviewWindowGlobals.viewBoxDragging)) { if (!(overviewWindowGlobals.viewBoxDragging)) {
@ -76,16 +81,16 @@ export default {
// Compensate for changes in zoom and canvas size. // Compensate for changes in zoom and canvas size.
const updateViewDimensions = function () { const updateViewDimensions = function () {
const viewWidth = $('#svgroot').attr('width'); const viewWidth = parseFloat(getComputedStyle($id("svgroot"), null).width.replace("px", ""));
const viewHeight = $('#svgroot').attr('height'); const viewHeight = parseFloat(getComputedStyle($id("svgroot"), null).height.replace("px", ""));
const viewX = 640; const viewX = 640;
const viewY = 480; const viewY = 480;
const svgWidthOld = $('#overviewMiniView').attr('width'); const svgWidthOld = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const svgHeightNew = viewHeight / viewWidth * svgWidthOld; const svgHeightNew = viewHeight / viewWidth * svgWidthOld;
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight); $id('overviewMiniView').setAttribute('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
$('#overviewMiniView').attr('height', svgHeightNew); $id('overviewMiniView').setAttribute('height', svgHeightNew);
updateViewBox(); updateViewBox();
}; };
updateViewDimensions(); updateViewDimensions();
@ -93,30 +98,31 @@ export default {
// Set up the overview window as a controller for the view port. // Set up the overview window as a controller for the view port.
overviewWindowGlobals.viewBoxDragging = false; overviewWindowGlobals.viewBoxDragging = false;
const updateViewPortFromViewBox = function () { const updateViewPortFromViewBox = function () {
const windowWidth = Number.parseFloat($('#svgcanvas').css('width')); const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = Number.parseFloat($('#svgcanvas').css('height')); const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = $('#overviewMiniView').attr('width'); const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = $('#overviewMiniView').attr('height'); const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left')); const viewBoxX = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('left').replace("px", ""));;
const viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top')); const viewBoxY = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('top').replace("px", ""));;
const portX = viewBoxX / overviewWidth * windowWidth; const portX = viewBoxX / overviewWidth * windowWidth;
const portY = viewBoxY / overviewHeight * windowHeight; const portY = viewBoxY / overviewHeight * windowHeight;
document.getElementById('workarea').scrollLeft = portX; $id('workarea').scrollLeft = portX;
document.getElementById('workarea').scrollTop = portY; $id('workarea').scrollTop = portY;
}; };
const onStart = () => { const onStart = () => {
overviewWindowGlobals.viewBoxDragging = true; overviewWindowGlobals.viewBoxDragging = true;
updateViewPortFromViewBox(); updateViewPortFromViewBox();
}; };
const onEnd = (el, parent, x, y) => { const onEnd = (el, parent, x, y) => {
if((el.offsetLeft + el.offsetWidth) > $(parent).attr('width')){ if((el.offsetLeft + el.offsetWidth) > parseFloat(getComputedStyle(parent, null).width.replace("px", ""))){
el.style.left = ($(parent).attr('width') - el.offsetWidth) + 'px'; el.style.left = (parseFloat(getComputedStyle(parent, null).width.replace("px", "")) - el.offsetWidth) + 'px';
} else if(el.offsetLeft < 0){ } else if(el.offsetLeft < 0){
el.style.left = "0px" el.style.left = "0px"
} }
if((el.offsetTop + el.offsetHeight) > $(parent).attr('height')){ if((el.offsetTop + el.offsetHeight) > parseFloat(getComputedStyle(parent, null).height.replace("px", ""))){
el.style.top = ($(parent).attr('height') - el.offsetHeight) + 'px'; el.style.top = (parseFloat(getComputedStyle(parent, null).height.replace("px", "")) - el.offsetHeight) + 'px';
} else if(el.offsetTop < 0){ } else if(el.offsetTop < 0){
el.style.top = "0px" el.style.top = "0px"
} }
@ -130,14 +136,14 @@ export default {
const parentElem = document.querySelector("#overviewMiniView"); const parentElem = document.querySelector("#overviewMiniView");
dragmove(dragElem, dragElem, parentElem, onStart, onEnd, onDrag); dragmove(dragElem, dragElem, parentElem, onStart, onEnd, onDrag);
$('#overviewMiniView').click(function (evt) { $id("overviewMiniView").addEventListener("click", evt => {
// Firefox doesn't support evt.offsetX and evt.offsetY. // Firefox doesn't support evt.offsetX and evt.offsetY.
const mouseX = (evt.offsetX || evt.originalEvent.layerX); const mouseX = (evt.offsetX || evt.originalEvent.layerX);
const mouseY = (evt.offsetY || evt.originalEvent.layerY); const mouseY = (evt.offsetY || evt.originalEvent.layerY);
const overviewWidth = $('#overviewMiniView').attr('width'); const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = $('#overviewMiniView').attr('height'); const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width')); const viewBoxWidth = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('min-width').replace("px", ""));;
const viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height')); const viewBoxHeight = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('min-height').replace("px", ""));;
let viewBoxX = mouseX - 0.5 * viewBoxWidth; let viewBoxX = mouseX - 0.5 * viewBoxWidth;
let viewBoxY = mouseY - 0.5 * viewBoxHeight; let viewBoxY = mouseY - 0.5 * viewBoxHeight;
@ -154,9 +160,8 @@ export default {
if (viewBoxY + viewBoxHeight > overviewHeight) { if (viewBoxY + viewBoxHeight > overviewHeight) {
viewBoxY = overviewHeight - viewBoxHeight; viewBoxY = overviewHeight - viewBoxHeight;
} }
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$('#overview_window_view_box').css('top', viewBoxY + 'px'); $id("overview_window_view_box").style.left = viewBoxX + 'px';
$('#overview_window_view_box').css('left', viewBoxX + 'px');
updateViewPortFromViewBox(); updateViewPortFromViewBox();
}); });

3
src/editor/extensions/ext-placemark/ext-placemark.js
View File

@ -23,6 +23,7 @@ export default {
async init (S) { async init (S) {
const svgEditor = this; const svgEditor = this;
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const addElem = svgCanvas.addSVGElementFromJson; const addElem = svgCanvas.addSVGElementFromJson;
const {$} = S; // {svgcontent}, const {$} = S; // {svgcontent},
let let
@ -356,7 +357,7 @@ export default {
return Object.assign(contextTools[i], contextTool); return Object.assign(contextTools[i], contextTool);
}), }),
callback () { callback () {
$('#placemark_panel').hide(); $id("placemark_panel").style.display = 'none';
// const endChanges = function(){}; // const endChanges = function(){};
}, },
mouseDown (opts) { mouseDown (opts) {

4
src/editor/extensions/ext-polygon/ext-polygon.js
View File

@ -23,6 +23,7 @@ export default {
async init (S) { async init (S) {
const svgEditor = this; const svgEditor = this;
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const {$} = S, // {svgcontent} const {$} = S, // {svgcontent}
// addElem = svgCanvas.addSVGElementFromJson, // addElem = svgCanvas.addSVGElementFromJson,
editingitex = false; editingitex = false;
@ -113,8 +114,7 @@ export default {
}), }),
callback () { callback () {
$('#polygon_panel').hide(); if($id("polygon_panel") !== null) $id("polygon_panel").style.display = 'none';
const endChanges = function () { const endChanges = function () {
// Todo: Missing? // Todo: Missing?
}; };

12
src/editor/extensions/ext-server_opensave/ext-server_opensave.js
View File

@ -32,6 +32,7 @@ export default {
}, },
canvas: svgCanvas canvas: svgCanvas
} = svgEditor; } = svgEditor;
const {$id} = svgCanvas;
/** /**
* *
@ -185,8 +186,7 @@ export default {
cancelled = false; cancelled = false;
return; return;
} }
if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
$('#dialog_box').hide();
if (type !== 'import_img') { if (type !== 'import_img') {
xmlstr = decode64(str64); xmlstr = decode64(str64);
@ -247,7 +247,7 @@ export default {
rebuildInput(form); rebuildInput(form);
await $.process_cancel(strings.uploading); await $.process_cancel(strings.uploading);
cancelled = true; cancelled = true;
$('#dialog_box').hide(); if($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
} }
if (form[0] === openSvgForm[0]) { if (form[0] === openSvgForm[0]) {
@ -274,8 +274,10 @@ export default {
rebuildInput(importImgForm); rebuildInput(importImgForm);
// Add forms to buttons // Add forms to buttons
$('#tool_open').show().prepend(openSvgForm); $id("tool_open").style.display = 'block';
$('#tool_import').show().prepend(importSvgForm); $id("tool_import").style.display = 'block';
$('#tool_open').prepend(openSvgForm);
$('#tool_import').prepend(importSvgForm);
$('#tool_image').prepend(importImgForm); $('#tool_image').prepend(importImgForm);
} }
}; };

4
src/editor/extensions/ext-star/ext-star.js
View File

@ -23,7 +23,7 @@ export default {
async init (S) { async init (S) {
const svgEditor = this; const svgEditor = this;
const {svgCanvas} = svgEditor; const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const {$} = S; // {svgcontent}, const {$} = S; // {svgcontent},
let let
selElems, selElems,
@ -121,7 +121,7 @@ export default {
return Object.assign(contextTools[i], contextTool); return Object.assign(contextTools[i], contextTool);
}), }),
callback () { callback () {
$('#star_panel').hide(); if($id("star_panel") !== null) $id("star_panel").style.display = 'none';
// const endChanges = function(){}; // const endChanges = function(){};
}, },
mouseDown (opts) { mouseDown (opts) {

6
src/editor/panels/BottomPanel.js
View File

@ -84,14 +84,14 @@ class BottomPanel {
'tools_rect', 'tools_ellipse', 'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path' 'tool_text', 'tool_path'
]; ];
if (bNoStroke) { if (bNoStroke) {
buttonsNeedingStroke.forEach((btn) => { buttonsNeedingStroke.forEach((btn) => {
// if btn is pressed, change to select button // if btn is pressed, change to select button
if ($id(btn).pressed) { if ($id(btn).pressed) {
this.editor.leftPanelHandlers.clickSelect(); this.editor.leftPanelHandlers.clickSelect();
} }
$(btn).disabled = true; $id(btn).disabled = true;
}); });
} else { } else {
buttonsNeedingStroke.forEach((btn) => { buttonsNeedingStroke.forEach((btn) => {
@ -105,7 +105,7 @@ class BottomPanel {
if ($id(btn).pressed) { if ($id(btn).pressed) {
this.editor.leftPanelHandlers.clickSelect(); this.editor.leftPanelHandlers.clickSelect();
} }
$(btn).disabled = true; $id(btn).disabled = true;
}); });
} else { } else {
buttonsNeedingFillAndStroke.forEach((btn) => { buttonsNeedingFillAndStroke.forEach((btn) => {

6
src/editor/panels/LayersPanel.js
View File

@ -58,7 +58,7 @@ class LayersPanel {
} }
this.sidedragging = true; this.sidedragging = true;
let deltaX = this.sidedrag - evt.pageX; let deltaX = this.sidedrag - evt.pageX;
const sideWidth = $("#sidepanels").width(); const sideWidth = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) { if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
deltaX = SIDEPANEL_MAXWIDTH - sideWidth; deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
// sideWidth = SIDEPANEL_MAXWIDTH; // sideWidth = SIDEPANEL_MAXWIDTH;
@ -80,7 +80,7 @@ class LayersPanel {
*/ */
toggleSidePanel(close) { toggleSidePanel(close) {
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
const w = $("#sidepanels").width(); const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""))
const isOpened = (dpr < 1 ? w : w / dpr) > 2; const isOpened = (dpr < 1 ? w : w / dpr) > 2;
const zoomAdjustedSidepanelWidth = const zoomAdjustedSidepanelWidth =
(dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH; (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
@ -176,7 +176,7 @@ class LayersPanel {
this.lmenuFunc.bind(this) this.lmenuFunc.bind(this)
); );
$id("se-cmenu-layers-list").addEventListener("change", e => { $id("se-cmenu-layers-list").addEventListener("change", e => {
this.lmenuFunc.bind(this)(e?.detail?.trigger, e?.detail?.source); this.lmenuFunc(e);
}); });
$id("sidepanel_handle").addEventListener( $id("sidepanel_handle").addEventListener(
"click", "click",

44
src/editor/panels/TopPanel.js
View File

@ -172,11 +172,18 @@ class TopPanel {
const isNode = currentMode === "pathedit"; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false; const isNode = currentMode === "pathedit"; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
const menuItems = document.getElementById("se-cmenu_canvas"); const menuItems = document.getElementById("se-cmenu_canvas");
$( $id("selected_panel").style.display = 'none';
"#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel," + $id("multiselected_panel").style.display = 'none';
"#ellipse_panel, #line_panel, #text_panel, #image_panel, #container_panel," + $id("g_panel").style.display = 'none';
" #use_panel, #a_panel" $id("rect_panel").style.display = 'none';
).hide(); $id("circle_panel").style.display = 'none';
$id("ellipse_panel").style.display = 'none';
$id("line_panel").style.display = 'none';
$id("text_panel").style.display = 'none';
$id("image_panel").style.display = 'none';
$id("container_panel").style.display = 'none';
$id("use_panel").style.display = 'none';
$id("a_panel").style.display = 'none';
if (!isNullish(elem)) { if (!isNullish(elem)) {
const elname = elem.nodeName; const elname = elem.nodeName;
// If this is a link with no transform and one child, pretend // If this is a link with no transform and one child, pretend
@ -201,10 +208,10 @@ class TopPanel {
} }
if (!isNode && currentMode !== "pathedit") { if (!isNode && currentMode !== "pathedit") {
$("#selected_panel").show(); $id("selected_panel").style.display = 'block';
// Elements in this array already have coord fields // Elements in this array already have coord fields
if (["line", "circle", "ellipse"].includes(elname)) { if (["line", "circle", "ellipse"].includes(elname)) {
$("#xy_panel").hide(); $id("xy_panel").style.display = 'none';
} else { } else {
let x, y; let x, y;
@ -226,7 +233,7 @@ class TopPanel {
$("#selected_x").val(x || 0); $("#selected_x").val(x || 0);
$("#selected_y").val(y || 0); $("#selected_y").val(y || 0);
$("#xy_panel").show(); $id("xy_panel").style.display = 'block';
} }
// Elements in this array cannot be converted to a path // Elements in this array cannot be converted to a path
@ -292,11 +299,11 @@ class TopPanel {
let linkHref = null; let linkHref = null;
if (tagName === "a") { if (tagName === "a") {
linkHref = this.editor.svgCanvas.getHref(elem); linkHref = this.editor.svgCanvas.getHref(elem);
$("#g_panel").show(); $id("g_panel").style.display = 'block';
} }
if (elem.parentNode.tagName === "a" && !$(elem).siblings().length) { if (elem.parentNode.tagName === "a" && !$(elem).siblings().length) {
$("#a_panel").show(); $id("a_panel").style.display = 'block';
linkHref = this.editor.svgCanvas.getHref(elem.parentNode); linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
} }
@ -309,8 +316,7 @@ class TopPanel {
if (panels[tagName]) { if (panels[tagName]) {
const curPanel = panels[tagName]; const curPanel = panels[tagName];
$id(tagName + "_panel").style.display = 'block';
$("#" + tagName + "_panel").show();
curPanel.forEach(item => { curPanel.forEach(item => {
let attrVal = elem.getAttribute(item); let attrVal = elem.getAttribute(item);
@ -322,13 +328,13 @@ class TopPanel {
}); });
if (tagName === "text") { if (tagName === "text") {
$("#text_panel").css("display", "inline-block"); $id("text_panel").style.display = "inline-block";
$("#tool_font_size").css("display", "inline"); $id("tool_font_size").style.display = "inline";
$id("tool_italic").pressed = this.editor.svgCanvas.getItalic(); $id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
$id("tool_bold").pressed = this.editor.svgCanvas.getBold(); $id("tool_bold").pressed = this.editor.svgCanvas.getBold();
$("#tool_font_family").val(elem.getAttribute("font-family")); $id("tool_font_family").value = elem.getAttribute("font-family");
$("#font_size").val(elem.getAttribute("font-size")); $id("font_size").value = elem.getAttribute("font-size");
$("#text").val(elem.textContent); $id("text").value = elem.textContent;
const textAnchorStart = $id("tool_text_anchor_start"); const textAnchorStart = $id("tool_text_anchor_start");
const textAnchorMiddle = $id("tool_text_anchor_middle"); const textAnchorMiddle = $id("tool_text_anchor_middle");
const textAnchorEnd = $id("tool_text_anchor_end"); const textAnchorEnd = $id("tool_text_anchor_end");
@ -367,7 +373,7 @@ class TopPanel {
); );
// image // image
} else if (tagName === "g" || tagName === "use") { } else if (tagName === "g" || tagName === "use") {
$("#container_panel").show(); $id("container_panel").style.display = 'block';
const title = this.editor.svgCanvas.getTitle(); const title = this.editor.svgCanvas.getTitle();
const label = $("#g_title")[0]; const label = $("#g_title")[0];
label.value = title; label.value = title;
@ -387,7 +393,7 @@ class TopPanel {
// if (!isNullish(elem)) // if (!isNullish(elem))
} else if (this.multiselected) { } else if (this.multiselected) {
$("#multiselected_panel").show(); $id("multiselected_panel").style.display = 'block';
menuItems.setAttribute("enablemenuitems", "#group"); menuItems.setAttribute("enablemenuitems", "#group");
menuItems.setAttribute("disablemenuitems", "#ungroup"); menuItems.setAttribute("disablemenuitems", "#ungroup");
} else { } else {

4
src/svgcanvas/svgcanvas.js
View File

@ -190,6 +190,10 @@ class SvgCanvas {
const canvas = this; const canvas = this;
this.$id = $id;
this.$qq = $qq;
this.$qa = $qa;
this.isLayer = draw.Layer.isLayer; this.isLayer = draw.Layer.isLayer;
// "document" element associated with the container (same as window.document using default svg-editor.js) // "document" element associated with the container (same as window.document using default svg-editor.js)