@likec4/diagram 1.34.2 → 1.35.0

package/src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx

@@ -0,0 +1,199 @@
+import type { AutoLayoutDirection } from '@likec4/core'
+import {
+  Box,
+  Flex,
+  FloatingIndicator,
+  Popover,
+  PopoverDropdown,
+  PopoverTarget,
+  Text,
+  UnstyledButton,
+} from '@mantine/core'
+import {
+  type UseMovePosition,
+  clampUseMovePosition,
+  useHover,
+  useMergedRef,
+  useMove,
+  useUncontrolled,
+} from '@mantine/hooks'
+import { useDebouncedCallback } from '@react-hookz/web'
+import { IconLayoutDashboard } from '@tabler/icons-react'
+import { forwardRef, useState } from 'react'
+import { useDiagramEventHandlers } from '../../context'
+import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
+import type { DiagramContext } from '../../state/types'
+import { PanelActionIcon } from '../_common'
+import { Tooltip } from './_common'
+import * as css from './styles'
+
+const selector = (state: DiagramContext) => ({
+  viewId: state.view.id,
+  autoLayout: state.view.autoLayout,
+})
+
+export const ChangeAutoLayoutButton = () => {
+  const { onChange } = useDiagramEventHandlers()
+  const diagram = useDiagram()
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
+  const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
+  const {
+    autoLayout,
+    viewId,
+  } = useDiagramContext(selector)
+
+  const { ref, hovered: isSpacingHovered } = useHover()
+
+  const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
+    controlsRefs[name] = node
+    setControlsRefs(controlsRefs)
+  }
+
+  const setAutoLayout = (direction: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    onChange?.({
+      change: {
+        op: 'change-autolayout',
+        layout: {
+          ...autoLayout,
+          direction,
+        },
+      },
+    })
+  }
+
+  const setSpacing = (nodeSep: number | null, rankSep: number | null) => {
+    // Force fitDiagram
+    diagram.fitDiagram()
+    onChange?.({
+      change: {
+        op: 'change-autolayout',
+        layout: {
+          ...autoLayout,
+          nodeSep,
+          rankSep,
+        },
+      },
+    })
+  }
+
+  return (
+    <Popover
+      position="right-start"
+      clickOutsideEvents={[
+        'pointerdown',
+      ]}
+      radius="xs"
+      shadow="lg"
+      offset={{
+        mainAxis: 10,
+      }}>
+      <PopoverTarget>
+        <Tooltip label="Change Auto Layout">
+          <PanelActionIcon>
+            <IconLayoutDashboard />
+          </PanelActionIcon>
+        </Tooltip>
+      </PopoverTarget>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6} opacity={isSpacingHovered ? 0.6 : 1}>
+        <Box pos={'relative'} ref={setRootRef}>
+          <FloatingIndicator
+            target={controlsRefs[autoLayout.direction]}
+            parent={rootRef}
+            className={css.autolayoutIndicator}
+          />
+          <Box mb={10}>
+            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Auto layout:</Text>
+          </Box>
+          <Flex gap={2} wrap={'wrap'} justify={'stretch'} maw={160}>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('TB')} onClick={setAutoLayout('TB')}>
+              Top-Bottom
+            </UnstyledButton>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('BT')} onClick={setAutoLayout('BT')}>
+              Bottom-Top
+            </UnstyledButton>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('LR')} onClick={setAutoLayout('LR')}>
+              Left-Right
+            </UnstyledButton>
+            <UnstyledButton className={css.autolayoutButton} ref={setControlRef('RL')} onClick={setAutoLayout('RL')}>
+              Right-Left
+            </UnstyledButton>
+          </Flex>
+          <Box my={10}>
+            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Spacing:</Text>
+          </Box>
+          <SpacingSliders
+            ref={ref}
+            isVertical={autoLayout.direction === 'TB' || autoLayout.direction === 'BT'}
+            key={viewId}
+            nodeSep={autoLayout.nodeSep}
+            rankSep={autoLayout.rankSep}
+            onChange={setSpacing}
+          />
+        </Box>
+      </PopoverDropdown>
+    </Popover>
+  )
+}
+
+const MAX_SPACING = 400
+const SpacingSliders = forwardRef<HTMLDivElement | null, {
+  isVertical: boolean
+  nodeSep: number | undefined
+  rankSep: number | undefined
+  onChange: (nodeSep: number, rankSep: number) => void
+}>(({
+  isVertical,
+  nodeSep,
+  rankSep,
+  onChange,
+}, _ref) => {
+  if (!isVertical) {
+    ;[nodeSep, rankSep] = [rankSep, nodeSep]
+  }
+
+  const propagateChange = useDebouncedCallback(
+    ({ x, y }: UseMovePosition) => {
+      if (!isVertical) {
+        ;[x, y] = [y, x]
+      }
+      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
+    },
+    [onChange, isVertical],
+    250,
+    2000,
+  )
+
+  const [value, setValue] = useUncontrolled({
+    defaultValue: clampUseMovePosition({
+      x: (nodeSep ?? 100) / MAX_SPACING,
+      y: (rankSep ?? 120) / MAX_SPACING,
+    }),
+    onChange: propagateChange,
+  })
+
+  const { ref } = useMove(setValue)
+
+  let nodeSepValue = Math.round(value.x * MAX_SPACING)
+  let rankSepValue = Math.round(value.y * MAX_SPACING)
+  if (!isVertical) {
+    ;[nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue]
+  }
+
+  const mergedRef = useMergedRef(ref, _ref)
+
+  return (
+    <Box ref={mergedRef} className={css.spacingSliderBody} pt={'100%'}>
+      <Box
+        className={css.spacingSliderThumb}
+        style={{
+          left: `${value.x * 100}%`,
+          top: `${value.y * 100}%`,
+        }}
+      />
+      <Box pos={'absolute'} left={2} bottom={2}>
+        <Text component="div" fz={8} c={'dimmed'} fw={500}>{rankSepValue}, {nodeSepValue}</Text>
+      </Box>
+    </Box>
+  )
+})

