Refactor canvas in multiple pieces to increase maintainability (#446)

* #refactor-canvas getJsonFromSvgElement and svgroot code moved to separate file * #refactor-canvas build files changes * #refactor-canvas addSVGElementsFromJson move to json file * #refactor-canvas selected element option function move separate file * #refactor-canvas moveUpDownSelected move to select-elem * ##refactor-canvas build file updated * #refactor-canvas moveSelectedElements move to selected-elem * #refactor-canvas cloneSelectedElements move to slected-elem * #refactor-canvas alignSelectedElements move to selected-elem * #refactor-canvas deleteSelectedElements move to selected-elem * #refactor-canvas copySelectedElements and groupSelectedElements move to selected-elem * #refactor-canvas pushGroupProperty, ungroupSelectedElement move to selected-elem * #refactor-canvas comment changes * #refactor-canvas UndoManager move to separate file * #refactor-canvas event file move to mouseMove, mouseUpEvent and dblClickEvent * #refactor-canvas mouseDown move to event * #refactor-canvas move to undo file * #refactor alignment changes and set function revert return * #refactor-canvas textaction move to separate file * #refactor-canvas paste-element function move to separate file * #refactor-canvas set and get method move to separate file * #refactor-canvas set and get function moved changes * #refactor clear file import and regaring function moved changes changes * #refactor-canvas svg related function move to separate file * #refactor-canvas setBackground methos move to elem-get-set file * #refactor-canvas getBsplinePoint method move to event file * #refactor-canvas export functions move to svg-exec * #refactor-canvas svg related function moved separate file * #refactor-canvas updateCanvas, cycleElement move to selected-elem file * #refactor-canvas removeUnusedDefElems move to svg-exec file * #refactor-canvas blur method move to separate file blur-event.js * #refactor-canvas selection related function move to separate file slection.js * #refactor-canvas convertGradients, mousewheelmove event bind function move to other files * #refactor-canvas extension function move to selection file * #refactor-canvas svg tag long string changes to es6 format * eslint fixes * eslint and test fixes * add netlify logo per their requirements * #refactor-canvas path file separate to path-method.js and path-actions.js * #refactor-canvas lint issue fixed * #refactor-canvas path.js file class and const move to path-method.js * #refactor-canvas eslint issue fixed. 'jsdoc/check-examples': 'off' already so removed eslint-disable jsdoc/check-examples * #refactor-canvas path class moved changes and copy-elem.js file cypress test issue fixed * #refactor-canvas UI - Clipboard paste element cypress issue fixed * #refactor-canvas cypress test cases issue fixed changes * #refactor-canvas cypress test cases issue fixed changes * #refactor-canvas cypress test case issue fixed * npm update and fix a few eslint new errors * fix snapshot and run tests * add star tool to cypress * #refactor-canvas shapelibrary, star, polygon and panning tool issue fixed * build * Update layer.js * revert proper declarations Authored-by OptimistikSAS
2020-11-11 11:38:45 +01:00
parent 087fa44cea
commit 28019eef07
106 changed files with 10353 additions and 7877 deletions
--- a/src/svgcanvas/json.js
+++ b/src/svgcanvas/json.js
@@ -0,0 +1,110 @@
+/**
+ * Tools for SVG handle on JSON format.
+ * @module svgcanvas
+ * @license MIT
+ *
+ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
+ */
+import {getElem, assignAttributes, cleanupElement} from '../common/utilities.js';
+import {NS} from '../common/namespaces.js';
+
+let jsonContext_ = null;
+let svgdoc_ = null;
+
+/**
+ * @function module:json.jsonContext#getSelectedElements
+ * @returns {Element[]} the array with selected DOM elements
+*/
+/**
+ * @function module:json.jsonContext#getDOMDocument
+ * @returns {HTMLDocument}
+*/
+
+/**
+* @function module:json.init
+* @param {module:json.jsonContext} jsonContext
+* @returns {void}
+*/
+export const init = function (jsonContext) {
+  jsonContext_ = jsonContext;
+  svgdoc_ = jsonContext.getDOMDocument();
+};
+/**
+* @function module:json.getJsonFromSvgElements Iterate element and return json format
+* @param {ArgumentsArray} data - element
+* @returns {svgRootElement}
+*/
+export const getJsonFromSvgElements = (data) => {
+  // Text node
+  if (data.nodeType === 3) return data.nodeValue;
+
+  const retval = {
+    element: data.tagName,
+    // namespace: nsMap[data.namespaceURI],
+    attr: {},
+    children: []
+  };
+
+  // Iterate attributes
+  for (let i = 0, attr; (attr = data.attributes[i]); i++) {
+    retval.attr[attr.name] = attr.value;
+  }
+
+  // Iterate children
+  for (let i = 0, node; (node = data.childNodes[i]); i++) {
+    retval.children[i] = getJsonFromSvgElements(node);
+  }
+
+  return retval;
+};
+
+/**
+* This should really be an intersection implementing all rather than a union.
+* @name module:json.addSVGElementsFromJson
+* @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElementFromJson}
+*/
+
+export const addSVGElementsFromJson = function (data) {
+  if (typeof data === 'string') return svgdoc_.createTextNode(data);
+
+  let shape = getElem(data.attr.id);
+  // if shape is a path but we need to create a rect/ellipse, then remove the path
+  const currentLayer = jsonContext_.getDrawing().getCurrentLayer();
+  if (shape && data.element !== shape.tagName) {
+    shape.remove();
+    shape = null;
+  }
+  if (!shape) {
+    const ns = data.namespace || NS.SVG;
+    shape = svgdoc_.createElementNS(ns, data.element);
+    if (currentLayer) {
+      (jsonContext_.getCurrentGroup() || currentLayer).append(shape);
+    }
+  }
+  const curShape = jsonContext_.getCurShape();
+  if (data.curStyles) {
+    assignAttributes(shape, {
+      fill: curShape.fill,
+      stroke: curShape.stroke,
+      'stroke-width': curShape.stroke_width,
+      'stroke-dasharray': curShape.stroke_dasharray,
+      'stroke-linejoin': curShape.stroke_linejoin,
+      'stroke-linecap': curShape.stroke_linecap,
+      'stroke-opacity': curShape.stroke_opacity,
+      'fill-opacity': curShape.fill_opacity,
+      opacity: curShape.opacity / 2,
+      style: 'pointer-events:inherit'
+    }, 100);
+  }
+  assignAttributes(shape, data.attr, 100);
+  cleanupElement(shape);
+
+  // Children
+  if (data.children) {
+    data.children.forEach((child) => {
+      shape.append(addSVGElementsFromJson(child));
+    });
+  }
+
+  return shape;
+};