#88 Extension modification (#90)

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

@@ -24,21 +24,21 @@ export default {
   async init (S) {
     const svgEditor = this;
     const {svgCanvas} = svgEditor;
-    const {getElem} = svgCanvas;
+    const {getElem, $id} = svgCanvas;
     const {$, svgroot} = S,
       addElem = svgCanvas.addSVGElementFromJson,
       selManager = S.selectorManager;
 
-    let startX,
+    let startX;
-      startY,
+    let startY;
-      curLine,
+    let curLine;
-      startElem,
+    let startElem;
-      endElem,
+    let endElem;
-      seNs,
+    let seNs;
-      {svgcontent} = S,
+    let {svgcontent} = S;
-      started = false,
+    let started = false;
-      connections = [],
+    let connections = [];
-      selElems = [];
+    let selElems = [];
 
     /**
      *
@@ -48,7 +48,7 @@ export default {
      * @param {Float} offset
      * @returns {module:math.XYObject}
      */
-    function getBBintersect (x, y, bb, offset) {
+    const getBBintersect = (x, y, bb, offset) => {
       if (offset) {
         offset -= 0;
         bb = $.extend({}, bb);
@@ -85,7 +85,7 @@ export default {
     * @param {Element} line
     * @returns {Float}
     */
-    function getOffset (side, line) {
+    const getOffset = (side, line) => {
       const giveOffset = line.getAttribute('marker-' + side);
 
       // TODO: Make this number (5) be based on marker width/height
@@ -97,7 +97,7 @@ export default {
     * @param {boolean} on
     * @returns {void}
     */
-    function showPanel (on) {
+    const showPanel = (on) => {   
       let connRules = $id('connector_rules');
       if (!connRules) {
         connRules = document.createElement('style');
@@ -105,7 +105,8 @@ export default {
         document.getElementsByTagName("head")[0].appendChild(connRules);
       }
       connRules.textContent = (!on ? '' : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }');
-      $id('connector_panel').style.display = (on) ? 'block' : 'none';
+      if($id('connector_panel'))
+        $id('connector_panel').style.display = (on) ? 'block' : 'none';
     }
 
     /**
@@ -116,7 +117,7 @@ export default {
      * @param {boolean} [setMid]
      * @returns {void}
     */
-    function setPoint (elem, pos, x, y, setMid) {
+    const setPoint = (elem, pos, x, y, setMid) => { 
       const pts = elem.points;
       const pt = svgroot.createSVGPoint();
       pt.x = x;
@@ -149,7 +150,7 @@ export default {
     * @param {Float} diffY
     * @returns {void}
     */
-    function updateLine (diffX, diffY) {
+    const updateLine = (diffX, diffY) => { 
       // Update line with element
       let i = connections.length;
       while (i--) {
@@ -188,7 +189,7 @@ export default {
     * @param {Element[]} [elems=selElems] Array of elements
     * @returns {void}
     */
-    function findConnectors (elems = selElems) {
+    const findConnectors = (elems = selElems) => { 
       // const connectors = svgcontent.querySelectorAll('.se_connector');
       const connectors = svgcontent.querySelectorAll('.se_connector');
       connections = [];
@@ -216,7 +217,7 @@ export default {
 
           addThis = false;
           // The connected element might be part of a selected group
-          parents = svgCanvas.getParents(cElem.parentNode);
+          const parents = svgCanvas.getParents(cElem.parentNode);
           Array.prototype.forEach.call(parents, function(el, i){
             if (elems.includes(el)) {
               // Pretend this element is selected
@@ -246,7 +247,7 @@ export default {
     * @param {Element[]} [elems=selElems]
     * @returns {void}
     */
-    function updateConnectors (elems) {
+    const updateConnectors = (elems) => { 
       // Updates connector lines based on selected elements
       // Is not used on mousemove, as it runs getStrokedBBox every time,
       // which isn't necessary there.
@@ -324,7 +325,7 @@ export default {
     * Do on reset.
     * @returns {void}
     */
-    function init () {
+    const init = () => { 
       // Make sure all connectors have data set
       const elements = svgcontent.querySelectorAll('*');
       elements.forEach(function (curthis) {
@@ -343,23 +344,22 @@ export default {
       });
     }
 
-    const buttons = [{
-      id: 'mode_connect',
-      type: 'mode_flyout',
-      events: {
-        click () {
-          svgCanvas.setMode('connector');
-        }
-      }
-    }];
     const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang'));
     return {
       /** @todo JFH special flag */
       newUI: true,
       name: strings.name,
-      buttons: strings.buttons.map((button, i) => {
+      callback () {
-        return Object.assign(buttons[i], button);
+        // Add the button and its handler(s)
-      }),
+        const buttonTemplate = document.createElement("template");
+        buttonTemplate.innerHTML = `
+        <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
+        `
+        $id('tools_left').append(buttonTemplate.content.cloneNode(true)); 
+        $id('mode_connect').addEventListener("click", () => {
+          svgCanvas.setMode('connector');
+        });       
+      },
       /* async */ addLangData ({lang}) { // , importLocale: importLoc
         return {
           data: strings.langList
@@ -384,7 +384,7 @@ export default {
 
             // If child of foreignObject, use parent
             const fo = svgCanvas.getClosest(mouseTarget.parentNode, 'foreignObject');
-            startElem = fo.length ? fo[0] : mouseTarget;
+            startElem = fo ? fo : mouseTarget;
 
             // Get center of source element
             const bb = svgCanvas.getStrokedBBox([startElem]);
@@ -444,7 +444,7 @@ export default {
           while (slen--) {
             const elem = selElems[slen];
             // Look for selected connector elements
-            if (elem && dataStorage.get(elem, 'c_start')) {
+            if (elem && dataStorage.has(elem, 'c_start')) {
               // Remove the "translate" transform given to move
               svgCanvas.removeFromSelection([elem]);
               svgCanvas.getTransformList(elem).clear();
@@ -466,7 +466,7 @@ export default {
           return undefined;
         }
         const fo = svgCanvas.getClosest(mouseTarget.parentNode, 'foreignObject');
-        if (fo.length) { mouseTarget = fo[0]; }
+        if (fo) { mouseTarget = fo; }
 
         const parents = svgCanvas.getParents(mouseTarget.parentNode);        
 
@@ -481,7 +481,8 @@ export default {
         }
         if (parents.indexOf(svgcontent) === -1) {
           // Not a valid target element, so remove line
-          curLine.remove();
+          if(curLine)
+            curLine.remove();
           started = false;
           return {
             keep: false,
@@ -492,7 +493,8 @@ export default {
         // Valid end element
         endElem = mouseTarget;
 
-        const startId = startElem.id, endId = endElem.id;
+        const startId = (startElem) ? startElem.id : '';
+        const endId = (endElem) ? endElem.id : '';
         const connStr = startId + ' ' + endId;
         const altStr = endId + ' ' + startId;
         // Don't create connector if one already exists
@@ -545,7 +547,7 @@ export default {
         let i = selElems.length;
         while (i--) {
           const elem = selElems[i];
-          if (elem && dataStorage.get(elem, 'c_start')) {
+          if (elem && dataStorage.has(elem, 'c_start')) {
             selManager.requestSelector(elem).showGrips(false);
             if (opts.selectedElement && !opts.multiselected) {
               // TODO: Set up context tools and hide most regular line tools

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

@@ -12,6 +12,7 @@ export default {
   init ({$}) {
     const svgEditor = this;
     const canv = svgEditor.svgCanvas;
+    const {$id} = canv;
     const svgroot = canv.getRootElem();
     let lastBBox = {};
 
@@ -22,17 +23,19 @@ export default {
     let startX;
     let startY;
 
-    const events = {
-      id: 'tool_shapelib',
-      click () {
-        canv.setMode(modeId);
-      }
-    };
-
     return {
-      events,
       callback () {
-        // should later register the event
+        if ($id('tool_shapelib') === null) {
+          const buttonTemplate = document.createElement("template");
+          buttonTemplate.innerHTML = `
+          <se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
+          src="./images/shapelib.svg"></se-explorerbutton>
+          `
+          $id('tools_left').append(buttonTemplate.content.cloneNode(true));
+          $id('tool_shapelib').addEventListener("click", () => { 
+            canv.setMode(modeId);
+          });
+        }
       },
       mouseDown (opts) {
         const mode = canv.getMode();

src/editor/panels/LeftPanel.js

@@ -214,12 +214,9 @@ class LeftPanel {
        <se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
        <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
      </se-flyingbutton>
-     <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
      <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
      <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
      <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I"></se-button>
-     <se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
-       src="./images/shapelib.svg"></se-explorerbutton>
     </div> <!-- tools_left -->
      `;
     this.editor.$svgEditor.append(template.content.cloneNode(true));