@likec4/diagram 1.19.2 → 1.20.1

package/src/context/IconRenderer.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx'
+import { type ReactNode, createContext, useContext } from 'react'
+import type { ElementIconRenderer } from '../LikeC4Diagram.props'
+
+const IconRendererContext = createContext<ElementIconRenderer | null>(null)
+
+export const IconRendererProvider = IconRendererContext.Provider
+
+export function IconRenderer({
+  element,
+  className,
+}: {
+  element?: {
+    id: string
+    title: string
+    icon?: string | null | undefined
+  }
+  className: string
+}) {
+  const RenderIcon = useContext(IconRendererContext)
+  if (!element || !element.icon || element.icon === 'none') {
+    return null
+  }
+  let icon: ReactNode
+  if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
+    icon = <img src={element.icon} alt={element.title} />
+  } else if (RenderIcon) {
+    icon = <RenderIcon node={element} />
+  }
+
+  if (!icon) {
+    return null
+  }
+  return (
+    <div
+      className={clsx(
+        className,
+        'likec4-element-icon',
+      )}
+      data-likec4-icon={element.icon}
+    >
+      {icon}
+    </div>
+  )
+}

package/src/context/RootContainer.tsx

@@ -0,0 +1,31 @@
+import { Box } from '@mantine/core'
+import clsx from 'clsx'
+import { type PropsWithChildren, type RefObject, createContext, createRef, useContext, useRef } from 'react'
+import { rootClassName } from '../globals.css'
+
+const RootContainerContext = createContext(createRef<HTMLDivElement>())
+
+export function RootContainer({
+  className,
+  children,
+}: PropsWithChildren<{ className?: string | undefined }>) {
+  const ref = useRef<HTMLDivElement>(null)
+  return (
+    <Box className={clsx(rootClassName, className)} ref={ref}>
+      <RootContainerContext.Provider value={ref}>
+        {children}
+      </RootContainerContext.Provider>
+    </Box>
+  )
+}
+
+export function useRootContainerRef() {
+  return useContext(RootContainerContext)
+}
+
+/**
+ * NOTE: Non-reactive
+ */
+export function useRootContainer() {
+  return useContext(RootContainerContext).current
+}

package/src/context/index.ts

@@ -0,0 +1,14 @@
+export { DiagramEventHandlers, useDiagramEventHandlers } from './DiagramEventHandlers'
+export {
+  AllDisabled,
+  DiagramFeatures,
+  IfEnabled,
+  IfNotEnabled,
+  useEnabledFeature,
+  useEnabledFeatures,
+} from './DiagramFeatures'
+export type { EnabledFeatures } from './DiagramFeatures'
+export { EnsureMantine } from './EnsureMantine'
+export { FramerMotionConfig } from './FramerMotionConfig'
+export { IconRenderer, IconRendererProvider } from './IconRenderer'
+export { RootContainer, useRootContainer, useRootContainerRef } from './RootContainer'

package/src/globals.css.ts

@@ -15,15 +15,15 @@ globalStyle(`.${rootClassName}`, {
   margin: 0,
   boxSizing: 'border-box',
   WebkitFontSmoothing: mantine.webkitFontSmoothing,
-  MozOsxFontSmoothing: mantine.mozFontSmoothing
+  MozOsxFontSmoothing: mantine.mozFontSmoothing,
 })
 globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
   width: '75%',
