@bruno00o/graph 0.2.0 → 0.4.0

package/dist/query.d.ts

@@ -1,4 +1,4 @@
-import { _ as Key, x as LiveSource } from "./types-D6b86Rt1.js";
+import { _ as Key, x as LiveSource } from "./types-DJEdpHUo.js";
 import { ReadonlyStore } from "@tanstack/store";
 import { DefaultError, QueryClient, QueryKey, QueryObserverOptions } from "@tanstack/query-core";
 export interface ExplorationData<TNode, TEdge> {

package/dist/react.d.ts

@@ -1,5 +1,5 @@
-import { _ as GraphEventName, c as GraphStore, g as GraphEventHandler, m as ElementKeysInput, o as GraphState, r as GraphInstance } from "./mount-graph-B88WGOQu.js";
-import { m as GraphDefinition, z as View } from "./types-D6b86Rt1.js";
+import { _ as GraphEventHandler, h as ElementKeysInput, i as GraphInstance, l as GraphStore, s as GraphState, v as GraphEventName } from "./mount-graph-Br5IAZbP.js";
+import { B as View, m as GraphDefinition } from "./types-DJEdpHUo.js";
 import { CSSProperties, JSX, ReactNode, Ref } from "react";
 export interface GraphEventProps {
   readonly onClick?: GraphEventHandler<"click">;
@@ -12,6 +12,7 @@ export interface GraphEventProps {
   readonly onDragEnd?: GraphEventHandler<"dragend">;
   readonly onPositionChange?: GraphEventHandler<"positionchange">;
   readonly onSelectionChange?: GraphEventHandler<"selectionchange">;
+  readonly onFocusChange?: GraphEventHandler<"focuschange">;
   readonly onViewChange?: GraphEventHandler<"viewchange">;
 }
 export interface GraphProps<S extends string = string> extends GraphEventProps {

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as mountGraph } from "./mount-graph-DYOgD_ql.js";
+import { t as mountGraph } from "./mount-graph-mObhwJ3e.js";
 import { createContext, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/react/index.tsx
@@ -13,6 +13,7 @@ const eventProps = {
 	dragend: "onDragEnd",
 	positionchange: "onPositionChange",
 	selectionchange: "onSelectionChange",
+	focuschange: "onFocusChange",
 	viewchange: "onViewChange"
 };
 const GraphContext = createContext(null);

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","names":[],"sources":["../src/react/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  createContext,\n  type JSX,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport type {\n  ElementKeysInput,\n  GraphEventHandler,\n  GraphEventName,\n  GraphEvents,\n} from '../host/events'\nimport {\n  type GraphInstance,\n  type GraphState,\n  type GraphStore,\n  mountGraph,\n} from '../host/mount-graph'\nimport type { GraphDefinition, View } from '../types'\n\nexport interface GraphEventProps {\n  readonly onClick?: GraphEventHandler<'click'>\n  readonly onDoubleClick?: GraphEventHandler<'doubleclick'>\n  readonly onContextMenu?: GraphEventHandler<'contextmenu'>\n  readonly onPointerEnter?: GraphEventHandler<'pointerenter'>\n  readonly onPointerLeave?: GraphEventHandler<'pointerleave'>\n  readonly onDragStart?: GraphEventHandler<'dragstart'>\n  readonly onDrag?: GraphEventHandler<'drag'>\n  readonly onDragEnd?: GraphEventHandler<'dragend'>\n  readonly onPositionChange?: GraphEventHandler<'positionchange'>\n  readonly onSelectionChange?: GraphEventHandler<'selectionchange'>\n  readonly onViewChange?: GraphEventHandler<'viewchange'>\n}\n\nconst eventProps: Readonly<Record<GraphEventName, keyof GraphEventProps>> = {\n  click: 'onClick',\n  doubleclick: 'onDoubleClick',\n  contextmenu: 'onContextMenu',\n  pointerenter: 'onPointerEnter',\n  pointerleave: 'onPointerLeave',\n  dragstart: 'onDragStart',\n  drag: 'onDrag',\n  dragend: 'onDragEnd',\n  positionchange: 'onPositionChange',\n  selectionchange: 'onSelectionChange',\n  viewchange: 'onViewChange',\n}\n\nexport interface GraphProps<S extends string = string> extends GraphEventProps {\n  readonly definition: GraphDefinition<S>\n  readonly ariaLabel: string\n  readonly initialView?: View\n  readonly selection?: ElementKeysInput\n  readonly className?: string\n  readonly style?: CSSProperties\n  readonly ref?: Ref<GraphInstance<S> | null>\n  readonly children?: ReactNode\n}\n\nconst GraphContext = createContext<GraphInstance | null>(null)\n\nconst fill: CSSProperties = { position: 'absolute', inset: 0 }\n\nfunction useLatest<T>(value: T): { readonly current: T } {\n  const latest = useRef(value)\n  useLayoutEffect(() => {\n    latest.current = value\n  })\n  return latest\n}\n\nexport function Graph<S extends string = string>(props: GraphProps<S>): JSX.Element {\n  const { definition, ariaLabel, selection, className, style, ref, children } = props\n  const host = useRef<HTMLDivElement>(null)\n  const [graph, setGraph] = useState<GraphInstance<S> | null>(null)\n  const latest = useLatest(props)\n\n  useLayoutEffect(() => {\n    const element = host.current\n    if (!element) return\n    const initial = latest.current\n    const instance = mountGraph(element, {\n      definition: initial.definition,\n      ariaLabel: initial.ariaLabel,\n      ...(initial.initialView ? { initialView: initial.initialView } : {}),\n      ...(initial.selection !== undefined\n        ? {\n            selection: initial.selection,\n            onSelectionChange: (next) => latest.current.onSelectionChange?.(next),\n          }\n        : {}),\n    })\n    setGraph(instance)\n    return () => {\n      instance.destroy()\n      setGraph(null)\n    }\n  }, [latest])\n\n  useLayoutEffect(() => {\n    graph?.update({ definition, ariaLabel, ...(selection !== undefined ? { selection } : {}) })\n  }, [graph, definition, ariaLabel, selection])\n\n  useEffect(() => {\n    if (!graph) return\n    const stops = (Object.keys(eventProps) as GraphEventName[]).map((name) =>\n      graph.on(name, (event) => {\n        if (name === 'selectionchange' && latest.current.selection !== undefined) return\n        const handler = latest.current[eventProps[name]] as ((event: unknown) => void) | undefined\n        handler?.(event)\n      }),\n    )\n    return () => {\n      for (const stop of stops) stop()\n    }\n  }, [graph, latest])\n\n  useImperativeHandle<GraphInstance<S> | null, GraphInstance<S> | null>(ref, () => graph, [graph])\n\n  return (\n    <div className={className} style={{ position: 'relative', ...style }}>\n      <div ref={host} style={fill} />\n      {graph ? <GraphContext value={graph}>{children}</GraphContext> : null}\n    </div>\n  )\n}\n\nexport function useGraph(): GraphInstance {\n  const graph = useContext(GraphContext)\n  if (!graph) throw new Error('useGraph: call it inside <Graph>')\n  return graph\n}\n\ninterface Selected<T> {\n  readonly state: GraphState\n  readonly selector: (state: GraphState) => T\n  readonly value: T\n}\n\nexport interface UseGraphStateOptions<T> {\n  readonly compare?: (a: T, b: T) => boolean\n}\n\nexport function useGraphState<T>(\n  selector: (state: GraphState) => T,\n  options: UseGraphStateOptions<T> = {},\n): T {\n  const compare = options.compare ?? Object.is\n  const graph = useGraph()\n  const cache = useRef<Selected<T> | null>(null)\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const subscription = graph.store.subscribe(() => notify())\n      return () => subscription.unsubscribe()\n    },\n    [graph],\n  )\n  const snapshot = (): T => {\n    const state = graph.store.get()\n    const cached = cache.current\n    if (cached && cached.state === state && cached.selector === selector) return cached.value\n    const value = selector(state)\n    const kept = cached && compare(cached.value, value) ? cached.value : value\n    cache.current = { state, selector, value: kept }\n    return kept\n  }\n  return useSyncExternalStore(subscribe, snapshot, snapshot)\n}\n\nexport function useGraphEvent<K extends GraphEventName>(\n  name: K,\n  handler: GraphEventHandler<K>,\n): void {\n  const graph = useGraph()\n  const latest = useLatest(handler)\n  useEffect(\n    () => graph.on(name, (event: GraphEvents[K]) => latest.current(event)),\n    [graph, name, latest],\n  )\n}\n\nexport type { GraphInstance, GraphState, GraphStore }\n"],"mappings":"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"}
+{"version":3,"file":"react.js","names":[],"sources":["../src/react/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  createContext,\n  type JSX,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport type {\n  ElementKeysInput,\n  GraphEventHandler,\n  GraphEventName,\n  GraphEvents,\n} from '../host/events'\nimport {\n  type GraphInstance,\n  type GraphState,\n  type GraphStore,\n  mountGraph,\n} from '../host/mount-graph'\nimport type { GraphDefinition, View } from '../types'\n\nexport interface GraphEventProps {\n  readonly onClick?: GraphEventHandler<'click'>\n  readonly onDoubleClick?: GraphEventHandler<'doubleclick'>\n  readonly onContextMenu?: GraphEventHandler<'contextmenu'>\n  readonly onPointerEnter?: GraphEventHandler<'pointerenter'>\n  readonly onPointerLeave?: GraphEventHandler<'pointerleave'>\n  readonly onDragStart?: GraphEventHandler<'dragstart'>\n  readonly onDrag?: GraphEventHandler<'drag'>\n  readonly onDragEnd?: GraphEventHandler<'dragend'>\n  readonly onPositionChange?: GraphEventHandler<'positionchange'>\n  readonly onSelectionChange?: GraphEventHandler<'selectionchange'>\n  readonly onFocusChange?: GraphEventHandler<'focuschange'>\n  readonly onViewChange?: GraphEventHandler<'viewchange'>\n}\n\nconst eventProps: Readonly<Record<GraphEventName, keyof GraphEventProps>> = {\n  click: 'onClick',\n  doubleclick: 'onDoubleClick',\n  contextmenu: 'onContextMenu',\n  pointerenter: 'onPointerEnter',\n  pointerleave: 'onPointerLeave',\n  dragstart: 'onDragStart',\n  drag: 'onDrag',\n  dragend: 'onDragEnd',\n  positionchange: 'onPositionChange',\n  selectionchange: 'onSelectionChange',\n  focuschange: 'onFocusChange',\n  viewchange: 'onViewChange',\n}\n\nexport interface GraphProps<S extends string = string> extends GraphEventProps {\n  readonly definition: GraphDefinition<S>\n  readonly ariaLabel: string\n  readonly initialView?: View\n  readonly selection?: ElementKeysInput\n  readonly className?: string\n  readonly style?: CSSProperties\n  readonly ref?: Ref<GraphInstance<S> | null>\n  readonly children?: ReactNode\n}\n\nconst GraphContext = createContext<GraphInstance | null>(null)\n\nconst fill: CSSProperties = { position: 'absolute', inset: 0 }\n\nfunction useLatest<T>(value: T): { readonly current: T } {\n  const latest = useRef(value)\n  useLayoutEffect(() => {\n    latest.current = value\n  })\n  return latest\n}\n\nexport function Graph<S extends string = string>(props: GraphProps<S>): JSX.Element {\n  const { definition, ariaLabel, selection, className, style, ref, children } = props\n  const host = useRef<HTMLDivElement>(null)\n  const [graph, setGraph] = useState<GraphInstance<S> | null>(null)\n  const latest = useLatest(props)\n\n  useLayoutEffect(() => {\n    const element = host.current\n    if (!element) return\n    const initial = latest.current\n    const instance = mountGraph(element, {\n      definition: initial.definition,\n      ariaLabel: initial.ariaLabel,\n      ...(initial.initialView ? { initialView: initial.initialView } : {}),\n      ...(initial.selection !== undefined\n        ? {\n            selection: initial.selection,\n            onSelectionChange: (next) => latest.current.onSelectionChange?.(next),\n          }\n        : {}),\n    })\n    setGraph(instance)\n    return () => {\n      instance.destroy()\n      setGraph(null)\n    }\n  }, [latest])\n\n  useLayoutEffect(() => {\n    graph?.update({ definition, ariaLabel, ...(selection !== undefined ? { selection } : {}) })\n  }, [graph, definition, ariaLabel, selection])\n\n  useEffect(() => {\n    if (!graph) return\n    const stops = (Object.keys(eventProps) as GraphEventName[]).map((name) =>\n      graph.on(name, (event) => {\n        if (name === 'selectionchange' && latest.current.selection !== undefined) return\n        const handler = latest.current[eventProps[name]] as ((event: unknown) => void) | undefined\n        handler?.(event)\n      }),\n    )\n    return () => {\n      for (const stop of stops) stop()\n    }\n  }, [graph, latest])\n\n  useImperativeHandle<GraphInstance<S> | null, GraphInstance<S> | null>(ref, () => graph, [graph])\n\n  return (\n    <div className={className} style={{ position: 'relative', ...style }}>\n      <div ref={host} style={fill} />\n      {graph ? <GraphContext value={graph}>{children}</GraphContext> : null}\n    </div>\n  )\n}\n\nexport function useGraph(): GraphInstance {\n  const graph = useContext(GraphContext)\n  if (!graph) throw new Error('useGraph: call it inside <Graph>')\n  return graph\n}\n\ninterface Selected<T> {\n  readonly state: GraphState\n  readonly selector: (state: GraphState) => T\n  readonly value: T\n}\n\nexport interface UseGraphStateOptions<T> {\n  readonly compare?: (a: T, b: T) => boolean\n}\n\nexport function useGraphState<T>(\n  selector: (state: GraphState) => T,\n  options: UseGraphStateOptions<T> = {},\n): T {\n  const compare = options.compare ?? Object.is\n  const graph = useGraph()\n  const cache = useRef<Selected<T> | null>(null)\n  const subscribe = useCallback(\n    (notify: () => void) => {\n      const subscription = graph.store.subscribe(() => notify())\n      return () => subscription.unsubscribe()\n    },\n    [graph],\n  )\n  const snapshot = (): T => {\n    const state = graph.store.get()\n    const cached = cache.current\n    if (cached && cached.state === state && cached.selector === selector) return cached.value\n    const value = selector(state)\n    const kept = cached && compare(cached.value, value) ? cached.value : value\n    cache.current = { state, selector, value: kept }\n    return kept\n  }\n  return useSyncExternalStore(subscribe, snapshot, snapshot)\n}\n\nexport function useGraphEvent<K extends GraphEventName>(\n  name: K,\n  handler: GraphEventHandler<K>,\n): void {\n  const graph = useGraph()\n  const latest = useLatest(handler)\n  useEffect(\n    () => graph.on(name, (event: GraphEvents[K]) => latest.current(event)),\n    [graph, name, latest],\n  )\n}\n\nexport type { GraphInstance, GraphState, GraphStore }\n"],"mappings":"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"}

package/dist/theme.css

@@ -13,6 +13,7 @@
   --graph-focus-ring: #c93700;
   --graph-halo: #c9370047;
   --graph-label-halo: #f7f7f4;
+  --graph-label-background: #ffffff;
   --graph-node-ring: #f7f7f4;
   --graph-badge-fill: #191d22;
   --graph-badge-ink: #f7f7f4;
@@ -44,6 +45,7 @@
   --graph-focus-ring: #fa8054;
   --graph-halo: #fa805447;
   --graph-label-halo: #0f1113;
+  --graph-label-background: #171a1d;
   --graph-node-ring: #0f1113;
   --graph-badge-fill: #efeeeb;
   --graph-badge-ink: #0f1113;
@@ -74,6 +76,7 @@
     --graph-focus-ring: #fa8054;
     --graph-halo: #fa805447;
     --graph-label-halo: #0f1113;
+    --graph-label-background: #171a1d;
     --graph-node-ring: #0f1113;
     --graph-badge-fill: #efeeeb;
     --graph-badge-ink: #0f1113;

package/dist/{types-D6b86Rt1.d.ts → types-DJEdpHUo.d.ts}

@@ -33,11 +33,19 @@ type EdgeDash = "solid" | "dashed" | "dotted";
 type EdgeArrow = "none" | "source" | "target" | "both";
 type BadgeCorner = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 interface Badge {
-  readonly text?: string;
+  readonly text?: string | number;
+  readonly fill?: string;
+  readonly color?: string;
+}
+interface NodeImage {
+  readonly src: string;
+  readonly scale?: number;
+  readonly color?: string;
 }
 interface LabelOptions<T> {
   readonly text: Channel<T, string>;
   readonly secondary?: Channel<T, string>;
+  readonly background?: Style<T, string | boolean | null>;
 }
 interface NodeOptions<T> {
   readonly key?: KeyChannel<T>;
@@ -50,8 +58,10 @@ interface NodeOptions<T> {
   readonly fill?: Style<T, string>;
   readonly stroke?: Style<T, string>;
   readonly strokeWidth?: Style<T, number>;
+  readonly outline?: Style<T, string | null>;
+  readonly outlineWidth?: Style<T, number>;
   readonly opacity?: Style<T, number>;
-  readonly image?: Style<T, string | null>;
+  readonly image?: Style<T, string | NodeImage | null>;
   readonly badges?: Readonly<Partial<Record<BadgeCorner, Accessor<T, Badge | null | undefined>>>>;
   readonly units?: "world" | "screen";
 }
@@ -105,6 +115,8 @@ interface StateStyle {
   readonly fill?: string;
   readonly stroke?: string;
   readonly strokeWidth?: number;
+  readonly outline?: string;
+  readonly outlineWidth?: number;
   readonly halo?: boolean;
   readonly label?: boolean;
 }
@@ -152,5 +164,5 @@ interface GraphDefinition<S extends string = string> {
   readonly interaction: ResolvedInteraction;
   readonly transitions: ResolvedTransitions;
 }
-export { ResolvedTransitions as A, NodeMark as C, NumberScaleType as D, NumberScale as E, StateStyle as F, StateStyles as I, Style as L, SelectMode as M, SourceChange as N, Point as O, SourceSubscription as P, TransitionOptions as R, Mark as S, NodeShape as T, Key as _, Channel as a, LabelOptions as b, EdgeDash as c, FieldOf as d, FreeState as f, InteractionOptions as g, GraphDefinitionOptions as h, BuiltInState as i, ScalesOptions as j, ResolvedInteraction as k, EdgeMark as l, GraphDefinition as m, Badge as n, ColorScale as o, GraphData as p, BadgeCorner as r, EdgeArrow as s, Accessor as t, EdgeOptions as u, KeyChannel as v, NodeOptions as w, LiveSource as x, KeyFieldOf as y, View as z };
-//# sourceMappingURL=types-D6b86Rt1.d.ts.map
+export { ResolvedInteraction as A, View as B, NodeImage as C, NumberScale as D, NodeShape as E, SourceSubscription as F, StateStyle as I, StateStyles as L, ScalesOptions as M, SelectMode as N, NumberScaleType as O, SourceChange as P, Style as R, Mark as S, NodeOptions as T, Key as _, Channel as a, LabelOptions as b, EdgeDash as c, FieldOf as d, FreeState as f, InteractionOptions as g, GraphDefinitionOptions as h, BuiltInState as i, ResolvedTransitions as j, Point as k, EdgeMark as l, GraphDefinition as m, Badge as n, ColorScale as o, GraphData as p, BadgeCorner as r, EdgeArrow as s, Accessor as t, EdgeOptions as u, KeyChannel as v, NodeMark as w, LiveSource as x, KeyFieldOf as y, TransitionOptions as z };
+//# sourceMappingURL=types-DJEdpHUo.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bruno00o/graph",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Framework-agnostic, typed graph visualization rendered with WebGL2.",
   "keywords": [
     "graph",