plebeiangraphlibrary 2.1.3 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Build/Core/Graph.d.ts +12 -10
- package/Build/Drawing/GraphDrawer.d.ts +19 -0
- package/Build/Drawing/InteractionLayer.d.ts +76 -0
- package/Build/index.d.ts +2 -0
- package/Build/pgl.js +170 -170
- package/Build/pgl.js.map +1 -1
- package/Build/pgl_module.js +2512 -2328
- package/Build/pgl_module.js.map +1 -1
- package/Examples/14_Interaction_click.html +82 -0
- package/Examples/15_Interaction_hover.html +93 -0
- package/Examples/16_Interaction_details.html +92 -0
- package/Examples/17_Interaction_drag.html +66 -0
- package/Examples/examples.html +20 -0
- package/README.md +63 -2
- package/package.json +1 -1
package/Build/Core/Graph.d.ts
CHANGED
|
@@ -2,17 +2,16 @@ import { default as Line } from '../HelperClasses/Line';
|
|
|
2
2
|
import { default as Point } from '../HelperClasses/Point';
|
|
3
3
|
import { default as _Node } from './_Node';
|
|
4
4
|
import { default as Edge } from './Edge';
|
|
5
|
-
interface Graph {
|
|
6
|
-
nodes: Map<number, _Node>;
|
|
7
|
-
edges: Map<number, Edge>;
|
|
8
|
-
}
|
|
9
5
|
/**
|
|
10
6
|
* The main graph object: contains nodes and edges that get modified with different
|
|
11
7
|
* operations (layout, clustering, etc.).
|
|
12
8
|
*/
|
|
13
9
|
declare class Graph {
|
|
10
|
+
nodes: Map<number, _Node>;
|
|
11
|
+
edges: Map<number, Edge>;
|
|
12
|
+
/** Next edge ID for add_edge; avoids collisions when edges are removed. */
|
|
13
|
+
private _nextEdgeId;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
16
15
|
* Construct a graph object (no initializing)
|
|
17
16
|
*
|
|
18
17
|
* @param nodes - Map of all the nodes associated with the graph
|
|
@@ -25,20 +24,21 @@ declare class Graph {
|
|
|
25
24
|
printData(): void;
|
|
26
25
|
/**
|
|
27
26
|
* Initializes the graph and constructs the node adjacency list.
|
|
27
|
+
* Async to avoid blocking the main thread on large graphs.
|
|
28
28
|
*/
|
|
29
29
|
initialize(): Promise<void>;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* It also auto-initializes the graph and sets all the adjacency lists in memory.
|
|
31
|
+
* Official create method to make a graph based on a set of nodes and edges.
|
|
32
|
+
* Auto-initializes the graph and sets all adjacency lists in memory.
|
|
34
33
|
*
|
|
35
34
|
* @param nodes - map of nodes
|
|
36
35
|
* @param edges - map of edges
|
|
37
|
-
* @returns
|
|
36
|
+
* @returns initialized graph
|
|
38
37
|
*/
|
|
39
38
|
static create(nodes: Map<number, _Node>, edges: Map<number, Edge>): Promise<Graph>;
|
|
40
39
|
/**
|
|
41
|
-
* Constructs the adjacency
|
|
40
|
+
* Constructs the adjacency list representation for the graph.
|
|
41
|
+
* Async to allow yielding on large graphs and avoid hanging the browser.
|
|
42
42
|
*/
|
|
43
43
|
constructAdjacencyList(): Promise<void>;
|
|
44
44
|
/**
|
|
@@ -92,6 +92,8 @@ declare class Graph {
|
|
|
92
92
|
};
|
|
93
93
|
/**
|
|
94
94
|
* Get the position of the nodes in the graph.
|
|
95
|
+
* Nodes without a defined `data.pos` are skipped.
|
|
96
|
+
*
|
|
95
97
|
* @returns The position map (node ID to Point)
|
|
96
98
|
*/
|
|
97
99
|
get_position_map(): Map<number, Point>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|
2
2
|
import { default as Graph } from '../Core/Graph';
|
|
3
|
+
import { InteractionLayer, InteractionOptions } from './InteractionLayer';
|
|
3
4
|
import * as THREE from "three";
|
|
4
5
|
interface GraphDrawer3d {
|
|
5
6
|
canvas: HTMLCanvasElement;
|
|
@@ -13,6 +14,7 @@ interface GraphDrawer3d {
|
|
|
13
14
|
camera: THREE.PerspectiveCamera;
|
|
14
15
|
scene: THREE.Scene;
|
|
15
16
|
graphs: Map<number, Graph>;
|
|
17
|
+
interactionLayer?: InteractionLayer;
|
|
16
18
|
}
|
|
17
19
|
/**
|
|
18
20
|
* This is the main graph drawer class
|
|
@@ -62,6 +64,23 @@ declare class GraphDrawer3d {
|
|
|
62
64
|
* Remember to do this since this is a common are for bugs to occur
|
|
63
65
|
*/
|
|
64
66
|
rendercall(): void;
|
|
67
|
+
/**
|
|
68
|
+
* Enable opt-in interaction: node and edge picking via click/hover, and optional drag-to-reposition.
|
|
69
|
+
* Callbacks receive graph details (node data, neighbours, edge endpoints).
|
|
70
|
+
*
|
|
71
|
+
* @param options - Interaction options. Must include `graph`. Optional:
|
|
72
|
+
* - `onNodeClick`, `onEdgeClick` — click callbacks
|
|
73
|
+
* - `onNodeHover`, `onEdgeHover` — hover callbacks (receive `null` when leaving)
|
|
74
|
+
* - `hoverEnabled` — default true; set false to disable hover
|
|
75
|
+
* - `enableNodeDrag` — enable drag-to-reposition (use with mutable vertices/edges)
|
|
76
|
+
* - `onNodeDrag(nodeId, newPosition)` — called each pointer move while dragging
|
|
77
|
+
* - `controls` — OrbitControls to disable during drag (auto-passed if omitted)
|
|
78
|
+
*/
|
|
79
|
+
enableInteraction(options: InteractionOptions): void;
|
|
80
|
+
/**
|
|
81
|
+
* Disable interaction and remove event listeners.
|
|
82
|
+
*/
|
|
83
|
+
disableInteraction(): void;
|
|
65
84
|
}
|
|
66
85
|
export { GraphDrawer3d };
|
|
67
86
|
declare const _default: {
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|
2
|
+
import { default as Graph } from '../Core/Graph';
|
|
3
|
+
import { default as Point, PointLike } from '../HelperClasses/Point';
|
|
4
|
+
/**
|
|
5
|
+
* Opt-in interaction layer for PGL: node and edge picking via Three.js Raycaster.
|
|
6
|
+
* Callbacks receive graph details (node data, neighbours, edge endpoints).
|
|
7
|
+
* 100% opt-in — no interaction unless enableInteraction() is called.
|
|
8
|
+
*/
|
|
9
|
+
import * as THREE from "three";
|
|
10
|
+
/** Details passed to node click/hover callbacks */
|
|
11
|
+
export interface NodePickDetails {
|
|
12
|
+
nodeId: number;
|
|
13
|
+
data: unknown;
|
|
14
|
+
neighbours: number[];
|
|
15
|
+
position?: Point;
|
|
16
|
+
}
|
|
17
|
+
/** Details passed to edge click/hover callbacks */
|
|
18
|
+
export interface EdgePickDetails {
|
|
19
|
+
edgeId: number;
|
|
20
|
+
start: number;
|
|
21
|
+
end: number;
|
|
22
|
+
data: unknown;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Options for GraphDrawer3d.enableInteraction.
|
|
26
|
+
* Requires `graph`; all callbacks are optional.
|
|
27
|
+
*/
|
|
28
|
+
export interface InteractionOptions {
|
|
29
|
+
/** Graph used to look up node/edge details for callbacks. */
|
|
30
|
+
graph: Graph;
|
|
31
|
+
/** Fired when a node is clicked. */
|
|
32
|
+
onNodeClick?: (details: NodePickDetails) => void;
|
|
33
|
+
/** Fired when an edge is clicked. */
|
|
34
|
+
onEdgeClick?: (details: EdgePickDetails) => void;
|
|
35
|
+
/** Fired when pointer enters/leaves a node. Receives `null` when leaving. */
|
|
36
|
+
onNodeHover?: (details: NodePickDetails | null) => void;
|
|
37
|
+
/** Fired when pointer enters/leaves an edge. Receives `null` when leaving. */
|
|
38
|
+
onEdgeHover?: (details: EdgePickDetails | null) => void;
|
|
39
|
+
/** Default true. Set false to disable hover callbacks. */
|
|
40
|
+
hoverEnabled?: boolean;
|
|
41
|
+
/** Enable drag-to-reposition for nodes (use with box/instanced vertices). Disables OrbitControls during drag. */
|
|
42
|
+
enableNodeDrag?: boolean;
|
|
43
|
+
/** Called each pointer move while dragging. Update graph position and call updatePositions()/updateEdges() for mutable geometry. */
|
|
44
|
+
onNodeDrag?: (nodeId: number, newPosition: PointLike) => void;
|
|
45
|
+
/** OrbitControls to disable during drag (prevents camera orbit while moving nodes). Auto-passed by GraphDrawer if omitted. */
|
|
46
|
+
controls?: OrbitControls;
|
|
47
|
+
}
|
|
48
|
+
export declare class InteractionLayer {
|
|
49
|
+
private scene;
|
|
50
|
+
private camera;
|
|
51
|
+
private domElement;
|
|
52
|
+
private graph;
|
|
53
|
+
private options;
|
|
54
|
+
private raycaster;
|
|
55
|
+
private mouse;
|
|
56
|
+
private hoverEnabled;
|
|
57
|
+
private lastHoverNodeId;
|
|
58
|
+
private lastHoverEdgeId;
|
|
59
|
+
private dragNodeId;
|
|
60
|
+
private wasDragging;
|
|
61
|
+
private controls;
|
|
62
|
+
private boundOnClick;
|
|
63
|
+
private boundOnPointerMove;
|
|
64
|
+
private boundOnPointerDown;
|
|
65
|
+
private boundOnPointerUp;
|
|
66
|
+
constructor(scene: THREE.Scene, camera: THREE.Camera, domElement: HTMLElement, graph: Graph, options: InteractionOptions);
|
|
67
|
+
dispose(): void;
|
|
68
|
+
private getMouseNDC;
|
|
69
|
+
private pick;
|
|
70
|
+
private onClick;
|
|
71
|
+
private onPointerDown;
|
|
72
|
+
private onPointerUp;
|
|
73
|
+
private getDragPosition;
|
|
74
|
+
private onPointerMove;
|
|
75
|
+
private fireHoverCallbacks;
|
|
76
|
+
}
|
package/Build/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
* - {@link Graph} — main graph class (nodes + edges)
|
|
19
19
|
* - {@link createKamadaKawai3D} / {@link createStressSGD3D} — layout simulations
|
|
20
20
|
* - `SampleData`, `Drawing`, `ThreeWrapper`, `GraphDrawer` — data loaders and visualization
|
|
21
|
+
* - `NodePickDetails`, `EdgePickDetails`, `InteractionOptions` — interaction callback types
|
|
21
22
|
*/
|
|
22
23
|
export { Graph, _Node, Edge } from './Core';
|
|
23
24
|
export { GraphMethods } from './GraphAlgorithms';
|
|
@@ -38,3 +39,4 @@ export * as glMatrix from 'gl-matrix';
|
|
|
38
39
|
export { createKamadaKawai3D, createStressSGD3D } from './Simulation';
|
|
39
40
|
export type { KamadaKawai3DOptions, StressSGD3DOptions, KamadaKawai3DSimulation, StressSGD3DSimulation, } from './Simulation';
|
|
40
41
|
export type { LoadGraphFromObjResult } from './SampleData';
|
|
42
|
+
export type { NodePickDetails, EdgePickDetails, InteractionOptions, } from './Drawing/InteractionLayer';
|