Merge branch 'main' into test/commands

lerna.json

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

package.json

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

packages/core/package.json

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

packages/core/scripts/build.js

@@ -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.`)

packages/core/tsconfig.build.json

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

packages/core/tsconfig.json

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

packages/dev/package.json

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

packages/tldraw/README.md

@@ -22,11 +22,7 @@ Import the `TLDraw` React component and use it in your app.
 import { TLDraw } from '@tldraw/tldraw'
 
 function App() {
-  return (
+  return <TLDraw />
-    <div>
-      <TLDraw />
-    </div>
-  )
 }
 ```
 
@@ -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`.                                                   |

packages/tldraw/package.json

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

packages/tldraw/scripts/build.js

@@ -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.`)

packages/tldraw/src/state/command/delete/delete.command.spec.ts

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

packages/tldraw/src/state/command/duplicate/duplicate.command.spec.ts

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

packages/tldraw/src/state/command/duplicate/duplicate.command.ts

@@ -83,12 +83,14 @@ 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) => {
+  Object.values(page.bindings)
-    if (duplicatedShapeIds.includes(binding.fromId)) {
+    .filter((binding) => dupedShapeIds.has(binding.fromId) || dupedShapeIds.has(binding.toId))
-      if (duplicatedShapeIds.includes(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()
@@ -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]),
+          },
         },
       },
     },

packages/tldraw/src/state/command/group/group.command.ts

@@ -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) {
+    if (shapesToGroup[0].parentId !== pageId) {
-      const commonParent = TLDR.getShape(data, shapesToGroup[0].parentId, currentPageId)
+      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) {
+    if (shape.parentId !== pageId) {
-      const parentShape = TLDR.getShape(data, shape.parentId, currentPageId)
+      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]: {
+          [pageId]: {
-            selectedIds: TLDR.getSelectedIds(data, currentPageId),
+            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],
           },
         },

packages/tldraw/src/state/command/index.ts

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

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

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

packages/tldraw/src/state/command/move/move.command.spec.ts

@@ -1,36 +1,31 @@
 import { TLDrawState } from '~state'
-import { mockDocument } from '~test'
+import { Data, TLDrawShapeType } from '~types'
-import { Utils } from '@tldraw/core'
-import type { Data } from '~types'
 import { TLDR } from '~state/tldr'
 
-const doc = Utils.deepClone(mockDocument)
+const tlstate = new TLDrawState().createShapes(
-
+  {
-doc.pages.page1.shapes['a'] = {
+    type: TLDrawShapeType.Rectangle,
-  ...doc.pages.page1.shapes['rect1'],
     id: 'a',
-  childIndex: 1,
+    childIndex: 1.0,
-}
+  },
-doc.pages.page1.shapes['b'] = {
+  {
-  ...doc.pages.page1.shapes['rect1'],
+    type: TLDrawShapeType.Rectangle,
     id: 'b',
-  childIndex: 2,
+    childIndex: 2.0,
-}
+  },
-doc.pages.page1.shapes['c'] = {
+  {
-  ...doc.pages.page1.shapes['rect1'],
+    type: TLDrawShapeType.Rectangle,
     id: 'c',
     childIndex: 3,
-}
+  },
-doc.pages.page1.shapes['d'] = {
+  {
-  ...doc.pages.page1.shapes['rect1'],
+    type: TLDrawShapeType.Rectangle,
     id: 'd',
     childIndex: 4,
-}
+  }
-doc.pageStates.page1.selectedIds = ['a']
+)
 
-delete doc.pages.page1.shapes['rect1']
+const doc = { ...tlstate.document }
-delete doc.pages.page1.shapes['rect2']
-delete doc.pages.page1.shapes['rect3']
 
 function getSortedShapeIds(data: Data) {
   return TLDR.getShapes(data, data.appState.currentPageId)
@@ -39,9 +34,14 @@ function getSortedShapeIds(data: Data) {
     .join('')
 }
 
-describe('Move command', () => {
+function getSortedIndices(data: Data) {
-  const tlstate = new TLDrawState()
+  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')
     })
   })
 })

packages/tldraw/src/state/command/move/move.command.ts

@@ -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 =
+                const endChildIndex = sortedChildren[j].childIndex
-                  j === 0 ? sortedChildren[j].childIndex / 2 : sortedChildren[j - 1].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

packages/tldraw/src/state/command/ungroup/index.ts

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

packages/tldraw/src/state/command/ungroup/ungroup.command.spec.ts

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

packages/tldraw/src/state/command/ungroup/ungroup.command.ts

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

packages/tldraw/src/state/command/utils/removeShapesFromPage.ts

@@ -52,7 +52,9 @@ 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) => {
+  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) {
@@ -82,7 +84,10 @@ export function removeShapesFromPage(data: Data, ids: string[], pageId: string)
                 if (!deletedIds.has(id)) {
                   after.shapes[id] = {
                     ...after.shapes[id],
-                  handles: { ...after.shapes[id]?.handles, [handle.id]: { bindingId: undefined } },
+                    handles: {
+                      ...after.shapes[id]?.handles,
+                      [handle.id]: { bindingId: undefined },
+                    },
                   }
                 }
               })

packages/tldraw/src/state/session/sessions/translate/translate.session.ts

@@ -382,15 +382,17 @@ 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) => {
+  Object.values(page.bindings)
-    if (clonedShapeIds.includes(binding.fromId)) {
+    .filter((binding) => clonedShapeIds.has(binding.fromId) || clonedShapeIds.has(binding.toId))
-      if (clonedShapeIds.includes(binding.toId)) {
+    .forEach((binding) => {
+      if (clonedShapeIds.has(binding.fromId)) {
+        if (clonedShapeIds.has(binding.toId)) {
           const cloneId = Utils.uniqueId()
           const cloneBinding = {
             ...Utils.deepClone(binding),

packages/tldraw/src/state/tldr.ts

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

packages/tldraw/src/state/tlstate.ts

@@ -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.
+   * @param tool The tool to select, or "select".
-   * @returns this
    */
   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 toPageId The id of the page to move the shapes to.
-   * @param fromPage The id of the page to move the shapes from
+   * @param fromPageId The id of the page to move the shapes from (defaults to current page).
-   *(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
+   * @param ids The ids to group (defaults to selection).
-   * @todo
+   * @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 => {
+  ungroup = (groupId = this.selectedIds[0], pageId = this.currentPageId): this => {
-    // TODO
+    const shape = this.getShape(groupId, pageId)
-    return this
+    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))
 

packages/tldraw/tsconfig.build.json

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

packages/tldraw/tsconfig.json

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

packages/www/package.json

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