@likec4/diagram 1.3.0 → 1.4.0

package/src/LikeC4Diagram.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { DEV } from 'esm-env'
 import { shallowEqual } from 'fast-equals'
 import { domAnimation, LazyMotion } from 'framer-motion'
-import { memo, useRef } from 'react'
+import { memo, useEffect, useRef, useState } from 'react'
 import useTilg from 'tilg'
 import { rootClassName } from './globals.css'
 import { KeepAspectRatioContainer } from './KeepAspectRatioContainer'
@@ -12,7 +12,7 @@ import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
-import { WhenInitialized } from './state/WhenInitialized'
+import { useDiagramStoreApi } from './state/useDiagramStore'
 import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
@@ -36,6 +36,7 @@ export function LikeC4Diagram({
   controls = false,
   showElementLinks = true,
   showDiagramTitle = true,
+  showNavigationButtons = false,
   enableDynamicViewWalkthrough = true,
   initialWidth,
   initialHeight,
@@ -113,6 +114,7 @@ export function LikeC4Diagram({
                 controls={controls}
                 pannable={pannable}
                 showDiagramTitle={showDiagramTitle}
+                showNavigationButtons={showNavigationButtons}
                 enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
               />
             </KeepAspectRatioContainer>
@@ -132,6 +134,7 @@ type LikeC4DiagramInnerProps = {
   defaultNodes: XYFlowNode[]
   defaultEdges: XYFlowEdge[]
   showDiagramTitle: boolean
+  showNavigationButtons: boolean
   enableDynamicViewWalkthrough: boolean
 }
 const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
@@ -143,9 +146,26 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
   defaultNodes,
   defaultEdges,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }) {
   DEV && useTilg()
+  const diagramApi = useDiagramStoreApi()
+  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
+
+  useEffect(() => {
+    if (isInitialized) {
+      return
+    }
+    return diagramApi.subscribe(
+      s => s.initialized,
+      setIsInitialized,
+      {
+        fireImmediately: true
+      }
+    )
+  }, [isInitialized])
+
   return (
     <>
       <XYFlow
@@ -160,17 +180,20 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
         )}
       >
         <XYFlowInner
+          showNavigationButtons={showNavigationButtons}
           showDiagramTitle={showDiagramTitle}
           enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
           background={background}
           controls={controls}
         />
       </XYFlow>
-      <WhenInitialized>
-        <SyncWithDiagram />
-        {fitView && <FitViewOnDiagramChange />}
-        {fitView && zoomable && <SelectEdgesOnNodeFocus />}
-      </WhenInitialized>
+      {isInitialized && (
+        <>
+          <SyncWithDiagram />
+          {fitView && <FitViewOnDiagramChange />}
+          {fitView && zoomable && <SelectEdgesOnNodeFocus />}
+        </>
+      )}
     </>
   )
 }, shallowEqual)

package/src/globals.css.ts

@@ -13,7 +13,7 @@ globalStyle(`.${rootClassName}`, {
 })
 
 createGlobalTheme(`.${rootClassName}`, {
-  ...omit(vars, ['optionsPanel', 'default'])
+  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default'])
 }, {
   likec4: {
     font:

package/src/state/DiagramContext.tsx

@@ -4,12 +4,12 @@ import { useUpdateEffect } from '../hooks'
 import { useXYFlow } from '../xyflow/hooks'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
 
-type DiagramContextValue = ReturnType<typeof createDiagramStore>
-export const DiagramContext = createContext<DiagramContextValue | null>(null)
+export type DiagramZustandStore = ReturnType<typeof createDiagramStore>
+export const DiagramContext = createContext<DiagramZustandStore | null>(null)
 
 export function DiagramContextProvider({ children, view, ...props }: PropsWithChildren<DiagramInitialState>) {
   const xyflow = useXYFlow()
-  const store = useRef<DiagramContextValue>()
+  const store = useRef<DiagramZustandStore>()
 
   if (!store.current) {
     store.current = createDiagramStore({

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'
@@ -30,7 +30,6 @@ export type DiagramStore = {
   experimentalEdgeEditing: boolean
 
   // Internal state
-  viewSyncState: 'synced' | 'changed'
   viewSyncDebounceTimeout: number | null
 
   xyflow: XYFlowInstance
@@ -109,6 +108,8 @@ interface DiagramStoreActions {
 
   getElement(id: Fqn): DiagramNode | null
   triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
+
+  cancelSaveManualLayout: () => void
   triggerSaveManualLayout: (xystore: XYStoreApi) => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
   fitDiagram: (xyStore: XYStoreApi) => void
@@ -120,7 +121,6 @@ interface DiagramStoreActions {
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
 
 const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
-  viewSyncState: 'synced',
   viewSyncDebounceTimeout: null,
   initialized: false,
   xyflowSynced: false,
@@ -174,7 +174,6 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           updateView: (nextView) => {
             let {
               viewSyncDebounceTimeout,
-              viewSyncState,
               xyflow,
               dimmed,
               xyflowSynced,
@@ -189,22 +188,12 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               hoveredNodeId
             } = get()
 
-            if (viewSyncDebounceTimeout) {
+            if (viewSyncDebounceTimeout !== null) {
               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
             }
@@ -272,7 +261,6 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
 
             set(
               {
-                viewSyncState: 'synced',
                 viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
@@ -324,25 +312,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 })
             }
           },
 
@@ -441,15 +429,20 @@ 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 })
           },
 
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get()
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              set({ viewSyncDebounceTimeout: null })
+            }
+          },
+
           triggerSaveManualLayout: (xystore) => {
             let { viewSyncDebounceTimeout: debounced, onChange } = get()
             if (!onChange) {
@@ -462,6 +455,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             debounced = setTimeout(() => {
               const { nodeLookup } = xystore.getState()
               const { xyflow, onChange } = get()
+              set({ viewSyncDebounceTimeout: null })
 
               const movedNodes = new StringSet()
               const nodes = reduce([...nodeLookup.values()], (acc, node) => {
@@ -490,6 +484,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,16 +498,15 @@ 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)
             set(
               {
-                viewSyncDebounceTimeout: debounced,
-                viewSyncState: 'changed'
+                viewSyncDebounceTimeout: debounced
               },
               noReplace,
-              'change sync state'
+              'debounce sync state'
             )
           },
 

package/src/state/index.ts

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

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, '1rem'),
+  left: fallbackVar(vars.navigationPanel.left, '1rem'),
+  margin: 0
+})
+
+globalStyle(`${panel} .mantine-ActionIcon-root`, {
+  vars: {
+    ['--ai-size']: 'var(--ai-size-md)'
+  },
+  '@media': {
+    [mantine.largerThan('md')]: {
+      vars: {
+        ['--ai-size']: 'var(--ai-size-lg)'
+      }
+    }
+  }
+})

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/useNavigationHistory'
+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,17 +9,22 @@ export const container = style({
   margin: 0
 })
 
-export const paper = style({
+export const card = style({
   cursor: 'default',
-  minWidth: 100,
+  minWidth: 150,
   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('md')]: {
       maxWidth: '45vw'
     }
+  },
+  selectors: {
+    [`:where([data-mantine-color-scheme='dark']) &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
+    }
   }
 })