@likec4/diagram 1.9.0 → 1.12.0

package/src/xyflow/XYFlowEvents.tsx

@@ -1,4 +1,3 @@
-import { extractStep } from '@likec4/core'
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import { isNonNullish, isTruthy } from 'remeda'
@@ -46,12 +45,17 @@ export function useXYFlowEvents() {
       }
       dblclickTimeout.current = window.setTimeout(() => {
         dblclickTimeout.current = undefined
-      }, 250)
+      }, 300)
       return false
     }
 
-    const lastClickWasRecent = (ms = 1500) => {
-      return lastClickTimestamp.current && (Date.now() - lastClickTimestamp.current) < ms
+    const lastClickWasRecent = (ms = 2000) => {
+      const prevTimestamp = lastClickTimestamp.current
+      lastClickTimestamp.current = Date.now()
+      if (prevTimestamp === undefined) {
+        return false
+      }
+      return prevTimestamp + ms > Date.now()
     }
 
     return ({
@@ -59,13 +63,11 @@ export function useXYFlowEvents() {
         const {
           onCanvasDblClick,
           zoomable,
-          xystore,
           viewportChanged,
           fitDiagram,
-          resetLastClicked
+          resetFocusAndLastClicked
         } = diagramApi.getState()
-        resetLastClicked()
-        xystore.getState().resetSelectedElements()
+        resetFocusAndLastClicked()
         if (!onCanvasDblClick) {
           event.stopPropagation()
         }
@@ -75,48 +77,46 @@ export function useXYFlowEvents() {
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {
+        console.log('onPaneClick')
         if (dbclickLock()) {
           return
         }
         const {
           focusedNodeId,
-          activeDynamicViewStep,
+          activeWalkthrough,
           fitDiagram,
           onCanvasClick,
-          xystore,
-          resetLastClicked
+          resetFocusAndLastClicked
         } = diagramApi.getState()
-        if ((focusedNodeId ?? activeDynamicViewStep) !== null) {
+        if ((focusedNodeId ?? activeWalkthrough) !== null) {
           fitDiagram()
           if (!onCanvasClick) {
             event.stopPropagation()
           }
         }
-        resetLastClicked()
-        xystore.getState().resetSelectedElements()
+        resetFocusAndLastClicked()
         onCanvasClick?.(event)
       },
       onNodeContextMenu: (event, xynode) => {
         diagramApi.getState().setLastClickedNode(xynode.id)
-        diagramApi.getState().onNodeContextMenu?.({
-          element: xynode.data.element,
-          xynode,
+        diagramApi.getState().onNodeContextMenu?.(
+          xynode.data.element,
           event
-        })
+        )
       },
       onPaneContextMenu: (event) => {
-        diagramApi.getState().resetLastClicked()
+        diagramApi.getState().resetFocusAndLastClicked()
         diagramApi.getState().onCanvasContextMenu?.(event as any)
       },
       onEdgeContextMenu: (event, xyedge) => {
         diagramApi.getState().setLastClickedEdge(xyedge.id)
-        diagramApi.getState().onEdgeContextMenu?.({
-          edge: xyedge.data.edge,
-          xyedge,
+        diagramApi.getState().onEdgeContextMenu?.(
+          xyedge.data.edge,
           event
-        })
+        )
       },
       onNodeClick: (event, xynode) => {
+        console.log('onNodeClick')
         const {
           focusedNodeId,
           fitDiagram,
@@ -140,36 +140,31 @@ export function useXYFlowEvents() {
         }
 
         if (enableFocusMode || nodesSelectable) {
-          let stopPropagation = true
           switch (true) {
-            case enableFocusMode && !focusedNodeId && clickedRecently:
-            case enableFocusMode && shallChangeFocus: {
-              focusOnNode(xynode.id)
+            case enableFocusMode && clickedRecently && focusedNodeId === xynode.id: {
+              focusOnNode(false)
+              fitDiagram()
               break
             }
-            case enableFocusMode && focusedNodeId === xynode.id && clickedRecently: {
-              fitDiagram()
+            case enableFocusMode && shallChangeFocus:
+            case enableFocusMode && clickedRecently && focusedNodeId !== xynode.id: {
+              focusOnNode(xynode.id)
               break
             }
             case nodesSelectable: {
               xystore.getState().addSelectedNodes([xynode.id])
               break
             }
-            default: {
-              stopPropagation = false
-            }
-          }
-          if (!onNodeClick && stopPropagation) {
-            // user did not provide a custom handler, stop propagation
-            event.stopPropagation()
           }
         }
-        lastClickTimestamp.current = Date.now()
-        onNodeClick?.({
-          element: xynode.data.element,
-          xynode,
+        if (!onNodeClick) {
+          // user did not provide a custom handler, stop propagation
+          event.stopPropagation()
+        }
+        onNodeClick?.(
+          xynode.data.element,
           event
-        })
+        )
       },
       onNodeDoubleClick: (event, xynode) => {
         const {
@@ -196,8 +191,8 @@ export function useXYFlowEvents() {
           lastClickedEdgeId,
           isDynamicView,
           enableDynamicViewWalkthrough,
-          activateDynamicStep,
-          activeDynamicViewStep,
+          activateWalkthrough,
+          activeWalkthrough,
           focusedNodeId,
           xystore,
           nodesSelectable,
@@ -209,22 +204,27 @@ export function useXYFlowEvents() {
           setLastClickedEdge(xyedge.id)
         }
         const isNotAFirstClick = lastClickedEdgeId === xyedge.id
-        const isEdgeOfFocusedNode = isTruthy(focusedNodeId)
+        const connectedToFocusedNode = isTruthy(focusedNodeId)
           && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)
         if (
           isDynamicView && enableDynamicViewWalkthrough
-          && (isEdgeOfFocusedNode || isNotAFirstClick || isNonNullish(activeDynamicViewStep))
+          && (connectedToFocusedNode || isNotAFirstClick || isNonNullish(activeWalkthrough))
         ) {
-          const nextStep = extractStep(xyedge.data.edge.id)
-          if (activeDynamicViewStep !== nextStep) {
-            activateDynamicStep(nextStep)
+          const nextStep = xyedge.data.edge.id
+          if (activeWalkthrough?.stepId !== nextStep) {
+            activateWalkthrough(nextStep)
             event.stopPropagation()
             return
           }
         }
-        // if we focused on a node, and clicked on an edge connected to it - focus on the other node
-        if (isEdgeOfFocusedNode) {
-          focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source)
+        // if we are in focus mode
+        if (isTruthy(focusedNodeId)) {
+          // if we focused on a node, and clicked on an edge connected to it - focus on the other node
+          if (connectedToFocusedNode) {
+            focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source)
+          } else {
+            focusOnNode(xyedge.source)
+          }
           if (!onEdgeClick) {
             event.stopPropagation()
           }
@@ -234,11 +234,10 @@ export function useXYFlowEvents() {
             event.stopPropagation()
           }
         }
-        onEdgeClick?.({
-          edge: xyedge.data.edge,
-          xyedge,
+        onEdgeClick?.(
+          xyedge.data.edge,
           event
-        })
+        )
       },
       onEdgeDoubleClick: (event, xyedge) => {
         diagramApi.getState().setLastClickedEdge(xyedge.id)
@@ -247,14 +246,14 @@ export function useXYFlowEvents() {
           isDynamicView,
           enableDynamicViewWalkthrough,
           focusOnNode,
-          activateDynamicStep,
-          activeDynamicViewStep
+          activeWalkthrough,
+          activateWalkthrough
         } = diagramApi.getState()
         // if we are in dynamic view, and clicked on an edge, activate the step
         if (isDynamicView && enableDynamicViewWalkthrough) {
-          const nextStep = extractStep(xyedge.data.edge.id)
-          if (activeDynamicViewStep !== nextStep) {
-            activateDynamicStep(extractStep(xyedge.data.edge.id))
+          const nextStep = xyedge.data.edge.id
+          if (activeWalkthrough?.stepId !== nextStep) {
+            activateWalkthrough(nextStep)
             event.stopPropagation()
           }
           return

package/src/xyflow/XYFlowInner.tsx

@@ -17,7 +17,7 @@ type XYFlowInnerProps = PropsWithChildren<{
   showDiagramTitle: boolean
 }>
 
-export const XYFlowInner = memo(function XYFlowInnerR({
+export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
   children,
   background,
   controls,
@@ -34,18 +34,18 @@ export const XYFlowInner = memo(function XYFlowInnerR({
     isDynamicView: s.isDynamicView,
     readonly: s.readonly,
     enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
-    isDynamicViewActive: isNonNullish(s.activeDynamicViewStep)
+    isDynamicViewActive: isNonNullish(s.activeWalkthrough)
   }))
 
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
 
-  const isDiagramTitleVisible = showDiagramTitle === true && !isDynamicViewActive
+  const isDiagramTitleVisible = showDiagramTitle && !isDynamicViewActive
   return (
     <>
       {isBgWithPattern && <XYFlowBackground background={background} />}
-      {controls && <Controls position={'bottom-right'} />}
+      {controls && <Controls showInteractive={false} position={'top-center'} />}
       <TopLeftPanel />
-      {readonly !== true && <OptionsPanel />}
+      {!readonly && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
       {showNotations && <NotationPanel />}

package/src/xyflow/edges/EdgeLabel.tsx

@@ -0,0 +1,185 @@
+import { extractStep, isStepEdgeId, type ViewID } from '@likec4/core'
+import {
+  ActionIcon,
+  Box,
+  type BoxProps,
+  Button,
+  CloseButton,
+  Group,
+  Popover,
+  PopoverDropdown,
+  PopoverTarget,
+  ScrollAreaAutosize,
+  Stack,
+  Text
+} from '@mantine/core'
+import { useDebouncedEffect } from '@react-hookz/web'
+import { IconZoomScan } from '@tabler/icons-react'
+import { EdgeLabelRenderer } from '@xyflow/react'
+import clsx from 'clsx'
+import { type PropsWithChildren, type ReactNode, useState } from 'react'
+import { isTruthy } from 'remeda'
+import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from '../../hooks'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
+import type { RelationshipData } from '../types'
+import * as edgesCss from './edges.css'
+import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
+
+export interface EdgeLabelProps extends Omit<BoxProps, 'label'> {
+  isDimmed: boolean
+  edgeData: RelationshipData
+}
+
+export const EdgeLabel = ({
+  isDimmed,
+  edgeData: {
+    label,
+    edge
+  },
+  ...props
+}: EdgeLabelProps) => {
+  const likec4model = useLikeC4Model()
+  const {
+    showRelationshipDetails,
+    isActiveWalkthroughStep,
+    hasOnNavigateTo
+  } = useDiagramState(s => ({
+    showRelationshipDetails: s.showRelationshipDetails,
+    isActiveWalkthroughStep: s.activeWalkthrough?.stepId === edge.id,
+    hasOnNavigateTo: !!s.onNavigateTo
+  }))
+  const notes = isActiveWalkthroughStep ? (edge.notes ?? null) : null
+  const stepNum = isStepEdgeId(edge.id) ? extractStep(edge.id) : null
+  const navigateTo = hasOnNavigateTo ? edge.navigateTo ?? null : null
+
+  const wrapWithPopover = (node: ReactNode) => {
+    if (isTruthy(notes)) {
+      return <NotePopover notes={notes}>{node}</NotePopover>
+    }
+    if (showRelationshipDetails && likec4model && edge.relations.length > 0) {
+      return (
+        <RelationshipsDropdownMenu
+          disabled={isDimmed}
+          likec4model={likec4model}
+          edge={edge}>
+          {node}
+        </RelationshipsDropdownMenu>
+      )
+    }
+    return node
+  }
+
+  return (
+    <EdgeLabelRenderer>
+      {wrapWithPopover(
+        <Box {...props}>
+          {stepNum !== null && (
+            <Box className={edgesCss.stepEdgeNumber}>
+              {stepNum}
+            </Box>
+          )}
+          {isTruthy(label?.text) && (
+            <Box className={edgesCss.edgeLabelText}>
+              {label.text}
+            </Box>
+          )}
+          {navigateTo && <NavigateToBtn viewId={navigateTo} />}
+        </Box>
+      )}
+    </EdgeLabelRenderer>
+  )
+}
+
+const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>) => {
+  const {
+    nextDynamicStep,
+    hasNext,
+    hasPrevious
+  } = useDiagramState(s => ({
+    nextDynamicStep: s.nextDynamicStep,
+    hasNext: s.activeWalkthrough?.hasNext ?? false,
+    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false
+  }))
+
+  const [isOpened, setIsOpened] = useState(false)
+  const portalProps = useMantinePortalProps()
+
+  useDebouncedEffect(
+    () => {
+      setIsOpened(true)
+    },
+    [],
+    300
+  )
+
+  return (
+    <Popover
+      shadow="xs"
+      offset={16}
+      opened={isOpened}
+      closeOnClickOutside={false}
+      {...portalProps}>
+      <PopoverTarget>
+        {children}
+      </PopoverTarget>
+      <PopoverDropdown
+        component={Stack}
+        p={'xs'}
+        onPointerDownCapture={e => e.stopPropagation()}
+        onClick={e => e.stopPropagation()}
+        onDoubleClick={e => e.stopPropagation()}
+      >
+        <ScrollAreaAutosize maw={450} mah={350} type="scroll" mx={'auto'} mt={2}>
+          <Text component="div" className={edgesCss.edgeNoteText} p={4}>{notes}</Text>
+        </ScrollAreaAutosize>
+        <CloseButton
+          size={'xs'}
+          className={edgesCss.edgeNoteCloseButton}
+          onClick={() => setIsOpened(false)}
+        />
+        {(hasPrevious || hasNext) && (
+          <Group gap={0} justify={hasPrevious ? 'flex-start' : 'flex-end'}>
+            {hasPrevious && (
+              <Button
+                variant="subtle"
+                radius={'xs'}
+                size="compact-xs"
+                onClick={() => nextDynamicStep(-1)}>
+                back
+              </Button>
+            )}
+            {hasNext && (
+              <Button variant="subtle" radius={'xs'} size="compact-xs" onClick={() => nextDynamicStep()}>
+                next
+              </Button>
+            )}
+          </Group>
+        )}
+      </PopoverDropdown>
+    </Popover>
+  )
+}
+
+type NavigateToBtnProps = {
+  viewId: ViewID
+}
+
+function NavigateToBtn({ viewId }: NavigateToBtnProps) {
+  const diagramApi = useDiagramStoreApi()
+  return (
+    <ActionIcon
+      className={clsx('nodrag nopan', edgesCss.cssNavigateBtn)}
+      size={'sm'}
+      radius="sm"
+      onPointerDownCapture={e => e.stopPropagation()}
+      onClick={event => {
+        event.stopPropagation()
+        diagramApi.getState().onNavigateTo?.(viewId, event)
+      }}
+      role="button"
+      onDoubleClick={event => event.stopPropagation()}
+    >
+      <IconZoomScan className={edgesCss.cssNavigateBtnIcon} />
+    </ActionIcon>
+  )
+}