@likec4/diagram 1.19.1 → 1.20.0

package/src/likec4diagram/state/syncManualLayoutActor.ts

@@ -0,0 +1,219 @@
+import type { ViewChange, ViewId } from '@likec4/core'
+import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
+import { hasAtLeast, reduce } from 'remeda'
+import {
+  type ActorRef,
+  type ActorRefFromLogic,
+  type MachineSnapshot,
+  type SnapshotFrom,
+  assign,
+  setup,
+} from 'xstate'
+import { bezierControlPoints, isSamePoint } from '../../utils'
+import type * as Machine from './machine'
+
+export type Input = {
+  parent: ActorRef<
+    MachineSnapshot<Machine.DiagramContext, Machine.Events, any, any, any, any, any, any>,
+    Machine.Events,
+    any
+  >
+  viewId: ViewId
+}
+
+export type Context = Readonly<
+  Input & {}
+>
+
+export type Events =
+  | { type: 'sync' }
+  | { type: 'synced' }
+  | { type: 'cancel' }
+  | { type: 'stop' }
+// TODO: naming convention for actors
+export const syncManualLayoutActor = setup({
+  types: {
+    context: {} as Context,
+    input: {} as Input,
+    events: {} as Events,
+    tags: '' as 'pending' | 'ready',
+  },
+  delays: {
+    'timeout': 2_000,
+  },
+  actions: {
+    'trigger:OnChange': (_, _params: { change: ViewChange }) => {
+    },
+  },
+  guards: {
+    'same view': ({ context }) => context.parent.getSnapshot().context.view.id === context.viewId,
+  },
+}).createMachine({
+  initial: 'idle',
+  context: ({ input }) => ({
+    ...input,
+    // parent: input.parent,
+    // viewId: input.parent.getSnapshot().context.view.id,
+  }),
+  states: {
+    idle: {
+      tags: 'ready',
+      on: {
+        sync: {
+          target: 'pending',
+        },
+      },
+    },
+    paused: {
+      tags: 'pending',
+      on: {
+        sync: {
+          target: 'pending',
+        },
+      },
+    },
+    pending: {
+      tags: 'pending',
+      on: {
+        sync: {
+          target: 'pending',
+          reenter: true,
+        },
+        cancel: {
+          target: 'paused',
+        },
+      },
+      after: {
+        'timeout': [{
+          guard: 'same view',
+          actions: {
+            type: 'trigger:OnChange',
+            params: ({ context }) => {
+              const change = createViewChange(context.parent.getSnapshot().context)
+              return { change }
+            },
+          },
+          target: 'synced',
+        }, {
+          target: 'stopped',
+        }],
+      },
+    },
+    synced: {
+      tags: 'ready',
+      on: {
+        sync: {
+          target: 'pending',
+        },
+      },
+    },
+    'stopped': {
+      entry: assign({
+        parent: null as any,
+      }),
+      type: 'final',
+    },
+  },
+  on: {
+    synced: {
+      target: '.synced',
+    },
+    stop: {
+      target: '.stopped',
+    },
+  },
+})
+
+export type SyncLayoutActorRef = ActorRefFromLogic<typeof syncManualLayoutActor>
+export type SyncLayoutActorSnapshot = SnapshotFrom<typeof syncManualLayoutActor>
+
+function createViewChange(parentContext: Machine.DiagramContext): ViewChange.SaveManualLayout {
+  const { view, xystore, xyflow } = parentContext
+
+  const { nodeLookup } = xystore.getState()
+  const movedNodes = new Set<string>()
+  let bounds = {
+    x: 0,
+    y: 0,
+    width: 1,
+    height: 1,
+  }
+
+  const nodes = reduce([...nodeLookup.values()], (acc, node) => {
+    const dimensions = getNodeDimensions(node)
+    if (
+      !isSamePoint(node.internals.positionAbsolute, node.data.position) || node.initialWidth !== dimensions.width ||
+      node.initialHeight !== dimensions.height
+    ) {
+      movedNodes.add(node.id)
+    }
+    const rect = acc[node.id] = {
+      isCompound: node.type !== 'element' && node.type !== 'deployment',
+      x: Math.floor(node.internals.positionAbsolute.x),
+      y: Math.floor(node.internals.positionAbsolute.y),
+      width: Math.ceil(dimensions.width),
+      height: Math.ceil(dimensions.height),
+    }
+    bounds = getBoundsOfRects(bounds, rect)
+    return acc
+  }, {} as ViewChange.SaveManualLayout['layout']['nodes'])
+
+  const edges = reduce(xyflow?.getEdges() ?? [], (acc, { source, target, data }) => {
+    let controlPoints = data.controlPoints ?? []
+    const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target)
+    // If edge control points are not set, but the source or target node was moved
+    if (controlPoints.length === 0 && sourceOrTargetMoved) {
+      controlPoints = bezierControlPoints(data)
+    }
+    if (data.points.length === 0 && controlPoints.length === 0) {
+      return acc
+    }
+    const _updated: ViewChange.SaveManualLayout['layout']['edges'][string] = acc[data.id] = {
+      points: data.points,
+    }
+    if (data.labelXY && data.labelBBox) {
+      _updated.labelBBox = {
+        ...data.labelBBox,
+        ...data.labelXY,
+      }
+    }
+    if (data.labelBBox) {
+      _updated.labelBBox ??= data.labelBBox
+    }
+    if (hasAtLeast(controlPoints, 1)) {
+      _updated.controlPoints = controlPoints
+    }
+    // if (!sourceOrTargetMoved && data.edge.dotpos) {
+    //   _updated.dotpos = data.edge.dotpos
+    // }
+    const allX = [
+      ...data.points.map(p => p[0]),
+      ...controlPoints.map(p => p.x),
+      ...(_updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []),
+    ]
+    const allY = [
+      ...data.points.map(p => p[1]),
+      ...controlPoints.map(p => p.y),
+      ...(_updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []),
+    ]
+    const rect = boxToRect({
+      x: Math.floor(Math.min(...allX)),
+      y: Math.floor(Math.min(...allY)),
+      x2: Math.ceil(Math.max(...allX)),
+      y2: Math.ceil(Math.max(...allY)),
+    })
+    bounds = getBoundsOfRects(bounds, rect)
+    return acc
+  }, {} as ViewChange.SaveManualLayout['layout']['edges'])
+
+  return {
+    op: 'save-manual-layout',
+    layout: {
+      hash: view.hash,
+      autoLayout: view.autoLayout,
+      nodes,
+      edges,
+      ...bounds,
+    },
+  }
+}

