@likec4/diagram 1.41.0 → 1.42.1

package/src/navigationpanel/controls/ViewDetailsCard.tsx

@@ -1,263 +0,0 @@
-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 { useState } from 'react'
-import { ElementTag, MarkdownBlock } from '../../base/primitives'
-import { Link } from '../../components/Link'
-import { useDiagram, useOnDiagramEvent } 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 [opened, setOpened] = useState(false)
-  const data = useNavigationActorSnapshot(selector)
-  const portalProps = useMantinePortalProps()
-
-  return (
-    <Popover
-      position="bottom-end"
-      shadow="xl"
-      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-      offset={{
-        mainAxis: 4,
-      }}
-      opened={opened}
-      onChange={setOpened}
-      {...portalProps}
-      {...props}
-    >
-      <ViewDetailsCardTrigger linksCount={data.links.length} onOpen={() => setOpened(true)} />
-      {opened && <ViewDetailsCardDropdown data={data} onClose={() => setOpened(false)} />}
-    </Popover>
-  )
-}
-
-const ViewDetailsCardTrigger = ({ linksCount, onOpen }: { linksCount: number; onOpen: () => void }) => (
-  <Popover.Target>
-    <UnstyledButton
-      component={m.button}
-      layout="position"
-      whileTap={{
-        scale: 0.95,
-        translateY: 1,
-      }}
-      onClick={e => {
-        e.stopPropagation()
-        onOpen()
-      }}
-      className={cx(
-        'group',
-        hstack({
-          gap: '2',
-          paddingInline: '2',
-          paddingBlock: '1',
-          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,
-  },
-  onClose,
-}: { data: ViewDetailsCardData; onClose: () => void }) => {
-  const diagram = useDiagram()
-
-  useOnDiagramEvent('paneClick', onClose)
-  useOnDiagramEvent('nodeClick', onClose)
-
-  return (
-    <Popover.Dropdown
-      className={cx(
-        'nowheel nopan nodrag',
-        vstack({
-          margin: 'xs',
-          layerStyle: 'likec4.dropdown',
-          gap: 'md',
-          padding: 'md',
-          paddingBottom: 'lg',
-          pointerEvents: 'all',
-          maxWidth: 'calc(100cqw - 52px)',
-          minWidth: '200px',
-          maxHeight: 'calc(100cqh - 100px)',
-          width: 'max-content',
-          cursor: 'default',
-          overflow: 'auto',
-          overscrollBehavior: 'contain',
-          '@/sm': {
-            minWidth: 400,
-            maxWidth: 550,
-          },
-          '@/lg': {
-            maxWidth: 700,
-          },
-        }),
-      )}>
-      <section>
-        <Text component="div" fw={500} size="xl" lh={'sm'}>{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" 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: {
-              _dark: 'mantine.colors.gray[4]',
-              _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

@@ -1,6 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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
-        withinPortal={false} // if we render menu in portal, NavigationPanelDropdown receives onMouseLeave event
-        shadow="md"
-        position="bottom-start"
-        offset={{ mainAxis: 2 }}>
-        <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

@@ -1,15 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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>
-  )
-}