@likec4/diagram 1.41.0 → 1.42.1

package/src/overlays/relationship-details/compute.ts

@@ -1,177 +0,0 @@
-import type { EdgeId, NonEmptyReadonlyArray } from '@likec4/core'
-import { treeFromElements } from '@likec4/core/compute-view/relationships'
-import {
-  type AnyAux,
-  type ElementModel,
-  type LikeC4ViewModel,
-  type RelationshipModel,
-  modelConnection,
-} from '@likec4/core/model'
-import { invariant, isAncestor, sortParentsFirst } from '@likec4/core/utils'
-import { hasAtLeast } from 'remeda'
-
-export interface RelationshipDetailsViewData {
-  sources: ReadonlySet<ElementModel>
-  relationships: ReadonlySet<RelationshipModel>
-  targets: ReadonlySet<ElementModel>
-}
-
-const finalize = <M extends AnyAux>(
-  elements: Set<ElementModel<M>>,
-  explicits: Set<ElementModel<M>>,
-): Set<ElementModel<M>> => {
-  if (elements.size > 2 && explicits.size !== elements.size) {
-    return new Set(sortParentsFirst([
-      ...treeFromElements(elements).flatten(),
-      ...explicits,
-    ]))
-  }
-  if (elements.size > 1) {
-    return new Set(sortParentsFirst([...elements]))
-  }
-  return elements
-}
-
-export function computeEdgeDetailsViewData(
-  edges: NonEmptyReadonlyArray<EdgeId>,
-  view: LikeC4ViewModel<AnyAux>,
-): RelationshipDetailsViewData {
-  const sources = new Set<ElementModel>()
-  const relationships = new Set<RelationshipModel>()
-  const targets = new Set<ElementModel>()
-
-  const explicit = {
-    sources: new Set<ElementModel>(),
-    targets: new Set<ElementModel>(),
-  }
-
-  const addExplicit = (el: ElementModel, type: 'source' | 'target') => {
-    if (type === 'source') {
-      sources.add(el)
-      explicit.sources.add(el)
-    } else {
-      targets.add(el)
-      explicit.targets.add(el)
-    }
-  }
-
-  for (const edgeId of edges) {
-    const edge = view.findEdge(edgeId)
-    const _relationships = edge ? [...edge.relationships('model')] : []
-    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement()) {
-      continue
-    }
-    const source = edge.source.element
-    const target = edge.target.element
-    addExplicit(source, 'source')
-    addExplicit(target, 'target')
-
-    for (const relationship of _relationships) {
-      relationships.add(relationship)
-
-      if (relationship.source !== source) {
-        addExplicit(relationship.source, 'source')
-        for (const parent of relationship.source.ancestors()) {
-          if (parent === source) {
-            break
-          }
-          sources.add(parent)
-        }
-      }
-
-      if (relationship.target !== target) {
-        addExplicit(relationship.target, 'target')
-        for (const parent of relationship.target.ancestors()) {
-          if (parent === target) {
-            break
-          }
-          targets.add(parent)
-        }
-      }
-    }
-  }
-
-  return {
-    sources: finalize(sources, explicit.sources),
-    targets: finalize(targets, explicit.targets),
-    relationships,
-  }
-}
-
-export function computeRelationshipDetailsViewData({
-  // relationships: _relationships,
-  source,
-  target,
-}: {
-  source: ElementModel
-  target: ElementModel
-  // relationships: NonEmptyReadonlyArray<RelationId>
-}): RelationshipDetailsViewData {
-  const sources = new Set<ElementModel>()
-  const relationships = new Set<RelationshipModel>()
-  const targets = new Set<ElementModel>()
-
-  const explicit = {
-    sources: new Set<ElementModel>(),
-    targets: new Set<ElementModel>(),
-  }
-
-  const addExplicit = (el: ElementModel, type: 'source' | 'target') => {
-    if (type === 'source') {
-      sources.add(el)
-      explicit.sources.add(el)
-    } else {
-      targets.add(el)
-      explicit.targets.add(el)
-    }
-  }
-
-  if (source) {
-    addExplicit(source, 'source')
-  }
-  if (target) {
-    addExplicit(target, 'target')
-  }
-  const [connection] = modelConnection.findConnection(source, target, 'directed')
-  if (!connection) {
-    return {
-      sources,
-      targets,
-      relationships,
-    }
-  }
-
-  for (const relationship of connection.relations) {
-    const relationSource = relationship.source
-    const relationTarget = relationship.target
-    addExplicit(relationSource, 'source')
-    addExplicit(relationTarget, 'target')
-    relationships.add(relationship)
-
-    if (source !== relationSource) {
-      invariant(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`)
-      for (const parent of relationSource.ancestors()) {
-        if (parent === source) {
-          break
-        }
-        sources.add(parent)
-      }
-    }
-
-    if (target !== relationTarget) {
-      invariant(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`)
-      for (const parent of relationTarget.ancestors()) {
-        if (parent === target) {
-          break
-        }
-        targets.add(parent)
-      }
-    }
-  }
-
-  return {
-    sources: finalize(sources, explicit.sources),
-    targets: finalize(targets, explicit.targets),
-    relationships,
-  }
-}