package/src/likec4diagram/state/utils.ts

@@ -0,0 +1,52 @@
+import type { BBox, XYPoint } from '@likec4/core'
+import type { DiagramContext } from './machine'
+
+export function focusedBounds(params: { context: DiagramContext }): { bounds: BBox; duration?: number } {
+  const knownAbsolutes = new Map<string, XYPoint>()
+
+  const b = params.context.xynodes.reduce((acc, node) => {
+    let position = node.position
+    if (node.parentId) {
+      const parent = knownAbsolutes.get(node.parentId) ?? { x: 0, y: 0 }
+      position = {
+        x: position.x + parent.x,
+        y: position.y + parent.y,
+      }
+    }
+    knownAbsolutes.set(node.id, position)
+
+    if (node.hidden || node.data.dimmed) {
+      return acc
+    }
+
+    const width = node.measured?.width ?? node.width ?? node.initialWidth
+    const height = node.measured?.height ?? node.height ?? node.initialHeight
+    return {
+      minX: Math.min(acc.minX, position.x),
+      minY: Math.min(acc.minY, position.y),
+      maxX: Math.max(acc.maxX, position.x + width),
+      maxY: Math.max(acc.maxY, position.y + height),
+    }
+  }, {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity,
+  })
+
+  if (b.minX === Infinity) {
+    return {
+      bounds: params.context.view.bounds,
+    }
+  }
+
+  return {
+    duration: 350,
+    bounds: {
+      x: b.minX - 10,
+      y: b.minY - 10,
+      width: b.maxX - b.minX + 20,
+      height: b.maxY - b.minY + 20,
+    },
+  }
+}

package/src/likec4diagram/types.ts

