@fusion.dev/helix-graph 0.148.0 → 0.149.0

package/README.md

@@ -66,7 +66,8 @@ first.
   and the labels in the theme's face, and draws them again when the theme
   changes.
 - Answers the frame's pan and zoom buttons and keys, and tells the renderer which
-  gestures the frame's `gestures` lets it take.
+  gestures the frame's `gestures` lets it take. Once the drawing has moved, it
+  calls the frame's `moved()`, and screen readers hear which way it went.
 - Draws only what changed when the page hands the frame new notes or links, and
   draws the frame's `signal()`s.
 - Fades out a snapshot drawn on the server by `graphSnapshot` once the renderer
@@ -397,3 +398,8 @@ Sigma 3 is a peer dependency.
 bun run --filter @fusion.dev/helix-graph build
 bun run --filter @fusion.dev/helix-graph test
 ```
+
+The specs in `src/sigma/sigma-scene.dom.spec.ts` draw with Sigma in WebGL, so
+they run in a browser only, with `bun run specs:browser graph`. They check that
+the drawing frames and rings the note chosen in the list, and moves with the
+frame's keys.

package/dist/connect-graph/connect-graph.js

@@ -312,11 +312,13 @@ export const connectGraph = (frame, driver, options = {}) => {
         const inline = (to === 'end' ? 1 : to === 'start' ? -1 : 0) * (isRtl(frame) ? -1 : 1);
         const block = to === 'down' ? 1 : to === 'up' ? -1 : 0;
         driver.panBy(inline * width * by, block * height * by, !still());
+        graph.moved?.();
     };
     const handleZoom = (event) => {
         const { by } = event.detail;
         if (by !== 0) {
             driver.zoomBy(by > 0 ? 1 : -1, !still());
+            graph.moved?.();
         }
     };
     frame.addEventListener(HelixGraphPartChangeEvent.eventName, handlePartChange);

package/dist/overlay/overlay.d.ts

@@ -1,4 +1,4 @@
-import type { ViewportGestureMode } from '@fusion.dev/helix-core';
+import { type ViewportGestureMode } from '@fusion.dev/helix-core';
 import type { GraphGroup } from '../connect-graph/connect-graph.js';
 import { type GraphLooks } from '../connect-graph/looks.js';
 /** Where a note is on screen and how large, or nothing where it is not drawn. */
@@ -48,14 +48,20 @@ export declare const chromeOver: (container: HTMLElement) => Box[];
 /** Whether a box overlaps none of `others`. */
 export declare const clearOf: (box: Box, others: readonly Box[]) => boolean;
 /**
- * Where a note's name starts, along the line: after the note, or before it
- * where after it would run under the frame's controls or off the drawing.
- * `box` gives the name's box for a start.
+ * Where a note's name starts, its left edge on screen: after the note in
+ * reading order, or before it where after it would run under the frame's
+ * controls or off the drawing. `box` gives the name's box for a start.
+ *
+ * **After is to the left on a right-to-left page**, `rightToLeft`, as a
+ * reader there looks for what follows a mark. The name is drawn from its left
+ * edge either way, with `textAlign` set to `left`: a canvas aligns text to its
+ * start by default, which on a right-to-left page is the right, so a name
+ * given its left edge was drawn ending there, over its own note.
  */
 export declare const nameStart: (at: {
     radius: number;
     x: number;
-}, width: number, box: (start: number) => Box, avoid: readonly Box[], room: number) => number;
+}, width: number, box: (start: number) => Box, avoid: readonly Box[], room: number, rightToLeft?: boolean) => number;
 /** A note to name over the drawing: its name, and whether it is the one the reader is on. */
 export interface Named {
     id: string;

package/dist/overlay/overlay.js

@@ -1,3 +1,4 @@
+import { isRtl } from '@fusion.dev/helix-core';
 import { mixRgb, rgbOf } from '../connect-graph/looks.js';
 const SPEED = 340;
 const QUICKEST = 450;
@@ -288,8 +289,10 @@ export const clearOf = (box, others) => others.every((other) => box.right < othe
     box.left > other.right ||
     box.bottom < other.top ||
     box.top > other.bottom);
-export const nameStart = (at, width, box, avoid, room) => {
-    const after = at.x + at.radius + 4;
+export const nameStart = (at, width, box, avoid, room, rightToLeft = false) => {
+    const right = at.x + at.radius + 4;
+    const left = at.x - at.radius - 4 - width;
+    const [after, before] = rightToLeft ? [left, right] : [right, left];
     const fits = (start) => {
         const placed = box(start);
         return placed.left >= 0 && placed.right <= room && clearOf(placed, avoid);
@@ -297,7 +300,6 @@ export const nameStart = (at, width, box, avoid, room) => {
     if (fits(after)) {
         return after;
     }
-    const before = at.x - at.radius - 4 - width;
     return fits(before) ? before : after;
 };
 export const namesOver = (container, onScreen) => {
@@ -311,6 +313,8 @@ export const namesOver = (container, onScreen) => {
                 return;
             }
             taken = chromeOver(container);
+            const rightToLeft = isRtl(container);
+            context.textAlign = 'left';
             for (const { id, name, strong } of named) {
                 const at = onScreen(id);
                 if (!at || looks.node(id).hidden) {
@@ -325,7 +329,7 @@ export const namesOver = (container, onScreen) => {
                     right: start + width + 2,
                     top: y - 13,
                 });
-                const x = nameStart(at, width, boxAt, taken, container.clientWidth);
+                const x = nameStart(at, width, boxAt, taken, container.clientWidth, rightToLeft);
                 const box = boxAt(x);
                 if (!clearOf(box, taken) && !strong) {
                     continue;

package/dist/sigma/sigma-driver.js

@@ -1,3 +1,4 @@
+import { isRtl } from '@fusion.dev/helix-core';
 import { pixelsOf } from '../connect-graph/sizes.js';
 import { chromeOver, clearOf, ease, gesturesHeld, groupsOver, nameStart, signalsOver, } from '../overlay/overlay.js';
 import { EMPHASES, HelixNodeProgram, MATERIALS, SHAPES } from './node-program.js';
@@ -22,14 +23,14 @@ const SAMPLE = 250;
 const STILL = 0.004;
 const HELD = 2;
 const IDLE = 2000;
-const hoverOf = (looks) => (context, data, settings) => {
+const hoverOf = (looks, rightToLeft) => (context, data, settings) => {
     if (!data.label) {
         return;
     }
     const size = settings.labelSize;
     context.font = `${settings.labelWeight} ${size}px ${settings.labelFont}`;
     const width = context.measureText(data.label).width;
-    const x = data.x + data.size + 2;
+    const x = rightToLeft() ? data.x - data.size - 2 - width : data.x + data.size + 2;
     const height = size + 8;
     context.save();
     context.shadowBlur = 8;
@@ -40,6 +41,7 @@ const hoverOf = (looks) => (context, data, settings) => {
     context.fill();
     context.restore();
     context.fillStyle = looks.ink;
+    context.textAlign = 'left';
     context.fillText(data.label, x, data.y + size / 3);
 };
 const GROW = 300;
@@ -66,6 +68,7 @@ const labelOf = (looks, claim, start) => (context, data, settings) => {
     context.lineJoin = 'round';
     context.lineWidth = 3;
     context.strokeStyle = looks.ground;
+    context.textAlign = 'left';
     context.strokeText(data.label, x, y);
     context.fillStyle = strong ? looks.ink : looks.quiet;
     context.fillText(data.label, x, y);
@@ -121,8 +124,10 @@ export const sigmaDriver = (sigma, options = {}) => {
         }
         return free || must;
     };
+    let rightToLeft = false;
     const clear = () => {
         taken = chromeOver(container);
+        rightToLeft = isRtl(container);
     };
     sigma.on('beforeRender', clear);
     const held = gesturesHeld(container);
@@ -240,8 +245,8 @@ export const sigmaDriver = (sigma, options = {}) => {
             sigma.setSetting('labelFont', looks.font);
             sigma.setSetting('labelRenderedSizeThreshold', 0);
             sigma.setSetting('labelGridCellSize', naming === 'all' ? 8 : 130);
-            sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim, (at, width, box) => nameStart(at, width, box, taken, container.clientWidth)));
-            sigma.setSetting('defaultDrawNodeHover', hoverOf(looks));
+            sigma.setSetting('defaultDrawNodeLabel', labelOf(looks, claim, (at, width, box) => nameStart(at, width, box, taken, container.clientWidth, rightToLeft)));
+            sigma.setSetting('defaultDrawNodeHover', hoverOf(looks, () => rightToLeft));
             sigma.setSetting('nodeReducer', (node, data) => {
                 const look = looks.node(node);
                 const grown = look.selected ? 1.5 : look.raised ? 1.25 : 1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, three.js, or a driver of your own.",
-  "version": "0.148.0",
+  "version": "0.149.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -55,12 +55,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.148.0"
+    "@fusion.dev/helix-core": "0.149.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.148.0",
-    "@fusion.dev/helix-testing": "0.148.0",
+    "@fusion.dev/helix-headless": "0.149.0",
+    "@fusion.dev/helix-testing": "0.149.0",
     "@types/bun": "^1.3.0",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",