fix(library): keep corner resize handles on content-sized nodes

Follow-up on the resize-cursor fix: keep the four corner handles on a
node with a pinned axis instead of dropping them. React Flow's corners
resize both axes, so on a content-sized node they showed a diagonal
cursor for a resize that can only go one way. Constrain each corner to
the free axis with React Flow's `resizeDirection` and relabel its cursor
to that axis, so the familiar corner handles stay, still resize the axis
that can change, and never point a direction the drag won't go.

Removes the widened line hit-area (the corners are the grab target
again) and restores the class-based fixture in the affordance e2e.

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

Author: FelixTJDietrich

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

@@ -2,4 +2,4 @@
 "@tumaet/apollon": patch
 ---
 
-Nodes no longer offer a resize cursor on borders that can't resize. A class's height is driven by its attributes and methods, so its top and bottom borders showed a resize cursor and accepted a drag that did nothing. Content-sized nodes — classes, object and communication-object nodes, SFC action tables and the activity fork bars — now show resize controls only on the borders that can move: drag those side borders, which are easier to grab than before, rather than a corner.
+Nodes no longer show a resize cursor on borders that can't resize. A class's height is driven by its attributes and methods, so its top and bottom borders showed a vertical-resize cursor and accepted a drag that did nothing. Content-sized nodes — classes, object and communication-object nodes, SFC action tables and the activity fork bars — now resize only along the axis that can change: the corner handles stay, but they and the cursor only ever point that way.

library/lib/nodes/wrappers/NodeResizer.tsx

@@ -13,6 +13,13 @@ import {
 // React Flow's corner handles default to 5x5; every Apollon node wants 8x8.
 const HANDLE_STYLE = { width: 8, height: 8 }
 
+const CORNERS = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right",
+] as const
+
 // A node pins a content-sized dimension by bounding it from both sides — a
 // Class's height is driven by its attribute/method rows. Bounds that cross leave
 // no range to drag either, so they count as pinned; a side left unbounded never
