@likec4/diagram 1.34.2 → 1.36.0

package/src/navigationpanel/editorpanel/ManualLayoutToolsButton.tsx

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

@@ -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: '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

@@ -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 = (): 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

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

package/src/navigationpanel/styles.css.ts

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

@@ -0,0 +1,165 @@
+import { css } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
+import { Badge, Button, Portal } from '@mantine/core'
+import {
+  IconPlayerPlayFilled,
+  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 { Tooltip } from '../_common'
+import { useNavigationActor } from '../hooks'
+
+const TriggerWalkthroughButton = Button.withProps({
+  // Button is polymorphic, but we dont want it to inherit the motion props
+  component: m.button as any as 'button',
+  // @ts-expect-error
+  layoutId: 'trigger-dynamic-walkthrough',
+  variant: 'filled',
+  size: 'xs',
+  fw: '500',
+  className: css({
+    flexShrink: 0,
+  }),
+})
+
+export const StartWalkthroughButton = () => {
+  const diagram = useDiagram()
+  const actor = useNavigationActor()
+  return (
+    <Tooltip label="Start Dynamic View Walkthrough">
+      <TriggerWalkthroughButton
+        onClick={e => {
+          e.stopPropagation()
+          actor.closeDropdown()
+          diagram.startWalkthrough()
+        }}
+        rightSection={<IconPlayerPlayFilled size={10} />}
+      >
+        Start
+      </TriggerWalkthroughButton>
+    </Tooltip>
+  )
+}
+
+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 const 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="trigger-dynamic-walkthrough"
+        variant="light"
+        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 />}
+    </AnimatePresence>
+  )
+}

package/src/navigationpanel/walkthrough/index.tsx

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

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -5,10 +5,10 @@ export const backdropOpacity = '--_opacity'
 
 export const dialog = css({
   boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
+  margin: '0',
+  padding: '0',
   position: 'fixed',
-  inset: 0,
+  inset: '0',
   width: '100vw',
   height: '100vh',
   maxWidth: '100vw',
@@ -34,12 +34,12 @@ export const card = css({
   border: `none`,
   backgroundImage: `
     linear-gradient(180deg,
-      color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent),
-      color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px,
-      color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px,
+      color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
+      color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
+      color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
       transparent 80px
     ),
-    linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px)
+    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
   `,
   '& .react-flow__attribution': {
     display: 'none',
@@ -99,7 +99,7 @@ export const viewButton = css({
   width: '100%',
   background: 'mantine.colors.body',
   borderRadius: 'sm',
-  padding: `10px 8px`,
+  padding: `[10px 8px]`,
   // gap: 6,
   // alignItems: 'flex-start',
   transition: 'fast',
@@ -163,8 +163,8 @@ export const tabsList = css({
   background: 'mantine.colors.gray[1]',
   borderRadius: 'sm',
   flexWrap: 'nowrap',
-  gap: '6px',
-  padding: '4px',
+  gap: '1.5', // 6px
+  padding: '1',
   _dark: {
     background: 'mantine.colors.dark[7]',
   },
@@ -174,7 +174,7 @@ export const tabsTab = css({
   fontSize: 'xs',
   fontWeight: 500,
   flexGrow: 1,
-  padding: '6px 8px',
+  padding: '[6px 8px]',
   transition: 'fast',
   borderRadius: 'sm',
   color: 'mantine.colors.gray[7]',
@@ -208,15 +208,15 @@ export const tabsPanel = css({
   overflow: 'hidden',
   position: 'relative',
   '&:not(:has(.mantine-ScrollArea-root))': {
-    paddingLeft: '4px',
-    paddingRight: '4px',
+    paddingLeft: '1',
+    paddingRight: '1',
   },
   '& .mantine-ScrollArea-root': {
     width: '100%',
     height: '100%',
     '& > div': {
-      paddingLeft: '4px',
-      paddingRight: '4px',
+      paddingLeft: '1',
+      paddingRight: '1',
     },
   },
 })
@@ -246,8 +246,8 @@ export const resizeHandle = css({
   borderTop: 'none',
   borderLeft: 'none',
   borderRadius: '2px',
-  bottom: '2px',
-  right: '2px',
+  bottom: '0.5',
+  right: '0.5',
   transition: 'fast',
   cursor: 'se-resize',
   _hover: {

package/src/overlays/element-details/ElementDetailsCard.tsx

@@ -9,6 +9,7 @@ import {
   type ViewId,
 } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
+import { HStack } from '@likec4/styles/jsx'
 import {
   type TextProps,
   ActionIcon,
@@ -266,12 +267,8 @@ export function ElementDetailsCard({
           dragElastic={0}
           dragMomentum={false}
           dragListener={false}
-          className={cx(
-            css({
-              likec4Palette: nodeModel?.color ?? elementModel.color,
-            }),
-            styles.card,
-          )}
+          data-likec4-color={nodeModel?.color ?? elementModel.color}
+          className={styles.card}
           initial={{
             top,
             left,
@@ -349,9 +346,7 @@ export function ElementDetailsCard({
                     <ElementTag
                       key={tag}
                       tag={tag}
-                      css={{
-                        cursor: 'pointer',
-                      }}
+                      cursor="pointer"
                       onClick={e => {
                         e.stopPropagation()
                         diagram.openSearch(`#${tag}`)
@@ -446,9 +441,9 @@ export function ElementDetailsCard({
                   {elementModel.links.length > 0 && (
                     <>
                       <PropertyLabel>links</PropertyLabel>
-                      <Stack gap={'xs'} align="flex-start">
+                      <HStack gap={'xs'} flexWrap="wrap">
                         {elementModel.links.map((link, i) => <Link key={i} value={link} />)}
-                      </Stack>
+                      </HStack>
                     </>
                   )}
                   {elementModel.$element.metadata && <ElementMetata value={elementModel.$element.metadata} />}
@@ -609,7 +604,7 @@ function ElementMetata({
           gap: `[4px 4px]`,
           alignItems: 'baseline',
           justifyItems: 'stretch',
-          paddingRight: '2xs',
+          paddingRight: 'xxs',
         })}>
         {entries(metadata).map(([key, value]) => (
           <div
@@ -654,7 +649,7 @@ function ElementMetata({
                 <div
                   className={css({
                     fontSize: 'sm',
-                    padding: '2xs',
+                    padding: 'xxs',
                     whiteSpace: 'pre',
                     fontFamily: '[var(--mantine-font-family-monospace)]',
                     userSelect: 'all',

package/src/overlays/element-details/TabPanelDeployments.css.ts

@@ -8,8 +8,8 @@ export const treeNode = css({
 
 export const treeNodeLabel = css({
   cursor: 'default',
-  marginTop: 0,
-  marginBottom: 0,
+  marginTop: '0',
+  marginBottom: '0',
 })
 
 const label = css({
@@ -44,8 +44,8 @@ export const instanceLabel = cx(
     justifyContent: 'stretch',
     flexWrap: 'nowrap',
     height: '36px',
-    paddingInlineStart: '16px',
-    paddingInlineEnd: '10px',
+    paddingInlineStart: '[16px]',
+    paddingInlineEnd: '2.5', // 10px
     borderRadius: 'sm',
     alignItems: 'center',
     color: 'mantine.colors.gray[7]',