@likec4/diagram 1.21.1 → 1.22.1

package/src/likec4diagram/ui/controls/NavigationButtons.tsx

@@ -2,19 +2,13 @@ import { IconChevronRight } from '@tabler/icons-react'
 
 import { AnimatePresence, m } from 'framer-motion'
 
-import { Group } from '@mantine/core'
-import { IconChevronLeft, IconMenu2 } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { LayoutGroup } from 'framer-motion'
-import { useDiagramEventHandlers } from '../../../context'
+import { IconChevronLeft } from '@tabler/icons-react'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { ActionIcon } from './_shared'
-import * as css from './styles.css'
 
 export const NavigationButtons = () => {
   const diagram = useDiagram()
-  const { onBurgerMenuClick } = useDiagramEventHandlers()
   const {
     hasStepBack,
     hasStepForward,
@@ -23,61 +17,45 @@ export const NavigationButtons = () => {
     hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1,
   }))
   return (
-    <LayoutGroup>
-      <Group
-        className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
-        align="flex-start"
-        gap={'xs'}>
-        {onBurgerMenuClick && (
+    <AnimatePresence>
+      {hasStepBack && (
+        <m.div
+          layout
+          initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
+          animate={{ opacity: 1, transform: 'translateX(0)' }}
+          exit={{
+            opacity: 0.05,
+            transform: 'translateX(-10px)',
+          }}
+          key={'back'}>
           <ActionIcon
             onClick={e => {
               e.stopPropagation()
-              onBurgerMenuClick()
+              diagram.navigate('back')
             }}>
-            <IconMenu2 />
+            <IconChevronLeft />
           </ActionIcon>
-        )}
-        <AnimatePresence>
-          {hasStepBack && (
-            <m.div
-              layout
-              initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-              animate={{ opacity: 1, transform: 'translateX(0)' }}
-              exit={{
-                opacity: 0.05,
-                transform: 'translateX(-10px)',
-              }}
-              key={'back'}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.navigate('back')
-                }}>
-                <IconChevronLeft />
-              </ActionIcon>
-            </m.div>
-          )}
-          {hasStepForward && (
-            <m.div
-              layout
-              initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-              animate={{ opacity: 1, transform: 'translateX(0)' }}
-              exit={{
-                opacity: 0,
-                transform: 'translateX(10px)',
-              }}
-              key={'forward'}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.navigate('forward')
-                }}>
-                <IconChevronRight />
-              </ActionIcon>
-            </m.div>
-          )}
-        </AnimatePresence>
-      </Group>
-    </LayoutGroup>
+        </m.div>
+      )}
+      {hasStepForward && (
+        <m.div
+          layout
+          initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
+          animate={{ opacity: 1, transform: 'translateX(0)' }}
+          exit={{
+            opacity: 0,
+            transform: 'translateX(10px)',
+          }}
+          key={'forward'}>
+          <ActionIcon
+            onClick={e => {
+              e.stopPropagation()
+              diagram.navigate('forward')
+            }}>
+            <IconChevronRight />
+          </ActionIcon>
+        </m.div>
+      )}
+    </AnimatePresence>
   )
 }

package/src/likec4diagram/ui/controls/ToggleReadonly.tsx

@@ -0,0 +1,31 @@
+import { IconLock, IconLockOpen2 } from '@tabler/icons-react'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import type { DiagramContext } from '../../state/machine'
+import { ActionIcon, Tooltip } from './_shared'
+
+const selector = (state: DiagramContext) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly,
+})
+
+export const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector)
+  const diagram = useDiagram()
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <Tooltip label={isReadOnly ? 'Enable editing' : 'Disable editing'}>
+      <ActionIcon
+        onClick={e => {
+          e.stopPropagation()
+          diagram.toggleFeature('ReadOnly')
+        }}>
+        {isReadOnly ? <IconLock /> : <IconLockOpen2 />}
+      </ActionIcon>
+    </Tooltip>
+  )
+}

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -5,12 +5,14 @@ import { mantine, vars } from '../../../theme-vars'
 
 export const navigationButtons = style({
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
+  ':empty': {
+    display: 'none',
+  },
 })
 
 export const panel = style({
   top: fallbackVar(vars.navigationPanel.top, '1rem'),
   left: fallbackVar(vars.navigationPanel.left, '1rem'),
-  gap: calc(mantine.spacing.xs).divide(1.5).toString(),
   margin: 0,
 })
 

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { Link } from '../../../base'
+import { Link } from '../../../components/Link'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import type { DiagramContext } from '../../state/machine'
 import * as css from './DiagramTitlePanel.css'

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