@@ -22,14 +29,17 @@ const isAxisLocked = (min?: number, max?: number): boolean =>
 
 /**
  * React Flow's `<NodeResizer>` always renders four edge lines and four corner
- * handles, so a pinned axis still shows a resize cursor and accepts a drag that
- * does nothing. Rendering only the controls that can move is the fix; the cursor
- * is a signifier, and repainting it would leave the dead control behind.
+ * handles, and its stylesheet paints each with a resize cursor. On a node with a
+ * pinned axis, the two edge lines of that axis promise a resize that can't
+ * happen (issue #629), and every corner shows a diagonal cursor even though only
+ * one axis can move.
  *
- * `resizeDirection` is not an alternative: it sits on `NodeResizeControl`, and
- * `ResizeControlLineProps` omits it outright. It constrains a corner's drag
- * while leaving the diagonal cursor that lies about it, so corners go rather
- * than get constrained.
+ * So on a pinned axis this drops that axis's two edge lines and keeps the
+ * corners — the familiar, chunky grab target — but constrains each corner to the
+ * free axis with `resizeDirection` and relabels its cursor (`apollon-resize-
+ * corner--*` in app.css) to that axis. The result: a content-sized node still
+ * looks and works resizable on the axis it can change, and no cursor anywhere
+ * points a direction the drag won't go.
  */
 export function NodeResizer(props: NodeResizerProps) {
   const {
@@ -38,16 +48,11 @@ export function NodeResizer(props: NodeResizerProps) {
     minHeight,
     maxWidth,
     maxHeight,
-    nodeId,
-    color,
-    keepAspectRatio,
-    autoScale,
-    shouldResize,
-    onResizeStart,
-    onResize,
-    onResizeEnd,
+    handleStyle,
+    handleClassName: _handleClassName,
     lineStyle,
     lineClassName,
+    ...resizeParams
   } = props
 
   // `isVisible` exists only on NodeResizerProps — NodeResizeControl has no such
@@ -61,39 +66,40 @@ export function NodeResizer(props: NodeResizerProps) {
     return <ReactFlowNodeResizer handleStyle={HANDLE_STYLE} {...props} />
   }
 
-  // Without this, a fully pinned node reads as height-locked below and gets the
-  // side controls it equally can't honour.
+  // Both axes pinned: nothing to resize.
   if (widthLocked && heightLocked) return null
 
-  const positions = heightLocked
+  const shared = { minWidth, minHeight, maxWidth, maxHeight, ...resizeParams }
+  const lines = heightLocked
     ? (["left", "right"] as const)
     : (["top", "bottom"] as const)
+  // The axis that can still move, for both React Flow's constraint and the cursor.
+  const freeAxis = heightLocked ? "horizontal" : "vertical"
+  const cornerClass = heightLocked
+    ? "apollon-resize-corner--x"
+    : "apollon-resize-corner--y"
 
-  // `keepAspectRatio` is the one prop that cannot mean anything here — it would
-  // ask the pinned axis to follow the free one. No node passes it.
   return (
     <>
-      {positions.map((position) => (
+      {lines.map((position) => (
         <NodeResizeControl
           key={position}
           position={position}
           variant={ResizeControlVariant.Line}
-          nodeId={nodeId}
-          color={color}
-          minWidth={minWidth}
-          minHeight={minHeight}
-          maxWidth={maxWidth}
-          maxHeight={maxHeight}
-          keepAspectRatio={keepAspectRatio}
-          autoScale={autoScale}
-          shouldResize={shouldResize}
-          onResizeStart={onResizeStart}
-          onResize={onResize}
-          onResizeEnd={onResizeEnd}
           style={lineStyle}
-          className={["apollon-resize-line", lineClassName]
-            .filter(Boolean)
-            .join(" ")}
+          className={lineClassName}
+          {...shared}
+        />
+      ))}
+      {CORNERS.map((position) => (
+        <NodeResizeControl
+          key={position}
+          position={position}
+          variant={ResizeControlVariant.Handle}
+          resizeDirection={freeAxis}
+          className={cornerClass}
+          style={{ ...HANDLE_STYLE, ...handleStyle }}
+          {...shared}
         />
       ))}
     </>

library/lib/styles/app.css

@@ -705,17 +705,18 @@
   z-index: 20;
 }
 
-/* React Flow draws its resize lines 1px wide. A node with a pinned axis has no
-   corner handles to fall back on (they promise a diagonal resize it can't
-   honour, so NodeResizer omits them), which would leave its one free axis the
-   hardest thing to grab in the editor. Widen the hit area without moving the
-   visible 1px border. Kept small because the target straddles the border, so it
-   also overhangs whatever the node sits on; the hover gate above is what keeps
-   that overhang from swallowing the neighbour's clicks. */
-.apollon-resize-line::before {
-  content: "";
-  position: absolute;
-  inset: -3px;
+/* A content-sized node keeps its corner handles (NodeResizer constrains each to
+   the node's free axis with `resizeDirection`), but React Flow hard-codes a
+   diagonal nwse/nesw cursor on every corner. Relabel it to the free axis's
+   cursor so the pointer tells the truth about which way a drag will go. The
+   fourth class (`nodrag`, present on every control) outranks React Flow's
+   three-class corner rules regardless of stylesheet order. */
+.react-flow__resize-control.nodrag.handle.apollon-resize-corner--x {
+  cursor: ew-resize;
+}
+
+.react-flow__resize-control.nodrag.handle.apollon-resize-corner--y {
+  cursor: ns-resize;
 }
 
 .react-flow__resize-control {

library/tests/unit/NodeResizer.test.tsx

@@ -15,12 +15,18 @@ const renderResizer = (props: Parameters<typeof NodeResizer>[0]) =>
 // no keyboard path — so a position/variant class is the only handle on them, and
 // it is the same published class React Flow's own stylesheet keys the resize
 // cursor off. (It also means dropping a control costs assistive tech nothing:
-// there was never anything there to reach.)
+// there was never anything there to reach.) `apollon-*` marker classes are
+// dropped here so the set reads as pure geometry; a dedicated test covers them.
 const controlClasses = (container: HTMLElement): string[] =>
   [...container.querySelectorAll(".react-flow__resize-control")]
     .map((el) =>
       [...el.classList]
-        .filter((c) => c !== "react-flow__resize-control" && c !== "nodrag")
+        .filter(
+          (c) =>
+            c !== "react-flow__resize-control" &&
+            c !== "nodrag" &&
+            !c.startsWith("apollon-")
+        )
         .join(".")
     )
     .sort()
@@ -51,32 +57,58 @@ describe("<NodeResizer>", () => {
     )
   })
 
-  // `apollon-resize-line` widens the hit area: with no corner handles these
-  // lines are the only grab target, and React Flow draws them 1px wide.
-  it("renders only the left/right lines when height is locked (issue #629)", () => {
+  // Height pinned: keep the corners, drop the top/bottom lines that promise a
+  // vertical resize (issue #629).
+  it("keeps corners but only the side lines when height is locked", () => {
     const { container } = renderResizer({
       minWidth: 100,
       minHeight: 60,
       maxHeight: 60,
     })
 
     expect(controlClasses(container)).toEqual([
-      "left.line.apollon-resize-line",
-      "right.line.apollon-resize-line",
+      "bottom.left.handle",
+      "bottom.right.handle",
+      "left.line",
+      "right.line",
+      "top.left.handle",
+      "top.right.handle",
     ])
   })
 
-  it("renders only the top/bottom lines when width is locked", () => {
+  it("labels a locked node's corners with the free axis's cursor", () => {
+    const { container } = renderResizer({
+      minWidth: 100,
+      minHeight: 60,
+      maxHeight: 60,
+    })
+
+    // Only width can move, so the corners get the horizontal-cursor marker (and
+    // never the vertical one).
+    expect(
+      container.querySelectorAll(".apollon-resize-corner--x")
+    ).toHaveLength(4)
+    expect(container.querySelector(".apollon-resize-corner--y")).toBeNull()
+  })
+
+  it("keeps corners but only the top/bottom lines when width is locked", () => {
     const { container } = renderResizer({
       minWidth: 20,
       maxWidth: 20,
       minHeight: 40,
     })
 
     expect(controlClasses(container)).toEqual([
-      "bottom.line.apollon-resize-line",
-      "top.line.apollon-resize-line",
+      "bottom.left.handle",
+      "bottom.line",
+      "bottom.right.handle",
+      "top.left.handle",
+      "top.line",
+      "top.right.handle",
     ])
+    expect(
+      container.querySelectorAll(".apollon-resize-corner--y")
+    ).toHaveLength(4)
   })
 
   it("renders nothing when both axes are locked", () => {

standalone/webapp/tests/e2e/node-affordance-click-through.spec.ts

@@ -39,19 +39,6 @@ const OVERLAP_MODEL = {
   ],
 }
 
-// Same overlap, but packages: a class's height is content-driven, so it renders
-// no corner resize handles at all. Only a node that is resizable on both axes
-// has a corner that can overhang onto its neighbour.
-const OVERLAP_MODEL_RESIZABLE = {
-  ...OVERLAP_MODEL,
-  id: "e2e-affordance-blocking-resizable",
-  nodes: OVERLAP_MODEL.nodes.map((n) => ({
-    ...n,
-    type: "package",
-    data: { name: n.data.name },
-  })),
-}
-
 const CONNECT_MODEL = {
   id: "e2e-affordance-connect",
   type: "ClassDiagram",
@@ -119,10 +106,7 @@ test("a selected node's connection handles don't block an overlapping node", asy
 test("a selected node's resize handle doesn't block an overlapping node", async ({
   page,
 }) => {
-  await openFixtureInLocalEditor(
-    page,
-    OVERLAP_MODEL_RESIZABLE as Record<string, unknown>
-  )
+  await openFixtureInLocalEditor(page, OVERLAP_MODEL as Record<string, unknown>)
   await waitForCanvasReady(page)
 
   const alpha = node(page, "Alpha")

standalone/webapp/tests/e2e/resize-cursor-locked-axis.spec.ts

@@ -57,18 +57,19 @@ const resizeCursorsIn = (page: Page, name: string) =>
       .filter((cursor) => cursor.includes("resize"))
   }, name)
 
-test("a class exposes no resize cursor, because its height is content-sized", async ({
+test("a class only ever exposes a horizontal resize cursor", async ({
   page,
 }) => {
   await openFixtureInLocalEditor(page, MODEL as Record<string, unknown>)
   await waitForCanvasReady(page)
 
-  // Only width can change, so `ew-resize` on the side borders is honest; any
-  // `ns-resize` is the false affordance from issue #629.
-  expect(await resizeCursorsIn(page, "Locked")).toEqual([
-    "ew-resize",
-    "ew-resize",
-  ])
+  const cursors = await resizeCursorsIn(page, "Locked")
+
+  // Its height is content-sized, so only width can change: the side lines and
+  // the four corners all read `ew-resize`. A vertical (`ns-`) or diagonal
+  // (`nwse-`/`nesw-`) cursor anywhere is the false affordance from issue #629.
+  expect(cursors).toContain("ew-resize")
+  expect(cursors.every((cursor) => cursor === "ew-resize")).toBe(true)
 })
 
 test("a package still exposes resize cursors on every border", async ({