@hpcc-js/graph 3.6.5 → 3.7.0

package/src/Edge.ts

@@ -1,257 +1,257 @@
-import { Platform, SVGWidget, TextBox, Widget } from "@hpcc-js/common";
-import { curveBasis as d3CurveBasis, curveBundle as d3CurveBundle, curveCardinal as d3CurveCardinal, curveCatmullRom as d3CurveCatmullRom, curveLinear as d3CurveLinear, line as d3Line } from "d3-shape";
-
-import "../src/Edge.css";
-
-const Curve = {
-    basis: d3CurveBasis,
-    bundle: d3CurveBundle,
-    cardinal: d3CurveCardinal,
-    catmullRom: d3CurveCatmullRom,
-    linear: d3CurveLinear
-};
-
-export class Edge extends SVGWidget {
-    protected _points: any[];
-    protected _weight: number;
-    protected _strokeDasharray: number[];
-    protected _hidden: boolean;
-    protected _textBox: TextBox;
-    protected _sourceVertex: Widget;
-    protected _targetVertex: Widget;
-    protected _elementPath;
-    protected _graphID;
-
-    constructor() {
-        super();
-
-        this._points = [];
-        this._weight = 100;
-        this._strokeDasharray = null;
-        this._hidden = false;
-
-        this._textBox = new TextBox()
-            .padding(0)
-            ;
-    }
-
-    graphID(_) {
-        if (!arguments.length) return this._graphID;
-        this._graphID = _;
-        return this;
-    }
-
-    sourceVertex(): Widget;
-    sourceVertex(_: Widget): this;
-    sourceVertex(_?: Widget): Widget | this {
-        if (!arguments.length) return this._sourceVertex;
-        this._sourceVertex = _;
-        return this;
-    }
-
-    targetVertex(): Widget;
-    targetVertex(_: Widget): this;
-    targetVertex(_?: Widget): Widget | this {
-        if (!arguments.length) return this._targetVertex;
-        this._targetVertex = _;
-        return this;
-    }
-
-    weight(): number;
-    weight(_: number): this;
-    weight(_?: number): number | this {
-        if (!arguments.length) return this._weight;
-        this._weight = _;
-        return this;
-    }
-
-    points(): any[];
-    points(_: any[], transitionDuration?, skipPushMarkers?): this;
-    points(_?: any[], transitionDuration?, skipPushMarkers?): any[] | this {
-        if (!arguments.length) return this._points;
-        this._points = _;
-        if (this._elementPath) {
-            this.update(null, this._element, transitionDuration, skipPushMarkers);
-        }
-        return this;
-    }
-
-    hidden(_) {
-        if (!arguments.length) return this._hidden;
-        this._hidden = _;
-        return this;
-    }
-
-    text(): string;
-    text(_: string): this;
-    text(_?: string): string | this {
-        if (!arguments.length) return this._textBox.text();
-        this._textBox.text(_);
-        return this;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._elementPath = element.append("path");
-
-        if (this._textBox.text()) {
-            this._textBox
-                .target(domNode)
-                .tooltip(this.tooltip())
-                .render()
-                ;
-        }
-    }
-
-    update(domNode, element, transitionDuration?, skipPushMarkers?) {
-        super.update(domNode, element);
-
-        const context = this;
-        if (Platform.svgMarkerGlitch && !skipPushMarkers) {
-            element.transition().duration((transitionDuration ? transitionDuration : 0) + 100)
-                .on("start", function () {
-                    context._pushMarkers(element);
-                })
-                .on("end", function () {
-                    context._popMarkers(element);
-                })
-                ;
-        }
-        const points = context._calculateEdgePoints(this._sourceVertex, this._targetVertex, this._points);
-        const svgPoints = element.selectAll(".point2").data(this.showControlPoints() ? points : []);
-        svgPoints.enter().append("circle")
-            .attr("class", "point2")
-            .style("stroke", "red")
-            .merge(svgPoints)
-            .attr("cx", d => d.x)
-            .attr("cy", d => d.y)
-            .attr("r", 1)
-            ;
-        svgPoints.exit().remove();
-
-        const line = d3Line()
-            .x(function (d: any) { return d.x; })
-            .y(function (d: any) { return d.y; })
-            // .tension(0.75)
-            .curve(Curve.basis)(points)
-            ;
-        let pathElements = this._elementPath;
-        if (transitionDuration) {
-            pathElements = pathElements.transition().duration(transitionDuration);
-        }
-        pathElements
-            .attr("opacity", this._hidden ? 0 : 1)
-            .attr("marker-start", !(Platform.svgMarkerGlitch && skipPushMarkers) && this.sourceMarker_exists() ? "url(#" + this._graphID + "_" + this.sourceMarker() + "Foot)" : null)
-            .attr("marker-end", !(Platform.svgMarkerGlitch && skipPushMarkers) && this.targetMarker_exists() ? "url(#" + this._graphID + "_" + this.targetMarker() + "Head)" : null)
-            .attr("stroke", this.strokeColor_exists() ? this.strokeColor() : null)
-            .attr("stroke-dasharray", this.strokeDasharray_exists() ? this.strokeDasharray() : null)
-            .attr("d", line)
-            ;
-
-        if (this._textBox.text()) {
-            this._textBox
-                .tooltip(this.tooltip())
-                .move(this._findMidPoint(points), transitionDuration)
-                ;
-        }
-    }
-
-    exit(domNode, element) {
-        if (this._textBox) {
-            this._textBox.target(null);
-        }
-        super.exit(domNode, element);
-    }
-
-    _findMidPoint(points) {
-        const midIdx = points.length / 2;
-        if (points.length % 2) {
-            return points[Math.floor(midIdx)];
-        } else if (points.length) {
-            const p0 = points[midIdx - 1];
-            const p1 = points[midIdx];
-            return { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 };
-        }
-        return { x: 0, y: 0 };
-    }
-
-    _calculateEdgePoints(source, target, _points) {
-        if (!source || !target) {
-            return [{ x: 0, y: 0 }, { x: 0, y: 0 }];
-        }
-        let points = _points ? _points.filter(p => !source.contains(p) && !target.contains(p)) : [];
-        const p0 = points.length === 0 ? target.pos() : points[0];
-        const p1 = points.length === 0 ? source.pos() : points[points.length - 1];
-
-        points.unshift(source.intersection(source._pos, p0));
-        points.push(target.intersection(target._pos, p1));
-        if (!points[0]) {
-            points[0] = source._pos;
-        }
-        if (!points[points.length - 1]) {
-            points[points.length - 1] = target._pos;
-        }
-
-        if ((!_points || _points.length === 0) && points.length === 2 && points[0] && points[1]) {
-            const dx = points[0].x - points[1].x;
-            const dy = points[0].y - points[1].y;
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            if (dist) {
-                if (this.showArc()) {
-                    const midX = (points[0].x + points[1].x) / 2 - dy * this.arcDepth() / 100;
-                    const midY = (points[0].y + points[1].y) / 2 + dx * this.arcDepth() / 100;
-                    points = [{ x: points[0].x, y: points[0].y }, { x: midX, y: midY }, { x: points[1].x, y: points[1].y }];
-                } else {
-                    points = [{ x: points[0].x, y: points[0].y }, { x: points[1].x, y: points[1].y }];
-                }
-            }
-        }
-        return points;
-    }
-}
-Edge.prototype._class += " graph_Edge";
-
-export interface Edge {
-    arcDepth(): number;
-    arcDepth(_: number): this;
-    showControlPoints(): boolean;
-    showControlPoints(_: boolean): this;
-    showArc(): boolean;
-    showArc(_: boolean): this;
-    tooltip(): string;
-    tooltip(_: string): this;
-
-    sourceMarker(): string;
-    sourceMarker(_: string): this;
-    sourceMarker_exists: () => boolean;
-    targetMarker(): string;
-    targetMarker(_: string): this;
-    targetMarker_exists: () => boolean;
-    strokeDasharray(): string;
-    strokeDasharray(_: string): this;
-    strokeDasharray_exists: () => boolean;
-    strokeColor(): string;
-    strokeColor(_: string): this;
-    strokeColor_exists: () => boolean;
-
-    text_shape_colorFill(): string;
-    text_shape_colorFill(_: string): this;
-    text_shape_colorStroke(): string;
-    text_shape_colorStroke(_: string): this;
-    text_text_colorFill(): string;
-    text_text_colorFill(_: string): this;
-}
-
-Edge.prototype.publish("arcDepth", 16, "number", "Arc Depth", null, { tags: ["Basic"] });
-Edge.prototype.publish("showControlPoints", false, "boolean", "Show/Hide Control Points", null, { tags: ["Basic"] });
-Edge.prototype.publish("showArc", true, "boolean", "Show/Hide Arc", null, { tags: ["Basic"] });
-Edge.prototype.publish("tooltip", "", "string", "Tooltip", null, { tags: ["Private"] });
-
-Edge.prototype.publish("sourceMarker", "circle", "set", "Source Marker", ["none", "circle"], { optional: true });
-Edge.prototype.publish("targetMarker", "arrow", "set", "Source Marker", ["none", "arrow", "circle"], { optional: true });
-Edge.prototype.publish("strokeDasharray", null, "string", "Stroke Dash Array", null, { optional: true });
-Edge.prototype.publish("strokeColor", null, "html-color", "Stroke Color", null, { optional: true });
-Edge.prototype.publish("textColor", null, "html-color", "Text Color", null, { optional: true });
-Edge.prototype.publishProxy("text_shape_colorFill", "_textBox", "shape_colorFill");
-Edge.prototype.publishProxy("text_shape_colorStroke", "_textBox", "shape_colorStroke");
-Edge.prototype.publishProxy("text_text_colorFill", "_textBox", "text_colorFill");
+import { Platform, SVGWidget, TextBox, Widget } from "@hpcc-js/common";
+import { curveBasis as d3CurveBasis, curveBundle as d3CurveBundle, curveCardinal as d3CurveCardinal, curveCatmullRom as d3CurveCatmullRom, curveLinear as d3CurveLinear, line as d3Line } from "d3-shape";
+
+import "../src/Edge.css";
+
+const Curve = {
+    basis: d3CurveBasis,
+    bundle: d3CurveBundle,
+    cardinal: d3CurveCardinal,
+    catmullRom: d3CurveCatmullRom,
+    linear: d3CurveLinear
+};
+
+export class Edge extends SVGWidget {
+    protected _points: any[];
+    protected _weight: number;
+    protected _strokeDasharray: number[];
+    protected _hidden: boolean;
+    protected _textBox: TextBox;
+    protected _sourceVertex: Widget;
+    protected _targetVertex: Widget;
+    protected _elementPath;
+    protected _graphID;
+
+    constructor() {
+        super();
+
+        this._points = [];
+        this._weight = 100;
+        this._strokeDasharray = null;
+        this._hidden = false;
+
+        this._textBox = new TextBox()
+            .padding(0)
+            ;
+    }
+
+    graphID(_) {
+        if (!arguments.length) return this._graphID;
+        this._graphID = _;
+        return this;
+    }
+
+    sourceVertex(): Widget;
+    sourceVertex(_: Widget): this;
+    sourceVertex(_?: Widget): Widget | this {
+        if (!arguments.length) return this._sourceVertex;
+        this._sourceVertex = _;
+        return this;
+    }
+
+    targetVertex(): Widget;
+    targetVertex(_: Widget): this;
+    targetVertex(_?: Widget): Widget | this {
+        if (!arguments.length) return this._targetVertex;
+        this._targetVertex = _;
+        return this;
+    }
+
+    weight(): number;
+    weight(_: number): this;
+    weight(_?: number): number | this {
+        if (!arguments.length) return this._weight;
+        this._weight = _;
+        return this;
+    }
+
+    points(): any[];
+    points(_: any[], transitionDuration?, skipPushMarkers?): this;
+    points(_?: any[], transitionDuration?, skipPushMarkers?): any[] | this {
+        if (!arguments.length) return this._points;
+        this._points = _;
+        if (this._elementPath) {
+            this.update(null, this._element, transitionDuration, skipPushMarkers);
+        }
+        return this;
+    }
+
+    hidden(_) {
+        if (!arguments.length) return this._hidden;
+        this._hidden = _;
+        return this;
+    }
+
+    text(): string;
+    text(_: string): this;
+    text(_?: string): string | this {
+        if (!arguments.length) return this._textBox.text();
+        this._textBox.text(_);
+        return this;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._elementPath = element.append("path");
+
+        if (this._textBox.text()) {
+            this._textBox
+                .target(domNode)
+                .tooltip(this.tooltip())
+                .render()
+                ;
+        }
+    }
+
+    update(domNode, element, transitionDuration?, skipPushMarkers?) {
+        super.update(domNode, element);
+
+        const context = this;
+        if (Platform.svgMarkerGlitch && !skipPushMarkers) {
+            element.transition().duration((transitionDuration ? transitionDuration : 0) + 100)
+                .on("start", function () {
+                    context._pushMarkers(element);
+                })
+                .on("end", function () {
+                    context._popMarkers(element);
+                })
+                ;
+        }
+        const points = context._calculateEdgePoints(this._sourceVertex, this._targetVertex, this._points);
+        const svgPoints = element.selectAll(".point2").data(this.showControlPoints() ? points : []);
+        svgPoints.enter().append("circle")
+            .attr("class", "point2")
+            .style("stroke", "red")
+            .merge(svgPoints)
+            .attr("cx", d => d.x)
+            .attr("cy", d => d.y)
+            .attr("r", 1)
+            ;
+        svgPoints.exit().remove();
+
+        const line = d3Line()
+            .x(function (d: any) { return d.x; })
+            .y(function (d: any) { return d.y; })
+            // .tension(0.75)
+            .curve(Curve.basis)(points)
+            ;
+        let pathElements = this._elementPath;
+        if (transitionDuration) {
+            pathElements = pathElements.transition().duration(transitionDuration);
+        }
+        pathElements
+            .attr("opacity", this._hidden ? 0 : 1)
+            .attr("marker-start", !(Platform.svgMarkerGlitch && skipPushMarkers) && this.sourceMarker_exists() ? "url(#" + this._graphID + "_" + this.sourceMarker() + "Foot)" : null)
+            .attr("marker-end", !(Platform.svgMarkerGlitch && skipPushMarkers) && this.targetMarker_exists() ? "url(#" + this._graphID + "_" + this.targetMarker() + "Head)" : null)
+            .attr("stroke", this.strokeColor_exists() ? this.strokeColor() : null)
+            .attr("stroke-dasharray", this.strokeDasharray_exists() ? this.strokeDasharray() : null)
+            .attr("d", line)
+            ;
+
+        if (this._textBox.text()) {
+            this._textBox
+                .tooltip(this.tooltip())
+                .move(this._findMidPoint(points), transitionDuration)
+                ;
+        }
+    }
+
+    exit(domNode, element) {
+        if (this._textBox) {
+            this._textBox.target(null);
+        }
+        super.exit(domNode, element);
+    }
+
+    _findMidPoint(points) {
+        const midIdx = points.length / 2;
+        if (points.length % 2) {
+            return points[Math.floor(midIdx)];
+        } else if (points.length) {
+            const p0 = points[midIdx - 1];
+            const p1 = points[midIdx];
+            return { x: (p0.x + p1.x) / 2, y: (p0.y + p1.y) / 2 };
+        }
+        return { x: 0, y: 0 };
+    }
+
+    _calculateEdgePoints(source, target, _points) {
+        if (!source || !target) {
+            return [{ x: 0, y: 0 }, { x: 0, y: 0 }];
+        }
+        let points = _points ? _points.filter(p => !source.contains(p) && !target.contains(p)) : [];
+        const p0 = points.length === 0 ? target.pos() : points[0];
+        const p1 = points.length === 0 ? source.pos() : points[points.length - 1];
+
+        points.unshift(source.intersection(source._pos, p0));
+        points.push(target.intersection(target._pos, p1));
+        if (!points[0]) {
+            points[0] = source._pos;
+        }
+        if (!points[points.length - 1]) {
+            points[points.length - 1] = target._pos;
+        }
+
+        if ((!_points || _points.length === 0) && points.length === 2 && points[0] && points[1]) {
+            const dx = points[0].x - points[1].x;
+            const dy = points[0].y - points[1].y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist) {
+                if (this.showArc()) {
+                    const midX = (points[0].x + points[1].x) / 2 - dy * this.arcDepth() / 100;
+                    const midY = (points[0].y + points[1].y) / 2 + dx * this.arcDepth() / 100;
+                    points = [{ x: points[0].x, y: points[0].y }, { x: midX, y: midY }, { x: points[1].x, y: points[1].y }];
+                } else {
+                    points = [{ x: points[0].x, y: points[0].y }, { x: points[1].x, y: points[1].y }];
+                }
+            }
+        }
+        return points;
+    }
+}
+Edge.prototype._class += " graph_Edge";
+
+export interface Edge {
+    arcDepth(): number;
+    arcDepth(_: number): this;
+    showControlPoints(): boolean;
+    showControlPoints(_: boolean): this;
+    showArc(): boolean;
+    showArc(_: boolean): this;
+    tooltip(): string;
+    tooltip(_: string): this;
+
+    sourceMarker(): string;
+    sourceMarker(_: string): this;
+    sourceMarker_exists: () => boolean;
+    targetMarker(): string;
+    targetMarker(_: string): this;
+    targetMarker_exists: () => boolean;
+    strokeDasharray(): string;
+    strokeDasharray(_: string): this;
+    strokeDasharray_exists: () => boolean;
+    strokeColor(): string;
+    strokeColor(_: string): this;
+    strokeColor_exists: () => boolean;
+
+    text_shape_colorFill(): string;
+    text_shape_colorFill(_: string): this;
+    text_shape_colorStroke(): string;
+    text_shape_colorStroke(_: string): this;
+    text_text_colorFill(): string;
+    text_text_colorFill(_: string): this;
+}
+
+Edge.prototype.publish("arcDepth", 16, "number", "Arc Depth", null, { tags: ["Basic"] });
+Edge.prototype.publish("showControlPoints", false, "boolean", "Show/Hide Control Points", null, { tags: ["Basic"] });
+Edge.prototype.publish("showArc", true, "boolean", "Show/Hide Arc", null, { tags: ["Basic"] });
+Edge.prototype.publish("tooltip", "", "string", "Tooltip", null, { tags: ["Private"] });
+
+Edge.prototype.publish("sourceMarker", "circle", "set", "Source Marker", ["none", "circle"], { optional: true });
+Edge.prototype.publish("targetMarker", "arrow", "set", "Source Marker", ["none", "arrow", "circle"], { optional: true });
+Edge.prototype.publish("strokeDasharray", null, "string", "Stroke Dash Array", null, { optional: true });
+Edge.prototype.publish("strokeColor", null, "html-color", "Stroke Color", null, { optional: true });
+Edge.prototype.publish("textColor", null, "html-color", "Text Color", null, { optional: true });
+Edge.prototype.publishProxy("text_shape_colorFill", "_textBox", "shape_colorFill");
+Edge.prototype.publishProxy("text_shape_colorStroke", "_textBox", "shape_colorStroke");
+Edge.prototype.publishProxy("text_text_colorFill", "_textBox", "text_colorFill");

package/src/Graph.css

@@ -1,19 +1,19 @@
-.graph_Graph .marker {
-    fill: #656565;
-    stroke: none;
-    stroke-width: 1.0px;
-}
-
-.graph_Graph .zoom {
-    fill: none;
-    pointer-events: all;
-}
-
-.graph_Graph .selectionBrush {
-    fill: none;
-    stroke: darkgray;
-}
-
-.graph_Graph .graphEdge.shortest-path .graph_Edge {
-    stroke:red;
+.graph_Graph .marker {
+    fill: #656565;
+    stroke: none;
+    stroke-width: 1.0px;
+}
+
+.graph_Graph .zoom {
+    fill: none;
+    pointer-events: all;
+}
+
+.graph_Graph .selectionBrush {
+    fill: none;
+    stroke: darkgray;
+}
+
+.graph_Graph .graphEdge.shortest-path .graph_Edge {
+    stroke: red;
 }