package/src/overlays/relationship-details/custom/ElementActions.tsx

@@ -1,53 +0,0 @@
-import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
-import { ElementActionButtons } from '../../../base/primitives'
-import type { NodeProps } from '../../../base/types'
-import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import { useCurrentViewId } from '../../../hooks/useCurrentViewId'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { RelationshipDetailsTypes as Types } from '../_types'
-
-type ElementActionsProps = NodeProps<Types.ElementNodeData>
-export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo, enableVscode } = useEnabledFeatures()
-  const diagram = useDiagram()
-  const currentViewId = useCurrentViewId()
-  const buttons = [] as ElementActionButtons.Item[]
-
-  const { navigateTo, fqn } = props.data
-  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
-    buttons.push({
-      key: 'navigate',
-      icon: <IconZoomScan />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.navigateTo(navigateTo)
-      },
-    })
-  }
-  if (fqn) {
-    buttons.push({
-      key: 'relationships',
-      icon: <IconTransform />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.openRelationshipsBrowser(fqn)
-      },
-    })
-  }
-  if (fqn && enableVscode) {
-    buttons.push({
-      key: 'goToSource',
-      icon: <IconFileSymlink />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.openSource({ element: fqn })
-      },
-    })
-  }
-  return (
-    <ElementActionButtons
-      buttons={buttons}
-      {...props}
-    />
-  )
-}

package/src/overlays/relationship-details/custom/edgeTypes.tsx

@@ -1,49 +0,0 @@
-import { getBezierPath } from '@xyflow/system'
-import {
-  customEdge,
-  EdgeActionButton,
-  EdgeContainer,
-  EdgeLabel,
-  EdgeLabelContainer,
-  EdgePath,
-} from '../../../base/primitives'
-import { useEnabledFeatures } from '../../../context'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { RelationshipDetailsTypes } from '../_types'
-
-export const RelationshipEdge = customEdge<RelationshipDetailsTypes.EdgeData>((props) => {
-  const { enableNavigateTo } = useEnabledFeatures()
-  const {
-    sourceX,
-    targetY,
-    data: { navigateTo },
-  } = props
-  const [svgPath, labelX, labelY] = getBezierPath(props)
-  const diagram = useDiagram()
-  return (
-    <EdgeContainer {...props}>
-      <EdgePath edgeProps={props} svgPath={svgPath} />
-      <EdgeLabelContainer
-        edgeProps={props}
-        labelPosition={{
-          x: labelX,
-          y: labelY,
-          translate: 'translate(-50%, 0)',
-        }}
-        style={{
-          maxWidth: Math.abs(props.targetX - props.sourceX - 100),
-        }}>
-        <EdgeLabel edgeProps={props}>
-          {enableNavigateTo && navigateTo && (
-            <EdgeActionButton
-              {...props}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.navigateTo(navigateTo)
-              }} />
-          )}
-        </EdgeLabel>
-      </EdgeLabelContainer>
-    </EdgeContainer>
-  )
-})

package/src/overlays/relationship-details/custom/index.ts

@@ -1,2 +0,0 @@
-export { RelationshipEdge } from './edgeTypes'
-export { CompoundNode, ElementNode } from './nodeTypes'

package/src/overlays/relationship-details/custom/nodeTypes.tsx

