@likec4/diagram 1.41.0 → 1.42.0

package/src/hooks/useDiagram.ts

@@ -1,310 +0,0 @@
-import {
-  type aux,
-  type DiagramEdge,
-  type DiagramNode,
-  type DiagramView,
-  type DynamicViewDisplayVariant,
-  type NodeId,
-  type NodeNotation as ElementNotation,
-  type scalar,
-  type ViewId,
-} from '@likec4/core/types'
-import { useCallbackRef } from '@mantine/hooks'
-import { useSelector as useXstateSelector } from '@xstate/react'
-import { shallowEqual } from 'fast-equals'
-import { type DependencyList, useCallback, useEffect, useMemo, useRef } from 'react'
-import type { PartialDeep } from 'type-fest'
-import type { FeatureName } from '../context/DiagramFeatures'
-import type { OpenSourceParams } from '../LikeC4Diagram.props'
-import type { Types } from '../likec4diagram/types'
-import type { AlignmentMode } from '../state/aligners'
-import type {
-  DiagramActorEvent,
-  DiagramActorRef,
-  DiagramActorSnapshot,
-  DiagramContext,
-  DiagramEmittedEvents,
-} from '../state/types'
-import { findDiagramEdge, findDiagramNode } from '../state/utils'
-import { useDiagramActorRef } from './safeContext'
-
-export { useDiagramActorRef }
-
-export interface DiagramApi {
-  readonly actor: DiagramActorRef
-  /**
-   * @warning Do not use in render phase
-   */
-  readonly currentView: DiagramView
-  /**
-   * Send event to diagram actor
-   */
-  send(event: DiagramActorEvent): void
-  /**
-   * Navigate to view
-   */
-  navigateTo(viewId: scalar.ViewId, fromNode?: scalar.NodeId): void
-  /**
-   * Navigate back or forward in history
-   */
-  navigate(direction: 'back' | 'forward'): void
-  /**
-   * Fit diagram to view
-   */
-  fitDiagram(duration?: number): void
-  /**
-   * Open relationships browser
-   */
-  openRelationshipsBrowser(fqn: scalar.Fqn): void
-  /**
-   * If running in editor, trigger opening source file
-   */
-  openSource(params: OpenSourceParams<aux.Unknown>): void
-  /**
-   * Open element details card
-   */
-  openElementDetails(fqn: scalar.Fqn, fromNode?: scalar.NodeId): void
-  openRelationshipDetails(...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]): void
-  updateNodeData(nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>): void
-  updateEdgeData(edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>): void
-  /**
-   * Schedule save manual layout
-   */
-  scheduleSaveManualLayout(): void
-  /**
-   * @returns true if there was pending request to save layout
-   */
-  cancelSaveManualLayout(): boolean
-  /**
-   * Align nodes
-   */
-  align(mode: AlignmentMode): void
-  /**
-   * Reset edge control points
-   */
-  resetEdgeControlPoints(): void
-  /**
-   * Focus node
-   */
-  focusNode(nodeId: NodeId): void
-
-  /**
-   * @warning Do not use in render phase
-   */
-  getSnapshot(): DiagramActorSnapshot
-  /**
-   * @warning Do not use in render phase
-   */
-  getContext(): DiagramContext
-  /**
-   * @warning Do not use in render phase
-   */
-  findDiagramNode(xynodeId: string): DiagramNode | null
-  /**
-   * @warning Do not use in render phase
-   */
-  findEdge(xyedgeId: string): Types.Edge | null
-  /**
-   * @warning Do not use in render phase
-   */
-  findDiagramEdge(xyedgeId: string): DiagramEdge | null
-
-  startWalkthrough(): void
-  walkthroughStep(direction?: 'next' | 'previous'): void
-  stopWalkthrough(): void
-  toggleFeature(feature: FeatureName, forceValue?: boolean): void
-  highlightNotation(notation: ElementNotation, kind?: string): void
-  unhighlightNotation(): void
-  openSearch(searchValue?: string): void
-
-  /**
-   * Switch dynamic view display variant
-   */
-  switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void
-}
-
-/**
- * Diagram API
- * Mostly for internal use
- */
-export function useDiagram(): DiagramApi {
-  const actor = useDiagramActorRef()
-  return useMemo((): DiagramApi => ({
-    actor,
-    send: (event: DiagramActorEvent) => actor.send(event),
-    navigateTo: (viewId: ViewId, fromNode?: NodeId) => {
-      actor.send({
-        type: 'navigate.to',
-        viewId,
-        ...(fromNode && { fromNode }),
-      })
-    },
-    navigate: (direction: 'back' | 'forward') => {
-      actor.send({ type: `navigate.${direction}` })
-    },
-    fitDiagram: (duration = 350) => {
-      actor.send({ type: 'fitDiagram', duration })
-    },
-    openRelationshipsBrowser: (fqn) => {
-      actor.send({ type: 'open.relationshipsBrowser', fqn })
-    },
-    openSource: (params: OpenSourceParams<aux.Unknown>) => {
-      actor.send({ type: 'open.source', ...params })
-    },
-    openElementDetails: (fqn, fromNode?: scalar.NodeId) => {
-      actor.send({ type: 'open.elementDetails', fqn, fromNode })
-    },
-    openRelationshipDetails: (...params: [edgeId: scalar.EdgeId] | [source: scalar.Fqn, target: scalar.Fqn]) => {
-      if (params.length === 1) {
-        actor.send({ type: 'open.relationshipDetails', params: { edgeId: params[0] } })
-      } else {
-        actor.send({ type: 'open.relationshipDetails', params: { source: params[0], target: params[1] } })
-      }
-    },
-
-    updateNodeData: (nodeId: scalar.NodeId, data: PartialDeep<Types.NodeData>) => {
-      actor.send({ type: 'update.nodeData', nodeId, data })
-    },
-    updateEdgeData: (edgeId: scalar.EdgeId, data: PartialDeep<Types.EdgeData>) => {
-      actor.send({
-        type: 'update.edgeData',
-        edgeId,
-        data,
-      })
-    },
-    scheduleSaveManualLayout: () => {
-      actor.send({ type: 'saveManualLayout.schedule' })
-    },
-    /**
-     * @returns true if there was pending request to save layout
-     */
-    cancelSaveManualLayout: () => {
-      const syncState = actor.getSnapshot().children.syncLayout?.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
-     */
-    get currentView(): DiagramView {
-      return actor.getSnapshot().context.view
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot: (): DiagramActorSnapshot => actor.getSnapshot(),
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext: (): DiagramContext => actor.getSnapshot().context,
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode: (xynodeId: string): DiagramNode | null => {
-      return findDiagramNode(actor.getSnapshot().context, xynodeId)
-    },
-    findEdge: (xyedgeId: string): Types.Edge | null => {
-      return actor.getSnapshot().context.xyedges.find(e => e.data.id === xyedgeId) ?? null
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge: (xyedgeId: string): DiagramEdge | null => {
-      return 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' })
-    },
-
-    toggleFeature: (feature: FeatureName, forceValue?: boolean) => {
-      actor.send({ type: 'toggle.feature', feature, ...(forceValue !== undefined && { forceValue }) })
-    },
-
-    highlightNotation: (notation: ElementNotation, kind?: string) => {
-      actor.send({ type: 'notations.highlight', notation, ...(kind && { kind }) })
-    },
-    unhighlightNotation: () => {
-      actor.send({ type: 'notations.unhighlight' })
-    },
-
-    openSearch: (searchValue?: string) => {
-      actor.send({ type: 'open.search', ...(searchValue && { search: searchValue }) })
-    },
-
-    switchDynamicViewVariant: (variant: DynamicViewDisplayVariant) => {
-      actor.send({ type: 'switch.dynamicViewVariant', variant })
-    },
-  }), [actor])
-}
-
-export function useDiagramActorSnapshot<T = unknown>(
-  selector: (state: DiagramActorSnapshot) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-): T {
-  const actorRef = useDiagramActorRef()
-  return useXstateSelector(actorRef, useCallbackRef(selector), compare)
-}
-
-/**
- * Read diagram context
- */
-export function useDiagramContext<T = unknown>(
-  selector: (context: DiagramContext) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-  deps?: DependencyList,
-): T {
-  const actorRef = useDiagramActorRef()
-  const select = useCallback((s: DiagramActorSnapshot) => selector(s.context), deps ?? [])
-  return useXstateSelector(actorRef, select, compare)
-}
-
-type PickEmittedEvent<T extends DiagramEmittedEvents['type']> = DiagramEmittedEvents & { type: T }
-
-/**
- * Subscribe to diagram emitted events
- * @example
- * ```tsx
- * useOnDiagramEvent('navigateTo', ({viewId}) => {
- *   console.log('Navigating to view', viewId)
- * })
- * ```
- */
-export function useOnDiagramEvent<T extends DiagramEmittedEvents['type']>(
-  event: T,
-  callback: (event: PickEmittedEvent<T>) => void,
-): void {
-  const actorRef = useDiagramActorRef()
-  const callbackRef = useRef(callback)
-  callbackRef.current = callback
-
-  useEffect(() => {
-    const subscription = actorRef.on(event, (event) => {
-      callbackRef.current(event as DiagramEmittedEvents & { type: T })
-    })
-    return () => {
-      subscription.unsubscribe()
-    }
-  }, [actorRef])
-}

package/src/hooks/useId.ts

@@ -1,5 +0,0 @@
-import { useId as useMantineId } from '@mantine/hooks'
-
-export function useId() {
-  return useMantineId().replace('mantine-', 'likec4-')
-}

package/src/hooks/useMantinePortalProps.ts

@@ -1,17 +0,0 @@
-import { useMemo } from 'react'
-
-import { useRootContainer } from '../context'
-
-export function useMantinePortalProps():
-  | {
-    portalProps: { target: HTMLDivElement }
-    withinPortal: true
-  }
-  | {
-    withinPortal: false
-    portalProps?: never
-  }
-{
-  const target = useRootContainer()
-  return useMemo(() => target ? { portalProps: { target }, withinPortal: true } : { withinPortal: false }, [target])
-}

package/src/hooks/useOverlaysActor.ts

@@ -1,11 +0,0 @@
-import type { OverlaysActorRef } from '../overlays/overlaysActor'
-import type { DiagramActorSnapshot } from '../state/types'
-import { useDiagramActorSnapshot } from './useDiagram'
-
-const select = (s: DiagramActorSnapshot) => {
-  return s.children.overlays
-}
-
-export function useOverlaysActorRef(): OverlaysActorRef {
-  return useDiagramActorSnapshot(select, Object.is)!
-}

package/src/hooks/useReducedGraphics.ts

@@ -1 +0,0 @@
-export { useIsPanning, useIsReducedGraphics } from '../context/ReduceGraphics'

package/src/hooks/useSearchActor.ts

@@ -1,11 +0,0 @@
-import type { SearchActorRef } from '../search/searchActor'
-import type { DiagramActorSnapshot } from '../state/types'
-import { useDiagramActorSnapshot } from './useDiagram'
-
-const select = (s: DiagramActorSnapshot) => {
-  return s.children.search ?? null
-}
-
-export function useSearchActorRef(): SearchActorRef | null {
-  return useDiagramActorSnapshot(select, Object.is)
-}

package/src/hooks/useSetState.ts

@@ -1,19 +0,0 @@
-import { shallowEqual } from 'fast-equals'
-import { useCallback, useState } from 'react'
-import type { NonEmptyObject } from 'type-fest'
-
-export function useSetState<T extends object>(initialState: T | (() => T)) {
-  const [state, _setState] = useState(initialState)
-  const setState = useCallback(
-    (statePartial: NonEmptyObject<Partial<T>> | ((current: T) => NonEmptyObject<Partial<T>>)) =>
-      _setState((current) => {
-        const next = {
-          ...current,
-          ...typeof statePartial === 'function' ? statePartial(current) : statePartial,
-        }
-        return shallowEqual(current, next) ? current : next
-      }),
-    [],
-  )
-  return [state, setState] as const
-}

package/src/hooks/useUpdateEffect.ts

@@ -1,46 +0,0 @@
-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 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 (element === d2[i]) {
-      continue
-    }
-    if (!shallowEqual(element, d2[i])) {
-      return false
-    }
-  }
-  return true
-}
-
-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 ?? depsShallowEqual,
-    effectHook,
-  )
-}

