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:')) {
// data URI found
$('#image_url').hide();
$('#change_image_url').show();
$id("image_url").style.display = 'none';
$id("change_image_url").style.display = 'block';
} else {
// regular URL
this.svgCanvas.embedImage(url, function (dataURI) {
@ -422,8 +422,8 @@ class Editor extends EditorStartup {
$('#url_notice').toggle(!dataURI);
this.defaultImageURL = url;
});
$('#image_url').show();
$('#change_image_url').hide();
$id("image_url").style.display = 'block';
$id("change_image_url").style.display = 'none';
}
}
@ -451,7 +451,7 @@ class Editor extends EditorStartup {
updateCanvas (center, newCtr) {
const zoom = this.svgCanvas.getZoom();
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", ""));
const wOrig = w, hOrig = h;
@ -469,9 +469,11 @@ class Editor extends EditorStartup {
this.workarea.style.overflow = 'scroll';
}
const oldCanY = cnvs.height() / 2;
const oldCanX = cnvs.width() / 2;
cnvs.width(w).height(h);
const oldCanY = parseFloat(getComputedStyle(cnvs, null).height.replace("px", "")) / 2;
const oldCanX = parseFloat(getComputedStyle(cnvs, null).width.replace("px", "")) / 2;
cnvs.style.width = w + "px";
cnvs.style.height = h + "px";
const newCanY = h / 2;
const newCanX = w / 2;
const offset = this.svgCanvas.updateCanvas(w, h);
@ -518,7 +520,7 @@ class Editor extends EditorStartup {
}
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`
*/
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 editingsource = $editorDialog.getAttribute('dialog') === 'open';
if (!editingsource && !this.docprops && !this.configObj.preferences) {
@ -999,7 +1001,6 @@ class Editor extends EditorStartup {
* and `false` after the user confirms.
*/
async openPrep () {
// $('#main_menu').hide();
if (this.svgCanvas.undoMgr.getUndoStackSize() === 0) {
return true;
}
@ -1202,7 +1203,7 @@ class Editor extends EditorStartup {
resolve();
},
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;
e.stopPropagation();
e.preventDefault();
// $('#main_menu').hide();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
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;
const $editDialog = document.getElementById("se-edit-prefs");
// $('#main_menu').hide();
// Update background color with current one
const canvasBg = this.editor.configObj.curPrefs.bkgd_color;
const url = this.editor.configObj.pref("bkgd_url");

9
src/editor/Rulers.js
View File

@ -39,7 +39,7 @@ class Rulers {
*/
updateRulers (scanvas, zoom) {
if (!zoom) { zoom = this.svgCanvas.getZoom(); }
if (!scanvas) { scanvas = $('#svgcanvas'); }
if (!scanvas) { scanvas = document.getElementById('svgcanvas'); }
let d, i;
const limit = 30000;
@ -63,7 +63,12 @@ class Rulers {
const hcanv = $hcanv[0];
// 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;
hcanv.parentNode.style[lentype] = totalLen + 'px';
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
arrow.src = options.arrow && options.arrow.image;
arrow.w = (options.arrow && options.arrow.width) || arrow.width();
arrow.h = (options.arrow && options.arrow.height) || arrow.height();
bar.w = (options.map && options.map.width) || bar.width();
bar.h = (options.map && options.map.height) || bar.height();
arrow.w = (options.arrow && options.arrow.width) || parseFloat(getComputedStyle(arrow, null).width.replace("px", ""));
arrow.h = (options.arrow && options.arrow.height) || parseFloat(getComputedStyle(arrow, null).height.replace("px", ""));
bar.w = (options.map && options.map.width) || parseFloat(getComputedStyle(bar, null).width.replace("px", ""));
bar.h = (options.map && options.map.height) || parseFloat(getComputedStyle(bar, null).height.replace("px", ""));
bar.addEventListener('mousedown', mouseDown);
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 strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const
addElem = svgCanvas.addSVGElementFromJson,
{nonce, $} = S,
@ -285,7 +286,8 @@ export default {
return Object.assign(contextTools[i], contextTool);
}),
callback () {
$('#arrow_panel').hide();
$id("arrow_panel").style.display = 'none';
// Set ID so it can be translated in locale file
$('#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',
async init ({importLocale, $}) {
const svgEditor = this;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
let selElems;
const updateButton = function (path) {
const seglist = path.pathSegList,
closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1,
showbutton = closed ? '#tool_openpath' : '#tool_closepath',
hidebutton = closed ? '#tool_closepath' : '#tool_openpath';
$(hidebutton).hide();
$(showbutton).show();
showbutton = closed ? 'tool_openpath' : 'tool_closepath',
hidebutton = closed ? 'tool_closepath' : 'tool_openpath';
$id("hidebutton").style.display = 'none';
$id("showbutton").style.display = 'block';
};
const showPanel = function (on) {
$('#closepath_panel').toggle(on);
@ -89,7 +91,7 @@ export default {
return Object.assign(buttons[i], button);
}),
callback () {
$('#closepath_panel').hide();
$id("closepath_panel").style.display = 'none';
},
selectedChanged (opts) {
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
*
*/
const loadExtensionTranslation = async function (lang) {
let translationModule;
try {
@ -26,6 +25,7 @@ export default {
const svgEditor = this;
const {$, text2xml, NS} = S;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const
// {svgcontent} = S,
// addElem = svgCanvas.addSVGElementFromJson,
@ -183,10 +183,10 @@ export default {
return Object.assign(contextTools[i], contextTool);
}),
callback () {
$('#foreignObject_panel').hide();
$id("foreignObject_panel").style.display = 'none';
const endChanges = function () {
$('#svg_source_editor').hide();
$id("svg_source_editor").style.display = 'none';
editingforeign = false;
$('#svg_source_textarea').blur();
toggleSourceButtons(false);

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

@ -24,6 +24,7 @@ export default {
name: 'imagelib',
async init ({$, decode64, dropXMLInternalSubset}) {
const svgEditor = this;
const {$id} = svgEditor.svgCanvas;
const imagelibStrings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {uiStrings, canvas: svgCanvas} = svgEditor;
@ -41,7 +42,7 @@ export default {
* @returns {void}
*/
function closeBrowser () {
$('#imgbrowse_holder').hide();
$id("imgbrowse_holder").style.display = 'none';
document.activeElement.blur(); // make sure focus is the body to correct issue #417
}
@ -352,7 +353,7 @@ export default {
});
preview.empty();
multiArr = [];
$('#imgbrowse_holder').hide();
$id("imgbrowse_holder").style.display = 'none';
}).css({
position: 'absolute',
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>')
.appendTo(browser)
.on('click touchend', function () {
$('#imgbrowse_holder').hide();
$id("imgbrowse_holder").style.display = 'none';
}).css({
position: 'absolute',
top: 5,
@ -445,7 +446,7 @@ export default {
}).append(`<span>${description}</span>`);
});
} 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 {$} = S;
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
const // {svgcontent} = S,
addElem = svgCanvas.addSVGElementFromJson;
const mtypes = ['start', 'mid', 'end'];
@ -567,7 +568,10 @@ export default {
name: strings.name,
svgicons: '',
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}) {
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 strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
const {svgCanvas} = svgEditor;
const {$id} = svgCanvas;
// Configuration of the MathJax extention.
@ -178,14 +179,14 @@ export default {
// Add functionality and picture to cancel button.
$('#tool_mathjax_cancel').prepend($.getSvgIcon('cancel', true))
.on('click touched', function () {
$('#mathjax').hide();
$id("mathjax").style.display = 'none';
});
// Add functionality and picture to the save button.
$('#tool_mathjax_save').prepend($.getSvgIcon('ok', true))
.on('click touched', function () {
saveMath();
$('#mathjax').hide();
$id("mathjax").style.display = 'none';
});
// MathJax preprocessing has to ignore most of the page.
@ -231,7 +232,7 @@ export default {
locationX = opts.mouse_x / zoom;
locationY = opts.mouse_y / zoom;
$('#mathjax').show();
$id("mathjax").style.display = 'block';
return {started: false}; // Otherwise the last selected object dissapears.
}
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
*
@ -7,9 +8,12 @@
*
*/
import { dragmove } from '../../../editor/dragmove/dragmove.js';
export default {
name: 'overview_window',
init ({$, isChrome}) {
const svgEditor = this;
const {$id} = svgEditor.svgCanvas;
const overviewWindowGlobals = {};
// Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and
// https://code.google.com/p/chromium/issues/detail?id=565120.
@ -42,7 +46,8 @@ export default {
'</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.
const updateViewBox = function () {
@ -51,20 +56,20 @@ export default {
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');
const overviewHeight = $('#overviewMiniView').attr('height');
const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxX = portX / windowWidth * overviewWidth;
const viewBoxY = portY / windowHeight * overviewHeight;
const viewBoxWidth = portWidth / windowWidth * overviewWidth;
const viewBoxHeight = portHeight / windowHeight * overviewHeight;
$('#overview_window_view_box').css('min-width', viewBoxWidth + 'px');
$('#overview_window_view_box').css('min-height', viewBoxHeight + 'px');
$('#overview_window_view_box').css('top', viewBoxY + 'px');
$('#overview_window_view_box').css('left', viewBoxX + 'px');
$id("overview_window_view_box").style.minWidth = viewBoxWidth + 'px';
$id("overview_window_view_box").style.minHeight = viewBoxHeight + 'px';
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$id("overview_window_view_box").style.left = viewBoxX + 'px';
};
document.getElementById('workarea').addEventListener('scroll', () => {
if (!(overviewWindowGlobals.viewBoxDragging)) {
@ -76,16 +81,16 @@ export default {
// Compensate for changes in zoom and canvas size.
const updateViewDimensions = function () {
const viewWidth = $('#svgroot').attr('width');
const viewHeight = $('#svgroot').attr('height');
const viewWidth = parseFloat(getComputedStyle($id("svgroot"), null).width.replace("px", ""));
const viewHeight = parseFloat(getComputedStyle($id("svgroot"), null).height.replace("px", ""));
const viewX = 640;
const viewY = 480;
const svgWidthOld = $('#overviewMiniView').attr('width');
const svgWidthOld = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const svgHeightNew = viewHeight / viewWidth * svgWidthOld;
$('#overviewMiniView').attr('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
$('#overviewMiniView').attr('height', svgHeightNew);
$id('overviewMiniView').setAttribute('viewBox', viewX + ' ' + viewY + ' ' + viewWidth + ' ' + viewHeight);
$id('overviewMiniView').setAttribute('height', svgHeightNew);
updateViewBox();
};
updateViewDimensions();
@ -93,30 +98,31 @@ export default {
// Set up the overview window as a controller for the view port.
overviewWindowGlobals.viewBoxDragging = false;
const updateViewPortFromViewBox = function () {
const windowWidth = Number.parseFloat($('#svgcanvas').css('width'));
const windowHeight = Number.parseFloat($('#svgcanvas').css('height'));
const overviewWidth = $('#overviewMiniView').attr('width');
const overviewHeight = $('#overviewMiniView').attr('height');
const viewBoxX = Number.parseFloat($('#overview_window_view_box').css('left'));
const viewBoxY = Number.parseFloat($('#overview_window_view_box').css('top'));
const windowWidth = parseFloat(getComputedStyle($id("svgcanvas"), null).width.replace("px", ""));
const windowHeight = parseFloat(getComputedStyle($id("svgcanvas"), null).height.replace("px", ""));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxX = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('left').replace("px", ""));;
const viewBoxY = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('top').replace("px", ""));;
const portX = viewBoxX / overviewWidth * windowWidth;
const portY = viewBoxY / overviewHeight * windowHeight;
document.getElementById('workarea').scrollLeft = portX;
document.getElementById('workarea').scrollTop = portY;
$id('workarea').scrollLeft = portX;
$id('workarea').scrollTop = portY;
};
const onStart = () => {
overviewWindowGlobals.viewBoxDragging = true;
updateViewPortFromViewBox();
};
const onEnd = (el, parent, x, y) => {
if((el.offsetLeft + el.offsetWidth) > $(parent).attr('width')){
el.style.left = ($(parent).attr('width') - el.offsetWidth) + 'px';
if((el.offsetLeft + el.offsetWidth) > parseFloat(getComputedStyle(parent, null).width.replace("px", ""))){
el.style.left = (parseFloat(getComputedStyle(parent, null).width.replace("px", "")) - el.offsetWidth) + 'px';
} else if(el.offsetLeft < 0){
el.style.left = "0px"
}
if((el.offsetTop + el.offsetHeight) > $(parent).attr('height')){
el.style.top = ($(parent).attr('height') - el.offsetHeight) + 'px';
if((el.offsetTop + el.offsetHeight) > parseFloat(getComputedStyle(parent, null).height.replace("px", ""))){
el.style.top = (parseFloat(getComputedStyle(parent, null).height.replace("px", "")) - el.offsetHeight) + 'px';
} else if(el.offsetTop < 0){
el.style.top = "0px"
}
@ -130,14 +136,14 @@ export default {
const parentElem = document.querySelector("#overviewMiniView");
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.
const mouseX = (evt.offsetX || evt.originalEvent.layerX);
const mouseY = (evt.offsetY || evt.originalEvent.layerY);
const overviewWidth = $('#overviewMiniView').attr('width');
const overviewHeight = $('#overviewMiniView').attr('height');
const viewBoxWidth = Number.parseFloat($('#overview_window_view_box').css('min-width'));
const viewBoxHeight = Number.parseFloat($('#overview_window_view_box').css('min-height'));
const overviewWidth = parseFloat(getComputedStyle($id("overviewMiniView"), null).width.replace("px", ""));
const overviewHeight = parseFloat(getComputedStyle($id("overviewMiniView"), null).height.replace("px", ""));
const viewBoxWidth = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('min-width').replace("px", ""));;
const viewBoxHeight = parseFloat(getComputedStyle($id("overview_window_view_box"), null).getPropertyValue('min-height').replace("px", ""));;
let viewBoxX = mouseX - 0.5 * viewBoxWidth;
let viewBoxY = mouseY - 0.5 * viewBoxHeight;
@ -154,9 +160,8 @@ export default {
if (viewBoxY + viewBoxHeight > overviewHeight) {
viewBoxY = overviewHeight - viewBoxHeight;
}
$('#overview_window_view_box').css('top', viewBoxY + 'px');
$('#overview_window_view_box').css('left', viewBoxX + 'px');
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$id("overview_window_view_box").style.left = viewBoxX + 'px';
updateViewPortFromViewBox();
});

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

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

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

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

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

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

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

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

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

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

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

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

4
src/svgcanvas/svgcanvas.js
View File

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