@likec4/diagram 1.40.0 → 1.42.0

package/src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx

@@ -1,148 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { hstack } from '@likec4/styles/patterns'
-import {
-  type PopoverProps,
-  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 { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
-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">
-    <PanelActionIcon
-      classNames={{
-        root: 'action-icon',
-        icon: css({
-          '& > svg': {
-            width: '70%',
-            height: '70%',
-          },
-        }),
-      }}
-      onClick={onClick}>
-      {icon}
-    </PanelActionIcon>
-  </Tooltip>
-)
-
-export const ManualLayoutToolsButton = (props: PopoverProps) => {
-  const diagram = useDiagram()
-  const portalProps = useMantinePortalProps()
-  return (
-    <Popover
-      position="right"
-      offset={{
-        mainAxis: 12,
-      }}
-      clickOutsideEvents={[
-        'pointerdown',
-      ]}
-      {...portalProps}
-      {...props}>
-      <PopoverTarget>
-        <Tooltip label="Manual layouting tools">
-          <PanelActionIcon>
-            <IconLayoutCollage />
-          </PanelActionIcon>
-        </Tooltip>
-      </PopoverTarget>
-      <PopoverDropdown
-        className={hstack({
-          gap: '0.5',
-          layerStyle: 'likec4.panel',
-          padding: '1',
-          pointerEvents: 'all',
-        })}>
-        <TooltipGroup>
-          <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')
-            }} />
-          <Action
-            label="Reset all control points"
-            icon={<IconRouteOff />}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.resetEdgeControlPoints()
-            }} />
-        </TooltipGroup>
-      </PopoverDropdown>
-    </Popover>
-  )
-}

package/src/navigationpanel/editorpanel/_common.tsx

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

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

package/src/navigationpanel/editorpanel/styles.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/navigationpanel/hooks.tsx

@@ -1,70 +0,0 @@
-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 = (): NavigationPanelActorRef => {
-  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 interface 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

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

package/src/navigationpanel/styles.css.ts

@@ -1,28 +0,0 @@
-import { cva } from '@likec4/styles/css'
-
-export const breadcrumbTitle = cva({
-  base: {
-    fontSize: 'sm',
-    fontWeight: '500',
-    transition: 'fast',
-    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',
-        },
-      },
-    },
-  },
-})

package/src/navigationpanel/walkthrough/ActiveWalkthroughControls.tsx

@@ -1,132 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { Badge, Button, Portal } from '@mantine/core'
-import {
-  IconPlayerSkipBackFilled,
-  IconPlayerSkipForwardFilled,
-  IconPlayerStopFilled,
-} from '@tabler/icons-react'
-import { AnimatePresence } from 'motion/react'
-import * as m from 'motion/react-m'
-import { isTruthy } from 'remeda'
-import { useMantinePortalProps } from '../../hooks'
-import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
-import { TriggerWalkthroughButton } from './DynamicViewControls'
-
-const PrevNextButton = Button.withProps({
-  // Button is polymorphic, but we dont want it to inherit the motion props
-  component: m.button as any as 'button',
-  variant: 'light',
-  size: 'xs',
-  fw: '500',
-})
-
-const ParallelFrame = () => {
-  const { portalProps } = useMantinePortalProps()
-  return (
-    <Portal {...portalProps}>
-      <Box
-        css={{
-          position: 'absolute',
-          margin: '0',
-          padding: '0',
-          top: '0',
-          left: '0',
-          width: '100%',
-          height: '100%',
-          border: `2px solid`,
-          borderColor: 'mantine.colors.orange[6]',
-          pointerEvents: 'none',
-          md: {
-            borderWidth: 4,
-          },
-        }}
-      >
-      </Box>
-    </Portal>
-  )
-}
-
-export function ActiveWalkthroughControls() {
-  const diagram = useDiagram()
-  const {
-    isParallel,
-    hasNext,
-    hasPrevious,
-    currentStep,
-    totalSteps,
-  } = useDiagramContext(s => {
-    const currentStepIndex = s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId)
-    return ({
-      isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
-      hasNext: currentStepIndex < s.xyedges.length - 1,
-      hasPrevious: currentStepIndex > 0,
-      currentStep: currentStepIndex + 1,
-      totalSteps: s.xyedges.length,
-    })
-  })
-
-  return (
-    <AnimatePresence propagate>
-      <TriggerWalkthroughButton
-        key="stop-walkthrough"
-        variant="light"
-        size="xs"
-        color="orange"
-        mr={'sm'}
-        onClick={e => {
-          e.stopPropagation()
-          diagram.stopWalkthrough()
-        }}
-        rightSection={<IconPlayerStopFilled size={10} />}
-      >
-        Stop
-      </TriggerWalkthroughButton>
-
-      <PrevNextButton
-        key="prev"
-        disabled={!hasPrevious}
-        onClick={() => diagram.walkthroughStep('previous')}
-        leftSection={<IconPlayerSkipBackFilled size={10} />}
-      >
-        Previous
-      </PrevNextButton>
-
-      <Badge
-        key="step-badge"
-        component={m.div}
-        size="md"
-        radius="sm"
-        // fw={500}
-        variant={isParallel ? 'gradient' : 'transparent'}
-        gradient={{ from: 'red', to: 'orange', deg: 90 }}
-        rightSection={
-          <m.div
-            className={css({
-              fontSize: 'xxs',
-              display: isParallel ? 'block' : 'none',
-            })}>
-            parallel
-          </m.div>
-        }
-        className={css({
-          alignItems: 'baseline',
-        })}
-      >
-        <m.span>
-          {currentStep} / {totalSteps}
-        </m.span>
-      </Badge>
-
-      <PrevNextButton
-        key="next"
-        disabled={!hasNext}
-        onClick={() => diagram.walkthroughStep('next')}
-        rightSection={<IconPlayerSkipForwardFilled size={10} />}
-      >
-        Next
-      </PrevNextButton>
-      {isParallel && <ParallelFrame key="parallel-frame" />}
-    </AnimatePresence>
-  )
-}

