@likec4/diagram 1.19.2 → 1.20.0

package/src/overlays/relationships-browser/custom/ElementActions.tsx

@@ -0,0 +1,44 @@
+import { IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { ElementActionButtons } from '../../../base/primitives'
+import type { NodeProps } from '../../../base/types'
+import { useEnabledFeature } from '../../../context/DiagramFeatures'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { RelationshipsBrowserTypes as Types } from '../_types'
+import { useRelationshipsBrowser } from '../hooks'
+
+type ElementActionsProps = NodeProps<Types.ElementNodeData>
+export const ElementActions = (props: ElementActionsProps) => {
+  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const diagram = useDiagram()
+  const browser = useRelationshipsBrowser()
+
+  const buttons = [] as ElementActionButtons.Item[]
+
+  const { navigateTo, fqn } = props.data
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: 'navigate',
+      icon: <IconZoomScan />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.navigateTo(navigateTo)
+      },
+    })
+  }
+  if (fqn !== browser.getState().subject) {
+    buttons.push({
+      key: 'relationships',
+      icon: <IconTransform />,
+      onClick: (e) => {
+        e.stopPropagation()
+        browser.navigateTo(fqn)
+      },
+    })
+  }
+  return (
+    <ElementActionButtons
+      buttons={buttons}
+      {...props}
+    />
+  )
+}

package/src/overlays/relationships-browser/custom/EmptyNode.tsx

@@ -0,0 +1,18 @@
+import { Box, Text } from '@mantine/core'
+import type { NodeProps } from '../../../base'
+import type { RelationshipsBrowserTypes } from '../_types'
+import * as css from './styles.css'
+
+type EmptyNodeProps = NodeProps<Pick<RelationshipsBrowserTypes.EmptyNodeData, 'column'>>
+
+export function EmptyNode({
+  data: {
+    column,
+  },
+}: EmptyNodeProps) {
+  return (
+    <Box className={css.emptyNode}>
+      <Text c={'dimmed'} fz={'lg'} fw={500}>No {column === 'incomers' ? 'incoming' : 'outgoing'}</Text>
+    </Box>
+  )
+}

package/src/overlays/relationships-browser/custom/edgeTypes.tsx

@@ -0,0 +1,49 @@
+import { getBezierPath } from '@xyflow/system'
+import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
+import { useEnabledFeature } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { RelationshipsBrowserTypes } from '../_types'
+
+export const edgeTypes = {
+  relationships: customEdge<RelationshipsBrowserTypes.EdgeData>((props) => {
+    const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+    const {
+      sourceX,
+      targetY,
+      data: { navigateTo },
+    } = props
+    const [svgPath, labelX, labelY] = getBezierPath(props)
+    const diagram = useDiagram()
+    return (
+      <EdgeContainer {...props}>
+        <EdgePath {...props} svgPath={svgPath} />
+        <EdgeLabel
+          edgeProps={props}
+          labelPosition={{
+            x: labelX,
+            y: labelY,
+            translate: 'translate(-50%, 0)',
+          }}
+          style={{
+            maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250),
+          }}>
+          {enableNavigateTo && navigateTo && (
+            <EdgeActionButton
+              {...props}
+              onClick={e => {
+                e.stopPropagation()
+                diagram.navigateTo(navigateTo)
+              }} />
+          )}
+        </EdgeLabel>
+        {
+          /* <EdgeLabel {...props}>
+
+        </EdgeLabel> */
+        }
+      </EdgeContainer>
+    )
+  }),
+} satisfies {
+  [key in RelationshipsBrowserTypes.Edge['type']]: any
+}

