@likec4/diagram 1.30.0 → 1.31.0

package/dist/overlays/relationship-details/layout.js

@@ -1,9 +1,8 @@
+import { treeFromElements } from '@likec4/core/compute-view/relationships';
 import dagre from '@dagrejs/dagre';
 import { invariant } from '@likec4/core';
+import { ifind, DefaultMap } from '@likec4/core/utils';
 import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
-import { ifind } from '../../packages/core/src/utils/iterable/find.js';
-import DefaultMap from '../../_virtual/default-map.js';
-import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
 
 const Sizes = {
   dagre: {

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

@@ -1,17 +1,17 @@
 import { RelationshipsBrowserActorRef } from './actor';
-import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { FunctionComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
 import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
-    relationship: NamedExoticComponent<{
+    relationship: FunctionComponent<{
         id: string;
         selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
         style?: CSSProperties;
+        animated?: boolean;
         source: string;
         target: string;
-        animated?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;
@@ -30,11 +30,10 @@ export declare const edgeTypes: {
         markerEnd?: string;
         pathOptions?: any;
         interactionWidth?: number;
-        data: {
+        data: import("../../base").Base.EdgeData & {
             hovered?: boolean;
             active?: boolean;
             dimmed?: import("../../base").Base.Dimmed;
-        } & {
             sourceFqn: Fqn;
             targetFqn: Fqn;
             relations: NonEmptyArray<RelationId>;
@@ -43,9 +42,6 @@ export declare const edgeTypes: {
             navigateTo: ViewId | null;
             line: RelationshipLineType;
             existsInCurrentView: boolean;
-            hovered?: boolean;
-            active?: boolean;
-            dimmed?: import("../../base").Base.Dimmed;
         };
     }>;
 };

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

@@ -6,7 +6,7 @@ import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { ReactFlowProvider, useStoreApi, useReactFlow, Panel } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'motion/react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { useRef, memo, useEffect } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import { useRelationshipsView } from './layout.js';
@@ -23,7 +23,7 @@ const edgeTypes = {
   relationship: RelationshipEdge
 };
 function RelationshipsBrowser({ actorRef }) {
-  const initialRef = reactExports.useRef(null);
+  const initialRef = useRef(null);
   if (initialRef.current == null) {
     initialRef.current = {
       initialNodes: [],
@@ -38,7 +38,7 @@ const selector = (state) => ({
   edges: state.context.xyedges
 });
 const selectorEq = (a, b) => a.isActive === b.isActive && shallowEqual(a.nodes, b.nodes) && shallowEqual(a.edges, b.edges);
-const RelationshipsBrowserXYFlow = reactExports.memo(() => {
+const RelationshipsBrowserXYFlow = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     isActive,
@@ -108,7 +108,7 @@ const selector2 = (state) => ({
   scope: state.context.scope,
   closeable: state.context.closeable
 });
-const RelationshipsBrowserInner = reactExports.memo(() => {
+const RelationshipsBrowserInner = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -118,24 +118,24 @@ const RelationshipsBrowserInner = reactExports.memo(() => {
   } = useRelationshipsBrowserState(selector2);
   const store = useStoreApi();
   const instance = useReactFlow();
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (instance.viewportInitialized) {
       browser.send({ type: "xyflow.init", instance, store });
     }
   }, [store, instance.viewportInitialized, browser]);
   const layouted = useRelationshipsView(subjectId, viewId, scope);
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historySubjectId !== subjectId) {
       historyOps.set(subjectId);
     }
   }, [subjectId]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     if (historySubjectId !== subjectId) {
       browser.navigateTo(historySubjectId);
     }
   }, [historySubjectId, browser]);
-  reactExports.useEffect(() => {
+  useEffect(() => {
     browser.updateView(layouted);
   }, [layouted, browser]);
   const hasStepBack = current > 0;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ancestorsFqn } from '@likec4/core';
 import { useTree, Group, Box, Popover, PopoverTarget, Button, Text, PopoverDropdown, ScrollAreaAutosize, Tree, ActionIcon, Tooltip, SegmentedControl } from '@mantine/core';
 import { IconSelector, IconChevronRight } from '@tabler/icons-react';
-import { r as reactExports } from '../../_virtual/index.js';
+import { memo, useRef, useEffect } from 'react';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
@@ -22,7 +22,7 @@ const selector2 = (state) => {
 };
 const setHoveredNode = () => {
 };
-const SelectElement = reactExports.memo(() => {
+const SelectElement = memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -32,8 +32,8 @@ const SelectElement = reactExports.memo(() => {
     enableSelectSubject,
     enableChangeScope
   } = useRelationshipsBrowserState(selector2);
-  const root = reactExports.useRef(null);
-  const viewport = reactExports.useRef(null);
+  const root = useRef(null);
+  const viewport = useRef(null);
   const model = useLikeC4Model(true);
   const subject = model.findElement(subjectId);
   const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
@@ -41,7 +41,7 @@ const SelectElement = reactExports.memo(() => {
     multiple: false
   });
   tree.setHoveredNode = setHoveredNode;
-  reactExports.useEffect(() => {
+  useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach((id) => {
       tree.expand(id);
     });

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

@@ -1,4 +1,5 @@
 import { Color, DiagramNode, Fqn, IconUrl, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core';
+import { Simplify } from 'type-fest';
 import { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types';
 export declare namespace RelationshipsBrowserTypes {
     type Column = 'incomers' | 'subjects' | 'outgoers';
@@ -9,14 +10,14 @@ export declare namespace RelationshipsBrowserTypes {
         in: string[];
         out: string[];
     };
-    type ElementNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'navigateTo'>> & {
+    type ElementNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color' | 'shape' | 'style' | 'width' | 'height' | 'navigateTo'>> & {
         column: Column;
         fqn: Fqn;
         icon: string | null;
         ports: Ports;
         existsInCurrentView: boolean;
     }>;
-    type CompoundNodeData = Base.NodeData<NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
+    type CompoundNodeData = Simplify<Base.NodeData & NonOptional<Pick<DiagramNode, 'title' | 'color' | 'shape' | 'style'>> & {
         column: Column;
         fqn: Fqn;
         depth: number;
@@ -26,13 +27,13 @@ export declare namespace RelationshipsBrowserTypes {
     }>;
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>;
-    type EmptyNodeData = Base.NodeData<{
+    type EmptyNodeData = Base.NodeData & {
         column: Column;
-    }>;
+    };
     type EmptyNode = ReactFlowNode<EmptyNodeData, 'empty'>;
     type Node = ElementNode | CompoundNode | EmptyNode;
     type NodeData = Node['data'];
-    type EdgeData = Base.EdgeData<{
+    type EdgeData = Simplify<Base.EdgeData & {
         sourceFqn: Fqn;
         targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;