@bruno00o/graph 0.2.0 → 0.4.0

package/README.md

@@ -24,7 +24,8 @@ Framework-agnostic, typed graph visualization rendered with WebGL2.
 - Declarative marks: map your fields to color, size, labels, arrows and dashes through shared scales, with types inferred from your data
 - Live sources: pass a TanStack DB collection as is, or anything with `subscribeChanges`, and only what changed is redrawn
 - Named states (selection, hover, focus and your own) resolved on the GPU
-- Parallel edges, self loops, drag, pan and zoom out of the box
+- Images and icons clipped to the node shape, corner badges, outlines, label backgrounds, parallel edges and self loops
+- Drag, pan, zoom, multiple selection and lasso out of the box, plus keyboard navigation announced to screen readers
 - Themed with CSS variables, light and dark
 - A framework-agnostic core with a thin React adapter, plus TanStack DB and TanStack Query integrations
 
@@ -108,7 +109,7 @@ nodes(itemsCollection, { color: 'group', label: 'label' })
 
 ## Examples
 
-The [`examples`](./examples) folder holds runnable examples: vanilla and React graphs, parallel edges and loops, collaboration across tabs with TanStack DB, and neighborhood exploration with TanStack Query. Run them with `pnpm install && pnpm dev`.
+The [`examples`](./examples) folder holds runnable examples: vanilla and React graphs, images, badges and outlines, parallel edges and loops, collaboration across tabs with TanStack DB, and neighborhood exploration with TanStack Query. Run them with `pnpm install && pnpm dev`.
 
 ## Get Involved
 

package/dist/db.d.ts

