@likec4/diagram 1.4.0 → 1.5.0

package/src/state/DiagramContext.tsx

@@ -1,31 +1,51 @@
+import { shallowEqual } from 'fast-equals'
 import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
-import { hasSubObject, isIncludedIn } from 'remeda'
+import { hasSubObject, isNonNullish, pickBy } from 'remeda'
 import { useUpdateEffect } from '../hooks'
-import { useXYFlow } from '../xyflow/hooks'
+import { useXYFlow, useXYStoreApi } from '../xyflow/hooks'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
 
 export type DiagramZustandStore = ReturnType<typeof createDiagramStore>
 export const DiagramContext = createContext<DiagramZustandStore | null>(null)
 
-export function DiagramContextProvider({ children, view, ...props }: PropsWithChildren<DiagramInitialState>) {
+export type DiagramContextProviderProps = PropsWithChildren<
+  DiagramInitialState & {
+    className: string
+    keepAspectRatio: boolean
+  }
+>
+
+export function DiagramContextProvider({
+  children,
+  view,
+  className,
+  keepAspectRatio,
+  ...props
+}: DiagramContextProviderProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const xystore = useXYStoreApi()
   const xyflow = useXYFlow()
   const store = useRef<DiagramZustandStore>()
 
   if (!store.current) {
     store.current = createDiagramStore({
+      xystore,
       xyflow,
       view,
+      getContainer: () => containerRef.current,
       ...props
     })
   }
 
   useEffect(
     () => {
-      if (store.current?.getState().xyflow !== xyflow) {
-        store.current?.setState({ xyflow }, false, 'update xyflow')
+      if (!store.current) return
+      const state = store.current.getState()
+      if (state.xyflow !== xyflow || state.xystore !== xystore) {
+        store.current.setState({ xyflow, xystore }, false, 'update xyflow and xystore')
       }
     },
-    [xyflow]
+    [xyflow, xystore]
   )
 
   useUpdateEffect(
@@ -35,16 +55,27 @@ export function DiagramContextProvider({ children, view, ...props }: PropsWithCh
       if (state.view !== view) {
         state.updateView(view)
       }
-      if (!hasSubObject(state, props)) {
-        store.current.setState(props, false, 'update incoming props')
+      const newProps = pickBy(props, isNonNullish)
+      if (!hasSubObject(state, newProps)) {
+        store.current.setState(newProps, false, 'update incoming props')
       }
     },
-    [view, props]
+    [view, props],
+    shallowEqual
   )
-
   return (
-    <DiagramContext.Provider value={store.current}>
-      {children}
-    </DiagramContext.Provider>
+    <div
+      ref={containerRef}
+      className={className}
+      {...(keepAspectRatio && {
+        style: {
+          aspectRatio: `${Math.ceil(view.width)}/${Math.ceil(view.height)}`,
+          maxHeight: Math.ceil(view.height)
+        }
+      })}>
+      <DiagramContext.Provider value={store.current}>
+        {children}
+      </DiagramContext.Provider>
+    </div>
   )
 }

package/src/state/diagramStore.ts

@@ -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,11 +29,14 @@ export type DiagramStore = {
   nodesDraggable: boolean
   nodesSelectable: boolean
   experimentalEdgeEditing: boolean
+  // Diagram Container, see DiagramContainer.tsx
+  getContainer: () => HTMLDivElement | null
 
   // Internal state
   viewSyncDebounceTimeout: number | null
 
   xyflow: XYFlowInstance
+  xystore: XYStoreApi
   initialized: boolean
   xyflowSynced: boolean
 
@@ -82,13 +86,6 @@ export type DiagramInitialState = // Required properties
     | 'nodesSelectable'
     | 'experimentalEdgeEditing'
   >
-  // Optional properties
-  // & Partial<
-  //   Pick<
-  //     DiagramStore,
-  //     'colorScheme'
-  //   >
-  // >
   & LikeC4DiagramEventHandlers
 
 interface DiagramStoreActions {
@@ -110,9 +107,9 @@ interface DiagramStoreActions {
   triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
 
   cancelSaveManualLayout: () => void
-  triggerSaveManualLayout: (xystore: XYStoreApi) => void
+  triggerSaveManualLayout: () => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: (xyStore: XYStoreApi) => void
+  fitDiagram: (duration?: number) => void
 
   nextDynamicStep: (increment?: number) => void
   stopDynamicView: () => void
@@ -120,7 +117,10 @@ interface DiagramStoreActions {
 
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
 
-const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
+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'
           },
@@ -188,16 +189,16 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               hoveredNodeId
             } = get()
 
-            if (viewSyncDebounceTimeout !== null) {
-              clearTimeout(viewSyncDebounceTimeout)
-              viewSyncDebounceTimeout = null
-            }
-
             if (shallowEqual(current, nextView)) {
               DEV && console.debug('store: skip updateView')
               return
             }
 
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout)
+              viewSyncDebounceTimeout = null
+            }
+
             const isSameView = current.id === nextView.id
 
             if (isSameView) {
@@ -275,7 +276,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 dimmed
               },
               noReplace,
-              'update-view'
+              isSameView ? 'update-view [same]' : 'update-view [another]'
             )
           },
 
@@ -374,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) {
@@ -443,7 +444,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             }
           },
 
