@likec4/diagram 1.40.0 → 1.42.0

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

@@ -1,153 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { hstack } from '@likec4/styles/patterns'
-import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
-import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
-import { LayoutGroup, m } from 'motion/react'
-import { memo } from 'react'
-import { SearchControl } from '../../../components/SearchControl'
-import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
-import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
-import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import { stopPropagation } from '../../../utils'
-import { ActionIcon, Tooltip } from './_shared'
-import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
-import { LayoutDriftNotification } from './LayoutDriftNotification'
-import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
-import { NavigationButtons } from './NavigationButtons'
-import * as css from './styles.css'
-import { ToggleReadonly } from './ToggleReadonly'
-
-const ControlsDefaultLayout: ControlsCustomLayout = ({
-  burgerMenu,
-  navigationButtons,
-  search,
-  actionsGroup,
-}) => (
-  <m.div
-    initial={{
-      opacity: 0.05,
-      translateX: -30,
-      translateY: -16,
-    }}
-    animate={{
-      opacity: 1,
-      translateX: 0,
-      translateY: 0,
-    }}
-    exit={{
-      opacity: 0.05,
-      translateX: -30,
-      translateY: -10,
-    }}
-    className={cx(
-      hstack({
-        gap: 'sm',
-        alignItems: 'flex-start',
-      }),
-      'react-flow__panel',
-      css.panel,
-      'likec4-top-left-panel',
-    )}
-    onClick={stopPropagation}
-  >
-    <Stack align="flex-start" gap="xs">
-      <LayoutGroup>
-        <Group
-          className={cx(css.navigationButtons, 'likec4-navigation-webview')}
-          gap={'xs'}>
-          {burgerMenu}
-          {navigationButtons}
-        </Group>
-      </LayoutGroup>
-      {actionsGroup}
-    </Stack>
-    <Box>
-      {search}
-    </Box>
-  </m.div>
-)
-
-export const Controls = memo(() => {
-  const { hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
-    hasLayoutDrift: c.view.hasLayoutDrift ?? false,
-    viewportChanged: c.viewportChangedManually,
-    isNotActiveWalkthrough: c.activeWalkthrough === null,
-  }))
-  const diagram = useDiagram()
-  const {
-    onOpenSource,
-    onBurgerMenuClick,
-  } = useDiagramEventHandlers()
-  const {
-    enableControls,
-    enableSearch,
-    enableNavigationButtons,
-    enableReadOnly,
-    enableVscode,
-  } = useEnabledFeatures()
-  const notReadOnly = !enableReadOnly
-  const portalProps = useMantinePortalProps()
-  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout
-  return (
-    <>
-      {isNotActiveWalkthrough && (
-        <ControlsLayout
-          burgerMenu={onBurgerMenuClick && (
-            <ActionIcon
-              onClick={e => {
-                e.stopPropagation()
-                onBurgerMenuClick()
-              }}>
-              <IconMenu2 />
-            </ActionIcon>
-          )}
-          navigationButtons={enableNavigationButtons && <NavigationButtons />}
-          search={enableSearch && (
-            <SearchControl
-              onClick={e => {
-                e.stopPropagation()
-                diagram.openSearch()
-              }}
-            />
-          )}
-          actionsGroup={
-            <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-              {enableVscode && (
-                <Tooltip label="Open source" {...portalProps}>
-                  <ActionIcon
-                    onClick={e => {
-                      e.stopPropagation()
-                      const viewId = diagram.currentView.id
-                      onOpenSource?.({ view: viewId })
-                    }}>
-                    <IconFileSymlink stroke={1.5} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-              {enableControls && <ToggleReadonly />}
-              {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
-              {enableControls && notReadOnly && (
-                <>
-                  <ChangeAutoLayoutButton {...portalProps} />
-                  <ManualLayoutToolsButton {...portalProps} />
-                </>
-              )}
-              {enableControls && (
-                <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
-                  <ActionIcon
-                    onClick={e => {
-                      e.stopPropagation()
-                      diagram.fitDiagram()
-                    }}>
-                    <IconFocusCentered />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-            </ActionIconGroup>
-          }
-        />
-      )}
-    </>
-  )
-})

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

@@ -1,50 +0,0 @@
-import {
-  type PopoverProps,
-  Code,
-  HoverCard,
-  HoverCardDropdown,
-  HoverCardTarget,
-  Notification,
-  Text,
-} from '@mantine/core'
-import {
-  IconAlertTriangle,
-} from '@tabler/icons-react'
-
-import { css } from '@likec4/styles/css'
-import { ActionIcon } from './_shared'
-
-export const LayoutDriftNotification = (props: PopoverProps) => (
-  <HoverCard
-    position="right-start"
-    openDelay={200}
-    closeDelay={100}
-    {...props}>
-    <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/likec4diagram/ui/controls/ManualLayoutToolsButton.tsx

@@ -1,125 +0,0 @@
-import { type PopoverProps, ActionIconGroup, Group, Popover, PopoverDropdown, PopoverTarget } from '@mantine/core'
-import {
-  IconLayoutAlignBottom,
-  IconLayoutAlignCenter,
-  IconLayoutAlignLeft,
-  IconLayoutAlignMiddle,
-  IconLayoutAlignRight,
-  IconLayoutAlignTop,
-  IconLayoutBoardSplit,
-  IconLayoutCollage,
-  IconRouteOff,
-} from '@tabler/icons-react'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { ActionIcon, Tooltip } from './_shared'
-
-const Action = ({
-  label,
-  icon,
-  onClick,
-}: {
-  label: string
-  icon: React.ReactNode
-  onClick: React.MouseEventHandler
-}) => (
-  <Tooltip label={label} withinPortal={false} position="top">
-    <ActionIcon onClick={onClick}>
-      {icon}
-    </ActionIcon>
-  </Tooltip>
-)
-
-export const ManualLayoutToolsButton = (props: PopoverProps) => {
-  const diagram = useDiagram()
-
-  return (
-    <Popover
-      position="right-start"
-      clickOutsideEvents={[
-        'pointerdown',
-      ]}
-      radius="xs"
-      shadow="lg"
-      offset={{
-        mainAxis: 10,
-      }}
-      {...props}>
-      <PopoverTarget>
-        <Tooltip label="Manual layouting tools" withinPortal={false} position="top-end">
-          <ActionIcon>
-            <IconLayoutCollage />
-          </ActionIcon>
-        </Tooltip>
-      </PopoverTarget>
-      <PopoverDropdown p={0}>
-        <Group gap={'xs'}>
-          <ActionIconGroup pos={'relative'}>
-            <Action
-              label="Align in columns"
-              icon={<IconLayoutBoardSplit />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Column')
-              }} />
-            <Action
-              label="Align left"
-              icon={<IconLayoutAlignLeft />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Left')
-              }} />
-            <Action
-              label="Align center"
-              icon={<IconLayoutAlignCenter />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Center')
-              }} />
-            <Action
-              label="Align right"
-              icon={<IconLayoutAlignRight />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Right')
-              }} />
-            <Action
-              label="Align in rows"
-              icon={<IconLayoutBoardSplit style={{ transform: 'rotate(90deg)' }} />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Row')
-              }} />
-            <Action
-              label="Align top"
-              icon={<IconLayoutAlignTop />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Top')
-              }} />
-            <Action
-              label="Align middle"
-              icon={<IconLayoutAlignMiddle />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Middle')
-              }} />
-            <Action
-              label="Align bottom"
-              icon={<IconLayoutAlignBottom />}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.align('Bottom')
-              }} />
-          </ActionIconGroup>
-          <Action
-            label="Reset all control points"
-            icon={<IconRouteOff />}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.resetEdgeControlPoints()
-            }} />
-        </Group>
-      </PopoverDropdown>
-    </Popover>
-  )
-}

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

