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
This commit is contained in:
JFH
280
src/svgcanvas/undo.js
Normal file
280
src/svgcanvas/undo.js
Normal file
@@ -0,0 +1,280 @@
|
||||
/**
|
||||
* Tools for undo.
|
||||
* @module undo
|
||||
* @license MIT
|
||||
* @copyright 2011 Jeff Schiller
|
||||
*/
|
||||
import * as draw from './draw.js';
|
||||
import * as hstry from './history.js';
|
||||
import {
|
||||
getRotationAngle, getBBox as utilsGetBBox, isNullish, setHref, getStrokedBBoxDefaultVisible
|
||||
} from '../common/utilities.js';
|
||||
import {
|
||||
isGecko
|
||||
} from '../common/browser.js';
|
||||
import {
|
||||
transformPoint, transformListToTransform
|
||||
} from '../common/math.js';
|
||||
import {
|
||||
getTransformList
|
||||
} from '../common/svgtransformlist.js';
|
||||
|
||||
const {
|
||||
UndoManager, HistoryEventTypes
|
||||
} = hstry;
|
||||
|
||||
let undoContext_ = null;
|
||||
|
||||
/**
|
||||
* @function module:undo.init
|
||||
* @param {module:undo.undoContext} undoContext
|
||||
* @returns {void}
|
||||
*/
|
||||
export const init = function (undoContext) {
|
||||
undoContext_ = undoContext;
|
||||
};
|
||||
|
||||
export const getUndoManager = function () {
|
||||
return new UndoManager({
|
||||
/**
|
||||
* @param {string} eventType One of the HistoryEvent types
|
||||
* @param {module:history.HistoryCommand} cmd Fulfills the HistoryCommand interface
|
||||
* @fires module:undo.SvgCanvas#event:changed
|
||||
* @returns {void}
|
||||
*/
|
||||
handleHistoryEvent (eventType, cmd) {
|
||||
const EventTypes = HistoryEventTypes;
|
||||
// TODO: handle setBlurOffsets.
|
||||
if (eventType === EventTypes.BEFORE_UNAPPLY || eventType === EventTypes.BEFORE_APPLY) {
|
||||
undoContext_.getCanvas().clearSelection();
|
||||
} else if (eventType === EventTypes.AFTER_APPLY || eventType === EventTypes.AFTER_UNAPPLY) {
|
||||
const elems = cmd.elements();
|
||||
undoContext_.getCanvas().pathActions.clear();
|
||||
undoContext_.call('changed', elems);
|
||||
const cmdType = cmd.type();
|
||||
const isApply = (eventType === EventTypes.AFTER_APPLY);
|
||||
if (cmdType === 'MoveElementCommand') {
|
||||
const parent = isApply ? cmd.newParent : cmd.oldParent;
|
||||
if (parent === undoContext_.getSVGContent()) {
|
||||
draw.identifyLayers();
|
||||
}
|
||||
} else if (cmdType === 'InsertElementCommand' || cmdType === 'RemoveElementCommand') {
|
||||
if (cmd.parent === undoContext_.getSVGContent()) {
|
||||
draw.identifyLayers();
|
||||
}
|
||||
if (cmdType === 'InsertElementCommand') {
|
||||
if (isApply) {
|
||||
undoContext_.restoreRefElems(cmd.elem);
|
||||
}
|
||||
} else if (!isApply) {
|
||||
undoContext_.restoreRefElems(cmd.elem);
|
||||
}
|
||||
if (cmd.elem && cmd.elem.tagName === 'use') {
|
||||
undoContext_.getCanvas().setUseData(cmd.elem);
|
||||
}
|
||||
} else if (cmdType === 'ChangeElementCommand') {
|
||||
// if we are changing layer names, re-identify all layers
|
||||
if (cmd.elem.tagName === 'title' &&
|
||||
cmd.elem.parentNode.parentNode === undoContext_.getSVGContent()
|
||||
) {
|
||||
draw.identifyLayers();
|
||||
}
|
||||
const values = isApply ? cmd.newValues : cmd.oldValues;
|
||||
// If stdDeviation was changed, update the blur.
|
||||
if (values.stdDeviation) {
|
||||
undoContext_.getCanvas().setBlurOffsets(cmd.elem.parentNode, values.stdDeviation);
|
||||
}
|
||||
// This is resolved in later versions of webkit, perhaps we should
|
||||
// have a featured detection for correct 'use' behavior?
|
||||
// ——————————
|
||||
// Remove & Re-add hack for Webkit (issue 775)
|
||||
// if (cmd.elem.tagName === 'use' && isWebkit()) {
|
||||
// const {elem} = cmd;
|
||||
// if (!elem.getAttribute('x') && !elem.getAttribute('y')) {
|
||||
// const parent = elem.parentNode;
|
||||
// const sib = elem.nextSibling;
|
||||
// elem.remove();
|
||||
// parent.insertBefore(elem, sib);
|
||||
// // Ok to replace above with this? `sib.before(elem);`
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Hack for Firefox bugs where text element features aren't updated or get
|
||||
* messed up. See issue 136 and issue 137.
|
||||
* This function clones the element and re-selects it.
|
||||
* @function module:svgcanvas~ffClone
|
||||
* @todo Test for this bug on load and add it to "support" object instead of
|
||||
* browser sniffing
|
||||
* @param {Element} elem - The (text) DOM element to clone
|
||||
* @returns {Element} Cloned element
|
||||
*/
|
||||
export const ffClone = function (elem) {
|
||||
if (!isGecko()) { return elem; }
|
||||
const clone = elem.cloneNode(true);
|
||||
elem.before(clone);
|
||||
elem.remove();
|
||||
undoContext_.getCanvas().selectorManager.releaseSelector(elem);
|
||||
undoContext_.getCanvas().setSelectedElements(0, clone);
|
||||
undoContext_.getCanvas().selectorManager.requestSelector(clone).showGrips(true);
|
||||
return clone;
|
||||
};
|
||||
|
||||
/**
|
||||
* This function makes the changes to the elements. It does not add the change
|
||||
* to the history stack.
|
||||
* @param {string} attr - Attribute name
|
||||
* @param {string|Float} newValue - String or number with the new attribute value
|
||||
* @param {Element[]} elems - The DOM elements to apply the change to
|
||||
* @returns {void}
|
||||
*/
|
||||
export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, elems) {
|
||||
const selectedElements = undoContext_.getSelectedElements();
|
||||
const currentZoom = undoContext_.getCurrentZoom();
|
||||
if (undoContext_.getCurrentMode() === 'pathedit') {
|
||||
// Editing node
|
||||
undoContext_.getCanvas().pathActions.moveNode(attr, newValue);
|
||||
}
|
||||
elems = elems || selectedElements;
|
||||
let i = elems.length;
|
||||
const noXYElems = ['g', 'polyline', 'path'];
|
||||
// const goodGAttrs = ['transform', 'opacity', 'filter'];
|
||||
|
||||
while (i--) {
|
||||
let elem = elems[i];
|
||||
if (isNullish(elem)) { continue; }
|
||||
|
||||
// Set x,y vals on elements that don't have them
|
||||
if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) {
|
||||
const bbox = getStrokedBBoxDefaultVisible([elem]);
|
||||
const diffX = attr === 'x' ? newValue - bbox.x : 0;
|
||||
const diffY = attr === 'y' ? newValue - bbox.y : 0;
|
||||
undoContext_.getCanvas().moveSelectedElements(diffX * currentZoom, diffY * currentZoom, true);
|
||||
continue;
|
||||
}
|
||||
|
||||
// only allow the transform/opacity/filter attribute to change on <g> elements, slightly hacky
|
||||
// TODO: Missing statement body
|
||||
// if (elem.tagName === 'g' && goodGAttrs.includes(attr)) {}
|
||||
let oldval = attr === '#text' ? elem.textContent : elem.getAttribute(attr);
|
||||
if (isNullish(oldval)) { oldval = ''; }
|
||||
if (oldval !== String(newValue)) {
|
||||
if (attr === '#text') {
|
||||
// const oldW = utilsGetBBox(elem).width;
|
||||
elem.textContent = newValue;
|
||||
|
||||
// FF bug occurs on on rotated elements
|
||||
if ((/rotate/).test(elem.getAttribute('transform'))) {
|
||||
elem = ffClone(elem);
|
||||
}
|
||||
// Hoped to solve the issue of moving text with text-anchor="start",
|
||||
// but this doesn't actually fix it. Hopefully on the right track, though. -Fyrd
|
||||
// const box = getBBox(elem), left = box.x, top = box.y, {width, height} = box,
|
||||
// dx = width - oldW, dy = 0;
|
||||
// const angle = getRotationAngle(elem, true);
|
||||
// if (angle) {
|
||||
// const r = Math.sqrt(dx * dx + dy * dy);
|
||||
// const theta = Math.atan2(dy, dx) - angle;
|
||||
// dx = r * Math.cos(theta);
|
||||
// dy = r * Math.sin(theta);
|
||||
//
|
||||
// elem.setAttribute('x', elem.getAttribute('x') - dx);
|
||||
// elem.setAttribute('y', elem.getAttribute('y') - dy);
|
||||
// }
|
||||
} else if (attr === '#href') {
|
||||
setHref(elem, newValue);
|
||||
} else { elem.setAttribute(attr, newValue); }
|
||||
|
||||
// Go into "select" mode for text changes
|
||||
// NOTE: Important that this happens AFTER elem.setAttribute() or else attributes like
|
||||
// font-size can get reset to their old value, ultimately by svgEditor.updateContextPanel(),
|
||||
// after calling textActions.toSelectMode() below
|
||||
if (undoContext_.getCurrentMode() === 'textedit' && attr !== '#text' && elem.textContent.length) {
|
||||
undoContext_.getCanvas().textActions.toSelectMode(elem);
|
||||
}
|
||||
|
||||
// if (i === 0) {
|
||||
// selectedBBoxes[0] = utilsGetBBox(elem);
|
||||
// }
|
||||
|
||||
// Use the Firefox ffClone hack for text elements with gradients or
|
||||
// where other text attributes are changed.
|
||||
if (isGecko() && elem.nodeName === 'text' && (/rotate/).test(elem.getAttribute('transform'))) {
|
||||
if (
|
||||
String(newValue).startsWith('url') || (['font-size', 'font-family', 'x', 'y'].includes(attr) && elem.textContent)
|
||||
) {
|
||||
elem = ffClone(elem);
|
||||
}
|
||||
}
|
||||
// Timeout needed for Opera & Firefox
|
||||
// codedread: it is now possible for this function to be called with elements
|
||||
// that are not in the selectedElements array, we need to only request a
|
||||
// selector if the element is in that array
|
||||
if (selectedElements.includes(elem)) {
|
||||
// eslint-disable-next-line no-loop-func
|
||||
setTimeout(function () {
|
||||
// Due to element replacement, this element may no longer
|
||||
// be part of the DOM
|
||||
if (!elem.parentNode) { return; }
|
||||
undoContext_.getCanvas().selectorManager.requestSelector(elem).resize();
|
||||
}, 0);
|
||||
}
|
||||
// if this element was rotated, and we changed the position of this element
|
||||
// we need to update the rotational transform attribute
|
||||
const angle = getRotationAngle(elem);
|
||||
if (angle !== 0 && attr !== 'transform') {
|
||||
const tlist = getTransformList(elem);
|
||||
let n = tlist.numberOfItems;
|
||||
while (n--) {
|
||||
const xform = tlist.getItem(n);
|
||||
if (xform.type === 4) {
|
||||
// remove old rotate
|
||||
tlist.removeItem(n);
|
||||
|
||||
const box = utilsGetBBox(elem);
|
||||
const center = transformPoint(
|
||||
box.x + box.width / 2, box.y + box.height / 2, transformListToTransform(tlist).matrix
|
||||
);
|
||||
const cx = center.x,
|
||||
cy = center.y;
|
||||
const newrot = undoContext_.getSVGRoot().createSVGTransform();
|
||||
newrot.setRotate(angle, cx, cy);
|
||||
tlist.insertItemBefore(newrot, n);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
} // if oldValue != newValue
|
||||
} // for each elem
|
||||
};
|
||||
|
||||
/**
|
||||
* Change the given/selected element and add the original value to the history stack.
|
||||
* If you want to change all `selectedElements`, ignore the `elems` argument.
|
||||
* If you want to change only a subset of `selectedElements`, then send the
|
||||
* subset to this function in the `elems` argument.
|
||||
* @function module:svgcanvas.SvgCanvas#changeSelectedAttribute
|
||||
* @param {string} attr - String with the attribute name
|
||||
* @param {string|Float} val - String or number with the new attribute value
|
||||
* @param {Element[]} elems - The DOM elements to apply the change to
|
||||
* @returns {void}
|
||||
*/
|
||||
export const changeSelectedAttributeMethod = function (attr, val, elems) {
|
||||
const selectedElements = undoContext_.getSelectedElements();
|
||||
elems = elems || selectedElements;
|
||||
undoContext_.getCanvas().undoMgr.beginUndoableChange(attr, elems);
|
||||
// const i = elems.length;
|
||||
|
||||
changeSelectedAttributeNoUndoMethod(attr, val, elems);
|
||||
|
||||
const batchCmd = undoContext_.getCanvas().undoMgr.finishUndoableChange();
|
||||
if (!batchCmd.isEmpty()) {
|
||||
// undoContext_.addCommandToHistory(batchCmd);
|
||||
undoContext_.getCanvas().undoMgr.addCommandToHistory(batchCmd);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user