From 6de3b7b6b2f08a0e0929f9e0d2ae830952750b31 Mon Sep 17 00:00:00 2001 From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com> Date: Wed, 20 Mar 2024 09:44:26 +0000 Subject: [PATCH] implement computed chaching Co-authored-by: Alex alex@dytry.ch --- packages/tldraw/api-report.md | 10 +- packages/tldraw/api/api.json | 105 ++++-------------- .../src/lib/shapes/note/NoteShapeUtil.tsx | 31 +++--- 3 files changed, 41 insertions(+), 105 deletions(-) diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 14a0537da..b8319e96e 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -13,6 +13,7 @@ import { BoundsSnapPoint } from '@tldraw/editor'; import { Box } from '@tldraw/editor'; import { Circle2d } from '@tldraw/editor'; import { ComponentType } from 'react'; +import { ComputedCache } from '@tldraw/editor'; import { CubicSpline2d } from '@tldraw/editor'; import { DictValidator } from '@tldraw/editor'; import { Editor } from '@tldraw/editor'; @@ -1164,14 +1165,7 @@ export class NoteShapeUtil extends ShapeUtil { handleId: 'down' | 'left' | 'right' | 'up'; }): void; // (undocumented) - onTranslateEnd: (initial: TLNoteShape, current: TLNoteShape) => void; - // (undocumented) - positions: { - up: VecLike[]; - down: VecLike[]; - left: VecLike[]; - right: VecLike[]; - }; + positionsCached: ComputedCache; // (undocumented) static props: { color: EnumStyleProp<"black" | "blue" | "green" | "grey" | "light-blue" | "light-green" | "light-red" | "light-violet" | "orange" | "red" | "violet" | "yellow">; diff --git a/packages/tldraw/api/api.json b/packages/tldraw/api/api.json index b4a907725..6db8f2183 100644 --- a/packages/tldraw/api/api.json +++ b/packages/tldraw/api/api.json @@ -13606,16 +13606,34 @@ }, { "kind": "Property", - "canonicalReference": "tldraw!NoteShapeUtil#onTranslateEnd:member", + "canonicalReference": "tldraw!NoteShapeUtil#positionsCached:member", "docComment": "", "excerptTokens": [ { "kind": "Content", - "text": "onTranslateEnd: " + "text": "positionsCached: " }, { "kind": "Content", - "text": "(initial: " + "text": "import(\"@tldraw/editor\")." + }, + { + "kind": "Reference", + "text": "ComputedCache", + "canonicalReference": "@tldraw/store!ComputedCache:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "NoteGridPositions", + "canonicalReference": "tldraw!~NoteGridPositions:type" + }, + { + "kind": "Content", + "text": ", " }, { "kind": "Reference", @@ -13624,16 +13642,7 @@ }, { "kind": "Content", - "text": ", current: " - }, - { - "kind": "Reference", - "text": "TLNoteShape", - "canonicalReference": "@tldraw/tlschema!TLNoteShape:type" - }, - { - "kind": "Content", - "text": ") => void" + "text": ">" }, { "kind": "Content", @@ -13643,76 +13652,10 @@ "isReadonly": false, "isOptional": false, "releaseTag": "Public", - "name": "onTranslateEnd", + "name": "positionsCached", "propertyTypeTokenRange": { "startIndex": 1, - "endIndex": 6 - }, - "isStatic": false, - "isProtected": false, - "isAbstract": false - }, - { - "kind": "Property", - "canonicalReference": "tldraw!NoteShapeUtil#positions:member", - "docComment": "", - "excerptTokens": [ - { - "kind": "Content", - "text": "positions: " - }, - { - "kind": "Content", - "text": "{\n up: " - }, - { - "kind": "Reference", - "text": "VecLike", - "canonicalReference": "@tldraw/editor!VecLike:type" - }, - { - "kind": "Content", - "text": "[];\n down: " - }, - { - "kind": "Reference", - "text": "VecLike", - "canonicalReference": "@tldraw/editor!VecLike:type" - }, - { - "kind": "Content", - "text": "[];\n left: " - }, - { - "kind": "Reference", - "text": "VecLike", - "canonicalReference": "@tldraw/editor!VecLike:type" - }, - { - "kind": "Content", - "text": "[];\n right: " - }, - { - "kind": "Reference", - "text": "VecLike", - "canonicalReference": "@tldraw/editor!VecLike:type" - }, - { - "kind": "Content", - "text": "[];\n }" - }, - { - "kind": "Content", - "text": ";" - } - ], - "isReadonly": false, - "isOptional": false, - "releaseTag": "Public", - "name": "positions", - "propertyTypeTokenRange": { - "startIndex": 1, - "endIndex": 10 + "endIndex": 8 }, "isStatic": false, "isProtected": false, diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx index 18834e073..9522856d8 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeUtil.tsx @@ -24,6 +24,13 @@ import { getTextLabelSvgElement } from '../shared/getTextLabelSvgElement' const NOTE_SIZE = 200 +type NoteGridPositions = { + up: VecLike[] + down: VecLike[] + left: VecLike[] + right: VecLike[] +} + /** @public */ export class NoteShapeUtil extends ShapeUtil { static override type = 'note' as const @@ -34,13 +41,6 @@ export class NoteShapeUtil extends ShapeUtil { override hideResizeHandles = () => true override hideSelectionBoundsFg = () => true - positions = { - up: [] as VecLike[], - down: [] as VecLike[], - left: [] as VecLike[], - right: [] as VecLike[], - } - getDefaultProps(): TLNoteShape['props'] { return { color: 'black', @@ -181,9 +181,6 @@ export class NoteShapeUtil extends ShapeUtil { } override onBeforeUpdate = (prev: TLNoteShape, next: TLNoteShape) => { - if (this.positions.up.length === 0) { - this.positions = generatePositionsForShape(next, this.editor) - } if ( prev.props.text === next.props.text && prev.props.font === next.props.font && @@ -221,9 +218,9 @@ export class NoteShapeUtil extends ShapeUtil { const centerOffset = NOTE_SIZE / 2 let count = 0 let emptySpot = {} as VecLike - - while (count < this.positions[direction].length) { - const position = this.positions[direction][count] + const positions = this.positionsCached.get(shape.id)! + while (count < positions[direction].length) { + const position = positions[direction][count] /* A better version of this is to draw a box where you want the shape to go and hit test for any shapes that may be inside the box, similar to the logic in the select tool. For now, we're just checking a single point */ @@ -272,10 +269,12 @@ export class NoteShapeUtil extends ShapeUtil { this.editor.setEditingShape(shape.id) } - override onTranslateEnd = (initial: TLNoteShape, current: TLNoteShape) => { - this.positions = generatePositionsForShape(current, this.editor) - } override onDoubleClickHandle = (shape: TLNoteShape) => shape + + positionsCached = this.editor.store.createComputedCache( + 'note grid position infoCache', + (shape) => generatePositionsForShape(shape, this.editor) + ) } function getGrowY(editor: Editor, shape: TLNoteShape, prevGrowY = 0) {