@grida/svg-editor 1.0.0-alpha.2 → 1.0.0-alpha.21
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/README.md +343 -189
- package/dist/chunk-D7D4PA-g.mjs +13 -0
- package/dist/dom-CQkWJNrK.d.ts +237 -0
- package/dist/dom-CuK0LFUY.js +5276 -0
- package/dist/dom-DHaTIObb.mjs +5221 -0
- package/dist/dom-Dw2SPHgc.d.mts +239 -0
- package/dist/dom.d.mts +3 -16
- package/dist/dom.d.ts +3 -16
- package/dist/dom.js +9 -1
- package/dist/dom.mjs +2 -2
- package/dist/editor-BlByfVyF.js +2936 -0
- package/dist/editor-CJ3ROm0G.mjs +2930 -0
- package/dist/editor-CcW4BVth.d.mts +2359 -0
- package/dist/editor-CxqRhhzP.d.ts +2359 -0
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +5 -2
- package/dist/index.mjs +3 -2
- package/dist/model-C6jCFK_p.mjs +5329 -0
- package/dist/model-DVwjrVYp.js +5512 -0
- package/dist/presets.d.mts +61 -0
- package/dist/presets.d.ts +61 -0
- package/dist/presets.js +60 -0
- package/dist/presets.mjs +54 -0
- package/dist/react.d.mts +133 -12
- package/dist/react.d.ts +133 -12
- package/dist/react.js +214 -19
- package/dist/react.mjs +203 -21
- package/package.json +40 -9
- package/dist/dom-CfP_ZURh.js +0 -963
- package/dist/dom-kA8NDuVh.mjs +0 -929
- package/dist/editor-BryibVvr.d.mts +0 -612
- package/dist/editor-DllAMsDu.js +0 -1835
- package/dist/editor-M6j8XGO5.mjs +0 -1823
- package/dist/editor-klT8wu-x.d.ts +0 -612
- package/dist/paint-DHq_3iwU.js +0 -509
- package/dist/paint-DuCg6Y-K.mjs +0 -461
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { c as SvgEditor } from "./editor-CcW4BVth.mjs";
|
|
2
|
+
import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-Dw2SPHgc.mjs";
|
|
3
|
+
|
|
4
|
+
//#region src/presets/keynote.d.ts
|
|
5
|
+
declare namespace keynote_d_exports {
|
|
6
|
+
export { KeynoteAttachOptions, KeynoteSurfaceHandle, attach };
|
|
7
|
+
}
|
|
8
|
+
type KeynoteAttachOptions = {
|
|
9
|
+
/** Container to mount the SVG into. */container: HTMLElement;
|
|
10
|
+
/**
|
|
11
|
+
* Screen-pixel breathing room between the slide and the viewport edge.
|
|
12
|
+
* Used for both initial fit and the cover-constraint clamp. Default 80.
|
|
13
|
+
*/
|
|
14
|
+
padding?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Screen-pixel scroll slack past the slide edge when zoomed in past fit.
|
|
17
|
+
* Forwarded to the cover constraint's `pan_overshoot`. Default 0 — strict
|
|
18
|
+
* cover behavior (no panning past the slide edge). Applies only when an
|
|
19
|
+
* axis is scrollable; a fitted axis stays locked at center.
|
|
20
|
+
*/
|
|
21
|
+
pan_overshoot?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Forward additional surface options (e.g. `gestures: false`). `container`,
|
|
24
|
+
* `fit`, and `initial_camera` are owned by the preset.
|
|
25
|
+
*/
|
|
26
|
+
surface?: Omit<DomSurfaceOptions, "container" | "fit" | "initial_camera">;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Surface handle returned by `keynote.attach`. Extends `DomSurfaceHandle`
|
|
30
|
+
* with `set_padding` so hosts can vary the slide breathing room at runtime
|
|
31
|
+
* (e.g. on a "present mode" toggle that wants margin: 0 vs the default 80).
|
|
32
|
+
*/
|
|
33
|
+
type KeynoteSurfaceHandle = DomSurfaceHandle & {
|
|
34
|
+
/**
|
|
35
|
+
* Update the slide padding and re-fit. Mutates the live constraint AND
|
|
36
|
+
* the captured padding used by load-triggered refits.
|
|
37
|
+
*/
|
|
38
|
+
set_padding(p: number): void;
|
|
39
|
+
/**
|
|
40
|
+
* Update the scroll-past slack at runtime. Mutates the live constraint;
|
|
41
|
+
* `reenforce()` pulls a previously over-panned transform back into the
|
|
42
|
+
* new range when the value is decreased.
|
|
43
|
+
*/
|
|
44
|
+
set_pan_overshoot(o: number): void;
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Attach a keynote-shaped DOM surface:
|
|
48
|
+
* - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
|
|
49
|
+
* first frame).
|
|
50
|
+
* - Installs a `'cover'` camera constraint bound to the document root, so
|
|
51
|
+
* the user can't zoom out past the slide or pan past its edges.
|
|
52
|
+
* - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
|
|
53
|
+
* re-fits the camera to the new document.
|
|
54
|
+
*
|
|
55
|
+
* Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
|
|
56
|
+
* `set_padding` for present-mode toggles. The returned `detach()`
|
|
57
|
+
* additionally tears down the load subscription.
|
|
58
|
+
*/
|
|
59
|
+
declare function attach(editor: SvgEditor, opts: KeynoteAttachOptions): KeynoteSurfaceHandle;
|
|
60
|
+
//#endregion
|
|
61
|
+
export { type KeynoteAttachOptions, type KeynoteSurfaceHandle, keynote_d_exports as keynote };
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { c as SvgEditor } from "./editor-CxqRhhzP.js";
|
|
2
|
+
import { n as DomSurfaceHandle, r as DomSurfaceOptions } from "./dom-CQkWJNrK.js";
|
|
3
|
+
|
|
4
|
+
//#region \0rolldown/runtime.js
|
|
5
|
+
declare namespace keynote_d_exports {
|
|
6
|
+
export { KeynoteAttachOptions, KeynoteSurfaceHandle, attach };
|
|
7
|
+
}
|
|
8
|
+
type KeynoteAttachOptions = {
|
|
9
|
+
/** Container to mount the SVG into. */container: HTMLElement;
|
|
10
|
+
/**
|
|
11
|
+
* Screen-pixel breathing room between the slide and the viewport edge.
|
|
12
|
+
* Used for both initial fit and the cover-constraint clamp. Default 80.
|
|
13
|
+
*/
|
|
14
|
+
padding?: number;
|
|
15
|
+
/**
|
|
16
|
+
* Screen-pixel scroll slack past the slide edge when zoomed in past fit.
|
|
17
|
+
* Forwarded to the cover constraint's `pan_overshoot`. Default 0 — strict
|
|
18
|
+
* cover behavior (no panning past the slide edge). Applies only when an
|
|
19
|
+
* axis is scrollable; a fitted axis stays locked at center.
|
|
20
|
+
*/
|
|
21
|
+
pan_overshoot?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Forward additional surface options (e.g. `gestures: false`). `container`,
|
|
24
|
+
* `fit`, and `initial_camera` are owned by the preset.
|
|
25
|
+
*/
|
|
26
|
+
surface?: Omit<DomSurfaceOptions, "container" | "fit" | "initial_camera">;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Surface handle returned by `keynote.attach`. Extends `DomSurfaceHandle`
|
|
30
|
+
* with `set_padding` so hosts can vary the slide breathing room at runtime
|
|
31
|
+
* (e.g. on a "present mode" toggle that wants margin: 0 vs the default 80).
|
|
32
|
+
*/
|
|
33
|
+
type KeynoteSurfaceHandle = DomSurfaceHandle & {
|
|
34
|
+
/**
|
|
35
|
+
* Update the slide padding and re-fit. Mutates the live constraint AND
|
|
36
|
+
* the captured padding used by load-triggered refits.
|
|
37
|
+
*/
|
|
38
|
+
set_padding(p: number): void;
|
|
39
|
+
/**
|
|
40
|
+
* Update the scroll-past slack at runtime. Mutates the live constraint;
|
|
41
|
+
* `reenforce()` pulls a previously over-panned transform back into the
|
|
42
|
+
* new range when the value is decreased.
|
|
43
|
+
*/
|
|
44
|
+
set_pan_overshoot(o: number): void;
|
|
45
|
+
};
|
|
46
|
+
/**
|
|
47
|
+
* Attach a keynote-shaped DOM surface:
|
|
48
|
+
* - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
|
|
49
|
+
* first frame).
|
|
50
|
+
* - Installs a `'cover'` camera constraint bound to the document root, so
|
|
51
|
+
* the user can't zoom out past the slide or pan past its edges.
|
|
52
|
+
* - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
|
|
53
|
+
* re-fits the camera to the new document.
|
|
54
|
+
*
|
|
55
|
+
* Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
|
|
56
|
+
* `set_padding` for present-mode toggles. The returned `detach()`
|
|
57
|
+
* additionally tears down the load subscription.
|
|
58
|
+
*/
|
|
59
|
+
declare function attach(editor: SvgEditor, opts: KeynoteAttachOptions): KeynoteSurfaceHandle;
|
|
60
|
+
//#endregion
|
|
61
|
+
export { type KeynoteAttachOptions, type KeynoteSurfaceHandle, keynote_d_exports as keynote };
|
package/dist/presets.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_model = require("./model-DVwjrVYp.js");
|
|
3
|
+
const require_dom = require("./dom-CuK0LFUY.js");
|
|
4
|
+
//#region src/presets/keynote.ts
|
|
5
|
+
var keynote_exports = /* @__PURE__ */ require_model.__exportAll({ attach: () => attach });
|
|
6
|
+
/**
|
|
7
|
+
* Attach a keynote-shaped DOM surface:
|
|
8
|
+
* - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
|
|
9
|
+
* first frame).
|
|
10
|
+
* - Installs a `'cover'` camera constraint bound to the document root, so
|
|
11
|
+
* the user can't zoom out past the slide or pan past its edges.
|
|
12
|
+
* - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
|
|
13
|
+
* re-fits the camera to the new document.
|
|
14
|
+
*
|
|
15
|
+
* Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
|
|
16
|
+
* `set_padding` for present-mode toggles. The returned `detach()`
|
|
17
|
+
* additionally tears down the load subscription.
|
|
18
|
+
*/
|
|
19
|
+
function attach(editor, opts) {
|
|
20
|
+
const inner = require_dom.attach_dom_surface(editor, {
|
|
21
|
+
...opts.surface,
|
|
22
|
+
container: opts.container,
|
|
23
|
+
fit: true
|
|
24
|
+
});
|
|
25
|
+
let padding = opts.padding ?? 80;
|
|
26
|
+
let pan_overshoot = opts.pan_overshoot ?? 0;
|
|
27
|
+
const apply = () => {
|
|
28
|
+
inner.camera.constraints = {
|
|
29
|
+
type: "cover",
|
|
30
|
+
bounds: "<root>",
|
|
31
|
+
padding,
|
|
32
|
+
pan_overshoot
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
apply();
|
|
36
|
+
const unsub_load = editor.subscribe_with_selector((s) => s.load_version, () => inner.camera.fit("<root>", { margin: inner.camera.constraints?.padding ?? 0 }));
|
|
37
|
+
return {
|
|
38
|
+
...inner,
|
|
39
|
+
set_padding(p) {
|
|
40
|
+
padding = p;
|
|
41
|
+
apply();
|
|
42
|
+
inner.camera.fit("<root>", { margin: p });
|
|
43
|
+
},
|
|
44
|
+
set_pan_overshoot(o) {
|
|
45
|
+
pan_overshoot = o;
|
|
46
|
+
apply();
|
|
47
|
+
},
|
|
48
|
+
detach: () => {
|
|
49
|
+
unsub_load();
|
|
50
|
+
inner.detach();
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
}
|
|
54
|
+
//#endregion
|
|
55
|
+
Object.defineProperty(exports, "keynote", {
|
|
56
|
+
enumerable: true,
|
|
57
|
+
get: function() {
|
|
58
|
+
return keynote_exports;
|
|
59
|
+
}
|
|
60
|
+
});
|
package/dist/presets.mjs
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { t as __exportAll } from "./chunk-D7D4PA-g.mjs";
|
|
2
|
+
import { t as attach_dom_surface } from "./dom-DHaTIObb.mjs";
|
|
3
|
+
//#region src/presets/keynote.ts
|
|
4
|
+
var keynote_exports = /* @__PURE__ */ __exportAll({ attach: () => attach });
|
|
5
|
+
/**
|
|
6
|
+
* Attach a keynote-shaped DOM surface:
|
|
7
|
+
* - Mounts via `attach_dom_surface` with `fit: true` (slide is visible on
|
|
8
|
+
* first frame).
|
|
9
|
+
* - Installs a `'cover'` camera constraint bound to the document root, so
|
|
10
|
+
* the user can't zoom out past the slide or pan past its edges.
|
|
11
|
+
* - Subscribes to `editor.state.load_version` so every `editor.load(svg)`
|
|
12
|
+
* re-fits the camera to the new document.
|
|
13
|
+
*
|
|
14
|
+
* Returns a `KeynoteSurfaceHandle` — same shape as `DomSurfaceHandle` plus
|
|
15
|
+
* `set_padding` for present-mode toggles. The returned `detach()`
|
|
16
|
+
* additionally tears down the load subscription.
|
|
17
|
+
*/
|
|
18
|
+
function attach(editor, opts) {
|
|
19
|
+
const inner = attach_dom_surface(editor, {
|
|
20
|
+
...opts.surface,
|
|
21
|
+
container: opts.container,
|
|
22
|
+
fit: true
|
|
23
|
+
});
|
|
24
|
+
let padding = opts.padding ?? 80;
|
|
25
|
+
let pan_overshoot = opts.pan_overshoot ?? 0;
|
|
26
|
+
const apply = () => {
|
|
27
|
+
inner.camera.constraints = {
|
|
28
|
+
type: "cover",
|
|
29
|
+
bounds: "<root>",
|
|
30
|
+
padding,
|
|
31
|
+
pan_overshoot
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
apply();
|
|
35
|
+
const unsub_load = editor.subscribe_with_selector((s) => s.load_version, () => inner.camera.fit("<root>", { margin: inner.camera.constraints?.padding ?? 0 }));
|
|
36
|
+
return {
|
|
37
|
+
...inner,
|
|
38
|
+
set_padding(p) {
|
|
39
|
+
padding = p;
|
|
40
|
+
apply();
|
|
41
|
+
inner.camera.fit("<root>", { margin: p });
|
|
42
|
+
},
|
|
43
|
+
set_pan_overshoot(o) {
|
|
44
|
+
pan_overshoot = o;
|
|
45
|
+
apply();
|
|
46
|
+
},
|
|
47
|
+
detach: () => {
|
|
48
|
+
unsub_load();
|
|
49
|
+
inner.detach();
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
//#endregion
|
|
54
|
+
export { keynote_exports as keynote };
|
package/dist/react.d.mts
CHANGED
|
@@ -1,39 +1,85 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-CcW4BVth.mjs";
|
|
2
|
+
import { n as DomSurfaceHandle } from "./dom-Dw2SPHgc.mjs";
|
|
3
|
+
import cmath from "@grida/cmath";
|
|
2
4
|
import { ReactNode } from "react";
|
|
3
|
-
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
5
|
|
|
5
6
|
//#region src/react.d.ts
|
|
6
7
|
type SvgEditorProviderProps = {
|
|
7
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Initial document for the editor. Read **once** on first render —
|
|
10
|
+
* subsequent changes to this prop are silently ignored. For live updates
|
|
11
|
+
* (file open, page switch, reset to a snapshot), pull the editor from
|
|
12
|
+
* context with `useSvgEditor()` and call `editor.load(...)` imperatively.
|
|
13
|
+
*
|
|
14
|
+
* This is the same shape Lexical (`initialConfig.editorState`), Slate
|
|
15
|
+
* (`initialValue`), and TipTap (`content` option) settled on for the
|
|
16
|
+
* same reason: a reactive document prop creates a feedback loop with the
|
|
17
|
+
* editor's own emissions. The editor instance is the source of truth
|
|
18
|
+
* for the document during a session; React state is not.
|
|
19
|
+
*/
|
|
20
|
+
initialSvg: string;
|
|
8
21
|
providers?: Providers;
|
|
9
22
|
style?: Partial<EditorStyle>;
|
|
10
23
|
children: ReactNode;
|
|
11
24
|
};
|
|
12
25
|
/**
|
|
13
26
|
* Owns the headless editor and exposes it via context. The editor is created
|
|
14
|
-
* once on first render
|
|
27
|
+
* once on first render with `initialSvg`; subsequent changes to that prop are
|
|
28
|
+
* silently ignored. To replace the document at runtime, call
|
|
29
|
+
* `useSvgEditor().load(...)` imperatively, or remount the provider with a
|
|
30
|
+
* different `key`.
|
|
15
31
|
*/
|
|
16
32
|
declare function SvgEditorProvider({
|
|
17
|
-
|
|
33
|
+
initialSvg,
|
|
18
34
|
providers,
|
|
19
35
|
style,
|
|
20
36
|
children
|
|
21
|
-
}: SvgEditorProviderProps):
|
|
37
|
+
}: SvgEditorProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
22
38
|
type SvgEditorCanvasProps = {
|
|
23
39
|
className?: string;
|
|
24
40
|
style?: React.CSSProperties;
|
|
41
|
+
/**
|
|
42
|
+
* Install the default gesture set. Default `true`. See
|
|
43
|
+
* `DomSurfaceOptions.gestures`.
|
|
44
|
+
*/
|
|
45
|
+
gestures?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Auto-fit the document on initial attach. Default `false`. See
|
|
48
|
+
* `DomSurfaceOptions.fit`.
|
|
49
|
+
*/
|
|
50
|
+
fit?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Wire native ClipboardEvent transport (copy/cut/paste). Default `true`.
|
|
53
|
+
* Pass `false` to route all clipboard traffic through the
|
|
54
|
+
* `ClipboardProvider` seam. See `DomSurfaceOptions.clipboard`.
|
|
55
|
+
*/
|
|
56
|
+
clipboard?: boolean; /** Initial camera transform. Default identity. */
|
|
57
|
+
initial_camera?: cmath.Transform;
|
|
58
|
+
/**
|
|
59
|
+
* Receives the `DomSurfaceHandle` once the surface is attached, and
|
|
60
|
+
* `null` on unmount/detach. Use this to thread `handle.camera` /
|
|
61
|
+
* `handle.gestures` into surrounding chrome (toolbars, badges, etc.).
|
|
62
|
+
*/
|
|
63
|
+
onAttach?: (handle: DomSurfaceHandle | null) => void;
|
|
25
64
|
};
|
|
26
65
|
/**
|
|
27
66
|
* Renders the editor's SVG into a `div` and wires it to the DOM surface.
|
|
28
67
|
*
|
|
29
|
-
* Internally calls `attach_dom_surface(editor, { container })` on
|
|
30
|
-
* `handle.detach()` on unmount.
|
|
31
|
-
*
|
|
68
|
+
* Internally calls `attach_dom_surface(editor, { container, ... })` on
|
|
69
|
+
* mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
|
|
70
|
+
* gestures) are reached via the `onAttach` callback — there is no global
|
|
71
|
+
* context for them, because a host may mount multiple canvases in the
|
|
72
|
+
* same editor session.
|
|
32
73
|
*/
|
|
33
74
|
declare function SvgEditorCanvas({
|
|
34
75
|
className,
|
|
35
|
-
style
|
|
36
|
-
|
|
76
|
+
style,
|
|
77
|
+
gestures,
|
|
78
|
+
fit,
|
|
79
|
+
clipboard,
|
|
80
|
+
initial_camera,
|
|
81
|
+
onAttach
|
|
82
|
+
}: SvgEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
|
|
37
83
|
declare function useSvgEditor(): SvgEditor;
|
|
38
84
|
/**
|
|
39
85
|
* Subscribe to a slice of `editor.state`. Re-renders when the selected slice
|
|
@@ -45,5 +91,80 @@ declare function useEditorState<T>(selector: (state: EditorState) => T, equals?:
|
|
|
45
91
|
* re-renders (commands themselves don't change identity).
|
|
46
92
|
*/
|
|
47
93
|
declare function useCommands(): Commands;
|
|
94
|
+
/**
|
|
95
|
+
* Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
|
|
96
|
+
* the handle (or null if it isn't attached yet) and a selector that reads
|
|
97
|
+
* what you need from the camera. The returned value updates on every
|
|
98
|
+
* camera mutation — does NOT bump `editor.state.version`.
|
|
99
|
+
*
|
|
100
|
+
* Typical use: zoom badge in a toolbar.
|
|
101
|
+
*
|
|
102
|
+
* ```tsx
|
|
103
|
+
* const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
|
|
104
|
+
* return <div>{Math.round(zoom * 100)}%</div>;
|
|
105
|
+
* ```
|
|
106
|
+
*
|
|
107
|
+
* The `fallback` is what's returned when `handle` is `null` (before mount /
|
|
108
|
+
* after detach). It's also the SSR snapshot value — anything that won't
|
|
109
|
+
* mismatch with the first client render.
|
|
110
|
+
*/
|
|
111
|
+
declare function useCameraSnapshot<T>(handle: DomSurfaceHandle | null, selector: (camera: DomSurfaceHandle["camera"]) => T, fallback: T): T;
|
|
112
|
+
/** Current selection (frozen, identity-stable across no-op emits). */
|
|
113
|
+
declare function useSelection(): readonly NodeId[];
|
|
114
|
+
/** Active tool. Identity-stable when `set_tool` is a no-op. */
|
|
115
|
+
declare function useTool(): Tool;
|
|
116
|
+
/** Current mode (`"select"` | `"edit-content"`). */
|
|
117
|
+
declare function useMode(): Mode;
|
|
118
|
+
/**
|
|
119
|
+
* What kind of content-edit is active, or `null` when not in content-edit.
|
|
120
|
+
*
|
|
121
|
+
* Symmetric with `useMode()` but at a finer grain — resolves whether the
|
|
122
|
+
* single selected node is a path or a text node so consumers (e.g. the
|
|
123
|
+
* vector-edit toolbar) can render the right affordances. Mirrors the
|
|
124
|
+
* dispatch logic in the host's `enter_content_edit` router which checks
|
|
125
|
+
* `tag_of(id) === "path"` vs `"text" / "tspan"`.
|
|
126
|
+
*
|
|
127
|
+
* Returns `null` for the (defensive) case of `edit-content` with no
|
|
128
|
+
* selection, and for any tag that's neither path nor text.
|
|
129
|
+
*/
|
|
130
|
+
declare function useContentEditKind(): "path" | "text" | null;
|
|
131
|
+
/** Whether the history stack has an undoable entry. */
|
|
132
|
+
declare function useCanUndo(): boolean;
|
|
133
|
+
/** Whether the history stack has a redoable entry. */
|
|
134
|
+
declare function useCanRedo(): boolean;
|
|
135
|
+
/** Hook-owned `PaintPreviewSession`. See block comment above. */
|
|
136
|
+
declare function usePaintPreview(channel: "fill" | "stroke"): PaintPreviewSession;
|
|
137
|
+
/** Hook-owned `PreviewSession` for a CSS/SVG property. See block comment above. */
|
|
138
|
+
declare function usePropertyPreview(name: string): PreviewSession;
|
|
139
|
+
/** Bound `editor.load(svg)`. Stable across renders. */
|
|
140
|
+
declare function useEditorLoad(): (svg: string) => void;
|
|
141
|
+
/** Bound `editor.serialize()`. Stable across renders. */
|
|
142
|
+
declare function useEditorSerialize(): () => string;
|
|
143
|
+
/**
|
|
144
|
+
* Push a hover override into the HUD surface — e.g. when the user hovers
|
|
145
|
+
* a row in a layers panel. The HUD will render the override's outline.
|
|
146
|
+
*
|
|
147
|
+
* Pass `null` to clear and let the pointer pick take over again. On
|
|
148
|
+
* unmount, the hook clears any override it set last so the canvas
|
|
149
|
+
* doesn't stay highlighted on a node that no longer has a panel row.
|
|
150
|
+
*/
|
|
151
|
+
declare function useHoverOverride(): (id: NodeId | null) => void;
|
|
152
|
+
/**
|
|
153
|
+
* Observe pick (tap) outcomes — a discrete click on the canvas, reporting the
|
|
154
|
+
* document-space `point`, the `node_id` under it (`null` for empty canvas),
|
|
155
|
+
* the `button`, and `mods`. The handler fires once per tap, after the editor's
|
|
156
|
+
* own selection handling. Observe-only: it cannot prevent or alter selection.
|
|
157
|
+
*
|
|
158
|
+
* This is the React edge-wire over `editor.subscribe_pick`. The handler is
|
|
159
|
+
* kept in a ref so re-subscription is never triggered by handler identity —
|
|
160
|
+
* pass an inline closure freely. Pick is editor-scoped (it survives surface
|
|
161
|
+
* detach), so this is a hook, not a `SvgEditorCanvas` prop.
|
|
162
|
+
*
|
|
163
|
+
* Typical use: a comment / annotation tool anchors a popover at `e.point` and
|
|
164
|
+
* scopes its action to `e.node_id` (or to the whole document when `null`).
|
|
165
|
+
*
|
|
166
|
+
* @unstable See {@link PickEvent}.
|
|
167
|
+
*/
|
|
168
|
+
declare function useEditorPick(handler: (e: PickEvent) => void): void;
|
|
48
169
|
//#endregion
|
|
49
|
-
export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };
|
|
170
|
+
export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorPick, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };
|
package/dist/react.d.ts
CHANGED
|
@@ -1,39 +1,85 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { A as EditorState, H as Mode, J as PickEvent, K as PaintPreviewSession, Q as Providers, U as NodeId, Y as PreviewSession, c as SvgEditor, j as EditorStyle, rt as Tool, t as Commands } from "./editor-CxqRhhzP.js";
|
|
2
|
+
import { n as DomSurfaceHandle } from "./dom-CQkWJNrK.js";
|
|
3
|
+
import cmath from "@grida/cmath";
|
|
3
4
|
import { ReactNode } from "react";
|
|
4
5
|
|
|
5
6
|
//#region src/react.d.ts
|
|
6
7
|
type SvgEditorProviderProps = {
|
|
7
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Initial document for the editor. Read **once** on first render —
|
|
10
|
+
* subsequent changes to this prop are silently ignored. For live updates
|
|
11
|
+
* (file open, page switch, reset to a snapshot), pull the editor from
|
|
12
|
+
* context with `useSvgEditor()` and call `editor.load(...)` imperatively.
|
|
13
|
+
*
|
|
14
|
+
* This is the same shape Lexical (`initialConfig.editorState`), Slate
|
|
15
|
+
* (`initialValue`), and TipTap (`content` option) settled on for the
|
|
16
|
+
* same reason: a reactive document prop creates a feedback loop with the
|
|
17
|
+
* editor's own emissions. The editor instance is the source of truth
|
|
18
|
+
* for the document during a session; React state is not.
|
|
19
|
+
*/
|
|
20
|
+
initialSvg: string;
|
|
8
21
|
providers?: Providers;
|
|
9
22
|
style?: Partial<EditorStyle>;
|
|
10
23
|
children: ReactNode;
|
|
11
24
|
};
|
|
12
25
|
/**
|
|
13
26
|
* Owns the headless editor and exposes it via context. The editor is created
|
|
14
|
-
* once on first render
|
|
27
|
+
* once on first render with `initialSvg`; subsequent changes to that prop are
|
|
28
|
+
* silently ignored. To replace the document at runtime, call
|
|
29
|
+
* `useSvgEditor().load(...)` imperatively, or remount the provider with a
|
|
30
|
+
* different `key`.
|
|
15
31
|
*/
|
|
16
32
|
declare function SvgEditorProvider({
|
|
17
|
-
|
|
33
|
+
initialSvg,
|
|
18
34
|
providers,
|
|
19
35
|
style,
|
|
20
36
|
children
|
|
21
|
-
}: SvgEditorProviderProps):
|
|
37
|
+
}: SvgEditorProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
22
38
|
type SvgEditorCanvasProps = {
|
|
23
39
|
className?: string;
|
|
24
40
|
style?: React.CSSProperties;
|
|
41
|
+
/**
|
|
42
|
+
* Install the default gesture set. Default `true`. See
|
|
43
|
+
* `DomSurfaceOptions.gestures`.
|
|
44
|
+
*/
|
|
45
|
+
gestures?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Auto-fit the document on initial attach. Default `false`. See
|
|
48
|
+
* `DomSurfaceOptions.fit`.
|
|
49
|
+
*/
|
|
50
|
+
fit?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Wire native ClipboardEvent transport (copy/cut/paste). Default `true`.
|
|
53
|
+
* Pass `false` to route all clipboard traffic through the
|
|
54
|
+
* `ClipboardProvider` seam. See `DomSurfaceOptions.clipboard`.
|
|
55
|
+
*/
|
|
56
|
+
clipboard?: boolean; /** Initial camera transform. Default identity. */
|
|
57
|
+
initial_camera?: cmath.Transform;
|
|
58
|
+
/**
|
|
59
|
+
* Receives the `DomSurfaceHandle` once the surface is attached, and
|
|
60
|
+
* `null` on unmount/detach. Use this to thread `handle.camera` /
|
|
61
|
+
* `handle.gestures` into surrounding chrome (toolbars, badges, etc.).
|
|
62
|
+
*/
|
|
63
|
+
onAttach?: (handle: DomSurfaceHandle | null) => void;
|
|
25
64
|
};
|
|
26
65
|
/**
|
|
27
66
|
* Renders the editor's SVG into a `div` and wires it to the DOM surface.
|
|
28
67
|
*
|
|
29
|
-
* Internally calls `attach_dom_surface(editor, { container })` on
|
|
30
|
-
* `handle.detach()` on unmount.
|
|
31
|
-
*
|
|
68
|
+
* Internally calls `attach_dom_surface(editor, { container, ... })` on
|
|
69
|
+
* mount and `handle.detach()` on unmount. Surface-scoped concerns (camera,
|
|
70
|
+
* gestures) are reached via the `onAttach` callback — there is no global
|
|
71
|
+
* context for them, because a host may mount multiple canvases in the
|
|
72
|
+
* same editor session.
|
|
32
73
|
*/
|
|
33
74
|
declare function SvgEditorCanvas({
|
|
34
75
|
className,
|
|
35
|
-
style
|
|
36
|
-
|
|
76
|
+
style,
|
|
77
|
+
gestures,
|
|
78
|
+
fit,
|
|
79
|
+
clipboard,
|
|
80
|
+
initial_camera,
|
|
81
|
+
onAttach
|
|
82
|
+
}: SvgEditorCanvasProps): import("react/jsx-runtime").JSX.Element;
|
|
37
83
|
declare function useSvgEditor(): SvgEditor;
|
|
38
84
|
/**
|
|
39
85
|
* Subscribe to a slice of `editor.state`. Re-renders when the selected slice
|
|
@@ -45,5 +91,80 @@ declare function useEditorState<T>(selector: (state: EditorState) => T, equals?:
|
|
|
45
91
|
* re-renders (commands themselves don't change identity).
|
|
46
92
|
*/
|
|
47
93
|
declare function useCommands(): Commands;
|
|
94
|
+
/**
|
|
95
|
+
* Subscribe to a slice of `handle.camera` from a `DomSurfaceHandle`. Pass
|
|
96
|
+
* the handle (or null if it isn't attached yet) and a selector that reads
|
|
97
|
+
* what you need from the camera. The returned value updates on every
|
|
98
|
+
* camera mutation — does NOT bump `editor.state.version`.
|
|
99
|
+
*
|
|
100
|
+
* Typical use: zoom badge in a toolbar.
|
|
101
|
+
*
|
|
102
|
+
* ```tsx
|
|
103
|
+
* const zoom = useCameraSnapshot(handle, (c) => c.zoom, 1);
|
|
104
|
+
* return <div>{Math.round(zoom * 100)}%</div>;
|
|
105
|
+
* ```
|
|
106
|
+
*
|
|
107
|
+
* The `fallback` is what's returned when `handle` is `null` (before mount /
|
|
108
|
+
* after detach). It's also the SSR snapshot value — anything that won't
|
|
109
|
+
* mismatch with the first client render.
|
|
110
|
+
*/
|
|
111
|
+
declare function useCameraSnapshot<T>(handle: DomSurfaceHandle | null, selector: (camera: DomSurfaceHandle["camera"]) => T, fallback: T): T;
|
|
112
|
+
/** Current selection (frozen, identity-stable across no-op emits). */
|
|
113
|
+
declare function useSelection(): readonly NodeId[];
|
|
114
|
+
/** Active tool. Identity-stable when `set_tool` is a no-op. */
|
|
115
|
+
declare function useTool(): Tool;
|
|
116
|
+
/** Current mode (`"select"` | `"edit-content"`). */
|
|
117
|
+
declare function useMode(): Mode;
|
|
118
|
+
/**
|
|
119
|
+
* What kind of content-edit is active, or `null` when not in content-edit.
|
|
120
|
+
*
|
|
121
|
+
* Symmetric with `useMode()` but at a finer grain — resolves whether the
|
|
122
|
+
* single selected node is a path or a text node so consumers (e.g. the
|
|
123
|
+
* vector-edit toolbar) can render the right affordances. Mirrors the
|
|
124
|
+
* dispatch logic in the host's `enter_content_edit` router which checks
|
|
125
|
+
* `tag_of(id) === "path"` vs `"text" / "tspan"`.
|
|
126
|
+
*
|
|
127
|
+
* Returns `null` for the (defensive) case of `edit-content` with no
|
|
128
|
+
* selection, and for any tag that's neither path nor text.
|
|
129
|
+
*/
|
|
130
|
+
declare function useContentEditKind(): "path" | "text" | null;
|
|
131
|
+
/** Whether the history stack has an undoable entry. */
|
|
132
|
+
declare function useCanUndo(): boolean;
|
|
133
|
+
/** Whether the history stack has a redoable entry. */
|
|
134
|
+
declare function useCanRedo(): boolean;
|
|
135
|
+
/** Hook-owned `PaintPreviewSession`. See block comment above. */
|
|
136
|
+
declare function usePaintPreview(channel: "fill" | "stroke"): PaintPreviewSession;
|
|
137
|
+
/** Hook-owned `PreviewSession` for a CSS/SVG property. See block comment above. */
|
|
138
|
+
declare function usePropertyPreview(name: string): PreviewSession;
|
|
139
|
+
/** Bound `editor.load(svg)`. Stable across renders. */
|
|
140
|
+
declare function useEditorLoad(): (svg: string) => void;
|
|
141
|
+
/** Bound `editor.serialize()`. Stable across renders. */
|
|
142
|
+
declare function useEditorSerialize(): () => string;
|
|
143
|
+
/**
|
|
144
|
+
* Push a hover override into the HUD surface — e.g. when the user hovers
|
|
145
|
+
* a row in a layers panel. The HUD will render the override's outline.
|
|
146
|
+
*
|
|
147
|
+
* Pass `null` to clear and let the pointer pick take over again. On
|
|
148
|
+
* unmount, the hook clears any override it set last so the canvas
|
|
149
|
+
* doesn't stay highlighted on a node that no longer has a panel row.
|
|
150
|
+
*/
|
|
151
|
+
declare function useHoverOverride(): (id: NodeId | null) => void;
|
|
152
|
+
/**
|
|
153
|
+
* Observe pick (tap) outcomes — a discrete click on the canvas, reporting the
|
|
154
|
+
* document-space `point`, the `node_id` under it (`null` for empty canvas),
|
|
155
|
+
* the `button`, and `mods`. The handler fires once per tap, after the editor's
|
|
156
|
+
* own selection handling. Observe-only: it cannot prevent or alter selection.
|
|
157
|
+
*
|
|
158
|
+
* This is the React edge-wire over `editor.subscribe_pick`. The handler is
|
|
159
|
+
* kept in a ref so re-subscription is never triggered by handler identity —
|
|
160
|
+
* pass an inline closure freely. Pick is editor-scoped (it survives surface
|
|
161
|
+
* detach), so this is a hook, not a `SvgEditorCanvas` prop.
|
|
162
|
+
*
|
|
163
|
+
* Typical use: a comment / annotation tool anchors a popover at `e.point` and
|
|
164
|
+
* scopes its action to `e.node_id` (or to the whole document when `null`).
|
|
165
|
+
*
|
|
166
|
+
* @unstable See {@link PickEvent}.
|
|
167
|
+
*/
|
|
168
|
+
declare function useEditorPick(handler: (e: PickEvent) => void): void;
|
|
48
169
|
//#endregion
|
|
49
|
-
export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCommands, useEditorState, useSvgEditor };
|
|
170
|
+
export { SvgEditorCanvas, SvgEditorCanvasProps, SvgEditorProvider, SvgEditorProviderProps, useCameraSnapshot, useCanRedo, useCanUndo, useCommands, useContentEditKind, useEditorLoad, useEditorPick, useEditorSerialize, useEditorState, useHoverOverride, useMode, usePaintPreview, usePropertyPreview, useSelection, useSvgEditor, useTool };
|