package/src/navigationpanel/walkthrough/DynamicViewControls.tsx

@@ -1,125 +0,0 @@
-import { invariant } from '@likec4/core'
-import type { DynamicViewDisplayVariant } from '@likec4/core/types'
-import { css } from '@likec4/styles/css'
-import { type ButtonProps, Button, SegmentedControl } from '@mantine/core'
-import {
-  IconPlayerPlayFilled,
-} from '@tabler/icons-react'
-import { type HTMLMotionProps } from 'motion/react'
-import * as m from 'motion/react-m'
-import { forwardRef } from 'react'
-import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
-import { Tooltip } from '../_common'
-import { useNavigationActor } from '../hooks'
-
-export const TriggerWalkthroughButton = forwardRef<HTMLButtonElement, ButtonProps & HTMLMotionProps<'button'>>((
-  props,
-  ref,
-) => (
-  <Button
-    variant="filled"
-    size="xs"
-    fw="500"
-    {...props}
-    ref={ref}
-    component={m.button}
-    layoutId={'trigger-dynamic-walkthrough'}
-    className={css({
-      flexShrink: 0,
-    })}
-  />
-))
-
-function StartWalkthroughButton({ onClick }: { onClick: () => void }) {
-  const diagram = useDiagram()
-  const actor = useNavigationActor()
-  return (
-    <Tooltip label="Start Dynamic View Walkthrough">
-      <TriggerWalkthroughButton
-        onClick={e => {
-          e.stopPropagation()
-          actor.closeDropdown()
-          diagram.startWalkthrough()
-        }}
-        size="compact-xs"
-        h={26}
-        classNames={{
-          label: css({
-            display: {
-              base: 'none',
-              '@/md': '[inherit]',
-            },
-          }),
-          section: css({
-            marginInlineStart: {
-              base: '0',
-              '@/md': '2',
-            },
-          }),
-        }}
-        rightSection={<IconPlayerPlayFilled size={10} />}
-      >
-        Start
-      </TriggerWalkthroughButton>
-    </Tooltip>
-  )
-}
-
-function DynamicViewModeSwitcher({
-  value,
-  onChange,
-}: {
-  value: DynamicViewDisplayVariant
-  onChange: (variant: DynamicViewDisplayVariant) => void
-}) {
-  return (
-    <m.div layout="position">
-      <SegmentedControl
-        size="xs"
-        value={value}
-        component={m.div}
-        onChange={variant => {
-          invariant(variant === 'diagram' || variant === 'sequence', 'Invalid dynamic view variant')
-          onChange(variant)
-        }}
-        classNames={{
-          label: css({
-            fontSize: 'xxs',
-          }),
-        }}
-        data={[
-          {
-            value: 'diagram',
-            label: 'Diagram',
-          },
-          {
-            value: 'sequence',
-            label: 'Sequence',
-          },
-        ]} />
-    </m.div>
-  )
-}
-
-export function DynamicViewControls() {
-  const dynamicViewVariant = useDiagramContext(c => c.dynamicViewVariant)
-  const diagram = useDiagram()
-  const actor = useNavigationActor()
-  return (
-    <>
-      <DynamicViewModeSwitcher
-        key="dynamic-view-mode-switcher"
-        value={dynamicViewVariant}
-        onChange={mode => {
-          diagram.switchDynamicViewVariant(mode)
-        }}
-      />
-      <StartWalkthroughButton
-        key="trigger-dynamic-walkthrough"
-        onClick={() => {
-          actor.closeDropdown()
-          diagram.startWalkthrough()
-        }} />
-    </>
-  )
-}

package/src/navigationpanel/walkthrough/WalkthroughPanel.css.ts

@@ -1,21 +0,0 @@
-import { css } from '@likec4/styles/css'
-// import { mantine } from '../../../theme-vars'
-
-export const edgeNoteCloseButton = css({
-  position: 'absolute',
-  top: '[1px]',
-  right: '[1px]',
-  zIndex: 9,
-})
-
-export const edgeNoteText = css({
-  userSelect: 'all',
-  textAlign: 'left',
-  whiteSpaceCollapse: 'preserve-breaks',
-  textWrap: 'pretty',
-  lineHeight: 1.25,
-  '--text-fz': '{fontSizes.sm}',
-  md: {
-    '--text-fz': '{fontSizes.md}',
-  },
-})