package/src/navigationpanel/editorpanel/EditorPanel.tsx

@@ -0,0 +1,49 @@
+import { vstack } from '@likec4/styles/patterns'
+import { TooltipGroup } from '@mantine/core'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import { useEnabledFeatures } from '../../context'
+import { CenterCamera } from './CenterCamera'
+import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
+import { LayoutDriftNotification } from './LayoutDriftNotification'
+import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
+
+export function EditorPanel() {
+  const { enableReadOnly } = useEnabledFeatures()
+  return (
+    <AnimatePresence>
+      {!enableReadOnly && (
+        <m.div
+          layout="position"
+          className={vstack({
+            gap: 'sm',
+            layerStyle: 'likec4.panel',
+            position: 'relative',
+            cursor: 'pointer',
+            padding: '4',
+            pointerEvents: 'all',
+          })}
+          initial={{
+            opacity: 0,
+            translateX: -20,
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0,
+          }}
+          exit={{
+            opacity: 0,
+            translateX: -20,
+          }}
+        >
+          <TooltipGroup>
+            <ChangeAutoLayoutButton />
+            <ManualLayoutToolsButton />
+            <LayoutDriftNotification />
+            <CenterCamera />
+          </TooltipGroup>
+        </m.div>
+      )}
+    </AnimatePresence>
+  )
+}

package/src/navigationpanel/editorpanel/LayoutDriftNotification.tsx

