@hpcc-js/graph 3.7.4 → 3.7.5

package/src/common/layouts/layout.ts

@@ -1,147 +1,147 @@
-import { Graph2 as GraphCollection } from "@hpcc-js/util";
-import { curveBasis as d3CurveBasis, curveCardinal as d3CurveCardinal, line as d3Line } from "d3-shape";
-import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./placeholders.ts";
-import { EdgeLayout } from "./tree.ts";
-
-export type Point = [number, number];
-
-interface Position {
-    x: number;
-    y: number;
-}
-
-interface Line {
-    source: Position;
-    target: Position;
-}
-
-const lineBasis = d3Line<Point>()
-    .x(d => d[0])
-    .y(d => d[1])
-    .curve(d3CurveBasis)
-    ;
-
-const lineCardinal = d3Line<Point>()
-    .x(d => d[0])
-    .y(d => d[1])
-    .curve(d3CurveCardinal)
-    ;
-
-export interface ILayout {
-    start(): Promise<this>;
-    stop(): this;
-    running(): boolean;
-
-    edgePath(e: EdgePlaceholder, curveDepth: number): EdgeLayout;
-}
-
-export type Size = { width: number, height: number };
-export interface IGraph {
-    id(): string;
-    size(): Size;
-    graphData(): GraphCollection<VertexPlaceholder, EdgePlaceholder, SubgraphPlaceholder>;
-
-    project(pos: number, clip?: boolean);
-    rproject(pos: number);
-
-    projectPlacholder(vp: VertexPlaceholder);
-    rprojectPlacholder(vp: VertexPlaceholder);
-
-    moveSubgraphs(transition: boolean): this;
-
-    moveVertexPlaceholder(vp: VertexPlaceholder, transition: boolean, moveEdges: boolean): this;
-    moveVertices(transition: boolean): this;
-
-    moveEdgePlaceholder(ep: EdgePlaceholder, transition: boolean): this;
-    moveEdges(transition: boolean): this;
-
-    progress(what: "start" | "stop" | "layout-start" | "layout-tick" | "layout-stop");
-}
-
-export class Layout implements ILayout {
-
-    protected _graph: IGraph;
-    protected _running = false;
-
-    constructor(graph: IGraph) {
-        this._graph = graph;
-    }
-
-    start(): Promise<this> {
-        this._running = true;
-        this._graph.progress("layout-start");
-        return Promise.resolve(this);
-    }
-
-    stop() {
-        this._running = false;
-        this._graph.progress("layout-stop");
-        return this;
-    }
-
-    running(): boolean {
-        return this._running;
-    }
-
-    protected center(points: Point[]): Point {
-        if (points.length % 2 === 1) {
-            return points[Math.floor(points.length / 2)];
-        }
-        const p1 = points[points.length / 2 - 1];
-        const p2 = points[points.length / 2];
-        return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
-    }
-
-    vertexSize(vp: VertexPlaceholder): { width: number, height: number } {
-        const size = vp.renderResult?.extent ? vp.renderResult.extent : vp.element.node().getBBox();
-        const retVal = {
-            width: this._graph.rproject(size.width),
-            height: this._graph.rproject(size.height)
-        };
-        return retVal;
-    }
-
-    edgeLine(ep: EdgePlaceholder): Line {
-        const sPos = { ...this._graph.projectPlacholder(ep.source), w: ep.source?.renderResult?.extent?.width ?? 0, h: ep.source?.renderResult?.extent?.height ?? 0 };
-        const tPos = { ...this._graph.projectPlacholder(ep.target), w: ep.target?.renderResult?.extent?.width ?? 0, h: ep.target?.renderResult?.extent?.height ?? 0 };
-        const sIntersect = ep.source.renderResult?.intersection ? ep.source.renderResult.intersection(sPos, { start: sPos, end: tPos }) : null;
-        const tIntersect = ep.target.renderResult?.intersection ? ep.target.renderResult.intersection(tPos, { start: sPos, end: tPos }) : null;
-        return {
-            source: {
-                x: sIntersect ? sIntersect.x : sPos.x,
-                y: sIntersect ? sIntersect.y : sPos.y
-            },
-            target: {
-                x: tIntersect ? tIntersect.x : tPos.x,
-                y: tIntersect ? tIntersect.y : tPos.y
-            }
-        };
-    }
-
-    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
-        const line = this.edgeLine(ep);
-        const points: Point[] = [
-            [line.source.x, line.source.y],
-            [line.target.x, line.target.y]
-        ];
-
-        if (curveDepth) {
-            const dx = points[0][0] - points[1][0];
-            const dy = points[0][1] - points[1][1];
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            if (dist) {
-                const midX = (points[0][0] + points[1][0]) / 2 - dy * curveDepth / 100;
-                const midY = (points[0][1] + points[1][1]) / 2 + dx * curveDepth / 100;
-                return {
-                    path: lineCardinal([points[0], [midX, midY], points[1]]),
-                    labelPos: [midX, midY],
-                };
-            }
-        }
-
-        return {
-            path: lineBasis(points),
-            labelPos: this.center(points)
-        };
-    }
-}
+import { Graph2 as GraphCollection } from "@hpcc-js/util";
+import { curveBasis as d3CurveBasis, curveCardinal as d3CurveCardinal, line as d3Line } from "d3-shape";
+import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./placeholders.ts";
+import { EdgeLayout } from "./tree.ts";
+
+export type Point = [number, number];
+
+interface Position {
+    x: number;
+    y: number;
+}
+
+interface Line {
+    source: Position;
+    target: Position;
+}
+
+const lineBasis = d3Line<Point>()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(d3CurveBasis)
+    ;
+
+const lineCardinal = d3Line<Point>()
+    .x(d => d[0])
+    .y(d => d[1])
+    .curve(d3CurveCardinal)
+    ;
+
+export interface ILayout {
+    start(): Promise<this>;
+    stop(): this;
+    running(): boolean;
+
+    edgePath(e: EdgePlaceholder, curveDepth: number): EdgeLayout;
+}
+
+export type Size = { width: number, height: number };
+export interface IGraph {
+    id(): string;
+    size(): Size;
+    graphData(): GraphCollection<VertexPlaceholder, EdgePlaceholder, SubgraphPlaceholder>;
+
+    project(pos: number, clip?: boolean);
+    rproject(pos: number);
+
+    projectPlacholder(vp: VertexPlaceholder);
+    rprojectPlacholder(vp: VertexPlaceholder);
+
+    moveSubgraphs(transition: boolean): this;
+
+    moveVertexPlaceholder(vp: VertexPlaceholder, transition: boolean, moveEdges: boolean): this;
+    moveVertices(transition: boolean): this;
+
+    moveEdgePlaceholder(ep: EdgePlaceholder, transition: boolean): this;
+    moveEdges(transition: boolean): this;
+
+    progress(what: "start" | "stop" | "layout-start" | "layout-tick" | "layout-stop");
+}
+
+export class Layout implements ILayout {
+
+    protected _graph: IGraph;
+    protected _running = false;
+
+    constructor(graph: IGraph) {
+        this._graph = graph;
+    }
+
+    start(): Promise<this> {
+        this._running = true;
+        this._graph.progress("layout-start");
+        return Promise.resolve(this);
+    }
+
+    stop() {
+        this._running = false;
+        this._graph.progress("layout-stop");
+        return this;
+    }
+
+    running(): boolean {
+        return this._running;
+    }
+
+    protected center(points: Point[]): Point {
+        if (points.length % 2 === 1) {
+            return points[Math.floor(points.length / 2)];
+        }
+        const p1 = points[points.length / 2 - 1];
+        const p2 = points[points.length / 2];
+        return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
+    }
+
+    vertexSize(vp: VertexPlaceholder): { width: number, height: number } {
+        const size = vp.renderResult?.extent ? vp.renderResult.extent : vp.element.node().getBBox();
+        const retVal = {
+            width: this._graph.rproject(size.width),
+            height: this._graph.rproject(size.height)
+        };
+        return retVal;
+    }
+
+    edgeLine(ep: EdgePlaceholder): Line {
+        const sPos = { ...this._graph.projectPlacholder(ep.source), w: ep.source?.renderResult?.extent?.width ?? 0, h: ep.source?.renderResult?.extent?.height ?? 0 };
+        const tPos = { ...this._graph.projectPlacholder(ep.target), w: ep.target?.renderResult?.extent?.width ?? 0, h: ep.target?.renderResult?.extent?.height ?? 0 };
+        const sIntersect = ep.source.renderResult?.intersection ? ep.source.renderResult.intersection(sPos, { start: sPos, end: tPos }) : null;
+        const tIntersect = ep.target.renderResult?.intersection ? ep.target.renderResult.intersection(tPos, { start: sPos, end: tPos }) : null;
+        return {
+            source: {
+                x: sIntersect ? sIntersect.x : sPos.x,
+                y: sIntersect ? sIntersect.y : sPos.y
+            },
+            target: {
+                x: tIntersect ? tIntersect.x : tPos.x,
+                y: tIntersect ? tIntersect.y : tPos.y
+            }
+        };
+    }
+
+    edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
+        const line = this.edgeLine(ep);
+        const points: Point[] = [
+            [line.source.x, line.source.y],
+            [line.target.x, line.target.y]
+        ];
+
+        if (curveDepth) {
+            const dx = points[0][0] - points[1][0];
+            const dy = points[0][1] - points[1][1];
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist) {
+                const midX = (points[0][0] + points[1][0]) / 2 - dy * curveDepth / 100;
+                const midY = (points[0][1] + points[1][1]) / 2 + dx * curveDepth / 100;
+                return {
+                    path: lineCardinal([points[0], [midX, midY], points[1]]),
+                    labelPos: [midX, midY],
+                };
+            }
+        }
+
+        return {
+            path: lineBasis(points),
+            labelPos: this.center(points)
+        };
+    }
+}

