@likec4/diagram 1.3.0 → 1.5.0

package/src/state/diagramStore.ts

@@ -1,11 +1,11 @@
 import type { DiagramNode, DiagramView, Fqn, ViewID } from '@likec4/core'
-import { invariant, nonexhaustive, nonNullable, StepEdgeId } from '@likec4/core'
+import { invariant, nonexhaustive, StepEdgeId } from '@likec4/core'
 import { getViewportForBounds, type XYPosition } from '@xyflow/react'
-import { getInternalNodesBounds, getNodeDimensions } from '@xyflow/system'
+import { getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { debounce, entries, mapToObj, reduce } from 'remeda'
+import { entries, isEmpty, reduce } from 'remeda'
 import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
@@ -17,6 +17,7 @@ import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
 import { bezierControlPoints, isSamePoint } from '../xyflow/utils'
 
 export type DiagramStore = {
+  readonly storeDevId: string
   // Incoming props
   view: DiagramView
   readonly: boolean
@@ -28,12 +29,14 @@ export type DiagramStore = {
   nodesDraggable: boolean
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
+  // Diagram Container, see DiagramContainer.tsx
+  getContainer: () => HTMLDivElement | null
 
   // Internal state
-  viewSyncState: 'synced' | 'changed'
   viewSyncDebounceTimeout: number | null
 
   xyflow: XYFlowInstance
+  xystore: XYStoreApi
   initialized: boolean
   xyflowSynced: boolean
 
@@ -83,13 +86,6 @@ export type DiagramInitialState = // Required properties
     | 'nodesSelectable'
     | 'experimentalEdgeEditing'
   >
-  // Optional properties
-  // & Partial<
-  //   Pick<
-  //     DiagramStore,
-  //     'colorScheme'
-  //   >
-  // >
   & LikeC4DiagramEventHandlers
 
 interface DiagramStoreActions {
@@ -109,9 +105,11 @@ interface DiagramStoreActions {
 
   getElement(id: Fqn): DiagramNode | null
   triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
-  triggerSaveManualLayout: (xystore: XYStoreApi) => void
+
+  cancelSaveManualLayout: () => void
+  triggerSaveManualLayout: () => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: (xyStore: XYStoreApi) => void
+  fitDiagram: (duration?: number) => void
 
   nextDynamicStep: (increment?: number) => void
   stopDynamicView: () => void
@@ -119,8 +117,10 @@ interface DiagramStoreActions {
 
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
 
-const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
-  viewSyncState: 'synced',
+const DEFAULT_PROPS: Except<
+  DiagramStore,
+  RequiredKeysOf<DiagramInitialState> | 'xystore' | 'xyflow' | 'getContainer' | 'storeDevId'
+> = {
   viewSyncDebounceTimeout: null,
   initialized: false,
   xyflowSynced: false,
@@ -145,15 +145,16 @@ const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> |
   onCanvasDblClick: null
 }
 
-type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xyflow'>
+export type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xystore' | 'xyflow' | 'getContainer'>
 
 const noReplace = false
 
-let storeDevId = 1
+let StoreDevId = 1
 
 const EmptyStringSet: ReadonlySet<string> = new StringSet()
 
 export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T) {
+  const storeDevId = 'DiagramStore' + String(StoreDevId++).padStart(2, '0')
   return createWithEqualityFn<
     DiagramState,
     [
@@ -164,9 +165,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
     subscribeWithSelector(
       devtools(
         (set, get) => ({
+          storeDevId,
           ...DEFAULT_PROPS,
           ...(props as CreateDiagramStore),
-
           isDynamicView: () => {
             return get().view?.__ === 'dynamic'
           },
@@ -174,7 +175,6 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
-              viewSyncState,
               xyflow,
               dimmed,
               xyflowSynced,
@@ -189,26 +189,16 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               hoveredNodeId
             } = get()
 
-            if (viewSyncDebounceTimeout) {
-              clearTimeout(viewSyncDebounceTimeout)
-              viewSyncDebounceTimeout = null
-            }
-
             if (shallowEqual(current, nextView)) {
-              if (!xyflowSynced || viewSyncState === 'changed') {
-                set(
-                  {
-                    viewSyncState: 'synced',
-                    xyflowSynced: true
-                  },
-                  noReplace,
-                  'updateView: xyflow synced'
-                )
-              }
               DEV && console.debug('store: skip updateView')
               return
             }
 
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              viewSyncDebounceTimeout = null
+            }
+
             const isSameView = current.id === nextView.id
 
             if (isSameView) {
@@ -272,7 +262,6 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
 
             set(
               {
-                viewSyncState: 'synced',
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
@@ -287,7 +276,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 dimmed
               },
               noReplace,
-              'update-view'
+              isSameView ? 'update-view [same]' : 'update-view [another]'
             )
           },
 
@@ -324,25 +313,25 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
 
           setHoveredNode: (nodeId) => {
             if (nodeId !== get().hoveredNodeId) {
-              set({ hoveredNodeId: nodeId }, noReplace, nodeId ? 'setHoveredNode' : 'unsetHoveredNode')
+              set({ hoveredNodeId: nodeId })
             }
           },
 
           setHoveredEdge: (edgeId) => {
             if (edgeId !== get().hoveredEdgeId) {
-              set({ hoveredEdgeId: edgeId }, noReplace, edgeId ? 'setHoveredEdge' : 'unsetHoveredEdge')
+              set({ hoveredEdgeId: edgeId })
             }
           },
 
           setLastClickedNode: (nodeId) => {
             if (nodeId !== get().lastClickedNodeId) {
-              set({ lastClickedNodeId: nodeId }, noReplace, nodeId ? 'setLastClickedNode' : 'unsetLastClickedNode')
+              set({ lastClickedNodeId: nodeId })
             }
           },
 
           setLastClickedEdge: (edgeId) => {
             if (edgeId !== get().lastClickedEdgeId) {
-              set({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? 'setLastClickedEdge' : 'unsetLastClickedEdge')
+              set({ lastClickedEdgeId: edgeId })
             }
           },
 
@@ -386,7 +375,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 return origin
               }
               let element = origin
-              for (const [key, value] of entries.strict(change.style)) {
+              for (const [key, value] of entries(change.style)) {
                 switch (key) {
                   case 'shape':
                     if (value !== element.shape) {
@@ -441,16 +430,21 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 ...view,
                 nodes
               })
-              if (onChange) {
-                set({ viewSyncState: 'changed' }, noReplace, 'change sync state')
-              }
             }
             // Trigger change event, even if there are no changes with local state
             // but we maybe out of sync with the server
             onChange?.({ change })
           },
 
-          triggerSaveManualLayout: (xystore) => {
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get()
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              set({ viewSyncDebounceTimeout: null })
+            }
+          },
+
+          triggerSaveManualLayout: () => {
             let { viewSyncDebounceTimeout: debounced, onChange } = get()
             if (!onChange) {
               DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
@@ -460,8 +454,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               clearTimeout(debounced)
             }
             debounced = setTimeout(() => {
+              const { xyflow, onChange, xystore } = get()
               const { nodeLookup } = xystore.getState()
-              const { xyflow, onChange } = get()
+              set({ viewSyncDebounceTimeout: null })
 
               const movedNodes = new StringSet()
               const nodes = reduce([...nodeLookup.values()], (acc, node) => {
@@ -490,6 +485,10 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 }
                 return acc
               }, {} as Changes.SaveManualLayout['edges'])
+              if (movedNodes.size === 0 && isEmpty(edges)) {
+                DEV && console.debug('ignore triggerSaveManualLayout, as no changes detected')
+                return
+              }
 
               const change: Changes.SaveManualLayout = {
                 op: 'save-manual-layout',
@@ -500,24 +499,24 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               if (DEV) {
                 console.debug('triggerSaveManualLayout', change)
               }
-              set({ viewSyncDebounceTimeout: null }, noReplace, 'clear debounce timeout')
+
               onChange?.({ change })
-            }, 5000)
+            }, 2000) as any as number // explicit typecast to number to suppress TS error in astro build
             set(
               {
-                viewSyncDebounceTimeout: debounced,
-                viewSyncState: 'changed'
+                viewSyncDebounceTimeout: debounced
               },
               noReplace,
-              'change sync state'
+              'debounce sync state'
             )
           },
 
           triggerOnNavigateTo: (xynodeId, event) => {
             const { xyflow, view } = get()
             const xynode = xyflow.getInternalNode(xynodeId)
-            const element = xynode?.data.element as DiagramNodeWithNavigate
-            invariant(!!xynode && element?.navigateTo, `node is not navigable: ${xynodeId}`)
+            invariant(!!xynode, `node not found: ${xynodeId}`)
+            const element = xynode.data.element as DiagramNodeWithNavigate
+            invariant(element.navigateTo, `node is not navigable: ${xynodeId}`)
             set(
               {
                 lastClickedNodeId: xynodeId,
@@ -543,20 +542,23 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             )
           },
 
-          fitDiagram: (xyStore) => {
-            const { width, height, panZoom } = xyStore.getState()
-            const { fitViewPadding, view, focusedNodeId } = get()
+          fitDiagram: (duration = 500) => {
+            const { fitViewPadding, view, focusedNodeId, activeDynamicViewStep, xystore } = get()
+            const { width, height, panZoom, transform } = xystore.getState()
+
             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: 500 })
-            if (!!focusedNodeId) {
+            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
                 },
@@ -567,7 +569,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           },
 
           nextDynamicStep: (increment = 1) => {
-            const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get()
+            const { view, activeDynamicViewStep, xyflow, xystore, fitViewPadding } = get()
             invariant(view.__ === 'dynamic', 'view is not dynamic')
             const nextStep = (activeDynamicViewStep ?? 0) + increment
             if (nextStep <= 0 || nextStep > view.edges.length) {
@@ -592,36 +594,43 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               }
               dimmed.add(n.id)
             }
-            xyflow.fitView({
+            const { fitView, transform } = xystore.getState()
+            fitView({
               duration: 400,
-              maxZoom: 1,
+              includeHiddenNodes: true,
+              maxZoom: Math.max(1, transform[2]),
               minZoom: MinZoom,
-              padding: fitViewPadding,
+              padding: Math.max(fitViewPadding, 0.2),
               nodes: selected
             })
-            set({
-              focusedNodeId: null,
-              activeDynamicViewStep: nextStep,
-              dimmed
-            })
+            set(
+              {
+                focusedNodeId: null,
+                activeDynamicViewStep: nextStep,
+                dimmed
+              },
+              noReplace,
+              'nextDynamicStep'
+            )
           },
 
           stopDynamicView: () => {
-            const { xyflow, fitViewPadding } = get()
-            set({
-              activeDynamicViewStep: null,
-              dimmed: EmptyStringSet
-            })
-            xyflow.fitView({
-              duration: 400,
-              maxZoom: 1,
-              minZoom: MinZoom,
-              padding: fitViewPadding
-            })
+            if (get().activeDynamicViewStep !== null) {
+              set(
+                {
+                  activeDynamicViewStep: null,
+                  focusedNodeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                'stopDynamicView'
+              )
+              get().fitDiagram()
+            }
           }
         }),
         {
-          name: `DiagramStore ${storeDevId++} - ${props.view.id}`,
+          name: `${storeDevId} - ${props.view.id}`,
           enabled: DEV
         }
       )

package/src/state/hooks.ts

@@ -0,0 +1,5 @@
+export { useDiagramState, useDiagramStoreApi } from './useDiagramStore'
+export { useNavigationHistory } from './useNavigationHistory'
+
+export type * from './diagramStore'
+export type * from './useDiagramStore'

package/src/state/index.ts

@@ -1,4 +1,2 @@
-export { DiagramContextProvider } from './DiagramContext'
 export type * from './diagramStore'
-export * from './useDiagramStore'
-export { WhenInitialized } from './WhenInitialized'
+export type * from './useDiagramStore'

package/src/state/useDiagramStore.ts

@@ -1,14 +1,14 @@
 import { shallowEqual } from 'fast-equals'
-import { useContext, useMemo } from 'react'
+import { useContext } from 'react'
 import { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'
 
-import { DiagramContext } from './DiagramContext'
+import { DiagramContext, type DiagramZustandStore } from './DiagramContext'
 import type { DiagramState } from './diagramStore'
 
 function useDiagramState<StateSlice = unknown>(
   selector: (state: DiagramState) => StateSlice,
   equalityFn?: (a: StateSlice, b: StateSlice) => boolean
-) {
+): StateSlice {
   const store = useContext(DiagramContext)
 
   if (store === null) {
@@ -18,22 +18,15 @@ function useDiagramState<StateSlice = unknown>(
   return useZustandStore(store, selector, equalityFn ?? shallowEqual)
 }
 
-function useDiagramStoreApi() {
+export type DiagramStoreApi = Readonly<Pick<DiagramZustandStore, 'getState' | 'setState' | 'subscribe'>>
+function useDiagramStoreApi(): DiagramStoreApi {
   const store = useContext(DiagramContext)
 
   if (store === null) {
     throw new Error('useDiagramStoreApi could be used only inside DiagramContext')
   }
 
-  return useMemo(
-    () => ({
-      getState: store.getState,
-      setState: store.setState,
-      subscribe: store.subscribe
-    }),
-    [store]
-  )
+  return store
 }
-export type DiagramStoreApi = ReturnType<typeof useDiagramStoreApi>
 
 export { useDiagramState, useDiagramStoreApi }

package/src/state/useNavigationHistory.ts

@@ -0,0 +1,39 @@
+import { useStateHistory } from '@mantine/hooks'
+import { useMemo } from 'react'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import { useDiagramState, useDiagramStoreApi } from './useDiagramStore'
+
+export function useNavigationHistory() {
+  const store = useDiagramStoreApi()
+  const viewId = useDiagramState(s => s.view.id)
+
+  const [historyViewId, historyOps, {
+    history,
+    current: historyIndex
+  }] = useStateHistory(viewId)
+
+  const hasBack = historyIndex > 0
+  const hasForward = historyIndex < history.length - 1
+
+  useUpdateEffect(() => {
+    if (viewId !== historyViewId) {
+      historyOps.set(viewId)
+    }
+  }, [viewId])
+
+  useUpdateEffect(() => {
+    if (viewId !== historyViewId) {
+      store.getState().onNavigateTo?.(historyViewId)
+    }
+  }, [historyViewId])
+
+  return useMemo(() => ({
+    hasBack,
+    hasForward,
+    ops: historyOps
+  }), [
+    hasBack,
+    hasForward,
+    historyOps
+  ])
+}

package/src/theme.css.ts

@@ -1,6 +1,7 @@
 import { createGlobalThemeContract } from '@vanilla-extract/css'
 
 export const vars = createGlobalThemeContract({
+  safariAnimationHook: 'safari-animation-hook',
   default: {
     font: 'default-font-family'
   },
@@ -32,6 +33,10 @@ export const vars = createGlobalThemeContract({
   optionsPanel: {
     top: 'options-panel-top',
     right: 'options-panel-right'
+  },
+  navigationPanel: {
+    top: 'navigation-panel-top',
+    left: 'navigation-panel-left'
   }
 }, (value) => `likec4-${value}`)
 

package/src/ui/BackwardForwardPanel.css.ts

@@ -0,0 +1,22 @@
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+import { vars } from '../theme.css'
+
+export const panel = style({
+  top: fallbackVar(vars.navigationPanel.top, '0.8rem'),
+  left: fallbackVar(vars.navigationPanel.left, '1rem'),
+  margin: 0
+})
+
+globalStyle(`${panel} .mantine-ActionIcon-root`, {
+  vars: {
+    ['--ai-size']: 'var(--ai-size-lg)'
+  }
+  // '@media': {
+  //   [mantine.largerThan('lg')]: {
+  //     vars: {
+  //       ['--ai-size']: 'var(--ai-size-xl)'
+  //     }
+  //   }
+  // }
+})

package/src/ui/BackwardForwardPanel.tsx

@@ -0,0 +1,59 @@
+import { ActionIcon, Group } from '@mantine/core'
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { AnimatePresence, m } from 'framer-motion'
+import { useNavigationHistory } from '../state/hooks'
+import * as css from './BackwardForwardPanel.css'
+
+export function BackwardForwardPanel() {
+  const { hasBack, hasForward, ops } = useNavigationHistory()
+
+  return (
+    <Group
+      className={clsx(
+        'react-flow__panel',
+        css.panel,
+        'likec4-navigation-panel'
+      )}
+      gap={'xs'}>
+      <AnimatePresence>
+        {hasBack && (
+          <m.div
+            layout
+            initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
+            animate={{ opacity: 1, transform: 'translateX(0)' }}
+            exit={{
+              opacity: 0.05,
+              transform: 'translateX(-10px)'
+            }}
+            key={'back'}>
+            <ActionIcon
+              variant="light"
+              color="gray"
+              onClick={() => ops.back()}>
+              <IconChevronLeft />
+            </ActionIcon>
+          </m.div>
+        )}
+        {hasForward && (
+          <m.div
+            layout
+            initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
+            animate={{ opacity: 1, transform: 'translateX(0)' }}
+            exit={{
+              opacity: 0,
+              transform: 'translateX(10px)'
+            }}
+            key={'forward'}>
+            <ActionIcon
+              variant="light"
+              color="gray"
+              onClick={() => ops.forward()}>
+              <IconChevronRight />
+            </ActionIcon>
+          </m.div>
+        )}
+      </AnimatePresence>
+    </Group>
+  )
+}

package/src/ui/DiagramTitlePanel.css.ts

@@ -1,5 +1,6 @@
-import { globalStyle, style } from '@vanilla-extract/css'
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { mantine } from '../mantine.css'
+import { vars } from '../theme.css'
 
 export const container = style({
   bottom: 0,
@@ -8,16 +9,26 @@ export const container = style({
   margin: 0
 })
 
-export const paper = style({
+export const card = style({
   cursor: 'default',
-  minWidth: 100,
+  minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
   backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
-  WebkitBackdropFilter: 'blur(8px)',
-  backdropFilter: 'blur(8px)',
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   '@media': {
+    [mantine.largerThan('sm')]: {
+      minWidth: 300,
+      maxWidth: '90vw'
+    },
     [mantine.largerThan('md')]: {
-      maxWidth: '45vw'
+      minWidth: 400,
+      maxWidth: '70vw'
+    }
+  },
+  selectors: {
+    [`:where([data-mantine-color-scheme='dark']) &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
     }
   }
 })