@likec4/diagram 1.27.0 → 1.27.1

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/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, LayoutGroup, 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
 

package/src/overlays/overlay/Overlay.css.ts

@@ -2,14 +2,12 @@ import { css } from '@likec4/styles/css'
 
 export const backdropBlur = '--_blur'
 export const backdropOpacity = '--_opacity'
-const backdropColor = '--backdrop-color'
 
-const borderRadius = '8px'
+const borderRadius = '--_border-radius'
 export const dialog = css({
   boxSizing: 'border-box',
   margin: 0,
   position: 'fixed',
-  inset: '3rem',
   width: 'auto',
   height: 'auto',
   maxWidth: '100vw',
@@ -18,8 +16,7 @@ export const dialog = css({
   shadow: 'xl',
   border: 'transparent',
   outline: 'none',
-  borderRadius: borderRadius,
-  padding: '6px',
+  borderRadius: `var(${borderRadius})`,
   [backdropBlur]: '0px',
   [backdropOpacity]: '0%',
   _backdrop: {
@@ -30,19 +27,38 @@ export const dialog = css({
       _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
     },
   },
-  mdDown: {
-    borderRadius: 'sm',
-    inset: '2rem',
-    width: 'calc(100vw - 4rem)',
-    height: 'calc(100vh - 4rem)',
-  },
   smDown: {
+    [borderRadius]: '0px',
     border: 'none',
     inset: 0,
     padding: 0,
     width: '100vw',
     height: '100vh',
   },
+  sm: {
+    [borderRadius]: '6px',
+    padding: '6px',
+    inset: '1rem',
+    width: 'calc(100vw - 2rem)',
+    height: 'calc(100vh - 2rem)',
+  },
+  md: {
+    inset: '2rem',
+    width: 'calc(100vw - 4rem)',
+    height: 'calc(100vh - 4rem)',
+  },
+  lg: {
+    inset: '4rem',
+    width: 'calc(100vw - 8rem)',
+    height: 'calc(100vh - 8rem)',
+  },
+  xl: {
+    [borderRadius]: '8px',
+    padding: '8px',
+    inset: '5rem',
+    width: 'calc(100vw - 10rem)',
+    height: 'calc(100vh - 10rem)',
+  },
 })
 
 export const body = css({
@@ -50,9 +66,11 @@ export const body = css({
   containerName: 'overlay-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
-  borderRadius: `calc(${borderRadius} - 2px)`,
   background: 'mantine.colors.body',
   overflow: 'hidden',
   width: '100%',
   height: '100%',
+  sm: {
+    borderRadius: `calc(var(${borderRadius}) - 2px)`,
+  },
 })

package/src/overlays/overlay/Overlay.tsx

@@ -5,7 +5,7 @@ import {
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
-import { type HTMLMotionProps, m } from 'framer-motion'
+import { type HTMLMotionProps, m, useReducedMotionConfig } from 'framer-motion'
 import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
 import * as styles from './Overlay.css'
@@ -27,6 +27,8 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
     const dialogRef = useRef<HTMLDialogElement>(null)
     const isClosingRef = useRef(false)
 
+    const motionNotReduced = useReducedMotionConfig() !== true
+
     const onCloseRef = useSyncedRef(onClose)
     const close = useDebouncedCallback(
       () => {
@@ -64,34 +66,38 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
       <m.dialog
         ref={useMergedRef(dialogRef, ref)}
         className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
-        initial={{
-          [styles.backdropBlur]: '0px',
-          [styles.backdropOpacity]: '0%',
-          scale: 1.075,
-          opacity: 0.2,
-          // originY: 0.45,
-          // translateY: '-10px',
-        }}
-        animate={{
-          [styles.backdropBlur]: '8px',
-          [styles.backdropOpacity]: '60%',
-          scale: 1,
-          opacity: 1,
-          // translateY: '0px',
-          transition: {
-            delay: 0.06,
-            // duration: 0.2,
-          },
-        }}
-        exit={{
-          scale: 1.3,
-          opacity: 0,
-          [styles.backdropBlur]: '0px',
-          [styles.backdropOpacity]: '0%',
-          // transition: {
-          //   duration: 0.2,
-          // },
-        }}
+        layout
+        {...motionNotReduced
+          ? ({
+            initial: {
+              [styles.backdropBlur]: '0px',
+              [styles.backdropOpacity]: '0%',
+              scale: 1.075,
+              opacity: 0,
+            },
+            animate: {
+              [styles.backdropBlur]: '8px',
+              [styles.backdropOpacity]: '60%',
+              scale: 1,
+              opacity: 1,
+              transition: {
+                delay: 0.075,
+              },
+            },
+            exit: {
+              scale: 1.3,
+              opacity: 0,
+              translateY: -10,
+              [styles.backdropBlur]: '0px',
+              [styles.backdropOpacity]: '0%',
+            },
+          })
+          : {
+            initial: {
+              [styles.backdropBlur]: '8px',
+              [styles.backdropOpacity]: '60%',
+            },
+          }}
         onClick={e => {
           e.stopPropagation()
           if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {

package/src/overlays/relationship-details/useLayoutedDetails.ts

@@ -102,7 +102,7 @@ function nodeData(
   // Ansector separetely, because we want to inherit
   // color from it if there is no diagram node
   const ancestor = diagramNode ?? pipe(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     map(ancestor => ctx.diagramNodes.get(ancestor.id)),
     filter(isTruthy),
     first(),

package/src/overlays/relationships-browser/SelectElement.tsx

@@ -61,9 +61,9 @@ export const SelectElement = memo(() => {
   }, [subjectId])
 
   return (
-    <Group ref={root} gap={'xs'} wrap={'nowrap'} pos={'relative'}>
+    <Group ref={root} gap={'xs'} pos={'relative'}>
       {enableSelectSubject && (
-        <>
+        <Group gap={4} wrap="nowrap">
           <Box
             fz={'xs'}
             fw={'500'}
@@ -159,10 +159,10 @@ export const SelectElement = memo(() => {
               </PopoverDropdown>
             </Popover>
           </Box>
-        </>
+        </Group>
       )}
       {enableChangeScope && (
-        <>
+        <Group gap={4} wrap="nowrap">
           {/* Show if only "select" is enabled  */}
           {enableSelectSubject && (
             <Box
@@ -220,7 +220,7 @@ export const SelectElement = memo(() => {
               />
             </Tooltip>
           </div>
-        </>
+        </Group>
       )}
     </Group>
   )

package/src/state/DiagramActorProvider.tsx

@@ -1,24 +1,37 @@
-import type { ViewId } from '@likec4/core'
+import type { ViewId, WhereOperator } from '@likec4/core'
+import { useDeepCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import { type PropsWithChildren, useEffect } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorSafeContext } from '../hooks/safeContext'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import type { Types } from '../likec4diagram/types'
+import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
 import { type Input, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorRef, DiagramActorSnapshot } from './types'
+import type { DiagramActorSnapshot } from './types'
 
-type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
+const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
+type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>
+export function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children,
+}: PropsWithChildren<{
+  input: ActorContextInput
+  where?: WhereOperator<string, string> | undefined
+}>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
-  const logic = useMemo(() => {
-    return diagramMachine.provide({
+  const actorRef = useActorRef(
+    diagramMachine.provide({
       actions: {
         'trigger:NavigateTo': ((_, { viewId }) => {
           handlersRef.current.onNavigateTo?.(viewId as ViewId)
@@ -41,68 +54,45 @@ export function DiagramActorProvider({ input, children }: PropsWithChildren<{ in
           },
         }),
       },
-    })
-  }, [handlersRef])
-
-  const actorRef = useActorRef(
-    logic,
+    }),
     {
-      id: `diagram:${input.view.id}`,
+      id: `diagram:${view.id}`,
       systemId: 'diagram',
       // ...inspector,
       input: {
         xystore,
-        ...input,
+        view,
+        ...inputs,
       },
     },
   )
 
-  return (
-    <DiagramActorSafeContext value={actorRef}>
-      <SyncStore input={input} actorRef={actorRef} />
-      <DiagramActorToggledFeatures actorRef={actorRef}>
-        {children}
-      </DiagramActorToggledFeatures>
-    </DiagramActorSafeContext>
-  )
-}
-
-const SyncStore = (
-  { input: { view, xyedges, xynodes, ...inputs }, actorRef }: { input: ActorContextInput; actorRef: DiagramActorRef },
-) => {
   const features = useEnabledFeatures()
   useUpdateEffect(() => {
     actorRef.send({ type: 'update.inputs', inputs })
-  }, [actorRef, inputs])
+  }, [inputs])
 
   useEffect(() => {
     actorRef.send({ type: 'update.features', features })
-  }, [actorRef, features])
+  }, [features])
 
-  const frameReq = useRef<number>(null)
+  const { xyedges, xynodes } = useViewToNodesEdges({
+    view,
+    where,
+    nodesSelectable: inputs.nodesSelectable,
+  })
 
-  useUpdateEffect(() => {
-    frameReq.current = requestAnimationFrame(() => {
-      frameReq.current = null
-      actorRef.send({ type: 'update.view', view, xyedges, xynodes })
-    })
-    return () => {
-      if (frameReq.current != null) {
-        cancelAnimationFrame(frameReq.current)
-      }
-      frameReq.current = null
-    }
-  }, [actorRef, view, xyedges, xynodes])
+  useDeepCompareEffect(() => {
+    actorRef.send({ type: 'update.view', view, xyedges, xynodes })
+  }, [view, xyedges, xynodes])
 
-  return null
-}
-
-const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
-function DiagramActorToggledFeatures({ children, actorRef }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
+
   return (
-    <DiagramFeatures overrides={toggledFeatures}>
-      {children}
-    </DiagramFeatures>
+    <DiagramActorSafeContext value={actorRef}>
+      <DiagramFeatures overrides={toggledFeatures}>
+        {children}
+      </DiagramFeatures>
+    </DiagramActorSafeContext>
   )
 }

package/src/state/assign.ts

@@ -391,8 +391,8 @@ export function updateActiveWalkthrough({ context }: ActionArg): Partial<Diagram
       })
     }),
     xynodes: context.xynodes.map(node => {
-      const active = step.source === node.id || step.target === node.id
-      return Base.setDimmed(node, !active)
+      const dimmed = step.source !== node.id && step.target !== node.id
+      return Base.setDimmed(node, dimmed)
     }),
   }
 }