@likec4/diagram 1.1.1 → 1.2.0

package/src/LikeC4Diagram.tsx

@@ -1,3 +1,4 @@
+import '@xyflow/react/dist/style.css'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { useRef } from 'react'
@@ -8,13 +9,13 @@ import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from '.
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
 import { WhenInitialized } from './state/WhenInitialized'
-import DiagramTitlePanel from './ui/DiagramTitlePanel'
-import OptionsPanel from './ui/OptionsPanel'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
+import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
 import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
 import type { XYFlowData } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
+import { XYFlowInner } from './xyflow/XYFlowInner'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -28,9 +29,10 @@ export function LikeC4Diagram({
   nodesSelectable = !readonly,
   nodesDraggable = !readonly,
   background = 'dots',
-  controls = false,
+  controls = !readonly,
   showElementLinks = true,
   showDiagramTitle = true,
+  enableDynamicViewWalkthrough = true,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -44,6 +46,7 @@ export function LikeC4Diagram({
   onNodeClick,
   onNodeContextMenu
 }: LikeC4DiagramProps) {
+  console.log('LikeC4Diagram')
   const initialRef = useRef<{
     defaultNodes: XYFlowData['nodes']
     defaultEdges: XYFlowData['edges']
@@ -102,19 +105,22 @@ export function LikeC4Diagram({
                 pannable !== true && cssDisablePan,
                 background === 'transparent' && cssTransparentBg
               )}
-              background={background}
-              controls={controls}
               defaultNodes={initialRef.current.defaultNodes}
               defaultEdges={initialRef.current.defaultEdges}
             >
-              {readonly !== true && <OptionsPanel />}
-              {showDiagramTitle === true && <DiagramTitlePanel />}
+              <XYFlowInner
+                showDiagramTitle={showDiagramTitle}
+                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+                background={background}
+                controls={controls}
+              />
             </XYFlow>
+            <WhenInitialized>
+              <SyncWithDiagram />
+              {fitView && <FitViewOnDiagramChange />}
+              {fitView && zoomable && <SelectEdgesOnNodeFocus />}
+            </WhenInitialized>
           </KeepAspectRatioContainer>
-          <WhenInitialized>
-            <SyncWithDiagram />
-            <FitViewOnDiagramChange />
-          </WhenInitialized>
         </DiagramContextProvider>
       </XYFlowProvider>
     </EnsureMantine>

package/src/StaticLikeC4Diagram.tsx

@@ -32,6 +32,7 @@ export function StaticLikeC4Diagram({
       background={background}
       showElementLinks
       showDiagramTitle={false}
+      enableDynamicViewWalkthrough={false}
       nodesSelectable={false}
       nodesDraggable={false}
       {...rest}

package/src/globals.css.ts

@@ -25,6 +25,7 @@ createGlobalTheme(`.${rootClassName}`, {
       }
     }
   },
+  filterDimmed: 'brightness(.6) grayscale(.8) opacity(.5) blur(1px)',
   compound: {
     font: vars.likec4.font,
     titleColor: vars.element.loContrast

package/src/index.ts

@@ -1,6 +1,3 @@
-import '@xyflow/react/dist/style.css'
-import './globals.css'
-
 export { LikeC4Diagram } from './LikeC4Diagram'
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 

package/src/state/DiagramContext.tsx

@@ -1,4 +1,5 @@
-import { createContext, type PropsWithChildren, useRef } from 'react'
+import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
+import { hasSubObject, isIncludedIn } from 'remeda'
 import { useUpdateEffect } from '../hooks'
 import { useXYFlow } from '../xyflow/hooks'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
@@ -18,20 +19,28 @@ export function DiagramContextProvider({ children, view, ...props }: PropsWithCh
     })
   }
 
-  useUpdateEffect(
-    () => store.current?.setState({ xyflow }, false, 'update xyflow'),
-    [xyflow],
-    Object.is
-  )
-
-  useUpdateEffect(
-    () => store.current?.getState().updateView(view),
-    [view]
+  useEffect(
+    () => {
+      if (store.current?.getState().xyflow !== xyflow) {
+        store.current?.setState({ xyflow }, false, 'update xyflow')
+      }
+    },
+    [xyflow]
   )
 
   useUpdateEffect(
-    () => store.current?.setState(props, false, 'update incoming props'),
-    [props]
+    () => {
+      if (!store.current) return
+      const state = store.current.getState()
+      if (state.view !== view) {
+        state.updateView(view)
+      }
+      if (!hasSubObject(state, props)) {
+        store.current.setState(props, false, 'update incoming props')
+      }
+      isIncludedIn
+    },
+    [view, props]
   )
 
   return (

package/src/state/diagramStore.ts

@@ -1,5 +1,6 @@
 import type {
   BorderStyle,
+  DiagramEdge,
   DiagramNode,
   DiagramView,
   ElementShape,
@@ -8,20 +9,21 @@ import type {
   ThemeColor,
   ViewID
 } from '@likec4/core'
-import { invariant, nonexhaustive } from '@likec4/core'
-import type { XYPosition } from '@xyflow/react'
+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 } from 'remeda'
+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
@@ -38,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
@@ -46,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[]
 
@@ -62,6 +71,8 @@ export type DiagramStore = {
   viewportChanged: boolean
 } & Required<LikeC4DiagramEventHandlers>
 
+const StringSet = Set<string>
+
 export type DiagramInitialState = // Required properties
   & Pick<
     DiagramStore,
@@ -85,8 +96,12 @@ 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
 
@@ -98,20 +113,26 @@ interface DiagramStoreActions {
   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,
@@ -130,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<
@@ -146,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')
@@ -253,7 +335,8 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 {
                   focusedNodeId: null,
                   lastClickedNodeId: null,
-                  lastClickedEdgeId: null
+                  lastClickedEdgeId: null,
+                  dimmed: EmptyStringSet
                 },
                 noReplace,
                 'resetLastClicked'
@@ -386,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: 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

@@ -10,9 +10,10 @@ export const container = style({
 
 export const paper = style({
   cursor: 'default',
-  minWidth: 200,
+  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')]: {

package/src/ui/DiagramTitlePanel.tsx

@@ -1,10 +1,9 @@
 import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
-import { useToggle } from '@react-hookz/web'
+import { useLocalStorage } from '@mantine/hooks'
 import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../state'
 import * as css from './DiagramTitlePanel.css'
-import { useLocalStorage } from '@mantine/hooks'
 
 const selector = (s: DiagramState) => ({
   id: s.view.id,
@@ -40,7 +39,7 @@ export default function DiagramTitlePanel() {
           radius="sm"
           withBorder={!isCollapsed}
           className={css.paper}
-          p={isCollapsed ? 'sm' : 'md'}
+          p={isCollapsed ? 'xs' : 'lg'}
           onDoubleClick={e => e.stopPropagation()}>
           <Stack gap={'sm'} justify="stretch" align="stretch">
             <Group justify="stretch" wrap="nowrap" onClick={toggle} style={{ cursor: 'pointer' }}>
@@ -99,7 +98,7 @@ export default function DiagramTitlePanel() {
                     justify="stretch"
                     align="stretch">
                     {links.map((link) => (
-                      <Group key={link} wrap="nowrap" align='center' gap={'sm'}>
+                      <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
                         <Box flex={'1'} style={{ overflow: 'hidden' }}>
                           <Anchor
                             href={link}

package/src/ui/DynamicViewWalkthrough.css.ts

@@ -0,0 +1,46 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+
+export const container = style({
+  position: 'absolute',
+  bottom: '0.5rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  padding: 0,
+  margin: 0
+})
+
+export const buttons = style({
+  backdropFilter: 'blur(8px)',
+  transition: 'all 175ms ease-in',
+  ':hover': {
+    transitionTimingFunction: 'ease-out',
+    transform: 'scale(1.1)'
+  },
+  ':active': {
+    transitionDuration: '100ms',
+    transform: 'scale(0.98) translateY(3px)'
+  }
+})
+
+var transparency = createVar()
+export const btn = style({
+  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})`
+  },
+  selectors: {
+    [mantine.lightSelector]: {
+      vars: {
+        [transparency]: '15%'
+      }
+    }
+  }
+})
+
+globalStyle(`${btn} .tabler-icon`, {
+  width: '80%'
+})