svgedit/src/svgcanvas/json.js

Powerful SVG-Editor for your browser

/**
 * Tools for SVG handle on JSON format.
 * @module svgcanvas
 * @license MIT
 *
 * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller
 */
import { getElem, assignAttributes, cleanupElement } from './utilities.js';
import { NS } from './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;
};