update master to V7

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

@@ -10,6 +10,7 @@
 const loadExtensionTranslation = async function (lang) {
   let translationModule;
   try {
+    // eslint-disable-next-line no-unsanitized/method
     translationModule = await import(`./locale/${encodeURIComponent(lang)}.js`);
   } catch (_error) {
     // eslint-disable-next-line no-console
@@ -21,12 +22,12 @@ const loadExtensionTranslation = async function (lang) {
 
 export default {
   name: 'eyedropper',
-  async init (S) {
+  async init(S) {
     const svgEditor = this;
-    const strings = await loadExtensionTranslation(svgEditor.curPrefs.lang);
-    const {$, ChangeElementCommand} = S, // , svgcontent,
+    const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
+    const { ChangeElementCommand } = S, // , svgcontent,
       // svgdoc = S.svgroot.parentNode.ownerDocument,
-      svgCanvas = svgEditor.canvas,
+      { svgCanvas } = svgEditor,
       addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
       currentStyle = {
         fillPaint: 'red', fillOpacity: 1.0,
@@ -36,25 +37,26 @@ export default {
         strokeLinecap: 'butt',
         strokeLinejoin: 'miter'
       };
+    const { $id } = svgCanvas;
 
     /**
      *
      * @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts
      * @returns {void}
      */
-    function getStyle (opts) {
+    const getStyle = (opts) => {
       // if we are in eyedropper mode, we don't want to disable the eye-dropper tool
       const mode = svgCanvas.getMode();
       if (mode === 'eyedropper') { return; }
 
-      const tool = $('#tool_eyedropper');
+      const tool = $id('tool_eyedropper');
       // enable-eye-dropper if one element is selected
       let elem = null;
       if (!opts.multiselected && opts.elems[0] &&
         !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)
       ) {
         elem = opts.elems[0];
-        tool.removeClass('disabled');
+        tool.classList.remove('disabled');
         // grab the current style
         currentStyle.fillPaint = elem.getAttribute('fill') || 'black';
         currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0;
@@ -65,41 +67,33 @@ export default {
         currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap');
         currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin');
         currentStyle.opacity = elem.getAttribute('opacity') || 1.0;
-      // disable eye-dropper tool
+        // disable eye-dropper tool
       } else {
-        tool.addClass('disabled');
+        tool.classList.add('disabled');
       }
     }
 
-    const buttons = [
-      {
-        id: 'tool_eyedropper',
-        icon: 'eyedropper.png',
-        type: 'mode',
-        events: {
-          click () {
-            svgCanvas.setMode('eyedropper');
-          }
-        }
-      }
-    ];
-
     return {
       name: strings.name,
-      svgicons: 'eyedropper-icon.xml',
-      buttons: strings.buttons.map((button, i) => {
-        return Object.assign(buttons[i], button);
-      }),
-
+      callback() {
+        // Add the button and its handler(s)
+        const buttonTemplate = document.createElement("template");
+        buttonTemplate.innerHTML = `
+        <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
+        `
+        $id('tools_left').append(buttonTemplate.content.cloneNode(true));
+        $id('tool_eyedropper').addEventListener("click", () => {
+          svgCanvas.setMode('eyedropper');
+        });
+      },
       // if we have selected an element, grab its paint and enable the eye dropper button
       selectedChanged: getStyle,
       elementChanged: getStyle,
-
-      mouseDown (opts) {
+      mouseDown(opts) {
         const mode = svgCanvas.getMode();
         if (mode === 'eyedropper') {
           const e = opts.event;
-          const {target} = e;
+          const { target } = e;
           if (!['svg', 'g', 'use'].includes(target.nodeName)) {
             const changes = {};
 

src/editor/extensions/ext-eyedropper/locale/de.js

@@ -1,9 +0,0 @@
-export default {
-  name: 'eyedropper',
-  buttons: [
-    {
-      title: 'Pipetten Werkzeug',
-      key: 'I'
-    }
-  ]
-};