@likec4/diagram 1.9.0 → 1.12.1

package/src/state/diagramStore.ts

@@ -1,14 +1,24 @@
 import type {
   DiagramNode,
   DiagramView,
+  EdgeId,
   ElementKind,
   ElementNotation,
   Fqn,
   NodeId,
   ViewChange,
-  ViewID
+  ViewID,
+  XYPoint
+} from '@likec4/core'
+import {
+  getBBoxCenter,
+  getParallelStepsPrefix,
+  invariant,
+  isStepEdgeId,
+  nonexhaustive,
+  nonNullable,
+  StepEdgeId
 } from '@likec4/core'
-import { getBBoxCenter, invariant, nonexhaustive, nonNullable, StepEdgeId } from '@likec4/core'
 import {
   applyEdgeChanges,
   applyNodeChanges,
@@ -20,7 +30,7 @@ import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { entries, hasAtLeast, isNullish, map, prop, reduce } from 'remeda'
+import { entries, first, hasAtLeast, isNullish, map, prop, reduce } from 'remeda'
 import type { ConditionalKeys, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
@@ -32,6 +42,7 @@ import type {
   LikeC4DiagramEventHandlers,
   WhereOperator
 } from '../LikeC4Diagram.props'
+import { type Vector, vector } from '../utils/vector'
 import { MinZoom } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
@@ -47,6 +58,7 @@ export type DiagramInitialState = {
   showElementLinks: boolean
   showNavigationButtons: boolean
   showNotations: boolean
+  showRelationshipDetails: boolean
   fitViewEnabled: boolean
   fitViewPadding: number
   zoomable: boolean
@@ -81,9 +93,17 @@ export type DiagramState = Simplify<
 
     initialized: boolean
 
+    // readonly=false and onChange is not null
+    isEditable: () => boolean
+
     // If Dynamic View
     isDynamicView: boolean
-    activeDynamicViewStep: number | null
+    activeWalkthrough: null | {
+      stepId: StepEdgeId
+      hasPrevious: boolean
+      hasNext: boolean
+      parallelPrefix: string | null
+    }
 
     // This is XYFlow id's
     lastClickedNodeId: string | null
@@ -109,7 +129,11 @@ export type DiagramState = Simplify<
     // Actions
     updateView: (view: DiagramView) => void
 
-    focusOnNode: (nodeId: string) => void
+    /**
+     * A function to set the focus on a specific node given its identifier.
+     * It can also be used to remove focus if the input is `false`.
+     */
+    focusOnNode: (nodeId: string | false) => void
 
     setHoveredNode: (nodeId: string | null) => void
     setHoveredEdge: (edgeId: string | null) => void
@@ -117,7 +141,7 @@ export type DiagramState = Simplify<
     setLastClickedNode: (nodeId: string | null) => void
     setLastClickedEdge: (edgeId: string | null) => void
 
-    resetLastClicked: () => void
+    resetFocusAndLastClicked: () => void
 
     getElement(id: Fqn): DiagramNode | null
     triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void
@@ -136,14 +160,16 @@ export type DiagramState = Simplify<
     goForward: () => void
 
     nextDynamicStep: (increment?: number) => void
-    activateDynamicStep: (step: number) => void
-    stopDynamicView: () => void
+    activateWalkthrough: (step: EdgeId | XYFlowEdge) => void
+    stopWalkthrough: () => void
 
     onInit: (xyflow: XYFlowInstance) => void
     onNodesChange: OnNodesChange<XYFlowNode>
     onEdgesChange: OnEdgesChange<XYFlowEdge>
 
     highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void
+
+    resetEdgeControlPoints: () => void
   }
 >
 
@@ -158,7 +184,7 @@ const DEFAULT_PROPS: Except<
   initialized: false,
   navigationHistoryIndex: 0,
   viewportChanged: false,
-  activeDynamicViewStep: null,
+  activeWalkthrough: null,
   focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
@@ -231,7 +257,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
-              activeDynamicViewStep,
+              activeWalkthrough,
               nodesDraggable,
               nodesSelectable,
               hoveredEdgeId,
@@ -259,6 +285,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               }
               if (focusedNodeId && !nodeIds.has(focusedNodeId)) {
                 focusedNodeId = null
+                dimmed = EmptyStringSet
               }
               if (lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId)) {
                 lastClickedEdgeId = null
@@ -266,8 +293,9 @@ export function createDiagramStore(props: DiagramInitialState) {
               if (hoveredEdgeId && !edgeIds.has(hoveredEdgeId)) {
                 hoveredEdgeId = null
               }
-              if (activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep))) {
-                activeDynamicViewStep = null
+              if (activeWalkthrough && !edgeIds.has(activeWalkthrough.stepId)) {
+                activeWalkthrough = null
+                dimmed = EmptyStringSet
               }
               if (dimmed.size > 0) {
                 let nextDimmed = new StringSet([...dimmed].filter(id => nodeIds.has(id) || edgeIds.has(id)))
@@ -335,7 +363,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               hoveredEdgeId = null
               hoveredNodeId = null
               focusedNodeId = null
-              activeDynamicViewStep = null
+              activeWalkthrough = null
               dimmed = EmptyStringSet
             }
 
@@ -400,7 +428,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 isDynamicView: nextView.__ === 'dynamic',
                 viewSyncDebounceTimeout,
                 view: nextView,
-                activeDynamicViewStep,
+                activeWalkthrough,
                 lastOnNavigate,
                 lastClickedNodeId,
                 lastClickedEdgeId,
@@ -421,6 +449,18 @@ export function createDiagramStore(props: DiagramInitialState) {
           focusOnNode: (nodeId) => {
             const { focusedNodeId, view, enableFocusMode } = get()
             invariant(enableFocusMode, 'focus mode is not enabled')
+            if (nodeId === false) {
+              set(
+                {
+                  activeWalkthrough: null,
+                  focusedNodeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                `unfocus`
+              )
+              return
+            }
             if (nodeId !== focusedNodeId) {
               const notDimmed = new StringSet([nodeId])
               const dimmed = new StringSet()
@@ -440,7 +480,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               }
               set(
                 {
-                  activeDynamicViewStep: null,
+                  activeWalkthrough: null,
                   focusedNodeId: nodeId,
                   dimmed
                 },
@@ -474,17 +514,18 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          resetLastClicked: () => {
+          resetFocusAndLastClicked: () => {
             let {
-              activeDynamicViewStep,
+              activeWalkthrough,
               focusedNodeId,
               lastClickedNodeId,
-              lastClickedEdgeId
+              lastClickedEdgeId,
+              xystore
             } = get()
-            if (activeDynamicViewStep || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
+            if (activeWalkthrough || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
               set(
                 {
-                  activeDynamicViewStep: null,
+                  activeWalkthrough: null,
                   focusedNodeId: null,
                   lastClickedNodeId: null,
                   lastClickedEdgeId: null,
@@ -494,6 +535,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 'resetLastClicked'
               )
             }
+            xystore.getState().resetSelectedElements()
           },
 
           getElement: (fqn) => {
@@ -501,6 +543,11 @@ export function createDiagramStore(props: DiagramInitialState) {
             return view.nodes.find(({ id }) => id === fqn) ?? null
           },
 
+          isEditable: () => {
+            const { readonly, onChange } = get()
+            return !readonly && !!onChange
+          },
+
           triggerChangeElementStyle: (change) => {
             if (DEV) {
               console.debug('triggerChangeElementStyle', change)
@@ -617,25 +664,25 @@ export function createDiagramStore(props: DiagramInitialState) {
             }, {} as ViewChange.SaveManualLayout['layout']['nodes'])
 
             const edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
-              let controlPoints = data.controlPoints
+              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 || controlPoints.length === 0) && sourceOrTargetMoved) {
+              if (controlPoints.length === 0 && sourceOrTargetMoved) {
                 controlPoints = bezierControlPoints(data.edge)
               }
-              if (data.edge.points.length === 0 && (!controlPoints || controlPoints.length === 0)) {
+              if (data.edge.points.length === 0 && controlPoints.length === 0) {
                 return acc
               }
               const _updated: ViewChange.SaveManualLayout['layout']['edges'][string] = acc[data.edge.id] = {
                 points: data.edge.points
               }
               if (data.label?.bbox) {
-                _updated.labelBBox = data.label?.bbox
+                _updated.labelBBox = data.label.bbox
               }
               if (data.edge.labelBBox) {
                 _updated.labelBBox ??= data.edge.labelBBox
               }
-              if (controlPoints && hasAtLeast(controlPoints, 1)) {
+              if (hasAtLeast(controlPoints, 1)) {
                 _updated.controlPoints = controlPoints
               }
               if (!sourceOrTargetMoved && data.edge.dotpos) {
@@ -643,12 +690,12 @@ export function createDiagramStore(props: DiagramInitialState) {
               }
               const allX = [
                 ...data.edge.points.map(p => p[0]),
-                ...(controlPoints ?? []).map(p => p.x),
+                ...controlPoints.map(p => p.x),
                 ...(_updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : [])
               ]
               const allY = [
                 ...data.edge.points.map(p => p[1]),
-                ...(controlPoints ?? []).map(p => p.y),
+                ...controlPoints.map(p => p.y),
                 ...(_updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : [])
               ]
               const rect = boxToRect({
@@ -733,8 +780,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             onNavigateTo(
               element.navigateTo,
               event,
-              element as DiagramNodeWithNavigate,
-              xynode
+              element as DiagramNodeWithNavigate
             )
           },
 
@@ -790,51 +836,62 @@ export function createDiagramStore(props: DiagramInitialState) {
           },
 
           fitDiagram: (duration = 500) => {
-            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get()
+            const { fitViewPadding, view, xystore } = get()
             const { width, height, panZoom, transform } = xystore.getState()
 
             const bounds = view.bounds
             const maxZoom = Math.max(1, transform[2])
             const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding)
             panZoom?.setViewport(viewport, { duration })
-            if ((focusedNodeId ?? activeDynamicViewStep) !== null) {
-              set(
-                {
-                  activeDynamicViewStep: null,
-                  focusedNodeId: null,
-                  dimmed: EmptyStringSet
-                },
-                noReplace,
-                'unfocus'
-              )
-            }
           },
 
           nextDynamicStep: (increment = 1) => {
-            const { activeDynamicViewStep, activateDynamicStep } = get()
-            const nextStep = (activeDynamicViewStep ?? 0) + increment
-            if (nextStep <= 0) {
-              return
+            const { activeWalkthrough, xyedges, activateWalkthrough } = get()
+            const stepId = activeWalkthrough?.stepId
+            let nextStep
+            if (stepId) {
+              const currentIndex = xyedges.findIndex(({ id }) => id === stepId)
+              const nextIndex = currentIndex + increment
+              nextStep = xyedges[nextIndex]
+            } else {
+              nextStep = first(xyedges)
             }
-            if (nextStep !== activeDynamicViewStep) {
-              activateDynamicStep(nextStep)
+            if (nextStep) {
+              activateWalkthrough(nextStep.data.edge.id)
+              return
             }
           },
 
-          activateDynamicStep: (nextStep: number) => {
-            const { isDynamicView, xyflow, xystore, fitViewPadding } = get()
+          activateWalkthrough: (step: EdgeId | XYFlowEdge) => {
+            const stepId = typeof step === 'string' ? step : step.data.edge.id
+            invariant(isStepEdgeId(stepId), `stepId ${stepId} is not a step edge id`)
+            let {
+              isDynamicView,
+              xyflow,
+              xyedges,
+              xystore,
+              fitViewPadding,
+              activeWalkthrough
+            } = get()
             invariant(isDynamicView, 'view is not dynamic')
-            const edgeId = StepEdgeId(nextStep)
-            const dimmed = new StringSet()
-            let edge: XYFlowEdge | null = null
-            for (const e of xyflow.getEdges()) {
-              if (e.id === edgeId) {
-                edge = e
-                continue
-              }
-              dimmed.add(e.id)
+            const edge = typeof step === 'string' ? xyedges.find(({ id }) => id === stepId) : step
+            invariant(edge, `edge not found: ${stepId}`)
+            const currentIndex = xyedges.findIndex(({ id }) => id === stepId)
+            activeWalkthrough = {
+              stepId,
+              hasPrevious: currentIndex > 0,
+              hasNext: currentIndex < xyedges.length - 1,
+              parallelPrefix: getParallelStepsPrefix(stepId)
             }
-            invariant(!!edge, `edge not found: ${edgeId}`)
+
+            const dimmed = new StringSet(
+              xyedges
+                .filter(({ id }) =>
+                  id !== stepId
+                  && !(activeWalkthrough.parallelPrefix && id.startsWith(activeWalkthrough.parallelPrefix))
+                )
+                .map(({ id }) => id)
+            )
             const selected = [] as XYFlowNode[]
             for (const n of xyflow.getNodes()) {
               if (n.id === edge.source || n.id === edge.target) {
@@ -855,24 +912,24 @@ export function createDiagramStore(props: DiagramInitialState) {
             set(
               {
                 focusedNodeId: null,
-                activeDynamicViewStep: nextStep,
+                activeWalkthrough,
                 dimmed
               },
               noReplace,
-              'activateDynamicStep'
+              'activateWalkthrough'
             )
           },
 
-          stopDynamicView: () => {
-            if (get().activeDynamicViewStep !== null) {
+          stopWalkthrough: () => {
+            if (get().activeWalkthrough !== null) {
               set(
                 {
-                  activeDynamicViewStep: null,
+                  activeWalkthrough: null,
                   focusedNodeId: null,
                   dimmed: EmptyStringSet
                 },
                 noReplace,
-                'stopDynamicView'
+                'stopWalkthrough'
               )
               get().fitDiagram()
             }
@@ -905,8 +962,70 @@ export function createDiagramStore(props: DiagramInitialState) {
               }
             })
             set({ dimmed }, noReplace, 'highlightByElementNotation')
+          },
+
+          resetEdgeControlPoints: () => {
+            const { xyflow, scheduleSaveManualLayout, xynodes, xyedges } = get()
+
+            xyedges.forEach(edge => {
+              xyflow.updateEdgeData(edge.id, {
+                controlPoints: getControlPointForEdge(edge)
+              })
+            })
+
+            scheduleSaveManualLayout()
+
+            function getNodeCenter(node: XYFlowNode, nodes: XYFlowNode[]) {
+              const dimensions = vector({ x: node.width || 0, y: node.height || 0 })
+              let position = vector(node.position)
+                .add(dimensions.mul(0.5))
+
+              let currentNode = node
+              do {
+                const parent = currentNode.parentId && nodes.find(x => x.id == currentNode.parentId)
+
+                if (!parent) {
+                  break
+                }
+
+                currentNode = parent
+                position = position.add(parent.position)
+              } while (true)
+
+              return position
+            }
+
+            function getControlPointForEdge(edge: XYFlowEdge): XYPoint[] {
+              const source = xynodes.find(x => x.id == edge.source)
+              const target = xynodes.find(x => x.id == edge.target)
+              if (!source || !target) {
+                return []
+              }
+
+              const sourceCenter = getNodeCenter(source, xynodes)
+              const targetCenter = getNodeCenter(target, xynodes)
+
+              if (sourceCenter && targetCenter) {
+                const sourceToTargetVector = targetCenter.sub(sourceCenter)
+                const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector)
+                const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1))
+
+                return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))]
+              }
+
+              return []
+            }
+
+            function getBorderPointOnVector(node: XYFlowNode, nodeCenter: Vector, v: Vector) {
+              const xScale = (node.width || 0) / 2 / v.x
+              const yScale = (node.height || 0) / 2 / v.y
+
+              const scale = Math.min(Math.abs(xScale), Math.abs(yScale))
+
+              return vector(v).mul(scale).add(nodeCenter)
+            }
           }
-        }),
+        } satisfies DiagramState),
         {
           name: `${storeDevId} - ${props.view.id}`,
           enabled: DEV

package/src/{theme.css.ts → theme-vars.ts}

@@ -1,3 +1,4 @@
+import { themeToVars } from '@mantine/vanilla-extract'
 import { createGlobalThemeContract } from '@vanilla-extract/css'
 
 export const vars = createGlobalThemeContract({
@@ -31,12 +32,12 @@ export const vars = createGlobalThemeContract({
     labelBgColor: 'relation-labelBg'
   },
   optionsPanel: {
-    top: 'options-panel-top',
-    right: 'options-panel-right'
+    top: 'options-webview-top',
+    right: 'options-webview-right'
   },
   navigationPanel: {
-    top: 'navigation-panel-top',
-    left: 'navigation-panel-left'
+    top: 'navigation-webview-top',
+    left: 'navigation-webview-left'
   }
 }, (value) => `likec4-${value}`)
 
@@ -67,3 +68,9 @@ export const xyvars = createGlobalThemeContract({
     borderRadius: 'node-border-radius'
   }
 }, (value) => `xy-${value}`)
+
+export const whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
+// we need only variables names
+export const mantine = themeToVars({})

package/src/ui/DiagramTitlePanel.css.ts

@@ -1,6 +1,5 @@
-import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, whereDark } from '../mantine.css'
-import { vars } from '../theme.css'
+import { fallbackVar, style } from '@vanilla-extract/css'
+import { mantine, vars, whereDark } from '../theme-vars'
 
 export const container = style({
   bottom: 0,

package/src/ui/DiagramTitlePanel.tsx

@@ -16,13 +16,29 @@ const selector = (s: DiagramState) => ({
 export default function DiagramTitlePanel() {
   const { id, title, description, links } = useDiagramState(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
-    key: 'diagram-title-panel-collapsed',
+    key: 'diagram-title-webview-collapsed',
     defaultValue: false
   })
   const toggle = () => setCollapsed(v => !v)
 
   return (
     <AnimatePresence mode="wait">
+      {
+        /* <ViewportPortal>
+        <div className={css.inlineTitle} style={{ transform: `translate(0px,${height}px)` }}>
+          <m.div
+            key={id}
+            animate={{ opacity: 0.7, scale: .92 }}
+            whileHover={{ opacity: 1, scale: 1 }}
+            style={{
+              transformOrigin: 'left bottom'
+            }}
+          >
+            <Title order={1}>{title}</Title>
+          </m.div>
+        </div>
+      </ViewportPortal> */
+      }
       <m.div
         key={id}
         initial={{ opacity: 0.05, scale: 0.7 }}
@@ -54,6 +70,7 @@ export default function DiagramTitlePanel() {
                 onClick={toggle}
                 fw={500}
                 fz={'sm'}
+                tabIndex={-1}
               >
                 {title}
               </Button>
@@ -71,6 +88,7 @@ export default function DiagramTitlePanel() {
                   variant={'subtle'}
                   color="gray"
                   onClick={toggle}
+                  tabIndex={-1}
                 >
                   <IconMenu size={11} opacity={0.7} />
                 </Button>
@@ -106,8 +124,12 @@ export default function DiagramTitlePanel() {
               {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>}>
+                  showLabel={
+                    <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
+                  }
+                  hideLabel={
+                    <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
+                  }>
                   <Text
                     component={'div'}
                     size="sm"

package/src/ui/DynamicViewWalkthrough.css.ts

@@ -1,5 +1,5 @@
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../mantine.css'
+import { mantine } from '../theme-vars'
 
 export const container = style({
   position: 'absolute',
@@ -7,7 +7,16 @@ export const container = style({
   left: '50%',
   transform: 'translateX(-50%)',
   padding: 0,
-  margin: 0
+  margin: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+  alignItems: 'center',
+  '@media': {
+    [mantine.largerThan('md')]: {
+      gap: '0.6rem'
+    }
+  }
 })
 
 export const buttons = style({
@@ -45,3 +54,20 @@ globalStyle(`:where(${buttons}, ${btn}) .tabler-icon`, {
   width: '0.85em',
   height: '0.85em'
 })
+
+export const parallelStateFrame = style({
+  position: 'absolute',
+  margin: 0,
+  padding: 0,
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  border: `2px solid ${mantine.colors.orange[6]}`,
+  pointerEvents: 'none',
+  '@media': {
+    [mantine.largerThan('md')]: {
+      borderWidth: 4
+    }
+  }
+})