@likec4/diagram 1.31.0 → 1.32.0

package/src/search/Search.tsx

@@ -0,0 +1,237 @@
+import { css } from '@likec4/styles/css'
+import { VStack } from '@likec4/styles/jsx'
+import { FocusTrap, 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 { memo, 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 const Search = memo<{ searchActorRef: SearchActorRef }>(({ searchActorRef }) => {
+  const isOpened = useSelector(searchActorRef, selectIsOpened)
+
+  const openSearch = () => {
+    searchActorRef.send({ type: 'open' })
+  }
+
+  const sendClose = () => {
+    searchActorRef.send({ type: 'close' })
+  }
+
+  const afterCloseCbRef = useRef<(() => void)>(null)
+  const close = useCallbackRef((cb?: () => void) => {
+    afterCloseCbRef.current = cb ?? null
+    sendClose()
+  })
+  const onExitComplete = useCallbackRef(() => {
+    if (afterCloseCbRef.current) {
+      afterCloseCbRef.current()
+      afterCloseCbRef.current = null
+    }
+  })
+
+  useHotkeys([
+    ['mod+k', openSearch, {
+      preventDefault: true,
+    }],
+    ['mod+f', openSearch, {
+      preventDefault: true,
+    }],
+  ])
+
+  return (
+    <SearchActorContext
+      value={{
+        searchActorRef,
+        close,
+      }}>
+      <DiagramFeatures.Overlays>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={sendClose}>
+          <LayoutGroup>
+            <AnimatePresence onExitComplete={onExitComplete}>
+              {isOpened && (
+                <Overlay
+                  fullscreen
+                  withBackdrop={false}
+                  backdrop={{
+                    opacity: 0.9,
+                  }}
+                  classes={{
+                    dialog,
+                    body,
+                  }}
+                  openDelay={0}
+                  onClose={close}
+                  data-likec4-search="true"
+                >
+                  <SearchOverlay close={close} searchActorRef={searchActorRef} />
+                </Overlay>
+              )}
+            </AnimatePresence>
+          </LayoutGroup>
+        </ErrorBoundary>
+      </DiagramFeatures.Overlays>
+    </SearchActorContext>
+  )
+})
+
+const scrollArea = css({
+  height: [
+    '100%',
+    '100cqh',
+  ],
+  '& .mantine-ScrollArea-viewport': {
+    minHeight: '100%',
+    '& > div': {
+      minHeight: '100%',
+      height: '100%',
+    },
+  },
+})
+
+const SearchOverlay = ({ close, searchActorRef }: { close: () => void; searchActorRef: SearchActorRef }) => {
+  const pickViewFor = usePickViewFor()
+
+  useTimeoutEffect(() => {
+    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
+      focusToFirstFoundElement()
+    }
+  }, 150)
+
+  return (
+    <FocusTrap>
+      <Group
+        className={'group'}
+        wrap="nowrap"
+        onClick={e => {
+          e.stopPropagation()
+          moveFocusToSearchInput()
+        }}>
+        <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} />}
+    </FocusTrap>
+  )
+}

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,14 +22,15 @@ 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, useCallback, 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 { NothingFound } from './ViewsColum'
 
@@ -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 = () => {}
 
@@ -254,6 +254,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,7 +298,9 @@ function ElementTreeNode(
 }
 
 function useHandleElementSelection() {
-  const navigateTo = useCloseSearchAndNavigateTo()
+  const diagram = useDiagram()
+  const { searchActorRef } = useSearchActor()
+  // const naviconst { searchActorRef } = useSearchActor(gateTo = useCloseSearchAndNavigateTo()
 
   return useCallback((element: LikeC4Model.Element) => {
     const views = [...element.views()]
@@ -306,14 +309,13 @@ function useHandleElementSelection() {
     }
     const singleView = only(views)
     if (singleView) {
-      navigateTo(singleView.id, element.id)
+      if (singleView.id === diagram.currentView.id) {
+        searchActorRef.send({ type: 'close' })
+      } else {
+        diagram.navigateTo(singleView.id)
+      }
       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,140 @@
+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 pickview = usePickView()
+  // const navigateTo = useCloseSearchAndNavigateTo()
+  // const focusTrapRef = useFocusTrap(!!pickview)
+  // useFocusReturn({
+  //   opened: !!pickview,
+  // })
+  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>
+      <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>
+        <FocusTrap>
+          <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} 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>
+        </FocusTrap>
+      </m.div>
+    </>
+  )
+}

package/src/search/components/SearchByTags.tsx

@@ -0,0 +1,109 @@
+import { css } from '@likec4/styles/css'
+import { HStack } from '@likec4/styles/jsx'
+import { Button } from '@mantine/core'
+import { IconX } from '@tabler/icons-react'
+import { ElementTag } from '../../base/primitives'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import { useNormalizedSearch, useUpdateSearch } from '../hooks'
+import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils'
+
+export function SearchByTags() {
+  let tags = useLikeC4Model().tagsSortedByUsage
+  let setSearch = useUpdateSearch()
+  let search = useNormalizedSearch()
+  let countBefore = tags.length
+  if (search.startsWith('#')) {
+    const searchTag = search.slice(1)
+    tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag))
+  }
+  if (tags.length === 0) {
+    return null
+  }
+
+  const isFiltered = tags.length !== countBefore
+
+  return (
+    <HStack
+      css={{
+        gap: 'md',
+        paddingLeft: 48,
+        flexWrap: 'nowrap',
+      }}
+    >
+      <HStack
+        css={{
+          gap: 6,
+          flexWrap: 'wrap',
+          opacity: isFiltered ? 1 : .3,
+          grayscale: isFiltered ? 0 : .9,
+          filter: 'auto',
+          transition: 'fast',
+          _groupHover: {
+            opacity: 1,
+            grayscale: 0,
+          },
+          _groupFocusWithin: {
+            opacity: 1,
+            grayscale: 0,
+          },
+        }}
+      >
+        {tags.map(({ tag }) => (
+          // <Pill
+          //   key={tag}
+          //   data-likec4-tag={tag}
+          //   className={cx(
+          //     likec4tag(),
+          //     css({
+          //       minWidth: 'unset',
+          //       cursor: 'pointer',
+          //     }),
+          //   )}
+          //   onClick={(e) => {
+          //     e.stopPropagation()
+          //     setSearch(`#${tag}`)
+          //   }}
+          //   onRemove={() => {
+          //     setSearch('#')
+          //     moveFocusToSearchInput()
+          //   }}
+          //   withRemoveButton={tag === `${search.slice(1)}`}
+          // >
+          //   <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
+          //   {tag}
+          // </Pill>
+          <ElementTag
+            key={tag}
+            tag={tag}
+            className={css({
+              userSelect: 'none',
+              cursor: 'pointer',
+            })}
+            onClick={(e) => {
+              e.stopPropagation()
+              setSearch(`#${tag}`)
+              // Let react to display filtered elements
+              setTimeout(() => {
+                focusToFirstFoundElement()
+              }, 350)
+            }}
+          />
+        ))}
+      </HStack>
+      {isFiltered && (
+        <Button
+          size="compact-xs"
+          variant="light"
+          onClick={(e) => {
+            e.stopPropagation()
+            setSearch('')
+            moveFocusToSearchInput()
+          }}
+          rightSection={<IconX size={14} />}
+        >
+          Clear
+        </Button>
+      )}
+    </HStack>
+  )
+}