@likec4/diagram 1.9.0 → 1.12.1

package/src/ui/DynamicViewWalkthrough.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, ButtonGroup } from '@mantine/core'
+import { nonNullable } from '@likec4/core'
+import { Badge, Box, Button, ButtonGroup } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import {
   IconPlayerPlayFilled,
@@ -7,8 +8,9 @@ import {
   IconPlayerStopFilled
 } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { isNullish, isNumber } from 'remeda'
-import { useDiagramState, useXYStore } from '../hooks'
+import { AnimatePresence, m } from 'framer-motion'
+import { first, isNonNull, isTruthy } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useXYStore } from '../hooks'
 import * as css from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {
@@ -16,16 +18,19 @@ export function DynamicViewWalkthrough() {
   const {
     nextDynamicStep,
     stopDynamicView,
-    activeDynamicViewStep,
-    hasNextSteps
+    isActive,
+    isParallel,
+    hasNext,
+    hasPrevious
   } = useDiagramState(s => ({
     nextDynamicStep: s.nextDynamicStep,
-    stopDynamicView: s.stopDynamicView,
-    activeDynamicViewStep: s.activeDynamicViewStep,
-    hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
+    stopDynamicView: s.stopWalkthrough,
+    isActive: isNonNull(s.activeWalkthrough),
+    isParallel: isTruthy(s.activeWalkthrough?.parallelPrefix),
+    hasNext: s.activeWalkthrough?.hasNext ?? false,
+    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false
   }))
-
-  const isActive = isNumber(activeDynamicViewStep)
+  const diagramApi = useDiagramStoreApi()
 
   useHotkeys(
     isActive
@@ -49,58 +54,98 @@ export function DynamicViewWalkthrough() {
     radius: isMobile ? 'lg' : 'xl'
   }
 
+  const startWalkthrough = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const {
+      xyedges,
+      activateWalkthrough
+    } = diagramApi.getState()
+    const firstEdge = nonNullable(first(xyedges), 'expected at least one edge')
+    activateWalkthrough(firstEdge.data.edge.id)
+  }
+
   const nextStep = (increment = 1) => (e: React.MouseEvent) => {
     e.stopPropagation()
     nextDynamicStep(increment)
   }
 
   return (
-    <Box
-      className={clsx('react-flow__panel', css.container)}
-      onClick={(e) => e.stopPropagation()}
-      onDoubleClick={(e) => e.stopPropagation()}
-    >
-      {isNullish(activeDynamicViewStep)
-        && (
-          <Button
-            {...buttonProps}
-            className={clsx(css.buttons, css.btn)}
-            rightSection={<IconPlayerPlayFilled />}
-            onClick={nextStep()}
-            px={'xl'}>
-            Start
-          </Button>
+    <AnimatePresence>
+      {isParallel && (
+        <Box
+          layout
+          key={'parallel-frame'}
+          component={m.div}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className={clsx('react-flow__panel', css.parallelStateFrame)}
+        />
+      )}
+      <Box
+        className={clsx('react-flow__panel', css.container)}
+        onClick={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        {!isActive
+          && (
+            <Button
+              {...buttonProps}
+              className={clsx(css.buttons, css.btn)}
+              rightSection={<IconPlayerPlayFilled />}
+              onClick={startWalkthrough}
+              px={'xl'}>
+              Start
+            </Button>
+          )}
+        {isParallel && (
+          <Badge
+            key={'parallel-badge'}
+            component={m.div}
+            initial={{ opacity: 0.05, transform: 'translateY(20px)' }}
+            animate={{ opacity: 1, transform: 'translateY(0)' }}
+            exit={{
+              opacity: 0,
+              transform: 'translateY(20px)'
+            }}
+            variant="gradient"
+            size={isMobile ? 'xs' : 'md'}
+            gradient={{ from: 'red', to: 'orange', deg: 90 }}
+            radius={'sm'}>
+            parallel
+          </Badge>
         )}
-      {isNumber(activeDynamicViewStep) && (
-        <ButtonGroup className={css.buttons}>
-          <Button
-            {...buttonProps}
-            pl={'lg'}
-            disabled={activeDynamicViewStep === 1}
-            onClick={nextStep(-1)}>
-            <IconPlayerSkipBackFilled />
-          </Button>
+        {isActive && (
+          <ButtonGroup className={css.buttons}>
+            <Button
+              {...buttonProps}
+              pl={'lg'}
+              disabled={!hasPrevious}
+              onClick={nextStep(-1)}>
+              <IconPlayerSkipBackFilled />
+            </Button>
 
-          <Button
-            {...buttonProps}
-            px={hasNextSteps ? 'md' : 'xl'}
-            onClick={e => {
-              e.stopPropagation()
-              stopDynamicView()
-            }}>
-            {hasNextSteps && <IconPlayerStopFilled />}
-            {!hasNextSteps && 'End'}
-          </Button>
-          {hasNextSteps && (
             <Button
               {...buttonProps}
-              pr={'lg'}
-              onClick={nextStep()}>
-              <IconPlayerSkipForwardFilled />
+              px={hasNext ? 'md' : 'xl'}
+              onClick={e => {
+                e.stopPropagation()
+                stopDynamicView()
+              }}>
+              {hasNext && <IconPlayerStopFilled />}
+              {!hasNext && 'End'}
             </Button>
-          )}
-        </ButtonGroup>
-      )}
-    </Box>
+            {hasNext && (
+              <Button
+                {...buttonProps}
+                pr={'lg'}
+                onClick={nextStep()}>
+                <IconPlayerSkipForwardFilled />
+              </Button>
+            )}
+          </ButtonGroup>
+        )}
+      </Box>
+    </AnimatePresence>
   )
 }

package/src/ui/OptionsPanel.css.ts

@@ -1,6 +1,5 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
-import { mantine } from '../mantine.css'
-import { vars } from '../theme.css'
+import { mantine, vars } from '../theme-vars'
 
 export const panel = style({
   top: fallbackVar(vars.optionsPanel.top, '1rem'),

package/src/ui/OptionsPanel.tsx

@@ -8,10 +8,13 @@ import { useDiagramState } from '../hooks/useDiagramState'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-export default function OptionsPanel() {
+/**
+ * @deprecated
+ */
+export function OptionsPanel() {
   const { isFocused, viewId } = useDiagramState(s => ({
     viewId: s.view.id,
-    isFocused: s.focusedNodeId !== null || s.activeDynamicViewStep !== null
+    isFocused: s.focusedNodeId !== null || s.activeWalkthrough !== null
   }))
   const [selected, setSelected] = useState<{
     nodes: string[]

package/src/ui/notation/NotationPanel.css.ts

@@ -1,7 +1,6 @@
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { fallbackVar, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, whereDark } from '../../mantine.css'
-import { vars } from '../../theme.css'
+import { mantine, vars, whereDark } from '../../theme-vars'
 import { stokeFillMix } from '../../xyflow/nodes/element/element.css'
 
 export const container = style({

package/src/ui/notation/NotationPanel.tsx

@@ -23,7 +23,8 @@ import { AnimatePresence, m } from 'framer-motion'
 import { useState } from 'react'
 import { ceil, isNonNullish, isNullish } from 'remeda'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
-import { vars } from '../../theme.css'
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
+import { vars } from '../../theme-vars'
 import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
 import * as css from './NotationPanel.css'
 
@@ -120,8 +121,7 @@ const selector = (s: DiagramState) => ({
   id: s.view.id,
   notations: s.view.notation?.elements ?? [],
   height: s.xystore.getState().height,
-  isVisible: isNullish(s.focusedNodeId ?? s.activeDynamicViewStep),
-  target: s.getContainer()
+  isVisible: isNullish(s.focusedNodeId ?? s.activeWalkthrough)
 })
 
 export function NotationPanel() {
@@ -129,15 +129,14 @@ export function NotationPanel() {
     id,
     notations,
     isVisible,
-    height,
-    target
+    height
   } = useDiagramState(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
-    key: 'notation-panel-collapsed',
+    key: 'notation-webview-collapsed',
     defaultValue: true
   })
   const hasNotations = notations.length > 0
-  const portalProps = target ? { portalProps: { target } } : { withinPortal: false }
+  const portalProps = useMantinePortalProps()
 
   return (
     <AnimatePresence>
@@ -153,7 +152,7 @@ export function NotationPanel() {
           className={clsx('react-flow__panel', css.container)}>
           <Tooltip label="View has no notations" color="orange" {...portalProps}>
             <ThemeIcon
-              size={'xl'}
+              size={'lg'}
               variant="light"
               color="orange"
               radius={'md'}
@@ -176,8 +175,8 @@ export function NotationPanel() {
         >
           <Tooltip label="Show notation" color="dark" fz={'xs'} {...portalProps}>
             <ActionIcon
-              size={'xl'}
-              variant="light"
+              size={'lg'}
+              variant="default"
               color="gray"
               radius={'md'}
               onClick={() => setCollapsed(false)}
@@ -236,7 +235,7 @@ export function NotationPanel() {
                 <ScrollAreaAutosize
                   viewportProps={{
                     style: {
-                      maxHeight: height > 50 ? `min(40vh, ${height - 20}px)` : '40vh'
+                      maxHeight: `min(40vh, ${Math.max(height - 60, 50)}px)`
                     }
                   }}>
                   <Stack gap={0}>

package/src/ui/options/NodeOptions.tsx

@@ -57,6 +57,9 @@ export type ColorKey = typeof colors[0]['key']
 
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
+/**
+ * @deprecated
+ */
 export const NodeOptions = memo<{ selectedNodeIds: string[] }>(({ selectedNodeIds }) => {
   // export function NodeOptions(props: { nodes: XYFlowNode[] }) {
   const diagramApi = useDiagramStoreApi()
@@ -92,7 +95,7 @@ export const NodeOptions = memo<{ selectedNodeIds: string[] }>(({ selectedNodeId
   return (
     <Stack gap={'xs'}>
       <Group wrap="nowrap" align="flex-start">
-        <Box flex={1}>
+        <Box flex={1} miw={0}>
           <Text fz={rem(9)} fw={'500'} c={'dimmed'}>
             ELEMENT{rest.length > 0 ? 'S' : ``}
           </Text>

package/src/ui/top-left/ChangeAutoLayoutButton.tsx

@@ -1,57 +1,64 @@
 import type { AutoLayoutDirection } from '@likec4/core'
 import {
-  ActionIcon as MantineActionIcon,
   Box,
+  Flex,
   FloatingIndicator,
-  Group,
   Popover,
   PopoverDropdown,
   type PopoverProps,
   PopoverTarget,
-  Stack,
   Text,
-  Tooltip as MantineTooltip,
-  TooltipGroup
+  UnstyledButton
 } from '@mantine/core'
-import { IconArrowBigDownLines, IconLayoutDashboard } from '@tabler/icons-react'
+import { clampUseMovePosition, useMove, type UseMovePosition, useUncontrolled } from '@mantine/hooks'
+import { useDebouncedCallback } from '@react-hookz/web'
+import { IconLayoutDashboard } from '@tabler/icons-react'
 import { useState } from 'react'
-import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
 
-const ActionIcon = MantineActionIcon.withProps({
-  size: 'md',
-  variant: 'subtle',
-  color: 'gray'
-})
-
-const Tooltip = MantineTooltip.withProps({
-  color: 'gray',
-  fz: 'xs',
-  position: 'right',
-  openDelay: 300,
-  label: '',
-  children: null,
-  offset: 5,
-  transitionProps: { transition: 'fade', duration: 200 }
+const selector = (state: DiagramState) => ({
+  viewId: state.view.id,
+  autoLayout: state.view.autoLayout
 })
 
 export const ChangeAutoLayoutButton = (props: PopoverProps) => {
   const store = useDiagramStoreApi()
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
   const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
-  const autoLayout = useDiagramState(s => s.view.autoLayout)
+  const {
+    autoLayout,
+    viewId
+  } = useDiagramState(selector)
 
   const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
     controlsRefs[name] = node
     setControlsRefs(controlsRefs)
   }
 
-  const setAutoLayout = (layout: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
+  const setAutoLayout = (direction: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation()
     store.getState().onChange?.({
       change: {
         op: 'change-autolayout',
-        layout
+        layout: {
+          ...autoLayout,
+          direction
+        }
+      }
+    })
+  }
+
+  const setSpacing = (nodeSep: number, rankSep: number) => {
+    store.getState().onChange?.({
+      change: {
+        op: 'change-autolayout',
+        layout: {
+          ...autoLayout,
+          nodeSep,
+          rankSep
+        }
       }
     })
   }
@@ -69,63 +76,107 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
       }}
       {...props}>
       <PopoverTarget>
-        <MantineActionIcon
-          className="action-icon"
-          variant="light"
-          color="gray">
-          <IconLayoutDashboard stroke={1.3} />
-        </MantineActionIcon>
+        <Tooltip label="Change Auto Layout">
+          <ActionIcon>
+            <IconLayoutDashboard />
+          </ActionIcon>
+        </Tooltip>
       </PopoverTarget>
-      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={4}>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6}>
         <Box pos={'relative'} ref={setRootRef}>
           <FloatingIndicator
-            target={controlsRefs[autoLayout]}
+            target={controlsRefs[autoLayout.direction]}
             parent={rootRef}
             className={css.autolayoutIndicator}
           />
           <Box mb={10}>
             <Text inline fz={'xs'} c={'dimmed'} fw={500}>Auto layout:</Text>
           </Box>
-          <TooltipGroup openDelay={100}>
-            <Stack align="center" gap={1}>
-              <Tooltip label="Top to Bottom">
-                <ActionIcon
-                  className={css.autolayoutIcon}
-                  ref={setControlRef('TB')}
-                  onClick={setAutoLayout('TB')}>
-                  <IconArrowBigDownLines stroke={1.3} />
-                </ActionIcon>
-              </Tooltip>
-              <Group gap={30}>
-                <Tooltip label="Left to Right">
-                  <ActionIcon
-                    className={css.autolayoutIcon}
-                    ref={setControlRef('LR')}
-                    onClick={setAutoLayout('LR')}>
-                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '270deg' }} />
-                  </ActionIcon>
-                </Tooltip>
-                <Tooltip label="Right to Left">
-                  <ActionIcon
-                    className={css.autolayoutIcon}
-                    ref={setControlRef('RL')}
-                    onClick={setAutoLayout('RL')}>
-                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '90deg' }} />
-                  </ActionIcon>
-                </Tooltip>
-              </Group>
-              <Tooltip label="Bottom to Top">
-                <ActionIcon
-                  className={css.autolayoutIcon}
-                  ref={setControlRef('BT')}
-                  onClick={setAutoLayout('BT')}>
-                  <IconArrowBigDownLines stroke={1.3} style={{ rotate: '180deg' }} />
-                </ActionIcon>
-              </Tooltip>
-            </Stack>
-          </TooltipGroup>
+          <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
+            isVertical={autoLayout.direction === 'TB' || autoLayout.direction === 'BT'}
+            key={viewId}
+            nodeSep={autoLayout.nodeSep}
+            rankSep={autoLayout.rankSep}
+            onChange={setSpacing}
+          />
         </Box>
       </PopoverDropdown>
     </Popover>
   )
 }
+
+const SpacingSliders = ({
+  isVertical,
+  nodeSep,
+  rankSep,
+  onChange
+}: {
+  isVertical: boolean
+  nodeSep: number | undefined
+  rankSep: number | undefined
+  onChange: (nodeSep: number, rankSep: number) => void
+}) => {
+  if (!isVertical) {
+    ;[nodeSep, rankSep] = [rankSep, nodeSep]
+  }
+
+  const propagateChange = useDebouncedCallback(
+    ({ x, y }: UseMovePosition) => {
+      if (!isVertical) {
+        ;[x, y] = [y, x]
+      }
+      onChange(Math.round(x * 500), Math.round(y * 500))
+    },
+    [onChange, isVertical],
+    150,
+    2000
+  )
+
+  const [value, setValue] = useUncontrolled({
+    defaultValue: clampUseMovePosition({
+      x: (nodeSep ?? 250) / 500,
+      y: (rankSep ?? 250) / 500
+    }),
+    onChange: propagateChange
+  })
+
+  const { ref } = useMove(setValue)
+
+  let nodeSepValue = Math.round(value.x * 500)
+  let rankSepValue = Math.round(value.y * 500)
+  if (!isVertical) {
+    ;[nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue]
+  }
+
+  return (
+    <Box ref={ref} 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>
+  )
+}