@@ -0,0 +1,56 @@
+import {
+  ActionIcon,
+  Code,
+  HoverCard,
+  HoverCardDropdown,
+  HoverCardTarget,
+  Notification,
+  Text,
+} from '@mantine/core'
+import {
+  IconAlertTriangle,
+} from '@tabler/icons-react'
+
+import { css } from '@likec4/styles/css'
+import { useMantinePortalProps } from '../../hooks'
+import { useDiagramContext } from '../../hooks/useDiagram'
+
+export const LayoutDriftNotification = () => {
+  const portalProps = useMantinePortalProps()
+  const hasLayoutDrift = useDiagramContext(c => c.view.hasLayoutDrift ?? false)
+  if (!hasLayoutDrift) return null
+  return (
+    <HoverCard
+      position="right-start"
+      openDelay={200}
+      closeDelay={100}
+      {...portalProps}>
+      <HoverCardTarget>
+        <ActionIcon
+          color={'orange'}
+          c="orange"
+          className={css({
+            bg: 'mantine.colors.orange.light',
+          })}
+        >
+          <IconAlertTriangle />
+        </ActionIcon>
+      </HoverCardTarget>
+      <HoverCardDropdown p={'0'}>
+        <Notification
+          color="orange"
+          withBorder={false}
+          withCloseButton={false}
+          title="Manual layout issues">
+          <Text mt={2} size="sm" lh="xs">
+            View contains new elements or their sizes have changed,<br />
+            last manual layout can not be applied.
+          </Text>
+          <Text mt={'xs'} size="sm" lh="xs">
+            Update view predicates or remove <Code>@likec4-generated</Code>
+          </Text>
+        </Notification>
+      </HoverCardDropdown>
+    </HoverCard>
+  )
+}

package/src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx

@@ -0,0 +1,151 @@
+import { css } from '@likec4/styles/css'
+import { hstack } from '@likec4/styles/patterns'
+import {
+  type PopoverProps,
+  ActionIcon,
+  Popover,
+  PopoverDropdown,
+  PopoverTarget,
+  TooltipGroup,
+} from '@mantine/core'
+import {
+  IconLayoutAlignBottom,
+  IconLayoutAlignCenter,
+  IconLayoutAlignLeft,
+  IconLayoutAlignMiddle,
+  IconLayoutAlignRight,
+  IconLayoutAlignTop,
+  IconLayoutBoardSplit,
+  IconLayoutCollage,
+  IconRouteOff,
+} from '@tabler/icons-react'
+import { useDiagram } from '../../hooks/useDiagram'
+import { PanelActionIcon } from '../_common'
+import { Tooltip } from './_common'
+
+const Action = ({
+  label,
+  icon,
+  onClick,
+}: {
+  label: string
+  icon: React.ReactNode
+  onClick: React.MouseEventHandler
+}) => (
+  <Tooltip label={label} withinPortal={false} position="top">
+    <ActionIcon
+      classNames={{
+        root: 'action-icon',
+        icon: css({
+          '& > svg': {
+            width: '70%',
+            height: '70%',
+          },
+        }),
+      }}
+      variant="subtle"
+      color="gray"
+      onClick={onClick}>
+      {icon}
+    </ActionIcon>
+  </Tooltip>
+)
+
+export const ManualLayoutToolsButton = (props: PopoverProps) => {
+  const diagram = useDiagram()
+
+  return (
+    <Popover
+      position="right-start"
+      offset={{
+        mainAxis: 10,
+        crossAxis: -2,
+      }}
+      clickOutsideEvents={[
+        'pointerdown',
+      ]}
+      radius="sm"
+      shadow="lg"
+      {...props}>
+      <PopoverTarget>
+        <Tooltip label="Manual layouting tools">
+          <PanelActionIcon>
+            <IconLayoutCollage />
+          </PanelActionIcon>
+        </Tooltip>
+      </PopoverTarget>
+      <PopoverDropdown
+        className={hstack({
+          gap: 1,
+          layerStyle: 'likec4.panel',
+          p: '2',
+        })}>
+        <TooltipGroup>
+          <Action
+            label="Align in columns"
+            icon={<IconLayoutBoardSplit stroke={1.2} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Column')
+            }} />
+          <Action
+            label="Align left"
+            icon={<IconLayoutAlignLeft stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Left')
+            }} />
+          <Action
+            label="Align center"
+            icon={<IconLayoutAlignCenter stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Center')
+            }} />
+          <Action
+            label="Align right"
+            icon={<IconLayoutAlignRight stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Right')
+            }} />
+          <Action
+            label="Align in rows"
+            icon={<IconLayoutBoardSplit stroke={1.5} style={{ transform: 'rotate(90deg)' }} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Row')
+            }} />
+          <Action
+            label="Align top"
+            icon={<IconLayoutAlignTop stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Top')
+            }} />
+          <Action
+            label="Align middle"
+            icon={<IconLayoutAlignMiddle stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Middle')
+            }} />
+          <Action
+            label="Align bottom"
+            icon={<IconLayoutAlignBottom stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.align('Bottom')
+            }} />
+          <Action
+            label="Reset all control points"
+            icon={<IconRouteOff stroke={1.5} />}
+            onClick={e => {
+              e.stopPropagation()
+              diagram.resetEdgeControlPoints()
+            }} />
+        </TooltipGroup>
+      </PopoverDropdown>
+    </Popover>
+  )
+}