@@ -1,61 +0,0 @@
-import { IconChevronRight } from '@tabler/icons-react'
-
-import { AnimatePresence, m } from 'motion/react'
-
-import { IconChevronLeft } from '@tabler/icons-react'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import { ActionIcon } from './_shared'
-
-export const NavigationButtons = () => {
-  const diagram = useDiagram()
-  const {
-    hasStepBack,
-    hasStepForward,
-  } = useDiagramContext(s => ({
-    hasStepBack: s.navigationHistory.currentIndex > 0,
-    hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1,
-  }))
-  return (
-    <AnimatePresence>
-      {hasStepBack && (
-        <ActionIcon
-          variant="subtle"
-          component={m.button}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.navigate('back')
-          }}
-          layout
-          initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-          animate={{ opacity: 1, transform: 'translateX(0)' }}
-          exit={{
-            opacity: 0.05,
-            transform: 'translateX(-10px)',
-          }}
-          key={'back'}
-        >
-          <IconChevronLeft />
-        </ActionIcon>
-      )}
-      {hasStepForward && (
-        <ActionIcon
-          variant="subtle"
-          component={m.button}
-          layout
-          initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-          animate={{ opacity: 1, transform: 'translateX(0)' }}
-          exit={{
-            opacity: 0,
-            transform: 'translateX(10px)',
-          }}
-          key={'forward'}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.navigate('forward')
-          }}>
-          <IconChevronRight />
-        </ActionIcon>
-      )}
-    </AnimatePresence>
-  )
-}

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