-  height: '75%'
+  height: '75%',
 })
 
 createGlobalTheme(`.${rootClassName}`, {
-  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default'])
+  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default']),
 }, {
   likec4: {
     font:
@@ -31,39 +31,39 @@ createGlobalTheme(`.${rootClassName}`, {
     background: {
       color: mantine.colors.body,
       pattern: {
-        color: mantine.colors.gray[4]
-      }
-    }
+        color: mantine.colors.gray[4],
+      },
+    },
   },
   compound: {
     font: vars.likec4.font,
-    titleColor: vars.element.loContrast
+    titleColor: vars.element.loContrast,
   },
   element: {
     font: vars.likec4.font,
-    ...defaultTheme.elements.primary
+    ...defaultTheme.elements.primary,
   },
   relation: {
-    ...defaultTheme.relationships.slate
-  }
+    ...defaultTheme.relationships.slate,
+  },
 })
 
 createGlobalTheme(`${whereDark} .${rootClassName}`, {
   likec4: {
     background: {
       pattern: {
-        color: vars.likec4.background.pattern.color
-      }
-    }
-  }
+        color: vars.likec4.background.pattern.color,
+      },
+    },
+  },
 }, {
   likec4: {
     background: {
       pattern: {
-        color: mantine.colors.dark[5]
-      }
-    }
-  }
+        color: mantine.colors.dark[5],
+      },
+    },
+  },
 })
 
 for (const color of keys(defaultTheme.elements)) {
@@ -72,38 +72,38 @@ for (const color of keys(defaultTheme.elements)) {
       fill: vars.element.fill,
       stroke: vars.element.stroke,
       hiContrast: vars.element.hiContrast,
-      loContrast: vars.element.loContrast
+      loContrast: vars.element.loContrast,
     },
     compound: {
-      titleColor: vars.compound.titleColor
+      titleColor: vars.compound.titleColor,
     },
-    relation: vars.relation
+    relation: vars.relation,
   }, {
     element: defaultTheme.elements[color],
     compound: {
-      titleColor: defaultTheme.elements[color].loContrast
+      titleColor: defaultTheme.elements[color].loContrast,
     },
-    relation: defaultTheme.relationships[color]
+    relation: defaultTheme.relationships[color],
   })
 
   const compoundDarkColor = (color: string, depth: number) =>
     toHex(
       scale(color, {
         l: -22 - 5 * depth,
-        s: -10 - 6 * depth
-      })
+        s: -10 - 6 * depth,
+      }),
     )
   const compoundLightColor = (color: string, depth: number) =>
     toHex(
       scale(color, {
         l: -20 - 3 * depth,
-        s: -3 - 6 * depth
-      })
+        s: -3 - 6 * depth,
+      }),
     )
 
   const compounds = {
     fill: vars.element.fill,
-    stroke: vars.element.stroke
+    stroke: vars.element.stroke,
   }
 
   for (let depth = 1; depth <= 6; depth++) {
@@ -112,8 +112,8 @@ for (const color of keys(defaultTheme.elements)) {
       compounds,
       {
         fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
-        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth)
-      }
+        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth),
+      },
     )
 
     createGlobalTheme(
@@ -121,8 +121,8 @@ for (const color of keys(defaultTheme.elements)) {
       compounds,
       {
         fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
-        stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth)
-      }
+        stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth),
+      },
     )
   }
 }

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
-export * from './useDiagramState'
-export * from './useMantinePortalProps'
-export * from './useSetState'
-export * from './useUpdateEffect'
-export * from './useXYFlow'
+export { useCurrentViewId } from './useCurrentViewId'
+export type { DiagramContext } from './useDiagramContext'
+export { useMantinePortalProps } from './useMantinePortalProps'
+export { useSetState } from './useSetState'
+export { useUpdateEffect } from './useUpdateEffect'
+export { useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi } from './useXYFlow'
+export type { XYStoreApi } from './useXYFlow'

package/src/hooks/useCurrentViewId.ts

@@ -0,0 +1,8 @@
+import type { ViewId } from '@likec4/core'
+import type { DiagramContext } from '../likec4diagram/state/machine'
+import { useDiagramContext } from './useDiagramContext'
+
+const selectViewId = (state: DiagramContext) => state.view.id
+export function useCurrentViewId(): ViewId {
+  return useDiagramContext(selectViewId)
+}

package/src/hooks/useDiagram.ts

