kopia lustrzana https://github.com/Tldraw/Tldraw
Adds ungroup
Steve Ruiz
rodzic
737e1dda0d
commit
3f89af61b5
|
|
@ -24,7 +24,8 @@
|
|||
"build": "yarn build:packages && cd packages/www && yarn build",
|
||||
"build:packages": "cd packages/core && yarn build && cd ../tldraw && yarn build",
|
||||
"publish:patch": "yarn build:packages && lerna publish patch",
|
||||
"docs": "lerna run docs --stream"
|
||||
"docs": "lerna run docs --stream",
|
||||
"docs:watch": "lerna run docs:watch --stream"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
"lint": "eslint src/ --ext .ts,.tsx",
|
||||
"clean": "rm -rf dist",
|
||||
"ts-node": "ts-node",
|
||||
"docs": "typedoc --entryPoints src/index.ts"
|
||||
"docs": "typedoc",
|
||||
"docs:watch": "typedoc --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
|
|
@ -55,4 +56,4 @@
|
|||
"react-use-gesture": "^9.1.3"
|
||||
},
|
||||
"gitHead": "838fabdbff1a66d4d7ee8aa5c5d117bc55acbff2"
|
||||
}
|
||||
}
|
||||
|
|
@ -9,5 +9,12 @@
|
|||
"paths": {
|
||||
"+*": ["./*"]
|
||||
}
|
||||
},
|
||||
"typedocOptions": {
|
||||
"name": "@tldraw/core",
|
||||
"theme": "default",
|
||||
"highlightTheme": "github-light",
|
||||
"entryPoints": ["src/index.ts"],
|
||||
"out": "docs"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
"lint": "eslint src/ --ext .ts,.tsx",
|
||||
"clean": "rm -rf dist",
|
||||
"ts-node": "ts-node",
|
||||
"docs": "typedoc --entryPoints src/index.ts"
|
||||
"docs": "typedoc",
|
||||
"docs:watch": "typedoc --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
|
|
@ -66,4 +67,4 @@
|
|||
"rko": "^0.5.20"
|
||||
},
|
||||
"gitHead": "838fabdbff1a66d4d7ee8aa5c5d117bc55acbff2"
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,8 @@ import type { Patch } from 'rko'
|
|||
export function group(
|
||||
data: Data,
|
||||
ids: string[],
|
||||
groupId = Utils.uniqueId()
|
||||
groupId: string,
|
||||
pageId: string
|
||||
): TLDrawCommand | undefined {
|
||||
const beforeShapes: Record<string, Patch<TLDrawShape | undefined>> = {}
|
||||
const afterShapes: Record<string, Patch<TLDrawShape | undefined>> = {}
|
||||
|
|
@ -15,8 +16,6 @@ export function group(
|
|||
const beforeBindings: Record<string, Patch<TLDrawBinding | undefined>> = {}
|
||||
const afterBindings: Record<string, Patch<TLDrawBinding | undefined>> = {}
|
||||
|
||||
const { currentPageId } = data.appState
|
||||
|
||||
const idsToGroup = [...ids]
|
||||
const shapesToGroup: TLDrawShape[] = []
|
||||
const deletedGroupIds: string[] = []
|
||||
|
|
@ -24,13 +23,13 @@ export function group(
|
|||
|
||||
// Collect all of the shapes to group (and their ids)
|
||||
for (const id of ids) {
|
||||
const shape = TLDR.getShape(data, id, currentPageId)
|
||||
const shape = TLDR.getShape(data, id, pageId)
|
||||
if (shape.children === undefined) {
|
||||
shapesToGroup.push(shape)
|
||||
} else {
|
||||
otherEffectedGroups.push(shape)
|
||||
idsToGroup.push(...shape.children)
|
||||
shapesToGroup.push(...shape.children.map((id) => TLDR.getShape(data, id, currentPageId)))
|
||||
shapesToGroup.push(...shape.children.map((id) => TLDR.getShape(data, id, pageId)))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,8 +38,8 @@ export function group(
|
|||
// Do the shapes have the same parent?
|
||||
if (shapesToGroup.every((shape) => shape.parentId === shapesToGroup[0].parentId)) {
|
||||
// Is the common parent a shape (not the page)?
|
||||
if (shapesToGroup[0].parentId !== currentPageId) {
|
||||
const commonParent = TLDR.getShape(data, shapesToGroup[0].parentId, currentPageId)
|
||||
if (shapesToGroup[0].parentId !== pageId) {
|
||||
const commonParent = TLDR.getShape(data, shapesToGroup[0].parentId, pageId)
|
||||
// Are all of the common parent's shapes selected?
|
||||
if (commonParent.children?.length === idsToGroup.length) {
|
||||
// Don't create a group if that group would be the same as the
|
||||
|
|
@ -51,7 +50,7 @@ export function group(
|
|||
}
|
||||
|
||||
// A flattened array of shapes from the page
|
||||
const flattenedShapes = TLDR.flattenPage(data, currentPageId)
|
||||
const flattenedShapes = TLDR.flattenPage(data, pageId)
|
||||
|
||||
// A map of shapes to their index in flattendShapes
|
||||
const shapeIndexMap = Object.fromEntries(
|
||||
|
|
@ -62,13 +61,13 @@ export function group(
|
|||
const sortedShapes = shapesToGroup.sort((a, b) => shapeIndexMap[a.id] - shapeIndexMap[b.id])
|
||||
|
||||
// The parentId is always the current page
|
||||
const groupParentId = currentPageId // sortedShapes[0].parentId
|
||||
const groupParentId = pageId // sortedShapes[0].parentId
|
||||
|
||||
// The childIndex should be the lowest index of the selected shapes
|
||||
// with a parent that is the current page; or else the child index
|
||||
// of the lowest selected shape.
|
||||
const groupChildIndex = (
|
||||
sortedShapes.filter((shape) => shape.parentId === currentPageId)[0] || sortedShapes[0]
|
||||
sortedShapes.filter((shape) => shape.parentId === pageId)[0] || sortedShapes[0]
|
||||
).childIndex
|
||||
|
||||
// The shape's point is the min point of its childrens' common bounds
|
||||
|
|
@ -89,8 +88,8 @@ export function group(
|
|||
// Reparent shapes to the new group
|
||||
sortedShapes.forEach((shape, index) => {
|
||||
// If the shape is part of a different group, mark the parent shape for cleanup
|
||||
if (shape.parentId !== currentPageId) {
|
||||
const parentShape = TLDR.getShape(data, shape.parentId, currentPageId)
|
||||
if (shape.parentId !== pageId) {
|
||||
const parentShape = TLDR.getShape(data, shape.parentId, pageId)
|
||||
otherEffectedGroups.push(parentShape)
|
||||
}
|
||||
|
||||
|
|
@ -124,9 +123,9 @@ export function group(
|
|||
|
||||
// And if that parent is part of a different group, mark it for cleanup
|
||||
// (This is necessary only when we implement nested groups.)
|
||||
if (shape.parentId !== currentPageId) {
|
||||
if (shape.parentId !== pageId) {
|
||||
deletedGroupIds.push(shape.id)
|
||||
otherEffectedGroups.push(TLDR.getShape(data, shape.parentId, currentPageId))
|
||||
otherEffectedGroups.push(TLDR.getShape(data, shape.parentId, pageId))
|
||||
}
|
||||
} else {
|
||||
beforeShapes[shape.id] = {
|
||||
|
|
@ -143,7 +142,7 @@ export function group(
|
|||
|
||||
// TODO: This code is copied from delete.command. Create a shared helper!
|
||||
|
||||
const page = TLDR.getPage(data, currentPageId)
|
||||
const page = TLDR.getPage(data, pageId)
|
||||
|
||||
// We also need to delete bindings that reference the deleted shapes
|
||||
Object.values(page.bindings).forEach((binding) => {
|
||||
|
|
@ -155,7 +154,7 @@ export function group(
|
|||
afterBindings[binding.id] = undefined
|
||||
|
||||
// Let's also look each the bound shape...
|
||||
const shape = TLDR.getShape(data, id, currentPageId)
|
||||
const shape = TLDR.getShape(data, id, pageId)
|
||||
|
||||
// If the bound shape has a handle that references the deleted binding...
|
||||
if (shape.handles) {
|
||||
|
|
@ -193,14 +192,14 @@ export function group(
|
|||
before: {
|
||||
document: {
|
||||
pages: {
|
||||
[currentPageId]: {
|
||||
[pageId]: {
|
||||
shapes: beforeShapes,
|
||||
bindings: beforeBindings,
|
||||
},
|
||||
},
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
selectedIds: TLDR.getSelectedIds(data, currentPageId),
|
||||
[pageId]: {
|
||||
selectedIds: TLDR.getSelectedIds(data, pageId),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -208,13 +207,13 @@ export function group(
|
|||
after: {
|
||||
document: {
|
||||
pages: {
|
||||
[currentPageId]: {
|
||||
[pageId]: {
|
||||
shapes: afterShapes,
|
||||
bindings: beforeBindings,
|
||||
},
|
||||
},
|
||||
pageStates: {
|
||||
[currentPageId]: {
|
||||
[pageId]: {
|
||||
selectedIds: [groupId],
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export * from './duplicate-page'
|
|||
export * from './duplicate'
|
||||
export * from './flip'
|
||||
export * from './group'
|
||||
export * from './move-to-page'
|
||||
export * from './move'
|
||||
export * from './rename-page'
|
||||
export * from './rotate'
|
||||
|
|
@ -17,5 +18,5 @@ export * from './style'
|
|||
export * from './toggle-decoration'
|
||||
export * from './toggle'
|
||||
export * from './translate'
|
||||
export * from './ungroup'
|
||||
export * from './update'
|
||||
export * from './move-to-page'
|
||||
|
|
|
|||
|
|
@ -1,36 +1,31 @@
|
|||
import { TLDrawState } from '~state'
|
||||
import { mockDocument } from '~test'
|
||||
import { Utils } from '@tldraw/core'
|
||||
import type { Data } from '~types'
|
||||
import { Data, TLDrawShapeType } from '~types'
|
||||
import { TLDR } from '~state/tldr'
|
||||
|
||||
const doc = Utils.deepClone(mockDocument)
|
||||
const tlstate = new TLDrawState().createShapes(
|
||||
{
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
id: 'a',
|
||||
childIndex: 1.0,
|
||||
},
|
||||
{
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
id: 'b',
|
||||
childIndex: 2.0,
|
||||
},
|
||||
{
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
id: 'c',
|
||||
childIndex: 3,
|
||||
},
|
||||
{
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
id: 'd',
|
||||
childIndex: 4,
|
||||
}
|
||||
)
|
||||
|
||||
doc.pages.page1.shapes['a'] = {
|
||||
...doc.pages.page1.shapes['rect1'],
|
||||
id: 'a',
|
||||
childIndex: 1,
|
||||
}
|
||||
doc.pages.page1.shapes['b'] = {
|
||||
...doc.pages.page1.shapes['rect1'],
|
||||
id: 'b',
|
||||
childIndex: 2,
|
||||
}
|
||||
doc.pages.page1.shapes['c'] = {
|
||||
...doc.pages.page1.shapes['rect1'],
|
||||
id: 'c',
|
||||
childIndex: 3,
|
||||
}
|
||||
doc.pages.page1.shapes['d'] = {
|
||||
...doc.pages.page1.shapes['rect1'],
|
||||
id: 'd',
|
||||
childIndex: 4,
|
||||
}
|
||||
doc.pageStates.page1.selectedIds = ['a']
|
||||
|
||||
delete doc.pages.page1.shapes['rect1']
|
||||
delete doc.pages.page1.shapes['rect2']
|
||||
delete doc.pages.page1.shapes['rect3']
|
||||
const doc = { ...tlstate.document }
|
||||
|
||||
function getSortedShapeIds(data: Data) {
|
||||
return TLDR.getShapes(data, data.appState.currentPageId)
|
||||
|
|
@ -39,9 +34,14 @@ function getSortedShapeIds(data: Data) {
|
|||
.join('')
|
||||
}
|
||||
|
||||
describe('Move command', () => {
|
||||
const tlstate = new TLDrawState()
|
||||
function getSortedIndices(data: Data) {
|
||||
return TLDR.getShapes(data, data.appState.currentPageId)
|
||||
.sort((a, b) => a.childIndex - b.childIndex)
|
||||
.map((shape) => shape.childIndex.toFixed(2))
|
||||
.join(',')
|
||||
}
|
||||
|
||||
describe('Move command', () => {
|
||||
it('does, undoes and redoes command', () => {
|
||||
tlstate.loadDocument(doc)
|
||||
tlstate.select('b')
|
||||
|
|
@ -59,6 +59,7 @@ describe('Move command', () => {
|
|||
tlstate.select('b')
|
||||
tlstate.moveToBack()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('bacd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('0.50,1.00,3.00,4.00')
|
||||
})
|
||||
|
||||
it('moves two adjacent siblings to back', () => {
|
||||
|
|
@ -66,6 +67,7 @@ describe('Move command', () => {
|
|||
tlstate.select('b', 'c')
|
||||
tlstate.moveToBack()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('bcad')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('0.33,0.67,1.00,4.00')
|
||||
})
|
||||
|
||||
it('moves two non-adjacent siblings to back', () => {
|
||||
|
|
@ -73,6 +75,7 @@ describe('Move command', () => {
|
|||
tlstate.select('b', 'd')
|
||||
tlstate.moveToBack()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('bdac')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('0.33,0.67,1.00,3.00')
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -82,6 +85,7 @@ describe('Move command', () => {
|
|||
tlstate.select('c')
|
||||
tlstate.moveBackward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('acbd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,1.50,2.00,4.00')
|
||||
})
|
||||
|
||||
it('moves a shape at first index backward', () => {
|
||||
|
|
@ -89,6 +93,7 @@ describe('Move command', () => {
|
|||
tlstate.select('a')
|
||||
tlstate.moveBackward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('abcd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,2.00,3.00,4.00')
|
||||
})
|
||||
|
||||
it('moves two adjacent siblings backward', () => {
|
||||
|
|
@ -96,6 +101,7 @@ describe('Move command', () => {
|
|||
tlstate.select('c', 'd')
|
||||
tlstate.moveBackward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('acdb')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,1.50,1.67,2.00')
|
||||
})
|
||||
|
||||
it('moves two non-adjacent siblings backward', () => {
|
||||
|
|
@ -103,6 +109,7 @@ describe('Move command', () => {
|
|||
tlstate.select('b', 'd')
|
||||
tlstate.moveBackward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('badc')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('0.50,1.00,2.50,3.00')
|
||||
})
|
||||
|
||||
it('moves two adjacent siblings backward at zero index', () => {
|
||||
|
|
@ -110,6 +117,7 @@ describe('Move command', () => {
|
|||
tlstate.select('a', 'b')
|
||||
tlstate.moveBackward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('abcd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,2.00,3.00,4.00')
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -119,6 +127,7 @@ describe('Move command', () => {
|
|||
tlstate.select('c')
|
||||
tlstate.moveForward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('abdc')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,2.00,4.00,5.00')
|
||||
})
|
||||
|
||||
it('moves a shape forward at the top index', () => {
|
||||
|
|
@ -128,6 +137,7 @@ describe('Move command', () => {
|
|||
tlstate.moveForward()
|
||||
tlstate.moveForward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('acdb')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,3.00,4.00,5.00')
|
||||
})
|
||||
|
||||
it('moves two adjacent siblings forward', () => {
|
||||
|
|
@ -135,6 +145,7 @@ describe('Move command', () => {
|
|||
tlstate.select('a', 'b')
|
||||
tlstate.moveForward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('cabd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('3.00,3.33,3.50,4.00')
|
||||
})
|
||||
|
||||
it('moves two non-adjacent siblings forward', () => {
|
||||
|
|
@ -142,6 +153,7 @@ describe('Move command', () => {
|
|||
tlstate.select('a', 'c')
|
||||
tlstate.moveForward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('badc')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('2.00,2.50,4.00,5.00')
|
||||
})
|
||||
|
||||
it('moves two adjacent siblings forward at top index', () => {
|
||||
|
|
@ -149,6 +161,7 @@ describe('Move command', () => {
|
|||
tlstate.select('c', 'd')
|
||||
tlstate.moveForward()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('abcd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,2.00,3.00,4.00')
|
||||
})
|
||||
})
|
||||
|
||||
|
|
@ -158,6 +171,7 @@ describe('Move command', () => {
|
|||
tlstate.select('b')
|
||||
tlstate.moveToFront()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('acdb')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,3.00,4.00,5.00')
|
||||
})
|
||||
|
||||
it('moves two adjacent siblings to front', () => {
|
||||
|
|
@ -165,6 +179,7 @@ describe('Move command', () => {
|
|||
tlstate.select('a', 'b')
|
||||
tlstate.moveToFront()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('cdab')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('3.00,4.00,5.00,6.00')
|
||||
})
|
||||
|
||||
it('moves two non-adjacent siblings to front', () => {
|
||||
|
|
@ -172,6 +187,7 @@ describe('Move command', () => {
|
|||
tlstate.select('a', 'c')
|
||||
tlstate.moveToFront()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('bdac')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('2.00,4.00,5.00,6.00')
|
||||
})
|
||||
|
||||
it('moves siblings already at front to front', () => {
|
||||
|
|
@ -179,6 +195,7 @@ describe('Move command', () => {
|
|||
tlstate.select('c', 'd')
|
||||
tlstate.moveToFront()
|
||||
expect(getSortedShapeIds(tlstate.state)).toBe('abcd')
|
||||
expect(getSortedIndices(tlstate.state)).toBe('1.00,2.00,3.00,4.00')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -122,13 +122,26 @@ export function move(data: Data, ids: string[], type: MoveType): TLDrawCommand {
|
|||
// i = the index of the first closed spot
|
||||
// j = the index of the first open spot
|
||||
|
||||
startChildIndex =
|
||||
j === 0 ? sortedChildren[j].childIndex / 2 : sortedChildren[j - 1].childIndex
|
||||
const endChildIndex = sortedChildren[j].childIndex
|
||||
let startChildIndex: number
|
||||
let step: number
|
||||
|
||||
const step = (sortedChildren[j].childIndex - startChildIndex) / (i - j + 1)
|
||||
if (j === 0) {
|
||||
// We're moving below the first child, start from
|
||||
// half of its child index.
|
||||
|
||||
startChildIndex = endChildIndex / 2
|
||||
step = endChildIndex / 2 / (i - j + 1)
|
||||
} else {
|
||||
// Start from the child index of the child below the
|
||||
// child above.
|
||||
startChildIndex = sortedChildren[j - 1].childIndex
|
||||
step = (endChildIndex - startChildIndex) / (i - j + 1)
|
||||
startChildIndex += step
|
||||
}
|
||||
|
||||
for (let k = 0; k < i - j; k++) {
|
||||
indexMap[sortedChildren[j + k + 1].id] = startChildIndex + step * (k + 1)
|
||||
indexMap[sortedChildren[j + k + 1].id] = startChildIndex + step * k
|
||||
}
|
||||
|
||||
break
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export * from './ungroup.command'
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
import { TLDrawState } from '~state'
|
||||
import { mockDocument } from '~test'
|
||||
import { GroupShape, TLDrawShapeType } from '~types'
|
||||
|
||||
describe('Ungroup command', () => {
|
||||
const tlstate = new TLDrawState()
|
||||
|
||||
it('does, undoes and redoes command', () => {
|
||||
tlstate
|
||||
.loadDocument(mockDocument)
|
||||
.group(['rect1', 'rect2'], 'groupA')
|
||||
.select('groupA')
|
||||
.ungroup()
|
||||
|
||||
expect(tlstate.getShape<GroupShape>('groupA')).toBeUndefined()
|
||||
expect(tlstate.getShape('rect1').parentId).toBe('page1')
|
||||
expect(tlstate.getShape('rect2').parentId).toBe('page1')
|
||||
|
||||
tlstate.undo()
|
||||
|
||||
expect(tlstate.getShape<GroupShape>('groupA')).toBeDefined()
|
||||
expect(tlstate.getShape<GroupShape>('groupA').children).toStrictEqual(['rect1', 'rect2'])
|
||||
expect(tlstate.getShape('rect1').parentId).toBe('groupA')
|
||||
expect(tlstate.getShape('rect2').parentId).toBe('groupA')
|
||||
|
||||
tlstate.redo()
|
||||
|
||||
expect(tlstate.getShape<GroupShape>('groupA')).toBeUndefined()
|
||||
expect(tlstate.getShape('rect1').parentId).toBe('page1')
|
||||
expect(tlstate.getShape('rect2').parentId).toBe('page1')
|
||||
})
|
||||
|
||||
describe('When ungrouping', () => {
|
||||
it('Ungroups shapes on any page', () => {
|
||||
tlstate
|
||||
.loadDocument(mockDocument)
|
||||
.group(['rect1', 'rect2'], 'groupA')
|
||||
.createPage('page2')
|
||||
.ungroup('groupA', 'page1')
|
||||
|
||||
expect(tlstate.getShape('groupA', 'page1')).toBeUndefined()
|
||||
tlstate.undo()
|
||||
expect(tlstate.getShape('groupA', 'page1')).toBeDefined()
|
||||
})
|
||||
|
||||
it('Does not ungroup if a group shape is not selected', () => {
|
||||
tlstate.loadDocument(mockDocument).select('rect1')
|
||||
const before = tlstate.state
|
||||
tlstate.group()
|
||||
// State should not have changed
|
||||
expect(tlstate.state).toStrictEqual(before)
|
||||
})
|
||||
|
||||
it('Reparents shapes to the page at the correct childIndex', () => {
|
||||
const tlstate = new TLDrawState()
|
||||
.createShapes(
|
||||
{
|
||||
id: 'rect1',
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
childIndex: 1,
|
||||
},
|
||||
{
|
||||
id: 'rect2',
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
childIndex: 2,
|
||||
},
|
||||
{
|
||||
id: 'rect3',
|
||||
type: TLDrawShapeType.Rectangle,
|
||||
childIndex: 3,
|
||||
}
|
||||
)
|
||||
.group(['rect1', 'rect2'], 'groupA')
|
||||
|
||||
const { childIndex } = tlstate.getShape<GroupShape>('groupA')
|
||||
|
||||
expect(childIndex).toBe(1)
|
||||
expect(tlstate.getShape('rect1').childIndex).toBe(1)
|
||||
expect(tlstate.getShape('rect2').childIndex).toBe(2)
|
||||
expect(tlstate.getShape('rect3').childIndex).toBe(3)
|
||||
|
||||
tlstate.ungroup('groupA')
|
||||
|
||||
expect(tlstate.getShape('rect1').childIndex).toBe(1)
|
||||
expect(tlstate.getShape('rect2').childIndex).toBe(2)
|
||||
expect(tlstate.getShape('rect3').childIndex).toBe(3)
|
||||
})
|
||||
it.todo('Deletes any bindings to the group')
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
import type { GroupShape, TLDrawBinding, TLDrawShape } from '~types'
|
||||
import type { Data, TLDrawCommand } from '~types'
|
||||
import { TLDR } from '~state/tldr'
|
||||
import type { Patch } from 'rko'
|
||||
|
||||
export function ungroup(data: Data, groupId: string, pageId: string): TLDrawCommand | undefined {
|
||||
const beforeShapes: Record<string, Patch<TLDrawShape | undefined>> = {}
|
||||
const afterShapes: Record<string, Patch<TLDrawShape | undefined>> = {}
|
||||
|
||||
const beforeBindings: Record<string, Patch<TLDrawBinding | undefined>> = {}
|
||||
const afterBindings: Record<string, Patch<TLDrawBinding | undefined>> = {}
|
||||
|
||||
// The group shape
|
||||
const groupShape = TLDR.getShape<GroupShape>(data, groupId, pageId)
|
||||
|
||||
const idsToUngroup = groupShape.children
|
||||
const shapesToUngroup: TLDrawShape[] = []
|
||||
const deletedGroupIds: string[] = []
|
||||
|
||||
// Collect all of the shapes to group (and their ids)
|
||||
for (const id of idsToUngroup) {
|
||||
const shape = TLDR.getShape(data, id, pageId)
|
||||
shapesToUngroup.push(shape)
|
||||
}
|
||||
|
||||
// We'll start placing the shapes at this childIndex
|
||||
const startingChildIndex = groupShape.childIndex
|
||||
|
||||
// And we'll need to fit them under this child index
|
||||
const endingChildIndex = TLDR.getChildIndexAbove(data, groupShape.id, pageId)
|
||||
|
||||
const step = (endingChildIndex - startingChildIndex) / shapesToUngroup.length
|
||||
|
||||
// An array of shapes in order by their child index
|
||||
const sortedShapes = shapesToUngroup.sort((a, b) => a.childIndex - b.childIndex)
|
||||
|
||||
// Remove the group shape
|
||||
beforeShapes[groupId] = groupShape
|
||||
afterShapes[groupId] = undefined
|
||||
|
||||
// Reparent shapes to the page
|
||||
sortedShapes.forEach((shape, index) => {
|
||||
beforeShapes[shape.id] = {
|
||||
parentId: shape.parentId,
|
||||
childIndex: shape.childIndex,
|
||||
}
|
||||
|
||||
afterShapes[shape.id] = {
|
||||
parentId: pageId,
|
||||
childIndex: startingChildIndex + step * index,
|
||||
}
|
||||
})
|
||||
|
||||
const page = TLDR.getPage(data, pageId)
|
||||
|
||||
// We also need to delete bindings that reference the deleted shapes
|
||||
Object.values(page.bindings)
|
||||
.filter((binding) => binding.toId === groupId || binding.fromId === groupId)
|
||||
.forEach((binding) => {
|
||||
for (const id of [binding.toId, binding.fromId]) {
|
||||
// If the binding references the deleted group...
|
||||
if (afterShapes[id] === undefined) {
|
||||
// Delete the binding
|
||||
beforeBindings[binding.id] = binding
|
||||
afterBindings[binding.id] = undefined
|
||||
|
||||
// Let's also look each the bound shape...
|
||||
const shape = TLDR.getShape(data, id, pageId)
|
||||
|
||||
// If the bound shape has a handle that references the deleted binding...
|
||||
if (shape.handles) {
|
||||
Object.values(shape.handles)
|
||||
.filter((handle) => handle.bindingId === binding.id)
|
||||
.forEach((handle) => {
|
||||
// Save the binding reference in the before patch
|
||||
beforeShapes[id] = {
|
||||
...beforeShapes[id],
|
||||
handles: {
|
||||
...beforeShapes[id]?.handles,
|
||||
[handle.id]: { bindingId: binding.id },
|
||||
},
|
||||
}
|
||||
|
||||
// Unless we're currently deleting the shape, remove the
|
||||
// binding reference from the after patch
|
||||
if (!deletedGroupIds.includes(id)) {
|
||||
afterShapes[id] = {
|
||||
...afterShapes[id],
|
||||
handles: {
|
||||
...afterShapes[id]?.handles,
|
||||
[handle.id]: { bindingId: undefined },
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
id: 'ungroup_shapes',
|
||||
before: {
|
||||
document: {
|
||||
pages: {
|
||||
[pageId]: {
|
||||
shapes: beforeShapes,
|
||||
bindings: beforeBindings,
|
||||
},
|
||||
},
|
||||
pageStates: {
|
||||
[pageId]: {
|
||||
selectedIds: [groupId],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
after: {
|
||||
document: {
|
||||
pages: {
|
||||
[pageId]: {
|
||||
shapes: afterShapes,
|
||||
bindings: beforeBindings,
|
||||
},
|
||||
},
|
||||
pageStates: {
|
||||
[pageId]: {
|
||||
selectedIds: idsToUngroup,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -374,8 +374,7 @@ export class TLDR {
|
|||
}
|
||||
|
||||
static getChildIndexAbove(data: Data, id: string, pageId: string): number {
|
||||
const page = this.getPage(data, pageId)
|
||||
|
||||
const page = data.document.pages[pageId]
|
||||
const shape = page.shapes[id]
|
||||
|
||||
let siblings: TLDrawShape[]
|
||||
|
|
@ -398,7 +397,7 @@ export class TLDR {
|
|||
|
||||
if (!nextSibling) return shape.childIndex + 1
|
||||
|
||||
return (shape.childIndex + nextSibling.childIndex) / 2
|
||||
return nextSibling.childIndex
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -333,7 +333,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Toggle pen mode.
|
||||
* @returns this
|
||||
*/
|
||||
togglePenMode = (): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -349,7 +348,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Toggle dark mode.
|
||||
* @returns this
|
||||
*/
|
||||
toggleDarkMode = (): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -363,7 +361,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Toggle zoom snap.
|
||||
* @returns this
|
||||
*/
|
||||
toggleZoomSnap = () => {
|
||||
if (this.session) return this
|
||||
|
|
@ -377,7 +374,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Toggle debug mode.
|
||||
* @returns this
|
||||
*/
|
||||
toggleDebugMode = () => {
|
||||
if (this.session) return this
|
||||
|
|
@ -391,7 +387,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Toggle the style panel.
|
||||
* @returns this
|
||||
*/
|
||||
toggleStylePanel = (): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -405,8 +400,7 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Select a tool.
|
||||
* @param tool The tool to select.
|
||||
* @returns this
|
||||
* @param tool The tool to select, or "select".
|
||||
*/
|
||||
selectTool = (tool: TLDrawShapeType | 'select'): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -426,7 +420,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Toggle the tool lock option.
|
||||
* @returns this
|
||||
*/
|
||||
toggleToolLock = (): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -446,7 +439,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Reset the document to a blank state.
|
||||
* @returns this
|
||||
*/
|
||||
resetDocument = (): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -483,8 +475,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Load a new document.
|
||||
* @param document The document to load
|
||||
* @param onChange (optional) A callback to call when the document changes
|
||||
* @returns this
|
||||
*/
|
||||
loadDocument = (document: TLDrawDocument): this => {
|
||||
this.deselectAll()
|
||||
|
|
@ -532,18 +522,38 @@ export class TLDrawState extends StateManager<Data> {
|
|||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new project.
|
||||
* Should move to the www layer.
|
||||
* @todo
|
||||
*/
|
||||
newProject = () => {
|
||||
// TODO
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the current project.
|
||||
* Should move to the www layer.
|
||||
* @todo
|
||||
*/
|
||||
saveProject = () => {
|
||||
// TODO
|
||||
}
|
||||
|
||||
/**
|
||||
* Load a project from the filesystem.
|
||||
* Should move to the www layer.
|
||||
* @todo
|
||||
*/
|
||||
loadProject = () => {
|
||||
// TODO
|
||||
}
|
||||
|
||||
/**
|
||||
* Sign out of the current account.
|
||||
* Should move to the www layer.
|
||||
* @todo
|
||||
*/
|
||||
signOut = () => {
|
||||
// TODO
|
||||
}
|
||||
|
|
@ -551,7 +561,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Get the current app state.
|
||||
* @returns this
|
||||
*/
|
||||
getAppState = (): Data['appState'] => {
|
||||
return this.appState
|
||||
|
|
@ -560,7 +569,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Get a page.
|
||||
* @param pageId (optional) The page's id.
|
||||
* @returns this
|
||||
*/
|
||||
getPage = (pageId = this.currentPageId): TLDrawPage => {
|
||||
return TLDR.getPage(this.state, pageId || this.currentPageId)
|
||||
|
|
@ -569,7 +577,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Get the shapes (as an array) from a given page.
|
||||
* @param pageId (optional) The page's id.
|
||||
* @returns this
|
||||
*/
|
||||
getShapes = (pageId = this.currentPageId): TLDrawShape[] => {
|
||||
return TLDR.getShapes(this.state, pageId || this.currentPageId)
|
||||
|
|
@ -578,7 +585,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Get the bindings from a given page.
|
||||
* @param pageId (optional) The page's id.
|
||||
* @returns this
|
||||
*/
|
||||
getBindings = (pageId = this.currentPageId): TLDrawBinding[] => {
|
||||
return TLDR.getBindings(this.state, pageId || this.currentPageId)
|
||||
|
|
@ -588,7 +594,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Get a shape from a given page.
|
||||
* @param id The shape's id.
|
||||
* @param pageId (optional) The page's id.
|
||||
* @returns this
|
||||
*/
|
||||
getShape = <T extends TLDrawShape = TLDrawShape>(id: string, pageId = this.currentPageId): T => {
|
||||
return TLDR.getShape<T>(this.state, id, pageId)
|
||||
|
|
@ -598,7 +603,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Get a binding from a given page.
|
||||
* @param id The binding's id.
|
||||
* @param pageId (optional) The page's id.
|
||||
* @returns this
|
||||
*/
|
||||
getBinding = (id: string, pageId = this.currentPageId): TLDrawBinding => {
|
||||
return TLDR.getBinding(this.state, id, pageId)
|
||||
|
|
@ -607,7 +611,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Get the page state for a given page.
|
||||
* @param pageId (optional) The page's id.
|
||||
* @returns this
|
||||
*/
|
||||
getPageState = (pageId = this.currentPageId): TLPageState => {
|
||||
return TLDR.getPageState(this.state, pageId || this.currentPageId)
|
||||
|
|
@ -617,7 +620,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Turn a screen point into a point on the page.
|
||||
* @param point The screen point
|
||||
* @param pageId (optional) The page to use
|
||||
* @returns this
|
||||
*/
|
||||
getPagePoint = (point: number[], pageId = this.currentPageId): number[] => {
|
||||
const { camera } = this.getPageState(pageId)
|
||||
|
|
@ -687,7 +689,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Create a new page.
|
||||
* @param pageId (optional) The new page's id.
|
||||
* @returns this
|
||||
*/
|
||||
createPage = (id?: string): this => {
|
||||
return this.setState(Commands.createPage(this.state, id))
|
||||
|
|
@ -696,7 +697,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Change the current page.
|
||||
* @param pageId The new current page's id.
|
||||
* @returns this
|
||||
*/
|
||||
changePage = (pageId: string): this => {
|
||||
return this.setState(Commands.changePage(this.state, pageId))
|
||||
|
|
@ -706,7 +706,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Rename a page.
|
||||
* @param pageId The id of the page to rename.
|
||||
* @param name The page's new name
|
||||
* @returns this
|
||||
*/
|
||||
renamePage = (pageId: string, name: string): this => {
|
||||
return this.setState(Commands.renamePage(this.state, pageId, name))
|
||||
|
|
@ -715,7 +714,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Duplicate a page.
|
||||
* @param pageId The id of the page to duplicate.
|
||||
* @returns this
|
||||
*/
|
||||
duplicatePage = (pageId: string): this => {
|
||||
return this.setState(Commands.duplicatePage(this.state, pageId))
|
||||
|
|
@ -724,7 +722,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Delete a page.
|
||||
* @param pageId The id of the page to delete.
|
||||
* @returns this
|
||||
*/
|
||||
deletePage = (pageId?: string): this => {
|
||||
if (Object.values(this.document.pages).length <= 1) return this
|
||||
|
|
@ -738,7 +735,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Copy one or more shapes to the clipboard.
|
||||
* @param ids The ids of the shapes to copy.
|
||||
* @returns this
|
||||
*/
|
||||
copy = (ids = this.selectedIds): this => {
|
||||
this.clipboard = ids
|
||||
|
|
@ -760,7 +756,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Paste shapes (or text) from clipboard to a certain point.
|
||||
* @param point
|
||||
* @param string
|
||||
* @returns this
|
||||
*/
|
||||
paste = (point?: number[], string?: string): this => {
|
||||
if (string) {
|
||||
|
|
@ -911,7 +906,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* @param point The camera point (top left of the viewport).
|
||||
* @param zoom The zoom level.
|
||||
* @param reason Why did the camera change?
|
||||
* @returns this
|
||||
*/
|
||||
setCamera = (point: number[], zoom: number, reason: string): this => {
|
||||
return this.patchState(
|
||||
|
|
@ -928,7 +922,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Reset the camera to the default position
|
||||
* @returns this
|
||||
*/
|
||||
resetCamera = (): this => {
|
||||
return this.setCamera(
|
||||
|
|
@ -941,7 +934,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Pan the camera
|
||||
* @param delta
|
||||
* @returns this
|
||||
*/
|
||||
pan = (delta: number[]): this => {
|
||||
const { camera } = this.pageState
|
||||
|
|
@ -953,7 +945,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* @param point The current point under the cursor.
|
||||
* @param delta The movement delta.
|
||||
* @param zoomDelta The zoom detal
|
||||
* @returns this
|
||||
*/
|
||||
pinchZoom = (point: number[], delta: number[], zoomDelta: number): this => {
|
||||
const { camera } = this.pageState
|
||||
|
|
@ -967,7 +958,7 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Zoom to a new zoom level, keeping the point under the cursor in the same position
|
||||
* @param next The new zoom level.
|
||||
* @returns this
|
||||
* @param center The point to zoom towards (defaults to screen center).
|
||||
*/
|
||||
zoomTo = (next: number, center = [window.innerWidth / 2, window.innerHeight / 2]): this => {
|
||||
const { zoom, point } = this.pageState.camera
|
||||
|
|
@ -978,7 +969,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom out by 25%
|
||||
* @returns this
|
||||
*/
|
||||
zoomIn = (): this => {
|
||||
const i = Math.round((this.pageState.camera.zoom * 100) / 25)
|
||||
|
|
@ -988,7 +978,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom in by 25%.
|
||||
* @returns this
|
||||
*/
|
||||
zoomOut = (): this => {
|
||||
const i = Math.round((this.pageState.camera.zoom * 100) / 25)
|
||||
|
|
@ -998,7 +987,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom to fit the page's shapes.
|
||||
* @returns this
|
||||
*/
|
||||
zoomToFit = (): this => {
|
||||
const shapes = this.getShapes()
|
||||
|
|
@ -1025,7 +1013,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom to the selected shapes.
|
||||
* @returns this
|
||||
*/
|
||||
zoomToSelection = (): this => {
|
||||
if (this.selectedIds.length === 0) return this
|
||||
|
|
@ -1050,7 +1037,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom back to content when the canvas is empty.
|
||||
* @returns this
|
||||
*/
|
||||
zoomToContent = (): this => {
|
||||
const shapes = this.getShapes()
|
||||
|
|
@ -1073,7 +1059,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom the camera to 100%.
|
||||
* @returns this
|
||||
*/
|
||||
zoomToActual = (): this => {
|
||||
return this.zoomTo(1)
|
||||
|
|
@ -1081,12 +1066,13 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Zoom the camera by a certain delta.
|
||||
* @returns this
|
||||
* @param delta The zoom delta.
|
||||
* @param center The point to zoom toward.
|
||||
*/
|
||||
zoom = Utils.throttle((delta: number): this => {
|
||||
zoom = Utils.throttle((delta: number, center?: number[]): this => {
|
||||
const { zoom } = this.pageState.camera
|
||||
const nextZoom = TLDR.getCameraZoom(zoom - delta * zoom)
|
||||
return this.zoomTo(nextZoom)
|
||||
return this.zoomTo(nextZoom, center)
|
||||
}, 16)
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
|
@ -1118,7 +1104,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Set the current selection.
|
||||
* @param ids The ids to select
|
||||
* @param push Whether to add the ids to the current selection instead.
|
||||
* @returns this
|
||||
*/
|
||||
private setSelectedIds = (ids: string[], push = false): this => {
|
||||
return this.patchState(
|
||||
|
|
@ -1141,7 +1126,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Undo the most recent selection.
|
||||
* @returns this
|
||||
*/
|
||||
undoSelect = (): this => {
|
||||
if (this.selectHistory.pointer > 0) {
|
||||
|
|
@ -1153,7 +1137,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Redo the previous selection.
|
||||
* @returns this
|
||||
*/
|
||||
redoSelect = (): this => {
|
||||
if (this.selectHistory.pointer < this.selectHistory.stack.length - 1) {
|
||||
|
|
@ -1166,7 +1149,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Select one or more shapes.
|
||||
* @param ids The shape ids to select.
|
||||
* @returns this
|
||||
*/
|
||||
select = (...ids: string[]): this => {
|
||||
ids.forEach((id) => {
|
||||
|
|
@ -1181,7 +1163,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Select all shapes on the page.
|
||||
* @returns this
|
||||
*/
|
||||
selectAll = (): this => {
|
||||
if (this.session) return this
|
||||
|
|
@ -1195,7 +1176,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Deselect any selected shapes.
|
||||
* @returns this
|
||||
*/
|
||||
deselectAll = (): this => {
|
||||
this.setSelectedIds([])
|
||||
|
|
@ -1211,7 +1191,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Start a new session.
|
||||
* @param session The new session
|
||||
* @param args arguments of the session's start method.
|
||||
* @returns this
|
||||
*/
|
||||
startSession = <T extends Session>(
|
||||
session: T,
|
||||
|
|
@ -1243,7 +1222,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Update the current session.
|
||||
* @param args The arguments of the current session's update method.
|
||||
* @returns this
|
||||
*/
|
||||
updateSession = <T extends Session>(...args: ParametersExceptFirst<T['update']>): this => {
|
||||
const { session } = this
|
||||
|
|
@ -1256,7 +1234,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Cancel the current session.
|
||||
* @param args The arguments of the current session's cancel method.
|
||||
* @returns this
|
||||
*/
|
||||
cancelSession = <T extends Session>(...args: ParametersExceptFirst<T['cancel']>): this => {
|
||||
const { session } = this
|
||||
|
|
@ -1312,7 +1289,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Complete the current session.
|
||||
* @param args The arguments of the current session's complete method.
|
||||
* @returns this
|
||||
*/
|
||||
completeSession = <T extends Session>(...args: ParametersExceptFirst<T['complete']>): this => {
|
||||
const { session } = this
|
||||
|
|
@ -1433,23 +1409,51 @@ export class TLDrawState extends StateManager<Data> {
|
|||
return this
|
||||
}
|
||||
|
||||
/* -------------------- Sessions -------------------- */
|
||||
/* -------------------------------------------------- */
|
||||
/* Sessions */
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Start a brush session.
|
||||
* @param point
|
||||
*/
|
||||
startBrushSession = (point: number[]): this => {
|
||||
return this.startSession(new Sessions.BrushSession(this.state, point))
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a brush session.
|
||||
* @param point
|
||||
* @param metaKey
|
||||
*/
|
||||
updateBrushSession = (point: number[], metaKey = false): this => {
|
||||
return this.updateSession<Sessions.BrushSession>(point, metaKey)
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a translate session.
|
||||
* @param point
|
||||
*/
|
||||
startTranslateSession = (point: number[]): this => {
|
||||
return this.startSession(new Sessions.TranslateSession(this.state, point))
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a translate session.
|
||||
* @param point
|
||||
* @param shiftKey
|
||||
* @param altKey
|
||||
*/
|
||||
updateTranslateSession = (point: number[], shiftKey = false, altKey = false): this => {
|
||||
return this.updateSession<Sessions.TranslateSession>(point, shiftKey, altKey)
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a transform session
|
||||
* @param point
|
||||
* @param handle
|
||||
* @param commandId
|
||||
*/
|
||||
startTransformSession = (
|
||||
point: number[],
|
||||
handle: TLBoundsCorner | TLBoundsEdge | 'rotate',
|
||||
|
|
@ -1480,6 +1484,9 @@ export class TLDrawState extends StateManager<Data> {
|
|||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a transform session.
|
||||
*/
|
||||
updateTransformSession = (point: number[], shiftKey = false, altKey = false): this => {
|
||||
return this.updateSession<Sessions.TransformSingleSession | Sessions.TransformSession>(
|
||||
point,
|
||||
|
|
@ -1488,22 +1495,47 @@ export class TLDrawState extends StateManager<Data> {
|
|||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a text session.
|
||||
* @param id
|
||||
*/
|
||||
startTextSession = (id: string): this => {
|
||||
return this.startSession(new Sessions.TextSession(this.state, id))
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a text session.
|
||||
* @param text
|
||||
*/
|
||||
updateTextSession = (text: string): this => {
|
||||
return this.updateSession<Sessions.TextSession>(text)
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a draw session.
|
||||
* @param id
|
||||
* @param point
|
||||
*/
|
||||
startDrawSession = (id: string, point: number[]): this => {
|
||||
return this.startSession(new Sessions.DrawSession(this.state, id, point))
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a draw session.
|
||||
* @param point
|
||||
* @param pressure
|
||||
* @param shiftKey
|
||||
*/
|
||||
updateDrawSession = (point: number[], pressure: number, shiftKey = false): this => {
|
||||
return this.updateSession<Sessions.DrawSession>(point, pressure, shiftKey)
|
||||
}
|
||||
|
||||
/**
|
||||
* Start a handle session.
|
||||
* @param point
|
||||
* @param handleId
|
||||
* @param commandId
|
||||
*/
|
||||
startHandleSession = (point: number[], handleId: string, commandId?: string): this => {
|
||||
const selectedShape = this.page.shapes[this.selectedIds[0]]
|
||||
if (selectedShape.type === TLDrawShapeType.Arrow) {
|
||||
|
|
@ -1517,6 +1549,13 @@ export class TLDrawState extends StateManager<Data> {
|
|||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a handle session.
|
||||
* @param point
|
||||
* @param shiftKey
|
||||
* @param altKey
|
||||
* @param metaKey
|
||||
*/
|
||||
updateHandleSession = (
|
||||
point: number[],
|
||||
shiftKey = false,
|
||||
|
|
@ -1539,7 +1578,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Manually create shapes on the page.
|
||||
* @param shapes An array of shape partials, containing the initial props for the shapes.
|
||||
* @command
|
||||
* @returns this
|
||||
*/
|
||||
createShapes = (
|
||||
...shapes: ({ id: string; type: TLDrawShapeType } & Partial<TLDrawShape>)[]
|
||||
|
|
@ -1559,7 +1597,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Manually update a set of shapes.
|
||||
* @param shapes An array of shape partials, containing the changes to be made to each shape.
|
||||
* @command
|
||||
* @returns this
|
||||
*/
|
||||
updateShapes = (...shapes: ({ id: string } & Partial<TLDrawShape>)[]): this => {
|
||||
if (shapes.length === 0) return this
|
||||
|
|
@ -1570,7 +1607,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Create one or more shapes.
|
||||
* @param shapes An array of shapes.
|
||||
* @command
|
||||
* @returns this
|
||||
*/
|
||||
create = (...shapes: TLDrawShape[]): this => {
|
||||
if (shapes.length === 0) return this
|
||||
|
|
@ -1581,7 +1617,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Delete one or more shapes.
|
||||
* @param ids The ids of the shapes to delete.
|
||||
* @command
|
||||
* @returns this
|
||||
*/
|
||||
delete = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1590,7 +1625,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Delete all shapes on the page.
|
||||
* @returns this
|
||||
*/
|
||||
clear = (): this => {
|
||||
this.selectAll()
|
||||
|
|
@ -1602,7 +1636,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Change the style for one or more shapes.
|
||||
* @param style A style partial to apply to the shapes.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
style = (style: Partial<ShapeStyles>, ids = this.selectedIds): this => {
|
||||
return this.setState(Commands.style(this.state, ids, style))
|
||||
|
|
@ -1612,7 +1645,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Align one or more shapes.
|
||||
* @param direction Whether to align horizontally or vertically.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
align = (type: AlignType, ids = this.selectedIds): this => {
|
||||
if (ids.length < 2) return this
|
||||
|
|
@ -1623,7 +1655,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Distribute one or more shapes.
|
||||
* @param direction Whether to distribute horizontally or vertically..
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
distribute = (direction: DistributeType, ids = this.selectedIds): this => {
|
||||
if (ids.length < 3) return this
|
||||
|
|
@ -1634,7 +1665,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Stretch one or more shapes to their common bounds.
|
||||
* @param direction Whether to stretch horizontally or vertically.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
stretch = (direction: StretchType, ids = this.selectedIds): this => {
|
||||
if (ids.length < 2) return this
|
||||
|
|
@ -1644,7 +1674,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Flip one or more shapes horizontally.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
flipHorizontal = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1654,7 +1683,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Flip one or more shapes vertically.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
flipVertical = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1663,11 +1691,9 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Move one or more shapes to a new page. Will also break or move bindings.
|
||||
* @param toPage The id of the page to move the shapes to.
|
||||
* @param fromPage The id of the page to move the shapes from
|
||||
*(defaults to current page).
|
||||
* @param toPageId The id of the page to move the shapes to.
|
||||
* @param fromPageId The id of the page to move the shapes from (defaults to current page).
|
||||
* @param ids The ids of the shapes to move (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
moveToPage = (
|
||||
toPageId: string,
|
||||
|
|
@ -1682,7 +1708,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Move one or more shapes to the back of the page.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
moveToBack = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1692,7 +1717,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Move one or more shapes backward on of the page.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
moveBackward = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1702,7 +1726,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Move one or more shapes forward on the page.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
moveForward = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1712,7 +1735,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Move one or more shapes to the front of the page.
|
||||
* @param ids The ids of the shapes to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
moveToFront = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1724,7 +1746,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* @param delta The direction to nudge the shapes.
|
||||
* @param isMajor Whether this is a major (i.e. shift) nudge.
|
||||
* @param ids The ids to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
nudge = (delta: number[], isMajor = false, ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1734,7 +1755,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Duplicate one or more shapes.
|
||||
* @param ids The ids to duplicate (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
duplicate = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1744,7 +1764,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Toggle the hidden property of one or more shapes.
|
||||
* @param ids The ids to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
toggleHidden = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1754,7 +1773,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Toggle the locked property of one or more shapes.
|
||||
* @param ids The ids to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
toggleLocked = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1764,7 +1782,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
/**
|
||||
* Toggle the fixed-aspect-ratio property of one or more shapes.
|
||||
* @param ids The ids to change (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
toggleAspectRatioLocked = (ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1775,7 +1792,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Toggle the decoration at a handle of one or more shapes.
|
||||
* @param handleId The handle to toggle.
|
||||
* @param ids The ids of the shapes to toggle the decoration on.
|
||||
* @returns this
|
||||
*/
|
||||
toggleDecoration = (handleId: string, ids = this.selectedIds): this => {
|
||||
if (ids.length === 0 || !(handleId === 'start' || handleId === 'end')) return this
|
||||
|
|
@ -1786,7 +1802,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Rotate one or more shapes by a delta.
|
||||
* @param delta The delta in radians.
|
||||
* @param ids The ids to rotate (defaults to selection).
|
||||
* @returns this
|
||||
*/
|
||||
rotate = (delta = Math.PI * -0.5, ids = this.selectedIds): this => {
|
||||
if (ids.length === 0) return this
|
||||
|
|
@ -1795,29 +1810,35 @@ export class TLDrawState extends StateManager<Data> {
|
|||
|
||||
/**
|
||||
* Group the selected shapes.
|
||||
* @returns this
|
||||
* @todo
|
||||
* @param ids The ids to group (defaults to selection).
|
||||
* @param groupId The new group's id.
|
||||
*/
|
||||
group = (ids = this.selectedIds, groupId = Utils.uniqueId()): this => {
|
||||
group = (
|
||||
ids = this.selectedIds,
|
||||
groupId = Utils.uniqueId(),
|
||||
pageId = this.currentPageId
|
||||
): this => {
|
||||
if (ids.length < 2) return this
|
||||
const command = Commands.group(this.state, ids, groupId)
|
||||
const command = Commands.group(this.state, ids, groupId, pageId)
|
||||
if (!command) return this
|
||||
return this.setState(command)
|
||||
}
|
||||
|
||||
/**
|
||||
* Ungroup the selected groups.
|
||||
* @returns this
|
||||
* @todo
|
||||
*/
|
||||
ungroup = (): this => {
|
||||
// TODO
|
||||
return this
|
||||
ungroup = (groupId = this.selectedIds[0], pageId = this.currentPageId): this => {
|
||||
const shape = this.getShape(groupId, pageId)
|
||||
if (shape.type !== TLDrawShapeType.Group) return this
|
||||
|
||||
const command = Commands.ungroup(this.state, groupId, pageId)
|
||||
if (!command) return this
|
||||
return this.setState(command)
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel the current session.
|
||||
* @returns this
|
||||
*/
|
||||
cancel = (): this => {
|
||||
switch (this.state.appState.status.current) {
|
||||
|
|
@ -1931,7 +1952,6 @@ export class TLDrawState extends StateManager<Data> {
|
|||
* Create a new shape based on the active tool.
|
||||
* @param point The point at which to create the shape
|
||||
* @param id (optional) The new shape's id.
|
||||
* @returns
|
||||
*/
|
||||
createActiveToolShape = (point: number[], id = Utils.uniqueId()): this => {
|
||||
const pagePoint = Vec.round(this.getPagePoint(point))
|
||||
|
|
|
|||
|
|
@ -9,5 +9,9 @@
|
|||
"paths": {
|
||||
"~*": ["./*"]
|
||||
}
|
||||
},
|
||||
"typedocOptions": {
|
||||
"entryPoints": ["src/index.ts"],
|
||||
"out": "docs"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue