@likec4/diagram 1.26.2 → 1.27.1

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.css.ts

@@ -1,7 +1,7 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
+import type { SystemStyleObject } from '@likec4/styles/types'
 
-export const container = style({
+export const container = css({
   position: 'absolute',
   bottom: '0.5rem',
   left: '50%',
@@ -12,50 +12,48 @@ export const container = style({
   flexDirection: 'column',
   gap: '0.4rem',
   alignItems: 'center',
-  '@media': {
-    [mantine.largerThan('md')]: {
-      gap: '0.6rem',
-    },
+  md: {
+    gap: '0.6rem',
   },
 })
 
-export const buttons = style({
+const tablerIcons = {
+  '& .tabler-icon': {
+    width: '0.85em',
+    height: '0.85em',
+  },
+} satisfies SystemStyleObject
+
+export const buttons = css({
   backdropFilter: 'blur(8px)',
   transition: 'all 175ms ease-in',
-  ':hover': {
-    transitionTimingFunction: 'ease-out',
+  _hover: {
+    transitionTimingFunction: 'out',
     transform: 'scale(1.1)',
   },
-  ':active': {
+  _active: {
     transitionDuration: '100ms',
     transform: 'scale(0.98) translateY(3px)',
   },
+  ...tablerIcons,
 })
 
-var transparency = createVar()
-export const btn = style({
+export const btn = css({
   transition: 'all 175ms ease-in',
-  backgroundColor: 'var(--button-bg)',
-  vars: {
-    [transparency]: '35%',
-    ['--button-bg']: `color-mix(in srgb, ${mantine.colors.primaryColors.filled}, transparent ${transparency})`,
-    ['--button-hover']: `color-mix(in srgb, ${mantine.colors.primaryColors.filledHover}, transparent ${transparency})`,
+  background: 'mantine.colors.primary.filled/65',
+  _hover: {
+    background: 'mantine.colors.primary.filledHover/65',
   },
-  selectors: {
-    [mantine.lightSelector]: {
-      vars: {
-        [transparency]: '15%',
-      },
+  _light: {
+    background: 'mantine.colors.primary.filled/85',
+    _hover: {
+      background: 'mantine.colors.primary.filledHover/85',
     },
   },
+  ...tablerIcons,
 })
 
-globalStyle(`:where(${buttons}, ${btn}) .tabler-icon`, {
-  width: '0.85em',
-  height: '0.85em',
-})
-
-export const parallelStateFrame = style({
+export const parallelStateFrame = css({
   position: 'absolute',
   margin: 0,
   padding: 0,
@@ -63,11 +61,10 @@ export const parallelStateFrame = style({
   left: 0,
   width: '100%',
   height: '100%',
-  border: `2px solid ${mantine.colors.orange[6]}`,
+  border: `2px solid`,
+  borderColor: 'mantine.colors.orange[6]',
   pointerEvents: 'none',
-  '@media': {
-    [mantine.largerThan('md')]: {
-      borderWidth: 4,
-    },
+  md: {
+    borderWidth: 4,
   },
 })

package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx

@@ -10,7 +10,7 @@ import { AnimatePresence, m } from 'framer-motion'
 import { isNonNull, isTruthy } from 'remeda'
 import { useXYStore } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import * as css from './DynamicViewWalkthrough.css'
+import * as styles from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {
   const isMobile = useXYStore(s => s.width <= 750)
@@ -28,7 +28,7 @@ export function DynamicViewWalkthrough() {
   const diagram = useDiagram()
 
   const buttonProps = {
-    className: css.btn,
+    className: styles.btn,
     size: isMobile ? 'compact-md' : 'lg',
     radius: isMobile ? 'lg' : 'xl',
   }
@@ -58,11 +58,11 @@ export function DynamicViewWalkthrough() {
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
-          className={clsx('react-flow__panel', css.parallelStateFrame)}
+          className={clsx('react-flow__panel', styles.parallelStateFrame)}
         />
       )}
       <Box
-        className={clsx('react-flow__panel', css.container)}
+        className={clsx('react-flow__panel', styles.container)}
         onClick={(e) => e.stopPropagation()}
         onDoubleClick={(e) => e.stopPropagation()}
       >
@@ -70,7 +70,7 @@ export function DynamicViewWalkthrough() {
           && (
             <Button
               {...buttonProps}
-              className={clsx(css.buttons, css.btn)}
+              className={clsx(styles.buttons, styles.btn)}
               rightSection={<IconPlayerPlayFilled />}
               onClick={() => diagram.startWalkthrough()}
               px={'xl'}>
@@ -95,7 +95,7 @@ export function DynamicViewWalkthrough() {
           </Badge>
         )}
         {isActive && (
-          <ButtonGroup className={css.buttons}>
+          <ButtonGroup className={styles.buttons}>
             <Button
               {...buttonProps}
               pl={'lg'}

package/src/likec4diagram/useLayoutConstraints.ts

@@ -58,11 +58,11 @@ abstract class Rect {
       y: positionAbsolute.y - parentPosition.y,
     }
   }
-  protected abstract parent: Compound | null
+  protected abstract parent: CompoundRect | null
 
   constructor(
     xynode: InternalNode,
-    parent: Compound | null = null,
+    parent: CompoundRect | null = null,
   ) {
     this.id = xynode.id
 
@@ -82,12 +82,12 @@ abstract class Rect {
   }
 }
 
-class Compound extends Rect {
+class CompoundRect extends Rect {
   public readonly children = [] as Rect[]
 
   constructor(
     xynode: InternalNode,
-    public readonly parent: Compound | null = null,
+    public readonly parent: CompoundRect | null = null,
   ) {
     super(xynode, parent)
   }
@@ -96,22 +96,18 @@ class Compound extends Rect {
 class Leaf extends Rect {
   constructor(
     xynode: InternalNode,
-    public readonly parent: Compound | null = null,
+    public readonly parent: CompoundRect | null = null,
   ) {
     super(xynode, parent)
   }
 }
 
-type NodePositionUpdater = (
-  nodes: Array<{ rect: Rect | Compound; node: InternalNode }>,
-) => void
-
 export function createLayoutConstraints(
   xyflowApi: XYStoreApi,
   editingNodeIds: NonEmptyArray<string>,
 ) {
   const { parentLookup, nodeLookup } = xyflowApi.getState()
-  const rects = new Map<string, Leaf | Compound>()
+  const rects = new Map<string, Leaf | CompoundRect>()
 
   const ancestorsOf = (nodeId: string) => {
     const ancestors = [] as string[]
@@ -129,36 +125,31 @@ export function createLayoutConstraints(
     editingNodeIds.flatMap(ancestorsOf),
   )
 
-  const traverse = new Array<{ xynode: InternalNode; parent: Compound | null }>()
-
-  for (const [, xynode] of nodeLookup) {
-    if (isNullish(xynode.parentId)) {
-      traverse.push({
-        xynode,
-        parent: null,
-      })
-    }
-  }
+  const traverse: Array<{ xynode: InternalNode; parent: CompoundRect | null }> = [...nodeLookup.values()].flatMap(x =>
+    !x.parentId ? { xynode: x, parent: null } : []
+  )
 
   while (traverse.length > 0) {
     const { xynode, parent } = traverse.shift()!
     const isEditing = editingNodeIds.includes(xynode.id)
 
     // Traverse children if the node is a compound, not dragging, and is an ancestor of the dragging node
-    const shouldTraverse = !isEditing &&
-      (xynode.type === 'compound-element' || xynode.type === 'compound-deployment' || xynode.type === 'view-group')
+    const shouldTraverse = !isEditing
+      && xynode.type !== 'element'
+      && xynode.type !== 'deployment'
       && ancestorsOfDraggingNodes.has(xynode.id)
 
-    const rect = shouldTraverse ? new Compound(xynode, parent) : new Leaf(xynode, parent)
-    rects.set(xynode.id, rect)
-
     if (shouldTraverse) {
+      const rect = new CompoundRect(xynode, parent)
+      rects.set(xynode.id, rect)
       parentLookup.get(xynode.id)?.forEach(child => {
         traverse.push({
           xynode: child,
-          parent: rect as Compound,
+          parent: rect as CompoundRect,
         })
       })
+    } else {
+      rects.set(xynode.id, new Leaf(xynode, parent))
     }
   }
 
@@ -166,28 +157,32 @@ export function createLayoutConstraints(
   applyConstraints(rectsToUpdate)
 
   function applyConstraints(targets: Rect[]) {
-    targets
-      .filter(x => x instanceof Compound)
-      .forEach((r) => {
-        applyConstraints(r.children)
-
-        const childrenBB = r.children.reduce((acc, r) => ({
-          minX: Math.min(acc.minX, r.minX),
-          minY: Math.min(acc.minY, r.minY),
-          maxX: Math.max(acc.maxX, r.maxX),
-          maxY: Math.max(acc.maxY, r.maxY),
-        }), {
-          minX: Infinity,
-          minY: Infinity,
-          maxX: -Infinity,
-          maxY: -Infinity,
-        })
+    for (const r of targets) {
+      if (!(r instanceof CompoundRect)) {
+        continue
+      }
 
-        r.minX = childrenBB.minX - Rect.LeftPadding
-        r.minY = childrenBB.minY - Rect.TopPadding
-        r.maxX = childrenBB.maxX + Rect.RightPadding
-        r.maxY = childrenBB.maxY + Rect.BottomPadding
-      })
+      applyConstraints(r.children)
+
+      const childrenBB = {
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity,
+      }
+
+      for (const child of r.children) {
+        childrenBB.minX = Math.min(childrenBB.minX, child.minX)
+        childrenBB.minY = Math.min(childrenBB.minY, child.minY)
+        childrenBB.maxX = Math.max(childrenBB.maxX, child.maxX)
+        childrenBB.maxY = Math.max(childrenBB.maxY, child.maxY)
+      }
+
+      r.minX = childrenBB.minX - Rect.LeftPadding
+      r.minY = childrenBB.minY - Rect.TopPadding
+      r.maxX = childrenBB.maxX + Rect.RightPadding
+      r.maxY = childrenBB.maxY + Rect.BottomPadding
+    }
   }
 
   function updateXYFlowNodes() {
@@ -201,7 +196,7 @@ export function createLayoutConstraints(
           position: r.position,
           positionAbsolute: r.positionAbsolute,
         })
-        if (r instanceof Compound) {
+        if (r instanceof CompoundRect) {
           acc.push({
             id: r.id,
             type: 'dimensions',
@@ -216,29 +211,24 @@ export function createLayoutConstraints(
 
   let animationFrameId: number | null = null
 
-  function onMove(
-    updater: NodePositionUpdater,
-  ) {
+  function onMove() {
     if (rectsToUpdate.length === 0) {
       return
     }
     animationFrameId ??= requestAnimationFrame(() => {
       animationFrameId = null
-      updater(
-        pipe(
-          editingNodeIds,
-          filter(id => rects.has(id) && nodeLookup.has(id)),
-          map(id => ({
-            rect: nonNullable(rects.get(id)),
-            node: nonNullable(nodeLookup.get(id)),
-          })),
-        ),
-      )
+      const { nodeLookup } = xyflowApi.getState()
+      for (const id of editingNodeIds) {
+        const rect = nonNullable(rects.get(id))
+        const node = nonNullable(nodeLookup.get(id))
+        rect.positionAbsolute = node.internals.positionAbsolute
+      }
       updateXYFlowNodes()
     })
   }
 
   return {
+    rects: rects as ReadonlyMap<string, Leaf | CompoundRect>,
     updateXYFlowNodes,
     onMove,
   }
@@ -256,32 +246,37 @@ export function useLayoutConstraints(): LayoutConstraints {
   const xystore = useXYStoreApi()
   const diagram = useDiagram()
   const solverRef = useRef<ReturnType<typeof createLayoutConstraints>>(undefined)
-  return useMemo((): LayoutConstraints => ({
-    onNodeDragStart: (_event, xynode) => {
-      diagram.cancelSaveManualLayout()
-      const { nodeLookup } = xystore.getState()
-      const draggingNodes = pipe(
-        Array.from(nodeLookup.values()),
-        filter(n => n.dragging === true || n.id === xynode.id || n.selected === true),
-        filter(n => n.draggable !== false),
-        map(x => x.id),
-      )
-      if (hasAtLeast(draggingNodes, 1)) {
-        solverRef.current = createLayoutConstraints(xystore, draggingNodes)
-      }
-    },
-    onNodeDrag: () => {
-      solverRef.current?.onMove((nodes) => {
-        nodes.forEach(({ rect, node }) => {
-          rect.positionAbsolute = node.internals.positionAbsolute
-        })
-      })
-    },
-    onNodeDragStop: () => {
-      solverRef.current?.updateXYFlowNodes()
-      diagram.scheduleSaveManualLayout()
-      // diagramApi.getState().scheduleSaveManualLayout()
-      solverRef.current = undefined
-    },
-  }), [xystore, diagram])
+  return useMemo((): LayoutConstraints => {
+    let wasPending = false
+    const initial = { x: 0, y: 0 }
+    let moved = false
+    return ({
+      onNodeDragStart: (_event, xynode) => {
+        wasPending = diagram.cancelSaveManualLayout()
+        const { nodeLookup } = xystore.getState()
+        const draggingNodes = pipe(
+          Array.from(nodeLookup.values()),
+          filter(n => n.draggable !== false && (n.dragging === true || n.id === xynode.id || n.selected === true)),
+        )
+        if (hasAtLeast(draggingNodes, 1)) {
+          solverRef.current = createLayoutConstraints(xystore, map(draggingNodes, x => x.id))
+        }
+        initial.x = _event.clientX
+        initial.y = _event.clientY
+        moved = false
+      },
+      onNodeDrag: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
+        solverRef.current?.onMove()
+      },
+      onNodeDragStop: (_event) => {
+        moved = Math.abs(_event.clientX - initial.x) > 4 || Math.abs(_event.clientY - initial.y) > 4
+        console.log('moved', moved)
+        if (wasPending || moved) {
+          diagram.scheduleSaveManualLayout()
+        }
+        solverRef.current = undefined
+      },
+    })
+  }, [xystore, diagram])
 }

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -94,7 +94,7 @@ function viewToNodesEdge(opts: {
     const base = {
       id,
       selectable: selectable && node.kind !== ElementKind.Group,
-      focusable: selectable && !isCompound,
+      focusable: selectable && node.kind !== ElementKind.Group,
       deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
@@ -171,6 +171,7 @@ function viewToNodesEdge(opts: {
               deploymentFqn: deploymentFqn,
               modelFqn,
             },
+            dragHandle: '.likec4-compound-title',
           } satisfies Types.CompoundDeploymentNode,
         )
         break

package/src/overlays/Overlays.tsx

@@ -2,7 +2,7 @@ import { nonexhaustive } from '@likec4/core'
 import { Box, Button, Code, Group, Notification, ScrollAreaAutosize } from '@mantine/core'
 import { IconX } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'
-import { AnimatePresence, useReducedMotion } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, useReducedMotion, useReducedMotionConfig } from 'framer-motion'
 import { animate } from 'framer-motion/dom'
 import { memo, useEffect, useMemo } from 'react'
 import { type FallbackProps, ErrorBoundary } from 'react-error-boundary'
@@ -83,7 +83,7 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
     xyflowDomNode,
   ])
   const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays)
-  const isMotionReduced = useReducedMotion() ?? false
+  const isMotionReduced = useReducedMotionConfig() ?? false
 
   const isActiveOverlay = overlays.length > 0
 
@@ -135,9 +135,11 @@ export const Overlays = memo(({ overlaysActorRef }: { overlaysActorRef: Overlays
   return (
     <DiagramFeatures.Overlays>
       <ErrorBoundary FallbackComponent={Fallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
-        <AnimatePresence>
-          {overlaysReact}
-        </AnimatePresence>
+        <LayoutGroup>
+          <AnimatePresence>
+            {overlaysReact}
+          </AnimatePresence>
+        </LayoutGroup>
       </ErrorBoundary>
     </DiagramFeatures.Overlays>
   )