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

No impure getters pt9 (#2222)

Browse source 
follow up to #2189 

### Change Type

- [x] `patch` — Bug fix
This commit is contained in:
David Sheldrick 2023-11-14 17:07:35 +00:00 committed by GitHub
parent dc0f6ae0f2
commit d683cc0943
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 516 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/examples/src/examples/CustomConfigExample/CardShape/CardShapeUtil.tsx
View file

@ -47,7 +47,7 @@ export class CardShapeUtil extends ShapeUtil<ICardShape> {
// Render method — the React component that will be rendered for the shape // Render method — the React component that will be rendered for the shape
component(shape: ICardShape) { component(shape: ICardShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds const bounds = this.editor.getShapeGeometry(shape).bounds
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
// Unfortunately eslint will think this is a class components // Unfortunately eslint will think this is a class components
// eslint-disable-next-line react-hooks/rules-of-hooks // eslint-disable-next-line react-hooks/rules-of-hooks

2
apps/examples/src/examples/CustomStylesExample/CardShape.tsx
View file

@ -56,7 +56,7 @@ export class CardShapeUtil extends BaseBoxShapeUtil<CardShape> {
component(shape: CardShape) { component(shape: CardShape) {
const bounds = this.editor.getShapeGeometry(shape).bounds const bounds = this.editor.getShapeGeometry(shape).bounds
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
return ( return (
<HTMLContainer <HTMLContainer

6
apps/examples/src/examples/MetaExample.tsx
View file

@ -12,9 +12,9 @@ export default function MetaExample() {
// all shapes created by the user. // all shapes created by the user.
editor.getInitialMetaForShape = (_shape) => { editor.getInitialMetaForShape = (_shape) => {
return { return {
createdBy: editor.user.id, createdBy: editor.user.getId(),
createdAt: Date.now(), createdAt: Date.now(),
updatedBy: editor.user.id, updatedBy: editor.user.getId(),
updatedAt: Date.now(), updatedAt: Date.now(),
} }
} }
@ -25,7 +25,7 @@ export default function MetaExample() {
if (source !== 'user') return record if (source !== 'user') return record
record.meta = { record.meta = {
...record.meta, ...record.meta,
updatedBy: editor.user.id, updatedBy: editor.user.getId(),
updatedAt: Date.now(), updatedAt: Date.now(),
} }
return record return record

31
packages/editor/api-report.md
View file

@ -1799,26 +1799,43 @@ export class SnapManager {
constructor(editor: Editor); constructor(editor: Editor);
// (undocumented) // (undocumented)
clear(): void; clear(): void;
// (undocumented) // @deprecated (undocumented)
get currentCommonAncestor(): TLShapeId | undefined; get currentCommonAncestor(): TLShapeId | undefined;
// (undocumented) // (undocumented)
readonly editor: Editor; readonly editor: Editor;
// (undocumented) // (undocumented)
getCurrentCommonAncestor(): TLShapeId | undefined;
// (undocumented)
getOutlinesInPageSpace(): Vec2d[][];
// (undocumented)
getSnappablePoints(): SnapPoint[];
// (undocumented)
getSnappableShapes(): GapNode[];
// (undocumented)
getSnappingHandleDelta({ handlePoint, additionalSegments, }: { getSnappingHandleDelta({ handlePoint, additionalSegments, }: {
handlePoint: Vec2d; handlePoint: Vec2d;
additionalSegments: Vec2d[][]; additionalSegments: Vec2d[][];
}): null | Vec2d; }): null | Vec2d;
// (undocumented) // (undocumented)
get lines(): SnapLine[]; getSnapPointsCache(): ComputedCache<SnapPoint[], TLShape>;
// (undocumented) // (undocumented)
getSnapThreshold(): number;
// (undocumented)
getVisibleGaps(): {
horizontal: Gap[];
vertical: Gap[];
};
// (undocumented)
get lines(): SnapLine[];
// @deprecated (undocumented)
get outlinesInPageSpace(): Vec2d[][]; get outlinesInPageSpace(): Vec2d[][];
// (undocumented) // (undocumented)
setLines(lines: SnapLine[]): void; setLines(lines: SnapLine[]): void;
// (undocumented) // @deprecated (undocumented)
get snappablePoints(): SnapPoint[]; get snappablePoints(): SnapPoint[];
// (undocumented) // @deprecated (undocumented)
get snappableShapes(): GapNode[]; get snappableShapes(): GapNode[];
// (undocumented) // @deprecated (undocumented)
get snapPointsCache(): ComputedCache<SnapPoint[], TLShape>; get snapPointsCache(): ComputedCache<SnapPoint[], TLShape>;
// (undocumented) // (undocumented)
snapResize({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter, }: { snapResize({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter, }: {
@ -1828,7 +1845,7 @@ export class SnapManager {
isAspectRatioLocked: boolean; isAspectRatioLocked: boolean;
isResizingFromCenter: boolean; isResizingFromCenter: boolean;
}): SnapData; }): SnapData;
// (undocumented) // @deprecated (undocumented)
get snapThreshold(): number; get snapThreshold(): number;
// (undocumented) // (undocumented)
snapTranslate({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta, }: { snapTranslate({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta, }: {
@ -1837,7 +1854,7 @@ export class SnapManager {
initialSelectionPageBounds: Box2d; initialSelectionPageBounds: Box2d;
dragDelta: Vec2d; dragDelta: Vec2d;
}): SnapData; }): SnapData;
// (undocumented) // @deprecated (undocumented)
get visibleGaps(): { get visibleGaps(): {
horizontal: Gap[]; horizontal: Gap[];
vertical: Gap[]; vertical: Gap[];

296
packages/editor/api/api.json
View file

@ -33754,7 +33754,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#currentCommonAncestor:member", "canonicalReference": "@tldraw/editor!SnapManager#currentCommonAncestor:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getCurrentCommonAncestor` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",
@ -33817,6 +33817,150 @@
"isProtected": false, "isProtected": false,
"isAbstract": false "isAbstract": false
}, },
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getCurrentCommonAncestor:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getCurrentCommonAncestor(): "
},
{
"kind": "Reference",
"text": "TLShapeId",
"canonicalReference": "@tldraw/tlschema!TLShapeId:type"
},
{
"kind": "Content",
"text": " | undefined"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getCurrentCommonAncestor"
},
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getOutlinesInPageSpace:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getOutlinesInPageSpace(): "
},
{
"kind": "Reference",
"text": "Vec2d",
"canonicalReference": "@tldraw/editor!Vec2d:class"
},
{
"kind": "Content",
"text": "[][]"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getOutlinesInPageSpace"
},
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getSnappablePoints:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getSnappablePoints(): "
},
{
"kind": "Reference",
"text": "SnapPoint",
"canonicalReference": "@tldraw/editor!SnapPoint:interface"
},
{
"kind": "Content",
"text": "[]"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getSnappablePoints"
},
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getSnappableShapes:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getSnappableShapes(): "
},
{
"kind": "Reference",
"text": "GapNode",
"canonicalReference": "@tldraw/editor!~GapNode:type"
},
{
"kind": "Content",
"text": "[]"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 3
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getSnappableShapes"
},
{ {
"kind": "Method", "kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getSnappingHandleDelta:member(1)", "canonicalReference": "@tldraw/editor!SnapManager#getSnappingHandleDelta:member(1)",
@ -33888,6 +34032,144 @@
"isAbstract": false, "isAbstract": false,
"name": "getSnappingHandleDelta" "name": "getSnappingHandleDelta"
}, },
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getSnapPointsCache:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getSnapPointsCache(): "
},
{
"kind": "Content",
"text": "import(\"@tldraw/store\")."
},
{
"kind": "Reference",
"text": "ComputedCache",
"canonicalReference": "@tldraw/store!ComputedCache:type"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "SnapPoint",
"canonicalReference": "@tldraw/editor!SnapPoint:interface"
},
{
"kind": "Content",
"text": "[], "
},
{
"kind": "Reference",
"text": "TLShape",
"canonicalReference": "@tldraw/tlschema!TLShape:type"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 8
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getSnapPointsCache"
},
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getSnapThreshold:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getSnapThreshold(): "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getSnapThreshold"
},
{
"kind": "Method",
"canonicalReference": "@tldraw/editor!SnapManager#getVisibleGaps:member(1)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "getVisibleGaps(): "
},
{
"kind": "Content",
"text": "{\n horizontal: "
},
{
"kind": "Reference",
"text": "Gap",
"canonicalReference": "@tldraw/editor!~Gap:type"
},
{
"kind": "Content",
"text": "[];\n vertical: "
},
{
"kind": "Reference",
"text": "Gap",
"canonicalReference": "@tldraw/editor!~Gap:type"
},
{
"kind": "Content",
"text": "[];\n }"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 1,
"endIndex": 6
},
"releaseTag": "Public",
"isProtected": false,
"overloadIndex": 1,
"parameters": [],
"isOptional": false,
"isAbstract": false,
"name": "getVisibleGaps"
},
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#lines:member", "canonicalReference": "@tldraw/editor!SnapManager#lines:member",
@ -33926,7 +34208,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#outlinesInPageSpace:member", "canonicalReference": "@tldraw/editor!SnapManager#outlinesInPageSpace:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getOutlinesInPageSpace` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",
@ -34014,7 +34296,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#snappablePoints:member", "canonicalReference": "@tldraw/editor!SnapManager#snappablePoints:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getSnappablePoints` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",
@ -34049,7 +34331,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#snappableShapes:member", "canonicalReference": "@tldraw/editor!SnapManager#snappableShapes:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getSnappableShapes` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",
@ -34084,7 +34366,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#snapPointsCache:member", "canonicalReference": "@tldraw/editor!SnapManager#snapPointsCache:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getSnapPointsCache` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",
@ -34235,7 +34517,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#snapThreshold:member", "canonicalReference": "@tldraw/editor!SnapManager#snapThreshold:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getSnapThreshold` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",
@ -34341,7 +34623,7 @@
{ {
"kind": "Property", "kind": "Property",
"canonicalReference": "@tldraw/editor!SnapManager#visibleGaps:member", "canonicalReference": "@tldraw/editor!SnapManager#visibleGaps:member",
"docComment": "", "docComment": "/**\n * @deprecated\n *\n * use `getVisibleGaps` instead\n */\n",
"excerptTokens": [ "excerptTokens": [
{ {
"kind": "Content", "kind": "Content",

2
packages/editor/src/lib/components/LiveCollaborators.tsx
View file

@ -49,7 +49,7 @@ const CollaboratorGuard = track(function CollaboratorGuard({
const { highlightedUserIds } = editor.getInstanceState() const { highlightedUserIds } = editor.getInstanceState()
// If they're idle and following us and unless they have a chat message or are highlighted, hide them // If they're idle and following us and unless they have a chat message or are highlighted, hide them
if ( if (
presence.followingUserId === editor.user.id && presence.followingUserId === editor.user.getId() &&
!(presence.chatMessage || highlightedUserIds.includes(presence.userId)) !(presence.chatMessage || highlightedUserIds.includes(presence.userId))
) { ) {
return null return null

2
packages/editor/src/lib/components/default-components/DefaultErrorFallback.tsx
View file

@ -31,7 +31,7 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
() => { () => {
try { try {
if (editor) { if (editor) {
return editor.user.isDarkMode return editor.user.getIsDarkMode()
} }
} catch { } catch {
// we're in a funky error state so this might not work for spooky // we're in a funky error state so this might not work for spooky

10
packages/editor/src/lib/editor/Editor.ts
View file

@ -2692,9 +2692,7 @@ export class Editor extends EventEmitter<TLEventMap> {
/** @internal */ /** @internal */
private _animateToViewport(targetViewportPage: Box2d, opts = {} as TLAnimationOptions) { private _animateToViewport(targetViewportPage: Box2d, opts = {} as TLAnimationOptions) {
const { duration = 0, easing = EASINGS.easeInOutCubic } = opts const { duration = 0, easing = EASINGS.easeInOutCubic } = opts
const { const animationSpeed = this.user.getAnimationSpeed()
user: { animationSpeed },
} = this
const viewportPageBounds = this.getViewportPageBounds() const viewportPageBounds = this.getViewportPageBounds()
// If we have an existing animation, then stop it; also stop following any user // If we have an existing animation, then stop it; also stop following any user
@ -2745,7 +2743,7 @@ export class Editor extends EventEmitter<TLEventMap> {
this.stopCameraAnimation() this.stopCameraAnimation()
const { animationSpeed } = this.user const animationSpeed = this.user.getAnimationSpeed()
if (animationSpeed === 0) return this if (animationSpeed === 0) return this
@ -3062,7 +3060,7 @@ export class Editor extends EventEmitter<TLEventMap> {
userId: { eq: userId }, userId: { eq: userId },
})) }))
const thisUserId = this.user.id const thisUserId = this.user.getId()
if (!thisUserId) { if (!thisUserId) {
console.warn('You should set the userId for the current instance before following a user') console.warn('You should set the userId for the current instance before following a user')
@ -8398,7 +8396,7 @@ export class Editor extends EventEmitter<TLEventMap> {
} = opts } = opts
// todo: we shouldn't depend on the public theme here // todo: we shouldn't depend on the public theme here
const theme = getDefaultColorTheme({ isDarkMode: this.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.user.getIsDarkMode() })
// ---Figure out which shapes we need to include // ---Figure out which shapes we need to include
const shapeIdsToInclude = this.getShapeAndDescendantIds(ids) const shapeIdsToInclude = this.getShapeAndDescendantIds(ids)

87
packages/editor/src/lib/editor/managers/SnapManager.ts
View file

@ -228,7 +228,7 @@ export class SnapManager {
constructor(public readonly editor: Editor) {} constructor(public readonly editor: Editor) {}
@computed get snapPointsCache() { @computed getSnapPointsCache() {
const { editor } = this const { editor } = this
return editor.store.createComputedCache<SnapPoint[], TLShape>('snapPoints', (shape) => { return editor.store.createComputedCache<SnapPoint[], TLShape>('snapPoints', (shape) => {
const pageTransfrorm = editor.getShapePageTransform(shape.id) const pageTransfrorm = editor.getShapePageTransform(shape.id)
@ -241,12 +241,26 @@ export class SnapManager {
}) })
} }
@computed get snapThreshold() { /**
* @deprecated use `getSnapPointsCache` instead
*/
get snapPointsCache() {
return this.getSnapPointsCache()
}
@computed getSnapThreshold() {
return 8 / this.editor.getZoomLevel() return 8 / this.editor.getZoomLevel()
} }
/**
* @deprecated use `getSnapThreshold` instead
*/
get snapThreshold() {
return this.getSnapThreshold()
}
// TODO: make this an incremental derivation // TODO: make this an incremental derivation
@computed get snappableShapes(): GapNode[] { @computed getSnappableShapes(): GapNode[] {
const { editor } = this const { editor } = this
const renderingBounds = editor.getRenderingBounds() const renderingBounds = editor.getRenderingBounds()
const selectedShapeIds = editor.getSelectedShapeIds() const selectedShapeIds = editor.getSelectedShapeIds()
@ -279,19 +293,35 @@ export class SnapManager {
} }
} }
collectSnappableShapesFromParent(this.currentCommonAncestor ?? editor.currentPageId) collectSnappableShapesFromParent(this.getCurrentCommonAncestor() ?? editor.currentPageId)
return snappableShapes return snappableShapes
} }
/**
* @deprecated use `getSnappableShapes` instead
*/
get snappableShapes() {
return this.getSnappableShapes()
}
// This needs to be external from any expensive work // This needs to be external from any expensive work
@computed get currentCommonAncestor() { @computed getCurrentCommonAncestor() {
return this.editor.findCommonAncestor(this.editor.getSelectedShapes()) return this.editor.findCommonAncestor(this.editor.getSelectedShapes())
} }
/**
* @deprecated use `getCurrentCommonAncestor` instead
*/
get currentCommonAncestor() {
return this.getCurrentCommonAncestor()
}
// Points which belong to snappable shapes // Points which belong to snappable shapes
@computed get snappablePoints() { @computed getSnappablePoints() {
const { snappableShapes, snapPointsCache } = this const snapPointsCache = this.getSnapPointsCache()
const snappableShapes = this.getSnappableShapes()
const result: SnapPoint[] = [] const result: SnapPoint[] = []
snappableShapes.forEach((shape) => { snappableShapes.forEach((shape) => {
@ -304,13 +334,20 @@ export class SnapManager {
return result return result
} }
@computed get visibleGaps(): { horizontal: Gap[]; vertical: Gap[] } { /**
* @deprecated use `getSnappablePoints` instead
*/
get snappablePoints() {
return this.getSnappablePoints()
}
@computed getVisibleGaps(): { horizontal: Gap[]; vertical: Gap[] } {
const horizontal: Gap[] = [] const horizontal: Gap[] = []
const vertical: Gap[] = [] const vertical: Gap[] = []
let startNode: GapNode, endNode: GapNode let startNode: GapNode, endNode: GapNode
const sortedShapesOnCurrentPageHorizontal = this.snappableShapes.sort((a, b) => { const sortedShapesOnCurrentPageHorizontal = this.getSnappableShapes().sort((a, b) => {
return a.pageBounds.minX - b.pageBounds.minX return a.pageBounds.minX - b.pageBounds.minX
}) })
@ -401,6 +438,13 @@ export class SnapManager {
return { horizontal, vertical } return { horizontal, vertical }
} }
/**
* @deprecated use `getVisibleGaps` instead
*/
get visibleGaps() {
return this.getVisibleGaps()
}
snapTranslate({ snapTranslate({
lockedAxis, lockedAxis,
initialSelectionPageBounds, initialSelectionPageBounds,
@ -412,7 +456,8 @@ export class SnapManager {
initialSelectionPageBounds: Box2d initialSelectionPageBounds: Box2d
dragDelta: Vec2d dragDelta: Vec2d
}): SnapData { }): SnapData {
const { snappablePoints: visibleSnapPointsNotInSelection, snapThreshold } = this const snapThreshold = this.getSnapThreshold()
const visibleSnapPointsNotInSelection = this.getSnappablePoints()
const selectionPageBounds = initialSelectionPageBounds.clone().translate(dragDelta) const selectionPageBounds = initialSelectionPageBounds.clone().translate(dragDelta)
@ -493,8 +538,8 @@ export class SnapManager {
return { nudge } return { nudge }
} }
@computed get outlinesInPageSpace() { @computed getOutlinesInPageSpace() {
return this.snappableShapes.map(({ id, isClosed }) => { return this.getSnappableShapes().map(({ id, isClosed }) => {
const outline = deepCopy(this.editor.getShapeGeometry(id).vertices) const outline = deepCopy(this.editor.getShapeGeometry(id).vertices)
if (isClosed) outline.push(outline[0]) if (isClosed) outline.push(outline[0])
const pageTransform = this.editor.getShapePageTransform(id) const pageTransform = this.editor.getShapePageTransform(id)
@ -503,6 +548,13 @@ export class SnapManager {
}) })
} }
/**
* @deprecated use `getOutlinesInPageSpace` instead
*/
get outlinesInPageSpace() {
return this.getOutlinesInPageSpace()
}
getSnappingHandleDelta({ getSnappingHandleDelta({
handlePoint, handlePoint,
additionalSegments, additionalSegments,
@ -510,7 +562,8 @@ export class SnapManager {
handlePoint: Vec2d handlePoint: Vec2d
additionalSegments: Vec2d[][] additionalSegments: Vec2d[][]
}): Vec2d | null { }): Vec2d | null {
const { outlinesInPageSpace, snapThreshold } = this const snapThreshold = this.getSnapThreshold()
const outlinesInPageSpace = this.getOutlinesInPageSpace()
// Find the nearest point that is within the snap threshold // Find the nearest point that is within the snap threshold
let minDistance = snapThreshold let minDistance = snapThreshold
@ -566,7 +619,7 @@ export class SnapManager {
isAspectRatioLocked: boolean isAspectRatioLocked: boolean
isResizingFromCenter: boolean isResizingFromCenter: boolean
}): SnapData { }): SnapData {
const { snapThreshold } = this const snapThreshold = this.getSnapThreshold()
// first figure out the new bounds of the selection // first figure out the new bounds of the selection
const { const {
@ -600,7 +653,7 @@ export class SnapManager {
const selectionSnapPoints = getResizeSnapPointsForHandle(handle, unsnappedResizedPageBounds) const selectionSnapPoints = getResizeSnapPointsForHandle(handle, unsnappedResizedPageBounds)
const otherNodeSnapPoints = this.snappablePoints const otherNodeSnapPoints = this.getSnappablePoints()
const nearestSnapsX: NearestPointsSnap[] = [] const nearestSnapsX: NearestPointsSnap[] = []
const nearestSnapsY: NearestPointsSnap[] = [] const nearestSnapsY: NearestPointsSnap[] = []
@ -758,7 +811,7 @@ export class SnapManager {
nearestSnapsX: NearestSnap[] nearestSnapsX: NearestSnap[]
nearestSnapsY: NearestSnap[] nearestSnapsY: NearestSnap[]
}) { }) {
const { horizontal, vertical } = this.visibleGaps const { horizontal, vertical } = this.getVisibleGaps()
for (const gap of horizontal) { for (const gap of horizontal) {
// ignore this gap if the selection doesn't overlap with it in the y axis // ignore this gap if the selection doesn't overlap with it in the y axis
@ -1092,7 +1145,7 @@ export class SnapManager {
nearestSnapsX: NearestSnap[] nearestSnapsX: NearestSnap[]
nearestSnapsY: NearestSnap[] nearestSnapsY: NearestSnap[]
}): GapsSnapLine[] { }): GapsSnapLine[] {
const { vertical, horizontal } = this.visibleGaps const { vertical, horizontal } = this.getVisibleGaps()
const selectionSides: Record<SelectionEdge, [Vec2d, Vec2d]> = { const selectionSides: Record<SelectionEdge, [Vec2d, Vec2d]> = {
top: selectionPageBounds.sides[0], top: selectionPageBounds.sides[0],

85
packages/editor/src/lib/editor/managers/UserPreferencesManager.ts
View file

@ -15,46 +15,101 @@ export class UserPreferencesManager {
...userPreferences, ...userPreferences,
}) })
} }
@computed get userPreferences() { @computed getUserPreferences() {
return { return {
id: this.id, id: this.getId(),
name: this.name, name: this.getName(),
locale: this.locale, locale: this.getLocale(),
color: this.color, color: this.getColor(),
isDarkMode: this.isDarkMode, isDarkMode: this.getIsDarkMode(),
animationSpeed: this.animationSpeed, animationSpeed: this.getAnimationSpeed(),
isSnapMode: this.isSnapMode, isSnapMode: this.getIsSnapMode(),
} }
} }
/**
* @deprecated use `getUserPreferences` instead
*/
get userPreferences() {
return this.getUserPreferences()
}
@computed get isDarkMode() { @computed getIsDarkMode() {
return ( return (
this.user.userPreferences.get().isDarkMode ?? this.user.userPreferences.get().isDarkMode ??
(this.inferDarkMode ? userPrefersDarkUI() : false) (this.inferDarkMode ? userPrefersDarkUI() : false)
) )
} }
@computed get animationSpeed() { /**
* @deprecated use `getIsDarkMode` instead
*/
get isDarkMode() {
return this.getIsDarkMode()
}
@computed getAnimationSpeed() {
return this.user.userPreferences.get().animationSpeed ?? defaultUserPreferences.animationSpeed return this.user.userPreferences.get().animationSpeed ?? defaultUserPreferences.animationSpeed
} }
@computed get id() { /**
* @deprecated use `getAnimationSpeed` instead
*/
get animationSpeed() {
return this.getAnimationSpeed()
}
@computed getId() {
return this.user.userPreferences.get().id return this.user.userPreferences.get().id
} }
@computed get name() { /**
* @deprecated use `getId` instead
*/
get id() {
return this.getId()
}
@computed getName() {
return this.user.userPreferences.get().name ?? defaultUserPreferences.name return this.user.userPreferences.get().name ?? defaultUserPreferences.name
} }
@computed get locale() { /**
* @deprecated use `getName` instead
*/
get name() {
return this.getName()
}
@computed getLocale() {
return this.user.userPreferences.get().locale ?? defaultUserPreferences.locale return this.user.userPreferences.get().locale ?? defaultUserPreferences.locale
} }
@computed get color() { /**
* @deprecated use `getLocale` instead
*/
get locale() {
return this.getLocale()
}
@computed getColor() {
return this.user.userPreferences.get().color ?? defaultUserPreferences.color return this.user.userPreferences.get().color ?? defaultUserPreferences.color
} }
@computed get isSnapMode() { /**
* @deprecated use `getColor` instead
*/
get color() {
return this.getColor()
}
@computed getIsSnapMode() {
return this.user.userPreferences.get().isSnapMode ?? defaultUserPreferences.isSnapMode return this.user.userPreferences.get().isSnapMode ?? defaultUserPreferences.isSnapMode
} }
/**
* @deprecated use `getIsSnapMode` instead
*/
get isSnapMode() {
return this.getIsSnapMode()
}
} }

2
packages/editor/src/lib/hooks/useIsDarkMode.ts
View file

@ -4,5 +4,5 @@ import { useEditor } from './useEditor'
/** @public */ /** @public */
export function useIsDarkMode() { export function useIsDarkMode() {
const editor = useEditor() const editor = useEditor()
return useValue('isDarkMode', () => editor.user.isDarkMode, [editor]) return useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])
} }

2
packages/editor/src/lib/hooks/usePeerIds.ts
View file

@ -12,7 +12,7 @@ export function usePeerIds() {
const editor = useEditor() const editor = useEditor()
const $presences = useMemo(() => { const $presences = useMemo(() => {
return editor.store.query.records('instance_presence', () => ({ return editor.store.query.records('instance_presence', () => ({
userId: { neq: editor.user.id }, userId: { neq: editor.user.getId() },
})) }))
}, [editor]) }, [editor])

4
packages/editor/src/lib/test/user.test.ts
View file

@ -14,11 +14,11 @@ beforeEach(() => {
describe('user', () => { describe('user', () => {
it('gets a user with the correct color', () => { it('gets a user with the correct color', () => {
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
it('gets a user with the correct', () => { it('gets a user with the correct', () => {
editor.user.updateUserPreferences({ isDarkMode: true }) editor.user.updateUserPreferences({ isDarkMode: true })
expect(editor.user.isDarkMode).toBe(true) expect(editor.user.getIsDarkMode()).toBe(true)
}) })
}) })

2
packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
View file

@ -803,7 +803,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
} }
override toSvg(shape: TLArrowShape, ctx: SvgExportContext) { override toSvg(shape: TLArrowShape, ctx: SvgExportContext) {
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
ctx.addExportDef(getFillDefForExport(shape.props.fill, theme)) ctx.addExportDef(getFillDefForExport(shape.props.fill, theme))
const color = theme[shape.props.color].solid const color = theme[shape.props.color].solid

2
packages/tldraw/src/lib/shapes/draw/DrawShapeUtil.tsx
View file

@ -184,7 +184,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
} }
override toSvg(shape: TLDrawShape, ctx: SvgExportContext) { override toSvg(shape: TLDrawShape, ctx: SvgExportContext) {
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
ctx.addExportDef(getFillDefForExport(shape.props.fill, theme)) ctx.addExportDef(getFillDefForExport(shape.props.fill, theme))
const { color } = shape.props const { color } = shape.props

2
packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts
View file

@ -469,7 +469,7 @@ export class Drawing extends StateNode {
let didSnap = false let didSnap = false
let snapSegment: TLDrawShapeSegment | undefined = undefined let snapSegment: TLDrawShapeSegment | undefined = undefined
const shouldSnap = this.editor.user.isSnapMode ? !ctrlKey : ctrlKey const shouldSnap = this.editor.user.getIsSnapMode() ? !ctrlKey : ctrlKey
if (shouldSnap) { if (shouldSnap) {
if (newSegments.length > 2) { if (newSegments.length > 2) {

2
packages/tldraw/src/lib/shapes/frame/FrameShapeUtil.tsx
View file

@ -76,7 +76,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
} }
override toSvg(shape: TLFrameShape): SVGElement | Promise<SVGElement> { override toSvg(shape: TLFrameShape): SVGElement | Promise<SVGElement> {
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g') const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect') const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')

2
packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
View file

@ -598,7 +598,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
override toSvg(shape: TLGeoShape, ctx: SvgExportContext) { override toSvg(shape: TLGeoShape, ctx: SvgExportContext) {
const { id, props } = shape const { id, props } = shape
const strokeWidth = STROKE_SIZES[props.size] const strokeWidth = STROKE_SIZES[props.size]
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
ctx.addExportDef(getFillDefForExport(shape.props.fill, theme)) ctx.addExportDef(getFillDefForExport(shape.props.fill, theme))
let svgElm: SVGElement let svgElm: SVGElement

4
packages/tldraw/src/lib/shapes/highlight/HighlightShapeUtil.tsx
View file

@ -117,12 +117,12 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
} }
override toSvg(shape: TLHighlightShape) { override toSvg(shape: TLHighlightShape) {
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
return highlighterToSvg(getStrokeWidth(shape), shape, OVERLAY_OPACITY, theme) return highlighterToSvg(getStrokeWidth(shape), shape, OVERLAY_OPACITY, theme)
} }
override toBackgroundSvg(shape: TLHighlightShape) { override toBackgroundSvg(shape: TLHighlightShape) {
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
return highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, theme) return highlighterToSvg(getStrokeWidth(shape), shape, UNDERLAY_OPACITY, theme)
} }

2
packages/tldraw/src/lib/shapes/line/LineShapeUtil.tsx
View file

@ -330,7 +330,7 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
} }
override toSvg(shape: TLLineShape) { override toSvg(shape: TLLineShape) {
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
const color = theme[shape.props.color].solid const color = theme[shape.props.color].solid
const spline = getGeometryForLineShape(shape) const spline = getGeometryForLineShape(shape)
const strokeWidth = STROKE_SIZES[shape.props.size] const strokeWidth = STROKE_SIZES[shape.props.size]

2
packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx
View file

@ -112,7 +112,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
override toSvg(shape: TLNoteShape, ctx: SvgExportContext) { override toSvg(shape: TLNoteShape, ctx: SvgExportContext) {
ctx.addExportDef(getFontDefForExport(shape.props.font)) ctx.addExportDef(getFontDefForExport(shape.props.font))
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
const bounds = this.editor.getShapeGeometry(shape).bounds const bounds = this.editor.getShapeGeometry(shape).bounds
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g') const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')

4
packages/tldraw/src/lib/shapes/text/TextShapeUtil.tsx
View file

@ -71,7 +71,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
props: { text, color }, props: { text, color },
} = shape } = shape
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
const { width, height } = this.getMinDimensions(shape) const { width, height } = this.getMinDimensions(shape)
const { const {
@ -150,7 +150,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
override toSvg(shape: TLTextShape, ctx: SvgExportContext) { override toSvg(shape: TLTextShape, ctx: SvgExportContext) {
ctx.addExportDef(getFontDefForExport(shape.props.font)) ctx.addExportDef(getFontDefForExport(shape.props.font))
const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
const bounds = this.editor.getShapeGeometry(shape).bounds const bounds = this.editor.getShapeGeometry(shape).bounds
const text = shape.props.text const text = shape.props.text

2
packages/tldraw/src/lib/tools/SelectTool/children/DraggingHandle.ts
View file

@ -208,8 +208,8 @@ export class DraggingHandle extends StateNode {
const { editor, shapeId, initialPagePoint } = this const { editor, shapeId, initialPagePoint } = this
const { initialHandle, initialPageRotation, initialAdjacentHandle } = this const { initialHandle, initialPageRotation, initialAdjacentHandle } = this
const hintingShapeIds = this.editor.getHintingShapeIds() const hintingShapeIds = this.editor.getHintingShapeIds()
const isSnapMode = this.editor.user.getIsSnapMode()
const { const {
user: { isSnapMode },
snaps, snaps,
inputs: { currentPagePoint, shiftKey, ctrlKey, altKey, pointerVelocity }, inputs: { currentPagePoint, shiftKey, ctrlKey, altKey, pointerVelocity },
} = editor } = editor

2
packages/tldraw/src/lib/tools/SelectTool/children/Resizing.ts
View file

@ -225,7 +225,7 @@ export class Resizing extends StateNode {
this.editor.snaps.clear() this.editor.snaps.clear()
const shouldSnap = this.editor.user.isSnapMode ? !ctrlKey : ctrlKey const shouldSnap = this.editor.user.getIsSnapMode() ? !ctrlKey : ctrlKey
if (shouldSnap && selectionRotation % TAU === 0) { if (shouldSnap && selectionRotation % TAU === 0) {
const { nudge } = this.editor.snaps.snapResize({ const { nudge } = this.editor.snaps.snapResize({

4
packages/tldraw/src/lib/tools/SelectTool/children/Translating.ts
View file

@ -308,7 +308,7 @@ function getTranslatingSnapshot(editor: Editor) {
let initialSnapPoints: SnapPoint[] = [] let initialSnapPoints: SnapPoint[] = []
if (editor.getSelectedShapeIds().length === 1) { if (editor.getSelectedShapeIds().length === 1) {
initialSnapPoints = editor.snaps.snapPointsCache.get(editor.getSelectedShapeIds()[0])! initialSnapPoints = editor.snaps.getSnapPointsCache().get(editor.getSelectedShapeIds()[0])!
} else { } else {
const selectionPageBounds = editor.getSelectionPageBounds() const selectionPageBounds = editor.getSelectionPageBounds()
if (selectionPageBounds) { if (selectionPageBounds) {
@ -374,7 +374,7 @@ export function moveShapesToPoint({
editor.snaps.clear() editor.snaps.clear()
const shouldSnap = const shouldSnap =
(editor.user.isSnapMode ? !inputs.ctrlKey : inputs.ctrlKey) && (editor.user.getIsSnapMode() ? !inputs.ctrlKey : inputs.ctrlKey) &&
editor.inputs.pointerVelocity.len() < 0.5 // ...and if the user is not dragging fast editor.inputs.pointerVelocity.len() < 0.5 // ...and if the user is not dragging fast
if (shouldSnap) { if (shouldSnap) {

2
packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx
View file

@ -19,7 +19,7 @@ export function MobileStylePanel() {
const relevantStyles = useRelevantStyles() const relevantStyles = useRelevantStyles()
const color = relevantStyles?.styles.get(DefaultColorStyle) const color = relevantStyles?.styles.get(DefaultColorStyle)
const theme = getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode }) const theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })
const currentColor = ( const currentColor = (
color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black
).solid ).solid

2
packages/tldraw/src/lib/ui/components/primitives/ButtonPicker.tsx
View file

@ -92,7 +92,7 @@ function _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {
const theme = useValue( const theme = useValue(
'theme', 'theme',
() => getDefaultColorTheme({ isDarkMode: editor.user.isDarkMode }), () => getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() }),
[editor] [editor]
) )

6
packages/tldraw/src/lib/ui/hooks/useActions.tsx
View file

@ -923,7 +923,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
readonlyOk: false, readonlyOk: false,
onSelect(source) { onSelect(source) {
trackEvent('toggle-snap-mode', { source }) trackEvent('toggle-snap-mode', { source })
editor.user.updateUserPreferences({ isSnapMode: !editor.user.isSnapMode }) editor.user.updateUserPreferences({ isSnapMode: !editor.user.getIsSnapMode() })
}, },
checkbox: true, checkbox: true,
}, },
@ -935,7 +935,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
readonlyOk: true, readonlyOk: true,
onSelect(source) { onSelect(source) {
trackEvent('toggle-dark-mode', { source }) trackEvent('toggle-dark-mode', { source })
editor.user.updateUserPreferences({ isDarkMode: !editor.user.isDarkMode }) editor.user.updateUserPreferences({ isDarkMode: !editor.user.getIsDarkMode() })
}, },
checkbox: true, checkbox: true,
}, },
@ -947,7 +947,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
onSelect(source) { onSelect(source) {
trackEvent('toggle-reduce-motion', { source }) trackEvent('toggle-reduce-motion', { source })
editor.user.updateUserPreferences({ editor.user.updateUserPreferences({
animationSpeed: editor.user.animationSpeed === 0 ? 1 : 0, animationSpeed: editor.user.getAnimationSpeed() === 0 ? 1 : 0,
}) })
}, },
checkbox: true, checkbox: true,

6
packages/tldraw/src/lib/ui/hooks/useMenuSchema.tsx
View file

@ -49,10 +49,10 @@ export function TLUiMenuSchemaProvider({ overrides, children }: TLUiMenuSchemaPr
const breakpoint = useBreakpoint() const breakpoint = useBreakpoint()
const isMobile = breakpoint < 5 const isMobile = breakpoint < 5
const isDarkMode = useValue('isDarkMode', () => editor.user.isDarkMode, [editor]) const isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])
const animationSpeed = useValue('animationSpeed', () => editor.user.animationSpeed, [editor]) const animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])
const isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor]) const isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])
const isSnapMode = useValue('isSnapMode', () => editor.user.isSnapMode, [editor]) const isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])
const isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor]) const isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])
const isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor]) const isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])
const isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor]) const isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])

2
packages/tldraw/src/lib/ui/hooks/useTranslation/useLanguages.tsx
View file

@ -5,6 +5,6 @@ export function useLanguages() {
const editor = useEditor() const editor = useEditor()
return { return {
languages: LANGUAGES as readonly TLLanguage[], languages: LANGUAGES as readonly TLLanguage[],
currentLanguage: editor.user.locale, currentLanguage: editor.user.getLocale(),
} }
} }

2
packages/tldraw/src/lib/ui/hooks/useTranslation/useTranslation.tsx
View file

@ -39,7 +39,7 @@ export const TranslationProvider = track(function TranslationProvider({
children, children,
}: TLUiTranslationProviderProps) { }: TLUiTranslationProviderProps) {
const editor = useEditor() const editor = useEditor()
const locale = editor.user.locale const locale = editor.user.getLocale()
const getAssetUrl = useAssetUrls() const getAssetUrl = useAssetUrls()
const [currentTranslation, setCurrentTranslation] = React.useState<TLUiTranslation>(() => { const [currentTranslation, setCurrentTranslation] = React.useState<TLUiTranslation>(() => {

12
packages/tldraw/src/test/Editor.test.tsx
View file

@ -607,15 +607,15 @@ describe('when the user prefers dark UI', () => {
}) })
it('isDarkMode should be false by default', () => { it('isDarkMode should be false by default', () => {
editor = new TestEditor({}) editor = new TestEditor({})
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
it('isDarkMode should be false when inferDarkMode is false', () => { it('isDarkMode should be false when inferDarkMode is false', () => {
editor = new TestEditor({ inferDarkMode: false }) editor = new TestEditor({ inferDarkMode: false })
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
it('should be true if the editor was instantiated with inferDarkMode', () => { it('should be true if the editor was instantiated with inferDarkMode', () => {
editor = new TestEditor({ inferDarkMode: true }) editor = new TestEditor({ inferDarkMode: true })
expect(editor.user.isDarkMode).toBe(true) expect(editor.user.getIsDarkMode()).toBe(true)
}) })
}) })
@ -634,14 +634,14 @@ describe('when the user prefers light UI', () => {
}) })
it('isDarkMode should be false by default', () => { it('isDarkMode should be false by default', () => {
editor = new TestEditor({}) editor = new TestEditor({})
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
it('isDarkMode should be false when inferDarkMode is false', () => { it('isDarkMode should be false when inferDarkMode is false', () => {
editor = new TestEditor({ inferDarkMode: false }) editor = new TestEditor({ inferDarkMode: false })
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
it('should be false if the editor was instantiated with inferDarkMode', () => { it('should be false if the editor was instantiated with inferDarkMode', () => {
editor = new TestEditor({ inferDarkMode: true }) editor = new TestEditor({ inferDarkMode: true })
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
}) })
}) })

34
packages/tldraw/src/test/TLUserPreferences.test.ts
View file

@ -9,11 +9,11 @@ beforeEach(() => {
describe('TLUserPreferences', () => { describe('TLUserPreferences', () => {
it('allows updating user preferences on the editor', () => { it('allows updating user preferences on the editor', () => {
expect(editor.user.isSnapMode).toBe(false) expect(editor.user.getIsSnapMode()).toBe(false)
editor.user.updateUserPreferences({ isSnapMode: true }) editor.user.updateUserPreferences({ isSnapMode: true })
expect(editor.user.isSnapMode).toBe(true) expect(editor.user.getIsSnapMode()).toBe(true)
}) })
it('can be customized', () => { it('can be customized', () => {
@ -34,18 +34,18 @@ describe('TLUserPreferences', () => {
}), }),
}) })
expect(editor.user.isDarkMode).toBe(true) expect(editor.user.getIsDarkMode()).toBe(true)
userPreferences.set({ userPreferences.set({
...userPreferences.get(), ...userPreferences.get(),
isDarkMode: false, isDarkMode: false,
}) })
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
editor.user.updateUserPreferences({ isDarkMode: true }) editor.user.updateUserPreferences({ isDarkMode: true })
expect(editor.user.isDarkMode).toBe(true) expect(editor.user.getIsDarkMode()).toBe(true)
expect(userPreferences.get().isDarkMode).toBe(true) expect(userPreferences.get().isDarkMode).toBe(true)
}) })
@ -68,11 +68,11 @@ describe('TLUserPreferences', () => {
}), }),
}) })
expect(editor.user.animationSpeed).toBe(1) expect(editor.user.getAnimationSpeed()).toBe(1)
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
expect(editor.user.isSnapMode).toBe(false) expect(editor.user.getIsSnapMode()).toBe(false)
expect(editor.user.locale).toBe('en') expect(editor.user.getLocale()).toBe('en')
expect(editor.user.name).toBe('New User') expect(editor.user.getName()).toBe('New User')
}) })
it('can have unspecified values and it will use defaults', () => { it('can have unspecified values and it will use defaults', () => {
@ -89,11 +89,11 @@ describe('TLUserPreferences', () => {
}), }),
}) })
expect(editor.user.animationSpeed).toBe(1) expect(editor.user.getAnimationSpeed()).toBe(1)
expect(editor.user.isDarkMode).toBe(false) expect(editor.user.getIsDarkMode()).toBe(false)
expect(editor.user.isSnapMode).toBe(false) expect(editor.user.getIsSnapMode()).toBe(false)
expect(editor.user.locale).toBe('en') expect(editor.user.getLocale()).toBe('en')
expect(editor.user.name).toBe('blah') expect(editor.user.getName()).toBe('blah')
}) })
it('allows setting values to null', () => { it('allows setting values to null', () => {
@ -110,10 +110,10 @@ describe('TLUserPreferences', () => {
}), }),
}) })
expect(editor.user.name).toBe('blah') expect(editor.user.getName()).toBe('blah')
editor.user.updateUserPreferences({ name: null }) editor.user.updateUserPreferences({ name: null })
expect(editor.user.name).toBe('New User') expect(editor.user.getName()).toBe('New User')
expect(setUserPreferences).toHaveBeenCalledTimes(1) expect(setUserPreferences).toHaveBeenCalledTimes(1)
expect(setUserPreferences).toHaveBeenLastCalledWith({ expect(setUserPreferences).toHaveBeenLastCalledWith({
id: '123', id: '123',