@likec4/diagram 1.3.0 → 1.4.0

package/src/ui/DiagramTitlePanel.tsx

@@ -1,5 +1,6 @@
-import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
+import { Anchor, Box, Button, Card, CardSection, CopyButton, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
+import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../state'
@@ -35,103 +36,114 @@ export default function DiagramTitlePanel() {
           transformOrigin: 'left center'
         }}
       >
-        <Paper
+        <Card
           radius="sm"
-          withBorder={!isCollapsed}
-          className={css.paper}
-          p={isCollapsed ? 'xs' : 'lg'}
+          className={css.card}
+          p={'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <Stack gap={'sm'} justify="stretch" align="stretch">
-            <Group justify="stretch" wrap="nowrap" onClick={toggle} style={{ cursor: 'pointer' }}>
-              <Text
-                component={'div'}
-                flex={'1'}
-                size={isCollapsed ? 'sm' : 'lg'}
-                fw={500}
-                lh={1.1}
-                className={css.title}
-              >
-                {title}
-              </Text>
-              <Text
-                hidden={isCollapsed}
-                component={'div'}
-                flex={'0 0 auto'}
-                inline
-                size="xs"
-                fz={9}
-                fw={500}
-                c={'dimmed'}
-                style={{
-                  userSelect: 'all'
-                }}>
-                <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                {id}
-              </Text>
-            </Group>
-            {!isCollapsed && (
-              <>
-                {description && (
-                  <Spoiler
-                    maxHeight={42}
-                    showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
-                    hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
-                    <Text
-                      component={'div'}
-                      size="sm"
-                      className={css.description}>
-                      {description || 'no description'}
-                    </Text>
-                  </Spoiler>
-                )}
-                {!description && (
+          <CardSection mb={4}>
+            <Button
+              fullWidth
+              size="xs"
+              h={'sm'}
+              py={2}
+              radius={'0'}
+              variant="subtle"
+              color="gray"
+              onClick={toggle}
+            >
+              <IconMenu size={11} opacity={0.7} />
+            </Button>
+          </CardSection>
+          <Group justify="stretch" wrap="nowrap" mb={isCollapsed ? 0 : 'sm'}>
+            <Text
+              component={'div'}
+              flex={'1'}
+              size={isCollapsed ? 'sm' : 'lg'}
+              fw={500}
+              lh={1.1}
+              className={css.title}
+            >
+              {title}
+            </Text>
+            <Text
+              hidden={isCollapsed}
+              component={'div'}
+              flex={'0 0 auto'}
+              inline
+              size="xs"
+              fz={9}
+              fw={500}
+              c={'dimmed'}
+              style={{
+                userSelect: 'all'
+              }}>
+              <span style={{ userSelect: 'none' }}>id:{' '}</span>
+              {id}
+            </Text>
+          </Group>
+          {!isCollapsed && (
+            <>
+              {description && (
+                <Spoiler
+                  maxHeight={42}
+                  showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
+                  hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
                   <Text
                     component={'div'}
-                    size="xs"
-                    c={'dimmed'}>
-                    no description
+                    size="sm"
+                    className={css.description}>
+                    {description || 'no description'}
                   </Text>
-                )}
-                {links && (
-                  <Stack
-                    gap={3}
-                    justify="stretch"
-                    align="stretch">
-                    {links.map((link) => (
-                      <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
-                        <Box flex={'1'} style={{ overflow: 'hidden' }}>
-                          <Anchor
-                            href={link}
-                            target="_blank"
-                            fz="xs"
-                            truncate="end"
-                            display={'inline-block'}
-                            w={'100%'}>
-                            {link}
-                          </Anchor>
-                        </Box>
-                        <CopyButton value={link}>
-                          {({ copied, copy }) => (
-                            <Button
-                              size="compact-xs"
-                              fz={'10'}
-                              variant="light"
-                              onClick={copy}
-                              color={copied
-                                ? 'teal'
-                                : 'gray'}>
-                              {copied ? 'copied' : 'copy'}
-                            </Button>
-                          )}
-                        </CopyButton>
-                      </Group>
-                    ))}
-                  </Stack>
-                )}
-              </>
-            )}
-          </Stack>
-        </Paper>
+                </Spoiler>
+              )}
+              {!description && (
+                <Text
+                  component={'div'}
+                  size="xs"
+                  c={'dimmed'}>
+                  no description
+                </Text>
+              )}
+              {links && (
+                <Stack
+                  gap={3}
+                  justify="stretch"
+                  align="stretch">
+                  {links.map((link) => (
+                    <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
+                      <Box flex={'1'} style={{ overflow: 'hidden' }}>
+                        <Anchor
+                          href={link}
+                          target="_blank"
+                          fz="xs"
+                          truncate="end"
+                          display={'inline-block'}
+                          w={'100%'}>
+                          {link}
+                        </Anchor>
+                      </Box>
+                      <CopyButton value={link}>
+                        {({ copied, copy }) => (
+                          <Button
+                            size="compact-xs"
+                            fz={'10'}
+                            variant="light"
+                            onClick={copy}
+                            color={copied
+                              ? 'teal'
+                              : 'gray'}>
+                            {copied ? 'copied' : 'copy'}
+                          </Button>
+                        )}
+                      </CopyButton>
+                    </Group>
+                  ))}
+                </Stack>
+              )}
+            </>
+          )}
+        </Card>
       </m.div>
     </AnimatePresence>
   )

