@likec4/diagram 1.31.0 → 1.32.1

package/src/overlays/relationships-browser/layout.ts

@@ -23,9 +23,10 @@ import {
   DefaultMap,
   ifind,
   invariant,
+  nonNullable,
   toArray,
 } from '@likec4/core'
-import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
+import type { ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
 import {
   concat,
   filter,
@@ -216,7 +217,7 @@ export namespace LayoutRelationshipsViewResult {
 
 export function layoutRelationshipsView(
   data: RelationshipsViewData,
-  scope: LikeC4ViewModel<AnyAux> | null,
+  scope: LikeC4ViewModel | null,
 ): Omit<LayoutRelationshipsViewResult, 'subject'> {
   const g = createGraph()
 
@@ -459,12 +460,14 @@ export function layoutRelationshipsView(
       return {
         id: id as NodeId,
         parent: null,
+        x: position.x,
+        y: position.y,
         position: [position.x, position.y],
         title: 'empty node',
         description: null,
         technology: null,
-        tags: null,
-        links: null,
+        tags: [],
+        links: [],
         color: 'muted',
         shape: 'rectangle',
         style: {
@@ -508,11 +511,13 @@ export function layoutRelationshipsView(
     return {
       id: id as NodeId,
       parent: parentId as NodeId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,
@@ -568,7 +573,7 @@ export function layoutRelationshipsView(
         relations,
         sourceHandle,
         targetHandle,
-      } = find(edges, e => e.name === ename)!
+      } = nonNullable(find(edges, e => e.name === ename))
       const onlyRelation = only(relations)
       const label = onlyRelation?.title ?? 'untitled'
       const isMultiple = relations.length > 1
@@ -602,7 +607,7 @@ export function useRelationshipsView(
   viewId: ViewId | null,
   scope: 'global' | 'view',
 ): LayoutRelationshipsViewResult {
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   return useMemo(() => {
     const view = viewId ? model.findView(viewId) : null
     const data = layoutRelationshipsView(

package/src/overlays/relationships-browser/useViewToNodesEdges.ts

@@ -1,7 +1,6 @@
 import {
   type Fqn,
-  DiagramNode,
-  ElementKind,
+  GroupElementKind,
   invariant,
   nonNullable,
   Queue,
@@ -47,7 +46,7 @@ export function viewToNodesEdge(
   let next: TraverseItem | undefined
   while ((next = queue.dequeue())) {
     const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node })
@@ -83,7 +82,7 @@ export function viewToNodesEdge(
       }),
     } satisfies Omit<RelationshipsBrowserTypes.Node, 'data' | 'type'>
 
-    const fqn = DiagramNode.modelRef(node)
+    const fqn = node.modelRef ?? null
     // const deploymentRef = DiagramNode.deploymentRef(node)
     // if (!fqn) {
     //   console.error('Invalid node', node)
@@ -148,6 +147,7 @@ export function viewToNodesEdge(
               ports: node.ports,
               style: node.style,
               existsInCurrentView: node.existsInCurrentView,
+              tags: node.tags,
               ...navigateTo,
             },
           },

package/src/search/Search.tsx

@@ -0,0 +1,220 @@
+import { css } from '@likec4/styles/css'
+import { Box, VStack } from '@likec4/styles/jsx'
+import { Grid, GridCol, Group, ScrollArea, Title } from '@mantine/core'
+import {
+  useCallbackRef,
+  useHotkeys,
+} from '@mantine/hooks'
+import { useTimeoutEffect } from '@react-hookz/web'
+import { useSelector } from '@xstate/react'
+import { AnimatePresence, LayoutGroup } from 'motion/react'
+import { useRef } from 'react'
+import { ErrorBoundary } from 'react-error-boundary'
+import { isTruthy } from 'remeda'
+import { ErrorFallback } from '../components/ErrorFallback'
+import { DiagramFeatures } from '../context/DiagramFeatures'
+import { Overlay } from '../overlays/overlay/Overlay'
+import { ElementsColumn } from './components/ElementsColumn'
+import { PickView } from './components/PickView'
+import { SearchByTags } from './components/SearchByTags'
+import { LikeC4SearchInput } from './components/SearchInput'
+import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils'
+import { ViewsColumn } from './components/ViewsColum'
+import { SearchActorContext, usePickViewFor } from './hooks'
+import { type SearchActorRef, type SearchActorSnapshot } from './searchActor'
+
+const dialog = css({
+  backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
+  _light: {
+    backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]`,
+  },
+  backdropFilter: 'auto',
+  backdropBlur: 'var(--_blur, 10px)',
+  //   base: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+  //   _light: `[rgb(255 255 255/ var(${backdropOpacity}))]`,
+  // },
+})
+
+const body = css({
+  // containerName: 'likec4-search',
+  // containerType: 'size',
+  // position: 'fixed',
+  // zIndex: 901,
+  // top: 0,
+  // left: 0,
+  width: '100%',
+  height: '100%',
+  maxHeight: '100vh',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'stretch',
+  gap: 'sm',
+  paddingTop: 20,
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingBottom: 8,
+  background: '[transparent]',
+  // backgroundColor: {
+  //   _dark: `[rgb(34 34 34 / 0.95)]`,
+  //   _light: `[rgb(255 255 255/ 0.95)]`,
+  // },
+})
+
+const selectIsOpened = (s: SearchActorSnapshot) => !s.matches('inactive')
+
+export function Search({ searchActorRef }: { searchActorRef: SearchActorRef }) {
+  const isOpened = useSelector(searchActorRef, selectIsOpened)
+
+  const openSearch = () => {
+    searchActorRef.send({ type: 'open' })
+  }
+
+  const close = useCallbackRef(() => {
+    searchActorRef.send({ type: 'close' })
+  })
+
+  useHotkeys([
+    ['mod+k', openSearch, {
+      preventDefault: true,
+    }],
+    ['mod+f', openSearch, {
+      preventDefault: true,
+    }],
+  ])
+
+  return (
+    <SearchActorContext value={searchActorRef}>
+      <DiagramFeatures.Overlays>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={close}>
+          <AnimatePresence>
+            {isOpened && (
+              <Overlay
+                fullscreen
+                withBackdrop={false}
+                backdrop={{
+                  opacity: 0.9,
+                }}
+                classes={{
+                  dialog,
+                  body,
+                }}
+                openDelay={0}
+                onClose={close}
+                data-likec4-search="true"
+              >
+                <SearchOverlay searchActorRef={searchActorRef} />
+              </Overlay>
+            )}
+          </AnimatePresence>
+        </ErrorBoundary>
+      </DiagramFeatures.Overlays>
+    </SearchActorContext>
+  )
+}
+
+const scrollArea = css({
+  height: [
+    '100%',
+    '100cqh',
+  ],
+  '& .mantine-ScrollArea-viewport': {
+    minHeight: '100%',
+    '& > div': {
+      minHeight: '100%',
+      height: '100%',
+    },
+  },
+})
+
+const SearchOverlay = ({ searchActorRef }: { searchActorRef: SearchActorRef }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const pickViewFor = usePickViewFor()
+
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement(ref.current)
+    }
+  }, 150)
+
+  return (
+    <Box ref={ref} display={'contents'}>
+      <Group
+        className={'group'}
+        wrap="nowrap"
+        onClick={e => {
+          e.stopPropagation()
+          moveFocusToSearchInput(ref.current)
+        }}>
+        <VStack flex={1} px={'sm'}>
+          <LikeC4SearchInput />
+          <SearchByTags />
+        </VStack>
+        {
+          /* <Box
+          css={{
+            alignSelf: 'flex-start',
+            flex: '0 0 auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: 50,
+          }}>
+          <ActionIcon
+            size={'lg'}
+            variant="default"
+            onClick={(e) => {
+              e.stopPropagation()
+              close()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Box> */
+        }
+      </Group>
+      <Grid>
+        <GridCol span={6}>
+          <Title component={'div'} order={6} c="dimmed" pl="sm">Elements</Title>
+        </GridCol>
+        <GridCol span={6}>
+          <Title component={'div'} order={6} c="dimmed" pl="sm">Views</Title>
+        </GridCol>
+      </Grid>
+      <Grid
+        className={css({
+          containerName: 'likec4-search-elements',
+          containerType: 'size',
+          overflow: 'hidden',
+          flexGrow: 1,
+        })}>
+        <GridCol span={6}>
+          <ScrollArea
+            type="scroll"
+            className={scrollArea}
+            pr="xs"
+            scrollbars="y">
+            <AnimatePresence>
+              <LayoutGroup id="likec4-search-elements">
+                <ElementsColumn />
+              </LayoutGroup>
+            </AnimatePresence>
+          </ScrollArea>
+        </GridCol>
+        <GridCol span={6}>
+          <ScrollArea
+            type="scroll"
+            className={scrollArea}
+            pr="xs"
+            scrollbars="y">
+            <AnimatePresence>
+              <LayoutGroup id="likec4-search-views">
+                <ViewsColumn />
+              </LayoutGroup>
+            </AnimatePresence>
+          </ScrollArea>
+        </GridCol>
+      </Grid>
+      {pickViewFor && <PickView elementFqn={pickViewFor} />}
+    </Box>
+  )
+}

package/src/{likec4diagram/ui/search → search/components}/ElementsColumn.css.ts

@@ -14,7 +14,6 @@ export const treeRoot = css(
     containerName: 'likec4-tree',
   }),
   {
-    overflow: 'hidden',
     containerType: 'inline-size',
     height: '100%',
   },
@@ -65,40 +64,12 @@ export const elementId = css({
   },
 })
 
-// const iconSizeVar = `var(${iconSize}, 32px)`
 export const elementIcon = css({
   ['--likec4-icon-size']: '24px',
   [whenContainerIsNarrow]: {
     ['--likec4-icon-size']: '18px',
   },
 })
-//   flex: `0 0 ${iconSizeVar}`,
-//   height: iconSizeVar,
-//   width: iconSizeVar,
-//   display: 'flex',
-//   alignItems: 'center',
-//   justifyContent: 'center',
-//   alignSelf: 'flex-start',
-//   marginTop: 4,
-//   [`& svg, & img`]: {
-//     width: '100%',
-//     height: 'auto',
-//     maxHeight: '100%',
-//     pointerEvents: 'none',
-//   },
-//   [`& img`]: {
-//     objectFit: 'contain',
-//   },
-//   '&.likec4-shape-icon svg': {
-//     color: `[var(${iconColor})]`,
-//     width: '90%',
-//     strokeWidth: 1.5,
-//   },
-//   [iconSize]: '24px',
-//   [whenContainerIsNarrow]: {
-//     [iconSize]: '18px',
-//   },
-// })
 
 export const elementViewsCount = css({
   flex: 0,

package/src/{likec4diagram/ui/search → search/components}/ElementsColumn.tsx

@@ -1,11 +1,11 @@
 import {
-  type Fqn,
-  type LikeC4Model,
   ifilter,
   isAncestor,
   nameFromFqn,
   sortParentsFirst,
 } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { Fqn } from '@likec4/core/types'
 import { cx, cx as clsx } from '@likec4/styles/css'
 import {
   type RenderTreeNodePayload,
@@ -22,15 +22,16 @@ import {
 import { useCallbackRef } from '@mantine/hooks'
 import { IconChevronRight } from '@tabler/icons-react'
 import * as m from 'motion/react-m'
-import { type KeyboardEventHandler, useCallback, useEffect, useMemo } from 'react'
-import { first, isEmpty, only, partition, pipe, reduce } from 'remeda'
-import { IconOrShapeRenderer } from '../../../context/IconRenderer'
-import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
-import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { type KeyboardEventHandler, memo, useEffect, useMemo } from 'react'
+import { first, isEmpty, only, pipe, reduce } from 'remeda'
+import { IconOrShapeRenderer } from '../../context/IconRenderer'
+import { useDiagram } from '../../hooks/useDiagram'
+import { sortByLabel } from '../../likec4model/useLikeC4ElementsTree'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch, useSearchActor } from '../hooks'
 import { buttonsva } from './_shared.css'
 import * as styles from './ElementsColumn.css'
-import { setPickView, useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
-import { centerY, moveFocusToSearchInput, stopAndPrevent } from './utils'
+import { centerY, moveFocusToSearchInput, queryAllFocusable, stopAndPrevent } from './utils'
 import { NothingFound } from './ViewsColum'
 
 interface LikeC4ModelTreeNodeData {
@@ -56,14 +57,13 @@ function buildNode(
 
 const btn = buttonsva()
 
-export function ElementsColumn() {
+export const ElementsColumn = memo(() => {
+  const model = useLikeC4Model()
   const search = useNormalizedSearch()
-  const model = useLikeC4Model(true)
-
   const data = useMemo(() => {
     const searchTerms = search.split('.')
     let elements
-    if (isEmpty(search) || search === 'kind:') {
+    if (isEmpty(searchTerms) || searchTerms[0] === 'kind:') {
       elements = model.elements()
     } else {
       elements = ifilter(model.elements(), element => {
@@ -120,7 +120,7 @@ export function ElementsColumn() {
   }
 
   return <ElementsTree data={data} handleClick={handleClick} />
-}
+})
 
 const setHoveredNode = () => {}
 
@@ -161,7 +161,7 @@ function ElementsTree({
     if (e.key === 'ArrowUp') {
       if (id === roots[0]?.value) {
         stopAndPrevent(e)
-        moveFocusToSearchInput()
+        moveFocusToSearchInput(target)
       }
       return
     }
@@ -172,9 +172,7 @@ function ElementsTree({
       }
       const label = (e.target as HTMLLIElement).querySelector<HTMLLIElement>('.mantine-Tree-label') ?? target
       const maxY = label.getBoundingClientRect().y
-      const viewButtons = [...document.querySelectorAll<HTMLButtonElement>(
-        `[data-likec4-search-views] .${styles.focusable}`,
-      )]
+      const viewButtons = queryAllFocusable(target, 'views')
       let view = viewButtons.length > 1
         ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
         : null
@@ -254,6 +252,7 @@ function ElementTreeNode(
         component={m.button}
         layout
         tabIndex={-1}
+        data-value={element.id}
         className={clsx(btn.root, 'group', 'likec4-element-button')}
         {...views.length > 0 && {
           onClick: (e) => {
@@ -297,23 +296,23 @@ function ElementTreeNode(
 }
 
 function useHandleElementSelection() {
-  const navigateTo = useCloseSearchAndNavigateTo()
-
-  return useCallback((element: LikeC4Model.Element) => {
+  const diagram = useDiagram()
+  const searchActorRef = useSearchActor()
+  return useCallbackRef((element: LikeC4Model.Element) => {
     const views = [...element.views()]
     if (views.length === 0) {
       return
     }
     const singleView = only(views)
     if (singleView) {
-      navigateTo(singleView.id, element.id)
+      searchActorRef.send({ type: 'close' })
+      if (singleView.id !== diagram.currentView.id) {
+        setTimeout(() => {
+          diagram.navigateTo(singleView.id)
+        }, 100)
+      }
       return
     }
-    const [scoped, others] = partition(views, v => v.viewOf?.id === element.id)
-    setPickView({
-      elementFqn: element.id,
-      scoped,
-      others,
-    })
-  }, [setPickView, navigateTo])
+    searchActorRef.send({ type: 'pickview.open', elementFqn: element.id })
+  })
 }

package/src/search/components/PickView.tsx

@@ -0,0 +1,134 @@
+import type { LikeC4ViewModel } from '@likec4/core/model'
+import type { Fqn } from '@likec4/core/types'
+import { ActionIcon, FocusTrap, Group, ScrollAreaAutosize, Stack, Title } from '@mantine/core'
+import { useWindowEvent } from '@mantine/hooks'
+import { IconX } from '@tabler/icons-react'
+import * as m from 'motion/react-m'
+import { useLikeC4Model } from '../../likec4model'
+import { useSearchActor } from '../hooks'
+import * as styles from './styles.css'
+import { ViewButton } from './ViewsColum'
+
+export function PickView({ elementFqn }: { elementFqn: Fqn }) {
+  const searchActorRef = useSearchActor()
+  const element = useLikeC4Model().element(elementFqn)
+  const scoped = [] as LikeC4ViewModel[]
+  const others = [] as LikeC4ViewModel[]
+
+  for (const view of element.views()) {
+    if (view.viewOf === element) {
+      scoped.push(view)
+    } else {
+      others.push(view)
+    }
+  }
+
+  const closePickView = () => {
+    searchActorRef.send({ type: 'pickview.close' })
+  }
+
+  useWindowEvent(
+    'keydown',
+    (event) => {
+      try {
+        if (event.key === 'Escape') {
+          event.stopPropagation()
+          event.preventDefault()
+          closePickView()
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+    },
+    {
+      capture: true,
+    },
+  )
+
+  return (
+    <>
+      <m.div
+        key="pickview-backdrop"
+        className={styles.pickviewBackdrop}
+        onClick={e => {
+          e.stopPropagation()
+          closePickView()
+        }}>
+      </m.div>
+      <FocusTrap>
+        <m.div
+          key="pickview"
+          initial={{
+            opacity: 0,
+            scale: 0.95,
+            originY: 0,
+            translateX: '-50%',
+            translateY: -20,
+          }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+            translateY: 0,
+          }}
+          exit={{
+            opacity: 0,
+            scale: 0.98,
+            translateY: -20,
+            transition: {
+              duration: 0.1,
+            },
+          }}
+          className={styles.pickview}
+          data-likec4-search-views>
+          <Group px="sm" py="md" justify="space-between">
+            <Title order={2} lh={1}>Select view</Title>
+            <ActionIcon
+              size={'md'}
+              variant="default"
+              onClick={(e) => {
+                e.stopPropagation()
+                closePickView()
+              }}>
+              <IconX />
+            </ActionIcon>
+          </Group>
+          <ScrollAreaAutosize mah={'calc(100vh - 110px)'} type="never">
+            {scoped.length > 0 && (
+              <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
+                <Title order={6} c={'dimmed'}>scoped views of the element</Title>
+                {scoped.map((view, i) => (
+                  <ViewButton
+                    key={view.id}
+                    view={view}
+                    search={''}
+                    loop
+                    mod={{
+                      autofocus: i === 0,
+                    }}
+                  />
+                ))}
+              </Stack>
+            )}
+
+            {others.length > 0 && (
+              <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
+                <Title order={6} c={'dimmed'}>views including this element</Title>
+                {others.map((view, i) => (
+                  <ViewButton
+                    key={view.id}
+                    view={view}
+                    search={''}
+                    loop
+                    mod={{
+                      autofocus: i === 0 && scoped.length === 0,
+                    }}
+                  />
+                ))}
+              </Stack>
+            )}
+          </ScrollAreaAutosize>
+        </m.div>
+      </FocusTrap>
+    </>
+  )
+}