@likec4/diagram 1.19.2 → 1.20.1

package/src/LikeC4Diagram.props.ts

@@ -6,42 +6,41 @@ import type {
   RelationId,
   ViewChange,
   ViewId,
-  WhereOperator
+  WhereOperator,
 } from '@likec4/core'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
-import type { XYBackground } from './xyflow/XYFlowBackground'
 
 export type { WhereOperator }
 
-export type DiagramNodeWithNavigate<ID extends string = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
+export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
   navigateTo: ID
 }
 
-type ElementIconNodeProps = {
-  id: string
-  title: string
-  icon?: string | undefined
+type ElementIconRendererProps = {
+  node: {
+    id: string
+    title: string
+    icon?: string | null | undefined
+  }
 }
 
-export type ElementIconRenderer = (props: {
-  node: ElementIconNodeProps
-}) => ReactNode
+export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode
 
-export type OnNavigateTo<ID extends string = ViewId> = (
+export type OnNavigateTo<ID = ViewId> = (
   to: ID,
   // These fields present if navigateTo triggered by a node click
   event?: ReactMouseEvent,
-  element?: DiagramNodeWithNavigate<ID>
+  element?: DiagramNodeWithNavigate<ID>,
 ) => void
 
 export type OnNodeClick = (
   node: DiagramNode,
-  event: ReactMouseEvent
+  event: ReactMouseEvent,
 ) => void
 
 export type OnEdgeClick = (
   edge: DiagramEdge,
-  event: ReactMouseEvent
+  event: ReactMouseEvent,
 ) => void
 
 /**
@@ -106,17 +105,11 @@ export interface LikeC4DiagramProperties {
   initialWidth?: number | undefined
   initialHeight?: number | undefined
 
-  /**
-   * Keep aspect ratio of the diagram
-   * @default false
-   */
-  keepAspectRatio?: boolean | undefined
-
   /**
    * Background pattern
    * @default 'dots'
    */
-  background?: 'transparent' | 'solid' | XYBackground | undefined
+  background?: 'transparent' | 'solid' | 'dots' | 'lines' | 'cross' | undefined
 
   /**
    * Display webview with diagram title / description

package/src/LikeC4Diagram.tsx

@@ -1,25 +1,22 @@
-import { isDeploymentView } from '@likec4/core'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual } from 'fast-equals'
-import { memo, useEffect, useRef } from 'react'
+import { useRef } from 'react'
 import { isEmpty } from 'remeda'
-import { rootClassName } from './globals.css'
-import { useDiagramState } from './hooks/useDiagramState'
+import {
+  DiagramEventHandlers,
+  DiagramFeatures,
+  EnsureMantine,
+  FramerMotionConfig,
+  IconRendererProvider,
+  RootContainer,
+} from './context'
 import { LikeC4CustomColors } from './LikeC4CustomColors'
-import * as css from './LikeC4Diagram.css'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
+import { DiagramActor } from './likec4diagram/DiagramActor'
+import { DiagramUI } from './likec4diagram/DiagramUI'
+import type { Types } from './likec4diagram/types'
+import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges'
+import { LikeC4DiagramXYFlow } from './likec4diagram/XYFlow'
 import { useLikeC4Model } from './likec4model'
-import { LikeC4Search } from './LikeC4Search'
-import { Overlays } from './overlays'
-import { DiagramContextProvider } from './state/DiagramContext'
-import { EnsureMantine } from './ui/EnsureMantine'
-import { FramerMotionConfig } from './ui/FramerMotionConfig'
-import { FitViewOnDiagramChange } from './xyflow/FitviewOnDiagramChange'
-import { SelectEdgesOnNodeFocus } from './xyflow/SelectEdgesOnNodeFocus'
-import type { DiagramFlowTypes } from './xyflow/types'
-import { XYFlow } from './xyflow/XYFlow'
-import { XYFlowInner } from './xyflow/XYFlowInner'
 
 export type LikeC4DiagramProps = LikeC4DiagramProperties & LikeC4DiagramEventHandlers
 export function LikeC4Diagram({
@@ -30,21 +27,20 @@ export function LikeC4Diagram({
   readonly = true,
   pannable = true,
   zoomable = true,
-  nodesSelectable = !readonly,
-  nodesDraggable = !readonly,
   background = 'dots',
-  controls = !readonly,
-  showDiagramTitle = true,
-  showNotations = true,
-  enableDynamicViewWalkthrough = false,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
   enableRelationshipBrowser = enableRelationshipDetails,
+  nodesSelectable = !readonly || enableFocusMode,
+  nodesDraggable = !readonly,
+  controls = !readonly,
+  showDiagramTitle = true,
+  showNotations = true,
+  enableDynamicViewWalkthrough = false,
   enableSearch = true,
   initialWidth,
   initialHeight,
-  keepAspectRatio = false,
   experimentalEdgeEditing = false,
   onCanvasClick,
   onCanvasContextMenu,
@@ -59,142 +55,101 @@ export function LikeC4Diagram({
   onBurgerMenuClick,
   renderIcon,
   where,
-  showNavigationButtons = !!onNavigateTo
+  showNavigationButtons = !!onNavigateTo,
 }: LikeC4DiagramProps) {
   const hasLikec4model = !!useLikeC4Model()
-  const initialRef = useRef({
-    defaultNodes: [] as DiagramFlowTypes.Node[],
-    defaultEdges: [] as DiagramFlowTypes.Edge[],
-    initialWidth: initialWidth ?? view.bounds.width,
-    initialHeight: initialHeight ?? view.bounds.height
+  const initialRef = useRef<{
+    defaultNodes: Types.Node[]
+    defaultEdges: Types.Edge[]
+    initialWidth: number
+    initialHeight: number
+  }>(null)
+
+  const xyNodesEdges = useViewToNodesEdges({
+    view,
+    where,
+    nodesDraggable,
+    nodesSelectable,
   })
-  useEffect(() => {
-    if (readonly !== true && where != null) {
-      console.warn('Ignore filter, supported in readonly mode only\n', { where })
-    }
-    if (hasLikec4model) {
-      return
-    }
-    if (enableRelationshipDetails) {
-      console.warn('Invalid showRelationshipDetails=true, requires LikeC4ModelProvider')
-    }
-    if (enableElementDetails) {
-      console.warn('Invalid enableElementDetails=true, requires LikeC4ModelProvider')
-    }
-    if (enableRelationshipBrowser) {
-      console.warn('Invalid enableRelationshipBrowser=true, requires LikeC4ModelProvider')
+
+  const isDynamicView = view.__ === 'dynamic'
+
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultEdges: [],
+      defaultNodes: [],
+      initialWidth: initialWidth ?? view.bounds.width,
+      initialHeight: initialHeight ?? view.bounds.height,
     }
-  })
+  }
 
   return (
     <EnsureMantine>
       <FramerMotionConfig>
-        <XYFlowProvider
-          fitView={fitView}
-          {...initialRef.current}
-        >
-          {!isEmpty(view.customColorDefinitions) && <LikeC4CustomColors customColors={view.customColorDefinitions} />}
-          <DiagramContextProvider
-            view={view}
-            keepAspectRatio={keepAspectRatio}
-            className={clsx(rootClassName, className)}
-            readonly={readonly}
-            experimentalEdgeEditing={!readonly && experimentalEdgeEditing}
-            pannable={pannable}
-            zoomable={zoomable}
-            nodesDraggable={nodesDraggable}
-            nodesSelectable={nodesSelectable || enableFocusMode}
-            hasLikeC4Model={hasLikec4model}
-            fitViewEnabled={fitView}
-            fitViewPadding={fitViewPadding}
-            controls={controls}
-            showNavigationButtons={showNavigationButtons && !!onNavigateTo}
-            showNotations={showNotations}
-            enableFocusMode={enableFocusMode}
-            enableSearch={hasLikec4model && enableSearch}
-            enableElementDetails={enableElementDetails && hasLikec4model}
-            enableDynamicViewWalkthrough={enableDynamicViewWalkthrough}
-            enableRelationshipBrowser={enableRelationshipBrowser && hasLikec4model}
-            // TODO: temporary disable relationship details for deployment views
-            enableRelationshipDetails={enableRelationshipDetails && hasLikec4model && !isDeploymentView(view)}
-            // Apply where filter only in readonly mode
-            whereFilter={readonly ? (where ?? null) : null}
-            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}
-            onOpenSource={onOpenSource ?? null}
-            onBurgerMenuClick={onBurgerMenuClick ?? null}
+        <IconRendererProvider value={renderIcon ?? null}>
+          <DiagramFeatures
+            features={{
+              enableFitView: fitView,
+              enableReadOnly: readonly,
+              enableFocusMode,
+              enableNavigateTo: !!onNavigateTo,
+              enableElementDetails,
+              enableRelationshipDetails,
+              enableRelationshipBrowser,
+              enableSearch,
+              enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
+              enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
+              enableEdgeEditing: experimentalEdgeEditing,
+              enableNotations: showNotations,
+              enableVscode: !!onOpenSource,
+              enableControls: controls,
+              enableViewTitle: showDiagramTitle,
+              enableLikeC4Model: hasLikec4model,
+            }}
           >
-            <LikeC4DiagramInnerMemo
-              background={background}
-              showDiagramTitle={showDiagramTitle}
-              enableSearch={hasLikec4model && enableSearch}
-            />
-          </DiagramContextProvider>
-        </XYFlowProvider>
+            <DiagramEventHandlers
+              handlers={{
+                onCanvasClick,
+                onCanvasContextMenu,
+                onCanvasDblClick,
+                onEdgeClick,
+                onChange,
+                onEdgeContextMenu,
+                onNavigateTo,
+                onNodeClick,
+                onNodeContextMenu,
+                onOpenSource,
+                onBurgerMenuClick,
+              }}>
+              <RootContainer className={className}>
+                {!isEmpty(view.customColorDefinitions) && (
+                  <LikeC4CustomColors customColors={view.customColorDefinitions} />
+                )}
+                <XYFlowProvider
+                  fitView={fitView}
+                  {...initialRef.current}
+                >
+                  <DiagramActor
+                    input={{
+                      view,
+                      pannable,
+                      zoomable,
+                      fitViewPadding,
+                      ...xyNodesEdges,
+                    }}>
+                    <LikeC4DiagramXYFlow
+                      nodesDraggable={nodesDraggable}
+                      nodesSelectable={nodesSelectable}
+                      background={background}
+                    />
+                    <DiagramUI />
+                  </DiagramActor>
+                </XYFlowProvider>
+              </RootContainer>
+            </DiagramEventHandlers>
+          </DiagramFeatures>
+        </IconRendererProvider>
       </FramerMotionConfig>
     </EnsureMantine>
   )
 }
-LikeC4Diagram.displayName = 'LikeC4Diagram'
-
-type LikeC4DiagramInnerProps = {
-  background: NonNullable<LikeC4DiagramProperties['background']>
-  showDiagramTitle: boolean
-  enableSearch: boolean
-}
-const LikeC4DiagramInnerMemo = /* @__PURE__ */ memo<LikeC4DiagramInnerProps>(function LikeC4DiagramInner({
-  background,
-  showDiagramTitle,
-  enableSearch
-}) {
-  const {
-    isInitialized,
-    pannable,
-    fitView,
-    enableFocusMode,
-    enableOverlays
-  } = useDiagramState(s => ({
-    isInitialized: s.initialized,
-    pannable: s.pannable,
-    fitView: s.fitViewEnabled,
-    enableFocusMode: s.enableFocusMode,
-    enableOverlays: s.hasLikeC4Model && (s.enableRelationshipBrowser || s.enableElementDetails)
-  }))
-
-  return (
-    <>
-      <XYFlow
-        className={clsx(
-          'likec4-diagram',
-          css.cssReactFlow,
-          css.cssNoControls,
-          pannable !== true && css.cssDisablePan,
-          background === 'transparent' && css.cssTransparentBg,
-          isInitialized ? 'initialized' : css.notInitialized
-        )}
-      >
-        <XYFlowInner
-          showDiagramTitle={showDiagramTitle}
-          background={background}
-        />
-      </XYFlow>
-      {enableOverlays && <Overlays />}
-      {enableSearch && <LikeC4Search />}
-      {isInitialized && (
-        <>
-          {fitView && <FitViewOnDiagramChange />}
-          {enableFocusMode && <SelectEdgesOnNodeFocus />}
-        </>
-      )}
-    </>
-  )
-}, deepEqual)
-LikeC4DiagramInnerMemo.displayName = 'LikeC4DiagramInnerMemo'

package/src/LikeC4Search.tsx

@@ -1,20 +1,20 @@
 import { rem } from '@mantine/core'
-import { Spotlight, type SpotlightActionData } from '@mantine/spotlight'
+import { type SpotlightActionData, Spotlight } from '@mantine/spotlight'
 import { IconRectangularPrism, IconSearch, IconSitemap, IconStack2 } from '@tabler/icons-react'
 import { memo, useMemo } from 'react'
 import { filter, map, pipe } from 'remeda'
-import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from './hooks'
+import { useMantinePortalProps } from './hooks'
+import { useDiagram } from './hooks/useDiagram'
+import { useDiagramContext } from './hooks/useDiagramContext'
 import { useLikeC4Model } from './likec4model'
 import * as css from './LikeC4Search.css'
 
 export const LikeC4Search = memo(() => {
-  const view = useDiagramState(s => s.view)
+  const view = useDiagramContext(s => s.view)
   const model = useLikeC4Model(true)
-  const store = useDiagramStoreApi()
+  const diagram = useDiagram()
 
   const getNodeActionsData = (): SpotlightActionData[] => {
-    const { focusOnNode } = store.getState()
-
     return pipe(
       view.nodes,
       filter(n => !!n.title),
@@ -22,16 +22,16 @@ export const LikeC4Search = memo(() => {
         id: n.id,
         label: n.title,
         ...(n.description && {
-          description: n.description
+          description: n.description,
         }),
         keywords: [
           n.title,
           ...(n.tags ?? []).map(t => `#${t}`),
-          ...(n.description ? [n.description] : [])
+          ...(n.description ? [n.description] : []),
         ].filter(k => k.toLowerCase()),
-        onClick: () => focusOnNode(n.id),
-        leftSection: <IconRectangularPrism />
-      }))
+        onClick: () => diagram.focusNode(n.id),
+        leftSection: <IconRectangularPrism />,
+      })),
     )
   }
 
