@likec4/diagram 1.3.0 → 1.5.0

package/src/LikeC4Diagram.props.ts

@@ -14,16 +14,17 @@ import type { XYPosition } from '@xyflow/system'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import type { SetRequired, Simplify } from 'type-fest'
 import type { XYFlowEdge, XYFlowNode } from './xyflow/types'
-import type { XYBackground, XYBackgroundProps } from './xyflow/XYFlowBackground'
+import type { XYBackground } from './xyflow/XYFlowBackground'
 
 export type DiagramNodeWithNavigate = Simplify<SetRequired<DiagramNode, 'navigateTo'>>
 
 export type OnNavigateTo = {
   (
     to: ViewID,
-    event: ReactMouseEvent,
-    element: DiagramNodeWithNavigate,
-    xynode: XYFlowNode
+    // These fields present if navigateTo triggered by a node click
+    event?: ReactMouseEvent,
+    element?: DiagramNodeWithNavigate,
+    xynode?: XYFlowNode
   ): void
 }
 export type OnNodeClick = (
@@ -35,7 +36,7 @@ export type OnNodeClick = (
 ) => void
 export type OnEdgeClick = (
   event: {
-    relation: DiagramEdge
+    edge: DiagramEdge
     xyedge: XYFlowEdge
     event: ReactMouseEvent
   }
@@ -159,6 +160,12 @@ export interface LikeC4DiagramProperties {
    */
   showDiagramTitle?: boolean | undefined
 
+  /**
+   * Show back/forward navigation buttons
+   * @default false
+   */
+  showNavigationButtons?: undefined | boolean
+
   /**
    * If Walkthrough for dynamic views should be enabled
    * @default false

package/src/LikeC4Diagram.tsx

@@ -4,15 +4,14 @@ 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'
 import { cssDisablePan, cssNoControls, cssReactFlow, cssTransparentBg } from './LikeC4Diagram.css'
 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 +35,7 @@ export function LikeC4Diagram({
   controls = false,
   showElementLinks = true,
   showDiagramTitle = true,
+  showNavigationButtons = false,
   enableDynamicViewWalkthrough = true,
   initialWidth,
   initialHeight,
@@ -78,6 +78,8 @@ export function LikeC4Diagram({
       >
         <DiagramContextProvider
           view={view}
+          keepAspectRatio={keepAspectRatio}
+          className={clsx(rootClassName, className)}
           readonly={readonly}
           pannable={pannable}
           zoomable={zoomable}
@@ -98,24 +100,18 @@ export function LikeC4Diagram({
           onCanvasDblClick={onCanvasDblClick}
         >
           <LazyMotion features={domAnimation} strict>
-            <KeepAspectRatioContainer
-              className={clsx(rootClassName, className)}
-              enabled={keepAspectRatio}
-              width={view.width}
-              height={view.height}
-            >
-              <LikeC4DiagramInnerMemo
-                defaultNodes={initialRef.current.defaultNodes}
-                defaultEdges={initialRef.current.defaultEdges}
-                fitView={fitView}
-                zoomable={zoomable}
-                background={background}
-                controls={controls}
-                pannable={pannable}
-                showDiagramTitle={showDiagramTitle}
-                enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
-              />
-            </KeepAspectRatioContainer>
+            <LikeC4DiagramInnerMemo
+              defaultNodes={initialRef.current.defaultNodes}
+              defaultEdges={initialRef.current.defaultEdges}
+              fitView={fitView}
+              zoomable={zoomable}
+              background={background}
+              controls={controls}
+              pannable={pannable}
+              showDiagramTitle={showDiagramTitle}
+              showNavigationButtons={showNavigationButtons}
+              enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
+            />
           </LazyMotion>
         </DiagramContextProvider>
       </XYFlowProvider>
@@ -132,6 +128,7 @@ type LikeC4DiagramInnerProps = {
   defaultNodes: XYFlowNode[]
   defaultEdges: XYFlowEdge[]
   showDiagramTitle: boolean
+  showNavigationButtons: boolean
   enableDynamicViewWalkthrough: boolean
 }
 const LikeC4DiagramInnerMemo = memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
@@ -143,9 +140,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 +174,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

@@ -8,12 +8,19 @@ import { vars } from './theme.css'
 export const rootClassName = 'likec4-diagram-root'
 
 globalStyle(`.${rootClassName}`, {
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  boxSizing: 'border-box',
   WebkitFontSmoothing: mantine.webkitFontSmoothing,
   MozOsxFontSmoothing: mantine.mozFontSmoothing
 })
 
 createGlobalTheme(`.${rootClassName}`, {
-  ...omit(vars, ['optionsPanel', 'default'])
+  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default'])
 }, {
   likec4: {
     font:
@@ -21,7 +28,7 @@ createGlobalTheme(`.${rootClassName}`, {
     background: {
       color: mantine.colors.body,
       pattern: {
-        color: mantine.colors.dimmed
+        color: mantine.colors.dark[3]
       }
     }
   },
@@ -74,13 +81,13 @@ createGlobalTheme(`:where([data-mantine-color-scheme='light']) .${rootClassName}
   likec4: {
     background: {
       pattern: {
-        color: mantine.colors.dark[3]
+        color: mantine.colors.gray[6]
       }
     }
   }
 })
 
-for (const color of keys.strict(defaultTheme.elements)) {
+for (const color of keys(defaultTheme.elements)) {
   createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
     element: {
       fill: vars.element.fill,

package/src/index.ts

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

package/src/mantine.css.ts

@@ -1,4 +1,4 @@
 import { themeToVars } from '@mantine/vanilla-extract'
-import { theme } from './mantine/theme'
 
-export const mantine = themeToVars(theme)
+// we need only variables names
+export const mantine = themeToVars({})

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'
 
-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>) {
+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<DiagramContextValue>()
+  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>
   )
 }