@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.
Files changed (109) hide show
  1. package/dist/LikeC4Diagram.js +9 -13
  2. package/dist/base/index.d.ts +0 -1
  3. package/dist/base/primitives/element/styles.css.js +1 -1
  4. package/dist/{base → components}/Link.css.js +3 -3
  5. package/dist/components/SearchControl.css.d.ts +2 -0
  6. package/dist/components/SearchControl.css.js +7 -0
  7. package/dist/components/SearchControl.d.ts +5 -0
  8. package/dist/components/SearchControl.js +17 -0
  9. package/dist/context/IconRenderer.d.ts +10 -0
  10. package/dist/context/IconRenderer.js +34 -0
  11. package/dist/hooks/useCurrentViewId.js +8 -0
  12. package/dist/hooks/useDiagram.d.ts +4 -4
  13. package/dist/likec4diagram/DiagramUI.js +0 -2
  14. package/dist/likec4diagram/XYFlow.d.ts +6 -1
  15. package/dist/likec4diagram/XYFlow.js +28 -29
  16. package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js +2 -1
  17. package/dist/likec4diagram/state/actorContext.d.ts +16 -16
  18. package/dist/likec4diagram/state/assign.js +1 -1
  19. package/dist/likec4diagram/state/machine.d.ts +7 -7
  20. package/dist/likec4diagram/state/machine.js +10 -7
  21. package/dist/likec4diagram/ui/controls/Controls.js +63 -48
  22. package/dist/likec4diagram/ui/controls/NavigationButtons.js +44 -69
  23. package/dist/likec4diagram/ui/controls/_shared.js +1 -1
  24. package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js +1 -1
  25. package/dist/likec4diagram/ui/search/ElementsColumn.css.d.ts +15 -0
  26. package/dist/likec4diagram/ui/search/ElementsColumn.css.js +30 -0
  27. package/dist/likec4diagram/ui/search/ElementsColumn.d.ts +1 -0
  28. package/dist/likec4diagram/ui/search/ElementsColumn.js +243 -0
  29. package/dist/likec4diagram/ui/search/LikeC4Search.css.d.ts +8 -0
  30. package/dist/likec4diagram/ui/search/LikeC4Search.css.js +20 -0
  31. package/dist/likec4diagram/ui/search/LikeC4Search.d.ts +1 -0
  32. package/dist/likec4diagram/ui/search/LikeC4Search.js +265 -0
  33. package/dist/likec4diagram/ui/search/SearchInput.d.ts +1 -0
  34. package/dist/likec4diagram/ui/search/SearchInput.js +196 -0
  35. package/dist/likec4diagram/ui/search/ViewsColum.d.ts +9 -0
  36. package/dist/likec4diagram/ui/search/ViewsColum.js +130 -0
  37. package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts +5 -0
  38. package/dist/likec4diagram/ui/search/ViewsColumn.css.js +12 -0
  39. package/dist/likec4diagram/ui/search/_shared.css.d.ts +16 -0
  40. package/dist/likec4diagram/ui/search/_shared.css.js +5 -0
  41. package/dist/likec4diagram/ui/search/state.d.ts +19 -0
  42. package/dist/likec4diagram/ui/search/state.js +72 -0
  43. package/dist/likec4diagram/ui/search/utils.d.ts +3 -0
  44. package/dist/likec4diagram/ui/search/utils.js +23 -0
  45. package/dist/likec4diagram/useLayoutConstraints.js +4 -5
  46. package/dist/likec4model/useLikeC4ElementsTree.d.ts +1 -0
  47. package/dist/likec4model/useLikeC4ElementsTree.js +1 -0
  48. package/dist/overlays/Overlays.js +9 -9
  49. package/dist/overlays/element-details/ElementDetailsCard.js +20 -13
  50. package/dist/overlays/overlay/Overlay.d.ts +6 -2
  51. package/dist/overlays/overlay/Overlay.js +18 -29
  52. package/dist/overlays/relationship-details/SelectEdge.js +1 -3
  53. package/dist/overlays/relationships-browser/RelationshipsBrowser.js +6 -5
  54. package/dist/overlays/relationships-browser/SelectElement.js +10 -6
  55. package/dist/overlays/relationships-browser/actor.d.ts +2 -2
  56. package/dist/overlays/relationships-browser/actor.js +8 -8
  57. package/dist/overlays/relationships-browser/custom/nodeTypes.js +2 -2
  58. package/dist/style.css +1 -1
  59. package/package.json +13 -12
  60. package/src/LikeC4Diagram.tsx +0 -1
  61. package/src/base/index.ts +0 -2
  62. package/src/base/primitives/element/styles.css.ts +2 -2
  63. package/src/{base → components}/Link.css.ts +3 -3
  64. package/src/components/SearchControl.css.ts +69 -0
  65. package/src/components/SearchControl.tsx +33 -0
  66. package/src/context/IconRenderer.tsx +54 -1
  67. package/src/globals.css.ts +0 -2
  68. package/src/likec4diagram/DiagramUI.tsx +0 -4
  69. package/src/likec4diagram/XYFlow.tsx +30 -30
  70. package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx +2 -1
  71. package/src/likec4diagram/state/assign.ts +1 -1
  72. package/src/likec4diagram/state/machine.ts +12 -10
  73. package/src/likec4diagram/ui/controls/Controls.tsx +35 -25
  74. package/src/likec4diagram/ui/controls/NavigationButtons.tsx +36 -58
  75. package/src/likec4diagram/ui/controls/styles.css.ts +3 -1
  76. package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx +1 -1
  77. package/src/likec4diagram/ui/search/ElementsColumn.css.ts +119 -0
  78. package/src/likec4diagram/ui/search/ElementsColumn.tsx +291 -0
  79. package/src/likec4diagram/ui/search/LikeC4Search.css.ts +117 -0
  80. package/src/likec4diagram/ui/search/LikeC4Search.tsx +312 -0
  81. package/src/likec4diagram/ui/search/SearchInput.tsx +235 -0
  82. package/src/likec4diagram/ui/search/ViewsColum.tsx +158 -0
  83. package/src/likec4diagram/ui/search/ViewsColumn.css.ts +37 -0
  84. package/src/likec4diagram/ui/search/_shared.css.ts +104 -0
  85. package/src/likec4diagram/ui/search/state.ts +76 -0
  86. package/src/likec4diagram/ui/search/utils.ts +20 -0
  87. package/src/likec4diagram/useLayoutConstraints.ts +4 -5
  88. package/src/likec4model/useLikeC4ElementsTree.ts +4 -4
  89. package/src/overlays/Overlays.tsx +31 -25
  90. package/src/overlays/element-details/ElementDetailsCard.css.ts +4 -4
  91. package/src/overlays/element-details/ElementDetailsCard.tsx +245 -240
  92. package/src/overlays/overlay/Overlay.css.ts +10 -9
  93. package/src/overlays/overlay/Overlay.tsx +38 -26
  94. package/src/overlays/relationship-details/SelectEdge.css.ts +1 -0
  95. package/src/overlays/relationship-details/SelectEdge.tsx +2 -4
  96. package/src/overlays/relationships-browser/RelationshipsBrowser.tsx +10 -5
  97. package/src/overlays/relationships-browser/SelectElement.tsx +88 -82
  98. package/src/overlays/relationships-browser/actor.ts +10 -10
  99. package/src/overlays/relationships-browser/custom/nodeTypes.tsx +2 -2
  100. package/dist/LikeC4Search.css.d.ts +0 -1
  101. package/dist/LikeC4Search.css.js +0 -5
  102. package/dist/LikeC4Search.d.ts +0 -2
  103. package/dist/LikeC4Search.js +0 -88
  104. package/src/LikeC4Search.css.ts +0 -12
  105. package/src/LikeC4Search.tsx +0 -91
  106. /package/dist/{base → components}/Link.css.d.ts +0 -0
  107. /package/dist/{base → components}/Link.d.ts +0 -0
  108. /package/dist/{base → components}/Link.js +0 -0
  109. /package/src/{base → components}/Link.tsx +0 -0
@@ -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