Fix move to page (#143)

* Remove references to window

* Improve drawn strokes for other dash styles

packages/dev/src/embedded.tsx

@@ -13,7 +13,7 @@ export default function Embedded(): JSX.Element {
           marginBottom: '32px',
         }}
       >
-        <TLDraw id="small1" />
+        <TLDraw id="small3" />
       </div>
 
       <div
@@ -24,7 +24,7 @@ export default function Embedded(): JSX.Element {
           overflow: 'hidden',
         }}
       >
-        <TLDraw id="small2" />
+        <TLDraw id="small4" />
       </div>
     </div>
   )

packages/tldraw/src/components/style-panel/style-panel.tsx

@@ -48,8 +48,6 @@ export function StylePanel(): JSX.Element {
   )
 }
 
-const showKbds = !Utils.isMobileSize()
-
 const selectedShapesCountSelector = (s: Data) =>
   s.document.pageStates[s.appState.currentPageId].selectedIds.length
 
@@ -57,6 +55,8 @@ function SelectedShapeContent(): JSX.Element {
   const { tlstate, useSelector } = useTLDrawContext()
   const selectedShapesCount = useSelector(selectedShapesCountSelector)
 
+  const [showKbds] = React.useState(() => !Utils.isMobileSize())
+
   const handleCopy = React.useCallback(() => {
     tlstate.copy()
   }, [tlstate])

packages/tldraw/src/components/tldraw/tldraw.tsx

@@ -215,7 +215,7 @@ function InnerTldraw({
             page={page}
             pageState={pageState}
             users={users}
-            userId={tlstate.state.room.userId}
+            userId={tlstate.state.room?.userId}
             shapeUtils={tldrawShapeUtils}
             theme={theme}
             meta={meta}

packages/tldraw/src/shape/shapes/draw/draw.tsx

@@ -103,18 +103,18 @@ export const Draw = new ShapeUtil<DrawShape, SVGSVGElement, TLDrawMeta>(() => ({
     const strokeDasharray = {
       [DashStyle.Draw]: 'none',
       [DashStyle.Solid]: `none`,
-      [DashStyle.Dotted]: `${strokeWidth / 10} ${strokeWidth * 3}`,
+      [DashStyle.Dotted]: `0.1 ${strokeWidth * 4}`,
-      [DashStyle.Dashed]: `${strokeWidth * 3} ${strokeWidth * 3}`,
+      [DashStyle.Dashed]: `${strokeWidth * 4} ${strokeWidth * 4}`,
     }[style.dash]
 
     const strokeDashoffset = {
       [DashStyle.Draw]: 'none',
       [DashStyle.Solid]: `none`,
-      [DashStyle.Dotted]: `-${strokeWidth / 20}`,
+      [DashStyle.Dotted]: `0`,
-      [DashStyle.Dashed]: `-${strokeWidth}`,
+      [DashStyle.Dashed]: `0`,
     }[style.dash]
 
-    const sw = 1 + strokeWidth * 2
+    const sw = 1 + strokeWidth * 1.5
 
     return (
       <SVGContainer ref={ref} id={shape.id + '_svg'} {...events}>

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

@@ -1,7 +1,7 @@
 import type { Data, TLDrawCommand, TLDrawPage } from '~types'
 import { Utils, TLPageState } from '@tldraw/core'
 
-export function createPage(data: Data, pageId = Utils.uniqueId()): TLDrawCommand {
+export function createPage(data: Data, center: number[], pageId = Utils.uniqueId()): TLDrawCommand {
   const { currentPageId } = data.appState
 
   const topPage = Object.values(data.document.pages).sort(
@@ -11,20 +11,20 @@ export function createPage(data: Data, pageId = Utils.uniqueId()): TLDrawCommand
   const nextChildIndex = topPage?.childIndex ? topPage?.childIndex + 1 : 1
 
   // TODO: Iterate the name better
-  const nextName = `Page ${nextChildIndex}`
+  const nextName = `New Page`
 
   const page: TLDrawPage = {
     id: pageId,
     name: nextName,
-    shapes: {},
     childIndex: nextChildIndex,
+    shapes: {},
     bindings: {},
   }
 
   const pageState: TLPageState = {
     id: pageId,
     selectedIds: [],
-    camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
+    camera: { point: center, zoom: 1 },
     currentParentId: pageId,
     editingId: undefined,
     bindingId: undefined,

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

@@ -1,7 +1,7 @@
 import type { Data, TLDrawCommand } from '~types'
 import { Utils } from '@tldraw/core'
 
-export function duplicatePage(data: Data, pageId: string): TLDrawCommand {
+export function duplicatePage(data: Data, center: number[], pageId: string): TLDrawCommand {
   const newId = Utils.uniqueId()
   const { currentPageId } = data.appState
 
@@ -10,6 +10,7 @@ export function duplicatePage(data: Data, pageId: string): TLDrawCommand {
   const nextPage = {
     ...page,
     id: newId,
+    name: page.name + ' Copy',
     shapes: Object.fromEntries(
       Object.entries(page.shapes).map(([id, shape]) => {
         return [
@@ -51,7 +52,7 @@ export function duplicatePage(data: Data, pageId: string): TLDrawCommand {
             ...page,
             id: newId,
             selectedIds: [],
-            camera: { point: [-window.innerWidth / 2, -window.innerHeight / 2], zoom: 1 },
+            camera: data.document.pageStates[currentPageId].camera,
             currentParentId: newId,
             editingId: undefined,
             bindingId: undefined,

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

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import type { ArrowShape, Data, PagePartial, TLDrawCommand, TLDrawShape } from '~types'
 import { TLDR } from '~state/tldr'
-import { Utils } from '@tldraw/core'
+import { Utils, TLBounds } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 
 export function moveToPage(
   data: Data,
   ids: string[],
+  viewportBounds: TLBounds,
   fromPageId: string,
   toPageId: string
 ): TLDrawCommand {
@@ -157,14 +158,18 @@ export function moveToPage(
   // Finally, center camera on selection
 
   const toPageState = data.document.pageStates[toPageId]
+
   const bounds = Utils.getCommonBounds(movingShapes.map((shape) => TLDR.getBounds(shape)))
+
   const zoom = TLDR.getCameraZoom(
-    window.innerWidth < window.innerHeight
+    viewportBounds.width < viewportBounds.height
-      ? (window.innerWidth - 128) / bounds.width
+      ? (viewportBounds.width - 128) / bounds.width
-      : (window.innerHeight - 128) / bounds.height
+      : (viewportBounds.height - 128) / bounds.height
   )
-  const mx = (window.innerWidth - bounds.width * zoom) / 2 / zoom
+
-  const my = (window.innerHeight - bounds.height * zoom) / 2 / zoom
+  const mx = (viewportBounds.width - bounds.width * zoom) / 2 / zoom
+  const my = (viewportBounds.height - bounds.height * zoom) / 2 / zoom
+
   const point = Vec.round(Vec.add([-bounds.minX, -bounds.minY], [mx, my]))
 
   return {

packages/tldraw/src/state/tlstate.ts

@@ -940,7 +940,9 @@ export class TLDrawState extends StateManager<Data> {
    * @param pageId (optional) The new page's id.
    */
   createPage = (id?: string): this => {
-    return this.setState(Commands.createPage(this.state, id))
+    return this.setState(
+      Commands.createPage(this.state, [-this.bounds.width / 2, -this.bounds.height / 2], id)
+    )
   }
 
   /**
@@ -965,7 +967,9 @@ export class TLDrawState extends StateManager<Data> {
    * @param pageId The id of the page to duplicate.
    */
   duplicatePage = (pageId: string): this => {
-    return this.setState(Commands.duplicatePage(this.state, pageId))
+    return this.setState(
+      Commands.duplicatePage(this.state, [-this.bounds.width / 2, -this.bounds.height / 2], pageId)
+    )
   }
 
   /**
@@ -2091,7 +2095,7 @@ export class TLDrawState extends StateManager<Data> {
     ids = this.selectedIds
   ): this => {
     if (ids.length === 0) return this
-    this.setState(Commands.moveToPage(this.state, ids, fromPageId, toPageId))
+    this.setState(Commands.moveToPage(this.state, ids, this.bounds, fromPageId, toPageId))
     return this
   }
 
@@ -2557,11 +2561,6 @@ export class TLDrawState extends StateManager<Data> {
   }
 
   onPinchEnd: TLPinchEventHandler = () => {
-    // if (this.state.settings.isZoomSnap) {
-    //   const i = Math.round((this.pageState.camera.zoom * 100) / 25)
-    //   const nextZoom = TLDR.getCameraZoom(i * 0.25)
-    //   this.zoomTo(nextZoom, inputs.pointer?.point)
-    // }
     this.undoSelect()
     this.setStatus(TLDrawStatus.Idle)
   }