@likec4/diagram 1.21.1 → 1.22.0

package/src/likec4diagram/ui/search/SearchInput.tsx

@@ -0,0 +1,235 @@
+import { compareNatural } from '@likec4/core'
+import {
+  Combobox,
+  ComboboxDropdown,
+  ComboboxEmpty,
+  ComboboxOption,
+  ComboboxOptions,
+  ComboboxTarget,
+  Input,
+  rem,
+  ScrollAreaAutosize,
+  Text,
+  useCombobox,
+} from '@mantine/core'
+import { useDebouncedValue, useFocusWithin, useIsFirstRender, useWindowEvent } from '@mantine/hooks'
+import { usePreviousDistinct } from '@react-hookz/web'
+import { IconSearch } from '@tabler/icons-react'
+import { type ReactNode } from 'react'
+import { isString, keys, only } from 'remeda'
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import * as css from './LikeC4Search.css'
+import { setSearch, useIsPickViewActive, useSearch } from './state'
+import { moveFocusToSearchInput, stopAndPrevent } from './utils'
+
+function startingWithKind(search: string) {
+  return search.match(/^(k|ki|kin|kind|kind:)$/) != null
+}
+
+const SEARCH_PREFIXES = ['#', 'kind:']
+
+export function LikeC4SearchInput() {
+  const isPickViewActive = useIsPickViewActive()
+  const likec4model = useLikeC4Model(true)
+  const combobox = useCombobox({
+    scrollBehavior: 'smooth',
+  })
+  const { ref, focused } = useFocusWithin<HTMLInputElement>()
+  const search = useSearch()
+  const previous = usePreviousDistinct(search)
+  const isFirstRender = useIsFirstRender()
+
+  const [isEmptyForSomeTime] = useDebouncedValue(search === '' && !isFirstRender, isString(previous) ? 400 : 1000)
+
+  useWindowEvent(
+    'keydown',
+    (event) => {
+      try {
+        if (
+          !focused && !isPickViewActive && (
+            event.key === 'Backspace' ||
+            event.key.startsWith('Arrow') ||
+            event.key.match(/^\p{L}$/u)
+          )
+        ) {
+          moveFocusToSearchInput()
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+    },
+  )
+
+  let options = [] as ReactNode[]
+  let isExactMatch = false
+
+  switch (true) {
+    case search === '' && (isEmptyForSomeTime || SEARCH_PREFIXES.includes(previous ?? '')): {
+      options = SEARCH_PREFIXES.map((prefix) => (
+        <ComboboxOption value={prefix} key={prefix}>
+          <Text component="span" opacity={.5} mr={4} fz={'sm'}>Search by</Text>
+          {prefix}
+        </ComboboxOption>
+      ))
+      break
+    }
+    case search.startsWith('#'): {
+      const searchTag = search.toLocaleLowerCase().slice(1)
+      const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
+        compareNatural,
+      )
+      isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag
+      if (alloptions.length === 0) {
+        options = [
+          <ComboboxEmpty key="empty-tags">
+            No tags found
+          </ComboboxEmpty>,
+        ]
+      } else {
+        options = alloptions.map((tag) => (
+          <ComboboxOption value={`#${tag}`} key={tag}>
+            <Text component="span" opacity={.5} mr={1} fz={'sm'}>#</Text>
+            {tag}
+          </ComboboxOption>
+        ))
+      }
+      break
+    }
+    case search.startsWith('kind:'):
+    case startingWithKind(search): {
+      const term = search.length > 5 ? search.slice(5).toLocaleLowerCase() : ''
+      let alloptions = keys(likec4model.$model.specification.elements)
+      if (term) {
+        alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term))
+        isExactMatch = only(alloptions)?.toLocaleLowerCase() === term
+      }
+      if (alloptions.length === 0) {
+        options = [
+          <ComboboxEmpty key="empty-kinds">
+            No kinds found
+          </ComboboxEmpty>,
+        ]
+      } else {
+        options = alloptions.map((kind) => (
+          <ComboboxOption value={`kind:${kind}`} key={kind}>
+            <Text component="span" opacity={.5} mr={1} fz={'sm'}>kind:</Text>
+            {kind}
+          </ComboboxOption>
+        ))
+      }
+      break
+    }
+  }
+
+  return (
+    <Combobox
+      onOptionSubmit={(optionValue) => {
+        setSearch(optionValue)
+        combobox.resetSelectedOption()
+        if (!SEARCH_PREFIXES.includes(optionValue)) {
+          combobox.closeDropdown()
+          // Let react to display filtered elements
+          setTimeout(() => {
+            document.querySelector<HTMLButtonElement>(`.${css.root} .${css.focusable}`)?.focus()
+          }, 50)
+        }
+      }}
+      width={'max-content'}
+      position="bottom-start"
+      shadow="md"
+      offset={{
+        mainAxis: 4,
+        crossAxis: 50,
+      }}
+      store={combobox}
+      withinPortal={false}
+    >
+      <ComboboxTarget>
+        <Input
+          ref={ref}
+          id="likec4searchinput"
+          placeholder="Search by title, description or start with # or kind:"
+          tabIndex={0}
+          classNames={{
+            input: css.input,
+          }}
+          size="xl"
+          value={search}
+          leftSection={<IconSearch style={{ width: rem(20) }} stroke={2} />}
+          onChange={(event) => {
+            setSearch(event.currentTarget.value)
+            combobox.openDropdown()
+            combobox.updateSelectedOptionIndex()
+          }}
+          onClick={() => combobox.openDropdown()}
+          onFocus={() => combobox.openDropdown()}
+          onBlur={() => combobox.closeDropdown()}
+          onKeyDownCapture={(e) => {
+            if (e.key === 'Tab') {
+              switch (true) {
+                case combobox.getSelectedOptionIndex() >= 0: {
+                  combobox.clickSelectedOption()
+                  return stopAndPrevent(e)
+                }
+                case options.length === 1: {
+                  const firstOption = combobox.selectFirstOption()
+                  if (firstOption) {
+                    combobox.clickSelectedOption()
+                  }
+                  return stopAndPrevent(e)
+                }
+                case startingWithKind(search): {
+                  setSearch('kind:')
+                  return stopAndPrevent(e)
+                }
+              }
+              return
+            }
+            if (e.key === 'Backspace' && combobox.dropdownOpened) {
+              if (search === 'kind:') {
+                setSearch('')
+                combobox.resetSelectedOption()
+                return stopAndPrevent(e)
+              }
+              if (search.startsWith('kind:') && isExactMatch) {
+                setSearch('kind:')
+                combobox.resetSelectedOption()
+                return stopAndPrevent(e)
+              }
+              if (search.startsWith('#') && isExactMatch) {
+                setSearch('#')
+                combobox.resetSelectedOption()
+                return stopAndPrevent(e)
+              }
+            }
+            if (e.key === 'Escape' && combobox.dropdownOpened && options.length > 0) {
+              stopAndPrevent(e)
+              combobox.closeDropdown()
+              return
+            }
+            if (
+              e.key === 'ArrowDown' && (
+                !combobox.dropdownOpened ||
+                options.length === 0 || isExactMatch ||
+                // reached the last option and the search is empty
+                (search === '' && combobox.getSelectedOptionIndex() === options.length - 1)
+              )
+            ) {
+              combobox.closeDropdown()
+              stopAndPrevent(e)
+              document.querySelector<HTMLButtonElement>(`.${css.root} .${css.focusable}`)?.focus()
+              return
+            }
+          }} />
+      </ComboboxTarget>
+
+      <ComboboxDropdown hidden={options.length === 0} style={{ minWidth: 300 }}>
+        <ComboboxOptions>
+          <ScrollAreaAutosize mah={'min(322px, calc(100cqh - 50px))'} type="scroll">
+            {options}
+          </ScrollAreaAutosize>
+        </ComboboxOptions>
+      </ComboboxDropdown>
+    </Combobox>
+  )
+}