package/src/ui/OptionsPanel.tsx

@@ -1,29 +1,40 @@
 import { Card } from '@mantine/core'
-import { useOnSelectionChange } from '@xyflow/react'
 import clsx from 'clsx'
-import { deepEqual as eq } from 'fast-equals'
+import { DEV } from 'esm-env'
+import { shallowEqual } from 'fast-equals'
 import { AnimatePresence, m } from 'framer-motion'
-import { memo, useState } from 'react'
-import { isNullish } from 'remeda'
+import { useCallback } from 'react'
+import { reduce } from 'remeda'
+import useTilg from 'tilg'
 import { useDiagramState } from '../state'
+import { useXYStore } from '../xyflow/hooks'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-const OptionsPanelMemo = memo(function OptionsPanel() {
-  const isFocusDisabled = useDiagramState(s => isNullish(s.focusedNodeId))
-  const [selectedNodes, setSelectedNodes] = useState([] as string[])
-
-  useOnSelectionChange({
-    onChange: ({ nodes }) => {
-      const next = nodes.map(n => n.id)
-      setSelectedNodes(prev => eq(prev, next) ? prev : next)
-    }
-  })
-
+const Empty = [] as string[]
+export default function OptionsPanel() {
+  const { isFocusDisabled, viewId } = useDiagramState(s => ({
+    viewId: s.view.id,
+    isFocusDisabled: s.focusedNodeId === null && s.activeDynamicViewStep === null
+  }))
+  const selectedNodes = useXYStore(
+    useCallback(s =>
+      s.elementsSelectable && isFocusDisabled
+        ? reduce(s.nodes, (acc, n) => {
+          if (n.selected) {
+            acc.push(n.id)
+          }
+          return acc
+        }, [] as string[])
+        : Empty, [isFocusDisabled]),
+    shallowEqual
+  )
+  DEV && useTilg()
   return (
     <AnimatePresence mode="wait">
-      {isFocusDisabled && selectedNodes.length > 0 && (
+      {selectedNodes.length > 0 && (
         <m.div
+          key={viewId}
           initial={{ opacity: 0, scale: 0.85 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
@@ -43,6 +54,4 @@ const OptionsPanelMemo = memo(function OptionsPanel() {
       )}
     </AnimatePresence>
   )
-})
-
-export default OptionsPanelMemo
+}

package/src/xyflow/XYFlowInner.tsx

@@ -1,10 +1,10 @@
-import { isDynamicView } from '@likec4/core'
 import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
-import { isNonNull, isNonNullish, isNullish } from 'remeda'
+import { isNonNull } from 'remeda'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { useDiagramState } from '../state/useDiagramStore'
+import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import OptionsPanel from '../ui/OptionsPanel'
@@ -14,6 +14,7 @@ type XYFlowInnerProps = PropsWithChildren<{
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
+  showNavigationButtons: boolean
   enableDynamicViewWalkthrough: boolean
 }>
 
@@ -22,6 +23,7 @@ export const XYFlowInner = memo(function XYFlowInnerR({
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }: XYFlowInnerProps) {
   const {
@@ -45,6 +47,7 @@ export const XYFlowInner = memo(function XYFlowInnerR({
       {readonly === false && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {showNavigationButtons && <BackwardForwardPanel />}
       {children}
     </>
   )

package/src/xyflow/diagram-to-xyflow.ts

@@ -1,17 +1,6 @@
-import {
-  type DiagramNode,
-  type DiagramView,
-  extractStep,
-  type Fqn,
-  invariant,
-  type NonEmptyArray,
-  nonNullable,
-  type Point
-} from '@likec4/core'
-import { Bezier } from 'bezier-js'
-import { hasAtLeast, reduce } from 'remeda'
+import { type DiagramNode, type DiagramView, extractStep, type Fqn, invariant, nonNullable } from '@likec4/core'
+import { hasAtLeast } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
-import { toDomPrecision } from './utils'
 
 // const nodeZIndex = (node: DiagramNode) => node.level + (hasAtLeast(node.children, 1) ? 2 : 1)
 const nodeZIndex = (node: DiagramNode) => node.level + 1

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -12,7 +12,7 @@ import { memo, useRef, useState } from 'react'
 import { first, hasAtLeast, isArray, isTruthy, last } from 'remeda'
 import { useDiagramState, useDiagramStoreApi } from '../../state'
 import { ZIndexes } from '../const'
-import { useXYFlow, useXYStoreApi } from '../hooks'
+import { useXYStoreApi } from '../hooks'
 import { type XYFlowEdge } from '../types'
 import { bezierControlPoints, toDomPrecision } from '../utils'
 import * as edgesCss from './edges.css'
@@ -207,6 +207,9 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
     let pointer = { x: e.clientX, y: e.clientY }
     const onPointerMove = (e: PointerEvent) => {
       if (!isSamePoint(pointer, [e.clientX, e.clientY])) {
+        if (!hasMoved) {
+          diagramStore.getState().cancelSaveManualLayout()
+        }
         hasMoved = true
         pointer = { x: e.clientX, y: e.clientY }
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false })
@@ -246,6 +249,13 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
       data-edge-dir={diagramEdge.dir}
       data-edge-active={isActive}
       data-edge-hovered={isHovered}>
+      <path
+        className={clsx('react-flow__edge-interaction')}
+        d={edgePath}
+        fill="none"
+        stroke={'transparent'}
+        strokeWidth={interactionWidth ?? 10}
+      />
       <g className={edgesCss.markerContext}>
         <defs>
           <marker
@@ -279,13 +289,6 @@ export const RelationshipEdge = /* @__PURE__ */ memo<EdgeProps<XYFlowEdge>>(func
           markerEnd={markerEnd}
         />
       </g>
-      <path
-        className={clsx('react-flow__edge-interaction')}
-        d={edgePath}
-        fill="none"
-        strokeOpacity={0}
-        strokeWidth={interactionWidth ?? 10}
-      />
       {isEdgePathEditable && controlPoints.map((p, i) => (
         <circle
           onPointerDown={e => onControlPointerDown(i, e)}

package/src/xyflow/edges/edges.css.ts

@@ -1,5 +1,5 @@
 import { rem } from '@mantine/core'
-import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { mantine } from '../../mantine.css'
 import { vars, xyvars } from '../../theme.css'
 
@@ -62,7 +62,7 @@ globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
   opacity: 0.8,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
-  filter: 'grayscale(0.85) blur(1px)',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
   willChange: 'opacity, filter'
 })
 
@@ -112,8 +112,7 @@ export const controlPoint = style({
   }
 })
 
-const strokeKeyframes = generateIdentifier('strokeKeyframes')
-globalKeyframes(strokeKeyframes, {
+const strokeKeyframes = keyframes({
   'from': {
     strokeDashoffset: 18 * 2
   },
@@ -126,19 +125,24 @@ export const cssEdgePath = style({
   animationDuration: '800ms',
   animationIterationCount: 'infinite',
   animationTimingFunction: 'linear',
+  animationName: strokeKeyframes,
+  animationPlayState: 'paused',
   selectors: {
     [`:where([data-edge-hovered='true']) &`]: {
-      animationName: strokeKeyframes,
+      animationPlayState: 'running',
       animationDelay: '350ms',
-      transition: 'stroke,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
     [`:where(${isSelected}, [data-edge-active='true']) &`]: {
-      animationName: strokeKeyframes,
+      animationPlayState: 'running',
       animationDelay: '0ms',
-      transition: 'stroke,stroke-width 130ms ease-out'
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out'
     },
     [`:where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse'
+    },
+    [`${dimmed} &`]: {
+      animationPlayState: 'paused'
     }
   }
 })
@@ -170,10 +174,10 @@ export const edgeLabel = style({
       transform: `${varTranslate} scale(1.1)`
     },
     [`&:is(${dimmed})`]: {
-      opacity: 0.8,
+      opacity: 0.6,
       transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
       transitionDelay: '200ms',
-      filter: 'grayscale(0.85) blur(2px)',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
       willChange: 'opacity, filter'
     }
   }

package/src/xyflow/hooks/useLayoutConstraints.ts

@@ -286,7 +286,8 @@ export function useLayoutConstraints(): LayoutConstraints {
         x: event.clientX,
         y: event.clientY
       }
-      const { xyflow } = diagramApi.getState()
+      const { xyflow, cancelSaveManualLayout } = diagramApi.getState()
+      cancelSaveManualLayout()
       solverRef.current = createLayoutConstraints(xyflow, xyflowApi, xynode.id)
     },
     onNodeDrag: (_event, xynode) => {

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -18,7 +18,7 @@ globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
   opacity: 0.25,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
-  filter: 'grayscale(0.85) blur(1px)',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
   willChange: 'opacity, filter'
 })
 
@@ -81,14 +81,14 @@ export const transparent = style({
     opacity: calc.add(fallbackVar(varOpacity, '1'), opacityDeltaOnHover)
   },
   selectors: {
-    [`:where(.react-flow__node.selected) &`]: {
-      vars: {
-        [opacityDeltaOnHover]: '.05'
-      }
-    },
+    // [`:where(.react-flow__node.selected) &`]: {
+    //   vars: {
+    //     [opacityDeltaOnHover]: '.05'
+    //   }
+    // },
     [`:where([data-hovered]) &`]: {
       vars: {
-        [opacityDeltaOnHover]: '.1'
+        [opacityDeltaOnHover]: '.07'
       }
     }
   }
@@ -212,7 +212,7 @@ export const navigateBtn = style({
   },
   ':hover': {
     boxShadow: mantine.shadows.lg,
-    transform: 'scale(1.466)',
+    transform: 'scale(1.42)',
     opacity: 1,
     transitionDelay: '0'
   },

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -24,13 +24,13 @@ const variants = {
   idle: (_, { scale }) => ({
     scale: 1,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   selected: (_, { scale }) => ({
     scale: selectedScale,
     transition: {
-      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+      delay: isNumber(scale) && scale > selectedScale ? 0.09 : 0
     }
   }),
   // dimmed: {
@@ -54,12 +54,9 @@ const variants = {
   //     delay: 1
   //   }
   // }),
-  hovered: (_, { scale }) => ({
-    scale: 1.06,
-    transition: {
-      delay: isNumber(scale) && scale !== 1 && scale !== selectedScale ? 0 : 0.15
-    }
-  }),
+  hovered: {
+    scale: 1.06
+  },
   tap: {
     scale: 0.975
   }
@@ -128,8 +125,10 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
       className={clsx([
         css.container,
         isDimmed && css.dimmed,
+        animate !== 'idle' && css.containerAnimated,
         'likec4-element-node'
       ])}
+      data-hovered={!dragging && isHovered}
       data-likec4-color={element.color}
       data-likec4-shape={element.shape}
       variants={variants}

package/src/xyflow/nodes/element/element.css.ts

@@ -16,16 +16,28 @@ export const container = style({
   alignItems: 'stretch',
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  },
+  selectors: {
+    ':where(.react-flow__node.selected) &': {
+      willChange: 'transform'
+    },
+    '&[data-hovered="true"]': {
+      willChange: 'transform'
+    }
   }
 })
 
+export const containerAnimated = style({
+  willChange: 'transform'
+})
+
 export const dimmed = style({})
 
 globalStyle(`.react-flow__node-element:has(${dimmed})`, {
   opacity: 0.25,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',
-  filter: 'grayscale(0.85) blur(2px)',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   willChange: 'opacity, filter'
 })
 
@@ -49,16 +61,16 @@ export const indicator = style({
   transformOrigin: 'center center',
   strokeWidth: 6,
   animationDuration: '800ms',
-  animationName: indicatorKeyframes,
   animationIterationCount: 'infinite',
   animationDirection: 'alternate',
+  opacity: 0.6,
   visibility: 'hidden',
   selectors: {
     ':where(.react-flow__node.selected) &': {
-      visibility: 'visible'
+      visibility: 'visible',
+      animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes)
     },
     [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      animationName: 'none',
       strokeWidth: 10,
       stroke: outlineColor,
       visibility: 'visible'
@@ -67,7 +79,8 @@ export const indicator = style({
       strokeWidth: 10
     },
     [`${dimmed} &`]: {
-      visibility: 'hidden'
+      visibility: 'hidden',
+      display: 'none'
     }
   }
 })