remove change image and minor refactoring

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' ],

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

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 ],

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

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;

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();

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

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`),

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.

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,

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 =
+      $id("elem_class").value = this.selectedElement.getAttribute("class") ?? "";
-        this.selectedElement.getAttribute("class") !== null
-          ? 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';
+    this.hideTool("selected_panel");
-    $id("multiselected_panel").style.display = 'none';
+    this.hideTool("multiselected_panel");
-    $id("g_panel").style.display = 'none';
+    this.hideTool("g_panel");
-    $id("rect_panel").style.display = 'none';
+    this.hideTool("rect_panel");
-    $id("circle_panel").style.display = 'none';
+    this.hideTool("circle_panel");
-    $id("ellipse_panel").style.display = 'none';
+    this.hideTool("ellipse_panel");
-    $id("line_panel").style.display = 'none';
+    this.hideTool("line_panel");
-    $id("text_panel").style.display = 'none';
+    this.hideTool("text_panel");
-    $id("image_panel").style.display = 'none';
+    this.hideTool("image_panel");
-    $id("container_panel").style.display = 'none';
+    this.hideTool("container_panel");
-    $id("use_panel").style.display = 'none';
+    this.hideTool("use_panel");
-    $id("a_panel").style.display = 'none';
+    this.hideTool("a_panel");
-    if (!isNullish(elem)) {
+    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)
+        ].includes(elname)) {
-          ? "none"
+          this.hideTool("tool_topath");
-          : "block";
+        } else {
-        $id("tool_reorient").style.display = (elname === "path") ? "block" : "none";
+          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')}"></se-spin-input>
           </div>
           <div class="toolset">
-            <label id="tool_image_url">url:
+            <se-input id="image_url" data-attr="image_url" size="15" label="${i18next.t('properties.image_url')}"></se-input> 
-              <input id="image_url" type="text" title="${i18next.t('properties.image_url')}" size="35" />
-            </label>
-            <label id="tool_change_image">
-              <button id="change_image_url" style="display: none;">Change Image</button>
-              <span id="url_notice"
-                title="${i18next.t('tools.no_embed')}"></span>
-            </label>
           </div>
         </div> <!-- image_panel -->
         <div id="circle_panel">
@@ -1098,10 +1147,10 @@ class TopPanel {
       "click",
       this.clickGroup.bind(this)
     );
-    $id("change_image_url").addEventListener(
+    $id('image_url').addEventListener('change', (evt) => {
-      "click",
+      this.setImageURL(evt.currentTarget.value);
-      this.promptImgURL.bind(this)
+    });
-    );
+
     // all top panel attributes
     [
       "elem_id",

src/editor/svgedit.css

@@ -520,11 +520,6 @@ input[type=text] {
   left: -9999px;
 }
 
-#url_notice {
-  padding-top: 4px;
-  display: none;
-}
-
 .bottom-icon {
   width: 22px;
 }