@likec4/diagram 1.2.2 → 1.4.0

package/src/mantine/theme.ts

@@ -4,6 +4,7 @@ export const theme = createTheme({
   primaryColor: 'indigo',
   cursorType: 'pointer',
   defaultRadius: 'sm',
+  respectReducedMotion: true,
   headings: {
     fontWeight: '500',
     sizes: {

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({
@@ -38,7 +38,6 @@ export function DiagramContextProvider({ children, view, ...props }: PropsWithCh
       if (!hasSubObject(state, props)) {
         store.current.setState(props, false, 'update incoming props')
       }
-      isIncludedIn
     },
     [view, props]
   )

package/src/state/diagramStore.ts

@@ -1,29 +1,20 @@
-import type {
-  BorderStyle,
-  DiagramEdge,
-  DiagramNode,
-  DiagramView,
-  ElementShape,
-  Fqn,
-  NonEmptyArray,
-  ThemeColor,
-  ViewID
-} from '@likec4/core'
+import type { DiagramNode, DiagramView, Fqn, 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 { deepEqual, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
-import { entries, filter, map, prop } 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'
 import { createWithEqualityFn } from 'zustand/traditional'
-import type { Change, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
+import type { Changes, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
 import type { XYStoreApi } from '../xyflow/hooks'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
+import { bezierControlPoints, isSamePoint } from '../xyflow/utils'
 
 export type DiagramStore = {
   // Incoming props
@@ -36,8 +27,11 @@ export type DiagramStore = {
   pannable: boolean
   nodesDraggable: boolean
   nodesSelectable: boolean
+  experimentalEdgeEditing: boolean
 
   // Internal state
+  viewSyncDebounceTimeout: number | null
+
   xyflow: XYFlowInstance
   initialized: boolean
   xyflowSynced: boolean
@@ -62,7 +56,8 @@ export type DiagramStore = {
     fromView: ViewID
     toView: ViewID
     element: DiagramNode
-    elementCenterScreenPosition: XYPosition
+    // Position of the element in the source view
+    elementScreenPosition: XYPosition
     // If node from the target view is placed on the same position as the node from the source view
     positionCorrected: boolean
   }
@@ -85,6 +80,7 @@ export type DiagramInitialState = // Required properties
     | 'pannable'
     | 'nodesDraggable'
     | 'nodesSelectable'
+    | 'experimentalEdgeEditing'
   >
   // Optional properties
   // & Partial<
@@ -111,7 +107,10 @@ interface DiagramStoreActions {
   resetLastClicked: () => void
 
   getElement(id: Fqn): DiagramNode | null
-  triggerOnChange: (changes: NonEmptyArray<Change>) => void
+  triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
+
+  cancelSaveManualLayout: () => void
+  triggerSaveManualLayout: (xystore: XYStoreApi) => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
   fitDiagram: (xyStore: XYStoreApi) => void
 
@@ -122,6 +121,7 @@ interface DiagramStoreActions {
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
 
 const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
+  viewSyncDebounceTimeout: null,
   initialized: false,
   xyflowSynced: false,
   previousViews: [],
@@ -173,6 +173,8 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
 
           updateView: (nextView) => {
             let {
+              viewSyncDebounceTimeout,
+              xyflow,
               dimmed,
               xyflowSynced,
               view: current,
@@ -186,10 +188,12 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               hoveredNodeId
             } = get()
 
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              viewSyncDebounceTimeout = null
+            }
+
             if (shallowEqual(current, nextView)) {
-              if (!xyflowSynced) {
-                set({ xyflowSynced: true }, noReplace, 'updateView: xyflow synced')
-              }
               DEV && console.debug('store: skip updateView')
               return
             }
@@ -218,8 +222,8 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               if (activeDynamicViewStep && !edgeIds.has(StepEdgeId(activeDynamicViewStep))) {
                 activeDynamicViewStep = null
               }
-              xyflowSynced = deepEqual(current.nodes, nextView.nodes) && deepEqual(current.edges, nextView.edges)
-              if (!xyflowSynced) {
+              xyflowSynced = deepEqual([current.nodes, current.edges], [nextView.nodes, nextView.edges])
+              if (dimmed.size > 0) {
                 let nextDimmed = new StringSet([...dimmed].filter(id => nodeIds.has(id) || edgeIds.has(id)))
                 if (nextDimmed.size !== dimmed.size) {
                   dimmed = nextDimmed
@@ -233,6 +237,11 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 }
               }
 
+              if (!lastOnNavigate) {
+                const zoom = xyflow.getZoom()
+                xyflow.setCenter(nextView.width / 2, nextView.height / 2, { zoom })
+              }
+
               // Reset hovered / clicked node/edge if the view is different
               lastClickedEdgeId = null
               lastClickedNodeId = null
@@ -252,6 +261,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
 
             set(
               {
+                viewSyncDebounceTimeout,
                 view: nextView,
                 activeDynamicViewStep,
                 xyflowSynced,
@@ -302,37 +312,39 @@ 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 })
             }
           },
 
           resetLastClicked: () => {
             let {
+              activeDynamicViewStep,
               focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId
             } = get()
-            if (focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
+            if (activeDynamicViewStep || focusedNodeId || lastClickedNodeId || lastClickedEdgeId) {
               set(
                 {
+                  activeDynamicViewStep: null,
                   focusedNodeId: null,
                   lastClickedNodeId: null,
                   lastClickedEdgeId: null,
@@ -349,93 +361,153 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             return view.nodes.find(({ id }) => id === fqn) ?? null
           },
 
-          triggerOnChange: (changes: NonEmptyArray<Change>) => {
+          triggerChangeElementStyle: (change) => {
             if (DEV) {
-              console.debug('triggerOnChange', changes)
+              console.debug('triggerChangeElementStyle', change)
             }
-            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-element-style') {
-                nonexhaustive(change.op)
+            const { view, updateView, onChange } = get()
+
+            // Style changes we already apply to the view
+            let hasChanges = false
+            const nodes = view.nodes.map(origin => {
+              if (!change.targets.includes(origin.id)) {
+                return origin
               }
-              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)
-                  }
+              let element = origin
+              for (const [key, value] of entries.strict(change.style)) {
+                switch (key) {
+                  case 'shape':
+                    if (value !== element.shape) {
+                      element = {
+                        ...element,
+                        shape: value
+                      }
+                    }
+                    break
+                  case 'color':
+                    if (value !== element.color) {
+                      element = {
+                        ...element,
+                        color: value
+                      }
+                    }
+                    break
+                  case 'opacity':
+                    if (value !== element.style?.opacity) {
+                      element = {
+                        ...element,
+                        style: {
+                          ...element.style,
+                          opacity: value
+                        }
+                      }
+                    }
+                    break
+                  case 'border':
+                    if (value !== element.style?.border) {
+                      element = {
+                        ...element,
+                        style: {
+                          ...element.style,
+                          border: value
+                        }
+                      }
+                    }
+                    break
+                  default:
+                    nonexhaustive(key)
                 }
               }
+              if (element !== origin) {
+                hasChanges = true
+                return element
+              }
+              return origin
+            })
+            if (hasChanges) {
+              updateView({
+                ...view,
+                nodes
+              })
             }
+            // Trigger change event, even if there are no changes with local state
+            // but we maybe out of sync with the server
+            onChange?.({ change })
+          },
 
-            get().xyflow.setNodes(nodes =>
-              nodes.map(node => {
-                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
-                  }
-                }
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get()
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              set({ viewSyncDebounceTimeout: null })
+            }
+          },
 
-                const opacity = newOpacity.get(element.id)
-                if (!!opacity && opacity !== element.style?.opacity) {
-                  element = {
-                    ...element,
-                    style: {
-                      ...element.style,
-                      opacity
-                    }
-                  }
+          triggerSaveManualLayout: (xystore) => {
+            let { viewSyncDebounceTimeout: debounced, onChange } = get()
+            if (!onChange) {
+              DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
+              return
+            }
+            if (debounced) {
+              clearTimeout(debounced)
+            }
+            debounced = setTimeout(() => {
+              const { nodeLookup } = xystore.getState()
+              const { xyflow, onChange } = get()
+              set({ viewSyncDebounceTimeout: null })
+
+              const movedNodes = new StringSet()
+              const nodes = reduce([...nodeLookup.values()], (acc, node) => {
+                const dimensions = getNodeDimensions(node)
+                if (!isSamePoint(node.internals.positionAbsolute, node.data.element.position)) {
+                  movedNodes.add(node.id)
                 }
-
-                const border = newBorder.get(element.id)
-                if (border && border !== element.style?.border) {
-                  element = {
-                    ...element,
-                    style: {
-                      ...element.style,
-                      border
-                    }
-                  }
+                acc[node.data.fqn] = {
+                  x: node.internals.positionAbsolute.x,
+                  y: node.internals.positionAbsolute.y,
+                  width: dimensions.width,
+                  height: dimensions.height
                 }
-
-                if (element === node.data.element) {
-                  return node
+                return acc
+              }, {} as Changes.SaveManualLayout['nodes'])
+              const edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
+                let controlPoints = data.controlPoints
+                // If edge control points are not set, but the source or target node was moved
+                if (!controlPoints && (movedNodes.has(source) || movedNodes.has(target))) {
+                  controlPoints = bezierControlPoints(data.edge)
                 }
-                return {
-                  ...node,
-                  data: {
-                    ...node.data,
-                    element
+                if (controlPoints) {
+                  acc[data.edge.id] = {
+                    controlPoints
                   }
                 }
-              })
+                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',
+                nodes,
+                edges
+              }
+
+              if (DEV) {
+                console.debug('triggerSaveManualLayout', change)
+              }
+
+              onChange?.({ change })
+            }, 2000)
+            set(
+              {
+                viewSyncDebounceTimeout: debounced
+              },
+              noReplace,
+              'debounce sync state'
             )
-            get().onChange?.({ changes })
           },
 
           triggerOnNavigateTo: (xynodeId, event) => {
@@ -443,7 +515,6 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             const xynode = xyflow.getInternalNode(xynodeId)
             const element = xynode?.data.element as DiagramNodeWithNavigate
             invariant(!!xynode && element?.navigateTo, `node is not navigable: ${xynodeId}`)
-            const dimensions = getNodeDimensions(xynode)
             set(
               {
                 lastClickedNodeId: xynodeId,
@@ -451,9 +522,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                   fromView: view.id,
                   toView: element.navigateTo,
                   element: element,
-                  elementCenterScreenPosition: xyflow.flowToScreenPosition({
-                    x: xynode.internals.positionAbsolute.x + dimensions.width / 2,
-                    y: xynode.internals.positionAbsolute.y + dimensions.height / 2
+                  elementScreenPosition: xyflow.flowToScreenPosition({
+                    x: xynode.internals.positionAbsolute.x, // + dimensions.width / 2,
+                    y: xynode.internals.positionAbsolute.y // + dimensions.height / 2
                   }),
                   positionCorrected: false
                 }
@@ -479,7 +550,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               height: view.height
             }
             const viewport = getViewportForBounds(bounds, width, height, MinZoom, 1, fitViewPadding)
-            panZoom?.setViewport(viewport, { duration: 400 })
+            panZoom?.setViewport(viewport, { duration: 500 })
             if (!!focusedNodeId) {
               set(
                 {
@@ -496,6 +567,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             const { view, activeDynamicViewStep, xyflow, fitViewPadding } = get()
             invariant(view.__ === 'dynamic', 'view is not dynamic')
             const nextStep = (activeDynamicViewStep ?? 0) + increment
+            if (nextStep <= 0 || nextStep > view.edges.length) {
+              return
+            }
             const edgeId = StepEdgeId(nextStep)
             const dimmed = new StringSet()
             let edge: XYFlowEdge | null = null

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,10 +1,10 @@
 import { createGlobalThemeContract } from '@vanilla-extract/css'
 
 export const vars = createGlobalThemeContract({
+  safariAnimationHook: 'safari-animation-hook',
   default: {
     font: 'default-font-family'
   },
-  filterDimmed: 'filter-dimmed',
   likec4: {
     font: 'font-family',
     background: {
@@ -33,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>
+  )
+}