package/src/hooks/useXYFlow.ts

@@ -1,41 +0,0 @@
-import { useCallbackRef } from '@mantine/hooks'
-import {
-  type ReactFlowInstance,
-  type ReactFlowState,
-  useInternalNode,
-  useReactFlow,
-  useStore,
-  useStoreApi,
-} from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
-import type { Types } from '../likec4diagram/types'
-
-export const useXYFlow = useReactFlow<Types.Node, Types.Edge>
-export type XYFlowInstance = ReactFlowInstance<Types.Node, Types.Edge>
-
-export type XYStoreState = ReactFlowState<Types.Node, Types.Edge>
-
-export function useXYStore<StateSlice = unknown>(
-  selector: (state: XYStoreState) => StateSlice,
-  equalityFn?: (a: NoInfer<StateSlice>, b: NoInfer<StateSlice>) => boolean,
-): StateSlice {
-  return useStore(
-    useCallbackRef(selector as any),
-    equalityFn ?? shallowEqual,
-  )
-}
-
-export const useXYStoreApi = useStoreApi<Types.Node, Types.Edge>
-export type XYStoreApi = ReturnType<typeof useXYStoreApi>
-
-export const useXYInternalNode = useInternalNode<Types.Node>
-
-const selectCurrentZoom = (state: ReactFlowState) => Math.round(state.transform[2] * 100) / 100
-export function useCurrentZoom(): number {
-  return useStore(selectCurrentZoom)
-}
-
-const selectZoom = (state: ReactFlowState) => state.transform[2] < 0.2
-export function useIsZoomTooSmall(): boolean {
-  return useStore(selectZoom)
-}

