@likec4/diagram 1.21.1 → 1.22.1

package/src/likec4diagram/ui/search/ViewsColumn.css.ts

@@ -0,0 +1,37 @@
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { button, description, descriptionColor, iconColor, title } from './_shared.css'
+
+export { focusable } from './_shared.css'
+
+export const viewButton = style([button, {
+  flexWrap: 'nowrap',
+  display: 'flex',
+}])
+
+globalStyle(`${viewButton} .mantine-ThemeIcon-root`, {
+  // transition: transitions.fast,
+  color: fallbackVar(iconColor, mantine.colors.dark[2]),
+  vars: {
+    '--ti-size': '24px',
+  },
+})
+globalStyle(`${viewButton}[data-disabled] .mantine-ThemeIcon-root`, {
+  opacity: 0.45,
+})
+
+export const viewTitle = style([title])
+export const viewDescription = style([description])
+
+export const viewButtonDescription = style({
+  marginTop: 4,
+  // transition: transitions.fast,
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 13,
+  lineHeight: 1.4,
+  selectors: {
+    [`:where(${viewButton}[data-disabled]) &`]: {
+      opacity: 0.85,
+    },
+  },
+})

package/src/likec4diagram/ui/search/_shared.css.ts

@@ -0,0 +1,104 @@
+import { type StyleRule, createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { whereDark, whereLight } from '../../../theme-vars.css'
+
+export const titleColor = createVar('title-color')
+export const descriptionColor = createVar('description-color')
+export const iconColor = createVar('icon-color')
+
+export const buttonFocused = {
+  outline: 'none',
+  backgroundColor: mantine.colors.primaryColors[8],
+  borderColor: mantine.colors.primaryColors[9],
+  vars: {
+    [iconColor]: mantine.colors.primaryColors[2],
+    [titleColor]: mantine.colors.primaryColors[0],
+    [descriptionColor]: mantine.colors.primaryColors[1],
+  },
+} satisfies StyleRule
+
+export const button = style({
+  display: 'flex',
+  width: '100%',
+  background: mantine.colors.body,
+  borderRadius: mantine.radius.sm,
+  padding: `12px 8px 12px 14px`,
+  minHeight: 60,
+  gap: 10,
+  // alignItems: 'flex-start',
+  // transition: `all 50ms ${easings.inOut}`,
+  border: `1px solid ${mantine.colors.defaultBorder}`,
+  vars: {
+    [titleColor]: mantine.colors.dark[1],
+    [iconColor]: mantine.colors.dimmed,
+    [descriptionColor]: mantine.colors.dimmed,
+  },
+  ':hover': {
+    ...buttonFocused,
+    borderColor: mantine.colors.primaryColors[9],
+    backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
+  },
+  ':focus': buttonFocused,
+  selectors: {
+    [`${whereDark} &`]: {
+      borderColor: 'transparent',
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`,
+      // background: mantine.colors.dark[6],
+    },
+    [`${whereLight} &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.white}, transparent 10%)`,
+      vars: {
+        [iconColor]: mantine.colors.gray[6],
+        [titleColor]: mantine.colors.gray[7],
+      },
+    },
+    [`${whereLight} &:hover`]: {
+      borderColor: mantine.colors.primaryColors[6],
+      backgroundColor: mantine.colors.primaryColors[5],
+      vars: {
+        [iconColor]: mantine.colors.primaryColors[3],
+        [titleColor]: mantine.colors.primaryColors[0],
+        [descriptionColor]: mantine.colors.primaryColors[1],
+      },
+    },
+  },
+})
+
+export const focusable = style({})
+
+export const title = style({
+  color: fallbackVar(titleColor, mantine.colors.gray[7]),
+  fontSize: 16,
+  fontWeight: 500,
+  lineHeight: 1.1,
+  selectors: {
+    [`:where([data-disabled]) &`]: {
+      opacity: 0.4,
+    },
+  },
+})
+export const description = style({
+  marginTop: 4,
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 12,
+  lineHeight: 1.4,
+  selectors: {
+    [`:where([data-disabled]) &`]: {
+      opacity: 0.85,
+    },
+  },
+})
+
+export const emptyBoX = style({
+  width: '100%',
+  height: '100%',
+  border: `2px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.md,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: mantine.fontSizes.md,
+  color: mantine.colors.dimmed,
+  padding: mantine.spacing.md,
+  paddingBlock: mantine.spacing.xl,
+})

package/src/likec4diagram/ui/search/state.ts

@@ -0,0 +1,76 @@
+import { type Fqn, type LikeC4Model, type ViewId, DiagramNode } from '@likec4/core'
+import { createSafeContext } from '@mantine/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { useStore } from '@nanostores/react'
+import { atom, computed, onMount } from 'nanostores'
+import { useDeferredValue } from 'react'
+import { useDiagram } from '../../../hooks/useDiagram'
+
+const $search = atom('')
+
+export function setSearch(term: string) {
+  $search.set(term)
+}
+
+export function useSearch() {
+  return useStore($search)
+}
+
+const $normalizedSearch = computed($search, search => {
+  const v = search.trim().toLowerCase()
+  return v.length > 1 ? v : ''
+})
+export function useNormalizedSearch() {
+  return useDeferredValue(useStore($normalizedSearch))
+}
+
+export const [LikeC4SearchContext, useCloseSearch] = createSafeContext<(cb?: () => void) => void>('LikeC4Search')
+
+type PickView = {
+  elementFqn: Fqn
+  scoped: LikeC4Model.View[]
+  others: LikeC4Model.View[]
+}
+const $pickView = atom<PickView | null>(null)
+onMount($search, () => {
+  // reset search on mount
+  $pickView.set(null)
+})
+
+export function usePickView() {
+  return useStore($pickView)
+}
+export function setPickView(data: PickView | null) {
+  $pickView.set(data)
+}
+export function wasResetPickView() {
+  if ($pickView.get() !== null) {
+    $pickView.set(null)
+    return true
+  }
+  return false
+}
+
+const $pickViewActive = computed($pickView, pickView => pickView !== null)
+export function useIsPickViewActive() {
+  return useStore($pickViewActive)
+}
+
+export function useCloseSearchAndNavigateTo() {
+  const diagram = useDiagram()
+  const close = useCloseSearch()
+  return useCallbackRef((viewId: ViewId, fromElementFqn?: Fqn) => {
+    close(() => {
+      fromElementFqn ??= $pickView.get()?.elementFqn
+      setPickView(null)
+      const fromNode = fromElementFqn
+        ? diagram.getContext().view.nodes.find(n => DiagramNode.modelRef(n) === fromElementFqn)?.id
+        : undefined
+      if (diagram.currentView().id === viewId && fromNode) {
+        diagram.focusNode(fromNode)
+        return
+      }
+      diagram.navigateTo(viewId, fromNode)
+    })
+  })
+}

package/src/likec4diagram/ui/search/utils.ts

@@ -0,0 +1,20 @@
+export function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+  return
+}
+
+export function centerY(element: HTMLElement) {
+  const rect = element.getBoundingClientRect()
+  const y = rect.y + Math.floor(rect.height / 2)
+  return y
+}
+
+export function moveFocusToSearchInput() {
+  const input = document.getElementById('likec4searchinput') as HTMLInputElement | null
+  if (input) {
+    const length = input.value.length
+    input.focus()
+    input.setSelectionRange(length, length)
+  }
+}

