@likec4/diagram 1.19.2 → 1.20.0

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { getBezierPath } from "@xyflow/system";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { customEdge } from "../../../base/primitives/customEdge.js";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { EdgeContainer } from "../../../base/primitives/edge/EdgeContainer.js";
+import { EdgePath } from "../../../base/primitives/edge/EdgePath.js";
+import { EdgeLabel } from "../../../base/primitives/edge/EdgeLabel.js";
+import { EdgeActionButton } from "../../../base/primitives/edge/EdgeActionButton.js";
+const edgeTypes = {
+  relationships: customEdge((props) => {
+    const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+    const {
+      sourceX,
+      targetY,
+      data: { navigateTo }
+    } = props;
+    const [svgPath, labelX, labelY] = getBezierPath(props);
+    const diagram = useDiagram();
+    return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
+      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+      /* @__PURE__ */ jsx(
+        EdgeLabel,
+        {
+          edgeProps: props,
+          labelPosition: {
+            x: labelX,
+            y: labelY,
+            translate: "translate(-50%, 0)"
+          },
+          style: {
+            maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250)
+          },
+          children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
+            EdgeActionButton,
+            {
+              ...props,
+              onClick: (e) => {
+                e.stopPropagation();
+                diagram.navigateTo(navigateTo);
+              }
+            }
+          )
+        }
+      )
+    ] });
+  })
+};
+export {
+  edgeTypes
+};

package/dist/overlays/relationships-browser/custom/index.d.ts

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

package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts

@@ -0,0 +1,45 @@
+import { NodeProps } from '../../../base';
+import { RelationshipsBrowserTypes } from '../_types';
+import { NamedExoticComponent } from 'react';
+import { Color, ViewId, Fqn, ElementStyle } from '@likec4/core';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<{
+        title: string;
+        description: string | null;
+        width: number;
+        height: number;
+        technology: string | null;
+        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+        color: Color;
+        navigateTo: ViewId<string> | null | undefined;
+        column: RelationshipsBrowserTypes.Column;
+        fqn: Fqn;
+        icon: string | null;
+        ports: RelationshipsBrowserTypes.Ports;
+        hovered?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    }>>;
+    compound: NamedExoticComponent<NodeProps<{
+        style: ElementStyle;
+        title: string;
+        shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+        color: Color;
+        column: RelationshipsBrowserTypes.Column;
+        fqn: Fqn;
+        depth: number;
+        icon: string | null;
+        ports: RelationshipsBrowserTypes.Ports;
+        hovered?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    }>>;
+    empty: NamedExoticComponent<NodeProps<{
+        column: RelationshipsBrowserTypes.Column;
+        hovered?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    }>>;
+};
+type ElementPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.ElementNodeData, 'ports' | 'height'>>;
+export declare const ElementPorts: ({ data: { ports, height: h } }: ElementPortsProps) => import("react/jsx-runtime").JSX.Element;
+type CompoundPortsProps = NodeProps<Pick<RelationshipsBrowserTypes.CompoundNodeData, 'ports'>>;
+export declare const CompoundPorts: ({ data }: CompoundPortsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Handle } from "@xyflow/react";
+import { Position } from "@xyflow/system";
+import { ElementActions } from "./ElementActions.js";
+import { EmptyNode } from "./EmptyNode.js";
+import { customNode } from "../../../base/primitives/customNode.js";
+import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
+import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
+import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
+import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
+const nodeTypes = {
+  element: customNode((props) => {
+    return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(ElementShape, { ...props }),
+      /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+      /* @__PURE__ */ jsx(ElementActions, { ...props }),
+      /* @__PURE__ */ jsx(ElementPorts, { ...props })
+    ] });
+  }),
+  compound: customNode((props) => {
+    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+      /* @__PURE__ */ jsx(CompoundPorts, { ...props })
+    ] });
+  }),
+  empty: customNode((props) => {
+    return /* @__PURE__ */ jsx(EmptyNode, { ...props });
+  })
+};
+const ElementPorts = ({ data: { ports, height: h } }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ports.in.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "target",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+        }
+      },
+      id
+    )),
+    ports.out.map((id, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id,
+        type: "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+        }
+      },
+      id
+    ))
+  ] });
+};
+const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  data.ports.in.map((id, i) => /* @__PURE__ */ jsx(
+    Handle,
+    {
+      id,
+      type: "target",
+      position: Position.Left,
+      style: {
+        visibility: "hidden",
+        top: `${20 * (i + 1)}px`
+      }
+    },
+    id
+  )),
+  data.ports.out.map((id, i) => /* @__PURE__ */ jsx(
+    Handle,
+    {
+      id,
+      type: "source",
+      position: Position.Right,
+      style: {
+        visibility: "hidden",
+        top: `${20 * (i + 1)}px`
+      }
+    },
+    id
+  ))
+] });
+export {
+  CompoundPorts,
+  ElementPorts,
+  nodeTypes
+};

package/dist/overlays/relationships-browser/custom/styles.css.d.ts

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

package/dist/overlays/relationships-browser/custom/styles.css.js

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

package/dist/overlays/relationships-browser/hooks.d.ts

