@likec4/diagram 1.36.1 → 1.37.0

package/dist/likec4diagram/custom/edges/RelationshipEdge.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { nonNullable } from '@likec4/core';
 import { cx } from '@likec4/styles/css';
 import { useDebouncedEffect } from '@react-hookz/web';
@@ -8,32 +8,30 @@ import { useState, useRef, useEffect } from 'react';
 import { isTruthy, first, last } from 'remeda';
 import { ZIndexes } from '../../../base/const.js';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
-import { useDiagram, useDiagramActorSnapshot } from '../../../hooks/useDiagram.js';
+import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useXYStoreApi, useXYFlow, useXYInternalNode } from '../../../hooks/useXYFlow.js';
+import { roundDpr } from '../../../utils/roundDpr.js';
 import { VectorImpl, vector } from '../../../utils/vector.js';
 import { isSamePoint, bezierControlPoints, bezierPath } from '../../../utils/xyflow.js';
 import { controlDragging, controlPointsContainer, controlPoint } from './edges.css.js';
-import { NotePopover } from './NotePopover.js';
-import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu.js';
 import { getNodeIntersectionFromCenterToPoint } from './utils.js';
 import { customEdge } from '../../../base/primitives/customEdge.js';
-import { useIsPanning } from '../../../context/ReduceGraphics.js';
-import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
-import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
 import { EdgeContainer } from '../../../base/primitives/edge/EdgeContainer.js';
 import { EdgePath } from '../../../base/primitives/edge/EdgePath.js';
 import { EdgeLabelContainer } from '../../../base/primitives/edge/EdgeLabelContainer.js';
+import { EdgeLabel } from '../../../base/primitives/edge/EdgeLabel.js';
+import { EdgeActionButton } from '../../../base/primitives/edge/EdgeActionButton.js';
 
 const curve = line().curve(curveCatmullRomOpen).x((d) => d.x).y((d) => d.y);
