@floegence/floe-webapp-core 0.36.43 → 0.36.45
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/ui/InfiniteCanvas.js +39 -39
- package/dist/components/workbench/WorkbenchCanvas.js +195 -100
- package/dist/components/workbench/WorkbenchCanvasField.d.ts +6 -0
- package/dist/components/workbench/WorkbenchCanvasField.js +142 -123
- package/dist/components/workbench/WorkbenchFilterBar.js +10 -10
- package/dist/components/workbench/WorkbenchLayerObjects.d.ts +9 -0
- package/dist/components/workbench/WorkbenchLayerObjects.js +827 -606
- package/dist/components/workbench/WorkbenchSurface.js +3 -0
- package/dist/components/workbench/WorkbenchWidget.js +299 -292
- package/dist/components/workbench/useWorkbenchModel.js +250 -237
- package/dist/components/workbench/workbenchHelpers.d.ts +21 -2
- package/dist/components/workbench/workbenchHelpers.js +305 -259
- package/dist/components/workbench/workbenchOwnerSafeAccessors.d.ts +2 -0
- package/dist/components/workbench/workbenchOwnerSafeAccessors.js +10 -0
- package/dist/styles.css +1 -1
- package/dist/workbench.css +156 -30
- package/package.json +1 -1
package/dist/workbench.css
CHANGED
|
@@ -215,13 +215,23 @@
|
|
|
215
215
|
pointer-events: none;
|
|
216
216
|
overflow: hidden;
|
|
217
217
|
z-index: 13;
|
|
218
|
+
isolation: isolate;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.workbench-canvas__projected-work-layer {
|
|
222
|
+
position: absolute;
|
|
223
|
+
inset: 0;
|
|
224
|
+
pointer-events: none;
|
|
225
|
+
z-index: 10;
|
|
218
226
|
}
|
|
219
227
|
|
|
220
|
-
.workbench-canvas__projected-layer.is-work-layer-locked
|
|
221
|
-
|
|
228
|
+
.workbench-canvas__projected-layer.is-work-layer-locked
|
|
229
|
+
.workbench-canvas__projected-work-layer
|
|
230
|
+
> .workbench-widget,
|
|
231
|
+
.workbench-canvas__projected-layer.is-work-layer-locked
|
|
232
|
+
.workbench-canvas__projected-work-layer
|
|
233
|
+
> .workbench-sticky {
|
|
222
234
|
pointer-events: none;
|
|
223
|
-
opacity: 0.16;
|
|
224
|
-
filter: saturate(0.45) contrast(0.86);
|
|
225
235
|
}
|
|
226
236
|
|
|
227
237
|
.workbench-canvas__grid {
|
|
@@ -297,13 +307,15 @@
|
|
|
297
307
|
z-index: 20;
|
|
298
308
|
}
|
|
299
309
|
|
|
300
|
-
.workbench-
|
|
310
|
+
.workbench-region-visibility-outline-layer {
|
|
311
|
+
position: absolute;
|
|
312
|
+
inset: 0;
|
|
301
313
|
pointer-events: none;
|
|
314
|
+
z-index: 1;
|
|
302
315
|
}
|
|
303
316
|
|
|
304
|
-
.workbench-canvas__field.is-work-layer-muted .workbench-work-layer
|
|
305
|
-
|
|
306
|
-
filter: saturate(0.45) contrast(0.86);
|
|
317
|
+
.workbench-canvas__field.is-work-layer-muted .workbench-work-layer {
|
|
318
|
+
pointer-events: none;
|
|
307
319
|
}
|
|
308
320
|
|
|
309
321
|
/* ------------------------------------------------------------------ */
|
|
@@ -316,18 +328,26 @@
|
|
|
316
328
|
top: 0;
|
|
317
329
|
left: 0;
|
|
318
330
|
box-sizing: border-box;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.workbench-text-annotation,
|
|
334
|
+
.workbench-sticky {
|
|
319
335
|
will-change: transform;
|
|
320
336
|
}
|
|
321
337
|
|
|
322
338
|
.workbench-background-region {
|
|
323
339
|
border-radius: 0;
|
|
324
|
-
background: var(--workbench-region-fill);
|
|
325
|
-
opacity:
|
|
340
|
+
background-color: var(--workbench-region-surface, var(--workbench-region-fill));
|
|
341
|
+
opacity: 1;
|
|
326
342
|
border: none;
|
|
327
343
|
box-shadow: none;
|
|
328
344
|
pointer-events: none;
|
|
329
345
|
}
|
|
330
346
|
|
|
347
|
+
.workbench-background-region.is-transforming {
|
|
348
|
+
will-change: transform;
|
|
349
|
+
}
|
|
350
|
+
|
|
331
351
|
.workbench-background-region.is-editable {
|
|
332
352
|
pointer-events: auto;
|
|
333
353
|
cursor: move;
|
|
@@ -335,34 +355,31 @@
|
|
|
335
355
|
|
|
336
356
|
.workbench-background-region.is-material-dotted {
|
|
337
357
|
background-image:
|
|
338
|
-
radial-gradient(circle,
|
|
339
|
-
|
|
340
|
-
background-
|
|
341
|
-
background-size: 11px 11px, auto;
|
|
358
|
+
radial-gradient(circle, var(--workbench-region-ink) 1.45px, transparent 1.65px);
|
|
359
|
+
background-position: 0 0;
|
|
360
|
+
background-size: 11px 11px;
|
|
342
361
|
}
|
|
343
362
|
|
|
344
363
|
.workbench-background-region.is-material-grid {
|
|
345
364
|
background-image:
|
|
346
|
-
linear-gradient(
|
|
347
|
-
linear-gradient(90deg,
|
|
348
|
-
|
|
349
|
-
background-size: 28px 28px, 28px 28px, auto;
|
|
365
|
+
linear-gradient(var(--workbench-region-ink) 1px, transparent 1px),
|
|
366
|
+
linear-gradient(90deg, var(--workbench-region-ink) 1px, transparent 1px);
|
|
367
|
+
background-size: 28px 28px, 28px 28px;
|
|
350
368
|
}
|
|
351
369
|
|
|
352
370
|
.workbench-background-region.is-material-hatched {
|
|
353
371
|
background-image:
|
|
354
372
|
repeating-linear-gradient(
|
|
355
373
|
135deg,
|
|
356
|
-
|
|
374
|
+
var(--workbench-region-ink) 0 1.2px,
|
|
357
375
|
transparent 1.2px 9px
|
|
358
|
-
)
|
|
359
|
-
linear-gradient(var(--workbench-region-fill), var(--workbench-region-fill));
|
|
376
|
+
);
|
|
360
377
|
}
|
|
361
378
|
|
|
362
379
|
.workbench-background-region.is-material-glass {
|
|
363
380
|
background:
|
|
364
|
-
linear-gradient(135deg,
|
|
365
|
-
|
|
381
|
+
linear-gradient(135deg, var(--workbench-region-highlight), transparent 58%),
|
|
382
|
+
var(--workbench-region-surface, var(--workbench-region-fill));
|
|
366
383
|
}
|
|
367
384
|
|
|
368
385
|
.workbench-background-region__toolbar,
|
|
@@ -766,6 +783,33 @@
|
|
|
766
783
|
will-change: transform;
|
|
767
784
|
}
|
|
768
785
|
|
|
786
|
+
.workbench-region-visibility-outline {
|
|
787
|
+
position: absolute;
|
|
788
|
+
top: 0;
|
|
789
|
+
left: 0;
|
|
790
|
+
box-sizing: border-box;
|
|
791
|
+
pointer-events: none;
|
|
792
|
+
transform-origin: 0 0;
|
|
793
|
+
z-index: 1;
|
|
794
|
+
border: calc(1.75px * var(--workbench-region-outline-scale, 1)) dashed
|
|
795
|
+
color-mix(in srgb, var(--workbench-region-ink) 86%, var(--foreground, #111) 14%);
|
|
796
|
+
box-shadow:
|
|
797
|
+
0 0 0 calc(1px * var(--workbench-region-outline-scale, 1))
|
|
798
|
+
color-mix(in srgb, var(--background, #fff) 82%, transparent),
|
|
799
|
+
0 0 0 calc(3px * var(--workbench-region-outline-scale, 1))
|
|
800
|
+
color-mix(in srgb, var(--workbench-region-ink) 30%, transparent),
|
|
801
|
+
0 10px calc(22px * var(--workbench-region-outline-scale, 1))
|
|
802
|
+
color-mix(in srgb, var(--foreground, #000) 12%, transparent);
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
.workbench-region-visibility-outline.is-selected-region {
|
|
806
|
+
z-index: 2;
|
|
807
|
+
border-color: color-mix(in srgb, var(--workbench-region-ink) 52%, transparent);
|
|
808
|
+
box-shadow:
|
|
809
|
+
0 0 0 calc(1px * var(--workbench-region-outline-scale, 1))
|
|
810
|
+
color-mix(in srgb, var(--background, #fff) 64%, transparent);
|
|
811
|
+
}
|
|
812
|
+
|
|
769
813
|
.workbench-layer-control__selection {
|
|
770
814
|
position: absolute;
|
|
771
815
|
inset: 0;
|
|
@@ -773,8 +817,11 @@
|
|
|
773
817
|
}
|
|
774
818
|
|
|
775
819
|
.workbench-layer-control__selection.is-region {
|
|
776
|
-
outline:
|
|
777
|
-
outline-offset:
|
|
820
|
+
outline: 2px solid color-mix(in srgb, var(--primary, #3b82f6) 78%, white 8%);
|
|
821
|
+
outline-offset: 4px;
|
|
822
|
+
box-shadow:
|
|
823
|
+
0 0 0 1px color-mix(in srgb, var(--background, #fff) 72%, transparent),
|
|
824
|
+
0 0 0 6px color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
|
|
778
825
|
}
|
|
779
826
|
|
|
780
827
|
.workbench-layer-control__selection.is-text {
|
|
@@ -824,8 +871,8 @@
|
|
|
824
871
|
.workbench-text-annotation__content {
|
|
825
872
|
display: block;
|
|
826
873
|
box-sizing: border-box;
|
|
827
|
-
width: 100
|
|
828
|
-
height: 100
|
|
874
|
+
width: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
875
|
+
height: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
829
876
|
padding: 0;
|
|
830
877
|
border: 0 !important;
|
|
831
878
|
border-radius: 0;
|
|
@@ -846,6 +893,8 @@
|
|
|
846
893
|
-webkit-user-select: text;
|
|
847
894
|
user-select: text;
|
|
848
895
|
caret-color: var(--workbench-text-color);
|
|
896
|
+
transform: scale(var(--workbench-text-content-scale, 1));
|
|
897
|
+
transform-origin: 0 0;
|
|
849
898
|
}
|
|
850
899
|
|
|
851
900
|
.floe-infinite-canvas .workbench-text-annotation__content,
|
|
@@ -854,8 +903,8 @@
|
|
|
854
903
|
.workbench-text-annotation__content:active {
|
|
855
904
|
display: block;
|
|
856
905
|
box-sizing: border-box;
|
|
857
|
-
width: 100
|
|
858
|
-
height: 100
|
|
906
|
+
width: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
907
|
+
height: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
859
908
|
padding: 0;
|
|
860
909
|
border: 0 !important;
|
|
861
910
|
border-radius: 0;
|
|
@@ -876,6 +925,8 @@
|
|
|
876
925
|
-webkit-user-select: text;
|
|
877
926
|
user-select: text;
|
|
878
927
|
caret-color: var(--workbench-text-color);
|
|
928
|
+
transform: scale(var(--workbench-text-content-scale, 1));
|
|
929
|
+
transform-origin: 0 0;
|
|
879
930
|
}
|
|
880
931
|
|
|
881
932
|
.workbench-text-annotation__size-input {
|
|
@@ -1239,10 +1290,16 @@
|
|
|
1239
1290
|
border-color 180ms ease;
|
|
1240
1291
|
}
|
|
1241
1292
|
|
|
1242
|
-
.workbench-canvas__projected-layer > .workbench-widget
|
|
1293
|
+
.workbench-canvas__projected-work-layer > .workbench-widget,
|
|
1294
|
+
.workbench-canvas__projected-work-layer > .workbench-sticky {
|
|
1243
1295
|
pointer-events: auto;
|
|
1244
1296
|
}
|
|
1245
1297
|
|
|
1298
|
+
.workbench-canvas__projected-work-layer > .workbench-widget,
|
|
1299
|
+
.workbench-canvas__projected-work-layer > .workbench-sticky {
|
|
1300
|
+
isolation: isolate;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1246
1303
|
.workbench-widget.is-projected-surface {
|
|
1247
1304
|
transform-origin: 0 0;
|
|
1248
1305
|
}
|
|
@@ -1257,6 +1314,45 @@
|
|
|
1257
1314
|
overflow: hidden;
|
|
1258
1315
|
}
|
|
1259
1316
|
|
|
1317
|
+
.workbench-widget__surface::after,
|
|
1318
|
+
.workbench-sticky__surface::after {
|
|
1319
|
+
content: '';
|
|
1320
|
+
position: absolute;
|
|
1321
|
+
inset: 0;
|
|
1322
|
+
z-index: 30;
|
|
1323
|
+
pointer-events: none;
|
|
1324
|
+
opacity: 0;
|
|
1325
|
+
background:
|
|
1326
|
+
linear-gradient(
|
|
1327
|
+
180deg,
|
|
1328
|
+
color-mix(in srgb, var(--background, #fff) 82%, transparent),
|
|
1329
|
+
color-mix(in srgb, var(--background, #fff) 74%, transparent)
|
|
1330
|
+
);
|
|
1331
|
+
transition: opacity 160ms ease;
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1334
|
+
.workbench-canvas__field.is-work-layer-muted
|
|
1335
|
+
.workbench-work-layer
|
|
1336
|
+
> :is(.workbench-widget, .workbench-sticky)
|
|
1337
|
+
:is(.workbench-widget__surface, .workbench-sticky__surface)::after,
|
|
1338
|
+
.workbench-canvas__projected-layer.is-work-layer-locked
|
|
1339
|
+
.workbench-canvas__projected-work-layer
|
|
1340
|
+
> :is(.workbench-widget, .workbench-sticky)
|
|
1341
|
+
:is(.workbench-widget__surface, .workbench-sticky__surface)::after {
|
|
1342
|
+
opacity: 0.84;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.workbench-canvas__field.is-work-layer-muted
|
|
1346
|
+
.workbench-work-layer
|
|
1347
|
+
> :is(.workbench-widget, .workbench-sticky),
|
|
1348
|
+
.workbench-canvas__projected-layer.is-work-layer-locked
|
|
1349
|
+
.workbench-canvas__projected-work-layer
|
|
1350
|
+
> :is(.workbench-widget, .workbench-sticky) {
|
|
1351
|
+
box-shadow:
|
|
1352
|
+
0 1px 2px color-mix(in srgb, var(--foreground, #000) 2%, transparent),
|
|
1353
|
+
0 8px 22px -18px color-mix(in srgb, var(--foreground, #000) 12%, transparent);
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1260
1356
|
.workbench-widget.is-dragging {
|
|
1261
1357
|
will-change: transform;
|
|
1262
1358
|
transition: none;
|
|
@@ -1440,6 +1536,17 @@
|
|
|
1440
1536
|
0 18px 42px -14px color-mix(in srgb, var(--primary, #3b82f6) 22%, transparent);
|
|
1441
1537
|
}
|
|
1442
1538
|
|
|
1539
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-widget {
|
|
1540
|
+
background: var(--card, #fff);
|
|
1541
|
+
border-color: color-mix(in srgb, var(--border, #e5e5e5) 88%, var(--card, #fff));
|
|
1542
|
+
backdrop-filter: none;
|
|
1543
|
+
-webkit-backdrop-filter: none;
|
|
1544
|
+
}
|
|
1545
|
+
|
|
1546
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-widget__header {
|
|
1547
|
+
background: color-mix(in srgb, var(--card, #fff) 92%, var(--muted, #f3f3f3) 8%);
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1443
1550
|
.workbench-widget__title-area {
|
|
1444
1551
|
display: flex;
|
|
1445
1552
|
align-items: center;
|
|
@@ -1796,6 +1903,25 @@
|
|
|
1796
1903
|
background: color-mix(in srgb, var(--popover, var(--card, #fff)) 92%, transparent);
|
|
1797
1904
|
}
|
|
1798
1905
|
|
|
1906
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-dock,
|
|
1907
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-popover,
|
|
1908
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-lock-button,
|
|
1909
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-hud,
|
|
1910
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-dock-ghost__card {
|
|
1911
|
+
background: var(--popover, var(--card, #fff));
|
|
1912
|
+
backdrop-filter: none;
|
|
1913
|
+
-webkit-backdrop-filter: none;
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-dock__tile,
|
|
1917
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-option-icon {
|
|
1918
|
+
background: color-mix(in srgb, var(--muted, #f1f1f1) 84%, var(--card, #fff));
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
.workbench-surface[data-workbench-mode='background'] .workbench-dock__mode-popover::after {
|
|
1922
|
+
background: var(--popover, var(--card, #fff));
|
|
1923
|
+
}
|
|
1924
|
+
|
|
1799
1925
|
.workbench-dock__mode-option {
|
|
1800
1926
|
position: relative;
|
|
1801
1927
|
display: flex;
|