@@ -1,126 +0,0 @@
-import {
-  CompoundNodeContainer,
-  CompoundTitle,
-  customNode,
-  ElementDetailsButton,
-  ElementNodeContainer,
-  ElementShape,
-  ElementTags,
-  ElementTitle,
-} from '../../../base/primitives'
-import { ElementActions } from './ElementActions'
-
-import { Handle } from '@xyflow/react'
-import { Position } from '@xyflow/system'
-import type { NodeProps } from '../../../base'
-import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { RelationshipDetailsTypes } from '../_types'
-
-const ElementDetailsButtonWithHandler = (props: NodeProps<RelationshipDetailsTypes.NodeData>) => {
-  const diagram = useDiagram()
-
-  return (
-    <ElementDetailsButton
-      {...props}
-      onClick={e => {
-        e.stopPropagation()
-        diagram.openElementDetails(props.data.fqn)
-      }}
-    />
-  )
-}
-
-export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
-  const { enableElementTags } = useEnabledFeatures()
-  return (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} />
-      <ElementTitle {...props} />
-      {enableElementTags && <ElementTags {...props} />}
-      <ElementDetailsButtonWithHandler {...props} />
-      <ElementActions {...props} />
-      <ElementPorts {...props} />
-    </ElementNodeContainer>
-  )
-})
-
-export const CompoundNode = customNode<RelationshipDetailsTypes.CompoundNodeData>((props) => {
-  return (
-    <CompoundNodeContainer nodeProps={props}>
-      <ElementDetailsButtonWithHandler {...props} />
-      <CompoundTitle {...props} />
-      <CompoundPorts {...props} />
-    </CompoundNodeContainer>
-  )
-})
-
-type ElementPortsProps = NodeProps<
-  Pick<
-    RelationshipDetailsTypes.ElementNodeData,
-    | 'ports'
-    | 'height'
-  >
->
-
-export const ElementPorts = ({ data: { ports, height: h } }: ElementPortsProps) => {
-  return (
-    <>
-      {ports.in.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="target"
-          position={Position.Left}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`,
-          }} />
-      ))}
-      {ports.out.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="source"
-          position={Position.Right}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`,
-          }} />
-      ))}
-    </>
-  )
-}
-type CompoundPortsProps = NodeProps<
-  Pick<
-    RelationshipDetailsTypes.CompoundNodeData,
-    'ports'
-  >
->
-
-export const CompoundPorts = ({ data }: CompoundPortsProps) => (
-  <>
-    {data.ports.in.map((id, i) => (
-      <Handle
-        key={id}
-        id={id}
-        type="target"
-        position={Position.Left}
-        style={{
-          visibility: 'hidden',
-          top: `${20 * (i + 1)}px`,
-        }} />
-    ))}
-    {data.ports.out.map((id, i) => (
-      <Handle
-        key={id}
-        id={id}
-        type="source"
-        position={Position.Right}
-        style={{
-          visibility: 'hidden',
-          top: `${20 * (i + 1)}px`,
-        }} />
-    ))}
-  </>
-)

package/src/overlays/relationship-details/custom/styles.css.ts

@@ -1,13 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const emptyNode = css({
-  w: '100%',
-  h: '100%',
-  borderWidth: '3px',
-  borderStyle: 'dashed',
-  borderColor: 'mantine.colors.defaultBorder',
-  rounded: 'md',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-})

package/src/overlays/relationship-details/hooks.ts