@@ -0,0 +1,144 @@
+import type { DiagramEdge, DiagramNode, Fqn, ViewId } from '@likec4/core'
+import type { XYPosition } from '@xyflow/system'
+import type { OptionalKeysOf, Simplify } from 'type-fest'
+import type { Base } from '../base'
+import type { ReactFlowEdge, ReactFlowNode } from '../base/types'
+
+type NonOptional<T extends object> = Simplify<
+  & {
+    [P in Exclude<keyof T, OptionalKeysOf<T>>]: T[P]
+  }
+  & {
+    [P in OptionalKeysOf<T>]-?: T[P] | undefined
+  }
+>
+
+export namespace Types {
+  export type LeafNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'id'
+        | 'title'
+        | 'technology'
+        | 'description'
+        | 'color'
+        | 'shape'
+        | 'width'
+        | 'level'
+        | 'height'
+        | 'style'
+        | 'position'
+      >
+    >
+    & {
+      icon: string | null
+    }
+  >
+
+  /**
+   * Represents element from logical model
+   */
+  export type ElementNodeData = LeafNodeData & {
+    modelFqn: Fqn
+    deploymentFqn?: never
+    /**
+     * If set - this node has navigation to another view and diagram has handler for this
+     */
+    navigateTo: ViewId | null
+  }
+
+  /**
+   * Represents element from deployment model
+   */
+  export type DeploymentElementNodeData =
+    & LeafNodeData
+    & {
+      navigateTo: ViewId | null
+      deploymentFqn: Fqn
+      // If set - this node refers to a model element
+      modelFqn: Fqn | null
+    }
+
+  export type CompoundNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'id'
+        | 'title'
+        | 'color'
+        | 'shape'
+        | 'style'
+        | 'position'
+      >
+    >
+    & {
+      depth: number
+      icon: string | null
+    }
+  >
+
+  export type CompoundElementNodeData = CompoundNodeData & {
+    modelFqn: Fqn
+    deploymentFqn?: never
+    /**
+     * If set - this node has navigation to another view and diagram has handler for this
+     */
+    navigateTo: ViewId | null
+  }
+
+  export type CompoundDeploymentNodeData = CompoundNodeData & {
+    deploymentFqn: Fqn
+    /**
+     * If set - this node refers to a model element
+     */
+    modelFqn: Fqn | null
+    /**
+     * If set - this node has navigation to another view and diagram has handler for this
+     */
+    navigateTo: ViewId | null
+  }
+
+  export type ViewGroupNodeData = CompoundNodeData & {
+    isViewGroup: true
+  }
+
+  // export type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>
+
+  export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
+  export type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, 'deployment'>
+  export type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, 'compound-element'>
+  export type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, 'compound-deployment'>
+  export type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>
+
+  export type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode
+
+  export type NodeData = Node['data']
+
+  export type RelationshipEdgeData = Base.EdgeData<
+    NonOptional<
+      Pick<
+        DiagramEdge,
+        | 'id'
+        | 'label'
+        | 'labelBBox'
+        | 'technology'
+        | 'points'
+        | 'dir'
+        | 'color'
+        | 'line'
+        | 'head'
+        | 'tail'
+        | 'navigateTo'
+        | 'notes'
+      >
+    > & {
+      labelXY: XYPosition | null
+      controlPoints: XYPosition[] | undefined | null
+    }
+  >
+
+  export type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>
+
+  export type Edge = RelationshipEdge
+}

package/src/{ui/top-left → likec4diagram/ui/controls}/ChangeAutoLayoutButton.tsx

@@ -1,43 +1,49 @@
 import type { AutoLayoutDirection } from '@likec4/core'
 import {
+  type PopoverProps,
   Box,
   Flex,
   FloatingIndicator,
   Popover,
   PopoverDropdown,
-  type PopoverProps,
   PopoverTarget,
   Text,
-  UnstyledButton
+  UnstyledButton,
 } from '@mantine/core'
 import {
+  type UseMovePosition,
   clampUseMovePosition,
   useHover,
   useMergedRef,
   useMove,
-  type UseMovePosition,
-  useUncontrolled
+  useUncontrolled,
 } from '@mantine/hooks'
 import { useDebouncedCallback } from '@react-hookz/web'
 import { IconLayoutDashboard } from '@tabler/icons-react'
 import { forwardRef, useState } from 'react'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { useDiagramEventHandlers } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import type { DiagramContext } from '../../state/machine'
 import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
 
