@likec4/diagram 1.19.1 → 1.20.0

package/src/base/primitives/element/ElementTitle.tsx

@@ -0,0 +1,76 @@
+import type { DiagramNode } from '@likec4/core'
+import { Box, Text } from '@mantine/core'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import clsx from 'clsx'
+import { isNumber, isTruthy } from 'remeda'
+import { IconRenderer } from '../../../context/IconRenderer'
+import type { NodeProps } from '../../types'
+import * as css from './ElementTitle.css'
+
+type Data =
+  & Pick<
+    DiagramNode,
+    | 'title'
+    | 'technology'
+    | 'description'
+    | 'color'
+  >
+  & {
+    icon?: string | null
+  }
+
+type ElementTitleProps = NodeProps<Data> & {
+  iconSize?: number
+}
+
+export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
+  const elementIcon = IconRenderer({
+    element: {
+      id,
+      title: data.title,
+      icon: data.icon,
+    },
+    className: css.elementIcon,
+  })
+  return (
+    <Box
+      className={clsx(
+        css.elementDataContainer,
+        isTruthy(elementIcon) && css.hasIcon,
+        'likec4-element',
+      )}
+      style={{
+        ...isNumber(iconSize) && assignInlineVars({
+          [css.iconSize]: `${iconSize}px`,
+        }),
+      }}
+    >
+      {elementIcon}
+      <Box className={clsx(css.elementTextData, 'likec4-element-main-props')}>
+        <Text
+          component="h3"
+          className={clsx(css.title, 'likec4-element-title')}
+          lineClamp={3}>
+          {data.title}
+        </Text>
+
+        {data.technology && (
+          <Text
+            component="div"
+            className={clsx(css.technology, 'likec4-element-technology')}>
+            {data.technology}
+          </Text>
+        )}
+
+        {data.description && (
+          <Text
+            component="div"
+            className={clsx(css.description, 'likec4-element-description')}
+            lineClamp={5}>
+            {data.description}
+          </Text>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/base/primitives/index.ts

@@ -0,0 +1,17 @@
+export { CompoundActionButton } from './compound/CompoundActionButton'
+export { CompoundDetailsButton } from './compound/CompoundDetailsButton'
+export { CompoundNodeContainer } from './compound/CompoundNodeContainer'
+export { CompoundTitle } from './compound/CompoundTitle'
+export { customEdge } from './customEdge'
+export { customNode } from './customNode'
+export { EdgeActionButton } from './edge/EdgeActionButton'
+export { EdgeContainer } from './edge/EdgeContainer'
+export { EdgeLabel } from './edge/EdgeLabel'
+export { arrowTypeToMarker, EdgeMarkers, type EdgeMarkerType } from './edge/EdgeMarkers'
+export { EdgePath } from './edge/EdgePath'
+export { ElementActionButtons } from './element/ElementActionButtons'
+export { ElementDetailsButton } from './element/ElementDetailsButton'
+export { ElementNodeContainer } from './element/ElementNodeContainer'
+export { ElementShape } from './element/ElementShape'
+export { ElementTitle } from './element/ElementTitle'
+export { DefaultHandles } from './NodeHandles'

package/src/base/types.ts

@@ -0,0 +1,169 @@
+import type {
+  Edge as RFEdge,
+  EdgeProps as ReactFlowEdgeProps,
+  Node as RFNode,
+  NodeProps as ReactFlowNodeProps,
+} from '@xyflow/react'
+import { hasSubObject } from 'remeda'
+import type { OptionalKeysOf, SetRequired, Simplify } from 'type-fest'
+
+/**
+
+To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
+
+@example
+```
+interface User {
+	name: string;
+	surname?: string;
+	luckyNumber?: number;
+}
+
+type NonOptionalUser = NonOptional<User>
+
+// NonOptionalUser = {
+//   name: string
+//   surname: string | undefined
+//   luckyNumber: number | undefined
+// }
+```
+ */
+export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<
+  & {
+    [P in Exclude<keyof T, Keys>]: T[P]
+  }
+  & {
+    [P in Keys]-?: T[P] | undefined
+  }
+>
+
+/**
+ * ReactFlow Custom Node properties with BaseNodeData at least
+ */
+export type NodeProps<T extends Record<string, unknown> = {}> = ReactFlowNodeProps<
+  RFNode<Base.NodeData & T, any>
+>
+
+/**
+ * ReactFlow Custom Edge properties with BaseEdgeData at least
+ */
+export type EdgeProps<T extends Record<string, unknown> = {}> = SetRequired<
+  ReactFlowEdgeProps<
+    RFEdge<Base.EdgeData & T, any>
+  >,
+  'data'
+>
+
+export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<
+  RFNode<Data, NodeType>,
+  'type' | 'initialWidth' | 'initialHeight'
+>
+
+export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<
+  RFEdge<Data, EdgeType>,
+  'type' | 'data'
+>
+
+export namespace Base {
+  // 'immediate' means that the node is dimmed without delay
+  export type Dimmed = 'immediate' | boolean
+
+  export type NodeData<Data extends Record<string, unknown> = {}> = Simplify<
+    Data & {
+      /**
+       * Whether the cursor is hovering over the node
+       */
+      hovered?: boolean
+      /**
+       * Whether the node is dimmed
+       * 'immediate' means that the node is dimmed without delay
+       */
+      dimmed?: Dimmed
+    }
+  >
+
+  export type Node = RFNode<NodeData>
+
+  export type NodeProps = ReactFlowNodeProps<RFNode<Base.NodeData, any>>
+
+  export type EdgeData<Data extends Record<string, unknown> = {}> = Simplify<
+    Data & {
+      /**
+       * Whether the cursor is hovering over the edge
+       */
+      hovered?: boolean
+      /**
+       * Whether the edge is active (animated and highlighted)
+       */
+      active?: boolean
+      /**
+       * Whether the edge is dimmed
+       * 'immediate' means that the edge is dimmed without delay
+       */
+      dimmed?: Dimmed
+    }
+  >
+
+  // export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
+  export type Edge = SetRequired<RFEdge<EdgeData>, 'data'>
+
+  type WithDimmed = { data: { dimmed?: Dimmed } }
+  type WithHovered = { data: { hovered?: boolean } }
+
+  const _setDimmed = <T extends WithDimmed>(v: T, dimmed: Dimmed): T =>
+    v.data.dimmed === dimmed ? v : ({
+      ...v,
+      data: {
+        ...v.data,
+        dimmed,
+      },
+    })
+
+  export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T
+  export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T
+  export function setDimmed<T extends WithDimmed>(arg1: T | Dimmed, arg2?: Dimmed) {
+    if (arg2 !== undefined) {
+      return _setDimmed(arg1 as T, arg2)
+    }
+    return (v: T) => _setDimmed(v, arg1 as Dimmed)
+  }
+
+  const _setHovered = <T extends WithHovered>(v: T, hovered: boolean): T =>
+    v.data.hovered === hovered ? v : ({
+      ...v,
+      data: {
+        ...v.data,
+        hovered,
+      },
+    })
+  export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T
+  export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T
+  export function setHovered<T extends WithHovered>(arg1: T | boolean, arg2?: boolean) {
+    if (arg2 !== undefined) {
+      return _setHovered(arg1 as T, arg2)
+    }
+    return (v: T) => _setHovered(v, arg1 as boolean)
+  }
+
+  type WithData<D> = { data: D }
+  function _setData<D, E extends WithData<D>>(value: E, state: Partial<NoInfer<D>>): E {
+    if (hasSubObject(value.data as any, state as any)) {
+      return value
+    }
+    return {
+      ...value,
+      data: {
+        ...value.data,
+        ...state,
+      },
+    }
+  }
+  export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E
+  export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E
+  export function setData<E extends WithData<any>>(arg1: E | Partial<E['data']>, arg2?: any) {
+    if (arg2 !== undefined) {
+      return _setData(arg1 as E, arg2)
+    }
+    return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
+  }
+}

package/src/base/updateEdges.ts

@@ -0,0 +1,40 @@
+import { deepEqual as eq } from 'fast-equals'
+import { isDefined } from 'remeda'
+import type { Base } from './types'
+
+function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
+  return update.map((next) => {
+    const existing = current.find(n => n.id === next.id)
+    if (existing && existing.type === next.type) {
+      if (
+        eq(existing.hidden ?? false, next.hidden ?? false)
+        && eq(existing.source, next.source)
+        && eq(existing.sourceHandle ?? null, next.sourceHandle ?? null)
+        && eq(existing.target, next.target)
+        && eq(existing.targetHandle ?? null, next.targetHandle ?? null)
+        && eq(existing.data, next.data)
+      ) {
+        return existing
+      }
+      return {
+        ...existing,
+        ...next,
+        data: {
+          ...existing.data,
+          ...next.data,
+        },
+      }
+    }
+    return next
+  })
+}
+
+export function updateEdges<E extends Base.Edge>(current: E[], update: E[]): E[]
+export function updateEdges<E extends Base.Edge>(update: E[]): (current: E[]) => E[]
+export function updateEdges<E extends Base.Edge>(current: E[], update?: E[]) {
+  if (isDefined(update)) {
+    return _update(current, update)
+  }
+  update = current
+  return (current: E[]) => _update(current, update)
+}

package/src/base/updateNodes.ts

@@ -0,0 +1,46 @@
+import { getNodeDimensions } from '@xyflow/system'
+import { deepEqual as eq } from 'fast-equals'
+import { isDefined, omit } from 'remeda'
+import type { Base } from './types'
+
+function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
+  return updated.map((update) => {
+    const existing = current.find(n => n.id === update.id)
+    if (existing) {
+      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing)
+      if (
+        eq(existing.type, update.type)
+        && eq(existingWidth, update.initialWidth)
+        && eq(existingHeight, update.initialHeight)
+        && eq(existing.hidden ?? false, update.hidden ?? false)
+        && eq(existing.position, update.position)
+        && eq(existing.data, update.data)
+        && eq(existing.parentId ?? null, update.parentId ?? null)
+      ) {
+        return existing
+      }
+      return {
+        ...omit(existing, ['measured', 'parentId']),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: {
+          ...existing.data,
+          ...update.data,
+        },
+      } as N
+    }
+    return update
+  })
+}
+
+export function updateNodes<N extends Base.Node>(current: N[], update: N[]): N[]
+export function updateNodes<N extends Base.Node>(update: N[]): (current: N[]) => N[]
+export function updateNodes<N extends Base.Node>(current: N[], update?: N[]) {
+  if (isDefined(update)) {
+    return _update(current, update)
+  }
+  update = current
+  return (current: N[]) => _update(current, update)
+}