package/src/index.ts

@@ -1,50 +0,0 @@
-export type { ControlsCustomLayout, ControlsCustomLayoutProps } from './context/ControlsCustomLayout'
-export { FramerMotionConfig } from './context/FramerMotionConfig'
-export { IconRendererProvider } from './context/IconRenderer'
-
-export {
-  LikeC4Diagram,
-  type LikeC4DiagramProps,
-} from './LikeC4Diagram'
-
-export {
-  Overlay,
-  type OverlayProps,
-} from './overlays/overlay/Overlay'
-
-export {
-  LikeC4ModelProvider,
-  type LikeC4ModelProviderProps,
-} from './LikeC4ModelProvider'
-
-export {
-  LikeC4ProjectsProvider,
-  type LikeC4ProjectsProviderProps,
-} from './LikeC4ProjectsProvider'
-
-export * from './custom/hooks'
-
-export type {
-  ChangeEvent,
-  CustomNodes,
-  DiagramNodeWithNavigate,
-  ElementIconRenderer,
-  ElementIconRendererProps,
-  LikeC4ColorScheme,
-  LikeC4DiagramEventHandlers,
-  LikeC4DiagramProperties,
-  OnCanvasClick,
-  OnChange,
-  OnEdgeClick,
-  OnNavigateTo,
-  OnNodeClick,
-  OpenSourceParams,
-  PaddingUnit,
-  PaddingWithUnit,
-  WhereOperator,
-} from './LikeC4Diagram.props'
-
-export {
-  StaticLikeC4Diagram,
-  type StaticLikeC4DiagramProps,
-} from './StaticLikeC4Diagram'

