@likec4/diagram 1.0.2 → 1.1.1

package/src/ui/options/NodeOptions.tsx

@@ -1,8 +1,9 @@
 import {
+  ElementShapes,
   defaultTheme,
+  invariant,
+  type BorderStyle,
   type ElementShape,
-  ElementShapes,
-  type Fqn,
   type NonEmptyArray,
   type ThemeColor
 } from '@likec4/core'
@@ -12,14 +13,18 @@ import {
   ColorSwatch,
   Divider,
   Flex,
-  rem,
+  SegmentedControl,
   Select,
+  Slider,
   Stack,
   Text,
   Tooltip,
-  TooltipGroup
+  TooltipGroup,
+  rem
 } from '@mantine/core'
+import { useEffect, useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
+import type { Changes } from '../../LikeC4Diagram.props'
 import { useDiagramStoreApi } from '../../state'
 import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
@@ -52,15 +57,34 @@ export type ColorKey = typeof colors[0]['key']
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
 export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
+// export function NodeOptions(props: { nodes: XYFlowNode[] }) {
   const diagramApi = useDiagramStoreApi()
+  // const nodes = useXYNodesData(props.nodes.map(node => node.id))
   const nodes = useXYNodesData(selectedNodeIds)
   if (!hasAtLeast(nodes, 1)) {
     return null
   }
+  if (nodes.length !== selectedNodeIds.length) {
+    throw new Error('NodeOptions: nodes and props.nodes should have the same length')
+  }
   // Makes sense to show shape option only if there is at least one element node
   const showShapeOption = nodes.some(node => node.type === 'element')
 
   const [firstNode, ...rest] = nodes
+
+  // Makes sense to show opacity option only if there is at least one compound node
+  const showOpacityOption = rest.length === 0 && firstNode.type === 'compound'
+
+  const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
+    const targets = nodes.map(node => node.data.element.id)
+    invariant(hasAtLeast(targets, 1), 'At least one target is required')
+    diagramApi.getState().triggerOnChange([{
+      op: 'change-element-style',
+      style,
+      targets
+    }])
+  }
+
   return (
     <Stack>
       <Box maw={200}>
@@ -72,39 +96,33 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
         <ShapeOption
           nodes={nodes}
           onShapeChange={(shape: ElementShape) => {
-            const targets = [] as Fqn[]
-            for (const nd of nodes) {
-              if (nd.data.element.shape !== shape) {
-                targets.push(nd.data.element.id)
-              }
-            }
-            if (hasAtLeast(targets, 1)) {
-              diagramApi.getState().triggerOnChange([{
-                op: 'change-shape',
-                shape,
-                targets
-              }])
-            }
+            triggerChange({ shape })
           }} />
       )}
       <Colors
         nodes={nodes}
         onColorChange={(color: ColorKey | ThemeColorKey) => {
-          const targets = [] as Fqn[]
-          for (const nd of nodes) {
-            if (nd.data.element.color !== color) {
-              targets.push(nd.data.element.id)
-            }
-          }
-          if (hasAtLeast(targets, 1)) {
-            diagramApi.getState().triggerOnChange([{
-              op: 'change-color',
-              color,
-              targets
-            }])
-          }
+          triggerChange({ color })
         }} />
       <NavigateToOption nodes={nodes} />
+      <Box key={firstNode.id}>
+        {showOpacityOption && (
+          <>
+            <Divider label="opacity and border" labelPosition="left" />
+            <OpacityOption
+              node={firstNode}
+              onOpacityChange={(opacity: number) => {
+                triggerChange({ opacity })
+              }} />
+            <BorderStyleOption
+              node={firstNode}
+              onChange={(border: BorderStyle) => {
+                triggerChange({ border })
+              }}
+            />
+          </>
+        )}
+      </Box>
     </Stack>
   )
 }
@@ -251,3 +269,62 @@ function NavigateToOption({
     </Box>
   )
 }