@@ -42,39 +42,32 @@ export const LikeC4Search = memo(() => {
       id: v.id,
       label: v.title ?? v.id,
       ...(v.$view.description && {
-        description: v.$view.description
+        description: v.$view.description,
       }),
       keywords: [
         v.title ?? v.id,
         ...(v.tags ?? []),
-        ...(v.$view.description ? [v.$view.description] : [])
+        ...(v.$view.description ? [v.$view.description] : []),
       ],
       onClick: () => {
-        store.setState({
-          lastOnNavigate: {
-            fromView: view.id,
-            toView: v.id,
-            fromNode: null
-          }
-        })
-        store.getState().onNavigateTo?.(v.id)
+        diagram.navigateTo(v.id)
       },
       leftSection: v.isDeploymentView()
         ? <IconStack2 />
-        : <IconSitemap />
+        : <IconSitemap />,
     }))
   }
 
   const actions = useMemo(() => [
     {
       group: 'Elements',
-      actions: getNodeActionsData()
+      actions: getNodeActionsData(),
     },
     {
       group: 'Views',
-      actions: getViewActionsData()
-    }
-  ], [model, store, view])
+      actions: getViewActionsData(),
+    },
+  ], [model, diagram, view])
 
   const portalProps = useMantinePortalProps()
   return (
@@ -87,11 +80,11 @@ export const LikeC4Search = memo(() => {
       highlightQuery
       maxHeight={350}
       classNames={{
-        actionSection: css.actionSection
+        actionSection: css.actionSection,
       }}
       searchProps={{
         leftSection: <IconSearch style={{ width: rem(18), height: rem(18) }} stroke={1.5} />,
-        placeholder: 'Search elements and views...'
+        placeholder: 'Search elements and views...',
       }}
     />
   )

package/src/StaticLikeC4Diagram.tsx

@@ -4,7 +4,6 @@ import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 export type StaticLikeC4DiagramProps = Pick<
   LikeC4DiagramProperties,
   | 'view'
-  | 'keepAspectRatio'
   | 'className'
   | 'fitView'
   | 'fitViewPadding'

package/src/{xyflow/XYFlowBackground.tsx → base/Background.tsx}

@@ -1,13 +1,14 @@
 import { nonexhaustive } from '@likec4/core'
-import { Background, type BackgroundProps, BackgroundVariant } from '@xyflow/react'
+import { type BackgroundProps, Background as XYFlowBackground, BackgroundVariant } from '@xyflow/react'
 import type { OverrideProperties } from 'type-fest'
 
 export type XYBackgroundVariant = 'dots' | 'lines' | 'cross'
 export type XYBackground =
   | XYBackgroundVariant
-  | OverrideProperties<BackgroundProps, {
-    variant: XYBackgroundVariant
-  }>
+  | BackgroundProps
+// | OverrideProperties<BackgroundProps, {
+//   variant: XYBackgroundVariant
+// }>
 
 export type XYBackgroundProps = {
   background: XYBackground
@@ -26,10 +27,9 @@ function literalToEnum(value: XYBackgroundVariant): BackgroundVariant {
   }
 }
 
-export function XYFlowBackground({ background }: XYBackgroundProps) {
+export function Background({ background }: XYBackgroundProps) {
   if (typeof background === 'string') {
-    return <Background variant={literalToEnum(background)} size={2} gap={20} />
+    return <XYFlowBackground variant={literalToEnum(background)} size={2} gap={20} />
   }
-  const { variant, ...rest } = background
-  return <Background variant={literalToEnum(variant)} {...rest} />
+  return <XYFlowBackground {...background} />
 }