Merge branch 'V7-preview' of https://github.com/OptimistikSAS/svgedit into issues/39

.idea/svgedit.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

dist/editor/svgedit.css

@@ -7,7 +7,7 @@
   --ruler-color: #f4f4f4;
 }
 
-body {  
+body {
   background: var(--main-bg-color);
 }
 
@@ -171,12 +171,13 @@ hr {
   display: inline-block;
   position: absolute;
   background-color: --main-bg-color;
-  font-weight: bold;
+  color: #fff;
+  font-weight: 100;
   left: 0;
   top: 40%;
   width: 1em;
-  padding: 5px 1px 5px 5px;
+  padding: 5px 5px 5px 5px;
-  margin-left: 3px;
+  margin-left: 6px;
   cursor: pointer;
   border-radius: 5px;
   -moz-border-radius: 5px;
@@ -185,9 +186,6 @@ hr {
   -webkit-user-select: none;
 }
 
-#sidepanel_handle:hover {
-  font-weight: bold;
-}
 
 #sidepanel_handle * {
   cursor: pointer;
@@ -208,7 +206,7 @@ hr {
   overflow: hidden;
   display: flex;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
 }
 
 #layerlist {

package.json

@@ -197,7 +197,7 @@
     "eslint-plugin-sonarjs": "0.5.0",
     "eslint-plugin-standard": "4.1.0",
     "eslint-plugin-unicorn": "25.0.1",
-    "husky": "4.3.6",
+    "husky": "4.3.7",
     "imageoptim-cli": "3.0.2",
     "jamilih": "0.53.2",
     "jsdoc": "3.6.6",

src/editor/EditorStartup.js

@@ -4,7 +4,7 @@ import {convertUnit} from '../common/units.js';
 import {
   hasCustomHandler, getCustomHandler, injectExtendedContextMenuItemsIntoDom
 } from './contextmenu.js';
-
+import editorTemplate from './templates/editorTemplate.js';
 import SvgCanvas from '../svgcanvas/svgcanvas.js';
 import LayersPanel from './panels/LayersPanel.js';
 import LeftPanelHandlers from './panels/LeftPanelHandlers.js';
@@ -61,8 +61,12 @@ class EditorStartup {
   * @returns {void}
   */
   async init () {
+    // allow to prepare the dom without display
+    $id('svg_editor').style.visibility = 'hidden';
     try {
-    // Image props dialog added to DOM
+      // add editor components to the DOM
+      document.body.append(editorTemplate.content.cloneNode(true));
+      // Image props dialog added to DOM
       const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
       newSeImgPropDialog.setAttribute('id', 'se-img-prop');
       document.body.append(newSeImgPropDialog);
@@ -82,6 +86,10 @@ class EditorStartup {
       const promptBox = document.createElement('se-prompt-dialog');
       promptBox.setAttribute('id', 'se-prompt-dialog');
       document.body.append(promptBox);
+      // Export dialog added to DOM
+      const exportDialog = document.createElement('se-export-dialog');
+      exportDialog.setAttribute('id', 'se-export-dialog');
+      document.body.append(exportDialog);
     } catch (err) {
     // eslint-disable-next-line no-console
       console.error(err);
@@ -466,7 +474,11 @@ class EditorStartup {
         this.clickSave();
       }
     }.bind(this));
-    $id('tool_export').addEventListener('click', this.clickExport.bind(this));
+    // this.clickExport.bind(this)
+    $id('tool_export').addEventListener('click', function (e) {
+      document.getElementById('se-export-dialog').setAttribute('dialog', 'open');
+    });
+    $id('se-export-dialog').addEventListener('change', this.clickExport.bind(this));
     $id('tool_docprops').addEventListener('click', this.showDocProperties.bind(this));
     $id('tool_editor_prefs').addEventListener('click', this.showPreferences.bind(this));
     $id('tool_editor_homepage').addEventListener('click', this.openHomePage.bind(this));
@@ -725,7 +737,7 @@ class EditorStartup {
     const {langParam, langData} = await this.putLocale(this.configObj.pref('lang'), this.goodLangs);
     await this.setLang(langParam, langData);
 
-    $id('svg_container').style.visibility = 'visible';
+    $id('svg_editor').style.visibility = 'visible';
 
     try {
       // load standard extensions

src/editor/Rulers.js

@@ -1,6 +1,6 @@
 /* globals $ */
 import {getTypeMap} from '../common/units.js';
-
+import rulersTemplate from './templates/rulersTemplate.js';
 /**
  *
  */
@@ -18,6 +18,8 @@ class Rulers {
     }
     this.svgCanvas = editor.svgCanvas;
     this.editor = editor;
+    // add rulers component to the DOM
+    document.body.append(rulersTemplate.content.cloneNode(true));
   }
   /**
    * @type {Module}

src/editor/components/seButton.js

@@ -6,7 +6,7 @@ template.innerHTML = `
   <style>
   :host(:hover) :not(.disabled)
   {
-    background-color: #ffc;
+    background-color: var(--icon-bg-color-hover);
   }
   div
   {
@@ -14,8 +14,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+    background-color: var(--icon-bg-color);
-    background-color: #E8E8E8;
     cursor: pointer;
     border-radius: 3px;
   }
@@ -31,8 +30,7 @@ template.innerHTML = `
     height: 100%;
   }
   .pressed {
-    background-color: #F4E284;
+    background-color: var(--icon-bg-color-hover);
-    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
   }
   .disabled {
     opacity: 0.3;

src/editor/components/seColorPicker.js

@@ -14,29 +14,30 @@ template.innerHTML = `
   @import "./components/jgraduate/css/jGraduate.css";
   @import "./components/jgraduate/css/jPicker.css";
   #logo {
-    height: 22px;
+    height: 18px;
-    width: 22px;
+    width: 18px;
   }
   #block {
-    height: 22px;
+    height: 13px;
-    width: 22px;
+    width: 14px;
     float: right;
     background-color: darkgrey;
   }
   #picker {
-    background: #f0f0f0;
+    background: var(--input-color);
-    height: 26px;
+    height: 19px;
-    line-height: 26px;
+    line-height: 19px;
     border-radius: 3px;
     width: 52px;
     display: flex;
     align-items: center;
     margin-right: 4px;
+    margin-top: 1px;
     justify-content: space-evenly;
   }
   #color_picker {
-    position: absolute;
+    z-index: 1000;
-    bottom: 40px;
+    top: -350px;
   }
   </style>
   <div id="picker">

src/editor/components/seExplorerButton.js

@@ -4,9 +4,9 @@ template.innerHTML = `
   :host {
     position:relative;
   }
-  .menu-button:hover, se-button:hover, .menu-item:hover 
+  .menu-button:hover, se-button:hover, .menu-item:hover
   {
-    background-color: #ffc;
+    background-color: var(--icon-bg-color-hover);
   }
   img {
     border: none;
@@ -14,13 +14,12 @@ template.innerHTML = `
     height: 24px;
   }
   .overall.pressed .button-icon,
-  .overall.pressed .handle,
+  .overall.pressed,
   .menu-item.pressed {
-    background-color: #F4E284 !important;
+    background-color: var(--icon-bg-color-hover) !important;
   }
   .overall.pressed .menu-button {
-    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+    background-color: var(--icon-bg-color-hover) !important;
-    background-color: #F4E284 !important;
   }
   .disabled {
     opacity: 0.3;
@@ -31,8 +30,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+    background-color: var(--icon-bg-color);
-    background-color: #E8E8E8;
     cursor: pointer;
     position: relative;
     border-radius: 3px;
@@ -83,7 +81,7 @@ template.innerHTML = `
     background: none !important;
   }
   </style>
-  
+
   <div class="overall">
     <div class="menu-button">
       <img class="button-icon" src="./images/logo.svg" alt="icon">
@@ -96,7 +94,7 @@ template.innerHTML = `
       <div class="menu-item">menu</div>
    </div>
   </div>
-  
+
 `;
 /**
  * @class ExplorerButton

src/editor/components/seFlyingButton.js

@@ -6,7 +6,7 @@ template.innerHTML = `
   }
   .overall:hover *
   {
-    background-color: #ffc;
+    background-color: var(--icon-bg-color-hover);
   }
   img {
     border: none;
@@ -15,11 +15,10 @@ template.innerHTML = `
   }
   .overall.pressed .button-icon,
   .overall.pressed .handle {
-    background-color: #F4E284 !important;
+    background-color: var(--icon-bg-color-hover) !important;
   }
   .overall.pressed .menu-button {
-    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px  0 white  !important;
+    background-color: var(--icon-bg-color-hover) !important;
-    background-color: #F4E284 !important;
   }
   .disabled {
     opacity: 0.3;
@@ -30,8 +29,7 @@ template.innerHTML = `
     width: 24px;
     margin: 2px 2px 4px;
     padding: 3px;
-    box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
+    background-color: var(--icon-bg-color);
-    background-color: #E8E8E8;
     cursor: pointer;
     position: relative;
     border-radius: 3px;
@@ -68,7 +66,7 @@ template.innerHTML = `
     background: none !important;
   }
   </style>
-  
+
   <div class="overall">
     <div class="menu-button">
       <img class="button-icon" src="./images/logo.svg" alt="icon">
@@ -78,7 +76,7 @@ template.innerHTML = `
       <slot></slot>
     </div>
   </div>
-  
+
 `;
 /**
  * @class FlyingButton
@@ -107,7 +105,7 @@ export class FlyingButton extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['title', 'pressed', 'disabled'];
+    return ['title', 'pressed', 'disabled', 'opened'];
   }
   /**
    * @function attributeChangedCallback
@@ -132,6 +130,13 @@ export class FlyingButton extends HTMLElement {
         this.$overall.classList.remove('pressed');
       }
       break;
+    case 'opened':
+      if (newValue) {
+        this.$menu.classList.add('open');
+      } else {
+        this.$menu.classList.remove('open');
+      }
+      break;
     case 'disabled':
       if (newValue) {
         this.$div.classList.add('disabled');
@@ -178,6 +183,28 @@ export class FlyingButton extends HTMLElement {
       this.setAttribute('pressed', 'true');
     } else {
       this.removeAttribute('pressed', '');
+      // close also the menu if open
+      this.removeAttribute('opened');
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get opened () {
+    return this.hasAttribute('opened');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set opened (value) {
+    // boolean value => existence = true
+    if (value) {
+      this.setAttribute('opened', 'opened');
+    } else {
+      this.removeAttribute('opened');
     }
   }
   /**
@@ -214,7 +241,7 @@ export class FlyingButton extends HTMLElement {
       switch (ev.target.nodeName) {
       case 'SE-FLYINGBUTTON':
         if (this.pressed) {
-          this.$menu.classList.toggle('open');
+          this.setAttribute('opened', 'opened');
         } else {
           // launch current action
           this.activeSlot.click();
@@ -231,7 +258,11 @@ export class FlyingButton extends HTMLElement {
         break;
       case 'DIV':
         // this is a click on the handle so let's open/close the menu.
-        this.$menu.classList.toggle('open');
+        if (this.opened) {
+          this.removeAttribute('opened');
+        } else {
+          this.setAttribute('opened', 'opened');
+        }
         break;
       default:
         // eslint-disable-next-line no-console

src/editor/components/seInput.js

@@ -13,6 +13,13 @@ template.innerHTML = `
     bottom: 1px;
     right: -4px;
     position: relative;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: #fff;
+  }
+  elix-input {
+    background-color: var(--input-color);
+    border-radius: 3px;
   }
   </style>
   <img src="./images/logo.svg" alt="icon" width="12" height="12" />

src/editor/components/seList.js

@@ -4,22 +4,27 @@ import 'elix/define/DropdownList.js';
 const template = document.createElement('template');
 template.innerHTML = `
 <style>
-[part~="source"] {
+elix-dropdown-list {
-  grid-template-columns: 20px 1fr auto;
+  margin: 5px;
 }
-::slotted(*) {
+
-  background: #E8E8E8;
+elix-dropdown-list:hover {
-  border: 1px solid #B0B0B0;
+  background-color: var(--icon-bg-color-hover);
 }
+
 ::part(popup-toggle) {
   display: none;
 }
+::slotted(*) {
+  padding:0;
+  width:100%;
+}
 </style>
   <label>Label</label>
   <elix-dropdown-list>
     <slot></slot>
   </elix-dropdown-list>
-  
+
 `;
 /**
  * @class SeList
@@ -41,7 +46,7 @@ export class SeList extends HTMLElement {
    * @returns {any} observed
    */
   static get observedAttributes () {
-    return ['label'];
+    return ['label', 'width', 'height'];
   }
 
   /**
@@ -57,6 +62,12 @@ export class SeList extends HTMLElement {
     case 'label':
       this.$label.textContent = newValue;
       break;
+    case 'height':
+      this.$dropdown.style.height = newValue;
+      break;
+    case 'width':
+      this.$dropdown.style.width = newValue;
+      break;
     default:
       // eslint-disable-next-line no-console
       console.error(`unknown attribute: ${name}`);
@@ -78,6 +89,36 @@ export class SeList extends HTMLElement {
   set label (value) {
     this.setAttribute('label', value);
   }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get width () {
+    return this.getAttribute('width');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set width (value) {
+    this.setAttribute('width', value);
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get height () {
+    return this.getAttribute('height');
+  }
+
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set height (value) {
+    this.setAttribute('height', value);
+  }
   /**
    * @function connectedCallback
    * @returns {void}

src/editor/components/seListItem.js

@@ -4,10 +4,17 @@ import 'elix/define/Option.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  </style>  
+  elix-option{
+    padding:0.25rem 0.125rem !important;
+    background-color: var(--icon-bg-color);
+  }
+  elix-option:hover{
+    background-color: var(--icon-bg-color-hover);
+  }
+  </style>
   <elix-option aria-label="option">
     <slot></slot>
-  </elix-option>  
+  </elix-option>
 `;
 /**
  * @class SeMenu
@@ -21,7 +28,9 @@ export class SeListItem extends HTMLElement {
     // create the shadowDom and insert the template
     this._shadowRoot = this.attachShadow({mode: 'open'});
     this._shadowRoot.append(template.content.cloneNode(true));
-    this.$menuitem = this._shadowRoot.querySelector('elix-menu-item');
+    this.$menuitem = this._shadowRoot.querySelector('elix-option');
+    this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark');
+    this.$svg.setAttribute('style', 'display: none;');
   }
   /**
    * @function observedAttributes

src/editor/components/seMenu.js

@@ -9,24 +9,26 @@ template.innerHTML = `
     padding: 0px;
   }
   elix-menu-button::part(menu) {
-    background-color: #eee !important;
+    background-color: var(--icon-bg-color) !important;
+    color: #fff;
   }
   elix-menu-button::part(popup-toggle) {
     padding: 0.25em 0.60em !important
   }
   :host ::slotted([current]){
-    background-color: #F4E284 !important;
+    background-color: var(--icon-bg-color-hover) !important;
+    color: #fff;
   }
   :host ::slotted(*){
     padding: 0.25em 1.25em 0.25em 0.25em !important;
     margin: 2px;
   }
   </style>
-  
+
   <elix-menu-button id="MenuButton" aria-label="Main Menu">
     <slot></slot>
   </elix-menu-button>
-  
+
 `;
 /**
  * @class SeMenu
@@ -64,8 +66,8 @@ export class SeMenu extends HTMLElement {
     switch (name) {
     case 'src':
       image.src = newValue;
-      image.width = 18;
+      image.width = 24;
-      image.height = 18;
+      image.height = 24;
       this.$label.prepend(image);
       break;
     case 'label':

src/editor/components/seMenuItem.js

@@ -5,13 +5,13 @@ import 'elix/define/MenuItem.js';
 const template = document.createElement('template');
 template.innerHTML = `
   <style>
-  </style>  
+  </style>
   <elix-menu-item>
     <div style="display:flex; align-items: center;">
-      <img src="./images/logo.svg" alt="icon" style="display:none;" /> 
+      <img src="./images/logo.svg" alt="icon" style="display:none;" width="24"/>
-      <span style="margin-left: 3px;"></span>
+      <span style="margin-left: 7px;"></span>
     </div>
-  </elix-menu-item>  
+  </elix-menu-item>
 `;
 /**
  * @class SeMenuItem

src/editor/components/sePalette.js

@@ -24,7 +24,7 @@ template.innerHTML = `
   }
   </style>
   <div title="Click to change fill color, shift-click to change stroke color">
-    <elix-centered-strip style="width:300px">
+    <elix-centered-strip style="width:300px;padding:5px;background: #fff; border-radius: 5px;">
     </elix-centered-strip>
   </div>
 `;

src/editor/components/seSpinInput.js

@@ -5,24 +5,37 @@ const template = document.createElement('template');
 template.innerHTML = `
   <style>
   img {
-    top: 2px;
-    left: 1px;
     position: relative;
+    right: -4px;
   }
   span {
-    bottom: 1px;
+    bottom: -3px;
     right: -4px;
     position: relative;
+    margin-left: 4px;
+    margin-right: 4px;
+    color: #fff;
+    vertical-align: ;
+  }
+  elix-number-spin-box {
+    background-color: var(--input-color);
+    border-radius: 3px;
+    height: 20px !important;
+    margin-top: 1px;
+    vertical-align: top;
   }
   elix-number-spin-box::part(spin-button) {
     padding: 0px;
   }
+  elix-number-spin-box::part(input) {
+    width: 3em;
+  }
   elix-number-spin-box{
     width: 54px;
-    height: 25px;
+    height: 24px;
   }
   </style>
-  <img src="./images/logo.svg" alt="icon" width="12" height="12" aria-labelledby="label" />
+  <img src="./images/logo.svg" alt="icon" width="24" height="24" aria-labelledby="label" />
   <span id="label">label</span>
   <elix-number-spin-box min="1" step="1"></elix-number-spin-box>
 `;

src/editor/components/seZoom.js

@@ -40,13 +40,24 @@ class Zoom extends ListComboBox {
         }
         ::slotted(*) {
           padding: 4px;
-          background: #E8E8E8;
-          border: 1px solid #B0B0B0;
           width: 100%;
+          background-color: var(--icon-bg-color);
+          color: #fff;
+        }
         }
         [part~="popup"] {
           width: 150%;
         }
+        elix-number-spin-box {
+          background-color: var(--input-color);
+          border-radius: 3px;
+          height: 20px !important;
+          margin-top: 1px;
+        }
+        elix-number-spin-box::part(spin-button) {
+            padding: 0px;
+        }
+
         </style>
       `.content
     );

src/editor/dialogs/exportDialog.js

@@ -0,0 +1,190 @@
+/* eslint-disable max-len */
+/* eslint-disable node/no-unpublished-import */
+import 'elix/define/Dialog.js';
+import 'elix/define/NumberSpinBox.js';
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+ 
+  #dialog_content {
+    margin: 10px 10px 5px 10px;
+    background: #DDD;
+    overflow: auto;
+    text-align: left;
+    border: 1px solid #B0B0B0;
+  }
+
+  #dialog_content p, #dialog_content select, #dialog_content label {
+    margin: 10px;
+    line-height: 0.3em;
+  }
+  
+  #dialog_container {
+    font-family: Verdana;
+    text-align: center;
+    left: 50%;
+    top: 50%;
+    max-width: 400px;
+    z-index: 50001;
+    background: #CCC;
+    border: 1px outset #777;
+    font-family:Verdana,Helvetica,sans-serif;
+    font-size:0.8em;
+  }
+  
+  #dialog_container, #dialog_content {
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+  }
+  
+  #dialog_buttons input[type=text] {
+    width: 90%;
+    display: block;
+    margin: 0 0 5px 11px;
+  }
+  
+  #dialog_buttons input[type=button] {
+    margin: 0 1em;
+  }
+  .se-select{
+    text-align: center;
+  }
+  elix-number-spin-box{
+    margin-left: 15px;
+  }
+  </style>
+  <elix-dialog id="export_box" aria-label="export svg" closed>
+    <div class="overlay"></div>
+    <div id="dialog_container">
+      <div id="dialog_content">
+        <p class="se-select"> 
+        Select an image type for export:
+        </p>
+        <p class="se-select">
+        <select id="se-storage-pref">
+          <option value="PNG">PNG</option>
+          <option value="JPEG">JPEG</option>
+          <option value="BMP">BMP</option>
+          <option value="WEBP">WEBP</option>
+          <option value="PDF">PDF</option>
+        </select> 
+        </p>
+        <p id="se-quality">Quality:<elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box></p>
+      </div>
+      <div id="dialog_buttons">
+        <button id="export_ok">
+          <img class="svg_icon" src="./images/ok.svg" alt="icon" width="16" height="16" />
+          Ok
+        </button>
+        <button id="export_cancel">
+          <img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />
+          Cancel
+        </button>
+      </div>
+    </div>
+  </elix-dialog>
+`;
+/**
+ * @class SeExportDialog
+ */
+export class SeExportDialog extends HTMLElement {
+  /**
+    * @function constructor
+    */
+  constructor () {
+    super();
+    // create the shadowDom and insert the template
+    this._shadowRoot = this.attachShadow({mode: 'open'});
+    this._shadowRoot.append(template.content.cloneNode(true));
+    this.$dialog = this._shadowRoot.querySelector('#export_box');
+    this.$okBtn = this._shadowRoot.querySelector('#export_ok');
+    this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel');
+    this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref');
+    this.$qualityCont = this._shadowRoot.querySelector('#se-quality');    
+    this.$input = this._shadowRoot.querySelector('elix-number-spin-box');
+    this.value = 1;
+  }
+  /**
+   * @function observedAttributes
+   * @returns {any} observed
+   */
+  static get observedAttributes () {
+    return ['dialog'];
+  }
+  /**
+   * @function attributeChangedCallback
+   * @param {string} name
+   * @param {string} oldValue
+   * @param {string} newValue
+   * @returns {void}
+   */
+  attributeChangedCallback (name, oldValue, newValue) {
+    switch (name) {
+    case 'dialog':
+      if (newValue === 'open') {
+        this.$dialog.open();
+      } else {
+        this.$dialog.close();
+      }
+      break;
+    default:
+      // super.attributeChangedCallback(name, oldValue, newValue);
+      break;
+    }
+  }
+  /**
+   * @function get
+   * @returns {any}
+   */
+  get dialog () {
+    return this.getAttribute('dialog');
+  }
+  /**
+   * @function set
+   * @returns {void}
+   */
+  set dialog (value) {
+    this.setAttribute('dialog', value);
+  }
+  /**
+   * @function connectedCallback
+   * @returns {void}
+   */
+  connectedCallback () {
+    this.$input.addEventListener('change', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+    });
+    this.$input.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.value = e.target.value;
+    });
+    const onSubmitHandler = (e, action) => {
+      if (action === 'cancel') {
+        document.getElementById('se-export-dialog').setAttribute('dialog', 'close');
+      } else {
+        const triggerEvent = new CustomEvent('change', {detail: {
+          trigger: action,
+          imgType: this.$exportOption.value,
+          quality: this.value
+        }});
+        this.dispatchEvent(triggerEvent);
+      }
+    };
+    const onChangeHandler = (e) => {
+      if (e.target.value === 'PDF') {
+        this.$qualityCont.style.display = 'none';
+      } else {
+        this.$qualityCont.style.display = 'block';
+      }
+    };
+    this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
+    this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
+    this.$exportOption.addEventListener('change', (evt) => onChangeHandler(evt));
+  }
+}
+
+// Register
+customElements.define('se-export-dialog', SeExportDialog);

src/editor/dialogs/index.js

@@ -7,3 +7,4 @@ import './seSelectDialog.js';
 import './seConfirmDialog.js';
 import './sePromptDialog.js';
 import './seAlertDialog.js';
+import './exportDialog.js';

src/editor/images/align_bottom.svg

@@ -1,9 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="7.25" y="19.12" width="20.5" height="11.59" transform="translate(42.42 7.42) rotate(90)"/><rect class="cls-2" x="19.11" y="14.94" width="28.87" height="11.59" transform="translate(54.28 -12.81) rotate(90)"/><line class="cls-3" x1="5.6" y1="43.17" x2="45.44" y2="43.17"/></g></g></svg>
-  <g transform="rotate(90, 11, 11)" id="svg_1">
-   <rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="7.5"/>
-   <rect stroke="none" fill="#fddb8c" id="svg_5" height="4" width="11" y="4" x="9"/>
-   <rect id="svg_6" stroke="#606060" fill="#ffffff" height="7" width="18" y="12.5" x="1.5"/>
-   <rect id="svg_7" stroke="none" fill="#fddb8c" height="4" width="17" y="14" x="3"/>
-   <rect stroke="#c15909" fill="#f9bc01" id="svg_2" height="40" width="2" y="-10" x="18.5"/>
-   </g>
-</svg>

src/editor/images/align_center.svg

@@ -1,7 +1 @@
-<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="15.27" y="10.91" width="20.5" height="11.59" transform="translate(51.04 33.42) rotate(-180)"/><rect class="cls-2" x="11.09" y="26.96" width="28.87" height="11.59" transform="translate(51.04 65.52) rotate(-180)"/><line class="cls-3" x1="25.52" y1="4.81" x2="25.52" y2="44.66"/></g></g></svg>
-    <rect x="1.5" y="12.5" width="18" height="7" fill="#fddb8c" stroke="#606060" id="svg_6"/>
-    <rect x="4.5" y="2.5" width="12" height="7" id="svg_4" fill="#fddb8c" stroke="#606060"/>
-    <rect x="9.5" y="-10" width="2" height="40" id="svg_2" fill="#f9bc01" stroke="#c15909"/>
-    <rect x="2.5" y="13.5" width="16" height="5" fill="none" stroke="#ffffff" id="svg_7"/>
-    <rect x="5.5" y="3.5" width="10" height="5" id="svg_5" fill="none" stroke="#ffffff"/>
-  </svg>

src/editor/images/align_left.svg

@@ -1,7 +1 @@
-  <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="15.6" y="10.91" width="20.5" height="11.59" transform="translate(51.71 33.42) rotate(-180)"/><rect class="cls-2" x="15.6" y="26.96" width="28.87" height="11.59" transform="translate(60.07 65.52) rotate(-180)"/><line class="cls-3" x1="7.61" y1="4.81" x2="7.61" y2="44.66"/></g></g></svg>
-    <rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="2.5"/>
-    <rect stroke="none" fill="#fddb8c" id="svg_5" height="4" width="11" y="4" x="2"/>
-    <rect id="svg_6" stroke="#606060" fill="#ffffff" height="7" width="18" y="12.5" x="2.5"/>
-    <rect id="svg_7" stroke="none" fill="#fddb8c" height="4" width="17" y="14" x="2"/>
-    <rect stroke="#c15909" fill="#f9bc01" id="svg_2" height="40" width="2" y="-10" x="1.5"/>
-  </svg>

src/editor/images/align_middle.svg

@@ -1,9 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="7.25" y="18.94" width="20.5" height="11.59" transform="translate(42.23 7.24) rotate(90)"/><rect class="cls-2" x="19.11" y="18.94" width="28.87" height="11.59" transform="translate(58.28 -8.81) rotate(90)"/><line class="cls-3" x1="5.6" y1="24.74" x2="45.44" y2="24.74"/></g></g></svg>
-  <g transform="rotate(90, 12, 11.5)" id="svg_1">
-   <rect id="svg_6" stroke="#606060" fill="#fddb8c" height="7" width="18" y="14" x="3"/>
-   <rect stroke="#606060" fill="#fddb8c" id="svg_4" height="7" width="12" y="4" x="6"/>
-   <rect stroke="#c15909" fill="#f9bc01" id="svg_2" height="40" width="2" y="-8.5" x="11"/>
-   <rect id="svg_7" stroke="#ffffff" fill="none" height="5" width="16" y="15" x="4"/>
-   <rect stroke="#ffffff" fill="none" id="svg_5" height="5" width="10" y="5" x="7"/>
-   </g>
-</svg>

src/editor/images/align_right.svg

@@ -1,7 +1 @@
- <svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="15.46" y="10.91" width="20.5" height="11.59"/><rect class="cls-2" x="7.09" y="26.96" width="28.87" height="11.59"/><line class="cls-3" x1="43.95" y1="4.81" x2="43.95" y2="44.66"/></g></g></svg>
-    <rect x="7.5" y="2.5" width="12" height="7" id="svg_4" fill="#ffffff" stroke="#606060"/>
-    <rect x="9" y="4" width="11" height="4" id="svg_5" fill="#fddb8c" stroke="none"/>
-    <rect x="1.5" y="12.5" width="18" height="7" fill="#ffffff" stroke="#606060" id="svg_6"/>
-    <rect x="3" y="14" width="17" height="4" fill="#fddb8c" stroke="none" id="svg_7"/>
-    <rect x="18.5" y="-10" width="2" height="40" id="svg_2" fill="#f9bc01" stroke="#c15909"/>
-  </svg>

src/editor/images/align_top.svg

@@ -1,9 +1 @@
-<svg viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="6.73" y="18.75" width="20.5" height="11.59" transform="translate(-7.57 41.53) rotate(-90)"/><rect class="cls-2" x="18.6" y="22.94" width="28.87" height="11.59" transform="translate(4.3 61.76) rotate(-90)"/><line class="cls-3" x1="5.08" y1="6.3" x2="44.93" y2="6.3"/></g></g></svg>
-    <g transform="rotate(90, 11, 11)" id="svg_1">
-     <rect x="2.5" y="3.5" width="12" height="7" id="svg_4" fill="#ffffff" stroke="#606060"/>
-     <rect x="2" y="5" width="11" height="4" id="svg_5" fill="#fddb8c" stroke="none"/>
-     <rect x="2.5" y="13.5" width="18" height="7" fill="#ffffff" stroke="#606060" id="svg_6"/>
-     <rect x="2" y="15" width="17" height="4" fill="#fddb8c" stroke="none" id="svg_7"/>
-     <rect x="1.5" y="-9" width="2" height="40" id="svg_2" fill="#f9bc01" stroke="#c15909"/>
-    </g>
-  </svg>

src/editor/images/angle.svg

@@ -1,4 +1 @@
-<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="0 0 50 50">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3,.cls-4{stroke:#f9ba00;}.cls-4{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="44.2" y1="37.01" x2="6.85" y2="37.01"/><line class="cls-2" x1="30.11" y1="12.46" x2="6.85" y2="37.01"/><path class="cls-3" d="M28.12,21.07c3.34,4.44,5.19,7.37,5.19,13.35"/><polygon class="cls-4" points="26.66 19 27.24 24.45 31.64 21.28 26.66 19"/></g></g></svg>
-  <path stroke-width="2" stroke-dasharray="1,3" id="svg_6" d="m32.78778,41.03469c-0.40379,-8.68145 -4.50873,-16.79003 -12.11365,-20.5932" stroke="#000000" fill="none"/>
-  <path id="svg_7" d="m29.20348,7.67055l-24.20348,34.47921l41.16472,0" stroke-width="3" stroke="#404040" fill="none"/>
-</svg></svg>

src/editor/images/blur.svg

@@ -1,9 +1 @@
-<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:#f9ba00;}.cls-2{opacity:0.2;}.cls-3{fill:none;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M24.78,39.73a15.16,15.16,0,0,1-15.32-15,15.16,15.16,0,0,1,15.32-15"/><path class="cls-2" d="M24.88,7.58A17.34,17.34,0,0,1,42.4,24.74,17.34,17.34,0,0,1,24.88,41.89"/><path class="cls-2" d="M24.88,9.74A15.25,15.25,0,0,1,40.29,24.82,15.25,15.25,0,0,1,24.88,39.9"/><path class="cls-2" d="M24.88,11.77A13.19,13.19,0,0,1,38.21,24.82a13.19,13.19,0,0,1-13.33,13"/><path class="cls-2" d="M24.88,13.81a11,11,0,1,1,0,22"/><path class="cls-2" d="M24.88,15.85a9,9,0,1,1,0,17.94"/><path class="cls-2" d="M24.78,17.88a6.94,6.94,0,1,1,0,13.88"/><path class="cls-2" d="M24.78,19.92a4.91,4.91,0,1,1,0,9.81"/><path class="cls-2" d="M24.78,21.64a3.1,3.1,0,1,1,0,6.2"/><polyline class="cls-3" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <filter id="svg_4_blur" x="-50%" y="-50%" width="200%" height="200%">
-   <feGaussianBlur stdDeviation="25"/>
-  </filter>
- </defs>
-  <circle fill="#000000" stroke="#000000" stroke-width="5" stroke-dasharray="null" cx="150" cy="150" r="91.80151" id="svg_4" filter="url(#svg_4_blur)"/>
-</svg>

src/editor/images/circle.svg

@@ -1,11 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><ellipse class="cls-2" cx="25.41" cy="24.81" rx="13.99" ry="14.28"/></g></g></svg>
- <defs>
-  <linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
-   <stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="1.0"/>
-  </linearGradient>
- </defs>
- <g>
-  <circle stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
- </g>
-</svg>

src/editor/images/clone.svg

@@ -1,17 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-2,.cls-4{stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-linejoin:round;}.cls-2,.cls-3,.cls-4{stroke-width:2px;}.cls-3{fill:#f9ba00;stroke:#f9ba00;}.cls-4{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M38.92,33.18s-9.39-5.22-9.39-9,2.35-11.83,2.35-11.83v-.58a6.87,6.87,0,0,0-13.7,0l0,.58s2.35,8,2.35,11.83-9.39,9-9.39,9"/><rect class="cls-3" x="6.72" y="42.58" width="36.59" height="2.45"/><rect class="cls-4" x="4.84" y="33.18" width="40.35" height="8.4"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_36">
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
-   <stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
-  </linearGradient>
-  <linearGradient y2="0.80078" x2="0.42578" y1="0" x1="0" id="svg_69">
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
-   <stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
-  </linearGradient>
- </defs>
-  <path stroke="#8f5902" fill="url(#svg_69)" id="svg_34" d="m2.11676,16.32061l-0.13787,-5.05515l1.93015,-2.02206l10.11029,0l2.02206,2.29779l0,4.77941l-13.92463,0z"/>
-  <rect x="7.85379" y="6.30027" width="2.2932" height="4.3407" id="svg_38" fill="url(#svg_36)" stroke="#8f5902" rx="1" ry="1"/>
-  <circle stroke="#8f5902" fill="url(#svg_36)" id="svg_35" r="2.96392" cy="4.48149" cx="9.11757"/>
-  <line x1="2.44838" y1="12.03512" x2="15.5524" y2="12.03512" id="svg_39" stroke="#8f5902" fill="none"/>
-  <path d="m6.72427,12.55859l4.74203,0l-2.30831,2.07258l-2.43372,-2.07258z" id="svg_43" fill="#000000" stroke="none"/>
-</svg>

src/editor/images/conn.svg

@@ -1,24 +1 @@
-<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-miterlimit:10;}.cls-2,.cls-3{stroke-linecap:round;stroke-width:2px;}.cls-3{fill:#fff;stroke:#fff;stroke-linejoin:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="14.25" y1="16.23" x2="37.11" y2="33.52"/><rect class="cls-3" x="9.19" y="-0.56" width="10.12" height="22.9" transform="matrix(0, 1, -1, 0, 25.14, -3.36)"/><rect class="cls-3" x="31.73" y="27.13" width="10.12" height="22.9" transform="matrix(0, 1, -1, 0, 75.37, 1.79)"/></g></g></svg>
-  <defs>
-
-  <line stroke-width="5" fill="none" stroke="#000000" id="svg_2" y2="121" x2="136" y1="7" x1="136">
-    <stop stop-opacity="1" stop-color="#4687a0"/>
-    <stop stop-opacity="1" stop-color="#ffffff"/>
-  </line>
-  <linearGradient y2="0.18359" x2="0.29688" y1="0.92188" x1="0.62109" id="svg_3">
-    <stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
-    <stop stop-opacity="1" stop-color="#ffffff" offset="1"/>
-  </linearGradient>
-  </defs>
-  <g>
-  <title>Layer 1</title>
-  <line x1="5.64676" y1="5.60056" x2="18.50037" y2="18.62557" id="svg_5" stroke="#000000" fill="none"/>
-  <rect opacity="0.75" stroke-width="0.5" x="0.5" y="0.5" width="9.625" height="5.125" id="svg_1" fill="url(#svg_3)" stroke="#000000"/>
-  <rect opacity="0.75" id="svg_4" stroke-width="0.5" x="13.75" y="18.25" width="9.625" height="5.125" fill="url(#svg_3)" stroke="#000000"/>
-  <g id="svg_9">
-    <path d="m14.57119,9.12143l-0.98244,5.18852l2.70861,-4.36084" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
-    <path d="m14.27564,6.76258c-0.25872,0.72562 -0.40735,1.65632 -0.33812,2.15432l2.90784,1.2509c0.30961,-0.21212 1.08198,-1.1814 1.08198,-1.73736" id="svg_7" fill="url(#svg_3)" stroke="#000000"/>
-    <path d="m16.28893,0.37519l-2.46413,5.9304l4.76481,2.39435l2.13178,-4.96735" id="svg_8" fill="url(#svg_3)" stroke="#000000"/>
-  </g>
-  </g>
-</svg>

src/editor/images/delete.svg

@@ -1,6 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;}.cls-2,.cls-3,.cls-4{stroke:#fff;stroke-width:2px;}.cls-2,.cls-4{stroke-linejoin:round;}.cls-3,.cls-4{stroke-linecap:round;}.cls-3{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="41.06 11.05 36.34 43.08 14.71 43.08 9.99 11.05 41.06 11.05"/><line class="cls-3" x1="18.2" y1="16.01" x2="19.71" y2="38.01"/><line class="cls-3" x1="25.43" y1="16.06" x2="25.43" y2="38.06"/><line class="cls-3" x1="32.68" y1="16.06" x2="31.17" y2="38.06"/><line class="cls-4" x1="6.94" y1="11.05" x2="44.1" y2="11.05"/><rect class="cls-2" x="19.69" y="6.4" width="11.66" height="4.65"/></g></g></svg>
-  <rect ry="3" rx="3" stroke="#800000" fill="#aa0000" id="svg_37" height="20.29514" width="21.17486" y="1.70304" x="1.42011"/>
-  <rect ry="3" rx="3" stroke="#ff5555" fill="#aa0000" id="svg_67" height="18.63022" width="19.61118" y="2.53597" x="2.20258"/>
-  <line stroke-width="2" fill="none" stroke="#ffffff" id="svg_68" y2="16.85127" x2="17.00646" y1="6.85127" x1="7.00646"/>
-  <line stroke-width="2" id="svg_70" fill="none" stroke="#ffffff" y2="16.85127" x2="7.00646" y1="6.85127" x1="17.00646"/>
- </svg>

src/editor/images/docprop.svg

@@ -1,19 +1 @@
-<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:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polyline class="cls-2" points="37.26 21.1 37.26 14.03 27.02 3.91 7.31 3.91 7.31 40.98 23.79 40.98"/><polyline class="cls-2" points="27.02 3.91 27.02 14.03 37.26 14.03"/><path class="cls-3" d="M36.41,46.73a1.79,1.79,0,0,1-1.34-.57c-.45-.48-1.85-1.72-3-1.72s-2.57,1.25-3,1.69a1.83,1.83,0,0,1-2,.42h0l-3.49-1.93,0,0a1.64,1.64,0,0,1-.56-2,4.18,4.18,0,0,0,.32-1.4,3.69,3.69,0,0,0-3.7-3.66h-.15c-.58,0-1.06-.51-1.21-1.3a16.62,16.62,0,0,1-.3-2.76,16.47,16.47,0,0,1,.3-2.76c.15-.8.64-1.32,1.23-1.31h.13a3.68,3.68,0,0,0,3.7-3.65,3.77,3.77,0,0,0-.33-1.4,1.66,1.66,0,0,1,.57-2l0,0,3.68-2,0,0a1.89,1.89,0,0,1,2,.42,5.23,5.23,0,0,0,2.93,1.62,5.31,5.31,0,0,0,2.91-1.59,1.88,1.88,0,0,1,2-.4l0,0,3.56,1.95,0,0a1.64,1.64,0,0,1,.56,2,4.1,4.1,0,0,0-.32,1.4,3.68,3.68,0,0,0,3.7,3.65h.12c.6,0,1.08.51,1.24,1.31a17.7,17.7,0,0,1,.3,2.76,17.88,17.88,0,0,1-.3,2.76c-.15.8-.64,1.32-1.23,1.3h-.13A3.68,3.68,0,0,0,41,41.18a3.84,3.84,0,0,0,.33,1.4,1.64,1.64,0,0,1-.57,2l0,0-3.62,2,0,0A1.54,1.54,0,0,1,36.41,46.73Zm-.18-1.92a.23.23,0,0,0,.11,0h0L39.67,43a5.57,5.57,0,0,1-.44-2,5.24,5.24,0,0,1,5-5.19,15.57,15.57,0,0,0,.26-2.37,15.57,15.57,0,0,0-.26-2.37,5.25,5.25,0,0,1-5-5.2,5.49,5.49,0,0,1,.44-2L36.4,22.1h0a.28.28,0,0,0-.13,0,8.93,8.93,0,0,1-1.21,1,5.07,5.07,0,0,1-2.83,1.05,5.12,5.12,0,0,1-2.86-1.07,10.81,10.81,0,0,1-1.22-1,.27.27,0,0,0-.12,0h0l-3.39,1.83a5.61,5.61,0,0,1,.44,2,5.25,5.25,0,0,1-5,5.2,15.57,15.57,0,0,0-.26,2.37,15.4,15.4,0,0,0,.26,2.36,5.25,5.25,0,0,1,5,5.2,5.73,5.73,0,0,1-.44,2l3.2,1.77h0a.2.2,0,0,0,.11,0,9.88,9.88,0,0,1,1.23-1.06,5.09,5.09,0,0,1,2.9-1.12A5.07,5.07,0,0,1,35,43.73,10.1,10.1,0,0,1,36.23,44.81Zm-4.09-6.62a4.74,4.74,0,1,1,4.75-4.74A4.75,4.75,0,0,1,32.14,38.19Zm0-7.58a2.85,2.85,0,1,0,2.77,2.77A2.85,2.85,0,0,0,32.14,30.61Z"/></g></g></svg>
-   <defs>
-    <linearGradient y2="1" x2="1" y1="0.5" x1="1" id="svg_53">
-     <stop stop-opacity="1" stop-color="#606060" offset="0"/>
-     <stop stop-opacity="0" stop-color="#5e5e5e" offset="1"/>
-    </linearGradient>
-   </defs>
-    <rect stroke="#606060" fill="#eaeaea" id="svg_55" height="21" width="18" y="1.6692" x="2.42792"/>
-    <line fill="none" stroke="#a0a0a0" id="svg_56" y2="4.37757" x2="14.89023" y1="4.37757" x1="6.696"/>
-    <line fill="none" stroke="#a0a0a0" id="svg_57" y2="7.10804" x2="12.92026" y1="7.10804" x1="6.6948"/>
-    <line fill="none" stroke="#a0a0a0" id="svg_58" y2="9.84241" x2="15.64716" y1="9.84241" x1="6.6942"/>
-    <line fill="none" stroke="#a0a0a0" id="svg_59" y2="12.36585" x2="13.21805" y1="12.36585" x1="6.69691"/>
-    <line fill="none" stroke="#a0a0a0" id="svg_60" y2="15.06507" x2="14.43591" y1="15.06507" x1="6.69691"/>
-    <line fill="none" stroke="#a0a0a0" id="svg_61" y2="17.84241" x2="13.36979" y1="17.84241" x1="6.69691"/>
-    <g id="svg_54">
-     <path transform="rotate(-45, 12.5448, 11.7085)" stroke="none" fill="#606060" id="svg_31" d="m11.24329,8.73944l0,2.79974l2.53499,0.07777l0,-2.95528c1.78134,0.07777 2.26093,1.39987 2.12391,2.95528c-0.06851,1.63318 -1.30175,3.49967 -3.49418,3.26636c-2.19242,-0.31108 -2.87755,-1.39987 -3.15161,-2.72197c-0.27406,-1.39987 0.41108,-3.34413 1.98689,-3.4219z"/>
-     <rect opacity="0.95" transform="rotate(-45, 16.2485, 15.1732)" stroke="none" fill="url(#svg_53)" id="svg_50" height="4.85445" width="2.57974" y="12.746" x="15.04047"/>
-    </g>
-  </svg></svg>

src/editor/images/editPref.svg

@@ -1 +1 @@
-<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="0 0 1024 1024" version="1.1"><path d="M655.872 960a61.952 61.952 0 0 1-45.376-19.136c-14.912-16.192-62.272-58.24-100.992-58.24-38.464 0-86.528 42.304-100.352 57.216a62.144 62.144 0 0 1-68.224 14.144l-1.28-0.576-117.76-65.088-1.088-0.832a55.552 55.552 0 0 1-18.944-67.52c0.064-0.192 10.816-24.768 10.816-47.168 0-67.968-56-123.392-124.8-123.392h-4.16l-0.768 0.064c-19.712 0-35.776-17.344-40.896-44.096C41.6 603.264 32 552.448 32 512.384c0-40 9.6-90.88 10.048-92.992 5.184-27.136 21.568-44.48 41.664-44.096h4.16c68.8 0 124.8-55.296 124.8-123.328 0-22.4-10.752-46.976-10.88-47.232a55.424 55.424 0 0 1 19.136-67.456l1.216-0.832 124.224-67.456 1.344-0.576a63.36 63.36 0 0 1 67.968 13.952c14.656 15.232 61.184 54.784 98.816 54.784 37.312 0 83.52-38.784 98.112-53.76a63.616 63.616 0 0 1 68.032-13.376l1.28 0.576 120 65.92 1.216 0.832a55.424 55.424 0 0 1 19.072 67.456c-0.128 0.192-10.88 24.768-10.88 47.168 0 67.968 56 123.328 124.8 123.328h4.16c19.968-0.384 36.416 17.024 41.6 44.096 0.512 2.112 10.112 52.992 10.112 92.992 0 40.064-9.6 90.88-10.048 92.992-5.184 27.136-21.632 44.48-41.6 44.032h-4.16c-68.8 0-124.8 55.36-124.8 123.392 0 22.464 10.752 46.976 10.88 47.232a55.36 55.36 0 0 1-19.072 67.392l-1.28 0.896-122.048 66.688-1.344 0.512a56.32 56.32 0 0 1-22.656 4.48z m-6.016-64.832a8.192 8.192 0 0 0 3.648 0.96h0.192l112.128-61.056c-2.688-6.208-15.04-36.16-15.04-67.584 0-93.76 75.008-170.56 169.024-175.296 1.344-7.36 8.704-48.832 8.704-79.808s-7.296-72.384-8.704-79.744c-94.016-4.864-169.024-81.664-169.024-175.36 0-31.424 12.416-61.44 15.104-67.648l-110.4-60.352h-0.448a8.448 8.448 0 0 0-4.16 1.088 309.12 309.12 0 0 1-40.832 33.728c-33.984 23.552-66.176 35.456-95.552 35.456-29.76 0-62.144-12.16-96.384-36.16a312.064 312.064 0 0 1-41.024-34.432 9.088 9.088 0 0 0-4.224-1.024H372.48l-114.304 61.76c2.752 6.272 15.104 36.288 15.104 67.584 0 93.696-75.008 170.496-169.024 175.36-1.408 7.36-8.704 48.704-8.704 79.744s7.36 72.384 8.704 79.744c94.016 4.8 169.024 81.6 169.024 175.36 0 31.424-12.48 61.632-15.104 67.712l108.16 59.52h0.256a8 8 0 0 0 3.584-0.896c2.048-2.112 18.176-19.008 41.408-35.776 34.688-25.088 67.648-37.76 97.92-37.76 30.656 0 63.872 12.928 98.752 38.464 23.36 17.152 39.616 34.24 41.6 36.416z m-137.984-223.104c-88.32 0-160.192-71.68-160.192-159.808s71.872-159.744 160.192-159.744c88.384 0 160.256 71.616 160.256 159.744s-71.872 159.808-160.256 159.808z m0-255.744a96 96 0 0 0 0 191.808 95.936 95.936 0 0 0 0-191.808z"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-2,.cls-4{stroke:#fff;stroke-width:2px;}.cls-2{stroke-linecap:round;stroke-linejoin:round;}.cls-3{fill:#fff;}.cls-4{stroke-miterlimit:10;}.cls-5{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="26.12" y1="13.74" x2="12.11" y2="31"/><line class="cls-2" x1="29.45" y1="18.86" x2="34.43" y2="12.69"/><polyline class="cls-2" points="25.36 5.39 8.01 26.93 5.95 38.81 16.9 34.44 18.7 32.2"/><path class="cls-3" d="M6.8,33.94a3.51,3.51,0,0,1,2.62.51,3.18,3.18,0,0,1,1.42,2.41L6,38.81Z"/><path class="cls-4" d="M8.73,26.63A14.26,14.26,0,0,0,12.11,31a16.56,16.56,0,0,0,5.12,2.63"/><path class="cls-4" d="M22.29,8.36A15,15,0,0,0,25.91,13a18.2,18.2,0,0,0,5.49,2.78"/><path class="cls-2" d="M34.62,12.39A16.56,16.56,0,0,1,29.5,9.76a29.86,29.86,0,0,1-4.14-4.37S29.26,6.45,31,7.8A22.22,22.22,0,0,1,34.62,12.39Z"/><path class="cls-5" d="M36.67,44.08a1.84,1.84,0,0,1-1.35-.56c-.44-.48-1.85-1.73-3-1.73s-2.57,1.25-3,1.69a1.82,1.82,0,0,1-2,.42h0L23.8,42l0,0a1.65,1.65,0,0,1-.56-2,4.18,4.18,0,0,0,.32-1.4,3.69,3.69,0,0,0-3.7-3.66h-.14c-.59,0-1.06-.51-1.22-1.3a18.42,18.42,0,0,1-.29-2.76,18.23,18.23,0,0,1,.29-2.76c.16-.8.64-1.32,1.24-1.31h.12a3.68,3.68,0,0,0,3.7-3.65,4.1,4.1,0,0,0-.32-1.4,1.64,1.64,0,0,1,.57-2l0,0,3.69-2,0,0a1.88,1.88,0,0,1,2,.42,5.3,5.3,0,0,0,2.93,1.62,5.24,5.24,0,0,0,2.91-1.59,1.89,1.89,0,0,1,2-.4l0,0L41,19.66l0,0a1.64,1.64,0,0,1,.57,2,4.1,4.1,0,0,0-.32,1.4A3.68,3.68,0,0,0,45,26.74h.12c.59,0,1.08.51,1.23,1.31a16.47,16.47,0,0,1,.3,2.76,18.42,18.42,0,0,1-.29,2.76c-.16.8-.64,1.32-1.24,1.3H45a3.68,3.68,0,0,0-3.7,3.66,4.18,4.18,0,0,0,.32,1.4,1.64,1.64,0,0,1-.56,2l0,0-3.62,2,0,0A1.54,1.54,0,0,1,36.67,44.08Zm-.18-1.92a.2.2,0,0,0,.11,0h0l3.33-1.81a5.5,5.5,0,0,1-.45-2,5.24,5.24,0,0,1,5-5.19,15.57,15.57,0,0,0,.26-2.37,14.35,14.35,0,0,0-.26-2.37,5.25,5.25,0,0,1-5-5.2,5.43,5.43,0,0,1,.45-2l-3.27-1.79h0a.27.27,0,0,0-.12,0,9.59,9.59,0,0,1-1.21,1,5.07,5.07,0,0,1-2.84,1.05,5.07,5.07,0,0,1-2.85-1.07,9.29,9.29,0,0,1-1.22-1,.28.28,0,0,0-.13,0h0l-3.39,1.83a5.55,5.55,0,0,1,.45,2,5.25,5.25,0,0,1-5,5.2,15.57,15.57,0,0,0-.26,2.37,15.23,15.23,0,0,0,.26,2.36,5.25,5.25,0,0,1,5,5.2,5.44,5.44,0,0,1-.45,2l3.21,1.77h0a.17.17,0,0,0,.1,0,10.82,10.82,0,0,1,1.23-1.06,5.11,5.11,0,0,1,2.91-1.12,5,5,0,0,1,2.92,1.14A9.75,9.75,0,0,1,36.49,42.16ZM32.4,35.54a4.74,4.74,0,1,1,4.75-4.74A4.75,4.75,0,0,1,32.4,35.54Zm0-7.58a2.85,2.85,0,1,0,2.77,2.77A2.85,2.85,0,0,0,32.4,28Z"/></g></g></svg>

src/editor/images/ellipse.svg

@@ -1,11 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><ellipse class="cls-2" cx="25.93" cy="28.94" rx="18.79" ry="10.15"/></g></g></svg>
- <defs>
-  <linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
-   <stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="1.0"/>
-  </linearGradient>
- </defs>
- <g>
-  <ellipse stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="15" cy="27" cx="27"/>
- </g>
-</svg>

src/editor/images/export.svg

@@ -1,15 +1 @@
-<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="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-width:2px;}.cls-2,.cls-4{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3{fill:#f9ba00;}.cls-3,.cls-4{stroke:#f9ba00;}.cls-4{fill:#fff;stroke-width:5px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M37.19,34.36a6.93,6.93,0,0,1-6.35,4.16H17.12a6.93,6.93,0,0,1-6.93-6.93V17.88A6.93,6.93,0,0,1,17.12,11H30.84a6.93,6.93,0,0,1,6.26,4"/><polygon class="cls-3" points="44.65 24.74 32.88 18.03 32.88 31.44 44.65 24.74"/><line class="cls-4" x1="36.49" y1="24.74" x2="20.18" y2="24.74"/></g></g></svg>
-   <defs>
-    <linearGradient id="svg_5" x1="0.77734" y1="0.51172" x2="0.09375" y2="0.53516">
-     <stop offset="0" stop-color="#81bbf4"/>
-     <stop offset="1" stop-color="#376eb7"/>
-    </linearGradient>
-   </defs>
-   <g>
-    <rect x="7.22599" y="1.3603" width="15.76465" height="21.51735" id="svg_55" fill="#eaeaea" stroke="#606060"/>
-    <circle fill="#31abed" stroke-width="0.5" cx="17.4206" cy="11.1278" r="4.69727" id="svg_3"/>
-    <path fill="#ffcc00" stroke-width="0.5" d="m9.67673,20.24302l7.38701,-6.80778l2.91746,6.71323" id="svg_4"/>
-    <rect fill="#ff5555" stroke-width="0.5" x="9.5385" y="2.94914" width="5.74652" height="5.74652" id="svg_2"/>
-    <path d="m6.13727,17.94236l5.77328,-4.91041l-5.86949,-5.1832l-0.09622,2.36426l-4.64805,-0.06751l-0.04665,5.54694l4.79093,-0.02342l0.09623,2.27334z" id="svg_45" fill="url(#svg_5)" stroke="#285582"/>
-   </g>
-  </svg></svg>

src/editor/images/eye_dropper.svg

@@ -1,27 +1 @@
-<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#fff;}.cls-3{fill:#f9ba00;}.cls-4{stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M40.3,17.49,38,15.66l4.6-5.88A2.72,2.72,0,0,0,41.82,6l-1.2-.94a2.74,2.74,0,0,0-3.84.17l-4.6,5.88L29.84,9.3a.55.55,0,0,0-.77,0l-2.8,3.58a.55.55,0,0,0,.15.75l10.47,8.19a.53.53,0,0,0,.76,0l2.8-3.57A.55.55,0,0,0,40.3,17.49Z"/><polygon class="cls-3" points="15.05 31.59 25.81 31.59 18.73 40.38 14.36 42.43 13.65 44.51 11.43 45.52 9.08 44.34 9.08 40.84 11.19 39.65 15.05 31.59"/><path class="cls-4" d="M30.62,12.26,12.84,34.33l-1.65,5.33a2.94,2.94,0,1,0,3.18,2.92s0-.1,0-.15l4.37-2L36.51,18.31"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <radialGradient id="eyedropper_svg_6" cx="0.5" cy="0.5" r="0.5">
-   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
-   <stop offset="1" stop-color="#fddb8c" stop-opacity="0.38"/>
-  </radialGradient>
-  <linearGradient id="eyedropper_svg_15" x1="0" y1="0" x2="0.58594" y2="0.55078">
-   <stop offset="0" stop-color="#ffffff" stop-opacity="0.57"/>
-   <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-  </linearGradient>
-  <linearGradient id="eyedropper_svg_19" x1="0" y1="0" x2="1" y2="1">
-   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
-   <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
-  </linearGradient>
- </defs>
- <g display="inline">
-  <title>Layer 1</title>
-  <path d="m193.899994,73l-119.899979,118l-15,39.5l10.25,4.5l43.750015,-20l108.999969,-112l-28.100006,-30z" id="svg_3" fill="none" stroke="#000000" stroke-width="5"/>
-  <path d="m58.649994,232c-2.75,28.200012 -26.399994,28.950012 -21.899994,59c4.5,30.049988 55,28 55.5,-1.25c0.5,-29.25 -20.25,-28.75 -22.25,-54.75l-11.350006,-3z" id="svg_4" fill="#fddb8c" stroke="#000000" stroke-width="7"/>
-  <path d="m45.474976,269.275024l13.775024,0.474976l-0.75,16.75l-14.25,-1.25l1.224976,-15.974976z" id="svg_5" fill="url(#eyedropper_svg_6)" stroke-width="5" fill-opacity="0.73"/>
-  <path d="m217.899994,46c21.5,-101.549999 141.600006,20.449997 28.100006,33l-5,44l-63,-66l39.899994,-11z" id="svg_2" fill="#000000" stroke-width="5"/>
-  <path d="m206.825012,61.075008c3.712494,-2.46249 7.637482,-3.53751 14.424988,-5.575008c10.125,-16.5 32.875,-41.5 40.5,-35c7.625,6.5 -21.25,35.625 -37.5,39.25c-5.5,10.125 -8,13.875 -17.25,16.5c-2.837494,-8.162514 -4.262482,-12.337486 -0.174988,-15.174992z" id="svg_7" fill="url(#eyedropper_svg_15)" stroke-width="5"/>
-  <path d="m133.049988,134.75l46.950012,9.25l-66,70l-42.5,20.5l-11.5,-5l14,-37.5l59.049988,-57.25z" id="svg_11" fill="#fddb8c" stroke="#000000" stroke-width="7"/>
-  <path d="m71.425034,212.350006l9.050888,-20.022537l51.516724,-49.327469l8.507355,0.97197l-69.074966,68.378036z" id="svg_16" fill="url(#eyedropper_svg_19)" stroke-width="5"/>
- </g>
-</svg>

src/editor/images/fh_ellipse.svg

@@ -1,16 +1 @@
-<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{fill:none;}.cls-1{stroke:#f9ba00;stroke-linecap:round;}.cls-1,.cls-2{stroke-linejoin:round;}.cls-1,.cls-2,.cls-5{stroke-width:2px;}.cls-2,.cls-5{stroke:#fff;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M40.52,22.58c3.59,1.85,5.82,4.45,5.82,7.34,0,5.61-8.42,10.16-18.79,10.16S8.75,35.53,8.75,29.92s8.42-10.15,18.8-10.15"/><line class="cls-2" x1="44.72" y1="8.14" x2="29.2" y2="27.42"/><polyline class="cls-2" points="40.44 4.14 22.66 26.21 20.6 38.09 31.55 33.72 49.33 11.65"/><polyline class="cls-3" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-4" d="M21.45,33.22s1.72-1.35,3.16-.48.88,3.4.88,3.4l-4.89,2Z"/><path class="cls-5" d="M22.66,26.21s4.38-.55,6.54,1.21,2.35,6.3,2.35,6.3"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
-   <stop offset="0" stop-color="#fddb8c" stop-opacity="1"/>
-   <stop offset="1" stop-color="#bf5f00" stop-opacity="1"/>
-  </linearGradient>
-  <linearGradient id="svg_4" x1="0.17188" y1="0.1875" x2="1" y2="1">
-   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
-   <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-  </linearGradient>
- </defs>
-  <ellipse stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="37" cx="27"/>
-  <path d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2"/>
-  <path d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z" id="svg_10" fill="#fddb8c" stroke="#000000" stroke-width="2"/>
-  <path d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" id="svg_11"/>
- </svg>

src/editor/images/fh_rect.svg

@@ -1,16 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{fill:none;}.cls-1{stroke:#f9ba00;stroke-linecap:round;}.cls-1,.cls-2{stroke-linejoin:round;}.cls-1,.cls-2,.cls-5{stroke-width:2px;}.cls-2,.cls-5{stroke:#fff;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="44.72 18.78 44.72 39.09 7.14 39.09 7.14 18.78 28.64 18.78"/><line class="cls-2" x1="44.72" y1="8.14" x2="29.2" y2="27.42"/><polyline class="cls-2" points="40.44 4.14 22.66 26.21 20.6 38.09 31.55 33.72 49.33 11.65"/><polyline class="cls-3" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-4" d="M21.45,33.22s1.72-1.35,3.16-.48.88,3.4.88,3.4l-4.89,2Z"/><path class="cls-5" d="M22.66,26.21s4.38-.55,6.54,1.21,2.35,6.3,2.35,6.3"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
-   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-  </linearGradient>
-  <linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
-   <stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
-  </linearGradient>
- </defs>
-  <rect stroke-width="2" stroke="#000000" fill="url(#svg_2)" x="3.25" y="25.75" width="46" height="25"/>
-  <path stroke-width="2" stroke="#000000" fill="url(#svg_9)" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
-  <path stroke-width="2" stroke="#000000" fill="#fddb8c" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
-  <path stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
-</svg>

src/editor/images/globe_link.svg

@@ -1,26 +1 @@
-<svg width="66" height="66" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-2{stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-miterlimit:10;stroke-width:3px;}.cls-3{stroke:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M27.7,20.76l.53.53a6.77,6.77,0,0,1,0,9.57h0a6.77,6.77,0,0,1-9.57,0L9.77,22a6.75,6.75,0,0,1,0-9.57h0a6.76,6.76,0,0,1,9.56,0l2.18,2.18"/><path class="cls-3" d="M23.56,28.08a6.77,6.77,0,0,1,0-9.57h0a6.77,6.77,0,0,1,9.57,0l8.9,8.9A6.77,6.77,0,0,1,42,37h0a6.77,6.77,0,0,1-9.57,0l-2.24-2.25"/></g></g></svg>
- <defs>
-  <radialGradient id="svg_8" spreadMethod="pad" cx="0.5" cy="0.32513">
-   <stop stop-color="#7791ef" stop-opacity="0.99219" offset="0"/>
-   <stop stop-color="#3c3cfc" offset="1"/>
-  </radialGradient>
-  <linearGradient id="svg_10" x1="0" y1="0" x2="1" y2="0">
-   <stop offset="0" stop-color="#333333" stop-opacity="0.99609"/>
-   <stop offset="1" stop-opacity="0.99609" stop-color="#fddb8c"/>
-  </linearGradient>
- </defs>
- <g>
-  <g opacity="0.8" id="svg_5">
-   <circle id="svg_1" r="27.90625" cy="33" cx="33" stroke-width="0" stroke="#AAAAAA" fill="url(#svg_8)"/>
-   <g id="svg_7">
-    <path d="m38.2478,36.06121c-0.43732,0 -0.87463,0 -1.31195,0c-0.43731,0 -0.87463,0 -2.6239,0c-0.87463,0 -1.74926,0 -2.18658,0c-0.43732,0 -2.19828,0.33684 -2.6239,0.43732c-0.95172,0.22467 -1.27098,0.48253 -1.74927,0.87463c-1.21939,0.99965 -1.44004,1.00272 -1.74926,1.31195c-0.30923,0.30923 -0.21265,0.79756 -0.43732,1.74926c-0.10048,0.42562 0.16736,0.90792 0,1.31195c-0.23668,0.57138 -0.43732,0.87463 -0.43732,1.74926c0,0.43732 0.12809,0.56541 0.43732,0.87463c0.30923,0.30923 0.12809,0.56541 0.43732,0.87463c0.30923,0.30923 1.32364,0.77415 1.74926,0.87463c0.95171,0.22467 0.69349,0.69349 1.31195,1.31195c0.30923,0.30923 0.90791,-0.16736 1.31195,0c0.57138,0.23668 0.56541,0.56541 0.87463,0.87463c0.30923,0.30923 0.56541,0.12809 0.87463,0.43732c0.61846,0.61846 -0.10048,1.32365 0,1.74926c0.22467,0.95171 0.43732,1.31195 0.43732,2.6239c0,0.87463 0,2.18658 0,3.06121c0,0.43732 0,1.31195 0,2.6239c0,0.43732 0.12809,1.00272 0.43732,1.31195c0.30922,0.30923 1.31195,0 1.74926,0c0.87463,0 1.31195,0 1.74927,0c0.43731,0 0.6065,-0.40129 1.74926,-0.87464c0.40403,-0.16736 0.74057,-0.20064 1.31195,-0.43732c0.40403,-0.16736 0.63795,-0.74057 0.87463,-1.31195c0.16736,-0.40403 0.15712,-2.20917 0.43732,-3.93585c0.22151,-1.36505 0.43732,-2.18658 0.43732,-2.6239c0,-0.43732 -0.12928,-0.88101 0,-2.18658c0.21973,-2.21904 0.43732,-3.49853 0.43732,-3.93585c0,-0.43732 0,-0.87463 0,-1.74927c0,-1.31195 0.16736,-1.78254 0,-2.18658c-0.23668,-0.57138 -1.00272,-0.56541 -1.31195,-0.87463c-0.30923,-0.30922 -0.43732,-0.43731 -1.74926,-1.74926l0,-0.87463l-0.43732,0l0,-0.43732" id="svg_2" stroke="#007f00" fill="#44b544" stroke-width="0"/>
-    <path d="m5.66773,37.0452c1.12973,-0.3645 0.87463,-0.2187 1.74927,-0.656c0.87463,-0.4373 1.34081,-0.8211 2.18658,-1.3119c1.36372,-0.7915 1.44002,-1.4401 1.74922,-1.7493c0.3093,-0.3092 0.1281,-0.5654 0.4374,-0.8746c0.6184,-0.6185 0.8746,-0.4374 1.7492,-1.312c0.8747,-0.8746 1.0027,-1.0027 1.312,-1.3119c0.6184,-0.6185 0.1281,-1.0028 0.4373,-1.312c0.3092,-0.3092 0,-0.8746 0,-1.3119c0,-0.4374 0,-1.312 0,-1.7493c0,-0.4373 0.2009,-1.7727 0,-2.6239c-0.2247,-0.9517 -0.1281,-1.4401 -0.4373,-1.7493c-0.3093,-0.3092 -0.7073,-1.3452 -0.8746,-1.7492c-0.2367,-0.5714 -0.8747,-0.8747 -0.8747,-1.312c0,-0.4373 -0.4373,-0.4373 -0.4373,-0.8746l0,-0.4374l-1.2026,-0.8746c-3.7901,5.8674 -6.81486,11.6253 -5.79446,21.2099l-0.00001,0z" id="svg_3" stroke="#007f00" fill="#44b544" stroke-width="0"/>
-    <path d="m52.2419,13.1021c-0.4373,0.4373 -1.3495,0.8398 -2.1866,1.0933c-3.0182,0.9138 -3.2212,2.2857 -3.4985,2.6239c-1.4137,1.7245 -2.4979,1.3039 -4.8105,1.7493c-0.4294,0.0827 -0.4373,0.4373 -0.8746,0.4373c-0.4373,0 -0.8746,0 -1.312,0c-0.4373,0 -1.3119,0 -1.7492,0c-0.4373,0 -1.3453,-0.27 -1.7493,-0.4373c-0.5714,-0.2367 -0.5654,-0.5654 -0.8746,-0.8747c-0.3092,-0.3092 -0.5654,-0.1281 -0.8746,-0.4373c-0.3093,-0.3092 -0.8747,0 -1.312,0c-0.4373,0 -0.9079,-0.1673 -1.3119,0c-0.5714,0.2367 -0.3033,1.0753 -0.8747,1.312c-0.404,0.1673 -0.1281,0.5654 -0.4373,0.8746c-0.3092,0.3092 -0.4373,0.4373 -0.4373,0.8746c0,0.4373 0,0.8747 0,1.312c0,0.4373 0.0333,0.7073 0.4373,0.8746c0.5714,0.2367 0.638,0.7406 0.8746,1.312c0.1674,0.404 0.4374,0.4373 0.4374,0.8746c0,0.4373 0,0.8746 0,1.3119c0,0.4374 -0.4374,0.4374 -0.8747,0.8747c-1.3119,1.3119 -1.9499,1.1779 -2.1865,1.7492c-0.1674,0.4041 -1.0753,0.3033 -1.312,0.8747c-0.1674,0.404 0,0.8746 0.4373,0.8746c0.4373,0 0.8746,0.4373 1.312,0.4373c0.4373,0 0.8746,-0.4373 1.3119,-0.4373c0.4373,0 0.5654,-0.1281 0.8746,-0.4373c0.6185,-0.6185 1.312,0 1.7493,0c0.4373,0 0.397,-0.6543 2.1866,-0.8747c0.434,-0.0534 2.8801,-0.2561 3.4985,-0.8746c0.3093,-0.3092 0.8343,-0.6543 2.6239,-0.8746c0.4341,-0.0535 0.8747,0 1.312,0c0.4373,0 0.8746,0.4373 0.8746,0.8746c0,0.4373 0.4373,0.4373 0.4373,0.8746c0,0.4374 0.5654,2.3147 0.8746,2.6239c0.3093,0.3093 0.1281,1.0028 0.4374,1.312c0.3092,0.3092 2.1095,2.8366 3.0612,3.0612c0.4256,0.1005 0.8215,0.2158 2.1866,0.4373c0.4316,0.0701 1.3119,0 1.7492,0c0.4373,0 0.8864,0.1005 1.312,0c0.9517,-0.2246 1.44,-0.5654 1.7492,-0.8746c0.3093,-0.3092 0.8747,-0.4373 1.312,-0.4373c0.4373,0 0.5654,-0.5654 0.8746,-0.8746c0.3092,-0.3093 0.8746,0 1.312,0l1.0933,-0.656c1.1661,-7.7259 -2.4782,-14.1399 -7.6531,-20.5539l0,0z" id="svg_4" stroke="#007f00" fill="#44b544" stroke-width="0"/>
-    <path id="svg_6" d="m10.0409,48.3061c2.1137,-0.2187 4.6647,-0.2187 6.3411,1.9679c1.1662,1.5306 1.239,3.7172 0.2186,4.5918c-2.4052,-0.8746 -5.0291,-2.6239 -6.5597,-6.5597l0,0z" stroke="#007f00" fill="#44b544" stroke-width="0"/>
-   </g>
-  </g>
-  <rect transform="rotate(45, 16.9336, 16.9375)" ry="9" rx="9" id="svg_9" height="19.32339" width="29.34293" y="7.27574" x="2.26257" stroke-width="5" stroke="url(#svg_10)" fill="none" stroke-linecap="round"/>
-  <rect id="svg_11" transform="rotate(45, 49.0664, 49.0625)" ry="9" rx="9" height="19.32339" width="29.34293" y="39.40074" x="34.39538" stroke-width="5" stroke="url(#svg_10)" fill="none" stroke-linecap="round"/>
-  <line id="svg_12" y2="45.75" x2="45.75" y1="20.25" x1="20.25" stroke-linecap="round" stroke-width="5" stroke="url(#svg_10)" fill="none"/>
- </g>
-</svg>

src/editor/images/grid.svg

@@ -1,18 +1 @@
-    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4{fill:none;}.cls-1{stroke:#f9ba00;}.cls-1,.cls-2,.cls-3{stroke-miterlimit:10;stroke-width:2px;}.cls-2,.cls-3{stroke:#fff;}.cls-3{stroke-dasharray:2.89 2.89;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><line class="cls-1" x1="11.78" y1="2.3" x2="11.78" y2="41.73"/><line class="cls-1" x1="22.55" y1="2.88" x2="22.51" y2="31.55"/><line class="cls-1" x1="33.32" y1="2.98" x2="33.3" y2="20.51"/><line class="cls-1" x1="44.1" y1="3.08" x2="44.09" y2="9.7"/><line class="cls-1" x1="44.09" y1="9.7" x2="4.62" y2="9.71"/><line class="cls-1" x1="32.91" y1="20.65" x2="4.52" y2="20.62"/><line class="cls-1" x1="22.51" y1="31.57" x2="4.42" y2="31.53"/><line class="cls-1" x1="11.07" y1="42.45" x2="4.32" y2="42.44"/><line class="cls-2" x1="47.76" y1="5.37" x2="46.71" y2="6.44"/><line class="cls-3" x1="44.69" y1="8.5" x2="9.26" y2="44.5"/><line class="cls-2" x1="8.25" y1="45.53" x2="7.19" y2="46.6"/><rect class="cls-4" width="51.04" height="49.47"/></g></g></svg>
-    <g>
-      <rect fill="#ffffff" stroke="#848484" x="2" y="2" width="20" height="20"/>
-      <line fill="none" stroke="#848484" x1="11.84375" y1="-1.53125" x2="11.84375" y2="18.46875" transform="rotate(90, 11.8429, 8.46955)"/>
-      <line fill="none" stroke="#848484" x1="11.90625" y1="5.21875" x2="11.90625" y2="25.21875" transform="rotate(90, 11.9054, 15.2196)"/>
-      <line fill="none" stroke="#848484" x1="8.5" y1="2.03125" x2="8.5" y2="22.03125"/>
-      <line fill="none" stroke="#848484" x1="15.5" y1="2.03125" x2="15.5" y2="22.03125"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.25" y="3.28125" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10" y="3.28125" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.75" y="3.28125" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.28125" y="9.75" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.03125" y="9.75" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.78125" y="9.75" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="3.3125" y="16.59375" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="10.0625" y="16.59375" width="4" height="4"/>
-      <rect fill="#d8d8d8" stroke="#000000" stroke-width="0" x="16.8125" y="16.59375" width="4" height="4"/>
-    </g>
-    </svg>

src/editor/images/group_elements.svg

@@ -1,19 +1 @@
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4,.cls-5,.cls-6{fill:none;}.cls-2{fill:#fff;}.cls-2,.cls-4,.cls-5,.cls-6{stroke:#fff;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#f9ba00;stroke:#f9ba00;}.cls-5{stroke-dasharray:2.98 2.98;}.cls-6{stroke-dasharray:3.17 3.17;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="10.76" y="12.5" width="18.91" height="18.91"/><circle class="cls-3" cx="30.43" cy="28.04" r="10.21"/><polyline class="cls-4" points="46.39 42.15 46.39 43.65 44.89 43.65"/><line class="cls-5" x1="41.91" y1="43.65" x2="7.64" y2="43.65"/><polyline class="cls-4" points="6.15 43.65 4.65 43.65 4.65 42.15"/><line class="cls-6" x1="4.65" y1="38.99" x2="4.65" y2="8.9"/><polyline class="cls-4" points="4.65 7.32 4.65 5.82 6.15 5.82"/><line class="cls-5" x1="9.13" y1="5.82" x2="43.4" y2="5.82"/><polyline class="cls-4" points="44.89 5.82 46.39 5.82 46.39 7.32"/><line class="cls-6" x1="46.39" y1="10.48" x2="46.39" y2="40.57"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_90" x1="0" y1="0" x2="1" y2="1">
-   <stop offset="0" stop-color="#ccddff" stop-opacity="1"/>
-   <stop offset="1" stop-color="#789fed" stop-opacity="1"/>
-  </linearGradient>
-  <linearGradient id="svg_92" x1="0" y1="0" x2="1" y2="1">
-   <stop offset="0" stop-color="#70a1e5" stop-opacity="1"/>
-   <stop offset="1" stop-color="#4b6baf" stop-opacity="1"/>
-  </linearGradient>
- </defs>
-  <rect x="13.5" y="0.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_79"/>
-  <rect x="13.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_82"/>
-  <rect x="0.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_83"/>
-  <rect x="2.5" y="2.5" width="8" height="7" fill="#a0a0a0" stroke="#555555" id="svg_85"/>
-  <rect x="2.5" y="2.5" width="8" height="7" fill="url(#svg_90)" stroke="url(#svg_92)" id="svg_87"/>
-  <rect x="5.5" y="6.5" width="8" height="7" id="svg_84" fill="#7399d6" stroke="url(#svg_92)"/>
-  <rect x="0.5" y="0.5" width="2" height="2" id="svg_78" fill="#a0a0a0" stroke="#555555"/>
- </svg>

src/editor/images/handle.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.76 14.3"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M9.14,8.5l-.36-5A1.62,1.62,0,0,1,8.83,3a1.33,1.33,0,0,1,.28-.42,1.23,1.23,0,0,1,.59-.34.52.52,0,0,1,.49.1.88.88,0,0,1,.14.51l.52,7.42L3.43,9.69a.9.9,0,0,1-.51-.13.52.52,0,0,1-.1-.49,1.26,1.26,0,0,1,.35-.59,1.18,1.18,0,0,1,.42-.29,1.63,1.63,0,0,1,.58,0Z"/><polyline class="cls-2" points="1.97 0 14.76 0 14.76 14.3 0 14.3 0 0 1.97 0"/></g></g></svg>
- <polygon points="5,5 14,10 5,15" fill="#000000" stroke="#000000" stroke-width="5"/>
-</svg>

src/editor/images/image.svg

@@ -1,19 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#fff;}.cls-4{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="2.64" y="10.73" width="44.67" height="27.85"/><circle class="cls-3" cx="13.71" cy="23.94" r="4.46"/><polygon class="cls-4" points="6.6 34.82 15.15 24.61 22.14 29.71 33.63 19.27 43.52 27.05 43.52 34.82 6.6 34.82"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_25">
-   <stop stop-opacity="1" stop-color="#10284c" offset="0"/>
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-  </linearGradient>
-  <linearGradient y2="0.75781" x2="0.99609" y1="0" x1="1" id="svg_23">
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="0"/>
-   <stop stop-opacity="1" stop-color="#97c4ef" offset="1"/>
-  </linearGradient>
- </defs>
-  <rect x="1" y="3.83333" width="22" height="17" id="svg_18" fill="#202020" stroke="none"/>
-  <rect stroke-width="1.2" stroke="#ffffff" fill="#232947" id="svg_15" height="14" width="19" y="5.33333" x="2.5"/>
-  <rect fill="url(#svg_23)" id="svg_20" height="7.02244" width="15.96424" y="6.7266" x="4"/>
-  <rect fill="url(#svg_25)" id="svg_24" height="4.02393" width="15.96303" y="13.77454" x="4"/>
-  <circle fill="#ffffad" id="svg_26" r="1.83333" cy="9.82002" cx="7.13254"/>
-  <path d="m14.5696,13.77458l0.70243,-4.85313l-3.12899,4.85313l2.42656,0z" id="svg_14" fill="#212121" stroke="none"/>
-  <path d="m15.27203,8.98531c2.74584,0.06386 2.42657,4.21456 -0.63857,4.85313c0.70243,-1.27714 1.66028,-3.63985 0.63857,-4.85313z" id="svg_17" fill="#212121" stroke="none"/>
-</svg>

src/editor/images/importImg.svg

@@ -1,10 +1 @@
-<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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#f9ba00;}.cls-2,.cls-3{stroke:#f9ba00;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3{fill:#fff;stroke-width:5px;}.cls-3,.cls-4{stroke-linecap:round;}.cls-4{stroke:#fff;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="32.1 24.74 20.33 18.03 20.33 31.44 32.1 24.74"/><line class="cls-3" x1="23.94" y1="24.74" x2="7.63" y2="24.74"/><path class="cls-4" d="M12.75,19.77v-2A6.84,6.84,0,0,1,19.59,11H32.92a6.84,6.84,0,0,1,6.84,6.84V31.68a6.84,6.84,0,0,1-6.84,6.84H19.59a6.84,6.84,0,0,1-6.84-6.84V29.61"/></g></g></svg>
- <defs>
-  <linearGradient y2="0.875" x2="0.21484" y1="0.00391" x1="0.04297" id="svg_46_import">
-   <stop stop-opacity="1" stop-color="#81f4bb" offset="0"/>
-   <stop stop-opacity="1" stop-color="#37b76e" offset="1"/>
-  </linearGradient>
- </defs>
- <rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
-    <path stroke="#285582" fill="url(#svg_46_import)" id="svg_45" d="m7.14286,12.74903l5.21236,5.79151l5.50193,-5.88803l-2.50965,-0.09653l0,-2.79923c0,-2.3166 -2.3166,-5.59846 -6.56371,-5.59846c-4.05405,0 -6.27413,3.37838 -6.56371,6.75676c0.48263,-1.5444 2.7027,-4.53668 4.44015,-4.44015c2.12355,-0.09653 2.79923,1.64093 2.79923,3.37838l0.09653,2.79923l-2.41313,0.09653z"/>
-</svg></svg>

src/editor/images/library.svg

@@ -1,10 +1 @@
-<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="0 0 201 211">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#fff;}.cls-3{fill:#f9ba00;}.cls-4{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><circle class="cls-2" cx="19.34" cy="24.42" r="4.86"/><polygon class="cls-3" points="37.37 36.3 13.55 36.3 13.55 33.94 20.91 25.15 28.54 30.72 37.43 22.65 37.37 36.3"/><polyline class="cls-4" points="5.88 18 25.52 7.9 45.16 18"/><line class="cls-4" x1="5.88" y1="41.88" x2="45.16" y2="41.88"/><line class="cls-4" x1="9.6" y1="20.67" x2="9.6" y2="37.41"/><line class="cls-4" x1="41.37" y1="20.67" x2="41.37" y2="37.41"/></g></g></svg>
- <g>
-  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m2.75,49.51761l56.56,-46.26761c12.73,8.25 25.71001,7 46.44,0.75l-56.03999,47.23944l-22.72002,25.01056l-24.23999,-26.73239z" id="svg_2" stroke-width="7"/>
-  <path fill="#a03333" stroke="#3f3f3f" d="m3.75,203.25002c14.33301,7 30.66699,7 46,0l0,-152.00002c-14.66699,8 -32.33301,8 -47,0l1,152.00002zm45.75,-152.25002l56.25,-46.75l0,151l-56,48.00002m-47.25,-154.25002l57.25,-46.5" id="svg_1" stroke-width="7" stroke-linecap="round"/>
-  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m49.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_5"/>
-  <path fill="#2f8e2f" stroke="#3f3f3f" d="m50.75,202.25c14.33301,7 30.66699,7.04253 46,0.04253l0,-151.04253c-14.66699,8 -32.33301,8 -47,0l1,151zm45.75,-151.25l56.25,-46.75l0,144.01219l-56,51.98782m-47.25,-151.25002l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_6"/>
-  <path fill="#efe8b8" stroke="#d6c47c" stroke-linecap="round" d="m95.75,49.51801l56.56,-46.26801c12.72998,8.25 25.71002,7 46.44,0.75l-56.03998,47.239l-22.72003,25.011l-24.23999,-26.73199z" stroke-width="7" id="svg_10"/>
-  <path fill="#336393" stroke="#3f3f3f" d="m96.75,200.29445c14.33301,7 30.66699,7 46,0l0,-149.04445c-14.66699,8 -32.33301,8 -47,0l1,149.04445zm45.75,-149.29445l56.25,-46.75l0,148.04445l-56,48m-47.25,-151.29445l57.25,-46.5" stroke-width="7" stroke-linecap="round" id="svg_11"/>
- </g>
-</svg></svg>

src/editor/images/linecap_butt.svg

@@ -1,14 +1 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="13.37" y="15.26" width="23.98" height="18.95"/><rect class="cls-3" x="35.51" y="22.4" width="4.67" height="4.67"/><line class="cls-4" x1="36.82" y1="24.78" x2="12.39" y2="24.78"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
-   <stop offset="0" stop-color="#000000" stop-opacity="1"/>
-   <stop offset="1" stop-color="#000000" stop-opacity="0"/>
-  </linearGradient>
- </defs>
- <g>
-  <rect fill="url(#svg_8)" stroke="#a0a0a0" stroke-width="2" x="-15.20196" y="43.5974" width="94.8373" height="50.3728" id="svg_3" transform="rotate(-45, 32.2148, 68.7832)"/>
-  <path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#fddb8c" fill="none"/>
-  <path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke="none" fill="#fddb8c"/>
- </g>
-</svg>

src/editor/images/linecap_round.svg

@@ -1,14 +1 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="13.23" y="15.26" width="15.82" height="18.95"/><ellipse class="cls-2" cx="29.04" cy="24.74" rx="9.68" ry="9.48"/><rect class="cls-3" x="26.71" y="22.4" width="4.67" height="4.67"/><line class="cls-4" x1="30.36" y1="24.78" x2="12.24" y2="24.78"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
-   <stop stop-opacity="1" stop-color="#000000" offset="0"/>
-   <stop stop-opacity="0" stop-color="#000000" offset="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <path transform="rotate(-45, 41.5117, 59.4648)" id="svg_3" d="m-19.0679,34.2946l94.8359,0c36.499,-1.4142 33.67101,48.9569 0,50.3711l-94.8359,0l0,-50.3711z" stroke-width="2" stroke="#a0a0a0" fill="url(#svg_8)"/>
-  <path id="svg_1" d="m6.63133,95.07755l59.17515,-59.17515" stroke-width="3" stroke="#fddb8c" fill="none"/>
-  <path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke="none" fill="#fddb8c"/>
- </g>
-</svg>

src/editor/images/linecap_square.svg

@@ -1,14 +1 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="14.02" y="14.98" width="23.98" height="18.95"/><rect class="cls-3" x="27.5" y="22.12" width="4.67" height="4.67"/><line class="cls-4" x1="31.16" y1="24.51" x2="13.04" y2="24.51"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
-   <stop offset="0" stop-color="#000000" stop-opacity="1"/>
-   <stop offset="1" stop-color="#000000" stop-opacity="0"/>
-  </linearGradient>
- </defs>
- <g>
-  <rect fill="url(#svg_8)" stroke="none" x="-18.51568" y="35.5974" width="117.46469" height="50.3728" id="svg_3" transform="rotate(-45, 40.2168, 60.7832)"/>
-  <path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#fddb8c" fill="none"/>
-  <path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke="none" fill="#fddb8c"/>
- </g>
-</svg>

src/editor/images/linejoin_bevel.svg

@@ -1,14 +1 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="23.76" y="24.41" width="11.45" height="18.95" transform="translate(-4.4 63.38) rotate(-90)"/><polygon class="cls-2" points="38.96 30.44 11.01 30.44 11.01 11.49 27.71 11.49 38.96 22.5 38.96 30.44"/><rect class="cls-3" x="27.15" y="18.63" width="4.67" height="4.67"/><line class="cls-4" x1="29.49" y1="21.01" x2="10.06" y2="21.01"/><line class="cls-4" x1="29.49" y1="40.69" x2="29.49" y2="21.01"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
-   <stop stop-opacity="1" stop-color="#000000" offset="0"/>
-   <stop stop-opacity="0" stop-color="#000000" offset="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <path stroke-linejoin="bevel" fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
-  <path transform="rotate(90, 57.8925, 50.2519)" fill="#fddb8c" stroke="none" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
-  <path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#fddb8c" fill="none"/>
- </g>
-</svg>

src/editor/images/linejoin_miter.svg

@@ -1,14 +1 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="14.47" y="16.4" width="28.13" height="18.95" transform="translate(2.66 54.41) rotate(-90)"/><rect class="cls-2" x="10.05" y="11.81" width="27.96" height="18.95"/><rect class="cls-3" x="26.2" y="18.95" width="4.67" height="4.67"/><line class="cls-4" x1="28.53" y1="21.33" x2="9.1" y2="21.33"/><line class="cls-4" x1="28.53" y1="41.01" x2="28.53" y2="21.33"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
-   <stop stop-opacity="1" stop-color="#000000" offset="0"/>
-   <stop stop-opacity="0" stop-color="#000000" offset="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <path fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
-  <path transform="rotate(90, 57.8925, 50.2519)" fill="#fddb8c" stroke="none" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
-  <path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#fddb8c" fill="none"/>
- </g>
-</svg>

src/editor/images/linejoin_round.svg

@@ -1,14 +1 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4{fill:#fff;stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><ellipse class="cls-2" cx="30.29" cy="21.27" rx="9.68" ry="9.48"/><rect class="cls-2" x="21.2" y="21.1" width="18.6" height="18.95" transform="translate(-0.07 61.07) rotate(-90)"/><rect class="cls-2" x="12.02" y="11.75" width="18.48" height="18.95"/><rect class="cls-3" x="28.16" y="18.89" width="4.67" height="4.67"/><line class="cls-4" x1="30.5" y1="21.27" x2="11.07" y2="21.27"/><line class="cls-4" x1="30.5" y1="40.95" x2="30.5" y2="21.27"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit -->
- <defs>
-  <linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
-   <stop stop-opacity="1" stop-color="#000000" offset="0"/>
-   <stop stop-opacity="0" stop-color="#000000" offset="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <path stroke-linejoin="round" fill="none" stroke="url(#svg_8)" stroke-width="49" d="m-15,-35l75,85l-75,75" id="svg_6"/>
-  <path transform="rotate(90, 57.8925, 50.2519)" fill="#fddb8c" stroke="none" d="m44.83592,50.25187l13.05661,-13.05663l13.05661,13.05663l-13.05661,13.05662l-13.05661,-13.05662z" id="svg_2"/>
-  <path id="svg_4" d="m-15,-35l75,85l-75,75" stroke-width="3" stroke="#fddb8c" fill="none"/>
- </g>
-</svg>

src/editor/images/logo.svg

@@ -1,32 +1 @@
-<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 50.52"><defs><style>.cls-1,.cls-3,.cls-5{fill:none;}.cls-2{fill:#f9ba00;}.cls-3,.cls-5{stroke:#fff;stroke-width:2px;}.cls-3{stroke-linecap:round;stroke-linejoin:round;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><rect class="cls-1" y="1" width="51.04" height="49.47"/><circle class="cls-2" cx="4.93" cy="36.72" r="2.53"/><circle class="cls-2" cx="8.24" cy="28.61" r="2.53"/><circle class="cls-2" cx="16.24" cy="25.3" r="2.53"/><circle class="cls-2" cx="27.58" cy="36.64" r="2.53"/><circle class="cls-2" cx="24.3" cy="44.67" r="2.53"/><circle class="cls-2" cx="16.24" cy="47.99" r="2.53"/><circle class="cls-2" cx="8.24" cy="44.67" r="2.53"/><rect class="cls-2" x="6.34" y="38.33" width="13" height="3.49" transform="translate(-24.58 20.82) rotate(-45.01)"/><rect class="cls-2" x="14.5" y="25.3" width="3.49" height="22.68"/><rect class="cls-2" x="14.52" y="25.29" width="3.49" height="22.71" transform="translate(-21.14 22.23) rotate(-44.99)"/><rect class="cls-2" x="4.93" y="34.95" width="22.45" height="3.49" transform="translate(-0.08 0.03) rotate(-0.12)"/><line class="cls-3" x1="38.49" y1="10.3" x2="22.88" y2="29.54"/><polyline class="cls-3" points="37.65 1 18.31 25 16.01 38.25 28.21 33.38 47.74 9.13"/><path class="cls-4" d="M17,32.82a3.88,3.88,0,0,1,2.93.57,3.54,3.54,0,0,1,1.58,2.68L16,38.25Z"/><path class="cls-5" d="M19.11,24.67a15.65,15.65,0,0,0,3.77,4.87,18.57,18.57,0,0,0,5.7,2.94"/><path class="cls-5" d="M34.22,4.32a16.7,16.7,0,0,0,4,5.15,19.8,19.8,0,0,0,6.11,3.09"/><path class="cls-3" d="M48,8.8a18.54,18.54,0,0,1-5.7-2.93A33.51,33.51,0,0,1,37.64,1S42,2.18,43.87,3.68A24.51,24.51,0,0,1,48,8.8Z"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
-   <stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
-   <stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
-  </linearGradient>
-  <linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
-   <stop offset="0" stop-color="#f9bc01" stop-opacity="1"/>
-   <stop offset="1" stop-color="#ffff00"/>
-  </linearGradient>
-  <linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
-   <stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
-   <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <title>Layer 1</title>
-  <path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
-  <path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
-  <path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="#ffffff" stroke-width="0"/>
-  <path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="#ffffff" stroke-width="0"/>
-  <rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
-  <rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
-  <ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="#ffffff" stroke-width="0" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
-  <path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="#ffffff" stroke-width="0"/>
-  <path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="#ffffff" stroke-width="0"/>
- </g>
- <g>
-  <title>Layer 2</title>
-  <path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
- </g>
-</svg>

src/editor/images/move_bottom.svg

@@ -1,14 +1 @@
-<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:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="8.38" y="16.74" width="24.79" height="24.79"/><rect class="cls-3" x="17.88" y="7.94" width="24.79" height="24.79"/></g></g></svg>
- <defs>
-  <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_80">
-   <stop stop-opacity="1" stop-color="#bc7f05" offset="0"/>
-   <stop stop-opacity="1" stop-color="#fcfc9f" offset="1"/>
-  </linearGradient>
- </defs>
-  <line stroke-width="2" fill="none" stroke="#000000" id="svg_72" y2="2.5" x2="22" y1="2.5" x1="10.5"/>
-  <line id="svg_73" stroke-width="2" fill="none" stroke="#000000" y2="6.5" x2="21.99844" y1="6.5" x1="10.49844"/>
-  <line id="svg_74" stroke-width="2" fill="none" stroke="#000000" y2="10.5" x2="21.99922" y1="10.5" x1="10.49922"/>
-  <line id="svg_75" stroke-width="2" fill="none" stroke="#000000" y2="14.5" x2="21.99922" y1="14.5" x1="10.49922"/>
-  <rect stroke="#000000" fill="url(#svg_80)" id="svg_77" height="2.2" width="20" y="17.65" x="1.65"/>
-  <path stroke="none" fill="#000000" id="svg_81" d="m4.25,1.55l2.35,0l0,11.05l2,0l-3.175,3.45l-3.175,-3.45l2,0l0,-11.05z"/>
- </svg></svg>

src/editor/images/move_top.svg

@@ -1,14 +1 @@
-<svg viewBox="0 0 23 23" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;}.cls-2,.cls-3{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#f9ba00;stroke:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="17.79 32.73 17.79 16.74 8.29 16.74 8.29 41.54 33.08 41.54 33.08 32.73 17.79 32.73"/><rect class="cls-3" x="17.79" y="7.94" width="24.79" height="24.79"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_86" x1="0" y1="0" x2="1" y2="0">
-   <stop offset="0" stop-color="#9fdcf4" stop-opacity="1"/>
-   <stop offset="1" stop-color="#617e96" stop-opacity="1"/>
-  </linearGradient>
- </defs>
-  <line x1="1.3" y1="8.19922" x2="12.8" y2="8.19922" id="svg_72" stroke="#000000" fill="none" stroke-width="2"/>
-  <line x1="1.29844" y1="12.19922" x2="12.79844" y2="12.19922" stroke="#000000" fill="none" stroke-width="2" id="svg_73"/>
-  <line x1="1.29922" y1="16.19922" x2="12.79922" y2="16.19922" stroke="#000000" fill="none" stroke-width="2" id="svg_74"/>
-  <line x1="1.29922" y1="20.19922" x2="12.79922" y2="20.19922" stroke="#000000" fill="none" stroke-width="2" id="svg_75"/>
-  <rect x="1.55" y="1.85" width="20" height="3.2" id="svg_77" fill="url(#svg_86)" stroke="#000000"/>
-  <path d="m16.83475,21.14603l2.33207,0l0,-11.04578l1.98474,0l-3.15077,-3.44869l-3.15077,3.44869l1.98474,0l0,11.04578z" id="svg_81" fill="#000000" stroke="none"/>
- </svg>

src/editor/images/new.svg

@@ -1,10 +1 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{fill:#fff;}.cls-4{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="10.69 5.76 10.69 42.83 40.64 42.83 40.64 15.88 30.41 5.76 10.69 5.76"/><polyline class="cls-2" points="30.41 5.76 30.41 15.88 40.64 15.88"/><circle class="cls-3" cx="19.5" cy="26.69" r="4.8"/><polygon class="cls-4" points="37.31 38.43 13.78 38.43 13.78 36.1 21.05 27.41 28.59 32.92 37.37 24.94 37.31 38.43"/></g></g></svg>
-  <rect x="2.42792" y="1.6692" width="18" height="21" id="svg_55" fill="#eaeaea" stroke="#606060"/>
-  <circle stroke="none" fill="url(#svg_9)" id="svg_65" r="6.300781" cy="7.529969" cx="17.761984"/>
- <defs>
-  <radialGradient id="svg_9" cx="0.5" cy="0.5" r="0.5">
-   <stop offset="0.1" stop-color="#ffe500" stop-opacity="1"/>
-   <stop offset="1" stop-color="#ffff00" stop-opacity="0"/>
-  </radialGradient>
- </defs>
-</svg>

src/editor/images/open.svg

@@ -1,15 +1 @@
-<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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3{stroke:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polyline class="cls-2" points="9.92 16.79 3.54 43.73 3.54 11.62 9.07 11.62 11.56 5.74 21.7 5.74 23.68 11.62 43.82 11.62 43.82 16.79"/><polygon class="cls-3" points="3.54 43.73 9.92 16.79 49.04 16.79 43.82 43.73 3.54 43.73"/></g></g></svg>
- <defs>
-  <linearGradient y2="0.91406" x2="0.65234" y1="0.14063" x1="0.42578" id="svg_76">
-   <stop stop-opacity="1" stop-color="#81bbf4" offset="0"/>
-   <stop stop-opacity="1" stop-color="#376eb7" offset="1"/>
-  </linearGradient>
- </defs>
-  <rect x="1.65" y="3.75" width="9.8" height="16.72712" id="svg_98" fill="#fddb8c" stroke="#606060"/>
-  <rect stroke="none" fill="#a0a0a0" id="svg_88" height="14.17459" width="6.39585" y="4.9758" x="2.89542"/>
-  <path d="m18.62576,4.54365l0,6.91443l-9.9395,0l-0.08643,-10.11236l6.828,0l3.19792,3.19793z" id="svg_99" fill="#e0e0e0" stroke="#404040"/>
-  <path d="m2.95,20.53644l1.65,-12.03644l16.2,0l-1.5,12l-16.35,0.03643z" id="svg_97" fill="url(#svg_76)" stroke="#285582"/>
-  <line fill="none" stroke="#606060" id="svg_89" y2="4.28436" x2="13.95851" y1="4.28436" x1="10.32844"/>
-  <line fill="none" stroke="#606060" id="svg_91" y2="6.53155" x2="14.82282" y1="6.53155" x1="10.32844"/>
-  <path stroke="none" fill="#ffffff" id="svg_100" d="m15.25895,1.95069l-0.00401,2.85225l2.89558,0.00004l-2.89157,-2.85229z"/>
-</svg></svg>

src/editor/images/panning.svg

@@ -1,8 +1 @@
-
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M21.72,41.87a7.19,7.19,0,0,0-1.81-4.11c-2.8-2.95-6.68-7.1-7.49-8.27-1.29-1.88-3.16-4.88.28-3.72,2.25.76,7,5.31,7.57,4.16,1-1.86-2.86-12.53-3.6-14.67-.82-2.41-.19-3.43-.19-3.43s1.39-1,2.74,1.72c2.09,4.15,4.45,9.33,4.45,9.33s.41-12,.51-13.62.05-2.75,1.61-2.75,1.53,1.24,1.53,3.3,1.16,13.81,1.16,13.81L31.21,11s.64-1.87,2-1.61,1.12,2.23,1.12,2.23L32.64,24.84l4.1-7.15s1.17-1.71,2.13-1.2,0,2.72,0,2.72-3.83,8.57-3.7,9.67,0,2.88.24,5.53c.24,2.82-1.8,5.47-2.08,7.61,0,0-.95,1-4,.94A47.65,47.65,0,0,1,21.72,41.87Z"/></g></g></svg>
-    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
-     <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
-      <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-      <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-    </linearGradient>
-        <path d="m8.00038,150.84583l51.60005,-51.78485l0,25.89205l26.28711,0l35.45559,-0.20444l-0.72941,-24.34613l0.93304,-37.61812l-25.79949,0l51.5997,-51.78508l51.60047,51.78508l-25.80024,0l0,33.87256l1.13677,26.21891l21.45996,2.07722l39.3497,0l0,-25.89205l51.60043,51.78485l-51.60043,51.78563l0,-25.89281l-38.41666,-0.93639l-20.52692,0.20445l-3.00285,42.13754l0,20.76308l25.80024,0l-51.60047,51.78561l-51.5997,-51.78561l25.79949,0l0,-20.76308l0.72941,-41.20115l-41.98688,-0.20445l-20.68886,0l0,25.89281l-51.60005,-51.78563z" fill="url(#svg_2)" id="svg_1" stroke="#000000" stroke-width="10"/>
-    </svg>

src/editor/images/path.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 124" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{fill:none;}.cls-2{stroke:#f9ba00;}.cls-2,.cls-3{stroke-miterlimit:10;}.cls-2,.cls-5{stroke-width:2px;}.cls-3,.cls-5{stroke:#fff;}.cls-4{fill:#fff;}.cls-5{stroke-linejoin:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M31.17,14.1,16.11,7.26a22,22,0,0,1-2.57,12.85C10.83,25,5.48,28.87,5,34.82c-.88,10.86,40.19,9.27,40.19,9.27V20.46L42.7,19.34"/><line class="cls-3" x1="16.27" y1="41.71" x2="25.7" y2="30.27"/><circle class="cls-4" cx="25.7" cy="30.27" r="1.91"/><polyline class="cls-5" points="34.14 7.27 28.72 19.73 19.25 24.49 16.27 41.71 32.14 35.38 35.5 25.27 47.84 15.11"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="0.28125" x1="0.33594" id="svg_4">
-   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-  </linearGradient>
- </defs>
- <path stroke-dasharray="null" stroke-width="4" stroke="#000000" fill="url(#svg_4)" id="svg_1" d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z"/>
-</svg>

src/editor/images/pen.svg

@@ -1,16 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-1{stroke:#fff;}.cls-1,.cls-3{stroke-linejoin:round;stroke-width:2px;}.cls-3{stroke:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="40.2 4.5 22.43 26.57 31.31 34.09 49.09 12.02"/><rect class="cls-2" width="51.04" height="49.47"/><polyline class="cls-1" points="25.01 28.75 22.5 31.86 26.19 34.93 28.68 31.86"/><line class="cls-3" x1="3.75" y1="30.03" x2="35.76" y2="48.47"/><polyline class="cls-1" points="23.52 32.71 20.44 38.35 25.17 34.09"/></g></g></svg>
-   <defs>
-    <linearGradient id="svg_16" x1="0.46484" y1="0.15625" x2="0.9375" y2="0.39453">
-     <stop offset="0" stop-color="#f2feff" stop-opacity="1"/>
-     <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-    </linearGradient>
-    <linearGradient id="svg_19" x1="0.18359" y1="0.26172" x2="0.77734" y2="0.56641">
-     <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
-     <stop offset="1" stop-color="#fce564" stop-opacity="1"/>
-    </linearGradient>
-   </defs>
-    <line x1="0.99844" y1="1.49067" x2="12.97691" y2="21.14149" id="svg_5" stroke="#000000" fill="none"/>
-    <path d="m14.05272,13.68732l-1.46451,7.52632l4.03769,-6.32571" id="svg_6" fill="#a0a0a0" stroke="#000000"/>
-    <path d="m13.61215,10.26563c-0.38567,1.05257 -0.60723,2.40261 -0.50403,3.125l4.33468,1.81452c0.46153,-0.30769 1.6129,-1.71371 1.6129,-2.52016" id="svg_7" fill="url(#svg_19)" stroke="#000000"/>
-    <path d="m16.61335,1.00028l-3.67325,8.60247l7.10285,3.47318l3.17783,-7.20549" id="svg_8" fill="url(#svg_16)" stroke="#000000"/>
-  </svg>

src/editor/images/pencil.svg

@@ -1,12 +1 @@
-<svg viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3,.cls-5{fill:none;}.cls-1{stroke:#f9ba00;}.cls-1,.cls-2{stroke-linejoin:round;}.cls-1,.cls-2,.cls-5{stroke-width:2px;}.cls-2,.cls-5{stroke:#fff;}.cls-4{fill:#fff;}.cls-5{stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M7.14,13.51l3.47,1.17,1,6.14s.09,1.89-1.24,8.47S8.21,41,9.36,41.57s3.72,2.77,5.82,2.48.14-5.55,4-5.55,5.42,4.82,7.2,6.72,8-1.9,8.62-3.36"/><line class="cls-2" x1="44.72" y1="8.14" x2="29.2" y2="27.42"/><polyline class="cls-2" points="40.44 4.14 22.66 26.21 20.6 38.09 31.55 33.72 49.33 11.65"/><rect class="cls-3" width="51.04" height="49.47"/><path class="cls-4" d="M21.45,33.22s1.72-1.35,3.16-.48.88,3.4.88,3.4l-4.89,2Z"/><path class="cls-5" d="M22.66,26.21s4.38-.55,6.54,1.21,2.35,6.3,2.35,6.3"/></g></g></svg>
-  <defs>
-   <linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
-    <stop offset="0.0" stop-color="#fddb8c" stop-opacity="1"/>
-    <stop offset="1.0" stop-color="#fddb8c" stop-opacity="1"/>
-   </linearGradient>
-  </defs>
-  <path d="M31.5,0 l-8.75,20.25 l0.75,24 l16.5,-16.5 l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2" fill-opacity="1" stroke-opacity="1"/>
-  <path d="M39.5,28.5 c-2,-9.25 -10.25,-11.75 -17,-7.4375 l0.4843,24.4414z" id="svg_10" fill="#fddb8c" stroke="#000000" stroke-width="2" fill-opacity="1" stroke-opacity="1"/>
-  <path d="M26.9318,41.1745 c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905 l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" fill-opacity="1" stroke-opacity="1" id="svg_11"/>
-  <path d="M2.3132,4.6197 c12.4998,-1.6891 10.4729,7.0945 0,21.6215 c22.9729,-4.0539 12.1620,5.4053 12.1620,13.1756 c-0.3377,4.0539 8.7836,21.9594 26.0135,-1.3513" id="svg_12" fill="none" stroke="#000000" stroke-width="2" fill-opacity="1" stroke-opacity="1"/>
-</svg>

src/editor/images/polygon.svg

@@ -1,9 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -2 25 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-1{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polygon class="cls-1" points="25.93 8.86 9.51 20.8 15.78 40.11 36.09 40.11 42.36 20.8 25.93 8.86"/><polyline class="cls-2" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/></g></g></svg>
-    <defs>
-    <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_i22">
-      <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-      <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-    </linearGradient>
-    </defs>
-    <polygon points="6.09251,19.6032 0.577744,10.0516 6.09251,0.5 17.1217,0.5 22.6365,10.0516 17.1217,19.6032" stroke="#000000" fill="url(#svg_i22)"/>
-</svg>

src/editor/images/rect.svg

@@ -1,9 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-1{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><rect class="cls-1" x="7.14" y="18.78" width="37.59" height="20.31"/><polyline class="cls-2" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
-   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-   <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-  </linearGradient>
- </defs>
-  <rect transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#000000" fill="url(#svg_2)" id="svg_1" height="12" width="20" y="5.5" x="1.5"/>
- </svg>

src/editor/images/redo.svg

@@ -1,9 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-1,.cls-2{stroke:#fff;}.cls-1{stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}.cls-2{fill:#fff;stroke-linejoin:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M21.53,10.79A16.73,16.73,0,1,0,40.85,36.1"/><polygon class="cls-2" points="29.91 7.76 22.14 17.5 17.57 6.04 29.91 7.76"/><rect class="cls-3" width="51.04" height="49.47"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="0" x1="1" id="svg_71">
-   <stop stop-opacity="1" stop-color="#98fc46" offset="0"/>
-   <stop stop-opacity="1" stop-color="#56aa25" offset="1"/>
-  </linearGradient>
- </defs>
-  <path transform="rotate(-90, 12.7299, 11.5526)" d="m9.11294,12.43144l6.54089,6.84566l6.6439,-6.95624l-3.78628,-0.03064l0,-2.61259c-0.04248,-2.62946 -2.75924,-5.5951 -7.79561,-5.77807c-5.17464,0 -7.10734,3.60294 -7.47697,7.11967c0.61604,-1.60771 3.14238,-3.63109 5.36009,-3.53053c2.71053,-0.10056 4.40555,0.59221 4.40555,2.40076l0,2.54198l-3.89159,0z" id="svg_45" fill="url(#svg_71)" stroke="#44aa00"/>
-</svg>

src/editor/images/reorient.svg

@@ -1,10 +1 @@
-<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3,.cls-4,.cls-5{fill:none;}.cls-2{fill:#f9ba00;stroke:#f9ba00;}.cls-2,.cls-3,.cls-4,.cls-5{stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-3,.cls-4,.cls-5{stroke:#fff;}.cls-4{stroke-dasharray:2.98 2.98;}.cls-5{stroke-dasharray:3.17 3.17;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="8.26" y="15.75" width="33.41" height="17.97" transform="translate(22.67 -10.33) rotate(41.53)"/><polyline class="cls-3" points="46.39 42.15 46.39 43.65 44.89 43.65"/><line class="cls-4" x1="41.91" y1="43.65" x2="7.64" y2="43.65"/><polyline class="cls-3" points="6.15 43.65 4.65 43.65 4.65 42.15"/><line class="cls-5" x1="4.65" y1="38.99" x2="4.65" y2="8.9"/><polyline class="cls-3" points="4.65 7.32 4.65 5.82 6.15 5.82"/><line class="cls-4" x1="9.13" y1="5.82" x2="43.4" y2="5.82"/><polyline class="cls-3" points="44.89 5.82 46.39 5.82 46.39 7.32"/><line class="cls-5" x1="46.39" y1="10.48" x2="46.39" y2="40.57"/></g></g></svg>
- <defs>
-  <linearGradient y2="1" x2="1" y1="1" x1="0" id="svg_113">
-   <stop stop-opacity="0" stop-color="#0000ff" offset="0"/>
-   <stop stop-opacity="1" stop-color="#507ece" offset="1"/>
-  </linearGradient>
- </defs>
-  <rect stroke-dasharray="2,2" stroke="#0000ff" fill="none" id="svg_108" height="19.125" width="18.625" y="2.625" x="2.875"/>
-  <rect transform="rotate(45, 12.2344, 12.1719)" stroke="#000000" fill="url(#svg_113)" id="svg_107" height="6.125" width="16" y="9.10848" x="4.23267"/>
-</svg>

src/editor/images/saveImg.svg

@@ -1,16 +1 @@
-<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:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#f9ba00;}.cls-2,.cls-3{stroke:#f9ba00;}.cls-2,.cls-3,.cls-4{stroke-linejoin:round;}.cls-3{fill:#fff;stroke-width:5px;}.cls-3,.cls-4{stroke-linecap:round;}.cls-4{stroke:#fff;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><polygon class="cls-2" points="25.35 32.65 32.05 20.88 18.65 20.88 25.35 32.65"/><line class="cls-3" x1="25.35" y1="24.48" x2="25.35" y2="8.17"/><path class="cls-4" d="M31.61,27.8h6a6.84,6.84,0,0,1,6.84,6.84v-.18a6.84,6.84,0,0,1-6.84,6.84H13.48a6.84,6.84,0,0,1-6.84-6.84v.18a6.84,6.84,0,0,1,6.84-6.84h5.67"/></g></g></svg>
-   <defs>
-    <linearGradient y2="0" x2="1" y1="0" x1="0" id="svg_41">
-     <stop stop-opacity="1" stop-color="#727272" offset="0"/>
-     <stop stop-opacity="1" stop-color="#d6d6d6" offset="1"/>
-    </linearGradient>
-    <linearGradient y2="0.875" x2="0.21484" y1="0.00391" x1="0.04297" id="svg_46">
-     <stop stop-opacity="1" stop-color="#81bbf4" offset="0"/>
-     <stop stop-opacity="1" stop-color="#376eb7" offset="1"/>
-    </linearGradient>
-   </defs>
-     <path stroke="#202020" fill="#e0e0e0" id="svg_21" d="m1.51669,22.3458l21.13245,-0.10111l0,-6.06673l-2.62892,-9.80789l-16.27907,0.10111l-2.32558,9.20121l0.10111,6.67341z"/>
-     <rect stroke="#efefef" fill="url(#svg_41)" id="svg_32" height="4.75108" width="19.21031" y="16.58227" x="2.42667"/>
-     <path stroke="#ffffff" fill="#fddb8c" id="svg_42" d="m4.55005,11.12235l0.70779,-2.83114l13.04348,0l0.70779,3.13448c-0.70779,2.52781 -4.04479,3.84227 -7.17897,3.84227c-2.72977,0 -6.37007,-1.41557 -7.28008,-4.1456z"/>
-    <path stroke="#285582" fill="url(#svg_46)" id="svg_45" d="m7.14286,9.74903l5.21236,5.79151l5.50193,-5.88803l-2.50965,-0.09653l0,-2.79923c0,-2.3166 -2.3166,-5.59846 -6.56371,-5.59846c-4.05405,0 -6.27413,3.37838 -6.56371,6.75676c0.48263,-1.5444 2.7027,-4.53668 4.44015,-4.44015c2.12355,-0.09653 2.79923,1.64093 2.79923,3.37838l0.09653,2.79923l-2.41313,0.09653z"/>
-  </svg></svg>

src/editor/images/select.svg

@@ -1,3 +1 @@
- <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:none;}.cls-2,.cls-3{fill:#fff;stroke:#fff;stroke-linejoin:round;}.cls-2{stroke-linecap:round;stroke-width:5px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><rect class="cls-1" width="51.04" height="49.47"/><line class="cls-2" x1="23.52" y1="22.74" x2="37.81" y2="39.51"/><polygon class="cls-3" points="12.43 8.66 38.14 23.2 26.78 26.32 21.37 36.81 12.43 8.66"/></g></g></svg>
-    <path stroke="#ffffff" fill="#000000" id="svg_13" d="m7.38168,2.46948l0.07502,17.03258l3.30083,-2.62617l2.62566,5.62751l4.20105,-2.62617l-3.30082,-4.80214l4.57614,-0.37517l-11.47787,-12.23044z"/>
-</svg>

src/editor/images/shapelib.svg

@@ -1,12 +1 @@
-    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#fff;}.cls-3{fill:#f9ba00;}.cls-4{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><circle class="cls-2" cx="19.34" cy="24.42" r="4.86"/><polygon class="cls-3" points="37.37 36.3 13.55 36.3 13.55 33.94 20.91 25.15 28.54 30.72 37.43 22.65 37.37 36.3"/><polyline class="cls-4" points="5.88 18 25.52 7.9 45.16 18"/><line class="cls-4" x1="5.88" y1="41.88" x2="45.16" y2="41.88"/><line class="cls-4" x1="9.6" y1="20.67" x2="9.6" y2="37.41"/><line class="cls-4" x1="41.37" y1="20.67" x2="41.37" y2="37.41"/></g></g></svg>
-      <defs>
-        <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
-        <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-        <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-        </linearGradient>
-      </defs>
-      <path fill="url(#svg_2)" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,194.72501l0,0c0,-10.30901 35.8172,-18.666 80,-18.666c44.18298,0 80,8.35699 80,18.666l0,74.66699c0,10.30899 -35.81702,18.66699 -80,18.66699c-44.1828,0 -80,-8.358 -80,-18.66699l0,-74.66699z"/>
-      <path fill="url(#svg_2)" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,114.608l0,0c0,-10.309 35.8172,-18.6668 80,-18.6668c44.18298,0 80,8.3578 80,18.6668l0,74.66699c0,10.30901 -35.81702,18.666 -80,18.666c-44.1828,0 -80,-8.35699 -80,-18.666l0,-74.66699z"/>
-      <path fill="url(#svg_2)" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m70,33.6667l0,0c0,-10.3094 35.8172,-18.6667 80,-18.6667c44.18298,0 80,8.3573 80,18.6667l0,74.6663c0,10.31 -35.81702,18.667 -80,18.667c-44.1828,0 -80,-8.357 -80,-18.667l0,-74.6663z"/>
-      <path id="svg_1" fill="#fddb8c" stroke-linejoin="round" stroke-width="14" stroke="#202020" fill-rule="nonzero" d="m230,32.33334c0,10.30931 -35.81726,18.66666 -80,18.66666c-44.1828,0 -80,-8.35735 -80,-18.66666"/>
-    </svg>

src/editor/images/source.svg

@@ -1,9 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 52">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:#f9ba00;}.cls-2{fill:#fff;}.cls-3{fill:none;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M3,35.15l8.66-.62a2.72,2.72,0,0,1,1,.08,1.92,1.92,0,0,1,.72.5,2,2,0,0,1,.6,1,.84.84,0,0,1-.16.84,1.48,1.48,0,0,1-.89.24L0,38.13.91,25.21a1.55,1.55,0,0,1,.24-.87A.87.87,0,0,1,2,24.16a2.08,2.08,0,0,1,1,.6,1.92,1.92,0,0,1,.5.72,2.72,2.72,0,0,1,.08,1Z"/><path class="cls-1" d="M47.81,14.42l-8.65.63a2.64,2.64,0,0,1-1-.09,1.91,1.91,0,0,1-.73-.49,2.09,2.09,0,0,1-.59-1,.86.86,0,0,1,.17-.85,1.56,1.56,0,0,1,.88-.24l12.91-.91-.91,12.92a1.54,1.54,0,0,1-.23.89.88.88,0,0,1-.85.17,2.37,2.37,0,0,1-1.53-1.33,2.7,2.7,0,0,1-.08-1Z"/><path class="cls-2" d="M7.29,31.13a2.08,2.08,0,0,1-.51.48,1,1,0,0,1-.47.11,1.14,1.14,0,0,1-.88-.37,1.82,1.82,0,0,1-.33-1.22V28.52a1.8,1.8,0,0,1,.33-1.22,1.11,1.11,0,0,1,.88-.37,1.09,1.09,0,0,1,.7.22,1.39,1.39,0,0,1,.44.74,2,2,0,0,0,.31.7,3.66,3.66,0,0,0,1.2.74,4.72,4.72,0,0,0,1.89.37A4.39,4.39,0,0,0,13.47,29a1.29,1.29,0,0,0,.34-2,2.34,2.34,0,0,0-1-.64,14.81,14.81,0,0,0-2.08-.48,11.3,11.3,0,0,1-3-.87,3.88,3.88,0,0,1-1.58-1.45,3.7,3.7,0,0,1-.58-2,3.91,3.91,0,0,1,1.43-3,5.33,5.33,0,0,1,3.72-1.29,6.57,6.57,0,0,1,1.71.21,4.7,4.7,0,0,1,1.43.62,1.36,1.36,0,0,1,.93-.45,1.1,1.1,0,0,1,.85.36A1.81,1.81,0,0,1,16,19.22V21a1.81,1.81,0,0,1-.34,1.23,1.07,1.07,0,0,1-.85.37,1.17,1.17,0,0,1-.77-.27,1.35,1.35,0,0,1-.39-.79,2.12,2.12,0,0,0-.32-.85,2.62,2.62,0,0,0-1-.75,3.81,3.81,0,0,0-1.56-.3,3.19,3.19,0,0,0-2.05.6A1.66,1.66,0,0,0,8,21.5a1.4,1.4,0,0,0,.31.86,2.14,2.14,0,0,0,.9.65,19.87,19.87,0,0,0,2.23.52,14.13,14.13,0,0,1,2.82.79,4,4,0,0,1,1.64,1.35,3.73,3.73,0,0,1,.65,2.19,3.54,3.54,0,0,1-1.25,2.83A6.31,6.31,0,0,1,11,32.09a7.73,7.73,0,0,1-1.93-.24A7.84,7.84,0,0,1,7.29,31.13Z"/><path class="cls-2" d="M25.08,28.26,28.54,20H28a1.85,1.85,0,0,1-1.23-.33,1.22,1.22,0,0,1,0-1.73A1.79,1.79,0,0,1,28,17.61l3.2,0a1.82,1.82,0,0,1,1.23.32,1.09,1.09,0,0,1,.37.86,1.18,1.18,0,0,1-.56,1,2.19,2.19,0,0,1-1.09.18L26.23,31.74H23.94L19.05,20a2.26,2.26,0,0,1-1.11-.18,1.15,1.15,0,0,1-.56-1,1.13,1.13,0,0,1,.37-.86A1.76,1.76,0,0,1,19,17.61l3.22,0a1.8,1.8,0,0,1,1.22.32,1.09,1.09,0,0,1,.37.86,1.12,1.12,0,0,1-.36.87A1.81,1.81,0,0,1,22.2,20h-.56Z"/><path class="cls-2" d="M45.41,27.37v3.2a14.34,14.34,0,0,1-2.75,1.2,9.18,9.18,0,0,1-2.45.32,10,10,0,0,1-3.39-.55,5.41,5.41,0,0,1-1.93-1.06,6.17,6.17,0,0,1-1.3-1.89,6.56,6.56,0,0,1-.59-2.8V24.07a6.77,6.77,0,0,1,1.45-4.27,6.38,6.38,0,0,1,5.33-2.54,8.46,8.46,0,0,1,1.85.2,6.78,6.78,0,0,1,1.67.6,1.41,1.41,0,0,1,.93-.43,1.12,1.12,0,0,1,.86.36,1.86,1.86,0,0,1,.32,1.22v1.55A1.85,1.85,0,0,1,45.08,22a1.12,1.12,0,0,1-.86.36,1.07,1.07,0,0,1-.72-.25,1.54,1.54,0,0,1-.39-.78,1.94,1.94,0,0,0-.35-.81,2.78,2.78,0,0,0-1.12-.6,5.79,5.79,0,0,0-1.78-.26,5.09,5.09,0,0,0-2.47.58A4,4,0,0,0,36,21.74a4.5,4.5,0,0,0-.63,2.33v1.72a3.74,3.74,0,0,0,1.12,2.92,5.22,5.22,0,0,0,3.53,1,7,7,0,0,0,3-.62V27.37H40.59A1.85,1.85,0,0,1,39.36,27a1.13,1.13,0,0,1-.37-.87,1.16,1.16,0,0,1,.37-.87A1.85,1.85,0,0,1,40.59,25l4.24,0a1.85,1.85,0,0,1,1.23.32,1.12,1.12,0,0,1,.36.86,1.14,1.14,0,0,1-.25.74A1.43,1.43,0,0,1,45.41,27.37Z"/><rect class="cls-3" width="51.04" height="49.47"/></g></g></svg>
-  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_40" y="15" x="28.23" font-weight="bold">s</text>
-  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_47" y="30" x="28.23" font-weight="bold">v</text>
-  <text xml:space="preserve" text-anchor="middle" font-family="monospace" font-size="24" stroke="none" fill="#019191" id="svg_48" y="44" x="28.23" font-weight="bold">g</text>
-  <line stroke-width="3" fill="none" stroke="#aa0000" id="svg_51" y2="43" x2="16" y1="25" x1="5"/>
-  <line id="svg_62" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="16" y1="26" x1="5"/>
-  <line id="svg_63" stroke-width="3" fill="none" stroke="#aa0000" y2="43" x2="39" y1="25" x1="50"/>
-  <line id="svg_64" stroke-width="3" fill="none" stroke="#aa0000" y2="8" x2="39" y1="26" x1="51"/>
- </svg>

src/editor/images/square.svg

@@ -1,9 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><rect class="cls-2" x="11.53" y="10.46" width="27.98" height="28.55"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_2" x1="0.36328" y1="0.10156" x2="1" y2="1">
-   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
-   <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-  </linearGradient>
- </defs>
-  <rect x="1.5" y="1.5" width="20" height="20" id="svg_1" fill="url(#svg_2)" stroke="#000000"/>
- </svg>

src/editor/images/star.svg

@@ -1,13 +1 @@
-<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-1{stroke:#f9ba00;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polygon class="cls-1" points="25.89 4.49 32.18 17.24 46.26 19.29 36.07 29.22 38.48 43.23 25.89 36.62 13.3 43.23 15.7 29.22 5.52 19.29 19.59 17.24 25.89 4.49"/><polyline class="cls-2" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/></g></g></svg>
- <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
- <defs>
-    <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
-    <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
-    <stop stop-opacity="1" stop-color="#fddb8c" offset="1"/>
-    </linearGradient>
-</defs>
- <g class="layer">
-  <title>Layer 1</title>
-  <polygon cx="5.35" cy="6.6" fill="url(#svg_2)" id="svg_1" orient="point" point="5" points="11.650000095367432,1.9678797721862793 14.126250267028809,9.091734409332275 21.66664218902588,9.24539589881897 15.656657218933105,13.801841735839844 17.840624809265137,21.02066469192505 11.650000095367432,16.71284818649292 5.459375262260437,21.02066469192505 7.643343567848206,13.801841735839844 1.6333584785461426,9.24539589881897 9.173750400543213,9.091734409332275 11.650000095367432,1.9678797721862793 14.126250267028809,9.091734409332275 " r="10.53212" r2="4.21285" shape="star" stroke="#000000" strokeWidth="5" strokecolor="#000000"/>
- </g>
-</svg>

src/editor/images/text.svg

@@ -1,6 +1 @@
-<svg viewBox="0 0 158 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#f9ba00;}.cls-3{stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M28.27,17.05H23.91V32.58h3.5a3,3,0,0,1,2,.54,2.27,2.27,0,0,1,.6,1.75,2.28,2.28,0,0,1-.6,1.77,2.92,2.92,0,0,1-2,.55H15a2.89,2.89,0,0,1-2-.55,2.28,2.28,0,0,1-.6-1.77,2.29,2.29,0,0,1,.59-1.76,3,3,0,0,1,2-.53h3.5V17.05H14.19l-.13,4.23v.52a2.14,2.14,0,0,1-.55,1.56,2.07,2.07,0,0,1-1.53.56,2.27,2.27,0,0,1-1.72-.59,2.72,2.72,0,0,1-.55-1.89v-.16l.23-6.23c0-1.24.21-2,.51-2.23a3.06,3.06,0,0,1,1.82-.37H30.18a3,3,0,0,1,1.82.37c.3.25.48,1,.53,2.23l.21,6.23v.16a2.8,2.8,0,0,1-.52,1.9,2.16,2.16,0,0,1-1.69.58,2,2,0,0,1-1.61-.57,3.4,3.4,0,0,1-.53-2.07Z"/><polyline class="cls-3" points="37.21 9.9 39.86 14.56 39.86 34.47 37.21 39.57"/><polyline class="cls-3" points="42.51 9.9 39.86 14.56 39.86 34.47 42.51 39.57"/></g></g></svg>
-    <text x="58" y="120" id="svg_1" fill="#fddb8c" stroke-width="6" stroke="#000000" font-size="120pt" font-family="sans-serif" text-anchor="middle" font-weight="bold">A</text>
-    <line x1="136" y1="7" x2="136" y2="121" id="svg_2" stroke="#000000" fill="none" fill-opacity="1" stroke-opacity="1" stroke-width="5"/>
-    <line x1="120" y1="4" x2="152" y2="4" id="svg_3" stroke="#000000" stroke-width="5" fill="none" fill-opacity="1" stroke-opacity="1"/>
-   <line x1="120" y1="124" x2="152" y2="124" stroke="#000000" stroke-width="5" fill="none" fill-opacity="1" stroke-opacity="1" id="svg_4"/>
-</svg>

src/editor/images/to_path.svg

@@ -1,18 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.98 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;}.cls-2,.cls-3{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}.cls-4{fill:#f9ba00;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="7.65 0 51.89 0 51.89 49.47 0.84 49.47 0.84 0 7.65 0"/><polygon class="cls-2" points="4.31 4.03 1 21.66 19.57 24.74 28.59 1.67 13.77 10.83 4.31 4.03"/><polygon class="cls-3" points="25.23 26.73 21.92 44.36 40.49 47.44 49.52 24.37 34.7 33.53 25.23 26.73"/><circle class="cls-4" cx="25.25" cy="27.01" r="2.64"/><circle class="cls-4" cx="34.84" cy="33.27" r="2.64"/><circle class="cls-4" cx="49.34" cy="24.26" r="2.64"/><circle class="cls-4" cx="40.08" cy="46.83" r="2.64"/><circle class="cls-4" cx="21.92" cy="44.19" r="2.64"/></g></g></svg>
- <defs>
-  <linearGradient y2="0.46875" x2="0.42969" y1="0.10156" x1="0.10547" id="svg_105">
-   <stop stop-color="#ff0000" offset="0"/>
-   <stop stop-opacity="0" stop-color="#ff0000" offset="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <circle cx="21" cy="21.3125" r="18.44531" id="svg_120" fill="url(#svg_105)" stroke="#000000"/>
-  <path fill="none" stroke="#000000" d="m2.875,21.3125c-0.375,-9.25 7.75,-18.875 17.75,-18" id="svg_115"/>
-  <line x1="25.375" y1="3.0625" x2="8.5" y2="3.0625" id="svg_116" stroke="#808080" fill="none"/>
-  <line x1="2.625" y1="24.75" x2="2.625" y2="9.8125" id="svg_117" stroke="#808080" fill="none"/>
-  <circle cx="8.5" cy="2.9375" r="1.95313" fill="#fddb8c" stroke="#0000ff" stroke-width="0.5" id="svg_118"/>
-  <circle cx="2.625" cy="9.8125" r="1.95313" fill="#fddb8c" stroke="#0000ff" stroke-width="0.5" id="svg_119"/>
-  <circle cx="20.875" cy="3.1875" r="2.5" id="svg_112" fill="#fddb8c" stroke="#0000ff"/>
-  <circle cx="2.875" cy="21.0625" r="2.5" fill="#fddb8c" stroke="#0000ff" id="svg_114"/>
- </g>
-</svg>

src/editor/images/tool_add_subpath.svg

@@ -1,16 +1 @@
-<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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 124 124">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2{fill:none;}.cls-2{stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}.cls-3{fill:#fff;stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M43.15,17.55l2.47,1.12V42.3S4.55,43.89,5.44,33c.48-6,5.83-9.8,8.55-14.71A22,22,0,0,0,16.56,5.47l15.05,6.84Z"/><line class="cls-3" x1="41.13" y1="33.28" x2="31.88" y2="33.28"/><line class="cls-3" x1="36.51" y1="37.9" x2="36.51" y2="28.65"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_4" x1="0.33594" y1="0.28125" x2="1" y2="1">
-   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
-   <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-  </linearGradient>
- </defs>
- <g>
-  <path d="m6,103l55,-87c85,33.64 -26,37.12 55,87l-110,0z" id="svg_1" fill="url(#svg_4)" stroke="#000000" stroke-width="4" stroke-dasharray="null"/>
-  <g id="svg_7">
-   <circle stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#ffffff" id="svg_6" r="22.63281" cy="88.5" cx="45.5"/>
-   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_2" y2="104.03768" x2="45.5" y1="72.96232" x1="45.5"/>
-   <line stroke-dasharray="null" stroke-width="7" stroke="#000000" id="svg_3" y2="88.5" x2="61.03768" y1="88.5" x1="29.96232"/>
-  </g>
- </g>
- </svg></svg>

src/editor/images/tool_node_clone.svg

@@ -1,8 +1 @@
-<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="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-2,.cls-4{stroke:#fff;}.cls-2{stroke-miterlimit:10;}.cls-3,.cls-5{fill:#fff;}.cls-4,.cls-5{stroke-linejoin:round;}.cls-4{stroke-width:2px;}.cls-5{stroke:#f9ba00;stroke-linecap:round;stroke-width:3px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="7.99" y1="41.95" x2="17.41" y2="30.52"/><circle class="cls-3" cx="17.41" cy="30.52" r="1.91"/><polyline class="cls-4" points="25.86 7.52 20.44 19.98 10.97 24.73 7.99 41.95 23.86 35.62 27.22 25.51 39.56 15.35"/><line class="cls-5" x1="41.77" y1="37.09" x2="32.52" y2="37.09"/><line class="cls-5" x1="37.14" y1="41.71" x2="37.14" y2="32.46"/></g></g></svg>
-  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
-  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="4" cx="19.75"/>
-  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="19.40299" cx="4.0653"/>
-  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="11.625" cx="11.9375"/>
-  <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
-  <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#0000ff" fill="#0000ff"/>
-</svg></svg>

src/editor/images/tool_node_delete.svg

@@ -1,10 +1 @@
-<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="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-4{fill:none;}.cls-2,.cls-4{stroke:#fff;}.cls-2{stroke-miterlimit:10;}.cls-3,.cls-5{fill:#fff;}.cls-4,.cls-5{stroke-linejoin:round;}.cls-4{stroke-width:2px;}.cls-5{stroke:#f9ba00;stroke-linecap:round;stroke-width:3px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="9.53" y1="42.22" x2="18.96" y2="30.78"/><circle class="cls-3" cx="18.96" cy="30.78" r="1.91"/><polyline class="cls-4" points="27.4 7.78 21.98 20.24 12.52 25 9.53 42.22 25.4 35.88 28.76 25.77 41.1 15.62"/><line class="cls-5" x1="43.31" y1="37.35" x2="34.06" y2="37.35"/></g></g></svg>
-  <path stroke-width="2" id="svg_102" d="m4.1953,19.42128c15.49391,-15.53349 -0.21065,0.1581 15.61084,-15.57944" stroke="#8dd35f" fill="none"/>
-  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="4" cx="19.75"/>
-  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="19.40299" cx="4.0653"/>
-  <circle id="svg_7" stroke-width="0.5" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="11.625" cx="11.9375"/>
-  <g transform="rotate(-45.291072845458984 9.81157112121582,9.244086265563965) " id="svg_6">
-   <line stroke-linecap="round" id="svg_4" y2="9.45264" x2="15.14996" y1="9.3943" x1="4.47318" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
-   <line stroke-linecap="round" id="svg_5" y2="14.46579" x2="9.66571" y1="4.02238" x1="9.7824" stroke-dasharray="null" stroke-width="2" stroke="#ff0000" fill="none"/>
-  </g>
-</svg></svg>

src/editor/images/tool_node_link.svg

@@ -1,7 +1 @@
-<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:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-4{fill:none;}.cls-2{fill:#fff;}.cls-2,.cls-5{stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;}.cls-2,.cls-4,.cls-5{stroke-width:2px;}.cls-3,.cls-5{fill:#f9ba00;}.cls-4{stroke:#fff;stroke-miterlimit:10;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="37.69" y1="13.2" x2="7.69" y2="29.44"/><circle class="cls-3" cx="40.46" cy="11.93" r="2.68"/><circle class="cls-3" cx="5.68" cy="30.67" r="2.68"/><path class="cls-4" d="M8.36,43.05C9.92,32,15,22.86,25.71,20.71c7.29-1.46,16.17,2.38,18.88,5.77"/><rect class="cls-5" x="19.27" y="19.38" width="4.67" height="4.67" transform="translate(43.32 0.12) rotate(90)"/></g></g></svg>
-  <path stroke-width="2" id="svg_102" d="m9.875,23c-2,-4.25 -1.6875,-7.375 1.6875,-10.5c3.375,-3.125 7.5625,-2.75 11.0625,2" stroke="#8dd35f" fill="none"/>
-  <line fill="none" stroke="#606060" id="svg_109" y2="4" x2="19" y1="19" x1="4"/>
-  <circle stroke="#0000ff" fill="#fddb8c" id="svg_111" r="2.17578" cy="11.5" cx="11.5"/>
-  <circle stroke-width="0.5" id="svg_121" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="4" cx="19"/>
-  <circle id="svg_123" stroke-width="0.5" stroke="#0000ff" fill="#fddb8c" r="2.26172" cy="19" cx="4"/>
-</svg></svg>

src/editor/images/tool_openclose_path.svg

@@ -1,17 +1 @@
-<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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-2,.cls-3{stroke:#fff;stroke-miterlimit:10;}.cls-2,.cls-3,.cls-4{stroke-width:2px;}.cls-3{stroke-dasharray:3.21 3.21;}.cls-4{fill:#f9ba00;stroke:#f9ba00;stroke-linecap:round;stroke-linejoin:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><path class="cls-2" d="M44.28,20.65V44.28S3.22,45.87,4.1,35c.48-5.95,5.83-9.8,8.55-14.71A22,22,0,0,0,15.22,7.45"/><line class="cls-2" x1="15.22" y1="7.45" x2="16.59" y2="8.07"/><polyline class="cls-3" points="19.51 9.4 30.28 14.29 41.46 19.37"/><line class="cls-2" x1="42.92" y1="20.03" x2="44.28" y2="20.65"/><rect class="cls-4" x="41.95" y="18.32" width="4.67" height="4.67"/><rect class="cls-4" x="12.57" y="5.11" width="4.67" height="4.67"/></g></g></svg>
- <g>
-  <path stroke="#000" stroke-width="15" fill="#fddb8c" d="m123.5,38l-84,106l27,115l166,2l29,-111"/>
-  <line x1="276.5" y1="153" x2="108.5" y2="24" stroke="#000" stroke-width="10" fill="none"/>
-  <g stroke-width="15" stroke="#00f" fill="#0ff">
-   <circle r="30" cy="41" cx="123"/>
-   <circle r="30" cy="146" cx="40"/>
-   <circle r="30" cy="260" cx="69"/>
-   <circle r="30" cy="260" cx="228"/>
-   <circle r="30" cy="148" cx="260"/>
-  </g>
-  <g stroke="#A00" stroke-width="15" fill="none">
-   <line x1="168" y1="24" x2="210" y2="150"/>
-   <line x1="210" y1="24" x2="168" y2="150"/>
-  </g>
- </g>
-</svg></svg>

src/editor/images/undo.svg

@@ -1,9 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-3{fill:none;}.cls-1,.cls-2{stroke:#fff;}.cls-1{stroke-linecap:round;stroke-miterlimit:10;stroke-width:4px;}.cls-2{fill:#fff;stroke-linejoin:round;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M30.81,10.68A16.72,16.72,0,1,1,11.49,36"/><polygon class="cls-2" points="22.43 7.64 30.2 17.38 34.77 5.93 22.43 7.64"/><rect class="cls-3" width="51.04" height="49.47"/></g></g></svg>
- <defs>
-  <linearGradient id="svg_66" x1="0.04297" y1="0.00391" x2="0.21484" y2="0.875">
-   <stop offset="0" stop-color="#f7f963" stop-opacity="1"/>
-   <stop offset="1" stop-color="#d3c310" stop-opacity="1"/>
-  </linearGradient>
- </defs>
-  <path transform="rotate(-90, 10.3017, 11.5526)" d="m6.70188,10.72562l6.55493,-7.13388l6.65817,7.24912l-3.79441,0.03193l0,2.72259c-0.04257,2.74017 -2.76516,5.83068 -7.81235,6.02135c-5.18575,0 -7.1226,-3.75464 -7.49302,-7.41944c0.61736,1.6754 3.14913,3.78397 5.3716,3.67918c2.71635,0.1048 4.41501,-0.61714 4.41501,-2.50184l0,-2.64901l-3.89995,0z" id="svg_45" fill="url(#svg_66)" stroke="#b7a800"/>
-</svg>

src/editor/images/wireframe.svg

@@ -1,4 +1 @@
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1{fill:#f9ba00;stroke:#f9ba00;}.cls-1,.cls-2,.cls-4{stroke-miterlimit:10;}.cls-2,.cls-4,.cls-5{fill:none;}.cls-2,.cls-4{stroke:#fff;stroke-width:2px;}.cls-3{fill:#fff;}.cls-4{stroke-dasharray:2.89 2.89;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path class="cls-1" d="M12.77,36.19A16.27,16.27,0,1,1,33.26,15.52"/><path class="cls-2" d="M33.26,15.52A16.29,16.29,0,0,1,12.77,36.19"/><polyline class="cls-2" points="32.2 16.55 50.04 16.55 50.04 46.42 20.18 46.42 20.18 28.77"/><polyline class="cls-3" points="20.18 29.06 20.18 16.55 32.2 16.55"/><line class="cls-2" x1="44.97" y1="3.57" x2="43.92" y2="4.64"/><line class="cls-4" x1="41.89" y1="6.7" x2="6.47" y2="42.7"/><line class="cls-2" x1="5.46" y1="43.73" x2="4.4" y2="44.8"/><rect class="cls-5" width="51.04" height="49.47"/></g></g></svg>
-  <circle stroke="#000000" fill="none" id="svg_49" r="8" cy="9.5" cx="9.5"/>
-  <rect stroke="#000000" fill="none" id="svg_52" height="14" width="14" y="8.5" x="8.5"/>
-</svg>

src/editor/images/zoom.svg

@@ -1,12 +1 @@
-<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.04 49.47"><defs><style>.cls-1,.cls-2,.cls-3{fill:none;}.cls-2,.cls-3{stroke:#fff;stroke-miterlimit:10;}.cls-2{stroke-linecap:round;stroke-width:5px;}.cls-3{stroke-width:2px;}</style></defs><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><polyline class="cls-1" points="6.8 0 51.04 0 51.04 49.47 0 49.47 0 0 6.8 0"/><line class="cls-2" x1="31.92" y1="30.64" x2="41.34" y2="40.61"/><path class="cls-3" d="M33.77,20.34A11.49,11.49,0,1,1,22.29,8.86,11.46,11.46,0,0,1,33.77,20.34Z"/></g></g></svg>
-   <defs>
-    <linearGradient id="svg_30" x1="0" y1="0" x2="1" y2="0">
-     <stop offset="0" stop-color="#fddb8c" stop-opacity="1"/>
-     <stop offset="1" stop-color="#fddb8c" stop-opacity="1"/>
-    </linearGradient>
-   </defs>
-    <path d="m107.14774,101.03477l-0.64774,43.96523c5.00857,4.72089 14.00811,5.27188 19,0l-0.31667,-44.16l-9.61514,-19.84l-8.42046,20.03477z" id="svg_29" fill="url(#svg_30)" stroke="#202020" stroke-width="2" transform="rotate(-45, 116, 114)"/>
-    <circle cx="58" cy="58" r="51" id="svg_22" fill="#fddb8c" stroke="#202020" stroke-width="5"/>
-    <circle cx="58" cy="58" r="43" id="svg_27" fill="#fddb8c" stroke="none"/>
-    <path d="m15.68604,61.46511c38.13954,17.67442 48.13954,15.34883 85.11628,-0.46511c1.39536,18.60465 -19.30231,41.86047 -42.7907,40.93023c-21.6279,-0.93023 -42.7907,-21.86046 -42.32558,-40.46511z" id="svg_28" fill="#fddb00" stroke="none"/>
-  </svg>

src/editor/index.html

@@ -28,308 +28,292 @@
 </head>
 
 <body>
-
+  <div id="svg_editor" role="main">
-  <div id="svg_container" style="visibility: hidden;">
+    <div id="sidepanels">
-    <div id="svg_editor" role="main">
+      <div id="layerpanel">
-      <div id="rulers">
+        <h3 id="layersLabel">Layers</h3>
-        <div id="ruler_corner"></div>
+        <fieldset id="layerbuttons">
-        <div id="ruler_x">
+          <se-button id="layer_new" title="New Layer" size="small" src="./images/new.svg"></se-button>
-          <div>
+          <se-button id="layer_delete" title="Delete Layer" size="small" src="./images/delete.svg"></se-button>
-            <canvas height="15"></canvas>
+          <se-button id="layer_rename" title="Rename Layer" size="small" src="./images/text.svg"></se-button>
-          </div>
+          <se-button id="layer_up" title="Move Layer Up" size="small" src="./images/go_up.svg"></se-button>
-        </div>
+          <se-button id="layer_down" title="Move Layer Down" size="small" src="./images/go_down.svg"></se-button>
-        <div id="ruler_y">
+          <se-button id="layer_moreopts" title="More Options" size="small" src="./images/context_menu.svg">
-          <div>
-            <canvas width="15"></canvas>
-          </div>
-        </div>
-      </div>
-      <div id="workarea">
-        <div id="svgcanvas" style="position: relative;">
-        </div>
-      </div>
-      <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>
-      <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
-        <!-- File-like buttons: New, Save, Source -->
-        <se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
-        <se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
-        <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
-        <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
-        <se-menu-item id="tool_imagelib" label="Image library"  src="./images/library.svg"></se-menu-item>
-        <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
-        <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg"></se-menu-item>
-        <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
-        <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/svg-edit-home.svg"></se-menu-item>
-        <div style="width:50%;margin:auto;">
-          <a href="https://www.netlify.com">
-            <img style="height:25px;" src="./images/netlify-dark.svg"
-              alt="Deploys by Netlify" />
-          </a>
-        </div>
-      </se-menu>
-      <div id="tools_top">
-        <div id="editor_panel">
-          <div class="tool_sep"></div>
-          <se-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
-          <se-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></se-button>
-          <se-button id="view_grid" title="Show grid" src="./images/grid.svg"></se-button>
-        </div> <!-- editor_panel -->
-        <div id="history_panel">
-          <div class="tool_sep"></div>
-          <se-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></se-button>
-          <se-button id="tool_redo" title="Redo" shortcut="Y" src="./images/redo.svg" disabled></se-button>
-        </div> <!-- history_panel -->
-        <!-- Buttons when a single element is selected -->
-        <div id="selected_panel">
-          <div class="toolset">
-            <div class="tool_sep"></div>
-            <se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
-            <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
-            </se-button>
-            <div class="tool_sep"></div>
-            <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
-            </se-button>
-            <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+["
-              src="./images/move_bottom.svg"></se-button>
-            <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
-            <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
-            <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
-            <div class="tool_sep"></div>
-            <se-input id="elem_id" data-attr="id" size="10" label="id:" title="Identify the element"></se-input>
-            <se-input id="elem_class" data-attr="class" size="10" label="class:" title="Element class"></se-input>
-          </div>
-          <se-spin-input size="3" id="angle" min=-181 max=181 step=5 src="./images/angle.svg"
-            title="Change rotation angle"></se-spin-input>
-          <se-spin-input size="2" id="blur" min=-1 max=101 step=5 src="./images/blur.svg"
-            title="Change gaussian blur value"></se-spin-input>
-          <se-list id="tool_position" title="Align Element to Page" label="">
-            <se-list-item id="tool_posleft" value="l">
-              <img title="align left" src="./images/align_left.svg" height="22px">
-            </se-list-item>
-            <se-list-item id="tool_poscenter" value="c">
-              <img title="align center" src="./images/align_center.svg" height="22px">
-            </se-list-item>
-            <se-list-item id="tool_posright" value="r">
-              <img title="align right" src="./images/align_right.svg" height="22px">
-            </se-list-item>
-            <se-list-item id="tool_postop" value="t">
-              <img title="align top" src="./images/align_top.svg" height="22px">
-            </se-list-item>
-            <se-list-item id="tool_posmiddle" value="m">
-              <img title="align middle" src="./images/align_middle.svg" height="22px">
-            </se-list-item>
-            <se-list-item id="tool_posbottom" value="b">
-              <img title="align bottom" src="./images/align_bottom.svg" height="22px">
-            </se-list-item> 
-          </se-list>
-          <div id="xy_panel" class="toolset">
-            <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x:" title="Change X coordinate">
-            </se-spin-input>
-            <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y:" title="Change Y coordinate">
-            </se-spin-input>
-          </div>
-        </div> <!-- selected_panel -->
-        <!-- Buttons when multiple elements are selected -->
-        <div id="multiselected_panel">
-          <div class="tool_sep"></div>
-          <se-button id="tool_clone_multi" title="Clone Elements" shortcut="C" src="./images/clone.svg"></se-button>
-          <se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace"
-            src="./images/delete.svg"></se-button>
-          <div class="tool_sep"></div>
-          <se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg">
           </se-button>
-          <se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+        </fieldset>
-          <se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
+        <table id="layerlist">
-          <se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
+          <tr class="layer">
-          <se-button id="tool_align_right" title="Align Right" src="./images/align_right.svg"></se-button>
+            <td class="layervis"></td>
-          <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
+            <td class="layername">Layer 1</td>
-          <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
+          </tr>
-          <se-button id="tool_align_bottom" title="Align Bottom" src="./images/align_bottom.svg"></se-button>
+        </table>
-          <se-list id="tool_align_relative" label="relative to:">
+        <span id="selLayerLabel">Move elements to:</span>
-            <se-list-item id="selected_objects" value="selected">selected objects</se-list-item>
+        <select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
-            <se-list-item id="largest_object" value="largest">largest object</se-list-item>
+          <option selected="selected" value="layer1">Layer 1</option>
-            <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
+        </select>
-            <se-list-item id="page" value="page">page</se-list-item>
+      </div>
-          </se-list>
+      <div id="sidepanel_handle" title="Drag left/right to resize side panel [X]">L a y e r s
+      </div>
+    </div>
+    <se-menu id="main_button" label="SVG-Edit" src="./images/logo.svg" alt="logo">
+      <!-- File-like buttons: New, Save, Source -->
+      <se-menu-item id="tool_clear" label="New Image" shortcut="N" src="./images/new.svg"></se-menu-item>
+      <se-menu-item id="tool_open" label="Open SVG" src="./images/open.svg"></se-menu-item>
+      <se-menu-item id="tool_save" label="Save Image" shortcut="S" src="./images/saveImg.svg"></se-menu-item>
+      <se-menu-item id="tool_import" label="Import Image" src="./images/importImg.svg"></se-menu-item>
+      <se-menu-item id="tool_export" label="Export" src="./images/export.svg"></se-menu-item>
+      <se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
+      <se-menu-item id="tool_docprops" label="Document Properties" shortcut="D" src="./images/docprop.svg">
+      </se-menu-item>
+      <se-menu-item id="tool_editor_prefs" label="Editor Preferences" src="./images/editPref.svg"></se-menu-item>
+      <se-menu-item id="tool_editor_homepage" label="SVG-Edit Home Page" src="./images/logo.svg">
+      </se-menu-item>
+    </se-menu>
+    <div id="tools_top">
+      <div id="editor_panel">
+        <div class="tool_sep"></div>
+        <se-button id="tool_source" title="Edit Source" shortcut="U" src="./images/source.svg"></se-button>
+        <se-button id="tool_wireframe" title="Wireframe Mode" shortcut="F" src="./images/wireframe.svg"></se-button>
+        <se-button id="view_grid" title="Show grid" src="./images/grid.svg"></se-button>
+      </div> <!-- editor_panel -->
+      <div id="history_panel">
+        <div class="tool_sep"></div>
+        <se-button id="tool_undo" title="Undo" shortcut="Z" src="./images/undo.svg" disabled></se-button>
+        <se-button id="tool_redo" title="Redo" shortcut="Y" src="./images/redo.svg" disabled></se-button>
+      </div> <!-- history_panel -->
+      <!-- Buttons when a single element is selected -->
+      <div id="selected_panel">
+        <div class="toolset">
           <div class="tool_sep"></div>
-        </div> <!-- multiselected_panel -->
+          <se-button id="tool_clone" title="Duplicate Element" shortcut="D" src="./images/clone.svg"></se-button>
-        <div id="rect_panel">
+          <se-button id="tool_delete" title="Delete Element" shortcut="Backspace" src="./images/delete.svg">
-          <div class="toolset">
-            <se-spin-input id="rect_width" data-attr="width" size="4" src="./images/width.svg"
-              title="Change rectangle width"></se-spin-input>
-            <se-spin-input id="rect_height" data-attr="height" size="4" src="./images/height.svg"
-              title="Change rectangle height"></se-spin-input>
-          </div>
-          <se-spin-input id="rect_rx" min=-0.1 max=1000.1 step=1.0 size="3" title="Change Rectangle Corner Radius"
-            data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
-        </div> <!-- rect_panel -->
-        <div id="image_panel">
-          <div class="toolset">
-            <se-spin-input id="image_width" data-attr="width" size="4" type="text" src="./images/width.svg"
-              title="Change image width"></se-spin-input>
-            <se-spin-input id="image_height" data-attr="height" size="4" type="text" src="./images/height.svg"
-              title="Change image height"></se-spin-input>
-          </div>
-          <div class="toolset">
-            <label id="tool_image_url">url:
-              <input id="image_url" type="text" title="Change URL" size="35" />
-            </label>
-            <label id="tool_change_image">
-              <button id="change_image_url" style="display: none;">Change Image</button>
-              <span id="url_notice"
-                title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
-            </label>
-          </div>
-        </div> <!-- image_panel -->
-        <div id="circle_panel">
-          <div class="toolset">
-            <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx:"></se-spin-input>
-            <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy:"></se-spin-input>
-          </div>
-          <div class="toolset">
-            <se-spin-input id="circle_r" data-attr="r" size="4" label="r:"></se-spin-input>
-          </div>
-        </div> <!-- circle_panel -->
-        <div id="ellipse_panel">
-          <div class="toolset">
-            <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx:">
-            </se-spin-input>
-            <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy:">
-            </se-spin-input>
-          </div>
-          <div class="toolset">
-            <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx:"></se-spin-input>
-            <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry:"></se-spin-input>
-          </div>
-        </div> <!-- ellipse_panel -->
-        <div id="line_panel">
-          <div class="toolset">
-            <se-spin-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1:">
-            </se-spin-input>
-            <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1:">
-            </se-spin-input>
-            <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2:">
-            </se-spin-input>
-            <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2:">
-            </se-spin-input>
-          </div>
-        </div> <!-- line_panel -->
-        <div id="text_panel">
-          <div class="toolset">
-            <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
-            <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
-            <se-button id="tool_text_anchor_start" title="Align the text from start" src="./images/anchor_start.svg"></se-button>
-            <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg"></se-button>
-            <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg"></se-button>
-          </div>
-          <se-list id="tool_font_family" label="Font:">
-            <se-list-item value="Sans-serif"> <div style="font-family:serif">Sans-serif</div></se-list-item>
-            <se-list-item value="Serif"> <div style="font-family:serif">Serif</div></se-list-item>
-            <se-list-item value="Cursive"> <div style="font-family:serif">Cursive</div></se-list-item>
-            <se-list-item value="Fantasy"> <div style="font-family:serif">Fantasy</div></se-list-item>
-            <se-list-item value="Monospace"> <div style="font-family:serif">Monospace</div></se-list-item>
-            <se-list-item value="Courier"> <div style="font-family:serif">Courier</div></se-list-item>
-            <se-list-item value="Helvetica"> <div style="font-family:serif">Helvetica</div></se-list-item>
-            <se-list-item value="Times"> <div style="font-family:serif">Times</div></se-list-item> 
-          </se-list>
-          <se-spin-input size="2" id="font_size" min=0.99 max=1000.1 step=1.0 title="Change Font Size"
-            src="./images/fontsize.svg"></se-spin-input>
-          <!-- Not visible, but still used -->
-          <input id="text" type="text" size="35" />
-        </div> <!-- text_panel -->
-        <!-- formerly gsvg_panel -->
-        <div id="container_panel">
-          <div class="tool_sep"></div>
-          <!-- Add viewBox field here? -->
-          <label id="group_title" title="Group identification label">
-            <span>label:</span>
-            <input id="g_title" data-attr="title" size="10" type="text" />
-          </label>
-        </div> <!-- container_panel -->
-        <div id="use_panel">
-          <div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
-        </div> <!-- use_panel -->
-        <div id="g_panel">
-          <div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
-        </div> <!-- g_panel -->
-        <!-- For anchor elements -->
-        <div id="a_panel">
-          <label id="tool_link_url" title="Set link URL (leave empty to remove)">
-            <span id="linkLabel" class="icon_label"></span>
-            <input id="link_url" type="text" size="35" />
-          </label>
-        </div> <!-- a_panel -->
-        <div id="path_node_panel">
-          <div class="tool_sep"></div>
-          <se-button id="tool_node_link" title="Link Control Points" src="./images/tool_node_link.svg" pressed></se-button>
-          <div class="tool_sep"></div>
-          <se-spin-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:"></se-spin-input>
-          <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:"></se-spin-input>
-          <select id="seg_type" title="Change Segment type">
-            <option id="straight_segments" selected="selected" value="4">Straight</option>
-            <option id="curve_segments" value="6">Curve</option>
-          </select>
-          <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
-          <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
-          <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg">
           </se-button>
-          <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
+          <div class="tool_sep"></div>
-        </div> <!-- path_node_panel -->
+          <se-button id="tool_move_top" title="Bring to Front" shortcut="Ctrl+Shift+]" src="./images/move_top.svg">
-        <div id="cur_context_panel"></div>
+          </se-button>
-    </div> <!-- tools_top -->
+          <se-button id="tool_move_bottom" title="Send to Back" shortcut="Ctrl+Shift+[" src="./images/move_bottom.svg">
-      <div id="tools_left">
+          </se-button>
-        <se-button id="tool_select" title="Select Tool" src="./images/select.svg"></se-button>
+          <se-button id="tool_topath" title="Convert to Path" src="./images/to_path.svg"></se-button>
-        <se-button id="tool_fhpath" title="Pencil Tool" src="./images/pencil.svg" shortcut="Q"></se-button>
+          <se-button id="tool_reorient" title="Reorient path" src="./images/reorient.svg"></se-button>
-        <se-flyingbutton id="tools_line" title="Line Tool (L)/Connect two objects">
+          <se-button id="tool_make_link" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
-          <se-button id="tool_line" title="Line Tool" src="./images/pen.svg" shortcut="L"></se-button>
+          <div class="tool_sep"></div>
-          <se-button id="mode_connect" title="Connect two objects" src="./images/conn.svg"></se-button>
+          <se-input id="elem_id" data-attr="id" size="10" label="id" title="Identify the element"></se-input>
-        </se-flyingbutton>
+          <se-input id="elem_class" data-attr="class" size="10" label="class" title="Element class"></se-input>
-        <se-flyingbutton id="tools_rect" title="Square/Rect Tool">
+        </div>
-          <se-button id="tool_rect" title="Rectangle" src="./images/rect.svg" shortcut="R"></se-button>
+        <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
-          <se-button id="tool_square" title="Square" src="./images/square.svg"></se-button>
+          title="Change rotation angle"></se-spin-input>
-          <se-button id="tool_fhrect" title="Free-Hand Rectangle" src="./images/fh_rect.svg"></se-button>
+        <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
-        </se-flyingbutton>
+          title="Change gaussian blur value"></se-spin-input>
-        <se-flyingbutton id="tools_ellipse" title="Ellipse/Circle Tool">
+        <se-list id="tool_position" title="Align Element to Page" label="">
-          <se-button id="tool_ellipse" title="Rectangle" src="./images/ellipse.svg" shortcut="E"></se-button>
+          <se-list-item id="tool_posleft" value="l">
-          <se-button id="tool_circle" title="Square" src="./images/circle.svg"></se-button>
+            <img title="align left" src="./images/align_left.svg" height="22px">
-          <se-button id="tool_fhellipse" title="Free-Hand Rectangle" src="./images/fh_ellipse.svg"></se-button>
+          </se-list-item>
-        </se-flyingbutton>
+          <se-list-item id="tool_poscenter" value="c">
-        <se-button id="tool_path" title="Path Tool" src="./images/path.svg" shortcut="P"></se-button>
+            <img title="align center" src="./images/align_center.svg" height="22px">
-        <se-explorerbutton id="tool_shapelib" title="Shape library" lib="./extensions/ext-shapes/shapelib/"
+          </se-list-item>
-          src="./images/shapelib.svg"></se-explorerbutton>
+          <se-list-item id="tool_posright" value="r">
-        <se-button id="tool_text" title="Text Tool" src="./images/text.svg" shortcut="T"></se-button>
+            <img title="align right" src="./images/align_right.svg" height="22px">
-        <se-button id="tool_image" title="Image Tool" src="./images/image.svg"></se-button>
+          </se-list-item>
-        <se-button id="tool_zoom" title="Zoom Tool" src="./images/zoom.svg" shortcut="Z"></se-button>
+          <se-list-item id="tool_postop" value="t">
-        <se-button id="tool_eyedropper" title="Eye Dropper Tool" src="./images/eye_dropper.svg" shortcut="I">
+            <img title="align top" src="./images/align_top.svg" height="22px">
+          </se-list-item>
+          <se-list-item id="tool_posmiddle" value="m">
+            <img title="align middle" src="./images/align_middle.svg" height="22px">
+          </se-list-item>
+          <se-list-item id="tool_posbottom" value="b">
+            <img title="align bottom" src="./images/align_bottom.svg" height="22px">
+          </se-list-item>
+        </se-list>
+        <div id="xy_panel" class="toolset">
+          <se-spin-input id="selected_x" data-attr="x" size="4" type="text" label="x" title="Change X coordinate">
+          </se-spin-input>
+          <se-spin-input id="selected_y" data-attr="y" size="4" type="text" label="y" title="Change Y coordinate">
+          </se-spin-input>
+        </div>
+      </div> <!-- selected_panel -->
+      <!-- Buttons when multiple elements are selected -->
+      <div id="multiselected_panel">
+        <div class="tool_sep"></div>
+        <se-button id="tool_clone_multi" title="Clone Elements" shortcut="C" src="./images/clone.svg"></se-button>
+        <se-button id="tool_delete_multi" title="Delete Selected Elements" shortcut="Delete/Backspace"
+          src="./images/delete.svg"></se-button>
+        <div class="tool_sep"></div>
+        <se-button id="tool_group_elements" title="Group Elements" shortcut="G" src="./images/group_elements.svg">
         </se-button>
+        <se-button id="tool_make_link_multi" title="Make (hyper)link" src="./images/globe_link.svg"></se-button>
+        <se-button id="tool_align_left" title="Align Left" src="./images/align_left.svg"></se-button>
+        <se-button id="tool_align_center" title="Align Center" src="./images/align_center.svg"></se-button>
+        <se-button id="tool_align_right" title="Align Right" src="./images/align_right.svg"></se-button>
+        <se-button id="tool_align_top" title="Align Top" src="./images/align_top.svg"></se-button>
+        <se-button id="tool_align_middle" title="Align Middle" src="./images/align_middle.svg"></se-button>
+        <se-button id="tool_align_bottom" title="Align Bottom" src="./images/align_bottom.svg"></se-button>
+        <se-list id="tool_align_relative" label="relative to:">
+          <se-list-item id="selected_objects" value="selected">selected objects</se-list-item>
+          <se-list-item id="largest_object" value="largest">largest object</se-list-item>
+          <se-list-item id="smallest_object" value="smallest">smallest object</se-list-item>
+          <se-list-item id="page" value="page">page</se-list-item>
+        </se-list>
+        <div class="tool_sep"></div>
+      </div> <!-- multiselected_panel -->
+      <div id="rect_panel">
+        <div class="toolset">
+          <se-spin-input id="rect_width" data-attr="width" size="4" label="w"
+            title="Change rectangle width"></se-spin-input>
+          <se-spin-input id="rect_height" data-attr="height" size="4" label="h"
+            title="Change rectangle height"></se-spin-input>
+        </div>
+        <se-spin-input id="rect_rx" min=0 max=1000 step=1 size="3" title="Change Rectangle Corner Radius"
+          data-attr="Corner Radius" src="./images/c_radius.svg"></se-spin-input>
+      </div> <!-- rect_panel -->
+      <div id="image_panel">
+        <div class="toolset">
+          <se-spin-input id="image_width" data-attr="width" size="4" type="text" label="w"
+            title="Change image width"></se-spin-input>
+          <se-spin-input id="image_height" data-attr="height" size="4" type="text" label="h"
+            title="Change image height"></se-spin-input>
+        </div>
+        <div class="toolset">
+          <label id="tool_image_url">url:
+            <input id="image_url" type="text" title="Change URL" size="35" />
+          </label>
+          <label id="tool_change_image">
+            <button id="change_image_url" style="display: none;">Change Image</button>
+            <span id="url_notice"
+              title="NOTE: This image cannot be embedded. It will depend on this path to be displayed"></span>
+          </label>
+        </div>
+      </div> <!-- image_panel -->
+      <div id="circle_panel">
+        <div class="toolset">
+          <se-spin-input id="circle_cx" data-attr="cx" size="4" label="cx"></se-spin-input>
+          <se-spin-input id="circle_cy" data-attr="cy" size="4" label="cy"></se-spin-input>
+        </div>
+        <div class="toolset">
+          <se-spin-input id="circle_r" data-attr="r" size="4" label="r"></se-spin-input>
+        </div>
+      </div> <!-- circle_panel -->
+      <div id="ellipse_panel">
+        <div class="toolset">
+          <se-spin-input id="ellipse_cx" data-attr="cx" size="4" title="Change ellipse's cx coordinate" label="cx">
+          </se-spin-input>
+          <se-spin-input id="ellipse_cy" data-attr="cy" size="4" title="Change ellipse's cy coordinate" label="cy">
+          </se-spin-input>
+        </div>
+        <div class="toolset">
+          <se-spin-input id="ellipse_rx" data-attr="rx" size="4" title="Change ellipse's x radius" label="rx">
+          </se-spin-input>
+          <se-spin-input id="ellipse_ry" data-attr="ry" size="4" title="Change ellipse's y radius" label="ry">
+          </se-spin-input>
+        </div>
+      </div> <!-- ellipse_panel -->
+      <div id="line_panel">
+        <div class="toolset">
+          <se-spin-input id="line_x1" data-attr="x1" size="4" title="Change line's starting x coordinate" label="x1">
+          </se-spin-input>
+          <se-spin-input id="line_y1" data-attr="y1" size="4" title="Change line's starting y coordinate" label="y1">
+          </se-spin-input>
+          <se-spin-input id="line_x2" data-attr="x2" size="4" title="Change line's ending x coordinate" label="x2">
+          </se-spin-input>
+          <se-spin-input id="line_y2" data-attr="y2" size="4" title="Change line's ending y coordinate" label="y2">
+          </se-spin-input>
+        </div>
+      </div> <!-- line_panel -->
+      <div id="text_panel">
+        <div class="toolset">
+          <se-button id="tool_bold" title="Bold Text [B]" src="./images/bold.svg" shortcut="B"></se-button>
+          <se-button id="tool_italic" title="Italic Text [I]" src="./images/italic.svg" shortcut="I"></se-button>
+          <se-button id="tool_text_anchor_start" title="Align the text from start" src="./images/anchor_start.svg">
+          </se-button>
+          <se-button id="tool_text_anchor_middle" title="Align the text from middle" src="./images/anchor_middle.svg">
+          </se-button>
+          <se-button id="tool_text_anchor_end" title="Align the text from end" src="./images/anchor_end.svg">
+          </se-button>
+        </div>
+        <se-list id="tool_font_family" label="Font:">
+          <se-list-item value="Serif" style="font-family:serif;"> Serif</se-list-item>
+          <se-list-item value="Sans-serif" style="font-family:sans-serif;"> Sans-serif</se-list-item>
+          <se-list-item value="Cursive" style="font-family:cursive;"> Cursive</se-list-item>
+          <se-list-item value="Fantasy" style="font-family:fantasy;"> Fantasy</se-list-item>
+          <se-list-item value="Monospace" style="font-family:monospace;"> Monospace</se-list-item>
+          <se-list-item value="Courier" style="font-family:courier;"> Courier</se-list-item>
+          <se-list-item value="Helvetica" style="font-family:helvetica;">Helvetica</se-list-item>
+          <se-list-item value="Times" style="font-family:times;">Times</se-list-item>
+        </se-list>
+        <se-spin-input size="2" id="font_size" min=1 max=1000 step=1 title="Change Font Size"
+          src="./images/fontsize.svg"></se-spin-input>
+        <!-- Not visible, but still used -->
+        <input id="text" type="text" size="35" />
+      </div> <!-- text_panel -->
+      <!-- formerly gsvg_panel -->
+      <div id="container_panel">
+        <div class="tool_sep"></div>
+        <!-- Add viewBox field here? -->
+        <label id="group_title" title="Group identification label">
+          <span>label</span>
+          <input id="g_title" data-attr="title" size="10" type="text" />
+        </label>
+      </div> <!-- container_panel -->
+      <div id="use_panel">
+        <div class="push_button" id="tool_unlink_use" title="Break link to reference element (make unique)"></div>
+      </div> <!-- use_panel -->
+      <div id="g_panel">
+        <div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
+      </div> <!-- g_panel -->
+      <!-- For anchor elements -->
+      <div id="a_panel">
+        <label id="tool_link_url" title="Set link URL (leave empty to remove)">
+          <span id="linkLabel" class="icon_label"></span>
+          <input id="link_url" type="text" size="35" />
+        </label>
+      </div> <!-- a_panel -->
+      <div id="path_node_panel">
+        <div class="tool_sep"></div>
+        <se-button id="tool_node_link" title="Link Control Points" src="./images/tool_node_link.svg" pressed>
+        </se-button>
+        <div class="tool_sep"></div>
+        <se-spin-input id="path_node_x" data-attr="x" size="4" title="Change node's x coordinate" label="x:">
+        </se-spin-input>
+        <se-spin-input id="path_node_y" data-attr="y" size="4" title="Change node's y coordinate" label="y:">
+        </se-spin-input>
+        <select id="seg_type" title="Change Segment type">
+          <option id="straight_segments" selected="selected" value="4">Straight</option>
+          <option id="curve_segments" value="6">Curve</option>
+        </select>
+        <se-button id="tool_node_clone" title="Clone Node" src="./images/tool_node_clone.svg"></se-button>
+        <se-button id="tool_node_delete" title="Delete Node" src="./images/tool_node_delete.svg"></se-button>
+        <se-button id="tool_openclose_path" title="Open/close sub-path" src="./images/tool_openclose_path.svg">
+        </se-button>
+        <se-button id="tool_add_subpath" title="Add sub-path" src="./images/tool_add_subpath.svg"></se-button>
+      </div> <!-- path_node_panel -->
+      <div id="cur_context_panel"></div>
+    </div> <!-- tools_top -->
+    <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="ext-panning" title="Panning" src="./images/panning.svg"></se-button>
-        <se-button id="tool_star" title="Star Tool" src="./images/star.svg"></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-flyingbutton id="tools_polygon" title="Polygone/Star Tool">
         <se-button id="tool_polygon" title="Polygon Tool" src="./images/polygon.svg"></se-button>
+        <se-button id="tool_star" title="Star Tool" src="./images/star.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 -->
       <div id="tools_bottom">
         <!-- Zoom buttons -->
@@ -347,20 +331,20 @@
         </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.1 max=99.1 step=1.0 title="Change stroke width" label=""></se-spin-input>
+        <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="">
+        <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="">
+        <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-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="">
+        <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>
@@ -368,13 +352,7 @@
         <se-spin-input size="3" id="opacity" min=-1 max=101 step=5 title="Change selected item opacity" src="./images/opacity.svg"></se-spin-input>
         <se-palette id="palette"></se-palette>
       </div> <!-- tools_bottom -->
-    <div id="dialog_box">
+
-      <div class="overlay"></div>
-      <div id="dialog_container">
-        <div id="dialog_content"></div>
-        <div id="dialog_buttons"></div>
-      </div>
-    </div>
   </div>
 </body>
 

src/editor/svgedit.css

@@ -1,13 +1,16 @@
 :root{
-  --main-bg-color: #f4f4f4;
+  --main-bg-color: #72797A;
   --text-color: #000000;
   --border-color: #808080;
-  --canvas-bg-color:  radial-gradient(#7a7676, #ffffff 50%);
+  --canvas-bg-color: #B2B2B2;
   --link-color: #19c;
-  --ruler-color: #f4f4f4;
+  --ruler-color: #B2B2B2;
+  --icon-bg-color: #72797A;
+  --icon-bg-color-hover: #2B3C45;
+  --input-color: #B2B2B2;
 }
 
-body {  
+body {
   background: var(--main-bg-color);
 }
 
@@ -43,96 +46,11 @@ hr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#svgroot {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-#svgcanvas {
-  line-height: normal;
-  display: inline-block;
-  background: var(--canvas-bg-color);
-  text-align: center;
-  vertical-align: middle;
-  width: 640px;
-  height: 480px;
-  -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
-  position: relative;
-}
-
-/* Rulers
-——————————————————————————————————————*/
-
-#rulers > div {
-  position: absolute;
-  background: var(--ruler-color);
-  z-index: 1;
-  overflow: hidden;
-}
-
-#ruler_corner {
-  top: 41px;
-  left: 41px;
-  width: 15px;
-  height: 15px;
-}
-
-#ruler_x {
-  height: 15px;
-  top: 41px;
-  left: 56px;
-  right: 30px;
-  border-bottom: 1px solid;
-  border-left: 1px solid #777;
-}
-
-#ruler_y {
-  width: 15px;
-  top: 55px;
-  left: 41px;
-  bottom: 56px;
-  border-right: 1px solid;
-  border-top: 1px solid #777;
-}
-
-#ruler_x canvas:first-child {
-  margin-left: -16px;
-}
-
-#ruler_x canvas {
-  float: left;
-}
-
-#ruler_y canvas {
-  margin-top: -16px;
-}
-
-#ruler_x > div,
-#ruler_y > div {
-  overflow: hidden;
-}
-
 #linkLabel > svg {
   height: 20px;
   padding-top: 4px;
 }
 
-#workarea {
-  display: inline-table-cell;
-  position:absolute;
-  top: 40px;
-  left: 40px;
-  bottom: 40px;
-  right: 14px;
-  background-color: #A0A0A0;
-  border: 1px solid var(--border-color);
-  overflow: auto;
-  text-align: center;
-}
-
 #sidepanels {
   display: inline-block;
   position:absolute;
@@ -171,12 +89,13 @@ hr {
   display: inline-block;
   position: absolute;
   background-color: --main-bg-color;
-  font-weight: bold;
+  color: #fff;
+  font-weight: 100;
   left: 0;
   top: 40%;
   width: 1em;
-  padding: 5px 1px 5px 5px;
+  padding: 5px 5px 5px 5px;
-  margin-left: 3px;
+  margin-left: 6px;
   cursor: pointer;
   border-radius: 5px;
   -moz-border-radius: 5px;
@@ -185,10 +104,6 @@ hr {
   -webkit-user-select: none;
 }
 
-#sidepanel_handle:hover {
-  font-weight: bold;
-}
-
 #sidepanel_handle * {
   cursor: pointer;
   -moz-user-select: none;
@@ -208,7 +123,7 @@ hr {
   overflow: hidden;
   display: flex;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
 }
 
 #layerlist {
@@ -278,6 +193,13 @@ hr {
   top: 4px;
   left: 5px;
   z-index: 5;
+  color: #fff;
+  border-radius: 3px;
+}
+
+#main_button:hover {
+  background-color: var(--icon-bg-color-hover);
+  color: #fff;
 }
 
 #main_icon {
@@ -389,12 +311,59 @@ hr {
   min-height: 40px;
   border-bottom: none;
   overflow: auto;
+  right:2px;
 }
 
 #tools_top .tool_sep {
   margin-top: 5px;
 }
 
+#tools_top > div > * {
+  float: left;
+  margin-right: 2px;
+}
+#tools_top se-input {
+  margin-top: 6px;
+  height: 15px;
+}
+#tools_top se-spin-input {
+  margin-top: 5px;
+  height: 15px;
+}
+
+#tools_top se-dropdown-list {
+  margin-top: 5px;
+  height: 15px;
+}
+
+/*—————————————————————————————*/
+
+#tools_bottom {
+  position: absolute;
+  left: 40px;
+  right: 0;
+  bottom: 0;
+  height: 33px;
+  overflow: visible;
+}
+
+#tools_bottom * {
+  float: left;
+  margin-right: 2px;
+}
+
+#tools_bottom se-spin-input {
+  float: left;
+  vertical-align: middle;
+  display:flex;
+  align-items: center;
+}
+#tools_bottom elix-dropdown-list{
+  width:22px;
+}
+
+/*—————————————————————————————*/
+
 #tools_left {
   position: absolute;
   border-right: none;
@@ -403,10 +372,12 @@ hr {
   left: 1px;
   margin-top: -2px;
   padding-left: 2px;
-  background: --main-bg-color; /* Needed so flyout icons don't appear on the left */
+  background: --main-bg-color;
   z-index: 4;
 }
 
+/*—————————————————————————————*/
+
 #workarea.wireframe #svgcontent * {
   fill: none;
   stroke: #000;
@@ -427,11 +398,6 @@ hr {
   fill: #FFF !important;
 }
 
-#tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) {
-  display: none;
-  float: left;
-}
-
 #editor_panel, #history_panel {
   height: 34px;
   float: left;
@@ -480,20 +446,7 @@ div.toolset label span {
   display: inline-block;
 }
 
-#tools_top > div > * {
-  float: left;
-  margin-right: 2px;
-}
 
-#tools_top label {
-  margin-top: 0;
-  margin-left: 5px;
-}
-
-#tools_top se-input, #tools_top se-spin-input {
-  margin-top: 5px;
-  height: 15px;
-}
 
 input[type=text] {
   padding: 2px;
@@ -605,16 +558,6 @@ input[type=text] {
   height: 24px;
 }
 
-.icon_label {
-  float: left;
-  padding-top: 3px;
-  padding-right: 3px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  height: 0;
-}
-
 .width_label {
   padding-right: 5px;
 }
@@ -629,25 +572,6 @@ input[type=text] {
   display: none;
 }
 
-#tools_bottom {
-  position: absolute;
-  left: 40px;
-  right: 0;
-  bottom: 0;
-  height: 33px;
-  overflow: visible;
-}
-
-#tools_bottom * {
-  float: left;
-  margin-right: 2px;
-}
-
-#tools_bottom se-spin-input {
-  float: left;
-  vertical-align: middle;
-}
-
 .bottom-icon {
   width: 22px;
 }
@@ -798,247 +722,5 @@ ul li.current {
   z-index: 20001;
 }
 
-#svg_docprops .error {
-  border: 1px solid red;
-  padding: 3px;
-}
 
-#svg_docprops #resolution {
-  max-width: 14em;
-}
-
-#tool_docprops_back,
-#tool_prefs_back {
-  margin-left: 1em;
-  overflow: auto;
-}
-
-#svg_docprops_container #svg_docprops_docprops,
-#svg_prefs #svg_docprops_prefs {
-  float: left;
-  width: 221px;
-  margin: 5px .7em;
-  overflow: hidden;
-}
-
-#svg_prefs_container fieldset + fieldset {
-  float: right;
-}
-
-#svg_docprops legend,
-#svg_prefs legend {
-  max-width: 195px;
-}
-
-#svg_docprops_docprops > legend,
-#svg_prefs_container > fieldset > legend {
-  font-weight: bold;
-  font-size: 1.1em;
-}
-
-#svg_docprops_container fieldset,
-#svg_prefs fieldset {
-  padding: 5px;
-  margin: 5px;
-  border: 1px solid #DDD;
-}
-
-#svg_docprops_container label,
-#svg_prefs_container label {
-  display: block;
-  margin: .5em;
-}
-
-#svginfo_bg_note {
-  font-size: .9em;
-  font-style: italic;
-  color: #444;
-}
-
-#canvas_title, #canvas_bg_url {
-  display: block;
-  width: 96%;
-}
-
-#svg_prefs_container div.color_block {
-  float: left;
-  margin: 2px;
-  padding: 20px;
-}
-
-#change_background div.cur_background {
-  border: 2px solid blue;
-  padding: 18px;
-}
-
-#background_img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  text-align: left;
-}
-
-#svg_docprops button,
-#svg_prefs button {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-
-#svg_docprops,
-#svg_prefs {
-  display: none;
-}
-
-#image_save_opts label {
-  font-size: .9em;
-}
-
-#image_save_opts input {
-  margin-left: 0;
-}
-
-.toolbar_button button {
-  border:1px solid #dedede;
-  line-height:130%;
-  float: left;
-  background: #E8E8E8 none;
-  padding:5px 10px 5px 7px; /* Firefox */
-  line-height:17px; /* Safari */
-  margin: 5px 20px 0 0;
-  border: 1px var(--border-color) solid;
-  border-top-color: #FFF;
-  border-left-color: #FFF;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  cursor: pointer;
-}
-
-.toolbar_button button:hover {
-  border: 1px #e0a874 solid;
-  border-top-color: #fcd9ba;
-  border-left-color: #fcd9ba;
-  background-color: #FFC;
-}
-.toolbar_button button:active {
-  background-color: #F4E284;
-  border-left: 1px solid #663300;
-  border-top: 1px solid #663300;
-}
-
-.toolbar_button button .svg_icon {
-  margin: 0 3px -3px 0 !important;
-  padding: 0;
-  border: none;
-  width: 16px;
-  height: 16px;
-}
-
-#dialog_box {
-  display: none;
-}
-
-#dialog_content {
-  height: 95px;
-  margin: 10px 10px 5px 10px;
-  background: #DDD;
-  overflow: auto;
-  text-align: left;
-  border: 1px solid #B0B0B0;
-}
-
-#dialog_content.prompt {
-  height: 75px;
-}
-
-#dialog_content p {
-  margin: 10px;
-  line-height: 1.3em;
-}
-
-#dialog_container {
-  position: absolute;
-  font-family: Verdana;
-  text-align: center;
-  left: 50%;
-  top: 50%;
-  width: 300px;
-  margin-left: -150px;
-  height: 150px;
-  margin-top: -80px;
-  position: fixed;
-  z-index: 50001;
-  background: #CCC;
-  border: 1px outset #777;
-  font-family:Verdana,Helvetica,sans-serif;
-  font-size:0.8em;
-}
-
-#dialog_container, #dialog_content {
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-}
-
-#dialog_buttons input[type=text] {
-  width: 90%;
-  display: block;
-  margin: 0 0 5px 11px;
-}
-
-#dialog_buttons input[type=button] {
-  margin: 0 1em;
-}
-
-/* Slider
-----------------------------------*/
-.ui-slider { position: relative; text-align: left; }
-.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
-.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
-
-.ui-slider-horizontal { height: .8em; }
-.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
-.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
-.ui-slider-horizontal .ui-slider-range-min { left: 0; }
-.ui-slider-horizontal .ui-slider-range-max { right: 0; }
-
-.ui-slider-vertical { width: .8em; height: 100px; }
-.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
-.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
-.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
-.ui-slider-vertical .ui-slider-range-max { top: 0; }
-
-.ui-slider {
-  border: 1px solid #B0B0B0;
-}
-
-.ui-slider-handle {
-  background: #B0B0B0;
-  border: 1px solid #000;
-}
-
-@media screen and (max-width: 1250px) {
-  #tools_top {
-    height: 71px;
-  }
-  #workarea, #sidepanels {
-    top: 70px;
-  }
-  #rulers #ruler_corner,
-  #rulers #ruler_x, #tools_left {
-    top: 71px;
-  }
-
-  #rulers #ruler_y {
-    top: 86px;
-  }
-
-  #cur_context_panel {
-    top: 87px;
-  }
-
-  #selected_panel {
-    clear: right;
-  }
-}
 

src/editor/svgedit.js

@@ -396,7 +396,7 @@ class Editor extends EditorStartup {
       // Note that this will also prevent the notice even though new issues may appear later.
       // May want to find a way to deal with that without annoying the user
       this.configObj.pref('export_notice_done', 'all');
-      this.exportWindow.seAlert(note);
+      seAlert(note);
     }
   }
 
@@ -1106,17 +1106,12 @@ class Editor extends EditorStartup {
   *
   * @returns {Promise<void>} Resolves to `undefined`
   */
-  async clickExport () {
+  async clickExport (e) {
-    const imgType = await seSelect('Select an image type for export: ', [
+    if (e?.detail?.trigger !== 'ok' || e?.detail?.imgType === undefined) {
-      // See http://kangax.github.io/jstests/toDataUrl_mime_type_test/ for a useful list of MIME types and browser support
-      // 'ICO', // Todo: Find a way to preserve transparency in SVG-Edit if not working presently and do full packaging for x-icon; then switch back to position after 'PNG'
-      'PNG',
-      'JPEG', 'BMP', 'WEBP', 'PDF'
-    ]);
-
-    if (!imgType) {
       return;
     }
+    const imgType = e?.detail?.imgType;
+    const quality = (e?.detail?.quality) ? (e?.detail?.quality / 100) : 1;
     // Open placeholder window (prevents popup)
     let exportWindowName;
 
@@ -1161,7 +1156,6 @@ class Editor extends EditorStartup {
       if (!this.customExportImage) {
         openExportWindow();
       }
-      const quality = 1; // JFH !!! Number.parseInt($('#image-slider').val()) / 100;
       /* const results = */ await this.svgCanvas.rasterExport(imgType, quality, this.exportWindowName);
     }
   }
@@ -1484,7 +1478,7 @@ class Editor extends EditorStartup {
 
     // Copy title for certain tool elements
     this.elems = {
-      '#stroke_color': '#tool_stroke .icon_label, #tool_stroke .color_block',
+      '#stroke_color': '#tool_stroke .color_block',
       '#fill_color': '#tool_fill label, #tool_fill .color_block',
       '#linejoin_miter': '#cur_linejoin',
       '#linecap_butt': '#cur_linecap'

src/editor/templates/editorTemplate.js

@@ -0,0 +1,46 @@
+const editorTemplate = document.createElement('template');
+
+editorTemplate.innerHTML = `
+  <style>
+  #svgroot {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  #workarea {
+    display: inline-table-cell;
+    position:absolute;
+    top: 40px;
+    left: 40px;
+    bottom: 40px;
+    right: 14px;
+    background-color: #A0A0A0;
+    border: 1px solid var(--border-color);
+    overflow: auto;
+    text-align: center;
+  }
+  
+  #svgcanvas {
+    line-height: normal;
+    display: inline-block;
+    background: var(--canvas-bg-color);
+    text-align: center;
+    vertical-align: middle;
+    width: 640px;
+    height: 480px;
+    /* for widget regions that shouldn't react to dragging */
+    -apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px);
+    position: relative;
+  }
+  
+  </style>
+</div>
+<div id="workarea">
+ <div id="svgcanvas" style="position: relative;">
+ </div>
+</div>
+`;
+
+export default editorTemplate;

src/editor/templates/rulersTemplate.js

@@ -0,0 +1,85 @@
+const rulersTemplate = document.createElement('template');
+
+rulersTemplate.innerHTML = `
+  <style>
+ 
+  /* Rulers
+——————————————————————————————————————*/
+
+#rulers > div {
+  position: absolute;
+  background: var(--ruler-color);
+  z-index: 1;
+  overflow: hidden;
+}
+
+#ruler_corner {
+  top: 41px;
+  left: 41px;
+  width: 15px;
+  height: 15px;
+}
+
+#ruler_x {
+  height: 15px;
+  top: 41px;
+  left: 56px;
+  right: 30px;
+  border-bottom: 1px solid;
+  border-left: 1px solid #777;
+}
+
+#ruler_y {
+  width: 15px;
+  top: 55px;
+  left: 41px;
+  bottom: 41px;
+  border-right: 1px solid;
+  border-top: 1px solid #777;
+}
+
+#ruler_x canvas:first-child {
+  margin-left: -16px;
+}
+
+#ruler_x canvas {
+  float: left;
+}
+
+#ruler_y canvas {
+  margin-top: -16px;
+}
+
+#ruler_x > div,
+#ruler_y > div {
+  overflow: hidden;
+}
+/*
+@media screen and (max-width: 1250px) {
+  #rulers #ruler_corner,
+  #rulers #ruler_x {
+    top: 71px;
+  }
+  
+  #rulers #ruler_y {
+    top: 57px;
+  }
+}
+*/
+  </style>
+  <div id="rulers">
+ <div id="ruler_corner"></div>
+ <div id="ruler_x">
+   <div>
+     <canvas height="15"></canvas>
+   </div>
+ </div>
+ <div id="ruler_y">
+   <div>
+     <canvas width="15"></canvas>
+   </div>
+ </div>
+</div>
+`;
+
+export default rulersTemplate;

src/svgcanvas/svg-exec.js

@@ -727,7 +727,10 @@ export const rasterExport = async function (imgType, quality, exportWindowName,
   c.width = svgContext_.getCanvas().contentW;
   c.height = svgContext_.getCanvas().contentH;
   const canvg = svgContext_.getcanvg();
-  await canvg(c, svg);
+  const ctx = c.getContext('2d');
+  const v = canvg.fromString(ctx, svg);
+  // Render only first frame, ignoring animations.
+  await v.render();
   // Todo: Make async/await utility in place of `toBlob`, so we can remove this constructor
   // eslint-disable-next-line promise/avoid-new
   return new Promise((resolve, reject) => {