@@ -1,30 +0,0 @@
-import { IconLock, IconLockOpen2 } from '@tabler/icons-react'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import type { DiagramContext } from '../../../state/types'
-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/_shared.ts

@@ -1,21 +0,0 @@
-import { ActionIcon as MantineActionIcon, Tooltip as MantineTooltip } from '@mantine/core'
-
-export const Tooltip = MantineTooltip.withProps({
-  color: 'dark',
-  fz: 'xs',
-  position: 'right',
-  openDelay: 600,
-  closeDelay: 120,
-  label: '',
-  children: null,
-  offset: 8,
-  withinPortal: false,
-})
-
-export const ActionIcon = MantineActionIcon.withProps({
-  classNames: {
-    root: 'action-icon',
-  },
-  variant: 'default',
-  color: 'gray',
-})

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

@@ -1,84 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const navigationButtons = css({
-  gap: 'xxs',
-  _empty: {
-    display: 'none',
-  },
-})
-
-export const panel = css({
-  top: 'md',
-  left: 'md',
-  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/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.ts

@@ -1,51 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const card = css({
-  cursor: 'default',
-  minWidth: 200,
-  maxWidth: 'calc(100vw - 16px)',
-  width: 'auto',
-  // backgroundColor: 'mantine.colors.body',
-  borderRadius: 'sm',
-  sm: {
-    minWidth: 250,
-    maxWidth: '90vw',
-  },
-  md: {
-    minWidth: 350,
-    maxWidth: '70vw',
-  },
-
-  shadow: {
-    base: 'xs',
-    _whenPanning: 'none',
-  },
-
-  backgroundColor: {
-    base: 'mantine.colors.body/80',
-    _dark: 'mantine.colors.dark[6]/80',
-    _whenPanning: 'mantine.colors.body',
-  },
-  // _dark: {
-  //   backgroundColor: 'mantine.colors.dark[6]',
-  // },
-  // _noReduceGraphics: {
-  //   borderRadius: 'sm',
-  //   backgroundColor: `mantine.colors.body/80`,
-  //   // WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  //   // backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  //   _dark: {
-  //     backgroundColor: `mantine.colors.dark[6]/80`,
-  //   },
-  // },
-})
-
-export const title = css({})
-
-export const description = css({
-  whiteSpaceCollapse: 'preserve-breaks',
-  color: 'mantine.colors.gray[7]',
-  _dark: {
-    color: 'mantine.colors.gray[5]',
-  },
-})