@fieldnotes/core 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +4 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +4 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/index.d.cts +0 -875
- package/dist/index.d.ts +0 -875
package/dist/index.d.ts
DELETED
|
@@ -1,875 +0,0 @@
|
|
|
1
|
-
type Listener<T> = (data: T) => void;
|
|
2
|
-
declare class EventBus<TEvents extends {
|
|
3
|
-
[K in keyof TEvents]: TEvents[K];
|
|
4
|
-
}> {
|
|
5
|
-
private listeners;
|
|
6
|
-
on<K extends keyof TEvents>(event: K, listener: Listener<TEvents[K]>): () => void;
|
|
7
|
-
off<K extends keyof TEvents>(event: K, listener: Listener<TEvents[K]>): void;
|
|
8
|
-
emit<K extends keyof TEvents>(event: K, data: TEvents[K]): void;
|
|
9
|
-
clear(): void;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface Point {
|
|
13
|
-
x: number;
|
|
14
|
-
y: number;
|
|
15
|
-
}
|
|
16
|
-
interface StrokePoint {
|
|
17
|
-
x: number;
|
|
18
|
-
y: number;
|
|
19
|
-
pressure: number;
|
|
20
|
-
}
|
|
21
|
-
interface Size {
|
|
22
|
-
w: number;
|
|
23
|
-
h: number;
|
|
24
|
-
}
|
|
25
|
-
type Bounds = Point & Size;
|
|
26
|
-
|
|
27
|
-
interface BaseElement {
|
|
28
|
-
id: string;
|
|
29
|
-
type: string;
|
|
30
|
-
position: Point;
|
|
31
|
-
zIndex: number;
|
|
32
|
-
locked: boolean;
|
|
33
|
-
layerId: string;
|
|
34
|
-
}
|
|
35
|
-
interface StrokeElement extends BaseElement {
|
|
36
|
-
type: 'stroke';
|
|
37
|
-
points: StrokePoint[];
|
|
38
|
-
color: string;
|
|
39
|
-
width: number;
|
|
40
|
-
opacity: number;
|
|
41
|
-
}
|
|
42
|
-
interface NoteElement extends BaseElement {
|
|
43
|
-
type: 'note';
|
|
44
|
-
size: Size;
|
|
45
|
-
text: string;
|
|
46
|
-
backgroundColor: string;
|
|
47
|
-
textColor: string;
|
|
48
|
-
}
|
|
49
|
-
interface Binding {
|
|
50
|
-
elementId: string;
|
|
51
|
-
}
|
|
52
|
-
interface ArrowElement extends BaseElement {
|
|
53
|
-
type: 'arrow';
|
|
54
|
-
from: Point;
|
|
55
|
-
to: Point;
|
|
56
|
-
bend: number;
|
|
57
|
-
color: string;
|
|
58
|
-
width: number;
|
|
59
|
-
fromBinding?: Binding;
|
|
60
|
-
toBinding?: Binding;
|
|
61
|
-
}
|
|
62
|
-
interface ImageElement extends BaseElement {
|
|
63
|
-
type: 'image';
|
|
64
|
-
size: Size;
|
|
65
|
-
src: string;
|
|
66
|
-
}
|
|
67
|
-
interface HtmlElement extends BaseElement {
|
|
68
|
-
type: 'html';
|
|
69
|
-
size: Size;
|
|
70
|
-
domId?: string;
|
|
71
|
-
}
|
|
72
|
-
interface TextElement extends BaseElement {
|
|
73
|
-
type: 'text';
|
|
74
|
-
size: Size;
|
|
75
|
-
text: string;
|
|
76
|
-
fontSize: number;
|
|
77
|
-
color: string;
|
|
78
|
-
textAlign: 'left' | 'center' | 'right';
|
|
79
|
-
}
|
|
80
|
-
type ShapeKind = 'rectangle' | 'ellipse';
|
|
81
|
-
interface ShapeElement extends BaseElement {
|
|
82
|
-
type: 'shape';
|
|
83
|
-
shape: ShapeKind;
|
|
84
|
-
size: Size;
|
|
85
|
-
strokeColor: string;
|
|
86
|
-
strokeWidth: number;
|
|
87
|
-
fillColor: string;
|
|
88
|
-
}
|
|
89
|
-
type HexOrientation = 'pointy' | 'flat';
|
|
90
|
-
interface GridElement extends BaseElement {
|
|
91
|
-
type: 'grid';
|
|
92
|
-
gridType: 'square' | 'hex';
|
|
93
|
-
hexOrientation: HexOrientation;
|
|
94
|
-
cellSize: number;
|
|
95
|
-
strokeColor: string;
|
|
96
|
-
strokeWidth: number;
|
|
97
|
-
opacity: number;
|
|
98
|
-
}
|
|
99
|
-
type CanvasElement = StrokeElement | NoteElement | ArrowElement | ImageElement | HtmlElement | TextElement | ShapeElement | GridElement;
|
|
100
|
-
type ElementType = CanvasElement['type'];
|
|
101
|
-
|
|
102
|
-
interface Layer {
|
|
103
|
-
id: string;
|
|
104
|
-
name: string;
|
|
105
|
-
visible: boolean;
|
|
106
|
-
locked: boolean;
|
|
107
|
-
order: number;
|
|
108
|
-
opacity: number;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
interface CanvasState {
|
|
112
|
-
version: number;
|
|
113
|
-
camera: {
|
|
114
|
-
position: Point;
|
|
115
|
-
zoom: number;
|
|
116
|
-
};
|
|
117
|
-
elements: CanvasElement[];
|
|
118
|
-
layers?: Layer[];
|
|
119
|
-
}
|
|
120
|
-
declare function exportState(elements: CanvasElement[], camera: {
|
|
121
|
-
position: Point;
|
|
122
|
-
zoom: number;
|
|
123
|
-
}, layers?: Layer[]): CanvasState;
|
|
124
|
-
declare function parseState(json: string): CanvasState;
|
|
125
|
-
|
|
126
|
-
declare function snapPoint(point: Point, gridSize: number): Point;
|
|
127
|
-
|
|
128
|
-
interface ElementUpdateEvent {
|
|
129
|
-
previous: CanvasElement;
|
|
130
|
-
current: CanvasElement;
|
|
131
|
-
}
|
|
132
|
-
interface ElementStoreEvents {
|
|
133
|
-
add: CanvasElement;
|
|
134
|
-
remove: CanvasElement;
|
|
135
|
-
update: ElementUpdateEvent;
|
|
136
|
-
clear: null;
|
|
137
|
-
}
|
|
138
|
-
declare class ElementStore {
|
|
139
|
-
private elements;
|
|
140
|
-
private bus;
|
|
141
|
-
private layerOrderMap;
|
|
142
|
-
get count(): number;
|
|
143
|
-
setLayerOrder(order: Map<string, number>): void;
|
|
144
|
-
getAll(): CanvasElement[];
|
|
145
|
-
getById(id: string): CanvasElement | undefined;
|
|
146
|
-
getElementsByType<T extends ElementType>(type: T): Extract<CanvasElement, {
|
|
147
|
-
type: T;
|
|
148
|
-
}>[];
|
|
149
|
-
add(element: CanvasElement): void;
|
|
150
|
-
update(id: string, partial: Partial<CanvasElement>): void;
|
|
151
|
-
remove(id: string): void;
|
|
152
|
-
clear(): void;
|
|
153
|
-
snapshot(): CanvasElement[];
|
|
154
|
-
loadSnapshot(elements: CanvasElement[]): void;
|
|
155
|
-
on<K extends keyof ElementStoreEvents>(event: K, listener: (data: ElementStoreEvents[K]) => void): () => void;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
interface CameraOptions {
|
|
159
|
-
minZoom?: number;
|
|
160
|
-
maxZoom?: number;
|
|
161
|
-
}
|
|
162
|
-
declare class Camera {
|
|
163
|
-
private x;
|
|
164
|
-
private y;
|
|
165
|
-
private z;
|
|
166
|
-
private readonly minZoom;
|
|
167
|
-
private readonly maxZoom;
|
|
168
|
-
private changeListeners;
|
|
169
|
-
constructor(options?: CameraOptions);
|
|
170
|
-
get position(): Point;
|
|
171
|
-
get zoom(): number;
|
|
172
|
-
pan(dx: number, dy: number): void;
|
|
173
|
-
moveTo(x: number, y: number): void;
|
|
174
|
-
setZoom(level: number): void;
|
|
175
|
-
zoomAt(level: number, screenPoint: Point): void;
|
|
176
|
-
screenToWorld(screen: Point): Point;
|
|
177
|
-
worldToScreen(world: Point): Point;
|
|
178
|
-
toCSSTransform(): string;
|
|
179
|
-
onChange(listener: () => void): () => void;
|
|
180
|
-
private notifyChange;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
declare class LayerManager {
|
|
184
|
-
private readonly store;
|
|
185
|
-
private layers;
|
|
186
|
-
private _activeLayerId;
|
|
187
|
-
private bus;
|
|
188
|
-
constructor(store: ElementStore);
|
|
189
|
-
get activeLayer(): Layer;
|
|
190
|
-
get activeLayerId(): string;
|
|
191
|
-
getLayers(): Layer[];
|
|
192
|
-
getLayer(id: string): Layer | undefined;
|
|
193
|
-
isLayerVisible(id: string): boolean;
|
|
194
|
-
isLayerLocked(id: string): boolean;
|
|
195
|
-
createLayer(name?: string): Layer;
|
|
196
|
-
removeLayer(id: string): void;
|
|
197
|
-
renameLayer(id: string, name: string): void;
|
|
198
|
-
reorderLayer(id: string, newOrder: number): void;
|
|
199
|
-
setLayerVisible(id: string, visible: boolean): boolean;
|
|
200
|
-
setLayerLocked(id: string, locked: boolean): boolean;
|
|
201
|
-
setActiveLayer(id: string): void;
|
|
202
|
-
moveElementToLayer(elementId: string, layerId: string): void;
|
|
203
|
-
snapshot(): Layer[];
|
|
204
|
-
loadSnapshot(layers: Layer[]): void;
|
|
205
|
-
on(event: 'change', callback: () => void): () => void;
|
|
206
|
-
addLayerDirect(layer: Layer): void;
|
|
207
|
-
removeLayerDirect(id: string): void;
|
|
208
|
-
updateLayerDirect(id: string, props: Omit<Partial<Layer>, 'id'>): void;
|
|
209
|
-
private syncLayerOrder;
|
|
210
|
-
private findFallbackLayer;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
interface AutoSaveOptions {
|
|
214
|
-
key?: string;
|
|
215
|
-
debounceMs?: number;
|
|
216
|
-
layerManager?: LayerManager;
|
|
217
|
-
}
|
|
218
|
-
declare class AutoSave {
|
|
219
|
-
private readonly store;
|
|
220
|
-
private readonly camera;
|
|
221
|
-
private readonly key;
|
|
222
|
-
private readonly debounceMs;
|
|
223
|
-
private readonly layerManager?;
|
|
224
|
-
private timerId;
|
|
225
|
-
private unsubscribers;
|
|
226
|
-
constructor(store: ElementStore, camera: Camera, options?: AutoSaveOptions);
|
|
227
|
-
start(): void;
|
|
228
|
-
stop(): void;
|
|
229
|
-
load(): CanvasState | null;
|
|
230
|
-
clear(): void;
|
|
231
|
-
private scheduleSave;
|
|
232
|
-
private cancelPending;
|
|
233
|
-
private save;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
type BackgroundPattern = 'dots' | 'grid' | 'none';
|
|
237
|
-
interface BackgroundOptions {
|
|
238
|
-
pattern?: BackgroundPattern;
|
|
239
|
-
spacing?: number;
|
|
240
|
-
color?: string;
|
|
241
|
-
dotRadius?: number;
|
|
242
|
-
lineWidth?: number;
|
|
243
|
-
}
|
|
244
|
-
declare class Background {
|
|
245
|
-
private readonly pattern;
|
|
246
|
-
private readonly spacing;
|
|
247
|
-
private readonly color;
|
|
248
|
-
private readonly dotRadius;
|
|
249
|
-
private readonly lineWidth;
|
|
250
|
-
constructor(options?: BackgroundOptions);
|
|
251
|
-
render(ctx: CanvasRenderingContext2D, camera: Camera): void;
|
|
252
|
-
private adaptSpacing;
|
|
253
|
-
private renderDots;
|
|
254
|
-
private renderGrid;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
interface ToolContext {
|
|
258
|
-
camera: Camera;
|
|
259
|
-
store: ElementStore;
|
|
260
|
-
requestRender: () => void;
|
|
261
|
-
switchTool?: (name: string) => void;
|
|
262
|
-
editElement?: (id: string) => void;
|
|
263
|
-
setCursor?: (cursor: string) => void;
|
|
264
|
-
snapToGrid?: boolean;
|
|
265
|
-
gridSize?: number;
|
|
266
|
-
activeLayerId?: string;
|
|
267
|
-
isLayerVisible?: (layerId: string) => boolean;
|
|
268
|
-
isLayerLocked?: (layerId: string) => boolean;
|
|
269
|
-
}
|
|
270
|
-
interface PointerState {
|
|
271
|
-
x: number;
|
|
272
|
-
y: number;
|
|
273
|
-
pressure: number;
|
|
274
|
-
}
|
|
275
|
-
interface Tool {
|
|
276
|
-
readonly name: string;
|
|
277
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
278
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
279
|
-
onPointerUp(state: PointerState, ctx: ToolContext): void;
|
|
280
|
-
onHover?(state: PointerState, ctx: ToolContext): void;
|
|
281
|
-
onActivate?(ctx: ToolContext): void;
|
|
282
|
-
onDeactivate?(ctx: ToolContext): void;
|
|
283
|
-
renderOverlay?(ctx: CanvasRenderingContext2D): void;
|
|
284
|
-
}
|
|
285
|
-
type ToolName = 'hand' | 'select' | 'pencil' | 'eraser' | 'arrow' | 'note' | 'image' | 'text' | 'shape';
|
|
286
|
-
|
|
287
|
-
declare class ToolManager {
|
|
288
|
-
private tools;
|
|
289
|
-
private current;
|
|
290
|
-
private changeListeners;
|
|
291
|
-
get activeTool(): Tool | null;
|
|
292
|
-
get toolNames(): string[];
|
|
293
|
-
register(tool: Tool): void;
|
|
294
|
-
getTool<T extends Tool = Tool>(name: string): T | undefined;
|
|
295
|
-
setTool(name: string, ctx: ToolContext): void;
|
|
296
|
-
handlePointerDown(state: PointerState, ctx: ToolContext): void;
|
|
297
|
-
handlePointerMove(state: PointerState, ctx: ToolContext): void;
|
|
298
|
-
handlePointerUp(state: PointerState, ctx: ToolContext): void;
|
|
299
|
-
onChange(listener: (name: string) => void): () => void;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
interface Command {
|
|
303
|
-
execute(store: ElementStore): void;
|
|
304
|
-
undo(store: ElementStore): void;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
interface HistoryStackOptions {
|
|
308
|
-
maxSize?: number;
|
|
309
|
-
}
|
|
310
|
-
declare class HistoryStack {
|
|
311
|
-
private undoStack;
|
|
312
|
-
private redoStack;
|
|
313
|
-
private readonly maxSize;
|
|
314
|
-
private changeListeners;
|
|
315
|
-
constructor(options?: HistoryStackOptions);
|
|
316
|
-
get canUndo(): boolean;
|
|
317
|
-
get canRedo(): boolean;
|
|
318
|
-
get undoCount(): number;
|
|
319
|
-
get redoCount(): number;
|
|
320
|
-
push(command: Command): void;
|
|
321
|
-
undo(store: ElementStore): boolean;
|
|
322
|
-
redo(store: ElementStore): boolean;
|
|
323
|
-
clear(): void;
|
|
324
|
-
onChange(listener: () => void): () => void;
|
|
325
|
-
private notifyChange;
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
declare class HistoryRecorder {
|
|
329
|
-
private readonly store;
|
|
330
|
-
private readonly stack;
|
|
331
|
-
private recording;
|
|
332
|
-
private transaction;
|
|
333
|
-
private updateSnapshots;
|
|
334
|
-
private unsubscribers;
|
|
335
|
-
constructor(store: ElementStore, stack: HistoryStack);
|
|
336
|
-
pause(): void;
|
|
337
|
-
resume(): void;
|
|
338
|
-
begin(): void;
|
|
339
|
-
commit(): void;
|
|
340
|
-
rollback(): void;
|
|
341
|
-
destroy(): void;
|
|
342
|
-
private record;
|
|
343
|
-
private onAdd;
|
|
344
|
-
private onRemove;
|
|
345
|
-
private onUpdate;
|
|
346
|
-
private flushUpdateSnapshots;
|
|
347
|
-
}
|
|
348
|
-
|
|
349
|
-
interface InputHandlerOptions {
|
|
350
|
-
toolManager?: ToolManager;
|
|
351
|
-
toolContext?: ToolContext;
|
|
352
|
-
historyRecorder?: HistoryRecorder;
|
|
353
|
-
historyStack?: HistoryStack;
|
|
354
|
-
}
|
|
355
|
-
declare class InputHandler {
|
|
356
|
-
private readonly element;
|
|
357
|
-
private readonly camera;
|
|
358
|
-
private isPanning;
|
|
359
|
-
private lastPointer;
|
|
360
|
-
private spaceHeld;
|
|
361
|
-
private activePointers;
|
|
362
|
-
private lastPinchDistance;
|
|
363
|
-
private lastPinchCenter;
|
|
364
|
-
private toolManager;
|
|
365
|
-
private toolContext;
|
|
366
|
-
private historyRecorder;
|
|
367
|
-
private historyStack;
|
|
368
|
-
private isToolActive;
|
|
369
|
-
private readonly abortController;
|
|
370
|
-
constructor(element: HTMLElement, camera: Camera, options?: InputHandlerOptions);
|
|
371
|
-
setToolManager(toolManager: ToolManager, toolContext: ToolContext): void;
|
|
372
|
-
destroy(): void;
|
|
373
|
-
private bind;
|
|
374
|
-
private onWheel;
|
|
375
|
-
private onPointerDown;
|
|
376
|
-
private onPointerMove;
|
|
377
|
-
private onPointerUp;
|
|
378
|
-
private onKeyDown;
|
|
379
|
-
private onKeyUp;
|
|
380
|
-
private startPinch;
|
|
381
|
-
private handlePinchMove;
|
|
382
|
-
private getPinchPoints;
|
|
383
|
-
private distance;
|
|
384
|
-
private midpoint;
|
|
385
|
-
private toPointerState;
|
|
386
|
-
private dispatchToolDown;
|
|
387
|
-
private dispatchToolMove;
|
|
388
|
-
private dispatchToolHover;
|
|
389
|
-
private dispatchToolUp;
|
|
390
|
-
private deleteSelected;
|
|
391
|
-
private handleUndo;
|
|
392
|
-
private handleRedo;
|
|
393
|
-
private cancelToolIfActive;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
interface ExportImageOptions {
|
|
397
|
-
scale?: number;
|
|
398
|
-
padding?: number;
|
|
399
|
-
background?: string;
|
|
400
|
-
filter?: (element: CanvasElement) => boolean;
|
|
401
|
-
}
|
|
402
|
-
declare function exportImage(store: ElementStore, options?: ExportImageOptions, layerManager?: LayerManager): Promise<Blob | null>;
|
|
403
|
-
|
|
404
|
-
interface ViewportOptions {
|
|
405
|
-
camera?: CameraOptions;
|
|
406
|
-
background?: BackgroundOptions;
|
|
407
|
-
}
|
|
408
|
-
declare class Viewport {
|
|
409
|
-
private readonly container;
|
|
410
|
-
readonly camera: Camera;
|
|
411
|
-
readonly store: ElementStore;
|
|
412
|
-
readonly layerManager: LayerManager;
|
|
413
|
-
readonly toolManager: ToolManager;
|
|
414
|
-
readonly history: HistoryStack;
|
|
415
|
-
readonly domLayer: HTMLDivElement;
|
|
416
|
-
private readonly canvasEl;
|
|
417
|
-
private readonly wrapper;
|
|
418
|
-
private readonly unsubCamera;
|
|
419
|
-
private readonly unsubStore;
|
|
420
|
-
private readonly inputHandler;
|
|
421
|
-
private readonly background;
|
|
422
|
-
private readonly renderer;
|
|
423
|
-
private readonly noteEditor;
|
|
424
|
-
private readonly historyRecorder;
|
|
425
|
-
readonly toolContext: ToolContext;
|
|
426
|
-
private resizeObserver;
|
|
427
|
-
private animFrameId;
|
|
428
|
-
private _snapToGrid;
|
|
429
|
-
private readonly _gridSize;
|
|
430
|
-
private needsRender;
|
|
431
|
-
private domNodes;
|
|
432
|
-
private htmlContent;
|
|
433
|
-
private interactingElementId;
|
|
434
|
-
constructor(container: HTMLElement, options?: ViewportOptions);
|
|
435
|
-
get ctx(): CanvasRenderingContext2D | null;
|
|
436
|
-
get snapToGrid(): boolean;
|
|
437
|
-
setSnapToGrid(enabled: boolean): void;
|
|
438
|
-
requestRender(): void;
|
|
439
|
-
exportState(): CanvasState;
|
|
440
|
-
exportJSON(): string;
|
|
441
|
-
exportImage(options?: ExportImageOptions): Promise<Blob | null>;
|
|
442
|
-
loadState(state: CanvasState): void;
|
|
443
|
-
loadJSON(json: string): void;
|
|
444
|
-
undo(): boolean;
|
|
445
|
-
redo(): boolean;
|
|
446
|
-
addImage(src: string, position: {
|
|
447
|
-
x: number;
|
|
448
|
-
y: number;
|
|
449
|
-
}, size?: {
|
|
450
|
-
w: number;
|
|
451
|
-
h: number;
|
|
452
|
-
}): string;
|
|
453
|
-
addHtmlElement(dom: HTMLElement, position: {
|
|
454
|
-
x: number;
|
|
455
|
-
y: number;
|
|
456
|
-
}, size?: {
|
|
457
|
-
w: number;
|
|
458
|
-
h: number;
|
|
459
|
-
}): string;
|
|
460
|
-
addGrid(input: {
|
|
461
|
-
gridType?: 'square' | 'hex';
|
|
462
|
-
hexOrientation?: 'pointy' | 'flat';
|
|
463
|
-
cellSize?: number;
|
|
464
|
-
strokeColor?: string;
|
|
465
|
-
strokeWidth?: number;
|
|
466
|
-
opacity?: number;
|
|
467
|
-
}): string;
|
|
468
|
-
updateGrid(updates: Partial<Pick<GridElement, 'gridType' | 'hexOrientation' | 'cellSize' | 'strokeColor' | 'strokeWidth' | 'opacity'>>): void;
|
|
469
|
-
removeGrid(): void;
|
|
470
|
-
destroy(): void;
|
|
471
|
-
private startRenderLoop;
|
|
472
|
-
private render;
|
|
473
|
-
private startEditingElement;
|
|
474
|
-
private onTextEditStop;
|
|
475
|
-
private onDblClick;
|
|
476
|
-
private hitTestWorld;
|
|
477
|
-
private startInteracting;
|
|
478
|
-
stopInteracting(): void;
|
|
479
|
-
private onInteractNodePointerDown;
|
|
480
|
-
private onInteractKeyDown;
|
|
481
|
-
private onInteractPointerDown;
|
|
482
|
-
private onDragOver;
|
|
483
|
-
private onDrop;
|
|
484
|
-
private syncDomNode;
|
|
485
|
-
private renderDomContent;
|
|
486
|
-
private unbindArrowsFrom;
|
|
487
|
-
private hideDomNode;
|
|
488
|
-
private removeDomNode;
|
|
489
|
-
private clearDomNodes;
|
|
490
|
-
private reattachHtmlContent;
|
|
491
|
-
private createWrapper;
|
|
492
|
-
private createCanvas;
|
|
493
|
-
private createDomLayer;
|
|
494
|
-
private applyCameraTransform;
|
|
495
|
-
private syncCanvasSize;
|
|
496
|
-
private observeResize;
|
|
497
|
-
}
|
|
498
|
-
|
|
499
|
-
declare class ElementRenderer {
|
|
500
|
-
private store;
|
|
501
|
-
private imageCache;
|
|
502
|
-
private onImageLoad;
|
|
503
|
-
private camera;
|
|
504
|
-
private canvasSize;
|
|
505
|
-
setStore(store: ElementStore): void;
|
|
506
|
-
setOnImageLoad(callback: () => void): void;
|
|
507
|
-
setCamera(camera: Camera): void;
|
|
508
|
-
setCanvasSize(w: number, h: number): void;
|
|
509
|
-
isDomElement(element: CanvasElement): boolean;
|
|
510
|
-
renderCanvasElement(ctx: CanvasRenderingContext2D, element: CanvasElement): void;
|
|
511
|
-
private renderStroke;
|
|
512
|
-
private renderArrow;
|
|
513
|
-
private renderArrowhead;
|
|
514
|
-
private getVisualEndpoints;
|
|
515
|
-
private renderShape;
|
|
516
|
-
private fillShapePath;
|
|
517
|
-
private strokeShapePath;
|
|
518
|
-
private renderGrid;
|
|
519
|
-
private renderImage;
|
|
520
|
-
private getImage;
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
declare class NoteEditor {
|
|
524
|
-
private editingId;
|
|
525
|
-
private editingNode;
|
|
526
|
-
private blurHandler;
|
|
527
|
-
private keyHandler;
|
|
528
|
-
private pointerHandler;
|
|
529
|
-
private pendingEditId;
|
|
530
|
-
private onStopCallback;
|
|
531
|
-
get isEditing(): boolean;
|
|
532
|
-
get editingElementId(): string | null;
|
|
533
|
-
setOnStop(callback: (elementId: string) => void): void;
|
|
534
|
-
startEditing(node: HTMLDivElement, elementId: string, store: ElementStore): void;
|
|
535
|
-
stopEditing(store: ElementStore): void;
|
|
536
|
-
destroy(store: ElementStore): void;
|
|
537
|
-
private activateEditing;
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
declare function createId(prefix: string): string;
|
|
541
|
-
|
|
542
|
-
interface BaseDefaults {
|
|
543
|
-
position?: Point;
|
|
544
|
-
zIndex?: number;
|
|
545
|
-
locked?: boolean;
|
|
546
|
-
layerId?: string;
|
|
547
|
-
}
|
|
548
|
-
interface StrokeInput extends BaseDefaults {
|
|
549
|
-
points: StrokePoint[];
|
|
550
|
-
color?: string;
|
|
551
|
-
width?: number;
|
|
552
|
-
opacity?: number;
|
|
553
|
-
}
|
|
554
|
-
interface NoteInput extends BaseDefaults {
|
|
555
|
-
position: Point;
|
|
556
|
-
size?: Size;
|
|
557
|
-
text?: string;
|
|
558
|
-
backgroundColor?: string;
|
|
559
|
-
textColor?: string;
|
|
560
|
-
}
|
|
561
|
-
interface ArrowInput extends BaseDefaults {
|
|
562
|
-
from: Point;
|
|
563
|
-
to: Point;
|
|
564
|
-
bend?: number;
|
|
565
|
-
color?: string;
|
|
566
|
-
width?: number;
|
|
567
|
-
fromBinding?: Binding;
|
|
568
|
-
toBinding?: Binding;
|
|
569
|
-
}
|
|
570
|
-
interface ImageInput extends BaseDefaults {
|
|
571
|
-
position: Point;
|
|
572
|
-
size: Size;
|
|
573
|
-
src: string;
|
|
574
|
-
}
|
|
575
|
-
interface HtmlInput extends BaseDefaults {
|
|
576
|
-
position: Point;
|
|
577
|
-
size: Size;
|
|
578
|
-
domId?: string;
|
|
579
|
-
}
|
|
580
|
-
interface TextInput extends BaseDefaults {
|
|
581
|
-
position: Point;
|
|
582
|
-
size?: Size;
|
|
583
|
-
text?: string;
|
|
584
|
-
fontSize?: number;
|
|
585
|
-
color?: string;
|
|
586
|
-
textAlign?: 'left' | 'center' | 'right';
|
|
587
|
-
}
|
|
588
|
-
declare function createStroke(input: StrokeInput): StrokeElement;
|
|
589
|
-
declare function createNote(input: NoteInput): NoteElement;
|
|
590
|
-
declare function createArrow(input: ArrowInput): ArrowElement;
|
|
591
|
-
declare function createImage(input: ImageInput): ImageElement;
|
|
592
|
-
declare function createHtmlElement(input: HtmlInput): HtmlElement;
|
|
593
|
-
interface ShapeInput extends BaseDefaults {
|
|
594
|
-
position: Point;
|
|
595
|
-
size: Size;
|
|
596
|
-
shape?: ShapeKind;
|
|
597
|
-
strokeColor?: string;
|
|
598
|
-
strokeWidth?: number;
|
|
599
|
-
fillColor?: string;
|
|
600
|
-
}
|
|
601
|
-
declare function createShape(input: ShapeInput): ShapeElement;
|
|
602
|
-
interface GridInput extends BaseDefaults {
|
|
603
|
-
gridType?: 'square' | 'hex';
|
|
604
|
-
hexOrientation?: HexOrientation;
|
|
605
|
-
cellSize?: number;
|
|
606
|
-
strokeColor?: string;
|
|
607
|
-
strokeWidth?: number;
|
|
608
|
-
opacity?: number;
|
|
609
|
-
}
|
|
610
|
-
declare function createGrid(input: GridInput): GridElement;
|
|
611
|
-
declare function createText(input: TextInput): TextElement;
|
|
612
|
-
|
|
613
|
-
interface Rect {
|
|
614
|
-
x: number;
|
|
615
|
-
y: number;
|
|
616
|
-
w: number;
|
|
617
|
-
h: number;
|
|
618
|
-
}
|
|
619
|
-
declare function getArrowControlPoint(from: Point, to: Point, bend: number): Point;
|
|
620
|
-
declare function getArrowMidpoint(from: Point, to: Point, bend: number): Point;
|
|
621
|
-
declare function getBendFromPoint(from: Point, to: Point, dragPoint: Point): number;
|
|
622
|
-
declare function getArrowTangentAngle(from: Point, to: Point, bend: number, t: number): number;
|
|
623
|
-
declare function isNearBezier(point: Point, from: Point, to: Point, bend: number, threshold: number): boolean;
|
|
624
|
-
declare function getArrowBounds(from: Point, to: Point, bend: number): Rect;
|
|
625
|
-
|
|
626
|
-
declare function isBindable(element: CanvasElement): boolean;
|
|
627
|
-
declare function getElementCenter(element: CanvasElement): Point;
|
|
628
|
-
declare function getElementBounds(element: CanvasElement): Rect | null;
|
|
629
|
-
declare function getEdgeIntersection(bounds: Rect, outsidePoint: Point): Point;
|
|
630
|
-
declare function findBindTarget(point: Point, store: ElementStore, threshold: number, excludeId?: string, filter?: (el: CanvasElement) => boolean): CanvasElement | null;
|
|
631
|
-
declare function findBoundArrows(elementId: string, store: ElementStore): ArrowElement[];
|
|
632
|
-
declare function updateBoundArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement> | null;
|
|
633
|
-
declare function clearStaleBindings(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement> | null;
|
|
634
|
-
declare function unbindArrow(arrow: ArrowElement, store: ElementStore): Partial<ArrowElement>;
|
|
635
|
-
|
|
636
|
-
declare class AddElementCommand implements Command {
|
|
637
|
-
private readonly element;
|
|
638
|
-
constructor(element: CanvasElement);
|
|
639
|
-
execute(store: ElementStore): void;
|
|
640
|
-
undo(store: ElementStore): void;
|
|
641
|
-
}
|
|
642
|
-
declare class RemoveElementCommand implements Command {
|
|
643
|
-
private readonly element;
|
|
644
|
-
constructor(element: CanvasElement);
|
|
645
|
-
execute(store: ElementStore): void;
|
|
646
|
-
undo(store: ElementStore): void;
|
|
647
|
-
}
|
|
648
|
-
declare class UpdateElementCommand implements Command {
|
|
649
|
-
private readonly id;
|
|
650
|
-
private readonly previous;
|
|
651
|
-
private readonly current;
|
|
652
|
-
constructor(id: string, previous: CanvasElement, current: CanvasElement);
|
|
653
|
-
execute(store: ElementStore): void;
|
|
654
|
-
undo(store: ElementStore): void;
|
|
655
|
-
}
|
|
656
|
-
declare class BatchCommand implements Command {
|
|
657
|
-
readonly commands: readonly Command[];
|
|
658
|
-
constructor(commands: Command[]);
|
|
659
|
-
execute(store: ElementStore): void;
|
|
660
|
-
undo(store: ElementStore): void;
|
|
661
|
-
}
|
|
662
|
-
|
|
663
|
-
declare class HandTool implements Tool {
|
|
664
|
-
readonly name = "hand";
|
|
665
|
-
private panning;
|
|
666
|
-
private lastScreen;
|
|
667
|
-
onActivate(ctx: ToolContext): void;
|
|
668
|
-
onDeactivate(ctx: ToolContext): void;
|
|
669
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
670
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
671
|
-
onPointerUp(_state: PointerState, ctx: ToolContext): void;
|
|
672
|
-
}
|
|
673
|
-
|
|
674
|
-
interface PencilToolOptions {
|
|
675
|
-
color?: string;
|
|
676
|
-
width?: number;
|
|
677
|
-
smoothing?: number;
|
|
678
|
-
}
|
|
679
|
-
declare class PencilTool implements Tool {
|
|
680
|
-
readonly name = "pencil";
|
|
681
|
-
private drawing;
|
|
682
|
-
private points;
|
|
683
|
-
private color;
|
|
684
|
-
private width;
|
|
685
|
-
private smoothing;
|
|
686
|
-
constructor(options?: PencilToolOptions);
|
|
687
|
-
onActivate(ctx: ToolContext): void;
|
|
688
|
-
onDeactivate(ctx: ToolContext): void;
|
|
689
|
-
setOptions(options: PencilToolOptions): void;
|
|
690
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
691
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
692
|
-
onPointerUp(_state: PointerState, ctx: ToolContext): void;
|
|
693
|
-
renderOverlay(ctx: CanvasRenderingContext2D): void;
|
|
694
|
-
}
|
|
695
|
-
|
|
696
|
-
interface EraserToolOptions {
|
|
697
|
-
radius?: number;
|
|
698
|
-
}
|
|
699
|
-
declare class EraserTool implements Tool {
|
|
700
|
-
readonly name = "eraser";
|
|
701
|
-
private erasing;
|
|
702
|
-
private readonly radius;
|
|
703
|
-
private readonly cursor;
|
|
704
|
-
constructor(options?: EraserToolOptions);
|
|
705
|
-
onActivate(ctx: ToolContext): void;
|
|
706
|
-
onDeactivate(ctx: ToolContext): void;
|
|
707
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
708
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
709
|
-
onPointerUp(_state: PointerState, _ctx: ToolContext): void;
|
|
710
|
-
private eraseAt;
|
|
711
|
-
private strokeIntersects;
|
|
712
|
-
}
|
|
713
|
-
|
|
714
|
-
declare class SelectTool implements Tool {
|
|
715
|
-
readonly name = "select";
|
|
716
|
-
private _selectedIds;
|
|
717
|
-
private mode;
|
|
718
|
-
private lastWorld;
|
|
719
|
-
private currentWorld;
|
|
720
|
-
private ctx;
|
|
721
|
-
get selectedIds(): string[];
|
|
722
|
-
get isMarqueeActive(): boolean;
|
|
723
|
-
onActivate(ctx: ToolContext): void;
|
|
724
|
-
onDeactivate(ctx: ToolContext): void;
|
|
725
|
-
private snap;
|
|
726
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
727
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
728
|
-
onPointerUp(_state: PointerState, ctx: ToolContext): void;
|
|
729
|
-
onHover(state: PointerState, ctx: ToolContext): void;
|
|
730
|
-
renderOverlay(canvasCtx: CanvasRenderingContext2D): void;
|
|
731
|
-
private updateHoverCursor;
|
|
732
|
-
private handleResize;
|
|
733
|
-
private hitTestResizeHandle;
|
|
734
|
-
private getHandlePositions;
|
|
735
|
-
private renderMarquee;
|
|
736
|
-
private renderSelectionBoxes;
|
|
737
|
-
private renderBindingHighlights;
|
|
738
|
-
private getMarqueeRect;
|
|
739
|
-
private findElementsInRect;
|
|
740
|
-
private rectsOverlap;
|
|
741
|
-
private getElementBounds;
|
|
742
|
-
private hitTest;
|
|
743
|
-
private isInsideBounds;
|
|
744
|
-
}
|
|
745
|
-
|
|
746
|
-
interface ArrowToolOptions {
|
|
747
|
-
color?: string;
|
|
748
|
-
width?: number;
|
|
749
|
-
}
|
|
750
|
-
declare class ArrowTool implements Tool {
|
|
751
|
-
readonly name = "arrow";
|
|
752
|
-
private drawing;
|
|
753
|
-
private start;
|
|
754
|
-
private end;
|
|
755
|
-
private color;
|
|
756
|
-
private width;
|
|
757
|
-
private fromBinding;
|
|
758
|
-
private fromTarget;
|
|
759
|
-
private toTarget;
|
|
760
|
-
constructor(options?: ArrowToolOptions);
|
|
761
|
-
setOptions(options: ArrowToolOptions): void;
|
|
762
|
-
private layerFilter;
|
|
763
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
764
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
765
|
-
onPointerUp(_state: PointerState, ctx: ToolContext): void;
|
|
766
|
-
renderOverlay(ctx: CanvasRenderingContext2D): void;
|
|
767
|
-
}
|
|
768
|
-
|
|
769
|
-
interface NoteToolOptions {
|
|
770
|
-
backgroundColor?: string;
|
|
771
|
-
textColor?: string;
|
|
772
|
-
size?: Size;
|
|
773
|
-
}
|
|
774
|
-
declare class NoteTool implements Tool {
|
|
775
|
-
readonly name = "note";
|
|
776
|
-
private backgroundColor;
|
|
777
|
-
private textColor;
|
|
778
|
-
private size;
|
|
779
|
-
constructor(options?: NoteToolOptions);
|
|
780
|
-
setOptions(options: NoteToolOptions): void;
|
|
781
|
-
onPointerDown(_state: PointerState, _ctx: ToolContext): void;
|
|
782
|
-
onPointerMove(_state: PointerState, _ctx: ToolContext): void;
|
|
783
|
-
onPointerUp(state: PointerState, ctx: ToolContext): void;
|
|
784
|
-
}
|
|
785
|
-
|
|
786
|
-
interface TextToolOptions {
|
|
787
|
-
fontSize?: number;
|
|
788
|
-
color?: string;
|
|
789
|
-
textAlign?: 'left' | 'center' | 'right';
|
|
790
|
-
}
|
|
791
|
-
declare class TextTool implements Tool {
|
|
792
|
-
readonly name = "text";
|
|
793
|
-
private fontSize;
|
|
794
|
-
private color;
|
|
795
|
-
private textAlign;
|
|
796
|
-
constructor(options?: TextToolOptions);
|
|
797
|
-
setOptions(options: TextToolOptions): void;
|
|
798
|
-
onActivate(ctx: ToolContext): void;
|
|
799
|
-
onDeactivate(ctx: ToolContext): void;
|
|
800
|
-
onPointerDown(_state: PointerState, _ctx: ToolContext): void;
|
|
801
|
-
onPointerMove(_state: PointerState, _ctx: ToolContext): void;
|
|
802
|
-
onPointerUp(state: PointerState, ctx: ToolContext): void;
|
|
803
|
-
}
|
|
804
|
-
|
|
805
|
-
interface ImageToolOptions {
|
|
806
|
-
size?: Size;
|
|
807
|
-
}
|
|
808
|
-
declare class ImageTool implements Tool {
|
|
809
|
-
readonly name = "image";
|
|
810
|
-
private size;
|
|
811
|
-
private src;
|
|
812
|
-
constructor(options?: ImageToolOptions);
|
|
813
|
-
setSrc(src: string): void;
|
|
814
|
-
onPointerDown(_state: PointerState, _ctx: ToolContext): void;
|
|
815
|
-
onPointerMove(_state: PointerState, _ctx: ToolContext): void;
|
|
816
|
-
onPointerUp(state: PointerState, ctx: ToolContext): void;
|
|
817
|
-
}
|
|
818
|
-
|
|
819
|
-
interface ShapeToolOptions {
|
|
820
|
-
shape?: ShapeKind;
|
|
821
|
-
strokeColor?: string;
|
|
822
|
-
strokeWidth?: number;
|
|
823
|
-
fillColor?: string;
|
|
824
|
-
}
|
|
825
|
-
declare class ShapeTool implements Tool {
|
|
826
|
-
readonly name = "shape";
|
|
827
|
-
private drawing;
|
|
828
|
-
private start;
|
|
829
|
-
private end;
|
|
830
|
-
private shiftHeld;
|
|
831
|
-
private shape;
|
|
832
|
-
private strokeColor;
|
|
833
|
-
private strokeWidth;
|
|
834
|
-
private fillColor;
|
|
835
|
-
constructor(options?: ShapeToolOptions);
|
|
836
|
-
setOptions(options: ShapeToolOptions): void;
|
|
837
|
-
onActivate(_ctx: ToolContext): void;
|
|
838
|
-
onDeactivate(_ctx: ToolContext): void;
|
|
839
|
-
onPointerDown(state: PointerState, ctx: ToolContext): void;
|
|
840
|
-
onPointerMove(state: PointerState, ctx: ToolContext): void;
|
|
841
|
-
onPointerUp(_state: PointerState, ctx: ToolContext): void;
|
|
842
|
-
renderOverlay(ctx: CanvasRenderingContext2D): void;
|
|
843
|
-
private computeRect;
|
|
844
|
-
private snap;
|
|
845
|
-
private onKeyDown;
|
|
846
|
-
private onKeyUp;
|
|
847
|
-
}
|
|
848
|
-
|
|
849
|
-
declare class CreateLayerCommand implements Command {
|
|
850
|
-
private readonly manager;
|
|
851
|
-
private readonly layer;
|
|
852
|
-
constructor(manager: LayerManager, layer: Layer);
|
|
853
|
-
execute(_store: ElementStore): void;
|
|
854
|
-
undo(_store: ElementStore): void;
|
|
855
|
-
}
|
|
856
|
-
declare class RemoveLayerCommand implements Command {
|
|
857
|
-
private readonly manager;
|
|
858
|
-
private readonly layer;
|
|
859
|
-
constructor(manager: LayerManager, layer: Layer);
|
|
860
|
-
execute(_store: ElementStore): void;
|
|
861
|
-
undo(_store: ElementStore): void;
|
|
862
|
-
}
|
|
863
|
-
declare class UpdateLayerCommand implements Command {
|
|
864
|
-
private readonly manager;
|
|
865
|
-
private readonly layerId;
|
|
866
|
-
private readonly previous;
|
|
867
|
-
private readonly current;
|
|
868
|
-
constructor(manager: LayerManager, layerId: string, previous: Layer, current: Layer);
|
|
869
|
-
execute(_store: ElementStore): void;
|
|
870
|
-
undo(_store: ElementStore): void;
|
|
871
|
-
}
|
|
872
|
-
|
|
873
|
-
declare const VERSION = "0.8.0";
|
|
874
|
-
|
|
875
|
-
export { AddElementCommand, type ArrowElement, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, Background, type BackgroundOptions, type BackgroundPattern, BatchCommand, type Binding, type Bounds, Camera, type CameraOptions, type CanvasElement, type CanvasState, type Command, CreateLayerCommand, ElementRenderer, ElementStore, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, EventBus, type ExportImageOptions, type GridElement, HandTool, type HexOrientation, HistoryRecorder, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, InputHandler, type Layer, LayerManager, NoteEditor, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, RemoveElementCommand, RemoveLayerCommand, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type Size, type StrokeElement, type StrokePoint, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, UpdateElementCommand, UpdateLayerCommand, VERSION, Viewport, type ViewportOptions, clearStaleBindings, createArrow, createGrid, createHtmlElement, createId, createImage, createNote, createShape, createStroke, createText, exportImage, exportState, findBindTarget, findBoundArrows, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getEdgeIntersection, getElementBounds, getElementCenter, isBindable, isNearBezier, parseState, snapPoint, unbindArrow, updateBoundArrow };
|