@@ -0,0 +1,119 @@
+import { createContainer, createGlobalVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { whereLight } from '../../../theme-vars.css'
+import { button, buttonFocused, description, descriptionColor, iconColor, title } from './_shared.css'
+
+export { focusable } from './_shared.css'
+
+export const treeContainer = createContainer('likec4-elements-tree')
+
+const whenContainerIsNarrow = `${treeContainer} (width < 450px)`
+
+export const treeNode = style({
+  outline: 'none',
+  marginBottom: 8,
+})
+export const treeRoot = style({
+  overflow: 'hidden',
+  containerName: treeContainer,
+  containerType: 'inline-size',
+  height: '100%',
+})
+export const treeLabel = style({
+  display: 'flex',
+  alignItems: 'baseline',
+  outline: 'none !important',
+  gap: 4,
+})
+export const treeSubtree = style({
+  marginTop: 8,
+})
+
+export const iconSize = createGlobalVar('likec4-icon-size')
+export const elementExpandIcon = style({
+  color: mantine.colors.dimmed,
+})
+
+export const elementButton = style([button, {
+  flexGrow: 1,
+  vars: {
+    [iconSize]: '24px',
+  },
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      vars: {
+        [iconSize]: '18px',
+      },
+    },
+  },
+}])
+
+globalStyle(`${treeNode}:focus > ${treeLabel} ${elementButton}`, buttonFocused)
+
+export const elementTitleAndId = style({
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      flexDirection: 'column-reverse',
+      alignItems: 'flex-start',
+      gap: 2,
+    },
+  },
+})
+
+export const elementTitle = style([title])
+export const elementId = style({
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 10,
+  lineHeight: 1.3,
+  display: 'block',
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  padding: '1px 5px',
+  borderRadius: 4,
+  background: `color-mix(in srgb, ${mantine.colors.dark[9]}, transparent 70%)`,
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 80%)`,
+    },
+  },
+})
+export const elementDescription = style([description])
+
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  alignSelf: 'flex-start',
+  marginTop: 4,
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain',
+})
+globalStyle(`${elementIcon}.likec4-shape-icon svg`, {
+  color: iconColor,
+  width: '90%',
+  strokeWidth: 1.5,
+})
+
+export const elementViewsCount = style({
+  flex: 0,
+  color: fallbackVar(descriptionColor, mantine.colors.dimmed),
+  fontSize: 10,
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  lineHeight: 1.1,
+  '@container': {
+    [`${whenContainerIsNarrow}`]: {
+      display: 'none',
+    },
+  },
+})

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

@@ -0,0 +1,291 @@
+import {
+  type Fqn,
+  ifilter,
+  isAncestor,
+  LikeC4Model,
+  nameFromFqn,
+  sortParentsFirst,
+  toArray,
+} from '@likec4/core'
+import {
+  type RenderTreeNodePayload,
+  ActionIcon,
+  Box,
+  Group,
+  Highlight,
+  Text,
+  Tooltip,
+  Tree,
+  UnstyledButton,
+  useTree,
+} from '@mantine/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { IconChevronRight } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
+import { first, indexBy, isEmpty, only, partition, pipe, prop, reduce } from 'remeda'
+import { IconOrShapeRenderer } from '../../../context/IconRenderer'
+import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree'
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model'
+import * as css from './ElementsColumn.css'
+import { setPickView, useCloseSearchAndNavigateTo, useNormalizedSearch } from './state'
+import { centerY, moveFocusToSearchInput, stopAndPrevent } from './utils'
+import { NothingFound } from './ViewsColum'
+
+interface LikeC4ModelTreeNodeData {
+  label: string
+  value: Fqn
+  element: LikeC4Model.Element
+  searchTerms: string[]
+  children: LikeC4ModelTreeNodeData[]
+}
+
+function buildNode(
+  element: LikeC4Model.Element,
+  searchTerms: string[] = [],
+): LikeC4ModelTreeNodeData {
+  return {
+    label: element.title,
+    value: element.id,
+    element,
+    searchTerms,
+    children: [...element.children()].map(e => buildNode(e, searchTerms)).sort(sortByLabel),
+  }
+}
+
+export function ElementsColumn() {
+  const search = useNormalizedSearch()
+  const model = useLikeC4Model(true)
+  const {
+    all,
+    byid,
+    roots: data,
+  } = useMemo(() => {
+    const searchTerms = search.split('.')
+    let elements
+    if (isEmpty(search) || search === 'kind:') {
+      elements = model.elements()
+    } else {
+      elements = ifilter(model.elements(), element => {
+        if (search.startsWith('kind:')) {
+          return element.kind.toLocaleLowerCase().startsWith(search.slice(5))
+        }
+        if (search.startsWith('#')) {
+          return element.tags.some((tag) => tag.toLocaleLowerCase().includes(search.slice(1)))
+        }
+        return (element.title + ' ' + element.id + ' ' + (element.description ?? ''))
+          .toLocaleLowerCase().includes(search)
+      })
+    }
+    const { all, roots } = pipe(
+      elements,
+      toArray(),
+      sortParentsFirst,
+      reduce((acc, element) => {
+        const treeItem: LikeC4ModelTreeNodeData = {
+          label: element.title,
+          value: element.id,
+          element,
+          searchTerms,
+          children: [],
+        }
+        const parent = acc.all.findLast((root) => isAncestor(root.value, treeItem.value))
+        if (parent) {
+          parent.children.push(treeItem)
+          if (parent.children.length > 1) {
+            parent.children.sort(sortByLabel)
+          }
+        } else {
+          acc.roots.push(treeItem)
+        }
+        acc.all.push(treeItem)
+        return acc
+      }, {
+        all: [] as LikeC4ModelTreeNodeData[],
+        roots: [] as LikeC4ModelTreeNodeData[],
+      }),
+    )
+    return {
+      all,
+      byid: indexBy(all, prop('value')),
+      roots: roots.sort(sortByLabel),
+    }
+  }, [model, search])
+
+  const tree = useTree({
+    multiple: false,
+  })
+  useEffect(() => {
+    tree.collapseAllNodes()
+    for (const nd of all) {
+      if (nd.children.length > 0) {
+        tree.expand(nd.value)
+      }
+    }
+  }, [all])
+
+  const handleClick = useHandleElementSelection()
+
+  return (
+    <>
+      {data.length === 0 && <NothingFound />}
+      <Tree
+        data-likec4-search-elements
+        allowRangeSelection={false}
+        clearSelectionOnOutsideClick
+        selectOnClick={false}
+        tree={tree}
+        data={data}
+        levelOffset={'lg'}
+        classNames={{
+          root: css.treeRoot,
+          node: clsx(css.focusable, css.treeNode),
+          label: css.treeLabel,
+          subtree: css.treeSubtree,
+        }}
+        onKeyDownCapture={(e) => {
+          const target = e.target as HTMLElement
+          const id = target.getAttribute('data-value')
+          const node = !!id && byid[id as Fqn]
+          if (!node) return
+          if (e.key === 'ArrowUp') {
+            if (id === data[0]?.value) {
+              stopAndPrevent(e)
+              moveFocusToSearchInput()
+            }
+            return
+          }
+          if (e.key === 'ArrowRight') {
+            const hasChildren = node.children.length > 0
+            if (hasChildren && tree.expandedState[id] === false) {
+              return
+            }
+            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] .${css.focusable}`,
+            )]
+            let view = viewButtons.length > 1
+              ? viewButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1)
+              : null
+            view ??= first(viewButtons)
+            if (view) {
+              stopAndPrevent(e)
+              view.focus()
+            }
+            return
+          }
+          if (e.key === ' ' || e.key === 'Enter') {
+            stopAndPrevent(e)
+            handleClick(node.element)
+            return
+          }
+        }}
+        renderNode={ElementTreeNode}
+      />
+    </>
+  )
+}
+
+function ElementTreeNode(
+  { node, elementProps, hasChildren, expanded }: RenderTreeNodePayload,
+) {
+  const { element, searchTerms } = node as LikeC4ModelTreeNodeData
+  const elementIcon = IconOrShapeRenderer({
+    element: {
+      id: element.id,
+      title: element.title,
+      shape: element.shape,
+      icon: element.icon,
+    },
+    className: css.elementIcon,
+  })
+  const views = [...element.views()]
+
+  const handleClick = useHandleElementSelection()
+
+  const key = `@tree.${node.value}`
+
+  return (
+    <m.div layoutId={key} key={key} {...elementProps as any}>
+      <ActionIcon
+        variant="transparent"
+        size={16}
+        tabIndex={-1}
+        className={clsx(css.elementExpandIcon)}
+        style={{
+          visibility: hasChildren ? 'visible' : 'hidden',
+        }}>
+        <IconChevronRight
+          stroke={3.5}
+          style={{
+            transition: 'transform 150ms ease',
+            transform: `rotate(${expanded ? '90deg' : '0'})`,
+            width: '100%',
+          }} />
+      </ActionIcon>
+      <UnstyledButton
+        component={m.button}
+        layout
+        tabIndex={-1}
+        className={clsx(css.elementButton, 'likec4-element-button')}
+        {...views.length > 0 && {
+          onClick: (e) => {
+            if (!hasChildren || expanded) {
+              e.stopPropagation()
+              handleClick(element)
+            }
+          },
+        }}
+      >
+        {elementIcon}
+        <Box style={{ flexGrow: 1 }}>
+          <Group gap={'xs'} wrap="nowrap" align="center" className={css.elementTitleAndId}>
+            <Highlight component="div" highlight={searchTerms} className={css.elementTitle}>
+              {node.label as any}
+            </Highlight>
+            <Tooltip label={element.id} withinPortal={false} fz={'xs'} disabled={!element.id.includes('.')}>
+              <Highlight component="div" highlight={searchTerms} className={css.elementId}>
+                {nameFromFqn(element.id)}
+              </Highlight>
+            </Tooltip>
+          </Group>
+          <Highlight component="div" highlight={searchTerms} className={css.elementDescription} lineClamp={1}>
+            {element.description || 'No description'}
+          </Highlight>
+        </Box>
+
+        <Text component="div" className={css.elementViewsCount}>
+          {views.length === 0 ? 'No views' : (
+            <>
+              {views.length} view{views.length > 1 ? 's' : ''}
+            </>
+          )}
+        </Text>
+      </UnstyledButton>
+    </m.div>
+  )
+}
+
+function useHandleElementSelection() {
+  const navigateTo = useCloseSearchAndNavigateTo()
+
+  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)
+      return
+    }
+    const [scoped, others] = partition(views, v => v.viewOf?.id === element.id)
+    setPickView({
+      elementFqn: element.id,
+      scoped,
+      others,
+    })
+  })
+}

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