package/src/overlays/relationships-browser/custom/index.tsx

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

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -0,0 +1,109 @@
+import { Handle } from '@xyflow/react'
+import { Position } from '@xyflow/system'
+import type { NodeProps } from '../../../base'
+import {
+  CompoundNodeContainer,
+  CompoundTitle,
+  customNode,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTitle,
+} from '../../../base/primitives'
+import type { RelationshipsBrowserTypes } from '../_types'
+import { ElementActions } from './ElementActions'
+import { EmptyNode } from './EmptyNode'
+
+export const nodeTypes = {
+  element: customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
+    return (
+      <ElementNodeContainer nodeProps={props}>
+        <ElementShape {...props} />
+        <ElementTitle {...props} iconSize={40} />
+        <ElementActions {...props} />
+        <ElementPorts {...props} />
+      </ElementNodeContainer>
+    )
+  }),
+
+  compound: customNode<RelationshipsBrowserTypes.CompoundNodeData>((props) => {
+    return (
+      <CompoundNodeContainer nodeProps={props}>
+        <CompoundTitle {...props} />
+        <CompoundPorts {...props} />
+      </CompoundNodeContainer>
+    )
+  }),
+  empty: customNode<RelationshipsBrowserTypes.EmptyNodeData>((props) => {
+    return <EmptyNode {...props} />
+  }),
+} satisfies { [key in RelationshipsBrowserTypes.Node['type']]: any }
+
+type ElementPortsProps = NodeProps<
+  Pick<
+    RelationshipsBrowserTypes.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<
+    RelationshipsBrowserTypes.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/relationships-browser/custom/styles.css.ts