@@ -0,0 +1,129 @@
+import type { EdgeId, Fqn, NodeId, ViewId } from '@likec4/core'
+import { useMemo, useTransition } from 'react'
+import type { PartialDeep } from 'type-fest'
+import { useDiagramActor } from '../hooks/useDiagramActor'
+import type { OpenSourceParams } from '../LikeC4Diagram.props'
+import type { AlignmentMode } from '../likec4diagram/state/aligners'
+import type { Types } from '../likec4diagram/types'
+import { DiagramContext } from './useDiagramContext'
+
+export function useDiagram() {
+  const actor = useDiagramActor()
+  const [, startTransition] = useTransition()
+  return useMemo(() => ({
+    send: actor.send,
+    navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
+      startTransition(() => {
+        actor.send({
+          type: 'navigate.to',
+          viewId,
+          ...(fromNode && { fromNode }),
+        })
+      })
+    },
+    navigate: (direction: 'back' | 'forward') => {
+      startTransition(() => {
+        actor.send({ type: `navigate.${direction}` })
+      })
+    },
+    fitDiagram: (duration = 350) => {
+      startTransition(() => {
+        actor.send({ type: 'fitDiagram', duration })
+      })
+    },
+    openRelationshipsBrowser: (fqn: Fqn) => {
+      startTransition(() => {
+        actor.send({ type: 'open.relationshipsBrowser', fqn })
+      })
+    },
+    openSource: (params: OpenSourceParams) => {
+      actor.send({ type: 'open.source', ...params })
+    },
+    openElementDetails: (fqn: Fqn, fromNode?: NodeId) => {
+      startTransition(() => {
+        actor.send({ type: 'open.elementDetails', fqn, fromNode })
+      })
+    },
+    openRelationshipDetails: (edgeId: EdgeId) => {
+      startTransition(() => {
+        actor.send({ type: 'open.relationshipDetails', edgeId })
+      })
+    },
+    closeOverlay: () => {
+      startTransition(() => {
+        actor.send({ type: 'close.overlay' })
+      })
+    },
+    updateNodeData: (nodeId: NodeId, data: PartialDeep<Types.NodeData>) => {
+      actor.send({ type: 'update.nodeData', nodeId, data })
+    },
+    updateEdgeData: (edgeId: EdgeId, data: PartialDeep<Types.Edge['data']>) => {
+      actor.send({
+        type: 'update.edgeData',
+        edgeId,
+        // @ts-expect-error TODO: fix this
+        data,
+      })
+    },
+    scheduleSaveManualLayout: () => {
+      actor.send({ type: 'saveManualLayout.schedule' })
+    },
+    /**
+     * @returns true if there was pending request to save layout
+     */
+    cancelSaveManualLayout: () => {
+      const syncState = actor.getSnapshot().context.syncLayoutActorRef.getSnapshot().value
+      actor.send({ type: 'saveManualLayout.cancel' })
+      return syncState === 'pending' || syncState === 'paused'
+    },
+
+    align: (mode: AlignmentMode) => {
+      actor.send({ type: 'layout.align', mode })
+    },
+
+    resetEdgeControlPoints: () => {
+      actor.send({ type: 'layout.resetEdgeControlPoints' })
+    },
+
+    focusNode: (nodeId: NodeId) => {
+      actor.send({ type: 'focus.node', nodeId })
+    },
+
+    /**
+     * @warning Do not use in render phase
+     */
+    currentView: () => actor.getSnapshot().context.view,
+    /**
+     * @warning Do not use in render phase
+     */
+    getState: () => actor.getSnapshot(),
+    /**
+     * @warning Do not use in render phase
+     */
+    getContext: () => actor.getSnapshot().context,
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramNode: (xynodeId: string) => {
+      return DiagramContext.findDiagramNode(actor.getSnapshot().context, xynodeId)
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramEdge: (xyedgeId: string) => {
+      return DiagramContext.findDiagramEdge(actor.getSnapshot().context, xyedgeId)
+    },
+
+    startWalkthrough: () => {
+      actor.send({ type: 'walkthrough.start' })
+    },
+
+    walkthroughStep: (direction: 'next' | 'previous' = 'next') => {
+      actor.send({ type: 'walkthrough.step', direction })
+    },
+
+    stopWalkthrough: () => {
+      actor.send({ type: 'walkthrough.end' })
+    },
+  }), [actor])
+}

package/src/hooks/useDiagramActor.ts

