@likec4/diagram 1.21.1 → 1.22.1

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