@likec4/diagram 1.34.2 → 1.36.0

package/src/navigationpanel/controls/ViewDetailsCard.tsx

@@ -0,0 +1,244 @@
+import { css, cx } from '@likec4/styles/css'
+import { Box, HStack, styled } from '@likec4/styles/jsx'
+import { hstack, vstack } from '@likec4/styles/patterns'
+import {
+  type PopoverProps,
+  Badge,
+  Popover,
+  Text,
+  UnstyledButton,
+} from '@mantine/core'
+import { IconId, IconLink } from '@tabler/icons-react'
+import * as m from 'motion/react-m'
+import { ElementTag, MarkdownBlock } from '../../base/primitives'
+import { Link } from '../../components/Link'
+import { useDiagram } from '../../hooks/useDiagram'
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
+import type { NavigationPanelActorSnapshot } from '../actor'
+import { useNavigationActorSnapshot } from '../hooks'
+
+const selector = ({ context }: NavigationPanelActorSnapshot) => {
+  const view = context.viewModel
+  return {
+    id: view.id,
+    title: view.titleOrUntitled,
+    description: view.description,
+    tags: view.tags,
+    links: view.links,
+    relativePath: view.$view.relativePath,
+  }
+}
+
+type ViewDetailsCardData = ReturnType<typeof selector>
+
+export const ViewDetailsCard = (props: PopoverProps) => {
+  const data = useNavigationActorSnapshot(selector)
+  const portalProps = useMantinePortalProps()
+
+  return (
+    <Popover
+      position="bottom-end"
+      shadow="xl"
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      trapFocus
+      {...portalProps}
+      {...props}
+    >
+      <ViewDetailsCardTrigger linksCount={data.links.length} />
+      <ViewDetailsCardDropdown data={data} />
+    </Popover>
+  )
+}
+
+const ViewDetailsCardTrigger = ({ linksCount }: { linksCount: number }) => (
+  <Popover.Target>
+    <UnstyledButton
+      component={m.button}
+      layout="position"
+      whileTap={{
+        scale: 0.95,
+        translateY: 1,
+      }}
+      className={cx(
+        'group',
+        hstack({
+          gap: '2',
+          paddingInline: 'xxs',
+          paddingBlock: 'xxs',
+          rounded: 'sm',
+          userSelect: 'none',
+          cursor: 'pointer',
+          color: {
+            base: 'likec4.panel.action-icon.text',
+            _hover: 'likec4.panel.action-icon.text.hover',
+          },
+          backgroundColor: {
+            _hover: 'likec4.panel.action-icon.bg.hover',
+          },
+          display: {
+            base: 'none',
+            '@/xs': 'flex',
+          },
+        }),
+        ``,
+      )}>
+      <IconId size={16} stroke={1.8} />
+      {linksCount > 0 && (
+        <HStack gap={'[1px]'}>
+          <IconLink size={14} stroke={2} />
+          <Box
+            css={{
+              fontSize: '11px',
+              fontWeight: 600,
+              lineHeight: 1,
+              opacity: 0.8,
+            }}>
+            {linksCount}
+          </Box>
+        </HStack>
+      )}
+    </UnstyledButton>
+  </Popover.Target>
+)
+
+const SectionHeader = styled('div', {
+  base: {
+    fontSize: 'xs',
+    color: 'mantine.colors.dimmed',
+    fontWeight: 500,
+    userSelect: 'none',
+    mb: 'xxs',
+  },
+})
+
+const ViewDetailsCardDropdown = ({
+  data: {
+    id,
+    title,
+    description,
+    tags,
+    links,
+    relativePath,
+  },
+}: { data: ViewDetailsCardData }) => {
+  const diagram = useDiagram()
+  return (
+    <Popover.Dropdown
+      className={cx(
+        'nowheel nopan nodrag',
+        vstack({
+          margin: 'xs',
+          layerStyle: 'likec4.dropdown',
+          gap: 'md',
+          padding: 'md',
+          pointerEvents: 'all',
+          maxWidth: 'calc(100cqw - 32px)',
+          minWidth: 'calc(100cqw - 50px)',
+          maxHeight: 'calc(100cqh - 100px)',
+          width: 'max-content',
+          cursor: 'default',
+          '@/sm': {
+            minWidth: 400,
+            maxWidth: 550,
+          },
+          '@/lg': {
+            maxWidth: 700,
+          },
+        }),
+      )}>
+      <section>
+        <Text component="div" fw={500} size="xl">{title}</Text>
+        <HStack alignItems={'flex-start'} mt="1">
+          <ViewBadge label="id" value={id} />
+          {/* {relativePath && <ViewBadge label="source" value={relativePath} />} */}
+          <HStack gap="xs" flexWrap="wrap">
+            {tags.map((tag, i) => (
+              <ElementTag
+                key={tag}
+                tag={tag}
+                cursor="pointer"
+                onClick={e => {
+                  e.stopPropagation()
+                  diagram.openSearch(`#${tag}`)
+                }} />
+            ))}
+          </HStack>
+        </HStack>
+      </section>
+      {links.length > 0 && (
+        <section className={hstack({ alignItems: 'baseline' })}>
+          <SectionHeader>Links</SectionHeader>
+          <HStack gap="xs" flexWrap="wrap">
+            {links.map((link, i) => <Link key={`${i}-${link.url}`} value={link} />)}
+          </HStack>
+        </section>
+      )}
+      {description.isEmpty && (
+        <Text component="div" fw={500} size="xs" c="dimmed" my="md" style={{ userSelect: 'none' }}>No description</Text>
+      )}
+      {description.nonEmpty && (
+        <section>
+          <SectionHeader>Description</SectionHeader>
+          <MarkdownBlock
+            value={description}
+            fontSize="sm"
+            emptyText="No description"
+            className={css({
+              userSelect: 'all',
+            })}
+          />
+        </section>
+      )}
+    </Popover.Dropdown>
+  )
+}
+
+const ViewBadge = ({
+  label,
+  value,
+}: {
+  label: string
+  value: string
+}) => {
+  return (
+    <HStack gap="0.5">
+      <ViewBadgeLabel>{label}</ViewBadgeLabel>
+      <Badge
+        size="sm"
+        radius="sm"
+        variant="light"
+        color="gray"
+        tt="none"
+        fw={500}
+        classNames={{
+          root: css({
+            width: 'max-content',
+            overflow: 'visible',
+            px: '1',
+            color: {
+              _light: 'mantine.colors.gray[8]',
+            },
+          }),
+          label: css({
+            overflow: 'visible',
+          }),
+          section: css({
+            opacity: 0.5,
+            userSelect: 'none',
+            marginInlineEnd: '0.5',
+          }),
+        }}>
+        {value}
+      </Badge>
+    </HStack>
+  )
+}
+
+const ViewBadgeLabel = styled('div', {
+  base: {
+    color: 'mantine.colors.dimmed',
+    fontWeight: 500,
+    fontSize: 'xxs',
+    userSelect: 'none',
+  },
+})

