diff --git a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts b/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts index 8e09650de5..1ea2f01725 100644 --- a/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts +++ b/tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts @@ -8,6 +8,7 @@ import { uniqueId, } from '@tldraw/core' import type { TLReactCallbacks } from '@tldraw/react' +import { transaction } from 'mobx' import * as React from 'react' import { LogseqPortalShape, Shape } from '~lib' @@ -65,7 +66,7 @@ export function usePaste() { maxY: (shape.point?.[1] ?? point[1]) + (shape.size?.[1] ?? 4), })) ) - const clonedShapes = shapes.map((shape: TLShapeModel) => { + const clonedShapes = shapes.map(shape => { return { ...shape, id: uniqueId(), @@ -76,6 +77,7 @@ export function usePaste() { ], } }) + // @ts-expect-error - This is a valid shape shapesToCreate.push(...clonedShapes) // Try to rebinding the shapes to the new assets @@ -117,7 +119,7 @@ export function usePaste() { point: [point[0], point[1]], size: [600, 400], pageId: blockRef, - blockType: 'B' + blockType: 'B', }) } } @@ -149,10 +151,16 @@ export function usePaste() { })), ...shapesToCreate, ] - app.createAssets(assetsToCreate) - app.createShapes(allShapesToAdd) - app.currentPage.updateBindings(Object.fromEntries(bindingsToCreate.map(b => [b.id, b]))) - app.setSelectedShapes(allShapesToAdd.map(s => s.id)) + app.transaction(() => { + if (assetsToCreate.length > 0) { + app.createAssets(assetsToCreate) + } + if (allShapesToAdd.length > 0) { + app.createShapes(allShapesToAdd) + } + app.currentPage.updateBindings(Object.fromEntries(bindingsToCreate.map(b => [b.id, b]))) + app.setSelectedShapes(allShapesToAdd.map(s => s.id)) + }) }, []) } diff --git a/tldraw/demo/src/App.jsx b/tldraw/demo/src/App.jsx index d9bf7a2e49..881825b7f3 100644 --- a/tldraw/demo/src/App.jsx +++ b/tldraw/demo/src/App.jsx @@ -5,6 +5,7 @@ import { App as TldrawApp } from 'tldraw-logseq' const storingKey = 'playground.index' const onPersist = app => { + console.log('onPersist', app) window.sessionStorage.setItem(storingKey, JSON.stringify(app.serialized)) } diff --git a/tldraw/packages/core/src/lib/TLApp/TLApp.ts b/tldraw/packages/core/src/lib/TLApp/TLApp.ts index 9e189f3082..d216dcf73d 100644 --- a/tldraw/packages/core/src/lib/TLApp/TLApp.ts +++ b/tldraw/packages/core/src/lib/TLApp/TLApp.ts @@ -2,7 +2,7 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable @typescript-eslint/no-explicit-any */ import { Vec } from '@tldraw/vec' -import { action, computed, makeObservable, observable, toJS } from 'mobx' +import { action, computed, makeObservable, observable, toJS, transaction } from 'mobx' import { BoundsUtils, KeyUtils } from '~utils' import { TLSelectTool, @@ -471,10 +471,7 @@ export class TLApp< this.selectionRotation = 0 } if (process.env.NODE_ENV === 'development') { - console.log( - 'setSelectedShapes', - newSelectedShapes.map(s => toJS(s.serialized)) - ) + console.log('setSelectedShapes', newSelectedShapes.map(s => toJS(s.serialized))) } return this } @@ -719,6 +716,15 @@ export class TLApp< return Shape } + transaction = (fn: () => void) => { + transaction(() => { + this.history.pause() + fn() + this.history.resume() + this.persist() + }) + } + /* ------------------ Subscriptions ----------------- */ private subscriptions = new Set>([])