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

Restore fixes

Browse source
This commit is contained in:
Steve Ruiz 2022-07-10 22:05:43 +01:00
parent a4d980c290
commit b0755d8def
11 changed files with 83 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/www/components/ReadOnlyMultiplayerEditor.tsx
View file

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

9
packages/core/src/utils/utils.ts
View file

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

4
packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx
View file

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

8
packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx
View file

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

2
packages/tldraw/src/components/TopPanel/MultiplayerMenu/MultiplayerMenu.tsx
View file

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

1
packages/tldraw/src/hooks/index.ts
View file

@ -5,4 +5,3 @@ export * from './useStylesheet'
export * from './useFileSystemHandlers'
export * from './useFileSystem'
export * from './useTranslation'
export * from './useMediaQuery'

19
packages/tldraw/src/hooks/useMediaQuery.ts
View file

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

89
packages/tldraw/src/state/TldrawApp.ts
View file

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

6
packages/tldraw/src/state/__snapshots__/TldrawApp.spec.ts.snap
View file

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

41
packages/tldraw/src/state/data/migrate.ts
View file

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

3
packages/tldraw/src/translations/main.json
View file

@ -93,5 +93,6 @@
"bottom": "Bottom",
"left": "Left",
"right": "Right",
"top": "Top"
"top": "Top",
"page": "Page"
}