From b50fe0aee15b76917e19654d12a4101e7c8d50d9 Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Fri, 13 Aug 2021 14:37:55 +0200
Subject: [PATCH] remove change image and minor refactoring
---
cypress/integration/unit/test1.js | 2 +-
demos/canvas.html | 2 +-
src/editor/ConfigObj.js | 2 +-
src/editor/Editor.js | 48 +-----
src/editor/EditorStartup.js | 15 +-
src/editor/MainMenu.js | 10 +-
.../extensions/ext-connector/ext-connector.js | 2 +-
src/editor/extensions/ext-grid/ext-grid.js | 4 +-
.../ext-overview_window.js | 4 +-
.../extensions/ext-polystar/ext-polystar.js | 6 +-
src/editor/panels/TopPanel.js | 153 ++++++++++++------
src/editor/svgedit.css | 5 -
12 files changed, 125 insertions(+), 128 deletions(-)
diff --git a/cypress/integration/unit/test1.js b/cypress/integration/unit/test1.js
index 7f8c954a..a61fdd5a 100644
--- a/cypress/integration/unit/test1.js
+++ b/cypress/integration/unit/test1.js
@@ -50,7 +50,7 @@ describe('Basic Module', function () {
opacity: 1
},
initOpacity: 1,
- imgPath: '../editor/images/',
+ imgPath: '../editor/images',
langPath: 'locale/',
extPath: 'extensions/',
extensions: [ 'ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js' ],
diff --git a/demos/canvas.html b/demos/canvas.html
index 008c026d..b82d1cdf 100644
--- a/demos/canvas.html
+++ b/demos/canvas.html
@@ -37,7 +37,7 @@ const config = {
initStroke: { color: '000000', opacity: 1, width: 1 },
text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
initOpacity: 1,
- imgPath: '../src/editor/images/',
+ imgPath: '../src/editor/images',
dimensions: [ width, height ],
baseUnit: 'px'
};
diff --git a/src/editor/ConfigObj.js b/src/editor/ConfigObj.js
index 07151c07..b406d107 100644
--- a/src/editor/ConfigObj.js
+++ b/src/editor/ConfigObj.js
@@ -132,7 +132,7 @@ export default class ConfigObj {
no_save_warning: false,
// PATH CONFIGURATION
// The following path configuration items are disallowed in the URL (as should any future path configurations)
- imgPath: './images/',
+ imgPath: './images',
// DOCUMENT PROPERTIES
// Change the following to a preference (already in the Document Properties dialog)?
dimensions: [ 640, 480 ],
diff --git a/src/editor/Editor.js b/src/editor/Editor.js
index 8121efeb..ae6aebf8 100644
--- a/src/editor/Editor.js
+++ b/src/editor/Editor.js
@@ -399,46 +399,6 @@ class Editor extends EditorStartup {
}
}
- /**
- * Set a selected image's URL.
- * @function module:SVGthis.setImageURL
- * @param {string} url
- * @returns {void}
- */
- setImageURL(url) {
- if (!url) {
- url = this.defaultImageURL;
- }
- this.svgCanvas.setImageURL(url);
- $id("image_url").value = url;
-
- if (url.startsWith('data:')) {
- // data URI found
- $id("image_url").style.display = 'none';
- $id("change_image_url").style.display = 'block';
- } else {
- // regular URL
- const self = this;
- const promised = this.svgCanvas.embedImage(url);
- // eslint-disable-next-line promise/catch-or-return
- promised
- .then( function (dataURI) {
- // eslint-disable-next-line promise/always-return
- $id('url_notice').style.display = (!dataURI) ? 'block' : 'none';
- // switch into "select" mode if we've clicked on an element
- self.svgCanvas.setMode('select');
- self.svgCanvas.selectOnly(self.svgCanvas.getSelectedElems(), true);
- }, function (error) {
- // eslint-disable-next-line no-console
- console.log("error =", error);
- seAlert(self.i18next.t('tools.no_embed'));
- self.svgCanvas.deleteSelectedElements();
- });
- $id("image_url").style.display = 'block';
- $id("change_image_url").style.display = 'none';
- }
- }
-
/**
*
* @param {string} color
@@ -930,7 +890,7 @@ class Editor extends EditorStartup {
*/
// eslint-disable-next-line class-methods-use-this
hideSourceEditor() {
- const $editorDialog = document.getElementById('se-svg-editor-dialog');
+ const $editorDialog = $id('se-svg-editor-dialog');
$editorDialog.setAttribute('dialog', 'closed');
}
@@ -939,7 +899,7 @@ class Editor extends EditorStartup {
* @returns {void} Resolves to `undefined`
*/
async saveSourceEditor(e) {
- const $editorDialog = document.getElementById('se-svg-editor-dialog');
+ const $editorDialog = $id('se-svg-editor-dialog');
if ($editorDialog.getAttribute('dialog') !== 'open') return;
const saveChanges = () => {
this.svgCanvas.clearSelection();
@@ -967,7 +927,7 @@ class Editor extends EditorStartup {
*/
cancelOverlays(e) {
if ($id("dialog_box") != null) $id("dialog_box").style.display = 'none';
- const $editorDialog = document.getElementById('se-svg-editor-dialog');
+ const $editorDialog = $id('se-svg-editor-dialog');
const editingsource = $editorDialog.getAttribute('dialog') === 'open';
if (!editingsource && !this.docprops && !this.configObj.preferences) {
if (this.curContext) {
@@ -1058,7 +1018,7 @@ class Editor extends EditorStartup {
setLang(lang) {
this.langChanged = true;
this.configObj.pref('lang', lang);
- const $editDialog = document.getElementById('se-edit-prefs');
+ const $editDialog = $id('se-edit-prefs');
$editDialog.setAttribute('lang', lang);
const oldLayerName = ($id('#layerlist')) ? $id('#layerlist').querySelector('tr.layersel td.layername').textContent : "";
const renameLayer = (oldLayerName === this.i18next.t('notification.common.layer') + ' 1');
diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index e9a135ef..1bfec253 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -262,9 +262,6 @@ class EditorStartup {
addListenerMulti($id('text'), 'keyup input', (evt) => {
this.svgCanvas.setTextContent(evt.currentTarget.value);
});
- $id('image_url').addEventListener('change', (evt) => {
- this.setImageURL(evt.currentTarget.value);
- });
$id('link_url').addEventListener('change', (evt) => {
if (evt.currentTarget.value.length) {
@@ -416,10 +413,6 @@ class EditorStartup {
this.rulers.manageScroll();
});
- $id('url_notice').addEventListener('click', () => {
- seAlert(this.title);
- });
-
$id('stroke_width').value = this.configObj.curConfig.initStroke.width;
$id('opacity').value = this.configObj.curConfig.initOpacity * 100;
const elements = document.getElementsByClassName("push_button");
@@ -598,12 +591,12 @@ class EditorStartup {
*/
const editorObj = this;
const importImage = function (e) {
- document.getElementById('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
+ $id('se-prompt-dialog').title = editorObj.i18next.t('notification.loadingImage');
e.stopPropagation();
e.preventDefault();
const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0];
if (!file) {
- document.getElementById('se-prompt-dialog').setAttribute('close', true);
+ $id('se-prompt-dialog').setAttribute('close', true);
return;
}
@@ -624,7 +617,7 @@ class EditorStartup {
editorObj.svgCanvas.alignSelectedElements('c', 'page');
// highlight imported element, otherwise we get strange empty selectbox
editorObj.svgCanvas.selectOnly([ newElement ]);
- document.getElementById('se-prompt-dialog').setAttribute('close', true);
+ $id('se-prompt-dialog').setAttribute('close', true);
};
reader.readAsText(file);
} else {
@@ -654,7 +647,7 @@ class EditorStartup {
editorObj.svgCanvas.alignSelectedElements('m', 'page');
editorObj.svgCanvas.alignSelectedElements('c', 'page');
editorObj.topPanel.updateContextPanel();
- document.getElementById('se-prompt-dialog').setAttribute('close', true);
+ $id('se-prompt-dialog').setAttribute('close', true);
};
// create dummy img so we know the default dimensions
let imgWidth = 100;
diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js
index 1e12c8a1..27dd08ac 100644
--- a/src/editor/MainMenu.js
+++ b/src/editor/MainMenu.js
@@ -45,7 +45,7 @@ class MainMenu {
* @returns {void}
*/
hideDocProperties() {
- const $imgDialog = document.getElementById("se-img-prop");
+ const $imgDialog = $id("se-img-prop");
$imgDialog.setAttribute("dialog", "close");
$imgDialog.setAttribute("save", this.editor.configObj.pref("img_save"));
this.editor.docprops = false;
@@ -56,7 +56,7 @@ class MainMenu {
* @returns {void}
*/
hidePreferences() {
- const $editDialog = document.getElementById("se-edit-prefs");
+ const $editDialog = $id("se-edit-prefs");
$editDialog.setAttribute("dialog", "close");
this.editor.configObj.preferences = false;
}
@@ -238,7 +238,7 @@ class MainMenu {
return;
}
this.editor.docprops = true;
- const $imgDialog = document.getElementById("se-img-prop");
+ const $imgDialog = $id("se-img-prop");
// update resolution option with actual resolution
const resolution = this.editor.svgCanvas.getResolution();
@@ -264,7 +264,7 @@ class MainMenu {
return;
}
this.editor.configObj.preferences = true;
- const $editDialog = document.getElementById("se-edit-prefs");
+ const $editDialog = $id("se-edit-prefs");
// Update background color with current one
const canvasBg = this.editor.configObj.curPrefs.bkgd_color;
const url = this.editor.configObj.pref("bkgd_url");
@@ -337,7 +337,7 @@ class MainMenu {
$id("tool_save").addEventListener(
"click",
function() {
- const $editorDialog = document.getElementById("se-svg-editor-dialog");
+ const $editorDialog = $id("se-svg-editor-dialog");
const editingsource = $editorDialog.getAttribute("dialog") === "open";
if (editingsource) {
this.saveSourceEditor();
diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js
index 45278681..96b416b0 100644
--- a/src/editor/extensions/ext-connector/ext-connector.js
+++ b/src/editor/extensions/ext-connector/ext-connector.js
@@ -217,7 +217,7 @@ export default {
);
dataStorage.put(ethis, 'c_' + pos, part.id);
dataStorage.put(ethis, pos + '_bb', svgCanvas.getStrokedBBox([ part ]));
- } else part = document.getElementById(part);
+ } else part = $id(part);
parts.push(part);
}, ethis);
diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js
index 059188c5..7c11b72f 100644
--- a/src/editor/extensions/ext-grid/ext-grid.js
+++ b/src/editor/extensions/ext-grid/ext-grid.js
@@ -32,7 +32,7 @@ export default {
await loadExtensionTranslation(svgEditor);
const { svgCanvas } = svgEditor;
const { $id } = svgCanvas;
- const svgdoc = document.getElementById('svgcanvas').ownerDocument;
+ const svgdoc = $id('svgcanvas').ownerDocument;
const { assignAttributes } = svgCanvas;
const hcanvas = document.createElement('canvas');
const canvBG = $id('canvasBackground');
@@ -154,7 +154,7 @@ export default {
updateGrid(svgCanvas.getZoom());
}
$id('canvasGrid').style.display = (showGrid) ? 'block' : 'none';
- document.getElementById('view_grid').pressed = showGrid;
+ $id('view_grid').pressed = showGrid;
};
return {
name: svgEditor.i18next.t(`${name}:name`),
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 b045b01a..9d159d65 100644
--- a/src/editor/extensions/ext-overview_window/ext-overview_window.js
+++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js
@@ -71,12 +71,12 @@ export default {
$id("overview_window_view_box").style.top = viewBoxY + 'px';
$id("overview_window_view_box").style.left = viewBoxX + 'px';
};
- document.getElementById('workarea').addEventListener('scroll', () => {
+ $id('workarea').addEventListener('scroll', () => {
if (!(overviewWindowGlobals.viewBoxDragging)) {
updateViewBox();
}
});
- document.getElementById('workarea').addEventListener('resize', updateViewBox);
+ $id('workarea').addEventListener('resize', updateViewBox);
updateViewBox();
// Compensate for changes in zoom and canvas size.
diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js
index ce8801fc..2a6211e2 100644
--- a/src/editor/extensions/ext-polystar/ext-polystar.js
+++ b/src/editor/extensions/ext-polystar/ext-polystar.js
@@ -258,9 +258,9 @@ export default {
cy: opts.start_y,
id: svgCanvas.getNextId(),
shape: "star",
- point: document.getElementById("starNumPoints").value,
+ point: $id("starNumPoints").value,
r: 0,
- radialshift: document.getElementById("radialShift").value,
+ radialshift: $id("radialShift").value,
r2: 0,
orient: "point",
fill: rgb,
@@ -287,7 +287,7 @@ export default {
cy: opts.start_y,
id: svgCanvas.getNextId(),
shape: "regularPoly",
- sides: document.getElementById("polySides").value,
+ sides: $id("polySides").value,
orient: "x",
edge: 0,
fill: rgb,
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 079213cc..02d134f9 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -1,3 +1,5 @@
+/* globals seAlert */
+
import SvgCanvas from "../../svgcanvas/svgcanvas.js";
import { isValidUnit, getTypeMap, convertUnit } from "../../common/units.js";
@@ -16,6 +18,19 @@ class TopPanel {
constructor(editor) {
this.editor = editor;
}
+ /**
+ * @type {module}
+ */
+ displayTool(id) {
+ // default display is 'none' so removing the property will make the panel visible
+ $id(id).style.removeProperty('display');
+ }
+ /**
+ * @type {module}
+ */
+ hideTool(id) {
+ $id(id).style.display = 'none';
+ }
/**
* @type {module}
*/
@@ -50,10 +65,10 @@ class TopPanel {
this.svgCanvas.setStrokeAttr('stroke-' + pre, val);
}
opt.classList.add('current');
- const elements = Array.prototype.filter.call(opt.parentNode.children, function(child){
+ const elements = Array.prototype.filter.call(opt.parentNode.children, function (child) {
return child !== opt;
});
- Array.from(elements).forEach(function(element) {
+ Array.from(elements).forEach(function (element) {
element.classList.remove('current');
});
}
@@ -119,10 +134,7 @@ class TopPanel {
(this.selectedElement.getAttribute("opacity") || 1.0) * 100;
$id("opacity").value = opacPerc;
$id("elem_id").value = this.selectedElement.id;
- $id("elem_class").value =
- this.selectedElement.getAttribute("class") !== null
- ? this.selectedElement.getAttribute("class")
- : "";
+ $id("elem_class").value = this.selectedElement.getAttribute("class") ?? "";
}
this.editor.bottomPanel.updateToolButtonState();
@@ -141,7 +153,7 @@ class TopPanel {
curhref
);
if (url) {
- this.editor.setImageURL(url);
+ this.setImageURL(url);
} else if (cancelDeletes) {
this.editor.svgCanvas.deleteSelectedElements();
}
@@ -167,19 +179,19 @@ class TopPanel {
const isNode = currentMode === "pathedit"; // elem ? (elem.id && elem.id.startsWith('pathpointgrip')) : false;
const menuItems = document.getElementById("se-cmenu_canvas");
- $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)) {
+ this.hideTool("selected_panel");
+ this.hideTool("multiselected_panel");
+ this.hideTool("g_panel");
+ this.hideTool("rect_panel");
+ this.hideTool("circle_panel");
+ this.hideTool("ellipse_panel");
+ this.hideTool("line_panel");
+ this.hideTool("text_panel");
+ this.hideTool("image_panel");
+ this.hideTool("container_panel");
+ this.hideTool("use_panel");
+ this.hideTool("a_panel");
+ if (elem) {
const elname = elem.nodeName;
const angle = this.editor.svgCanvas.getRotationAngle(elem);
@@ -198,10 +210,10 @@ class TopPanel {
}
if (!isNode && currentMode !== "pathedit") {
- $id("selected_panel").style.removeProperty('display');
+ this.displayTool("selected_panel");
// Elements in this array already have coord fields
if ([ "line", "circle", "ellipse" ].includes(elname)) {
- $id("xy_panel").style.display = 'none';
+ this.hideTool("xy_panel");
} else {
let x; let y;
@@ -223,20 +235,26 @@ class TopPanel {
$id("selected_x").value = (x || 0);
$id("selected_y").value = (y || 0);
- $id("xy_panel").style.removeProperty('display');
+ this.displayTool("xy_panel");
}
// Elements in this array cannot be converted to a path
- $id("tool_topath").style.display = [
+ if ([
"image",
"text",
"path",
"g",
"use"
- ].includes(elname)
- ? "none"
- : "block";
- $id("tool_reorient").style.display = (elname === "path") ? "block" : "none";
+ ].includes(elname)) {
+ this.hideTool("tool_topath");
+ } else {
+ this.displayTool("tool_topath");
+ }
+ if (elname === "path") {
+ this.displayTool("tool_reorient");
+ } else {
+ this.hideTool("tool_reorient");
+ }
$id("tool_reorient").disabled = (angle === 0);
} else {
const point = this.path.getNodePoint();
@@ -284,30 +302,32 @@ class TopPanel {
let linkHref = null;
if (tagName === "a") {
linkHref = this.editor.svgCanvas.getHref(elem);
- $id("g_panel").style.removeProperty('display');
+ this.displayTool("g_panel");
}
// siblings
if (elem.parentNode) {
- const selements = Array.prototype.filter.call(elem.parentNode.children, function(child){
+ const selements = Array.prototype.filter.call(elem.parentNode.children, function (child) {
return child !== elem;
});
if (elem.parentNode.tagName === "a" && !selements.length) {
- $id("a_panel").style.removeProperty('display');
+ this.displayTool("a_panel");
linkHref = this.editor.svgCanvas.getHref(elem.parentNode);
}
}
// Hide/show the make_link buttons
- $id('tool_make_link').style.display = (!linkHref) ? 'block' : 'none';
- $id('tool_make_link_multi').style.display = (!linkHref) ? 'block' : 'none';
-
if (linkHref) {
+ this.displayTool('tool_make_link');
+ this.displayTool('tool_make_link_multi');
$id("link_url").value = linkHref;
+ } else {
+ this.hideTool('tool_make_link');
+ this.hideTool('tool_make_link_multi');
}
if (panels[tagName]) {
const curPanel = panels[tagName];
- $id(tagName + "_panel").style.removeProperty('display');
+ this.displayTool(tagName + "_panel");
curPanel.forEach((item) => {
let attrVal = elem.getAttribute(item);
@@ -319,7 +339,7 @@ class TopPanel {
});
if (tagName === "text") {
- $id("text_panel").style.removeProperty('display');
+ this.displayTool("text_panel");
$id("tool_italic").pressed = this.editor.svgCanvas.getItalic();
$id("tool_bold").pressed = this.editor.svgCanvas.getBold();
$id("tool_font_family").value = elem.getAttribute("font-family");
@@ -362,7 +382,7 @@ class TopPanel {
);
// image
} else if (tagName === "g" || tagName === "use") {
- $id("container_panel").style.removeProperty('display');
+ this.displayTool("container_panel");
const title = this.editor.svgCanvas.getTitle();
const label = $id("g_title");
label.value = title;
@@ -381,7 +401,7 @@ class TopPanel {
// if (!isNullish(elem))
} else if (this.multiselected) {
- $id("multiselected_panel").style.removeProperty('display');
+ this.displayTool("multiselected_panel");
menuItems.setAttribute("enablemenuitems", "#group");
menuItems.setAttribute("disablemenuitems", "#ungroup");
} else {
@@ -442,7 +462,7 @@ class TopPanel {
fcRules.setAttribute('id', 'wireframe_rules');
document.getElementsByTagName("head")[0].appendChild(fcRules);
} else {
- while(wfRules.firstChild)
+ while (wfRules.firstChild)
wfRules.removeChild(wfRules.firstChild);
}
this.editor.updateWireFrame();
@@ -456,7 +476,7 @@ class TopPanel {
if (undoMgr.getUndoStackSize() > 0) {
undoMgr.undo();
this.editor.layersPanel.populateLayers();
- if(this.editor.svgCanvas.getMode() === 'textedit') {
+ if (this.editor.svgCanvas.getMode() === 'textedit') {
textActions.clear();
}
}
@@ -733,6 +753,42 @@ class TopPanel {
this.updateContextPanel();
return false;
}
+ /**
+ * Set a selected image's URL.
+ * @function module:SVGthis.setImageURL
+ * @param {string} url
+ * @returns {void}
+ */
+ setImageURL(url) {
+ const { editor } = this;
+ if (!url) {
+ url = editor.defaultImageURL;
+ }
+ editor.svgCanvas.setImageURL(url);
+ $id("image_url").value = url;
+
+ if (url.startsWith('data:')) {
+ // data URI found
+ this.hideTool("image_url");
+ } else {
+ // regular URL
+ const promised = editor.svgCanvas.embedImage(url);
+ // eslint-disable-next-line promise/catch-or-return
+ promised
+ // eslint-disable-next-line promise/always-return
+ .then(() => {
+ // switch into "select" mode if we've clicked on an element
+ editor.svgCanvas.setMode('select');
+ editor.svgCanvas.selectOnly(editor.svgCanvas.getSelectedElems(), true);
+ }, (error) => {
+ // eslint-disable-next-line no-console
+ console.log("error =", error);
+ seAlert(editor.i18next.t('tools.no_embed'));
+ editor.svgCanvas.deleteSelectedElements();
+ });
+ this.displayTool("image_url");
+ }
+ }
/**
* @type {module}
@@ -866,14 +922,7 @@ class TopPanel {
title="${i18next.t('properties.image_height')}">
-
-
+
@@ -1098,10 +1147,10 @@ class TopPanel {
"click",
this.clickGroup.bind(this)
);
- $id("change_image_url").addEventListener(
- "click",
- this.promptImgURL.bind(this)
- );
+ $id('image_url').addEventListener('change', (evt) => {
+ this.setImageURL(evt.currentTarget.value);
+ });
+
// all top panel attributes
[
"elem_id",
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index 2515180b..4d9736d9 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -520,11 +520,6 @@ input[type=text] {
left: -9999px;
}
-#url_notice {
- padding-top: 4px;
- display: none;
-}
-
.bottom-icon {
width: 22px;
}