@@ -0,0 +1,13 @@
+import { rem } from '@mantine/core'
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+
+export const emptyNode = style({
+  width: '100%',
+  height: '100%',
+  border: `3px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.md,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+})

package/src/overlays/relationships-browser/hooks.ts

@@ -0,0 +1,48 @@
+import { 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, useTransition } from 'react'
+import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
+
+export const RelationshipsBrowserActorContext = createContext<RelationshipsBrowserActorRef | null>(null)
+
+export function useRelationshipsBrowserActor() {
+  return nonNullable(useContext(RelationshipsBrowserActorContext), 'No RelationshipsBrowserActorContext')
+}
+
+export function useRelationshipsBrowserState<T>(
+  selector: (state: RelationshipsBrowserSnapshot) => T,
+  compare: (a: T, b: T) => boolean = shallowEqual,
+) {
+  const select = useCallbackRef(selector)
+  const actor = useRelationshipsBrowserActor()
+  return useSelector(actor, select, compare)
+}
+
+export function useRelationshipsBrowser() {
+  const actor = useRelationshipsBrowserActor()
+  const [, startTransition] = useTransition()
+  return useMemo(() => ({
+    getState: () => actor.getSnapshot().context,
+    send: actor.send,
+    navigateTo: (subject: Fqn) => {
+      startTransition(() => {
+        actor.send({
+          type: 'navigate.to',
+          subject,
+        })
+      })
+    },
+    fitDiagram: () => {
+      startTransition(() => {
+        actor.send({ type: 'fitDiagram' })
+      })
+    },
+    close: () => {
+      startTransition(() => {
+        actor.send({ type: 'close' })
+      })
+    },
+  }), [actor])
+}

package/src/overlays/relationships-browser/useViewToNodesEdges.ts

@@ -0,0 +1,209 @@
+import {
+  type Fqn,
+  DiagramNode,
+  ElementKind,
+  invariant,
+  nonNullable,
+  Queue,
+} from '@likec4/core'
+import { useDeepCompareMemo } from '@react-hookz/web'
+import { hasAtLeast } from 'remeda'
+import { ZIndexes } from '../../base/const'
+import { LayoutRelationshipsViewResult } from './-useRelationshipsView'
+import type { RelationshipsBrowserTypes } from './_types'
+
+// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
+export function viewToNodesEdge(
+  view: Pick<LayoutRelationshipsViewResult, 'nodes' | 'edges'>,
+): {
+  xynodes: RelationshipsBrowserTypes.Node[]
+  xyedges: RelationshipsBrowserTypes.Edge[]
+} {
+  const xynodes = [] as RelationshipsBrowserTypes.Node[],
+    xyedges = [] as RelationshipsBrowserTypes.Edge[],
+    nodeLookup = new Map<Fqn, LayoutRelationshipsViewResult.Node>()
+
+  type TraverseItem = {
+    node: LayoutRelationshipsViewResult.Node
+    parent: LayoutRelationshipsViewResult.Node | null
+  }
+  const queue = Queue.from(view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node)
+      if (!node.parent) {
+        acc.push({ node, parent: null })
+      }
+      return acc
+    },
+    [] as TraverseItem[],
+  ))
+
+  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
+
+  // namespace to force unique ids
+  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) || node.kind == ElementKind.Group
+    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<RelationshipsBrowserTypes.Node, 'data' | 'type'>
+
+    const fqn = DiagramNode.modelRef(node)
+    // const deploymentRef = DiagramNode.deploymentRef(node)
+    // if (!fqn) {
+    //   console.error('Invalid node', node)
+    //   throw new Error('Element should have either modelRef or deploymentRef')
+    // }
+
+    const navigateTo = { navigateTo: node.navigateTo ?? null }
+
+    switch (true) {
+      case node.kind === LayoutRelationshipsViewResult.Empty: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'empty',
+            data: {
+              column: node.column,
+            },
+          },
+        )
+        break
+      }
+
+      case isCompound && !!fqn: {
+        xynodes.push(
+          {
+            ...base,
+            type: 'compound',
+            data: {
+              column: node.column,
+              title: node.title,
+              color: node.color,
+              shape: node.shape,
+              style: node.style,
+              depth: node.depth ?? 0,
+              icon: node.icon ?? null,
+              ports: node.ports,
+              fqn,
+              ...navigateTo,
+            },
+          },
+        )
+        break
+      }
+      default: {
+        invariant(fqn, 'Element should have either modelRef or deploymentRef')
+        xynodes.push(
+          {
+            ...base,
+            type: 'element' as const,
+            data: {
+              column: node.column,
+              fqn,
+              title: node.title,
+              technology: node.technology,
+              description: node.description,
+              height: node.height,
+              width: node.width,
+              color: node.color,
+              shape: node.shape,
+              icon: node.icon ?? 'none',
+              ports: node.ports,
+              ...navigateTo,
+            },
+          },
+        )
+      }
+    }
+  }
+  for (const edge of view.edges) {
+    const source = edge.source
+    const target = edge.target
+    const id = ns + edge.id
+
+    if (!hasAtLeast(edge.points, 2)) {
+      console.error('edge should have at least 2 points', edge)
+      continue
+    }
+
+    xyedges.push({
+      id,
+      type: 'relationships',
+      source: ns + source,
+      target: ns + target,
+      sourceHandle: ns + target,
+      targetHandle: ns + source,
+      zIndex: ZIndexes.Edge,
+      // selectable: selectable,
+      // hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        color: edge.color ?? 'gray',
+        label: edge.label,
+        navigateTo: edge.navigateTo ?? null,
+
+        // technology: edge.technology,
+        // navigateTo: edge.navigateTo,
+        // labelBBox: edge.labelBBox ?? null,
+        // points: edge.points,
+        // color: edge.color ?? 'gray',
+        line: edge.line ?? 'dashed',
+        // dir: edge.dir ?? 'forward',
+        // head: edge.head ?? 'normal',
+        // tail: edge.tail ?? 'none',
+      },
+      interactionWidth: 20,
+    })
+  }
+
+  return {
+    xynodes,
+    xyedges,
+  }
+}
+
+export function useViewToNodesEdges({ edges, nodes }: LayoutRelationshipsViewResult) {
+  return useDeepCompareMemo(() => {
+    return viewToNodesEdge({
+      nodes,
+      edges,
+    })
+  }, [nodes, edges])
+}

package/src/utils/index.ts

@@ -0,0 +1,15 @@
+export type { AddEdgeData, AddNodeData } from './types'
+export { vector, VectorImpl } from './vector'
+export type { Vector } from './vector'
+export {
+  bezierControlPoints,
+  bezierPath,
+  centerXYInternalNode,
+  distance,
+  distanceBetweenPoints,
+  isInside,
+  isSamePoint,
+  nodeToRect,
+  stopPropagation,
+  toDomPrecision,
+} from './xyflow'

package/src/{xyflow/utils.ts → utils/xyflow.ts}

@@ -1,10 +1,9 @@
+import type { DiagramEdge, NonEmptyArray, Point } from '@likec4/core'
 import { hasAtLeast, invariant } from '@likec4/core'
-import type { DiagramEdge, Point } from '@likec4/core'
 import type { InternalNode, Rect, XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
-import type { DiagramFlowTypes } from './types'
 
 export function toDomPrecision(v: number | null) {
   if (v === null) {
@@ -17,11 +16,11 @@ export function distance(a: XYPosition, b: XYPosition) {
   return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
 }
 
-export const nodeToRect = (nd: DiagramFlowTypes.InternalNode): Rect => ({
+export const nodeToRect = (nd: InternalNode): Rect => ({
   x: nd.internals.positionAbsolute.x,
   y: nd.internals.positionAbsolute.y,
-  width: nd.measured.width ?? nd.width ?? nd.data.element.width,
-  height: nd.measured.height ?? nd.height ?? nd.data.element.height
+  width: nd.measured.width ?? nd.width ?? nd.initialWidth ?? 0,
+  height: nd.measured.height ?? nd.height ?? nd.initialHeight ?? 0,
 })
 
 /**
@@ -40,7 +39,7 @@ export const isInside = (test: Rect, target: Rect) => {
   )
 }
 
-export function bezierControlPoints(diagramEdge: DiagramEdge) {
+export function bezierControlPoints(diagramEdge: Pick<DiagramEdge, 'points'>) {
   let [start, ...bezierPoints] = diagramEdge.points
   invariant(start, 'start should be defined')
   const handles = [
@@ -59,7 +58,7 @@ export function bezierControlPoints(diagramEdge: DiagramEdge) {
       const { x, y } = bezier.get(t)
       handles.push({
         x: Math.round(x),
-        y: Math.round(y)
+        y: Math.round(y),
       })
     })
     bezierPoints = rest
@@ -93,6 +92,21 @@ export function centerXYInternalNode<N extends InternalNode>(nd: N) {
   const { width, height } = getNodeDimensions(nd)
   return {
     x: nd.internals.positionAbsolute.x + width / 2,
-    y: nd.internals.positionAbsolute.y + height / 2
+    y: nd.internals.positionAbsolute.y + height / 2,
   }
 }
+
+export function bezierPath(bezierSpline: NonEmptyArray<Point>) {
+  let [start, ...points] = bezierSpline
+  invariant(start, 'start should be defined')
+  let path = `M ${start[0]},${start[1]}`
+
+  while (hasAtLeast(points, 3)) {
+    const [cp1, cp2, end, ...rest] = points
+    path = path + ` C ${cp1[0]},${cp1[1]} ${cp2[0]},${cp2[1]} ${end[0]},${end[1]}`
+    points = rest
+  }
+  invariant(points.length === 0, 'all points should be consumed')
+
+  return path
+}

package/dist/_virtual/_commonjsHelpers.js

@@ -1,6 +0,0 @@
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-export {
-  getDefaultExportFromCjs
-};

package/dist/controls/Text.d.ts

@@ -1,2 +0,0 @@
-import { PolymorphicComponentProps, TextProps } from '@mantine/core';
-export declare const Text: <L = "div">(props: PolymorphicComponentProps<L, TextProps>) => React.ReactElement;

package/dist/controls/Text.js

@@ -1,7 +0,0 @@
-import { Text as Text$1 } from "@mantine/core";
-const Text = Text$1.withProps({
-  component: "div"
-});
-export {
-  Text
-};

package/dist/controls/action-button-bar/ActionButtonBar.css.d.ts

@@ -1 +0,0 @@
-export declare const container: string;

package/dist/controls/action-button-bar/ActionButtonBar.css.js

@@ -1,5 +0,0 @@
-/* empty css                                   */
-var container = "_10w34w70";
-export {
-  container
-};

package/dist/controls/action-button-bar/ActionButtonBar.d.ts

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-type ShiftX = 'left' | 'spread' | 'right';
-type ShiftY = 'top' | 'spread' | 'bottom';
-type ActionButtonBarProps = PropsWithChildren<{
-    shiftX?: ShiftX;
-    shiftY?: ShiftY;
-}>;
-export declare const ActionButtonBar: ({ shiftX, shiftY, children, }: ActionButtonBarProps) => import("react/jsx-runtime").JSX.Element;
-export {};