@@ -0,0 +1,62 @@
+import { Fqn, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, Input, Events } from './actor';
+import { Context, ReactNode, CSSProperties } from 'react';
+import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
+import { EdgeMarkerType, HandleType } from '@xyflow/system';
+import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
+export declare const RelationshipsBrowserActorContext: Context<RelationshipsBrowserActorRef | null>;
+export declare function useRelationshipsBrowserActor(): RelationshipsBrowserActorRef;
+export declare function useRelationshipsBrowserState<T>(selector: (state: RelationshipsBrowserSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
+export declare function useRelationshipsBrowser(): {
+    getState: () => Readonly< Input & {
+        closeable: boolean;
+        enableNavigationMenu: boolean;
+        xyflow: ( GeneralHelpers<import("./_types").RelationshipsBrowserTypes.Node, {
+            id: string;
+            source: string;
+            target: string;
+            sourceHandle?: string | null;
+            targetHandle?: string | null;
+            animated?: boolean;
+            hidden?: boolean;
+            deletable?: boolean;
+            selectable?: boolean;
+            selected?: boolean;
+            markerStart?: EdgeMarkerType;
+            markerEnd?: EdgeMarkerType;
+            zIndex?: number;
+            ariaLabel?: string;
+            interactionWidth?: number;
+            label?: ReactNode;
+            labelStyle?: CSSProperties;
+            labelShowBg?: boolean;
+            labelBgStyle?: CSSProperties;
+            labelBgPadding?: [number, number];
+            labelBgBorderRadius?: number;
+            style?: CSSProperties;
+            className?: string;
+            reconnectable?: boolean | HandleType;
+            focusable?: boolean;
+            type: "relationships";
+            data: {
+                color: Color | undefined;
+                label: string | null;
+                navigateTo: ViewId | null;
+                line: RelationshipLineType;
+                hovered?: boolean;
+                active?: boolean;
+                dimmed?: import("../../base").Base.Dimmed;
+            };
+        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+            viewportInitialized: boolean;
+        }) | null;
+        initialized: boolean;
+        layouted: LayoutRelationshipsViewResult | null;
+        xynodes: import("./_types").RelationshipsBrowserTypes.Node[];
+        xyedges: import("./_types").RelationshipsBrowserTypes.Edge[];
+    }>;
+    send: (event: Events) => void;
+    navigateTo: (subject: Fqn) => void;
+    fitDiagram: () => void;
+    close: () => void;
+};

package/dist/overlays/relationships-browser/hooks.js

@@ -0,0 +1,46 @@
+import { nonNullable } from "@likec4/core";
+import { useCallbackRef } from "@mantine/hooks";
+import { useSelector } from "@xstate/react";
+import { shallowEqual } from "fast-equals";
+import { createContext, useTransition, useMemo, useContext } from "react";
+const RelationshipsBrowserActorContext = createContext(null);
+function useRelationshipsBrowserActor() {
+  return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
+}
+function useRelationshipsBrowserState(selector, compare = shallowEqual) {
+  const select = useCallbackRef(selector);
+  const actor = useRelationshipsBrowserActor();
+  return useSelector(actor, select, compare);
+}
+function useRelationshipsBrowser() {
+  const actor = useRelationshipsBrowserActor();
+  const [, startTransition] = useTransition();
+  return useMemo(() => ({
+    getState: () => actor.getSnapshot().context,
+    send: actor.send,
+    navigateTo: (subject) => {
+      startTransition(() => {
+        actor.send({
+          type: "navigate.to",
+          subject
+        });
+      });
+    },
+    fitDiagram: () => {
+      startTransition(() => {
+        actor.send({ type: "fitDiagram" });
+      });
+    },
+    close: () => {
+      startTransition(() => {
+        actor.send({ type: "close" });
+      });
+    }
+  }), [actor]);
+}
+export {
+  RelationshipsBrowserActorContext,
+  useRelationshipsBrowser,
+  useRelationshipsBrowserActor,
+  useRelationshipsBrowserState
+};

package/dist/overlays/relationships-browser/useViewToNodesEdges.d.ts

@@ -0,0 +1,10 @@
+import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
+import { RelationshipsBrowserTypes } from './_types';
+export declare function viewToNodesEdge(view: Pick<LayoutRelationshipsViewResult, 'nodes' | 'edges'>): {
+    xynodes: RelationshipsBrowserTypes.Node[];
+    xyedges: RelationshipsBrowserTypes.Edge[];
+};
+export declare function useViewToNodesEdges({ edges, nodes }: LayoutRelationshipsViewResult): {
+    xynodes: RelationshipsBrowserTypes.Node[];
+    xyedges: RelationshipsBrowserTypes.Edge[];
+};

package/dist/overlays/relationships-browser/useViewToNodesEdges.js

@@ -0,0 +1,160 @@
+import { Queue, ElementKind, DiagramNode, invariant, nonNullable } from "@likec4/core";
+import "@react-hookz/web";
+import { hasAtLeast } from "remeda";
+import { ZIndexes } from "../../base/const.js";
+import { LayoutRelationshipsViewResult } from "./-useRelationshipsView.js";
+function viewToNodesEdge(view) {
+  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  const queue = Queue.from(view.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node);
+      if (!node.parent) {
+        acc.push({ node, parent: null });
+      }
+      return acc;
+    },
+    []
+  ));
+  const ns = "";
+  const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+  let next;
+  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
+      }
+    };
+    const fqn = DiagramNode.modelRef(node);
+    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",
+            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 {
+  viewToNodesEdge
+};