@svgedit/svgcanvas 7.1.4

package/historyrecording.js

@@ -0,0 +1,161 @@
+/**
+ * HistoryRecordingService component of history.
+ * @module history
+ * @license MIT
+ * @copyright 2016 Flint O'Brien
+ */
+
+import {
+  BatchCommand, MoveElementCommand, InsertElementCommand, RemoveElementCommand,
+  ChangeElementCommand
+} from './history.js'
+
+/**
+ * History recording service.
+ *
+ * A self-contained service interface for recording history. Once injected, no other dependencies
+ * or globals are required (example: UndoManager, command types, etc.). Easy to mock for unit tests.
+ * Built on top of history classes in history.js.
+ *
+ * There is a simple start/end interface for batch commands.
+ *
+ * HistoryRecordingService.NO_HISTORY is a singleton that can be passed in to functions
+ * that record history. This helps when the caller requires that no history be recorded.
+ *
+ * The following will record history: insert, batch, insert.
+ * @example
+ * hrService = new HistoryRecordingService(this.undoMgr);
+ * hrService.insertElement(elem, text); // add simple command to history.
+ * hrService.startBatchCommand('create two elements');
+ * hrService.changeElement(elem, attrs, text); // add to batchCommand
+ * hrService.changeElement(elem, attrs2, text); // add to batchCommand
+ * hrService.endBatchCommand(); // add batch command with two change commands to history.
+ * hrService.insertElement(elem, text); // add simple command to history.
+ *
+ * @example
+ * // Note that all functions return this, so commands can be chained, like so:
+ * hrService
+ *   .startBatchCommand('create two elements')
+ *   .insertElement(elem, text)
+ *   .changeElement(elem, attrs, text)
+ *   .endBatchCommand();
+ *
+ * @memberof module:history
+ */
+class HistoryRecordingService {
+  /**
+  * @param {history.UndoManager|null} undoManager - The undo manager.
+  *     A value of `null` is valid for cases where no history recording is required.
+  *     See singleton: {@link module:history.HistoryRecordingService.HistoryRecordingService.NO_HISTORY}
+  */
+  constructor (undoManager) {
+    this.undoManager_ = undoManager
+    this.currentBatchCommand_ = null
+    this.batchCommandStack_ = []
+  }
+
+  /**
+   * Start a batch command so multiple commands can recorded as a single history command.
+   * Requires a corresponding call to endBatchCommand. Start and end commands can be nested.
+   *
+   * @param {string} text - Optional string describing the batch command.
+   * @returns {module:history.HistoryRecordingService}
+   */
+  startBatchCommand (text) {
+    if (!this.undoManager_) { return this }
+    this.currentBatchCommand_ = new BatchCommand(text)
+    this.batchCommandStack_.push(this.currentBatchCommand_)
+    return this
+  }
+
+  /**
+   * End a batch command and add it to the history or a parent batch command.
+   * @returns {module:history.HistoryRecordingService}
+   */
+  endBatchCommand () {
+    if (!this.undoManager_) { return this }
+    if (this.currentBatchCommand_) {
+      const batchCommand = this.currentBatchCommand_
+      this.batchCommandStack_.pop()
+      const { length: len } = this.batchCommandStack_
+      this.currentBatchCommand_ = len ? this.batchCommandStack_[len - 1] : null
+      this.addCommand_(batchCommand)
+    }
+    return this
+  }
+
+  /**
+   * Add a `MoveElementCommand` to the history or current batch command.
+   * @param {Element} elem - The DOM element that was moved
+   * @param {Element} oldNextSibling - The element's next sibling before it was moved
+   * @param {Element} oldParent - The element's parent before it was moved
+   * @param {string} [text] - An optional string visible to user related to this change
+   * @returns {module:history.HistoryRecordingService}
+   */
+  moveElement (elem, oldNextSibling, oldParent, text) {
+    if (!this.undoManager_) { return this }
+    this.addCommand_(new MoveElementCommand(elem, oldNextSibling, oldParent, text))
+    return this
+  }
+
+  /**
+   * Add an `InsertElementCommand` to the history or current batch command.
+   * @param {Element} elem - The DOM element that was added
+   * @param {string} [text] - An optional string visible to user related to this change
+   * @returns {module:history.HistoryRecordingService}
+   */
+  insertElement (elem, text) {
+    if (!this.undoManager_) { return this }
+    this.addCommand_(new InsertElementCommand(elem, text))
+    return this
+  }
+
+  /**
+   * Add a `RemoveElementCommand` to the history or current batch command.
+   * @param {Element} elem - The DOM element that was removed
+   * @param {Element} oldNextSibling - The element's next sibling before it was removed
+   * @param {Element} oldParent - The element's parent before it was removed
+   * @param {string} [text] - An optional string visible to user related to this change
+   * @returns {module:history.HistoryRecordingService}
+   */
+  removeElement (elem, oldNextSibling, oldParent, text) {
+    if (!this.undoManager_) { return this }
+    this.addCommand_(new RemoveElementCommand(elem, oldNextSibling, oldParent, text))
+    return this
+  }
+
+  /**
+   * Add a `ChangeElementCommand` to the history or current batch command.
+   * @param {Element} elem - The DOM element that was changed
+   * @param {module:history.CommandAttributes} attrs - An object with the attributes to be changed and the values they had *before* the change
+   * @param {string} [text] - An optional string visible to user related to this change
+   * @returns {module:history.HistoryRecordingService}
+   */
+  changeElement (elem, attrs, text) {
+    if (!this.undoManager_) { return this }
+    this.addCommand_(new ChangeElementCommand(elem, attrs, text))
+    return this
+  }
+
+  /**
+   * Private function to add a command to the history or current batch command.
+   * @private
+   * @param {Command} cmd
+   * @returns {module:history.HistoryRecordingService|void}
+   */
+  addCommand_ (cmd) {
+    if (!this.undoManager_) { return this }
+    if (this.currentBatchCommand_) {
+      this.currentBatchCommand_.addSubCommand(cmd)
+    } else {
+      this.undoManager_.addCommandToHistory(cmd)
+    }
+    return undefined
+  }
+}
+/**
+ * @memberof module:history.HistoryRecordingService
+ * @property {module:history.HistoryRecordingService} NO_HISTORY - Singleton that can be passed to functions that record history, but the caller requires that no history be recorded.
+ */
+HistoryRecordingService.NO_HISTORY = new HistoryRecordingService()
+export default HistoryRecordingService

