@floegence/floe-webapp-core 0.36.44 → 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 +820 -612
- 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 +136 -15
- 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;
|
|
218
219
|
}
|
|
219
220
|
|
|
220
|
-
.workbench-canvas__projected-
|
|
221
|
-
|
|
221
|
+
.workbench-canvas__projected-work-layer {
|
|
222
|
+
position: absolute;
|
|
223
|
+
inset: 0;
|
|
224
|
+
pointer-events: none;
|
|
225
|
+
z-index: 10;
|
|
226
|
+
}
|
|
227
|
+
|
|
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
|
/* ------------------------------------------------------------------ */
|
|
@@ -771,6 +783,33 @@
|
|
|
771
783
|
will-change: transform;
|
|
772
784
|
}
|
|
773
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
|
+
|
|
774
813
|
.workbench-layer-control__selection {
|
|
775
814
|
position: absolute;
|
|
776
815
|
inset: 0;
|
|
@@ -778,8 +817,11 @@
|
|
|
778
817
|
}
|
|
779
818
|
|
|
780
819
|
.workbench-layer-control__selection.is-region {
|
|
781
|
-
outline:
|
|
782
|
-
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);
|
|
783
825
|
}
|
|
784
826
|
|
|
785
827
|
.workbench-layer-control__selection.is-text {
|
|
@@ -829,8 +871,8 @@
|
|
|
829
871
|
.workbench-text-annotation__content {
|
|
830
872
|
display: block;
|
|
831
873
|
box-sizing: border-box;
|
|
832
|
-
width: 100
|
|
833
|
-
height: 100
|
|
874
|
+
width: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
875
|
+
height: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
834
876
|
padding: 0;
|
|
835
877
|
border: 0 !important;
|
|
836
878
|
border-radius: 0;
|
|
@@ -851,6 +893,8 @@
|
|
|
851
893
|
-webkit-user-select: text;
|
|
852
894
|
user-select: text;
|
|
853
895
|
caret-color: var(--workbench-text-color);
|
|
896
|
+
transform: scale(var(--workbench-text-content-scale, 1));
|
|
897
|
+
transform-origin: 0 0;
|
|
854
898
|
}
|
|
855
899
|
|
|
856
900
|
.floe-infinite-canvas .workbench-text-annotation__content,
|
|
@@ -859,8 +903,8 @@
|
|
|
859
903
|
.workbench-text-annotation__content:active {
|
|
860
904
|
display: block;
|
|
861
905
|
box-sizing: border-box;
|
|
862
|
-
width: 100
|
|
863
|
-
height: 100
|
|
906
|
+
width: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
907
|
+
height: calc(100% * var(--workbench-text-content-inverse-scale, 1));
|
|
864
908
|
padding: 0;
|
|
865
909
|
border: 0 !important;
|
|
866
910
|
border-radius: 0;
|
|
@@ -881,6 +925,8 @@
|
|
|
881
925
|
-webkit-user-select: text;
|
|
882
926
|
user-select: text;
|
|
883
927
|
caret-color: var(--workbench-text-color);
|
|
928
|
+
transform: scale(var(--workbench-text-content-scale, 1));
|
|
929
|
+
transform-origin: 0 0;
|
|
884
930
|
}
|
|
885
931
|
|
|
886
932
|
.workbench-text-annotation__size-input {
|
|
@@ -1244,10 +1290,16 @@
|
|
|
1244
1290
|
border-color 180ms ease;
|
|
1245
1291
|
}
|
|
1246
1292
|
|
|
1247
|
-
.workbench-canvas__projected-layer > .workbench-widget
|
|
1293
|
+
.workbench-canvas__projected-work-layer > .workbench-widget,
|
|
1294
|
+
.workbench-canvas__projected-work-layer > .workbench-sticky {
|
|
1248
1295
|
pointer-events: auto;
|
|
1249
1296
|
}
|
|
1250
1297
|
|
|
1298
|
+
.workbench-canvas__projected-work-layer > .workbench-widget,
|
|
1299
|
+
.workbench-canvas__projected-work-layer > .workbench-sticky {
|
|
1300
|
+
isolation: isolate;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1251
1303
|
.workbench-widget.is-projected-surface {
|
|
1252
1304
|
transform-origin: 0 0;
|
|
1253
1305
|
}
|
|
@@ -1262,6 +1314,45 @@
|
|
|
1262
1314
|
overflow: hidden;
|
|
1263
1315
|
}
|
|
1264
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
|
+
|
|
1265
1356
|
.workbench-widget.is-dragging {
|
|
1266
1357
|
will-change: transform;
|
|
1267
1358
|
transition: none;
|
|
@@ -1445,6 +1536,17 @@
|
|
|
1445
1536
|
0 18px 42px -14px color-mix(in srgb, var(--primary, #3b82f6) 22%, transparent);
|
|
1446
1537
|
}
|
|
1447
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
|
+
|
|
1448
1550
|
.workbench-widget__title-area {
|
|
1449
1551
|
display: flex;
|
|
1450
1552
|
align-items: center;
|
|
@@ -1801,6 +1903,25 @@
|
|
|
1801
1903
|
background: color-mix(in srgb, var(--popover, var(--card, #fff)) 92%, transparent);
|
|
1802
1904
|
}
|
|
1803
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
|
+
|
|
1804
1925
|
.workbench-dock__mode-option {
|
|
1805
1926
|
position: relative;
|
|
1806
1927
|
display: flex;
|