#65 restore the feature of start/end marker lines

src/editor/dialogs/sePromptDialog.js

@@ -42,6 +42,7 @@ export class SePromptDialog extends HTMLElement {
       }
       break;
     default:
+      // eslint-disable-next-line no-console
       console.error('unkonw attr for:', name, 'newValue =', newValue);
       break;
     }

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

@@ -121,7 +121,7 @@ export default {
     function setIcon (pos, id) {
       if (id.substr(0, 1) !== '\\') { id = '\\textmarker'; }
       const ci = '#' + idPrefix + pos + '_' + id.substr(1);
-      // svgEditor.setIcon('#cur_' + pos + '_marker_list', $(ci).children());
+      svgEditor.setIcon('#cur_' + pos + '_marker_list', $(ci).children());
       $(ci).addClass('current').siblings().removeClass('current');
     }
 
@@ -508,7 +508,7 @@ export default {
           buttons.push({
             id: idPrefix + pos + '_' + id,
             svgicon: id,
-            icon: 'markers-' + id + '.png',
+            icon: id + '.svg',
             title,
             type: 'context',
             events: {click: setArrowFromButton},
@@ -565,7 +565,7 @@ export default {
 
     return {
       name: strings.name,
-      svgicons: 'markers-icons.xml',
+      svgicons: '',
       callback () {
         $('#marker_panel').addClass('toolset').hide();
       },

src/editor/images/box.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m-30,-30l0,60l60,0l0,-60z"/>
+        </svg></svg>

src/editor/images/box_o.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m-30,-30l0,60l60,0l0,-60z"/>
+        </svg></svg>

src/editor/images/forwardslash.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m-20,50l40,-100"/>
+        </svg></svg>

src/editor/images/leftarrow.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m-50,0l100,40l-30,-40l30,-40z"/>
+        </svg></svg>

src/editor/images/leftarrow_o.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m-50,0l100,40l-30,-40l30,-40z"/>
+        </svg></svg>

src/editor/images/mcircle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <circle stroke-width="10" stroke="#f9bc01" fill="#f9bc01" cy="0" cx="0" r="30"/>
+        </svg></svg>

src/editor/images/mcircle_o.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <circle stroke-width="10" stroke="#f9bc01" fill="none" cy="0" cx="0" r="30"/>
+        </svg></svg>

src/editor/images/nomarker.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m-50,0l100,0"/>
+        </svg></svg>

src/editor/images/reverseslash.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m-20,-50l40,100"/>
+        </svg></svg>

src/editor/images/rightarrow.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m50,0l-100,40l30,-40l-30,-40z"/>
+        </svg></svg>

src/editor/images/rightarrow_o.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m50,0l-100,40l30,-40l-30,-40z"/>
+        </svg></svg>

src/editor/images/star_o.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m-40,-20l80,0l-70,60l30,-80l30,80z"/>
+        </svg></svg>

src/editor/images/textmarker.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+      <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="120" y="40" x="0" stroke-width="0" stroke="#f9bc01" fill="#f9bc01">T</text>
+        </svg></svg>

src/editor/images/triangle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="M-30,30 L0,-30 L30,30 Z"/>
+        </svg></svg>

src/editor/images/triangle_o.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="M-30,30 L0,-30 L30,30 Z"/>
+        </svg></svg>

src/editor/images/verticalslash.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="none" d="m0,-50l0,100"/>
+        </svg></svg>

src/editor/images/xmark.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 -60 120 120">
+            <path stroke-width="10" stroke="#f9bc01" fill="#f9bc01" d="m-30,30l60,-60m0,60l-60,-60"/>
+        </svg></svg>

src/editor/svgedit.css

@@ -722,5 +722,8 @@ ul li.current {
   z-index: 20001;
 }
 
+/* ------------ */
 
-
+.dropdown li.tool_button {
+  width: 24px;
+}

src/editor/svgedit.js

@@ -17,7 +17,7 @@
 */
 
 import './touch.js';
-import {isWebkit, isChrome, isMac, isTouch} from '../common/browser.js';
+import {isChrome, isMac, isTouch} from '../common/browser.js';
 import {convertUnit, isValidUnit} from '../common/units.js';
 
 import SvgCanvas from '../svgcanvas/svgcanvas.js';
@@ -861,7 +861,6 @@ class Editor extends EditorStartup {
       const w = shower.outerWidth();
       this.css({left: (left + w) * editor.tool_scale, top});
     });
-    return;
   }
 
   /**
@@ -886,7 +885,6 @@ class Editor extends EditorStartup {
    * @param {PlainObject<string, module:SVGEditor.ToolButton>} holders Key is a selector
    * @returns {void}
    */
-  // eslint-disable-next-line class-methods-use-this
   setupFlyouts (holders) {
     const allHolders = {};
     $.each(holders, function (holdSel, btnOpts) {
@@ -936,7 +934,7 @@ class Editor extends EditorStartup {
               });
             }
             if ($(this).hasClass('disabled')) { return false; }
-             /* if (toolButtonClick(showSel)) {
+            /* if (toolButtonClick(showSel)) {
               options.fn();
             } */
             const icon = (options.icon) ? $.getSvgIcon(options.icon, true) : $(options.sel).children().eq(0).clone();
@@ -1002,8 +1000,7 @@ class Editor extends EditorStartup {
       // $('#tools_rect').mouseleave(function () { $('#tools_rect').fadeOut(); });
     });
     this.setFlyoutTitles();
-    this.setFlyoutPositions();    
-    console.log("1011 after --->")
+    // this.setFlyoutPositions();
   }
 
   /**
@@ -1011,7 +1008,7 @@ class Editor extends EditorStartup {
   * @param {external:jQuery} child
   * @returns {external:jQuery}
   */
-  // eslint-disable-next-line class-methods-use-this 
+  // eslint-disable-next-line class-methods-use-this
   makeFlyoutHolder (id, child) {
     const div = $('<div>', {
       class: 'tools_flyout',
@@ -1020,6 +1017,23 @@ class Editor extends EditorStartup {
     return div;
   }
 
+  /**
+  * @function module:SVGEditor.setIcon
+  * @param {string|Element|external:jQuery} elem
+  * @param {string|external:jQuery} iconId
+  * @returns {void}
+  */
+  setIcon (elem, iconId) {
+    // eslint-disable-next-line max-len
+    const icon = (typeof iconId === 'string') ? $('<img src="' + this.configObj.curConfig.imgPath + iconId + '">') : iconId.clone();
+    if (!icon) {
+      // Todo: Investigate why this still occurs in some cases
+      console.log('NOTE: Icon image missing: ' + iconId); // eslint-disable-line no-console
+      return;
+    }
+    $(elem).empty().append(icon);
+  }
+
   /**
   * @param {string} elemSel
   * @param {string} listSel
@@ -1031,8 +1045,9 @@ class Editor extends EditorStartup {
   * @todo Combine this with `addDropDown` or find other way to optimize.
   * @returns {void}
   */
-  // eslint-disable-next-line class-methods-use-this
   addAltDropDown (elemSel, listSel, callback, opts) {
+    // eslint-disable-next-line no-shadow
+    const self = this;
     const button = $(elemSel);
     const {dropUp} = opts;
     const list = $(listSel);
@@ -1041,7 +1056,7 @@ class Editor extends EditorStartup {
     }
     list.find('li').bind('mouseup', function (...args) {
       if (opts.seticon) {
-        // setIcon('#cur_' + button[0].id, $(this).children());
+        self.setIcon('#cur_' + button[0].id, $(this).children());
         $(this).addClass('current').siblings().removeClass('current');
       }
       callback.apply(this, ...args);
@@ -1088,7 +1103,7 @@ class Editor extends EditorStartup {
         onButton = true;
       });
     }
-  };
+  }
 
   /**
    * @param {external:Window} win
@@ -1097,6 +1112,7 @@ class Editor extends EditorStartup {
    * @returns {Promise<void>|void} Resolves to `undefined`
    */
   async extAdded (win, ext) {
+    // eslint-disable-next-line no-shadow
     const self = this;
     const btnSelects = [];
     if (!ext) {
@@ -1174,7 +1190,9 @@ class Editor extends EditorStartup {
           break;
         } case 'button-select': {
           html = '<div id="' + tool.id + '" class="dropdown toolset" title="' + tool.title + '">' +
-            '<div id="cur_' + tool.id + '" class="icon_label"></div><button></button></div>';
+            '<div id="cur_' + tool.id + '" class="icon_label"></div>' +
+            '<button><img class="svg_icon" src="./images/arrow_down.svg" alt="icon" width="7" height="7"></button>' +
+            '</div>';
 
           const list = $('<ul id="' + tool.id + '_opts"></ul>').appendTo('#option_lists');
 
@@ -1184,6 +1202,13 @@ class Editor extends EditorStartup {
 
           // Creates the tool, hides & adds it, returns the select element
           /* const dropdown = */ $(html).appendTo(panel).children();
+          btnSelects.push({
+            elem: ('#' + tool.id),
+            list: ('#' + tool.id + '_opts'),
+            title: tool.title,
+            callback: tool.events.change,
+            cur: ('#cur_' + tool.id)
+          });
           break;
         } case 'input': {
           html = '<label' + contId + '>' +
@@ -1244,7 +1269,6 @@ class Editor extends EditorStartup {
       * @property {module:SVGEditor.Key} [key] The key to bind to the button
       */
       // Add buttons given by extension
-      console.log(ext.buttons);
       $.each(ext.buttons, function (i, /** @type {module:SVGEditor.Button} */ btn) {
         let {id} = btn;
         let num = i;
@@ -1252,12 +1276,11 @@ class Editor extends EditorStartup {
         while ($('#' + id).length) {
           id = btn.id + '_' + (++num);
         }
-        console.log(id);
+
         let icon;
         if (!svgicons) {
-          console.log(btn.icon);
           icon = $(
-            '<img src="' + btn.icon +
+            '<img src="' + self.configObj.curConfig.imgPath + btn.icon +
               (btn.title ? '" alt="' + btn.title : '') +
               '">'
           );
@@ -1271,7 +1294,6 @@ class Editor extends EditorStartup {
             placementObj['#' + id] = svgicon;
           }
         }
-        console.log(placementObj);
         let cls, parent;
 
         // Set button up according to its type
@@ -1294,13 +1316,13 @@ class Editor extends EditorStartup {
           parent = '#main_menu ul';
           break;
         }
-        let flyoutHolder, showBtn, refData, refBtn;
+        // refData
+        let flyoutHolder, showBtn, refBtn;
         const button = $((btn.list || btn.type === 'app_menu') ? '<li/>' : '<div/>')
           .attr('id', id)
           .attr('title', btn.title)
           .addClass(cls);
         if (!btn.includeWith && !btn.list) {
-          console.log('1306');
           if ('position' in btn) {
             if ($(parent).children().eq(btn.position).length) {
               $(parent).children().eq(btn.position).before(button);
@@ -1364,19 +1386,15 @@ class Editor extends EditorStartup {
             button.append('<div>').append(btn.title);
           }
         } else if (btn.list) {
-          console.log('1370');
           // Add button to list
           button.addClass('push_button');
           $('#' + btn.list + '_opts').append(button);
           if (btn.isDefault) {
             $('#cur_' + btn.list).append(button.children().clone());
             const svgicon = btn.svgicon || btn.id;
-            
             placementObj['#cur_' + btn.list] = svgicon;
-            console.log(placementObj);
           }
         } else if (btn.includeWith) {
-          console.log('1380');
           // Add to flyout menu / make flyout menu
           const opts = btn.includeWith;
           // opts.button, default, position
@@ -1424,15 +1442,12 @@ class Editor extends EditorStartup {
           } else {
             flyoutHolder.append(button);
             // curH.reverse();
-          } 
+          }
         }
-        console.log(svgicons);
         if (!svgicons) {
           button.append(icon);
         }
-        console.log(btn.list);
         if (!btn.list) {
-          console.log('1436');
           // Add given events to button
           $.each(btn.events, function (name, func) {
             if (name === 'click' && btn.type === 'mode') {
@@ -1462,15 +1477,11 @@ class Editor extends EditorStartup {
           });
         }
         self.setupFlyouts(holders);
-        console.log("1471------------->");
       });
-
       $.each(btnSelects, function () {
         self.addAltDropDown(this.elem, this.list, this.callback, {seticon: true});
       });
-      console.log(svgicons);
-      if (svgicons) {
-        console.log(`${this.configObj.curConfig.imgPath}${svgicons}`);
+      /* if (svgicons) {
         return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new
           $.svgIcons(`${this.configObj.curConfig.imgPath}${svgicons}`, {
             w: 24, h: 24,
@@ -1489,7 +1500,7 @@ class Editor extends EditorStartup {
             }
           });
         });
-      }
+      } */
     }
     if (ext.events) {
       this.leftPanelHandlers.add(ext.events.id, ext.events.click);