package/src/navigationpanel/editorpanel/_common.tsx

@@ -0,0 +1,14 @@
+import {
+  Tooltip as MantineTooltip,
+} from '@mantine/core'
+
+export const Tooltip = MantineTooltip.withProps({
+  color: 'dark',
+  fz: 'xs',
+  openDelay: 600,
+  closeDelay: 120,
+  label: '',
+  children: null,
+  offset: 8,
+  position: 'right',
+})

package/src/navigationpanel/editorpanel/index.ts

@@ -0,0 +1 @@
+export { EditorPanel } from './EditorPanel'

package/src/navigationpanel/editorpanel/styles.ts

@@ -0,0 +1,84 @@
+import { css } from '@likec4/styles/css'
+
+export const navigationButtons = css({
+  gap: 'micro',
+  _empty: {
+    display: 'none',
+  },
+})
+
+export const panel = css({
+  top: '1rem',
+  left: '1rem',
+  margin: 0,
+  pointerEvents: 'none',
+  '& :where(button, .action-icon, [role=\'dialog\'])': {
+    pointerEvents: 'all',
+  },
+  ['& .action-icon']: {
+    ['--ai-size']: '2rem',
+  },
+  ['& .tabler-icon']: {
+    width: '65%',
+    height: '65%',
+  },
+  _reduceGraphics: {
+    '& .action-icon': {
+      '--ai-radius': '0px',
+    },
+  },
+})
+
+export const actionIconGroup = css({
+  shadow: {
+    base: 'md',
+    _whenPanning: 'none',
+  },
+})
+
+export const autolayoutIcon = css({
+  ['& .tabler-icon']: {
+    width: '65%',
+    height: '65%',
+  },
+})
+
+export const autolayoutButton = css({
+  flex: '1 1 40%',
+  textAlign: 'center',
+  fontWeight: 500,
+  padding: '4px 6px',
+  fontSize: '11px',
+  zIndex: 1,
+})
+
+export const autolayoutIndicator = css({
+  background: 'mantine.colors.gray[2]',
+  borderRadius: 'sm',
+  border: `1px solid`,
+  borderColor: 'mantine.colors.gray[4]',
+  _dark: {
+    background: 'mantine.colors.dark[5]',
+    borderColor: 'mantine.colors.dark[4]',
+  },
+})
+
+export const spacingSliderBody = css({
+  position: 'relative',
+  borderRadius: 'sm',
+  background: 'mantine.colors.gray[3]',
+  boxShadow: 'inset 1px 1px 3px 0px #00000024',
+  _dark: {
+    background: 'mantine.colors.dark[7]',
+  },
+})
+
+export const spacingSliderThumb = css({
+  position: 'absolute',
+  width: 8,
+  height: 8,
+  border: `2px solid`,
+  borderColor: 'mantine.colors.gray[5]',
+  borderRadius: 3,
+  transform: 'translate(-50%, -50%)',
+})