@@ -1,5 +1,5 @@
-import { r as GraphInstance } from "./mount-graph-B88WGOQu.js";
-import { O as Point, _ as Key, d as FieldOf } from "./types-D6b86Rt1.js";
+import { i as GraphInstance } from "./mount-graph-Br5IAZbP.js";
+import { _ as Key, d as FieldOf, k as Point } from "./types-DJEdpHUo.js";
 import { Collection, MutationFn, Strategy } from "@tanstack/db";
 export interface PersistPositionsOptions<T extends object, TKey extends string | number> {
   readonly collection: Collection<T, TKey>;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { A as ResolvedTransitions, C as NodeMark, D as NumberScaleType, E as NumberScale, F as StateStyle, I as StateStyles, L as Style, M as SelectMode, N as SourceChange, O as Point, P as SourceSubscription, R as TransitionOptions, S as Mark, T as NodeShape, _ as Key, a as Channel, b as LabelOptions, c as EdgeDash, d as FieldOf, f as FreeState, g as InteractionOptions, h as GraphDefinitionOptions, i as BuiltInState, j as ScalesOptions, k as ResolvedInteraction, l as EdgeMark, m as GraphDefinition, n as Badge, o as ColorScale, p as GraphData, r as BadgeCorner, s as EdgeArrow, t as Accessor, u as EdgeOptions, v as KeyChannel, w as NodeOptions, x as LiveSource, y as KeyFieldOf, z as View } from "./types-D6b86Rt1.js";
-import { C as PositionOrigin, S as GraphTargetEvent, _ as GraphEventName, a as GraphSelection, b as GraphPositionEvent, c as GraphStore, d as ViewOptions, f as mountGraph, g as GraphEventHandler, h as GraphDragEvent, i as GraphPositions, l as GraphView, m as ElementKeysInput, n as GraphElement, o as GraphState, p as ElementKeys, r as GraphInstance, s as GraphStates, t as FitOptions, u as MountGraphOptions, v as GraphEvents, x as GraphTarget, y as GraphPointerEvent } from "./mount-graph-B88WGOQu.js";
+import { A as ResolvedInteraction, B as View, C as NodeImage, D as NumberScale, E as NodeShape, F as SourceSubscription, I as StateStyle, L as StateStyles, M as ScalesOptions, N as SelectMode, O as NumberScaleType, P as SourceChange, R as Style, S as Mark, T as NodeOptions, _ as Key, a as Channel, b as LabelOptions, c as EdgeDash, d as FieldOf, f as FreeState, g as InteractionOptions, h as GraphDefinitionOptions, i as BuiltInState, j as ResolvedTransitions, k as Point, l as EdgeMark, m as GraphDefinition, n as Badge, o as ColorScale, p as GraphData, r as BadgeCorner, s as EdgeArrow, t as Accessor, u as EdgeOptions, v as KeyChannel, w as NodeMark, x as LiveSource, y as KeyFieldOf, z as TransitionOptions } from "./types-DJEdpHUo.js";
+import { C as GraphTarget, S as GraphPositionEvent, T as PositionOrigin, _ as GraphEventHandler, a as GraphPositions, b as GraphFocusEvent, c as GraphStates, d as MountGraphOptions, f as ViewOptions, g as GraphDragEvent, h as ElementKeysInput, i as GraphInstance, l as GraphStore, m as ElementKeys, n as GraphElement, o as GraphSelection, p as mountGraph, r as GraphFocus, s as GraphState, t as FitOptions, u as GraphView, v as GraphEventName, w as GraphTargetEvent, x as GraphPointerEvent, y as GraphEvents } from "./mount-graph-Br5IAZbP.js";
 export declare function defineGraph<S extends string = never>(options: GraphDefinitionOptions<S>): GraphDefinition<S>;
 export declare function nodes<T>(data: LiveSource<T>, options?: NodeOptions<NoInfer<T>>): NodeMark<T>;
 export declare function nodes<T extends {
@@ -15,5 +15,5 @@ export declare function edges<T extends {
 export declare function edges<T>(data: Iterable<T>, options: EdgeOptions<NoInfer<T>> & {
   readonly key: KeyChannel<NoInfer<T>>;
 }): EdgeMark<T>;
-export { type Accessor, type Badge, type BadgeCorner, type BuiltInState, type Channel, type ColorScale, type EdgeArrow, type EdgeDash, type EdgeMark, type EdgeOptions, type ElementKeys, type ElementKeysInput, type FieldOf, type FitOptions, type FreeState, type GraphData, type GraphDefinition, type GraphDefinitionOptions, type GraphDragEvent, type GraphElement, type GraphEventHandler, type GraphEventName, type GraphEvents, type GraphInstance, type GraphPointerEvent, type GraphPositionEvent, type GraphPositions, type GraphSelection, type GraphState, type GraphStates, type GraphStore, type GraphTarget, type GraphTargetEvent, type GraphView, type InteractionOptions, type Key, type KeyChannel, type KeyFieldOf, type LabelOptions, type LiveSource, type Mark, type MountGraphOptions, type NodeMark, type NodeOptions, type NodeShape, type NumberScale, type NumberScaleType, type Point, type PositionOrigin, type ResolvedInteraction, type ResolvedTransitions, type ScalesOptions, type SelectMode, type SourceChange, type SourceSubscription, type StateStyle, type StateStyles, type Style, type TransitionOptions, type View, type ViewOptions, mountGraph };
+export { type Accessor, type Badge, type BadgeCorner, type BuiltInState, type Channel, type ColorScale, type EdgeArrow, type EdgeDash, type EdgeMark, type EdgeOptions, type ElementKeys, type ElementKeysInput, type FieldOf, type FitOptions, type FreeState, type GraphData, type GraphDefinition, type GraphDefinitionOptions, type GraphDragEvent, type GraphElement, type GraphEventHandler, type GraphEventName, type GraphEvents, type GraphFocus, type GraphFocusEvent, type GraphInstance, type GraphPointerEvent, type GraphPositionEvent, type GraphPositions, type GraphSelection, type GraphState, type GraphStates, type GraphStore, type GraphTarget, type GraphTargetEvent, type GraphView, type InteractionOptions, type Key, type KeyChannel, type KeyFieldOf, type LabelOptions, type LiveSource, type Mark, type MountGraphOptions, type NodeImage, type NodeMark, type NodeOptions, type NodeShape, type NumberScale, type NumberScaleType, type Point, type PositionOrigin, type ResolvedInteraction, type ResolvedTransitions, type ScalesOptions, type SelectMode, type SourceChange, type SourceSubscription, type StateStyle, type StateStyles, type Style, type TransitionOptions, type View, type ViewOptions, mountGraph };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as freeStateNames, r as maxFreeStates, t as mountGraph } from "./mount-graph-DYOgD_ql.js";
+import { n as freeStateNames, r as maxFreeStates, t as mountGraph } from "./mount-graph-mObhwJ3e.js";
 // src/define-graph.ts
 const defaultZoomSpeed = 1;
 const defaultPositionTransition = 120;

package/dist/{mount-graph-B88WGOQu.d.ts → mount-graph-Br5IAZbP.d.ts}

@@ -1,4 +1,4 @@
-import { O as Point, _ as Key, f as FreeState, m as GraphDefinition, z as View } from "./types-D6b86Rt1.js";
+import { B as View, _ as Key, f as FreeState, k as Point, m as GraphDefinition } from "./types-DJEdpHUo.js";
 import { ReadonlyStore } from "@tanstack/store";
 interface Endpoints {
   readonly source: Key;
@@ -40,6 +40,9 @@ interface GraphDragEvent {
   readonly world: Point;
   readonly originalEvent: PointerEvent;
 }
+interface GraphFocusEvent {
+  readonly target: GraphTarget | null;
+}
 type PositionOrigin = "drag" | "api";
 interface GraphPositionEvent {
   readonly origin: PositionOrigin;
@@ -56,6 +59,7 @@ interface GraphEvents {
   readonly dragend: GraphDragEvent;
   readonly positionchange: GraphPositionEvent;
   readonly selectionchange: ElementKeys;
+  readonly focuschange: GraphFocusEvent;
   readonly viewchange: {
     readonly view: View;
   };
@@ -67,6 +71,7 @@ interface GraphState<S extends string = string> {
   readonly width: number;
   readonly height: number;
   readonly hovered: GraphTarget | null;
+  readonly focused: GraphTarget | null;
   readonly selection: ElementKeys;
   readonly states: { readonly [K in FreeState<S>]: ElementKeys; };
   readonly positionsVersion: number;
@@ -95,6 +100,10 @@ interface GraphSelection {
   set(keys: ElementKeysInput): void;
   clear(): void;
 }
+interface GraphFocus {
+  get(): GraphTarget | null;
+  set(element: GraphElement | null): void;
+}
 interface GraphStates<N extends string = string> {
   set(name: N, keys: ElementKeysInput): void;
   add(name: N, keys: ElementKeysInput): void;
@@ -117,6 +126,7 @@ interface GraphInstance<S extends string = string> {
   readonly store: GraphStore<S>;
   readonly view: GraphView;
   readonly selection: GraphSelection;
+  readonly focus: GraphFocus;
   readonly states: GraphStates<FreeState<S>>;
   readonly positions: GraphPositions;
   readonly element: HTMLElement;
@@ -129,5 +139,5 @@ interface GraphInstance<S extends string = string> {
   destroy(): void;
 }
 declare function mountGraph<S extends string = string>(container: HTMLElement, options: MountGraphOptions<S>): GraphInstance<S>;
-export { PositionOrigin as C, GraphTargetEvent as S, GraphEventName as _, GraphSelection as a, GraphPositionEvent as b, GraphStore as c, ViewOptions as d, mountGraph as f, GraphEventHandler as g, GraphDragEvent as h, GraphPositions as i, GraphView as l, ElementKeysInput as m, GraphElement as n, GraphState as o, ElementKeys as p, GraphInstance as r, GraphStates as s, FitOptions as t, MountGraphOptions as u, GraphEvents as v, GraphTarget as x, GraphPointerEvent as y };
-//# sourceMappingURL=mount-graph-B88WGOQu.d.ts.map
+export { GraphTarget as C, GraphPositionEvent as S, PositionOrigin as T, GraphEventHandler as _, GraphPositions as a, GraphFocusEvent as b, GraphStates as c, MountGraphOptions as d, ViewOptions as f, GraphDragEvent as g, ElementKeysInput as h, GraphInstance as i, GraphStore as l, ElementKeys as m, GraphElement as n, GraphSelection as o, mountGraph as p, GraphFocus as r, GraphState as s, FitOptions as t, GraphView as u, GraphEventName as v, GraphTargetEvent as w, GraphPointerEvent as x, GraphEvents as y };
+//# sourceMappingURL=mount-graph-Br5IAZbP.d.ts.map