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
132
src/svgcanvas/paste-elem.js
Normal file
132
src/svgcanvas/paste-elem.js
Normal file
@@ -0,0 +1,132 @@
|
||||
/* globals jQuery */
|
||||
|
||||
import jQueryPluginSVG from '../common/jQuery.attr.js'; // Needed for SVG attribute setting and array form with `attr`
|
||||
import {
|
||||
getStrokedBBoxDefaultVisible
|
||||
} from '../common/utilities.js';
|
||||
import * as hstry from './history.js';
|
||||
// Constants
|
||||
const $ = jQueryPluginSVG(jQuery);
|
||||
|
||||
const {
|
||||
InsertElementCommand, BatchCommand
|
||||
} = hstry;
|
||||
|
||||
let pasteContext_ = null;
|
||||
|
||||
/**
|
||||
* @function module:paste-elem.init
|
||||
* @param {module:paste-elem.pasteContext} pasteContext
|
||||
* @returns {void}
|
||||
*/
|
||||
export const init = function (pasteContext) {
|
||||
pasteContext_ = pasteContext;
|
||||
};
|
||||
|
||||
/**
|
||||
* @function module:svgcanvas.SvgCanvas#pasteElements
|
||||
* @param {"in_place"|"point"|void} type
|
||||
* @param {Integer|void} x Expected if type is "point"
|
||||
* @param {Integer|void} y Expected if type is "point"
|
||||
* @fires module:svgcanvas.SvgCanvas#event:changed
|
||||
* @fires module:svgcanvas.SvgCanvas#event:ext_IDsUpdated
|
||||
* @returns {void}
|
||||
*/
|
||||
export const pasteElementsMethod = function (type, x, y) {
|
||||
let clipb = JSON.parse(sessionStorage.getItem(pasteContext_.getClipBoardID()));
|
||||
if (!clipb) return;
|
||||
let len = clipb.length;
|
||||
if (!len) return;
|
||||
|
||||
const pasted = [];
|
||||
const batchCmd = new BatchCommand('Paste elements');
|
||||
// const drawing = getCurrentDrawing();
|
||||
/**
|
||||
* @typedef {PlainObject<string, string>} module:svgcanvas.ChangedIDs
|
||||
*/
|
||||
/**
|
||||
* @type {module:svgcanvas.ChangedIDs}
|
||||
*/
|
||||
const changedIDs = {};
|
||||
|
||||
// Recursively replace IDs and record the changes
|
||||
/**
|
||||
*
|
||||
* @param {module:svgcanvas.SVGAsJSON} elem
|
||||
* @returns {void}
|
||||
*/
|
||||
function checkIDs (elem) {
|
||||
if (elem.attr && elem.attr.id) {
|
||||
changedIDs[elem.attr.id] = pasteContext_.getCanvas().getNextId();
|
||||
elem.attr.id = changedIDs[elem.attr.id];
|
||||
}
|
||||
if (elem.children) elem.children.forEach((child) => checkIDs(child));
|
||||
}
|
||||
clipb.forEach((elem) => checkIDs(elem));
|
||||
|
||||
// Give extensions like the connector extension a chance to reflect new IDs and remove invalid elements
|
||||
/**
|
||||
* Triggered when `pasteElements` is called from a paste action (context menu or key).
|
||||
* @event module:svgcanvas.SvgCanvas#event:ext_IDsUpdated
|
||||
* @type {PlainObject}
|
||||
* @property {module:svgcanvas.SVGAsJSON[]} elems
|
||||
* @property {module:svgcanvas.ChangedIDs} changes Maps past ID (on attribute) to current ID
|
||||
*/
|
||||
pasteContext_.getCanvas().runExtensions(
|
||||
'IDsUpdated',
|
||||
/** @type {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} */
|
||||
{elems: clipb, changes: changedIDs},
|
||||
true
|
||||
).forEach(function (extChanges) {
|
||||
if (!extChanges || !('remove' in extChanges)) return;
|
||||
|
||||
extChanges.remove.forEach(function (removeID) {
|
||||
clipb = clipb.filter(function (clipBoardItem) {
|
||||
return clipBoardItem.attr.id !== removeID;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Move elements to lastClickPoint
|
||||
while (len--) {
|
||||
const elem = clipb[len];
|
||||
if (!elem) { continue; }
|
||||
|
||||
const copy = pasteContext_.getCanvas().addSVGElementFromJson(elem);
|
||||
pasted.push(copy);
|
||||
batchCmd.addSubCommand(new InsertElementCommand(copy));
|
||||
|
||||
pasteContext_.restoreRefElems(copy);
|
||||
}
|
||||
|
||||
pasteContext_.getCanvas().selectOnly(pasted);
|
||||
|
||||
if (type !== 'in_place') {
|
||||
let ctrX, ctrY;
|
||||
|
||||
if (!type) {
|
||||
ctrX = pasteContext_.getLastClickPoint('x');
|
||||
ctrY = pasteContext_.getLastClickPoint('y');
|
||||
} else if (type === 'point') {
|
||||
ctrX = x;
|
||||
ctrY = y;
|
||||
}
|
||||
|
||||
const bbox = getStrokedBBoxDefaultVisible(pasted);
|
||||
const cx = ctrX - (bbox.x + bbox.width / 2),
|
||||
cy = ctrY - (bbox.y + bbox.height / 2),
|
||||
dx = [],
|
||||
dy = [];
|
||||
|
||||
$.each(pasted, function (i, item) {
|
||||
dx.push(cx);
|
||||
dy.push(cy);
|
||||
});
|
||||
|
||||
const cmd = pasteContext_.getCanvas().moveSelectedElements(dx, dy, false);
|
||||
if (cmd) batchCmd.addSubCommand(cmd);
|
||||
}
|
||||
|
||||
pasteContext_.addCommandToHistory(batchCmd);
|
||||
pasteContext_.getCanvas().call('changed', pasted);
|
||||
};
|
||||
Reference in New Issue
Block a user