group each plugin in its own folder

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

@@ -0,0 +1,281 @@
+/**
+ * @file ext-foreignobject.js
+ *
+ * @license Apache-2.0
+ *
+ * @copyright 2010 Jacques Distler, 2010 Alexis Deveria
+ *
+ */
+
+export default {
+  name: 'foreignobject',
+  async init (S) {
+    const svgEditor = this;
+    const {$, text2xml, NS} = S;
+    const svgCanvas = svgEditor.canvas;
+    const
+      // {svgcontent} = S,
+      // addElem = svgCanvas.addSVGElementFromJson,
+      svgdoc = S.svgroot.parentNode.ownerDocument;
+    // eslint-disable-next-line node/no-unsupported-features/es-syntax
+    const {default: strings} = await import(`./locale/${svgEditor.curPrefs.lang}.js`);
+
+    const properlySourceSizeTextArea = function () {
+      // TODO: remove magic numbers here and get values from CSS
+      const height = $('#svg_source_container').height() - 80;
+      $('#svg_source_textarea').css('height', height);
+    };
+
+    /**
+    * @param {boolean} on
+    * @returns {void}
+    */
+    function showPanel (on) {
+      let fcRules = $('#fc_rules');
+      if (!fcRules.length) {
+        fcRules = $('<style id="fc_rules"></style>').appendTo('head');
+      }
+      fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }');
+      $('#foreignObject_panel').toggle(on);
+    }
+
+    /**
+    * @param {boolean} on
+    * @returns {void}
+    */
+    function toggleSourceButtons (on) {
+      $('#tool_source_save, #tool_source_cancel').toggle(!on);
+      $('#foreign_save, #foreign_cancel').toggle(on);
+    }
+
+    let selElems,
+      started,
+      newFO,
+      editingforeign = false;
+
+    /**
+    * This function sets the content of element elt to the input XML.
+    * @param {string} xmlString - The XML text
+    * @returns {boolean} This function returns false if the set was unsuccessful, true otherwise.
+    */
+    function setForeignString (xmlString) {
+      const elt = selElems[0]; // The parent `Element` to append to
+      try {
+        // convert string into XML document
+        const newDoc = text2xml('<svg xmlns="' + NS.SVG + '" xmlns:xlink="' + NS.XLINK + '">' + xmlString + '</svg>');
+        // run it through our sanitizer to remove anything we do not support
+        svgCanvas.sanitizeSvg(newDoc.documentElement);
+        elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true));
+        svgCanvas.call('changed', [elt]);
+        svgCanvas.clearSelection();
+      } catch (e) {
+        // Todo: Surface error to user
+        console.log(e); // eslint-disable-line no-console
+        return false;
+      }
+
+      return true;
+    }
+
+    /**
+    *
+    * @returns {void}
+    */
+    function showForeignEditor () {
+      const elt = selElems[0];
+      if (!elt || editingforeign) { return; }
+      editingforeign = true;
+      toggleSourceButtons(true);
+      elt.removeAttribute('fill');
+
+      const str = svgCanvas.svgToString(elt, 0);
+      $('#svg_source_textarea').val(str);
+      $('#svg_source_editor').fadeIn();
+      properlySourceSizeTextArea();
+      $('#svg_source_textarea').focus();
+    }
+
+    /**
+    * @param {string} attr
+    * @param {string|Float} val
+    * @returns {void}
+    */
+    function setAttr (attr, val) {
+      svgCanvas.changeSelectedAttribute(attr, val);
+      svgCanvas.call('changed', selElems);
+    }
+
+    const buttons = [{
+      id: 'tool_foreign',
+      icon: 'foreignobject-tool.png',
+      type: 'mode',
+      events: {
+        click () {
+          svgCanvas.setMode('foreign');
+        }
+      }
+    }, {
+      id: 'edit_foreign',
+      icon: 'foreignobject-edit.png',
+      type: 'context',
+      panel: 'foreignObject_panel',
+      events: {
+        click () {
+          showForeignEditor();
+        }
+      }
+    }];
+
+    const contextTools = [
+      {
+        type: 'input',
+        panel: 'foreignObject_panel',
+        id: 'foreign_width',
+        size: 3,
+        events: {
+          change () {
+            setAttr('width', this.value);
+          }
+        }
+      }, {
+        type: 'input',
+        panel: 'foreignObject_panel',
+        id: 'foreign_height',
+        events: {
+          change () {
+            setAttr('height', this.value);
+          }
+        }
+      }, {
+        type: 'input',
+        panel: 'foreignObject_panel',
+        id: 'foreign_font_size',
+        size: 2,
+        defval: 16,
+        events: {
+          change () {
+            setAttr('font-size', this.value);
+          }
+        }
+      }
+    ];
+
+    return {
+      name: strings.name,
+      svgicons: 'foreignobject-icons.xml',
+      buttons: strings.buttons.map((button, i) => {
+        return Object.assign(buttons[i], button);
+      }),
+      context_tools: strings.contextTools.map((contextTool, i) => {
+        return Object.assign(contextTools[i], contextTool);
+      }),
+      callback () {
+        $('#foreignObject_panel').hide();
+
+        const endChanges = function () {
+          $('#svg_source_editor').hide();
+          editingforeign = false;
+          $('#svg_source_textarea').blur();
+          toggleSourceButtons(false);
+        };
+
+        // TODO: Needs to be done after orig icon loads
+        setTimeout(function () {
+          // Create source save/cancel buttons
+          /* const save = */ $('#tool_source_save').clone()
+            .hide().attr('id', 'foreign_save').unbind()
+            .appendTo('#tool_source_back').click(async function () {
+              if (!editingforeign) { return; }
+
+              if (!setForeignString($('#svg_source_textarea').val())) {
+                const ok = await $.confirm('Errors found. Revert to original?');
+                if (!ok) { return; }
+                endChanges();
+              } else {
+                endChanges();
+              }
+              // setSelectMode();
+            });
+
+          /* const cancel = */ $('#tool_source_cancel').clone()
+            .hide().attr('id', 'foreign_cancel').unbind()
+            .appendTo('#tool_source_back').click(function () {
+              endChanges();
+            });
+        }, 3000);
+      },
+      mouseDown (opts) {
+        // const e = opts.event;
+        if (svgCanvas.getMode() !== 'foreign') {
+          return undefined;
+        }
+        started = true;
+        newFO = svgCanvas.addSVGElementFromJson({
+          element: 'foreignObject',
+          attr: {
+            x: opts.start_x,
+            y: opts.start_y,
+            id: svgCanvas.getNextId(),
+            'font-size': 16, // cur_text.font_size,
+            width: '48',
+            height: '20',
+            style: 'pointer-events:inherit'
+          }
+        });
+        const m = svgdoc.createElementNS(NS.MATH, 'math');
+        m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH);
+        m.setAttribute('display', 'inline');
+        const mi = svgdoc.createElementNS(NS.MATH, 'mi');
+        mi.setAttribute('mathvariant', 'normal');
+        mi.textContent = '\u03A6';
+        const mo = svgdoc.createElementNS(NS.MATH, 'mo');
+        mo.textContent = '\u222A';
+        const mi2 = svgdoc.createElementNS(NS.MATH, 'mi');
+        mi2.textContent = '\u2133';
+        m.append(mi, mo, mi2);
+        newFO.append(m);
+        return {
+          started: true
+        };
+      },
+      mouseUp (opts) {
+        // const e = opts.event;
+        if (svgCanvas.getMode() !== 'foreign' || !started) {
+          return undefined;
+        }
+        const attrs = $(newFO).attr(['width', 'height']);
+        const keep = (attrs.width !== '0' || attrs.height !== '0');
+        svgCanvas.addToSelection([newFO], true);
+
+        return {
+          keep,
+          element: newFO
+        };
+      },
+      selectedChanged (opts) {
+        // Use this to update the current selected elements
+        selElems = opts.elems;
+
+        let i = selElems.length;
+        while (i--) {
+          const elem = selElems[i];
+          if (elem && elem.tagName === 'foreignObject') {
+            if (opts.selectedElement && !opts.multiselected) {
+              $('#foreign_font_size').val(elem.getAttribute('font-size'));
+              $('#foreign_width').val(elem.getAttribute('width'));
+              $('#foreign_height').val(elem.getAttribute('height'));
+              showPanel(true);
+            } else {
+              showPanel(false);
+            }
+          } else {
+            showPanel(false);
+          }
+        }
+      },
+      elementChanged (opts) {
+        // const elem = opts.elems[0];
+      }
+    };
+  }
+};

src/editor/extensions/ext-foreignobject/locale/en.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'foreignObject',
+  buttons: [
+    {
+      title: 'Foreign Object Tool'
+    },
+    {
+      title: 'Edit ForeignObject Content'
+    }
+  ],
+  contextTools: [
+    {
+      title: "Change foreignObject's width",
+      label: 'w'
+    },
+    {
+      title: "Change foreignObject's height",
+      label: 'h'
+    },
+    {
+      title: "Change foreignObject's font size",
+      label: 'font-size'
+    }
+  ]
+};

src/editor/extensions/ext-foreignobject/locale/zh-CN.js

@@ -0,0 +1,25 @@
+export default {
+  name: '外部对象',
+  buttons: [
+    {
+      title: '外部对象工具'
+    },
+    {
+      title: '编辑外部对象内容'
+    }
+  ],
+  contextTools: [
+    {
+      title: '改变外部对象宽度',
+      label: 'w'
+    },
+    {
+      title: '改变外部对象高度',
+      label: 'h'
+    },
+    {
+      title: '改变外部对象文字大小',
+      label: '文字大小'
+    }
+  ]
+};