@likec4/diagram 1.16.0 → 1.17.0

package/src/xyflow/{XYFlowEvents.tsx → useXYFlowEvents.ts}

@@ -121,8 +121,10 @@ export function useXYFlowEvents() {
           enableFocusMode,
           lastClickedNodeId,
           nodesSelectable,
+          enableElementDetails,
           setLastClickedNode,
-          onOpenSourceElement
+          onOpenSourceElement,
+          openOverlay
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
         // if we focused on a node, and clicked on another node - focus on the clicked node
@@ -130,30 +132,45 @@ export function useXYFlowEvents() {
         // if user clicked on the same node twice in a short time, focus on it
         const clickedRecently = lastClickWasRecent() && lastClickedNodeId === xynode.id
 
+        let stopPropagation = false
+
         if (clickedRecently && !!onOpenSourceElement) {
           onOpenSourceElement(xynode.data.element.id)
-          if (!onNodeClick) {
-            event.stopPropagation()
-          }
+          stopPropagation = true
         }
 
         if (enableFocusMode) {
           switch (true) {
+            case shallChangeFocus || (clickedRecently && !focusedNodeId): {
+              focusOnNode(xynode.id)
+              stopPropagation = true
+              break
+            }
             case clickedRecently && focusedNodeId === xynode.id: {
               focusOnNode(false)
               fitDiagram()
+              stopPropagation = true
               break
             }
-            case (shallChangeFocus || clickedRecently): {
-              focusOnNode(xynode.id)
+            case !clickedRecently && focusedNodeId === xynode.id && enableElementDetails: {
+              openOverlay({
+                elementDetails: xynode.data.element.id
+              })
+              stopPropagation = true
               break
             }
           }
+        } else if (enableElementDetails && (clickedRecently || focusedNodeId === xynode.id) && !onNodeClick) {
+          openOverlay({
+            elementDetails: xynode.data.element.id
+          })
+          stopPropagation = true
         } else if (nodesSelectable) {
           xystore.getState().addSelectedNodes([xynode.id])
+          stopPropagation = true
         }
 
-        if (!onNodeClick && (enableFocusMode || nodesSelectable)) {
+        if (!onNodeClick && stopPropagation) {
           event.stopPropagation()
           return
         }
@@ -165,23 +182,10 @@ export function useXYFlowEvents() {
       },
       onNodeDoubleClick: (event, xynode) => {
         const {
-          focusedNodeId,
-          enableFocusMode,
-          fitDiagram,
-          focusOnNode,
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
         lastClickWasRecent()
-        if (isNonNullish(focusedNodeId) || enableFocusMode) {
-          // if we are already focused on the node, cancel
-          if (focusedNodeId === xynode.id) {
-            focusOnNode(false)
-            fitDiagram()
-          } else {
-            focusOnNode(xynode.id)
-          }
-        }
         event.stopPropagation()
       },
       onEdgeClick: (event, xyedge) => {
@@ -249,7 +253,7 @@ export function useXYFlowEvents() {
           activeWalkthrough,
           activateWalkthrough,
           openOverlay,
-          showRelationshipDetails
+          enableRelationshipDetails
         } = diagramApi.getState()
         // if we are in dynamic view, and clicked on an edge, activate the step
         if (isDynamicView && enableDynamicViewWalkthrough) {
@@ -261,7 +265,7 @@ export function useXYFlowEvents() {
           return
         }
 
-        if (showRelationshipDetails) {
+        if (enableRelationshipDetails) {
           openOverlay({
             edgeDetails: xyedge.data.edge.id
           })

package/src/xyflow/utils.ts

@@ -1,6 +1,7 @@
 import { hasAtLeast, invariant } from '@likec4/core'
 import type { DiagramEdge, Point } from '@likec4/core'
-import type { Rect, XYPosition } from '@xyflow/react'
+import type { InternalNode, Rect, XYPosition } from '@xyflow/react'
+import { getNodeDimensions } from '@xyflow/system'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
 import type { InternalXYFlowNode } from './types'
@@ -19,8 +20,8 @@ export function distance(a: XYPosition, b: XYPosition) {
 export const nodeToRect = (nd: InternalXYFlowNode): Rect => ({
   x: nd.internals.positionAbsolute.x,
   y: nd.internals.positionAbsolute.y,
-  width: nd.width ?? nd.data.element.width,
-  height: nd.height ?? nd.data.element.height
+  width: nd.measured.width ?? nd.width ?? nd.data.element.width,
+  height: nd.measured.height ?? nd.height ?? nd.data.element.height
 })
 
 /**
@@ -87,3 +88,11 @@ export function distanceBetweenPoints(a: XYPosition, b: XYPosition) {
 export function stopPropagation(e: React.MouseEvent) {
   return e.stopPropagation()
 }
+
+export function centerXYInternalNode<N extends InternalNode>(nd: N) {
+  const { width, height } = getNodeDimensions(nd)
+  return {
+    x: nd.internals.positionAbsolute.x + width / 2,
+    y: nd.internals.positionAbsolute.y + height / 2
+  }
+}

package/src/LikeC4CustomColors.props.ts

@@ -1,5 +0,0 @@
-import { type CustomColorDefinitions } from '@likec4/core'
-
-export interface LikeC4CustomColorsProperties {
-  customColors: CustomColorDefinitions
-}