@likec4/diagram 1.0.0-next.2 → 1.0.0

package/src/hooks/useUpdateEffect.ts

@@ -0,0 +1,28 @@
+import {
+  type DependenciesComparator,
+  type EffectHook,
+  useCustomCompareEffect,
+  useFirstMountState
+} from '@react-hookz/web'
+import { shallowEqual } from 'fast-equals'
+import { type DependencyList, type EffectCallback } from 'react'
+
+const noop = () => {}
+
+export function useUpdateEffect<
+  Callback extends EffectCallback = EffectCallback,
+  Deps extends DependencyList = DependencyList
+>(
+  callback: Callback,
+  deps: Deps,
+  equalityFn?: DependenciesComparator<Deps>,
+  effectHook?: EffectHook<Callback, Deps>
+) {
+  const isFirstMount = useFirstMountState()
+  useCustomCompareEffect(
+    isFirstMount ? noop as Callback : callback,
+    deps,
+    equalityFn ?? shallowEqual,
+    effectHook
+  )
+}

package/src/icons/Clipboard.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx'
+import { forwardRef, type SVGProps } from 'react'
+
+export const ClipboardCopy = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h3m9 -9v-5a2 2 0 0 0 -2 -2h-2" />
+    <path d="M13 17v-1a1 1 0 0 1 1 -1h1m3 0h1a1 1 0 0 1 1 1v1m0 3v1a1 1 0 0 1 -1 1h-1m-3 0h-1a1 1 0 0 1 -1 -1v-1" />
+    <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
+  </svg>
+))

package/src/icons/Link.tsx

@@ -0,0 +1,23 @@
+import clsx from 'clsx'
+import { forwardRef, type SVGProps } from 'react'
+
+export const Link = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
+  <svg
+    ref={ref}
+    className={clsx('icon icon-tabler', className)}
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 20 20"
+    height="20"
+    width="20"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
+      clipRule="evenodd">
+    </path>
+  </svg>
+))

package/src/icons/ZoomIn.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx'
+import { forwardRef, type SVGProps } from 'react'
+
+export const ZoomIn = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    strokeWidth="1.5"
+    stroke="currentColor"
+    fill="none"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+    <path d="M7 10l6 0" />
+    <path d="M10 7l0 6" />
+    <path d="M21 21l-6 -6" />
+  </svg>
+))

package/src/icons/index.ts

@@ -0,0 +1,3 @@
+export * from './Clipboard'
+export * from './Link'
+export * from './ZoomIn'

package/src/index.ts

@@ -0,0 +1,11 @@
+import '@xyflow/react/dist/style.css'
+import './globals.css'
+
+export { LikeC4Diagram } from './LikeC4Diagram'
+export { StaticLikeC4Diagram } from './StaticLikeC4Diagram'
+
+export * from './hooks'
+export type * from './LikeC4Diagram'
+export type * from './LikeC4Diagram.props'
+export type * from './StaticLikeC4Diagram'
+export type * from './xyflow/types'

package/src/mantine/EnsureMantine.tsx

@@ -0,0 +1,14 @@
+import { MantineContext } from '@mantine/core'
+import { type PropsWithChildren, useContext } from 'react'
+
+type EnsureMantineProps = PropsWithChildren<{}>
+
+export function EnsureMantine({ children }: EnsureMantineProps) {
+  const mantineCtx = useContext(MantineContext)
+
+  if (!mantineCtx) {
+    throw new Error('LikeC4Diagram must be a child of MantineProvider')
+  }
+
+  return <>{children}</>
+}

package/src/mantine/theme.ts

@@ -0,0 +1,19 @@
+import { createTheme, type MantineTheme } from '@mantine/core'
+
+export const theme = createTheme({
+  primaryColor: 'indigo',
+  cursorType: 'pointer',
+  defaultRadius: 'sm',
+  headings: {
+    fontWeight: '500',
+    sizes: {
+      h1: {
+        // fontSize: '2rem',
+        fontWeight: '600'
+      },
+      h2: {
+        // fontSize: '1.85rem',
+      }
+    }
+  }
+}) as MantineTheme

package/src/mantine.css.ts

@@ -0,0 +1,4 @@
+import { themeToVars } from '@mantine/vanilla-extract'
+import { theme } from './mantine/theme'
+
+export const mantine = themeToVars(theme)

package/src/reset.d.ts

@@ -0,0 +1,2 @@
+// Do not add any other lines of code to this file!
+import '@total-typescript/ts-reset'

