Restore fixes

2022-07-10 22:05:43 +01:00 · 2022-07-10 22:05:43 +01:00 · b0755d8def
commit b0755d8def
--- a/apps/www/components/ReadOnlyMultiplayerEditor.tsx
+++ b/apps/www/components/ReadOnlyMultiplayerEditor.tsx
@ -1,9 +1,6 @@
 import { RoomProvider } from '../utils/liveblocks'
 import { Tldraw, useFileSystem } from '@tldraw/tldraw'
 import { useAccountHandlers } from 'hooks/useAccountHandlers'
-import { useMultiplayerAssets } from 'hooks/useMultiplayerAssets'
-import { useMultiplayerState } from 'hooks/useMultiplayerState'
-import { useUploadAssets } from 'hooks/useUploadAssets'
 import React, { FC } from 'react'
 import { styled } from 'styles'
 import { useReadOnlyMultiplayerState } from 'hooks/useReadOnlyMultiplayerState'
--- a/packages/core/src/utils/utils.ts
+++ b/packages/core/src/utils/utils.ts
@ -1491,14 +1491,15 @@ left past the initial left edge) then swap points on that axis.
   * @param str string
   */
  static lns(str: string) {
-    const result = str
-      .split('')
-      .map((n) => (Number.isNaN(+n) ? n : +n < 5 ? 5 + +n : +n > 5 ? +n - 5 : +n))
+    const result = str.split('')
    result.push(...result.splice(0, Math.round(result.length / 5)))
    result.push(...result.splice(0, Math.round(result.length / 4)))
    result.push(...result.splice(0, Math.round(result.length / 3)))
    result.push(...result.splice(0, Math.round(result.length / 2)))
-    return result.reverse().join('')
+    return result
+      .reverse()
+      .map((n) => (+n ? (+n < 5 ? 5 + +n : +n > 5 ? +n - 5 : n) : n))
+      .join('')
  }
 }