+
+function OpacityOption({
+  node,
+  onOpacityChange
+}: {
+  node: XYNodesData
+  onOpacityChange: (opacity: number) => void
+}) {
+  let selectedOpacity = node.data.element.style.opacity ?? 100
+  const [value, setValue] = useState(selectedOpacity)
+  useEffect(() => {
+    setValue(selectedOpacity)
+  }, [selectedOpacity])
+
+  return (
+    <Slider
+      mt={'xs'}
+      size={'sm'}
+      color={'dark'}
+      value={value}
+      onChange={setValue}
+      onChangeEnd={onOpacityChange} />
+  )
+}
+
+function BorderStyleOption({
+  node,
+  onChange
+}: {
+  node: XYNodesData
+  onChange: (borderStyle: BorderStyle) => void
+}) {
+  let selecteBorderStyle = node.data.element.style.border ?? 'dashed'
+  const [value, setValue] = useState(selecteBorderStyle)
+  useEffect(() => {
+    setValue(selecteBorderStyle)
+  }, [selecteBorderStyle])
+
+  return (
+    <Box mt={'md'}>
+      <SegmentedControl
+        size="xs"
+        fullWidth
+        withItemsBorders={false}
+        value={value}
+        onChange={v => {
+          setValue(v as BorderStyle)
+          onChange(v as BorderStyle)
+        }}
+        data={[
+          { label: 'Solid', value: 'solid' },
+          { label: 'Dashed', value: 'dashed' },
+          { label: 'Dotted', value: 'dotted' },
+          { label: 'None', value: 'none' }
+        ]}
+      />
+    </Box>
+  )
+}

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,6 +1,5 @@
-import { useDebouncedEffect, useDebouncedState, useRafEffect } from '@react-hookz/web'
+import { useDebouncedCallback, useDebouncedEffect, useRafEffect } from '@react-hookz/web'
 import { useNodesInitialized } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
 import { memo, useEffect, useRef, useState } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
 import { useXYStore } from './hooks'
@@ -38,29 +37,36 @@ function FitViewOnDiagramChanges() {
   const diagramApi = useDiagramStoreApi()
   const [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged)
   const [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState()))
-  const [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 100)
+  const [pendingChangeId, setPending] = useState(processedChangeId)
 
   const isReady = useNodesInitialized({
     includeHiddenNodes: true
   })
 