package/src/state/DiagramContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, type PropsWithChildren, useRef } from 'react'
+import { useUpdateEffect } from '../hooks'
+import { useXYFlow } from '../xyflow/hooks'
+import { createDiagramStore, type DiagramInitialState } from './diagramStore'
+
+type DiagramContextValue = ReturnType<typeof createDiagramStore>
+export const DiagramContext = createContext<DiagramContextValue | null>(null)
+
+export function DiagramContextProvider({ children, view, ...props }: PropsWithChildren<DiagramInitialState>) {
+  const xyflow = useXYFlow()
+  const store = useRef<DiagramContextValue>()
+
+  if (!store.current) {
+    store.current = createDiagramStore({
+      xyflow,
+      view,
+      ...props
+    })
+  }
+
+  useUpdateEffect(
+    () => store.current?.setState({ xyflow }, false, 'update xyflow'),
+    [xyflow],
+    Object.is
+  )
+
+  useUpdateEffect(
+    () => store.current?.getState().updateView(view),
+    [view]
+  )
+
+  useUpdateEffect(
+    () => store.current?.setState(props, false, 'update incoming props'),
+    [props]
+  )
+
+  return (
+    <DiagramContext.Provider value={store.current}>
+      {children}
+    </DiagramContext.Provider>
+  )
+}

package/src/state/WhenInitialized.tsx

@@ -0,0 +1,24 @@
+import { type PropsWithChildren, useEffect, useState } from 'react'
+import { useDiagramStoreApi } from './useDiagramStore'
+
+export function WhenInitialized({ children }: PropsWithChildren) {
+  const diagramApi = useDiagramStoreApi()
+
+  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
+
+  useEffect(() => {
+    if (isInitialized) {
+      return
+    }
+    return diagramApi.subscribe(
+      s => s.initialized,
+      setIsInitialized
+    )
+  }, [isInitialized])
+
+  if (!isInitialized) {
+    return null
+  }
+
+  return <>{children}</>
+}

package/src/state/diagramStore.ts

