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

Refactor.

flush-all-on-tick
Mitja Bezenšek 2024-03-21 09:18:33 +01:00
rodzic dce67dbc0c
commit 983b90c768
16 zmienionych plików z 120 dodań i 97 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -670,7 +670,7 @@ export class Editor extends EventEmitter<TLEventMap> {
getCanRedo(): boolean;
getCanUndo(): boolean;
// (undocumented)
getCoalescedEvents: () => TLPointerEventInfo[];
getCoalescedEvents: () => TLPointerMoveEventInfo[];
getContainer: () => HTMLElement;
getContentFromCurrentPage(shapes: TLShape[] | TLShapeId[]): TLContent | undefined;
// @internal
@ -2361,15 +2361,7 @@ export type TLPinchEventName = 'pinch_end' | 'pinch_start' | 'pinch';
export type TLPointerEvent = (info: TLPointerEventInfo) => void;
// @public (undocumented)
export type TLPointerEventInfo = TLBaseEventInfo & {
type: 'pointer';
name: TLPointerEventName;
point: VecLike;
pointerId: number;
button: number;
isPen: boolean;
pagePoint: Vec;
} & TLPointerEventTarget;
export type TLPointerEventInfo = TLBasePointerEventInfo | TLPointerMoveEventInfo;
// @public (undocumented)
export type TLPointerEventName = 'middle_click' | 'pointer_down' | 'pointer_move' | 'pointer_up' | 'right_click';
@ -2391,6 +2383,12 @@ export type TLPointerEventTarget = {
shape: TLShape;
};
// @public (undocumented)
export type TLPointerMoveEventInfo = TLBasePointerEventInfo & {
coalescedInfo: TLPointerMoveEventInfo[];
pagePoint: Vec;
};
// @public (undocumented)
export type TLResizeHandle = SelectionCorner | SelectionEdge;

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

@ -10161,8 +10161,8 @@
},
{
"kind": "Reference",
"text": "TLPointerEventInfo",
"canonicalReference": "@tldraw/editor!TLPointerEventInfo:type"
"text": "TLPointerMoveEventInfo",
"canonicalReference": "@tldraw/editor!TLPointerMoveEventInfo:type"
},
{
"kind": "Content",
@ -40053,44 +40053,17 @@
},
{
"kind": "Reference",
"text": "TLBaseEventInfo",
"canonicalReference": "@tldraw/editor!TLBaseEventInfo:interface"
"text": "TLBasePointerEventInfo",
"canonicalReference": "@tldraw/editor!~TLBasePointerEventInfo:type"
},
{
"kind": "Content",
"text": " & {\n type: 'pointer';\n name: "
"text": " | "
},
{
"kind": "Reference",
"text": "TLPointerEventName",
"canonicalReference": "@tldraw/editor!TLPointerEventName:type"
},
{
"kind": "Content",
"text": ";\n point: "
},
{
"kind": "Reference",
"text": "VecLike",
"canonicalReference": "@tldraw/editor!VecLike:type"
},
{
"kind": "Content",
"text": ";\n pointerId: number;\n button: number;\n isPen: boolean;\n pagePoint: "
},
{
"kind": "Reference",
"text": "Vec",
"canonicalReference": "@tldraw/editor!Vec:class"
},
{
"kind": "Content",
"text": ";\n} & "
},
{
"kind": "Reference",
"text": "TLPointerEventTarget",
"canonicalReference": "@tldraw/editor!TLPointerEventTarget:type"
"text": "TLPointerMoveEventInfo",
"canonicalReference": "@tldraw/editor!TLPointerMoveEventInfo:type"
},
{
"kind": "Content",
@ -40102,7 +40075,7 @@
"name": "TLPointerEventInfo",
"typeTokenRange": {
"startIndex": 1,
"endIndex": 10
"endIndex": 4
}
},
{
@ -40193,6 +40166,55 @@
"endIndex": 10
}
},
{
"kind": "TypeAlias",
"canonicalReference": "@tldraw/editor!TLPointerMoveEventInfo:type",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export type TLPointerMoveEventInfo = "
},
{
"kind": "Reference",
"text": "TLBasePointerEventInfo",
"canonicalReference": "@tldraw/editor!~TLBasePointerEventInfo:type"
},
{
"kind": "Content",
"text": " & {\n coalescedInfo: "
},
{
"kind": "Reference",
"text": "TLPointerMoveEventInfo",
"canonicalReference": "@tldraw/editor!TLPointerMoveEventInfo:type"
},
{
"kind": "Content",
"text": "[];\n pagePoint: "
},
{
"kind": "Reference",
"text": "Vec",
"canonicalReference": "@tldraw/editor!Vec:class"
},
{
"kind": "Content",
"text": ";\n}"
},
{
"kind": "Content",
"text": ";"
}
],
"fileUrlPath": "packages/editor/src/lib/editor/types/event-types.ts",
"releaseTag": "Public",
"name": "TLPointerMoveEventInfo",
"typeTokenRange": {
"startIndex": 1,
"endIndex": 7
}
},
{
"kind": "TypeAlias",
"canonicalReference": "@tldraw/editor!TLResizeHandle:type",

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

@ -222,6 +222,7 @@ export {
type TLPointerEventInfo,
type TLPointerEventName,
type TLPointerEventTarget,
type TLPointerMoveEventInfo,
type TLTickEvent,
type TLWheelEvent,
type TLWheelEventInfo,

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

@ -126,6 +126,7 @@ import {
TLEventInfo,
TLPinchEventInfo,
TLPointerEventInfo,
TLPointerMoveEventInfo,
TLWheelEventInfo,
} from './types/event-types'
import { TLExternalAssetContent, TLExternalContent } from './types/external-content'
@ -8544,8 +8545,6 @@ export class Editor extends EventEmitter<TLEventMap> {
/** @internal */
capturedPointerId: number | null = null
private _eventsToCoalesce = ['pointer_move']
private _shouldCoallesce = (info: TLEventInfo) => {
if (!this._isCoalesableEvent(info)) return false
return (
@ -8554,8 +8553,11 @@ export class Editor extends EventEmitter<TLEventMap> {
)
}
private _isCoalesableEvent = (info: TLEventInfo) => {
return this._eventsToCoalesce.includes(info.name)
private _isCoalesableEvent = (info: TLEventInfo): info is TLPointerMoveEventInfo => {
if ((info as any).coalescedInfo) {
return true
}
return false
}
/**
@ -8573,13 +8575,13 @@ export class Editor extends EventEmitter<TLEventMap> {
dispatch = (info: TLEventInfo): this => {
if (this._pendingEventsForNextTick.length === 0) {
this._pendingEventsForNextTick.push(info)
if (info.name === 'pointer_move') {
if (this._isCoalesableEvent(info)) {
this._allEventsSinceLastTick.push(info)
}
} else {
if (this._shouldCoallesce(info)) {
this._pendingEventsForNextTick[0] = info
if (info.name === 'pointer_move') {
if (this._isCoalesableEvent(info)) {
this._allEventsSinceLastTick.push(info)
}
} else {
@ -8593,7 +8595,7 @@ export class Editor extends EventEmitter<TLEventMap> {
}
private _pendingEventsForNextTick: TLEventInfo[] = []
private _allEventsSinceLastTick: TLPointerEventInfo[] = []
private _allEventsSinceLastTick: TLPointerMoveEventInfo[] = []
getCoalescedEvents = () => {
return this._allEventsSinceLastTick
@ -9053,7 +9055,11 @@ export class Editor extends EventEmitter<TLEventMap> {
// Send the event to the statechart. It will be handled by all
// active states, starting at the root.
this.root.handleEvent(info)
if (this._isCoalesableEvent(info)) {
info.coalescedInfo = this._allEventsSinceLastTick
} else {
this.root.handleEvent(info)
}
this.emit('event', info)
return this

6
packages/editor/src/lib/editor/tools/StateNode.ts
Wyświetl plik

@ -147,11 +147,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
handleEvent = (info: Exclude<TLEventInfo, TLPinchEventInfo>) => {
const cbName = EVENT_NAME_MAP[info.name]
const x = this.getCurrent()
if (cbName === 'onPointerMove') {
this[cbName]?.(info as any, this.editor.getCoalescedEvents())
} else {
this[cbName]?.(info as any)
}
this[cbName]?.(info as any)
if (this.getCurrent() === x && this.getIsActive()) {
x?.handleEvent(info)
}

17
packages/editor/src/lib/editor/types/event-types.ts
Wyświetl plik

@ -50,7 +50,7 @@ export interface TLBaseEventInfo {
}
/** @public */
export type TLPointerEventInfo = TLBaseEventInfo & {
export type TLBasePointerEventInfo = TLBaseEventInfo & {
type: 'pointer'
name: TLPointerEventName
// The pointer position in client space, i.e. clientX / clientY
@ -58,9 +58,17 @@ export type TLPointerEventInfo = TLBaseEventInfo & {
pointerId: number
button: number
isPen: boolean
pagePoint: Vec
} & TLPointerEventTarget
/** @public */
export type TLPointerMoveEventInfo = TLBasePointerEventInfo & {
coalescedInfo: TLPointerMoveEventInfo[]
pagePoint: Vec
}
/** @public */
export type TLPointerEventInfo = TLBasePointerEventInfo | TLPointerMoveEventInfo
/** @public */
export type TLClickEventInfo = TLBaseEventInfo & {
type: 'click'
@ -119,10 +127,7 @@ export type TLEventInfo =
/** @public */
export type TLPointerEvent = (info: TLPointerEventInfo) => void
/** @public */
export type TLPointerMoveEvent = (
info: TLPointerEventInfo,
coalescedInfo: TLPointerEventInfo[]
) => void
export type TLPointerMoveEvent = (info: TLPointerMoveEventInfo) => void
/** @public */
export type TLClickEvent = (info: TLClickEventInfo) => void
/** @public */

3
packages/editor/src/lib/hooks/useCanvasEvents.ts
Wyświetl plik

@ -24,7 +24,6 @@ export function useCanvasEvents() {
editor.dispatch({
type: 'pointer',
target: 'canvas',
pagePoint: editor.inputs.currentPagePoint.clone(),
name: 'right_click',
...getPointerInfo(e),
})
@ -38,7 +37,6 @@ export function useCanvasEvents() {
editor.dispatch({
type: 'pointer',
target: 'canvas',
pagePoint: editor.inputs.currentPagePoint.clone(),
name: 'pointer_down',
...getPointerInfo(e),
})
@ -86,7 +84,6 @@ export function useCanvasEvents() {
editor.dispatch({
type: 'pointer',
target: 'canvas',
pagePoint: editor.inputs.currentPagePoint.clone(),
name: 'pointer_up',
...getPointerInfo(e),
})

2
packages/editor/src/lib/hooks/useHandleEvents.ts
Wyświetl plik

@ -56,6 +56,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
handle,
shape,
pagePoint: editor.inputs.currentPagePoint.clone(),
coalescedInfo: [],
name: 'pointer_move',
...getPointerInfo(e),
})
@ -76,7 +77,6 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
target: 'handle',
handle,
shape,
pagePoint: editor.inputs.currentPagePoint.clone(),
name: 'pointer_up',
...getPointerInfo(e),
})

3
packages/editor/src/lib/hooks/useSelectionEvents.ts
Wyświetl plik

@ -24,7 +24,6 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
target: 'selection',
handle,
name: 'right_click',
pagePoint: editor.inputs.currentPagePoint.clone(),
...getPointerInfo(e),
})
return
@ -52,7 +51,6 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
type: 'pointer',
target: 'selection',
handle,
pagePoint: editor.inputs.currentPagePoint.clone(),
...getPointerInfo(e),
})
stopEventPropagation(e)
@ -74,6 +72,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
target: 'selection',
handle,
pagePoint: editor.inputs.currentPagePoint.clone(),
coalescedInfo: [],
...getPointerInfo(e),
})
}

