PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge branch 'main' into test/commands

Browse source
This commit is contained in:
Steve Ruiz 2021-09-06 09:33:46 +01:00
commit c904200fc7
28 changed files with 577 additions and 278 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lerna.json
View file

@ -1,8 +1,9 @@
{
"version": "0.0.59",
"version": "0.0.79",
"registry": "https://registry.npmjs.org/",
"publishConfig": {
"access": "public"
"access": "public",
"directory": "dist"
},
"npmClient": "yarn",
"useWorkspaces": true

5
package.json
View file

@ -8,7 +8,7 @@
"url": "git+https://github.com/tldraw/tldraw.git"
},
"license": "MIT",
"version": "0.0.36",
"version": "0.0.74",
"workspaces": [
"packages/core",
"packages/tldraw",
@ -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",

15
packages/core/package.json
View file

@ -1,8 +1,8 @@
{
"name": "@tldraw/core",
"version": "0.0.59",
"version": "0.0.79",
"private": false,
"description": "A tiny little drawing app (core).",
"description": "A tiny little drawing app (core)",
"author": "@steveruizok",
"repository": {
"type": "git",
@ -11,6 +11,9 @@
},
"license": "MIT",
"keywords": [],
"files": [
"dist/**/*"
],
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"types": "./dist/types/index.d.ts",
@ -19,13 +22,14 @@
"start:pre": "node scripts/pre-dev && yarn types:pre",
"start": "node scripts/dev & yarn types:dev",
"build": "yarn clean && node scripts/build && yarn types:build",
"types:pre": "tsc ",
"types:pre": "tsc",
"types:dev": "tsc --watch ",
"types:build": "tsc --project tsconfig.build.json",
"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",
@ -53,6 +57,5 @@
"dependencies": {
"deepmerge": "^4.2.2",
"react-use-gesture": "^9.1.3"
},
"gitHead": "838fabdbff1a66d4d7ee8aa5c5d117bc55acbff2"
}
}

6
packages/core/scripts/build.js
View file

@ -36,12 +36,6 @@ async function main() {
external: ['react', 'react-dom'],
})
for (const file of ['package.json', 'README.md']) {
fs.copyFile(file, `dist/${file}`, fs.constants.COPYFILE_EXCL, (err) => {
if (err) throw err
})
}
console.log(`✔ ${name}: Built package.`)
} catch (e) {
console.log(`× ${name}: Build failed due to an error.`)

7
packages/core/tsconfig.build.json
View file

@ -7,9 +7,14 @@
"**/*.spec.tsx",
"**/*.spec.ts",
"src/test",
"dist"
"dist",
"docs"
],
"compilerOptions": {
"incremental": false,
"emitDeclarationOnly": true,
"declarationMap": false,
"sourceMap": false,
"outDir": "./dist/types"
}
}

3
packages/core/tsconfig.json
View file

