Extensions (#737)

- add the current document title in the toolbar
- allow user extensions to define optional parameters
- more events for renamedElement, beforeClear, afterClear, sourceChanged
- remove "message" event used for iframe integration not used anymore. can be readded through a new extension if necessary
- default precision down to 2 digits (and applied in rotation)

src/editor/Editor.js

@@ -577,6 +577,36 @@ class Editor extends EditorStartup {
     )
   }
 
+  /**
+   * @returns {void}
+   */
+  elementRenamed (win, renameObj) {
+    this.svgCanvas.runExtensions(
+      'elementRenamed',
+      /** @type {module:svgcanvas.SvgCanvas#event:ext_elementRenamed} */ {
+        renameObj
+      }
+    )
+  }
+
+  /**
+   * @returns {void}
+   */
+  afterClear (win) {
+    this.svgCanvas.runExtensions(
+      'afterClear'
+    )
+  }
+
+  /**
+   * @returns {void}
+   */
+  beforeClear (win) {
+    this.svgCanvas.runExtensions(
+      'beforeClear'
+    )
+  }
+
   /**
    * @returns {void}
    */

src/editor/EditorStartup.js

@@ -192,6 +192,11 @@ class EditorStartup {
     )
     this.svgCanvas.bind('contextset', this.contextChanged.bind(this))
     this.svgCanvas.bind('extension_added', this.extAdded.bind(this))
+    this.svgCanvas.bind('elementRenamed', this.elementRenamed.bind(this))
+
+    this.svgCanvas.bind('beforeClear', this.beforeClear.bind(this))
+    this.svgCanvas.bind('afterClear', this.afterClear.bind(this))
+
     this.svgCanvas.textActions.setInputElem($id('text'))
 
     this.setBackground(this.configObj.pref('bkgd_color'), this.configObj.pref('bkgd_url'))
@@ -592,7 +597,6 @@ class EditorStartup {
     })
     // run callbacks stored by this.ready
     await this.runCallbacks()
-    window.addEventListener('message', this.messageListener.bind(this))
   }
 
   /**
@@ -685,24 +689,6 @@ class EditorStartup {
       console.error(err)
     }
   }
-
-  /**
- * @param {PlainObject} info
- * @param {any} info.data
- * @param {string} info.origin
- * @fires module:svgcanvas.SvgCanvas#event:message
- * @returns {void}
- */
-  messageListener ({ data, origin }) {
-    const messageObj = { data, origin }
-    if (!this.extensionsAdded) {
-      this.messageQueue.push(messageObj)
-    } else {
-    // Extensions can handle messages at this stage with their own
-    //  canvas `message` listeners
-      this.svgCanvas.call('message', messageObj)
-    }
-  }
 }
 
 export default EditorStartup

src/editor/MainMenu.js

@@ -1,4 +1,4 @@
-/* globals seConfirm, seAlert */
+/* globals seAlert */
 import SvgCanvas from '../svgcanvas/svgcanvas.js'
 import { convertUnit, isValidUnit } from '../common/units.js'
 import { isChrome } from '../common/browser.js'
@@ -21,26 +21,6 @@ class MainMenu {
     this.exportWindowCt = 0
   }
 
-  /**
-   * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
-   * @returns {void}
-   */
-  async clickClear () {
-    const [x, y] = this.editor.configObj.curConfig.dimensions
-    const ok = await seConfirm(this.editor.i18next.t('notification.QwantToClear'))
-    if (ok === 'Cancel') {
-      return
-    }
-    this.editor.leftPanel.clickSelect()
-    this.editor.svgCanvas.clear()
-    this.editor.svgCanvas.setResolution(x, y)
-    this.editor.updateCanvas(true)
-    this.editor.zoomImage()
-    this.editor.layersPanel.populateLayers()
-    this.editor.topPanel.updateContextPanel()
-    this.editor.svgCanvas.runExtensions('onNewDocument')
-  }
-
   /**
    *
    * @returns {void}

src/editor/extensions/ext-opensave/ext-opensave.js

@@ -121,10 +121,7 @@ export default {
     imgImport.addEventListener('change', importImage)
     // dropping a svg file will import it in the svg as well
     this.workarea.addEventListener('drop', importImage)
-    /**
-     * @fires module:svgcanvas.SvgCanvas#event:ext_onNewDocument
-     * @returns {void}
-     */
+
     const clickClear = async function () {
       const [x, y] = svgEditor.configObj.curConfig.dimensions
       const ok = await seConfirm(svgEditor.i18next.t('notification.QwantToClear'))
@@ -139,7 +136,6 @@ export default {
       svgEditor.layersPanel.populateLayers()
       svgEditor.topPanel.updateContextPanel()
       svgEditor.topPanel.updateTitle('untitled.svg')
-      svgEditor.svgCanvas.runExtensions('onNewDocument')
     }
 
     /**
@@ -203,7 +199,7 @@ export default {
         // In the future, more options can be provided here
         const saveOpts = {
           images: svgEditor.configObj.pref('img_save'),
-          round_digits: 6
+          round_digits: 2
         }
         // remove the selected outline before serializing
         svgCanvas.clearSelection()

src/editor/panels/TopPanel.js

@@ -118,11 +118,11 @@ class TopPanel {
           }
 
           $id('stroke_width').value = gWidth === null ? '' : gWidth
-          this.editor.bottomPanel.updateColorpickers(true)
+          this.editor.bottomPanel.updateColorpickers(false)
           break
         }
         default: {
-          this.editor.bottomPanel.updateColorpickers(true)
+          this.editor.bottomPanel.updateColorpickers(false)
 
           $id('stroke_width').value =
             this.selectedElement.getAttribute('stroke-width') || 1
@@ -539,9 +539,11 @@ class TopPanel {
    */
   changeRotationAngle (e) {
     this.editor.svgCanvas.setRotationAngle(e.target.value)
-    ;(Number.parseInt(e.target.value) === 0)
-      ? $id('tool_reorient').classList.add('disabled')
-      : $id('tool_reorient').classList.remove('disabled')
+    if (Number.parseInt(e.target.value) === 0) {
+      $id('tool_reorient').classList.add('disabled')
+    } else {
+      $id('tool_reorient').classList.remove('disabled')
+    }
   }
 
   /**
@@ -628,16 +630,7 @@ class TopPanel {
       }
     }
 
-    // if the user is changing the id, then de-select the element first
-    // change the ID, then re-select it with the new ID
-    if (attr === 'id') {
-      const elem = this.editor.selectedElement
-      this.editor.svgCanvas.clearSelection()
-      elem.id = val
-      this.editor.svgCanvas.addToSelection([elem], true)
-    } else {
-      this.editor.svgCanvas.changeSelectedAttribute(attr, val)
-    }
+    this.editor.svgCanvas.changeSelectedAttribute(attr, val)
     return true
   }