@likec4/diagram 1.20.2 → 1.20.3

package/dist/likec4diagram/useLayoutConstraints.d.ts

@@ -21,9 +21,10 @@ declare abstract class Rect {
     };
     get position(): XYPosition;
     protected abstract parent: Compound | null;
+    constructor(xynode: InternalNode, parent?: Compound | null);
 }
 declare class Compound extends Rect {
-    protected readonly parent: Compound | null;
+    readonly parent: Compound | null;
     readonly children: Rect[];
     constructor(xynode: InternalNode, parent?: Compound | null);
 }

package/dist/likec4diagram/useLayoutConstraints.js

@@ -10,12 +10,23 @@ import { useSyncedRef } from "@react-hookz/web";
 import { useDiagram } from "../hooks/useDiagram.js";
 import { useXYStoreApi } from "../hooks/useXYFlow.js";
 class Rect {
-  constructor() {
+  constructor(xynode, parent = null) {
     __publicField(this, "id");
     __publicField(this, "minX", Infinity);
     __publicField(this, "minY", Infinity);
     __publicField(this, "maxX", -Infinity);
     __publicField(this, "maxY", -Infinity);
+    this.id = xynode.id;
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY
+    };
+    const { width, height } = getNodeDimensions(xynode);
+    this.maxX = this.minX + Math.ceil(width);
+    this.maxY = this.minY + Math.ceil(height);
+    if (parent) {
+      parent.children.push(this);
+    }
   }
   get positionAbsolute() {
     return {
@@ -56,27 +67,15 @@ __publicField(Rect, "TopPadding", 55);
 __publicField(Rect, "BottomPadding", 40);
 class Compound extends Rect {
   constructor(xynode, parent = null) {
-    super();
+    super(xynode, parent);
     __publicField(this, "children", []);
     this.parent = parent;
-    this.id = xynode.id;
-    if (parent) {
-      parent.children.push(this);
-    }
   }
 }
 class Leaf extends Rect {
   constructor(xynode, parent = null) {
-    super();
+    super(xynode, parent);
     this.parent = parent;
-    this.id = xynode.id;
-    this.positionAbsolute = xynode.internals.positionAbsolute;
-    const { width, height } = getNodeDimensions(xynode);
-    this.maxX = this.minX + Math.ceil(width);
-    this.maxY = this.minY + Math.ceil(height);
-    if (parent) {
-      parent.children.push(this);
-    }
   }
 }
 function createLayoutConstraints(xyflowApi, editingNodeIds) {

package/dist/overlays/element-details/TabPanelRelationships.js

@@ -20,8 +20,8 @@ function TabPanelRelationships({
   useState("view");
   const incoming = [...element.incoming()].map((r) => r.id);
   const outgoing = [...element.outgoing()].map((r) => r.id);
-  const incomingInView = unique(node.incoming().flatMap((e) => e.$edge.relations).toArray());
-  const outgoingInView = unique(node.outgoing().flatMap((e) => e.$edge.relations).toArray());
+  const incomingInView = unique([...node.incoming()].flatMap((e) => e.$edge.relations));
+  const outgoingInView = unique([...node.outgoing()].flatMap((e) => e.$edge.relations));
   const notIncludedRelations = [
     ...incoming,
     ...outgoing

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

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { IconZoomScan, IconTransform } from "@tabler/icons-react";
+import { IconZoomScan, IconTransform, IconFileSymlink } from "@tabler/icons-react";
 import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
 import { useDiagram } from "../../../hooks/useDiagram.js";
 import { useRelationshipsBrowser } from "../hooks.js";
 import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
 const ElementActions = (props) => {
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo, enableVscode } = useEnabledFeature("NavigateTo", "Vscode");
   const diagram = useDiagram();
   const browser = useRelationshipsBrowser();
   const buttons = [];
@@ -30,6 +30,16 @@ const ElementActions = (props) => {
       }
     });
   }
+  if (enableVscode) {
+    buttons.push({
+      key: "goToSource",
+      icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openSource({ element: fqn });
+      }
+    });
+  }
   return /* @__PURE__ */ jsx(
     ElementActionButtons,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "1.1.4",
-    "@likec4/core": "1.20.2",
+    "@likec4/core": "1.20.3",
     "@mantine/vanilla-extract": "7.15.2",
     "@react-hookz/web": "^25.0.1",
     "@tabler/icons-react": "3.29.0",
@@ -52,7 +52,7 @@
     "d3-shape": "^3.2.0",
     "esm-env": "^1.2.2",
     "fast-equals": "^5.2.2",
-    "framer-motion": "^11.16.0",
+    "framer-motion": "^11.18.2",
     "khroma": "^2.1.0",
     "react-error-boundary": "^4.1.2",
     "remeda": "^2.19.0",
@@ -67,7 +67,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.20.2",
+    "@likec4/tsconfig": "1.20.3",
     "@mantine/core": "7.15.2",
     "@mantine/hooks": "7.15.2",
     "@mantine/spotlight": "7.15.2",
@@ -76,7 +76,7 @@
     "@types/d3-shape": "^3.1.7",
     "@types/react": "~19.0.8",
     "@types/react-dom": "~19.0.3",
-    "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/css": "^1.17.1",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
     "react": "~19.0.0",

package/src/likec4diagram/useLayoutConstraints.ts

@@ -60,42 +60,46 @@ abstract class Rect {
     }
   }
   protected abstract parent: Compound | null
-}
-
-class Compound extends Rect {
-  public readonly children = [] as Rect[]
 
   constructor(
     xynode: InternalNode,
-    protected readonly parent: Compound | null = null,
+    parent: Compound | null = null,
   ) {
-    super()
     this.id = xynode.id
 
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY,
+    }
+
+    const { width, height } = getNodeDimensions(xynode)
+
+    this.maxX = this.minX + Math.ceil(width)
+    this.maxY = this.minY + Math.ceil(height)
+
     if (parent) {
       parent.children.push(this)
     }
   }
 }
 
-class Leaf extends Rect {
+class Compound extends Rect {
+  public readonly children = [] as Rect[]
+
   constructor(
     xynode: InternalNode,
     public readonly parent: Compound | null = null,
   ) {
-    super()
-    this.id = xynode.id
-
-    this.positionAbsolute = xynode.internals.positionAbsolute
-
-    const { width, height } = getNodeDimensions(xynode)
-
-    this.maxX = this.minX + Math.ceil(width)
-    this.maxY = this.minY + Math.ceil(height)
+    super(xynode, parent)
+  }
+}
 
-    if (parent) {
-      parent.children.push(this)
-    }
+class Leaf extends Rect {
+  constructor(
+    xynode: InternalNode,
+    public readonly parent: Compound | null = null,
+  ) {
+    super(xynode, parent)
   }
 }
 

package/src/overlays/element-details/TabPanelRelationships.tsx

@@ -28,8 +28,8 @@ export function TabPanelRelationships({
   const incoming = [...element.incoming()].map(r => r.id)
   const outgoing = [...element.outgoing()].map(r => r.id)
 
-  const incomingInView = unique(node.incoming().flatMap(e => e.$edge.relations).toArray())
-  const outgoingInView = unique(node.outgoing().flatMap(e => e.$edge.relations).toArray())
+  const incomingInView = unique([...node.incoming()].flatMap(e => e.$edge.relations))
+  const outgoingInView = unique([...node.outgoing()].flatMap(e => e.$edge.relations))
 
   const notIncludedRelations = [
     ...incoming,

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

@@ -1,4 +1,4 @@
-import { IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
 import { ElementActionButtons } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
 import { useEnabledFeature } from '../../../context/DiagramFeatures'
@@ -8,7 +8,7 @@ import { useRelationshipsBrowser } from '../hooks'
 
 type ElementActionsProps = NodeProps<Types.ElementNodeData>
 export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo, enableVscode } = useEnabledFeature('NavigateTo', 'Vscode')
   const diagram = useDiagram()
   const browser = useRelationshipsBrowser()
 
@@ -35,6 +35,16 @@ export const ElementActions = (props: ElementActionsProps) => {
       },
     })
   }
+  if (enableVscode) {
+    buttons.push({
+      key: 'goToSource',
+      icon: <IconFileSymlink />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.openSource({ element: fqn })
+      },
+    })
+  }
   return (
     <ElementActionButtons
       buttons={buttons}