@ -1,9 +1,8 @@
{
"extends": "../../tsconfig.base.json",
"include": ["src"],
"exclude": ["node_modules", "dist"],
"exclude": ["node_modules", "dist", "docs"],
"compilerOptions": {
"emitDeclarationOnly": true,
"rootDir": "src",
"outDir": "./dist/types",
"baseUrl": "src",

6
packages/dev/package.json
View file

@ -1,8 +1,8 @@
{
"name": "@tldraw/dev",
"version": "0.0.59",
"version": "0.0.79",
"private": true,
"description": "A tiny little drawing app (core).",
"description": "A tiny little drawing app (dev)",
"author": "@steveruizok",
"license": "MIT",
"keywords": [
@ -18,7 +18,7 @@
"src"
],
"dependencies": {
"@tldraw/tldraw": "^0.0.59",
"@tldraw/tldraw": "^0.0.64",
"idb": "^6.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2"

7
packages/tldraw/README.md
View file

@ -22,11 +22,7 @@ Import the `TLDraw` React component and use it in your app.
import { TLDraw } from '@tldraw/tldraw'
function App() {
return (
<div>
<TLDraw />
</div>
)
return <TLDraw />
}
```
@ -38,6 +34,7 @@ The `TLDraw` React component is the [tldraw](https://tldraw.com) editor exported
| Prop | Type | Description |
| --------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id` | `string` | (optional) An id under which to persist the component's state. |
| `document` | `TLDrawDocument` | (optional) An initial [`TLDrawDocument`](#tldrawdocument) object. |
| `currentPageId` | `string` | (optional) A current page id, referencing the `TLDrawDocument` object provided via the `document` prop. |
| `onMount` | `(TLDrawState) => void` | (optional) A callback function that will be called when the editor first mounts, receiving the current `TLDrawState`. |

15
packages/tldraw/package.json
View file

@ -1,8 +1,8 @@
{
"name": "@tldraw/tldraw",
"version": "0.0.59",
"version": "0.0.79",
"private": false,
"description": "A tiny little drawing app (editor).",
"description": "A tiny little drawing app (editor)",
"author": "@steveruizok",
"repository": {
"type": "git",
@ -11,6 +11,9 @@
},
"license": "MIT",
"keywords": [],
"files": [
"dist/**/*"
],
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"types": "./dist/types/index.d.ts",
@ -25,7 +28,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",
@ -60,10 +64,9 @@
"@radix-ui/react-radio-group": "^0.0.18",
"@radix-ui/react-tooltip": "^0.0.20",
"@stitches/react": "^1.0.0",
"@tldraw/core": "^0.0.59",
"@tldraw/core": "^0.0.79",
"perfect-freehand": "^0.5.3",
"react-hotkeys-hook": "^3.4.0",
"rko": "^0.5.20"
},
"gitHead": "838fabdbff1a66d4d7ee8aa5c5d117bc55acbff2"
}
}

6
packages/tldraw/scripts/build.js
View file

@ -36,12 +36,6 @@ async function main() {
external: ['react', 'react-dom'],
})
for (const file of ['package.json', 'README.md']) {
fs.copyFile(file, `dist/${file}`, fs.constants.COPYFILE_EXCL, (err) => {
if (err) throw err
})
}
console.log(`✔ ${name}: Built package.`)
} catch (e) {
console.log(`× ${name}: Build failed due to an error.`)

2
packages/tldraw/src/state/command/delete/delete.command.spec.ts
View file

@ -114,4 +114,6 @@ describe('Delete command', () => {
expect(tlstate.getShape('newGroup')).toBeUndefined()
})
})
it.todo('Does not delete uneffected bindings.')
})

2
packages/tldraw/src/state/command/duplicate/duplicate.command.spec.ts
View file

@ -170,4 +170,6 @@ describe('Duplicate command', () => {
expect(Object.keys(tlstate.page.shapes).length).toBe(beforeShapeIds.length + 1)
})
})
it.todo('Does not delete uneffected bindings.')
})

76
packages/tldraw/src/state/command/duplicate/duplicate.command.ts
View file

@ -83,46 +83,48 @@ export function duplicate(data: Data, ids: string[]): TLDrawCommand {
})
// Which ids did we end up duplicating?
const duplicatedShapeIds = Object.keys(duplicateMap)
const dupedShapeIds = new Set(Object.keys(duplicateMap))
// Handle bindings that effect duplicated shapes
Object.values(page.bindings).forEach((binding) => {
if (duplicatedShapeIds.includes(binding.fromId)) {
if (duplicatedShapeIds.includes(binding.toId)) {
// If the binding is between two duplicating shapes then
// duplicate the binding, too
const duplicatedBindingId = Utils.uniqueId()
Object.values(page.bindings)
.filter((binding) => dupedShapeIds.has(binding.fromId) || dupedShapeIds.has(binding.toId))
.forEach((binding) => {
if (dupedShapeIds.has(binding.fromId)) {
if (dupedShapeIds.has(binding.toId)) {
// If the binding is between two duplicating shapes then
// duplicate the binding, too
const duplicatedBindingId = Utils.uniqueId()
const duplicatedBinding = {
...Utils.deepClone(binding),
id: duplicatedBindingId,
fromId: duplicateMap[binding.fromId],
toId: duplicateMap[binding.toId],
const duplicatedBinding = {
...Utils.deepClone(binding),
id: duplicatedBindingId,
fromId: duplicateMap[binding.fromId],
toId: duplicateMap[binding.toId],
}
before.bindings[duplicatedBindingId] = undefined
after.bindings[duplicatedBindingId] = duplicatedBinding
// Change the duplicated shape's handle so that it reference
// the duplicated binding
const boundShape = after.shapes[duplicatedBinding.fromId]
Object.values(boundShape!.handles!).forEach((handle) => {
if (handle!.bindingId === binding.id) {
handle!.bindingId = duplicatedBindingId
}
})
} else {
// If only the fromId is selected, delete the binding on
// the duplicated shape's handles
const boundShape = after.shapes[duplicateMap[binding.fromId]]
Object.values(boundShape!.handles!).forEach((handle) => {
if (handle!.bindingId === binding.id) {
handle!.bindingId = undefined
}
})
}
before.bindings[duplicatedBindingId] = undefined
after.bindings[duplicatedBindingId] = duplicatedBinding
// Change the duplicated shape's handle so that it reference
// the duplicated binding
const boundShape = after.shapes[duplicatedBinding.fromId]
Object.values(boundShape!.handles!).forEach((handle) => {
if (handle!.bindingId === binding.id) {
handle!.bindingId = duplicatedBindingId
}
})
} else {
// If only the fromId is selected, delete the binding on
// the duplicated shape's handles
const boundShape = after.shapes[duplicateMap[binding.fromId]]
Object.values(boundShape!.handles!).forEach((handle) => {
if (handle!.bindingId === binding.id) {
handle!.bindingId = undefined
}
})
}
}
})
})
return {
id: 'duplicate',
@ -142,7 +144,9 @@ export function duplicate(data: Data, ids: string[]): TLDrawCommand {
[currentPageId]: after,
},
pageStates: {
[currentPageId]: { selectedIds: duplicatedShapeIds.map((id) => duplicateMap[id]) },
[currentPageId]: {
selectedIds: Array.from(dupedShapeIds.values()).map((id) => duplicateMap[id]),
},
},
},
},

41
packages/tldraw/src/state/command/group/group.command.ts
View file

@ -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],
},
},

