@rokkit/graph 1.8.1 → 1.9.0

package/dist/GraphState.svelte.d.ts

@@ -94,6 +94,8 @@ export type GraphStateConfig = {
     above?: string;
     /** `world` / `sunburst` — the measure (a 0..1 share) each box is shaded by (#164). */
     shadeBy?: string;
+    /** `neighborhood` — centre the drawn cards (default) or the focus card (#170). */
+    centre?: 'content' | 'focus';
 };
 /**
  * The store. Turns raw `nodes`/`edges`/`fields` into the reactive shape the visuals

package/dist/GraphState.svelte.js

@@ -88,6 +88,7 @@ export class GraphState {
         colorBy: this.config.colorBy,
         above: this.config.above,
         shadeBy: this.config.shadeBy,
+        centre: this.config.centre,
         edgeStyle: this.config.edgeStyle,
         focus: this.config.focus ?? this.selection.value,
         expanded: this.selection.expanded
@@ -396,7 +397,7 @@ export class GraphState {
      * stay in the component. Keeping this here is what lets it be tested without a renderer.
      */
     get contentSize() {
-        return contentExtent(this.#result.clusters, this.#result.cards, this.#result.size);
+        return contentExtent(this.#result.clusters, this.#result.cards, this.#result.size, this.#result.extent);
     }
     get related() {
         return this.selection.related;

package/dist/diagrams/Neighborhood.svelte

@@ -41,6 +41,11 @@
 		 * the root and invisible one click later.
 		 */
 		groupTint?: boolean
+		/**
+		 * What the canvas centres (#170): the drawn cards (default), or the focus card — which
+		 * leaves a blank column when one side of the focus is empty.
+		 */
+		centre?: 'content' | 'focus'
 		controls?: boolean
 		maxDepth?: number
 		legend?: boolean
@@ -66,6 +71,7 @@
 		depth = $bindable(1),
 		edgeStyle = $bindable('curved'),
 		groupTint = true,
+		centre = 'content',
 		controls = false,
 		maxDepth = 3,
 		legend = false,
@@ -91,6 +97,7 @@
 		depth,
 		edgeStyle,
 		groupTint,
+		centre,
 		value,
 		preset,
 		mode,

package/dist/diagrams/Neighborhood.svelte.d.ts

@@ -23,6 +23,11 @@ type Props = {
      * the root and invisible one click later.
      */
     groupTint?: boolean;
+    /**
+     * What the canvas centres (#170): the drawn cards (default), or the focus card — which
+     * leaves a blank column when one side of the focus is empty.
+     */
+    centre?: 'content' | 'focus';
     controls?: boolean;
     maxDepth?: number;
     legend?: boolean;

package/dist/layout/extent.d.ts

@@ -13,5 +13,5 @@ type Box = {
  * clusters', or — for an ungrouped layout (neighborhood), which reports none — the cards', and
  * the layout size only when both are empty.
  */
-export declare function contentExtent(clusters: Box[], cards: Record<string, Box>, size: Size): Size;
+export declare function contentExtent(clusters: Box[], cards: Record<string, Box>, size: Size, declared?: Size): Size;
 export {};

package/dist/layout/extent.js

@@ -16,7 +16,10 @@ function extentOf(boxes) {
  * clusters', or — for an ungrouped layout (neighborhood), which reports none — the cards', and
  * the layout size only when both are empty.
  */
-export function contentExtent(clusters, cards, size) {
+export function contentExtent(clusters, cards, size, declared) {
+    // A layout that reserved blank space on purpose says what to frame (#170, `centre: 'focus'`).
+    if (declared)
+        return declared;
     let { w, h } = extentOf(clusters);
     if (!w || !h) {
         const fromCards = extentOf(Object.values(cards));

package/dist/layout/neighborhood.js

@@ -122,10 +122,8 @@ function buildNeighbourCards(model, neighbours, expanded) {
  */
 function arrange(built, cards, ctx) {
     const occupied = built.filter((r) => r.ids.length > 0);
-    // The same edge room on BOTH sides — a self-loop's bow plus a hairline — so the canvas
-    // stays symmetric about the focus.
-    const edge = (ctx.hasLoop ? LOOP_W : 0) + 2;
-    const { focusX, xFor } = geometry(occupied, edge);
+    const loop = ctx.hasLoop ? LOOP_W : 0;
+    const { focusX, xFor } = geometry(occupied, ctx.centre, loop);
     const focusCard = cards[ctx.focus.id];
     const height = placeRings(occupied, cards, { focusCard, focusX, xFor });
     const columns = buildColumns(occupied, {
@@ -134,9 +132,11 @@ function arrange(built, cards, ctx) {
         xFor,
         dependency: ctx.dependency
     });
-    // Symmetric about the focus (#170): as much room right of it as left, so the focus card's
-    // centre IS the canvas's centre whichever side is empty or deeper.
-    const width = focusX * 2 + CARD_W;
+    // `focus`: symmetric about the focus, so its centre IS the canvas's centre (#170).
+    // `content`: ends at the deepest column drawn, so the canvas centres the cards themselves.
+    const width = ctx.centre === 'focus'
+        ? focusX * 2 + CARD_W
+        : xFor('out', furthest(occupied, 'out')) + CARD_W + loop + 4;
     return { columns, size: { w: width, h: height } };
 }
 /**
@@ -168,13 +168,18 @@ function drawableIn(model, cards) {
 }
 /**
  * Where each ring sits. Ring d on the `in` side is d steps left of the focus; on the `out`
- * side, d steps right. The focus sits past `edge` and as many columns as the DEEPER side
- * needs, so both sides get the same room and the focus is the centre.
+ * side, d steps right.
+ *
+ * `content` (the default): the focus is pushed right only by how deep the inbound side goes,
+ * so an empty side costs nothing and the canvas centres the cards that are drawn.
+ * `focus`: the focus sits past the DEEPER side's reach, with the same edge room on both sides,
+ * so the focus is the centre (#170). Opt-in — with one side empty it leaves a blank column.
  */
-function geometry(occupied, edge) {
+function geometry(occupied, centre, loop) {
     const columnStep = CARD_W + COL_GAP;
-    const reach = Math.max(furthest(occupied, 'in'), furthest(occupied, 'out'));
-    const focusX = edge + reach * columnStep;
+    const focusX = centre === 'focus'
+        ? loop + 2 + Math.max(furthest(occupied, 'in'), furthest(occupied, 'out')) * columnStep
+        : furthest(occupied, 'in') * columnStep;
     return {
         focusX,
         xFor: (side, d) => (side === 'in' ? focusX - d * columnStep : focusX + d * columnStep)
@@ -236,6 +241,14 @@ function buildColumns(occupied, ctx) {
         ...side('out')
     ];
 }
+/**
+ * The size, and — when centring on the focus — the extent the canvas must frame: focus-centring
+ * reserves blank columns the cards do not reach, and a canvas that framed only the cards would
+ * centre them and undo the reservation (#170).
+ */
+function framed(size, centre) {
+    return centre === 'focus' ? { size, extent: { w: size.w, h: size.h } } : { size };
+}
 /**
  * Entity-centric layout. `options.focus` names the node to centre; without it, or with
  * an id the model does not know, the result is empty.
@@ -259,10 +272,12 @@ export const neighborhood = (model, options) => {
         focus,
         expanded: options.expanded
     });
+    const centre = options.centre ?? 'content';
     const { columns, size } = arrange(built, cards, {
         focus,
         hasLoop: selfEdges.length > 0,
-        dependency: model.edges.some((e) => e.kind === 'dependency')
+        dependency: model.edges.some((e) => e.kind === 'dependency'),
+        centre
     });
-    return { clusters: [], cards, edges: buildEdges(drawableIn(model, cards), cards), size, columns };
+    return { ...framed(size, centre), clusters: [], cards, edges: buildEdges(drawableIn(model, cards), cards), columns };
 };

package/dist/layout/options.d.ts

@@ -4,7 +4,7 @@ import type { LayoutOptions } from './types.js';
  * missed here would warn about a legitimate option, which is worse than the silence this
  * exists to fix. `spec/options.spec.ts` compares the two.
  */
-export declare const LAYOUT_OPTION_KEYS: readonly ["density", "arrange", "edgeStyle", "focus", "expanded", "groupBy", "nestBy", "sizeBy", "sizeScale", "depth", "focusPath", "levels", "radialMode", "root", "bundleTension", "showEdges", "layerLabels", "widthBy", "heightBy", "colorBy", "above", "shadeBy"];
+export declare const LAYOUT_OPTION_KEYS: readonly ["density", "arrange", "edgeStyle", "focus", "expanded", "groupBy", "nestBy", "sizeBy", "sizeScale", "depth", "focusPath", "levels", "radialMode", "root", "bundleTension", "showEdges", "layerLabels", "widthBy", "heightBy", "colorBy", "above", "shadeBy", "centre"];
 /**
  * Which options have an EFFECT under each built-in layout.
  *

package/dist/layout/options.js

@@ -25,7 +25,8 @@ export const LAYOUT_OPTION_KEYS = [
     'heightBy',
     'colorBy',
     'above',
-    'shadeBy'
+    'shadeBy',
+    'centre'
 ];
 /**
  * Which options have an EFFECT under each built-in layout.
@@ -52,7 +53,7 @@ export const LAYOUT_OPTIONS = {
     flow: ['density', 'edgeStyle', 'expanded'],
     // No edgeStyle: a layered edge is always a vertical S, built by the layout itself.
     layers: ['density', 'expanded', 'showEdges', 'layerLabels'],
-    neighborhood: ['edgeStyle', 'expanded', 'focus', 'depth'],
+    neighborhood: ['edgeStyle', 'expanded', 'focus', 'depth', 'centre'],
     points: ['edgeStyle', 'sizeBy', 'sizeScale'],
     // No edgeStyle: the tree's links are elbows the layout draws itself.
     polymetric: ['widthBy', 'heightBy', 'colorBy'],

package/dist/layout/types.d.ts

@@ -307,6 +307,12 @@ export type LayoutOptions = {
      * container takes the size-weighted mean of what it holds unless it declares its own.
      */
     shadeBy?: string;
+    /**
+     * `neighborhood` only — what the canvas centres (#170). `content` (default): the cards that
+     * are drawn, so an empty side costs nothing. `focus`: the focus card, with the deeper side's
+     * reach reserved on both sides — a blank column when one side is empty.
+     */
+    centre?: 'content' | 'focus';
 };
 /** Every edge, or only the ones a view is about. */
 export type ShowEdges = 'all' | 'violations' | 'hidden';
@@ -318,6 +324,12 @@ export type ChannelScale = {
     cap: number;
 };
 export type LayoutResult = {
+    /**
+     * What the canvas should frame, when it is not the drawn content — a layout that reserves
+     * blank space on purpose (`neighborhood` with `centre: 'focus'`). Absent: the canvas frames
+     * the clusters' or cards' extent.
+     */
+    extent?: Size;
     /** `polymetric` — what each channel encodes, for the legend. */
     channels?: {
         width: ChannelScale;

package/dist/state/GraphConfig.svelte.d.ts

@@ -38,6 +38,7 @@ export type GraphConfigValues = {
     colorBy: string | undefined;
     above: string | undefined;
     shadeBy: string | undefined;
+    centre: 'content' | 'focus' | undefined;
 };
 type Key = keyof GraphConfigValues;
 type Field = {
@@ -120,5 +121,6 @@ export declare class GraphConfig {
     get colorBy(): string | undefined;
     get above(): string | undefined;
     get shadeBy(): string | undefined;
+    get centre(): "focus" | "content" | undefined;
 }
 export {};

package/dist/state/GraphConfig.svelte.js

@@ -58,7 +58,8 @@ export const CONFIG_FIELDS = Object.freeze([
     { key: 'heightBy', raw: true },
     { key: 'colorBy', raw: true },
     { key: 'above', raw: true },
-    { key: 'shadeBy', raw: true }
+    { key: 'shadeBy', raw: true },
+    { key: 'centre', raw: true }
 ]);
 function resolve(config) {
     const values = {};
@@ -250,4 +251,7 @@ export class GraphConfig {
     get shadeBy() {
         return this.#v.shadeBy;
     }
+    get centre() {
+        return this.#v.centre;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/graph",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "Node-link diagram components — pluggable layouts, ER/schema views",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "check:types": "tsc --noEmit"
   },
   "dependencies": {
-    "@rokkit/core": "1.8.0",
-    "@rokkit/states": "1.8.0"
+    "@rokkit/core": "1.9.0",
+    "@rokkit/states": "1.9.0"
   },
   "peerDependencies": {
-    "@rokkit/ui": "1.8.0",
+    "@rokkit/ui": "1.9.0",
     "svelte": "^5.0.0"
   },
   "peerDependenciesMeta": {
@@ -59,7 +59,7 @@
     }
   },
   "devDependencies": {
-    "@rokkit/ui": "1.8.0",
+    "@rokkit/ui": "1.9.0",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "svelte": "^5.55.7",