package/src/common/layouts/null.ts

@@ -1,39 +1,39 @@
-import { Layout } from "./layout.ts";
-
-export class Null extends Layout {
-
-    constructor(graph) {
-        super(graph);
-    }
-
-    start(): Promise<this> {
-        return super.start().then(() => {
-            this.stop();
-            return this;
-        });
-    }
-}
-
-export class Initial extends Layout {
-
-    start(): Promise<this> {
-        return super.start().then(() => {
-            const size = this._graph.size();
-            const data = this._graph.graphData();
-            data.allEdges().forEach(e => delete e.points);
-            //  Avoid edges of 0 length ---
-            data.allVertices().forEach(v => {
-                delete v.fx;
-                delete v.fy;
-                v.x = size.width / 2 + Math.random() * 5 - 2.5;
-                v.y = size.height / 2 + Math.random() * 5 - 2.5;
-            });
-            this._graph
-                .moveVertices(true)
-                .moveEdges(true)
-                ;
-            this.stop();
-            return this;
-        });
-    }
-}
+import { Layout } from "./layout.ts";
+
+export class Null extends Layout {
+
+    constructor(graph) {
+        super(graph);
+    }
+
+    start(): Promise<this> {
+        return super.start().then(() => {
+            this.stop();
+            return this;
+        });
+    }
+}
+
+export class Initial extends Layout {
+
+    start(): Promise<this> {
+        return super.start().then(() => {
+            const size = this._graph.size();
+            const data = this._graph.graphData();
+            data.allEdges().forEach(e => delete e.points);
+            //  Avoid edges of 0 length ---
+            data.allVertices().forEach(v => {
+                delete v.fx;
+                delete v.fy;
+                v.x = size.width / 2 + Math.random() * 5 - 2.5;
+                v.y = size.height / 2 + Math.random() * 5 - 2.5;
+            });
+            this._graph
+                .moveVertices(true)
+                .moveEdges(true)
+                ;
+            this.stop();
+            return this;
+        });
+    }
+}

