@haklex/rich-ext-excalidraw 0.49.0 → 0.50.0
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/ExcalidrawConfigContext.d.ts +3 -1
- package/dist/ExcalidrawConfigContext.d.ts.map +1 -1
- package/dist/ExcalidrawDisplayRenderer.d.ts +1 -0
- package/dist/ExcalidrawDisplayRenderer.d.ts.map +1 -1
- package/dist/ExcalidrawEditRenderer.d.ts.map +1 -1
- package/dist/ExcalidrawFrameStates.d.ts +11 -0
- package/dist/ExcalidrawFrameStates.d.ts.map +1 -0
- package/dist/ExcalidrawSSRRenderer.d.ts.map +1 -1
- package/dist/index.mjs +51 -55
- package/dist/rich-ext-excalidraw.css +1 -1
- package/dist/scene/InteractiveScene.d.ts +11 -0
- package/dist/scene/InteractiveScene.d.ts.map +1 -0
- package/dist/scene/Scene.d.ts +24 -0
- package/dist/scene/Scene.d.ts.map +1 -0
- package/dist/scene/fonts.d.ts +8 -0
- package/dist/scene/fonts.d.ts.map +1 -0
- package/dist/scene/normalize.d.ts +4 -0
- package/dist/scene/normalize.d.ts.map +1 -0
- package/dist/scene/rough.d.ts +19 -0
- package/dist/scene/rough.d.ts.map +1 -0
- package/dist/scene/scene.test.d.ts +2 -0
- package/dist/scene/scene.test.d.ts.map +1 -0
- package/dist/scene/styles.css.d.ts +7 -0
- package/dist/scene/styles.css.d.ts.map +1 -0
- package/dist/scene/types.d.ts +118 -0
- package/dist/scene/types.d.ts.map +1 -0
- package/dist/static.mjs +2 -2
- package/dist/styles.css.d.ts +5 -2
- package/dist/styles.css.d.ts.map +1 -1
- package/dist/transformer-C2e_qiIg.js +487 -0
- package/dist/useExcalidrawData.d.ts +2 -0
- package/dist/useExcalidrawData.d.ts.map +1 -1
- package/dist/useExcalidrawFont-DAmoYxvU.js +795 -0
- package/dist/useExcalidrawFont.d.ts +2 -0
- package/dist/useExcalidrawFont.d.ts.map +1 -0
- package/package.json +12 -6
- package/dist/constants.d.ts +0 -5
- package/dist/constants.d.ts.map +0 -1
- package/dist/transformer-BaQILRBF.js +0 -315
- package/dist/useExcalidrawData-ZN9PHFyy.js +0 -227
package/dist/styles.css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,yBAAyB,QAAmB,CAAC;AAE1D,eAAO,MAAM,yBAAyB,QAOpC,CAAC;AAOH,eAAO,MAAM,qBAAqB,QAGhC,CAAC;AAeH,eAAO,MAAM,oBAAoB,QAAoB,CAAC;AAEtD,eAAO,MAAM,mBAAmB,QAI9B,CAAC;AAOH,eAAO,MAAM,iBAAiB,QAW5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAG1B,CAAC;AAEH,eAAO,MAAM,eAAe,QAG1B,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAI9B,CAAC;AAEH,eAAO,MAAM,eAAe,QAc1B,CAAC;AAUH,QAAA,MAAM,0BAA0B,QAAY,CAAC;AA2B7C,OAAO,EAAE,0BAA0B,IAAI,yBAAyB,EAAE,CAAC;AAInE,eAAO,MAAM,sBAAsB,QAQjC,CAAC;AAEH,eAAO,MAAM,2BAA2B,QAKtC,CAAC;AAEH,eAAO,MAAM,mBAAmB,QAM9B,CAAC;AAEH,eAAO,MAAM,qBAAqB,QAKhC,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAM/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,QAKlC,CAAC;AAEH,eAAO,MAAM,qBAAqB,QAkBhC,CAAC;AAIH,eAAO,MAAM,sBAAsB,QAuBjC,CAAC;AAQH,eAAO,MAAM,sBAAsB,QAMjC,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAwBjC,CAAC;AAIH,eAAO,MAAM,sBAAsB,QAIjC,CAAC;AAIH,eAAO,MAAM,wBAAwB,QAKnC,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAa/B,CAAC;AAEH,eAAO,MAAM,2BAA2B,QAatC,CAAC;AAEH,eAAO,MAAM,0BAA0B,QAarC,CAAC;AAIH,eAAO,MAAM,qBAAqB,QAYhC,CAAC;AAEH,eAAO,MAAM,mBAAmB,QA2B9B,CAAC"}
|
|
@@ -0,0 +1,487 @@
|
|
|
1
|
+
import { C as excalidrawDialogCanvas, D as excalidrawDialogTitle, F as excalidrawStaticContainer, N as excalidrawHeaderClose, P as excalidrawPlaceholder, T as excalidrawDialogHeaderTitle, c as DARK_SCENE_FILTER, d as computeSceneBounds, f as ExcalidrawEmptyState, h as ExcalidrawPlaceholderState, m as ExcalidrawLoadingState, n as useExcalidrawData, o as countElements, p as ExcalidrawErrorState, s as toScene, t as useExcalidrawFont, u as SceneContent, w as excalidrawDialogHeader } from "./useExcalidrawFont-DAmoYxvU.js";
|
|
2
|
+
import { Component, Suspense, lazy, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
3
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { createRendererDecoration, useColorScheme } from "@haklex/rich-editor/static";
|
|
5
|
+
import { Maximize2, ScanSearch, X, ZoomIn, ZoomOut } from "lucide-react";
|
|
6
|
+
import { ViewportGate } from "@haklex/rich-editor-ui";
|
|
7
|
+
import { DecoratorNode } from "lexical";
|
|
8
|
+
import { EXCALIDRAW_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
|
|
9
|
+
//#region \0rolldown/runtime.js
|
|
10
|
+
var __defProp = Object.defineProperty;
|
|
11
|
+
var __exportAll = (all, no_symbols) => {
|
|
12
|
+
let target = {};
|
|
13
|
+
for (var name in all) __defProp(target, name, {
|
|
14
|
+
get: all[name],
|
|
15
|
+
enumerable: true
|
|
16
|
+
});
|
|
17
|
+
if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
//#endregion
|
|
21
|
+
//#region src/scene/styles.css.ts
|
|
22
|
+
var sceneRoot = "_1capwnq0";
|
|
23
|
+
var sceneSvg = "_1capwnq1";
|
|
24
|
+
var toolbar = "_1capwnq2";
|
|
25
|
+
var toolButton = "_1capwnq3";
|
|
26
|
+
var zoomLabel = "_1capwnq4";
|
|
27
|
+
var toolSeparator = "_1capwnq5";
|
|
28
|
+
//#endregion
|
|
29
|
+
//#region src/scene/InteractiveScene.tsx
|
|
30
|
+
var MIN_SCALE = .05;
|
|
31
|
+
var MAX_SCALE = 16;
|
|
32
|
+
var ZOOM_STEP = 1.2;
|
|
33
|
+
var InteractiveScene = ({ mode = "inline", onExpand, scene, theme = "light" }) => {
|
|
34
|
+
const containerRef = useRef(null);
|
|
35
|
+
const [size, setSize] = useState({
|
|
36
|
+
w: 0,
|
|
37
|
+
h: 0
|
|
38
|
+
});
|
|
39
|
+
const [transform, setTransform] = useState({
|
|
40
|
+
s: 1,
|
|
41
|
+
tx: 0,
|
|
42
|
+
ty: 0
|
|
43
|
+
});
|
|
44
|
+
const [panning, setPanning] = useState(false);
|
|
45
|
+
const transformRef = useRef(transform);
|
|
46
|
+
const userInteractedRef = useRef(false);
|
|
47
|
+
const elements = useMemo(() => scene.elements.filter((el) => !el.isDeleted), [scene]);
|
|
48
|
+
const bounds = useMemo(() => computeSceneBounds(elements), [elements]);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
transformRef.current = transform;
|
|
51
|
+
}, [transform]);
|
|
52
|
+
useLayoutEffect(() => {
|
|
53
|
+
const node = containerRef.current;
|
|
54
|
+
if (!node) return;
|
|
55
|
+
const rect = node.getBoundingClientRect();
|
|
56
|
+
setSize({
|
|
57
|
+
w: rect.width,
|
|
58
|
+
h: rect.height
|
|
59
|
+
});
|
|
60
|
+
const ro = new ResizeObserver((entries) => {
|
|
61
|
+
const r = entries[0].contentRect;
|
|
62
|
+
setSize({
|
|
63
|
+
w: r.width,
|
|
64
|
+
h: r.height
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
ro.observe(node);
|
|
68
|
+
return () => ro.disconnect();
|
|
69
|
+
}, []);
|
|
70
|
+
const computeFit = useCallback(() => {
|
|
71
|
+
if (!size.w || !size.h) return {
|
|
72
|
+
s: 1,
|
|
73
|
+
tx: 0,
|
|
74
|
+
ty: 0
|
|
75
|
+
};
|
|
76
|
+
const sceneW = bounds.width || 1;
|
|
77
|
+
const sceneH = bounds.height || 1;
|
|
78
|
+
const s = Math.max(MIN_SCALE, Math.min(MAX_SCALE, Math.min((size.w - 64) / sceneW, (size.h - 64) / sceneH)));
|
|
79
|
+
return {
|
|
80
|
+
s,
|
|
81
|
+
tx: size.w / 2 - (bounds.minX + sceneW / 2) * s,
|
|
82
|
+
ty: size.h / 2 - (bounds.minY + sceneH / 2) * s
|
|
83
|
+
};
|
|
84
|
+
}, [size, bounds]);
|
|
85
|
+
const fitToContent = useCallback(() => {
|
|
86
|
+
setTransform(computeFit());
|
|
87
|
+
userInteractedRef.current = false;
|
|
88
|
+
}, [computeFit]);
|
|
89
|
+
useLayoutEffect(() => {
|
|
90
|
+
if (userInteractedRef.current) return;
|
|
91
|
+
if (!size.w || !size.h) return;
|
|
92
|
+
setTransform(computeFit());
|
|
93
|
+
}, [size, computeFit]);
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
userInteractedRef.current = false;
|
|
96
|
+
}, [scene]);
|
|
97
|
+
const zoomAt = useCallback((factor, anchorX, anchorY) => {
|
|
98
|
+
const t = transformRef.current;
|
|
99
|
+
const newS = Math.max(MIN_SCALE, Math.min(MAX_SCALE, t.s * factor));
|
|
100
|
+
const k = newS / t.s;
|
|
101
|
+
if (k === 1) return;
|
|
102
|
+
userInteractedRef.current = true;
|
|
103
|
+
setTransform({
|
|
104
|
+
s: newS,
|
|
105
|
+
tx: anchorX - (anchorX - t.tx) * k,
|
|
106
|
+
ty: anchorY - (anchorY - t.ty) * k
|
|
107
|
+
});
|
|
108
|
+
}, []);
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
const node = containerRef.current;
|
|
111
|
+
if (!node) return;
|
|
112
|
+
const onWheel = (e) => {
|
|
113
|
+
if (!e.ctrlKey && !e.metaKey) return;
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
const rect = node.getBoundingClientRect();
|
|
116
|
+
zoomAt(e.deltaY > 0 ? .9 : 1.1, e.clientX - rect.left, e.clientY - rect.top);
|
|
117
|
+
};
|
|
118
|
+
node.addEventListener("wheel", onWheel, { passive: false });
|
|
119
|
+
return () => node.removeEventListener("wheel", onWheel);
|
|
120
|
+
}, [zoomAt]);
|
|
121
|
+
const pointersRef = useRef(/* @__PURE__ */ new Map());
|
|
122
|
+
const panRef = useRef(null);
|
|
123
|
+
const pinchRef = useRef(null);
|
|
124
|
+
const ownsPointer = (e) => !(mode === "inline" && e.pointerType === "touch");
|
|
125
|
+
const startPinch = () => {
|
|
126
|
+
const pts = [...pointersRef.current.values()];
|
|
127
|
+
const node = containerRef.current;
|
|
128
|
+
if (pts.length < 2 || !node) return;
|
|
129
|
+
const rect = node.getBoundingClientRect();
|
|
130
|
+
pinchRef.current = {
|
|
131
|
+
distance: Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y) || 1,
|
|
132
|
+
origScale: transformRef.current.s,
|
|
133
|
+
origTx: transformRef.current.tx,
|
|
134
|
+
origTy: transformRef.current.ty,
|
|
135
|
+
midX: (pts[0].x + pts[1].x) / 2 - rect.left,
|
|
136
|
+
midY: (pts[0].y + pts[1].y) / 2 - rect.top
|
|
137
|
+
};
|
|
138
|
+
};
|
|
139
|
+
const handlePointerDown = (e) => {
|
|
140
|
+
if (!ownsPointer(e)) return;
|
|
141
|
+
if (e.pointerType === "mouse" && e.button !== 0) return;
|
|
142
|
+
if (e.target.closest("button")) return;
|
|
143
|
+
e.currentTarget.setPointerCapture(e.pointerId);
|
|
144
|
+
pointersRef.current.set(e.pointerId, {
|
|
145
|
+
x: e.clientX,
|
|
146
|
+
y: e.clientY
|
|
147
|
+
});
|
|
148
|
+
if (pointersRef.current.size === 1) {
|
|
149
|
+
panRef.current = {
|
|
150
|
+
startX: e.clientX,
|
|
151
|
+
startY: e.clientY,
|
|
152
|
+
origTx: transformRef.current.tx,
|
|
153
|
+
origTy: transformRef.current.ty
|
|
154
|
+
};
|
|
155
|
+
setPanning(true);
|
|
156
|
+
} else if (pointersRef.current.size === 2) {
|
|
157
|
+
panRef.current = null;
|
|
158
|
+
startPinch();
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
const handlePointerMove = (e) => {
|
|
162
|
+
if (!pointersRef.current.has(e.pointerId)) return;
|
|
163
|
+
pointersRef.current.set(e.pointerId, {
|
|
164
|
+
x: e.clientX,
|
|
165
|
+
y: e.clientY
|
|
166
|
+
});
|
|
167
|
+
const pinch = pinchRef.current;
|
|
168
|
+
if (pinch && pointersRef.current.size === 2) {
|
|
169
|
+
userInteractedRef.current = true;
|
|
170
|
+
const pts = [...pointersRef.current.values()];
|
|
171
|
+
const ratio = (Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y) || 1) / pinch.distance;
|
|
172
|
+
const newS = Math.max(MIN_SCALE, Math.min(MAX_SCALE, pinch.origScale * ratio));
|
|
173
|
+
const k = newS / pinch.origScale;
|
|
174
|
+
setTransform({
|
|
175
|
+
s: newS,
|
|
176
|
+
tx: pinch.midX - (pinch.midX - pinch.origTx) * k,
|
|
177
|
+
ty: pinch.midY - (pinch.midY - pinch.origTy) * k
|
|
178
|
+
});
|
|
179
|
+
return;
|
|
180
|
+
}
|
|
181
|
+
const pan = panRef.current;
|
|
182
|
+
if (pan && pointersRef.current.size === 1) {
|
|
183
|
+
userInteractedRef.current = true;
|
|
184
|
+
setTransform((t) => ({
|
|
185
|
+
s: t.s,
|
|
186
|
+
tx: pan.origTx + e.clientX - pan.startX,
|
|
187
|
+
ty: pan.origTy + e.clientY - pan.startY
|
|
188
|
+
}));
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
const releasePointer = (e) => {
|
|
192
|
+
if (!pointersRef.current.delete(e.pointerId)) return;
|
|
193
|
+
if (pointersRef.current.size < 2) pinchRef.current = null;
|
|
194
|
+
if (pointersRef.current.size === 0) {
|
|
195
|
+
panRef.current = null;
|
|
196
|
+
setPanning(false);
|
|
197
|
+
}
|
|
198
|
+
if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
|
|
199
|
+
};
|
|
200
|
+
const handleDoubleClick = (e) => {
|
|
201
|
+
if (e.target.closest("button")) return;
|
|
202
|
+
fitToContent();
|
|
203
|
+
};
|
|
204
|
+
const centerZoom = (factor) => zoomAt(factor, size.w / 2, size.h / 2);
|
|
205
|
+
const isDark = theme === "dark";
|
|
206
|
+
const label = `Whiteboard, ${elements.length} elements`;
|
|
207
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
208
|
+
className: sceneRoot,
|
|
209
|
+
"data-color-scheme": theme,
|
|
210
|
+
"data-mode": mode,
|
|
211
|
+
"data-panning": panning,
|
|
212
|
+
ref: containerRef,
|
|
213
|
+
onDoubleClick: handleDoubleClick,
|
|
214
|
+
onPointerCancel: releasePointer,
|
|
215
|
+
onPointerDown: handlePointerDown,
|
|
216
|
+
onPointerMove: handlePointerMove,
|
|
217
|
+
onPointerUp: releasePointer,
|
|
218
|
+
children: [/* @__PURE__ */ jsx("svg", {
|
|
219
|
+
"aria-label": label,
|
|
220
|
+
className: sceneSvg,
|
|
221
|
+
preserveAspectRatio: "xMinYMin meet",
|
|
222
|
+
role: "img",
|
|
223
|
+
style: isDark ? { filter: DARK_SCENE_FILTER } : void 0,
|
|
224
|
+
viewBox: `0 0 ${size.w || 1} ${size.h || 1}`,
|
|
225
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
226
|
+
children: /* @__PURE__ */ jsx("g", {
|
|
227
|
+
transform: `translate(${transform.tx} ${transform.ty}) scale(${transform.s})`,
|
|
228
|
+
children: /* @__PURE__ */ jsx(SceneContent, {
|
|
229
|
+
dark: isDark,
|
|
230
|
+
files: scene.files,
|
|
231
|
+
scene
|
|
232
|
+
})
|
|
233
|
+
})
|
|
234
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
235
|
+
className: toolbar,
|
|
236
|
+
children: [
|
|
237
|
+
/* @__PURE__ */ jsx("button", {
|
|
238
|
+
"aria-label": "Zoom out",
|
|
239
|
+
className: toolButton,
|
|
240
|
+
title: "Zoom out (⌘/Ctrl + scroll)",
|
|
241
|
+
type: "button",
|
|
242
|
+
onClick: () => centerZoom(1 / ZOOM_STEP),
|
|
243
|
+
children: /* @__PURE__ */ jsx(ZoomOut, {})
|
|
244
|
+
}),
|
|
245
|
+
/* @__PURE__ */ jsxs("span", {
|
|
246
|
+
className: zoomLabel,
|
|
247
|
+
children: [Math.round(transform.s * 100), "%"]
|
|
248
|
+
}),
|
|
249
|
+
/* @__PURE__ */ jsx("button", {
|
|
250
|
+
"aria-label": "Zoom in",
|
|
251
|
+
className: toolButton,
|
|
252
|
+
title: "Zoom in (⌘/Ctrl + scroll)",
|
|
253
|
+
type: "button",
|
|
254
|
+
onClick: () => centerZoom(ZOOM_STEP),
|
|
255
|
+
children: /* @__PURE__ */ jsx(ZoomIn, {})
|
|
256
|
+
}),
|
|
257
|
+
/* @__PURE__ */ jsx("span", {
|
|
258
|
+
"aria-hidden": true,
|
|
259
|
+
className: toolSeparator
|
|
260
|
+
}),
|
|
261
|
+
/* @__PURE__ */ jsx("button", {
|
|
262
|
+
"aria-label": "Fit to content",
|
|
263
|
+
className: toolButton,
|
|
264
|
+
title: "Fit to content (double-click)",
|
|
265
|
+
type: "button",
|
|
266
|
+
onClick: fitToContent,
|
|
267
|
+
children: /* @__PURE__ */ jsx(ScanSearch, {})
|
|
268
|
+
}),
|
|
269
|
+
onExpand && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
270
|
+
"aria-hidden": true,
|
|
271
|
+
className: "_1capwnq5"
|
|
272
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
273
|
+
"aria-label": "Fullscreen",
|
|
274
|
+
className: "_1capwnq3",
|
|
275
|
+
title: "Fullscreen",
|
|
276
|
+
type: "button",
|
|
277
|
+
onClick: (e) => onExpand(e.currentTarget),
|
|
278
|
+
children: /* @__PURE__ */ jsx(Maximize2, {})
|
|
279
|
+
})] })
|
|
280
|
+
]
|
|
281
|
+
})]
|
|
282
|
+
});
|
|
283
|
+
};
|
|
284
|
+
//#endregion
|
|
285
|
+
//#region \0@oxc-project+runtime@0.154.0/helpers/esm/typeof.js
|
|
286
|
+
function _typeof(o) {
|
|
287
|
+
"@babel/helpers - typeof";
|
|
288
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
|
|
289
|
+
return typeof o;
|
|
290
|
+
} : function(o) {
|
|
291
|
+
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
|
|
292
|
+
}, _typeof(o);
|
|
293
|
+
}
|
|
294
|
+
//#endregion
|
|
295
|
+
//#region \0@oxc-project+runtime@0.154.0/helpers/esm/toPrimitive.js
|
|
296
|
+
function toPrimitive(t, r) {
|
|
297
|
+
if ("object" != _typeof(t) || !t) return t;
|
|
298
|
+
var e = t[Symbol.toPrimitive];
|
|
299
|
+
if (void 0 !== e) {
|
|
300
|
+
var i = e.call(t, r || "default");
|
|
301
|
+
if ("object" != _typeof(i)) return i;
|
|
302
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
303
|
+
}
|
|
304
|
+
return ("string" === r ? String : Number)(t);
|
|
305
|
+
}
|
|
306
|
+
//#endregion
|
|
307
|
+
//#region \0@oxc-project+runtime@0.154.0/helpers/esm/toPropertyKey.js
|
|
308
|
+
function toPropertyKey(t) {
|
|
309
|
+
var i = toPrimitive(t, "string");
|
|
310
|
+
return "symbol" == _typeof(i) ? i : i + "";
|
|
311
|
+
}
|
|
312
|
+
//#endregion
|
|
313
|
+
//#region \0@oxc-project+runtime@0.154.0/helpers/esm/defineProperty.js
|
|
314
|
+
function _defineProperty(e, r, t) {
|
|
315
|
+
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
|
|
316
|
+
value: t,
|
|
317
|
+
enumerable: !0,
|
|
318
|
+
configurable: !0,
|
|
319
|
+
writable: !0
|
|
320
|
+
}) : e[r] = t, e;
|
|
321
|
+
}
|
|
322
|
+
//#endregion
|
|
323
|
+
//#region src/ExcalidrawDisplayRenderer.tsx
|
|
324
|
+
var ExcalidrawDisplayRenderer_exports = /* @__PURE__ */ __exportAll({ ExcalidrawDisplayRenderer: () => ExcalidrawDisplayRenderer });
|
|
325
|
+
var ExcalidrawDisplayRenderer = ({ onExpand, snapshot }) => {
|
|
326
|
+
const theme = useColorScheme();
|
|
327
|
+
const { snapshot: data, loading, error, retry } = useExcalidrawData(snapshot);
|
|
328
|
+
const scene = useMemo(() => toScene(data), [data]);
|
|
329
|
+
useExcalidrawFont();
|
|
330
|
+
const handleExpand = useCallback((target) => {
|
|
331
|
+
if (!onExpand || !scene) return;
|
|
332
|
+
onExpand({
|
|
333
|
+
content: /* @__PURE__ */ jsx(InteractiveScene, {
|
|
334
|
+
mode: "fullscreen",
|
|
335
|
+
scene,
|
|
336
|
+
theme
|
|
337
|
+
}),
|
|
338
|
+
elementCount: countElements(scene),
|
|
339
|
+
target,
|
|
340
|
+
theme
|
|
341
|
+
});
|
|
342
|
+
}, [
|
|
343
|
+
onExpand,
|
|
344
|
+
scene,
|
|
345
|
+
theme
|
|
346
|
+
]);
|
|
347
|
+
let body;
|
|
348
|
+
if (loading) body = /* @__PURE__ */ jsx(ExcalidrawLoadingState, {});
|
|
349
|
+
else if (error) body = /* @__PURE__ */ jsx(ExcalidrawErrorState, {
|
|
350
|
+
message: error,
|
|
351
|
+
onRetry: retry
|
|
352
|
+
});
|
|
353
|
+
else if (!data) body = /* @__PURE__ */ jsx(ExcalidrawEmptyState, {});
|
|
354
|
+
else if (!scene) body = /* @__PURE__ */ jsx(ExcalidrawErrorState, { message: "Invalid whiteboard data" });
|
|
355
|
+
else if (countElements(scene) === 0) body = /* @__PURE__ */ jsx(ExcalidrawEmptyState, {});
|
|
356
|
+
else body = /* @__PURE__ */ jsx(ExcalidrawErrorBoundary, {
|
|
357
|
+
fallback: /* @__PURE__ */ jsx(ExcalidrawErrorState, { message: "Failed to render whiteboard" }),
|
|
358
|
+
children: /* @__PURE__ */ jsx(InteractiveScene, {
|
|
359
|
+
scene,
|
|
360
|
+
theme,
|
|
361
|
+
onExpand: onExpand ? handleExpand : void 0
|
|
362
|
+
})
|
|
363
|
+
});
|
|
364
|
+
return /* @__PURE__ */ jsx("div", {
|
|
365
|
+
className: excalidrawStaticContainer,
|
|
366
|
+
"data-theme": theme,
|
|
367
|
+
children: body
|
|
368
|
+
});
|
|
369
|
+
};
|
|
370
|
+
var ExcalidrawErrorBoundary = class extends Component {
|
|
371
|
+
constructor(..._args) {
|
|
372
|
+
super(..._args);
|
|
373
|
+
_defineProperty(this, "state", { hasError: false });
|
|
374
|
+
}
|
|
375
|
+
static getDerivedStateFromError() {
|
|
376
|
+
return { hasError: true };
|
|
377
|
+
}
|
|
378
|
+
render() {
|
|
379
|
+
return this.state.hasError ? this.props.fallback : this.props.children;
|
|
380
|
+
}
|
|
381
|
+
};
|
|
382
|
+
//#endregion
|
|
383
|
+
//#region src/ExcalidrawSSRRenderer.tsx
|
|
384
|
+
var LazyDisplayRenderer = lazy(() => Promise.resolve().then(() => ExcalidrawDisplayRenderer_exports).then((m) => ({ default: m.ExcalidrawDisplayRenderer })));
|
|
385
|
+
function countInlineElements(snapshot) {
|
|
386
|
+
try {
|
|
387
|
+
const data = JSON.parse(snapshot);
|
|
388
|
+
if (data && typeof data === "object" && Array.isArray(data.elements)) return data.elements.filter((el) => !el?.isDeleted).length;
|
|
389
|
+
} catch {}
|
|
390
|
+
}
|
|
391
|
+
var ExcalidrawPlaceholder = ({ snapshot }) => /* @__PURE__ */ jsx("div", {
|
|
392
|
+
className: excalidrawPlaceholder,
|
|
393
|
+
children: /* @__PURE__ */ jsx(ExcalidrawPlaceholderState, { elementCount: countInlineElements(snapshot) })
|
|
394
|
+
});
|
|
395
|
+
var ExcalidrawSSRRenderer = ({ onExpand, snapshot }) => {
|
|
396
|
+
return /* @__PURE__ */ jsx(ViewportGate, {
|
|
397
|
+
fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }),
|
|
398
|
+
children: /* @__PURE__ */ jsx(Suspense, {
|
|
399
|
+
fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }),
|
|
400
|
+
children: /* @__PURE__ */ jsx(LazyDisplayRenderer, {
|
|
401
|
+
snapshot,
|
|
402
|
+
onExpand
|
|
403
|
+
})
|
|
404
|
+
})
|
|
405
|
+
});
|
|
406
|
+
};
|
|
407
|
+
//#endregion
|
|
408
|
+
//#region src/slot.ts
|
|
409
|
+
var EXCALIDRAW_NODE_KEY = "Excalidraw";
|
|
410
|
+
//#endregion
|
|
411
|
+
//#region src/ExcalidrawNode.ts
|
|
412
|
+
var ExcalidrawNode = class ExcalidrawNode extends DecoratorNode {
|
|
413
|
+
static getType() {
|
|
414
|
+
return "excalidraw";
|
|
415
|
+
}
|
|
416
|
+
static clone(node) {
|
|
417
|
+
return new ExcalidrawNode(node.__snapshot, node.__key);
|
|
418
|
+
}
|
|
419
|
+
constructor(snapshot, key) {
|
|
420
|
+
super(key);
|
|
421
|
+
_defineProperty(this, "__snapshot", void 0);
|
|
422
|
+
this.__snapshot = snapshot;
|
|
423
|
+
}
|
|
424
|
+
createDOM(_config) {
|
|
425
|
+
const div = document.createElement("div");
|
|
426
|
+
div.className = "rich-excalidraw-wrapper";
|
|
427
|
+
return div;
|
|
428
|
+
}
|
|
429
|
+
updateDOM() {
|
|
430
|
+
return false;
|
|
431
|
+
}
|
|
432
|
+
isInline() {
|
|
433
|
+
return false;
|
|
434
|
+
}
|
|
435
|
+
static importJSON(_serializedNode) {
|
|
436
|
+
return $createExcalidrawNode(_serializedNode.snapshot).updateFromJSON(_serializedNode);
|
|
437
|
+
}
|
|
438
|
+
exportJSON() {
|
|
439
|
+
return {
|
|
440
|
+
...super.exportJSON(),
|
|
441
|
+
type: "excalidraw",
|
|
442
|
+
snapshot: this.__snapshot,
|
|
443
|
+
version: 1
|
|
444
|
+
};
|
|
445
|
+
}
|
|
446
|
+
getSnapshot() {
|
|
447
|
+
return this.__snapshot;
|
|
448
|
+
}
|
|
449
|
+
setSnapshot(snapshot) {
|
|
450
|
+
const writable = this.getWritable();
|
|
451
|
+
writable.__snapshot = snapshot;
|
|
452
|
+
}
|
|
453
|
+
decorate(_editor, _config) {
|
|
454
|
+
return createRendererDecoration(EXCALIDRAW_NODE_KEY, ExcalidrawSSRRenderer, { snapshot: this.__snapshot });
|
|
455
|
+
}
|
|
456
|
+
};
|
|
457
|
+
function $createExcalidrawNode(snapshot) {
|
|
458
|
+
return new ExcalidrawNode(snapshot);
|
|
459
|
+
}
|
|
460
|
+
function $isExcalidrawNode(node) {
|
|
461
|
+
return node instanceof ExcalidrawNode;
|
|
462
|
+
}
|
|
463
|
+
//#endregion
|
|
464
|
+
//#region src/ExcalidrawExpandShell.tsx
|
|
465
|
+
var ExcalidrawExpandShell = ({ children, dismiss, meta = "excalidraw", title = "Whiteboard" }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
|
|
466
|
+
className: excalidrawDialogHeader,
|
|
467
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
468
|
+
className: excalidrawDialogHeaderTitle,
|
|
469
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
470
|
+
className: excalidrawDialogTitle,
|
|
471
|
+
children: title
|
|
472
|
+
}), meta != null && /* @__PURE__ */ jsx("span", {
|
|
473
|
+
className: "_1c3wdzlg",
|
|
474
|
+
children: meta
|
|
475
|
+
})]
|
|
476
|
+
}), /* @__PURE__ */ jsx("button", {
|
|
477
|
+
className: excalidrawHeaderClose,
|
|
478
|
+
type: "button",
|
|
479
|
+
onClick: dismiss,
|
|
480
|
+
children: /* @__PURE__ */ jsx(X, { size: 18 })
|
|
481
|
+
})]
|
|
482
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
483
|
+
className: excalidrawDialogCanvas,
|
|
484
|
+
children
|
|
485
|
+
})] });
|
|
486
|
+
//#endregion
|
|
487
|
+
export { ExcalidrawNode as a, ExcalidrawDisplayRenderer as c, $isExcalidrawNode as i, _defineProperty as l, ExcalidrawExpandShell as n, EXCALIDRAW_NODE_KEY as o, $createExcalidrawNode as r, ExcalidrawSSRRenderer as s, EXCALIDRAW_BLOCK_TRANSFORMER as t, __exportAll as u };
|
|
@@ -6,6 +6,8 @@ export interface ExcalidrawDataState {
|
|
|
6
6
|
baseRef?: string;
|
|
7
7
|
error: string;
|
|
8
8
|
loading: boolean;
|
|
9
|
+
/** Re-fetches a remote or incremental snapshot; a no-op for inline data. */
|
|
10
|
+
retry: () => void;
|
|
9
11
|
snapshot: Record<string, any> | undefined;
|
|
10
12
|
}
|
|
11
13
|
export declare function useExcalidrawData(data: string | ExcalidrawSnapshot | null): ExcalidrawDataState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExcalidrawData.d.ts","sourceRoot":"","sources":["../src/useExcalidrawData.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,MAAM,WAAW,mBAAmB;IAClC,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;CAC3C;AA4DD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,GAAG,mBAAmB,
|
|
1
|
+
{"version":3,"file":"useExcalidrawData.d.ts","sourceRoot":"","sources":["../src/useExcalidrawData.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,MAAM,WAAW,mBAAmB;IAClC,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;CAC3C;AA4DD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,GAAG,mBAAmB,CA8E/F"}
|