@@ -1,51 +0,0 @@
-import { type EdgeId, type Fqn, nonNullable } from '@likec4/core'
-import { useCallbackRef } from '@mantine/hooks'
-import { useSelector } from '@xstate/react'
-import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo } from 'react'
-import type { OverlaysActorRef } from '../overlaysActor'
-import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
-
-export const RelationshipDetailsActorContext = createContext<RelationshipDetailsActorRef | null>(null)
-
-export function useRelationshipDetailsActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), 'No RelationshipDetailsActorContext')
-}
-
-export function useRelationshipDetailsState<T = unknown>(
-  selector: (state: RelationshipDetailsSnapshot) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-) {
-  const select = useCallbackRef(selector)
-  const actor = useRelationshipDetailsActor()
-  return useSelector(actor, select, compare)
-}
-
-export function useRelationshipDetails() {
-  const actor = useRelationshipDetailsActor()
-  return useMemo(() => ({
-    actor,
-    get rootElementId(): string {
-      return `relationship-details-${actor.sessionId.replaceAll(':', '_')}`
-    },
-    getState: () => actor.getSnapshot().context,
-    send: actor.send,
-    navigateTo: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => {
-      if (params.length === 1) {
-        actor.send({ type: 'navigate.to', params: { edgeId: params[0] } })
-      } else {
-        actor.send({ type: 'navigate.to', params: { source: params[0], target: params[1] } })
-      }
-    },
-    fitDiagram: () => {
-      actor.send({ type: 'fitDiagram' })
-    },
-    close: () => {
-      if (actor._parent) {
-        ;(actor._parent as OverlaysActorRef)?.send({ type: 'close', actorId: actor.id })
-      } else {
-        actor.send({ type: 'close' })
-      }
-    },
-  }), [actor])
-}

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -1,173 +0,0 @@
-import {
-  type Fqn,
-  nonNullable,
-  Queue,
-  RichText,
-} from '@likec4/core'
-import { hasAtLeast } from 'remeda'
-import { ZIndexes } from '../../base/const'
-import type { RelationshipDetailsTypes } from './_types'
-import { type LayoutResult } from './layout'
-
-// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
-export function layoutResultToXYFlow(
-  layout: LayoutResult,
-): {
-  xynodes: RelationshipDetailsTypes.Node[]
-  xyedges: RelationshipDetailsTypes.Edge[]
-  bounds: { x: number; y: number; width: number; height: number }
-} {
-  const xynodes = [] as RelationshipDetailsTypes.Node[],
-    xyedges = [] as RelationshipDetailsTypes.Edge[],
-    nodeLookup = new Map<Fqn, LayoutResult.Node>()
-
-  type TraverseItem = {
-    node: LayoutResult.Node
-    parent: LayoutResult.Node | null
-  }
-  const queue = Queue.from(layout.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node)
-      if (!node.parent) {
-        acc.push({ node, parent: null })
-      }
-      return acc
-    },
-    [] as TraverseItem[],
-  ))
-  const ns = ''
-  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
-
-  let next: TraverseItem | undefined
-  while ((next = queue.dequeue())) {
-    const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1)
-    if (isCompound) {
-      for (const child of node.children) {
-        queue.enqueue({ node: nodeById(child), parent: node })
-      }
-    }
-
-    const position = {
-      x: node.position[0],
-      y: node.position[1],
-    }
-    if (parent) {
-      position.x -= parent.position[0]
-      position.y -= parent.position[1]
-    }
-
-    const id = ns + node.id
-
-    const base = {
-      id,
-      draggable: false,
-      selectable: true,
-      focusable: true,
-      deletable: false,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      style: {
-        width: node.width,
-        height: node.height,
-      },
-      initialWidth: node.width,
-      initialHeight: node.height,
-      ...(parent && {
-        parentId: ns + parent.id,
-      }),
-    } satisfies Omit<RelationshipDetailsTypes.Node, 'data' | 'type'>
-
-    const fqn = node.modelRef
-    const navigateTo = { navigateTo: node.navigateTo ?? null }
-
-    switch (true) {
-      case isCompound: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'compound',
-            data: {
-              column: node.column,
-              title: node.title,
-              color: node.color,
-              style: node.style,
-              depth: node.depth ?? 0,
-              icon: node.icon ?? 'none',
-              ports: node.ports,
-              fqn,
-              ...navigateTo,
-            },
-          },
-        )
-        break
-      }
-      default: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'element' as const,
-            data: {
-              column: node.column,
-              fqn,
-              title: node.title,
-              technology: node.technology,
-              description: RichText.from(node.description),
-              height: node.height,
-              width: node.width,
-              color: node.color,
-              shape: node.shape,
-              icon: node.icon ?? 'none',
-              ports: node.ports,
-              style: node.style,
-              tags: node.tags,
-              ...navigateTo,
-            },
-          },
-        )
-      }
-    }
-  }
-  for (
-    const {
-      source,
-      target,
-      relationId,
-      label,
-      technology,
-      description,
-      navigateTo = null,
-      color = 'gray',
-      line = 'dashed',
-      ...edge
-    } of layout.edges
-  ) {
-    const id = ns + edge.id
-    xyedges.push({
-      id,
-      type: 'relationship',
-      source: ns + source,
-      target: ns + target,
-      sourceHandle: edge.sourceHandle,
-      targetHandle: edge.targetHandle,
-      // selectable: selectable,
-      // hidden: !visiblePredicate(edge),
-      deletable: false,
-      data: {
-        relationId,
-        label,
-        color,
-        navigateTo,
-        line,
-        description: RichText.from(description),
-        ...(technology && { technology }),
-      },
-    })
-  }
-
-  return {
-    xynodes,
-    xyedges,
-    bounds: layout.bounds,
-  }
-}