fix(library): size class-diagram diamonds to match the inheritance triangle (#805)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: FelixTJDietrich

.changeset/bigger-class-diamonds.md

@@ -0,0 +1,5 @@
+---
+"@tumaet/apollon": patch
+---
+
+Aggregation and composition diamonds in class diagrams are now large enough to read at a glance. They were drawn with only about 70% of the ink of the inheritance triangle next to them, so the filled/hollow distinction was easy to miss at normal zoom. The diamond now carries at least the triangle's visual weight — matching how draw.io and Mermaid proportion the two — while staying no taller, so it never overhangs a class box further than the triangle already did.

library/lib/constants.ts

@@ -219,6 +219,14 @@ export const INTERFACE = Object.freeze({
 // (used a few lines below for BPMN message markers).
 export const MARKER_BASE_SIZE = 18
 const BPMN_MARKER_SIZE = 11
+// Aggregation/composition diamonds run longer than the other class markers so
+// they carry at least the inheritance triangle's visual weight, as in draw.io
+// (24-long diamond vs 16-long triangle) and Mermaid (equal areas). Capped at 24
+// because 24 * RHOMBUS_HEIGHT_FACTOR stays under the triangle's height, so the
+// diamond never overhangs a node border further than the triangle does.
+const RHOMBUS_MARKER_SIZE = 24
+// 1/phi, inside the 0.588-0.706 thickness band those tools use.
+const RHOMBUS_HEIGHT_FACTOR = 0.618
 
 export const EDGES = Object.freeze({
   /** Negative padding extends target point to node boundary (React Flow handles are offset 3px) */
@@ -324,20 +332,20 @@ export interface MarkerConfig {
 const INTERFACE_SOCKET_SIZE = INTERFACE_RADIUS // Must equal INTERFACE.SIZE / 2
 
 export const MARKER_CONFIGS = Object.freeze({
-  // Class diagram markers - golden ratio inspired proportions
+  // Class diagram markers
   "black-rhombus": {
     type: "rhombus",
     filled: true,
-    size: MARKER_BASE_SIZE,
+    size: RHOMBUS_MARKER_SIZE,
     widthFactor: 1.0,
-    heightFactor: 0.618,
+    heightFactor: RHOMBUS_HEIGHT_FACTOR,
   },
   "white-rhombus": {
     type: "rhombus",
     filled: false,
-    size: MARKER_BASE_SIZE,
+    size: RHOMBUS_MARKER_SIZE,
     widthFactor: 1.0,
-    heightFactor: 0.618,
+    heightFactor: RHOMBUS_HEIGHT_FACTOR,
   },
   "white-triangle": {
     type: "triangle",

library/tests/unit/markerGeometry.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest"
+import { getMarkerHalfHeight } from "@/components/svgs/edges"
+import { MARKER_CONFIGS } from "@/constants"
+
+// The aggregation/composition diamond and the inheritance triangle sit side by
+// side in a class diagram, so what a reader perceives is their proportions, not
+// their absolute sizes. These pin the relationships that set the diamond's size.
+
+// Both shapes are inscribed in their bounding box, so width * height / 2 is
+// their exact area — a proxy for visual weight.
+const inkArea = (id: keyof typeof MARKER_CONFIGS) => {
+  const { size, widthFactor, heightFactor } = MARKER_CONFIGS[id]
+  return (size * widthFactor * (size * heightFactor)) / 2
+}
+
+const height = (id: keyof typeof MARKER_CONFIGS) => getMarkerHalfHeight(id) * 2
+
+describe("class diagram marker geometry", () => {
+  it("draws both diamonds identically apart from the fill", () => {
+    const { filled: _b, ...black } = MARKER_CONFIGS["black-rhombus"]
+    const { filled: _w, ...white } = MARKER_CONFIGS["white-rhombus"]
+    expect(black).toEqual(white)
+    expect(MARKER_CONFIGS["black-rhombus"].filled).toBe(true)
+    expect(MARKER_CONFIGS["white-rhombus"].filled).toBe(false)
+  })
+
+  it("gives the diamond at least the inheritance triangle's visual weight", () => {
+    // draw.io puts the diamond at ~1.32x the triangle's area, Mermaid at 1.0x.
+    expect(inkArea("black-rhombus")).toBeGreaterThanOrEqual(
+      inkArea("white-triangle")
+    )
+  })
+
+  it("keeps the diamond no taller than the inheritance triangle", () => {
+    // Height is the extent perpendicular to the edge: how far a marker overhangs
+    // the node border it points at.
+    expect(height("black-rhombus")).toBeLessThanOrEqual(
+      height("white-triangle")
+    )
+  })
+
+  it("keeps the diamond's thickness in the band used by reference tools", () => {
+    // draw.io 0.588 (diamondThin), PlantUML 0.667, Mermaid 0.706.
+    const { widthFactor, heightFactor } = MARKER_CONFIGS["black-rhombus"]
+    const aspect = heightFactor / widthFactor
+    expect(aspect).toBeGreaterThanOrEqual(0.588)
+    expect(aspect).toBeLessThanOrEqual(0.706)
+  })
+
+  it("keeps the diamond small enough to render unscaled in the edge-type dropdown", () => {
+    // EdgeTypePreviewIcon shrinks markers whose half-height exceeds 11; only the
+    // node-scale interface socket should need that.
+    expect(getMarkerHalfHeight("black-rhombus")).toBeLessThanOrEqual(11)
+  })
+})