@@ -0,0 +1,358 @@
+import type { DiagramNode, DiagramView, ElementShape, Fqn, NonEmptyArray, ThemeColor, ViewID } from '@likec4/core'
+import { invariant, nonexhaustive } from '@likec4/core'
+import type { XYPosition } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
+import { DEV } from 'esm-env'
+import { shallowEqual } from 'fast-equals'
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import type { Exact, Except, RequiredKeysOf, Simplify } from 'type-fest'
+import { devtools, subscribeWithSelector } from 'zustand/middleware'
+import { shallow } from 'zustand/shallow'
+import { createWithEqualityFn } from 'zustand/traditional'
+import type { Change, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
+import { MinZoom } from '../xyflow/const'
+import type { XYFlowInstance } from '../xyflow/types'
+
+export type DiagramStore = {
+  // Incoming props
+  view: DiagramView
+  readonly: boolean
+  showElementLinks: boolean
+  fitViewEnabled: boolean
+  fitViewPadding: number
+  nodesDraggable: boolean
+  nodesSelectable: boolean
+
+  // Internal state
+  xyflow: XYFlowInstance
+  initialized: boolean
+
+  // This is XYFlow id's
+  lastClickedNodeId: string | null
+  lastClickedEdgeId: string | null
+  hoveredNodeId: string | null
+  hoveredEdgeId: string | null
+
+  // Stack of previous distinct views (unique id's)
+  previousViews: DiagramView[]
+
+  lastOnNavigate: null | {
+    fromView: ViewID
+    toView: ViewID
+    element: DiagramNode
+    elementCenterScreenPosition: XYPosition
+    // If node from the target view is placed on the same position as the node from the source view
+    positionCorrected: boolean
+  }
+
+  // User changed the viewport by dragging or zooming
+  viewportChanged: boolean
+} & Required<LikeC4DiagramEventHandlers>
+
+export type DiagramInitialState = // Required properties
+  & Pick<
+    DiagramStore,
+    | 'view'
+    | 'readonly'
+    | 'showElementLinks'
+    | 'fitViewEnabled'
+    | 'fitViewPadding'
+    | 'nodesDraggable'
+    | 'nodesSelectable'
+  >
+  // Optional properties
+  // & Partial<
+  //   Pick<
+  //     DiagramStore,
+  //     'colorScheme'
+  //   >
+  // >
+  & LikeC4DiagramEventHandlers
+
+interface DiagramStoreActions {
+  updateView: (view: DiagramView) => void
+
+  setHoveredNode: (nodeId: string | null) => void
+  setHoveredEdge: (edgeId: string | null) => void
+
+  setLastClickedNode: (nodeId: string | null) => void
+  setLastClickedEdge: (edgeId: string | null) => void
+
+  getElement(id: Fqn): DiagramNode | null
+  triggerOnChange: (changes: NonEmptyArray<Change>) => void
+  triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
+  fitDiagram: () => void
+}
+
+export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
+
+const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> | 'xyflow'> = {
+  initialized: false,
+  previousViews: [],
+  viewportChanged: false,
+  hoveredNodeId: null,
+  hoveredEdgeId: null,
+  lastClickedNodeId: null,
+  lastClickedEdgeId: null,
+  lastOnNavigate: null,
+  onChange: null,
+  onNavigateTo: null,
+  onNodeClick: null,
+  onNodeContextMenu: null,
+  onCanvasContextMenu: null,
+  onEdgeClick: null,
+  onEdgeContextMenu: null,
+  onCanvasClick: null,
+  onCanvasDblClick: null
+}
+
+type CreateDiagramStore = DiagramInitialState & Pick<DiagramStore, 'xyflow'>
+
+const noReplace = false
+
+let storeDevId = 1
+
+const containsWithId = <T extends { id: string }>(arr: T[], id: string) => arr.some((x) => x.id === id)
+
+export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props: T) {
+  return createWithEqualityFn<
+    DiagramState,
+    [
+      ['zustand/subscribeWithSelector', never],
+      ['zustand/devtools', never]
+    ]
+  >(
+    subscribeWithSelector(
+      devtools(
+        (set, get) => ({
+          ...DEFAULT_PROPS,
+          ...(props as CreateDiagramStore),
+
+          updateView: (view) => {
+            let {
+              view: currentView,
+              lastOnNavigate,
+              previousViews,
+              lastClickedNodeId,
+              lastClickedEdgeId,
+              hoveredEdgeId,
+              hoveredNodeId
+            } = get()
+
+            if (shallowEqual(currentView, view)) {
+              DEV && console.debug('store: skip updateView')
+              return
+            }
+
+            // Reset lastOnNavigate if the view is not the source or target view
+            if (lastOnNavigate && lastOnNavigate.toView !== view.id && lastOnNavigate.fromView !== view.id) {
+              lastOnNavigate = null
+            }
+
+            const isSameView = currentView.id === view.id
+
+            if (isSameView) {
+              // Reset clicked/hovered node/edge if the node/edge is not in the new view
+              if (lastClickedNodeId && !containsWithId(view.nodes, lastClickedNodeId)) {
+                lastClickedNodeId = null
+              }
+              if (hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId)) {
+                hoveredNodeId = null
+              }
+              if (lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId)) {
+                lastClickedEdgeId = null
+              }
+              if (hoveredEdgeId && !containsWithId(view.edges, hoveredEdgeId)) {
+                hoveredEdgeId = null
+              }
+            } else {
+              // Reset hovered / clicked node/edge if the view is different
+              lastClickedEdgeId = null
+              lastClickedNodeId = null
+              hoveredEdgeId = null
+              hoveredNodeId = null
+
+              // Update history stack (back button not implemented yet)
+              previousViews = [
+                currentView,
+                ...previousViews.filter((v) => v.id !== view.id && v.id !== currentView.id)
+              ]
+            }
+
+            set(
+              {
+                view,
+                lastOnNavigate,
+                previousViews,
+                lastClickedNodeId,
+                lastClickedEdgeId,
+                hoveredEdgeId,
+                hoveredNodeId
+              },
+              noReplace,
+              'update-view'
+            )
+          },
+
+          setHoveredNode: (nodeId) => {
+            if (nodeId !== get().hoveredNodeId) {
+              set({ hoveredNodeId: nodeId }, noReplace, nodeId ? 'setHoveredNode' : 'unsetHoveredNode')
+            }
+          },
+
+          setHoveredEdge: (edgeId) => {
+            if (edgeId !== get().hoveredEdgeId) {
+              set({ hoveredEdgeId: edgeId }, noReplace, edgeId ? 'setHoveredEdge' : 'unsetHoveredEdge')
+            }
+          },
+
+          setLastClickedNode: (nodeId) => {
+            if (nodeId !== get().lastClickedNodeId) {
+              set({ lastClickedNodeId: nodeId }, noReplace, nodeId ? 'setLastClickedNode' : 'unsetLastClickedNode')
+            }
+          },
+
+          setLastClickedEdge: (edgeId) => {
+            if (edgeId !== get().lastClickedEdgeId) {
+              set({ lastClickedEdgeId: edgeId }, noReplace, edgeId ? 'setLastClickedEdge' : 'unsetLastClickedEdge')
+            }
+          },
+
+          getElement: (fqn) => {
+            const { view } = get()
+            return view.nodes.find(({ id }) => id === fqn) ?? null
+          },
+
+          triggerOnChange: (changes: NonEmptyArray<Change>) => {
+            const newShapes = new Map<Fqn, ElementShape>()
+            const newColor = new Map<Fqn, ThemeColor>()
+            for (const change of changes) {
+              if (change.op === 'change-shape') {
+                for (const target of change.targets) {
+                  newShapes.set(target, change.shape)
+                }
+                continue
+              }
+              if (change.op === 'change-color') {
+                for (const target of change.targets) {
+                  newColor.set(target, change.color)
+                }
+                continue
+              }
+              nonexhaustive(change)
+            }
+            // TODO: Update positions/sizes
+            // const { view, updateView } = get()
+            // let hasChanges = false
+            // const nextNodes = view.nodes.map((node) => {
+            //   const shape = newShapes.get(node.id)
+            //   if (shape && shape !== node.shape) {
+            //     hasChanges = true
+            //     node = {
+            //       ...node,
+            //       shape
+            //     }
+            //   }
+            //   const color = newColor.get(node.id)
+            //   if (color && color !== node.color) {
+            //     hasChanges = true
+            //     node = {
+            //       ...node,
+            //       color
+            //     }
+            //   }
+            //   return node
+            // })
+            // if (hasChanges) {
+            //   updateView({
+            //     ...view,
+            //     nodes: nextNodes
+            //   })
+            // }
+            get().xyflow.setNodes(nodes =>
+              nodes.map(node => {
+                let { data } = node
+                const shape = newShapes.get(data.fqn)
+                if (shape && shape !== data.element.shape) {
+                  node = {
+                    ...node,
+                    data: {
+                      ...data,
+                      element: {
+                        ...data.element,
+                        shape
+                      }
+                    }
+                  }
+                  data = node.data
+                }
+                const color = newColor.get(data.fqn)
+                if (color && color !== data.element.color) {
+                  node = {
+                    ...node,
+                    data: {
+                      ...data,
+                      element: {
+                        ...data.element,
+                        color
+                      }
+                    }
+                  }
+                }
+                return node
+              })
+            )
+            get().onChange?.({ changes })
+          },
+
+          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}`)
+            const dimensions = getNodeDimensions(xynode)
+            set(
+              {
+                lastClickedNodeId: xynodeId,
+                lastOnNavigate: {
+                  fromView: view.id,
+                  toView: element.navigateTo,
+                  element: element,
+                  elementCenterScreenPosition: xyflow.flowToScreenPosition({
+                    x: xynode.internals.positionAbsolute.x + dimensions.width / 2,
+                    y: xynode.internals.positionAbsolute.y + dimensions.height / 2
+                  }),
+                  positionCorrected: false
+                }
+              },
+              noReplace,
+              'triggerOnNavigateTo'
+            )
+            get().onNavigateTo?.(
+              element.navigateTo,
+              event,
+              element,
+              xynode.internals.userNode
+            )
+          },
+
+          fitDiagram: () => {
+            const { fitViewPadding, xyflow } = get()
+            xyflow.fitView({
+              includeHiddenNodes: true,
+              duration: 400,
+              padding: fitViewPadding,
+              minZoom: MinZoom,
+              maxZoom: 1
+            })
+          }
+        }),
+        {
+          name: `DiagramStore ${storeDevId++} - ${props.view.id}`,
+          enabled: DEV
+        }
+      )
+    ),
+    shallow
+  )
+}

package/src/state/index.ts

@@ -0,0 +1,4 @@
+export { DiagramContextProvider } from './DiagramContext'
+export type * from './diagramStore'
+export * from './useDiagramStore'
+export { WhenInitialized } from './WhenInitialized'

package/src/state/useDiagramStore.ts

@@ -0,0 +1,39 @@
+import { shallowEqual } from 'fast-equals'
+import { useContext, useMemo } from 'react'
+import { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'
+
+import { DiagramContext } from './DiagramContext'
+import type { DiagramState } from './diagramStore'
+
+function useDiagramState<StateSlice = unknown>(
+  selector: (state: DiagramState) => StateSlice,
+  equalityFn?: (a: StateSlice, b: StateSlice) => boolean
+) {
+  const store = useContext(DiagramContext)
+
+  if (store === null) {
+    throw new Error('useDiagramStore could be used only inside DiagramContext')
+  }
+
+  return useZustandStore(store, selector, equalityFn ?? shallowEqual)
+}
+
+function useDiagramStoreApi() {
+  const store = useContext(DiagramContext)
+
+  if (store === null) {
+    throw new Error('useDiagramStoreApi could be used only inside DiagramContext')
+  }
+
+  return useMemo(
+    () => ({
+      getState: store.getState,
+      setState: store.setState,
+      subscribe: store.subscribe
+    }),
+    [store]
+  )
+}
+export type DiagramStoreApi = ReturnType<typeof useDiagramStoreApi>
+
+export { useDiagramState, useDiagramStoreApi }