@floegence/floe-webapp-core 0.36.43 → 0.36.44
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/components/workbench/WorkbenchLayerObjects.js +134 -121
- package/dist/styles.css +1 -1
- package/dist/workbench.css +20 -15
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { insert as y, createComponent as v, memo as p, effect as W, addEventListener as N, use as Z, setAttribute as g, classList as ue, style as ee, template as R, setStyleProperty as q, delegateEvents as
|
|
1
|
+
import { insert as y, createComponent as v, memo as p, effect as W, addEventListener as N, use as Z, setAttribute as g, classList as ue, style as ee, template as R, setStyleProperty as q, delegateEvents as Oe } from "solid-js/web";
|
|
2
2
|
import { createMemo as $, For as V, Show as F, createSignal as B, onCleanup as te, createEffect as ae, untrack as oe } from "solid-js";
|
|
3
|
-
import { GripVertical as
|
|
4
|
-
import { startHotInteraction as
|
|
5
|
-
import { startPointerSession as
|
|
6
|
-
import { WORKBENCH_STICKY_NOTE_COLORS as
|
|
7
|
-
import { createWorkbenchWidgetSurfaceMetrics as
|
|
8
|
-
var
|
|
9
|
-
const
|
|
3
|
+
import { GripVertical as Ce, Check as We, Copy as Ne, Trash as me, ChevronDown as Ge, Minus as je, Plus as Ae } from "../icons/index.js";
|
|
4
|
+
import { startHotInteraction as ze } from "../../utils/hotInteraction.js";
|
|
5
|
+
import { startPointerSession as Ee } from "../ui/pointerSession.js";
|
|
6
|
+
import { WORKBENCH_STICKY_NOTE_COLORS as Fe, WORKBENCH_REGION_FILL_OPTIONS as Be, WORKBENCH_BACKGROUND_MATERIALS as He, WORKBENCH_TEXT_FONT_OPTIONS as se, WORKBENCH_TEXT_COLOR_OPTIONS as Ue, WORKBENCH_TEXT_EMOJI_OPTIONS as Xe } from "./workbenchOptions.js";
|
|
7
|
+
import { createWorkbenchWidgetSurfaceMetrics as Ye } from "./workbenchHelpers.js";
|
|
8
|
+
var Ke = /* @__PURE__ */ R('<div class=workbench-sticky__actions data-floe-workbench-sticky-local=true><button type=button class=workbench-sticky__tool aria-label="Copy sticky note content"></button><button type=button class=workbench-sticky__tool aria-label="Change sticky note color"title="Change sticky note color"><span class=workbench-sticky__color-dot aria-hidden=true></span></button><button type=button class="workbench-sticky__tool is-danger"aria-label="Delete sticky note"title="Delete sticky note">'), Ve = /* @__PURE__ */ R('<button type=button class="workbench-layer-resize workbench-sticky__resize"aria-label="Resize sticky note">'), Je = /* @__PURE__ */ R('<article class=workbench-sticky data-floe-canvas-interactive=true data-floe-workbench-widget-root=true data-wb-plane=work data-wb-object-kind=sticky tabindex=0><div class=workbench-sticky__surface><header class=workbench-sticky__header><button type=button class=workbench-sticky__grip aria-label="Drag sticky note"data-floe-workbench-sticky-local=true data-wb-part=move></button></header><div class=workbench-sticky__body role=textbox aria-multiline=true aria-label="Sticky note body"data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-floe-workbench-sticky-local=true data-wb-part=content>'), qe = /* @__PURE__ */ R("<article class=workbench-text-annotation data-wb-plane=annotation data-wb-object-kind=text data-wb-part=body><div class=workbench-text-annotation__content data-floe-workbench-text-selection-surface=true data-wb-text-editor=plain data-wb-part=content>"), Qe = /* @__PURE__ */ R("<article class=workbench-background-region data-wb-plane=background data-wb-object-kind=region data-wb-part=body>"), Ze = /* @__PURE__ */ R('<div class=workbench-text-font-popover role=menu aria-label="Bold font">'), pe = /* @__PURE__ */ R("<div class=workbench-text-emoji-popover role=menu aria-label=Emoji>"), et = /* @__PURE__ */ R('<div class="workbench-layer-control workbench-layer-control--text"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=text data-wb-part=toolbar><div class="workbench-layer-control__selection is-text"aria-hidden=true></div><div class=workbench-text-annotation__toolbar data-floe-canvas-interactive=true><button type=button aria-label="Move text"title="Move text"class="workbench-layer-mini-button workbench-layer-move-handle"data-wb-part=move></button><div class=workbench-text-font-picker data-floe-canvas-interactive=true><button type=button aria-label="Choose bold font"aria-haspopup=menu title="Choose bold font"class=workbench-text-font-trigger><span class=workbench-text-font-trigger__sample>Aa</span><span class=workbench-text-font-trigger__label></span></button></div><div class=workbench-text-size-stepper role=group aria-label="Text size"><button type=button aria-label="Decrease text size"title="Decrease text size"class=workbench-text-size-stepper__button></button><input class=workbench-text-annotation__size-input type=text inputmode=numeric pattern=[0-9]* aria-label="Text size value"><button type=button aria-label="Increase text size"title="Increase text size"class=workbench-text-size-stepper__button></button></div><div class=workbench-text-emoji-picker data-floe-canvas-interactive=true><button type=button aria-label="Insert emoji"aria-haspopup=menu title="Insert emoji"class=workbench-text-emoji-trigger>✨</button></div><button type=button class=workbench-layer-mini-button></button><button type=button class="workbench-layer-mini-button is-danger"aria-label="Delete text"></button></div><button type=button class=workbench-layer-resize aria-label="Resize text"data-wb-part=resize>'), tt = /* @__PURE__ */ R("<button type=button role=menuitemradio class=workbench-text-font-option><span class=workbench-text-font-option__sample>Aa</span><span class=workbench-text-font-option__label>"), it = /* @__PURE__ */ R("<button type=button class=workbench-layer-swatch>"), nt = /* @__PURE__ */ R("<button type=button role=menuitem class=workbench-text-emoji-option>"), ot = /* @__PURE__ */ R('<div class="workbench-layer-control workbench-layer-control--region"data-floe-canvas-interactive=true data-wb-plane=overlay data-wb-object-kind=region data-wb-part=toolbar><div class="workbench-layer-control__selection is-region"aria-hidden=true></div><div class=workbench-background-region__toolbar data-floe-canvas-interactive=true><div class=workbench-region-material-group role=group aria-label="Region material"></div><button type=button class=workbench-layer-mini-button>%</button><button type=button class="workbench-layer-mini-button is-danger"aria-label="Delete background region"></button></div><button type=button class=workbench-layer-resize aria-label="Resize background region"data-wb-part=resize>'), at = /* @__PURE__ */ R('<button type=button class="workbench-layer-swatch workbench-layer-swatch--region">'), rt = /* @__PURE__ */ R("<button type=button class=workbench-region-material><span class=workbench-region-material__sample aria-hidden=true>"), lt = /* @__PURE__ */ R("<div class=workbench-background-layer>"), ct = /* @__PURE__ */ R("<div class=workbench-annotation-layer>"), dt = /* @__PURE__ */ R("<div class=workbench-control-overlay-layer data-wb-plane=overlay>");
|
|
9
|
+
const st = 190, ut = 132, mt = 180, ht = 120, bt = 96, wt = 42, $e = {
|
|
10
10
|
solid: "Solid",
|
|
11
11
|
dotted: "Dotted",
|
|
12
12
|
grid: "Grid",
|
|
13
13
|
hatched: "Hatched",
|
|
14
14
|
glass: "Glass"
|
|
15
|
-
},
|
|
15
|
+
}, gt = {
|
|
16
16
|
amber: "is-amber",
|
|
17
17
|
sage: "is-sage",
|
|
18
18
|
azure: "is-azure",
|
|
@@ -20,7 +20,7 @@ const lt = 190, ct = 132, dt = 180, st = 120, ut = 96, mt = 42, $e = {
|
|
|
20
20
|
rose: "is-rose",
|
|
21
21
|
graphite: "is-graphite"
|
|
22
22
|
};
|
|
23
|
-
function
|
|
23
|
+
function Mt() {
|
|
24
24
|
const e = /* @__PURE__ */ new Map();
|
|
25
25
|
return {
|
|
26
26
|
register(i, o) {
|
|
@@ -33,13 +33,13 @@ function Et() {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
}
|
|
36
|
-
function
|
|
36
|
+
function Pe(e) {
|
|
37
37
|
return [...e].sort((i, o) => i.z_index !== o.z_index ? i.z_index - o.z_index : i.created_at_unix_ms !== o.created_at_unix_ms ? i.created_at_unix_ms - o.created_at_unix_ms : i.id.localeCompare(o.id));
|
|
38
38
|
}
|
|
39
|
-
function
|
|
39
|
+
function Ie(e) {
|
|
40
40
|
return new Map(e.map((i) => [i.id, i]));
|
|
41
41
|
}
|
|
42
|
-
function
|
|
42
|
+
function Me(e, i) {
|
|
43
43
|
const o = e.findIndex((n) => n === i);
|
|
44
44
|
return e[(o + 1) % e.length] ?? e[0];
|
|
45
45
|
}
|
|
@@ -57,12 +57,12 @@ function _e(e, i, o) {
|
|
|
57
57
|
});
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
|
-
function
|
|
60
|
+
function vt(e, i) {
|
|
61
61
|
if (!e || e.rangeCount <= 0) return !1;
|
|
62
62
|
const o = e.getRangeAt(0).commonAncestorContainer;
|
|
63
63
|
return o === i || i.contains(o);
|
|
64
64
|
}
|
|
65
|
-
function
|
|
65
|
+
function Re(e) {
|
|
66
66
|
const [i, o] = B(), [n, a] = B(!1), [r, t] = B(!1), m = () => i()?.textContent ?? e.value(), _ = (x) => o(x), c = (x) => {
|
|
67
67
|
const u = x.textContent ?? "";
|
|
68
68
|
u !== e.value() && e.onCommit(u);
|
|
@@ -80,7 +80,7 @@ function Te(e) {
|
|
|
80
80
|
const u = i();
|
|
81
81
|
if (!u) return;
|
|
82
82
|
u.focus();
|
|
83
|
-
const z = document.getSelection(), C =
|
|
83
|
+
const z = document.getSelection(), C = vt(z, u), L = C && z ? z.getRangeAt(0) : document.createRange();
|
|
84
84
|
C || (L.selectNodeContents(u), L.collapse(!1)), L.deleteContents();
|
|
85
85
|
const b = document.createTextNode(x);
|
|
86
86
|
L.insertNode(b), L.setStartAfter(b), L.collapse(!0), z?.removeAllRanges(), z?.addRange(L), c(u);
|
|
@@ -102,19 +102,34 @@ function Te(e) {
|
|
|
102
102
|
}
|
|
103
103
|
};
|
|
104
104
|
}
|
|
105
|
-
function
|
|
105
|
+
function ft(e) {
|
|
106
106
|
return Math.max(8, Math.min(160, Math.round(e)));
|
|
107
107
|
}
|
|
108
|
+
function Te(e) {
|
|
109
|
+
return Math.max(0.08, Math.min(1, e));
|
|
110
|
+
}
|
|
111
|
+
function Se(e) {
|
|
112
|
+
return `${Math.round(Te(e) * 1e3) / 10}%`;
|
|
113
|
+
}
|
|
114
|
+
function Le(e) {
|
|
115
|
+
const i = Te(e.opacity), o = `color-mix(in srgb, ${e.fill} ${Math.round(i * 100)}%, transparent)`;
|
|
116
|
+
return {
|
|
117
|
+
"--workbench-region-fill": e.fill,
|
|
118
|
+
"--workbench-region-surface": o,
|
|
119
|
+
"--workbench-region-ink": `color-mix(in srgb, color-mix(in srgb, ${e.fill} 48%, var(--foreground, #111) 52%) ${Se(Math.max(i, 0.42) * 0.72)}, transparent)`,
|
|
120
|
+
"--workbench-region-highlight": `color-mix(in srgb, white ${Se(Math.max(i, 0.32) * 0.2)}, transparent)`
|
|
121
|
+
};
|
|
122
|
+
}
|
|
108
123
|
function Y(e) {
|
|
109
124
|
e.stopPropagation();
|
|
110
125
|
}
|
|
111
126
|
function K(e) {
|
|
112
127
|
e.stopPropagation();
|
|
113
128
|
}
|
|
114
|
-
function
|
|
129
|
+
function T(e) {
|
|
115
130
|
e.preventDefault(), e.stopPropagation();
|
|
116
131
|
}
|
|
117
|
-
function
|
|
132
|
+
function M(e) {
|
|
118
133
|
e.stopPropagation();
|
|
119
134
|
}
|
|
120
135
|
function re(e, i, o) {
|
|
@@ -143,7 +158,7 @@ function le(e) {
|
|
|
143
158
|
reason: "manual_stop",
|
|
144
159
|
commit: !1
|
|
145
160
|
});
|
|
146
|
-
const m = e.readPosition(), _ = Math.max(e.viewportScale(), 1e-3), c =
|
|
161
|
+
const m = e.readPosition(), _ = Math.max(e.viewportScale(), 1e-3), c = ze({
|
|
147
162
|
kind: "drag",
|
|
148
163
|
cursor: "grabbing"
|
|
149
164
|
});
|
|
@@ -163,7 +178,7 @@ function le(e) {
|
|
|
163
178
|
scale: _,
|
|
164
179
|
moved: !1,
|
|
165
180
|
stopInteraction: S
|
|
166
|
-
}), n =
|
|
181
|
+
}), n = Ee({
|
|
167
182
|
pointerEvent: t,
|
|
168
183
|
captureEl: t.currentTarget,
|
|
169
184
|
onMove: (s) => {
|
|
@@ -218,7 +233,7 @@ function he(e) {
|
|
|
218
233
|
reason: "manual_stop",
|
|
219
234
|
commit: !1
|
|
220
235
|
});
|
|
221
|
-
const m = e.readSize(), _ = Math.max(e.viewportScale(), 1e-3), c =
|
|
236
|
+
const m = e.readSize(), _ = Math.max(e.viewportScale(), 1e-3), c = ze({
|
|
222
237
|
kind: "resize",
|
|
223
238
|
cursor: "nwse-resize"
|
|
224
239
|
});
|
|
@@ -237,7 +252,7 @@ function he(e) {
|
|
|
237
252
|
height: m.height,
|
|
238
253
|
scale: _,
|
|
239
254
|
stopInteraction: S
|
|
240
|
-
}), n =
|
|
255
|
+
}), n = Ee({
|
|
241
256
|
pointerEvent: t,
|
|
242
257
|
captureEl: t.currentTarget,
|
|
243
258
|
onMove: (s) => {
|
|
@@ -264,8 +279,8 @@ function he(e) {
|
|
|
264
279
|
}
|
|
265
280
|
};
|
|
266
281
|
}
|
|
267
|
-
function
|
|
268
|
-
const i =
|
|
282
|
+
function Rt(e) {
|
|
283
|
+
const i = Re({
|
|
269
284
|
value: () => e.item.body,
|
|
270
285
|
onCommit: (w) => e.onUpdate(e.item.id, {
|
|
271
286
|
body: w
|
|
@@ -300,14 +315,14 @@ function Pt(e) {
|
|
|
300
315
|
width: e.item.width,
|
|
301
316
|
height: e.item.height
|
|
302
317
|
}),
|
|
303
|
-
minWidth:
|
|
304
|
-
minHeight:
|
|
318
|
+
minWidth: st,
|
|
319
|
+
minHeight: ut,
|
|
305
320
|
onCommitResize: (w) => e.onCommitResize(e.item.id, w),
|
|
306
321
|
onInteractionStart: () => e.onLayoutInteractionStart?.(),
|
|
307
322
|
onInteractionEnd: () => e.onLayoutInteractionEnd?.()
|
|
308
323
|
}), S = $(() => c.position()), s = $(() => k.size()), l = $(() => {
|
|
309
324
|
if (e.projectedViewport)
|
|
310
|
-
return
|
|
325
|
+
return Ye({
|
|
311
326
|
widgetId: e.item.id,
|
|
312
327
|
worldX: S().x,
|
|
313
328
|
worldY: S().y,
|
|
@@ -324,12 +339,12 @@ function Pt(e) {
|
|
|
324
339
|
"z-index": `${e.selected || e.optimisticFront || c.isDragging() || k.isResizing() ? e.topRenderLayer + 1 : e.renderLayer}`
|
|
325
340
|
}));
|
|
326
341
|
return (() => {
|
|
327
|
-
var w =
|
|
342
|
+
var w = Je(), x = w.firstChild, u = x.firstChild, z = u.firstChild, C = u.nextSibling;
|
|
328
343
|
w.$$contextmenu = (b) => {
|
|
329
344
|
b.preventDefault(), b.stopPropagation(), e.onContextMenu?.(b, e.item);
|
|
330
345
|
}, w.addEventListener("focus", () => e.onSelect(e.item.id)), w.$$pointerdown = _, z.$$pointerdown = (b) => {
|
|
331
346
|
e.onSelect(e.item.id), e.onStartOptimisticFront?.(e.item.id), c.beginDrag(b);
|
|
332
|
-
}, y(z, v(
|
|
347
|
+
}, y(z, v(Ce, {
|
|
333
348
|
class: "w-3.5 h-3.5"
|
|
334
349
|
})), N(C, "compositionend", i.handleCompositionEnd), N(C, "compositionstart", i.handleCompositionStart), N(C, "input", i.handleInput, !0), N(C, "blur", i.handleBlur), N(C, "focus", i.handleFocus), C.$$pointerdown = (b) => {
|
|
335
350
|
b.stopPropagation(), e.onSelect(e.item.id);
|
|
@@ -340,30 +355,30 @@ function Pt(e) {
|
|
|
340
355
|
return p(() => !!e.selected)() && !e.locked;
|
|
341
356
|
},
|
|
342
357
|
get children() {
|
|
343
|
-
var b =
|
|
358
|
+
var b = Ke(), O = b.firstChild, j = O.nextSibling, H = j.nextSibling;
|
|
344
359
|
return O.$$click = async (E) => {
|
|
345
|
-
|
|
346
|
-
}, O.$$pointerdown =
|
|
360
|
+
M(E), await m();
|
|
361
|
+
}, O.$$pointerdown = T, y(O, v(F, {
|
|
347
362
|
get when() {
|
|
348
363
|
return o();
|
|
349
364
|
},
|
|
350
365
|
get fallback() {
|
|
351
|
-
return v(
|
|
366
|
+
return v(Ne, {
|
|
352
367
|
class: "w-3.5 h-3.5"
|
|
353
368
|
});
|
|
354
369
|
},
|
|
355
370
|
get children() {
|
|
356
|
-
return v(
|
|
371
|
+
return v(We, {
|
|
357
372
|
class: "w-3.5 h-3.5"
|
|
358
373
|
});
|
|
359
374
|
}
|
|
360
375
|
})), j.$$click = (E) => {
|
|
361
|
-
|
|
362
|
-
color:
|
|
376
|
+
M(E), e.onUpdate(e.item.id, {
|
|
377
|
+
color: Me(Fe, e.item.color)
|
|
363
378
|
});
|
|
364
|
-
}, j.$$pointerdown =
|
|
365
|
-
|
|
366
|
-
}, H.$$pointerdown =
|
|
379
|
+
}, j.$$pointerdown = T, H.$$click = (E) => {
|
|
380
|
+
M(E), e.onDelete(e.item.id);
|
|
381
|
+
}, H.$$pointerdown = T, y(H, v(me, {
|
|
367
382
|
class: "w-3.5 h-3.5"
|
|
368
383
|
})), W((E) => {
|
|
369
384
|
var A = !!o(), D = o() ? "Sticky note content copied" : "Copy sticky note content";
|
|
@@ -378,7 +393,7 @@ function Pt(e) {
|
|
|
378
393
|
return !e.locked;
|
|
379
394
|
},
|
|
380
395
|
get children() {
|
|
381
|
-
var b =
|
|
396
|
+
var b = Ve();
|
|
382
397
|
return N(b, "pointerdown", k.beginResize, !0), b;
|
|
383
398
|
}
|
|
384
399
|
}), null), W((b) => {
|
|
@@ -389,7 +404,7 @@ function Pt(e) {
|
|
|
389
404
|
"is-dragging": c.isDragging(),
|
|
390
405
|
"is-resizing": k.isResizing(),
|
|
391
406
|
"is-copied": o(),
|
|
392
|
-
[
|
|
407
|
+
[gt[e.item.color]]: !0
|
|
393
408
|
}, j = e.item.id, H = e.item.id, E = e.item.id, A = G(), D = e.locked ? !1 : "plaintext-only", J = e.locked ? "true" : void 0;
|
|
394
409
|
return b.e = ue(w, O, b.e), j !== b.t && g(w, "data-floe-workbench-widget-id", b.t = j), H !== b.a && g(w, "data-wb-object-id", b.a = H), E !== b.o && g(w, "data-floe-workbench-sticky-id", b.o = E), b.i = ee(w, A, b.i), D !== b.n && g(C, "contenteditable", b.n = D), J !== b.s && g(C, "aria-disabled", b.s = J), b;
|
|
395
410
|
}, {
|
|
@@ -403,8 +418,8 @@ function Pt(e) {
|
|
|
403
418
|
}), w;
|
|
404
419
|
})();
|
|
405
420
|
}
|
|
406
|
-
function
|
|
407
|
-
const i =
|
|
421
|
+
function yt(e) {
|
|
422
|
+
const i = Re({
|
|
408
423
|
value: () => e.item.text,
|
|
409
424
|
onCommit: (t) => e.onUpdate(e.item.id, {
|
|
410
425
|
text: t
|
|
@@ -458,7 +473,7 @@ function gt(e) {
|
|
|
458
473
|
!e.editable || t.button !== 0 || t.target instanceof Element && t.target.closest(".workbench-text-annotation__content") || (t.stopPropagation(), e.onSelect(e.item.id));
|
|
459
474
|
};
|
|
460
475
|
return (() => {
|
|
461
|
-
var t =
|
|
476
|
+
var t = qe(), m = t.firstChild;
|
|
462
477
|
t.$$contextmenu = (c) => {
|
|
463
478
|
e.editable && (c.preventDefault(), c.stopPropagation(), e.onSelect(e.item.id), e.onContextMenu?.(c, e.item));
|
|
464
479
|
}, t.$$pointerdown = r, N(m, "compositionend", i.handleCompositionEnd), N(m, "compositionstart", i.handleCompositionStart), N(m, "input", i.handleInput, !0), N(m, "blur", i.handleBlur), m.addEventListener("focus", (c) => {
|
|
@@ -484,7 +499,7 @@ function gt(e) {
|
|
|
484
499
|
}), t;
|
|
485
500
|
})();
|
|
486
501
|
}
|
|
487
|
-
function
|
|
502
|
+
function xt(e) {
|
|
488
503
|
const i = le({
|
|
489
504
|
viewportScale: () => e.viewportScale,
|
|
490
505
|
readPosition: () => ({
|
|
@@ -514,20 +529,19 @@ function vt(e) {
|
|
|
514
529
|
height: `${o().height}px`,
|
|
515
530
|
transform: `translate(${o().x}px, ${o().y}px)`,
|
|
516
531
|
"z-index": `${e.item.z_index}`,
|
|
517
|
-
|
|
518
|
-
"--workbench-region-ink": `color-mix(in srgb, ${e.item.fill} 48%, var(--foreground, #111) 52%)`,
|
|
519
|
-
"--workbench-region-opacity": `${e.item.opacity}`
|
|
532
|
+
...Le(e.item)
|
|
520
533
|
})), a = (r) => {
|
|
521
534
|
!e.editable || r.button !== 0 || r.target instanceof Element && r.target.closest(".workbench-background-region__toolbar, .workbench-layer-resize") || (e.onSelect(e.item.id), i.beginDrag(r));
|
|
522
535
|
};
|
|
523
536
|
return (() => {
|
|
524
|
-
var r =
|
|
537
|
+
var r = Qe();
|
|
525
538
|
return r.$$contextmenu = (t) => {
|
|
526
539
|
e.editable && (t.preventDefault(), t.stopPropagation(), e.onSelect(e.item.id), e.onContextMenu?.(t, e.item));
|
|
527
540
|
}, r.addEventListener("focus", () => e.editable && e.onSelect(e.item.id)), r.$$pointerdown = a, W((t) => {
|
|
528
541
|
var m = {
|
|
529
542
|
"is-selected": e.selected,
|
|
530
543
|
"is-editable": e.editable,
|
|
544
|
+
"is-transforming": i.isDragging(),
|
|
531
545
|
[`is-material-${e.item.material}`]: !0
|
|
532
546
|
}, _ = e.editable ? "true" : void 0, c = e.item.id, k = n(), S = e.editable ? 0 : void 0;
|
|
533
547
|
return t.e = ue(r, m, t.e), _ !== t.t && g(r, "data-floe-canvas-interactive", t.t = _), c !== t.a && g(r, "data-wb-object-id", t.a = c), t.o = ee(r, k, t.o), S !== t.i && g(r, "tabindex", t.i = S), t;
|
|
@@ -540,7 +554,7 @@ function vt(e) {
|
|
|
540
554
|
}), r;
|
|
541
555
|
})();
|
|
542
556
|
}
|
|
543
|
-
function
|
|
557
|
+
function kt(e) {
|
|
544
558
|
let i, o, n;
|
|
545
559
|
const [a, r] = B(""), [t, m] = B(!1), [_, c] = B(!1), k = $(() => se.find((u) => u.fontFamily === e.item.font_family) ?? se[0]), S = le({
|
|
546
560
|
viewportScale: () => e.viewportScale,
|
|
@@ -564,8 +578,8 @@ function ft(e) {
|
|
|
564
578
|
width: e.item.width,
|
|
565
579
|
height: e.item.height
|
|
566
580
|
}),
|
|
567
|
-
minWidth:
|
|
568
|
-
minHeight:
|
|
581
|
+
minWidth: bt,
|
|
582
|
+
minHeight: wt,
|
|
569
583
|
onCommitResize: (u) => e.onCommitResize(e.item.id, u),
|
|
570
584
|
onPreviewResize: (u) => e.onPreviewGeometry?.({
|
|
571
585
|
kind: "annotation",
|
|
@@ -590,9 +604,9 @@ function ft(e) {
|
|
|
590
604
|
transform: `translate(${l().x}px, ${l().y}px)`,
|
|
591
605
|
"z-index": `${e.item.z_index}`,
|
|
592
606
|
"--workbench-layer-control-inverse-scale": `${1 / Math.max(e.viewportScale, 1e-3)}`
|
|
593
|
-
})), G = () =>
|
|
607
|
+
})), G = () => Me(["left", "center", "right"], e.item.align), w = (u) => {
|
|
594
608
|
if (!Number.isFinite(u)) return;
|
|
595
|
-
const z =
|
|
609
|
+
const z = ft(u);
|
|
596
610
|
r(String(z)), e.onUpdate(e.item.id, {
|
|
597
611
|
font_size: z
|
|
598
612
|
});
|
|
@@ -607,31 +621,31 @@ function ft(e) {
|
|
|
607
621
|
return ae(() => {
|
|
608
622
|
typeof document < "u" && document.activeElement === i || r(String(e.item.font_size));
|
|
609
623
|
}), _e(t, () => o, () => m(!1)), _e(_, () => n, () => c(!1)), (() => {
|
|
610
|
-
var u =
|
|
611
|
-
C.$$click = K, C.$$pointerdown = Y, L.$$click =
|
|
624
|
+
var u = et(), z = u.firstChild, C = z.nextSibling, L = C.firstChild, b = L.nextSibling, O = b.firstChild, j = O.firstChild, H = j.nextSibling, E = b.nextSibling, A = E.firstChild, D = A.nextSibling, J = D.nextSibling, U = E.nextSibling, ce = U.firstChild, ie = U.nextSibling, de = ie.nextSibling, De = C.nextSibling;
|
|
625
|
+
C.$$click = K, C.$$pointerdown = Y, L.$$click = M, N(L, "pointerdown", S.beginDrag, !0), y(L, v(Ce, {
|
|
612
626
|
class: "w-3.5 h-3.5"
|
|
613
627
|
})), b.$$click = K, b.$$pointerdown = Y;
|
|
614
628
|
var be = o;
|
|
615
629
|
typeof be == "function" ? Z(be, b) : o = b, O.$$click = (h) => {
|
|
616
|
-
|
|
617
|
-
}, O.$$pointerdown =
|
|
630
|
+
M(h), m((f) => !f);
|
|
631
|
+
}, O.$$pointerdown = T, y(H, () => k().label), y(O, v(Ge, {
|
|
618
632
|
class: "workbench-text-font-trigger__icon"
|
|
619
633
|
}), null), y(b, v(F, {
|
|
620
634
|
get when() {
|
|
621
635
|
return t();
|
|
622
636
|
},
|
|
623
637
|
get children() {
|
|
624
|
-
var h =
|
|
638
|
+
var h = Ze();
|
|
625
639
|
return y(h, v(V, {
|
|
626
640
|
each: se,
|
|
627
641
|
children: (f) => (() => {
|
|
628
|
-
var P =
|
|
642
|
+
var P = tt(), X = P.firstChild, ne = X.nextSibling;
|
|
629
643
|
return P.$$click = (I) => {
|
|
630
|
-
|
|
644
|
+
M(I), e.onUpdate(e.item.id, {
|
|
631
645
|
font_family: f.fontFamily,
|
|
632
646
|
font_weight: f.fontWeight
|
|
633
647
|
}), m(!1);
|
|
634
|
-
}, P.$$pointerdown =
|
|
648
|
+
}, P.$$pointerdown = T, y(ne, () => f.label), W((I) => {
|
|
635
649
|
var Q = e.item.font_family === f.fontFamily, ve = `Use ${f.label} bold font`, fe = `${f.label} bold`, ye = e.item.font_family === f.fontFamily, xe = f.fontFamily, ke = `${f.fontWeight}`;
|
|
636
650
|
return Q !== I.e && g(P, "aria-checked", I.e = Q), ve !== I.t && g(P, "aria-label", I.t = ve), fe !== I.a && g(P, "title", I.a = fe), ye !== I.o && P.classList.toggle("is-active", I.o = ye), xe !== I.i && q(X, "font-family", I.i = xe), ke !== I.n && q(X, "font-weight", I.n = ke), I;
|
|
637
651
|
}, {
|
|
@@ -646,56 +660,56 @@ function ft(e) {
|
|
|
646
660
|
})), h;
|
|
647
661
|
}
|
|
648
662
|
}), null), E.$$click = K, E.$$pointerdown = Y, A.$$click = (h) => {
|
|
649
|
-
|
|
650
|
-
}, A.$$pointerdown =
|
|
663
|
+
M(h), w(e.item.font_size - 1);
|
|
664
|
+
}, A.$$pointerdown = T, y(A, v(je, {
|
|
651
665
|
class: "w-3 h-3"
|
|
652
666
|
})), D.$$keydown = (h) => {
|
|
653
667
|
h.key === "Enter" && (h.preventDefault(), x(), h.currentTarget.blur());
|
|
654
668
|
}, D.addEventListener("blur", x), D.$$input = (h) => r(h.currentTarget.value), D.$$click = K, D.$$pointerdown = Y;
|
|
655
669
|
var we = i;
|
|
656
670
|
typeof we == "function" ? Z(we, D) : i = D, J.$$click = (h) => {
|
|
657
|
-
|
|
658
|
-
}, J.$$pointerdown =
|
|
671
|
+
M(h), w(e.item.font_size + 1);
|
|
672
|
+
}, J.$$pointerdown = T, y(J, v(Ae, {
|
|
659
673
|
class: "w-3 h-3"
|
|
660
674
|
})), y(C, v(V, {
|
|
661
|
-
each:
|
|
675
|
+
each: Ue,
|
|
662
676
|
children: (h) => (() => {
|
|
663
|
-
var f =
|
|
677
|
+
var f = it();
|
|
664
678
|
return f.$$click = (P) => {
|
|
665
|
-
|
|
679
|
+
M(P), e.onUpdate(e.item.id, {
|
|
666
680
|
color: h
|
|
667
681
|
});
|
|
668
|
-
}, f.$$pointerdown =
|
|
682
|
+
}, f.$$pointerdown = T, g(f, "aria-label", `Use text color ${h}`), q(f, "background", h), W(() => f.classList.toggle("is-active", e.item.color === h)), f;
|
|
669
683
|
})()
|
|
670
684
|
}), U), U.$$click = K, U.$$pointerdown = Y;
|
|
671
685
|
var ge = n;
|
|
672
686
|
return typeof ge == "function" ? Z(ge, U) : n = U, ce.$$click = (h) => {
|
|
673
|
-
|
|
674
|
-
}, ce.$$pointerdown =
|
|
687
|
+
M(h), c((f) => !f);
|
|
688
|
+
}, ce.$$pointerdown = T, y(U, v(F, {
|
|
675
689
|
get when() {
|
|
676
690
|
return _();
|
|
677
691
|
},
|
|
678
692
|
get children() {
|
|
679
|
-
var h =
|
|
693
|
+
var h = pe();
|
|
680
694
|
return y(h, v(V, {
|
|
681
|
-
each:
|
|
695
|
+
each: Xe,
|
|
682
696
|
children: (f) => (() => {
|
|
683
|
-
var P =
|
|
697
|
+
var P = nt();
|
|
684
698
|
return P.$$click = (X) => {
|
|
685
|
-
|
|
686
|
-
}, P.$$pointerdown =
|
|
699
|
+
M(X), e.textEditorRegistry?.get(e.item.id)?.insertTextAtSelection(f), c(!1);
|
|
700
|
+
}, P.$$pointerdown = T, g(P, "aria-label", `Insert emoji ${f}`), g(P, "title", `Insert ${f}`), y(P, f), P;
|
|
687
701
|
})()
|
|
688
702
|
})), h;
|
|
689
703
|
}
|
|
690
704
|
}), null), ie.$$click = (h) => {
|
|
691
|
-
|
|
705
|
+
M(h), e.onUpdate(e.item.id, {
|
|
692
706
|
align: G()
|
|
693
707
|
});
|
|
694
|
-
}, ie.$$pointerdown =
|
|
695
|
-
|
|
696
|
-
}, de.$$pointerdown =
|
|
708
|
+
}, ie.$$pointerdown = T, y(ie, () => e.item.align), de.$$click = (h) => {
|
|
709
|
+
M(h), e.onDelete(e.item.id);
|
|
710
|
+
}, de.$$pointerdown = T, y(de, v(me, {
|
|
697
711
|
class: "w-3.5 h-3.5"
|
|
698
|
-
})), N(
|
|
712
|
+
})), N(De, "pointerdown", s.beginResize, !0), W((h) => {
|
|
699
713
|
var f = e.item.id, P = d(), X = t(), ne = k().fontFamily, I = `${k().fontWeight}`, Q = _();
|
|
700
714
|
return f !== h.e && g(u, "data-wb-object-id", h.e = f), h.t = ee(u, P, h.t), X !== h.a && g(O, "aria-expanded", h.a = X), ne !== h.o && q(j, "font-family", h.o = ne), I !== h.i && q(j, "font-weight", h.i = I), Q !== h.n && g(ce, "aria-expanded", h.n = Q), h;
|
|
701
715
|
}, {
|
|
@@ -708,15 +722,15 @@ function ft(e) {
|
|
|
708
722
|
}), W(() => D.value = a()), u;
|
|
709
723
|
})();
|
|
710
724
|
}
|
|
711
|
-
function
|
|
725
|
+
function $t(e) {
|
|
712
726
|
const i = he({
|
|
713
727
|
viewportScale: () => e.viewportScale,
|
|
714
728
|
readSize: () => ({
|
|
715
729
|
width: e.item.width,
|
|
716
730
|
height: e.item.height
|
|
717
731
|
}),
|
|
718
|
-
minWidth:
|
|
719
|
-
minHeight:
|
|
732
|
+
minWidth: mt,
|
|
733
|
+
minHeight: ht,
|
|
720
734
|
onCommitResize: (a) => e.onCommitResize(e.item.id, a),
|
|
721
735
|
onPreviewResize: (a) => e.onPreviewGeometry?.({
|
|
722
736
|
kind: "background_layer",
|
|
@@ -741,30 +755,29 @@ function yt(e) {
|
|
|
741
755
|
transform: `translate(${o().x}px, ${o().y}px)`,
|
|
742
756
|
"z-index": `${e.item.z_index}`,
|
|
743
757
|
"--workbench-layer-control-inverse-scale": `${1 / Math.max(e.viewportScale, 1e-3)}`,
|
|
744
|
-
|
|
745
|
-
"--workbench-region-ink": `color-mix(in srgb, ${e.item.fill} 48%, var(--foreground, #111) 52%)`
|
|
758
|
+
...Le(e.item)
|
|
746
759
|
}));
|
|
747
760
|
return (() => {
|
|
748
|
-
var a =
|
|
761
|
+
var a = ot(), r = a.firstChild, t = r.nextSibling, m = t.firstChild, _ = m.nextSibling, c = _.firstChild, k = _.nextSibling, S = t.nextSibling;
|
|
749
762
|
return t.$$click = K, t.$$pointerdown = Y, y(t, v(V, {
|
|
750
|
-
each:
|
|
763
|
+
each: Be,
|
|
751
764
|
children: (s) => (() => {
|
|
752
|
-
var l =
|
|
765
|
+
var l = at();
|
|
753
766
|
return l.$$click = (d) => {
|
|
754
|
-
|
|
767
|
+
M(d), e.onUpdate(e.item.id, {
|
|
755
768
|
fill: s
|
|
756
769
|
});
|
|
757
|
-
}, l.$$pointerdown =
|
|
770
|
+
}, l.$$pointerdown = T, g(l, "aria-label", `Use region color ${s}`), q(l, "background", s), W(() => l.classList.toggle("is-active", e.item.fill === s)), l;
|
|
758
771
|
})()
|
|
759
772
|
}), m), m.$$click = K, m.$$pointerdown = Y, y(m, v(V, {
|
|
760
|
-
each:
|
|
773
|
+
each: He,
|
|
761
774
|
children: (s) => (() => {
|
|
762
|
-
var l =
|
|
775
|
+
var l = rt();
|
|
763
776
|
return l.$$click = (d) => {
|
|
764
|
-
|
|
777
|
+
M(d), e.onUpdate(e.item.id, {
|
|
765
778
|
material: s
|
|
766
779
|
});
|
|
767
|
-
}, l.$$pointerdown =
|
|
780
|
+
}, l.$$pointerdown = T, W((d) => {
|
|
768
781
|
var G = `Use region material ${$e[s]}`, w = $e[s], x = {
|
|
769
782
|
"is-active": e.item.material === s,
|
|
770
783
|
[`is-${s}`]: !0
|
|
@@ -777,12 +790,12 @@ function yt(e) {
|
|
|
777
790
|
}), l;
|
|
778
791
|
})()
|
|
779
792
|
})), _.$$click = (s) => {
|
|
780
|
-
|
|
793
|
+
M(s), e.onUpdate(e.item.id, {
|
|
781
794
|
opacity: e.item.opacity >= 0.88 ? 0.42 : e.item.opacity + 0.18
|
|
782
795
|
});
|
|
783
|
-
}, _.$$pointerdown =
|
|
784
|
-
|
|
785
|
-
}, k.$$pointerdown =
|
|
796
|
+
}, _.$$pointerdown = T, y(_, () => Math.round(e.item.opacity * 100), c), k.$$click = (s) => {
|
|
797
|
+
M(s), e.onDelete(e.item.id);
|
|
798
|
+
}, k.$$pointerdown = T, y(k, v(me, {
|
|
786
799
|
class: "w-3.5 h-3.5"
|
|
787
800
|
})), N(S, "pointerdown", i.beginResize, !0), W((s) => {
|
|
788
801
|
var l = e.item.id, d = n();
|
|
@@ -793,10 +806,10 @@ function yt(e) {
|
|
|
793
806
|
}), a;
|
|
794
807
|
})();
|
|
795
808
|
}
|
|
796
|
-
function
|
|
797
|
-
const i = $(() =>
|
|
809
|
+
function Tt(e) {
|
|
810
|
+
const i = $(() => Ie(e.items)), o = $(() => Pe(e.items).map((n) => n.id));
|
|
798
811
|
return (() => {
|
|
799
|
-
var n =
|
|
812
|
+
var n = lt();
|
|
800
813
|
return y(n, v(V, {
|
|
801
814
|
get each() {
|
|
802
815
|
return o();
|
|
@@ -807,7 +820,7 @@ function It(e) {
|
|
|
807
820
|
get when() {
|
|
808
821
|
return r();
|
|
809
822
|
},
|
|
810
|
-
children: (t) => v(
|
|
823
|
+
children: (t) => v(xt, {
|
|
811
824
|
get item() {
|
|
812
825
|
return t();
|
|
813
826
|
},
|
|
@@ -847,10 +860,10 @@ function It(e) {
|
|
|
847
860
|
}), n;
|
|
848
861
|
})();
|
|
849
862
|
}
|
|
850
|
-
function
|
|
851
|
-
const i = $(() =>
|
|
863
|
+
function Lt(e) {
|
|
864
|
+
const i = $(() => Ie(e.items)), o = $(() => Pe(e.items).map((n) => n.id));
|
|
852
865
|
return (() => {
|
|
853
|
-
var n =
|
|
866
|
+
var n = ct();
|
|
854
867
|
return y(n, v(V, {
|
|
855
868
|
get each() {
|
|
856
869
|
return o();
|
|
@@ -861,7 +874,7 @@ function Tt(e) {
|
|
|
861
874
|
get when() {
|
|
862
875
|
return r();
|
|
863
876
|
},
|
|
864
|
-
children: (t) => v(
|
|
877
|
+
children: (t) => v(yt, {
|
|
865
878
|
get item() {
|
|
866
879
|
return t();
|
|
867
880
|
},
|
|
@@ -907,15 +920,15 @@ function Tt(e) {
|
|
|
907
920
|
}), n;
|
|
908
921
|
})();
|
|
909
922
|
}
|
|
910
|
-
function
|
|
923
|
+
function Dt(e) {
|
|
911
924
|
const i = $(() => e.selectedObject?.kind === "annotation" ? e.annotations.find((n) => n.id === e.selectedObject?.id && n.kind === "text") ?? null : null), o = $(() => e.selectedObject?.kind === "background_layer" ? e.backgroundLayers.find((n) => n.id === e.selectedObject?.id) ?? null : null);
|
|
912
925
|
return (() => {
|
|
913
|
-
var n =
|
|
926
|
+
var n = dt();
|
|
914
927
|
return y(n, v(F, {
|
|
915
928
|
get when() {
|
|
916
929
|
return p(() => !!e.editable)() && o();
|
|
917
930
|
},
|
|
918
|
-
children: (a) => v(
|
|
931
|
+
children: (a) => v($t, {
|
|
919
932
|
get item() {
|
|
920
933
|
return a();
|
|
921
934
|
},
|
|
@@ -942,7 +955,7 @@ function Rt(e) {
|
|
|
942
955
|
get when() {
|
|
943
956
|
return p(() => !!e.editable)() && i();
|
|
944
957
|
},
|
|
945
|
-
children: (a) => v(
|
|
958
|
+
children: (a) => v(kt, {
|
|
946
959
|
get item() {
|
|
947
960
|
return a();
|
|
948
961
|
},
|
|
@@ -974,13 +987,13 @@ function Rt(e) {
|
|
|
974
987
|
}), null), W(() => n.classList.toggle("is-editable", !!e.editable)), n;
|
|
975
988
|
})();
|
|
976
989
|
}
|
|
977
|
-
|
|
990
|
+
Oe(["pointerdown", "contextmenu", "input", "click", "keydown"]);
|
|
978
991
|
export {
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
992
|
+
Lt as WorkbenchAnnotationLayerView,
|
|
993
|
+
Tt as WorkbenchBackgroundLayerView,
|
|
994
|
+
xt as WorkbenchBackgroundRegion,
|
|
995
|
+
Dt as WorkbenchLayerControlOverlayView,
|
|
996
|
+
Rt as WorkbenchStickyNote,
|
|
997
|
+
yt as WorkbenchTextAnnotation,
|
|
998
|
+
Mt as createWorkbenchTextEditorRegistry
|
|
986
999
|
};
|