package/src/common/layouts/placeholders.ts

@@ -1,113 +1,113 @@
-import { Selection } from "@hpcc-js/common";
-
-export interface BaseProps {
-    id: string | number;
-    origData?: any;
-}
-
-export interface VertexBaseProps extends BaseProps {
-    text: string;
-    categoryID?: string;
-    centroid?: boolean;
-    hidden?: boolean;
-    tooltip?: string;
-    annotationIDs?: string[];
-}
-
-export interface SubgraphBaseProps extends BaseProps {
-    text: string;
-    width?: number;
-    height?: number;
-}
-
-export type Point = [number, number];
-
-export interface EdgeBaseProps<V extends VertexBaseProps = VertexBaseProps> extends BaseProps {
-    source: V;
-    target: V;
-    label?: string;
-    labelPos?: Point;
-    weight?: number;
-    strokeDasharray?: string;
-    strokeWidth?: number;
-    stroke?: string;
-    path?: string;
-    fontFamily?: string;
-}
-
-export interface HierarchyBase<SG extends SubgraphBaseProps, V extends VertexBaseProps> {
-    id: string | number;
-    parent: SG;
-    child: SG | V;
-}
-
-export interface GraphDataProps<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> {
-    subgraphs?: SG[];
-    vertices: V[];
-    edges: E[];
-    hierarchy?: HierarchyBase<SG, V>[];
-}
-
-export interface SubgraphPlaceholder<SG extends SubgraphBaseProps = SubgraphBaseProps> {
-    id: string | number;
-    element?: Selection<SVGGElement, SubgraphPlaceholder<SG>, SVGGElement, any>;
-    props: SG;
-
-    //  render result properties  ---
-    renderResult?: unknown;
-
-    //  Dagre / Graphviz Properties  ---
-    x?: number; // The node’s current x-position
-    y?: number; // The node’s current y-position
-}
-
-export interface VertexPlaceholder<V extends VertexBaseProps = VertexBaseProps> {
-    id: string | number;
-    element?: Selection<SVGGElement, VertexPlaceholder<V>, SVGGElement, any>;
-    props: V;
-
-    //  render result properties  ---
-    renderResult?: any;
-
-    //  D3 Assigned Properties  ---
-    index?: number; // The node’s zero-based index into nodes
-    x?: number; // The node’s current x-position
-    y?: number; // The node’s current y-position
-    fx?: number; // The node’s fixed x-position
-    fy?: number; // The node’s fixed y-position
-    vx?: number; // The node’s current x-velocity
-    vy?: number; // The node’s current y-velocity
-
-    //  HPCC Drag /Drop Assigned Properties  ---
-    sx?: number; // The node’s drag start x
-    sy?: number; // The node’s drag start y
-
-    //  Dagre / Graphviz Properties  ---
-
-    //  Geo Locations  ---
-    lat?: number;
-    lng?: number;
-}
-
-export interface EdgePlaceholder<V extends VertexBaseProps = VertexBaseProps, E extends EdgeBaseProps<V> = EdgeBaseProps<V>> {
-    id: string | number;
-    element?: Selection<SVGGElement, EdgePlaceholder<V, E>, SVGGElement, any>;
-    elementPath?: Selection<SVGPathElement, EdgePlaceholder<V, E>, SVGGElement, any>;
-    elementText?: Selection<SVGTextElement, EdgePlaceholder<V, E>, SVGGElement, any>;
-    props: E;
-    source: VertexPlaceholder<V>; // The link’s source node
-    target: VertexPlaceholder<V>; // The link’s target node
-
-    //  render result properties  ---
-    renderResult?: any;
-
-    //  D3 Assigned Properties  ---
-    index?: number; // The zero-based index into links, assigned by this method
-
-    //  Dagre Assigned Properties  ---
-    points?: Array<[number, number]>;
-}
-
-export function isEdgePlaceholder<V extends VertexBaseProps = VertexBaseProps, E extends EdgeBaseProps<V> = EdgeBaseProps<V>>(item): item is EdgePlaceholder<V, E> {
-    return item.id !== undefined && item.props !== undefined && item.source !== undefined && item.target !== undefined;
-}
+import { Selection } from "@hpcc-js/common";
+
+export interface BaseProps {
+    id: string | number;
+    origData?: any;
+}
+
+export interface VertexBaseProps extends BaseProps {
+    text: string;
+    categoryID?: string;
+    centroid?: boolean;
+    hidden?: boolean;
+    tooltip?: string;
+    annotationIDs?: string[];
+}
+
+export interface SubgraphBaseProps extends BaseProps {
+    text: string;
+    width?: number;
+    height?: number;
+}
+
+export type Point = [number, number];
+
+export interface EdgeBaseProps<V extends VertexBaseProps = VertexBaseProps> extends BaseProps {
+    source: V;
+    target: V;
+    label?: string;
+    labelPos?: Point;
+    weight?: number;
+    strokeDasharray?: string;
+    strokeWidth?: number;
+    stroke?: string;
+    path?: string;
+    fontFamily?: string;
+}
+
+export interface HierarchyBase<SG extends SubgraphBaseProps, V extends VertexBaseProps> {
+    id: string | number;
+    parent: SG;
+    child: SG | V;
+}
+
+export interface GraphDataProps<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> {
+    subgraphs?: SG[];
+    vertices: V[];
+    edges: E[];
+    hierarchy?: HierarchyBase<SG, V>[];
+}
+
+export interface SubgraphPlaceholder<SG extends SubgraphBaseProps = SubgraphBaseProps> {
+    id: string | number;
+    element?: Selection<SVGGElement, SubgraphPlaceholder<SG>, SVGGElement, any>;
+    props: SG;
+
+    //  render result properties  ---
+    renderResult?: unknown;
+
+    //  Dagre / Graphviz Properties  ---
+    x?: number; // The node’s current x-position
+    y?: number; // The node’s current y-position
+}
+
+export interface VertexPlaceholder<V extends VertexBaseProps = VertexBaseProps> {
+    id: string | number;
+    element?: Selection<SVGGElement, VertexPlaceholder<V>, SVGGElement, any>;
+    props: V;
+
+    //  render result properties  ---
+    renderResult?: any;
+
+    //  D3 Assigned Properties  ---
+    index?: number; // The node’s zero-based index into nodes
+    x?: number; // The node’s current x-position
+    y?: number; // The node’s current y-position
+    fx?: number; // The node’s fixed x-position
+    fy?: number; // The node’s fixed y-position
+    vx?: number; // The node’s current x-velocity
+    vy?: number; // The node’s current y-velocity
+
+    //  HPCC Drag /Drop Assigned Properties  ---
+    sx?: number; // The node’s drag start x
+    sy?: number; // The node’s drag start y
+
+    //  Dagre / Graphviz Properties  ---
+
+    //  Geo Locations  ---
+    lat?: number;
+    lng?: number;
+}
+
+export interface EdgePlaceholder<V extends VertexBaseProps = VertexBaseProps, E extends EdgeBaseProps<V> = EdgeBaseProps<V>> {
+    id: string | number;
+    element?: Selection<SVGGElement, EdgePlaceholder<V, E>, SVGGElement, any>;
+    elementPath?: Selection<SVGPathElement, EdgePlaceholder<V, E>, SVGGElement, any>;
+    elementText?: Selection<SVGTextElement, EdgePlaceholder<V, E>, SVGGElement, any>;
+    props: E;
+    source: VertexPlaceholder<V>; // The link’s source node
+    target: VertexPlaceholder<V>; // The link’s target node
+
+    //  render result properties  ---
+    renderResult?: any;
+
+    //  D3 Assigned Properties  ---
+    index?: number; // The zero-based index into links, assigned by this method
+
+    //  Dagre Assigned Properties  ---
+    points?: Array<[number, number]>;
+}
+
+export function isEdgePlaceholder<V extends VertexBaseProps = VertexBaseProps, E extends EdgeBaseProps<V> = EdgeBaseProps<V>>(item): item is EdgePlaceholder<V, E> {
+    return item.id !== undefined && item.props !== undefined && item.source !== undefined && item.target !== undefined;
+}