package/src/base/xyflowMachine.ts

@@ -0,0 +1,75 @@
+import type { BBox } from '@likec4/core'
+import { type ReactFlowInstance, type useStoreApi, type Viewport } from '@xyflow/react'
+import { type ActorRefFrom, setup } from 'xstate'
+import { MaxZoom, MinZoom } from './const'
+import type { Base } from './types'
+
+export interface TodoItem {
+  id: string
+  title: string
+  completed: boolean
+}
+
+export type TodosFilter = 'all' | 'active' | 'completed'
+
+type StoreApi = ReturnType<typeof useStoreApi<Base.Node, Base.Edge>>
+
+export const xyflowMachine = setup({
+  types: {
+    input: {} as {
+      xyflow: ReactFlowInstance<Base.Node, Base.Edge>
+      fitViewPadding?: number
+    },
+    context: {} as {
+      xyflow: ReactFlowInstance<Base.Node, Base.Edge>
+      fitViewPadding: number
+    },
+    events: {} as
+      | { type: 'fitBounds'; bounds: BBox; duration?: number }
+      | { type: 'fitView'; duration?: number }
+      | { type: 'setCenter'; center: { x: number; y: number }; duration?: number }
+      | { type: 'setViewport'; viewport: Viewport; duration?: number },
+  },
+}).createMachine({
+  id: 'xyflow',
+  context: ({ input }) => ({
+    fitViewPadding: 0,
+    ...input,
+  }),
+  on: {
+    'fitBounds': {
+      actions: ({ context, event }) => {
+        const { bounds, duration = 0 } = event
+        context.xyflow.fitBounds(bounds, {
+          padding: context.fitViewPadding,
+          ...duration > 0 && { duration },
+        })
+      },
+    },
+    'fitView': {
+      actions: ({ context, event }) => {
+        const { duration = 0 } = event
+        context.xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom: MaxZoom,
+          padding: context.fitViewPadding,
+          ...duration > 0 && { duration },
+        })
+      },
+    },
+    'setCenter': {
+      actions: ({ context, event }) => {
+        const { center, duration = 0 } = event
+        context.xyflow.setCenter(center.x, center.y, duration > 0 ? { duration } : undefined)
+      },
+    },
+    'setViewport': {
+      actions: ({ context, event }) => {
+        const { viewport, duration = 0 } = event
+        context.xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined)
+      },
+    },
+  },
+})
+
+export type XYFlowActorRef = ActorRefFrom<typeof xyflowMachine>

