@likec4/diagram 1.27.0 → 1.27.1

package/dist/LikeC4Diagram.js

@@ -6,7 +6,6 @@ import { ControlsCustomLayoutProvider } from './context/ControlsCustomLayout.js'
 import { ReduceGraphicsContext } from './context/ReduceGraphics.js';
 import { LikeC4CustomColors } from './LikeC4CustomColors.js';
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow.js';
-import { useViewToNodesEdges } from './likec4diagram/useViewToNodesEdges.js';
 import { DiagramActorProvider } from './state/DiagramActorProvider.js';
 import { useLikeC4Model } from './likec4model/useLikeC4Model.js';
 import { EnsureMantine } from './context/EnsureMantine.js';
@@ -60,11 +59,6 @@ function LikeC4Diagram({
 }) {
   const hasLikec4model = !!useLikeC4Model();
   const initialRef = useRef(null);
-  const xyNodesEdges = useViewToNodesEdges({
-    view,
-    where,
-    nodesSelectable
-  });
   const isDynamicView = view.__ === "dynamic";
   if (initialRef.current == null) {
     initialRef.current = {
@@ -130,8 +124,8 @@ function LikeC4Diagram({
                           view,
                           pannable,
                           zoomable,
-                          fitViewPadding,
-                          ...xyNodesEdges
+                          nodesSelectable,
+                          fitViewPadding
                         },
                         children: /* @__PURE__ */ jsx(ControlsCustomLayoutProvider, { value: renderControls ?? null, children: /* @__PURE__ */ jsx(
                           LikeC4DiagramXYFlow,

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -60,7 +60,7 @@ function CompoundNodeContainer({
         "data-compound-title-inverse": opacity < 0.5
       },
       ...isDimmed !== false && {
-        "likec4-dimmed": isDimmed
+        "data-likec4-dimmed": isDimmed
       },
       style: {
         ...style,

package/dist/base/primitives/edge/EdgeLabel.css.js

@@ -42,7 +42,7 @@ const edgeLabelContainer = css({
   },
   _noReduceGraphics: {
     mixBlendMode: {
-      base: "plus-lighter",
+      _dark: "plus-lighter",
       _light: "screen"
     }
   },
@@ -51,9 +51,6 @@ const edgeLabelContainer = css({
   },
   _reduceGraphicsOnPan: {
     display: "none"
-  },
-  _whenPanning: {
-    mixBlendMode: "normal"
   }
 });
 const labelsva = sva({

package/dist/base/primitives/edge/EdgeLabelContainer.js

@@ -10,7 +10,7 @@ import { translate, edgeLabelContainer } from './EdgeLabel.css.js';
 
 const toCssVarValue = (value) => {
   if (value === void 0) return void 0;
-  return isNumber(value) ? `${value}px` : value;
+  return isNumber(value) ? `${Math.round(value)}px` : value;
 };
 function EdgeLabelContainer({
   edgeProps: {

package/dist/base/primitives/edge/EdgePath.js

@@ -66,9 +66,6 @@ const EdgePath = forwardRef(({
             "react-flow__edge-path",
             "react-flow__edge-interaction",
             cssEdgePath
-            // css({
-            //   strokeDasharray: strokeDasharray,
-            // }),
           ),
           d: svgPath,
           style,

package/dist/base/primitives/edge/edge.css.js

@@ -39,6 +39,7 @@ const _hideOnReducedGraphics = css.raw({
 });
 const hideOnReducedGraphics = css(_hideOnReducedGraphics);
 const edgePathBg = css(_hideOnReducedGraphics, {
+  fill: "[none]",
   strokeWidth: "calc(var(--xy-edge-stroke-width) + 2)",
   strokeOpacity: 0.08,
   transitionProperty: "stroke-width, stroke-opacity",
@@ -62,6 +63,7 @@ const markerContext = css({
   stroke: "[var(--xy-edge-stroke)]"
 });
 const cssEdgePath = css({
+  fill: "[none]",
   strokeDashoffset: 10,
   _noReduceGraphics: {
     transition: "stroke 130ms ease-out,stroke-width 130ms ease-out"

package/dist/base/primitives/element/ElementNodeContainer.css.js

@@ -9,6 +9,7 @@ const container = css({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  pointerEvents: "none",
   _after: {
     content: '" "',
     position: "absolute",

package/dist/base/primitives/element/ElementShape.css.js

@@ -6,7 +6,7 @@ const indicator = css({
   },
   stroke: "likec4.palette.loContrast",
   fill: "[none]",
-  strokeWidth: 6,
+  strokeWidth: 8,
   strokeOpacity: 0.8,
   visibility: "hidden",
   pointerEvents: "none",
@@ -14,25 +14,14 @@ const indicator = css({
     stroke: `[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]`
   },
   _whenFocused: {
-    strokeWidth: 12,
     visibility: "visible"
   },
   _groupFocusVisible: {
-    strokeWidth: 12,
     visibility: "visible"
   },
   _whenSelected: {
     animationStyle: "indicator",
     visibility: "visible"
-  },
-  _shapeQueue: {
-    strokeWidth: 8
-  },
-  _shapeCylinder: {
-    strokeWidth: 8
-  },
-  _shapeStorage: {
-    strokeWidth: 8
   }
 });
 const fillElementFill = css({

package/dist/base/primitives/element/ElementTitle.css.js

@@ -18,7 +18,7 @@ const description = css.raw({
     display: "none"
   },
   _smallZoom: {
-    visibility: "hidden"
+    display: "none"
   }
 });
 const technology = css.raw({
@@ -40,7 +40,7 @@ const technology = css.raw({
     display: "none"
   },
   _smallZoom: {
-    visibility: "hidden"
+    display: "none"
   }
 });
 const varIconSize = `var(${iconSize})`;
@@ -92,6 +92,7 @@ const elementTitle = sva({
       paddingLeft: "calc(var(--likec4-spacing) + 8px)",
       paddingRight: "calc(var(--likec4-spacing) + 8px)",
       overflow: "hidden",
+      pointerEvents: "none",
       gap: "12px",
       _shapeQueue: {
         paddingLeft: "46px",

package/dist/base/types.js

@@ -2,7 +2,7 @@ import { hasSubObject } from 'remeda';
 
 var Base;
 ((Base2) => {
-  const _setDimmed = (v, dimmed) => v.data.dimmed === dimmed ? v : {
+  const _setDimmed = (v, dimmed) => (v.data.dimmed ?? false) === dimmed ? v : {
     ...v,
     data: {
       ...v.data,
@@ -16,7 +16,7 @@ var Base;
     return (v) => _setDimmed(v, arg1);
   }
   Base2.setDimmed = setDimmed;
-  const _setHovered = (v, hovered) => v.data.hovered === hovered ? v : {
+  const _setHovered = (v, hovered) => (v.data.hovered ?? false) === hovered ? v : {
     ...v,
     data: {
       ...v.data,

package/dist/components/Link.js

@@ -54,7 +54,7 @@ function Link({
   size = "md"
 }) {
   const isNormalSize = size === "md";
-  const url = new URL(value.url, window.location.href).toString();
+  const url = value.url.includes("://") ? value.url : new window.URL(value.url, window.location.href).toString();
   return /* @__PURE__ */ jsx(CopyButton, { value: url, children: ({ copied, copy }) => /* @__PURE__ */ jsxs(
     Anchor,
     {