kopia lustrzana https://github.com/Tldraw/Tldraw
alex/no-batches: no batches
rodzic
3448e53a64
commit
1ecf54f5f7
|
@ -592,7 +592,6 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
}): this;
|
||||
bail(): this;
|
||||
bailToMark(id: string): this;
|
||||
batch(fn: () => void, opts?: TLHistoryBatchOptions): this;
|
||||
bringForward(shapes: TLShape[] | TLShapeId[]): this;
|
||||
bringToFront(shapes: TLShape[] | TLShapeId[]): this;
|
||||
cancel(): this;
|
||||
|
@ -893,7 +892,7 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
shapeUtils: {
|
||||
readonly [K in string]?: ShapeUtil<TLUnknownShape>;
|
||||
};
|
||||
readonly sideEffects: SideEffectManager<this>;
|
||||
readonly sideEffects: SideEffectManager<TLRecord>;
|
||||
slideCamera(opts?: {
|
||||
speed: number;
|
||||
direction: VecLike;
|
||||
|
@ -920,9 +919,9 @@ export class Editor extends EventEmitter<TLEventMap> {
|
|||
updateAssets(assets: TLAssetPartial[]): this;
|
||||
updateCurrentPageState(partial: Partial<Omit<TLInstancePageState, 'editingShapeId' | 'focusedGroupId' | 'pageId' | 'selectedShapeIds'>>, historyOptions?: TLHistoryBatchOptions): this;
|
||||
// (undocumented)
|
||||
_updateCurrentPageState: (partial: Partial<Omit<TLInstancePageState, 'selectedShapeIds'>>, historyOptions?: TLHistoryBatchOptions) => void;
|
||||
_updateCurrentPageState: (partial: Partial<Omit<TLInstancePageState, 'selectedShapeIds'>>, options?: TLHistoryBatchOptions) => void;
|
||||
updateDocumentSettings(settings: Partial<TLDocument>): this;
|
||||
updateInstanceState(partial: Partial<Omit<TLInstance, 'currentPageId'>>, historyOptions?: TLHistoryBatchOptions): this;
|
||||
updateInstanceState(partial: Partial<Omit<TLInstance, 'currentPageId'>>, options?: TLHistoryBatchOptions): this;
|
||||
updatePage(partial: RequiredKeys<TLPage, 'id'>): this;
|
||||
// @internal
|
||||
updateRenderingBounds(): this;
|
||||
|
@ -1202,8 +1201,6 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
// (undocumented)
|
||||
bailToMark: (id: string) => this;
|
||||
// (undocumented)
|
||||
batch: (fn: () => void, opts?: TLHistoryBatchOptions) => this;
|
||||
// (undocumented)
|
||||
clear(): void;
|
||||
// @internal (undocumented)
|
||||
debug(): {
|
||||
|
@ -1213,7 +1210,7 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
diff: RecordsDiff<R>;
|
||||
isEmpty: boolean;
|
||||
};
|
||||
state: HistoryRecorderState;
|
||||
state: TLHistoryMode;
|
||||
};
|
||||
// (undocumented)
|
||||
readonly dispose: () => void;
|
||||
|
@ -1223,14 +1220,16 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
getNumUndos(): number;
|
||||
// (undocumented)
|
||||
ignore(fn: () => void): this;
|
||||
// @internal (undocumented)
|
||||
_isInBatch: boolean;
|
||||
// (undocumented)
|
||||
mark: (id?: string) => string;
|
||||
// (undocumented)
|
||||
onBatchComplete: () => void;
|
||||
record(fn: () => void): this;
|
||||
// (undocumented)
|
||||
recordPreservingRedoStack(fn: () => void): this;
|
||||
// (undocumented)
|
||||
redo: () => this | undefined;
|
||||
// (undocumented)
|
||||
runInMode(mode: null | TLHistoryMode | undefined, fn: () => void): this;
|
||||
// @internal (undocumented)
|
||||
stacks: Atom< {
|
||||
undos: Stack<TLHistoryEntry<R>>;
|
||||
|
@ -1745,45 +1744,42 @@ export class SharedStyleMap extends ReadonlySharedStyleMap {
|
|||
export function shortAngleDist(a0: number, a1: number): number;
|
||||
|
||||
// @public
|
||||
export class SideEffectManager<CTX extends {
|
||||
store: TLStore;
|
||||
history: {
|
||||
onBatchComplete: () => void;
|
||||
};
|
||||
}> {
|
||||
constructor(editor: CTX);
|
||||
// (undocumented)
|
||||
editor: CTX;
|
||||
export class SideEffectManager<R extends UnknownRecord> {
|
||||
constructor(store: Store<R>);
|
||||
// @internal
|
||||
register(handlersByType: {
|
||||
[R in TLRecord as R['typeName']]?: {
|
||||
beforeCreate?: TLBeforeCreateHandler<R>;
|
||||
afterCreate?: TLAfterCreateHandler<R>;
|
||||
beforeChange?: TLBeforeChangeHandler<R>;
|
||||
afterChange?: TLAfterChangeHandler<R>;
|
||||
beforeDelete?: TLBeforeDeleteHandler<R>;
|
||||
afterDelete?: TLAfterDeleteHandler<R>;
|
||||
[T in R as T['typeName']]?: {
|
||||
beforeCreate?: TLBeforeCreateHandler<T>;
|
||||
afterCreate?: TLAfterCreateHandler<T>;
|
||||
beforeChange?: TLBeforeChangeHandler<T>;
|
||||
afterChange?: TLAfterChangeHandler<T>;
|
||||
beforeDelete?: TLBeforeDeleteHandler<T>;
|
||||
afterDelete?: TLAfterDeleteHandler<T>;
|
||||
};
|
||||
} & {
|
||||
complete?: TLCompleteHandler;
|
||||
}): () => void;
|
||||
registerAfterChangeHandler<T extends TLRecord['typeName']>(typeName: T, handler: TLAfterChangeHandler<TLRecord & {
|
||||
registerAfterChangeHandler<T extends R['typeName']>(typeName: T, handler: TLAfterChangeHandler<R & {
|
||||
typeName: T;
|
||||
}>): () => void;
|
||||
registerAfterCreateHandler<T extends TLRecord['typeName']>(typeName: T, handler: TLAfterCreateHandler<TLRecord & {
|
||||
registerAfterCreateHandler<T extends R['typeName']>(typeName: T, handler: TLAfterCreateHandler<R & {
|
||||
typeName: T;
|
||||
}>): () => void;
|
||||
registerAfterDeleteHandler<T extends TLRecord['typeName']>(typeName: T, handler: TLAfterDeleteHandler<TLRecord & {
|
||||
registerAfterDeleteHandler<T extends R['typeName']>(typeName: T, handler: TLAfterDeleteHandler<R & {
|
||||
typeName: T;
|
||||
}>): () => void;
|
||||
registerBatchCompleteHandler(handler: TLBatchCompleteHandler): () => void;
|
||||
registerBeforeChangeHandler<T extends TLRecord['typeName']>(typeName: T, handler: TLBeforeChangeHandler<TLRecord & {
|
||||
registerBeforeChangeHandler<T extends R['typeName']>(typeName: T, handler: TLBeforeChangeHandler<R & {
|
||||
typeName: T;
|
||||
}>): () => void;
|
||||
registerBeforeCreateHandler<T extends TLRecord['typeName']>(typeName: T, handler: TLBeforeCreateHandler<TLRecord & {
|
||||
registerBeforeCreateHandler<T extends R['typeName']>(typeName: T, handler: TLBeforeCreateHandler<R & {
|
||||
typeName: T;
|
||||
}>): () => void;
|
||||
registerBeforeDeleteHandler<T extends TLRecord['typeName']>(typeName: T, handler: TLBeforeDeleteHandler<TLRecord & {
|
||||
registerBeforeDeleteHandler<T extends R['typeName']>(typeName: T, handler: TLBeforeDeleteHandler<R & {
|
||||
typeName: T;
|
||||
}>): () => void;
|
||||
registerCompleteHandler(handler: TLCompleteHandler): () => void;
|
||||
// (undocumented)
|
||||
readonly store: Store<R>;
|
||||
}
|
||||
|
||||
export { Signal }
|
||||
|
@ -1945,13 +1941,13 @@ export interface SvgExportDef {
|
|||
export const TAB_ID: string;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLAfterChangeHandler<R extends TLRecord> = (prev: R, next: R, source: 'remote' | 'user') => void;
|
||||
export type TLAfterChangeHandler<R extends UnknownRecord> = (prev: R, next: R, source: 'remote' | 'user') => void;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLAfterCreateHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => void;
|
||||
export type TLAfterCreateHandler<R extends UnknownRecord> = (record: R, source: 'remote' | 'user') => void;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLAfterDeleteHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => void;
|
||||
export type TLAfterDeleteHandler<R extends UnknownRecord> = (record: R, source: 'remote' | 'user') => void;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLAnimationOptions = Partial<{
|
||||
|
@ -2022,16 +2018,13 @@ export interface TLBaseEventInfo {
|
|||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLBatchCompleteHandler = () => void;
|
||||
export type TLBeforeChangeHandler<R extends UnknownRecord> = (prev: R, next: R, source: 'remote' | 'user') => R;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLBeforeChangeHandler<R extends TLRecord> = (prev: R, next: R, source: 'remote' | 'user') => R;
|
||||
export type TLBeforeCreateHandler<R extends UnknownRecord> = (record: R, source: 'remote' | 'user') => R;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLBeforeCreateHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => R;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLBeforeDeleteHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => false | void;
|
||||
export type TLBeforeDeleteHandler<R extends UnknownRecord> = (record: R, source: 'remote' | 'user') => false | void;
|
||||
|
||||
// @public (undocumented)
|
||||
export type TLBrushProps = {
|
||||
|
@ -2232,8 +2225,6 @@ export interface TLEventMap {
|
|||
mount: [];
|
||||
// (undocumented)
|
||||
tick: [number];
|
||||
// (undocumented)
|
||||
update: [];
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
|
|
Plik diff jest za duży
Load Diff
|
@ -139,7 +139,6 @@ export type {
|
|||
TLAfterChangeHandler,
|
||||
TLAfterCreateHandler,
|
||||
TLAfterDeleteHandler,
|
||||
TLBatchCompleteHandler,
|
||||
TLBeforeChangeHandler,
|
||||
TLBeforeCreateHandler,
|
||||
TLBeforeDeleteHandler,
|
||||
|
|
Plik diff jest za duży
Load Diff
|
@ -61,14 +61,12 @@ function createCounterHistoryManager() {
|
|||
}
|
||||
|
||||
const setAge = (age = 35) => {
|
||||
manager.batch(() => _setAge(age), { history: 'record-preserveRedoStack' })
|
||||
manager.recordPreservingRedoStack(() => _setAge(age))
|
||||
}
|
||||
|
||||
const incrementTwice = () => {
|
||||
manager.batch(() => {
|
||||
increment()
|
||||
increment()
|
||||
})
|
||||
increment()
|
||||
increment()
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -290,12 +288,12 @@ describe('history options', () => {
|
|||
return { a: store.get(ids.a)!.value as number, b: store.get(ids.b)!.value as number }
|
||||
}
|
||||
|
||||
setA = (n: number, historyOptions?: TLHistoryBatchOptions) => {
|
||||
manager.batch(() => store.update(ids.a, (s) => ({ ...s, value: n })), historyOptions)
|
||||
setA = (n: number, opts?: TLHistoryBatchOptions) => {
|
||||
manager.runInMode(opts?.history, () => store.update(ids.a, (s) => ({ ...s, value: n })))
|
||||
}
|
||||
|
||||
setB = (n: number, historyOptions?: TLHistoryBatchOptions) => {
|
||||
manager.batch(() => store.update(ids.b, (s) => ({ ...s, value: n })), historyOptions)
|
||||
setB = (n: number, opts?: TLHistoryBatchOptions) => {
|
||||
manager.runInMode(opts?.history, () => store.update(ids.b, (s) => ({ ...s, value: n })))
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -398,14 +396,11 @@ describe('history options', () => {
|
|||
|
||||
it('nested ignore', () => {
|
||||
manager.mark()
|
||||
manager.batch(
|
||||
() => {
|
||||
setA(1)
|
||||
manager.batch(() => setB(1), { history: 'record' })
|
||||
setA(2)
|
||||
},
|
||||
{ history: 'ignore' }
|
||||
)
|
||||
manager.ignore(() => {
|
||||
setA(1)
|
||||
manager.record(() => setB(1))
|
||||
setA(2)
|
||||
})
|
||||
expect(getState()).toMatchObject({ a: 2, b: 1 })
|
||||
|
||||
// changes to A were ignore, but changes to B were recorded:
|
||||
|
@ -413,13 +408,10 @@ describe('history options', () => {
|
|||
expect(getState()).toMatchObject({ a: 2, b: 0 })
|
||||
|
||||
manager.mark()
|
||||
manager.batch(
|
||||
() => {
|
||||
setA(3)
|
||||
manager.batch(() => setB(2), { history: 'ignore' })
|
||||
},
|
||||
{ history: 'record-preserveRedoStack' }
|
||||
)
|
||||
manager.recordPreservingRedoStack(() => {
|
||||
setA(3)
|
||||
manager.ignore(() => setB(2))
|
||||
})
|
||||
expect(getState()).toMatchObject({ a: 3, b: 2 })
|
||||
|
||||
// changes to A were recorded, but changes to B were ignore:
|
||||
|
|
|
@ -10,22 +10,16 @@ import {
|
|||
} from '@tldraw/store'
|
||||
import { exhaustiveSwitchError, noop } from '@tldraw/utils'
|
||||
import { uniqueId } from '../../utils/uniqueId'
|
||||
import { TLHistoryBatchOptions, TLHistoryEntry } from '../types/history-types'
|
||||
import { TLHistoryEntry, TLHistoryMode } from '../types/history-types'
|
||||
import { stack } from './Stack'
|
||||
|
||||
enum HistoryRecorderState {
|
||||
Recording = 'recording',
|
||||
RecordingPreserveRedoStack = 'recordingPreserveRedoStack',
|
||||
Paused = 'paused',
|
||||
}
|
||||
|
||||
/** @public */
|
||||
export class HistoryManager<R extends UnknownRecord> {
|
||||
private readonly store: Store<R>
|
||||
|
||||
readonly dispose: () => void
|
||||
|
||||
private state: HistoryRecorderState = HistoryRecorderState.Recording
|
||||
private mode: TLHistoryMode = 'record'
|
||||
private readonly pendingDiff = new PendingDiff<R>()
|
||||
/** @internal */
|
||||
stacks = atom(
|
||||
|
@ -47,18 +41,18 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
this.dispose = this.store.addHistoryInterceptor((entry, source) => {
|
||||
if (source !== 'user') return
|
||||
|
||||
switch (this.state) {
|
||||
case HistoryRecorderState.Recording:
|
||||
switch (this.mode) {
|
||||
case 'record':
|
||||
this.pendingDiff.apply(entry.changes)
|
||||
this.stacks.update(({ undos }) => ({ undos, redos: stack() }))
|
||||
break
|
||||
case HistoryRecorderState.RecordingPreserveRedoStack:
|
||||
case 'record-preserveRedoStack':
|
||||
this.pendingDiff.apply(entry.changes)
|
||||
break
|
||||
case HistoryRecorderState.Paused:
|
||||
case 'ignore':
|
||||
break
|
||||
default:
|
||||
exhaustiveSwitchError(this.state)
|
||||
exhaustiveSwitchError(this.mode)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
@ -73,8 +67,6 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
}))
|
||||
}
|
||||
|
||||
onBatchComplete: () => void = () => void null
|
||||
|
||||
getNumUndos() {
|
||||
return this.stacks.get().undos.length + (this.pendingDiff.isEmpty() ? 0 : 1)
|
||||
}
|
||||
|
@ -82,39 +74,34 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
return this.stacks.get().redos.length
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
_isInBatch = false
|
||||
batch = (fn: () => void, opts?: TLHistoryBatchOptions) => {
|
||||
const previousState = this.state
|
||||
this.state = opts?.history ? modeToState[opts.history] : this.state
|
||||
runInMode(mode: TLHistoryMode | undefined | null, fn: () => void) {
|
||||
if (!mode) {
|
||||
fn()
|
||||
return this
|
||||
}
|
||||
|
||||
const previousMode = this.mode
|
||||
this.mode = mode
|
||||
|
||||
try {
|
||||
if (this._isInBatch) {
|
||||
fn()
|
||||
return this
|
||||
}
|
||||
|
||||
this._isInBatch = true
|
||||
try {
|
||||
transact(() => {
|
||||
fn()
|
||||
this.onBatchComplete()
|
||||
})
|
||||
} catch (error) {
|
||||
this.annotateError(error)
|
||||
throw error
|
||||
} finally {
|
||||
this._isInBatch = false
|
||||
}
|
||||
transact(fn)
|
||||
|
||||
return this
|
||||
} finally {
|
||||
this.state = previousState
|
||||
this.mode = previousMode
|
||||
}
|
||||
}
|
||||
|
||||
ignore(fn: () => void) {
|
||||
return this.batch(fn, { history: 'ignore' })
|
||||
return this.runInMode('ignore', fn)
|
||||
}
|
||||
|
||||
record(fn: () => void) {
|
||||
return this.runInMode('record', fn)
|
||||
}
|
||||
|
||||
recordPreservingRedoStack(fn: () => void) {
|
||||
return this.runInMode('record-preserveRedoStack', fn)
|
||||
}
|
||||
|
||||
// History
|
||||
|
@ -125,8 +112,8 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
pushToRedoStack: boolean
|
||||
toMark?: string
|
||||
}) => {
|
||||
const previousState = this.state
|
||||
this.state = HistoryRecorderState.Paused
|
||||
const previousState = this.mode
|
||||
this.mode = 'ignore'
|
||||
try {
|
||||
let { undos, redos } = this.stacks.get()
|
||||
|
||||
|
@ -183,7 +170,7 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
this.store.ensureStoreIsUsable()
|
||||
this.stacks.set({ undos, redos })
|
||||
} finally {
|
||||
this.state = previousState
|
||||
this.mode = previousState
|
||||
}
|
||||
|
||||
return this
|
||||
|
@ -196,8 +183,8 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
}
|
||||
|
||||
redo = () => {
|
||||
const previousState = this.state
|
||||
this.state = HistoryRecorderState.Paused
|
||||
const previousState = this.mode
|
||||
this.mode = 'ignore'
|
||||
try {
|
||||
this.flushPendingDiff()
|
||||
|
||||
|
@ -231,7 +218,7 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
this.store.ensureStoreIsUsable()
|
||||
this.stacks.set({ undos, redos })
|
||||
} finally {
|
||||
this.state = previousState
|
||||
this.mode = previousState
|
||||
}
|
||||
|
||||
return this
|
||||
|
@ -270,17 +257,11 @@ export class HistoryManager<R extends UnknownRecord> {
|
|||
undos: undos.toArray(),
|
||||
redos: redos.toArray(),
|
||||
pendingDiff: this.pendingDiff.debug(),
|
||||
state: this.state,
|
||||
state: this.mode,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const modeToState = {
|
||||
record: HistoryRecorderState.Recording,
|
||||
'record-preserveRedoStack': HistoryRecorderState.RecordingPreserveRedoStack,
|
||||
ignore: HistoryRecorderState.Paused,
|
||||
} as const
|
||||
|
||||
class PendingDiff<R extends UnknownRecord> {
|
||||
private diff = createEmptyRecordsDiff<R>()
|
||||
private isEmptyAtom = atom('PendingDiff.isEmpty', true)
|
||||
|
|
|
@ -86,96 +86,94 @@ export class ScribbleManager {
|
|||
*/
|
||||
tick = (elapsed: number) => {
|
||||
if (this.scribbleItems.size === 0) return
|
||||
this.editor.batch(() => {
|
||||
this.scribbleItems.forEach((item) => {
|
||||
// let the item get at least eight points before
|
||||
// switching from starting to active
|
||||
if (item.scribble.state === 'starting') {
|
||||
const { next, prev } = item
|
||||
this.scribbleItems.forEach((item) => {
|
||||
// let the item get at least eight points before
|
||||
// switching from starting to active
|
||||
if (item.scribble.state === 'starting') {
|
||||
const { next, prev } = item
|
||||
if (next && next !== prev) {
|
||||
item.prev = next
|
||||
item.scribble.points.push(next)
|
||||
}
|
||||
|
||||
if (item.scribble.points.length > 8) {
|
||||
item.scribble.state = 'active'
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (item.delayRemaining > 0) {
|
||||
item.delayRemaining = Math.max(0, item.delayRemaining - elapsed)
|
||||
}
|
||||
|
||||
item.timeoutMs += elapsed
|
||||
if (item.timeoutMs >= 16) {
|
||||
item.timeoutMs = 0
|
||||
}
|
||||
|
||||
const { delayRemaining, timeoutMs, prev, next, scribble } = item
|
||||
|
||||
switch (scribble.state) {
|
||||
case 'active': {
|
||||
if (next && next !== prev) {
|
||||
item.prev = next
|
||||
item.scribble.points.push(next)
|
||||
}
|
||||
scribble.points.push(next)
|
||||
|
||||
if (item.scribble.points.length > 8) {
|
||||
item.scribble.state = 'active'
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (item.delayRemaining > 0) {
|
||||
item.delayRemaining = Math.max(0, item.delayRemaining - elapsed)
|
||||
}
|
||||
|
||||
item.timeoutMs += elapsed
|
||||
if (item.timeoutMs >= 16) {
|
||||
item.timeoutMs = 0
|
||||
}
|
||||
|
||||
const { delayRemaining, timeoutMs, prev, next, scribble } = item
|
||||
|
||||
switch (scribble.state) {
|
||||
case 'active': {
|
||||
if (next && next !== prev) {
|
||||
item.prev = next
|
||||
scribble.points.push(next)
|
||||
|
||||
// If we've run out of delay, then shrink the scribble from the start
|
||||
if (delayRemaining === 0) {
|
||||
if (scribble.points.length > 8) {
|
||||
scribble.points.shift()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// While not moving, shrink the scribble from the start
|
||||
if (timeoutMs === 0) {
|
||||
if (scribble.points.length > 1) {
|
||||
scribble.points.shift()
|
||||
} else {
|
||||
// Reset the item's delay
|
||||
item.delayRemaining = scribble.delay
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'stopping': {
|
||||
if (item.delayRemaining === 0) {
|
||||
if (timeoutMs === 0) {
|
||||
// If the scribble is down to one point, we're done!
|
||||
if (scribble.points.length === 1) {
|
||||
this.scribbleItems.delete(item.id) // Remove the scribble
|
||||
return
|
||||
}
|
||||
|
||||
if (scribble.shrink) {
|
||||
// Drop the scribble's size as it shrinks
|
||||
scribble.size = Math.max(1, scribble.size * (1 - scribble.shrink))
|
||||
}
|
||||
|
||||
// Drop the scribble's first point (its tail)
|
||||
// If we've run out of delay, then shrink the scribble from the start
|
||||
if (delayRemaining === 0) {
|
||||
if (scribble.points.length > 8) {
|
||||
scribble.points.shift()
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'paused': {
|
||||
// Nothing to do while paused.
|
||||
break
|
||||
} else {
|
||||
// While not moving, shrink the scribble from the start
|
||||
if (timeoutMs === 0) {
|
||||
if (scribble.points.length > 1) {
|
||||
scribble.points.shift()
|
||||
} else {
|
||||
// Reset the item's delay
|
||||
item.delayRemaining = scribble.delay
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
})
|
||||
case 'stopping': {
|
||||
if (item.delayRemaining === 0) {
|
||||
if (timeoutMs === 0) {
|
||||
// If the scribble is down to one point, we're done!
|
||||
if (scribble.points.length === 1) {
|
||||
this.scribbleItems.delete(item.id) // Remove the scribble
|
||||
return
|
||||
}
|
||||
|
||||
// The object here will get frozen into the record, so we need to
|
||||
// create a copies of the parts that what we'll be mutating later.
|
||||
this.editor.updateInstanceState({
|
||||
scribbles: Array.from(this.scribbleItems.values())
|
||||
.map(({ scribble }) => ({
|
||||
...scribble,
|
||||
points: [...scribble.points],
|
||||
}))
|
||||
.slice(-5), // limit to three as a minor sanity check
|
||||
})
|
||||
if (scribble.shrink) {
|
||||
// Drop the scribble's size as it shrinks
|
||||
scribble.size = Math.max(1, scribble.size * (1 - scribble.shrink))
|
||||
}
|
||||
|
||||
// Drop the scribble's first point (its tail)
|
||||
scribble.points.shift()
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
case 'paused': {
|
||||
// Nothing to do while paused.
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// The object here will get frozen into the record, so we need to
|
||||
// create a copies of the parts that what we'll be mutating later.
|
||||
this.editor.updateInstanceState({
|
||||
scribbles: Array.from(this.scribbleItems.values())
|
||||
.map(({ scribble }) => ({
|
||||
...scribble,
|
||||
points: [...scribble.points],
|
||||
}))
|
||||
.slice(-5), // limit to three as a minor sanity check
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,36 +1,38 @@
|
|||
import { TLRecord, TLStore } from '@tldraw/tlschema'
|
||||
import { Store, UnknownRecord } from '@tldraw/store'
|
||||
|
||||
/** @public */
|
||||
export type TLBeforeCreateHandler<R extends TLRecord> = (record: R, source: 'remote' | 'user') => R
|
||||
export type TLBeforeCreateHandler<R extends UnknownRecord> = (
|
||||
record: R,
|
||||
source: 'remote' | 'user'
|
||||
) => R
|
||||
/** @public */
|
||||
export type TLAfterCreateHandler<R extends TLRecord> = (
|
||||
export type TLAfterCreateHandler<R extends UnknownRecord> = (
|
||||
record: R,
|
||||
source: 'remote' | 'user'
|
||||
) => void
|
||||
/** @public */
|
||||
export type TLBeforeChangeHandler<R extends TLRecord> = (
|
||||
export type TLBeforeChangeHandler<R extends UnknownRecord> = (
|
||||
prev: R,
|
||||
next: R,
|
||||
source: 'remote' | 'user'
|
||||
) => R
|
||||
/** @public */
|
||||
export type TLAfterChangeHandler<R extends TLRecord> = (
|
||||
export type TLAfterChangeHandler<R extends UnknownRecord> = (
|
||||
prev: R,
|
||||
next: R,
|
||||
source: 'remote' | 'user'
|
||||
) => void
|
||||
/** @public */
|
||||
export type TLBeforeDeleteHandler<R extends TLRecord> = (
|
||||
export type TLBeforeDeleteHandler<R extends UnknownRecord> = (
|
||||
record: R,
|
||||
source: 'remote' | 'user'
|
||||
) => void | false
|
||||
/** @public */
|
||||
export type TLAfterDeleteHandler<R extends TLRecord> = (
|
||||
export type TLAfterDeleteHandler<R extends UnknownRecord> = (
|
||||
record: R,
|
||||
source: 'remote' | 'user'
|
||||
) => void
|
||||
/** @public */
|
||||
export type TLBatchCompleteHandler = () => void
|
||||
export type TLCompleteHandler = (source: 'remote' | 'user') => void
|
||||
|
||||
/**
|
||||
* The side effect manager (aka a "correct state enforcer") is responsible
|
||||
|
@ -40,17 +42,10 @@ export type TLBatchCompleteHandler = () => void
|
|||
*
|
||||
* @public
|
||||
*/
|
||||
export class SideEffectManager<
|
||||
CTX extends {
|
||||
store: TLStore
|
||||
history: { onBatchComplete: () => void }
|
||||
},
|
||||
> {
|
||||
constructor(public editor: CTX) {
|
||||
editor.store.onBeforeCreate = (record, source) => {
|
||||
const handlers = this._beforeCreateHandlers[
|
||||
record.typeName
|
||||
] as TLBeforeCreateHandler<TLRecord>[]
|
||||
export class SideEffectManager<R extends UnknownRecord> {
|
||||
constructor(public readonly store: Store<R>) {
|
||||
store.onBeforeCreate = (record, source) => {
|
||||
const handlers = this._beforeCreateHandlers[record.typeName as R['typeName']]
|
||||
if (handlers) {
|
||||
let r = record
|
||||
for (const handler of handlers) {
|
||||
|
@ -62,10 +57,8 @@ export class SideEffectManager<
|
|||
return record
|
||||
}
|
||||
|
||||
editor.store.onAfterCreate = (record, source) => {
|
||||
const handlers = this._afterCreateHandlers[
|
||||
record.typeName
|
||||
] as TLAfterCreateHandler<TLRecord>[]
|
||||
store.onAfterCreate = (record, source) => {
|
||||
const handlers = this._afterCreateHandlers[record.typeName as R['typeName']]
|
||||
if (handlers) {
|
||||
for (const handler of handlers) {
|
||||
handler(record, source)
|
||||
|
@ -73,10 +66,8 @@ export class SideEffectManager<
|
|||
}
|
||||
}
|
||||
|
||||
editor.store.onBeforeChange = (prev, next, source) => {
|
||||
const handlers = this._beforeChangeHandlers[
|
||||
next.typeName
|
||||
] as TLBeforeChangeHandler<TLRecord>[]
|
||||
store.onBeforeChange = (prev, next, source) => {
|
||||
const handlers = this._beforeChangeHandlers[next.typeName as R['typeName']]
|
||||
if (handlers) {
|
||||
let r = next
|
||||
for (const handler of handlers) {
|
||||
|
@ -88,8 +79,8 @@ export class SideEffectManager<
|
|||
return next
|
||||
}
|
||||
|
||||
editor.store.onAfterChange = (prev, next, source) => {
|
||||
const handlers = this._afterChangeHandlers[next.typeName] as TLAfterChangeHandler<TLRecord>[]
|
||||
store.onAfterChange = (prev, next, source) => {
|
||||
const handlers = this._afterChangeHandlers[next.typeName as R['typeName']]
|
||||
if (handlers) {
|
||||
for (const handler of handlers) {
|
||||
handler(prev, next, source)
|
||||
|
@ -97,10 +88,8 @@ export class SideEffectManager<
|
|||
}
|
||||
}
|
||||
|
||||
editor.store.onBeforeDelete = (record, source) => {
|
||||
const handlers = this._beforeDeleteHandlers[
|
||||
record.typeName
|
||||
] as TLBeforeDeleteHandler<TLRecord>[]
|
||||
store.onBeforeDelete = (record, source) => {
|
||||
const handlers = this._beforeDeleteHandlers[record.typeName as R['typeName']]
|
||||
if (handlers) {
|
||||
for (const handler of handlers) {
|
||||
if (handler(record, source) === false) {
|
||||
|
@ -110,10 +99,8 @@ export class SideEffectManager<
|
|||
}
|
||||
}
|
||||
|
||||
editor.store.onAfterDelete = (record, source) => {
|
||||
const handlers = this._afterDeleteHandlers[
|
||||
record.typeName
|
||||
] as TLAfterDeleteHandler<TLRecord>[]
|
||||
store.onAfterDelete = (record, source) => {
|
||||
const handlers = this._afterDeleteHandlers[record.typeName as R['typeName']]
|
||||
if (handlers) {
|
||||
for (const handler of handlers) {
|
||||
handler(record, source)
|
||||
|
@ -121,49 +108,56 @@ export class SideEffectManager<
|
|||
}
|
||||
}
|
||||
|
||||
editor.history.onBatchComplete = () => {
|
||||
this._batchCompleteHandlers.forEach((fn) => fn())
|
||||
store.onAfterAtomic = (source) => {
|
||||
const handlers = this._completeHandlers
|
||||
if (handlers) {
|
||||
for (const handler of handlers) {
|
||||
handler(source)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _beforeCreateHandlers: Partial<{
|
||||
[K in TLRecord['typeName']]: TLBeforeCreateHandler<TLRecord & { typeName: K }>[]
|
||||
[K in R['typeName']]: TLBeforeCreateHandler<R & { typeName: K }>[]
|
||||
}> = {}
|
||||
private _afterCreateHandlers: Partial<{
|
||||
[K in TLRecord['typeName']]: TLAfterCreateHandler<TLRecord & { typeName: K }>[]
|
||||
[K in R['typeName']]: TLAfterCreateHandler<R & { typeName: K }>[]
|
||||
}> = {}
|
||||
private _beforeChangeHandlers: Partial<{
|
||||
[K in TLRecord['typeName']]: TLBeforeChangeHandler<TLRecord & { typeName: K }>[]
|
||||
[K in R['typeName']]: TLBeforeChangeHandler<R & { typeName: K }>[]
|
||||
}> = {}
|
||||
private _afterChangeHandlers: Partial<{
|
||||
[K in TLRecord['typeName']]: TLAfterChangeHandler<TLRecord & { typeName: K }>[]
|
||||
[K in R['typeName']]: TLAfterChangeHandler<R & { typeName: K }>[]
|
||||
}> = {}
|
||||
|
||||
private _beforeDeleteHandlers: Partial<{
|
||||
[K in TLRecord['typeName']]: TLBeforeDeleteHandler<TLRecord & { typeName: K }>[]
|
||||
[K in R['typeName']]: TLBeforeDeleteHandler<R & { typeName: K }>[]
|
||||
}> = {}
|
||||
|
||||
private _afterDeleteHandlers: Partial<{
|
||||
[K in TLRecord['typeName']]: TLAfterDeleteHandler<TLRecord & { typeName: K }>[]
|
||||
[K in R['typeName']]: TLAfterDeleteHandler<R & { typeName: K }>[]
|
||||
}> = {}
|
||||
|
||||
private _batchCompleteHandlers: TLBatchCompleteHandler[] = []
|
||||
private _completeHandlers: TLCompleteHandler[] = []
|
||||
|
||||
/**
|
||||
* Internal helper for registering a bunch of side effects at once and keeping them organized.
|
||||
* @internal
|
||||
*/
|
||||
register(handlersByType: {
|
||||
[R in TLRecord as R['typeName']]?: {
|
||||
beforeCreate?: TLBeforeCreateHandler<R>
|
||||
afterCreate?: TLAfterCreateHandler<R>
|
||||
beforeChange?: TLBeforeChangeHandler<R>
|
||||
afterChange?: TLAfterChangeHandler<R>
|
||||
beforeDelete?: TLBeforeDeleteHandler<R>
|
||||
afterDelete?: TLAfterDeleteHandler<R>
|
||||
}
|
||||
}) {
|
||||
register(
|
||||
handlersByType: {
|
||||
[T in R as T['typeName']]?: {
|
||||
beforeCreate?: TLBeforeCreateHandler<T>
|
||||
afterCreate?: TLAfterCreateHandler<T>
|
||||
beforeChange?: TLBeforeChangeHandler<T>
|
||||
afterChange?: TLAfterChangeHandler<T>
|
||||
beforeDelete?: TLBeforeDeleteHandler<T>
|
||||
afterDelete?: TLAfterDeleteHandler<T>
|
||||
}
|
||||
} & { complete?: TLCompleteHandler }
|
||||
) {
|
||||
const disposes: (() => void)[] = []
|
||||
if (handlersByType.complete) {
|
||||
this._completeHandlers.push(handlersByType.complete)
|
||||
}
|
||||
for (const [type, handlers] of Object.entries(handlersByType) as any) {
|
||||
if (handlers?.beforeCreate) {
|
||||
disposes.push(this.registerBeforeCreateHandler(type, handlers.beforeCreate))
|
||||
|
@ -216,9 +210,9 @@ export class SideEffectManager<
|
|||
* @param typeName - The type of record to listen for
|
||||
* @param handler - The handler to call
|
||||
*/
|
||||
registerBeforeCreateHandler<T extends TLRecord['typeName']>(
|
||||
registerBeforeCreateHandler<T extends R['typeName']>(
|
||||
typeName: T,
|
||||
handler: TLBeforeCreateHandler<TLRecord & { typeName: T }>
|
||||
handler: TLBeforeCreateHandler<R & { typeName: T }>
|
||||
) {
|
||||
const handlers = this._beforeCreateHandlers[typeName] as TLBeforeCreateHandler<any>[]
|
||||
if (!handlers) this._beforeCreateHandlers[typeName] = []
|
||||
|
@ -246,9 +240,9 @@ export class SideEffectManager<
|
|||
* @param typeName - The type of record to listen for
|
||||
* @param handler - The handler to call
|
||||
*/
|
||||
registerAfterCreateHandler<T extends TLRecord['typeName']>(
|
||||
registerAfterCreateHandler<T extends R['typeName']>(
|
||||
typeName: T,
|
||||
handler: TLAfterCreateHandler<TLRecord & { typeName: T }>
|
||||
handler: TLAfterCreateHandler<R & { typeName: T }>
|
||||
) {
|
||||
const handlers = this._afterCreateHandlers[typeName] as TLAfterCreateHandler<any>[]
|
||||
if (!handlers) this._afterCreateHandlers[typeName] = []
|
||||
|
@ -280,9 +274,9 @@ export class SideEffectManager<
|
|||
* @param typeName - The type of record to listen for
|
||||
* @param handler - The handler to call
|
||||
*/
|
||||
registerBeforeChangeHandler<T extends TLRecord['typeName']>(
|
||||
registerBeforeChangeHandler<T extends R['typeName']>(
|
||||
typeName: T,
|
||||
handler: TLBeforeChangeHandler<TLRecord & { typeName: T }>
|
||||
handler: TLBeforeChangeHandler<R & { typeName: T }>
|
||||
) {
|
||||
const handlers = this._beforeChangeHandlers[typeName] as TLBeforeChangeHandler<any>[]
|
||||
if (!handlers) this._beforeChangeHandlers[typeName] = []
|
||||
|
@ -309,9 +303,9 @@ export class SideEffectManager<
|
|||
* @param typeName - The type of record to listen for
|
||||
* @param handler - The handler to call
|
||||
*/
|
||||
registerAfterChangeHandler<T extends TLRecord['typeName']>(
|
||||
registerAfterChangeHandler<T extends R['typeName']>(
|
||||
typeName: T,
|
||||
handler: TLAfterChangeHandler<TLRecord & { typeName: T }>
|
||||
handler: TLAfterChangeHandler<R & { typeName: T }>
|
||||
) {
|
||||
const handlers = this._afterChangeHandlers[typeName] as TLAfterChangeHandler<any>[]
|
||||
if (!handlers) this._afterChangeHandlers[typeName] = []
|
||||
|
@ -340,9 +334,9 @@ export class SideEffectManager<
|
|||
* @param typeName - The type of record to listen for
|
||||
* @param handler - The handler to call
|
||||
*/
|
||||
registerBeforeDeleteHandler<T extends TLRecord['typeName']>(
|
||||
registerBeforeDeleteHandler<T extends R['typeName']>(
|
||||
typeName: T,
|
||||
handler: TLBeforeDeleteHandler<TLRecord & { typeName: T }>
|
||||
handler: TLBeforeDeleteHandler<R & { typeName: T }>
|
||||
) {
|
||||
const handlers = this._beforeDeleteHandlers[typeName] as TLBeforeDeleteHandler<any>[]
|
||||
if (!handlers) this._beforeDeleteHandlers[typeName] = []
|
||||
|
@ -372,9 +366,9 @@ export class SideEffectManager<
|
|||
* @param typeName - The type of record to listen for
|
||||
* @param handler - The handler to call
|
||||
*/
|
||||
registerAfterDeleteHandler<T extends TLRecord['typeName']>(
|
||||
registerAfterDeleteHandler<T extends R['typeName']>(
|
||||
typeName: T,
|
||||
handler: TLAfterDeleteHandler<TLRecord & { typeName: T }>
|
||||
handler: TLAfterDeleteHandler<R & { typeName: T }>
|
||||
) {
|
||||
const handlers = this._afterDeleteHandlers[typeName] as TLAfterDeleteHandler<any>[]
|
||||
if (!handlers) this._afterDeleteHandlers[typeName] = []
|
||||
|
@ -383,7 +377,7 @@ export class SideEffectManager<
|
|||
}
|
||||
|
||||
/**
|
||||
* Register a handler to be called when a store completes a batch.
|
||||
* Register a handler to be called when the store completes an operation.
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
|
@ -394,7 +388,7 @@ export class SideEffectManager<
|
|||
* editor.selectAll()
|
||||
* expect(count).toBe(1)
|
||||
*
|
||||
* editor.batch(() => {
|
||||
* editor.store.atomic(() => {
|
||||
* editor.selectNone()
|
||||
* editor.selectAll()
|
||||
* })
|
||||
|
@ -406,9 +400,9 @@ export class SideEffectManager<
|
|||
*
|
||||
* @public
|
||||
*/
|
||||
registerBatchCompleteHandler(handler: TLBatchCompleteHandler) {
|
||||
this._batchCompleteHandlers.push(handler)
|
||||
return () => remove(this._batchCompleteHandlers, handler)
|
||||
registerCompleteHandler(handler: TLCompleteHandler) {
|
||||
this._completeHandlers.push(handler)
|
||||
return () => remove(this._completeHandlers, handler)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -8,7 +8,6 @@ export interface TLEventMap {
|
|||
mount: []
|
||||
'max-shapes': [{ name: string; pageId: TLPageId; count: number }]
|
||||
change: [HistoryEntry<TLRecord>]
|
||||
update: []
|
||||
crash: [{ error: unknown }]
|
||||
'stop-camera-animation': []
|
||||
'stop-following': []
|
||||
|
|
|
@ -17,11 +17,13 @@ export type TLHistoryEntry<R extends UnknownRecord> = TLHistoryMark | TLHistoryD
|
|||
|
||||
/** @public */
|
||||
export interface TLHistoryBatchOptions {
|
||||
/**
|
||||
* How should this change interact with the history stack?
|
||||
* - record: Add to the undo stack and clear the redo stack
|
||||
* - record-preserveRedoStack: Add to the undo stack but do not clear the redo stack
|
||||
* - ignore: Do not add to the undo stack or the redo stack
|
||||
*/
|
||||
history?: 'record' | 'record-preserveRedoStack' | 'ignore'
|
||||
history?: TLHistoryMode
|
||||
}
|
||||
|
||||
/**
|
||||
* How should this change interact with the history stack?
|
||||
* - record: Add to the undo stack and clear the redo stack
|
||||
* - record-preserveRedoStack: Add to the undo stack but do not clear the redo stack
|
||||
* - ignore: Do not add to the undo stack or the redo stack
|
||||
*/
|
||||
export type TLHistoryMode = 'record' | 'record-preserveRedoStack' | 'ignore'
|
||||
|
|
|
@ -265,6 +265,7 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
|||
markAsPossiblyCorrupted(): void;
|
||||
mergeRemoteChanges: (fn: () => void) => void;
|
||||
migrateSnapshot(snapshot: StoreSnapshot<R>): StoreSnapshot<R>;
|
||||
onAfterAtomic?: (source: 'remote' | 'user') => void;
|
||||
onAfterChange?: (prev: R, next: R, source: 'remote' | 'user') => void;
|
||||
onAfterCreate?: (record: R, source: 'remote' | 'user') => void;
|
||||
onAfterDelete?: (prev: R, source: 'remote' | 'user') => void;
|
||||
|
|
|
@ -4108,6 +4108,36 @@
|
|||
"isAbstract": false,
|
||||
"name": "migrateSnapshot"
|
||||
},
|
||||
{
|
||||
"kind": "Property",
|
||||
"canonicalReference": "@tldraw/store!Store#onAfterAtomic:member",
|
||||
"docComment": "/**\n * A callback fired after an atomic operation is completed.\n */\n",
|
||||
"excerptTokens": [
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "onAfterAtomic?: "
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": "(source: 'remote' | 'user') => void"
|
||||
},
|
||||
{
|
||||
"kind": "Content",
|
||||
"text": ";"
|
||||
}
|
||||
],
|
||||
"isReadonly": false,
|
||||
"isOptional": true,
|
||||
"releaseTag": "Public",
|
||||
"name": "onAfterAtomic",
|
||||
"propertyTypeTokenRange": {
|
||||
"startIndex": 1,
|
||||
"endIndex": 2
|
||||
},
|
||||
"isStatic": false,
|
||||
"isProtected": false,
|
||||
"isAbstract": false
|
||||
},
|
||||
{
|
||||
"kind": "Property",
|
||||
"canonicalReference": "@tldraw/store!Store#onAfterChange:member",
|
||||
|
|
|
@ -340,6 +340,11 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
|||
*/
|
||||
onAfterDelete?: (prev: R, source: 'remote' | 'user') => void
|
||||
|
||||
/**
|
||||
* A callback fired after an atomic operation is completed.
|
||||
*/
|
||||
onAfterAtomic?: (source: 'remote' | 'user') => void
|
||||
|
||||
// used to avoid running callbacks when rolling back changes in sync client
|
||||
private _runCallbacks = true
|
||||
|
||||
|
@ -682,6 +687,10 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
|||
* @public
|
||||
*/
|
||||
mergeRemoteChanges = (fn: () => void) => {
|
||||
if (this._isInAtomicOp) {
|
||||
throw new Error('Cannot call `mergeRemoteChanges` from within an atomic operation')
|
||||
}
|
||||
|
||||
if (this.isMergingRemoteChanges) {
|
||||
return fn()
|
||||
}
|
||||
|
@ -827,6 +836,9 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
|||
}
|
||||
private flushAtomicCallbacks() {
|
||||
let updateDepth = 0
|
||||
let didAnythingHappen = false
|
||||
|
||||
// first, we fire any pending after events:
|
||||
while (this.pendingAfterEvents) {
|
||||
const events = this.pendingAfterEvents
|
||||
this.pendingAfterEvents = null
|
||||
|
@ -840,15 +852,27 @@ export class Store<R extends UnknownRecord = UnknownRecord, Props = unknown> {
|
|||
|
||||
for (const { before, after, source } of events.values()) {
|
||||
if (before && after) {
|
||||
didAnythingHappen = true
|
||||
this.onAfterChange?.(before, after, source)
|
||||
} else if (before && !after) {
|
||||
didAnythingHappen = true
|
||||
this.onAfterDelete?.(before, source)
|
||||
} else if (!before && after) {
|
||||
didAnythingHappen = true
|
||||
this.onAfterCreate?.(after, source)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// then we fire the atomic callback
|
||||
if (didAnythingHappen) {
|
||||
this.onAfterAtomic?.(this.isMergingRemoteChanges ? 'remote' : 'user')
|
||||
|
||||
// that might have caused more changes, so we need to flush again:
|
||||
this.flushAtomicCallbacks()
|
||||
}
|
||||
}
|
||||
|
||||
private _isInAtomicOp = false
|
||||
/** @internal */
|
||||
atomic<T>(fn: () => T, runCallbacks = true): T {
|
||||
|
|
|
@ -377,21 +377,19 @@ export function registerDefaultExternalContentHandlers(
|
|||
}
|
||||
}
|
||||
|
||||
editor.batch(() => {
|
||||
if (shouldAlsoCreateAsset) {
|
||||
editor.createAssets([asset])
|
||||
}
|
||||
if (shouldAlsoCreateAsset) {
|
||||
editor.createAssets([asset])
|
||||
}
|
||||
|
||||
editor.updateShapes([
|
||||
{
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
props: {
|
||||
assetId: asset.id,
|
||||
},
|
||||
editor.updateShapes([
|
||||
{
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
props: {
|
||||
assetId: asset.id,
|
||||
},
|
||||
])
|
||||
})
|
||||
},
|
||||
])
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -459,19 +457,17 @@ export async function createShapesForAssets(
|
|||
}
|
||||
}
|
||||
|
||||
editor.batch(() => {
|
||||
// Create any assets
|
||||
const assetsToCreate = assets.filter((asset) => !editor.getAsset(asset.id))
|
||||
if (assetsToCreate.length) {
|
||||
editor.createAssets(assetsToCreate)
|
||||
}
|
||||
// Create any assets
|
||||
const assetsToCreate = assets.filter((asset) => !editor.getAsset(asset.id))
|
||||
if (assetsToCreate.length) {
|
||||
editor.createAssets(assetsToCreate)
|
||||
}
|
||||
|
||||
// Create the shapes
|
||||
editor.createShapes(partials).select(...partials.map((p) => p.id))
|
||||
// Create the shapes
|
||||
editor.createShapes(partials).select(...partials.map((p) => p.id))
|
||||
|
||||
// Re-position shapes so that the center of the group is at the provided point
|
||||
centerSelectionAroundPoint(editor, position)
|
||||
})
|
||||
// Re-position shapes so that the center of the group is at the provided point
|
||||
centerSelectionAroundPoint(editor, position)
|
||||
|
||||
return partials.map((p) => p.id)
|
||||
}
|
||||
|
@ -522,10 +518,8 @@ export function createEmptyBookmarkShape(
|
|||
},
|
||||
}
|
||||
|
||||
editor.batch(() => {
|
||||
editor.createShapes([partial]).select(partial.id)
|
||||
centerSelectionAroundPoint(editor, position)
|
||||
})
|
||||
editor.createShapes([partial]).select(partial.id)
|
||||
centerSelectionAroundPoint(editor, position)
|
||||
|
||||
return editor.getShape(partial.id) as TLBookmarkShape
|
||||
}
|
||||
|
|
|
@ -180,17 +180,15 @@ const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TL
|
|||
return
|
||||
}
|
||||
|
||||
editor.batch(() => {
|
||||
// Create the new asset
|
||||
editor.createAssets([asset])
|
||||
// Create the new asset
|
||||
editor.createAssets([asset])
|
||||
|
||||
// And update the shape
|
||||
editor.updateShapes<TLBookmarkShape>([
|
||||
{
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
props: { assetId: asset.id },
|
||||
},
|
||||
])
|
||||
})
|
||||
// And update the shape
|
||||
editor.updateShapes<TLBookmarkShape>([
|
||||
{
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
props: { assetId: asset.id },
|
||||
},
|
||||
])
|
||||
}, 500)
|
||||
|
|
|
@ -32,9 +32,7 @@ export class DragAndDropManager {
|
|||
|
||||
private setDragTimer(movingShapes: TLShape[], duration: number, cb: () => void) {
|
||||
this.droppingNodeTimer = setTimeout(() => {
|
||||
this.editor.batch(() => {
|
||||
this.handleDrag(this.editor.inputs.currentPagePoint, movingShapes, cb)
|
||||
})
|
||||
this.handleDrag(this.editor.inputs.currentPagePoint, movingShapes, cb)
|
||||
this.droppingNodeTimer = null
|
||||
}, duration)
|
||||
}
|
||||
|
|
|
@ -146,20 +146,18 @@ export class PointingShape extends StateNode {
|
|||
labelGeometry.bounds.containsPoint(pointInShapeSpace, 0) &&
|
||||
labelGeometry.hitTestPoint(pointInShapeSpace)
|
||||
) {
|
||||
this.editor.batch(() => {
|
||||
this.editor.mark('editing on pointer up')
|
||||
this.editor.select(selectingShape.id)
|
||||
this.editor.mark('editing on pointer up')
|
||||
this.editor.select(selectingShape.id)
|
||||
|
||||
const util = this.editor.getShapeUtil(selectingShape)
|
||||
if (this.editor.getInstanceState().isReadonly) {
|
||||
if (!util.canEditInReadOnly(selectingShape)) {
|
||||
return
|
||||
}
|
||||
const util = this.editor.getShapeUtil(selectingShape)
|
||||
if (this.editor.getInstanceState().isReadonly) {
|
||||
if (!util.canEditInReadOnly(selectingShape)) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.editor.setEditingShape(selectingShape.id)
|
||||
this.editor.setCurrentTool('select.editing_shape')
|
||||
})
|
||||
this.editor.setEditingShape(selectingShape.id)
|
||||
this.editor.setCurrentTool('select.editing_shape')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
|
|
@ -294,7 +294,5 @@ function createNShapes(editor: Editor, n: number) {
|
|||
}
|
||||
}
|
||||
|
||||
editor.batch(() => {
|
||||
editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))
|
||||
})
|
||||
editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))
|
||||
}
|
||||
|
|
|
@ -251,13 +251,11 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
|
|||
const handleCreatePageClick = useCallback(() => {
|
||||
if (isReadonlyMode) return
|
||||
|
||||
editor.batch(() => {
|
||||
editor.mark('creating page')
|
||||
const newPageId = PageRecordType.createId()
|
||||
editor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })
|
||||
editor.setCurrentPage(newPageId)
|
||||
setIsEditing(true)
|
||||
})
|
||||
editor.mark('creating page')
|
||||
const newPageId = PageRecordType.createId()
|
||||
editor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })
|
||||
editor.setCurrentPage(newPageId)
|
||||
setIsEditing(true)
|
||||
}, [editor, msg, isReadonlyMode])
|
||||
|
||||
return (
|
||||
|
@ -400,10 +398,8 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
|
|||
editor.renamePage(page.id, name)
|
||||
}
|
||||
} else {
|
||||
editor.batch(() => {
|
||||
setIsEditing(true)
|
||||
editor.setCurrentPage(page.id)
|
||||
})
|
||||
setIsEditing(true)
|
||||
editor.setCurrentPage(page.id)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -78,13 +78,11 @@ function useStyleChangeCallback() {
|
|||
return React.useMemo(
|
||||
() =>
|
||||
function handleStyleChange<T>(style: StyleProp<T>, value: T) {
|
||||
editor.batch(() => {
|
||||
if (editor.isIn('select')) {
|
||||
editor.setStyleForSelectedShapes(style, value)
|
||||
}
|
||||
editor.setStyleForNextShapes(style, value)
|
||||
editor.updateInstanceState({ isChangingStyle: true })
|
||||
})
|
||||
if (editor.isIn('select')) {
|
||||
editor.setStyleForSelectedShapes(style, value)
|
||||
}
|
||||
editor.setStyleForNextShapes(style, value)
|
||||
editor.updateInstanceState({ isChangingStyle: true })
|
||||
|
||||
trackEvent('set-style', { source: 'style-panel', id: style.id, value: value as string })
|
||||
},
|
||||
|
@ -327,13 +325,11 @@ export function OpacitySlider() {
|
|||
const handleOpacityValueChange = React.useCallback(
|
||||
(value: number) => {
|
||||
const item = tldrawSupportedOpacities[value]
|
||||
editor.batch(() => {
|
||||
if (editor.isIn('select')) {
|
||||
editor.setOpacityForSelectedShapes(item)
|
||||
}
|
||||
editor.setOpacityForNextShapes(item)
|
||||
editor.updateInstanceState({ isChangingStyle: true })
|
||||
})
|
||||
if (editor.isIn('select')) {
|
||||
editor.setOpacityForSelectedShapes(item)
|
||||
}
|
||||
editor.setOpacityForNextShapes(item)
|
||||
editor.updateInstanceState({ isChangingStyle: true })
|
||||
|
||||
trackEvent('set-style', { source: 'style-panel', id: 'opacity', value })
|
||||
},
|
||||
|
|
|
@ -386,40 +386,38 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
if (!canApplySelectionAction()) return
|
||||
if (mustGoBackToSelectToolFirst()) return
|
||||
|
||||
editor.batch(() => {
|
||||
trackEvent('convert-to-bookmark', { source })
|
||||
const shapes = editor.getSelectedShapes()
|
||||
trackEvent('convert-to-bookmark', { source })
|
||||
const shapes = editor.getSelectedShapes()
|
||||
|
||||
const createList: TLShapePartial[] = []
|
||||
const deleteList: TLShapeId[] = []
|
||||
for (const shape of shapes) {
|
||||
if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
|
||||
continue
|
||||
const createList: TLShapePartial[] = []
|
||||
const deleteList: TLShapeId[] = []
|
||||
for (const shape of shapes) {
|
||||
if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
|
||||
continue
|
||||
|
||||
const newPos = new Vec(shape.x, shape.y)
|
||||
newPos.rot(-shape.rotation)
|
||||
newPos.add(new Vec(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
|
||||
newPos.rot(shape.rotation)
|
||||
const partial: TLShapePartial<TLBookmarkShape> = {
|
||||
id: createShapeId(),
|
||||
type: 'bookmark',
|
||||
rotation: shape.rotation,
|
||||
x: newPos.x,
|
||||
y: newPos.y,
|
||||
opacity: 1,
|
||||
props: {
|
||||
url: shape.props.url,
|
||||
},
|
||||
}
|
||||
|
||||
createList.push(partial)
|
||||
deleteList.push(shape.id)
|
||||
const newPos = new Vec(shape.x, shape.y)
|
||||
newPos.rot(-shape.rotation)
|
||||
newPos.add(new Vec(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
|
||||
newPos.rot(shape.rotation)
|
||||
const partial: TLShapePartial<TLBookmarkShape> = {
|
||||
id: createShapeId(),
|
||||
type: 'bookmark',
|
||||
rotation: shape.rotation,
|
||||
x: newPos.x,
|
||||
y: newPos.y,
|
||||
opacity: 1,
|
||||
props: {
|
||||
url: shape.props.url,
|
||||
},
|
||||
}
|
||||
|
||||
editor.mark('convert shapes to bookmark')
|
||||
editor.deleteShapes(deleteList)
|
||||
editor.createShapes(createList)
|
||||
})
|
||||
createList.push(partial)
|
||||
deleteList.push(shape.id)
|
||||
}
|
||||
|
||||
editor.mark('convert shapes to bookmark')
|
||||
editor.deleteShapes(deleteList)
|
||||
editor.createShapes(createList)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -431,50 +429,48 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
|
||||
trackEvent('convert-to-embed', { source })
|
||||
|
||||
editor.batch(() => {
|
||||
const ids = editor.getSelectedShapeIds()
|
||||
const shapes = compact(ids.map((id) => editor.getShape(id)))
|
||||
const ids = editor.getSelectedShapeIds()
|
||||
const shapes = compact(ids.map((id) => editor.getShape(id)))
|
||||
|
||||
const createList: TLShapePartial[] = []
|
||||
const deleteList: TLShapeId[] = []
|
||||
for (const shape of shapes) {
|
||||
if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
|
||||
const createList: TLShapePartial[] = []
|
||||
const deleteList: TLShapeId[] = []
|
||||
for (const shape of shapes) {
|
||||
if (!editor.isShapeOfType<TLBookmarkShape>(shape, 'bookmark')) continue
|
||||
|
||||
const { url } = shape.props
|
||||
const { url } = shape.props
|
||||
|
||||
const embedInfo = getEmbedInfo(shape.props.url)
|
||||
const embedInfo = getEmbedInfo(shape.props.url)
|
||||
|
||||
if (!embedInfo) continue
|
||||
if (!embedInfo.definition) continue
|
||||
if (!embedInfo) continue
|
||||
if (!embedInfo.definition) continue
|
||||
|
||||
const { width, height } = embedInfo.definition
|
||||
const { width, height } = embedInfo.definition
|
||||
|
||||
const newPos = new Vec(shape.x, shape.y)
|
||||
newPos.rot(-shape.rotation)
|
||||
newPos.add(new Vec(shape.props.w / 2 - width / 2, shape.props.h / 2 - height / 2))
|
||||
newPos.rot(shape.rotation)
|
||||
const newPos = new Vec(shape.x, shape.y)
|
||||
newPos.rot(-shape.rotation)
|
||||
newPos.add(new Vec(shape.props.w / 2 - width / 2, shape.props.h / 2 - height / 2))
|
||||
newPos.rot(shape.rotation)
|
||||
|
||||
const shapeToCreate: TLShapePartial<TLEmbedShape> = {
|
||||
id: createShapeId(),
|
||||
type: 'embed',
|
||||
x: newPos.x,
|
||||
y: newPos.y,
|
||||
rotation: shape.rotation,
|
||||
props: {
|
||||
url: url,
|
||||
w: width,
|
||||
h: height,
|
||||
},
|
||||
}
|
||||
|
||||
createList.push(shapeToCreate)
|
||||
deleteList.push(shape.id)
|
||||
const shapeToCreate: TLShapePartial<TLEmbedShape> = {
|
||||
id: createShapeId(),
|
||||
type: 'embed',
|
||||
x: newPos.x,
|
||||
y: newPos.y,
|
||||
rotation: shape.rotation,
|
||||
props: {
|
||||
url: url,
|
||||
w: width,
|
||||
h: height,
|
||||
},
|
||||
}
|
||||
|
||||
editor.mark('convert shapes to embed')
|
||||
editor.deleteShapes(deleteList)
|
||||
editor.createShapes(createList)
|
||||
})
|
||||
createList.push(shapeToCreate)
|
||||
deleteList.push(shape.id)
|
||||
}
|
||||
|
||||
editor.mark('convert shapes to embed')
|
||||
editor.deleteShapes(deleteList)
|
||||
editor.createShapes(createList)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -921,14 +917,12 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
kbd: '$a',
|
||||
readonlyOk: true,
|
||||
onSelect(source) {
|
||||
editor.batch(() => {
|
||||
if (mustGoBackToSelectToolFirst()) return
|
||||
if (mustGoBackToSelectToolFirst()) return
|
||||
|
||||
trackEvent('select-all-shapes', { source })
|
||||
trackEvent('select-all-shapes', { source })
|
||||
|
||||
editor.mark('select all kbd')
|
||||
editor.selectAll()
|
||||
})
|
||||
editor.mark('select all kbd')
|
||||
editor.selectAll()
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -1177,12 +1171,10 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
// this needs to be deferred because it causes the menu
|
||||
// UI to unmount which puts us in a dodgy state
|
||||
requestAnimationFrame(() => {
|
||||
editor.batch(() => {
|
||||
trackEvent('toggle-focus-mode', { source })
|
||||
clearDialogs()
|
||||
clearToasts()
|
||||
editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
|
||||
})
|
||||
trackEvent('toggle-focus-mode', { source })
|
||||
clearDialogs()
|
||||
clearToasts()
|
||||
editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
|
||||
})
|
||||
},
|
||||
},
|
||||
|
@ -1271,11 +1263,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
onSelect(source) {
|
||||
const newPageId = PageRecordType.createId()
|
||||
const ids = editor.getSelectedShapeIds()
|
||||
editor.batch(() => {
|
||||
editor.mark('move_shapes_to_page')
|
||||
editor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })
|
||||
editor.moveShapesToPage(ids, newPageId)
|
||||
})
|
||||
editor.mark('move_shapes_to_page')
|
||||
editor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })
|
||||
editor.moveShapesToPage(ids, newPageId)
|
||||
trackEvent('new-page', { source })
|
||||
},
|
||||
},
|
||||
|
@ -1285,14 +1275,12 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
|
|||
kbd: '?t',
|
||||
onSelect(source) {
|
||||
const style = DefaultColorStyle
|
||||
editor.batch(() => {
|
||||
editor.mark('change-color')
|
||||
if (editor.isIn('select')) {
|
||||
editor.setStyleForSelectedShapes(style, 'white')
|
||||
}
|
||||
editor.setStyleForNextShapes(style, 'white')
|
||||
editor.updateInstanceState({ isChangingStyle: true })
|
||||
})
|
||||
editor.mark('change-color')
|
||||
if (editor.isIn('select')) {
|
||||
editor.setStyleForSelectedShapes(style, 'white')
|
||||
}
|
||||
editor.setStyleForNextShapes(style, 'white')
|
||||
editor.updateInstanceState({ isChangingStyle: true })
|
||||
trackEvent('set-style', { source, id: style.id, value: 'white' })
|
||||
},
|
||||
},
|
||||
|
|
|
@ -12,18 +12,16 @@ export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void) {
|
|||
(isOpen: boolean) => {
|
||||
rIsOpen.current = isOpen
|
||||
|
||||
editor.batch(() => {
|
||||
if (isOpen) {
|
||||
editor.complete()
|
||||
editor.addOpenMenu(id)
|
||||
} else {
|
||||
editor.updateInstanceState({
|
||||
openMenus: editor.getOpenMenus().filter((m) => !m.startsWith(id)),
|
||||
})
|
||||
}
|
||||
if (isOpen) {
|
||||
editor.complete()
|
||||
editor.addOpenMenu(id)
|
||||
} else {
|
||||
editor.updateInstanceState({
|
||||
openMenus: editor.getOpenMenus().filter((m) => !m.startsWith(id)),
|
||||
})
|
||||
}
|
||||
|
||||
cb?.(isOpen)
|
||||
})
|
||||
cb?.(isOpen)
|
||||
},
|
||||
[editor, id, cb]
|
||||
)
|
||||
|
|
|
@ -101,11 +101,9 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
|
|||
kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
|
||||
icon: ('geo-' + id) as TLUiIconType,
|
||||
onSelect(source: TLUiEventSource) {
|
||||
editor.batch(() => {
|
||||
editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
|
||||
editor.setCurrentTool('geo')
|
||||
trackEvent('select-tool', { source, id: `geo-${id}` })
|
||||
})
|
||||
editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
|
||||
editor.setCurrentTool('geo')
|
||||
trackEvent('select-tool', { source, id: `geo-${id}` })
|
||||
},
|
||||
})),
|
||||
{
|
||||
|
|
|
@ -17,17 +17,15 @@ export function removeFrame(editor: Editor, ids: TLShapeId[]) {
|
|||
if (!frames.length) return
|
||||
|
||||
const allChildren: TLShapeId[] = []
|
||||
editor.batch(() => {
|
||||
frames.map((frame) => {
|
||||
const children = editor.getSortedChildIdsForParent(frame.id)
|
||||
if (children.length) {
|
||||
editor.reparentShapes(children, frame.parentId, frame.index)
|
||||
allChildren.push(...children)
|
||||
}
|
||||
})
|
||||
editor.setSelectedShapes(allChildren)
|
||||
editor.deleteShapes(ids)
|
||||
frames.map((frame) => {
|
||||
const children = editor.getSortedChildIdsForParent(frame.id)
|
||||
if (children.length) {
|
||||
editor.reparentShapes(children, frame.parentId, frame.index)
|
||||
allChildren.push(...children)
|
||||
}
|
||||
})
|
||||
editor.setSelectedShapes(allChildren)
|
||||
editor.deleteShapes(ids)
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
|
@ -66,28 +64,26 @@ export function fitFrameToContent(editor: Editor, id: TLShapeId, opts = {} as {
|
|||
if (dx === 0 && dy === 0 && frame.props.w === w && frame.props.h === h) return
|
||||
|
||||
const diff = new Vec(dx, dy).rot(frame.rotation)
|
||||
editor.batch(() => {
|
||||
const changes: TLShapePartial[] = childIds.map((child) => {
|
||||
const shape = editor.getShape(child)!
|
||||
return {
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
x: shape.x + dx,
|
||||
y: shape.y + dy,
|
||||
}
|
||||
})
|
||||
|
||||
changes.push({
|
||||
id: frame.id,
|
||||
type: frame.type,
|
||||
x: frame.x - diff.x,
|
||||
y: frame.y - diff.y,
|
||||
props: {
|
||||
w,
|
||||
h,
|
||||
},
|
||||
})
|
||||
|
||||
editor.updateShapes(changes)
|
||||
const changes: TLShapePartial[] = childIds.map((child) => {
|
||||
const shape = editor.getShape(child)!
|
||||
return {
|
||||
id: shape.id,
|
||||
type: shape.type,
|
||||
x: shape.x + dx,
|
||||
y: shape.y + dy,
|
||||
}
|
||||
})
|
||||
|
||||
changes.push({
|
||||
id: frame.id,
|
||||
type: frame.type,
|
||||
x: frame.x - diff.x,
|
||||
y: frame.y - diff.y,
|
||||
props: {
|
||||
w,
|
||||
h,
|
||||
},
|
||||
})
|
||||
|
||||
editor.updateShapes(changes)
|
||||
}
|
||||
|
|
Plik diff jest za duży
Load Diff
Ładowanie…
Reference in New Issue