package/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 { getElement, assignAttributes, cleanupElement } from './utilities.js'
+import { NS } from './namespaces.js'
+
+let svgCanvas = 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 = (canvas) => {
+  svgCanvas = canvas
+  svgdoc_ = canvas.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#addSVGElementsFromJson}
+*/
+
+export const addSVGElementsFromJson = (data) => {
+  if (typeof data === 'string') return svgdoc_.createTextNode(data)
+
+  let shape = getElement(data.attr.id)
+  // if shape is a path but we need to create a rect/ellipse, then remove the path
+  const currentLayer = svgCanvas.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) {
+      (svgCanvas.getCurrentGroup() || currentLayer).append(shape)
+    }
+  }
+  const curShape = svgCanvas.getCurShape()
+  if (data.curStyles) {
+    assignAttributes(shape, {
+      fill: curShape.fill,
+      stroke: curShape.stroke,
+      'stroke-width': curShape.strokeWidth,
+      '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
+}

package/layer.js

@@ -0,0 +1,228 @@
+/**
+ * Provides tools for the layer concept.
+ * @module layer
+ * @license MIT
+ *
+ * @copyright 2011 Jeff Schiller, 2016 Flint O'Brien
+ */
+
+import { NS } from './namespaces.js'
+import { toXml, walkTree } from './utilities.js'
+
+/**
+ * This class encapsulates the concept of a layer in the drawing. It can be constructed with
+ * an existing group element or, with three parameters, will create a new layer group element.
+ *
+ * @example
+ * const l1 = new Layer('name', group); // Use the existing group for this layer.
+ * const l2 = new Layer('name', group, svgElem); // Create a new group and add it to the DOM after group.
+ * const l3 = new Layer('name', null, svgElem); // Create a new group and add it to the DOM as the last layer.
+ * @memberof module:layer
+ */
+class Layer {
+  /**
+  * @param {string} name - Layer name
+  * @param {SVGGElement|null} group - An existing SVG group element or null.
+  *     If group and no svgElem, use group for this layer.
+  *     If group and svgElem, create a new group element and insert it in the DOM after group.
+  *     If no group and svgElem, create a new group element and insert it in the DOM as the last layer.
+  * @param {SVGGElement} [svgElem] - The SVG DOM element. If defined, use this to add
+  *     a new layer to the document.
+  */
+  constructor (name, group, svgElem) {
+    this.name_ = name
+    this.group_ = svgElem ? null : group
+
+    if (svgElem) {
+      // Create a group element with title and add it to the DOM.
+      const svgdoc = svgElem.ownerDocument
+      this.group_ = svgdoc.createElementNS(NS.SVG, 'g')
+      const layerTitle = svgdoc.createElementNS(NS.SVG, 'title')
+      layerTitle.textContent = name
+      this.group_.append(layerTitle)
+      if (group) {
+        group.insertAdjacentElement('afterend', this.group_)
+      } else {
+        svgElem.append(this.group_)
+      }
+    }
+
+    addLayerClass(this.group_)
+    walkTree(this.group_, function (e) {
+      e.setAttribute('style', 'pointer-events:inherit')
+    })
+
+    this.group_.setAttribute('style', svgElem ? 'pointer-events:all' : 'pointer-events:none')
+  }
+
+  /**
+   * Get the layer's name.
+   * @returns {string} The layer name
+   */
+  getName () {
+    return this.name_
+  }
+
+  /**
+   * Get the group element for this layer.
+   * @returns {SVGGElement} The layer SVG group
+   */
+  getGroup () {
+    return this.group_
+  }
+
+  /**
+   * Active this layer so it takes pointer events.
+   * @returns {void}
+   */
+  activate () {
+    this.group_.setAttribute('style', 'pointer-events:all')
+  }
+
+  /**
+   * Deactive this layer so it does NOT take pointer events.
+   * @returns {void}
+   */
+  deactivate () {
+    this.group_.setAttribute('style', 'pointer-events:none')
+  }
+
+  /**
+   * Set this layer visible or hidden based on 'visible' parameter.
+   * @param {boolean} visible - If true, make visible; otherwise, hide it.
+   * @returns {void}
+   */
+  setVisible (visible) {
+    const expected = visible === undefined || visible ? 'inline' : 'none'
+    const oldDisplay = this.group_.getAttribute('display')
+    if (oldDisplay !== expected) {
+      this.group_.setAttribute('display', expected)
+    }
+  }
+
+  /**
+   * Is this layer visible?
+   * @returns {boolean} True if visible.
+   */
+  isVisible () {
+    return this.group_.getAttribute('display') !== 'none'
+  }
+
+  /**
+   * Get layer opacity.
+   * @returns {Float} Opacity value.
+   */
+  getOpacity () {
+    const opacity = this.group_.getAttribute('opacity')
+    if (!opacity) {
+      return 1
+    }
+    return Number.parseFloat(opacity)
+  }
+
+  /**
+   * Sets the opacity of this layer. If opacity is not a value between 0.0 and 1.0,
+   * nothing happens.
+   * @param {Float} opacity - A float value in the range 0.0-1.0
+   * @returns {void}
+   */
+  setOpacity (opacity) {
+    if (typeof opacity === 'number' && opacity >= 0.0 && opacity <= 1.0) {
+      this.group_.setAttribute('opacity', opacity)
+    }
+  }
+
+  /**
+   * Append children to this layer.
+   * @param {SVGGElement} children - The children to append to this layer.
+   * @returns {void}
+   */
+  appendChildren (children) {
+    for (const child of children) {
+      this.group_.append(child)
+    }
+  }
+
+  /**
+  * @returns {SVGTitleElement|null}
+  */
+  getTitleElement () {
+    const len = this.group_.childNodes.length
+    for (let i = 0; i < len; ++i) {
+      const child = this.group_.childNodes.item(i)
+      if (child?.tagName === 'title') {
+        return child
+      }
+    }
+    return null
+  }
+
+  /**
+   * Set the name of this layer.
+   * @param {string} name - The new name.
+   * @param {module:history.HistoryRecordingService} hrService - History recording service
+   * @returns {string|null} The new name if changed; otherwise, null.
+   */
+  setName (name, hrService) {
+    const previousName = this.name_
+    name = toXml(name)
+    // now change the underlying title element contents
+    const title = this.getTitleElement()
+    if (title) {
+      while (title.firstChild) { title.removeChild(title.firstChild) }
+      title.textContent = name
+      this.name_ = name
+      if (hrService) {
+        hrService.changeElement(title, { '#text': previousName })
+      }
+      return this.name_
+    }
+    return null
+  }
+
+  /**
+   * Remove this layer's group from the DOM. No more functions on group can be called after this.
+   * @returns {SVGGElement} The layer SVG group that was just removed.
+   */
+  removeGroup () {
+    const group = this.group_
+    this.group_.remove()
+    this.group_ = undefined
+    return group
+  }
+
+  /**
+   * Test whether an element is a layer or not.
+   * @param {SVGGElement} elem - The SVGGElement to test.
+   * @returns {boolean} True if the element is a layer
+   */
+  static isLayer (elem) {
+    return elem && elem.tagName === 'g' && Layer.CLASS_REGEX.test(elem.getAttribute('class'))
+  }
+}
+/**
+ * @property {string} CLASS_NAME - class attribute assigned to all layer groups.
+ */
+Layer.CLASS_NAME = 'layer'
+
+/**
+ * @property {RegExp} CLASS_REGEX - Used to test presence of class Layer.CLASS_NAME
+ */
+Layer.CLASS_REGEX = new RegExp('(\\s|^)' + Layer.CLASS_NAME + '(\\s|$)')
+
+/**
+ * Add class `Layer.CLASS_NAME` to the element (usually `class='layer'`).
+ *
+ * @param {SVGGElement} elem - The SVG element to update
+ * @returns {void}
+ */
+function addLayerClass (elem) {
+  const classes = elem.getAttribute('class')
+  if (!classes || !classes.length) {
+    elem.setAttribute('class', Layer.CLASS_NAME)
+  } else if (!Layer.CLASS_REGEX.test(classes)) {
+    elem.setAttribute('class', classes + ' ' + Layer.CLASS_NAME)
+  }
+}
+
+export default Layer