-const selectActiveStepId = (s) => s.context.activeWalkthrough?.stepId ?? null;
 const RelationshipEdge = customEdge((props) => {
-  const isPanning = useIsPanning();
   const [isControlPointDragging, setIsControlPointDragging] = useState(false);
   const xyflowStore = useXYStoreApi();
   const xyflow = useXYFlow();
   const diagram = useDiagram();
-  const activeWalkthroughStep = useDiagramActorSnapshot(selectActiveStepId);
-  const { enableNavigateTo, enableEdgeEditing, enableRelationshipDetails } = useEnabledFeatures();
+  const {
+    enableNavigateTo,
+    enableEdgeEditing
+  } = useEnabledFeatures();
   const {
     id,
     source,
@@ -93,8 +91,8 @@ const RelationshipEdge = customEdge((props) => {
     if (!path) return;
     const dompoint = path.getPointAtLength(path.getTotalLength() * 0.5);
     const point = {
-      x: Math.round(dompoint.x),
-      y: Math.round(dompoint.y)
+      x: roundDpr(dompoint.x),
+      y: roundDpr(dompoint.y)
     };
     setLabelPos((current) => isSamePoint(current, point) ? current : point);
   }, [edgePath]);
@@ -132,13 +130,16 @@ const RelationshipEdge = customEdge((props) => {
       };
       if (!isSamePoint(pointer, clientPoint)) {
         setIsControlPointDragging(true);
-        hasMoved = true;
+        if (!hasMoved) {
+          diagram.send({ type: "xyflow.edgeEditingStarted", edge: props.data });
+          hasMoved = true;
+        }
         pointer = clientPoint;
         const { x, y } = xyflow.screenToFlowPosition(pointer, { snapToGrid: false });
         const cp = controlPoints.slice();
         cp[index] = {
-          x: Math.round(x),
-          y: Math.round(y)
+          x: roundDpr(x),
+          y: roundDpr(y)
         };
         diagram.updateEdgeData(id, {
           controlPoints: cp
@@ -244,33 +245,6 @@ const RelationshipEdge = customEdge((props) => {
   if (hovered || active) {
     zIndex = ZIndexes.Element + 1;
   }
-  let edgeLabel = /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: !isControlPointDragging && navigateTo && /* @__PURE__ */ jsx(
-    EdgeActionButton,
-    {
-      ...props,
-      onClick: (e) => {
-        e.stopPropagation();
-        diagram.navigateTo(navigateTo);
-      }
-    }
-  ) });
-  if (!isControlPointDragging && !isPanning) {
-    const notes = props.data.notes;
-    if (notes && activeWalkthroughStep === props.id) {
-      edgeLabel = /* @__PURE__ */ jsx(NotePopover, { notes: notes.txt ?? notes.md, children: edgeLabel });
-    } else if (enableRelationshipDetails) {
-      edgeLabel = /* @__PURE__ */ jsx(
-        RelationshipsDropdownMenu,
-        {
-          disabled: !!dimmed,
-          source,
-          target,
-          edgeId,
-          children: edgeLabel
-        }
-      );
-    }
-  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(EdgeContainer, { ...props, className: cx(isControlPointDragging && controlDragging), children: [
       /* @__PURE__ */ jsx(
@@ -293,7 +267,16 @@ const RelationshipEdge = customEdge((props) => {
             y: labelY,
             translate: isModified ? "translate(-50%, 0)" : void 0
           },
-          children: edgeLabel
+          children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: navigateTo && /* @__PURE__ */ jsx(
+            EdgeActionButton,
+            {
+              ...props,
+              onClick: (e) => {
+                e.stopPropagation();
+                diagram.navigateTo(navigateTo);
+              }
+            }
+          ) })
         }
       )
     ] }),

package/dist/likec4diagram/custom/index.js

@@ -4,9 +4,9 @@ import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentN
 const BuiltinNodes = {
   element: ElementNode,
   deployment: DeploymentNode,
-  "compound-element": CompoundElementNode,
-  "compound-deployment": CompoundDeploymentNode,
-  "view-group": ViewGroupNode
+  compoundElement: CompoundElementNode,
+  compoundDeployment: CompoundDeploymentNode,
+  viewGroup: ViewGroupNode
 };
 const edgeTypes = {
   relationship: RelationshipEdge

package/dist/likec4diagram/custom/nodes/nodes.d.ts

@@ -1,10 +1,12 @@
 import { NodeProps } from '../../../base';
+import { CustomNodes as CustomNodesType } from '../../../custom/customNodes';
 import { Types } from '../../types';
-import { MemoExoticComponent } from 'react';
+type CustomNodes = Required<CustomNodesType>;
 export declare function ElementDetailsButtonWithHandler(props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>): import("react/jsx-runtime").JSX.Element | null;
 export declare function CompoundDetailsButtonWithHandler(props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>): import("react/jsx-runtime").JSX.Element | null;
-export declare const ElementNode: MemoExoticComponent<(props: NodeProps<Types.ElementNodeData, "element">) => import("react/jsx-runtime").JSX.Element>;
-export declare const DeploymentNode: MemoExoticComponent<(props: NodeProps<Types.DeploymentElementNodeData, "deployment">) => import("react/jsx-runtime").JSX.Element>;
-export declare const CompoundElementNode: MemoExoticComponent<(props: NodeProps<Types.CompoundElementNodeData, "compound-element">) => import("react/jsx-runtime").JSX.Element>;
-export declare const CompoundDeploymentNode: MemoExoticComponent<(props: NodeProps<Types.CompoundDeploymentNodeData, "compound-deployment">) => import("react/jsx-runtime").JSX.Element>;
-export declare const ViewGroupNode: MemoExoticComponent<(props: NodeProps<Types.ViewGroupNodeData, "view-group">) => import("react/jsx-runtime").JSX.Element>;
+export declare const ElementNode: CustomNodes['element'];
+export declare const DeploymentNode: CustomNodes['deployment'];
+export declare const CompoundElementNode: CustomNodes['compoundElement'];
+export declare const CompoundDeploymentNode: CustomNodes['compoundDeployment'];
+export declare const ViewGroupNode: CustomNodes['viewGroup'];
+export {};

package/dist/likec4diagram/custom/nodes/nodes.js

@@ -1,15 +1,14 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { CompoundActions } from './CompoundActions.js';
 import { DeploymentElementActions, ElementActions } from './ElementActions.js';
-import { CompoundElementToolbar, CompoundDeploymentToolbar } from './toolbar/CompoundToolbar.js';
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar.js';
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar.js';
-import { customNode } from '../../../base/primitives/customNode.js';
-import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.js';
 import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
 import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
 import { DefaultHandles } from '../../../base/primitives/NodeHandles.js';
+import { CompoundDetailsButton } from '../../../base/primitives/compound/CompoundDetailsButton.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';
@@ -48,7 +47,7 @@ function CompoundDetailsButtonWithHandler(props) {
     }
   );
 }
-const ElementNode = customNode((props) => {
+const ElementNode = (props) => {
   const { enableElementTags, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -59,9 +58,9 @@ const ElementNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(ElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 ElementNode.displayName = "ElementNode";
-const DeploymentNode = customNode((props) => {
+const DeploymentNode = (props) => {
   const { enableElementTags, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
@@ -72,9 +71,9 @@ const DeploymentNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 DeploymentNode.displayName = "DeploymentNode";
-const CompoundElementNode = customNode((props) => {
+const CompoundElementNode = (props) => {
   const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -83,9 +82,9 @@ const CompoundElementNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 CompoundElementNode.displayName = "CompoundElementNode";
-const CompoundDeploymentNode = customNode((props) => {
+const CompoundDeploymentNode = (props) => {
   const { enableElementDetails, enableReadOnly } = useEnabledFeatures();
   return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
     /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
@@ -94,12 +93,12 @@ const CompoundDeploymentNode = customNode((props) => {
     !enableReadOnly && /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }),
     /* @__PURE__ */ jsx(DefaultHandles, {})
   ] });
-});
+};
 CompoundDeploymentNode.displayName = "CompoundDeploymentNode";
-const ViewGroupNode = customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+const ViewGroupNode = (props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
   /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
   /* @__PURE__ */ jsx(DefaultHandles, {})
-] }));
+] });
 ViewGroupNode.displayName = "ViewGroupNode";
 
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode };

package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js

@@ -15,6 +15,7 @@ function CompoundElementToolbar(props) {
     }
   } = props;
   const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
+  const opacity = style?.opacity ?? 100;
   return /* @__PURE__ */ jsxs(
     Toolbar,
     {
@@ -28,7 +29,7 @@ function CompoundElementToolbar(props) {
             elementColor,
             onColorPreview,
             isOpacityEditable: true,
-            elementOpacity: style?.opacity,
+            elementOpacity: opacity,
             onChange,
             position: "left-start"
           }
@@ -36,7 +37,7 @@ function CompoundElementToolbar(props) {
         /* @__PURE__ */ jsx(
           BorderStyleOption,
           {
-            elementBorderStyle: style?.border,
+            elementBorderStyle: style?.border ?? (opacity < 99 ? "dashed" : "none"),
             onChange
           }
         ),

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -16,7 +16,7 @@ export declare const themedColors: ({
     value: ColorLiteral;
 })[];
 export declare const colors: {
-    key: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "sky";
+    key: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "red" | "sky";
     value: ColorLiteral;
 }[];
 export type ThemeColorKey = typeof themedColors[0]['key'];
@@ -26,7 +26,7 @@ export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttri
     renderRoot?: (props: Record<string, any>) => React.ReactNode;
 }>;
 export declare function useHandlers(target: Fqn | DeploymentFqn, props: NodeProps<Types.NodeData>): {
-    elementColor: "blue" | "gray" | "green" | "indigo" | "red" | "amber" | "slate" | "muted" | "primary" | "secondary" | "sky";
+    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
     onColorPreview: (color: ThemeColor | null) => void;
     onChange: OnStyleChange;
 };

package/dist/likec4diagram/relationship-popover/RelationshipPopover.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const RelationshipPopover: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;