package/src/likec4diagram/useLayoutConstraints.ts

@@ -5,7 +5,6 @@ import { useMemo, useRef } from 'react'
 import { filter, hasAtLeast, isNullish, map, pipe } from 'remeda'
 import { type XYStoreApi, useXYStoreApi } from '../hooks'
 // import { type XYStoreApi } from '../hooks/useXYFlow'
-import { useSyncedRef } from '@react-hookz/web'
 import { useDiagram } from '../hooks/useDiagram'
 import type { Types } from './types'
 
@@ -255,11 +254,11 @@ type LayoutConstraints = {
  */
 export function useLayoutConstraints(): LayoutConstraints {
   const xystore = useXYStoreApi()
-  const diagram = useSyncedRef(useDiagram())
+  const diagram = useDiagram()
   const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>(undefined)
   return useMemo((): LayoutConstraints => ({
     onNodeDragStart: (_event, xynode) => {
-      diagram.current.cancelSaveManualLayout()
+      diagram.cancelSaveManualLayout()
       const { nodeLookup } = xystore.getState()
       const draggingNodes = pipe(
         Array.from(nodeLookup.values()),
@@ -280,9 +279,9 @@ export function useLayoutConstraints(): LayoutConstraints {
     },
     onNodeDragStop: () => {
       solverRef.current?.updateXYFlowNodes()
-      diagram.current.scheduleSaveManualLayout()
+      diagram.scheduleSaveManualLayout()
       // diagramApi.getState().scheduleSaveManualLayout()
       solverRef.current = undefined
     },
-  }), [xystore])
+  }), [xystore, diagram])
 }

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -1,4 +1,4 @@
-import { compareNatural, type Fqn, type LikeC4Model, type ViewId } from '@likec4/core'
+import { type Fqn, type LikeC4Model, type ViewId, compareNatural } from '@likec4/core'
 import { useMemo } from 'react'
 import { useLikeC4Model } from './useLikeC4Model'
 