-          triggerSaveManualLayout: (xystore) => {
+          triggerSaveManualLayout: () => {
             let { viewSyncDebounceTimeout: debounced, onChange } = get()
             if (!onChange) {
               DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
@@ -453,8 +454,8 @@ 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()
@@ -500,7 +501,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               }
 
               onChange?.({ change })
-            }, 2000)
+            }, 2000) as any as number // explicit typecast to number to suppress TS error in astro build
             set(
               {
                 viewSyncDebounceTimeout: debounced
@@ -513,8 +514,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
           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,
@@ -540,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
                 },
@@ -564,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) {
@@ -589,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,3 +1,2 @@
-export { DiagramContextProvider } from './DiagramContext'
 export type * from './diagramStore'
-export * from './useDiagramStore'
+export type * from './useDiagramStore'

package/src/ui/BackwardForwardPanel.css.ts

@@ -3,20 +3,20 @@ import { mantine } from '../mantine.css'
 import { vars } from '../theme.css'
 
 export const panel = style({
-  top: fallbackVar(vars.navigationPanel.top, '1rem'),
+  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-md)'
-  },
-  '@media': {
-    [mantine.largerThan('md')]: {
-      vars: {
-        ['--ai-size']: 'var(--ai-size-lg)'
-      }
-    }
+    ['--ai-size']: 'var(--ai-size-lg)'
   }
+  // '@media': {
+  //   [mantine.largerThan('lg')]: {
+  //     vars: {
+  //       ['--ai-size']: 'var(--ai-size-xl)'
+  //     }
+  //   }
+  // }
 })

package/src/ui/BackwardForwardPanel.tsx

