likec4 0.57.1 → 0.60.0

package/dist/@likec4/core/utils/guards.js

@@ -3,5 +3,5 @@ export function isString(value) {
   return value != null && typeof value === "string";
 }
 export function isNonEmptyArray(arr) {
-  return arr.length > 0;
+  return !!arr && Array.isArray(arr) && arr.length > 0;
 }

package/dist/@likec4/diagrams/diagram/Diagram.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { nonNullable, defaultTheme as theme } from "@likec4/core";
+import { defaultTheme as theme, nonNullable } from "@likec4/core";
 import { useHookableRef, useUpdateEffect } from "@react-hookz/web";
 import { useSpring } from "@react-spring/konva";
 import { clamp, isNil } from "rambdax";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import { AnimatedStage, Layer } from "../konva.js";
 import { Edges } from "./Edges.js";
 import { createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
@@ -36,8 +36,8 @@ const DiagramKonva = /* @__PURE__ */ forwardRef(
     zoomable = true,
     animate = true,
     initialPosition,
-    onEdgeClick,
-    onNodeClick,
+    onEdgeClick: _onEdgeClick,
+    onNodeClick: _onNodeClick,
     onNodeContextMenu,
     onStageClick,
     onStageContextMenu,
@@ -49,6 +49,10 @@ const DiagramKonva = /* @__PURE__ */ forwardRef(
   }, ref) => {
     const immediate = !animate;
     const id = diagram.id;
+    const handlersRef = useSyncedRef({
+      onEdgeClick: _onEdgeClick,
+      onNodeClick: _onNodeClick
+    });
     const containerRef = useRef(null);
     const stageRef = useHookableRef(null, (value) => {
       containerRef.current = value?.container() ?? null;
@@ -60,6 +64,18 @@ const DiagramKonva = /* @__PURE__ */ forwardRef(
     const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isNumber(padding) ? [padding, padding, padding, padding] : padding;
     const width = _width ?? diagram.width + paddingLeft + paddingRight;
     const height = _height ?? diagram.height + paddingTop + paddingBottom;
+    const onNodeClick = useCallback(
+      (node, e) => {
+        handlersRef.current.onNodeClick?.(node, e);
+      },
+      [handlersRef]
+    );
+    const onEdgeClick = useCallback(
+      (edge, e) => {
+        handlersRef.current.onEdgeClick?.(edge, e);
+      },
+      [handlersRef]
+    );
     const toCenterOnRect = (centerTo, opts) => {
       const keepZoom = opts?.keepZoom ?? false;
       const container = containerRef.current;
@@ -341,8 +357,8 @@ const DiagramKonva = /* @__PURE__ */ forwardRef(
               scaleX: 1,
               scaleY: 1,
               children: [
-                /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick }),
-                /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick })
+                /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick: _onNodeClick ? onNodeClick : void 0 }),
+                /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick: _onEdgeClick ? onEdgeClick : void 0 })
               ]
             }
           ),

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -239,6 +239,6 @@ const NodeShape = memo(
       }
     ) });
   },
-  isEqualSimple
+  (a, b) => isEqualSimple(a.node, b.node) && a.isHovered === b.isHovered && a.expired === b.expired
 );
 NodeShape.displayName = "NodeShape";