@likec4/diagram 1.59.2 → 1.59.4
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/README.md +53 -0
- package/dist/LikeC4Diagram.d.ts +1 -1
- package/dist/LikeC4Diagram.js +36 -21
- package/dist/LikeC4Diagram.props.d.ts +23 -0
- package/dist/LikeC4MantineProvider.d.ts +24 -0
- package/dist/LikeC4MantineProvider.js +156 -0
- package/dist/LikeC4ProjectsOverview.js +1 -1
- package/dist/LikeC4ProjectsProvider.d.ts +17 -2
- package/dist/LikeC4Styles.d.ts +13 -3
- package/dist/LikeC4Styles.js +10 -6
- package/dist/LikeC4View.js +2 -2
- package/dist/StaticLikeC4Diagram.d.ts +1 -1
- package/dist/base/BaseXYFlow.d.ts +1 -1
- package/dist/base/BaseXYFlow.js +19 -9
- package/dist/base/const.d.ts +1 -0
- package/dist/base/const.js +3 -1
- package/dist/base-primitives/Markdown.d.ts +3 -3
- package/dist/base-primitives/compound/CompoundNodeContainer.js +2 -3
- package/dist/base-primitives/compound/CompoundTitle.js +5 -4
- package/dist/base-primitives/compound/actionbtns.css.d.ts +3 -3
- package/dist/base-primitives/compound/actionbtns.css.js +3 -3
- package/dist/base-primitives/element/ElementData.js +6 -1
- package/dist/base-primitives/element/ElementShape.js +9 -10
- package/dist/base-primitives/element/ElementTags.d.ts +2 -2
- package/dist/base-primitives/element/ElementTags.js +5 -5
- package/dist/components/EmptyBox.d.ts +3 -0
- package/dist/components/EmptyBox.js +9 -0
- package/dist/components/ErrorFallback.js +7 -6
- package/dist/components/FloatingWindow.d.ts +18 -0
- package/dist/components/FloatingWindow.js +89 -0
- package/dist/components/Link.js +7 -7
- package/dist/components/NavigationPanel.d.ts +2 -2
- package/dist/components/NavigationPanel.js +5 -6
- package/dist/components/SearchControl.css.js +10 -12
- package/dist/components/ViewIcon.d.ts +11 -0
- package/dist/components/ViewIcon.js +71 -0
- package/dist/context/CurrentViewModelProvider.js +2 -1
- package/dist/context/DiagramEventHandlers.js +4 -2
- package/dist/context/EnsureMantine.js +3 -3
- package/dist/context/IconRenderer.d.ts +2 -1
- package/dist/context/IconRenderer.js +78 -26
- package/dist/context/LikeC4ProjectsContext.d.ts +3 -2
- package/dist/context/TagStylesContext.d.ts +11 -4
- package/dist/context/TagStylesContext.js +39 -27
- package/dist/custom/index.d.ts +3 -0
- package/dist/custom/index.js +7 -4
- package/dist/editor/LikeC4EditorCallbacks.d.ts +20 -1
- package/dist/editor/LikeC4EditorCallbacks.js +4 -1
- package/dist/editor/actor/setup.d.ts +1 -0
- package/dist/editor/actor/setup.js +17 -12
- package/dist/editor/actor/state.sync-queue.js +1 -0
- package/dist/editor/applyChangesToManualLayout.js +5 -2
- package/dist/editor/index.d.ts +1 -1
- package/dist/editor/useEditorActorLogic.js +10 -3
- package/dist/hooks/safeContext.d.ts +12 -4
- package/dist/hooks/safeContext.js +2 -2
- package/dist/hooks/useCurrentView.js +5 -5
- package/dist/hooks/useDiagram.js +3 -23
- package/dist/hooks/useDiagramCompareLayout.d.ts +16 -6
- package/dist/hooks/useDiagramCompareLayout.js +20 -17
- package/dist/hooks/useEditorActor.js +3 -5
- package/dist/hooks/useLikeC4Model.js +8 -3
- package/dist/hooks/useLikeC4Project.d.ts +4 -3
- package/dist/hooks/useOverlaysActor.d.ts +1 -1
- package/dist/hooks/useUpdateEffect.js +2 -1
- package/dist/index.d.ts +6 -4
- package/dist/index.js +8 -6
- package/dist/likec4diagram/DiagramUI.js +4 -3
- package/dist/likec4diagram/DiagramXYFlow.d.ts +6 -0
- package/dist/likec4diagram/DiagramXYFlow.js +33 -19
- package/dist/likec4diagram/custom/edges/EdgeDrifts.js +4 -4
- package/dist/likec4diagram/custom/edges/RelationshipEdge.js +2 -4
- package/dist/likec4diagram/custom/edges/SequenceStepEdge.js +1 -3
- package/dist/likec4diagram/custom/edges/edges.css.js +13 -13
- package/dist/likec4diagram/custom/edges/useRelationshipEdgePath.js +3 -2
- package/dist/likec4diagram/custom/nodes/NodeDrifts.js +2 -2
- package/dist/likec4diagram/custom/nodes/NodeNotes.js +4 -4
- package/dist/likec4diagram/custom/nodes/SequenceActorNode.js +2 -2
- package/dist/likec4diagram/custom/nodes/SequenceSubFlow.js +8 -5
- package/dist/likec4diagram/custom/nodes/nodes.js +8 -5
- package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +2 -2
- package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +9 -8
- package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js +1 -1
- package/dist/likec4diagram/relationship-popover/RelationshipPopover.js +3 -2
- package/dist/likec4diagram/relationship-popover/components.d.ts +1 -1
- package/dist/likec4diagram/relationship-popover/components.js +6 -2
- package/dist/likec4diagram/state/DiagramActorProvider.d.ts +7 -2
- package/dist/likec4diagram/state/DiagramActorProvider.js +20 -4
- package/dist/likec4diagram/state/assign.js +1 -1
- package/dist/likec4diagram/state/createViewChange.js +1 -6
- package/dist/likec4diagram/state/diagram-api.d.ts +2 -2
- package/dist/likec4diagram/state/diagram-api.js +3 -2
- package/dist/likec4diagram/state/machine.actions.js +15 -8
- package/dist/likec4diagram/state/machine.actions.layout.d.ts +1 -0
- package/dist/likec4diagram/state/machine.actions.layout.js +7 -5
- package/dist/likec4diagram/state/machine.setup.d.ts +10 -1
- package/dist/likec4diagram/state/machine.setup.js +15 -9
- package/dist/likec4diagram/state/machine.state.initializing.d.ts +2 -26
- package/dist/likec4diagram/state/machine.state.initializing.js +9 -6
- package/dist/likec4diagram/state/machine.state.navigating.js +1 -1
- package/dist/likec4diagram/state/machine.state.ready.d.ts +134 -3
- package/dist/likec4diagram/state/machine.state.ready.js +2 -1
- package/dist/likec4diagram/state/machine.state.ready.walkthrough.d.ts +106 -1
- package/dist/likec4diagram/state/machine.state.ready.walkthrough.js +40 -7
- package/dist/likec4diagram/state/utils.d.ts +1 -1
- package/dist/likec4diagram/state/utils.js +7 -4
- package/dist/likec4diagram/ui/FloatingSequenceActors.js +2 -1
- package/dist/likec4diagram/ui/LayoutDriftFrame.js +16 -10
- package/dist/likec4diagram/ui/index.d.ts +1 -1
- package/dist/likec4diagram/ui/notation/NotationPanel.css.js +13 -15
- package/dist/likec4diagram/ui/notation/NotationPanel.js +9 -9
- package/dist/likec4diagram/ui/sequence-outline/ActiveTrail.d.ts +9 -0
- package/dist/likec4diagram/ui/sequence-outline/ActiveTrail.js +81 -0
- package/dist/likec4diagram/ui/sequence-outline/FlowRow.d.ts +11 -0
- package/dist/likec4diagram/ui/sequence-outline/FlowRow.js +70 -0
- package/dist/likec4diagram/ui/sequence-outline/OutlineBody.d.ts +2 -0
- package/dist/likec4diagram/ui/sequence-outline/OutlineBody.js +106 -0
- package/dist/likec4diagram/ui/sequence-outline/OutlineHeader.d.ts +2 -0
- package/dist/likec4diagram/ui/sequence-outline/OutlineHeader.js +140 -0
- package/dist/likec4diagram/ui/sequence-outline/OutlineNodes.d.ts +17 -0
- package/dist/likec4diagram/ui/sequence-outline/OutlineNodes.js +83 -0
- package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.d.ts +4 -0
- package/dist/likec4diagram/ui/sequence-outline/SequenceOutlinePanel.js +49 -525
- package/dist/likec4diagram/ui/sequence-outline/StepBadge.d.ts +8 -0
- package/dist/likec4diagram/ui/sequence-outline/StepBadge.js +52 -0
- package/dist/likec4diagram/ui/sequence-outline/StepRow.d.ts +7 -0
- package/dist/likec4diagram/ui/sequence-outline/StepRow.js +190 -0
- package/dist/likec4diagram/ui/sequence-outline/StoreProvider.d.ts +238 -0
- package/dist/likec4diagram/ui/sequence-outline/StoreProvider.js +94 -0
- package/dist/likec4diagram/ui/sequence-outline/depth-of-field.d.ts +21 -0
- package/dist/likec4diagram/ui/sequence-outline/depth-of-field.js +71 -0
- package/dist/likec4diagram/ui/sequence-outline/index.d.ts +2 -0
- package/dist/likec4diagram/ui/sequence-outline/motion.d.ts +13 -0
- package/dist/likec4diagram/ui/sequence-outline/motion.js +21 -0
- package/dist/likec4diagram/ui/sequence-outline/presentation.d.ts +10 -0
- package/dist/likec4diagram/ui/sequence-outline/presentation.js +80 -0
- package/dist/likec4diagram/ui/sequence-outline/tree.d.ts +9 -0
- package/dist/likec4diagram/ui/sequence-outline/tree.js +67 -0
- package/dist/likec4diagram/ui/sequence-outline/{state.d.ts → types.d.ts} +4 -2
- package/dist/likec4diagram/ui/sequence-outline/types.js +12 -0
- package/dist/likec4diagram/useLayoutConstraints.js +13 -1
- package/dist/likec4diagram/xyflow-sequence/layouter.js +8 -10
- package/dist/likec4diagram/xyflow-sequence/sequence-view-to-xy.js +1 -0
- package/dist/likec4diagram/xyflow-sequence/utils.js +0 -1
- package/dist/navigationpanel/NavigationPanel.js +45 -41
- package/dist/navigationpanel/NavigationPanelControls.js +102 -63
- package/dist/navigationpanel/NavigationPanelDropdown.js +52 -77
- package/dist/navigationpanel/_common.d.ts +6 -6
- package/dist/navigationpanel/_common.js +31 -42
- package/dist/navigationpanel/actor.actions.js +6 -5
- package/dist/navigationpanel/actor.js +2 -2
- package/dist/navigationpanel/actor.setup.d.ts +6 -6
- package/dist/navigationpanel/actor.setup.js +2 -1
- package/dist/navigationpanel/comparepanel/CompareActionsMenu.js +2 -4
- package/dist/navigationpanel/comparepanel/ComparePanel.js +8 -10
- package/dist/navigationpanel/comparepanel/DriftsSummary.d.ts +1 -1
- package/dist/navigationpanel/comparepanel/DriftsSummary.js +11 -9
- package/dist/navigationpanel/controls/LayoutWarning.js +69 -72
- package/dist/navigationpanel/controls/NavigationButtons.d.ts +1 -1
- package/dist/navigationpanel/controls/NavigationButtons.js +8 -8
- package/dist/navigationpanel/controls/OpenSource.d.ts +1 -1
- package/dist/navigationpanel/controls/OpenSource.js +5 -8
- package/dist/navigationpanel/controls/SearchControl.js +24 -9
- package/dist/navigationpanel/controls/ToggleReadonly.d.ts +4 -1
- package/dist/navigationpanel/controls/ToggleReadonly.js +56 -76
- package/dist/navigationpanel/controls/ViewDetailsButton.d.ts +5 -0
- package/dist/navigationpanel/controls/ViewDetailsButton.js +121 -0
- package/dist/navigationpanel/controls/index.d.ts +1 -1
- package/dist/navigationpanel/dropdown/ProjectsMenu.js +27 -16
- package/dist/navigationpanel/editorpanel/ApplySemanticLayout.js +2 -1
- package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js +12 -10
- package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.d.ts +2 -0
- package/dist/navigationpanel/editorpanel/ManualLayoutToolsButton.js +19 -10
- package/dist/navigationpanel/editorpanel/styles.js +8 -15
- package/dist/navigationpanel/hooks.d.ts +6 -2
- package/dist/navigationpanel/styles.css.d.ts +2 -2
- package/dist/navigationpanel/styles.css.js +0 -1
- package/dist/navigationpanel/walkthrough/ActiveWalkthroughControls.js +3 -2
- package/dist/navigationpanel/walkthrough/DynamicViewControls.d.ts +5 -4
- package/dist/navigationpanel/walkthrough/DynamicViewControls.js +10 -39
- package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.d.ts +1 -0
- package/dist/navigationpanel/walkthrough/DynamicViewModeSwitcher.js +49 -0
- package/dist/navigationpanel/walkthrough/WalkthroughPanel.js +8 -8
- package/dist/navigationpanel/windows/ViewDetailsWindow.d.ts +1 -0
- package/dist/navigationpanel/windows/ViewDetailsWindow.js +379 -0
- package/dist/overlays/Overlays.js +29 -17
- package/dist/overlays/element-details/ElementDetailsCard.css.js +28 -36
- package/dist/overlays/element-details/ElementDetailsCard.js +3 -3
- package/dist/overlays/element-details/MetadataValue.js +18 -16
- package/dist/overlays/element-details/TabPanelDeployments.css.js +6 -14
- package/dist/overlays/element-details/TabPanelRelationships.css.js +8 -12
- package/dist/overlays/element-details/TabPanelStructure.css.js +4 -8
- package/dist/overlays/hooks.d.ts +3 -1
- package/dist/overlays/overlay/Overlay.js +8 -7
- package/dist/overlays/overlaysActor.js +20 -17
- package/dist/overlays/relationship-details/RelationshipDetails.js +2 -1
- package/dist/overlays/relationship-details/SelectEdge.css.js +14 -9
- package/dist/overlays/relationship-details/actor.js +1 -1
- package/dist/overlays/relationship-details/hooks.js +2 -1
- package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +6 -0
- package/dist/overlays/relationships-browser/RelationshipsBrowser.js +15 -8
- package/dist/overlays/relationships-browser/SelectElement.css.js +2 -8
- package/dist/overlays/relationships-browser/SelectElement.js +5 -1
- package/dist/overlays/relationships-browser/actor.js +3 -2
- package/dist/overlays/relationships-browser/custom/ElementActions.js +39 -38
- package/dist/overlays/relationships-browser/custom/EmptyNode.js +7 -9
- package/dist/overlays/relationships-browser/hooks.js +2 -1
- package/dist/projects-overview/ProjectsOverview.js +8 -7
- package/dist/projects-overview/actor.js +1 -1
- package/dist/projects-overview/hooks.js +2 -1
- package/dist/search/Search.js +9 -7
- package/dist/search/components/ElementsColumn.css.js +6 -5
- package/dist/search/components/ElementsColumn.js +4 -3
- package/dist/search/components/SearchByTags.js +3 -3
- package/dist/search/components/ViewsColum.js +46 -43
- package/dist/search/components/ViewsColumn.css.js +4 -4
- package/dist/search/components/_shared.css.d.ts +2 -2
- package/dist/search/components/_shared.css.js +31 -46
- package/dist/search/components/styles.css.js +4 -4
- package/dist/search/hooks.js +2 -1
- package/dist/shadowroot/ShadowRoot.js +6 -5
- package/dist/styles2.js +1 -1
- package/dist/utils/index.js +3 -3
- package/package.json +29 -29
- package/panda.buildinfo.json +342 -299
- package/styles-min.css +1 -1
- package/styles-xyflow.css +1 -1
- package/styles.css +1 -1
- package/dist/context/DefaultMantineProvider.d.ts +0 -2
- package/dist/context/DefaultMantineProvider.js +0 -48
- package/dist/likec4diagram/ui/sequence-outline/state.js +0 -55
- package/dist/navigationpanel/controls/DetailsControls.d.ts +0 -2
- package/dist/navigationpanel/controls/DetailsControls.js +0 -223
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import "../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { MantineProvider, Portal, SegmentedControl, Tooltip, createTheme } from "@mantine/core";
|
|
4
|
-
//#region src/context/DefaultMantineProvider.tsx
|
|
5
|
-
var DefaultTheme = createTheme({
|
|
6
|
-
autoContrast: true,
|
|
7
|
-
primaryColor: "indigo",
|
|
8
|
-
cursorType: "pointer",
|
|
9
|
-
defaultRadius: "sm",
|
|
10
|
-
fontFamily: "var(--likec4-app-font, var(--likec4-app-font-default))",
|
|
11
|
-
headings: {
|
|
12
|
-
fontWeight: "medium",
|
|
13
|
-
sizes: {
|
|
14
|
-
h1: { fontWeight: "bold" },
|
|
15
|
-
h2: { fontWeight: "medium" }
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
fontSizes: {
|
|
19
|
-
xxs: "var(--font-sizes-xxs)",
|
|
20
|
-
xs: "var(--font-sizes-xs)",
|
|
21
|
-
sm: "var(--font-sizes-sm)",
|
|
22
|
-
md: "var(--font-sizes-md)",
|
|
23
|
-
lg: "var(--font-sizes-lg)",
|
|
24
|
-
xl: "var(--font-sizes-xl)"
|
|
25
|
-
},
|
|
26
|
-
spacing: {
|
|
27
|
-
xs: "var(--spacing-xs)",
|
|
28
|
-
sm: "var(--spacing-sm)",
|
|
29
|
-
md: "var(--spacing-md)",
|
|
30
|
-
lg: "var(--spacing-lg)",
|
|
31
|
-
xl: "var(--spacing-xl)"
|
|
32
|
-
},
|
|
33
|
-
components: {
|
|
34
|
-
SegmentedControl: SegmentedControl.extend({ vars: (theme, props) => ({ root: { "--sc-font-size": theme.fontSizes[props.fz ?? props.size] } }) }),
|
|
35
|
-
Portal: Portal.extend({ defaultProps: { reuseTargetNode: true } }),
|
|
36
|
-
Tooltip: Tooltip.extend({ defaultProps: { color: "dark" } })
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
function DefaultMantineProvider({ children, theme, ...props }) {
|
|
40
|
-
return /* @__PURE__ */ jsx(MantineProvider, {
|
|
41
|
-
defaultColorScheme: "auto",
|
|
42
|
-
theme: theme ?? DefaultTheme,
|
|
43
|
-
...props,
|
|
44
|
-
children
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
//#endregion
|
|
48
|
-
export { DefaultMantineProvider };
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import "../../../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { useMemo } from "react";
|
|
3
|
-
import "@likec4/core";
|
|
4
|
-
//#region src/likec4diagram/ui/sequence-outline/state.ts
|
|
5
|
-
function buildTree(flow, collapsedFlows) {
|
|
6
|
-
const tree = [];
|
|
7
|
-
let currentFlow = tree;
|
|
8
|
-
let isCollapsed = false;
|
|
9
|
-
flow.walk({
|
|
10
|
-
step: ({ step, stepnum, source, target, edge }) => {
|
|
11
|
-
if (isCollapsed) return;
|
|
12
|
-
currentFlow.push({
|
|
13
|
-
label: edge.label ?? `${source.title} → ${target.title}`,
|
|
14
|
-
value: step,
|
|
15
|
-
nodeProps: {
|
|
16
|
-
type: "step",
|
|
17
|
-
stepnum: stepnum.global,
|
|
18
|
-
source: source.title,
|
|
19
|
-
target: target.title,
|
|
20
|
-
label: edge.label,
|
|
21
|
-
notes: edge.notes ?? null
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
},
|
|
25
|
-
subflow: ({ subflow }) => {
|
|
26
|
-
if (collapsedFlows[subflow.id]) {
|
|
27
|
-
isCollapsed = true;
|
|
28
|
-
return () => {
|
|
29
|
-
isCollapsed = false;
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
const node = {
|
|
33
|
-
label: subflow.title ?? subflow._type,
|
|
34
|
-
value: subflow.id,
|
|
35
|
-
nodeProps: {
|
|
36
|
-
type: subflow._type,
|
|
37
|
-
title: subflow.title
|
|
38
|
-
},
|
|
39
|
-
children: []
|
|
40
|
-
};
|
|
41
|
-
const parent = currentFlow;
|
|
42
|
-
parent.push(node);
|
|
43
|
-
currentFlow = node.children;
|
|
44
|
-
return () => {
|
|
45
|
-
currentFlow = parent;
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
return tree;
|
|
50
|
-
}
|
|
51
|
-
function useTreeData(flow, collapsed) {
|
|
52
|
-
return useMemo(() => buildTree(flow, collapsed), [flow, collapsed]);
|
|
53
|
-
}
|
|
54
|
-
//#endregion
|
|
55
|
-
export { useTreeData };
|
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import "../../_virtual/_rolldown/runtime.js";
|
|
2
|
-
import { useDiagram } from "../../hooks/safeContext.js";
|
|
3
|
-
import { useOnDiagramEvent } from "../../hooks/useDiagram.js";
|
|
4
|
-
import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
|
|
5
|
-
import { selectNavigationContext, useNavigationActorSelector } from "../hooks.js";
|
|
6
|
-
import { Markdown } from "../../base-primitives/Markdown.js";
|
|
7
|
-
import { ElementTag } from "../../base-primitives/element/ElementTags.js";
|
|
8
|
-
import { Link } from "../../components/Link.js";
|
|
9
|
-
import { css, cx } from "@likec4/styles/css";
|
|
10
|
-
import { IconId, IconLink } from "@tabler/icons-react";
|
|
11
|
-
import { useState } from "react";
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { Badge, Popover, Text, UnstyledButton } from "@mantine/core";
|
|
14
|
-
import { Box as Box$1, HStack, styled } from "@likec4/styles/jsx";
|
|
15
|
-
import { RichText } from "@likec4/core/types";
|
|
16
|
-
import { hstack, vstack } from "@likec4/styles/patterns";
|
|
17
|
-
import * as m from "motion/react-m";
|
|
18
|
-
import { extractViewTitleFromPath } from "@likec4/core/model";
|
|
19
|
-
//#region src/navigationpanel/controls/DetailsControls.tsx
|
|
20
|
-
var selector = selectNavigationContext((context) => {
|
|
21
|
-
const view = context.view;
|
|
22
|
-
return {
|
|
23
|
-
id: view.id,
|
|
24
|
-
title: context.viewModel?.title ?? (view.title && extractViewTitleFromPath(view.title)) ?? "Untitled View",
|
|
25
|
-
description: context.viewModel?.description ?? RichText.from(view.description),
|
|
26
|
-
tags: view.tags ?? [],
|
|
27
|
-
links: view.links ?? []
|
|
28
|
-
};
|
|
29
|
-
});
|
|
30
|
-
var DetailsControls = (props) => {
|
|
31
|
-
const [opened, setOpened] = useState(false);
|
|
32
|
-
const data = useNavigationActorSelector(selector);
|
|
33
|
-
return /* @__PURE__ */ jsxs(Popover, {
|
|
34
|
-
position: "bottom-end",
|
|
35
|
-
shadow: "xl",
|
|
36
|
-
clickOutsideEvents: [
|
|
37
|
-
"pointerdown",
|
|
38
|
-
"mousedown",
|
|
39
|
-
"click"
|
|
40
|
-
],
|
|
41
|
-
offset: { mainAxis: 4 },
|
|
42
|
-
opened,
|
|
43
|
-
onChange: setOpened,
|
|
44
|
-
...useMantinePortalProps(),
|
|
45
|
-
...props,
|
|
46
|
-
children: [/* @__PURE__ */ jsx(ViewDetailsCardTrigger, {
|
|
47
|
-
linksCount: data.links.length,
|
|
48
|
-
onOpen: () => setOpened(true)
|
|
49
|
-
}), opened && /* @__PURE__ */ jsx(ViewDetailsCardDropdown, {
|
|
50
|
-
data,
|
|
51
|
-
onClose: () => setOpened(false)
|
|
52
|
-
})]
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
var ViewDetailsCardTrigger = ({ linksCount, onOpen }) => /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(UnstyledButton, {
|
|
56
|
-
component: m.button,
|
|
57
|
-
layout: "position",
|
|
58
|
-
whileTap: {
|
|
59
|
-
scale: .95,
|
|
60
|
-
translateY: 1
|
|
61
|
-
},
|
|
62
|
-
onClick: (e) => {
|
|
63
|
-
e.stopPropagation();
|
|
64
|
-
onOpen();
|
|
65
|
-
},
|
|
66
|
-
className: cx("group", hstack({
|
|
67
|
-
gap: "2",
|
|
68
|
-
paddingInline: "2",
|
|
69
|
-
paddingBlock: "1",
|
|
70
|
-
rounded: "sm",
|
|
71
|
-
userSelect: "none",
|
|
72
|
-
cursor: "pointer",
|
|
73
|
-
color: {
|
|
74
|
-
base: "likec4.panel.action",
|
|
75
|
-
_hover: "likec4.panel.action.hover"
|
|
76
|
-
},
|
|
77
|
-
backgroundColor: { _hover: "likec4.panel.action.bg.hover" },
|
|
78
|
-
display: {
|
|
79
|
-
base: "none",
|
|
80
|
-
"@/xs": "flex"
|
|
81
|
-
}
|
|
82
|
-
}), ``),
|
|
83
|
-
children: [/* @__PURE__ */ jsx(IconId, {
|
|
84
|
-
size: 16,
|
|
85
|
-
stroke: 1.8
|
|
86
|
-
}), linksCount > 0 && /* @__PURE__ */ jsxs(HStack, {
|
|
87
|
-
gap: "[1px]",
|
|
88
|
-
children: [/* @__PURE__ */ jsx(IconLink, {
|
|
89
|
-
size: 14,
|
|
90
|
-
stroke: 2
|
|
91
|
-
}), /* @__PURE__ */ jsx(Box$1, {
|
|
92
|
-
css: {
|
|
93
|
-
fontSize: "11px",
|
|
94
|
-
fontWeight: "bold",
|
|
95
|
-
lineHeight: 1,
|
|
96
|
-
opacity: .8
|
|
97
|
-
},
|
|
98
|
-
children: linksCount
|
|
99
|
-
})]
|
|
100
|
-
})]
|
|
101
|
-
}) });
|
|
102
|
-
var SectionHeader = styled("div", { base: {
|
|
103
|
-
fontSize: "xs",
|
|
104
|
-
color: "text.dimmed",
|
|
105
|
-
fontWeight: "medium",
|
|
106
|
-
userSelect: "none",
|
|
107
|
-
mb: "xxs"
|
|
108
|
-
} });
|
|
109
|
-
var ViewDetailsCardDropdown = ({ data: { id, title, description, tags, links }, onClose }) => {
|
|
110
|
-
const diagram = useDiagram();
|
|
111
|
-
useOnDiagramEvent("paneClick", onClose);
|
|
112
|
-
useOnDiagramEvent("nodeClick", onClose);
|
|
113
|
-
return /* @__PURE__ */ jsxs(Popover.Dropdown, {
|
|
114
|
-
className: cx("nowheel nopan nodrag", vstack({
|
|
115
|
-
margin: "xs",
|
|
116
|
-
layerStyle: "likec4.dropdown",
|
|
117
|
-
gap: "md",
|
|
118
|
-
padding: "md",
|
|
119
|
-
paddingBottom: "lg",
|
|
120
|
-
pointerEvents: "all",
|
|
121
|
-
maxWidth: "calc(100cqw - 52px)",
|
|
122
|
-
minWidth: "200px",
|
|
123
|
-
maxHeight: "calc(100cqh - 100px)",
|
|
124
|
-
width: "max-content",
|
|
125
|
-
cursor: "default",
|
|
126
|
-
overflow: "auto",
|
|
127
|
-
overscrollBehavior: "contain",
|
|
128
|
-
"@/sm": {
|
|
129
|
-
minWidth: 400,
|
|
130
|
-
maxWidth: 550
|
|
131
|
-
},
|
|
132
|
-
"@/lg": { maxWidth: 700 }
|
|
133
|
-
})),
|
|
134
|
-
children: [
|
|
135
|
-
/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Text, {
|
|
136
|
-
component: "div",
|
|
137
|
-
fw: 500,
|
|
138
|
-
size: "xl",
|
|
139
|
-
lh: "sm",
|
|
140
|
-
children: title
|
|
141
|
-
}), /* @__PURE__ */ jsxs(HStack, {
|
|
142
|
-
alignItems: "flex-start",
|
|
143
|
-
mt: "1",
|
|
144
|
-
children: [/* @__PURE__ */ jsx(ViewBadge, {
|
|
145
|
-
label: "id",
|
|
146
|
-
value: id
|
|
147
|
-
}), /* @__PURE__ */ jsx(HStack, {
|
|
148
|
-
gap: "xs",
|
|
149
|
-
flexWrap: "wrap",
|
|
150
|
-
children: tags.map((tag) => /* @__PURE__ */ jsx(ElementTag, {
|
|
151
|
-
tag,
|
|
152
|
-
cursor: "pointer",
|
|
153
|
-
onClick: (e) => {
|
|
154
|
-
e.stopPropagation();
|
|
155
|
-
diagram.openSearch(`#${tag}`);
|
|
156
|
-
}
|
|
157
|
-
}, tag))
|
|
158
|
-
})]
|
|
159
|
-
})] }),
|
|
160
|
-
links.length > 0 && /* @__PURE__ */ jsxs("section", {
|
|
161
|
-
className: hstack({ alignItems: "baseline" }),
|
|
162
|
-
children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Links" }), /* @__PURE__ */ jsx(HStack, {
|
|
163
|
-
gap: "xs",
|
|
164
|
-
flexWrap: "wrap",
|
|
165
|
-
children: links.map((link, i) => /* @__PURE__ */ jsx(Link, { value: link }, `${i}-${link.url}`))
|
|
166
|
-
})]
|
|
167
|
-
}),
|
|
168
|
-
description.isEmpty && /* @__PURE__ */ jsx(Text, {
|
|
169
|
-
component: "div",
|
|
170
|
-
fw: 500,
|
|
171
|
-
size: "xs",
|
|
172
|
-
c: "dimmed",
|
|
173
|
-
style: { userSelect: "none" },
|
|
174
|
-
children: "No description"
|
|
175
|
-
}),
|
|
176
|
-
description.nonEmpty && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(SectionHeader, { children: "Description" }), /* @__PURE__ */ jsx(Markdown, {
|
|
177
|
-
value: description,
|
|
178
|
-
fontSize: "sm",
|
|
179
|
-
emptyText: "No description",
|
|
180
|
-
className: css({ userSelect: "all" })
|
|
181
|
-
})] })
|
|
182
|
-
]
|
|
183
|
-
});
|
|
184
|
-
};
|
|
185
|
-
var ViewBadge = ({ label, value }) => {
|
|
186
|
-
return /* @__PURE__ */ jsxs(HStack, {
|
|
187
|
-
gap: "0.5",
|
|
188
|
-
children: [/* @__PURE__ */ jsx(ViewBadgeLabel, { children: label }), /* @__PURE__ */ jsx(Badge, {
|
|
189
|
-
size: "sm",
|
|
190
|
-
radius: "sm",
|
|
191
|
-
variant: "light",
|
|
192
|
-
color: "gray",
|
|
193
|
-
tt: "none",
|
|
194
|
-
fw: 500,
|
|
195
|
-
classNames: {
|
|
196
|
-
root: css({
|
|
197
|
-
width: "max-content",
|
|
198
|
-
overflow: "visible",
|
|
199
|
-
px: "1",
|
|
200
|
-
color: {
|
|
201
|
-
_dark: "mantine.gray[4]",
|
|
202
|
-
_light: "mantine.gray[8]"
|
|
203
|
-
}
|
|
204
|
-
}),
|
|
205
|
-
label: css({ overflow: "visible" }),
|
|
206
|
-
section: css({
|
|
207
|
-
opacity: .5,
|
|
208
|
-
userSelect: "none",
|
|
209
|
-
marginInlineEnd: "0.5"
|
|
210
|
-
})
|
|
211
|
-
},
|
|
212
|
-
children: value
|
|
213
|
-
})]
|
|
214
|
-
});
|
|
215
|
-
};
|
|
216
|
-
var ViewBadgeLabel = styled("div", { base: {
|
|
217
|
-
color: "text.dimmed",
|
|
218
|
-
fontWeight: "medium",
|
|
219
|
-
fontSize: "xxs",
|
|
220
|
-
userSelect: "none"
|
|
221
|
-
} });
|
|
222
|
-
//#endregion
|
|
223
|
-
export { DetailsControls };
|