package/src/navigationpanel/controls/index.ts

@@ -0,0 +1,6 @@
+export { BurgerButton } from './BurgerButton'
+export { NavigationButtons } from './NavigationButtons'
+export { OpenSource } from './OpenSource'
+export { SearchControl } from './SearchControl'
+export { ToggleReadonly } from './ToggleReadonly'
+export { ViewDetailsCard } from './ViewDetailsCard'

package/src/navigationpanel/dropdown/ProjectsMenu.tsx

@@ -0,0 +1,74 @@
+import { css } from '@likec4/styles/css'
+import { Box, HStack } from '@likec4/styles/jsx'
+import { type ButtonProps, Button, Menu, MenuDropdown, MenuItem, MenuTarget } from '@mantine/core'
+import { IconChevronDown } from '@tabler/icons-react'
+import { useLikeC4ProjectId, useLikeC4ProjectsContext } from '../../likec4model/useLikeC4Project'
+
+export function ProjectsMenu(props: ButtonProps) {
+  const { projects, onProjectChange } = useLikeC4ProjectsContext()
+  const projectId = useLikeC4ProjectId()
+
+  if (projects.length <= 1) {
+    return null
+  }
+
+  return (
+    <HStack gap="0.5" alignItems="baseline">
+      <Box
+        css={{
+          fontWeight: '400',
+          fontSize: 'xxs',
+          color: 'mantine.colors.dimmed',
+          userSelect: 'none',
+        }}>
+        Project
+      </Box>
+      <Menu shadow="md" position="bottom-start" offset={{ mainAxis: 2 }} closeOnItemClick>
+        <MenuTarget>
+          <Button
+            tabIndex={-1}
+            autoFocus={false}
+            variant="subtle"
+            size="compact-xs"
+            color="gray"
+            classNames={{
+              root: css({
+                fontWeight: '400',
+                fontSize: 'xxs',
+                height: 'auto',
+                lineHeight: 1.1,
+                color: {
+                  _light: 'mantine.colors.gray[9]',
+                },
+              }),
+              section: css({
+                '&:is([data-position="right"])': {
+                  marginInlineStart: '1',
+                },
+              }),
+            }}
+            rightSection={<IconChevronDown opacity={0.5} size={12} stroke={1.5} />}
+            {...props}>
+            {projectId}
+          </Button>
+        </MenuTarget>
+
+        <MenuDropdown>
+          {projects.map(({ id, title }) => (
+            <MenuItem
+              key={id}
+              onClick={(e) => {
+                if (projectId === id) {
+                  e.stopPropagation()
+                  return
+                }
+                onProjectChange(id)
+              }}>
+              {title ?? id}
+            </MenuItem>
+          ))}
+        </MenuDropdown>
+      </Menu>
+    </HStack>
+  )
+}

package/src/navigationpanel/editorpanel/CenterCamera.tsx

@@ -0,0 +1,15 @@
+import { IconFocusCentered } from '@tabler/icons-react'
+import { useDiagram } from '../../hooks/useDiagram'
+import { PanelActionIcon } from '../_common'
+import { Tooltip } from './_common'
+
+export const CenterCamera = () => {
+  const diagram = useDiagram()
+  return (
+    <Tooltip label="Center camera">
+      <PanelActionIcon onClick={() => diagram.fitDiagram()}>
+        <IconFocusCentered />
+      </PanelActionIcon>
+    </Tooltip>
+  )
+}

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: 'xs',
+            layerStyle: 'likec4.panel',
+            position: 'relative',
+            cursor: 'pointer',
+            padding: 'xxs',
+            pointerEvents: 'all',
+          })}
+          initial={{
+            opacity: 0,
+            translateX: -20,
+          }}
+          animate={{
+            opacity: 1,
+            translateX: 0,
+          }}
+          exit={{
+            opacity: 0,
+            translateX: -20,
+          }}
+        >
+          <TooltipGroup openDelay={600} closeDelay={120}>
+            <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>
+  )
+}