Márk Tolmács
9 months ago
committed by
GitHub
29 changed files with 1290 additions and 1082 deletions
@ -0,0 +1,484 @@
@@ -0,0 +1,484 @@
|
||||
import { ORIG_ID } from "../constants"; |
||||
import { |
||||
getElementsInGroup, |
||||
getNewGroupIdsForDuplication, |
||||
getSelectedGroupForElement, |
||||
} from "../groups"; |
||||
|
||||
import { randomId, randomInteger } from "../random"; |
||||
|
||||
import { |
||||
arrayToMap, |
||||
castArray, |
||||
findLastIndex, |
||||
getUpdatedTimestamp, |
||||
isTestEnv, |
||||
} from "../utils"; |
||||
|
||||
import { |
||||
bindElementsToFramesAfterDuplication, |
||||
getFrameChildren, |
||||
} from "../frame"; |
||||
|
||||
import { normalizeElementOrder } from "./sortElements"; |
||||
|
||||
import { bumpVersion } from "./mutateElement"; |
||||
|
||||
import { |
||||
hasBoundTextElement, |
||||
isBoundToContainer, |
||||
isFrameLikeElement, |
||||
} from "./typeChecks"; |
||||
|
||||
import { getBoundTextElement, getContainerElement } from "./textElement"; |
||||
|
||||
import { fixBindingsAfterDuplication } from "./binding"; |
||||
|
||||
import type { AppState } from "../types"; |
||||
import type { Mutable } from "../utility-types"; |
||||
|
||||
import type { |
||||
ElementsMap, |
||||
ExcalidrawElement, |
||||
GroupId, |
||||
NonDeletedSceneElementsMap, |
||||
} from "./types"; |
||||
|
||||
/** |
||||
* Duplicate an element, often used in the alt-drag operation. |
||||
* Note that this method has gotten a bit complicated since the |
||||
* introduction of gruoping/ungrouping elements. |
||||
* @param editingGroupId The current group being edited. The new |
||||
* element will inherit this group and its |
||||
* parents. |
||||
* @param groupIdMapForOperation A Map that maps old group IDs to |
||||
* duplicated ones. If you are duplicating |
||||
* multiple elements at once, share this map |
||||
* amongst all of them |
||||
* @param element Element to duplicate |
||||
* @param overrides Any element properties to override |
||||
*/ |
||||
export const duplicateElement = <TElement extends ExcalidrawElement>( |
||||
editingGroupId: AppState["editingGroupId"], |
||||
groupIdMapForOperation: Map<GroupId, GroupId>, |
||||
element: TElement, |
||||
overrides?: Partial<TElement>, |
||||
randomizeSeed?: boolean, |
||||
): Readonly<TElement> => { |
||||
let copy = deepCopyElement(element); |
||||
|
||||
if (isTestEnv()) { |
||||
__test__defineOrigId(copy, element.id); |
||||
} |
||||
|
||||
copy.id = randomId(); |
||||
copy.updated = getUpdatedTimestamp(); |
||||
if (randomizeSeed) { |
||||
copy.seed = randomInteger(); |
||||
bumpVersion(copy); |
||||
} |
||||
|
||||
copy.groupIds = getNewGroupIdsForDuplication( |
||||
copy.groupIds, |
||||
editingGroupId, |
||||
(groupId) => { |
||||
if (!groupIdMapForOperation.has(groupId)) { |
||||
groupIdMapForOperation.set(groupId, randomId()); |
||||
} |
||||
return groupIdMapForOperation.get(groupId)!; |
||||
}, |
||||
); |
||||
if (overrides) { |
||||
copy = Object.assign(copy, overrides); |
||||
} |
||||
return copy; |
||||
}; |
||||
|
||||
export const duplicateElements = ( |
||||
opts: { |
||||
elements: readonly ExcalidrawElement[]; |
||||
randomizeSeed?: boolean; |
||||
overrides?: ( |
||||
originalElement: ExcalidrawElement, |
||||
) => Partial<ExcalidrawElement>; |
||||
} & ( |
||||
| { |
||||
/** |
||||
* Duplicates all elements in array. |
||||
* |
||||
* Use this when programmaticaly duplicating elements, without direct |
||||
* user interaction. |
||||
*/ |
||||
type: "everything"; |
||||
} |
||||
| { |
||||
/** |
||||
* Duplicates specified elements and inserts them back into the array |
||||
* in specified order. |
||||
* |
||||
* Use this when duplicating Scene elements, during user interaction |
||||
* such as alt-drag or on duplicate action. |
||||
*/ |
||||
type: "in-place"; |
||||
idsOfElementsToDuplicate: Map< |
||||
ExcalidrawElement["id"], |
||||
ExcalidrawElement |
||||
>; |
||||
appState: { |
||||
editingGroupId: AppState["editingGroupId"]; |
||||
selectedGroupIds: AppState["selectedGroupIds"]; |
||||
}; |
||||
/** |
||||
* If true, duplicated elements are inserted _before_ specified |
||||
* elements. Case: alt-dragging elements to duplicate them. |
||||
* |
||||
* TODO: remove this once (if) we stop replacing the original element |
||||
* with the duplicated one in the scene array. |
||||
*/ |
||||
reverseOrder: boolean; |
||||
} |
||||
), |
||||
) => { |
||||
let { elements } = opts; |
||||
|
||||
const appState = |
||||
"appState" in opts |
||||
? opts.appState |
||||
: ({ |
||||
editingGroupId: null, |
||||
selectedGroupIds: {}, |
||||
} as const); |
||||
|
||||
const reverseOrder = opts.type === "in-place" ? opts.reverseOrder : false; |
||||
|
||||
// Ids of elements that have already been processed so we don't push them
|
||||
// into the array twice if we end up backtracking when retrieving
|
||||
// discontiguous group of elements (can happen due to a bug, or in edge
|
||||
// cases such as a group containing deleted elements which were not selected).
|
||||
//
|
||||
// This is not enough to prevent duplicates, so we do a second loop afterwards
|
||||
// to remove them.
|
||||
//
|
||||
// For convenience we mark even the newly created ones even though we don't
|
||||
// loop over them.
|
||||
const processedIds = new Map<ExcalidrawElement["id"], true>(); |
||||
const groupIdMap = new Map(); |
||||
const newElements: ExcalidrawElement[] = []; |
||||
const oldElements: ExcalidrawElement[] = []; |
||||
const oldIdToDuplicatedId = new Map(); |
||||
const duplicatedElementsMap = new Map<string, ExcalidrawElement>(); |
||||
const elementsMap = arrayToMap(elements) as ElementsMap; |
||||
const _idsOfElementsToDuplicate = |
||||
opts.type === "in-place" |
||||
? opts.idsOfElementsToDuplicate |
||||
: new Map(elements.map((el) => [el.id, el])); |
||||
|
||||
// For sanity
|
||||
if (opts.type === "in-place") { |
||||
for (const groupId of Object.keys(opts.appState.selectedGroupIds)) { |
||||
elements |
||||
.filter((el) => el.groupIds?.includes(groupId)) |
||||
.forEach((el) => _idsOfElementsToDuplicate.set(el.id, el)); |
||||
} |
||||
} |
||||
|
||||
elements = normalizeElementOrder(elements); |
||||
|
||||
const elementsWithClones: ExcalidrawElement[] = elements.slice(); |
||||
|
||||
// helper functions
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
// Used for the heavy lifing of copying a single element, a group of elements
|
||||
// an element with bound text etc.
|
||||
const copyElements = <T extends ExcalidrawElement | ExcalidrawElement[]>( |
||||
element: T, |
||||
): T extends ExcalidrawElement[] |
||||
? ExcalidrawElement[] |
||||
: ExcalidrawElement | null => { |
||||
const elements = castArray(element); |
||||
|
||||
const _newElements = elements.reduce( |
||||
(acc: ExcalidrawElement[], element) => { |
||||
if (processedIds.has(element.id)) { |
||||
return acc; |
||||
} |
||||
|
||||
processedIds.set(element.id, true); |
||||
|
||||
const newElement = duplicateElement( |
||||
appState.editingGroupId, |
||||
groupIdMap, |
||||
element, |
||||
opts.overrides?.(element), |
||||
opts.randomizeSeed, |
||||
); |
||||
|
||||
processedIds.set(newElement.id, true); |
||||
|
||||
duplicatedElementsMap.set(newElement.id, newElement); |
||||
oldIdToDuplicatedId.set(element.id, newElement.id); |
||||
|
||||
oldElements.push(element); |
||||
newElements.push(newElement); |
||||
|
||||
acc.push(newElement); |
||||
return acc; |
||||
}, |
||||
[], |
||||
); |
||||
|
||||
return ( |
||||
Array.isArray(element) ? _newElements : _newElements[0] || null |
||||
) as T extends ExcalidrawElement[] |
||||
? ExcalidrawElement[] |
||||
: ExcalidrawElement | null; |
||||
}; |
||||
|
||||
// Helper to position cloned elements in the Z-order the product needs it
|
||||
const insertBeforeOrAfterIndex = ( |
||||
index: number, |
||||
elements: ExcalidrawElement | null | ExcalidrawElement[], |
||||
) => { |
||||
if (!elements) { |
||||
return; |
||||
} |
||||
|
||||
if (reverseOrder && index < 1) { |
||||
elementsWithClones.unshift(...castArray(elements)); |
||||
return; |
||||
} |
||||
|
||||
if (!reverseOrder && index > elementsWithClones.length - 1) { |
||||
elementsWithClones.push(...castArray(elements)); |
||||
return; |
||||
} |
||||
|
||||
elementsWithClones.splice( |
||||
index + (reverseOrder ? 0 : 1), |
||||
0, |
||||
...castArray(elements), |
||||
); |
||||
}; |
||||
|
||||
const frameIdsToDuplicate = new Set( |
||||
elements |
||||
.filter( |
||||
(el) => _idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el), |
||||
) |
||||
.map((el) => el.id), |
||||
); |
||||
|
||||
for (const element of elements) { |
||||
if (processedIds.has(element.id)) { |
||||
continue; |
||||
} |
||||
|
||||
if (!_idsOfElementsToDuplicate.has(element.id)) { |
||||
continue; |
||||
} |
||||
|
||||
// groups
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
const groupId = getSelectedGroupForElement(appState, element); |
||||
if (groupId) { |
||||
const groupElements = getElementsInGroup(elements, groupId).flatMap( |
||||
(element) => |
||||
isFrameLikeElement(element) |
||||
? [...getFrameChildren(elements, element.id), element] |
||||
: [element], |
||||
); |
||||
|
||||
const targetIndex = reverseOrder |
||||
? elementsWithClones.findIndex((el) => { |
||||
return el.groupIds?.includes(groupId); |
||||
}) |
||||
: findLastIndex(elementsWithClones, (el) => { |
||||
return el.groupIds?.includes(groupId); |
||||
}); |
||||
|
||||
insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements)); |
||||
continue; |
||||
} |
||||
|
||||
// frame duplication
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
if (element.frameId && frameIdsToDuplicate.has(element.frameId)) { |
||||
continue; |
||||
} |
||||
|
||||
if (isFrameLikeElement(element)) { |
||||
const frameId = element.id; |
||||
|
||||
const frameChildren = getFrameChildren(elements, frameId); |
||||
|
||||
const targetIndex = findLastIndex(elementsWithClones, (el) => { |
||||
return el.frameId === frameId || el.id === frameId; |
||||
}); |
||||
|
||||
insertBeforeOrAfterIndex( |
||||
targetIndex, |
||||
copyElements([...frameChildren, element]), |
||||
); |
||||
continue; |
||||
} |
||||
|
||||
// text container
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
if (hasBoundTextElement(element)) { |
||||
const boundTextElement = getBoundTextElement(element, elementsMap); |
||||
|
||||
const targetIndex = findLastIndex(elementsWithClones, (el) => { |
||||
return ( |
||||
el.id === element.id || |
||||
("containerId" in el && el.containerId === element.id) |
||||
); |
||||
}); |
||||
|
||||
if (boundTextElement) { |
||||
insertBeforeOrAfterIndex( |
||||
targetIndex + (reverseOrder ? -1 : 0), |
||||
copyElements([element, boundTextElement]), |
||||
); |
||||
} else { |
||||
insertBeforeOrAfterIndex(targetIndex, copyElements(element)); |
||||
} |
||||
|
||||
continue; |
||||
} |
||||
|
||||
if (isBoundToContainer(element)) { |
||||
const container = getContainerElement(element, elementsMap); |
||||
|
||||
const targetIndex = findLastIndex(elementsWithClones, (el) => { |
||||
return el.id === element.id || el.id === container?.id; |
||||
}); |
||||
|
||||
if (container) { |
||||
insertBeforeOrAfterIndex( |
||||
targetIndex, |
||||
copyElements([container, element]), |
||||
); |
||||
} else { |
||||
insertBeforeOrAfterIndex(targetIndex, copyElements(element)); |
||||
} |
||||
|
||||
continue; |
||||
} |
||||
|
||||
// default duplication (regular elements)
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
insertBeforeOrAfterIndex( |
||||
findLastIndex(elementsWithClones, (el) => el.id === element.id), |
||||
copyElements(element), |
||||
); |
||||
} |
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
fixBindingsAfterDuplication( |
||||
newElements, |
||||
oldIdToDuplicatedId, |
||||
duplicatedElementsMap as NonDeletedSceneElementsMap, |
||||
); |
||||
|
||||
bindElementsToFramesAfterDuplication( |
||||
elementsWithClones, |
||||
oldElements, |
||||
oldIdToDuplicatedId, |
||||
); |
||||
|
||||
return { |
||||
newElements, |
||||
elementsWithClones, |
||||
}; |
||||
}; |
||||
|
||||
// Simplified deep clone for the purpose of cloning ExcalidrawElement.
|
||||
//
|
||||
// Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set,
|
||||
// Typed arrays and other non-null objects.
|
||||
//
|
||||
// Adapted from https://github.com/lukeed/klona
|
||||
//
|
||||
// The reason for `deepCopyElement()` wrapper is type safety (only allow
|
||||
// passing ExcalidrawElement as the top-level argument).
|
||||
const _deepCopyElement = (val: any, depth: number = 0) => { |
||||
// only clone non-primitives
|
||||
if (val == null || typeof val !== "object") { |
||||
return val; |
||||
} |
||||
|
||||
const objectType = Object.prototype.toString.call(val); |
||||
|
||||
if (objectType === "[object Object]") { |
||||
const tmp = |
||||
typeof val.constructor === "function" |
||||
? Object.create(Object.getPrototypeOf(val)) |
||||
: {}; |
||||
for (const key in val) { |
||||
if (val.hasOwnProperty(key)) { |
||||
// don't copy non-serializable objects like these caches. They'll be
|
||||
// populated when the element is rendered.
|
||||
if (depth === 0 && (key === "shape" || key === "canvas")) { |
||||
continue; |
||||
} |
||||
tmp[key] = _deepCopyElement(val[key], depth + 1); |
||||
} |
||||
} |
||||
return tmp; |
||||
} |
||||
|
||||
if (Array.isArray(val)) { |
||||
let k = val.length; |
||||
const arr = new Array(k); |
||||
while (k--) { |
||||
arr[k] = _deepCopyElement(val[k], depth + 1); |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
// we're not cloning non-array & non-plain-object objects because we
|
||||
// don't support them on excalidraw elements yet. If we do, we need to make
|
||||
// sure we start cloning them, so let's warn about it.
|
||||
if (import.meta.env.DEV) { |
||||
if ( |
||||
objectType !== "[object Object]" && |
||||
objectType !== "[object Array]" && |
||||
objectType.startsWith("[object ") |
||||
) { |
||||
console.warn( |
||||
`_deepCloneElement: unexpected object type ${objectType}. This value will not be cloned!`, |
||||
); |
||||
} |
||||
} |
||||
|
||||
return val; |
||||
}; |
||||
|
||||
/** |
||||
* Clones ExcalidrawElement data structure. Does not regenerate id, nonce, or |
||||
* any value. The purpose is to to break object references for immutability |
||||
* reasons, whenever we want to keep the original element, but ensure it's not |
||||
* mutated. |
||||
* |
||||
* Only clones plain objects and arrays. Doesn't clone Date, RegExp, Map, Set, |
||||
* Typed arrays and other non-null objects. |
||||
*/ |
||||
export const deepCopyElement = <T extends ExcalidrawElement>( |
||||
val: T, |
||||
): Mutable<T> => { |
||||
return _deepCopyElement(val); |
||||
}; |
||||
|
||||
const __test__defineOrigId = (clonedObj: object, origId: string) => { |
||||
Object.defineProperty(clonedObj, ORIG_ID, { |
||||
value: origId, |
||||
writable: false, |
||||
enumerable: false, |
||||
}); |
||||
}; |
||||
Loading…
Reference in new issue