diff --git a/apps/examples/e2e/tests/test-clipboard.spec.ts b/apps/examples/e2e/tests/test-clipboard.spec.ts index b7ebf8226..89c1b6f41 100644 --- a/apps/examples/e2e/tests/test-clipboard.spec.ts +++ b/apps/examples/e2e/tests/test-clipboard.spec.ts @@ -23,7 +23,7 @@ test.describe.skip('clipboard tests', () => { await page.mouse.down() await page.mouse.up() - expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(1) + expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(1) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) await page.keyboard.down('Control') @@ -32,7 +32,7 @@ test.describe.skip('clipboard tests', () => { await page.keyboard.press('KeyV') await page.keyboard.up('Control') - expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(2) + expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(2) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) }) @@ -42,7 +42,7 @@ test.describe.skip('clipboard tests', () => { await page.mouse.down() await page.mouse.up() - expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(1) + expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(1) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) await page.getByTestId('main.menu').click() @@ -53,7 +53,7 @@ test.describe.skip('clipboard tests', () => { await page.getByTestId('menu-item.edit').click() await page.getByTestId('menu-item.paste').click() - expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(2) + expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(2) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) }) @@ -63,7 +63,7 @@ test.describe.skip('clipboard tests', () => { await page.mouse.down() await page.mouse.up() - expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(1) + expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(1) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) await page.mouse.click(100, 100, { button: 'right' }) @@ -73,7 +73,7 @@ test.describe.skip('clipboard tests', () => { await page.mouse.click(100, 100, { button: 'right' }) await page.getByTestId('menu-item.paste').click() - expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(2) + expect(await page.evaluate(() => editor.getCurrentPageShapes().length)).toBe(2) expect(await page.evaluate(() => editor.getSelectedShapes().length)).toBe(1) }) }) diff --git a/apps/examples/e2e/tests/test-focus.spec.ts b/apps/examples/e2e/tests/test-focus.spec.ts index 7ed70907e..a1adfbe2f 100644 --- a/apps/examples/e2e/tests/test-focus.spec.ts +++ b/apps/examples/e2e/tests/test-focus.spec.ts @@ -87,14 +87,14 @@ test.describe('Focus', () => { await page.waitForSelector('.tl-canvas') // Should not have any shapes on the page - expect(await page.evaluate(() => EDITOR_A.currentPageShapes.length)).toBe(0) + expect(await page.evaluate(() => EDITOR_A.getCurrentPageShapes().length)).toBe(0) const EditorA = (await page.$(`.A`))! await page.keyboard.press('r') await EditorA.click({ position: { x: 100, y: 100 } }) // Should not have created a shape - expect(await page.evaluate(() => EDITOR_A.currentPageShapes.length)).toBe(1) + expect(await page.evaluate(() => EDITOR_A.getCurrentPageShapes().length)).toBe(1) const TextArea = page.getByTestId(`textarea`) await TextArea.focus() @@ -103,7 +103,7 @@ test.describe('Focus', () => { await page.keyboard.press('Delete') // Should not have deleted the page - expect(await page.evaluate(() => EDITOR_A.currentPageShapes.length)).toBe(1) + expect(await page.evaluate(() => EDITOR_A.getCurrentPageShapes().length)).toBe(1) }) test('kbds when focused', async ({ page }) => { diff --git a/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx b/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx index f8c6e4bef..99eabdbcb 100644 --- a/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx +++ b/apps/examples/src/examples/CustomStylesExample/FilterStyleUi.tsx @@ -3,7 +3,7 @@ import { MyFilterStyle } from './CardShape' export const FilterStyleUi = track(function FilterStyleUi() { const editor = useEditor() - const filterStyle = editor.sharedStyles.get(MyFilterStyle) + const filterStyle = editor.getSharedStyles().get(MyFilterStyle) // if the filter style isn't in sharedStyles, it means it's not relevant to the current tool/selection if (!filterStyle) return null diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index 49d358a83..c7ef49126 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -592,8 +592,6 @@ export class Editor extends EventEmitter { complete(): this; // @internal (undocumented) crash(error: unknown): this; - // @internal - get crashingError(): unknown; createAssets(assets: TLAsset[]): this; // @internal (undocumented) createErrorAnnotations(origin: string, willCrashApp: 'unknown' | boolean): { @@ -611,13 +609,18 @@ export class Editor extends EventEmitter { createPage(page: Partial): this; createShape(shape: OptionalKeys, 'id'>): this; createShapes(shapes: OptionalKeys, 'id'>[]): this; + // @deprecated (undocumented) get croppingShapeId(): null | TLShapeId; get currentPage(): TLPage; + // @deprecated (undocumented) get currentPageBounds(): Box2d | undefined; get currentPageId(): TLPageId; + // @deprecated (undocumented) get currentPageRenderingShapesSorted(): TLShape[]; get currentPageShapeIds(): Set; + // @deprecated (undocumented) get currentPageShapes(): TLShape[]; + // @deprecated (undocumented) get currentPageShapesSorted(): TLShape[]; // @deprecated (undocumented) get currentPageState(): TLInstancePageState; @@ -690,6 +693,13 @@ export class Editor extends EventEmitter { getCanUndo(): boolean; getContainer: () => HTMLElement; getContentFromCurrentPage(shapes: TLShape[] | TLShapeId[]): TLContent | undefined; + // @internal + getCrashingError(): unknown; + getCroppingShapeId(): null | TLShapeId; + getCurrentPageBounds(): Box2d | undefined; + getCurrentPageRenderingShapesSorted(): TLShape[]; + getCurrentPageShapes(): TLShape[]; + getCurrentPageShapesSorted(): TLShape[]; getCurrentPageState(): TLInstancePageState; getCurrentTool(): StateNode | undefined; getCurrentToolId(): string; @@ -770,6 +780,8 @@ export class Editor extends EventEmitter { getShapeUtil(type: S['type']): ShapeUtil; // (undocumented) getShapeUtil(type: T extends ShapeUtil ? R['type'] : string): T; + getSharedOpacity(): SharedStyle; + getSharedStyles(): ReadonlySharedStyleMap; getSortedChildIdsForParent(parent: TLPage | TLParentId | TLShape): TLShapeId[]; getStateDescendant(path: string): StateNode | undefined; // @internal (undocumented) @@ -931,7 +943,9 @@ export class Editor extends EventEmitter { shapeUtils: { readonly [K in string]?: ShapeUtil; }; + // @deprecated (undocumented) get sharedOpacity(): SharedStyle; + // @deprecated (undocumented) get sharedStyles(): ReadonlySharedStyleMap; readonly sideEffects: SideEffectManager; slideCamera(opts?: { diff --git a/packages/editor/api/api.json b/packages/editor/api/api.json index 1eb110bb9..986425a27 100644 --- a/packages/editor/api/api.json +++ b/packages/editor/api/api.json @@ -7933,7 +7933,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#croppingShapeId:member", - "docComment": "/**\n * The current cropping shape's id.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getCroppingShapeId` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -7999,7 +7999,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#currentPageBounds:member", - "docComment": "/**\n * The bounds of the current page (the common bounds of all of the shapes on the page).\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getCurrentPageBounds` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -8065,7 +8065,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#currentPageRenderingShapesSorted:member", - "docComment": "/**\n * An array containing all of the rendering shapes in the current page, sorted in z-index order (accounting for nested shapes): e.g. A, B, BA, BB, C.\n *\n * @example\n * ```ts\n * editor.currentPageShapesSorted\n * ```\n *\n * @readonly @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getCurrentPageRenderingShapesSorted` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -8144,7 +8144,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#currentPageShapes:member", - "docComment": "/**\n * An array containing all of the shapes in the current page.\n *\n * @example\n * ```ts\n * editor.currentPageShapes\n * ```\n *\n * @readonly @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getCurrentPageShapes` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -8179,7 +8179,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#currentPageShapesSorted:member", - "docComment": "/**\n * An array containing all of the shapes in the current page, sorted in z-index order (accounting for nested shapes): e.g. A, B, BA, BB, C.\n *\n * @example\n * ```ts\n * editor.currentPageShapesSorted\n * ```\n *\n * @readonly @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `getCurrentPageShapesSorted` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -10221,6 +10221,186 @@ "isAbstract": false, "name": "getContentFromCurrentPage" }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getCroppingShapeId:member(1)", + "docComment": "/**\n * The current cropping shape's id.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getCroppingShapeId(): " + }, + { + "kind": "Content", + "text": "null | " + }, + { + "kind": "Reference", + "text": "TLShapeId", + "canonicalReference": "@tldraw/tlschema!TLShapeId:type" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 3 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getCroppingShapeId" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getCurrentPageBounds:member(1)", + "docComment": "/**\n * The bounds of the current page (the common bounds of all of the shapes on the page).\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getCurrentPageBounds(): " + }, + { + "kind": "Reference", + "text": "Box2d", + "canonicalReference": "@tldraw/editor!Box2d:class" + }, + { + "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": "getCurrentPageBounds" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getCurrentPageRenderingShapesSorted:member(1)", + "docComment": "/**\n * An array containing all of the rendering shapes in the current page, sorted in z-index order (accounting for nested shapes): e.g. A, B, BA, BB, C.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getCurrentPageRenderingShapesSorted(): " + }, + { + "kind": "Reference", + "text": "TLShape", + "canonicalReference": "@tldraw/tlschema!TLShape: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": "getCurrentPageRenderingShapesSorted" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getCurrentPageShapes:member(1)", + "docComment": "/**\n * An array containing all of the shapes in the current page.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getCurrentPageShapes(): " + }, + { + "kind": "Reference", + "text": "TLShape", + "canonicalReference": "@tldraw/tlschema!TLShape: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": "getCurrentPageShapes" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getCurrentPageShapesSorted:member(1)", + "docComment": "/**\n * An array containing all of the shapes in the current page, sorted in z-index order (accounting for nested shapes): e.g. A, B, BA, BB, C.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getCurrentPageShapesSorted(): " + }, + { + "kind": "Reference", + "text": "TLShape", + "canonicalReference": "@tldraw/tlschema!TLShape: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": "getCurrentPageShapesSorted" + }, { "kind": "Method", "canonicalReference": "@tldraw/editor!Editor#getCurrentPageState:member(1)", @@ -13331,6 +13511,74 @@ "isAbstract": false, "name": "getShapeUtil" }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getSharedOpacity:member(1)", + "docComment": "/**\n * Get the currently selected shared opacity. If any shapes are selected, this returns the shared opacity of the selected shapes. Otherwise, this returns the chosen opacity for the next shape.\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getSharedOpacity(): " + }, + { + "kind": "Reference", + "text": "SharedStyle", + "canonicalReference": "@tldraw/editor!SharedStyle: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": "getSharedOpacity" + }, + { + "kind": "Method", + "canonicalReference": "@tldraw/editor!Editor#getSharedStyles:member(1)", + "docComment": "/**\n * A map of all the current styles either in the current selection, or that are relevant to the current tool.\n *\n * @example\n * ```ts\n * const color = editor.sharedStyles.get(DefaultColorStyle)\n * if (color && color.type === 'shared') {\n * print('All selected shapes have the same color:', color.value)\n * }\n * ```\n *\n * @public\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "getSharedStyles(): " + }, + { + "kind": "Reference", + "text": "ReadonlySharedStyleMap", + "canonicalReference": "@tldraw/editor!ReadonlySharedStyleMap:class" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isStatic": false, + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "isProtected": false, + "overloadIndex": 1, + "parameters": [], + "isOptional": false, + "isAbstract": false, + "name": "getSharedStyles" + }, { "kind": "Method", "canonicalReference": "@tldraw/editor!Editor#getSortedChildIdsForParent:member(1)", @@ -18159,7 +18407,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#sharedOpacity:member", - "docComment": "/**\n * Get the currently selected shared opacity. If any shapes are selected, this returns the shared opacity of the selected shapes. Otherwise, this returns the chosen opacity for the next shape.\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `editor.sharedOpacity` instead.\n */\n", "excerptTokens": [ { "kind": "Content", @@ -18194,7 +18442,7 @@ { "kind": "Property", "canonicalReference": "@tldraw/editor!Editor#sharedStyles:member", - "docComment": "/**\n * A map of all the current styles either in the current selection, or that are relevant to the current tool.\n *\n * @example\n * ```ts\n * const color = editor.sharedStyles.get(DefaultColorStyle)\n * if (color && color.type === 'shared') {\n * print('All selected shapes have the same color:', color.value)\n * }\n * ```\n *\n * @public\n */\n", + "docComment": "/**\n * @deprecated\n *\n * Use `editor.sharedStyles` instead.\n */\n", "excerptTokens": [ { "kind": "Content", diff --git a/packages/editor/src/lib/TldrawEditor.tsx b/packages/editor/src/lib/TldrawEditor.tsx index 3959b5900..f33ed7f3b 100644 --- a/packages/editor/src/lib/TldrawEditor.tsx +++ b/packages/editor/src/lib/TldrawEditor.tsx @@ -304,7 +304,7 @@ function TldrawEditorWithReadyStore({ }, [editor] ), - () => editor?.crashingError ?? null + () => editor?.getCrashingError() ?? null ) if (!editor) { diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index a06f40d0f..b00f2c03d 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -460,7 +460,7 @@ export class Editor extends EventEmitter { invalidParents.add(record.parentId) } // clean up any arrows bound to this shape - const bindings = this._arrowBindingsIndex.get()[record.id] + const bindings = this._getArrowBindingsIndex().get()[record.id] if (bindings?.length) { for (const { arrowId, handleId } of bindings) { const arrow = this.getShape(arrowId) @@ -502,7 +502,7 @@ export class Editor extends EventEmitter { // if the shape's parent changed and it is bound to an arrow, update the arrow's parent if (prev.parentId !== next.parentId) { const reparentBoundArrows = (id: TLShapeId) => { - const boundArrows = this._arrowBindingsIndex.get()[id] + const boundArrows = this._getArrowBindingsIndex().get()[id] if (boundArrows?.length) { for (const arrow of boundArrows) { reparentArrow(arrow.arrowId) @@ -918,7 +918,7 @@ export class Editor extends EventEmitter { /** @internal */ @computed - private get _arrowBindingsIndex() { + private _getArrowBindingsIndex() { return arrowBindingsIndex(this) } @@ -930,11 +930,11 @@ export class Editor extends EventEmitter { * @public */ getArrowsBoundTo(shapeId: TLShapeId) { - return this._arrowBindingsIndex.get()[shapeId] || EMPTY_ARRAY + return this._getArrowBindingsIndex().get()[shapeId] || EMPTY_ARRAY } @computed - private get arrowInfoCache() { + private getArrowInfoCache() { return this.store.createComputedCache('arrow infoCache', (shape) => { return getIsArrowStraight(shape) ? getStraightArrowInfo(this, shape) @@ -956,7 +956,7 @@ export class Editor extends EventEmitter { */ getArrowInfo(shape: TLArrowShape | TLShapeId): TLArrowInfo | undefined { const id = typeof shape === 'string' ? shape : shape.id - return this.arrowInfoCache.get(id) + return this.getArrowInfoCache().get(id) } /* --------------------- Errors --------------------- */ @@ -1037,7 +1037,7 @@ export class Editor extends EventEmitter { * * @internal */ - get crashingError() { + getCrashingError() { return this._crashingError } @@ -2166,10 +2166,17 @@ export class Editor extends EventEmitter { * * @public */ - get croppingShapeId() { + getCroppingShapeId() { return this.getCurrentPageState().croppingShapeId } + /** + * @deprecated Use `getCroppingShapeId` instead. + */ + get croppingShapeId() { + return this.getCroppingShapeId() + } + /** * Set the current cropping shape. * @@ -2186,7 +2193,7 @@ export class Editor extends EventEmitter { */ setCroppingShape(shape: TLShapeId | TLShape | null): this { const id = typeof shape === 'string' ? shape : shape?.id ?? null - if (id !== this.croppingShapeId) { + if (id !== this.getCroppingShapeId()) { if (!id) { this.updateCurrentPageState({ croppingShapeId: null }) } else { @@ -2345,7 +2352,7 @@ export class Editor extends EventEmitter { * @public */ zoomToContent(): this { - const bounds = this.getSelectionPageBounds() ?? this.currentPageBounds + const bounds = this.getSelectionPageBounds() ?? this.getCurrentPageBounds() if (bounds) { this.zoomToBounds(bounds, Math.min(1, this.getZoomLevel()), { duration: 220 }) @@ -4468,7 +4475,7 @@ export class Editor extends EventEmitter { * * @public */ - @computed get currentPageBounds(): Box2d | undefined { + @computed getCurrentPageBounds(): Box2d | undefined { let commonBounds: Box2d | undefined this.currentPageShapeIds.forEach((shapeId) => { @@ -4484,6 +4491,13 @@ export class Editor extends EventEmitter { return commonBounds } + /** + * @deprecated Use `getCurrentPageBounds` instead. + */ + get currentPageBounds() { + return this.getCurrentPageBounds() + } + /** * Get the top-most selected shape at the given point, ignoring groups. * @@ -4493,7 +4507,7 @@ export class Editor extends EventEmitter { */ getSelectedShapeAtPoint(point: VecLike): TLShape | undefined { const selectedShapeIds = this.getSelectedShapeIds() - return this.currentPageShapesSorted + return this.getCurrentPageShapesSorted() .filter((shape) => shape.type !== 'group' && selectedShapeIds.includes(shape.id)) .reverse() // findlast .find((shape) => this.isPointInShape(shape, point, { hitInside: true, margin: 0 })) @@ -4535,7 +4549,9 @@ export class Editor extends EventEmitter { let inMarginClosestToEdgeHit: TLShape | null = null const shapesToCheck = ( - opts.renderingOnly ? this.currentPageRenderingShapesSorted : this.currentPageShapesSorted + opts.renderingOnly + ? this.getCurrentPageRenderingShapesSorted() + : this.getCurrentPageShapesSorted() ).filter((shape) => { if (this.isShapeOfType(shape, 'group')) return false const pageMask = this.getShapeMask(shape) @@ -4697,7 +4713,7 @@ export class Editor extends EventEmitter { point: VecLike, opts = {} as { margin?: number; hitInside?: boolean } ): TLShape[] { - return this.currentPageShapes.filter((shape) => this.isPointInShape(shape, point, opts)) + return this.getCurrentPageShapes().filter((shape) => this.isPointInShape(shape, point, opts)) } /** @@ -4785,36 +4801,29 @@ export class Editor extends EventEmitter { /** * An array containing all of the shapes in the current page. * - * @example - * ```ts - * editor.currentPageShapes - * ``` - * - * @readonly - * * @public */ - @computed get currentPageShapes() { + @computed getCurrentPageShapes(): TLShape[] { return Array.from(this.currentPageShapeIds, (id) => this.store.get(id)! as TLShape) } + /** + * @deprecated Use `getCurrentPageShapes` instead. + */ + get currentPageShapes() { + return this.getCurrentPageShapes() + } + /** * An array containing all of the shapes in the current page, sorted in z-index order (accounting * for nested shapes): e.g. A, B, BA, BB, C. * - * @example - * ```ts - * editor.currentPageShapesSorted - * ``` - * - * @readonly - * * @public */ - @computed get currentPageShapesSorted(): TLShape[] { + @computed getCurrentPageShapesSorted(): TLShape[] { // todo: consider making into a function call that includes options for selected-only, rendering, etc. // todo: consider making a derivation or something, or merging with rendering shapes - const shapes = new Set(this.currentPageShapes.sort(sortByIndex)) + const shapes = new Set(this.getCurrentPageShapes().sort(sortByIndex)) const results: TLShape[] = [] @@ -4839,26 +4848,33 @@ export class Editor extends EventEmitter { return results } + /** + * @deprecated Use `getCurrentPageShapesSorted` instead. + */ + get currentPageShapesSorted() { + return this.getCurrentPageShapesSorted() + } + /** * An array containing all of the rendering shapes in the current page, sorted in z-index order (accounting * for nested shapes): e.g. A, B, BA, BB, C. * - * @example - * ```ts - * editor.currentPageShapesSorted - * ``` - * - * @readonly - * * @public */ - @computed get currentPageRenderingShapesSorted(): TLShape[] { + @computed getCurrentPageRenderingShapesSorted(): TLShape[] { return this.getRenderingShapes() .filter(({ isCulled }) => !isCulled) .sort((a, b) => a.index - b.index) .map(({ shape }) => shape) } + /** + * @deprecated Use `getCurrentPageRenderingShapesSorted` instead. + */ + get currentPageRenderingShapesSorted() { + return this.getCurrentPageRenderingShapesSorted() + } + /** * Get whether a shape matches the type of a TLShapeUtil. * @@ -5233,7 +5249,7 @@ export class Editor extends EventEmitter { */ getDroppingOverShape(point: VecLike, droppingShapes: TLShape[] = []) { // starting from the top... - const { currentPageShapesSorted } = this + const currentPageShapesSorted = this.getCurrentPageShapesSorted() for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) { const shape = currentPageShapesSorted[i] @@ -6784,7 +6800,7 @@ export class Editor extends EventEmitter { // page or another shape that exists (or that will exist) in this page. // find last parent id - const { currentPageShapesSorted } = this + const currentPageShapesSorted = this.getCurrentPageShapesSorted() partials = partials.map((partial) => { // If the partial does not provide the parentId OR if the provided @@ -7418,7 +7434,7 @@ export class Editor extends EventEmitter { } const deletedIds = [...allIds] - const arrowBindings = this._arrowBindingsIndex.get() + const arrowBindings = this._getArrowBindingsIndex().get() const snapshots = compact( deletedIds.flatMap((id) => { const shape = this.getShape(id) @@ -7525,7 +7541,7 @@ export class Editor extends EventEmitter { * @public */ @computed({ isEqual: (a, b) => a.equals(b) }) - get sharedStyles(): ReadonlySharedStyleMap { + getSharedStyles(): ReadonlySharedStyleMap { // If we're in selecting and if we have a selection, return the shared styles from the // current selection if (this.isIn('select') && this.getSelectedShapeIds().length > 0) { @@ -7545,6 +7561,13 @@ export class Editor extends EventEmitter { return styles } + /** + * @deprecated Use `editor.sharedStyles` instead. + */ + get sharedStyles() { + return this.getSharedStyles() + } + /** * Get the currently selected shared opacity. * If any shapes are selected, this returns the shared opacity of the selected shapes. @@ -7552,7 +7575,7 @@ export class Editor extends EventEmitter { * * @public */ - @computed get sharedOpacity(): SharedStyle { + @computed getSharedOpacity(): SharedStyle { if (this.isIn('select') && this.getSelectedShapeIds().length > 0) { const shapesToCheck: TLShape[] = [] const addShape = (shapeId: TLShapeId) => { @@ -7587,6 +7610,13 @@ export class Editor extends EventEmitter { return { type: 'shared', value: this.getInstanceState().opacityForNextShape } } + /** + * @deprecated Use `editor.sharedOpacity` instead. + */ + get sharedOpacity() { + return this.getSharedOpacity() + } + /** * Set the opacity for the next shapes. This will effect subsequently created shapes. * @@ -8807,7 +8837,7 @@ export class Editor extends EventEmitter { dispatch = (info: TLEventInfo): this => { // prevent us from spamming similar event errors if we're crashed. // todo: replace with new readonly mode? - if (this.crashingError) return this + if (this.getCrashingError()) return this const { inputs } = this const { type } = info diff --git a/packages/editor/src/lib/hooks/useIsCropping.ts b/packages/editor/src/lib/hooks/useIsCropping.ts index cb914f13f..045074e72 100644 --- a/packages/editor/src/lib/hooks/useIsCropping.ts +++ b/packages/editor/src/lib/hooks/useIsCropping.ts @@ -5,5 +5,5 @@ import { useEditor } from './useEditor' /** @public */ export function useIsCropping(shapeId: TLShapeId) { const editor = useEditor() - return useValue('isCropping', () => editor.croppingShapeId === shapeId, [editor, shapeId]) + return useValue('isCropping', () => editor.getCroppingShapeId() === shapeId, [editor, shapeId]) } diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeTool.test.ts b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeTool.test.ts index 8eb335bbe..fb92ebf82 100644 --- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeTool.test.ts +++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeTool.test.ts @@ -39,9 +39,9 @@ it('enters the arrow state', () => { describe('When in the idle state', () => { it('enters the pointing state and creates a shape on pointer down', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('arrow').pointerDown(0, 0) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) editor.expectToBeIn('arrow.pointing') }) @@ -55,18 +55,18 @@ describe('When in the idle state', () => { describe('When in the pointing state', () => { it('cancels on pointer up', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('arrow').pointerDown(0, 0).pointerUp(0, 0) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('arrow.idle') }) it('bails on cancel', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('arrow').pointerDown(0, 0).cancel() - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('arrow.idle') @@ -82,7 +82,7 @@ describe('When in the pointing state', () => { describe('When dragging the arrow', () => { it('updates the arrow on pointer move', () => { editor.setCurrentTool('arrow').pointerDown(0, 0).pointerMove(10, 10) - const arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, type: 'arrow', @@ -97,9 +97,9 @@ describe('When dragging the arrow', () => { }) it('returns to select.idle, keeping shape, on pointer up', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('arrow').pointerDown(0, 0).pointerMove(10, 10).pointerUp(10, 10) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('select.idle') @@ -107,18 +107,18 @@ describe('When dragging the arrow', () => { it('returns to arrow.idle, keeping shape, on pointer up when tool lock is active', () => { editor.updateInstanceState({ isToolLocked: true }) - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('arrow').pointerDown(0, 0).pointerMove(10, 10).pointerUp(10, 10) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('arrow.idle') }) it('bails on cancel', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('arrow').pointerDown(0, 0).pointerMove(10, 10).cancel() - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore) editor.expectToBeIn('arrow.idle') }) @@ -139,7 +139,7 @@ describe('When pointing a start shape', () => { // Clear hinting ids when moving away expect(editor.getHintingShapeIds().length).toBe(0) - const arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, type: 'arrow', @@ -179,7 +179,7 @@ describe('When pointing an end shape', () => { // Set hinting id when pointing the shape expect(editor.getHintingShapeIds().length).toBe(1) - const arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, type: 'arrow', @@ -208,7 +208,7 @@ describe('When pointing an end shape', () => { editor.pointerMove(375, 375) - let arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + let arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] expect(editor.getHintingShapeIds().length).toBe(1) @@ -230,7 +230,7 @@ describe('When pointing an end shape', () => { jest.advanceTimersByTime(1000) - arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, @@ -250,7 +250,7 @@ describe('When pointing an end shape', () => { editor.pointerMove(375, 0) expect(editor.getHintingShapeIds().length).toBe(0) - arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, @@ -268,7 +268,7 @@ describe('When pointing an end shape', () => { editor.pointerMove(325, 325) expect(editor.getHintingShapeIds().length).toBe(1) - arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, @@ -289,7 +289,7 @@ describe('When pointing an end shape', () => { // Give time for the velocity to die down jest.advanceTimersByTime(1000) - arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, @@ -316,7 +316,7 @@ describe('When pointing an end shape', () => { editor.inputs.pointerVelocity = new Vec2d(1, 1) editor.pointerMove(370, 370) - const arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] expect(editor.getHintingShapeIds().length).toBe(1) @@ -340,7 +340,7 @@ describe('When pointing an end shape', () => { it('begins precise when moving slowly', () => { editor.setCurrentTool('arrow').pointerDown(0, 0) - let arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + let arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(arrow, { id: arrow.id, @@ -358,7 +358,7 @@ describe('When pointing an end shape', () => { editor.inputs.pointerVelocity = new Vec2d(0.001, 0.001) editor.pointerMove(375, 375) - arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] expect(editor.getHintingShapeIds().length).toBe(1) @@ -390,7 +390,7 @@ describe('reparenting issue', () => { editor.pointerMove(100, 100) editor.pointerUp() - const arrowId = editor.currentPageShapesSorted[0].id + const arrowId = editor.getCurrentPageShapesSorted()[0].id // Now create three shapes editor.createShapes([ @@ -504,7 +504,7 @@ describe('line bug', () => { it('works as expected when binding to a straight line', () => { editor.selectAll().deleteShapes(editor.getSelectedShapeIds()) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor .setCurrentTool('line') @@ -522,15 +522,15 @@ describe('line bug', () => { .pointerUp() .keyUp('Shift') - expect(editor.currentPageShapes.length).toBe(2) - const arrow = editor.currentPageShapes[1] as TLArrowShape + expect(editor.getCurrentPageShapes().length).toBe(2) + const arrow = editor.getCurrentPageShapes()[1] as TLArrowShape expect(arrow.props.end.type).toBe('binding') }) it('works as expected when binding to a straight horizontal line', () => { editor.selectAll().deleteShapes(editor.getSelectedShapeIds()) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor .setCurrentTool('line') @@ -544,8 +544,8 @@ describe('line bug', () => { .pointerMove(0, 50) .pointerUp() - expect(editor.currentPageShapes.length).toBe(2) - const arrow = editor.currentPageShapes[1] as TLArrowShape + expect(editor.getCurrentPageShapes().length).toBe(2) + const arrow = editor.getCurrentPageShapes()[1] as TLArrowShape expect(arrow.props.end.type).toBe('binding') }) }) diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.test.ts b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.test.ts index 32c1d1c43..92a1fb231 100644 --- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.test.ts +++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.test.ts @@ -302,7 +302,7 @@ describe('Other cases when arrow are moved', () => { .groupShapes(editor.getSelectedShapeIds()) editor.setCurrentTool('arrow').pointerDown(1000, 1000).pointerMove(50, 350).pointerUp(50, 350) - let arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + let arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] assert(editor.isShapeOfType(arrow, 'arrow')) assert(arrow.props.end.type === 'binding') expect(arrow.props.end.boundShapeId).toBe(ids.box3) @@ -322,7 +322,7 @@ describe('When a shape it rotated', () => { it('binds correctly', () => { editor.setCurrentTool('arrow').pointerDown(0, 0).pointerMove(375, 375) - const arrow = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] expect(editor.getShape(arrow.id)).toMatchObject({ props: { @@ -371,8 +371,8 @@ describe('resizing', () => { .pointerUp() .setCurrentTool('select') - const arrow1 = editor.currentPageShapes.at(-2)! - const arrow2 = editor.currentPageShapes.at(-1)! + const arrow1 = editor.getCurrentPageShapes().at(-2)! + const arrow2 = editor.getCurrentPageShapes().at(-1)! editor .select(arrow1.id, arrow2.id) @@ -426,8 +426,8 @@ describe('resizing', () => { .pointerUp() .setCurrentTool('select') - const arrow1 = editor.currentPageShapes.at(-2)! - const arrow2 = editor.currentPageShapes.at(-1)! + const arrow1 = editor.getCurrentPageShapes().at(-2)! + const arrow2 = editor.getCurrentPageShapes().at(-1)! editor.updateShapes([{ id: arrow1.id, type: 'arrow', props: { bend: 50 } }]) diff --git a/packages/tldraw/src/lib/shapes/frame/FrameShapeTool.test.ts b/packages/tldraw/src/lib/shapes/frame/FrameShapeTool.test.ts index ab749738a..2406634a2 100644 --- a/packages/tldraw/src/lib/shapes/frame/FrameShapeTool.test.ts +++ b/packages/tldraw/src/lib/shapes/frame/FrameShapeTool.test.ts @@ -12,44 +12,44 @@ afterEach(() => { describe(FrameShapeTool, () => { it('Creates frame shapes on click-and-drag, supports undo and redo', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('frame') editor.pointerDown(50, 50) editor.pointerMove(100, 100) editor.pointerUp(100, 100) - expect(editor.currentPageShapes.length).toBe(1) - expect(editor.currentPageShapes[0]?.type).toBe('frame') - expect(editor.getSelectedShapeIds()[0]).toBe(editor.currentPageShapes[0]?.id) + expect(editor.getCurrentPageShapes().length).toBe(1) + expect(editor.getCurrentPageShapes()[0]?.type).toBe('frame') + expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id) editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('Creates frame shapes on click, supports undo and redo', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('frame') editor.pointerDown(50, 50) editor.pointerUp(50, 50) - expect(editor.currentPageShapes.length).toBe(1) - expect(editor.currentPageShapes[0]?.type).toBe('frame') - expect(editor.getSelectedShapeIds()[0]).toBe(editor.currentPageShapes[0]?.id) + expect(editor.getCurrentPageShapes().length).toBe(1) + expect(editor.getCurrentPageShapes()[0]?.type).toBe('frame') + expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id) editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) @@ -114,22 +114,22 @@ describe('When in the pointing state', () => { }) it('Creates a frame and returns to select tool on pointer up', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('frame') editor.pointerDown(50, 50) editor.pointerUp(50, 50) editor.expectToBeIn('select.idle') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('Creates a frame and returns to frame.idle on pointer up if tool lock is enabled', () => { editor.updateInstanceState({ isToolLocked: true }) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('frame') editor.pointerDown(50, 50) editor.pointerUp(50, 50) editor.expectToBeIn('frame.idle') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) diff --git a/packages/tldraw/src/lib/shapes/geo/GeoShapeTool.test.ts b/packages/tldraw/src/lib/shapes/geo/GeoShapeTool.test.ts index b57e24df5..502a11db9 100644 --- a/packages/tldraw/src/lib/shapes/geo/GeoShapeTool.test.ts +++ b/packages/tldraw/src/lib/shapes/geo/GeoShapeTool.test.ts @@ -12,44 +12,44 @@ afterEach(() => { describe(GeoShapeTool, () => { it('Creates geo shapes on click-and-drag, supports undo and redo', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('geo') editor.pointerDown(50, 50) editor.pointerMove(100, 100) editor.pointerUp() - expect(editor.currentPageShapes.length).toBe(1) - expect(editor.currentPageShapes[0]?.type).toBe('geo') - expect(editor.getSelectedShapeIds()[0]).toBe(editor.currentPageShapes[0]?.id) + expect(editor.getCurrentPageShapes().length).toBe(1) + expect(editor.getCurrentPageShapes()[0]?.type).toBe('geo') + expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id) editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('Creates geo shapes on click, supports undo and redo', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('geo') editor.pointerDown(50, 50) editor.pointerUp(50, 50) - expect(editor.currentPageShapes.length).toBe(1) - expect(editor.currentPageShapes[0]?.type).toBe('geo') - expect(editor.getSelectedShapeIds()[0]).toBe(editor.currentPageShapes[0]?.id) + expect(editor.getCurrentPageShapes().length).toBe(1) + expect(editor.getCurrentPageShapes()[0]?.type).toBe('geo') + expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id) editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) @@ -100,7 +100,7 @@ describe('When in the idle state', () => { editor.pointerMove(200, 200) editor.pointerUp(200, 200) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) editor.selectAll() expect(editor.getSelectedShapes().length).toBe(2) @@ -143,22 +143,22 @@ describe('When in the pointing state', () => { }) it('Creates a geo and returns to select tool on pointer up', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('geo') editor.pointerDown(50, 50) editor.pointerUp(50, 50) editor.expectToBeIn('select.idle') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('Creates a geo and returns to geo.idle on pointer up if tool lock is enabled', () => { editor.updateInstanceState({ isToolLocked: true }) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('geo') editor.pointerDown(50, 50) editor.pointerUp(50, 50) editor.expectToBeIn('geo.idle') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) diff --git a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx index 23503cfe3..576db5d90 100644 --- a/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/image/ImageShapeUtil.tsx @@ -233,7 +233,7 @@ export class ImageShapeUtil extends BaseBoxShapeUtil { const props = shape.props if (!props) return - if (this.editor.croppingShapeId !== shape.id) { + if (this.editor.getCroppingShapeId() !== shape.id) { return } diff --git a/packages/tldraw/src/lib/shapes/line/LineShapeTool.test.ts b/packages/tldraw/src/lib/shapes/line/LineShapeTool.test.ts index 984e5c7ba..41d0c46ea 100644 --- a/packages/tldraw/src/lib/shapes/line/LineShapeTool.test.ts +++ b/packages/tldraw/src/lib/shapes/line/LineShapeTool.test.ts @@ -15,9 +15,9 @@ it('enters the line state', () => { describe('When in the idle state', () => { it('enters the pointing state and creates a shape on pointer down', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('line').pointerDown(0, 0, { target: 'canvas' }) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) editor.expectToBeIn('line.pointing') }) @@ -31,18 +31,18 @@ describe('When in the idle state', () => { describe('When in the pointing state', () => { it('createes on pointer up', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('line').pointerDown(0, 0, { target: 'canvas' }).pointerUp(0, 0) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('line.idle') }) it('bails on cancel', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor.setCurrentTool('line').pointerDown(0, 0, { target: 'canvas' }).cancel() - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('line.idle') @@ -58,7 +58,7 @@ describe('When in the pointing state', () => { describe('When dragging the line', () => { it('updates the line on pointer move', () => { editor.setCurrentTool('line').pointerDown(0, 0, { target: 'canvas' }).pointerMove(10, 10) - const line = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] editor.expectShapeToMatch(line, { id: line.id, type: 'line', @@ -75,13 +75,13 @@ describe('When dragging the line', () => { }) it('returns to select.idle, keeping shape, on pointer up', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor .setCurrentTool('line') .pointerDown(0, 0, { target: 'canvas' }) .pointerMove(10, 10) .pointerUp(10, 10) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('select.idle') @@ -89,26 +89,26 @@ describe('When dragging the line', () => { it('returns to line.idle, keeping shape, on pointer up if tool lock is enabled', () => { editor.updateInstanceState({ isToolLocked: true }) - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor .setCurrentTool('line') .pointerDown(0, 0, { target: 'canvas' }) .pointerMove(10, 10) .pointerUp(10, 10) - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore + 1) expect(editor.getHintingShapeIds().length).toBe(0) editor.expectToBeIn('line.idle') }) it('bails on cancel', () => { - const shapesBefore = editor.currentPageShapes.length + const shapesBefore = editor.getCurrentPageShapes().length editor .setCurrentTool('line') .pointerDown(0, 0, { target: 'canvas' }) .pointerMove(10, 10) .cancel() - const shapesAfter = editor.currentPageShapes.length + const shapesAfter = editor.getCurrentPageShapes().length expect(shapesAfter).toBe(shapesBefore) editor.expectToBeIn('line.idle') }) @@ -126,7 +126,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => { .pointerDown(20, 10, { target: 'canvas' }) .pointerUp(20, 10) - const line = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] assert(editor.isShapeOfType(line, 'line')) const handles = Object.values(line.props.handles) expect(handles.length).toBe(3) @@ -143,7 +143,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => { .pointerMove(30, 10) .pointerUp(30, 10) - const line = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] assert(editor.isShapeOfType(line, 'line')) const handles = Object.values(line.props.handles) expect(handles.length).toBe(2) @@ -161,7 +161,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => { .pointerMove(30, 10) .pointerUp(30, 10) - const line = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] assert(editor.isShapeOfType(line, 'line')) const handles = Object.values(line.props.handles) expect(handles.length).toBe(3) @@ -181,7 +181,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => { .pointerMove(30, 10) .pointerUp(30, 10) - const line = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] assert(editor.isShapeOfType(line, 'line')) const handles = Object.values(line.props.handles) expect(handles.length).toBe(3) @@ -203,7 +203,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => { .pointerMove(40, 10) .pointerUp(40, 10) - const line = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] assert(editor.isShapeOfType(line, 'line')) const handles = Object.values(line.props.handles) expect(handles.length).toBe(3) @@ -212,7 +212,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => { describe('tool lock bug', () => { it('works as expected when tool lock is on but shift is off', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor .updateInstanceState({ isToolLocked: true }) .setCurrentTool('line') @@ -223,6 +223,6 @@ describe('tool lock bug', () => { .pointerMove(110, 110) .pointerUp(100, 100) .pointerUp(120, 110) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) }) }) diff --git a/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts b/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts index 3d108e59d..a2dfda5e1 100644 --- a/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts +++ b/packages/tldraw/src/lib/shapes/note/NoteShapeTool.test.ts @@ -12,47 +12,47 @@ afterEach(() => { describe(NoteShapeTool, () => { it('Creates note shapes on click-and-drag, supports undo and redo', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('note') editor.pointerDown(50, 50) editor.pointerMove(100, 100) editor.pointerUp(100, 100) - expect(editor.currentPageShapes.length).toBe(1) - expect(editor.currentPageShapes[0]?.type).toBe('note') - expect(editor.getSelectedShapeIds()[0]).toBe(editor.currentPageShapes[0]?.id) + expect(editor.getCurrentPageShapes().length).toBe(1) + expect(editor.getCurrentPageShapes()[0]?.type).toBe('note') + expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id) editor.cancel() // leave edit mode editor.undo() // undoes the selection change editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('Creates note shapes on click, supports undo and redo', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('note') editor.pointerDown(50, 50) editor.pointerUp(50, 50) - expect(editor.currentPageShapes.length).toBe(1) - expect(editor.currentPageShapes[0]?.type).toBe('note') - expect(editor.getSelectedShapeIds()[0]).toBe(editor.currentPageShapes[0]?.id) + expect(editor.getCurrentPageShapes().length).toBe(1) + expect(editor.getCurrentPageShapes()[0]?.type).toBe('note') + expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id) editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) @@ -126,21 +126,21 @@ describe('When in the pointing state', () => { }) it('Creates a note and begins editing on pointer up', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('note') editor.pointerDown(50, 50) editor.pointerUp(50, 50) editor.expectToBeIn('select.editing_shape') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('Creates a frame and returns to frame.idle on pointer up if tool lock is enabled', () => { editor.updateInstanceState({ isToolLocked: true }) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('note') editor.pointerDown(50, 50) editor.pointerUp(50, 50) editor.expectToBeIn('note.idle') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) diff --git a/packages/tldraw/src/lib/shapes/text/TextShapeTool.test.ts b/packages/tldraw/src/lib/shapes/text/TextShapeTool.test.ts index 6ecc88097..0879dd52d 100644 --- a/packages/tldraw/src/lib/shapes/text/TextShapeTool.test.ts +++ b/packages/tldraw/src/lib/shapes/text/TextShapeTool.test.ts @@ -13,7 +13,7 @@ afterEach(() => { describe(TextShapeTool, () => { it('Creates text, edits it, undoes and redoes', () => { - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.setCurrentTool('text') editor.expectToBeIn('text.idle') editor.pointerDown(0, 0) @@ -22,28 +22,28 @@ describe(TextShapeTool, () => { editor.expectToBeIn('select.editing_shape') // This comes from the component, not the state chart editor.updateShapes([ - { ...editor.currentPageShapes[0]!, type: 'text', props: { text: 'Hello' } }, + { ...editor.getCurrentPageShapes()[0]!, type: 'text', props: { text: 'Hello' } }, ]) // Deselect the editing shape editor.cancel() editor.expectToBeIn('select.idle') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.expectShapeToMatch({ - id: editor.currentPageShapes[0].id, + id: editor.getCurrentPageShapes()[0].id, type: 'text', props: { text: 'Hello' }, }) editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.expectShapeToMatch({ - id: editor.currentPageShapes[0].id, + id: editor.getCurrentPageShapes()[0].id, type: 'text', props: { text: 'Hello' }, }) @@ -71,7 +71,7 @@ describe('When in idle state', () => { editor.pointerDown(0, 0) editor.pointerUp() editor.expectToBeIn('select.editing_shape') - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('returns to select on cancel', () => { @@ -87,7 +87,7 @@ describe('When in the pointing state', () => { editor.pointerDown(0, 0) editor.cancel() editor.expectToBeIn('text.idle') - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) }) it('returns to idle on interrupt', () => { @@ -96,7 +96,7 @@ describe('When in the pointing state', () => { editor.expectToBeIn('text.pointing') editor.interrupt() editor.expectToBeIn('text.idle') - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) }) it('transitions to select.resizing when dragging and edits on pointer up', () => { @@ -105,7 +105,7 @@ describe('When in the pointing state', () => { editor.pointerMove(10, 10) editor.expectToBeIn('select.resizing') editor.pointerUp() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.expectToBeIn('select.editing_shape') }) @@ -115,8 +115,8 @@ describe('When in the pointing state', () => { const y = 0 editor.pointerDown(x, y) editor.pointerUp() - const bounds = editor.getShapePageBounds(editor.currentPageShapes[0])! - expect(editor.currentPageShapes[0]).toMatchObject({ + const bounds = editor.getShapePageBounds(editor.getCurrentPageShapes()[0])! + expect(editor.getCurrentPageShapes()[0]).toMatchObject({ x: x - bounds.width / 2, y: y - bounds.height / 2, }) @@ -131,7 +131,7 @@ describe('When resizing', () => { editor.expectToBeIn('select.resizing') editor.cancel() editor.expectToBeIn('text.idle') - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) }) it('does not bails on interrupt while resizing', () => { @@ -140,7 +140,7 @@ describe('When resizing', () => { editor.pointerMove(100, 100) editor.expectToBeIn('select.resizing') editor.interrupt() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('preserves the top left when the text has a fixed width', () => { @@ -149,7 +149,7 @@ describe('When resizing', () => { const y = 0 editor.pointerDown(x, y) editor.pointerMove(x + 100, y + 100) - expect(editor.currentPageShapes[0]).toMatchObject({ + expect(editor.getCurrentPageShapes()[0]).toMatchObject({ x, y, }) diff --git a/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts b/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts index 77fc9a380..f4799b2ed 100644 --- a/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts +++ b/packages/tldraw/src/lib/tools/EraserTool/children/Erasing.ts @@ -24,7 +24,8 @@ export class Erasing extends StateNode { const { originPagePoint } = this.editor.inputs this.excludedShapeIds = new Set( - this.editor.currentPageShapes + this.editor + .getCurrentPageShapes() .filter((shape) => { //If the shape is locked, we shouldn't erase it if (this.editor.isShapeOrAncestorLocked(shape)) return true @@ -80,8 +81,8 @@ export class Erasing extends StateNode { update() { const erasingShapeIds = this.editor.getErasingShapeIds() const zoomLevel = this.editor.getZoomLevel() + const currentPageShapes = this.editor.getCurrentPageShapes() const { - currentPageShapes: currentPageShapes, inputs: { currentPagePoint, previousPagePoint }, } = this.editor diff --git a/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts b/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts index 4125465c3..8d3da33aa 100644 --- a/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts +++ b/packages/tldraw/src/lib/tools/EraserTool/children/Pointing.ts @@ -12,17 +12,17 @@ export class Pointing extends StateNode { override onEnter = () => { const zoomLevel = this.editor.getZoomLevel() + const currentPageShapesSorted = this.editor.getCurrentPageShapesSorted() const { inputs: { currentPagePoint }, - currentPageShapesSorted: sortedShapesOnCurrentPage, } = this.editor const erasing = new Set() const initialSize = erasing.size - for (let n = sortedShapesOnCurrentPage.length, i = n - 1; i >= 0; i--) { - const shape = sortedShapesOnCurrentPage[i] + for (let n = currentPageShapesSorted.length, i = n - 1; i >= 0; i--) { + const shape = currentPageShapesSorted[i] if ( this.editor.isShapeOrAncestorLocked(shape) || this.editor.isShapeOfType(shape, 'group') diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts b/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts index 22a447bfe..3978b18f1 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/Brushing.ts @@ -39,7 +39,8 @@ export class Brushing extends StateNode { } this.excludedShapeIds = new Set( - this.editor.currentPageShapes + this.editor + .getCurrentPageShapes() .filter( (shape) => this.editor.isShapeOfType(shape, 'group') || @@ -94,9 +95,9 @@ export class Brushing extends StateNode { private hitTestShapes() { const zoomLevel = this.editor.getZoomLevel() + const currentPageShapes = this.editor.getCurrentPageShapes() const { currentPageId, - currentPageShapes: currentPageShapes, inputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey }, } = this.editor diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/Crop/children/Idle.ts b/packages/tldraw/src/lib/tools/SelectTool/children/Crop/children/Idle.ts index acb60da70..9b5ae3943 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/Crop/children/Idle.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/Crop/children/Idle.ts @@ -66,7 +66,7 @@ export class Idle extends StateNode { break } case 'shape': { - if (info.shape.id === this.editor.croppingShapeId) { + if (info.shape.id === this.editor.getCroppingShapeId()) { this.editor.setCurrentTool('select.crop.pointing_crop', info) return } else { @@ -129,8 +129,9 @@ export class Idle extends StateNode { // after the user double clicked the edge to begin cropping if (this.editor.inputs.shiftKey || info.phase !== 'up') return - if (!this.editor.croppingShapeId) return - const shape = this.editor.getShape(this.editor.croppingShapeId) + const croppingShapeId = this.editor.getCroppingShapeId() + if (!croppingShapeId) return + const shape = this.editor.getShape(croppingShapeId) if (!shape) return const util = this.editor.getShapeUtil(shape) @@ -165,7 +166,7 @@ export class Idle extends StateNode { } private cleanupCroppingState = () => { - if (!this.editor.croppingShapeId) { + if (!this.editor.getCroppingShapeId()) { this.editor.setCurrentTool('select.idle', {}) } } @@ -193,7 +194,7 @@ export class Idle extends StateNode { if (shiftKey) delta.mul(10) - const shape = this.editor.getShape(this.editor.croppingShapeId!) as ShapeWithCrop + const shape = this.editor.getShape(this.editor.getCroppingShapeId()!) as ShapeWithCrop if (!shape) return const partial = getTranslateCroppedImageChange(this.editor, shape, delta) diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts b/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts index 719a7ec4d..9ab8017dc 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/ScribbleBrushing.ts @@ -86,8 +86,8 @@ export class ScribbleBrushing extends StateNode { private updateScribbleSelection(addPoint: boolean) { const zoomLevel = this.editor.getZoomLevel() + const currentPageShapes = this.editor.getCurrentPageShapes() const { - currentPageShapes: currentPageShapes, inputs: { shiftKey, originPagePoint, previousPagePoint, currentPagePoint }, } = this.editor diff --git a/packages/tldraw/src/lib/ui/components/BackToContent.tsx b/packages/tldraw/src/lib/ui/components/BackToContent.tsx index e637397f7..b0bcfc5af 100644 --- a/packages/tldraw/src/lib/ui/components/BackToContent.tsx +++ b/packages/tldraw/src/lib/ui/components/BackToContent.tsx @@ -25,7 +25,8 @@ export function BackToContent() { const visibleShapes = renderingShapes.filter( (s) => s.maskedPageBounds && renderingBounds.includes(s.maskedPageBounds) ) - const showBackToContentNow = visibleShapes.length === 0 && editor.currentPageShapes.length > 0 + const showBackToContentNow = + visibleShapes.length === 0 && editor.getCurrentPageShapes().length > 0 if (showBackToContentPrev !== showBackToContentNow) { setShowBackToContent(showBackToContentNow) diff --git a/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx b/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx index b058eda4a..022d1e2fc 100644 --- a/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx +++ b/packages/tldraw/src/lib/ui/components/HTMLCanvas.tsx @@ -7,7 +7,7 @@ export const HTMLCanvas = track(function HTMLCanvas() { const rCanvas = React.useRef(null) const camera = editor.getCamera() - const shapes = editor.currentPageShapes + const shapes = editor.getCurrentPageShapes() if (rCanvas.current) { const cvs = rCanvas.current const ctx = cvs.getContext('2d')! diff --git a/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx b/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx index 708475413..aa150ce81 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx +++ b/packages/tldraw/src/lib/ui/components/NavigationZone/Minimap.tsx @@ -187,10 +187,8 @@ export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) { useQuickReactor( 'minimap render when pagebounds or collaborators changes', () => { - const { - currentPageShapeIds: shapeIdsOnCurrentPage, - currentPageBounds: commonBoundsOfAllShapesOnCurrentPage, - } = editor + const { currentPageShapeIds: shapeIdsOnCurrentPage } = editor + const commonBoundsOfAllShapesOnCurrentPage = editor.getCurrentPageBounds() const viewportPageBounds = editor.getViewportPageBounds() const _dpr = devicePixelRatio.get() // dereference diff --git a/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts b/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts index 50c8cd4cf..fa1bc604f 100644 --- a/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts +++ b/packages/tldraw/src/lib/ui/components/NavigationZone/MinimapManager.ts @@ -123,7 +123,7 @@ export class MinimapManager { let { x: px, y: py } = this.getPagePoint(x, y) if (clampToBounds) { - const shapesPageBounds = this.editor.currentPageBounds + const shapesPageBounds = this.editor.getCurrentPageBounds() const vpPageBounds = viewportPageBounds const minX = (shapesPageBounds?.minX ?? 0) - vpPageBounds.width / 2 diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx index 985223c0b..8ae7e1f4c 100644 --- a/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx +++ b/packages/tldraw/src/lib/ui/components/Toolbar/Toolbar.tsx @@ -31,9 +31,11 @@ export const Toolbar = memo(function Toolbar() { const activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor]) - const geoState = useValue('geo', () => editor.sharedStyles.getAsKnownValue(GeoShapeGeoStyle), [ - editor, - ]) + const geoState = useValue( + 'geo', + () => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle), + [editor] + ) const showEditingTools = !isReadonly diff --git a/packages/tldraw/src/lib/ui/hooks/useActions.tsx b/packages/tldraw/src/lib/ui/hooks/useActions.tsx index bbb1eb62d..a6e850852 100644 --- a/packages/tldraw/src/lib/ui/hooks/useActions.tsx +++ b/packages/tldraw/src/lib/ui/hooks/useActions.tsx @@ -988,7 +988,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) { onSelect(source) { trackEvent('unlock-all', { source }) const updates = [] as TLShapePartial[] - for (const shape of editor.currentPageShapes) { + for (const shape of editor.getCurrentPageShapes()) { if (shape.isLocked) { updates.push({ id: shape.id, type: shape.type, isLocked: false }) } diff --git a/packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts b/packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts index db19ff705..fc089e82a 100644 --- a/packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts +++ b/packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts @@ -37,7 +37,7 @@ export function useKeyboardShortcuts() { // Add hotkeys for actions and tools. // Except those that in SKIP_KBDS! const areShortcutsDisabled = () => - editor.getIsMenuOpen() || editor.getEditingShapeId() !== null || editor.crashingError + editor.getIsMenuOpen() || editor.getEditingShapeId() !== null || editor.getCrashingError() for (const action of Object.values(actions)) { if (!action.kbd) continue diff --git a/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts b/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts index bc35d72a4..4e5a8116b 100644 --- a/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts +++ b/packages/tldraw/src/lib/ui/hooks/useRevelantStyles.ts @@ -20,7 +20,7 @@ export function useRelevantStyles(): { return useValue( 'getRelevantStyles', () => { - const styles = new SharedStyleMap(editor.sharedStyles) + const styles = new SharedStyleMap(editor.getSharedStyles()) const hasShape = editor.getSelectedShapeIds().length > 0 || !!editor.root.getCurrent()?.shapeType @@ -31,7 +31,7 @@ export function useRelevantStyles(): { } if (styles.size === 0 && !hasShape) return null - return { styles, opacity: editor.sharedOpacity } + return { styles, opacity: editor.getSharedOpacity() } }, [editor] ) diff --git a/packages/tldraw/src/lib/utils/buildFromV1Document.ts b/packages/tldraw/src/lib/utils/buildFromV1Document.ts index f128ffd2e..20428cc69 100644 --- a/packages/tldraw/src/lib/utils/buildFromV1Document.ts +++ b/packages/tldraw/src/lib/utils/buildFromV1Document.ts @@ -590,7 +590,7 @@ export function buildFromV1Document(editor: Editor, document: LegacyTldrawDocume editor.selectNone() editor.updateViewportScreenBounds() - const bounds = editor.currentPageBounds + const bounds = editor.getCurrentPageBounds() if (bounds) { editor.zoomToBounds(bounds, 1) } diff --git a/packages/tldraw/src/lib/utils/file.ts b/packages/tldraw/src/lib/utils/file.ts index c43a33a37..711e2eb8b 100644 --- a/packages/tldraw/src/lib/utils/file.ts +++ b/packages/tldraw/src/lib/utils/file.ts @@ -292,7 +292,7 @@ export async function parseAndLoadDocument( editor.updateViewportScreenBounds() editor.updateRenderingBounds() - const bounds = editor.currentPageBounds + const bounds = editor.getCurrentPageBounds() if (bounds) { editor.zoomToBounds(bounds, 1) } diff --git a/packages/tldraw/src/test/Editor.test.tsx b/packages/tldraw/src/test/Editor.test.tsx index 3ff815d67..2ec1e1d7a 100644 --- a/packages/tldraw/src/test/Editor.test.tsx +++ b/packages/tldraw/src/test/Editor.test.tsx @@ -156,16 +156,16 @@ it('Does not create an undo stack item when first clicking on an empty canvas', describe('Editor.sharedOpacity', () => { it('should return the current opacity', () => { - expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 1 }) + expect(editor.getSharedOpacity()).toStrictEqual({ type: 'shared', value: 1 }) editor.setOpacityForSelectedShapes(0.5) editor.setOpacityForNextShapes(0.5) - expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 0.5 }) + expect(editor.getSharedOpacity()).toStrictEqual({ type: 'shared', value: 0.5 }) }) it('should return opacity for a single selected shape', () => { const { A } = editor.createShapesFromJsx() editor.setSelectedShapes([A]) - expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 0.3 }) + expect(editor.getSharedOpacity()).toStrictEqual({ type: 'shared', value: 0.3 }) }) it('should return opacity for multiple selected shapes', () => { @@ -174,7 +174,7 @@ describe('Editor.sharedOpacity', () => { , ]) editor.setSelectedShapes([A, B]) - expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 0.3 }) + expect(editor.getSharedOpacity()).toStrictEqual({ type: 'shared', value: 0.3 }) }) it('should return mixed when multiple selected shapes have different opacity', () => { @@ -183,7 +183,7 @@ describe('Editor.sharedOpacity', () => { , ]) editor.setSelectedShapes([A, B]) - expect(editor.sharedOpacity).toStrictEqual({ type: 'mixed' }) + expect(editor.getSharedOpacity()).toStrictEqual({ type: 'mixed' }) }) it('ignores the opacity of groups and returns the opacity of their children', () => { @@ -193,7 +193,7 @@ describe('Editor.sharedOpacity', () => { , ]) editor.setSelectedShapes([ids.group]) - expect(editor.sharedOpacity).toStrictEqual({ type: 'shared', value: 0.3 }) + expect(editor.getSharedOpacity()).toStrictEqual({ type: 'shared', value: 0.3 }) }) }) diff --git a/packages/tldraw/src/test/EraserTool.test.ts b/packages/tldraw/src/test/EraserTool.test.ts index a0e5fab3a..c9d7c964f 100644 --- a/packages/tldraw/src/test/EraserTool.test.ts +++ b/packages/tldraw/src/test/EraserTool.test.ts @@ -99,7 +99,7 @@ describe('When clicking', () => { // Starts in idle editor.expectToBeIn('eraser.idle') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(0, 0) // near enough to box1 @@ -111,7 +111,7 @@ describe('When clicking', () => { editor.pointerUp() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length // Deletes the erasing shapes expect(editor.getShape(ids.box1)).toBeUndefined() @@ -126,18 +126,18 @@ describe('When clicking', () => { editor.undo() expect(editor.getShape(ids.box1)).toBeDefined() - expect(editor.currentPageShapes.length).toBe(shapesBeforeCount) + expect(editor.getCurrentPageShapes().length).toBe(shapesBeforeCount) editor.redo() expect(editor.getShape(ids.box1)).toBeUndefined() - expect(editor.currentPageShapes.length).toBe(shapesBeforeCount - 1) + expect(editor.getCurrentPageShapes().length).toBe(shapesBeforeCount - 1) }) it('Erases all shapes under the cursor on click', () => { editor.setCurrentTool('eraser') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(99, 99) // next to box1 AND in box2 @@ -148,7 +148,7 @@ describe('When clicking', () => { expect(editor.getShape(ids.box1)).toBeUndefined() expect(editor.getShape(ids.box2)).toBeUndefined() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length expect(shapesAfterCount).toBe(shapesBeforeCount - 2) }) @@ -156,7 +156,7 @@ describe('When clicking', () => { editor.groupShapes([ids.box2, ids.box3], ids.group1) editor.setCurrentTool('eraser') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(350, 350) // in box3 @@ -164,7 +164,7 @@ describe('When clicking', () => { editor.pointerUp() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length expect(editor.getShape(ids.box2)).toBeUndefined() expect(editor.getShape(ids.box3)).toBeUndefined() @@ -177,26 +177,26 @@ describe('When clicking', () => { editor.groupShapes([ids.box2, ids.box3], ids.group1) editor.setCurrentTool('eraser') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(275, 275) // in between box2 AND box3, so over of the new group editor.pointerUp() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length expect(shapesAfterCount).toBe(shapesBeforeCount) }) it('Stops erasing when it reaches a frame when the frame was not was the top-most hovered shape', () => { editor.setCurrentTool('eraser') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(375, 75) // inside of the box4 shape inside of box3 editor.pointerUp() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length expect(shapesAfterCount).toBe(shapesBeforeCount - 1) // Erases the child but does not erase the frame @@ -207,13 +207,13 @@ describe('When clicking', () => { it('Erases a frame only when its clicked on the edge', () => { editor.setCurrentTool('eraser') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(325, 25) // directly on frame1, not its children editor.pointerUp() // without dragging! - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length expect(shapesAfterCount).toBe(shapesBeforeCount) // Erases BOTH the frame and its child @@ -224,13 +224,13 @@ describe('When clicking', () => { it('Only erases masked shapes when pointer is inside the mask', () => { editor.setCurrentTool('eraser') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(425, 125) // inside of box4's bounds, but outside of its parent's mask editor.pointerUp() // without dragging! - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length expect(shapesAfterCount).toBe(shapesBeforeCount) // Erases NEITHER the frame nor its child @@ -242,7 +242,7 @@ describe('When clicking', () => { editor.setCurrentTool('eraser') editor.expectToBeIn('eraser.idle') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(0, 0) // in box1 editor.expectToBeIn('eraser.pointing') @@ -253,7 +253,7 @@ describe('When clicking', () => { editor.pointerUp() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length editor.expectToBeIn('eraser.idle') @@ -267,7 +267,7 @@ describe('When clicking', () => { editor.setCurrentTool('eraser') editor.expectToBeIn('eraser.idle') - const shapesBeforeCount = editor.currentPageShapes.length + const shapesBeforeCount = editor.getCurrentPageShapes().length editor.pointerDown(0, 0) // near to box1 editor.expectToBeIn('eraser.pointing') @@ -278,7 +278,7 @@ describe('When clicking', () => { editor.pointerUp() - const shapesAfterCount = editor.currentPageShapes.length + const shapesAfterCount = editor.getCurrentPageShapes().length editor.expectToBeIn('eraser.idle') @@ -416,7 +416,7 @@ describe('When clicking and dragging', () => { describe('Does not erase hollow shapes on click', () => { it('Returns to select on cancel', () => { editor.selectAll().deleteShapes(editor.getSelectedShapes()) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.createShape({ id: createShapeId(), type: 'geo', @@ -426,7 +426,7 @@ describe('Does not erase hollow shapes on click', () => { editor.pointerDown() expect(editor.getErasingShapeIds()).toEqual([]) editor.pointerUp() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) }) diff --git a/packages/tldraw/src/test/SelectTool.test.ts b/packages/tldraw/src/test/SelectTool.test.ts index e0d99c925..ec890bcfe 100644 --- a/packages/tldraw/src/test/SelectTool.test.ts +++ b/packages/tldraw/src/test/SelectTool.test.ts @@ -45,24 +45,24 @@ describe('TLSelectTool.Translating', () => { editor.pointerDown(150, 150, { target: 'shape', shape }) editor.pointerMove(200, 200) - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.expectShapeToMatch({ id: ids.box1, x: 150, y: 150 }) const t1 = [...editor.currentPageShapeIds.values()] editor.keyDown('Alt') - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) editor.expectShapeToMatch({ id: ids.box1, x: 100, y: 100 }) // const t2 = [...editor.shapeIds.values()] editor.keyUp('Alt') // There's a timer here! We shouldn't end the clone until the timer is done - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) jest.advanceTimersByTime(250) // tick tock // Timer is done! We should have ended the clone. - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.expectToBeIn('select.translating') editor.expectShapeToMatch({ id: ids.box1, x: 150, y: 150 }) @@ -95,7 +95,7 @@ describe('TLSelectTool.Translating', () => { editor.pointerMove(150, 250) editor.pointerUp() const box2Id = editor.getOnlySelectedShape()!.id - expect(editor.currentPageShapes.length).toStrictEqual(2) + expect(editor.getCurrentPageShapes().length).toStrictEqual(2) expect(ids.box1).not.toEqual(box2Id) // shift-alt-drag the original, we shouldn't duplicate the copy too: @@ -103,7 +103,7 @@ describe('TLSelectTool.Translating', () => { expect(editor.getSelectedShapeIds()).toStrictEqual([ids.box1]) editor.pointerMove(250, 150) editor.pointerUp() - expect(editor.currentPageShapes.length).toStrictEqual(3) + expect(editor.getCurrentPageShapes().length).toStrictEqual(3) }) }) @@ -173,7 +173,7 @@ describe('When double clicking a shape', () => { .deleteShapes(editor.getSelectedShapeIds()) .selectNone() .createShapes([{ id: createShapeId(), type: 'geo' }]) - .doubleClick(50, 50, { target: 'shape', shape: editor.currentPageShapes[0] }) + .doubleClick(50, 50, { target: 'shape', shape: editor.getCurrentPageShapes()[0] }) .expectToBeIn('select.editing_shape') }) }) @@ -358,46 +358,46 @@ describe('When editing shapes', () => { it('Double clicking the canvas creates a new text shape', () => { expect(editor.getEditingShapeId()).toBe(null) expect(editor.getSelectedShapeIds().length).toBe(0) - expect(editor.currentPageShapes.length).toBe(5) + expect(editor.getCurrentPageShapes().length).toBe(5) editor.doubleClick(750, 750) - expect(editor.currentPageShapes.length).toBe(6) - expect(editor.currentPageShapes[5].type).toBe('text') + expect(editor.getCurrentPageShapes().length).toBe(6) + expect(editor.getCurrentPageShapes()[5].type).toBe('text') }) it('It deletes an empty text shape when your click away', () => { expect(editor.getEditingShapeId()).toBe(null) expect(editor.getSelectedShapeIds().length).toBe(0) - expect(editor.currentPageShapes.length).toBe(5) + expect(editor.getCurrentPageShapes().length).toBe(5) // Create a new shape by double clicking editor.doubleClick(750, 750) expect(editor.getSelectedShapeIds().length).toBe(1) - expect(editor.currentPageShapes.length).toBe(6) + expect(editor.getCurrentPageShapes().length).toBe(6) const shapeId = editor.getSelectedShapeIds()[0] // Click away editor.click(1000, 1000) expect(editor.getSelectedShapeIds().length).toBe(0) - expect(editor.currentPageShapes.length).toBe(5) + expect(editor.getCurrentPageShapes().length).toBe(5) expect(editor.getShape(shapeId)).toBe(undefined) }) it('It deletes an empty text shape when your click another text shape', () => { expect(editor.getEditingShapeId()).toBe(null) expect(editor.getSelectedShapeIds().length).toBe(0) - expect(editor.currentPageShapes.length).toBe(5) + expect(editor.getCurrentPageShapes().length).toBe(5) // Create a new shape by double clicking editor.doubleClick(750, 750) expect(editor.getSelectedShapeIds().length).toBe(1) - expect(editor.currentPageShapes.length).toBe(6) + expect(editor.getCurrentPageShapes().length).toBe(6) const shapeId = editor.getSelectedShapeIds()[0] // Click another text shape editor.pointerMove(50, 50) editor.click() expect(editor.getSelectedShapeIds().length).toBe(1) - expect(editor.currentPageShapes.length).toBe(5) + expect(editor.getCurrentPageShapes().length).toBe(5) expect(editor.getShape(shapeId)).toBe(undefined) }) diff --git a/packages/tldraw/src/test/arrows-megabus.test.ts b/packages/tldraw/src/test/arrows-megabus.test.ts index 4a7da9dc7..782808951 100644 --- a/packages/tldraw/src/test/arrows-megabus.test.ts +++ b/packages/tldraw/src/test/arrows-megabus.test.ts @@ -36,7 +36,7 @@ describe('Making an arrow on the page', () => { editor.setCurrentTool('arrow') editor.pointerMove(0, 0) editor.pointerDown() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('cleans up the arrow if the user did not start dragging', () => { @@ -44,24 +44,24 @@ describe('Making an arrow on the page', () => { editor.setCurrentTool('arrow') editor.pointerMove(0, 0) editor.click() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) // with double click editor.setCurrentTool('arrow') editor.pointerMove(0, 0) editor.doubleClick() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) // with pointer up editor.setCurrentTool('arrow') editor.pointerDown() editor.pointerUp() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) // did not add it to the history stack editor.undo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) editor.redo() editor.redo() - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) }) it('keeps the arrow if the user dragged', () => { @@ -75,7 +75,7 @@ describe('Making an arrow on the page', () => { editor.setCurrentTool('arrow') editor.pointerDown(0, 0) editor.pointerMove(100, 0) - const arrow1 = editor.currentPageShapes[0] + const arrow1 = editor.getCurrentPageShapes()[0] expect(arrow()).toMatchObject({ type: 'arrow', @@ -170,7 +170,7 @@ describe('When binding an arrow to a shape', () => { }) it('does not bind when the shape is locked', () => { - editor.toggleLock(editor.currentPageShapes) + editor.toggleLock(editor.getCurrentPageShapes()) editor.setCurrentTool('arrow') editor.pointerDown(0, 50) editor.pointerMove(100, 50) @@ -284,25 +284,25 @@ describe('When starting an arrow inside of multiple shapes', () => { it('does not create the arrow immediately', () => { editor.setCurrentTool('arrow') editor.pointerDown(50, 50) - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) expect(arrow()).toBe(null) }) it('does not create a shape if pointer up before drag', () => { editor.setCurrentTool('arrow') editor.pointerDown(50, 50) - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.pointerUp(50, 50) - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) }) it('creates the arrow after a drag, bound to the shape', () => { editor.setCurrentTool('arrow') editor.pointerDown(50, 50) - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) expect(arrow()).toBe(null) editor.pointerMove(55, 50) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toMatchObject({ x: 50, y: 50, @@ -330,10 +330,10 @@ describe('When starting an arrow inside of multiple shapes', () => { it('always creates the arrow with an imprecise start point', () => { editor.setCurrentTool('arrow') editor.pointerDown(20, 20) // upper left - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) expect(arrow()).toBe(null) editor.pointerMove(25, 20) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toMatchObject({ x: 20, y: 20, @@ -362,11 +362,11 @@ describe('When starting an arrow inside of multiple shapes', () => { it('after a pause before drag, creates an arrow with a precise start point', () => { editor.setCurrentTool('arrow') editor.pointerDown(20, 20) // upper left - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) expect(arrow()).toBe(null) jest.advanceTimersByTime(1000) editor.pointerMove(25, 20) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toMatchObject({ x: 20, y: 20, @@ -405,10 +405,10 @@ describe('When starting an arrow inside of multiple shapes', () => { editor.setCurrentTool('arrow') editor.pointerDown(25, 25) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toBe(null) editor.pointerMove(30, 30) - expect(editor.currentPageShapes.length).toBe(3) + expect(editor.getCurrentPageShapes().length).toBe(3) expect(arrow()).toMatchObject({ x: 25, y: 25, @@ -439,10 +439,10 @@ describe('When starting an arrow inside of multiple shapes', () => { editor.setCurrentTool('arrow') editor.pointerDown(25, 25) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toBe(null) editor.pointerMove(30, 30) - expect(editor.currentPageShapes.length).toBe(3) + expect(editor.getCurrentPageShapes().length).toBe(3) expect(arrow()).toMatchObject({ x: 25, y: 25, @@ -474,10 +474,10 @@ describe('When starting an arrow inside of multiple shapes', () => { editor.setCurrentTool('arrow') editor.pointerDown(25, 25) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toBe(null) editor.pointerMove(30, 30) - expect(editor.currentPageShapes.length).toBe(3) + expect(editor.getCurrentPageShapes().length).toBe(3) expect(arrow()).toMatchObject({ props: { start: { @@ -507,10 +507,10 @@ describe('When starting an arrow inside of multiple shapes', () => { editor.setCurrentTool('arrow') editor.pointerDown(25, 25) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toBe(null) editor.pointerMove(30, 30) - expect(editor.currentPageShapes.length).toBe(3) + expect(editor.getCurrentPageShapes().length).toBe(3) expect(arrow()).toMatchObject({ x: 25, y: 25, @@ -543,10 +543,10 @@ describe('When starting an arrow inside of multiple shapes', () => { editor.setCurrentTool('arrow') editor.pointerDown(25, 25) - expect(editor.currentPageShapes.length).toBe(2) + expect(editor.getCurrentPageShapes().length).toBe(2) expect(arrow()).toBe(null) editor.pointerMove(30, 30) - expect(editor.currentPageShapes.length).toBe(3) + expect(editor.getCurrentPageShapes().length).toBe(3) expect(arrow()).toMatchObject({ x: 25, y: 25, diff --git a/packages/tldraw/src/test/cleanup.test.ts b/packages/tldraw/src/test/cleanup.test.ts index 4b2a39fec..1d0d2afca 100644 --- a/packages/tldraw/src/test/cleanup.test.ts +++ b/packages/tldraw/src/test/cleanup.test.ts @@ -23,7 +23,7 @@ beforeEach(() => { }) function arrow() { - return editor.currentPageShapes.find((s) => s.type === 'arrow') as TLArrowShape + return editor.getCurrentPageShapes().find((s) => s.type === 'arrow') as TLArrowShape } describe('restoring bound arrows', () => { diff --git a/packages/tldraw/src/test/commands/allShapesCommonBounds.test.ts b/packages/tldraw/src/test/commands/allShapesCommonBounds.test.ts index fcd647743..93593c1b9 100644 --- a/packages/tldraw/src/test/commands/allShapesCommonBounds.test.ts +++ b/packages/tldraw/src/test/commands/allShapesCommonBounds.test.ts @@ -39,7 +39,7 @@ it('gets common bounds', () => { }, ]) - expect(editor.currentPageBounds).toCloselyMatchObject({ + expect(editor.getCurrentPageBounds()).toCloselyMatchObject({ x: 0, y: 0, h: 600, @@ -62,7 +62,7 @@ it('gets common bounds', () => { }, ]) - expect(editor.currentPageBounds).toCloselyMatchObject({ + expect(editor.getCurrentPageBounds()).toCloselyMatchObject({ x: 0, y: 0, h: 700, @@ -82,7 +82,7 @@ it('gets common bounds', () => { }, ]) - expect(editor.currentPageBounds).toCloselyMatchObject({ + expect(editor.getCurrentPageBounds()).toCloselyMatchObject({ x: 0, y: 0, h: 700, diff --git a/packages/tldraw/src/test/commands/clipboard.test.ts b/packages/tldraw/src/test/commands/clipboard.test.ts index 0df3f05a9..b963b1efc 100644 --- a/packages/tldraw/src/test/commands/clipboard.test.ts +++ b/packages/tldraw/src/test/commands/clipboard.test.ts @@ -68,7 +68,7 @@ describe('When copying and pasting', () => { { id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().copy() await assertClipboardOfCorrectShape(mockClipboard.current) @@ -82,7 +82,7 @@ describe('When copying and pasting', () => { }) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // We should not have changed the original shapes expect(shapesBefore[0]).toMatchObject(shapesAfter[0]) @@ -113,7 +113,7 @@ describe('When copying and pasting', () => { { id: ids.box2, type: 'geo', x: 1900, y: 0, props: { w: 100, h: 100 } }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().copy() await assertClipboardOfCorrectShape(mockClipboard.current) @@ -127,7 +127,7 @@ describe('When copying and pasting', () => { }) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // We should not have changed the original shapes expect(shapesBefore[0]).toMatchObject(shapesAfter[0]) @@ -153,7 +153,7 @@ describe('When copying and pasting', () => { { id: ids.box2, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().copy() await assertClipboardOfCorrectShape(mockClipboard.current) @@ -169,7 +169,7 @@ describe('When copying and pasting', () => { }) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // We should not have changed the original shapes expect(shapesBefore[0]).toMatchObject(shapesAfter[0]) @@ -226,14 +226,14 @@ describe('When copying and pasting', () => { }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().copy() // Test the shape of the clipboard data. await assertClipboardOfCorrectShape(mockClipboard.current) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // We should not have changed the original shapes expect(shapesBefore[0]).toMatchObject(shapesAfter[0]) @@ -285,7 +285,7 @@ describe('When copying and pasting', () => { { id: ids.box2, type: 'geo', x: 300, y: 300, props: { w: 100, h: 100 } }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().cut() await assertClipboardOfCorrectShape(mockClipboard.current) @@ -299,7 +299,7 @@ describe('When copying and pasting', () => { }) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // The new shapes should match the old shapes, except for their id expect(shapesAfter.length).toBe(shapesBefore.length) @@ -315,7 +315,7 @@ describe('When copying and pasting', () => { { id: ids.box2, type: 'geo', x: 1900, y: 0, props: { w: 100, h: 100 } }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().cut() await assertClipboardOfCorrectShape(mockClipboard.current) @@ -329,7 +329,7 @@ describe('When copying and pasting', () => { }) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // The new shapes should match the old shapes, except for their id expect(shapesAfter.length).toBe(shapesBefore.length) @@ -346,7 +346,7 @@ describe('When copying and pasting', () => { { id: ids.box2, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().cut() await assertClipboardOfCorrectShape(mockClipboard.current) @@ -362,7 +362,7 @@ describe('When copying and pasting', () => { }) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // The new shapes should match the old shapes, except for the should be positioned on the new viewport center. expect(shapesAfter.length).toBe(shapesBefore.length) @@ -408,7 +408,7 @@ describe('When copying and pasting', () => { }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().cut() @@ -416,7 +416,7 @@ describe('When copying and pasting', () => { await assertClipboardOfCorrectShape(mockClipboard.current) editor.paste() - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // The new shapes should match the old shapes, except for their id and the arrow's bindings! expect(shapesAfter.length).toBe(shapesBefore.length) @@ -450,7 +450,7 @@ describe('When copying and pasting', () => { // Move the group .updateShapes([ { - id: editor.currentPageShapes[2].id, + id: editor.getCurrentPageShapes()[2].id, type: 'group', x: 400, y: 400, @@ -464,12 +464,12 @@ describe('When copying and pasting', () => { await assertClipboardOfCorrectShape(mockClipboard.current) // Paste the shape - expect(editor.currentPageShapes.length).toEqual(3) + expect(editor.getCurrentPageShapes().length).toEqual(3) editor.paste() - expect(editor.currentPageShapes.length).toEqual(4) + expect(editor.getCurrentPageShapes().length).toEqual(4) // Check if the position is correct - const pastedShape = editor.currentPageShapes[editor.currentPageShapes.length - 1] + const pastedShape = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1] const pastedPoint = { x: pastedShape.x, y: pastedShape.y } expect(pastedPoint).toMatchObject({ x: 150, y: 150 }) // center of group diff --git a/packages/tldraw/src/test/commands/deleteShapes.test.ts b/packages/tldraw/src/test/commands/deleteShapes.test.ts index e528ca7e6..00c67593c 100644 --- a/packages/tldraw/src/test/commands/deleteShapes.test.ts +++ b/packages/tldraw/src/test/commands/deleteShapes.test.ts @@ -92,20 +92,20 @@ describe('When deleting arrows', () => { editor.select(ids.arrow1) editor.mark('before deleting') // @ts-expect-error - expect(editor._arrowBindingsIndex.get()[ids.box1]).not.toBeUndefined() + expect(editor._getArrowBindingsIndex().get()[ids.box1]).not.toBeUndefined() // @ts-expect-error - expect(editor._arrowBindingsIndex.get()[ids.box2]).not.toBeUndefined() + expect(editor._getArrowBindingsIndex().get()[ids.box2]).not.toBeUndefined() editor.deleteShapes(editor.getSelectedShapeIds()) // delete the selected shapes // @ts-expect-error - expect(editor._arrowBindingsIndex.get()[ids.box1]).toBeUndefined() + expect(editor._getArrowBindingsIndex().get()[ids.box1]).toBeUndefined() // @ts-expect-error - expect(editor._arrowBindingsIndex.get()[ids.box2]).toBeUndefined() + expect(editor._getArrowBindingsIndex().get()[ids.box2]).toBeUndefined() editor.undo() // @ts-expect-error - expect(editor._arrowBindingsIndex.get()[ids.box1]).not.toBeUndefined() + expect(editor._getArrowBindingsIndex().get()[ids.box1]).not.toBeUndefined() // @ts-expect-error - expect(editor._arrowBindingsIndex.get()[ids.box2]).not.toBeUndefined() + expect(editor._getArrowBindingsIndex().get()[ids.box2]).not.toBeUndefined() }) }) diff --git a/packages/tldraw/src/test/commands/duplicatePage.test.ts b/packages/tldraw/src/test/commands/duplicatePage.test.ts index ad0a1ddc7..1c9c70f97 100644 --- a/packages/tldraw/src/test/commands/duplicatePage.test.ts +++ b/packages/tldraw/src/test/commands/duplicatePage.test.ts @@ -17,7 +17,7 @@ it('Duplicates a page', () => { const oldPageId = editor.currentPageId const camera = { ...editor.getCamera() } const n = editor.getPages().length - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) const existingIds = new Set(editor.getPages().map((s) => s.id)) @@ -31,7 +31,7 @@ it('Duplicates a page', () => { expect(editor.currentPageId).toBe(newPageId) // Duplicates the shapes - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) // Also duplicates the camera expect(editor.getCamera().x).toBe(camera.x) diff --git a/packages/tldraw/src/test/commands/lockShapes.test.ts b/packages/tldraw/src/test/commands/lockShapes.test.ts index df78a366e..9bc7c655c 100644 --- a/packages/tldraw/src/test/commands/lockShapes.test.ts +++ b/packages/tldraw/src/test/commands/lockShapes.test.ts @@ -92,9 +92,9 @@ describe('Locking', () => { describe('Locked shapes', () => { it('Cannot be deleted', () => { - const numberOfShapesBefore = editor.currentPageShapes.length + const numberOfShapesBefore = editor.getCurrentPageShapes().length editor.deleteShapes([ids.lockedShapeA]) - expect(editor.currentPageShapes.length).toBe(numberOfShapesBefore) + expect(editor.getCurrentPageShapes().length).toBe(numberOfShapesBefore) }) it('Cannot be changed', () => { @@ -133,20 +133,20 @@ describe('Locked shapes', () => { it('Cannot be edited', () => { const shape = editor.getShape(ids.lockedShapeA)! - const shapeCount = editor.currentPageShapes.length + const shapeCount = editor.getCurrentPageShapes().length // We create a new shape and we edit that one editor.doubleClick(10, 10, { target: 'shape', shape }).expectToBeIn('select.editing_shape') - expect(editor.currentPageShapes.length).toBe(shapeCount + 1) + expect(editor.getCurrentPageShapes().length).toBe(shapeCount + 1) expect(editor.getSelectedShapeIds()).not.toContain(shape.id) }) it('Cannot be grouped', () => { - const shapeCount = editor.currentPageShapes.length + const shapeCount = editor.getCurrentPageShapes().length const parentBefore = editor.getShape(ids.lockedShapeA)!.parentId editor.groupShapes([ids.lockedShapeA, ids.unlockedShapeA, ids.unlockedShapeB]) - expect(editor.currentPageShapes.length).toBe(shapeCount + 1) + expect(editor.getCurrentPageShapes().length).toBe(shapeCount + 1) const parentAfter = editor.getShape(ids.lockedShapeA)!.parentId expect(parentAfter).toBe(parentBefore) diff --git a/packages/tldraw/src/test/commands/packShapes.test.ts b/packages/tldraw/src/test/commands/packShapes.test.ts index 57a7457d4..a851be3fc 100644 --- a/packages/tldraw/src/test/commands/packShapes.test.ts +++ b/packages/tldraw/src/test/commands/packShapes.test.ts @@ -44,9 +44,9 @@ describe('editor.packShapes', () => { const centerBefore = editor.getSelectionRotatedPageBounds()!.center.clone() editor.packShapes(editor.getSelectedShapeIds(), 16) jest.advanceTimersByTime(1000) - expect(editor.currentPageShapes.map((s) => ({ ...s, parentId: 'wahtever' }))).toMatchSnapshot( - 'packed shapes' - ) + expect( + editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' })) + ).toMatchSnapshot('packed shapes') const centerAfter = editor.getSelectionRotatedPageBounds()!.center.clone() expect(centerBefore).toMatchObject(centerAfter) }) @@ -55,8 +55,8 @@ describe('editor.packShapes', () => { editor.updateShapes([{ id: ids.boxA, type: 'geo', rotation: Math.PI }]) editor.selectAll().packShapes(editor.getSelectedShapeIds(), 16) jest.advanceTimersByTime(1000) - expect(editor.currentPageShapes.map((s) => ({ ...s, parentId: 'wahtever' }))).toMatchSnapshot( - 'packed shapes' - ) + expect( + editor.getCurrentPageShapes().map((s) => ({ ...s, parentId: 'wahtever' })) + ).toMatchSnapshot('packed shapes') }) }) diff --git a/packages/tldraw/src/test/commands/penmode.test.ts b/packages/tldraw/src/test/commands/penmode.test.ts index fb0d397ab..36daec455 100644 --- a/packages/tldraw/src/test/commands/penmode.test.ts +++ b/packages/tldraw/src/test/commands/penmode.test.ts @@ -23,5 +23,5 @@ it('ignores touch events while in pen mode', async () => { target: 'canvas', }) - expect(editor.currentPageShapes.length).toBe(0) + expect(editor.getCurrentPageShapes().length).toBe(0) }) diff --git a/packages/tldraw/src/test/commands/reorderShapes.test.ts b/packages/tldraw/src/test/commands/reorderShapes.test.ts index c53f1b615..50c9c82f9 100644 --- a/packages/tldraw/src/test/commands/reorderShapes.test.ts +++ b/packages/tldraw/src/test/commands/reorderShapes.test.ts @@ -4,7 +4,7 @@ import { TestEditor } from '../TestEditor' let editor: TestEditor function expectShapesInOrder(editor: TestEditor, ...ids: TLShapeId[]) { - expect(editor.currentPageShapesSorted.map((shape) => shape.id)).toMatchObject(ids) + expect(editor.getCurrentPageShapesSorted().map((shape) => shape.id)).toMatchObject(ids) } function getSiblingBelow(editor: TestEditor, id: TLShapeId) { @@ -68,7 +68,7 @@ beforeEach(() => { describe('When running zindex tests', () => { it('Correctly initializes indices', () => { - expect(editor.currentPageShapesSorted.map((shape) => shape.index)).toMatchObject([ + expect(editor.getCurrentPageShapesSorted().map((shape) => shape.index)).toMatchObject([ 'a1', 'a2', 'a3', diff --git a/packages/tldraw/src/test/cropping.test.ts b/packages/tldraw/src/test/cropping.test.ts index b9687a08a..7ede87b89 100644 --- a/packages/tldraw/src/test/cropping.test.ts +++ b/packages/tldraw/src/test/cropping.test.ts @@ -92,27 +92,27 @@ describe('When in the select.idle state', () => { editor.expectToBeIn('select.idle') expect(editor.getSelectedShapeIds()).toMatchObject([ids.boxA]) - expect(editor.croppingShapeId).toBe(null) + expect(editor.getCroppingShapeId()).toBe(null) editor.doubleClick(550, 550, ids.imageB) editor.expectToBeIn('select.crop.idle') expect(editor.getSelectedShapeIds()).toMatchObject([ids.imageB]) - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) editor.undo() // first selection should have been a mark editor.expectToBeIn('select.idle') expect(editor.getSelectedShapeIds()).toMatchObject([ids.imageB]) - expect(editor.croppingShapeId).toBe(null) + expect(editor.getCroppingShapeId()).toBe(null) editor.undo() // back to start editor.expectToBeIn('select.idle') expect(editor.getSelectedShapeIds()).toMatchObject([ids.boxA]) - expect(editor.croppingShapeId).toBe(null) + expect(editor.getCroppingShapeId()).toBe(null) editor .redo() // select again @@ -120,7 +120,7 @@ describe('When in the select.idle state', () => { editor.expectToBeIn('select.crop.idle') expect(editor.getSelectedShapeIds()).toMatchObject([ids.imageB]) - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) }) it('when ONLY ONE image is selected double clicking a selection handle should transition to select.crop', () => { @@ -136,7 +136,7 @@ describe('When in the select.idle state', () => { }) .expectToBeIn('select.idle') - expect(editor.croppingShapeId).toBe(null) + expect(editor.getCroppingShapeId()).toBe(null) // edge (two shapes) editor @@ -147,7 +147,7 @@ describe('When in the select.idle state', () => { }) .expectToBeIn('select.idle') - expect(editor.croppingShapeId).toBe(null) + expect(editor.getCroppingShapeId()).toBe(null) // corner (one shape) editor @@ -160,7 +160,7 @@ describe('When in the select.idle state', () => { }) .expectToBeIn('select.crop.idle') - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) // edge (one shape) editor @@ -172,7 +172,7 @@ describe('When in the select.idle state', () => { }) .expectToBeIn('select.crop.idle') - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) }) it('when only an image is selected pressing enter should transition to select.crop', () => { @@ -192,7 +192,7 @@ describe('When in the select.idle state', () => { .keyUp('Enter') .expectToBeIn('select.crop.idle') - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) }) it('when only an image is selected control-pointing a selection handle should transition to select.pointing_crop_handle', () => { @@ -295,7 +295,7 @@ describe('When in the crop.idle state', () => { .pointerDown(500, 600, { target: 'shape', shape: editor.getShape(ids.imageB) }) .expectToBeIn('select.crop.pointing_crop') - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) expect(editor.getSelectedShapeIds()).toMatchObject([ids.imageB]) }) @@ -307,7 +307,7 @@ describe('When in the crop.idle state', () => { .pointerDown(100, 100, { target: 'shape', shape: editor.getShape(ids.imageA) }) .expectToBeIn('select.crop.pointing_crop') - expect(editor.croppingShapeId).toBe(ids.imageA) + expect(editor.getCroppingShapeId()).toBe(ids.imageA) expect(editor.getSelectedShapeIds()).toMatchObject([ids.imageA]) }) @@ -545,7 +545,7 @@ describe('When in the select.pointing_crop_handle state', () => { .cancel() .expectToBeIn('select.idle') - expect(editor.croppingShapeId).toBe(null) + expect(editor.getCroppingShapeId()).toBe(null) }) it('when entered from select.crop.idle, pressing escape / cancel should return to select.crop.idle and preserve croppingShapeId', () => { @@ -560,7 +560,7 @@ describe('When in the select.pointing_crop_handle state', () => { .cancel() .expectToBeIn('select.crop.idle') - expect(editor.croppingShapeId).toBe(ids.imageB) + expect(editor.getCroppingShapeId()).toBe(ids.imageB) }) }) diff --git a/packages/tldraw/src/test/drawing.test.ts b/packages/tldraw/src/test/drawing.test.ts index f2b2d5140..8cd9a48e2 100644 --- a/packages/tldraw/src/test/drawing.test.ts +++ b/packages/tldraw/src/test/drawing.test.ts @@ -27,9 +27,9 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerUp() .expectToBeIn(`${toolType}.idle`) - expect(editor.currentPageShapes).toHaveLength(1) + expect(editor.getCurrentPageShapes()).toHaveLength(1) - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.type).toBe(toolType) expect(shape.props.segments.length).toBe(1) @@ -46,9 +46,9 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerUp() .expectToBeIn(`${toolType}.idle`) - expect(editor.currentPageShapes).toHaveLength(1) + expect(editor.getCurrentPageShapes()).toHaveLength(1) - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.type).toBe(toolType) expect(shape.props.segments.length).toBe(1) @@ -59,7 +59,7 @@ for (const toolType of ['draw', 'highlight'] as const) { it('Creates a free draw line when shift is not held', () => { editor.setCurrentTool(toolType).pointerDown(10, 10).pointerMove(20, 20) - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.props.segments.length).toBe(1) const segment = shape.props.segments[0] @@ -69,7 +69,7 @@ for (const toolType of ['draw', 'highlight'] as const) { it('Creates a straight line when shift is held', () => { editor.setCurrentTool(toolType).keyDown('Shift').pointerDown(10, 10).pointerMove(20, 20) - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.props.segments.length).toBe(1) const segment = shape.props.segments[0] @@ -90,7 +90,7 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerMove(40, 40) .pointerUp() - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.props.segments.length).toBe(3) expect(shape.props.segments[0].type).toBe('free') @@ -110,7 +110,7 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerMove(40, 40) .pointerUp() - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.props.segments.length).toBe(3) expect(shape.props.segments[0].type).toBe('straight') @@ -126,14 +126,14 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerUp() .pointerDown(20, 20) - const shape1 = editor.currentPageShapes[0] as DrawableShape + const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape1.props.segments.length).toBe(2) expect(shape1.props.segments[0].type).toBe('straight') expect(shape1.props.segments[1].type).toBe('straight') editor.pointerUp().pointerDown(30, 30).pointerUp() - const shape2 = editor.currentPageShapes[0] as DrawableShape + const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape2.props.segments.length).toBe(3) expect(shape2.props.segments[2].type).toBe('straight') }) @@ -149,13 +149,13 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerDown(20, 20) .pointerMove(30, 30) - expect(editor.currentPageShapes).toHaveLength(2) + expect(editor.getCurrentPageShapes()).toHaveLength(2) - const shape1 = editor.currentPageShapes[0] as DrawableShape + const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape1.props.segments.length).toBe(1) expect(shape1.props.segments[0].type).toBe('free') - const shape2 = editor.currentPageShapes[1] as DrawableShape + const shape2 = editor.getCurrentPageShapes()[1] as DrawableShape expect(shape2.props.segments.length).toBe(1) expect(shape2.props.segments[0].type).toBe('straight') }) @@ -172,7 +172,7 @@ for (const toolType of ['draw', 'highlight'] as const) { editor.setCurrentTool(toolType).keyDown('Shift').pointerDown(0, 0).pointerMove(x, y) - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape const segment = shape.props.segments[0] expect(segment.points[1].x).toBeCloseTo(snappedX) expect(segment.points[1].y).toBeCloseTo(snappedY) @@ -186,7 +186,7 @@ for (const toolType of ['draw', 'highlight'] as const) { editor.setCurrentTool(toolType).keyDown('Meta').pointerDown(0, 0).pointerMove(x, y) - const shape = editor.currentPageShapes[0] as DrawableShape + const shape = editor.getCurrentPageShapes()[0] as DrawableShape const segment = shape.props.segments[0] expect(segment.points[1].x).toBeCloseTo(x) expect(segment.points[1].y).toBeCloseTo(y) @@ -205,13 +205,13 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerDown(10, 0) .pointerMove(1, 0) - const shape1 = editor.currentPageShapes[0] as DrawableShape + const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape const segment1 = last(shape1.props.segments)! const point1 = last(segment1.points)! expect(point1.x).toBe(1) editor.keyDown('Meta') - const shape2 = editor.currentPageShapes[0] as DrawableShape + const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape const segment2 = last(shape2.props.segments)! const point2 = last(segment2.points)! expect(point2.x).toBe(0) @@ -230,13 +230,13 @@ for (const toolType of ['draw', 'highlight'] as const) { .pointerDown(10, 5) .pointerMove(1, 5) - const shape1 = editor.currentPageShapes[0] as DrawableShape + const shape1 = editor.getCurrentPageShapes()[0] as DrawableShape const segment1 = last(shape1.props.segments)! const point1 = last(segment1.points)! expect(point1.x).toBe(1) editor.keyDown('Meta') - const shape2 = editor.currentPageShapes[0] as DrawableShape + const shape2 = editor.getCurrentPageShapes()[0] as DrawableShape const segment2 = last(shape2.props.segments)! const point2 = last(segment2.points)! expect(point2.x).toBe(0) @@ -244,18 +244,18 @@ for (const toolType of ['draw', 'highlight'] as const) { it('Deletes very short lines on interrupt', () => { editor.setCurrentTool(toolType).pointerDown(0, 0).pointerMove(0.1, 0.1).interrupt() - expect(editor.currentPageShapes).toHaveLength(0) + expect(editor.getCurrentPageShapes()).toHaveLength(0) }) it('Does not delete longer lines on interrupt', () => { editor.setCurrentTool(toolType).pointerDown(0, 0).pointerMove(5, 5).interrupt() - expect(editor.currentPageShapes).toHaveLength(1) + expect(editor.getCurrentPageShapes()).toHaveLength(1) }) it('Completes on cancel', () => { editor.setCurrentTool(toolType).pointerDown(0, 0).pointerMove(5, 5).cancel() - expect(editor.currentPageShapes).toHaveLength(1) - const shape = editor.currentPageShapes[0] as DrawableShape + expect(editor.getCurrentPageShapes()).toHaveLength(1) + const shape = editor.getCurrentPageShapes()[0] as DrawableShape expect(shape.props.segments.length).toBe(1) }) }) diff --git a/packages/tldraw/src/test/duplicate.test.ts b/packages/tldraw/src/test/duplicate.test.ts index 898e50fcc..2e1432edc 100644 --- a/packages/tldraw/src/test/duplicate.test.ts +++ b/packages/tldraw/src/test/duplicate.test.ts @@ -45,11 +45,11 @@ it('creates new bindings for arrows when pasting', async () => { }, ]) - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() editor.selectAll().duplicateShapes(editor.getSelectedShapeIds()) - const shapesAfter = editor.currentPageShapes + const shapesAfter = editor.getCurrentPageShapes() // We should not have changed the original shapes expect(shapesBefore[0]).toMatchObject(shapesAfter[0]) @@ -187,7 +187,8 @@ describe('When duplicating shapes that include arrows', () => { .deleteShapes(editor.getSelectedShapeIds()) .createShapes(shapes) .select( - ...editor.currentPageShapes + ...editor + .getCurrentPageShapes() .filter((s) => editor.isShapeOfType(s, 'arrow')) .map((s) => s.id) ) diff --git a/packages/tldraw/src/test/frames.test.ts b/packages/tldraw/src/test/frames.test.ts index 49f9693c6..6eca54384 100644 --- a/packages/tldraw/src/test/frames.test.ts +++ b/packages/tldraw/src/test/frames.test.ts @@ -44,7 +44,7 @@ describe('creating frames', () => { editor.setCurrentTool('frame') editor.pointerDown(100, 100).cancel().pointerUp(100, 100) expect(editor.getOnlySelectedShape()?.type).toBe(undefined) - expect(editor.currentPageShapes).toHaveLength(0) + expect(editor.getCurrentPageShapes()).toHaveLength(0) }) it('can be canceled while dragging', () => { editor.setCurrentTool('frame') @@ -53,19 +53,19 @@ describe('creating frames', () => { editor.cancel() editor.pointerUp() expect(editor.getOnlySelectedShape()?.type).toBe(undefined) - expect(editor.currentPageShapes).toHaveLength(0) + expect(editor.getCurrentPageShapes()).toHaveLength(0) }) it('can be undone', () => { editor.setCurrentTool('frame') editor.pointerDown(100, 100).pointerMove(200, 200).pointerUp(200, 200) expect(editor.getOnlySelectedShape()?.type).toBe('frame') - expect(editor.currentPageShapes).toHaveLength(1) + expect(editor.getCurrentPageShapes()).toHaveLength(1) editor.undo() expect(editor.getOnlySelectedShape()?.type).toBe(undefined) - expect(editor.currentPageShapes).toHaveLength(0) + expect(editor.getCurrentPageShapes()).toHaveLength(0) }) it('can be done inside other frames', () => { editor.setCurrentTool('frame') @@ -76,7 +76,7 @@ describe('creating frames', () => { editor.setCurrentTool('frame') editor.pointerDown(125, 125).pointerMove(175, 175).pointerUp(175, 175) - expect(editor.currentPageShapes).toHaveLength(2) + expect(editor.getCurrentPageShapes()).toHaveLength(2) expect(editor.getOnlySelectedShape()?.parentId).toEqual(frameAId) @@ -98,7 +98,7 @@ describe('creating frames', () => { editor.setCurrentTool('frame') editor.pointerDown(125, 125).pointerMove(175, 175).pointerUp(175, 175) - expect(editor.currentPageShapes).toHaveLength(2) + expect(editor.getCurrentPageShapes()).toHaveLength(2) expect(editor.getOnlySelectedShape()?.parentId).toEqual(frameAId) @@ -146,7 +146,7 @@ describe('creating frames', () => { describe('frame shapes', () => { it('can receive new children when shapes are drawn on top and the frame is rotated', () => { // We should be starting from an empty canvas - expect(editor.currentPageShapes).toHaveLength(0) + expect(editor.getCurrentPageShapes()).toHaveLength(0) const frameId = createShapeId('frame') @@ -167,7 +167,7 @@ describe('frame shapes', () => { .pointerUp() // The two shapes should have been created - expect(editor.currentPageShapes).toHaveLength(3) + expect(editor.getCurrentPageShapes()).toHaveLength(3) // The shapes should be the child of the frame const childIds = editor.getSortedChildIdsForParent(frameId) diff --git a/packages/tldraw/src/test/groups.test.ts b/packages/tldraw/src/test/groups.test.ts index 3486004ff..375b3111c 100644 --- a/packages/tldraw/src/test/groups.test.ts +++ b/packages/tldraw/src/test/groups.test.ts @@ -82,7 +82,7 @@ afterEach(() => { editor?.dispose() }) -const getAllShapes = () => editor.currentPageShapes +const getAllShapes = () => editor.getCurrentPageShapes() const onlySelectedId = () => { expect(editor.getSelectedShapeIds()).toHaveLength(1) @@ -528,7 +528,8 @@ describe('ungrouping shapes', () => { editor.groupShapes(editor.getSelectedShapeIds()) editor.ungroupShapes(editor.getSelectedShapeIds()) - const sortedShapesOnCurrentPage = editor.currentPageShapes + const sortedShapesOnCurrentPage = editor + .getCurrentPageShapes() .sort(sortByIndex) .map((shape) => shape.id) expect(sortedShapesOnCurrentPage.length).toBe(4) @@ -553,7 +554,8 @@ describe('ungrouping shapes', () => { editor.groupShapes(editor.getSelectedShapeIds()) editor.ungroupShapes(editor.getSelectedShapeIds()) - const sortedShapesOnCurrentPage = editor.currentPageShapes + const sortedShapesOnCurrentPage = editor + .getCurrentPageShapes() .sort(sortByIndex) .map((shape) => shape.id) expect(sortedShapesOnCurrentPage.length).toBe(4) diff --git a/packages/tldraw/src/test/paste.test.ts b/packages/tldraw/src/test/paste.test.ts index a31b9a51d..b0a6f5ae1 100644 --- a/packages/tldraw/src/test/paste.test.ts +++ b/packages/tldraw/src/test/paste.test.ts @@ -87,7 +87,7 @@ beforeEach(() => { }) function getShapes() { - const arr = editor.currentPageShapes as any[] + const arr = editor.getCurrentPageShapes() as any[] const results = { old: {}, new: {} } as { old: Record @@ -110,7 +110,7 @@ it('Gets pasted shapes correctly', () => { editor.selectNone() let shapes = getShapes() - expect(editor.currentPageShapesSorted.map((m) => m.id)).toStrictEqual([ + expect(editor.getCurrentPageShapesSorted().map((m) => m.id)).toStrictEqual([ shapes.old.frame1.id, shapes.old.frame2.id, shapes.old.frame3.id, @@ -124,7 +124,7 @@ it('Gets pasted shapes correctly', () => { shapes = getShapes() - expect(editor.currentPageShapesSorted.map((m) => m.id)).toStrictEqual([ + expect(editor.getCurrentPageShapesSorted().map((m) => m.id)).toStrictEqual([ shapes.old.frame1.id, shapes.old.frame2.id, shapes.old.frame3.id, @@ -174,7 +174,7 @@ describe('When pasting', () => { expect(shapes.new.box1?.parentId).toBe(editor.currentPageId) expect(shapes.new.box2?.parentId).toBe(editor.currentPageId) - expect(editor.currentPageShapesSorted.map((m) => m.id)).toStrictEqual([ + expect(editor.getCurrentPageShapesSorted().map((m) => m.id)).toStrictEqual([ shapes.old.frame1.id, shapes.old.frame2.id, shapes.old.frame3.id, @@ -424,11 +424,11 @@ describe('When pasting into frames...', () => { // Copy box 1 (should be out of viewport) editor.select(ids.box1).copy() - const shapesBefore = editor.currentPageShapes + const shapesBefore = editor.getCurrentPageShapes() // Paste it editor.paste() - const newShape = editor.currentPageShapes.find((s) => !shapesBefore.includes(s))! + const newShape = editor.getCurrentPageShapes().find((s) => !shapesBefore.includes(s))! // it should be on the canvas, NOT a child of frame2 expect(newShape.parentId).not.toBe(ids.frame2) diff --git a/packages/tldraw/src/test/selection-omnibus.test.ts b/packages/tldraw/src/test/selection-omnibus.test.ts index 54db27cb1..8388df610 100644 --- a/packages/tldraw/src/test/selection-omnibus.test.ts +++ b/packages/tldraw/src/test/selection-omnibus.test.ts @@ -33,7 +33,7 @@ it('lists a sorted shapes array correctly', () => { editor.sendBackward([ids.frame1]) editor.sendBackward([ids.frame1]) - expect(editor.currentPageShapesSorted.map((s) => s.id)).toEqual([ + expect(editor.getCurrentPageShapesSorted().map((s) => s.id)).toEqual([ ids.box1, ids.frame1, ids.box4, @@ -430,8 +430,8 @@ describe('When a shape is behind a frame', () => { it('does not select the shape when clicked inside', () => { editor.sendToBack([ids.box1]) // send it to back! - expect(editor.currentPageShapesSorted.map((s) => s.index)).toEqual(['a1', 'a2']) - expect(editor.currentPageShapesSorted.map((s) => s.id)).toEqual([ids.box1, ids.frame1]) + expect(editor.getCurrentPageShapesSorted().map((s) => s.index)).toEqual(['a1', 'a2']) + expect(editor.getCurrentPageShapesSorted().map((s) => s.id)).toEqual([ids.box1, ids.frame1]) editor.pointerMove(50, 50) expect(editor.getHoveredShapeId()).toBe(null) @@ -819,7 +819,7 @@ describe('When shapes are overlapping', () => { editor.bringToFront([ids.box5]) editor.bringToFront([ids.box2]) - expect(editor.currentPageShapesSorted.map((s) => s.id)).toEqual([ + expect(editor.getCurrentPageShapesSorted().map((s) => s.id)).toEqual([ ids.box4, // filled ids.box1, // hollow ids.box3, // hollow @@ -838,7 +838,7 @@ describe('When shapes are overlapping', () => { }) it('selects the hollow above the filled shapes when in margin', () => { - expect(editor.currentPageShapesSorted.map((s) => s.id)).toEqual([ + expect(editor.getCurrentPageShapesSorted().map((s) => s.id)).toEqual([ ids.box4, ids.box1, ids.box3, @@ -1643,7 +1643,7 @@ describe('scribble brushes to add to the selection', () => { describe('creating text on double click', () => { it('creates text on double click', () => { editor.doubleClick() - expect(editor.currentPageShapes.length).toBe(1) + expect(editor.getCurrentPageShapes().length).toBe(1) editor.pointerMove(0, 100) editor.click() }) diff --git a/packages/tldraw/src/test/styles2.test.tsx b/packages/tldraw/src/test/styles2.test.tsx index 0a0d0a90e..a90f06722 100644 --- a/packages/tldraw/src/test/styles2.test.tsx +++ b/packages/tldraw/src/test/styles2.test.tsx @@ -29,12 +29,12 @@ beforeEach(() => { describe('Editor.styles', () => { it('should return empty if nothing is selected', () => { editor.selectNone() - expect(asPlainObject(editor.sharedStyles)).toStrictEqual({}) + expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({}) }) it('should return styles for a single shape', () => { editor.select(defaultShapesIds.box1) - expect(asPlainObject(editor.sharedStyles)).toStrictEqual({ + expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({ 'tldraw:horizontalAlign': { type: 'shared', value: 'middle' }, 'tldraw:labelColor': { type: 'shared', value: 'black' }, 'tldraw:color': { type: 'shared', value: 'black' }, @@ -49,7 +49,7 @@ describe('Editor.styles', () => { it('should return styles for two matching shapes', () => { editor.select(defaultShapesIds.box1, defaultShapesIds.box2) - expect(asPlainObject(editor.sharedStyles)).toStrictEqual({ + expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({ 'tldraw:horizontalAlign': { type: 'shared', value: 'middle' }, 'tldraw:labelColor': { type: 'shared', value: 'black' }, 'tldraw:color': { type: 'shared', value: 'black' }, @@ -73,7 +73,7 @@ describe('Editor.styles', () => { editor.select(defaultShapesIds.box1, defaultShapesIds.box2) - expect(asPlainObject(editor.sharedStyles)).toStrictEqual({ + expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({ 'tldraw:horizontalAlign': { type: 'shared', value: 'middle' }, 'tldraw:labelColor': { type: 'shared', value: 'black' }, 'tldraw:color': { type: 'mixed' }, @@ -113,7 +113,7 @@ describe('Editor.styles', () => { editor.selectAll() - expect(asPlainObject(editor.sharedStyles)).toStrictEqual({ + expect(asPlainObject(editor.getSharedStyles())).toStrictEqual({ 'tldraw:color': { type: 'mixed' }, 'tldraw:dash': { type: 'mixed' }, 'tldraw:fill': { type: 'mixed' }, @@ -128,7 +128,7 @@ describe('Editor.styles', () => { it('should return the same styles object if nothing relevant changes', () => { editor.select(defaultShapesIds.box1, defaultShapesIds.box2) - const initialStyles = editor.sharedStyles + const initialStyles = editor.getSharedStyles() // update position of one of the shapes - not a style prop, so maps to same styles editor.updateShapes([ @@ -140,7 +140,7 @@ describe('Editor.styles', () => { }, ]) - expect(editor.sharedStyles).toBe(initialStyles) + expect(editor.getSharedStyles()).toBe(initialStyles) }) }) diff --git a/packages/tldraw/src/test/translating.test.ts b/packages/tldraw/src/test/translating.test.ts index a654b7196..77d70a91a 100644 --- a/packages/tldraw/src/test/translating.test.ts +++ b/packages/tldraw/src/test/translating.test.ts @@ -277,28 +277,28 @@ describe('When cloning...', () => { it('Clones twice', () => { const groupId = createShapeId('g') editor.groupShapes([ids.box1, ids.box2], groupId) - const count1 = editor.currentPageShapes.length + const count1 = editor.getCurrentPageShapes().length editor.pointerDown(50, 50, { shape: editor.getShape(groupId)!, target: 'shape' }) editor.expectToBeIn('select.pointing_shape') editor.pointerMove(199, 199) editor.expectToBeIn('select.translating') - expect(editor.currentPageShapes.length).toBe(count1) // 2 new box and group + expect(editor.getCurrentPageShapes().length).toBe(count1) // 2 new box and group editor.keyDown('Alt') editor.expectToBeIn('select.translating') - expect(editor.currentPageShapes.length).toBe(count1 + 3) // 2 new box and group + expect(editor.getCurrentPageShapes().length).toBe(count1 + 3) // 2 new box and group editor.keyUp('Alt') jest.advanceTimersByTime(500) - expect(editor.currentPageShapes.length).toBe(count1) // 2 new box and group + expect(editor.getCurrentPageShapes().length).toBe(count1) // 2 new box and group editor.keyDown('Alt') - expect(editor.currentPageShapes.length).toBe(count1 + 3) // 2 new box and group + expect(editor.getCurrentPageShapes().length).toBe(count1 + 3) // 2 new box and group }) }) @@ -1649,9 +1649,9 @@ describe('translating a shape with a bound shape', () => { props: { start: { type: 'binding' }, end: { type: 'binding' } }, }) - const newArrow = editor.currentPageShapes.find( - (s) => editor.isShapeOfType(s, 'arrow') && s.id !== arrow1 - ) + const newArrow = editor + .getCurrentPageShapes() + .find((s) => editor.isShapeOfType(s, 'arrow') && s.id !== arrow1) expect(newArrow).toMatchObject({ props: { start: { type: 'binding' }, end: { type: 'point' } }, }) @@ -1735,12 +1735,12 @@ describe('When dragging a shape onto a parent', () => { describe('When dragging shapes', () => { it('should drag and undo and redo', () => { - editor.deleteShapes(editor.currentPageShapes) + editor.deleteShapes(editor.getCurrentPageShapes()) editor.setCurrentTool('arrow').pointerMove(0, 0).pointerDown().pointerMove(100, 100).pointerUp() editor.expectShapeToMatch({ - id: editor.currentPageShapes[0]!.id, + id: editor.getCurrentPageShapes()[0]!.id, x: 0, y: 0, }) @@ -1748,7 +1748,7 @@ describe('When dragging shapes', () => { editor.setCurrentTool('geo').pointerMove(-10, 100).pointerDown().pointerUp() editor.expectShapeToMatch({ - id: editor.currentPageShapes[1]!.id, + id: editor.getCurrentPageShapes()[1]!.id, x: -110, y: 0, }) @@ -1760,12 +1760,12 @@ describe('When dragging shapes', () => { .pointerMove(100, 50) .pointerUp() .expectShapeToMatch({ - id: editor.currentPageShapes[0]!.id, + id: editor.getCurrentPageShapes()[0]!.id, x: 50, // 50 to the right y: 0, }) .expectShapeToMatch({ - id: editor.currentPageShapes[1]!.id, + id: editor.getCurrentPageShapes()[1]!.id, x: -60, // 50 to the right y: 0, }) @@ -1773,12 +1773,12 @@ describe('When dragging shapes', () => { editor .undo() .expectShapeToMatch({ - id: editor.currentPageShapes[0]!.id, + id: editor.getCurrentPageShapes()[0]!.id, x: 0, // 50 to the right y: 0, }) .expectShapeToMatch({ - id: editor.currentPageShapes[1]!.id, + id: editor.getCurrentPageShapes()[1]!.id, x: -110, // 50 to the right y: 0, }) @@ -1792,8 +1792,8 @@ it('clones a single shape simply', () => { .pointerMove(50, 50) .click() - expect(editor.getOnlySelectedShape()).toBe(editor.currentPageShapes[0]) - expect(editor.getHoveredShape()).toBe(editor.currentPageShapes[0]) + expect(editor.getOnlySelectedShape()).toBe(editor.getCurrentPageShapes()[0]) + expect(editor.getHoveredShape()).toBe(editor.getCurrentPageShapes()[0]) // click on the canvas to deselect editor.pointerMove(200, 50).click() @@ -1805,7 +1805,7 @@ it('clones a single shape simply', () => { editor.pointerMove(50, 50) expect(editor.getOnlySelectedShape()).toBe(null) - expect(editor.getHoveredShape()).toBe(editor.currentPageShapes[0]) + expect(editor.getHoveredShape()).toBe(editor.getCurrentPageShapes()[0]) // start dragging the shape editor @@ -1816,8 +1816,8 @@ it('clones a single shape simply', () => { // stop dragging .pointerUp() - expect(editor.currentPageShapes).toHaveLength(2) - const [, sticky2] = editor.currentPageShapes + expect(editor.getCurrentPageShapes()).toHaveLength(2) + const [, sticky2] = editor.getCurrentPageShapes() expect(editor.getOnlySelectedShape()).toBe(sticky2) expect(editor.getEditingShape()).toBe(undefined) expect(editor.getHoveredShape()).toBe(sticky2)