@likec4/diagram 1.21.1 → 1.22.0
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/LikeC4Diagram.js +9 -13
- package/dist/base/index.d.ts +0 -1
- package/dist/base/primitives/element/styles.css.js +1 -1
- package/dist/{base → components}/Link.css.js +3 -3
- package/dist/components/SearchControl.css.d.ts +2 -0
- package/dist/components/SearchControl.css.js +7 -0
- package/dist/components/SearchControl.d.ts +5 -0
- package/dist/components/SearchControl.js +17 -0
- package/dist/context/IconRenderer.d.ts +10 -0
- package/dist/context/IconRenderer.js +34 -0
- package/dist/hooks/useCurrentViewId.js +8 -0
- package/dist/hooks/useDiagram.d.ts +4 -4
- package/dist/likec4diagram/DiagramUI.js +0 -2
- package/dist/likec4diagram/XYFlow.d.ts +6 -1
- package/dist/likec4diagram/XYFlow.js +28 -29
- package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js +2 -1
- package/dist/likec4diagram/state/actorContext.d.ts +16 -16
- package/dist/likec4diagram/state/assign.js +1 -1
- package/dist/likec4diagram/state/machine.d.ts +7 -7
- package/dist/likec4diagram/state/machine.js +10 -7
- package/dist/likec4diagram/ui/controls/Controls.js +63 -48
- package/dist/likec4diagram/ui/controls/NavigationButtons.js +44 -69
- package/dist/likec4diagram/ui/controls/_shared.js +1 -1
- package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js +1 -1
- package/dist/likec4diagram/ui/search/ElementsColumn.css.d.ts +15 -0
- package/dist/likec4diagram/ui/search/ElementsColumn.css.js +30 -0
- package/dist/likec4diagram/ui/search/ElementsColumn.d.ts +1 -0
- package/dist/likec4diagram/ui/search/ElementsColumn.js +243 -0
- package/dist/likec4diagram/ui/search/LikeC4Search.css.d.ts +8 -0
- package/dist/likec4diagram/ui/search/LikeC4Search.css.js +20 -0
- package/dist/likec4diagram/ui/search/LikeC4Search.d.ts +1 -0
- package/dist/likec4diagram/ui/search/LikeC4Search.js +265 -0
- package/dist/likec4diagram/ui/search/SearchInput.d.ts +1 -0
- package/dist/likec4diagram/ui/search/SearchInput.js +196 -0
- package/dist/likec4diagram/ui/search/ViewsColum.d.ts +9 -0
- package/dist/likec4diagram/ui/search/ViewsColum.js +130 -0
- package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts +5 -0
- package/dist/likec4diagram/ui/search/ViewsColumn.css.js +12 -0
- package/dist/likec4diagram/ui/search/_shared.css.d.ts +16 -0
- package/dist/likec4diagram/ui/search/_shared.css.js +5 -0
- package/dist/likec4diagram/ui/search/state.d.ts +19 -0
- package/dist/likec4diagram/ui/search/state.js +72 -0
- package/dist/likec4diagram/ui/search/utils.d.ts +3 -0
- package/dist/likec4diagram/ui/search/utils.js +23 -0
- package/dist/likec4diagram/useLayoutConstraints.js +4 -5
- package/dist/likec4model/useLikeC4ElementsTree.d.ts +1 -0
- package/dist/likec4model/useLikeC4ElementsTree.js +1 -0
- package/dist/overlays/Overlays.js +9 -9
- package/dist/overlays/element-details/ElementDetailsCard.js +20 -13
- package/dist/overlays/overlay/Overlay.d.ts +6 -2
- package/dist/overlays/overlay/Overlay.js +18 -29
- package/dist/overlays/relationship-details/SelectEdge.js +1 -3
- package/dist/overlays/relationships-browser/RelationshipsBrowser.js +6 -5
- package/dist/overlays/relationships-browser/SelectElement.js +10 -6
- package/dist/overlays/relationships-browser/actor.d.ts +2 -2
- package/dist/overlays/relationships-browser/actor.js +8 -8
- package/dist/overlays/relationships-browser/custom/nodeTypes.js +2 -2
- package/dist/style.css +1 -1
- package/package.json +13 -12
- package/src/LikeC4Diagram.tsx +0 -1
- package/src/base/index.ts +0 -2
- package/src/base/primitives/element/styles.css.ts +2 -2
- package/src/{base → components}/Link.css.ts +3 -3
- package/src/components/SearchControl.css.ts +69 -0
- package/src/components/SearchControl.tsx +33 -0
- package/src/context/IconRenderer.tsx +54 -1
- package/src/globals.css.ts +0 -2
- package/src/likec4diagram/DiagramUI.tsx +0 -4
- package/src/likec4diagram/XYFlow.tsx +30 -30
- package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx +2 -1
- package/src/likec4diagram/state/assign.ts +1 -1
- package/src/likec4diagram/state/machine.ts +12 -10
- package/src/likec4diagram/ui/controls/Controls.tsx +35 -25
- package/src/likec4diagram/ui/controls/NavigationButtons.tsx +36 -58
- package/src/likec4diagram/ui/controls/styles.css.ts +3 -1
- package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx +1 -1
- package/src/likec4diagram/ui/search/ElementsColumn.css.ts +119 -0
- package/src/likec4diagram/ui/search/ElementsColumn.tsx +291 -0
- package/src/likec4diagram/ui/search/LikeC4Search.css.ts +117 -0
- package/src/likec4diagram/ui/search/LikeC4Search.tsx +312 -0
- package/src/likec4diagram/ui/search/SearchInput.tsx +235 -0
- package/src/likec4diagram/ui/search/ViewsColum.tsx +158 -0
- package/src/likec4diagram/ui/search/ViewsColumn.css.ts +37 -0
- package/src/likec4diagram/ui/search/_shared.css.ts +104 -0
- package/src/likec4diagram/ui/search/state.ts +76 -0
- package/src/likec4diagram/ui/search/utils.ts +20 -0
- package/src/likec4diagram/useLayoutConstraints.ts +4 -5
- package/src/likec4model/useLikeC4ElementsTree.ts +4 -4
- package/src/overlays/Overlays.tsx +31 -25
- package/src/overlays/element-details/ElementDetailsCard.css.ts +4 -4
- package/src/overlays/element-details/ElementDetailsCard.tsx +245 -240
- package/src/overlays/overlay/Overlay.css.ts +10 -9
- package/src/overlays/overlay/Overlay.tsx +38 -26
- package/src/overlays/relationship-details/SelectEdge.css.ts +1 -0
- package/src/overlays/relationship-details/SelectEdge.tsx +2 -4
- package/src/overlays/relationships-browser/RelationshipsBrowser.tsx +10 -5
- package/src/overlays/relationships-browser/SelectElement.tsx +88 -82
- package/src/overlays/relationships-browser/actor.ts +10 -10
- package/src/overlays/relationships-browser/custom/nodeTypes.tsx +2 -2
- package/dist/LikeC4Search.css.d.ts +0 -1
- package/dist/LikeC4Search.css.js +0 -5
- package/dist/LikeC4Search.d.ts +0 -2
- package/dist/LikeC4Search.js +0 -88
- package/src/LikeC4Search.css.ts +0 -12
- package/src/LikeC4Search.tsx +0 -91
- /package/dist/{base → components}/Link.css.d.ts +0 -0
- /package/dist/{base → components}/Link.d.ts +0 -0
- /package/dist/{base → components}/Link.js +0 -0
- /package/src/{base → components}/Link.tsx +0 -0
package/src/LikeC4Search.tsx
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { rem } from '@mantine/core'
|
|
2
|
-
import { type SpotlightActionData, Spotlight } from '@mantine/spotlight'
|
|
3
|
-
import { IconRectangularPrism, IconSearch, IconSitemap, IconStack2 } from '@tabler/icons-react'
|
|
4
|
-
import { memo, useMemo } from 'react'
|
|
5
|
-
import { filter, map, pipe } from 'remeda'
|
|
6
|
-
import { useMantinePortalProps } from './hooks'
|
|
7
|
-
import { useDiagram } from './hooks/useDiagram'
|
|
8
|
-
import { useDiagramContext } from './hooks/useDiagramContext'
|
|
9
|
-
import { useLikeC4Model } from './likec4model'
|
|
10
|
-
import * as css from './LikeC4Search.css'
|
|
11
|
-
|
|
12
|
-
export const LikeC4Search = memo(() => {
|
|
13
|
-
const view = useDiagramContext(s => s.view)
|
|
14
|
-
const model = useLikeC4Model(true)
|
|
15
|
-
const diagram = useDiagram()
|
|
16
|
-
|
|
17
|
-
const getNodeActionsData = (): SpotlightActionData[] => {
|
|
18
|
-
return pipe(
|
|
19
|
-
view.nodes,
|
|
20
|
-
filter(n => !!n.title),
|
|
21
|
-
map(n => ({
|
|
22
|
-
id: n.id,
|
|
23
|
-
label: n.title,
|
|
24
|
-
...(n.description && {
|
|
25
|
-
description: n.description,
|
|
26
|
-
}),
|
|
27
|
-
keywords: [
|
|
28
|
-
n.title,
|
|
29
|
-
...(n.tags ?? []).map(t => `#${t}`),
|
|
30
|
-
...(n.description ? [n.description] : []),
|
|
31
|
-
].filter(k => k.toLowerCase()),
|
|
32
|
-
onClick: () => diagram.focusNode(n.id),
|
|
33
|
-
leftSection: <IconRectangularPrism />,
|
|
34
|
-
})),
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const getViewActionsData = (): SpotlightActionData[] => {
|
|
39
|
-
const views = [...model.views()]
|
|
40
|
-
|
|
41
|
-
return map(views, v => ({
|
|
42
|
-
id: v.id,
|
|
43
|
-
label: v.title ?? v.id,
|
|
44
|
-
...(v.$view.description && {
|
|
45
|
-
description: v.$view.description,
|
|
46
|
-
}),
|
|
47
|
-
keywords: [
|
|
48
|
-
v.title ?? v.id,
|
|
49
|
-
...(v.tags ?? []),
|
|
50
|
-
...(v.$view.description ? [v.$view.description] : []),
|
|
51
|
-
],
|
|
52
|
-
onClick: () => {
|
|
53
|
-
diagram.navigateTo(v.id)
|
|
54
|
-
},
|
|
55
|
-
leftSection: v.isDeploymentView()
|
|
56
|
-
? <IconStack2 />
|
|
57
|
-
: <IconSitemap />,
|
|
58
|
-
}))
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
const actions = useMemo(() => [
|
|
62
|
-
{
|
|
63
|
-
group: 'Elements',
|
|
64
|
-
actions: getNodeActionsData(),
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
group: 'Views',
|
|
68
|
-
actions: getViewActionsData(),
|
|
69
|
-
},
|
|
70
|
-
], [model, diagram, view])
|
|
71
|
-
|
|
72
|
-
const portalProps = useMantinePortalProps()
|
|
73
|
-
return (
|
|
74
|
-
<Spotlight
|
|
75
|
-
{...portalProps}
|
|
76
|
-
actions={actions}
|
|
77
|
-
nothingFound="Nothing found..."
|
|
78
|
-
shortcut={['mod + f', 'mod + k']}
|
|
79
|
-
scrollable
|
|
80
|
-
highlightQuery
|
|
81
|
-
maxHeight={350}
|
|
82
|
-
classNames={{
|
|
83
|
-
actionSection: css.actionSection,
|
|
84
|
-
}}
|
|
85
|
-
searchProps={{
|
|
86
|
-
leftSection: <IconSearch style={{ width: rem(18), height: rem(18) }} stroke={1.5} />,
|
|
87
|
-
placeholder: 'Search elements and views...',
|
|
88
|
-
}}
|
|
89
|
-
/>
|
|
90
|
-
)
|
|
91
|
-
})
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|