@@ -2,7 +2,7 @@ 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 { useNavigationHistory } from '../state/hooks'
 import * as css from './BackwardForwardPanel.css'
 
 export function BackwardForwardPanel() {

package/src/ui/DiagramTitlePanel.css.ts

@@ -11,14 +11,19 @@ export const container = style({
 
 export const card = style({
   cursor: 'default',
-  minWidth: 150,
+  minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
   backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
   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: {

package/src/ui/DiagramTitlePanel.tsx

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../state'
+import { type DiagramState, useDiagramState } from '../state/hooks'
 import * as css from './DiagramTitlePanel.css'
 
 const selector = (s: DiagramState) => ({
@@ -39,16 +39,18 @@ export default function DiagramTitlePanel() {
         <Card
           radius="sm"
           className={css.card}
+          withBorder
           p={'md'}
+          pb={isCollapsed ? 'sm' : 'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <CardSection mb={4}>
+          <CardSection mb={isCollapsed ? 10 : 'sm'}>
             <Button
               fullWidth
               size="xs"
               h={'sm'}
               py={2}
               radius={'0'}
-              variant="subtle"
+              variant={isCollapsed ? 'light' : 'subtle'}
               color="gray"
               onClick={toggle}
             >

package/src/ui/DynamicViewWalkthrough.tsx

@@ -1,4 +1,4 @@
-import { Box, Button } from '@mantine/core'
+import { Box, Button, ButtonGroup } from '@mantine/core'
 import { useHotkeys } from '@mantine/hooks'
 import {
   IconPlayerPlayFilled,
@@ -8,7 +8,7 @@ import {
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { isNullish, isNumber } from 'remeda'
-import { useDiagramState } from '../state/useDiagramStore'
+import { useDiagramState } from '../state/hooks'
 import { useXYStore } from '../xyflow/hooks/useXYFlow'
 import * as css from './DynamicViewWalkthrough.css'
 
@@ -58,6 +58,8 @@ export function DynamicViewWalkthrough() {
   return (
     <Box
       className={clsx('react-flow__panel', css.container)}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
     >
       {isNullish(activeDynamicViewStep)
         && (
@@ -71,7 +73,7 @@ export function DynamicViewWalkthrough() {
           </Button>
         )}
       {isNumber(activeDynamicViewStep) && (
-        <Button.Group className={css.buttons}>
+        <ButtonGroup className={css.buttons}>
           <Button
             {...buttonProps}
             pl={'lg'}
@@ -98,7 +100,7 @@ export function DynamicViewWalkthrough() {
               <IconPlayerSkipForwardFilled />
             </Button>
           )}
-        </Button.Group>
+        </ButtonGroup>
       )}
     </Box>
   )

package/src/ui/OptionsPanel.tsx

@@ -1,38 +1,42 @@
 import { Card } from '@mantine/core'
+import { useOnSelectionChange } from '@xyflow/react'
 import clsx from 'clsx'
-import { DEV } from 'esm-env'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual as eq } from 'fast-equals'
 import { AnimatePresence, m } from 'framer-motion'
-import { useCallback } from 'react'
-import { reduce } from 'remeda'
-import useTilg from 'tilg'
-import { useDiagramState } from '../state'
-import { useXYStore } from '../xyflow/hooks'
+import { useState } from 'react'
+import { useDiagramState } from '../state/hooks'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-const Empty = [] as string[]
 export default function OptionsPanel() {
-  const { isFocusDisabled, viewId } = useDiagramState(s => ({
+  const { isFocused, viewId } = useDiagramState(s => ({
     viewId: s.view.id,
-    isFocusDisabled: s.focusedNodeId === null && s.activeDynamicViewStep === null
+    isFocused: s.focusedNodeId !== null || s.activeDynamicViewStep !== null
   }))
-  const selectedNodes = useXYStore(
-    useCallback(s =>
-      s.elementsSelectable && isFocusDisabled
-        ? reduce(s.nodes, (acc, n) => {
-          if (n.selected) {
-            acc.push(n.id)
-          }
-          return acc
-        }, [] as string[])
-        : Empty, [isFocusDisabled]),
-    shallowEqual
-  )
-  DEV && useTilg()
+  const [selected, setSelected] = useState<{
+    nodes: string[]
+    edges: string[]
+  }>({
+    nodes: [],
+    edges: []
+  })
+  useOnSelectionChange({
+    onChange: ({ nodes, edges }) => {
+      const newSelected = {
+        nodes: nodes.map(n => n.id).sort(),
+        edges: edges.map(e => e.id).sort()
+      }
+      if (!eq(selected, newSelected)) {
+        setSelected(newSelected)
+      }
+    }
+  })
+  const { nodes } = selected
+  // const hasAnySelection = !isFocused && (nodes.length > 0 || edges.length > 0)
+  const hasAnySelection = !isFocused && nodes.length > 0
   return (
     <AnimatePresence mode="wait">
-      {selectedNodes.length > 0 && (
+      {hasAnySelection && (
         <m.div
           key={viewId}
           initial={{ opacity: 0, scale: 0.85 }}
@@ -44,11 +48,17 @@ export default function OptionsPanel() {
           transition={{ duration: 0.14 }}
           className={clsx('react-flow__panel', styles.panel)}
           style={{
-            transformOrigin: 'center right'
+            transformOrigin: 'center right',
+            maxWidth: '320px'
           }}
         >
-          <Card shadow="sm">
-            <NodeOptions selectedNodeIds={selectedNodes} />
+          <Card shadow="md">
+            {nodes.length > 0 && <NodeOptions selectedNodeIds={nodes} />}
+            {
+              /* nodes.length === 0 && edges.length > 0 && (
+              <EdgeOptions selectedEdgeIds={edges} />
+            ) */
+            }
           </Card>
         </m.div>
       )}