fix(library): stop resize cursors on borders a node can't resize (#818)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: FelixTJDietrich

.changeset/fix-resize-cursor-locked-axis.md

@@ -0,0 +1,5 @@
+---
+"@tumaet/apollon": patch
+---
+
+Fixed resize handles across every node. Borders that can't resize no longer show a resize cursor — a class's height is driven by its attributes and methods, so its top and bottom borders used to offer a vertical-resize cursor and a drag that did nothing. Content-sized nodes keep their corner handles and resize only along the axis that can change. And on filled nodes such as activity swimlanes, the edge you drag to resize is now grabbable instead of hiding behind the node — previously only the corners worked.

library/eslint.config.mjs

@@ -40,11 +40,22 @@ export default [
         "error",
         { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
       ],
-      // The library styles with Base UI + raw CSS + --apollon-* tokens.
-      // It must never depend on MUI or a CSS-in-JS runtime (Emotion).
+      // `paths`: React Flow's NodeResizer renders controls on axes a node has
+      // pinned, so nodes must reach it through the wrapper that knows the
+      // difference. `patterns`: the library styles with Base UI + raw CSS +
+      // --apollon-* tokens, and must never depend on MUI or a CSS-in-JS
+      // runtime (Emotion).
       "no-restricted-imports": [
         "error",
         {
+          paths: [
+            {
+              name: "@xyflow/react",
+              importNames: ["NodeResizer"],
+              message:
+                "Import NodeResizer from @/nodes/wrappers. React Flow's renders resize controls on axes a node has pinned, which offers a cursor and a drag that do nothing.",
+            },
+          ],
           patterns: [
             {
               group: ["@mui/*", "@mui"],

library/lib/components/wrapper/FeedbackDropzone.tsx

@@ -9,15 +9,13 @@ interface Props {
   elementId: string
   elementType?: string
   asElement?: "g" | "div" | "path"
-  className?: string
 }
 
 export const FeedbackDropzone: React.FC<Props> = ({
   children,
   elementId,
   elementType,
   asElement = "g",
-  className,
 }) => {
   const { mode, readonly } = useMetadataStore(
     useShallow((store) => ({
@@ -94,7 +92,6 @@ export const FeedbackDropzone: React.FC<Props> = ({
         onDragLeave={handleDragLeave}
         onDragOver={handleDragOver}
         style={hoverStyle}
-        className={className}
       >
         {children}
       </div>

library/lib/nodes/TitleAndDescriptionNode.tsx

@@ -1,5 +1,5 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
-import { DefaultNodeWrapper } from "@/nodes/wrappers"
+import { NodeProps, type Node } from "@xyflow/react"
+import { DefaultNodeWrapper, NodeResizer } from "@/nodes/wrappers"
 import { TitleAndDescriptionSVG } from "@/components"
 
 type Props = Node<{
@@ -30,11 +30,7 @@ export function TitleAndDesctiption({
         title={title}
         description={description || ""}
       />
-      <NodeResizer
-        isVisible
-        minHeight={200}
-        handleStyle={{ width: 8, height: 8 }}
-      />
+      <NodeResizer isVisible minHeight={200} />
     </DefaultNodeWrapper>
   )
 }

library/lib/nodes/activityDiagram/Activity.tsx

@@ -1,6 +1,6 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { NodeProps, type Node } from "@xyflow/react"
 import { usePopoverAnchor } from "@/hooks/usePopoverAnchor"
-import { DefaultNodeWrapper } from "../wrappers"
+import { DefaultNodeWrapper, NodeResizer } from "../wrappers"
 import { useHandleOnResize } from "@/hooks"
 import { DefaultNodeProps } from "@/types"
 import { PopoverManager } from "@/components/popovers/PopoverManager"
@@ -31,7 +31,6 @@ export function Activity({
         onResize={onResize}
         minHeight={50}
         minWidth={50}
-        handleStyle={{ width: 8, height: 8 }}
       />
       <div ref={anchorRef}>
         <ActivitySVG

library/lib/nodes/activityDiagram/ActivityActionNode.tsx

@@ -1,6 +1,6 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { NodeProps, type Node } from "@xyflow/react"
 import { usePopoverAnchor } from "@/hooks/usePopoverAnchor"
-import { DefaultNodeWrapper } from "../wrappers"
+import { DefaultNodeWrapper, NodeResizer } from "../wrappers"
 import { useHandleOnResize } from "@/hooks"
 import { DefaultNodeProps } from "@/types"
 import { PopoverManager } from "@/components/popovers/PopoverManager"
@@ -31,7 +31,6 @@ export function ActivityActionNode({
         onResize={onResize}
         minHeight={50}
         minWidth={50}
-        handleStyle={{ width: 8, height: 8 }}
       />
       <div ref={anchorRef}>
         <ActivityActionNodeSVG

library/lib/nodes/activityDiagram/ActivityForkNode.tsx

@@ -1,6 +1,6 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { NodeProps, type Node } from "@xyflow/react"
 import { usePopoverAnchor } from "@/hooks/usePopoverAnchor"
-import { DefaultNodeWrapper, HandleId } from "../wrappers"
+import { DefaultNodeWrapper, HandleId, NodeResizer } from "../wrappers"
 import { useHandleOnResize } from "@/hooks"
 import { DefaultNodeProps } from "@/types"
 import { PopoverManager } from "@/components/popovers/PopoverManager"
@@ -34,15 +34,13 @@ export function ActivityForkNode({
         HandleId.BottomLeft,
         HandleId.BottomRight,
       ]}
-      className="vertically-not-resizable"
     >
       <NodeToolbar elementId={id} />
       <NodeResizer
         isVisible={isDiagramModifiable}
         onResize={onResize}
         minWidth={20}
         maxWidth={20}
-        handleStyle={{ width: 8, height: 8 }}
       />
       <div ref={anchorRef}>
         <ActivityForkNodeSVG

library/lib/nodes/activityDiagram/ActivityForkNodeHorizontal.tsx

@@ -1,6 +1,6 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { NodeProps, type Node } from "@xyflow/react"
 import { usePopoverAnchor } from "@/hooks/usePopoverAnchor"
-import { DefaultNodeWrapper, HandleId } from "../wrappers"
+import { DefaultNodeWrapper, HandleId, NodeResizer } from "../wrappers"
 import { useHandleOnResize } from "@/hooks"
 import { DefaultNodeProps } from "@/types"
 import { PopoverManager } from "@/components/popovers/PopoverManager"
@@ -34,15 +34,13 @@ export function ActivityForkNodeHorizontal({
         HandleId.RightTop,
         HandleId.RightBottom,
       ]}
-      className="horizontally-not-resizable"
     >
       <NodeToolbar elementId={id} />
       <NodeResizer
         isVisible={isDiagramModifiable}
         onResize={onResize}
         minHeight={20}
         maxHeight={20}
-        handleStyle={{ width: 8, height: 8 }}
       />
       <div ref={anchorRef}>
         <ActivityForkNodeHorizontalSVG

library/lib/nodes/activityDiagram/ActivityMergeNode.tsx

@@ -1,6 +1,10 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { NodeProps, type Node } from "@xyflow/react"
 import { usePopoverAnchor } from "@/hooks/usePopoverAnchor"
-import { DefaultNodeWrapper, FOUR_WAY_HANDLES_PRESET } from "../wrappers"
+import {
+  DefaultNodeWrapper,
+  FOUR_WAY_HANDLES_PRESET,
+  NodeResizer,
+} from "../wrappers"
 import { useHandleOnResize } from "@/hooks"
 import { DefaultNodeProps } from "@/types"
 import { PopoverManager } from "@/components/popovers/PopoverManager"
@@ -37,7 +41,6 @@ export function ActivityMergeNode({
         onResize={onResize}
         minHeight={50}
         minWidth={50}
-        handleStyle={{ width: 8, height: 8 }}
       />
       <div ref={anchorRef}>
         <ActivityMergeNodeSVG

library/lib/nodes/activityDiagram/ActivityObjectNode.tsx

@@ -1,6 +1,6 @@
-import { NodeProps, NodeResizer, type Node } from "@xyflow/react"
+import { NodeProps, type Node } from "@xyflow/react"
 import { usePopoverAnchor } from "@/hooks/usePopoverAnchor"
-import { DefaultNodeWrapper } from "../wrappers"
+import { DefaultNodeWrapper, NodeResizer } from "../wrappers"
 import { useHandleOnResize } from "@/hooks"
 import { DefaultNodeProps } from "@/types"
 import { PopoverManager } from "@/components/popovers/PopoverManager"
@@ -32,7 +32,6 @@ export function ActivityObjectNode({
         onResize={onResize}
         minHeight={50}
         minWidth={50}
-        handleStyle={{ width: 8, height: 8 }}
       />
       <div ref={anchorRef}>
         <ActivityObjectNodeSVG