@likec4/diagram 1.6.1 → 1.7.0

package/src/LikeC4Diagram.tsx

@@ -2,18 +2,16 @@ import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
 import { domAnimation, LazyMotion } from 'framer-motion'
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useRef } from 'react'
 import { rootClassName } from './globals.css'
 import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { EnsureMantine } from './mantine/EnsureMantine'
 import { DiagramContextProvider } from './state/DiagramContext'
-import { useDiagramStoreApi } from './state/useDiagramStore'
-import { diagramViewToXYFlowData } from './xyflow/diagram-to-xyflow'
+import { useDiagramState } from './state/useDiagramStore'
 import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
 import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
-import { SyncWithDiagram } from './xyflow/SyncWithDiagram'
-import type { XYFlowData, XYFlowEdge, XYFlowNode } from './xyflow/types'
+import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
 import { XYFlow } from './xyflow/XYFlow'
 import { XYFlowInner } from './xyflow/XYFlowInner'
 
@@ -33,7 +31,8 @@ export function LikeC4Diagram({
   showElementLinks = true,
   showDiagramTitle = true,
   showNavigationButtons = false,
-  enableDynamicViewWalkthrough = true,
+  enableDynamicViewWalkthrough = false,
+  enableFocusMode = readonly,
   initialWidth,
   initialHeight,
   keepAspectRatio = false,
@@ -47,122 +46,91 @@ export function LikeC4Diagram({
   onNavigateTo,
   onNodeClick,
   onNodeContextMenu,
+  onEditorCommand,
   renderIcon
 }: LikeC4DiagramProps) {
-  const initialRef = useRef<{
-    defaultNodes: XYFlowData['nodes']
-    defaultEdges: XYFlowData['edges']
-    initialWidth: number
-    initialHeight: number
-  }>()
-  if (!initialRef.current) {
-    const initial = diagramViewToXYFlowData(view, {
-      selectable: nodesSelectable,
-      draggable: nodesDraggable
-    })
-    initialRef.current = {
-      defaultNodes: initial.nodes,
-      defaultEdges: initial.edges,
-      initialWidth: initialWidth ?? view.width,
-      initialHeight: initialHeight ?? view.height
-    }
-  }
-
+  const initialRef = useRef({
+    defaultNodes: [] as XYFlowNode[],
+    defaultEdges: [] as XYFlowEdge[],
+    initialWidth: initialWidth ?? view.bounds.width,
+    initialHeight: initialHeight ?? view.bounds.height
+  })
+  // useLogger('LikeC4Diagram', [{view}])
   return (
     <EnsureMantine>
-      <XYFlowProvider
-        fitView={fitView}
-        {...initialRef.current}
-      >
-        <DiagramContextProvider
-          view={view}
-          keepAspectRatio={keepAspectRatio}
-          className={clsx(rootClassName, className)}
-          readonly={readonly}
-          pannable={pannable}
-          zoomable={zoomable}
-          fitViewEnabled={fitView}
-          fitViewPadding={fitViewPadding}
-          showElementLinks={showElementLinks}
-          nodesDraggable={nodesDraggable}
-          nodesSelectable={nodesSelectable}
-          experimentalEdgeEditing={experimentalEdgeEditing}
-          renderIcon={renderIcon ?? null}
-          onCanvasClick={onCanvasClick}
-          onCanvasContextMenu={onCanvasContextMenu}
-          onEdgeClick={onEdgeClick}
-          onEdgeContextMenu={onEdgeContextMenu}
-          onNodeClick={onNodeClick}
-          onNodeContextMenu={onNodeContextMenu}
-          onChange={onChange}
-          onNavigateTo={onNavigateTo}
-          onCanvasDblClick={onCanvasDblClick}
+      <LazyMotion features={domAnimation} strict>
+        <XYFlowProvider
+          fitView={fitView}
+          {...initialRef.current}
         >
-          <LazyMotion features={domAnimation} strict>
+          <DiagramContextProvider
+            view={view}
+            keepAspectRatio={keepAspectRatio}
+            className={clsx(rootClassName, className)}
+            readonly={readonly}
+            pannable={pannable}
+            zoomable={zoomable}
+            fitViewEnabled={fitView}
+            fitViewPadding={fitViewPadding}
+            showElementLinks={showElementLinks}
+            nodesDraggable={nodesDraggable}
+            nodesSelectable={nodesSelectable}
+            experimentalEdgeEditing={experimentalEdgeEditing}
+            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+            enableFocusMode={enableFocusMode}
+            renderIcon={renderIcon ?? null}
+            onCanvasClick={onCanvasClick ?? null}
+            onCanvasContextMenu={onCanvasContextMenu ?? null}
+            onEdgeClick={onEdgeClick ?? null}
+            onEdgeContextMenu={onEdgeContextMenu ?? null}
+            onNodeClick={onNodeClick ?? null}
+            onNodeContextMenu={onNodeContextMenu ?? null}
+            onChange={onChange ?? null}
+            onNavigateTo={onNavigateTo ?? null}
+            onCanvasDblClick={onCanvasDblClick ?? null}
+            onEditorCommand={onEditorCommand ?? null}
+          >
             <LikeC4DiagramInnerMemo
-              defaultNodes={initialRef.current.defaultNodes}
-              defaultEdges={initialRef.current.defaultEdges}
-              fitView={fitView}
-              zoomable={zoomable}
-              background={background}
               controls={controls}
-              pannable={pannable}
+              background={background}
               showDiagramTitle={showDiagramTitle}
               showNavigationButtons={showNavigationButtons}
-              enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
             />
-          </LazyMotion>
-        </DiagramContextProvider>
-      </XYFlowProvider>
+          </DiagramContextProvider>
+        </XYFlowProvider>
+      </LazyMotion>
     </EnsureMantine>
   )
 }
 
 type LikeC4DiagramInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
-  fitView: boolean
-  zoomable: boolean
-  pannable: boolean
   controls: boolean
-  defaultNodes: XYFlowNode[]
-  defaultEdges: XYFlowEdge[]
   showDiagramTitle: boolean
   showNavigationButtons: boolean
-  enableDynamicViewWalkthrough: boolean
 }
 const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
   background,
-  fitView,
-  zoomable,
   controls,
-  pannable,
-  defaultNodes,
-  defaultEdges,
   showDiagramTitle,
-  showNavigationButtons,
-  enableDynamicViewWalkthrough
+  showNavigationButtons
 }) {
-  const diagramApi = useDiagramStoreApi()
-  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
-
-  useEffect(() => {
-    if (isInitialized) {
-      return
-    }
-    return diagramApi.subscribe(
-      s => s.initialized,
-      setIsInitialized,
-      {
-        fireImmediately: true
-      }
-    )
-  }, [isInitialized])
+  const {
+    isInitialized,
+    pannable,
+    fitView,
+    enableFocusMode
+  } = useDiagramState(s => ({
+    isInitialized: s.initialized,
+    zoomable: s.zoomable,
+    pannable: s.pannable,
+    fitView: s.fitViewEnabled,
+    enableFocusMode: s.enableFocusMode
+  }))
 
   return (
     <>
       <XYFlow
-        defaultNodes={defaultNodes}
-        defaultEdges={defaultEdges}
         className={clsx(
           'likec4-diagram',
           css.cssReactFlow,
@@ -174,16 +142,14 @@ const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4Diag
         <XYFlowInner
           showNavigationButtons={showNavigationButtons}
           showDiagramTitle={showDiagramTitle}
-          enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
           background={background}
           controls={controls}
         />
       </XYFlow>
       {isInitialized && (
         <>
-          <SyncWithDiagram />
           {fitView && <FitViewOnDiagramChange />}
-          {fitView && zoomable && <SelectEdgesOnNodeFocus />}
+          {enableFocusMode && <SelectEdgesOnNodeFocus />}
         </>
       )}
     </>

package/src/globals.css.ts

@@ -128,18 +128,22 @@ for (const color of keys(defaultTheme.elements)) {
   }
 
   for (let depth = 1; depth <= 6; depth++) {
-    createGlobalTheme(`:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`, compounds, {
-      fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
-      stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth)
-    })
-
     createGlobalTheme(
-      `:where([data-mantine-color-scheme='light']) :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      `:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
       compounds,
       {
         fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
         stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth)
       }
     )
+
+    createGlobalTheme(
+      `:where([data-mantine-color-scheme='dark']) :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
+      compounds,
+      {
+        fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
+        stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth)
+      }
+    )
   }
 }

package/src/hooks/useUpdateEffect.ts

@@ -9,6 +9,21 @@ import { type DependencyList, type EffectCallback } from 'react'
 
 const noop = () => {}
 
+export const depsShallowEqual: DependenciesComparator = (d1, d2) => {
+  if (d1 === d2) {
+    return true
+  }
+  if (d1.length !== d2.length) {
+    return false
+  }
+  for (const [i, element] of d1.entries()) {
+    if (!shallowEqual(element, d2[i])) {
+      return false
+    }
+  }
+  return true
+}
+
 export function useUpdateEffect<
   Callback extends EffectCallback = EffectCallback,
   Deps extends DependencyList = DependencyList
@@ -22,7 +37,7 @@ export function useUpdateEffect<
   useCustomCompareEffect(
     isFirstMount ? noop as Callback : callback,
     deps,
-    equalityFn ?? shallowEqual,
+    equalityFn ?? depsShallowEqual,
     effectHook
   )
 }

package/src/index.ts

@@ -7,4 +7,5 @@ export { useSetState, useUpdateEffect } from './hooks'
 export type * from './LikeC4Diagram'
 export type * from './LikeC4Diagram.props'
 export type * from './StaticLikeC4Diagram'
+export type * from './types'
 export type * from './xyflow/types'

package/src/state/DiagramContext.tsx

@@ -1,6 +1,5 @@
-import { shallowEqual } from 'fast-equals'
-import { createContext, type PropsWithChildren, useEffect, useRef } from 'react'
-import { hasSubObject, isNonNullish, pickBy } from 'remeda'
+import { deepEqual, shallowEqual } from 'fast-equals'
+import { createContext, type PropsWithChildren, useCallback, useEffect, useRef } from 'react'
 import { useUpdateEffect } from '../hooks'
 import { useXYFlow, useXYStoreApi } from '../xyflow/hooks/useXYFlow'
 import { createDiagramStore, type DiagramInitialState } from './diagramStore'
@@ -9,7 +8,7 @@ export type DiagramZustandStore = ReturnType<typeof createDiagramStore>
 export const DiagramContext = createContext<DiagramZustandStore | null>(null)
 
 export type DiagramContextProviderProps = PropsWithChildren<
-  DiagramInitialState & {
+  Omit<DiagramInitialState, 'xystore' | 'xyflow' | 'getContainer'> & {
     className: string
     keepAspectRatio: boolean
   }
@@ -27,50 +26,43 @@ export function DiagramContextProvider({
   const xyflow = useXYFlow()
   const store = useRef<DiagramZustandStore>()
 
+  const getContainer = useCallback(() => containerRef.current, [containerRef])
+
   if (!store.current) {
     store.current = createDiagramStore({
       xystore,
       xyflow,
       view,
-      getContainer: () => containerRef.current,
+      getContainer,
       ...props
     })
   }
 
-  useEffect(
-    () => {
-      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, xystore]
+  useUpdateEffect(
+    () => store.current?.setState({ xyflow, xystore, getContainer }, false, 'update xyflow and xystore'),
+    [xyflow, xystore, getContainer]
+  )
+
+  useUpdateEffect(
+    () => store.current?.setState(props, false, 'update incoming props'),
+    [props]
   )
 
   useUpdateEffect(
     () => {
-      if (!store.current) return
-      const state = store.current.getState()
-      const newProps = pickBy(props, isNonNullish)
-      if (!hasSubObject(state, newProps)) {
-        store.current.setState(newProps, false, 'update incoming props')
-      }
-      if (state.view !== view) {
-        state.updateView(view)
-      }
+      store.current?.getState().updateView(view)
     },
-    [view, props],
-    (prev, next) => shallowEqual(prev[0], next[0]) && shallowEqual(prev[1], next[1])
+    [view]
   )
+
   return (
     <div
       ref={containerRef}
       className={className}
       {...(keepAspectRatio && {
         style: {
-          aspectRatio: `${Math.ceil(view.width)}/${Math.ceil(view.height)}`,
-          maxHeight: Math.ceil(view.height)
+          aspectRatio: `${Math.ceil(view.bounds.width)}/${Math.ceil(view.bounds.height)}`,
+          maxHeight: Math.ceil(view.bounds.height)
         }
       })}>
       <DiagramContext.Provider value={store.current}>

package/src/{xyflow → state}/diagram-to-xyflow.ts

@@ -1,25 +1,25 @@
 import { extractStep, invariant, nonNullable } from '@likec4/core'
 import type { DiagramNode, DiagramView, Fqn } from '@likec4/core/types'
 import { hasAtLeast } from 'remeda'
-import type { XYFlowData } from '../xyflow/types'
-import { ZIndexes } from './const'
+import { ZIndexes } from '../xyflow/const'
+import type { XYFlowEdge, XYFlowNode } from '../xyflow/types'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 
 export function diagramViewToXYFlowData(
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>,
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__'>,
   opts: {
     draggable: boolean
     selectable: boolean
   }
-): XYFlowData {
-  const isDynamicView = view.__ === 'dynamic'
-  const editor: XYFlowData = {
-    nodes: [],
-    edges: []
-  }
-
-  const nodeLookup = new Map<Fqn, DiagramNode>()
+): {
+  xynodes: XYFlowNode[]
+  xyedges: XYFlowEdge[]
+} {
+  const isDynamicView = view.__ === 'dynamic',
+    xynodes = [] as XYFlowNode[],
+    xyedges = [] as XYFlowEdge[],
+    nodeLookup = new Map<Fqn, DiagramNode>()
 
   const traverse = view.nodes.reduce(
     (acc, node) => {
@@ -60,7 +60,7 @@ export function diagramViewToXYFlowData(
 
     const id = ns + node.id
     const draggable = opts.draggable && (!parent || parent.children.length > 1)
-    editor.nodes.push({
+    xynodes.push({
       id,
       type: isCompound ? 'compound' : 'element',
       data: {
@@ -73,10 +73,9 @@ export function diagramViewToXYFlowData(
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       hidden: false,
-      initialWidth: node.width,
-      initialHeight: node.height,
       width: node.width,
       height: node.height,
+      // parentId: parent ? ns + parent.id : null,
       ...(parent && {
         parentId: ns + parent.id
       }),
@@ -103,7 +102,7 @@ export function diagramViewToXYFlowData(
 
     // const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)))
 
-    editor.edges.push({
+    xyedges.push({
       id,
       type: 'relationship',
       source: ns + source,
@@ -113,8 +112,7 @@ export function diagramViewToXYFlowData(
       deletable: false,
       data: {
         edge,
-        type: 'bezier',
-        controlPoints: view.manualLayout?.edges[edge.id]?.controlPoints || null,
+        controlPoints: edge.controlPoints || null,
         stepNum: isDynamicView ? extractStep(edge.id) : null,
         label: !!edge.labelBBox
           ? {
@@ -127,5 +125,8 @@ export function diagramViewToXYFlowData(
     })
   }
 
-  return editor
+  return {
+    xynodes,
+    xyedges
+  }
 }