update master to V7

src/editor/panels/BottomPanel.js

@@ -0,0 +1,244 @@
+import SvgCanvas from '../../svgcanvas/svgcanvas.js';
+import {jGraduate} from '../components/jgraduate/jQuery.jGraduate.js';
+
+const {$id} = SvgCanvas;
+
+/*
+ * register actions for left panel
+ */
+/**
+  * @type {module}
+*/
+class BottomPanel {
+  /**
+   * @param {PlainObject} editor svgedit handler
+  */
+  constructor (editor) {
+    this.editor = editor;
+  }
+    /**
+   * @type {module}
+   */
+     get selectedElement () {
+      return this.editor.selectedElement;
+    }
+    /**
+     * @type {module}
+     */
+    get multiselected () {
+      return this.editor.multiselected;
+    }
+  
+    /**
+    * @type {module}
+    */
+    changeStrokeWidth (e) {
+      let val = e.target.value;
+      if (val === 0 && this.editor.selectedElement && ['line', 'polyline'].includes(this.editor.selectedElement.nodeName)) {
+        val = 1;
+      }
+      this.editor.svgCanvas.setStrokeWidth(val);
+    }
+  
+    /**
+    * @type {module}
+    */
+    changeZoom (value) {
+      switch (value) {
+      case 'canvas':
+      case 'selection':
+      case 'layer':
+      case 'content':
+        this.editor.zoomChanged(window, value);
+        break;
+      default:
+      {
+        const zoomlevel = Number(value) / 100;
+        if (zoomlevel < 0.001) {
+          value = 0.1;
+          return;
+        }
+        const zoom = this.editor.svgCanvas.getZoom();
+        const wArea = this.editor.workarea;
+  
+        this.editor.zoomChanged(window, {
+          width: 0,
+          height: 0,
+          // center pt of scroll position
+          x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom,
+          y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom,
+          zoom: zoomlevel
+        }, true);
+      }
+      }
+    }
+    /**
+     * @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
+     * @returns {void}
+     */
+    updateToolButtonState () {
+      const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
+      const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
+      const buttonsNeedingStroke = ['tool_fhpath', 'tool_line'];
+      const buttonsNeedingFillAndStroke = [
+        'tools_rect', 'tools_ellipse',
+        'tool_text', 'tool_path'
+      ];
+
+      if (bNoStroke) {
+        buttonsNeedingStroke.forEach((btn) => {
+          // if btn is pressed, change to select button
+          if ($id(btn).pressed) {
+            this.editor.leftPanel.clickSelect();
+          }
+          $id(btn).disabled = true;
+        });
+      } else {
+        buttonsNeedingStroke.forEach((btn) => {
+          $id(btn).disabled = false;
+        });
+      }
+  
+      if (bNoStroke && bNoFill) {
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        buttonsNeedingFillAndStroke.forEach((btn) => {
+          // if btn is pressed, change to select button
+          if ($id(btn).pressed) {
+            this.editor.leftPanel.clickSelect();
+          }
+          $id(btn).disabled = true;
+        });
+      } else {
+        buttonsNeedingFillAndStroke.forEach((btn) => {
+          $id(btn).disabled = false;
+        });
+      }
+  
+      this.editor.svgCanvas.runExtensions(
+        'toolButtonStateUpdate',
+        /** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
+          nofill: bNoFill,
+          nostroke: bNoStroke
+        }
+      );
+    }
+  
+    /**
+    * @type {module}
+    */
+    handleColorPicker (type, evt) {
+      const {paint} = evt.detail;
+      this.editor.svgCanvas.setPaint(type, paint);
+      this.updateToolButtonState();
+    }
+    /**
+    * @type {module}
+    */
+    handleStrokeAttr (type, evt) {
+      this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value);
+    }
+    /**
+    * @type {module}
+    */
+    handleOpacity (evt) {
+      const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
+      this.editor.svgCanvas.setOpacity(val / 100);
+    }
+  /**
+  * @type {module}
+  */
+   handlePalette (e) {
+    e.preventDefault();
+    // shift key or right click for stroke
+    const {picker, color} = e.detail;
+    // Webkit-based browsers returned 'initial' here for no stroke
+    const paint = color === 'none' ? new jGraduate.Paint() : new jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
+    if (picker === 'fill') {
+      $id('fill_color').setPaint(paint);
+    } else {
+      $id('stroke_color').setPaint(paint);
+    }
+    this.editor.svgCanvas.setColor(picker, color);
+    if (color !== 'none' && this.editor.svgCanvas.getPaintOpacity(picker) !== 1) {
+      this.editor.svgCanvas.setPaintOpacity(picker, 1.0);
+    }
+    this.updateToolButtonState();
+  }
+  
+  /**
+  * @type {module}
+  */
+  init () {
+    // register actions for Bottom panel
+    const template = document.createElement('template');
+    template.innerHTML = `
+      <div id="tools_bottom">
+        <!-- Zoom buttons -->
+        <se-zoom id="zoom" src="./images/zoom.svg" title="Change zoom level" inputsize="40px">
+          <div value="1000">1000</div>
+          <div value="400">400</div>
+          <div value="200">200</div>
+          <div value="100">100</div>
+          <div value="50">50</div>
+          <div value="25">25</div>
+          <div value="canvas">Fit to canvas</div>
+          <div value="selection">Fit to selection</div>
+          <div value="layer">Fit to layer content</div>
+          <div value="content">Fit to all content</div>
+        </se-zoom>
+        <se-colorpicker id="fill_color" src="./images/fill.svg" title="Change fill color" type="fill"></se-colorpicker>
+        <se-colorpicker id="stroke_color" src="./images/stroke.svg" title="Change stroke color" type="stroke">
+        </se-colorpicker>
+        <se-spin-input id="stroke_width" min=0 max=99 step=1 title="Change stroke width" label=""></se-spin-input>
+        <se-list id="stroke_style" title="Change stroke dash style" label="" width="22px" height="24px">
+          <se-list-item value="none">&#8212;</se-list-item>
+          <se-list-item value="2,2">...</se-list-item>
+          <se-list-item value="5,5">- -</se-list-item>
+          <se-list-item value="5,2,2,2">- .</se-list-item>
+          <se-list-item value="5,2,2,2,2,2">- ..</se-list-item>
+        </se-list>
+        <se-list id="stroke_linejoin" title="Linejoin: Miter" label="" width="22px" height="24px">
+          <se-list-item id="linejoin_miter" value="miter"><img title="Linejoin: Miter" src="./images/linejoin_miter.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linejoin_round" value="round"><img title="Linejoin: Round" src="./images/linejoin_round.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linejoin_bevel" value="bevel"><img title="Linejoin: Bevel" src="./images/linejoin_bevel.svg"
+              height="22px"></img></se-list-item>
+        </se-list>
+        <se-list id="stroke_linecap" title="Linecap: Butt" label="" width="22px" height="24px">
+          <se-list-item id="linecap_butt" value="butt"><img title="Linecap: Butt" src="./images/linecap_butt.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linecap_square" value="square"><img title="Linecap: Square" src="./images/linecap_square.svg"
+              height="22px"></img></se-list-item>
+          <se-list-item id="linecap_round" value="round"><img title="Linecap: Round" src="./images/linecap_round.svg"
+              height="22px"></img></se-list-item>
+        </se-list>
+        <se-spin-input size="3" id="opacity" min=0 max=100 step=5 title="Change selected item opacity"
+          src="./images/opacity.svg"></se-spin-input>
+        <se-palette id="palette"></se-palette>
+      </div> <!-- tools_bottom -->
+    `
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    $id('palette').addEventListener('change', this.handlePalette.bind(this));
+    const {curConfig} = this.editor.configObj;
+    $id('fill_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initFill.color}));
+    $id('stroke_color').setPaint(new jGraduate.Paint({alpha: 100, solidColor: curConfig.initStroke.color}));
+    $id('zoom').addEventListener('change', (e) => this.changeZoom.bind(this)(e.detail.value));
+    $id('stroke_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('stroke', evt));
+    $id('fill_color').addEventListener('change', (evt) => this.handleColorPicker.bind(this)('fill', evt));
+    $id('stroke_width').addEventListener('change', this.changeStrokeWidth.bind(this));
+    $id('stroke_style').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-dasharray', evt));
+    $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
+    $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
+    $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
+  }
+  /**
+  * @type {module}
+  */
+   updateColorpickers (apply) {
+    $id('fill_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
+    $id('stroke_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
+  }
+}
+
+export default BottomPanel;

src/editor/panels/LayersPanel.js

@@ -0,0 +1,446 @@
+/* eslint-disable max-len */
+/* eslint-disable no-alert */
+import SvgCanvas from "../../svgcanvas/svgcanvas.js";
+
+const SIDEPANEL_MAXWIDTH = 300;
+const SIDEPANEL_OPENWIDTH = 150;
+const { $id } = SvgCanvas;
+
+/**
+ *
+ */
+class LayersPanel {
+  /**
+   * @param {PlainObject} editor
+   */
+  constructor(editor) {
+    this.uiStrings = editor.uiStrings;
+    this.updateContextPanel = editor.topPanel.updateContextPanel;
+    this.sidedrag = -1;
+    this.sidedragging = false;
+    this.allowmove = false;
+    this.editor = editor;
+  }
+
+  /**
+   * @param {Float} delta
+   * @fires module:svgcanvas.SvgCanvas#event:ext_workareaResized
+   * @returns {void}
+   */
+  changeSidePanelWidth(delta) {
+    const rulerX = document.querySelector("#ruler_x");
+    $id("sidepanels").style.width = (parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", "")) + delta) + "px";
+    $id("layerpanel").style.width = (parseFloat(getComputedStyle($id("layerpanel"), null).width.replace("px", "")) + delta) + "px";
+    rulerX.style.right =
+      parseFloat(getComputedStyle(rulerX, null).right.replace("px", "")) +
+      delta +
+      "px";
+    this.editor.workarea.style.right =
+      parseFloat(
+        getComputedStyle(this.editor.workarea, null).right.replace("px", "")
+      ) +
+      delta +
+      "px";
+    this.editor.svgCanvas.runExtensions("workareaResized");
+  }
+
+  /**
+   * @param {Event} evt
+   * @returns {void}
+   */
+  resizeSidePanel(evt) {
+    if (!this.allowmove) {
+      return;
+    }
+    if (this.sidedrag === -1) {
+      return;
+    }
+    this.sidedragging = true;
+    let deltaX = this.sidedrag - evt.pageX;
+    const sideWidth = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""));
+    if (sideWidth + deltaX > SIDEPANEL_MAXWIDTH) {
+      deltaX = SIDEPANEL_MAXWIDTH - sideWidth;
+      // sideWidth = SIDEPANEL_MAXWIDTH;
+    } else if (sideWidth + deltaX < 2) {
+      deltaX = 2 - sideWidth;
+      // sideWidth = 2;
+    }
+    if (deltaX === 0) {
+      return;
+    }
+    this.sidedrag -= deltaX;
+    this.changeSidePanelWidth(deltaX);
+  }
+
+  /**
+   * If width is non-zero, then fully close it; otherwise fully open it.
+   * @param {boolean} close Forces the side panel closed
+   * @returns {void}
+   */
+  toggleSidePanel(close) {
+    const dpr = window.devicePixelRatio || 1;
+    const w = parseFloat(getComputedStyle($id("sidepanels"), null).width.replace("px", ""))
+    const isOpened = (dpr < 1 ? w : w / dpr) > 2;
+    const zoomAdjustedSidepanelWidth =
+      (dpr < 1 ? 1 : dpr) * SIDEPANEL_OPENWIDTH;
+    const deltaX = (isOpened || close ? 0 : zoomAdjustedSidepanelWidth) - w;
+    this.changeSidePanelWidth(deltaX);
+  }
+  /**
+   * @param {PlainObject} e event
+   * @returns {void}
+   */
+  lmenuFunc(e) {
+    const action = e?.detail?.trigger;
+    switch (action) {
+      case "dupe":
+        this.cloneLayer();
+        break;
+      case "delete":
+        this.deleteLayer();
+        break;
+      case "merge_down":
+        this.mergeLayer();
+        break;
+      case "merge_all":
+        this.editor.svgCanvas.mergeAllLayers();
+        this.updateContextPanel();
+        this.populateLayers();
+        break;
+    }
+  }
+  /**
+   * @returns {void}
+   */
+  init() {
+    const template = document.createElement("template");
+    template.innerHTML = `
+    <div id="sidepanels">
+    <div id="layerpanel">
+      <h3 id="layersLabel">Layers</h3>
+      <fieldset id="layerbuttons">
+        <se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
+        <se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
+        <se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
+        <se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
+        <se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
+        <se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg">
+        </se-button>
+      </fieldset>
+      <table id="layerlist">
+        <tr class="layer">
+          <td class="layervis"></td>
+          <td class="layername">Layer 1</td>
+        </tr>
+      </table>
+      <span id="selLayerLabel">Move elements to:</span>
+      <select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
+        <option selected="selected" value="layer1">Layer 1</option>
+      </select>
+    </div>
+    <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
+    </div>
+  </div>
+    `;
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    // layer menu added to DOM
+    const menuMore = document.createElement("se-cmenu-layers");
+    menuMore.setAttribute("id", "se-cmenu-layers-more");
+    menuMore.value = "layer_moreopts";
+    menuMore.setAttribute("leftclick", true);
+    document.body.append(menuMore);
+    const menuLayerBox = document.createElement("se-cmenu-layers");
+    menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
+    menuLayerBox.value = "layerlist";
+    menuLayerBox.setAttribute("leftclick", false);
+    document.body.append(menuLayerBox);
+    document
+      .getElementById("layer_new")
+      .addEventListener("click", this.newLayer.bind(this));
+    document
+      .getElementById("layer_delete")
+      .addEventListener("click", this.deleteLayer.bind(this));
+    document
+      .getElementById("layer_up")
+      .addEventListener("click", () => this.moveLayer.bind(this)(-1));
+    document
+      .getElementById("layer_down")
+      .addEventListener("click", () => this.moveLayer.bind(this)(1));
+    document
+      .getElementById("layer_rename")
+      .addEventListener("click", this.layerRename.bind(this));
+    $id("se-cmenu-layers-more").addEventListener(
+      "change",
+      this.lmenuFunc.bind(this)
+    );
+    $id("se-cmenu-layers-list").addEventListener("change", e => {
+      this.lmenuFunc(e);
+    });
+    $id("sidepanel_handle").addEventListener(
+      "click",
+      this.toggleSidePanel.bind(this)
+    );
+    if (this.editor.configObj.curConfig.showlayers) {
+      this.toggleSidePanel();
+    }
+    $id("sidepanel_handle").addEventListener("mousedown", evt => {
+      this.sidedrag = evt.pageX;
+      window.addEventListener("mousemove", this.resizeSidePanel.bind(this));
+      this.allowmove = false;
+      // Silly hack for Chrome, which always runs mousemove right after mousedown
+      setTimeout(() => {
+        this.allowmove = true;
+      }, 20);
+    });
+    $id("sidepanel_handle").addEventListener("mouseup", _evt => {
+      if (!this.sidedragging) {
+        this.toggleSidePanel();
+      }
+      this.sidedrag = -1;
+      this.sidedragging = false;
+    });
+    window.addEventListener("mouseup", _evt => {
+      this.sidedrag = -1;
+      this.sidedragging = false;
+      $id("svg_editor").removeEventListener(
+        "mousemove",
+        this.resizeSidePanel.bind(this)
+      );
+    });
+  }
+  /**
+   * @returns {void}
+   */
+  newLayer() {
+    let uniqName;
+    let i = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
+    do {
+      uniqName = this.uiStrings.layers.layer + " " + ++i;
+    } while (this.editor.svgCanvas.getCurrentDrawing().hasLayer(uniqName));
+
+    const newName = prompt(
+      this.uiStrings.notification.enterUniqueLayerName,
+      uniqName
+    );
+    if (!newName) {
+      return;
+    }
+    if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+      alert(this.uiStrings.notification.dupeLayerName);
+      return;
+    }
+    this.editor.svgCanvas.createLayer(newName);
+    this.updateContextPanel();
+    this.populateLayers();
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  deleteLayer() {
+    if (this.editor.svgCanvas.deleteCurrentLayer()) {
+      this.updateContextPanel();
+      this.populateLayers();
+      // This matches what this.editor.svgCanvas does
+      // TODO: make this behavior less brittle (svg-editor should get which
+      // layer is selected from the canvas and then select that one in the UI)
+      const elements = document.querySelectorAll('#layerlist tr.layer');
+      Array.prototype.forEach.call(elements, function(el){
+        el.classList.remove('layersel');
+      });
+      document.querySelector('#layerlist tr.layer').classList.add('layersel');
+
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  cloneLayer() {
+    const name =
+      this.editor.svgCanvas.getCurrentDrawing().getCurrentLayerName() + " copy";
+
+    const newName = prompt(
+      this.uiStrings.notification.enterUniqueLayerName,
+      name
+    );
+    if (!newName) {
+      return;
+    }
+    if (this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)) {
+      alert(this.uiStrings.notification.dupeLayerName);
+      return;
+    }
+    this.editor.svgCanvas.cloneLayer(newName);
+    this.updateContextPanel();
+    this.populateLayers();
+  }
+
+  index(el) {
+    if (!el) return -1;
+    var i = 0;
+    do {
+      i++;
+    } while (el == el.previousElementSibling);
+    return i;
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  mergeLayer() {
+    if (
+      (this.index(document.querySelector("#layerlist tr.layersel"))-1) ===
+      this.editor.svgCanvas.getCurrentDrawing().getNumLayers() - 1
+    ) {
+      return;
+    }
+    this.editor.svgCanvas.mergeLayer();
+    this.updateContextPanel();
+    this.populateLayers();
+  }
+
+  /**
+   * @param {Integer} pos
+   * @returns {void}
+   */
+  moveLayer(pos) {
+    const total = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
+
+    let curIndex = (this.index(document.querySelector("#layerlist tr.layersel"))-1);
+    if (curIndex > 0 || curIndex < total - 1) {
+      curIndex += pos;
+      this.editor.svgCanvas.setCurrentLayerPosition(total - curIndex - 1);
+      this.populateLayers();
+    }
+  }
+
+  /**
+   * @returns {void}
+   */
+  layerRename() {
+    const oldName = document.querySelector("#layerlist tr.layersel td.layername").textContent;
+    const newName = prompt(this.uiStrings.notification.enterNewLayerName, "");
+    if (!newName) {
+      return;
+    }
+    if (
+      oldName === newName ||
+      this.editor.svgCanvas.getCurrentDrawing().hasLayer(newName)
+    ) {
+      alert(this.uiStrings.notification.layerHasThatName);
+      return;
+    }
+    this.editor.svgCanvas.renameCurrentLayer(newName);
+    this.populateLayers();
+  }
+
+  /**
+   * This function highlights the layer passed in (by fading out the other layers).
+   * If no layer is passed in, this function restores the other layers.
+   * @param {string} [layerNameToHighlight]
+   * @returns {void}
+   */
+  toggleHighlightLayer(layerNameToHighlight) {
+    let i;
+    const curNames = [],
+      numLayers = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
+    for (i = 0; i < numLayers; i++) {
+      curNames[i] = this.editor.svgCanvas.getCurrentDrawing().getLayerName(i);
+    }
+
+    if (layerNameToHighlight) {
+      curNames.forEach(curName => {
+        if (curName !== layerNameToHighlight) {
+          this.editor.svgCanvas
+            .getCurrentDrawing()
+            .setLayerOpacity(curName, 0.5);
+        }
+      });
+    } else {
+      curNames.forEach(curName => {
+        this.editor.svgCanvas.getCurrentDrawing().setLayerOpacity(curName, 1.0);
+      });
+    }
+  }
+
+  /**
+   * @returns {void}
+   */
+  populateLayers() {
+    this.editor.svgCanvas.clearSelection();
+    const self = this;
+    const layerlist = $id("layerlist").querySelector('tbody');
+    while(layerlist.firstChild)
+      layerlist.removeChild(layerlist.firstChild);
+
+    const selLayerNames = $id("selLayerNames");
+    // empty() ref: http://youmightnotneedjquery.com/#empty
+    while(selLayerNames.firstChild)
+      selLayerNames.removeChild(selLayerNames.firstChild);
+    const drawing = this.editor.svgCanvas.getCurrentDrawing();
+    const currentLayerName = drawing.getCurrentLayerName();
+    let layer = this.editor.svgCanvas.getCurrentDrawing().getNumLayers();
+    // we get the layers in the reverse z-order (the layer rendered on top is listed first)
+    while (layer--) {
+      const name = drawing.getLayerName(layer);
+      const layerTr = document.createElement("tr");      
+      layerTr.className = (name === currentLayerName) ? 'layer layersel' : 'layer';
+      const layerVis = document.createElement("td");
+      layerVis.className = (!drawing.getLayerVisibility(name)) ? "layerinvis layervis" : 'layervis';
+      const layerName = document.createElement("td");
+      layerName.className = 'layername';
+      layerName.textContent = name;
+      layerTr.appendChild(layerVis);
+      layerTr.appendChild(layerName);
+      layerlist.appendChild(layerTr);
+      // eslint-disable-next-line no-unsanitized/property
+      selLayerNames.innerHTML += '<option value="' + name + '">' + name + '</option>';
+    }
+    // handle selection of layer
+    const nelements = $id('layerlist').querySelectorAll("td.layername");
+    Array.from(nelements).forEach(function(element) {
+      element.addEventListener('mouseup', function(evt) {
+        const trElements = $id('layerlist').querySelectorAll("tr.layer");
+        Array.from(trElements).forEach(function(element) {
+          element.classList.remove("layersel");
+        });
+        evt.currentTarget.parentNode.classList.add("layersel");
+        self.editor.svgCanvas.setCurrentLayer(evt.currentTarget.textContent);
+        evt.preventDefault();        
+      });
+      element.addEventListener('mouseup', function(evt) {
+        self.toggleHighlightLayer(
+          self.editor.svgCanvas,
+          evt.currentTarget.textContent
+        );
+      });
+      element.addEventListener('mouseout', function(_evt) {
+        self.toggleHighlightLayer(self.editor.svgCanvas);
+      });
+    });
+    const elements = $id('layerlist').querySelectorAll("td.layervis");
+    Array.from(elements).forEach(function(element) {
+      element.addEventListener('click', function(evt) {
+        const name = evt.currentTarget.parentNode.querySelector("td.layername").textContent;
+        const vis = evt.currentTarget.classList.contains("layerinvis");
+        self.editor.svgCanvas.setLayerVisibility(name, vis);
+        evt.currentTarget.classList.toggle("layerinvis");
+      });
+    });
+
+    // if there were too few rows, let's add a few to make it not so lonely
+    let num = 5 - $id('layerlist').querySelectorAll("tr.layer").length;
+    while (num-- > 0) {
+      // TODO: there must a better way to do this
+      const tlayer = document.createElement("tr");
+      tlayer.innerHTML = '<td style="color:white">_</td><td/>';
+      layerlist.append(tlayer);
+    }
+  }
+}
+
+export default LayersPanel;

src/editor/panels/LeftPanel.js

@@ -0,0 +1,244 @@
+import SvgCanvas from "../../svgcanvas/svgcanvas.js";
+
+const { $id, $qa } = SvgCanvas;
+
+/*
+ * register actions for left panel
+ */
+/**
+ * @type {module}
+ */
+class LeftPanel {
+  /**
+   * @param {PlainObject} editor svgedit handler
+   */
+  constructor(editor) {
+    this.editor = editor;
+  }
+  /**
+   * This is a common function used when a tool has been clicked (chosen).
+   * It does several common things:
+   * - Removes the pressed button from whatever tool currently has it.
+   * - Adds the the pressed button  to the button passed in.
+   * @function this.updateLeftPanel
+   * @param {string|Element} button The DOM element or string selector representing the toolbar button
+   * @returns {boolean} Whether the button was disabled or not
+   */
+  // eslint-disable-next-line class-methods-use-this
+  updateLeftPanel(button) {
+    if (button.disabled) return false;
+    // remove the pressed state on other(s) button(s)
+    $qa("#tools_left *[pressed]").forEach(b => {
+      b.pressed = false;
+    });
+    // pressed state for the clicked button
+    $id(button).pressed = true;
+    return true;
+  }
+
+  /**
+   * Unless the select toolbar button is disabled, sets the button
+   * and sets the select mode and cursor styles.
+   * @function module:SVGEditor.clickSelect
+   * @returns {void}
+   */
+  clickSelect() {
+    if (this.updateLeftPanel("tool_select")) {
+      this.editor.workarea.style.cursor = "auto";
+      this.editor.svgCanvas.setMode("select");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickFHPath() {
+    if (this.updateLeftPanel("tool_fhpath")) {
+      this.editor.svgCanvas.setMode("fhpath");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickLine() {
+    if (this.updateLeftPanel("tool_line")) {
+      this.editor.svgCanvas.setMode("line");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickSquare() {
+    if (this.updateLeftPanel("tool_square")) {
+      this.editor.svgCanvas.setMode("square");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickRect() {
+    if (this.updateLeftPanel("tool_rect")) {
+      this.editor.svgCanvas.setMode("rect");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickFHRect() {
+    if (this.updateLeftPanel("tool_fhrect")) {
+      this.editor.svgCanvas.setMode("fhrect");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickCircle() {
+    if (this.updateLeftPanel("tool_circle")) {
+      this.editor.svgCanvas.setMode("circle");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickEllipse() {
+    if (this.updateLeftPanel("tool_ellipse")) {
+      this.editor.svgCanvas.setMode("ellipse");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickFHEllipse() {
+    if (this.updateLeftPanel("tool_fhellipse")) {
+      this.editor.svgCanvas.setMode("fhellipse");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickImage() {
+    if (this.updateLeftPanel("tool_image")) {
+      this.editor.svgCanvas.setMode("image");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickZoom() {
+    if (this.updateLeftPanel("tool_zoom")) {
+      this.editor.svgCanvas.setMode("zoom");
+      this.editor.workarea.style.cursor = this.editor.zoomInIcon;
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  dblclickZoom() {
+    if (this.updateLeftPanel("tool_zoom")) {
+      this.editor.zoomImage();
+      this.clickSelect();
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickText() {
+    if (this.updateLeftPanel("tool_text")) {
+      this.editor.svgCanvas.setMode("text");
+    }
+  }
+
+  /**
+   *
+   * @returns {void}
+   */
+  clickPath() {
+    if (this.updateLeftPanel("tool_path")) {
+      this.editor.svgCanvas.setMode("path");
+    }
+  }
+  /**
+   * @type {module}
+   */
+  add(id, handler) {
+    $id(id).addEventListener("click", () => {
+      if (this.updateLeftPanel(id)) {
+        handler();
+      }
+    });
+  }
+  /**
+   * @type {module}
+   */
+  init() {
+    // add Left panel
+    const template = document.createElement("template");
+    template.innerHTML = `
+    <div id="tools_left">
+     <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
+     <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
+     <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
+     <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
+     <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
+     <se-flyingbutton id="tools_rect" title="Square/Rect Tool">
+       <se-button id="tool_rect" title="Rectangle" src="./images/rect.svg" shortcut="R"></se-button>
+       <se-button id="tool_square" title="Square" src="./images/square.svg"></se-button>
+       <se-button id="tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
+     </se-flyingbutton>
+     <se-flyingbutton id="tools_ellipse" title="Ellipse/Circle Tool">
+       <se-button id="tool_ellipse" title="Rectangle" src="./images/ellipse.svg" shortcut="E"></se-button>
+       <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="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>
+    </div> <!-- tools_left -->
+     `;
+    this.editor.$svgEditor.append(template.content.cloneNode(true));
+    // register actions for left panel
+    $id("tool_select").addEventListener("click", this.clickSelect.bind(this));
+    $id("tool_fhpath").addEventListener("click", this.clickFHPath.bind(this));
+    $id("tool_text").addEventListener("click", this.clickText.bind(this));
+    $id("tool_image").addEventListener("click", this.clickImage.bind(this));
+    $id("tool_zoom").addEventListener("click", this.clickZoom.bind(this));
+    $id("tool_zoom").addEventListener("dblclick", this.dblclickZoom.bind(this));
+    $id("tool_path").addEventListener("click", this.clickPath.bind(this));
+    $id("tool_line").addEventListener("click", this.clickLine.bind(this));
+
+    // flyout
+    $id("tool_rect").addEventListener("click", this.clickRect.bind(this));
+    $id("tool_square").addEventListener("click", this.clickSquare.bind(this));
+    $id("tool_fhrect").addEventListener("click", this.clickFHRect.bind(this));
+    $id("tool_ellipse").addEventListener("click", this.clickEllipse.bind(this));
+    $id("tool_circle").addEventListener("click", this.clickCircle.bind(this));
+    $id("tool_fhellipse").addEventListener(
+      "click",
+      this.clickFHEllipse.bind(this)
+    );
+  }
+}
+
+export default LeftPanel;