svgedit
Version:
Powerful SVG-Editor for your browser
1,106 lines (989 loc) • 48.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: svgcanvas/draw.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: svgcanvas/draw.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>/**
* Tools for drawing.
* @module draw
* @license MIT
* @copyright 2011 Jeff Schiller
*/
import Layer from './layer.js';
import HistoryRecordingService from './historyrecording.js';
import { NS } from './namespaces.js';
import {
toXml, getElem
} from './utilities.js';
import {
copyElem as utilCopyElem
} from './copy-elem.js';
import {
BatchCommand, RemoveElementCommand, MoveElementCommand, ChangeElementCommand
} from './history.js';
import { getParentsUntil } from '../editor/components/jgraduate/Util.js';
const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(',');
const RandomizeModes = {
LET_DOCUMENT_DECIDE: 0,
ALWAYS_RANDOMIZE: 1,
NEVER_RANDOMIZE: 2
};
let randIds = RandomizeModes.LET_DOCUMENT_DECIDE;
// Array with current disabled elements (for in-group editing)
let disabledElems = [];
/**
* Get a HistoryRecordingService.
* @param {module:history.HistoryRecordingService} [hrService] - if exists, return it instead of creating a new service.
* @returns {module:history.HistoryRecordingService}
*/
function historyRecordingService (hrService) {
return hrService || new HistoryRecordingService(canvas_.undoMgr);
}
/**
* Find the layer name in a group element.
* @param {Element} group The group element to search in.
* @returns {string} The layer name or empty string.
*/
function findLayerNameInGroup (group) {
const sel = group.querySelector('title');
return sel ? sel.textContent : '';
}
/**
* Given a set of names, return a new unique name.
* @param {string[]} existingLayerNames - Existing layer names.
* @returns {string} - The new name.
*/
function getNewLayerName (existingLayerNames) {
let i = 1;
// TODO(codedread): What about internationalization of "Layer"?
while (existingLayerNames.includes(('Layer ' + i))) { i++; }
return 'Layer ' + i;
}
/**
* This class encapsulates the concept of a SVG-edit drawing.
*/
export class Drawing {
/**
* @param {SVGSVGElement} svgElem - The SVG DOM Element that this JS object
* encapsulates. If the svgElem has a se:nonce attribute on it, then
* IDs will use the nonce as they are generated.
* @param {string} [optIdPrefix=svg_] - The ID prefix to use.
* @throws {Error} If not initialized with an SVG element
*/
constructor (svgElem, optIdPrefix) {
if (!svgElem || !svgElem.tagName || !svgElem.namespaceURI ||
svgElem.tagName !== 'svg' || svgElem.namespaceURI !== NS.SVG) {
throw new Error('Error: svgedit.draw.Drawing instance initialized without a <svg> element');
}
/**
* The SVG DOM Element that represents this drawing.
* @type {SVGSVGElement}
*/
this.svgElem_ = svgElem;
/**
* The latest object number used in this drawing.
* @type {Integer}
*/
this.obj_num = 0;
/**
* The prefix to prepend to each element id in the drawing.
* @type {string}
*/
this.idPrefix = optIdPrefix || 'svg_';
/**
* An array of released element ids to immediately reuse.
* @type {Integer[]}
*/
this.releasedNums = [];
/**
* The z-ordered array of Layer objects. Each layer has a name
* and group element.
* The first layer is the one at the bottom of the rendering.
* @type {Layer[]}
*/
this.all_layers = [];
/**
* Map of all_layers by name.
*
* Note: Layers are ordered, but referenced externally by name; so, we need both container
* types depending on which function is called (i.e. all_layers and layer_map).
*
* @type {PlainObject<string, Layer>}
*/
this.layer_map = {};
/**
* The current layer being used.
* @type {Layer}
*/
this.current_layer = null;
/**
* The nonce to use to uniquely identify elements across drawings.
* @type {!string}
*/
this.nonce_ = '';
const n = this.svgElem_.getAttributeNS(NS.SE, 'nonce');
// If already set in the DOM, use the nonce throughout the document
// else, if randomizeIds(true) has been called, create and set the nonce.
if (n && randIds !== RandomizeModes.NEVER_RANDOMIZE) {
this.nonce_ = n;
} else if (randIds === RandomizeModes.ALWAYS_RANDOMIZE) {
this.setNonce(Math.floor(Math.random() * 100001));
}
}
/**
* @param {string} id Element ID to retrieve
* @returns {Element} SVG element within the root SVGSVGElement
*/
getElem_ (id) {
if (this.svgElem_.querySelector) {
// querySelector lookup
return this.svgElem_.querySelector('#' + id);
}
// jQuery lookup: twice as slow as xpath in FF
return this.svgElem_.querySelector('[id=' + id + ']');
}
/**
* @returns {SVGSVGElement}
*/
getSvgElem () {
return this.svgElem_;
}
/**
* @returns {!(string|Integer)} The previously set nonce
*/
getNonce () {
return this.nonce_;
}
/**
* @param {!(string|Integer)} n The nonce to set
* @returns {void}
*/
setNonce (n) {
this.svgElem_.setAttributeNS(NS.XMLNS, 'xmlns:se', NS.SE);
this.svgElem_.setAttributeNS(NS.SE, 'se:nonce', n);
this.nonce_ = n;
}
/**
* Clears any previously set nonce.
* @returns {void}
*/
clearNonce () {
// We deliberately leave any se:nonce attributes alone,
// we just don't use it to randomize ids.
this.nonce_ = '';
}
/**
* Returns the latest object id as a string.
* @returns {string} The latest object Id.
*/
getId () {
return this.nonce_
? this.idPrefix + this.nonce_ + '_' + this.obj_num
: this.idPrefix + this.obj_num;
}
/**
* Returns the next object Id as a string.
* @returns {string} The next object Id to use.
*/
getNextId () {
const oldObjNum = this.obj_num;
let restoreOldObjNum = false;
// If there are any released numbers in the release stack,
// use the last one instead of the next obj_num.
// We need to temporarily use obj_num as that is what getId() depends on.
if (this.releasedNums.length > 0) {
this.obj_num = this.releasedNums.pop();
restoreOldObjNum = true;
} else {
// If we are not using a released id, then increment the obj_num.
this.obj_num++;
}
// Ensure the ID does not exist.
let id = this.getId();
while (this.getElem_(id)) {
if (restoreOldObjNum) {
this.obj_num = oldObjNum;
restoreOldObjNum = false;
}
this.obj_num++;
id = this.getId();
}
// Restore the old object number if required.
if (restoreOldObjNum) {
this.obj_num = oldObjNum;
}
return id;
}
/**
* Releases the object Id, letting it be used as the next id in getNextId().
* This method DOES NOT remove any elements from the DOM, it is expected
* that client code will do this.
* @param {string} id - The id to release.
* @returns {boolean} True if the id was valid to be released, false otherwise.
*/
releaseId (id) {
// confirm if this is a valid id for this Document, else return false
const front = this.idPrefix + (this.nonce_ ? this.nonce_ + '_' : '');
if (typeof id !== 'string' || !id.startsWith(front)) {
return false;
}
// extract the obj_num of this id
const num = Number.parseInt(id.substr(front.length));
// if we didn't get a positive number or we already released this number
// then return false.
if (typeof num !== 'number' || num <= 0 || this.releasedNums.includes(num)) {
return false;
}
// push the released number into the released queue
this.releasedNums.push(num);
return true;
}
/**
* Returns the number of layers in the current drawing.
* @returns {Integer} The number of layers in the current drawing.
*/
getNumLayers () {
return this.all_layers.length;
}
/**
* Check if layer with given name already exists.
* @param {string} name - The layer name to check
* @returns {boolean}
*/
hasLayer (name) {
return this.layer_map[name] !== undefined;
}
/**
* Returns the name of the ith layer. If the index is out of range, an empty string is returned.
* @param {Integer} i - The zero-based index of the layer you are querying.
* @returns {string} The name of the ith layer (or the empty string if none found)
*/
getLayerName (i) {
return i >= 0 && i < this.getNumLayers() ? this.all_layers[i].getName() : '';
}
/**
* @returns {SVGGElement|null} The SVGGElement representing the current layer.
*/
getCurrentLayer () {
return this.current_layer ? this.current_layer.getGroup() : null;
}
/**
* Get a layer by name.
* @param {string} name
* @returns {SVGGElement} The SVGGElement representing the named layer or null.
*/
getLayerByName (name) {
const layer = this.layer_map[name];
return layer ? layer.getGroup() : null;
}
/**
* Returns the name of the currently selected layer. If an error occurs, an empty string
* is returned.
* @returns {string} The name of the currently active layer (or the empty string if none found).
*/
getCurrentLayerName () {
return this.current_layer ? this.current_layer.getName() : '';
}
/**
* Set the current layer's name.
* @param {string} name - The new name.
* @param {module:history.HistoryRecordingService} hrService - History recording service
* @returns {string|null} The new name if changed; otherwise, null.
*/
setCurrentLayerName (name, hrService) {
let finalName = null;
if (this.current_layer) {
const oldName = this.current_layer.getName();
finalName = this.current_layer.setName(name, hrService);
if (finalName) {
delete this.layer_map[oldName];
this.layer_map[finalName] = this.current_layer;
}
}
return finalName;
}
/**
* Set the current layer's position.
* @param {Integer} newpos - The zero-based index of the new position of the layer. Range should be 0 to layers-1
* @returns {{title: SVGGElement, previousName: string}|null} If the name was changed, returns {title:SVGGElement, previousName:string}; otherwise null.
*/
setCurrentLayerPosition (newpos) {
const layerCount = this.getNumLayers();
if (!this.current_layer || newpos < 0 || newpos >= layerCount) {
return null;
}
let oldpos;
for (oldpos = 0; oldpos < layerCount; ++oldpos) {
if (this.all_layers[oldpos] === this.current_layer) { break; }
}
// some unknown error condition (current_layer not in all_layers)
if (oldpos === layerCount) { return null; }
if (oldpos !== newpos) {
// if our new position is below us, we need to insert before the node after newpos
const currentGroup = this.current_layer.getGroup();
const oldNextSibling = currentGroup.nextSibling;
let refGroup = null;
if (newpos > oldpos) {
if (newpos < layerCount - 1) {
refGroup = this.all_layers[newpos + 1].getGroup();
}
// if our new position is above us, we need to insert before the node at newpos
} else {
refGroup = this.all_layers[newpos].getGroup();
}
this.svgElem_.insertBefore(currentGroup, refGroup); // Ok to replace with `refGroup.before(currentGroup);`?
this.identifyLayers();
this.setCurrentLayer(this.getLayerName(newpos));
return {
currentGroup,
oldNextSibling
};
}
return null;
}
/**
* @param {module:history.HistoryRecordingService} hrService
* @returns {void}
*/
mergeLayer (hrService) {
const currentGroup = this.current_layer.getGroup();
const prevGroup = currentGroup.previousElementSibling;
if (!prevGroup) { return; }
hrService.startBatchCommand('Merge Layer');
const layerNextSibling = currentGroup.nextSibling;
hrService.removeElement(currentGroup, layerNextSibling, this.svgElem_);
while (currentGroup.firstChild) {
const child = currentGroup.firstChild;
if (child.localName === 'title') {
hrService.removeElement(child, child.nextSibling, currentGroup);
child.remove();
continue;
}
const oldNextSibling = child.nextSibling;
prevGroup.append(child);
hrService.moveElement(child, oldNextSibling, currentGroup);
}
// Remove current layer's group
this.current_layer.removeGroup();
// Remove the current layer and set the previous layer as the new current layer
const index = this.all_layers.indexOf(this.current_layer);
if (index > 0) {
const name = this.current_layer.getName();
this.current_layer = this.all_layers[index - 1];
this.all_layers.splice(index, 1);
delete this.layer_map[name];
}
hrService.endBatchCommand();
}
/**
* @param {module:history.HistoryRecordingService} hrService
* @returns {void}
*/
mergeAllLayers (hrService) {
// Set the current layer to the last layer.
this.current_layer = this.all_layers[this.all_layers.length - 1];
hrService.startBatchCommand('Merge all Layers');
while (this.all_layers.length > 1) {
this.mergeLayer(hrService);
}
hrService.endBatchCommand();
}
/**
* Sets the current layer. If the name is not a valid layer name, then this
* function returns `false`. Otherwise it returns `true`. This is not an
* undo-able action.
* @param {string} name - The name of the layer you want to switch to.
* @returns {boolean} `true` if the current layer was switched, otherwise `false`
*/
setCurrentLayer (name) {
const layer = this.layer_map[name];
if (layer) {
if (this.current_layer) {
this.current_layer.deactivate();
}
this.current_layer = layer;
this.current_layer.activate();
return true;
}
return false;
}
/**
* Deletes the current layer from the drawing and then clears the selection.
* This function then calls the 'changed' handler. This is an undoable action.
* @todo Does this actually call the 'changed' handler?
* @returns {SVGGElement} The SVGGElement of the layer removed or null.
*/
deleteCurrentLayer () {
if (this.current_layer && this.getNumLayers() > 1) {
const oldLayerGroup = this.current_layer.removeGroup();
this.identifyLayers();
return oldLayerGroup;
}
return null;
}
/**
* Updates layer system and sets the current layer to the
* top-most layer (last `<g>` child of this drawing).
* @returns {void}
*/
identifyLayers () {
this.all_layers = [];
this.layer_map = {};
const numchildren = this.svgElem_.childNodes.length;
// loop through all children of SVG element
const orphans = []; const layernames = [];
let layer = null;
let childgroups = false;
for (let i = 0; i < numchildren; ++i) {
const child = this.svgElem_.childNodes.item(i);
// for each g, find its layer name
if (child && child.nodeType === 1) {
if (child.tagName === 'g') {
childgroups = true;
const name = findLayerNameInGroup(child);
if (name) {
layernames.push(name);
layer = new Layer(name, child);
this.all_layers.push(layer);
this.layer_map[name] = layer;
} else {
// if group did not have a name, it is an orphan
orphans.push(child);
}
} else if (visElems.includes(child.nodeName)) {
// Child is "visible" (i.e. not a <title> or <defs> element), so it is an orphan
orphans.push(child);
}
}
}
// If orphans or no layers found, create a new layer and add all the orphans to it
if (orphans.length > 0 || !childgroups) {
layer = new Layer(getNewLayerName(layernames), null, this.svgElem_);
layer.appendChildren(orphans);
this.all_layers.push(layer);
this.layer_map[name] = layer;
} else {
layer.activate();
}
this.current_layer = layer;
}
/**
* Creates a new top-level layer in the drawing with the given name and
* makes it the current layer.
* @param {string} name - The given name. If the layer name exists, a new name will be generated.
* @param {module:history.HistoryRecordingService} hrService - History recording service
* @returns {SVGGElement} The SVGGElement of the new layer, which is
* also the current layer of this drawing.
*/
createLayer (name, hrService) {
if (this.current_layer) {
this.current_layer.deactivate();
}
// Check for duplicate name.
if (name === undefined || name === null || name === '' || this.layer_map[name]) {
name = getNewLayerName(Object.keys(this.layer_map));
}
// Crate new layer and add to DOM as last layer
const layer = new Layer(name, null, this.svgElem_);
// Like to assume hrService exists, but this is backwards compatible with old version of createLayer.
if (hrService) {
hrService.startBatchCommand('Create Layer');
hrService.insertElement(layer.getGroup());
hrService.endBatchCommand();
}
this.all_layers.push(layer);
this.layer_map[name] = layer;
this.current_layer = layer;
return layer.getGroup();
}
/**
* Creates a copy of the current layer with the given name and makes it the current layer.
* @param {string} name - The given name. If the layer name exists, a new name will be generated.
* @param {module:history.HistoryRecordingService} hrService - History recording service
* @returns {SVGGElement} The SVGGElement of the new layer, which is
* also the current layer of this drawing.
*/
cloneLayer (name, hrService) {
if (!this.current_layer) { return null; }
this.current_layer.deactivate();
// Check for duplicate name.
if (name === undefined || name === null || name === '' || this.layer_map[name]) {
name = getNewLayerName(Object.keys(this.layer_map));
}
// Create new group and add to DOM just after current_layer
const currentGroup = this.current_layer.getGroup();
const layer = new Layer(name, currentGroup, this.svgElem_);
const group = layer.getGroup();
// Clone children
const children = [ ...currentGroup.childNodes ];
children.forEach((child) => {
if (child.localName === 'title') { return; }
group.append(this.copyElem(child));
});
if (hrService) {
hrService.startBatchCommand('Duplicate Layer');
hrService.insertElement(group);
hrService.endBatchCommand();
}
// Update layer containers and current_layer.
const index = this.all_layers.indexOf(this.current_layer);
if (index >= 0) {
this.all_layers.splice(index + 1, 0, layer);
} else {
this.all_layers.push(layer);
}
this.layer_map[name] = layer;
this.current_layer = layer;
return group;
}
/**
* Returns whether the layer is visible. If the layer name is not valid,
* then this function returns `false`.
* @param {string} layerName - The name of the layer which you want to query.
* @returns {boolean} The visibility state of the layer, or `false` if the layer name was invalid.
*/
getLayerVisibility (layerName) {
const layer = this.layer_map[layerName];
return layer ? layer.isVisible() : false;
}
/**
* Sets the visibility of the layer. If the layer name is not valid, this
* function returns `null`, otherwise it returns the `SVGElement` representing
* the layer. This is an undo-able action.
* @param {string} layerName - The name of the layer to change the visibility
* @param {boolean} bVisible - Whether the layer should be visible
* @returns {?SVGGElement} The SVGGElement representing the layer if the
* `layerName` was valid, otherwise `null`.
*/
setLayerVisibility (layerName, bVisible) {
if (typeof bVisible !== 'boolean') {
return null;
}
const layer = this.layer_map[layerName];
if (!layer) { return null; }
layer.setVisible(bVisible);
return layer.getGroup();
}
/**
* Returns the opacity of the given layer. If the input name is not a layer, `null` is returned.
* @param {string} layerName - name of the layer on which to get the opacity
* @returns {?Float} The opacity value of the given layer. This will be a value between 0.0 and 1.0, or `null`
* if `layerName` is not a valid layer
*/
getLayerOpacity (layerName) {
const layer = this.layer_map[layerName];
if (!layer) { return null; }
return layer.getOpacity();
}
/**
* Sets the opacity of the given layer. If the input name is not a layer,
* nothing happens. If opacity is not a value between 0.0 and 1.0, then
* nothing happens.
* NOTE: this function exists solely to apply a highlighting/de-emphasis
* effect to a layer. When it is possible for a user to affect the opacity
* of a layer, we will need to allow this function to produce an undo-able
* action.
* @param {string} layerName - Name of the layer on which to set the opacity
* @param {Float} opacity - A float value in the range 0.0-1.0
* @returns {void}
*/
setLayerOpacity (layerName, opacity) {
if (typeof opacity !== 'number' || opacity < 0.0 || opacity > 1.0) {
return;
}
const layer = this.layer_map[layerName];
if (layer) {
layer.setOpacity(opacity);
}
}
/**
* Create a clone of an element, updating its ID and its children's IDs when needed.
* @param {Element} el - DOM element to clone
* @returns {Element}
*/
copyElem (el) {
const that = this;
const getNextIdClosure = function () { return that.getNextId(); };
return utilCopyElem(el, getNextIdClosure);
}
}
/**
* Called to ensure that drawings will or will not have randomized ids.
* The currentDrawing will have its nonce set if it doesn't already.
* @function module:draw.randomizeIds
* @param {boolean} enableRandomization - flag indicating if documents should have randomized ids
* @param {draw.Drawing} currentDrawing
* @returns {void}
*/
export const randomizeIds = function (enableRandomization, currentDrawing) {
randIds = enableRandomization === false
? RandomizeModes.NEVER_RANDOMIZE
: RandomizeModes.ALWAYS_RANDOMIZE;
if (randIds === RandomizeModes.ALWAYS_RANDOMIZE && !currentDrawing.getNonce()) {
currentDrawing.setNonce(Math.floor(Math.random() * 100001));
} else if (randIds === RandomizeModes.NEVER_RANDOMIZE && currentDrawing.getNonce()) {
currentDrawing.clearNonce();
}
};
// Layer API Functions
/**
* Group: Layers.
*/
/**
* @see {@link https://api.jquery.com/jQuery.data/}
* @name external:jQuery.data
*/
/**
* @interface module:draw.DrawCanvasInit
* @property {module:path.pathActions} pathActions
* @property {module:history.UndoManager} undoMgr
*/
/**
* @function module:draw.DrawCanvasInit#getCurrentGroup
* @returns {Element}
*/
/**
* @function module:draw.DrawCanvasInit#setCurrentGroup
* @param {Element} cg
* @returns {void}
*/
/**
* @function module:draw.DrawCanvasInit#getSelectedElements
* @returns {Element[]} the array with selected DOM elements
*/
/**
* @function module:draw.DrawCanvasInit#getSVGContent
* @returns {SVGSVGElement}
*/
/**
* @function module:draw.DrawCanvasInit#getCurrentDrawing
* @returns {module:draw.Drawing}
*/
/**
* @function module:draw.DrawCanvasInit#clearSelection
* @param {boolean} [noCall] - When `true`, does not call the "selected" handler
* @returns {void}
*/
/**
* Run the callback function associated with the given event.
* @function module:draw.DrawCanvasInit#call
* @param {"changed"|"contextset"} ev - String with the event name
* @param {module:svgcanvas.SvgCanvas#event:changed|module:svgcanvas.SvgCanvas#event:contextset} arg - Argument to pass through to the callback
* function. If the event is "changed", a (single-item) array of `Element`s is
* passed. If the event is "contextset", the arg is `null` or `Element`.
* @returns {void}
*/
/**
* @function module:draw.DrawCanvasInit#addCommandToHistory
* @param {Command} cmd
* @returns {void}
*/
/**
* @function module:draw.DrawCanvasInit#changeSVGContent
* @returns {void}
*/
let canvas_;
/**
* @function module:draw.init
* @param {module:draw.DrawCanvasInit} canvas
* @returns {void}
*/
export const init = function (canvas) {
canvas_ = canvas;
};
/**
* Updates layer system.
* @function module:draw.identifyLayers
* @returns {void}
*/
export const identifyLayers = function () {
leaveContext();
canvas_.getCurrentDrawing().identifyLayers();
};
/**
* Creates a new top-level layer in the drawing with the given name, sets the current layer
* to it, and then clears the selection. This function then calls the 'changed' handler.
* This is an undoable action.
* @function module:draw.createLayer
* @param {string} name - The given name
* @param {module:history.HistoryRecordingService} hrService
* @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void}
*/
export const createLayer = function (name, hrService) {
const newLayer = canvas_.getCurrentDrawing().createLayer(
name,
historyRecordingService(hrService)
);
canvas_.clearSelection();
canvas_.call('changed', [ newLayer ]);
};
/**
* Creates a new top-level layer in the drawing with the given name, copies all the current layer's contents
* to it, and then clears the selection. This function then calls the 'changed' handler.
* This is an undoable action.
* @function module:draw.cloneLayer
* @param {string} name - The given name. If the layer name exists, a new name will be generated.
* @param {module:history.HistoryRecordingService} hrService - History recording service
* @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {void}
*/
export const cloneLayer = function (name, hrService) {
// Clone the current layer and make the cloned layer the new current layer
const newLayer = canvas_.getCurrentDrawing().cloneLayer(name, historyRecordingService(hrService));
canvas_.clearSelection();
leaveContext();
canvas_.call('changed', [ newLayer ]);
};
/**
* Deletes the current layer from the drawing and then clears the selection. This function
* then calls the 'changed' handler. This is an undoable action.
* @function module:draw.deleteCurrentLayer
* @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {boolean} `true` if an old layer group was found to delete
*/
export const deleteCurrentLayer = function () {
let currentLayer = canvas_.getCurrentDrawing().getCurrentLayer();
const { nextSibling } = currentLayer;
const parent = currentLayer.parentNode;
currentLayer = canvas_.getCurrentDrawing().deleteCurrentLayer();
if (currentLayer) {
const batchCmd = new BatchCommand('Delete Layer');
// store in our Undo History
batchCmd.addSubCommand(new RemoveElementCommand(currentLayer, nextSibling, parent));
canvas_.addCommandToHistory(batchCmd);
canvas_.clearSelection();
canvas_.call('changed', [ parent ]);
return true;
}
return false;
};
/**
* Sets the current layer. If the name is not a valid layer name, then this function returns
* false. Otherwise it returns true. This is not an undo-able action.
* @function module:draw.setCurrentLayer
* @param {string} name - The name of the layer you want to switch to.
* @returns {boolean} true if the current layer was switched, otherwise false
*/
export const setCurrentLayer = function (name) {
const result = canvas_.getCurrentDrawing().setCurrentLayer(toXml(name));
if (result) {
canvas_.clearSelection();
}
return result;
};
/**
* Renames the current layer. If the layer name is not valid (i.e. unique), then this function
* does nothing and returns `false`, otherwise it returns `true`. This is an undo-able action.
* @function module:draw.renameCurrentLayer
* @param {string} newName - the new name you want to give the current layer. This name must
* be unique among all layer names.
* @fires module:svgcanvas.SvgCanvas#event:changed
* @returns {boolean} Whether the rename succeeded
*/
export const renameCurrentLayer = function (newName) {
const drawing = canvas_.getCurrentDrawing();
const layer = drawing.getCurrentLayer();
if (layer) {
const result = drawing.setCurrentLayerName(newName, historyRecordingService());
if (result) {
canvas_.call('changed', [ layer ]);
return true;
}
}
return false;
};
/**
* Changes the position of the current layer to the new value. If the new index is not valid,
* this function does nothing and returns false, otherwise it returns true. This is an
* undo-able action.
* @function module:draw.setCurrentLayerPosition
* @param {Integer} newPos - The zero-based index of the new position of the layer. This should be between
* 0 and (number of layers - 1)
* @returns {boolean} `true` if the current layer position was changed, `false` otherwise.
*/
export const setCurrentLayerPosition = function (newPos) {
const drawing = canvas_.getCurrentDrawing();
const result = drawing.setCurrentLayerPosition(newPos);
if (result) {
canvas_.addCommandToHistory(new MoveElementCommand(result.currentGroup, result.oldNextSibling, canvas_.getSVGContent()));
return true;
}
return false;
};
/**
* Sets the visibility of the layer. If the layer name is not valid, this function return
* `false`, otherwise it returns `true`. This is an undo-able action.
* @function module:draw.setLayerVisibility
* @param {string} layerName - The name of the layer to change the visibility
* @param {boolean} bVisible - Whether the layer should be visible
* @returns {boolean} true if the layer's visibility was set, false otherwise
*/
export const setLayerVisibility = function (layerName, bVisible) {
const drawing = canvas_.getCurrentDrawing();
const prevVisibility = drawing.getLayerVisibility(layerName);
const layer = drawing.setLayerVisibility(layerName, bVisible);
if (layer) {
const oldDisplay = prevVisibility ? 'inline' : 'none';
canvas_.addCommandToHistory(new ChangeElementCommand(layer, { display: oldDisplay }, 'Layer Visibility'));
} else {
return false;
}
if (layer === drawing.getCurrentLayer()) {
canvas_.clearSelection();
canvas_.pathActions.clear();
}
// call('changed', [selected]);
return true;
};
/**
* Moves the selected elements to layerName. If the name is not a valid layer name, then `false`
* is returned. Otherwise it returns `true`. This is an undo-able action.
* @function module:draw.moveSelectedToLayer
* @param {string} layerName - The name of the layer you want to which you want to move the selected elements
* @returns {boolean} Whether the selected elements were moved to the layer.
*/
export const moveSelectedToLayer = function (layerName) {
// find the layer
const drawing = canvas_.getCurrentDrawing();
const layer = drawing.getLayerByName(layerName);
if (!layer) { return false; }
const batchCmd = new BatchCommand('Move Elements to Layer');
// loop for each selected element and move it
const selElems = canvas_.getSelectedElements();
let i = selElems.length;
while (i--) {
const elem = selElems[i];
if (!elem) { continue; }
const oldNextSibling = elem.nextSibling;
// TODO: this is pretty brittle!
const oldLayer = elem.parentNode;
layer.append(elem);
batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer));
}
canvas_.addCommandToHistory(batchCmd);
return true;
};
/**
* @function module:draw.mergeLayer
* @param {module:history.HistoryRecordingService} hrService
* @returns {void}
*/
export const mergeLayer = function (hrService) {
canvas_.getCurrentDrawing().mergeLayer(historyRecordingService(hrService));
canvas_.clearSelection();
leaveContext();
canvas_.changeSVGContent();
};
/**
* @function module:draw.mergeAllLayers
* @param {module:history.HistoryRecordingService} hrService
* @returns {void}
*/
export const mergeAllLayers = function (hrService) {
canvas_.getCurrentDrawing().mergeAllLayers(historyRecordingService(hrService));
canvas_.clearSelection();
leaveContext();
canvas_.changeSVGContent();
};
/**
* Return from a group context to the regular kind, make any previously
* disabled elements enabled again.
* @function module:draw.leaveContext
* @fires module:svgcanvas.SvgCanvas#event:contextset
* @returns {void}
*/
export const leaveContext = function () {
const len = disabledElems.length;
const dataStorage = canvas_.getDataStorage();
if (len) {
for (let i = 0; i < len; i++) {
const elem = disabledElems[i];
const orig = dataStorage.get(elem, 'orig_opac');
if (orig !== 1) {
elem.setAttribute('opacity', orig);
} else {
elem.removeAttribute('opacity');
}
elem.setAttribute('style', 'pointer-events: inherit');
}
disabledElems = [];
canvas_.clearSelection(true);
canvas_.call('contextset', null);
}
canvas_.setCurrentGroup(null);
};
/**
* Set the current context (for in-group editing).
* @function module:draw.setContext
* @param {Element} elem
* @fires module:svgcanvas.SvgCanvas#event:contextset
* @returns {void}
*/
export const setContext = function (elem) {
const dataStorage = canvas_.getDataStorage();
leaveContext();
if (typeof elem === 'string') {
elem = getElem(elem);
}
// Edit inside this group
canvas_.setCurrentGroup(elem);
// Disable other elements
const parentsUntil = getParentsUntil(elem, '#svgcontent');
const siblings = [];
parentsUntil.forEach(function (parent) {
const elements = Array.prototype.filter.call(parent.parentNode.children, function(child){
return child !== parent;
});
elements.forEach(function (element) {
siblings.push(element);
});
});
siblings.forEach(function (curthis) {
const opac = curthis.getAttribute('opacity') || 1;
// Store the original's opacity
dataStorage.put(curthis, 'orig_opac', opac);
curthis.setAttribute('opacity', opac * 0.33);
curthis.setAttribute('style', 'pointer-events: none');
disabledElems.push(curthis);
});
canvas_.clearSelection();
canvas_.call('contextset', canvas_.getCurrentGroup());
};
/**
* @memberof module:draw
* @class Layer
* @see {@link module:layer.Layer}
*/
export { Layer };
</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-blur.html">blur</a></li><li><a href="module-browser.html">browser</a></li><li><a href="module-clear.html">clear</a></li><li><a href="module-contextmenu.html">contextmenu</a></li><li><a href="module-coords.html">coords</a></li><li><a href="module-draw.html">draw</a></li><li><a href="module-elem-get-set%2520get%2520and%2520set%2520methods..html">elem-get-set get and set methods.</a></li><li><a href="module-event.html">event</a></li><li><a href="module-history.html">history</a></li><li><a href="module-jGraduate.html">jGraduate</a></li><li><a href="module-jPicker.html">jPicker</a></li><li><a href="module-jQueryAttr.html">jQueryAttr</a></li><li><a href="module-layer.html">layer</a></li><li><a href="module-locale.html">locale</a></li><li><a href="module-math.html">math</a></li><li><a href="module-namespaces.html">namespaces</a></li><li><a href="module-path.html">path</a></li><li><a href="module-recalculate.html">recalculate</a></li><li><a href="module-sanitize.html">sanitize</a></li><li><a href="module-select.html">select</a></li><li><a href="module-selected-elem.html">selected-elem</a></li><li><a href="module-selection.html">selection</a></li><li><a href="module-svg.html">svg</a></li><li><a href="module-svgcanvas.html">svgcanvas</a></li><li><a href="module-SVGEditor.html">SVGEditor</a></li><li><a href="module-text-actions%2520Tools%2520for%2520Text%2520edit%2520functions.html">text-actions Tools for Text edit functions</a></li><li><a href="module-undo.html">undo</a></li><li><a href="module-units.html">units</a></li><li><a href="module-utilities.html">utilities</a></li></ul><h3>Externals</h3><ul><li><a href="external-JamilihArray.html">JamilihArray</a></li><li><a href="external-jQuery.html">jQuery</a></li><li><a href="external-Math.html">Math</a></li><li><a href="external-MouseEvent.html">MouseEvent</a></li><li><a href="external-Window.html">Window</a></li></ul><h3>Namespaces</h3><ul><li><a href="external-jQuery.fn.html">fn</a></li><li><a href="external-jQuery.fn.$.fn.jPicker.defaults.html">defaults</a></li><li><a href="external-jQuery.fn.exports.jPickerMethod.html">exports.jPickerMethod</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.html">jGraduateDefaults</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.images.html">images</a></li><li><a href="external-jQuery.fn.jGraduateDefaults.window.html">window</a></li><li><a href="external-jQuery.jGraduate.html">jGraduate</a></li><li><a href="external-jQuery.jPicker.html">jPicker</a></li><li><a href="external-jQuery.jPicker.ColorMethods.html">ColorMethods</a></li><li><a href="module-path.html#.pathActions">pathActions</a></li><li><a href="module-svgcanvas.SvgCanvas_pathActions.html">pathActions</a></li><li><a href="module-svgcanvas.SvgCanvas_textActions.html">textActions</a></li></ul><h3>Classes</h3><ul><li><a href="BottomPanel.html">BottomPanel</a></li><li><a href="configObj.html">configObj</a></li><li><a href="Dropdown.html">Dropdown</a></li><li><a href="EditorStartup.html">EditorStartup</a></li><li><a href="ElixMenuButton.html">ElixMenuButton</a></li><li><a href="ElixNumberSpinBox.html">ElixNumberSpinBox</a></li><li><a href="ExplorerButton.html">ExplorerButton</a></li><li><a href="external-jQuery.jGraduate.Paint.html">Paint</a></li><li><a href="external-jQuery.jPicker.Color.html">Color</a></li><li><a href="FlyingButton.html">FlyingButton</a></li><li><a href="LayersPanel.html">LayersPanel</a></li><li><a href="LeftPanel.html">LeftPanel</a></li><li><a href="MainMenu.html">MainMenu</a></li><li><a href="module.exports.html">exports</a></li><li><a href="module.exports_module.exports.html">exports</a></li><li><a href="module-draw.Drawing.html">Drawing</a></li><li><a href="module-draw.Layer.html">Layer</a></li><li><a href="module-history.BatchCommand.html">BatchCommand</a></li><li><a href="module-history.ChangeElementCommand.html">ChangeElementCommand</a></li><li><a href="module-history.Command.html">Command</a></li><li><a href="module-history.HistoryRecordingService.html">HistoryRecordingService</a></li><li><a href="module-history.InsertElementCommand.html">InsertElementCommand</a></li><li><a href="module-history.MoveElementCommand.html">MoveElementCommand</a></li><li><a href="module-history.RemoveElementCommand.html">RemoveElementCommand</a></li><li><a href="module-history.UndoManager.html">UndoManager</a></li><li><a href="module-jPicker.module.exports.html">module.exports</a></li><li><a href="module-layer.Layer.html">Layer</a></li><li><a href="module-path.Path.html">Path</a></li><li><a href="module-path.Segment.html">Segment</a></li><li><a href="module-select.Selector.html">Selector</a></li><li><a href="module-select.SelectorManager.html">SelectorManager</a></li><li><a href="module-svgcanvas.SvgCanvas.html">SvgCanvas</a></li><li><a href="module-SVGEditor-Editor.html">Editor</a></li><li><a href="NumberSpinBox.html">NumberSpinBox</a></li><li><a href="PaintBox.html">PaintBox</a></li><li><a href="PlainNumberSpinBox.html">PlainNumberSpinBox</a></li><li><a href="Rulers.html">Rulers</a></li><li><a href="SeCMenuDialog.html">SeCMenuDialog</a></li><li><a href="SeCMenuLayerDialog.html">SeCMenuLayerDialog</a></li><li><a href="SeColorPicker.html">SeColorPicker</a></li><li><a href="SeEditPrefsDialog.html">SeEditPrefsDialog</a></li><li><a href="SeExportDialog.html">SeExportDialog</a></li><li><a href="SeImgPropDialog.html">SeImgPropDialog</a></li><li><a href="SEInput.html">SEInput</a></li><li><a href="SeList.html">SeList</a></li><li><a href="SeMenu.html">SeMenu</a></li><li><a href="SeMenuItem.html">SeMenuItem</a></li><li><a href="SEPalette.html">SEPalette</a></li><li><a href="SePlainAlertDialog.html">SePlainAlertDialog</a></li><li><a href="SePlainBorderButton.html">SePlainBorderButton</a></li><li><a href="SePromptDialog.html">SePromptDialog</a></li><li><a href="SESpinInput.html">SESpinInput</a></li><li><a href="SeStorageDialog.html">SeStorageDialog</a></li><li><a href="SeSvgSourceEditorDialog.html">SeSvgSourceEditorDialog</a></li><li><a href="SeText.html">SeText</a></li><li><a href="ToolButton.html">ToolButton</a></li><li><a href="TopPanel.html">TopPanel</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-coords.EditorContext.html">EditorContext</a></li><li><a href="module-draw.DrawCanvasInit.html">DrawCanvasInit</a></li><li><a href="module-history.HistoryCommand.html">HistoryCommand</a></li><li><a href="module-history.HistoryEventHandler.html">HistoryEventHandler</a></li><li><a href="module-locale.LocaleEditorInit.html">LocaleEditorInit</a></li><li><a href="module-path.EditorContext.html">EditorContext</a></li><li><a href="module-recalculate.EditorContext.html">EditorContext</a></li><li><a href="module-select.SVGFactory.html">SVGFactory</a></li><li><a href="module-svgcanvas.PrivateMethods.html">PrivateMethods</a></li><li><a href="module-SVGEditor.Config.html">Config</a></li><li><a href="module-SVGEditor.Prefs.html">Prefs</a></li><li><a href="module-SVGthis.CustomHandler.html">CustomHandler</a></li><li><a href="module-units.ElementContainer.html">ElementContainer</a></li><li><a href="module-utilities.EditorContext.html">EditorContext</a></li></ul><h3>Events</h3><ul><li><a href="module-history-Command.html#event:event:history">history</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:changed">changed</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:cleared">cleared</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:contextset">contextset</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:exported">exported</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:exportedPDF">exportedPDF</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_addLangData">ext_addLangData</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_callback">ext_callback</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_canvasUpdated">ext_canvasUpdated</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_elementChanged">ext_elementChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_elementTransition">ext_elementTransition</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_IDsUpdated">ext_IDsUpdated</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_langChanged">ext_langChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_langReady">ext_langReady</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_mouseDown">ext_mouseDown</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_mouseMove">ext_mouseMove</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_mouseUp">ext_mouseUp</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_onNewDocument">ext_onNewDocument</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_selectedChanged">ext_selectedChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_toolButtonStateUpdate">ext_toolButtonStateUpdate</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_workareaResized">ext_workareaResized</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:ext_zoomChanged">ext_zoomChanged</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:extension_added">extension_added</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:extensions_added">extensions_added</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:GenericCanvasEvent">GenericCanvasEvent</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:message">message</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:pointsAdded">pointsAdded</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:saved">saved</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:selected">selected</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:setnonce">setnonce</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:transition">transition</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:unsetnonce">unsetnonce</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:updateCanvas">updateCanvas</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:zoomDone">zoomDone</a></li><li><a href="module-svgcanvas.SvgCanvas.html#event:event:zoomed">zoomed</a></li><li><a href="module-SVGEditor.html#event:event:svgEditorReadyEvent">svgEditorReadyEvent</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-CanvasAPI.html">CanvasAPI</a></li><li><a href="tutorial-Editor.html">Editor</a></li><li><a href="tutorial-EditorAPI.html">EditorAPI</a></li><li><a href="tutorial-Events.html">Events</a></li><li><a href="tutorial-FrequentlyAskedQuestions.html">Frequently Asked Questions (FAQ)</a></li></ul><h3>Global</h3><ul><li><a href="global.html#attributeChangedCallback">attributeChangedCallback</a></li><li><a href="global.html#connectedCallback">connectedCallback</a></li><li><a href="global.html#constructor">constructor</a></li><li><a href="global.html#expireCookie">expireCookie</a></li><li><a href="global.html#findPos">findPos</a></li><li><a href="global.html#formatValueFormatthenumericvalueasastring.Thisisusedafterincrementing/decrementingthevaluetoreformatthevalueasastring.">formatValue
Format the numeric value as a string.
This is used after incrementing/decrementing the value to reformat the
value as a string.</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getClosest">getClosest</a></li><li><a href="global.html#getParents">getParents</a></li><li><a href="global.html#init">init</a></li><li><a href="global.html#inputsize">inputsize</a></li><li><a href="global.html#isNullish">isNullish</a></li><li><a href="global.html#loadloadConfig">load load Config</a></li><li><a href="global.html#loadFromURLLoadconfig/datafromURLifgiven">loadFromURL Load config/data from URL if given</a></li><li><a href="global.html#name">name</a></li><li><a href="global.html#observedAttributes">observedAttributes</a></li><li><a href="global.html#parseValue">parseValue</a></li><li><a href="global.html#pref">pref</a></li><li><a href="global.html#processResults">processResults</a></li><li><a href="global.html#readySignal">readySignal</a></li><li><a href="global.html#regexEscape">regexEscape</a></li><li><a href="global.html#removeStoragePrefCookie">removeStoragePrefCookie</a></li><li><a href="global.html#replaceStoragePrompt">replaceStoragePrompt</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#setupCurConfig">setupCurConfig</a></li><li><a href="global.html#setupCurPrefs">setupCurPrefs</a></li><li><a href="global.html#src">src</a></li><li><a href="global.html#stateEffects">stateEffects</a></li><li><a href="global.html#stepDown">stepDown</a></li><li><a href="global.html#stepUp">stepUp</a></li><li><a href="global.html#touchHandler">touchHandler</a></li><li><a href="global.html#updateLib">updateLib</a></li><li><a href="global.html#value">value</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Mon Nov 08 2021 09:47:00 GMT+0100 (Central European Standard Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>