Improve names on creating page

packages/tldraw/src/state/command/create-page/create-page.command.ts

@@ -1,9 +1,37 @@
-import type { Data, TLDrawCommand } from '~types'
+import type { Data, TLDrawCommand, TLDrawPage } from '~types'
-import { Utils } from '@tldraw/core'
+import { Utils, TLPageState } from '@tldraw/core'
 
 export function createPage(data: Data, pageId = Utils.uniqueId()): TLDrawCommand {
   const { currentPageId } = data.appState
 
+  const topPage = Object.values(data.document.pages).sort(
+    (a, b) => (b.childIndex || 0) - (a.childIndex || 0)
+  )[0]
+
+  const nextChildIndex = topPage?.childIndex ? topPage?.childIndex + 1 : 1
+
+  // TODO: Iterate the name better
+  const nextName = `Page ${nextChildIndex}`
+
+  const page: TLDrawPage = {
+    id: pageId,
+    name: nextName,
+    shapes: {},
+    childIndex: nextChildIndex,
+    bindings: {},
+  }
+
+  const pageState: TLPageState = {
+    id: pageId,
+    selectedIds: [],
+    camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
+    currentParentId: pageId,
+    editingId: undefined,
+    bindingId: undefined,
+    hoveredId: undefined,
+    pointedId: undefined,
+  }
+
   return {
     id: 'create_page',
     before: {
@@ -21,23 +49,14 @@ export function createPage(data: Data, pageId = Utils.uniqueId()): TLDrawCommand
     },
     after: {
       appState: {
-        currentPageId: pageId,
+        currentPageId: page.id,
       },
       document: {
         pages: {
-          [pageId]: { id: pageId, shapes: {}, bindings: {} },
+          [pageId]: page,
         },
         pageStates: {
-          [pageId]: {
+          [pageId]: pageState,
-            id: pageId,
-            selectedIds: [],
-            camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
-            currentParentId: pageId,
-            editingId: undefined,
-            bindingId: undefined,
-            hoveredId: undefined,
-            pointedId: undefined,
-          },
         },
       },
     },

packages/tldraw/src/state/tlstate.ts

@@ -47,6 +47,7 @@ const defaultDocument: TLDrawDocument = {
   pages: {
     page: {
       id: 'page',
+      name: 'Page 1',
       childIndex: 1,
       shapes: {},
       bindings: {},