package/src/likec4diagram/ui/search/ViewsColum.tsx

@@ -0,0 +1,158 @@
+import {
+  type LikeC4Model,
+  type Tag,
+  isDeploymentView,
+} from '@likec4/core'
+import {
+  type ElementProps,
+  type UnstyledButtonProps,
+  Badge,
+  Box,
+  createScopedKeydownHandler,
+  Group,
+  Highlight,
+  Stack,
+  ThemeIcon,
+  UnstyledButton,
+  VisuallyHidden,
+} from '@mantine/core'
+import { IconStack2, IconZoomScan } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { first } from 'remeda'
+import { useCurrentViewId } from '../../../hooks'
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import { emptyBoX } from './_shared.css'
+import { useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
+import { centerY, moveFocusToSearchInput } from './utils'
+import * as css from './ViewsColumn.css'
+
+export const NothingFound = () => (
+  <Box className={emptyBoX}>
+    Nothing found
+  </Box>
+)
+
+export function ViewsColumn() {
+  const search = useNormalizedSearch()
+  let views = [...useLikeC4Model(true).views()]
+  if (search) {
+    if (search.startsWith('kind:')) {
+      views = []
+    } else {
+      views = views.filter(view => {
+        if (search.startsWith('#')) {
+          return view.tags.some((tag: Tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
+        }
+        return (view.title ?? '' + view.$view.description ?? '').toLocaleLowerCase().includes(search)
+      })
+    }
+  }
+
+  return (
+    <Stack
+      renderRoot={props => <m.div layout {...props} />}
+      gap={8}
+      data-likec4-search-views
+      onKeyDown={(e) => {
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+          const maxY = (e.target as HTMLElement).getBoundingClientRect().y
+          const elementButtons = [...document.querySelectorAll<HTMLButtonElement>(
+            `[data-likec4-search-elements] .likec4-element-button`,
+          )]
+          let elementButton = elementButtons.length > 1
+            ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
+            : null
+          elementButton ??= first(elementButtons)
+
+          if (elementButton) {
+            e.stopPropagation()
+            elementButton.focus()
+          }
+          return
+        }
+      }}>
+      {views.length === 0 && <NothingFound />}
+      {views.length > 0 && (
+        <VisuallyHidden>
+          <UnstyledButton
+            data-likec4-view
+            tabIndex={-1}
+            onFocus={e => {
+              e.stopPropagation()
+              moveFocusToSearchInput()
+            }} />
+        </VisuallyHidden>
+      )}
+      {views.map((view, i) => (
+        <m.div layoutId={`@view${view.id}`} key={view.id}>
+          <ViewButton
+            view={view}
+            search={search}
+            tabIndex={i === 0 ? 0 : -1}
+          />
+        </m.div>
+      ))}
+    </Stack>
+  )
+}
+
+export function ViewButton(
+  { className, view, loop = false, search, ...props }:
+    & {
+      view: LikeC4Model.View
+      search: string
+      loop?: boolean
+    }
+    & UnstyledButtonProps
+    & ElementProps<'button'>,
+) {
+  const navigateTo = useCloseSearchAndNavigateTo()
+  const currentViewId = useCurrentViewId()
+  const isCurrentView = view.id === currentViewId
+  return (
+    <UnstyledButton
+      {...props}
+      className={clsx(css.focusable, css.viewButton, className)}
+      data-likec4-view={view.id}
+      {...isCurrentView && { 'data-disabled': true }}
+      onClick={(e) => {
+        e.stopPropagation()
+        navigateTo(view.id)
+      }}
+      onKeyDown={createScopedKeydownHandler({
+        siblingSelector: '[data-likec4-view]',
+        parentSelector: '[data-likec4-search-views]',
+        activateOnFocus: false,
+        loop,
+        orientation: 'vertical',
+        onKeyDown: (e) => {
+          if (e.nativeEvent.code === 'Space') {
+            e.stopPropagation()
+            navigateTo(view.id)
+          }
+        },
+      })}>
+      <ThemeIcon variant="transparent">
+        {isDeploymentView(view)
+          ? <IconStack2 stroke={1.8} />
+          : <IconZoomScan stroke={1.8} />}
+      </ThemeIcon>
+      <Box style={{ flexGrow: 1 }}>
+        <Group gap={'xs'} wrap="nowrap" align="center">
+          <Highlight component="div" highlight={search} className={css.viewTitle}>
+            {view.title || 'untitled'}
+          </Highlight>
+          {isCurrentView && <Badge size="xs" fz={9} radius={'sm'}>current</Badge>}
+        </Group>
+        <Highlight
+          highlight={view.$view.description ? search : ''}
+          component="div"
+          className={css.viewDescription}
+          lineClamp={1}>
+          {view.$view.description || 'No description'}
+        </Highlight>
+      </Box>
+    </UnstyledButton>
+  )
+}

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),
   }
 }