@@ -8,15 +8,15 @@ interface LikeC4ModelTreeNodeData {
   children: LikeC4ModelTreeNodeData[]
 }
 
-const sortByLabel = (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => compareNatural(a.label, b.label)
+export const sortByLabel = (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => compareNatural(a.label, b.label)
 
 function buildNode(
-  element: LikeC4Model.Node | LikeC4Model.Element
+  element: LikeC4Model.Node | LikeC4Model.Element,
 ): LikeC4ModelTreeNodeData {
   return {
     label: element.title,
     value: element.id,
-    children: [...element.children()].map(buildNode).sort(sortByLabel)
+    children: [...element.children()].map(buildNode).sort(sortByLabel),
   }
 }
 

package/src/overlays/Overlays.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Code, Group, Notification } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
 import { deepEqual } from 'fast-equals'
-import { useReducedMotion } from 'framer-motion'
+import { AnimatePresence, useReducedMotion } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
@@ -96,32 +96,38 @@ export const Overlays = memo(() => {
   return (
     <DiagramFeatures.Overlays>
       <ErrorBoundary FallbackComponent={Fallback} onReset={onClose}>
-        {relationshipsBrowserActor && (
-          <Overlay
-            key={'relationships-browser'}
-            onClose={onClose}>
-            <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
-          </Overlay>
-        )}
-        {relationshipDetailsActor && (
-          <Overlay
-            key={'relationship-details'}
-            onClose={onClose}>
-            <RelationshipDetails actorRef={relationshipDetailsActor} />
-          </Overlay>
-        )}
+        <AnimatePresence onExitComplete={onClose}>
+          {relationshipsBrowserActor && (
+            <Overlay
+              key={'relationships-browser'}
+              onClose={() => relationshipsBrowserActor.send({ type: 'close' })}>
+              <RelationshipsBrowser actorRef={relationshipsBrowserActor} />
+            </Overlay>
+          )}
+        </AnimatePresence>
+        <AnimatePresence onExitComplete={onClose}>
+          {relationshipDetailsActor && (
+            <Overlay
+              key={'relationship-details'}
+              onClose={() => relationshipDetailsActor.send({ type: 'close' })}>
+              <RelationshipDetails actorRef={relationshipDetailsActor} />
+            </Overlay>
+          )}
+        </AnimatePresence>
 
         {/* TODO: Somehow ElementDetailsCard does not work properly inside AnimatePresence} */}
-        {!!activeElementDetailsOf && (
-          <ElementDetailsCard
-            key={'element-details'}
-            fqn={activeElementDetailsOf}
-            viewId={viewId}
-            fromNode={fromNode}
-            rectFromNode={rectFromNode}
-            onClose={onClose}
-          />
-        )}
+        <AnimatePresence>
+          {!!activeElementDetailsOf && (
+            <ElementDetailsCard
+              key={'element-details'}
+              fqn={activeElementDetailsOf}
+              viewId={viewId}
+              fromNode={fromNode}
+              rectFromNode={rectFromNode}
+              onClose={onClose}
+            />
+          )}
+        </AnimatePresence>
       </ErrorBoundary>
     </DiagramFeatures.Overlays>
   )

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -11,10 +11,10 @@ export const dialog = style({
   padding: 0,
   position: 'fixed',
   inset: 0,
-  width: '100%',
-  height: '100%',
-  maxWidth: '100%',
-  maxHeight: '100%',
+  width: '100vw',
+  height: '100vh',
+  maxWidth: '100vw',
+  maxHeight: '100vh',
   background: 'transparent',
   border: '0 solid transparent',
   vars: {