@@ -0,0 +1,25 @@
+import { useCallbackRef } from '@mantine/hooks'
+import { useSelector as useXstateSelector } from '@xstate/react'
+import { shallowEqual } from 'fast-equals'
+import { useActorRef } from '../likec4diagram/state/actorContext'
+import { useSelector } from '../likec4diagram/state/actorContext'
+import type { LikeC4ViewActorRef } from '../likec4diagram/state/machine'
+import { type MachineSnapshot } from '../likec4diagram/state/machine'
+import type { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualLayoutActor'
+
+export function useDiagramActor(): LikeC4ViewActorRef {
+  return useActorRef()
+}
+export function useDiagramActorState<T>(selector: (state: MachineSnapshot) => T, compare = shallowEqual): T {
+  const select = useCallbackRef((s: MachineSnapshot) => selector(s))
+  return useSelector(select, compare)
+}
+
+export function useDiagramSyncLayoutState<T>(
+  selector: (state: SyncLayoutActorSnapshot) => T,
+  compare = shallowEqual,
+): T {
+  const syncLayoutActorRef = useDiagramActorState(s => s.context.syncLayoutActorRef)
+  const select = useCallbackRef(selector)
+  return useXstateSelector(syncLayoutActorRef, select, compare)
+}

package/src/hooks/useDiagramContext.ts

@@ -0,0 +1,11 @@
+import { useCallbackRef } from '@mantine/hooks'
+import { shallowEqual } from 'fast-equals'
+import { useSelector } from '../likec4diagram/state/actorContext'
+import { type DiagramContext, type MachineSnapshot } from '../likec4diagram/state/machine'
+
+export function useDiagramContext<T>(selector: (state: DiagramContext) => T, compare = shallowEqual) {
+  const select = useCallbackRef((s: MachineSnapshot) => selector(s.context))
+  return useSelector(select, compare)
+}
+
+export { DiagramContext } from '../likec4diagram/state/machine'

package/src/hooks/useMantinePortalProps.ts

@@ -1,8 +1,8 @@
 import { useMemo } from 'react'
 
-import { useDiagramState } from './useDiagramState'
+import { useRootContainer } from '../context'
 
 export function useMantinePortalProps() {
-  const target = useDiagramState(s => s.getContainer())
+  const target = useRootContainer()
   return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target])
 }

package/src/hooks/useXYFlow.ts