3
packages/tldraw/src/state/command/index.ts
View file

@ -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'

2
packages/tldraw/src/state/command/move-to-page/move-to-page.command.spec.ts
View file

@ -236,4 +236,6 @@ describe('Move to page command', () => {
])
})
})
it.todo('Does not delete uneffected bindings.')
})

79
packages/tldraw/src/state/command/move/move.command.spec.ts
View file

@ -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', () => {
beforeEach(() => {
tlstate.loadDocument(doc)
})
@ -72,18 +72,21 @@ 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', () => {
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', () => {
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')
})
})
@ -92,30 +95,35 @@ 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', () => {
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', () => {
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', () => {
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', () => {
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')
})
})
@ -124,6 +132,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', () => {
@ -132,24 +141,28 @@ 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', () => {
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', () => {
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', () => {
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,24 +171,28 @@ 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', () => {
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', () => {
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', () => {
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')
})
})
})

21
packages/tldraw/src/state/command/move/move.command.ts
View file

@ -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

1
packages/tldraw/src/state/command/ungroup/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './ungroup.command'

91
packages/tldraw/src/state/command/ungroup/ungroup.command.spec.ts Normal file
View file

@ -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')
})
})

134
packages/tldraw/src/state/command/ungroup/ungroup.command.ts Normal file
View file

@ -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,
},
},
},
},
}
}

71
packages/tldraw/src/state/command/utils/removeShapesFromPage.ts
View file

@ -52,44 +52,49 @@ export function removeShapesFromPage(data: Data, ids: string[], pageId: string)
const page = TLDR.getPage(data, pageId)
// We also need to delete bindings that reference the deleted shapes
Object.values(page.bindings).forEach((binding) => {
for (const id of [binding.toId, binding.fromId]) {
// If the binding references a deleted shape...
if (after.shapes[id] === undefined) {
// Delete this binding
before.bindings[binding.id] = binding
after.bindings[binding.id] = undefined
Object.values(page.bindings)
.filter((binding) => deletedIds.has(binding.fromId) || deletedIds.has(binding.toId))
.forEach((binding) => {
for (const id of [binding.toId, binding.fromId]) {
// If the binding references a deleted shape...
if (after.shapes[id] === undefined) {
// Delete this binding
before.bindings[binding.id] = binding
after.bindings[binding.id] = undefined
// Let's also look each the bound shape...
const shape = TLDR.getShape(data, id, pageId)
// 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
before.shapes[id] = {
...before.shapes[id],
handles: {
...before.shapes[id]?.handles,
[handle.id]: { bindingId: binding.id },
},
}
// Unless we're currently deleting the shape, remove the
// binding reference from the after patch
if (!deletedIds.has(id)) {
after.shapes[id] = {
...after.shapes[id],
handles: { ...after.shapes[id]?.handles, [handle.id]: { bindingId: undefined } },
// 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
before.shapes[id] = {
...before.shapes[id],
handles: {
...before.shapes[id]?.handles,
[handle.id]: { bindingId: binding.id },
},
}
}
})
// Unless we're currently deleting the shape, remove the
// binding reference from the after patch
if (!deletedIds.has(id)) {
after.shapes[id] = {
...after.shapes[id],
handles: {
...after.shapes[id]?.handles,
[handle.id]: { bindingId: undefined },
},
}
}
})
}
}
}
}
})
})
return { before, after }
}