package/src/navigationpanel/hooks.tsx

@@ -0,0 +1,70 @@
+import type { ViewId } from '@likec4/core'
+import { useSelector as useXstateSelector } from '@xstate/react'
+import { shallowEqual } from 'fast-equals'
+import { type DependencyList, createContext, useContext, useMemo } from 'react'
+import type {
+  NavigationPanelActorContext,
+  NavigationPanelActorEvent,
+  NavigationPanelActorRef,
+  NavigationPanelActorSnapshot,
+} from './actor'
+
+const NavigationPanelActorSafeContext = createContext<NavigationPanelActorRef>(null as any)
+NavigationPanelActorSafeContext.displayName = 'NavigationPanelActorSafeContext'
+
+export const NavigationPanelActorContextProvider = NavigationPanelActorSafeContext.Provider
+
+export const useNavigationActorRef = () => {
+  const ctx = useContext(NavigationPanelActorSafeContext)
+  if (ctx === null) {
+    throw new Error('NavigationPanelActorRef is not found in the context')
+  }
+  return ctx
+}
+
+export function useNavigationActorSnapshot<T = unknown>(
+  selector: (context: NavigationPanelActorSnapshot) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+  deps?: DependencyList,
+): T {
+  const actorRef = useNavigationActorRef()
+  return useXstateSelector(actorRef, selector, compare)
+}
+
+export function useNavigationActorContext<T = unknown>(
+  selector: (context: NavigationPanelActorContext) => T,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
+  deps?: DependencyList,
+): T {
+  return useNavigationActorSnapshot(snapshot => selector(snapshot.context), compare, deps)
+}
+
+export type NavigationActor = {
+  readonly actorRef: NavigationPanelActorRef
+  send: (event: NavigationPanelActorEvent) => void
+  selectFolder: (folderPath: string) => void
+  selectView: (viewId: ViewId) => void
+  /**
+   * If the navigation dropdown is opened
+   */
+  isOpened: () => boolean
+  clearSearch: () => void
+  closeDropdown: () => void
+}
+
+export function useNavigationActor(): NavigationActor {
+  const actorRef = useNavigationActorRef()
+
+  return useMemo(() => ({
+    actorRef,
+    send: (event: NavigationPanelActorEvent) => actorRef.send(event),
+    selectFolder: (folderPath: string) => actorRef.send({ type: 'select.folder', folderPath }),
+    selectView: (viewId: ViewId) => actorRef.send({ type: 'select.view', viewId }),
+    isOpened: () => {
+      const snapshot = actorRef.getSnapshot()
+      return snapshot.hasTag('active')
+    },
+    clearSearch: () => actorRef.send({ type: 'searchQuery.change', value: '' }),
+    closeDropdown: () => actorRef.send({ type: 'dropdown.dismiss' }),
+  }), [actorRef])
+}

package/src/navigationpanel/index.ts

@@ -0,0 +1 @@
+export { NavigationPanel } from './NavigationPanel'

package/src/navigationpanel/styles.css.ts

@@ -0,0 +1,30 @@
+import { cva } from '@likec4/styles/css'
+
+export const breadcrumbTitle = cva({
+  base: {
+    fontSize: 'sm',
+    fontWeight: '500',
+    transition: 'fast',
+    // width: 'max-content',
+    alignSelf: 'stretch',
+    color: {
+      base: 'mantine.colors.text/90',
+      _hover: 'mantine.colors.text',
+    },
+  },
+  variants: {
+    truncate: {
+      'true': {
+        truncate: true,
+      },
+    },
+    dimmed: {
+      'true': {
+        color: {
+          base: 'mantine.colors.dimmed',
+          _hover: 'mantine.colors.text',
+        },
+      },
+    },
+  },
+})