mirror
/
Tldraw
kopia lustrzana https://github.com/Tldraw/Tldraw
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

alex/no-batches: no batches

alex/no-batches
alex 2024-04-11 16:19:41 +01:00
rodzic 3448e53a64
commit 1ecf54f5f7
25 zmienionych plików z 2049 dodań i 2284 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

79
packages/editor/api-report.md
Wyświetl plik

@ -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)

1164
packages/editor/api/api.json
Wyświetl plik

Plik diff jest za duży Load Diff

1
packages/editor/src/index.ts
Wyświetl plik

@ -139,7 +139,6 @@ export type {
TLAfterChangeHandler,
TLAfterCreateHandler,
TLAfterDeleteHandler,
TLBatchCompleteHandler,
TLBeforeChangeHandler,
TLBeforeCreateHandler,
TLBeforeDeleteHandler,

1144
packages/editor/src/lib/editor/Editor.ts
Wyświetl plik

Plik diff jest za duży Load Diff

40
packages/editor/src/lib/editor/managers/HistoryManager.test.ts
Wyświetl plik

@ -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:

85
packages/editor/src/lib/editor/managers/HistoryManager.ts
Wyświetl plik

@ -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)

160
packages/editor/src/lib/editor/managers/ScribbleManager.ts
Wyświetl plik

@ -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
})
}
}

148
packages/editor/src/lib/editor/managers/SideEffectManager.ts
Wyświetl plik

@ -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)
}
}

1
packages/editor/src/lib/editor/types/emit-types.ts
Wyświetl plik

@ -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': []

16
packages/editor/src/lib/editor/types/history-types.ts
Wyświetl plik

@ -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'

1
packages/store/api-report.md
Wyświetl plik

@ -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;

30
packages/store/api/api.json
Wyświetl plik

@ -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",

24
packages/store/src/lib/Store.ts
Wyświetl plik

@ -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 {

50
packages/tldraw/src/lib/defaultExternalContentHandlers.ts
Wyświetl plik

@ -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
}

22
packages/tldraw/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx
Wyświetl plik

@ -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)

4
packages/tldraw/src/lib/tools/SelectTool/DragAndDropManager.ts
Wyświetl plik

@ -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)
}

20
packages/tldraw/src/lib/tools/SelectTool/childStates/PointingShape.ts
Wyświetl plik

@ -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
}
}

4
packages/tldraw/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx
Wyświetl plik

@ -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))
}

18
packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx
Wyświetl plik

@ -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)
}
}}
/>

24
packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx
Wyświetl plik

@ -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 })
},

168
packages/tldraw/src/lib/ui/context/actions.tsx
Wyświetl plik

@ -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' })
},
},

20
packages/tldraw/src/lib/ui/hooks/useMenuIsOpen.ts
Wyświetl plik

@ -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]
)

8
packages/tldraw/src/lib/ui/hooks/useTools.tsx
Wyświetl plik

@ -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}` })
},
})),
{

62
packages/tldraw/src/lib/utils/frames/frames.ts
Wyświetl plik

@ -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)
}

1040
packages/tldraw/src/lib/utils/tldr/buildFromV1Document.ts
Wyświetl plik

Plik diff jest za duży Load Diff