9
packages/tldraw/api-report.md
Wyświetl plik

@ -98,6 +98,7 @@ import { TLParentId } from '@tldraw/editor';
import { TLPointerEvent } from '@tldraw/editor';
import { TLPointerEventInfo } from '@tldraw/editor';
import { TLPointerEventName } from '@tldraw/editor';
import { TLPointerMoveEventInfo } from '@tldraw/editor';
import { TLRecord } from '@tldraw/editor';
import { TLRotationSnapshot } from '@tldraw/editor';
import { TLSchema } from '@tldraw/editor';
@ -403,7 +404,7 @@ export const DefaultQuickActions: NamedExoticComponent<TLUiQuickActionsProps>;
export function DefaultQuickActionsContent(): JSX_2.Element | undefined;
// @public (undocumented)
export const defaultShapeTools: (typeof ArrowShapeTool | typeof DrawShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[];
export const defaultShapeTools: (typeof ArrowShapeTool | typeof FrameShapeTool | typeof GeoShapeTool | typeof HighlightShapeTool | typeof LineShapeTool | typeof NoteShapeTool | typeof TextShapeTool)[];
// @public (undocumented)
export const defaultShapeUtils: TLAnyShapeUtilConstructor[];
@ -449,7 +450,7 @@ export function downsizeImage(blob: Blob, width: number, height: number, opts?:
// @public (undocumented)
export class DrawShapeTool extends StateNode {
// (undocumented)
static children: () => (typeof Drawing | typeof Idle_2)[];
static children: () => (typeof Drawing | typeof Idle_3)[];
// (undocumented)
static id: string;
// (undocumented)
@ -675,7 +676,7 @@ export function FrameToolbarItem(): JSX_2.Element;
// @public (undocumented)
export class GeoShapeTool extends StateNode {
// (undocumented)
static children: () => (typeof Idle_3 | typeof Pointing_2)[];
static children: () => (typeof Idle_2 | typeof Pointing_2)[];
// (undocumented)
static id: string;
// (undocumented)
@ -870,7 +871,7 @@ export function HexagonToolbarItem(): JSX_2.Element;
// @public (undocumented)
export class HighlightShapeTool extends StateNode {
// (undocumented)
static children: () => (typeof Drawing | typeof Idle_2)[];
static children: () => (typeof Drawing | typeof Idle_3)[];
// (undocumented)
static id: string;
// (undocumented)

24
packages/tldraw/api/api.json
Wyświetl plik

@ -3799,15 +3799,6 @@
"kind": "Content",
"text": " | typeof "
},
{
"kind": "Reference",
"text": "DrawShapeTool",
"canonicalReference": "tldraw!DrawShapeTool:class"
},
{
"kind": "Content",
"text": " | typeof "
},
{
"kind": "Reference",
"text": "FrameShapeTool",
@ -3826,6 +3817,15 @@
"kind": "Content",
"text": " | typeof "
},
{
"kind": "Reference",
"text": "HighlightShapeTool",
"canonicalReference": "tldraw!HighlightShapeTool:class"
},
{
"kind": "Content",
"text": " | typeof "
},
{
"kind": "Reference",
"text": "LineShapeTool",
@ -4460,7 +4460,7 @@
{
"kind": "Reference",
"text": "Idle",
"canonicalReference": "tldraw!~Idle_2:class"
"canonicalReference": "tldraw!~Idle_3:class"
},
{
"kind": "Content",
@ -7922,7 +7922,7 @@
{
"kind": "Reference",
"text": "Idle",
"canonicalReference": "tldraw!~Idle_3:class"
"canonicalReference": "tldraw!~Idle_2:class"
},
{
"kind": "Content",
@ -9732,7 +9732,7 @@
{
"kind": "Reference",
"text": "Idle",
"canonicalReference": "tldraw!~Idle_2:class"
"canonicalReference": "tldraw!~Idle_3:class"
},
{
"kind": "Content",

15
packages/tldraw/src/lib/shapes/draw/toolStates/Drawing.ts
Wyświetl plik

@ -7,7 +7,7 @@ import {
TLDrawShapeSegment,
TLEventHandlers,
TLHighlightShape,
TLPointerEventInfo,
TLPointerMoveEventInfo,
TLShapePartial,
Vec,
VecModel,
@ -25,7 +25,7 @@ type DrawableShape = TLDrawShape | TLHighlightShape
export class Drawing extends StateNode {
static override id = 'drawing'
info = {} as TLPointerEventInfo
info = {} as TLPointerMoveEventInfo
initialShape?: DrawableShape
@ -51,7 +51,7 @@ export class Drawing extends StateNode {
markId = null as null | string
override onEnter = (info: TLPointerEventInfo) => {
override onEnter = (info: TLPointerMoveEventInfo) => {
this.markId = null
this.info = info
this.canDraw = !this.editor.getIsMenuOpen()
@ -61,13 +61,14 @@ export class Drawing extends StateNode {
}
}
override onPointerMove: TLEventHandlers['onPointerMove'] = (_info, coallescedInfo) => {
coallescedInfo.forEach((info) => {
this.processEvents(info)
override onPointerMove: TLEventHandlers['onPointerMove'] = (info: TLPointerMoveEventInfo) => {
const coallescedInfo = info.coalescedInfo
coallescedInfo.forEach((ci: TLPointerMoveEventInfo) => {
this.processEvents(ci)
})
}
processEvents(info: TLPointerEventInfo) {
processEvents(info: TLPointerMoveEventInfo) {
const { inputs } = this.editor
if (this.isPen !== inputs.isPen) {

2
packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx
Wyświetl plik

@ -45,8 +45,6 @@ export const FrameHeading = function FrameHeading({
name: 'pointer_down',
target: 'shape',
shape: editor.getShape(id)!,
pagePoint: editor.inputs.currentPagePoint.clone(),
...event,
})
e.preventDefault()

1
packages/tldraw/src/lib/shapes/shared/useEditableText.ts
Wyświetl plik

@ -185,7 +185,6 @@ export function useEditableText<T extends Extract<TLShape, { props: { text: stri
type: 'pointer',
name: 'pointer_down',
target: 'shape',
pagePoint: editor.inputs.currentPagePoint.clone(),
shape: editor.getShape(id)!,
})

1
packages/tldraw/src/lib/ui/components/Minimap/DefaultMinimap.tsx
Wyświetl plik

@ -124,6 +124,7 @@ export function DefaultMinimap() {
target: 'canvas',
name: 'pointer_move',
pagePoint: editor.inputs.currentPagePoint.clone(),
coalescedInfo: [],
...getPointerInfo(e),
point: screenPoint,
isPen: editor.getInstanceState().isPenMode,

1
packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts
Wyświetl plik

@ -118,7 +118,6 @@ export function useKeyboardShortcuts() {
button: 0,
isPen: editor.getInstanceState().isPenMode,
target: 'canvas',
pagePoint: editor.inputs.currentPagePoint.clone(),
}
editor.dispatch(info)