Add overwrite option to insertContent (#730)
This commit is contained in:
Steve Ruiz
GitHub
parent
65ff5075f0
commit
0a52b5c317
3 changed files with 234 additions and 191 deletions
|
|
@ -2169,7 +2169,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
|||
// but if only one shape is included, discard the binding
|
||||
const bindings = Object.values(page.bindings)
|
||||
.filter((binding) => {
|
||||
if (idsSet.has(binding.fromId) && idsSet.has(binding.toId)) {
|
||||
if (idsSet.has(binding.fromId) || idsSet.has(binding.toId)) {
|
||||
return true
|
||||
}
|
||||
|
||||
|
|
@ -2261,11 +2261,12 @@ export class TldrawApp extends StateManager<TDSnapshot> {
|
|||
* @param content.assets (optional) An array of TDAsset objects.
|
||||
* @param opts (optional) An options object
|
||||
* @param opts.point (optional) A point at which to paste the content.
|
||||
* @param opts.select (optional) When true, the inserted shapes will be selected.
|
||||
* @param opts.select (optional) When true, the inserted shapes will be selected. Defaults to false.
|
||||
* @param opts.overwrite (optional) When true, the inserted shapes and bindings will overwrite any existing shapes and bindings. Defaults to false.
|
||||
*/
|
||||
insertContent = (
|
||||
content: { shapes: TDShape[]; bindings?: TDBinding[]; assets?: TDAsset[] },
|
||||
opts = {} as { point?: number[]; select?: boolean }
|
||||
opts = {} as { point?: number[]; select?: boolean; overwrite?: boolean }
|
||||
) => {
|
||||
return this.setState(Commands.insertContent(this, content, opts), 'insert_content')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -115,8 +115,8 @@ describe('insert command', () => {
|
|||
|
||||
const content = app.getContent()!
|
||||
|
||||
// getContent does not include the incomplete binding
|
||||
expect(Object.values(content.bindings).length).toBe(0)
|
||||
// getContent DOES include the incomplete binding
|
||||
expect(Object.values(content.bindings).length).toBe(1)
|
||||
|
||||
app.insertContent(content)
|
||||
|
||||
|
|
@ -185,3 +185,21 @@ describe('insert command', () => {
|
|||
expect(app.shapes.length).toBe(size)
|
||||
})
|
||||
})
|
||||
|
||||
describe('When opts.overwrite is true', () => {
|
||||
it('replaces content', () => {
|
||||
const content = app.getContent()!
|
||||
const size = app.shapes.length
|
||||
const ids = app.shapes.map((s) => s.id)
|
||||
app.insertContent(content, { overwrite: true })
|
||||
expect(app.shapes.length).toBe(size)
|
||||
expect(app.shapes.map((s) => s.id)).toMatchObject(ids)
|
||||
})
|
||||
|
||||
it('restores content under the same ids', () => {
|
||||
const content = app.getContent()!
|
||||
const ids = app.shapes.map((s) => s.id)
|
||||
app.deleteAll().insertContent(content, { overwrite: true })
|
||||
expect(app.shapes.map((s) => s.id)).toMatchObject(ids)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
import { Utils } from '@tldraw/core'
|
||||
import { Vec } from '@tldraw/vec'
|
||||
import { GRID_SIZE } from '~constants'
|
||||
import { TLDR } from '~state/TLDR'
|
||||
import type { PagePartial, TldrawCommand, TDShape, TDBinding, TDAsset } from '~types'
|
||||
import type { TldrawApp } from '../../internal'
|
||||
|
|
@ -9,209 +8,240 @@ import type { TldrawApp } from '../../internal'
|
|||
export function insertContent(
|
||||
app: TldrawApp,
|
||||
content: { shapes: TDShape[]; bindings?: TDBinding[]; assets?: TDAsset[] },
|
||||
opts = {} as { point?: number[]; select?: boolean }
|
||||
opts = {} as { point?: number[]; select?: boolean; overwrite?: boolean }
|
||||
): TldrawCommand {
|
||||
const { currentPageId } = app
|
||||
const { point, select, overwrite } = opts
|
||||
|
||||
const page = app.document.pages[currentPageId]
|
||||
|
||||
const before: PagePartial = {
|
||||
shapes: {},
|
||||
bindings: {},
|
||||
}
|
||||
|
||||
const afterAssets: Record<string, TDAsset> = {}
|
||||
|
||||
const after: PagePartial = {
|
||||
shapes: {},
|
||||
bindings: {},
|
||||
}
|
||||
|
||||
const oldToNewIds: Record<string, string> = {}
|
||||
|
||||
// The index of the new shape
|
||||
let nextIndex = TLDR.getTopChildIndex(app.state, currentPageId)
|
||||
|
||||
const shapesToInsert: TDShape[] = content.shapes
|
||||
.sort((a, b) => a.childIndex - b.childIndex)
|
||||
.map((shape) => {
|
||||
const newShapeId = Utils.uniqueId()
|
||||
oldToNewIds[shape.id] = newShapeId
|
||||
|
||||
// The redo should include a clone of the new shape
|
||||
return {
|
||||
...Utils.deepClone(shape),
|
||||
id: newShapeId,
|
||||
}
|
||||
})
|
||||
|
||||
const visited = new Set<string>()
|
||||
|
||||
// Iterate through the list, starting from the front
|
||||
while (shapesToInsert.length > 0) {
|
||||
const shape = shapesToInsert.shift()
|
||||
|
||||
if (!shape) break
|
||||
|
||||
visited.add(shape.id)
|
||||
|
||||
if (shape.parentId === 'currentPageId') {
|
||||
shape.parentId = currentPageId
|
||||
shape.childIndex = nextIndex++
|
||||
} else {
|
||||
// The shape had another shape as its parent.
|
||||
|
||||
// Re-assign the shape's parentId to the new id
|
||||
shape.parentId = oldToNewIds[shape.parentId]
|
||||
|
||||
// Has that parent been added yet to the after object?
|
||||
const parent = after.shapes[shape.parentId]
|
||||
|
||||
if (!parent) {
|
||||
if (visited.has(shape.id)) {
|
||||
// If we've already visited this shape, then that means
|
||||
// its parent was not among the shapes to insert. Set it
|
||||
// to be a child of the current page instead.
|
||||
shape.parentId = 'currentPageId'
|
||||
}
|
||||
|
||||
// If the parent hasn't been added yet, push this shape
|
||||
// to back of the queue; we'll try and add it again later
|
||||
shapesToInsert.push(shape)
|
||||
continue
|
||||
}
|
||||
|
||||
// If we've found the parent, add this shape's id to its children
|
||||
parent.children!.push(shape.id)
|
||||
if (overwrite) {
|
||||
// Map shapes and bindings onto new IDs to avoid overwriting existing content.
|
||||
for (const shape of content.shapes) {
|
||||
before.shapes[shape.id] = page.shapes[shape.id]
|
||||
after.shapes[shape.id] = shape
|
||||
}
|
||||
|
||||
// If the inserting shape has its own children, set the children to
|
||||
// an empty array; we'll add them later, as just shown above
|
||||
if (shape.children) {
|
||||
shape.children = []
|
||||
if (content.bindings) {
|
||||
for (const binding of content.bindings) {
|
||||
before.bindings[binding.id] = page.bindings[binding.id]
|
||||
after.bindings[binding.id] = binding
|
||||
}
|
||||
}
|
||||
|
||||
// The undo should remove the inserted shape
|
||||
before.shapes[shape.id] = undefined
|
||||
|
||||
// The redo should include the inserted shape
|
||||
after.shapes[shape.id] = shape
|
||||
}
|
||||
|
||||
Object.values(after.shapes).forEach((shape) => {
|
||||
// If the shape used to have children, but no longer does have children,
|
||||
// then delete the shape. This prevents inserting groups without children.
|
||||
if (shape!.children && shape!.children.length === 0) {
|
||||
delete before.shapes[shape!.id!]
|
||||
delete after.shapes[shape!.id!]
|
||||
if (content.assets) {
|
||||
for (const asset of content.assets) {
|
||||
afterAssets[asset.id] = asset
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// Map shapes and bindings onto new IDs to avoid overwriting existing content.
|
||||
|
||||
// Insert bindings
|
||||
if (content.bindings) {
|
||||
content.bindings.forEach((binding) => {
|
||||
const newBindingId = Utils.uniqueId()
|
||||
oldToNewIds[binding.id] = newBindingId
|
||||
const oldToNewIds: Record<string, string> = {}
|
||||
|
||||
const toId = oldToNewIds[binding.toId]
|
||||
const fromId = oldToNewIds[binding.fromId]
|
||||
// The index of the new shape
|
||||
let nextIndex = TLDR.getTopChildIndex(app.state, currentPageId)
|
||||
|
||||
// If the binding is "to" or "from" a shape that hasn't been inserted,
|
||||
// we'll need to skip the binding and remove it from any shape that
|
||||
// references it.
|
||||
if (!toId || !fromId) {
|
||||
if (fromId) {
|
||||
const handles = after.shapes[fromId]!.handles
|
||||
if (handles) {
|
||||
Object.values(handles).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
const shapesToInsert: TDShape[] = content.shapes
|
||||
.sort((a, b) => a.childIndex - b.childIndex)
|
||||
.map((shape) => {
|
||||
const newShapeId = Utils.uniqueId()
|
||||
oldToNewIds[shape.id] = newShapeId
|
||||
|
||||
// The redo should include a clone of the new shape
|
||||
return {
|
||||
...Utils.deepClone(shape),
|
||||
id: newShapeId,
|
||||
}
|
||||
|
||||
if (toId) {
|
||||
const handles = after.shapes[toId]!.handles
|
||||
if (handles) {
|
||||
Object.values(handles).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// Update the shape's to and from references to the new bindingid
|
||||
|
||||
const fromHandles = after.shapes[fromId]!.handles
|
||||
if (fromHandles) {
|
||||
Object.values(fromHandles).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = newBindingId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toHandles = after.shapes[toId]!.handles
|
||||
if (toHandles) {
|
||||
Object.values(after.shapes[toId]!.handles!).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = newBindingId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const newBinding = {
|
||||
...Utils.deepClone(binding),
|
||||
id: newBindingId,
|
||||
toId,
|
||||
fromId,
|
||||
}
|
||||
|
||||
// The undo should remove the inserted binding
|
||||
before.bindings[newBinding.id] = undefined
|
||||
|
||||
// The redo should include the inserted binding
|
||||
after.bindings[newBinding.id] = newBinding
|
||||
})
|
||||
}
|
||||
|
||||
// Now move the shapes
|
||||
|
||||
const shapesToMove = Object.values(after.shapes) as TDShape[]
|
||||
|
||||
const { point, select } = opts
|
||||
|
||||
if (shapesToMove.length > 0) {
|
||||
if (point) {
|
||||
// Move the shapes so that they're centered on the given point
|
||||
const commonBounds = Utils.getCommonBounds(shapesToMove.map((shape) => TLDR.getBounds(shape)))
|
||||
const center = Utils.getBoundsCenter(commonBounds)
|
||||
shapesToMove.forEach((shape) => {
|
||||
if (!shape.point) return
|
||||
shape.point = Vec.sub(point, Vec.sub(center, shape.point))
|
||||
})
|
||||
} else {
|
||||
const commonBounds = Utils.getCommonBounds(shapesToMove.map(TLDR.getBounds))
|
||||
|
||||
if (
|
||||
!(
|
||||
Utils.boundsContain(app.viewport, commonBounds) ||
|
||||
Utils.boundsCollide(app.viewport, commonBounds)
|
||||
const visited = new Set<string>()
|
||||
|
||||
// Iterate through the list, starting from the front
|
||||
while (shapesToInsert.length > 0) {
|
||||
const shape = shapesToInsert.shift()
|
||||
|
||||
if (!shape) break
|
||||
|
||||
visited.add(shape.id)
|
||||
|
||||
if (shape.parentId === 'currentPageId') {
|
||||
shape.parentId = currentPageId
|
||||
shape.childIndex = nextIndex++
|
||||
} else {
|
||||
// The shape had another shape as its parent.
|
||||
|
||||
// Re-assign the shape's parentId to the new id
|
||||
shape.parentId = oldToNewIds[shape.parentId]
|
||||
|
||||
// Has that parent been added yet to the after object?
|
||||
const parent = after.shapes[shape.parentId]
|
||||
|
||||
if (!parent) {
|
||||
if (visited.has(shape.id)) {
|
||||
// If we've already visited this shape, then that means
|
||||
// its parent was not among the shapes to insert. Set it
|
||||
// to be a child of the current page instead.
|
||||
shape.parentId = 'currentPageId'
|
||||
}
|
||||
|
||||
// If the parent hasn't been added yet, push this shape
|
||||
// to back of the queue; we'll try and add it again later
|
||||
shapesToInsert.push(shape)
|
||||
continue
|
||||
}
|
||||
|
||||
// If we've found the parent, add this shape's id to its children
|
||||
parent.children!.push(shape.id)
|
||||
}
|
||||
|
||||
// If the inserting shape has its own children, set the children to
|
||||
// an empty array; we'll add them later, as just shown above
|
||||
if (shape.children) {
|
||||
shape.children = []
|
||||
}
|
||||
|
||||
// The undo should remove the inserted shape
|
||||
before.shapes[shape.id] = undefined
|
||||
|
||||
// The redo should include the inserted shape
|
||||
after.shapes[shape.id] = shape
|
||||
}
|
||||
|
||||
Object.values(after.shapes).forEach((shape) => {
|
||||
// If the shape used to have children, but no longer does have children,
|
||||
// then delete the shape. This prevents inserting groups without children.
|
||||
if (shape!.children && shape!.children.length === 0) {
|
||||
delete before.shapes[shape!.id!]
|
||||
delete after.shapes[shape!.id!]
|
||||
}
|
||||
})
|
||||
|
||||
// Insert bindings
|
||||
if (content.bindings) {
|
||||
content.bindings.forEach((binding) => {
|
||||
const newBindingId = Utils.uniqueId()
|
||||
oldToNewIds[binding.id] = newBindingId
|
||||
|
||||
const toId = oldToNewIds[binding.toId]
|
||||
const fromId = oldToNewIds[binding.fromId]
|
||||
|
||||
// If the binding is "to" or "from" a shape that hasn't been inserted,
|
||||
// we'll need to skip the binding and remove it from any shape that
|
||||
// references it.
|
||||
if (!toId || !fromId) {
|
||||
if (fromId) {
|
||||
const handles = after.shapes[fromId]!.handles
|
||||
if (handles) {
|
||||
Object.values(handles).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (toId) {
|
||||
const handles = after.shapes[toId]!.handles
|
||||
if (handles) {
|
||||
Object.values(handles).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = undefined
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
// Update the shape's to and from references to the new bindingid
|
||||
|
||||
const fromHandles = after.shapes[fromId]!.handles
|
||||
if (fromHandles) {
|
||||
Object.values(fromHandles).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = newBindingId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toHandles = after.shapes[toId]!.handles
|
||||
if (toHandles) {
|
||||
Object.values(after.shapes[toId]!.handles!).forEach((handle) => {
|
||||
if (handle!.bindingId === binding.id) {
|
||||
handle!.bindingId = newBindingId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const newBinding = {
|
||||
...Utils.deepClone(binding),
|
||||
id: newBindingId,
|
||||
toId,
|
||||
fromId,
|
||||
}
|
||||
|
||||
// The undo should remove the inserted binding
|
||||
before.bindings[newBinding.id] = undefined
|
||||
|
||||
// The redo should include the inserted binding
|
||||
after.bindings[newBinding.id] = newBinding
|
||||
})
|
||||
}
|
||||
|
||||
// Now move the shapes
|
||||
|
||||
const shapesToMove = Object.values(after.shapes) as TDShape[]
|
||||
|
||||
if (shapesToMove.length > 0) {
|
||||
if (point) {
|
||||
// Move the shapes so that they're centered on the given point
|
||||
const commonBounds = Utils.getCommonBounds(
|
||||
shapesToMove.map((shape) => TLDR.getBounds(shape))
|
||||
)
|
||||
) {
|
||||
const center = Vec.toFixed(app.getPagePoint(app.centerPoint))
|
||||
|
||||
const centeredBounds = Utils.centerBounds(commonBounds, center)
|
||||
|
||||
const delta = Vec.sub(
|
||||
Utils.getBoundsCenter(centeredBounds),
|
||||
Utils.getBoundsCenter(commonBounds)
|
||||
)
|
||||
|
||||
const center = Utils.getBoundsCenter(commonBounds)
|
||||
shapesToMove.forEach((shape) => {
|
||||
shape.point = Vec.toFixed(Vec.add(shape.point, delta))
|
||||
if (!shape.point) return
|
||||
shape.point = Vec.sub(point, Vec.sub(center, shape.point))
|
||||
})
|
||||
} else {
|
||||
const commonBounds = Utils.getCommonBounds(shapesToMove.map(TLDR.getBounds))
|
||||
|
||||
if (
|
||||
!(
|
||||
Utils.boundsContain(app.viewport, commonBounds) ||
|
||||
Utils.boundsCollide(app.viewport, commonBounds)
|
||||
)
|
||||
) {
|
||||
const center = Vec.toFixed(app.getPagePoint(app.centerPoint))
|
||||
|
||||
const centeredBounds = Utils.centerBounds(commonBounds, center)
|
||||
|
||||
const delta = Vec.sub(
|
||||
Utils.getBoundsCenter(centeredBounds),
|
||||
Utils.getBoundsCenter(commonBounds)
|
||||
)
|
||||
|
||||
shapesToMove.forEach((shape) => {
|
||||
shape.point = Vec.toFixed(Vec.add(shape.point, delta))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
if (content.assets) {
|
||||
for (const asset of content.assets) {
|
||||
afterAssets[asset.id] = asset
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -233,13 +263,7 @@ export function insertContent(
|
|||
pages: {
|
||||
[currentPageId]: after,
|
||||
},
|
||||
assets: content.assets
|
||||
? Object.fromEntries(
|
||||
content.assets
|
||||
.filter((asset) => !app.document.assets[asset.id])
|
||||
.map((asset) => [asset.id, asset])
|
||||
)
|
||||
: {},
|
||||
assets: afterAssets,
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
selectedIds: select ? Object.keys(after.shapes) : [...app.selectedIds],
|
||||
|
|
|
|||
Loading…
Reference in a new issue