36
packages/tldraw/src/state/session/sessions/translate/translate.session.ts
View file

@ -382,30 +382,32 @@ export function getTranslateSnapshot(data: Data) {
// Potentially confusing name here: these are the ids of the
// original shapes that were cloned, not their clones' ids.
const clonedShapeIds = Object.keys(cloneMap)
const clonedShapeIds = new Set(Object.keys(cloneMap))
const bindingsToDelete: TLDrawBinding[] = []
// Create cloned bindings for shapes where both to and from shapes are selected
// (if the user clones, then we will create a new binding for the clones)
Object.values(page.bindings).forEach((binding) => {
if (clonedShapeIds.includes(binding.fromId)) {
if (clonedShapeIds.includes(binding.toId)) {
const cloneId = Utils.uniqueId()
const cloneBinding = {
...Utils.deepClone(binding),
id: cloneId,
fromId: cloneMap[binding.fromId] || binding.fromId,
toId: cloneMap[binding.toId] || binding.toId,
}
Object.values(page.bindings)
.filter((binding) => clonedShapeIds.has(binding.fromId) || clonedShapeIds.has(binding.toId))
.forEach((binding) => {
if (clonedShapeIds.has(binding.fromId)) {
if (clonedShapeIds.has(binding.toId)) {
const cloneId = Utils.uniqueId()
const cloneBinding = {
...Utils.deepClone(binding),
id: cloneId,
fromId: cloneMap[binding.fromId] || binding.fromId,
toId: cloneMap[binding.toId] || binding.toId,
}
clonedBindingsMap[binding.id] = cloneId
clonedBindings.push(cloneBinding)
} else {
bindingsToDelete.push(binding)
clonedBindingsMap[binding.id] = cloneId
clonedBindings.push(cloneBinding)
} else {
bindingsToDelete.push(binding)
}
}
}
})
})
// Assign new binding ids to clones (or delete them!)
clones.forEach((clone) => {

5
packages/tldraw/src/state/tldr.ts
View file

@ -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
}
/* -------------------------------------------------- */

202
packages/tldraw/src/state/tlstate.ts
View file

@ -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)
@ -685,9 +687,8 @@ export class TLDrawState extends StateManager<Data> {
/* -------------------------------------------------- */
/**
* Create a new page page.
* 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) {
@ -890,7 +885,7 @@ export class TLDrawState extends StateManager<Data> {
}
/**
* Copy one or more shapes as JSON
* Copy one or more shapes as JSON.
* @param ids The ids of the shapes to copy.
* @param pageId The page from which to copy the shapes.
* @returns A string containing the JSON.
@ -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) {
@ -1927,6 +1948,11 @@ export class TLDrawState extends StateManager<Data> {
return this
}
/**
* 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.
*/
createActiveToolShape = (point: number[], id = Utils.uniqueId()): this => {
const pagePoint = Vec.round(this.getPagePoint(point))

7
packages/tldraw/tsconfig.build.json
View file

@ -7,9 +7,14 @@
"**/*.spec.tsx",
"**/*.spec.ts",
"src/test",
"dist"
"dist",
"docs"
],
"compilerOptions": {
"incremental": false,
"sourceMap": false,
"emitDeclarationOnly": true,
"declarationMap": false,
"outDir": "./dist/types"
}
}

3
packages/tldraw/tsconfig.json
View file

@ -1,9 +1,8 @@
{
"extends": "../../tsconfig.base.json",
"include": ["src"],
"exclude": ["node_modules", "dist"],
"exclude": ["node_modules", "dist", "docs"],
"compilerOptions": {
"emitDeclarationOnly": true,
"rootDir": "src",
"outDir": "./dist/types",
"baseUrl": "src",

4
packages/www/package.json
View file

@ -1,6 +1,6 @@
{
"name": "www",
"version": "0.0.59",
"version": "0.0.79",
"private": true,
"description": "A tiny little drawing app (site).",
"repository": {
@ -17,7 +17,7 @@
},
"dependencies": {
"@stitches/react": "^1.0.0",
"@tldraw/tldraw": "^0.0.59",
"@tldraw/tldraw": "^0.0.64",
"next": "11.1.2",
"next-auth": "3.29.0",
"next-pwa": "^5.2.23",