@@ -1,47 +1,21 @@
-import { useInternalNode, useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { useCallback } from 'react'
-import type { DiagramFlowTypes } from '../xyflow/types'
+import { useCallbackRef } from '@mantine/hooks'
+import { type ReactFlowState, useInternalNode, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
+import { shallowEqual } from 'fast-equals'
+import type { Types } from '../likec4diagram/types'
 
-export const useXYFlow = useReactFlow<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
-
-export const useXYNodesData = useNodesData<DiagramFlowTypes.Node>
-export const useXYInternalNode = useInternalNode<DiagramFlowTypes.Node>
+export const useXYFlow = useReactFlow<Types.Node, Types.Edge>
 
 export function useXYStore<StateSlice = unknown>(
-  selector: (state: DiagramFlowTypes.XYFlowState) => StateSlice,
-  equalityFn?: (a: StateSlice, b: StateSlice) => boolean
+  selector: (state: ReactFlowState<Types.Node, Types.Edge>) => StateSlice,
+  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
 ): StateSlice {
   return useStore(
-    selector as any,
-    equalityFn ?? shallowEqual
+    useCallbackRef(selector as any),
+    equalityFn ?? shallowEqual,
   )
 }
-export const useXYStoreApi = useStoreApi<DiagramFlowTypes.Node, DiagramFlowTypes.Edge>
-export type XYStoreApi = ReturnType<typeof useXYStoreApi>
-
-export function useXYEdgesData(edgeIds: string[]): Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[] {
-  const ids = edgeIds.join(',')
-  const edgesData = useXYStore(
-    useCallback(
-      (s) => {
-        const data = [] as Pick<DiagramFlowTypes.Edge, 'id' | 'data'>[]
-        for (const id of edgeIds) {
-          const edge = s.edgeLookup.get(id)
-          if (edge) {
-            data.push({
-              id: edge.id,
-              data: edge.data
-            })
-          }
-        }
 
-        return data
-      },
-      [ids]
-    ),
-    deepEqual
-  )
+export const useXYStoreApi = useStoreApi<Types.Node, Types.Edge>
+export type XYStoreApi = ReturnType<typeof useXYStoreApi>
 
-  return edgesData
-}
+export const useXYInternalNode = useInternalNode<Types.Node>

package/src/index.ts

@@ -1,17 +1,15 @@
 import '@xyflow/react/dist/style.css'
 
+export { FramerMotionConfig } from './context/FramerMotionConfig'
 export { LikeC4Diagram } from './LikeC4Diagram'
 export type { LikeC4DiagramProps } from './LikeC4Diagram'
+export { Overlay } from './overlays/overlay/Overlay'
 
 export {
-  useLikeC4DiagramView,
-  useLikeC4ElementModel,
   useLikeC4ElementsTree,
   useLikeC4Model,
-  useLikeC4View,
-  useLikeC4ViewModel,
-  useLikeC4Views,
 } from './likec4model'
+
 export { LikeC4ModelProvider } from './LikeC4ModelProvider'
 
 export { useSetState } from './hooks/useSetState'
@@ -20,7 +18,5 @@ export { vars, xyvars } from './theme-vars'
 
 export type * from './LikeC4Diagram.props'
 
-export type * from './xyflow/types'
-
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
 export type { StaticLikeC4DiagramProps } from './StaticLikeC4Diagram'

package/src/likec4diagram/DiagramActor.tsx

@@ -0,0 +1,79 @@
+import type { ViewId } from '@likec4/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { useStoreApi } from '@xyflow/react'
+import { type PropsWithChildren, useEffect } from 'react'
+import { useDiagramEventHandlers, useEnabledFeatures } from '../context'
+import { useDiagramActor } from '../hooks/useDiagramActor'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import { LikeC4ViewMachineContextProvider } from './state/actorContext'
+// import { useInspector } from './state/inspector'
+import { type Input, diagramMachine } from './state/machine'
+import { syncManualLayoutActor } from './state/syncManualLayoutActor'
+import type { Types } from './types'
+
+type ActorContextInput = Omit<Input, 'xystore' | 'features'>
+
+export function DiagramActor({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
+  const { onNavigateTo, onOpenSource, onChange } = useDiagramEventHandlers()
+  const xystore = useStoreApi<Types.Node, Types.Edge>()
+  // const inspector = useInspector()
+  return (
+    (
+      <LikeC4ViewMachineContextProvider
+        logic={diagramMachine.provide({
+          actions: {
+            'trigger:NavigateTo': useCallbackRef((_, { viewId }) => {
+              onNavigateTo?.(viewId as ViewId)
+            }),
+
+            'trigger:OnChange': useCallbackRef((_, params) => {
+              onChange?.(params)
+            }),
+
+            'trigger:OpenSource': useCallbackRef((_, params) => {
+              onOpenSource?.(params)
+            }),
+          },
+          actors: {
+            syncManualLayoutActor: syncManualLayoutActor.provide({
+              actions: {
+                'trigger:OnChange': useCallbackRef((_, params) => {
+                  onChange?.(params)
+                }),
+              },
+            }),
+          },
+        })}
+        options={{
+          // ...inspector,
+          id: `diagram:${input.view.id}`,
+          input: {
+            xystore,
+            ...input,
+          },
+        }}
+      >
+        <SyncStore input={input} />
+        {children}
+      </LikeC4ViewMachineContextProvider>
+    )
+  )
+}
+
+const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }: { input: ActorContextInput }) => {
+  const features = useEnabledFeatures()
+  const { send } = useDiagramActor()
+  useUpdateEffect(() => {
+    send({ type: 'update.inputs', inputs })
+  }, [send, inputs])
+
+  useEffect(() => {
+    send({ type: 'update.features', features })
+  }, [send, features])
+
+  useUpdateEffect(() => {
+    send({ type: 'update.view', view, xyedges, xynodes })
+  }, [send, view, xyedges, xynodes])
+
+  return null
+}

package/src/likec4diagram/DiagramUI.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react'
+import { IfEnabled } from '../context'
+import { LikeC4Search } from '../LikeC4Search'
+import { Overlays } from '../overlays/Overlays'
+import { Controls, DiagramTitlePanel } from './ui'
+import NotationPanel from './ui/notation'
+import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough'
+
+export const DiagramUI = memo(() => {
+  return (
+    <>
+      <Controls />
+      <Overlays />
+      <IfEnabled feature="Search">
+        <LikeC4Search />
+      </IfEnabled>
+      <IfEnabled feature="ViewTitle">
+        <DiagramTitlePanel />
+      </IfEnabled>
+      <IfEnabled feature="Notations">
+        <NotationPanel />
+      </IfEnabled>
+      <IfEnabled feature="DynamicViewWalkthrough">
+        <DynamicViewWalkthrough />
+      </IfEnabled>
+    </>
+  )
+})