-const selector = (state: DiagramState) => ({
+const selector = (state: DiagramContext) => ({
   viewId: state.view.id,
-  autoLayout: state.view.autoLayout
+  autoLayout: state.view.autoLayout,
 })
 
 export const ChangeAutoLayoutButton = (props: PopoverProps) => {
-  const store = useDiagramStoreApi()
+  const {
+    onChange,
+  } = useDiagramEventHandlers()
+  const diagram = useDiagram()
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
   const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
   const {
     autoLayout,
-    viewId
-  } = useDiagramState(selector)
+    viewId,
+  } = useDiagramContext(selector)
 
   const { ref, hovered: isSpacingHovered } = useHover()
 
@@ -48,31 +54,29 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
 
   const setAutoLayout = (direction: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation()
-    store.getState().onChange?.({
+    onChange?.({
       change: {
         op: 'change-autolayout',
         layout: {
           ...autoLayout,
-          direction
-        }
-      }
+          direction,
+        },
+      },
     })
   }
 
   const setSpacing = (nodeSep: number | null, rankSep: number | null) => {
     // Force fitDiagram
-    store.setState({
-      viewportChanged: false
-    })
-    store.getState().onChange?.({
+    diagram.fitDiagram()
+    onChange?.({
       change: {
         op: 'change-autolayout',
         layout: {
           ...autoLayout,
           nodeSep,
-          rankSep
-        }
-      }
+          rankSep,
+        },
+      },
     })
   }
 
@@ -80,12 +84,12 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
     <Popover
       position="right-start"
       clickOutsideEvents={[
-        'pointerdown'
+        'pointerdown',
       ]}
       radius="xs"
       shadow="lg"
       offset={{
-        mainAxis: 10
+        mainAxis: 10,
       }}
       {...props}>
       <PopoverTarget>
@@ -146,7 +150,7 @@ const SpacingSliders = forwardRef<HTMLDivElement | null, {
   isVertical,
   nodeSep,
   rankSep,
-  onChange
+  onChange,
 }, _ref) => {
   if (!isVertical) {
     ;[nodeSep, rankSep] = [rankSep, nodeSep]
@@ -161,15 +165,15 @@ const SpacingSliders = forwardRef<HTMLDivElement | null, {
     },
     [onChange, isVertical],
     250,
-    2000
+    2000,
   )
 
   const [value, setValue] = useUncontrolled({
     defaultValue: clampUseMovePosition({
       x: (nodeSep ?? 100) / MAX_SPACING,
-      y: (rankSep ?? 120) / MAX_SPACING
+      y: (rankSep ?? 120) / MAX_SPACING,
     }),
-    onChange: propagateChange
+    onChange: propagateChange,
   })
 
   const { ref } = useMove(setValue)
@@ -188,7 +192,7 @@ const SpacingSliders = forwardRef<HTMLDivElement | null, {
         className={css.spacingSliderThumb}
         style={{
           left: `${value.x * 100}%`,
-          top: `${value.y * 100}%`
+          top: `${value.y * 100}%`,
         }}
       />
       <Box pos={'absolute'} left={2} bottom={2}>

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -0,0 +1,107 @@
+import { ActionIconGroup, Badge, Loader, Stack } from '@mantine/core'
+import { openSpotlight } from '@mantine/spotlight'
+import { IconFileSymlink, IconFocusCentered, IconSearch } from '@tabler/icons-react'
+import { clsx } from 'clsx'
+import { memo } from 'react'
+import { IfNotEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+import { useMantinePortalProps } from '../../../hooks'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramSyncLayoutState } from '../../../hooks/useDiagramActor'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import { stopPropagation } from '../../../utils'
+import { ActionIcon, Tooltip } from './_shared'
+import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
+import { LayoutDriftNotification } from './LayoutDriftNotification'
+import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
+import { NavigationButtons } from './NavigationButtons'
+import * as css from './styles.css'
+
+export const Controls = memo(() => {
+  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext(c => ({
+    viewId: c.view.id,
+    hasLayoutDrift: c.view.hasLayoutDrift ?? false,
+    viewportChanged: c.viewportChangedManually,
+  }))
+  const diagram = useDiagram()
+  const {
+    onOpenSource,
+  } = useDiagramEventHandlers()
+  const {
+    enableControls,
+    enableSearch,
+    enableNavigationButtons,
+    enableReadOnly,
+    enableEdgeEditing,
+    enableVscode,
+  } = useEnabledFeatures()
+  const notReadOnly = !enableReadOnly
+  const portalProps = useMantinePortalProps()
+  return (
+    <>
+      <Stack
+        className={clsx(
+          'react-flow__panel',
+          css.panel,
+          'likec4-top-left-panel',
+        )}
+        align="flex-start"
+        onClick={stopPropagation}
+        gap={'xs'}>
+        {enableNavigationButtons && <NavigationButtons />}
+        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+          {enableControls && enableSearch && (
+            <Tooltip label="Search (Ctrl+F or ⌘+F)" {...portalProps}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  openSpotlight()
+                }}>
+                <IconSearch />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          {enableVscode && (
+            <Tooltip label="Open source" {...portalProps}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  onOpenSource?.({ view: viewId })
+                }}>
+                <IconFileSymlink stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
+          {enableControls && notReadOnly && (
+            <>
+              <ChangeAutoLayoutButton {...portalProps} />
+              <ManualLayoutToolsButton {...portalProps} />
+            </>
+          )}
+          {enableControls && (
+            <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  diagram.fitDiagram()
+                }}>
+                <IconFocusCentered />
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </ActionIconGroup>
+        {notReadOnly && <SyncLayoutBadge />}
+      </Stack>
+    </>
+  )
+})
+
+const SyncLayoutBadge = () => {
+  const isPending = useDiagramSyncLayoutState(s => s.hasTag('pending'))
+  if (!isPending) return null
+  return (
+    <Badge color="pink" radius={'xs'} size="xs" variant="light" leftSection={<Loader color={'orange'} size={8} />}>
+      Pending...
+    </Badge>
+  )
+}