@likec4/diagram 1.8.1 → 1.12.0

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

@@ -11,7 +11,7 @@ import * as styles from './OptionsPanel.css'
 export default 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,19 +129,18 @@ 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>
-      {!hasNotations && (
+      {!hasNotations && isVisible && (
         <m.div
           key={'empty'}
           initial={{ opacity: 0.75, translateX: '50%' }}
@@ -151,9 +150,9 @@ export function NotationPanel() {
             opacity: 0.6
           }}
           className={clsx('react-flow__panel', css.container)}>
-          <Tooltip label="Diagram has no notations" color="orange" {...portalProps}>
+          <Tooltip label="View has no notations" color="orange" {...portalProps}>
             <ThemeIcon
-              size={'xl'}
+              size={'lg'}
               variant="light"
               color="orange"
               radius={'md'}
@@ -176,7 +175,7 @@ export function NotationPanel() {
         >
           <Tooltip label="Show notation" color="dark" fz={'xs'} {...portalProps}>
             <ActionIcon
-              size={'xl'}
+              size={'lg'}
               variant="light"
               color="gray"
               radius={'md'}
@@ -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

@@ -92,7 +92,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

@@ -10,31 +10,20 @@ import {
   PopoverTarget,
   Stack,
   Text,
-  Tooltip as MantineTooltip,
   TooltipGroup
 } from '@mantine/core'
 import { IconArrowBigDownLines, IconLayoutDashboard } from '@tabler/icons-react'
 import { useState } from 'react'
 import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
 
-const ActionIcon = MantineActionIcon.withProps({
+const DirectionActionIcon = 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 }
-})
-
 export const ChangeAutoLayoutButton = (props: PopoverProps) => {
   const store = useDiagramStoreApi()
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
@@ -69,17 +58,16 @@ 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}>
         <Box pos={'relative'} ref={setRootRef}>
           <FloatingIndicator
-            target={controlsRefs[autoLayout]}
+            target={controlsRefs[autoLayout.direction]}
             parent={rootRef}
             className={css.autolayoutIndicator}
           />
@@ -89,38 +77,38 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
           <TooltipGroup openDelay={100}>
             <Stack align="center" gap={1}>
               <Tooltip label="Top to Bottom">
-                <ActionIcon
+                <DirectionActionIcon
                   className={css.autolayoutIcon}
                   ref={setControlRef('TB')}
                   onClick={setAutoLayout('TB')}>
-                  <IconArrowBigDownLines stroke={1.3} />
-                </ActionIcon>
+                  <IconArrowBigDownLines />
+                </DirectionActionIcon>
               </Tooltip>
               <Group gap={30}>
                 <Tooltip label="Left to Right">
-                  <ActionIcon
+                  <DirectionActionIcon
                     className={css.autolayoutIcon}
                     ref={setControlRef('LR')}
                     onClick={setAutoLayout('LR')}>
-                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '270deg' }} />
-                  </ActionIcon>
+                    <IconArrowBigDownLines style={{ rotate: '270deg' }} />
+                  </DirectionActionIcon>
                 </Tooltip>
                 <Tooltip label="Right to Left">
-                  <ActionIcon
+                  <DirectionActionIcon
                     className={css.autolayoutIcon}
                     ref={setControlRef('RL')}
                     onClick={setAutoLayout('RL')}>
-                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '90deg' }} />
-                  </ActionIcon>
+                    <IconArrowBigDownLines style={{ rotate: '90deg' }} />
+                  </DirectionActionIcon>
                 </Tooltip>
               </Group>
               <Tooltip label="Bottom to Top">
-                <ActionIcon
+                <DirectionActionIcon
                   className={css.autolayoutIcon}
                   ref={setControlRef('BT')}
                   onClick={setAutoLayout('BT')}>
-                  <IconArrowBigDownLines stroke={1.3} style={{ rotate: '180deg' }} />
-                </ActionIcon>
+                  <IconArrowBigDownLines style={{ rotate: '180deg' }} />
+                </DirectionActionIcon>
               </Tooltip>
             </Stack>
           </TooltipGroup>