-  useEffect(
-    () => {
-      return diagramApi.subscribe(
-        s => ({
-          viewportMoved: s.viewportChanged,
-          changeid: diagramChangeId(s)
-        }),
-        ({ viewportMoved, changeid }) => {
-          setPending(changeid)
-          setViewportMoved(viewportMoved)
-        },
-        {
-          equalityFn: shallowEqual
-        }
-      )
+  const schedulePending = useDebouncedCallback(
+    (pendingChangeId: string) => {
+      setPending(pendingChangeId)
     },
-    [diagramApi]
+    [setPending],
+    75
+  )
+
+  useEffect(
+    () =>
+      diagramApi.subscribe(
+        s => diagramChangeId(s),
+        schedulePending
+      ),
+    [diagramApi, schedulePending]
+  )
+
+  useEffect(
+    () =>
+      diagramApi.subscribe(
+        s => s.viewportChanged,
+        setViewportMoved
+      ),
+    [diagramApi, setViewportMoved]
   )
 
   useRafEffect(
@@ -71,7 +77,7 @@ function FitViewOnDiagramChanges() {
       diagramApi.getState().fitDiagram()
       setProcessed(pendingChangeId)
     },
-    [isReady, processedChangeId, pendingChangeId]
+    [isReady, processedChangeId, pendingChangeId, diagramApi]
   )
 
   if (!viewportMoved && isReady) {

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -0,0 +1,57 @@
+import type { EdgeChange, NodeChange } from '@xyflow/react'
+import { useUpdateEffect } from '../hooks'
+import { useDiagramState } from '../state/useDiagramStore'
+import { useXYStoreApi } from './hooks/useXYFlow'
+import type { XYFlowEdge, XYFlowNode } from './types'
+
+export function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState(s => s.focusedNodeId)
+  const xyflowApi = useXYStoreApi()
+
+  useUpdateEffect(() => {
+    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
+    const nodeChanges = [] as NodeChange<XYFlowNode>[]
+    const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState()
+    if (focusedNodeId) {
+      for (const edge of edges) {
+        if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+          edgeChanges.push({
+            id: edge.id,
+            type: 'select',
+            selected: true
+          })
+        } else if (edge.selected) {
+          edgeChanges.push({
+            id: edge.id,
+            type: 'select',
+            selected: false
+          })
+        }
+      }
+      for (const node of nodes) {
+        if (node.selected && node.id !== focusedNodeId) {
+          nodeChanges.push({
+            id: node.id,
+            type: 'select',
+            selected: false
+          })
+        }
+      }
+      nodeChanges.push({
+        id: focusedNodeId,
+        type: 'select',
+        selected: true
+      })
+      if (edgeChanges.length > 0) {
+        triggerEdgeChanges(edgeChanges)
+      }
+      if (nodeChanges.length > 0) {
+        triggerNodeChanges(nodeChanges)
+      }
+    } else {
+      xyflowApi.getState().resetSelectedElements()
+    }
+  }, [focusedNodeId])
+
+  return null
+}

package/src/xyflow/SyncWithDiagram.tsx

@@ -27,14 +27,20 @@ export const SyncWithDiagram = memo(() => {
       state => ({
         viewId: state.view.id,
         nodes: state.view.nodes,
-        edges: state.view.edges,
-        draggable: state.nodesDraggable,
-        selectable: state.nodesSelectable
+        edges: state.view.edges
       }),
       // listener
-      ({ viewId, nodes, edges, ...opts }) => {
-        const { lastOnNavigate } = diagramStoreApi.getState()
-        const updates = diagramViewToXYFlowData({ nodes, edges }, opts)
+      ({ viewId, nodes, edges }) => {
+        const {
+          lastOnNavigate,
+          nodesDraggable,
+          nodesSelectable,
+          focusedNodeId
+        } = diagramStoreApi.getState()
+        const updates = diagramViewToXYFlowData({ nodes, edges }, {
+          draggable: nodesDraggable,
+          selectable: nodesSelectable || focusedNodeId !== null
+        })
 
         xyflowRef.current.setNodes(prev =>
           updates.nodes.map(update => {
@@ -65,33 +71,36 @@ export const SyncWithDiagram = memo(() => {
           })
         )
 
-        if (lastOnNavigate?.toView === viewId && !lastOnNavigate.positionCorrected) {
+        if (lastOnNavigate?.toView === viewId && lastOnNavigate.positionCorrected !== true) {
           const elFrom = lastOnNavigate.element
           const elTo = nodes.find(n => n.id === elFrom.id)
           if (elTo) {
             const centerFrom = lastOnNavigate.elementCenterScreenPosition
-            const nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
+            let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
 
+            // TODO: investigate why 2 animation frames are needed
             requestAnimationFrame(() => {
-              // requestAnimationFrame(() => {
-              const v = xyflowRef.current.getViewport()
-              if (nextZoom < v.zoom) {
-                xyflowRef.current.setViewport({
-                  x: v.x,
-                  y: v.y,
-                  zoom: nextZoom
-                })
-              }
-              const centerTo = xyflowRef.current.flowToScreenPosition({
-                  x: elTo.position[0] + elTo.width / 2,
-                  y: elTo.position[1] + elTo.height / 2
-                }),
-                diff = {
-                  x: toDomPrecision(centerFrom.x - centerTo.x),
-                  y: toDomPrecision(centerFrom.y - centerTo.y)
+              requestAnimationFrame(() => {
+                const v = xyflowRef.current.getViewport()
+                if (nextZoom < v.zoom) {
+                  nextZoom = Math.max(nextZoom, v.zoom * 0.5)
+                  xyflowRef.current.setViewport({
+                    x: v.x,
+                    y: v.y,
+                    zoom: nextZoom
+                  })
                 }
-              xyflowApi.getState().panBy(diff)
-              // })
+
+                const centerTo = xyflowRef.current.flowToScreenPosition({
+                    x: elTo.position[0] + elTo.width / 2,
+                    y: elTo.position[1] + elTo.height / 2
+                  }),
+                  diff = {
+                    x: toDomPrecision(centerFrom.x - centerTo.x),
+                    y: toDomPrecision(centerFrom.y - centerTo.y)
+                  }
+                xyflowApi.getState().panBy(diff)
+              })
             })
           }
           diagramStoreApi.setState(

package/src/xyflow/{XYFlowWrapper.tsx → XYFlow.tsx}

@@ -1,5 +1,6 @@
 import { useMantineColorScheme } from '@mantine/core'
-import { Controls, ReactFlow } from '@xyflow/react'
+import { Controls, PanOnScrollMode, ReactFlow } from '@xyflow/react'
+import { DEV } from 'esm-env'
 import { type CSSProperties, memo, type PropsWithChildren } from 'react'
 import type { SetNonNullable, Simplify } from 'type-fest'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
@@ -9,6 +10,7 @@ import { RelationshipEdge } from './edges/RelationshipEdge'
 import { useLayoutConstraints } from './hooks/useLayoutConstraints'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
+import { SelectEdgesOnNodeFocus } from './SelectEdgesOnNodeFocus'
 import { XYFlowEdge, XYFlowNode } from './types'
 import { XYFlowBackground } from './XYFlowBackground'
 import { useXYFlowEvents } from './XYFlowEvents'
@@ -26,8 +28,6 @@ type OnlyExpectedProps = Required<
     LikeC4DiagramProperties,
     | 'className'
     | 'controls'
-    | 'pannable'
-    | 'zoomable'
     | 'background'
   >
 >
@@ -43,7 +43,7 @@ type XYFlowWrapperProps = Simplify<
 >
 
 const selector = (s: DiagramState) => ({
-  nodesSelectable: s.nodesSelectable,
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
@@ -53,7 +53,8 @@ const selector = (s: DiagramState) => ({
   hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
   hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
   hasOnEdgeClick: !!s.onEdgeClick,
-  hasOnCanvasClick: !!s.onCanvasClick || !!s.onCanvasDblClick
+  zoomable: s.zoomable,
+  pannable: s.pannable
 })
 
 function XYFlowWrapper({
@@ -61,8 +62,6 @@ function XYFlowWrapper({
   children,
   defaultNodes,
   defaultEdges,
-  pannable,
-  zoomable,
   controls,
   background,
   style
@@ -73,6 +72,8 @@ function XYFlowWrapper({
     nodesDraggable,
     fitView,
     fitViewPadding,
+    pannable,
+    zoomable,
     ...editor
   } = useDiagramState(selector)
 
@@ -120,33 +121,28 @@ function XYFlowWrapper({
         selectionKeyCode: null
       })}
       nodesDraggable={nodesDraggable}
-      {...(nodesDraggable && layoutConstraints)}
+      {...nodesDraggable && {
+        onNodeDragStart: layoutConstraints.onNodeDragStart,
+        onNodeDrag: layoutConstraints.onNodeDrag,
+        onNodeDragStop: layoutConstraints.onNodeDragStop
+      }}
       zoomOnDoubleClick={false}
       elevateNodesOnSelect={false} // or edges are not visible after select
       selectNodesOnDrag={false} // or weird camera movement
+      onDoubleClick={handlers.onDoubleClick}
       onPaneClick={handlers.onPaneClick}
-      {...(editor.hasOnNodeClick && {
-        onNodeClick: handlers.onNodeClick
-      })}
-      {...(editor.hasOnEdgeClick && {
-        onEdgeClick: handlers.onEdgeClick
-      })}
       onMoveEnd={handlers.onMoveEnd}
+      onNodeMouseEnter={handlers.onNodeMouseEnter}
+      onNodeMouseLeave={handlers.onNodeMouseLeave}
+      onEdgeMouseEnter={handlers.onEdgeMouseEnter}
+      onEdgeMouseLeave={handlers.onEdgeMouseLeave}
+      onNodeClick={handlers.onNodeClick}
+      onNodeDoubleClick={handlers.onNodeDoubleClick}
+      onEdgeClick={handlers.onEdgeClick}
+      onViewportChange={handlers.onViewportChange}
       onInit={() => {
         diagramApi.setState({ initialized: true }, false, 'initialized')
       }}
-      onNodeMouseEnter={(_event, node) => {
-        diagramApi.getState().setHoveredNode(node.id)
-      }}
-      onNodeMouseLeave={() => {
-        diagramApi.getState().setHoveredNode(null)
-      }}
-      onEdgeMouseEnter={(_event, edge) => {
-        diagramApi.getState().setHoveredEdge(edge.id)
-      }}
-      onEdgeMouseLeave={() => {
-        diagramApi.getState().setHoveredEdge(null)
-      }}
       {...(editor.hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       })}
@@ -157,7 +153,8 @@ function XYFlowWrapper({
         onPaneContextMenu: handlers.onPaneContextMenu
       })}>
       {isBgWithPattern && <XYFlowBackground background={background} />}
-      {controls && <Controls />}
+      {controls && <Controls position={'bottom-right'} />}
+      {zoomable && !editor.hasOnNodeClick && <SelectEdgesOnNodeFocus />}
       {children}
     </ReactFlow>
   )