@likec4/diagram 1.1.0 → 1.2.0

package/src/state/diagramStore.ts

@@ -1,17 +1,29 @@
-import type { DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core'
-import { invariant, nonexhaustive } from '@likec4/core'
-import type { XYPosition } from '@xyflow/react'
+import type {
+  BorderStyle,
+  DiagramEdge,
+  DiagramNode,
+  DiagramView,
+  ElementShape,
+  Fqn,
+  NonEmptyArray,
+  ThemeColor,
+  ViewID
+} from '@likec4/core'
+import { invariant, nonexhaustive, StepEdgeId } from '@likec4/core'
+import { getViewportForBounds, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
+import { entries, filter, map, prop } from 'remeda'
 import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { Change, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
-import type { XYFlowInstance, XYFlowNode } from '../xyflow/types'
+import type { XYStoreApi } from '../xyflow/hooks'
+import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
 
 export type DiagramStore = {
   // Incoming props
@@ -28,6 +40,10 @@ export type DiagramStore = {
   // Internal state
   xyflow: XYFlowInstance
   initialized: boolean
+  xyflowSynced: boolean
+
+  // If Dynamic View
+  activeDynamicViewStep: number | null
 
   // This is XYFlow id's
   lastClickedNodeId: string | null
@@ -36,6 +52,9 @@ export type DiagramStore = {
   hoveredNodeId: string | null
   hoveredEdgeId: string | null
 
+  // id's of nodes / edges that
+  dimmed: ReadonlySet<string>
+
   // Stack of previous distinct views (unique id's)
   previousViews: DiagramView[]
 
@@ -52,6 +71,8 @@ export type DiagramStore = {
   viewportChanged: boolean
 } & Required<LikeC4DiagramEventHandlers>
 
+const StringSet = Set<string>
+
 export type DiagramInitialState = // Required properties
   & Pick<
     DiagramStore,
@@ -75,31 +96,43 @@ export type DiagramInitialState = // Required properties
   & LikeC4DiagramEventHandlers
 
 interface DiagramStoreActions {
+  isDynamicView: () => boolean
+
   updateView: (view: DiagramView) => void
 
+  focusOnNode: (nodeId: string) => void
+
   setHoveredNode: (nodeId: string | null) => void
   setHoveredEdge: (edgeId: string | null) => void
 
   setLastClickedNode: (nodeId: string | null) => void
   setLastClickedEdge: (edgeId: string | null) => void
 
+  resetLastClicked: () => void
+
   getElement(id: Fqn): DiagramNode | null
   triggerOnChange: (changes: NonEmptyArray<Change>) => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: (centerNode?: XYFlowNode) => void
+  fitDiagram: (xyStore: XYStoreApi) => void
+
+  nextDynamicStep: (increment?: number) => void
+  stopDynamicView: () => void
 }
 
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
 
 const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
   initialized: false,
+  xyflowSynced: false,
   previousViews: [],
   viewportChanged: false,
+  activeDynamicViewStep: null,
   focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
   lastClickedEdgeId: null,
+  dimmed: new StringSet(),
   lastOnNavigate: null,
   onChange: null,
   onNavigateTo: null,
@@ -118,7 +151,7 @@ const noReplace = false
 
 let storeDevId = 1
 
-const containsWithId = <T extends { id: string }>(arr: T[], id: string) => arr.some((x) => x.id === id)
+const EmptyStringSet: ReadonlySet<string> = new StringSet()
 
 export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T) {
   return createWithEqualityFn<
@@ -134,78 +167,139 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           ...DEFAULT_PROPS,
           ...(props as CreateDiagramStore),
 
-          updateView: (view) => {
+          isDynamicView: () => {
+            return get().view?.__ === 'dynamic'
+          },
+
+          updateView: (nextView) => {
             let {
-              view: currentView,
+              dimmed,
+              xyflowSynced,
+              view: current,
               lastOnNavigate,
               previousViews,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
+              activeDynamicViewStep,
               hoveredEdgeId,
               hoveredNodeId
             } = get()
 
-            if (shallowEqual(currentView, view)) {
+            if (shallowEqual(current, nextView)) {
+              if (!xyflowSynced) {
+                set({ xyflowSynced: true }, noReplace, 'updateView: xyflow synced')
+              }
               DEV && console.debug('store: skip updateView')
               return
             }
 
-            // Reset lastOnNavigate if the view is not the source or target view
-            if (lastOnNavigate && lastOnNavigate.toView !== view.id && lastOnNavigate.fromView !== view.id) {
-              lastOnNavigate = null
-            }
-
-            const isSameView = currentView.id === view.id
+            const isSameView = current.id === nextView.id
 
             if (isSameView) {
+              const nodeIds = new StringSet(nextView.nodes.map((n) => n.id))
+              const edgeIds = new StringSet(nextView.edges.map((e) => e.id))
               // Reset clicked/hovered node/edge if the node/edge is not in the new view
-              if (lastClickedNodeId && !containsWithId(view.nodes, lastClickedNodeId)) {
+              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId)) {
                 lastClickedNodeId = null
               }
-              if (hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId)) {
+              if (hoveredNodeId && !nodeIds.has(hoveredNodeId)) {
                 hoveredNodeId = null
               }
-              if (focusedNodeId && !containsWithId(view.nodes, focusedNodeId)) {
+              if (focusedNodeId && !nodeIds.has(focusedNodeId)) {
                 focusedNodeId = null
               }
-              if (lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId)) {
+              if (lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId)) {
                 lastClickedEdgeId = null
               }
-              if (hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId)) {
+              if (hoveredEdgeId && !edgeIds.has(hoveredEdgeId)) {
                 hoveredEdgeId = null
               }
+              if (activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep))) {
+                activeDynamicViewStep = null
+              }
+              xyflowSynced = deepEqual(current.nodes, nextView.nodes) && deepEqual(current.edges, nextView.edges)
+              if (!xyflowSynced) {
+                let nextDimmed = new StringSet([...dimmed].filter(id => nodeIds.has(id) || edgeIds.has(id)))
+                if (nextDimmed.size !== dimmed.size) {
+                  dimmed = nextDimmed
+                }
+              }
             } else {
+              // Reset lastOnNavigate if the view is not the source or target view
+              if (lastOnNavigate) {
+                if (lastOnNavigate.toView !== nextView.id && lastOnNavigate.fromView !== nextView.id) {
+                  lastOnNavigate = null
+                }
+              }
+
               // Reset hovered / clicked node/edge if the view is different
               lastClickedEdgeId = null
               lastClickedNodeId = null
               hoveredEdgeId = null
               hoveredNodeId = null
               focusedNodeId = null
+              activeDynamicViewStep = null
+              dimmed = EmptyStringSet
 
               // Update history stack (back button not implemented yet)
               previousViews = [
-                currentView,
-                ...previousViews.filter((v) => v.id !== view.id && v.id !== currentView.id)
+                current,
+                ...previousViews.filter((v) => v.id !== nextView.id && v.id !== current.id)
               ]
+              xyflowSynced = false
             }
 
             set(
               {
-                view,
+                view: nextView,
+                activeDynamicViewStep,
+                xyflowSynced,
                 lastOnNavigate,
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
-                hoveredNodeId
+                hoveredNodeId,
+                dimmed
               },
               noReplace,
               'update-view'
             )
           },
 
+          focusOnNode: (nodeId) => {
+            const { focusedNodeId, view } = get()
+            if (nodeId !== focusedNodeId) {
+              const notDimmed = new StringSet([nodeId])
+              const dimmed = new StringSet()
+              for (const edge of view.edges) {
+                if (edge.source === nodeId || edge.target === nodeId) {
+                  notDimmed.add(edge.source)
+                  notDimmed.add(edge.target)
+                } else {
+                  dimmed.add(edge.id)
+                }
+              }
+              for (const node of view.nodes) {
+                if (notDimmed.has(node.id)) {
+                  continue
+                }
+                dimmed.add(node.id)
+              }
+              set(
+                {
+                  activeDynamicViewStep: null,
+                  focusedNodeId: nodeId,
+                  dimmed
+                },
+                noReplace,
+                `focus on node: ${nodeId}`
+              )
+            }
+          },
+
           setHoveredNode: (nodeId) => {
             if (nodeId !== get().hoveredNodeId) {
               set({ hoveredNodeId: nodeId }, noReplace, nodeId ? 'setHoveredNode' : 'unsetHoveredNode')
@@ -230,88 +324,115 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             }
           },
 
+          resetLastClicked: () => {
+            let {
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId
+            } = get()
+            if (focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
+              set(
+                {
+                  focusedNodeId: null,
+                  lastClickedNodeId: null,
+                  lastClickedEdgeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                'resetLastClicked'
+              )
+            }
+          },
+
           getElement: (fqn) => {
             const { view } = get()
             return view.nodes.find(({ id }) => id === fqn) ?? null
           },
 
           triggerOnChange: (changes: NonEmptyArray<Change>) => {
+            if (DEV) {
+              console.debug('triggerOnChange', changes)
+            }
             const newShapes = new Map<Fqn, ElementShape>()
             const newColor = new Map<Fqn, ThemeColor>()
+            const newOpacity = new Map<Fqn, number>()
+            const newBorder = new Map<Fqn, BorderStyle>()
             for (const change of changes) {
-              if (change.op === 'change-shape') {
-                for (const target of change.targets) {
-                  newShapes.set(target, change.shape)
-                }
-                continue
+              if (change.op !== 'change-element-style') {
+                nonexhaustive(change.op)
               }
-              if (change.op === 'change-color') {
-                for (const target of change.targets) {
-                  newColor.set(target, change.color)
+              for (const target of change.targets) {
+                for (const [key, value] of entries.strict(change.style)) {
+                  switch (key) {
+                    case 'shape':
+                      newShapes.set(target, value)
+                      break
+                    case 'color':
+                      newColor.set(target, value)
+                      break
+                    case 'opacity':
+                      newOpacity.set(target, value)
+                      break
+                    case 'border':
+                      newBorder.set(target, value)
+                      break
+                    default:
+                      nonexhaustive(key)
+                  }
                 }
-                continue
               }
-              nonexhaustive(change)
             }
-            // TODO: Update positions/sizes
-            // const { view, updateView } = get()
-            // let hasChanges = false
-            // const nextNodes = view.nodes.map((node) => {
-            //   const shape = newShapes.get(node.id)
-            //   if (shape && shape !== node.shape) {
-            //     hasChanges = true
-            //     node = {
-            //       ...node,
-            //       shape
-            //     }
-            //   }
-            //   const color = newColor.get(node.id)
-            //   if (color && color !== node.color) {
-            //     hasChanges = true
-            //     node = {
-            //       ...node,
-            //       color
-            //     }
-            //   }
-            //   return node
-            // })
-            // if (hasChanges) {
-            //   updateView({
-            //     ...view,
-            //     nodes: nextNodes
-            //   })
-            // }
+
             get().xyflow.setNodes(nodes =>
               nodes.map(node => {
-                let { data } = node
-                const shape = newShapes.get(data.fqn)
-                if (shape && shape !== data.element.shape) {
-                  node = {
-                    ...node,
-                    data: {
-                      ...data,
-                      element: {
-                        ...data.element,
-                        shape
-                      }
+                let element = node.data.element
+                const shape = newShapes.get(element.id)
+                if (shape && shape !== element.shape) {
+                  element = {
+                    ...element,
+                    shape
+                  }
+                }
+                const color = newColor.get(element.id)
+                if (color && color !== element.color) {
+                  element = {
+                    ...element,
+                    color
+                  }
+                }
+
+                const opacity = newOpacity.get(element.id)
+                if (!!opacity && opacity !== element.style?.opacity) {
+                  element = {
+                    ...element,
+                    style: {
+                      ...element.style,
+                      opacity
                     }
                   }
-                  data = node.data
                 }
-                const color = newColor.get(data.fqn)
-                if (color && color !== data.element.color) {
-                  node = {
-                    ...node,
-                    data: {
-                      ...data,
-                      element: {
-                        ...data.element,
-                        color
-                      }
+
+                const border = newBorder.get(element.id)
+                if (border && border !== element.style?.border) {
+                  element = {
+                    ...element,
+                    style: {
+                      ...element.style,
+                      border
                     }
                   }
                 }
-                return node
+
+                if (element === node.data.element) {
+                  return node
+                }
+                return {
+                  ...node,
+                  data: {
+                    ...node.data,
+                    element
+                  }
+                }
               })
             )
             get().onChange?.({ changes })
@@ -348,22 +469,78 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             )
           },
 
-          fitDiagram: (centerNode) => {
-            const { fitViewPadding, xyflow, focusedNodeId } = get()
+          fitDiagram: (xyStore) => {
+            const { width, height, panZoom } = xyStore.getState()
+            const { fitViewPadding, view, focusedNodeId } = get()
+            const bounds = {
+              x: 0,
+              y: 0,
+              width: view.width,
+              height: view.height
+            }
+            const viewport = getViewportForBounds(bounds, width, height, MinZoom, 1, fitViewPadding)
+            panZoom?.setViewport(viewport, { duration: 400 })
+            if (!!focusedNodeId) {
+              set(
+                {
+                  focusedNodeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                'unfocus'
+              )
+            }
+          },
+
+          nextDynamicStep: (increment = 1) => {
+            const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get()
+            invariant(view.__ === 'dynamic', 'view is not dynamic')
+            const nextStep = (activeDynamicViewStep ?? 0) + increment
+            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)
+            }
+            invariant(!!edge, `edge not found: ${edgeId}`)
+            const selected = [] as XYFlowNode[]
+            for (const n of xyflow.getNodes()) {
+              if (n.id === edge.source || n.id === edge.target) {
+                selected.push(n)
+                continue
+              }
+              dimmed.add(n.id)
+            }
             xyflow.fitView({
-              includeHiddenNodes: true,
-              duration: (centerNode && focusedNodeId) ? 300 : 400,
-              padding: centerNode ? 0 : fitViewPadding,
+              duration: 400,
+              maxZoom: 1,
               minZoom: MinZoom,
+              padding: fitViewPadding,
+              nodes: selected
+            })
+            set({
+              focusedNodeId: null,
+              activeDynamicViewStep: nextStep,
+              dimmed
+            })
+          },
+
+          stopDynamicView: () => {
+            const { xyflow, fitViewPadding } = get()
+            set({
+              activeDynamicViewStep: null,
+              dimmed: EmptyStringSet
+            })
+            xyflow.fitView({
+              duration: 400,
               maxZoom: 1,
-              ...(centerNode && { nodes: [centerNode] })
+              minZoom: MinZoom,
+              padding: fitViewPadding
             })
-            if (centerNode && focusedNodeId !== centerNode.id) {
-              set({ focusedNodeId: centerNode.id }, noReplace, 'focus node')
-            }
-            if (!centerNode && !!focusedNodeId) {
-              set({ focusedNodeId: null }, noReplace, 'unfocus')
-            }
           }
         }),
         {

package/src/theme.css.ts

@@ -4,6 +4,7 @@ export const vars = createGlobalThemeContract({
   default: {
     font: 'default-font-family'
   },
+  filterDimmed: 'filter-dimmed',
   likec4: {
     font: 'font-family',
     background: {

package/src/ui/DiagramTitlePanel.css.ts

@@ -0,0 +1,33 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+
+export const container = style({
+  bottom: 0,
+  left: 0,
+  padding: 8,
+  margin: 0
+})
+
+export const paper = style({
+  cursor: 'default',
+  minWidth: 100,
+  maxWidth: 'calc(100vw - 16px)',
+  backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
+  WebkitBackdropFilter: 'blur(8px)',
+  backdropFilter: 'blur(8px)',
+  '@media': {
+    [mantine.largerThan('md')]: {
+      maxWidth: '45vw'
+    }
+  }
+})
+
+export const title = style({})
+
+export const description = style({
+  whiteSpaceCollapse: 'preserve-breaks',
+  color: mantine.colors.gray[7]
+})
+globalStyle(`:where([data-mantine-color-scheme="dark"]) ${description}`, {
+  color: mantine.colors.gray[5]
+})