Merge branch 'master' of https://github.com/SVG-Edit/svgedit into issues/612

package.json

@@ -78,10 +78,10 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "canvg": "3.0.7",
-    "core-js": "3.16.0",
+    "core-js": "3.16.2",
     "elix": "15.0.0",
-    "html2canvas": "1.2.1",
+    "html2canvas": "1.3.2",
-    "i18next": "20.3.5",
+    "i18next": "20.4.0",
     "jspdf": "2.3.1",
     "pathseg": "1.2.1",
     "regenerator-runtime": "0.13.9",
@@ -91,8 +91,8 @@
   "devDependencies": {
     "@babel/core": "7.15.0",
     "@babel/preset-env": "7.15.0",
-    "@babel/register": "7.14.5",
+    "@babel/register": "7.15.3",
-    "@babel/runtime-corejs3": "7.14.9",
+    "@babel/runtime-corejs3": "7.15.3",
     "@cypress/code-coverage": "3.9.10",
     "@cypress/fiddle": "1.19.2",
     "@fintechstudios/eslint-plugin-chai-as-promised": "3.1.0",
@@ -102,15 +102,15 @@
     "@rollup/plugin-node-resolve": "13.0.4",
     "@rollup/plugin-replace": "3.0.0",
     "@rollup/plugin-url": "6.1.0",
-    "@web/dev-server": "0.1.20",
+    "@web/dev-server": "0.1.21",
-    "@web/dev-server-rollup": "0.3.8",
+    "@web/dev-server-rollup": "0.3.9",
     "axe-core": "4.3.2",
     "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
     "copyfiles": "2.4.1",
-    "core-js-bundle": "3.16.0",
+    "core-js-bundle": "3.16.2",
     "cp-cli": "2.0.0",
-    "cypress": "8.1.0",
+    "cypress": "8.3.0",
-    "cypress-axe": "0.12.2",
+    "cypress-axe": "0.13.0",
     "cypress-multi-reporters": "1.5.0",
     "cypress-plugin-snapshots": "1.4.4",
     "eslint": "7.32.0",
@@ -119,12 +119,12 @@
     "eslint-plugin-chai-expect": "2.2.0",
     "eslint-plugin-chai-expect-keywords": "2.1.0",
     "eslint-plugin-chai-friendly": "0.7.2",
-    "eslint-plugin-compat": "3.11.1",
+    "eslint-plugin-compat": "3.12.0",
     "eslint-plugin-cypress": "2.11.3",
     "eslint-plugin-eslint-comments": "3.2.0",
     "eslint-plugin-html": "6.1.2",
-    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-import": "2.24.0",
-    "eslint-plugin-jsdoc": "36.0.6",
+    "eslint-plugin-jsdoc": "36.0.7",
     "eslint-plugin-markdown": "2.2.0",
     "eslint-plugin-no-unsanitized": "3.1.5",
     "eslint-plugin-no-use-extend-native": "0.5.0",
@@ -141,9 +141,9 @@
     "qr-manipulation": "0.7.0",
     "query-result": "1.0.5",
     "remark-cli": "10.0.0",
-    "remark-lint-ordered-list-marker-value": "2.0.1",
+    "remark-lint-ordered-list-marker-value": "3.0.1",
     "rimraf": "3.0.2",
-    "rollup": "2.56.0",
+    "rollup": "2.56.2",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-filesize": "9.1.1",
     "rollup-plugin-node-polyfills": "0.2.1",

src/editor/components/seSpinInput.js

@@ -113,9 +113,7 @@ export class SESpinInput extends HTMLElement {
       this.$img.remove();
       break;
     case 'value':
-      if(this.$input.value !== newValue) {
       this.$input.value = newValue;
-      }
       break;
     default:
       // eslint-disable-next-line no-console
@@ -190,13 +188,6 @@ export class SESpinInput extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
-    this.$input.addEventListener('onchange', (e) => {
-      e.preventDefault();
-      if(e.detail !== this.value && e.detail !== "" && !isNaN(e.detail) ) {
-        const event = new CustomEvent('change', { detail: e.detail });
-        this.dispatchEvent(event);
-      }
-    });
     this.$input.addEventListener('change', (e) => {
       e.preventDefault();
       this.value = e.target.value;

src/editor/dialogs/se-elix/define/NumberSpinBox.js

@@ -1,21 +1,8 @@
 import PlainNumberSpinBox from '../src/plain/PlainNumberSpinBox.js';
-import {
-  stateEffects
-} from 'elix/src/base/internal.js';
 /**
  * @class ElixNumberSpinBox
  */
-// export default class ElixNumberSpinBox extends PlainNumberSpinBox {}
+export default class ElixNumberSpinBox extends PlainNumberSpinBox {}
 
-export default class ElixNumberSpinBox extends PlainNumberSpinBox {
-  [stateEffects](state, changed) {
-    const effects = super[stateEffects];
-    if(changed.value && state.value !== "" && this.value !== undefined) {
-      const event = new CustomEvent('onchange', { detail: state.value });
-      this.dispatchEvent(event);
-    }
-    return effects;
-  }
-}
 
 customElements.define('elix-number-spin-box', ElixNumberSpinBox);

src/editor/panels/BottomPanel.js

@@ -134,15 +134,9 @@ class BottomPanel {
     * @type {module}
     */
   handleOpacity (evt) {
-    let val = evt.currentTarget.value;
+    const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
-    if(evt.detail !== undefined) {
-      val = evt.detail;
-    }
-    val = Number.parseInt(val.split('%')[0]);
-    if(!isNaN(val)) {
     this.editor.svgCanvas.setOpacity(val / 100);
   }
-  }
   /**
   * @type {module}
   */

src/editor/panels/TopPanel.js

@@ -497,35 +497,23 @@ class TopPanel {
    * @type {module}
    */
   changeRectRadius(e) {
-    let val = e.target.value;
+    this.editor.svgCanvas.setRectRadius(e.target.value);
-    if(e.detail !== undefined) {
-      val = e.detail;
-    }
-    this.editor.svgCanvas.setRectRadius(val);
   }
 
   /**
    * @type {module}
    */
   changeFontSize(e) {
-    let val = e.target.value;
+    this.editor.svgCanvas.setFontSize(e.target.value);
-    if(e.detail !== undefined) {
-      val = e.detail;
-    }
-    this.editor.svgCanvas.setFontSize(val);
   }
 
   /**
    * @type {module}
    */
   changeRotationAngle(e) {
-    let val = e.target.value;
+    this.editor.svgCanvas.setRotationAngle(e.target.value);
-    if(e.detail !== undefined) {
-      val = e.detail;
-    }
-    this.editor.svgCanvas.setRotationAngle(val);
     // eslint-disable-next-line max-len
-    (Number.parseInt(val) === 0) ? $id("tool_reorient").classList.add("disabled") : $id("tool_reorient").classList.remove("disabled");
+    (Number.parseInt(e.target.value) === 0) ? $id("tool_reorient").classList.add("disabled") : $id("tool_reorient").classList.remove("disabled");
   }
 
   /**
@@ -533,11 +521,7 @@ class TopPanel {
    * @returns {void}
    */
   changeBlur(e) {
-    let val = e.target.value;
+    this.editor.svgCanvas.setBlur(e.target.value / 10, true);
-    if(e.detail !== undefined) {
-      val = e.detail;
-    }
-    this.editor.svgCanvas.setBlur(val / 10, true);
   }
   /**
    *
@@ -586,10 +570,7 @@ class TopPanel {
    */
   attrChanger(e) {
     const attr = e.target.getAttribute("data-attr");
-    let val = e?.target?.value;
+    let val = e.target.value;
-    if(e.detail !== undefined) {
-      val = e.detail;
-    }
     const valid = isValidUnit(attr, val, this.selectedElement);
 
     if (!valid) {

src/editor/svgedit.css

@@ -365,11 +365,6 @@ hr {
   fill: #FFF !important;
 }
 
-#editor_panel, #history_panel {
-  height: 34px;
-  float: left;
-}
-
 #cur_context_panel {
   position: absolute;
   top: 57px;

src/svgcanvas/elem-get-set.js

@@ -828,7 +828,7 @@ export const setRectRadiusMethod = function (val) {
   const selected = selectedElements[0];
   if (!isNullish(selected) && selected.tagName === 'rect') {
     const r = selected.getAttribute('rx');
-    if (r !== String(val) && !isNullish(val)) {
+    if (r !== String(val)) {
       selected.setAttribute('rx', val);
       selected.setAttribute('ry', val);
       elemContext_.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius'));

src/svgcanvas/sanitize.js

@@ -55,7 +55,7 @@ const svgWhiteList_ = {
   stop: [ 'class', 'id', 'offset', 'requiredFeatures', 'stop-opacity', 'style', 'systemLanguage', 'stop-color', 'gradientUnits', 'gradientTransform' ],
   svg: [ 'class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'version', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'xmlns:oi', 'oi:animations', 'y', 'stroke-linejoin', 'fill-rule', 'aria-label', 'stroke-width', 'fill-rule' ],
   switch: [ 'class', 'id', 'requiredFeatures', 'systemLanguage' ],
-  symbol: [ 'class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox' ],
+  symbol: [ 'class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'overflow', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox' ],
   text: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y' ],
   textPath: [ 'class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href' ],
   title: [],

src/svgcanvas/selection.js

@@ -385,11 +385,9 @@ export const setRotationAngle = function (val, preventUndo) {
     } else {
       elem.removeAttribute('transform');
     }
-    if (oldTransform !== newTransform) {
     svgCanvas.changeSelectedAttribute('transform', newTransform, selectedElements());
     svgCanvas.call('changed', selectedElements());
   }
-  }
   // const pointGripContainer = getElem('pathpointgrip_container');
   // if (elem.nodeName === 'path' && pointGripContainer) {
   //   pathActions.setPointContainerTransform(elem.getAttribute('transform'));