fix: expose anchor size CSS variables

docs/react/usage.md

@@ -140,6 +140,8 @@ Anchor styling also uses CSS variables:
 .anchor {
   --graph-block-anchor-bg: rgba(255, 190, 92, 1);
   --graph-block-anchor-border-selected: rgba(255, 190, 92, 1);
+  --graph-block-anchor-width: 20px;
+  --graph-block-anchor-height: 20px;
 }
 ```
 

e2e/tests/anchor/anchor-css-variables.spec.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Anchor CSS variables", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/base.html");
+    await page.waitForFunction(() => (window as Window & { graphLibraryLoaded?: boolean }).graphLibraryLoaded === true);
+  });
+
+  test("provides default width and height values", async ({ page }) => {
+    const styles = await page.evaluate(() => {
+      const graph = document.createElement("div");
+      graph.className = "graph-wrapper";
+
+      const anchor = document.createElement("div");
+      anchor.className = "graph-block-anchor";
+      graph.appendChild(anchor);
+      document.body.appendChild(graph);
+
+      const computedStyle = window.getComputedStyle(anchor);
+      return {
+        widthVariable: computedStyle.getPropertyValue("--graph-block-anchor-width").trim(),
+        heightVariable: computedStyle.getPropertyValue("--graph-block-anchor-height").trim(),
+        width: computedStyle.width,
+        height: computedStyle.height,
+      };
+    });
+
+    expect(styles).toEqual({
+      widthVariable: "16px",
+      heightVariable: "16px",
+      width: "16px",
+      height: "16px",
+    });
+  });
+
+  test("allows consumers to override width and height", async ({ page }) => {
+    const styles = await page.evaluate(() => {
+      const graph = document.createElement("div");
+      graph.className = "graph-wrapper";
+      graph.style.setProperty("--graph-block-anchor-width", "24px");
+      graph.style.setProperty("--graph-block-anchor-height", "20px");
+
+      const anchor = document.createElement("div");
+      anchor.className = "graph-block-anchor";
+      graph.appendChild(anchor);
+      document.body.appendChild(graph);
+
+      const computedStyle = window.getComputedStyle(anchor);
+      return {
+        widthVariable: computedStyle.getPropertyValue("--graph-block-anchor-width").trim(),
+        heightVariable: computedStyle.getPropertyValue("--graph-block-anchor-height").trim(),
+        width: computedStyle.width,
+        height: computedStyle.height,
+      };
+    });
+
+    expect(styles).toEqual({
+      widthVariable: "24px",
+      heightVariable: "20px",
+      width: "24px",
+      height: "20px",
+    });
+  });
+});

src/react-components/Anchor.css

@@ -1,12 +1,12 @@
 .graph-block-anchor {
-  --width: var(--graph-block-anchor-width, 16px);
-  --height: var(--graph-block-anchor-height, 16px);
+  --width: var(--graph-block-anchor-width);
+  --height: var(--graph-block-anchor-height);
   display: inline-block;
   box-sizing: border-box;
   border-radius: 50%;
   background-color: var(--graph-block-anchor-bg);
-  width: var(--graph-block-anchor-width, 16px);
-  height: var(--graph-block-anchor-height, 16px);
+  width: var(--graph-block-anchor-width);
+  height: var(--graph-block-anchor-height);
   cursor: pointer;
 }
 

src/react-components/graph-canvas.css

@@ -1,4 +1,6 @@
 .graph-wrapper {
+    --graph-block-anchor-width: 16px;
+    --graph-block-anchor-height: 16px;
     position: relative;
     width: 100%;
     height: 100%;
@@ -10,4 +12,4 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
-}
+}