package/src/likec4diagram/DiagramUI.tsx

@@ -1,46 +0,0 @@
-import { memo } from 'react'
-import { useEnabledFeatures } from '../context'
-import { useOverlaysActorRef } from '../hooks/useOverlaysActor'
-import { useSearchActorRef } from '../hooks/useSearchActor'
-import { EnsureCurrentViewModel } from '../likec4model/LikeC4ModelContext'
-import { NavigationPanel } from '../navigationpanel'
-import { Overlays } from '../overlays/Overlays'
-import { Search } from '../search/Search'
-import { RelationshipPopover } from './relationship-popover/RelationshipPopover'
-import { Controls, DiagramTitlePanel, DynamicViewWalkthrough, NotationPanel } from './ui'
-
-export const DiagramUI = memo(() => {
-  const {
-    enableControls,
-    enableViewTitle,
-    enableNotations,
-    enableDynamicViewWalkthrough,
-    enableSearch,
-    enableRelationshipDetails,
-  } = useEnabledFeatures()
-  const overlaysActorRef = useOverlaysActorRef()
-  const searchActorRef = useSearchActorRef()
-
-  return (
-    <>
-      {enableControls === 'next'
-        ? (
-          <EnsureCurrentViewModel>
-            <NavigationPanel />
-          </EnsureCurrentViewModel>
-        )
-        : <Controls />}
-      {overlaysActorRef && <Overlays overlaysActorRef={overlaysActorRef} />}
-      {enableNotations && <NotationPanel />}
-      {enableControls === true && (
-        <>
-          {enableViewTitle && <DiagramTitlePanel />}
-          {enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
-        </>
-      )}
-      {enableSearch && searchActorRef && <Search searchActorRef={searchActorRef} />}
-      {enableRelationshipDetails && <RelationshipPopover />}
-    </>
-  )
-})
-DiagramUI.displayName = 'DiagramUI'