--- a/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
+++ b/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
@ -158,7 +158,9 @@ export const StyledToolButton = styled('button', {
        },
      },
      circle: {
-        padding: '$2',
+        padding: 0,
+        height: 32,
+        width: 32,
        [`& ${StyledToolButtonInner}`]: {
          border: '1px solid $panelContrast',
          borderRadius: '100%',
--- a/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx
+++ b/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx
@ -101,7 +101,7 @@ const StyledToolsPanelContainer = styled('div', {
      side: 'bottom',
      debug: true,
      css: {
-        bottom: 40,
+        bottom: '40px',
      },
    },
  ],
@ -119,9 +119,9 @@ const StyledCenterWrap = styled('div', {

 const StyledStatusWrap = styled('div', {
  position: 'absolute',
-  bottom: 0,
-  left: 0,
-  right: 0,
+  bottom: '0px',
+  left: '0px',
+  right: '0px',
  height: '40px',
  width: '100%',
  maxWidth: '100%',
--- a/packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx
+++ b/packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx
@ -119,7 +119,7 @@ export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
        <DMItem
          id="TD-Multiplayer-CopyReadOnlyLink"
          onClick={handleCopyReadOnlySelect}
-          disabled={false}
+          disabled={!room}
        >
          <FormattedMessage id="copy.readonly.link" />
          <SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon>
--- a/packages/tldraw/src/hooks/index.ts
+++ b/packages/tldraw/src/hooks/index.ts
@ -5,4 +5,3 @@ export * from './useStylesheet'
 export * from './useFileSystemHandlers'
 export * from './useFileSystem'
 export * from './useTranslation'
-export * from './useMediaQuery'
--- a/packages/tldraw/src/hooks/useMediaQuery.ts
+++ b/packages/tldraw/src/hooks/useMediaQuery.ts
@ -1,19 +0,0 @@
-import * as React from 'react'
-
-export function useMediaQuery(query: string) {
-  const [matches, setMatches] = React.useState(false)
-
-  React.useEffect(() => {
-    const media = window.matchMedia(query)
-    if (media.matches !== matches) {
-      setMatches(media.matches)
-    }
-    const listener = () => setMatches(media.matches)
-    window.addEventListener('resize', listener)
-    return () => window.removeEventListener('resize', listener)
-  }, [matches, query])
-
-  return matches
-}
-
-export default useMediaQuery
--- a/packages/tldraw/src/state/TldrawApp.ts
+++ b/packages/tldraw/src/state/TldrawApp.ts
@ -267,13 +267,13 @@ export class TldrawApp extends StateManager<TDSnapshot> {

  constructor(id?: string, callbacks = {} as TDCallbacks) {
    super(TldrawApp.defaultState, id, TldrawApp.version, (prev, next, prevVersion) => {
-      return {
-        ...next,
-        document: migrate(
-          { ...next.document, ...prev.document, version: prevVersion },
-          TldrawApp.version
-        ),
-      }
+      return migrate(
+        {
+          ...next,
+          document: { ...next.document, ...prev.document, version: prevVersion },
+        },
+        TldrawApp.version
+      )
    })

    this.callbacks = callbacks
@ -282,10 +282,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
  /* -------------------- Internal -------------------- */

  protected migrate = (state: TDSnapshot): TDSnapshot => {
-    return {
-      ...state,
-      document: migrate(state.document, TldrawApp.version),
-    }
+    return migrate(state, TldrawApp.version)
  }

  protected onReady = () => {
@ -297,10 +294,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {

    try {
      this.patchState({
+        ...migrate(this.state, TldrawApp.version),
        appState: {
          status: TDStatus.Idle,
        },
-        document: migrate(this.document, TldrawApp.version),
      })
    } catch (e) {
      console.error('The data appears to be corrupted. Resetting!', e)
@ -1232,10 +1229,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    // Set the default page name to the localized version of "Page"
    doc.pages['page'].name = 'Page 1'

-    this.resetHistory()
-      .clearSelectHistory()
-      .loadDocument(migrate(doc, TldrawApp.version))
-      .persist({})
+    this.resetHistory().clearSelectHistory().loadDocument(TldrawApp.defaultDocument).persist({})

    return this
  }
@ -1273,12 +1267,17 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    // If it's a new document, do a full change.
    if (this.document.id !== document.id) {
      this.replaceState({
-        ...this.state,
+        ...migrate(
+          {
+            ...this.state,
+            document,
+          },
+          TldrawApp.version
+        ),
        appState: {
          ...this.appState,
          currentPageId: Object.keys(document.pages)[0],
        },
-        document: migrate(document, TldrawApp.version),
      })
      return this
    }
@ -1340,12 +1339,11 @@ export class TldrawApp extends StateManager<TDSnapshot> {

    return this.replaceState(
      {
-        ...this.state,
+        ...migrate(
+          { ...this.state, document: { ...document, pageStates: currentPageStates } },
+          TldrawApp.version
+        ),
        appState: nextAppState,
-        document: {
-          ...migrate(document, TldrawApp.version),
-          pageStates: currentPageStates,
-        },
      },
      'merge'
    )
@ -1358,7 +1356,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
  updateDocument = (document: TDDocument, reason = 'updated_document'): this => {
    const prevState = this.state

-    const nextState = { ...prevState, document: { ...prevState.document } }
+    let nextState = { ...prevState, document: { ...prevState.document } }

    if (!document.pages[this.currentPageId]) {
      nextState.appState = {
@ -1399,9 +1397,10 @@ export class TldrawApp extends StateManager<TDSnapshot> {
      }
    }

-    nextState.document = migrate(nextState.document, nextState.document.version || 0)
-
-    return this.replaceState(nextState, `${reason}:${document.id}`)
+    return this.replaceState(
+      migrate(nextState, nextState.document.version || 0),
+      `${reason}:${document.id}`
+    )
  }

  /**
@ -1437,22 +1436,21 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    this.clearSelectHistory()
    this.session = undefined

-    this.replaceState(
-      {
-        ...TldrawApp.defaultState,
-        settings: {
-          ...this.state.settings,
-        },
-        document: migrate(document, TldrawApp.version),
-        appState: {
-          ...TldrawApp.defaultState.appState,
-          ...this.state.appState,
-          currentPageId: Object.keys(document.pages)[0],
-          disableAssets: this.disableAssets,
-        },
+    const state = {
+      ...TldrawApp.defaultState,
+      settings: {
+        ...this.state.settings,
      },
-      'loaded_document'
-    )
+      document,
+      appState: {
+        ...TldrawApp.defaultState.appState,
+        ...this.state.appState,
+        currentPageId: Object.keys(document.pages)[0],
+        disableAssets: this.disableAssets,
+      },
+    }
+
+    this.replaceState(migrate(state, TldrawApp.version), 'loaded_document')
    const { point, zoom } = this.camera
    this.updateViewport(point, zoom)
    return this
@ -1476,7 +1474,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {
    if (this.readOnly) return
    try {
      const fileHandle = await saveToFileSystem(
-        migrate(this.document, TldrawApp.version),
+        migrate(this.state, TldrawApp.version).document,
        this.fileSystemHandle
      )
      this.fileSystemHandle = fileHandle
@ -2043,21 +2041,18 @@ export class TldrawApp extends StateManager<TDSnapshot> {
            font-weight: 500;
            font-style: normal;
          }
-
          @font-face {
            font-family: 'Source Code Pro';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.source_code_pro}) format('woff');
            font-weight: 500;
            font-style: normal;
          }
-
          @font-face {
            font-family: 'Source Sans Pro';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.source_sans_pro}) format('woff');
            font-weight: 500;
            font-style: normal;
          }
-
          @font-face {
            font-family: 'Crimson Pro';
            src: url(data:application/x-font-woff;charset=utf-8;base64,${fonts.crimson_pro}) format('woff');
@ -4121,7 +4116,7 @@ export class TldrawApp extends StateManager<TDSnapshot> {

  getShapeUtil = TLDR.getShapeUtil

-  static version = 15.3
+  static version = 15.4

  static defaultDocument: TDDocument = {
    id: 'doc',
--- a/packages/tldraw/src/state/snapshots/TldrawApp.spec.ts.snap
+++ b/packages/tldraw/src/state/snapshots/TldrawApp.spec.ts.snap
@ -50,7 +50,7 @@ TldrawTestApp {
          "shapes": Object {},
        },
      },
-      "version": 15.3,
+      "version": 15.4,
    },
    "settings": Object {
      "dockPosition": "bottom",
@ -201,7 +201,7 @@ TldrawTestApp {
          },
        },
      },
-      "version": 15.3,
+      "version": 15.4,
    },
    "settings": Object {
      "dockPosition": "bottom",
@ -373,7 +373,7 @@ TldrawTestApp {
          "shapes": Object {},
        },
      },
-      "version": 15.3,
+      "version": 15.4,
    },
    "settings": Object {
      "dockPosition": "bottom",
--- a/packages/tldraw/src/state/data/migrate.ts
+++ b/packages/tldraw/src/state/data/migrate.ts
@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { Decoration, FontStyle, TDDocument, TDShapeType, TextShape } from '~types'
+import { Decoration, FontStyle, TDDocument, TDShapeType, TDSnapshot, TextShape } from '~types'

-export function migrate(document: TDDocument, newVersion: number): TDDocument {
+export function migrate(state: TDSnapshot, newVersion: number): TDSnapshot {
+  const { document, settings } = state
  const { version = 0 } = document

  if (!('assets' in document)) {
@ -11,8 +12,8 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {
  // Remove unused assets when loading a document
  const assetIdsInUse = new Set<string>()

-  Object.values(document.pages).forEach(page =>
-    Object.values(page.shapes).forEach(shape => {
+  Object.values(document.pages).forEach((page) =>
+    Object.values(page.shapes).forEach((shape) => {
      const { parentId, children, assetId } = shape

      if (assetId) {
@ -26,7 +27,7 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {
      }

      if (shape.type === TDShapeType.Group && children) {
-        children.forEach(childId => {
+        children.forEach((childId) => {
          if (!page.shapes[childId]) {
            console.warn('Encountered a parent with a missing child!', shape.id, childId)
            children?.splice(children.indexOf(childId), 1)
@ -38,31 +39,31 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {
    })
  )

-  Object.keys(document.assets).forEach(assetId => {
+  Object.keys(document.assets).forEach((assetId) => {
    if (!assetIdsInUse.has(assetId)) {
      delete document.assets[assetId]
    }
  })

-  if (version === newVersion) return document
+  if (version === newVersion) return state

  if (version < 14) {
-    Object.values(document.pages).forEach(page => {
+    Object.values(document.pages).forEach((page) => {
      Object.values(page.shapes)
-        .filter(shape => shape.type === TDShapeType.Text)
-        .forEach(shape => (shape as TextShape).style.font === FontStyle.Script)
+        .filter((shape) => shape.type === TDShapeType.Text)
+        .forEach((shape) => (shape as TextShape).style.font === FontStyle.Script)
    })
  }

  // Lowercase styles, move binding meta to binding
  if (version <= 13) {
-    Object.values(document.pages).forEach(page => {
-      Object.values(page.bindings).forEach(binding => {
+    Object.values(document.pages).forEach((page) => {
+      Object.values(page.bindings).forEach((binding) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        Object.assign(binding, (binding as any).meta)
      })

-      Object.values(page.shapes).forEach(shape => {
+      Object.values(page.shapes).forEach((shape) => {
        Object.entries(shape.style).forEach(([id, style]) => {
          if (typeof style === 'string') {
            // @ts-ignore
@ -95,8 +96,8 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {
    document.assets = {}
  }

-  Object.values(document.pages).forEach(page => {
-    Object.values(page.shapes).forEach(shape => {
+  Object.values(document.pages).forEach((page) => {
+    Object.values(page.shapes).forEach((shape) => {
      if (version < 15.2) {
        if (shape.type === TDShapeType.Image || shape.type === TDShapeType.Video) {
          shape.style.isFilled = true
@ -117,9 +118,13 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {
    })
  })

+  if (version < 15.4) {
+    settings.dockPosition = 'bottom'
+  }
+
  // Cleanup
-  Object.values(document.pageStates).forEach(pageState => {
-    pageState.selectedIds = pageState.selectedIds.filter(id => {
+  Object.values(document.pageStates).forEach((pageState) => {
+    pageState.selectedIds = pageState.selectedIds.filter((id) => {
      return document.pages[pageState.id].shapes[id] !== undefined
    })
    pageState.bindingId = undefined
@ -130,5 +135,5 @@ export function migrate(document: TDDocument, newVersion: number): TDDocument {

  document.version = newVersion

-  return document
+  return state
 }
--- a/packages/tldraw/src/translations/main.json
+++ b/packages/tldraw/src/translations/main.json
@ -93,5 +93,6 @@
  "bottom": "Bottom",
  "left": "Left",
  "right": "Right",
-  "top": "Top"
+  "top": "Top",
+  "page": "Page"
 }