package/src/context/DiagramEventHandlers.tsx

@@ -0,0 +1,53 @@
+import { useSyncedRef } from '@react-hookz/web'
+import { type PropsWithChildren, createContext, useContext, useMemo } from 'react'
+import { isFunction, mapToObj } from 'remeda'
+import type { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
+
+type RequiredOrNull<T> = {
+  [P in keyof T]-?: NonNullable<T[P]> | null
+}
+
+const HandlerNames = [
+  'onBurgerMenuClick',
+  'onNavigateTo',
+  'onOpenSource',
+  'onCanvasClick',
+  'onCanvasContextMenu',
+  'onEdgeClick',
+  'onEdgeContextMenu',
+  'onNodeClick',
+  'onNodeContextMenu',
+  'onChange',
+  'onCanvasDblClick',
+] as const
+
+const DiagramEventHandlersContext = createContext<RequiredOrNull<LikeC4DiagramEventHandlers>>(
+  mapToObj(HandlerNames, (name) => [name, null]),
+)
+
+export function DiagramEventHandlers({
+  handlers,
+  children,
+}: PropsWithChildren<{ handlers: LikeC4DiagramEventHandlers }>) {
+  const handlersRef = useSyncedRef(handlers)
+
+  const deps = HandlerNames.map((name) => isFunction(handlers[name]))
+
+  return (
+    <DiagramEventHandlersContext.Provider
+      value={useMemo(() =>
+        mapToObj(HandlerNames, (name) => {
+          if (handlersRef.current[name]) {
+            // @ts-expect-error TODO: fix this
+            return [name, (...args: any[]) => handlersRef.current[name]?.(...args)]
+          }
+          return [name, null]
+        }), [handlersRef, ...deps])}>
+      {children}
+    </DiagramEventHandlersContext.Provider>
+  )
+}
+
+export function useDiagramEventHandlers() {
+  return useContext(DiagramEventHandlersContext)
+}

package/src/context/DiagramFeatures.tsx

@@ -0,0 +1,162 @@
+import type { ExclusiveUnion, NonEmptyArray } from '@likec4/core'
+import { useCustomCompareEffect } from '@react-hookz/web'
+import { type PropsWithChildren, createContext, useContext, useState } from 'react'
+import { map, mapToObj, pick } from 'remeda'
+import { depsShallowEqual } from '../hooks/useUpdateEffect'
+
+const FeatureNames = [
+  'Controls',
+  'ReadOnly',
+  'FocusMode',
+  'NavigateTo',
+  'ElementDetails',
+  'RelationshipDetails',
+  'RelationshipBrowser',
+  'Search',
+  'NavigationButtons',
+  'Notations',
+  'DynamicViewWalkthrough',
+  'EdgeEditing',
+  'ViewTitle',
+  'FitView',
+  /**
+   * LikeC4Model is available in context
+   */
+  'LikeC4Model',
+  /**
+   * Running in VSCode
+   */
+  'Vscode',
+] as const
+type FeatureName = typeof FeatureNames[number]
+export type EnabledFeatures = {
+  [P in `enable${FeatureName}`]: boolean
+}
+
+export const AllDisabled: EnabledFeatures = mapToObj(
+  FeatureNames,
+  (name) => [`enable${name}`, false] as const,
+)
+const DiagramFeaturesContext = createContext<EnabledFeatures>(AllDisabled)
+
+const validate = (features: EnabledFeatures) => {
+  let {
+    enableReadOnly,
+    enableLikeC4Model,
+    enableElementDetails,
+    enableRelationshipDetails,
+    enableRelationshipBrowser,
+    enableSearch,
+    ...rest
+  } = features
+  if (!enableLikeC4Model) {
+    if (enableElementDetails) {
+      console.warn('enableElementDetails is ignored because requires LikeC4Model')
+      enableElementDetails = false
+    }
+    if (enableRelationshipDetails) {
+      console.warn('enableRelationshipDetails is ignored because requires enableLikeC4Model')
+      enableRelationshipDetails = false
+    }
+    if (enableRelationshipBrowser) {
+      console.warn('enableRelationshipBrowser is ignored because requires LikeC4Model')
+      enableRelationshipBrowser = false
+    }
+    if (enableSearch) {
+      console.warn('enableSearch is ignored because requires LikeC4Model')
+      enableSearch = false
+    }
+  }
+  if (enableReadOnly) {
+    if (rest.enableEdgeEditing) {
+      console.warn('enableEdgeEditing is ignored because enabled ReadOnly')
+      rest.enableEdgeEditing = false
+    }
+  }
+
+  return {
+    ...rest,
+    enableReadOnly,
+    enableLikeC4Model,
+    enableElementDetails,
+    enableRelationshipDetails,
+    enableRelationshipBrowser,
+    enableSearch,
+  }
+}
+
+export function DiagramFeatures({
+  children,
+  features,
+  overrides,
+}: PropsWithChildren<
+  ExclusiveUnion<{
+    features: {
+      features: EnabledFeatures
+    }
+    overrides: {
+      overrides: Partial<EnabledFeatures>
+    }
+  }>
+>) {
+  const scope = useContext(DiagramFeaturesContext)
+  const [enabled, setFeatures] = useState(scope)
+
+  useCustomCompareEffect(
+    () => {
+      setFeatures(validate({
+        ...scope,
+        ...features,
+        ...overrides,
+      }))
+    },
+    [scope, features, overrides],
+    depsShallowEqual,
+  )
+
+  return (
+    <DiagramFeaturesContext.Provider value={enabled}>
+      {children}
+    </DiagramFeaturesContext.Provider>
+  )
+}
+
+DiagramFeatures.Overlays = ({ children }: PropsWithChildren) => {
+  return (
+    <DiagramFeatures
+      overrides={{
+        enableControls: false,
+        enableReadOnly: true,
+        enableEdgeEditing: false,
+      }}>
+      {children}
+    </DiagramFeatures>
+  )
+}
+
+export function useEnabledFeature<F extends NonEmptyArray<FeatureName>>(
+  ...names: F
+): { [P in `enable${F[number]}`]: boolean } {
+  return pick(useContext(DiagramFeaturesContext), map(names, (name) => `enable${name}` as const))
+}
+
+export function useEnabledFeatures(): EnabledFeatures {
+  return useContext(DiagramFeaturesContext)
+}
+
+export function IfEnabled({
+  feature,
+  children,
+  and = true,
+}: PropsWithChildren<{ feature: FeatureName; and?: boolean }>) {
+  const enabled = useEnabledFeature(feature)[`enable${feature}`] === true
+  return enabled && and ? <>{children}</> : null
+}
+
+export function IfNotEnabled({
+  feature,
+  children,
+}: PropsWithChildren<{ feature: FeatureName }>) {
+  const notEnabled = useEnabledFeature(feature)[`enable${feature}`] !== true
+  return notEnabled ? <>{children}</> : null
+}

package/src/{ui → context}/FramerMotionConfig.tsx

@@ -1,17 +1,13 @@
 import { useMantineStyleNonce } from '@mantine/core'
-import { useId } from '@mantine/hooks'
-import { domMax, LayoutGroup, LazyMotion, MotionConfig } from 'framer-motion'
+import { domMax, LazyMotion, MotionConfig } from 'framer-motion'
 import { type PropsWithChildren } from 'react'
 
 export const FramerMotionConfig = ({ children }: PropsWithChildren) => {
-  const layoutId = useId()
   const nonce = useMantineStyleNonce()?.()
   return (
     <LazyMotion features={domMax} strict>
       <MotionConfig reducedMotion="user" {...nonce && { nonce }}>
-        <LayoutGroup id={layoutId}>
-          {children}
-        </LayoutGroup>
+        {children}
       </MotionConfig>
     </LazyMotion>
   )