@dxos/plugin-deck 0.6.11 → 0.6.12-main.568932b
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/lib/browser/index.mjs +103 -103
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/DeckPlugin.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts +2 -2
- package/dist/types/src/components/DeckLayout/ComplementarySidebar.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts +2 -3
- package/dist/types/src/components/DeckLayout/DeckLayout.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts +2 -3
- package/dist/types/src/components/DeckLayout/NodePlankHeading.d.ts.map +1 -1
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts +2 -3
- package/dist/types/src/components/DeckLayout/Sidebar.d.ts.map +1 -1
- package/dist/types/src/hooks/useNode.d.ts.map +1 -1
- package/dist/types/src/layout.d.ts.map +1 -1
- package/package.json +29 -29
- package/src/DeckPlugin.tsx +79 -51
- package/src/components/DeckLayout/ComplementarySidebar.tsx +20 -19
- package/src/components/DeckLayout/DeckLayout.tsx +38 -49
- package/src/components/DeckLayout/NodePlankHeading.tsx +12 -14
- package/src/components/DeckLayout/Plank.tsx +2 -2
- package/src/components/DeckLayout/Sidebar.tsx +6 -5
- package/src/hooks/useNode.ts +5 -1
- package/src/layout.ts +1 -0
|
@@ -4,11 +4,10 @@ import {
|
|
|
4
4
|
} from "./chunk-YVHGFQQR.mjs";
|
|
5
5
|
|
|
6
6
|
// packages/plugins/plugin-deck/src/DeckPlugin.tsx
|
|
7
|
-
import { ArrowsOut } from "@phosphor-icons/react";
|
|
8
7
|
import { batch, effect } from "@preact/signals-core";
|
|
9
8
|
import { setAutoFreeze } from "immer";
|
|
10
9
|
import React15 from "react";
|
|
11
|
-
import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as
|
|
10
|
+
import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2 } from "@dxos/app-framework";
|
|
12
11
|
import { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
|
|
13
12
|
import { LocalStorageStore } from "@dxos/local-storage";
|
|
14
13
|
import { log } from "@dxos/log";
|
|
@@ -18,7 +17,6 @@ import { createExtension } from "@dxos/plugin-graph";
|
|
|
18
17
|
import { ObservabilityAction } from "@dxos/plugin-observability/meta";
|
|
19
18
|
import { fullyQualifiedId } from "@dxos/react-client/echo";
|
|
20
19
|
import { translations as deckTranslations } from "@dxos/react-ui-deck";
|
|
21
|
-
import { Mosaic } from "@dxos/react-ui-mosaic";
|
|
22
20
|
|
|
23
21
|
// packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
|
|
24
22
|
var NAV_ID = "NavTree";
|
|
@@ -26,9 +24,10 @@ var SURFACE_PREFIX = "surface:";
|
|
|
26
24
|
|
|
27
25
|
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
28
26
|
import { Sidebar as MenuIcon } from "@phosphor-icons/react";
|
|
29
|
-
import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2
|
|
30
|
-
import {
|
|
31
|
-
import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
27
|
+
import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
|
|
28
|
+
import { Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
|
|
29
|
+
import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useOnTransition, useTranslation as useTranslation5 } from "@dxos/react-ui";
|
|
30
|
+
import { useAttended as useAttended3 } from "@dxos/react-ui-attention";
|
|
32
31
|
import { Deck } from "@dxos/react-ui-deck";
|
|
33
32
|
import { getSize } from "@dxos/react-ui-theme";
|
|
34
33
|
|
|
@@ -40,8 +39,11 @@ import { useGraph } from "@dxos/plugin-graph";
|
|
|
40
39
|
// packages/plugins/plugin-deck/src/hooks/useNode.ts
|
|
41
40
|
import { useEffect, useState } from "react";
|
|
42
41
|
var useNode = (graph, id, timeout) => {
|
|
43
|
-
const [nodeState, setNodeState] = useState(id ? graph.findNode(id) : void 0);
|
|
42
|
+
const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
|
|
44
43
|
useEffect(() => {
|
|
44
|
+
if (!id && nodeState) {
|
|
45
|
+
setNodeState(void 0);
|
|
46
|
+
}
|
|
45
47
|
if (nodeState?.id === id || !id) {
|
|
46
48
|
return;
|
|
47
49
|
}
|
|
@@ -117,32 +119,21 @@ import React5 from "react";
|
|
|
117
119
|
import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3 } from "@dxos/app-framework";
|
|
118
120
|
import { useGraph as useGraph3 } from "@dxos/plugin-graph";
|
|
119
121
|
import { Main } from "@dxos/react-ui";
|
|
120
|
-
import {
|
|
122
|
+
import { useAttended } from "@dxos/react-ui-attention";
|
|
121
123
|
import { deckGrid } from "@dxos/react-ui-deck";
|
|
122
124
|
import { mx as mx2 } from "@dxos/react-ui-theme";
|
|
123
125
|
|
|
124
126
|
// packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
|
|
125
|
-
import { Placeholder } from "@phosphor-icons/react";
|
|
126
127
|
import React2, { Fragment, useEffect as useEffect3 } from "react";
|
|
127
|
-
import { LayoutAction, NavigationAction,
|
|
128
|
+
import { LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
|
|
128
129
|
import { useGraph as useGraph2 } from "@dxos/plugin-graph";
|
|
129
|
-
import { Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
|
|
130
|
-
import { PlankHeading
|
|
130
|
+
import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
|
|
131
|
+
import { PlankHeading } from "@dxos/react-ui-deck";
|
|
131
132
|
import { TextTooltip } from "@dxos/react-ui-text-tooltip";
|
|
132
|
-
var NodePlankHeading = ({
|
|
133
|
-
node,
|
|
134
|
-
id,
|
|
135
|
-
layoutParts,
|
|
136
|
-
layoutPart,
|
|
137
|
-
// TODO(wittjosiah): Unused?
|
|
138
|
-
layoutEntry,
|
|
139
|
-
popoverAnchorId,
|
|
140
|
-
pending,
|
|
141
|
-
flatDeck
|
|
142
|
-
}) => {
|
|
133
|
+
var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pending, flatDeck }) => {
|
|
143
134
|
const { t } = useTranslation(DECK_PLUGIN);
|
|
144
135
|
const { graph } = useGraph2();
|
|
145
|
-
const
|
|
136
|
+
const icon = node?.properties?.icon ?? "ph--placeholder--regular";
|
|
146
137
|
const label = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
|
|
147
138
|
"plank heading fallback label",
|
|
148
139
|
{
|
|
@@ -172,7 +163,8 @@ var NodePlankHeading = ({
|
|
|
172
163
|
return /* @__PURE__ */ React2.createElement(PlankHeading.Root, (layoutPart !== "main" || !flatDeck) && {
|
|
173
164
|
classNames: "pie-1 border-b border-separator"
|
|
174
165
|
}, /* @__PURE__ */ React2.createElement(ActionRoot, null, node ? /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
|
|
175
|
-
|
|
166
|
+
icon,
|
|
167
|
+
related: layoutPart === "complementary",
|
|
176
168
|
attendableId,
|
|
177
169
|
triggerLabel: t("actions menu label"),
|
|
178
170
|
actions: graph.actions(node),
|
|
@@ -187,11 +179,15 @@ var NodePlankHeading = ({
|
|
|
187
179
|
}
|
|
188
180
|
})) : /* @__PURE__ */ React2.createElement(PlankHeading.Button, null, /* @__PURE__ */ React2.createElement("span", {
|
|
189
181
|
className: "sr-only"
|
|
190
|
-
}, label), /* @__PURE__ */ React2.createElement(Icon,
|
|
182
|
+
}, label), /* @__PURE__ */ React2.createElement(Icon, {
|
|
183
|
+
icon,
|
|
184
|
+
size: 5
|
|
185
|
+
}))), /* @__PURE__ */ React2.createElement(TextTooltip, {
|
|
191
186
|
text: label,
|
|
192
187
|
onlyWhenTruncating: true
|
|
193
188
|
}, /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
|
|
194
|
-
attendableId
|
|
189
|
+
attendableId,
|
|
190
|
+
related: layoutPart === "complementary",
|
|
195
191
|
...pending && {
|
|
196
192
|
classNames: "text-description"
|
|
197
193
|
}
|
|
@@ -237,9 +233,6 @@ var NodePlankHeading = ({
|
|
|
237
233
|
action: NavigationAction.CLOSE,
|
|
238
234
|
data: {
|
|
239
235
|
activeParts: {
|
|
240
|
-
complementary: [
|
|
241
|
-
`${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
|
|
242
|
-
],
|
|
243
236
|
[layoutPart]: [
|
|
244
237
|
id
|
|
245
238
|
]
|
|
@@ -253,7 +246,7 @@ var NodePlankHeading = ({
|
|
|
253
246
|
}
|
|
254
247
|
});
|
|
255
248
|
},
|
|
256
|
-
close:
|
|
249
|
+
close: layoutPart === "complementary" ? "minify-end" : true
|
|
257
250
|
}));
|
|
258
251
|
};
|
|
259
252
|
|
|
@@ -314,13 +307,14 @@ var LayoutContext = createContext(null);
|
|
|
314
307
|
var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
|
|
315
308
|
|
|
316
309
|
// packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
|
|
317
|
-
var ComplementarySidebar = ({
|
|
310
|
+
var ComplementarySidebar = ({ context, layoutParts, flatDeck }) => {
|
|
318
311
|
const { popoverAnchorId } = useLayout();
|
|
312
|
+
const attended = useAttended();
|
|
313
|
+
const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${context}` : void 0;
|
|
319
314
|
const { graph } = useGraph3();
|
|
320
315
|
const node = useNode(graph, id);
|
|
321
|
-
const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR2)[0] ?? "never");
|
|
322
316
|
useNodeActionExpander(node);
|
|
323
|
-
return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar,
|
|
317
|
+
return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, null, /* @__PURE__ */ React5.createElement("div", {
|
|
324
318
|
role: "none",
|
|
325
319
|
className: mx2(deckGrid, "grid-cols-1 bs-full")
|
|
326
320
|
}, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
|
|
@@ -330,17 +324,17 @@ var ComplementarySidebar = ({ id, layoutParts, flatDeck }) => {
|
|
|
330
324
|
layoutPart: "complementary",
|
|
331
325
|
popoverAnchorId,
|
|
332
326
|
flatDeck
|
|
333
|
-
}), /* @__PURE__ */ React5.createElement(Surface3, {
|
|
327
|
+
}), node && /* @__PURE__ */ React5.createElement(Surface3, {
|
|
334
328
|
role: "article",
|
|
335
329
|
data: {
|
|
336
|
-
subject: node.
|
|
330
|
+
subject: node.properties.object,
|
|
337
331
|
part: "complementary",
|
|
338
332
|
popoverAnchorId
|
|
339
333
|
},
|
|
340
334
|
limit: 1,
|
|
341
335
|
fallback: PlankContentError,
|
|
342
336
|
placeholder: /* @__PURE__ */ React5.createElement(PlankLoading, null)
|
|
343
|
-
}))
|
|
337
|
+
})));
|
|
344
338
|
};
|
|
345
339
|
|
|
346
340
|
// packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
|
|
@@ -405,7 +399,7 @@ import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction2, S
|
|
|
405
399
|
import { debounce } from "@dxos/async";
|
|
406
400
|
import { useGraph as useGraph5 } from "@dxos/plugin-graph";
|
|
407
401
|
import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
|
|
408
|
-
import {
|
|
402
|
+
import { useAttendableAttributes } from "@dxos/react-ui-attention";
|
|
409
403
|
import { Plank as NaturalPlank } from "@dxos/react-ui-deck";
|
|
410
404
|
import { mainIntrinsicSize } from "@dxos/react-ui-theme";
|
|
411
405
|
|
|
@@ -425,7 +419,7 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
|
|
|
425
419
|
const node = useNode(graph, entry.id);
|
|
426
420
|
const rootElement = useRef(null);
|
|
427
421
|
const resizeable = layoutMode === "deck";
|
|
428
|
-
const attendableAttrs =
|
|
422
|
+
const attendableAttrs = useAttendableAttributes(entry.id);
|
|
429
423
|
const coordinate = {
|
|
430
424
|
part,
|
|
431
425
|
entryId: entry.id
|
|
@@ -552,8 +546,10 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
|
|
|
552
546
|
import React10, { useMemo } from "react";
|
|
553
547
|
import { openIds, Surface as Surface7 } from "@dxos/app-framework";
|
|
554
548
|
import { Main as Main2 } from "@dxos/react-ui";
|
|
555
|
-
|
|
549
|
+
import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
|
|
550
|
+
var Sidebar = ({ layoutParts }) => {
|
|
556
551
|
const { layoutMode, popoverAnchorId } = useLayout();
|
|
552
|
+
const attended = useAttended2();
|
|
557
553
|
const activeIds = useMemo(() => {
|
|
558
554
|
if (layoutMode === "solo") {
|
|
559
555
|
return new Set(layoutParts?.solo?.map((e) => e.id) ?? []);
|
|
@@ -568,11 +564,11 @@ var Sidebar = ({ attention, layoutParts }) => {
|
|
|
568
564
|
const navigationData = useMemo(() => ({
|
|
569
565
|
popoverAnchorId,
|
|
570
566
|
activeIds,
|
|
571
|
-
attended
|
|
567
|
+
attended
|
|
572
568
|
}), [
|
|
573
569
|
popoverAnchorId,
|
|
574
570
|
activeIds,
|
|
575
|
-
|
|
571
|
+
attended
|
|
576
572
|
]);
|
|
577
573
|
return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React10.createElement(Surface7, {
|
|
578
574
|
role: "navigation",
|
|
@@ -672,20 +668,26 @@ var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySideba
|
|
|
672
668
|
};
|
|
673
669
|
|
|
674
670
|
// packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
|
|
675
|
-
var DeckLayout = ({ layoutParts,
|
|
671
|
+
var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHintsFooter, slots, onDismissToast }) => {
|
|
676
672
|
const context = useLayout();
|
|
677
673
|
const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
|
|
678
674
|
const { t } = useTranslation5(DECK_PLUGIN);
|
|
679
675
|
const { plankSizing } = useDeckContext();
|
|
676
|
+
const attended = useAttended3();
|
|
680
677
|
const searchPlugin = usePlugin("dxos.org/plugin/search");
|
|
681
678
|
const fullScreenSlug = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
|
|
682
679
|
layoutParts
|
|
683
680
|
]);
|
|
684
|
-
const
|
|
681
|
+
const scrollLeftRef = useRef2();
|
|
685
682
|
const deckRef = useRef2(null);
|
|
686
|
-
|
|
683
|
+
useEffect5(() => {
|
|
684
|
+
const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
|
|
685
|
+
if (attended.length === 0 && firstId) {
|
|
686
|
+
document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
|
|
687
|
+
}
|
|
688
|
+
}, []);
|
|
687
689
|
const handleResize = useCallback2(() => {
|
|
688
|
-
|
|
690
|
+
scrollLeftRef.current = null;
|
|
689
691
|
}, []);
|
|
690
692
|
useEffect5(() => {
|
|
691
693
|
window.addEventListener("resize", handleResize);
|
|
@@ -693,36 +695,20 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
693
695
|
}, [
|
|
694
696
|
handleResize
|
|
695
697
|
]);
|
|
696
|
-
|
|
697
|
-
if (
|
|
698
|
-
|
|
699
|
-
} else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
|
|
700
|
-
deckRef.current.scrollLeft = scrollLeft;
|
|
701
|
-
restoreScrollRef.current = false;
|
|
698
|
+
const restoreScroll = useCallback2(() => {
|
|
699
|
+
if (deckRef.current && scrollLeftRef.current != null) {
|
|
700
|
+
deckRef.current.scrollLeft = scrollLeftRef.current;
|
|
702
701
|
}
|
|
703
|
-
}, [
|
|
704
|
-
|
|
705
|
-
deckRef.current,
|
|
706
|
-
scrollLeft
|
|
707
|
-
]);
|
|
702
|
+
}, []);
|
|
703
|
+
useOnTransition(layoutMode, (mode) => mode !== "deck", "deck", restoreScroll);
|
|
708
704
|
const handleScroll = useCallback2((event) => {
|
|
709
705
|
if (layoutMode === "deck" && event.currentTarget === event.target) {
|
|
710
|
-
|
|
706
|
+
scrollLeftRef.current = event.target.scrollLeft;
|
|
711
707
|
}
|
|
712
708
|
}, [
|
|
713
709
|
layoutMode
|
|
714
710
|
]);
|
|
715
|
-
const
|
|
716
|
-
const entry = layoutParts.complementary?.at(0);
|
|
717
|
-
if (entry) {
|
|
718
|
-
return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR3}${entry.path}` : entry.id;
|
|
719
|
-
}
|
|
720
|
-
}, [
|
|
721
|
-
layoutParts
|
|
722
|
-
]);
|
|
723
|
-
const firstAttendedId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
|
|
724
|
-
attention.attended
|
|
725
|
-
]);
|
|
711
|
+
const firstAttendedId = attended[0];
|
|
726
712
|
useEffect5(() => {
|
|
727
713
|
if (layoutMode === "deck" && firstAttendedId) {
|
|
728
714
|
}
|
|
@@ -744,7 +730,19 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
744
730
|
layoutParts.main,
|
|
745
731
|
layoutParts.solo
|
|
746
732
|
]);
|
|
747
|
-
const padding =
|
|
733
|
+
const padding = useMemo2(() => {
|
|
734
|
+
if (layoutMode === "deck" && overscroll === "centering") {
|
|
735
|
+
return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
|
|
736
|
+
}
|
|
737
|
+
return {};
|
|
738
|
+
}, [
|
|
739
|
+
layoutMode,
|
|
740
|
+
overscroll,
|
|
741
|
+
layoutParts.main,
|
|
742
|
+
plankSizing,
|
|
743
|
+
sidebarOpen,
|
|
744
|
+
complementarySidebarOpen
|
|
745
|
+
]);
|
|
748
746
|
if (layoutMode === "fullscreen") {
|
|
749
747
|
return /* @__PURE__ */ React13.createElement(Fullscreen, {
|
|
750
748
|
id: fullScreenSlug
|
|
@@ -766,19 +764,13 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
766
764
|
}), /* @__PURE__ */ React13.createElement(Main3.Root, {
|
|
767
765
|
navigationSidebarOpen: context.sidebarOpen,
|
|
768
766
|
onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
/* complementaryAvailable && */
|
|
772
|
-
context.complementarySidebarOpen
|
|
773
|
-
),
|
|
774
|
-
onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
|
|
775
|
-
}
|
|
767
|
+
complementarySidebarOpen: context.complementarySidebarOpen,
|
|
768
|
+
onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
|
|
776
769
|
}, /* @__PURE__ */ React13.createElement(Main3.Notch, {
|
|
777
770
|
classNames: "z-[21]"
|
|
778
771
|
}, /* @__PURE__ */ React13.createElement(Surface9, {
|
|
779
772
|
role: "notch-start"
|
|
780
773
|
}), /* @__PURE__ */ React13.createElement(Button3, {
|
|
781
|
-
// disabled={!sidebarAvailable}
|
|
782
774
|
onClick: () => context.sidebarOpen = !context.sidebarOpen,
|
|
783
775
|
variant: "ghost",
|
|
784
776
|
classNames: "p-1"
|
|
@@ -788,7 +780,6 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
788
780
|
weight: "light",
|
|
789
781
|
className: getSize(5)
|
|
790
782
|
})), /* @__PURE__ */ React13.createElement(Button3, {
|
|
791
|
-
// disabled={!complementaryAvailable}
|
|
792
783
|
onClick: () => context.complementarySidebarOpen = !context.complementarySidebarOpen,
|
|
793
784
|
variant: "ghost",
|
|
794
785
|
classNames: "p-1"
|
|
@@ -801,10 +792,9 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
|
|
|
801
792
|
})), /* @__PURE__ */ React13.createElement(Surface9, {
|
|
802
793
|
role: "notch-end"
|
|
803
794
|
})), /* @__PURE__ */ React13.createElement(Sidebar, {
|
|
804
|
-
attention,
|
|
805
795
|
layoutParts
|
|
806
796
|
}), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
|
|
807
|
-
|
|
797
|
+
context: "comments",
|
|
808
798
|
layoutParts,
|
|
809
799
|
flatDeck
|
|
810
800
|
}), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), parts.length === 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
|
|
@@ -932,7 +922,7 @@ var LayoutSettings = ({ settings }) => {
|
|
|
932
922
|
|
|
933
923
|
// packages/plugins/plugin-deck/src/layout.ts
|
|
934
924
|
import { produce } from "immer";
|
|
935
|
-
import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as
|
|
925
|
+
import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3 } from "@dxos/app-framework";
|
|
936
926
|
var partsThatSupportIncrement = [
|
|
937
927
|
"main"
|
|
938
928
|
];
|
|
@@ -1045,7 +1035,7 @@ var mergeLayoutParts = (...layoutParts) => {
|
|
|
1045
1035
|
}), {});
|
|
1046
1036
|
};
|
|
1047
1037
|
var parseLayoutEntry = (itemString) => {
|
|
1048
|
-
const [id, path] = itemString.split(
|
|
1038
|
+
const [id, path] = itemString.split(SLUG_PATH_SEPARATOR3);
|
|
1049
1039
|
const entry = {
|
|
1050
1040
|
id
|
|
1051
1041
|
};
|
|
@@ -1072,7 +1062,7 @@ var soloPartToUri = (layout) => {
|
|
|
1072
1062
|
return "";
|
|
1073
1063
|
}
|
|
1074
1064
|
const entry = soloPart[0];
|
|
1075
|
-
return `${entry.id}${entry.path ?
|
|
1065
|
+
return `${entry.id}${entry.path ? SLUG_PATH_SEPARATOR3 + entry.path : ""}`;
|
|
1076
1066
|
};
|
|
1077
1067
|
|
|
1078
1068
|
// packages/plugins/plugin-deck/src/translations.ts
|
|
@@ -1227,6 +1217,20 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1227
1217
|
}
|
|
1228
1218
|
}
|
|
1229
1219
|
};
|
|
1220
|
+
const handleSetLocation = (next) => {
|
|
1221
|
+
if (attentionPlugin) {
|
|
1222
|
+
const attended = attentionPlugin.provides.attention.attended;
|
|
1223
|
+
const [attendedId] = Array.from(attended);
|
|
1224
|
+
const ids = (layout.values.layoutMode === "deck" ? next.main : next.solo)?.map(({ id }) => id) ?? [];
|
|
1225
|
+
const isAttendedAvailable = !!attendedId && ids.includes(attendedId);
|
|
1226
|
+
if (!isAttendedAvailable) {
|
|
1227
|
+
const nextAttended = next.main?.[0]?.id;
|
|
1228
|
+
const article = document.querySelector(`article[data-attendable-id="${nextAttended}"]`);
|
|
1229
|
+
article?.focus();
|
|
1230
|
+
}
|
|
1231
|
+
}
|
|
1232
|
+
location.values.active = next;
|
|
1233
|
+
};
|
|
1230
1234
|
return {
|
|
1231
1235
|
meta: meta_default,
|
|
1232
1236
|
ready: async (plugins) => {
|
|
@@ -1301,13 +1305,13 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1301
1305
|
handleNavigation = async () => {
|
|
1302
1306
|
const pathname = window.location.pathname;
|
|
1303
1307
|
if (pathname === "/reset") {
|
|
1304
|
-
|
|
1308
|
+
handleSetLocation({
|
|
1305
1309
|
sidebar: [
|
|
1306
1310
|
{
|
|
1307
1311
|
id: NAV_ID
|
|
1308
1312
|
}
|
|
1309
1313
|
]
|
|
1310
|
-
};
|
|
1314
|
+
});
|
|
1311
1315
|
location.values.closed = [];
|
|
1312
1316
|
layout.values.layoutMode = "solo";
|
|
1313
1317
|
window.location.pathname = "/";
|
|
@@ -1318,7 +1322,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1318
1322
|
return;
|
|
1319
1323
|
}
|
|
1320
1324
|
const startingLayout = removePart(location.values.active, "solo");
|
|
1321
|
-
|
|
1325
|
+
handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
|
|
1322
1326
|
layout.values.layoutMode = "solo";
|
|
1323
1327
|
};
|
|
1324
1328
|
await handleNavigation();
|
|
@@ -1380,8 +1384,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1380
1384
|
ns: DECK_PLUGIN
|
|
1381
1385
|
}
|
|
1382
1386
|
],
|
|
1383
|
-
icon:
|
|
1384
|
-
iconSymbol: "ph--arrows-out--regular",
|
|
1387
|
+
icon: "ph--arrows-out--regular",
|
|
1385
1388
|
keyBinding: {
|
|
1386
1389
|
macos: "ctrl+meta+f",
|
|
1387
1390
|
windows: "shift+ctrl+f"
|
|
@@ -1398,10 +1401,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1398
1401
|
value: deck.values
|
|
1399
1402
|
}, props.children)),
|
|
1400
1403
|
root: () => {
|
|
1401
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1402
|
-
attention: attentionPlugin?.provides.attention ?? {
|
|
1403
|
-
attended: /* @__PURE__ */ new Set()
|
|
1404
|
-
},
|
|
1404
|
+
return /* @__PURE__ */ React15.createElement(DeckLayout, {
|
|
1405
1405
|
layoutParts: location.values.active,
|
|
1406
1406
|
showHintsFooter: settings.values.showFooter,
|
|
1407
1407
|
overscroll: settings.values.overscroll,
|
|
@@ -1419,7 +1419,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1419
1419
|
}, 1e3);
|
|
1420
1420
|
}
|
|
1421
1421
|
}
|
|
1422
|
-
})
|
|
1422
|
+
});
|
|
1423
1423
|
},
|
|
1424
1424
|
surface: {
|
|
1425
1425
|
component: ({ data, role }) => {
|
|
@@ -1455,7 +1455,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1455
1455
|
} else {
|
|
1456
1456
|
log.warn("Invalid layout mode", intent?.data?.layoutMode, {
|
|
1457
1457
|
F: __dxlog_file,
|
|
1458
|
-
L:
|
|
1458
|
+
L: 410,
|
|
1459
1459
|
S: void 0,
|
|
1460
1460
|
C: (f, a) => f(...a)
|
|
1461
1461
|
});
|
|
@@ -1510,7 +1510,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1510
1510
|
}
|
|
1511
1511
|
const processLayoutEntry = (partName, entryString, currentLayout) => {
|
|
1512
1512
|
const toggle = true;
|
|
1513
|
-
const [id, path] = entryString.split(
|
|
1513
|
+
const [id, path] = entryString.split(SLUG_PATH_SEPARATOR4);
|
|
1514
1514
|
const layoutEntry = {
|
|
1515
1515
|
id,
|
|
1516
1516
|
...path ? {
|
|
@@ -1539,7 +1539,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1539
1539
|
newLayout = processLayoutEntry(partName, layoutEntries, newLayout);
|
|
1540
1540
|
}
|
|
1541
1541
|
});
|
|
1542
|
-
|
|
1542
|
+
handleSetLocation(newLayout);
|
|
1543
1543
|
});
|
|
1544
1544
|
const ids = openIds2(location.values.active);
|
|
1545
1545
|
const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
|
|
@@ -1587,10 +1587,10 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1587
1587
|
id: data.id
|
|
1588
1588
|
};
|
|
1589
1589
|
const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
|
|
1590
|
-
|
|
1590
|
+
handleSetLocation(openEntry(location.values.active, effectivePart, layoutEntry, {
|
|
1591
1591
|
positioning: data.positioning ?? settings.values.newPlankPositioning,
|
|
1592
1592
|
pivotId: data.pivotId
|
|
1593
|
-
});
|
|
1593
|
+
}));
|
|
1594
1594
|
const intents = [];
|
|
1595
1595
|
if (data.scrollIntoView && layout.values.layoutMode === "deck") {
|
|
1596
1596
|
intents.push([
|
|
@@ -1632,7 +1632,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1632
1632
|
});
|
|
1633
1633
|
}
|
|
1634
1634
|
});
|
|
1635
|
-
|
|
1635
|
+
handleSetLocation(newLayout);
|
|
1636
1636
|
return {
|
|
1637
1637
|
data: true
|
|
1638
1638
|
};
|
|
@@ -1642,7 +1642,7 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1642
1642
|
case NavigationAction3.SET: {
|
|
1643
1643
|
return batch(() => {
|
|
1644
1644
|
if (isLayoutParts(intent.data?.activeParts)) {
|
|
1645
|
-
|
|
1645
|
+
handleSetLocation(intent.data.activeParts);
|
|
1646
1646
|
}
|
|
1647
1647
|
return {
|
|
1648
1648
|
data: true
|
|
@@ -1654,10 +1654,10 @@ var DeckPlugin = ({ observability } = {}) => {
|
|
|
1654
1654
|
if (isLayoutAdjustment(intent.data)) {
|
|
1655
1655
|
const adjustment = intent.data;
|
|
1656
1656
|
if (adjustment.type === "increment-end" || adjustment.type === "increment-start") {
|
|
1657
|
-
|
|
1657
|
+
handleSetLocation(incrementPlank(location.values.active, {
|
|
1658
1658
|
type: adjustment.type,
|
|
1659
1659
|
layoutCoordinate: adjustment.layoutCoordinate
|
|
1660
|
-
});
|
|
1660
|
+
}));
|
|
1661
1661
|
}
|
|
1662
1662
|
if (adjustment.type === "solo") {
|
|
1663
1663
|
const entryId = adjustment.layoutCoordinate.entryId;
|