@@ -0,0 +1,117 @@
+import { rem } from '@mantine/core'
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../../theme-vars'
+import { vars, whereDark, whereLight } from '../../../theme-vars.css'
+import { button, buttonFocused } from './_shared.css'
+export { focusable } from './_shared.css'
+
+export const backdrop = style({
+  position: 'fixed',
+  zIndex: 900,
+  inset: 0,
+  backgroundColor: 'rgb(34 34 34 / 0.95)',
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: 'rgb(255 255 255 / 0.92  )',
+    },
+  },
+})
+export const root = style({
+  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: mantine.spacing.md,
+  paddingTop: rem(32),
+  paddingLeft: rem(16),
+  paddingRight: rem(16),
+  paddingBottom: 0,
+})
+export const input = style({
+  borderColor: 'transparent',
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backgroundColor: 'transparent',
+  ':focus-within': {
+    backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[3]}, transparent 45%)`,
+  },
+  selectors: {
+    [`${whereDark} &`]: {},
+    [`${whereDark} &:focus-within`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[4]}, transparent 45%)`,
+    },
+  },
+})
+
+export const pickviewBackdrop = style({
+  position: 'absolute',
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'rgb(34 34 34 / 0.5)',
+  zIndex: 902,
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(6px)'),
+  selectors: {
+    [`${whereLight} &`]: {
+      backgroundColor: 'rgb(255 255 255 / 0.6  )',
+    },
+  },
+})
+export const pickview = style({
+  position: 'absolute',
+  top: '2rem',
+  left: '50%',
+  width: '100%',
+  maxWidth: 600,
+  minWidth: 200,
+  transform: 'translateX(-50%)',
+  zIndex: 903,
+})
+
+export const pickviewGroup = style({
+  marginTop: rem(8),
+  selectors: {
+    '& + &': {
+      marginTop: rem(32),
+    },
+  },
+})
+
+globalStyle(`${whereDark} ${pickview} ${button}`, {
+  borderColor: mantine.colors.dark[5],
+  backgroundColor: mantine.colors.dark[6],
+})
+globalStyle(`${whereDark} ${pickview} ${button}:hover`, {
+  ...buttonFocused,
+  backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
+})
+globalStyle(`${whereDark} ${pickview} ${button}:focus`, buttonFocused)
+
+export const scrollArea = style({
+  height: [
+    '100%',
+    '100cqh',
+  ],
+})
+
+globalStyle(`.${scrollArea} .mantine-ScrollArea-viewport`, {
+  minHeight: '100%',
+})
+
+globalStyle(`.${scrollArea} .mantine-ScrollArea-viewport > div`, {
+  minHeight: '100%',
+  height: '100%',
+})