@hpcc-js/graph 3.7.4 → 3.7.6

package/src/common/liteMap.ts

@@ -1,72 +1,72 @@
-import { select as d3Select, zoomTransform as d3ZoomTransform } from "@hpcc-js/common";
-import { geoMercator as d3GeoMercator } from "d3-geo";
-import { tile as d3Tile, tileWrap as d3TileWrap } from "d3-tile";
-import { LiteSVGZoomWidget } from "./liteSVGZooom.ts";
-
-function url(x, y, z) {
-    return `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}?access_token=pk.eyJ1IjoibGVzY2htb28iLCJhIjoiY2psY2FqY3l3MDhqNDN3cDl1MzFmZnkwcCJ9.HRoFwmz1j80gyz18ruggqw`;
-}
-
-export class LiteMapWidget extends LiteSVGZoomWidget {
-
-    protected _mapVisible = false;
-    private _mapScale = 1 << 15;
-
-    protected _levels: any;
-
-    protected _projection = d3GeoMercator()
-        .scale(this._mapScale / (2 * Math.PI))
-        ;
-
-    protected _tile = d3Tile()
-        .tileSize(512)
-        .clampX(false)
-        ;
-
-    project(lat: number, lng: number): [number, number] {
-        return this._projection([lng, lat]);
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._zoom.scaleExtent([0.0078125, 4096]);
-        const deltas = [-100, -4, -1, 0];
-        this._levels = this._svgElement.insert("g", "g")
-            .attr("pointer-events", "none")
-            .selectAll("g").data(deltas)
-            .join("g")
-            ;
-
-        this.mapZoomed(d3ZoomTransform(this._svgElement.node()));
-    }
-
-    mapZoomed(transform) {
-        const { width, height } = this.size();
-
-        const context = this;
-        const mapTransform = transform.translate(width >> 1, height >> 1).scale(this._mapScale);
-        this._levels.each(function (delta) {
-            const tiles = context._mapVisible ? context._tile.zoomDelta(delta)(mapTransform) : [];
-            d3Select(this).selectAll("image").data(tiles, d => d as any)
-                .join("image")
-                .attr("xlink:href", d => {
-                    const tmp = d3TileWrap(d) as [number, number, number];
-                    return url(...tmp);
-                })
-                .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)
-                .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
-                .attr("width", tiles.scale)
-                .attr("height", tiles.scale)
-                ;
-        });
-
-        this._projection
-            .translate([width >> 1, height >> 1])
-            ;
-    }
-
-    zoomed(transform) {
-        super.zoomed(transform);
-        this.mapZoomed(transform);
-    }
-}
+import { select as d3Select, zoomTransform as d3ZoomTransform } from "@hpcc-js/common";
+import { geoMercator as d3GeoMercator } from "d3-geo";
+import { tile as d3Tile, tileWrap as d3TileWrap } from "d3-tile";
+import { LiteSVGZoomWidget } from "./liteSVGZooom.ts";
+
+function url(x, y, z) {
+    return `https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/${z}/${x}/${y}${devicePixelRatio > 1 ? "@2x" : ""}?access_token=pk.eyJ1IjoibGVzY2htb28iLCJhIjoiY2psY2FqY3l3MDhqNDN3cDl1MzFmZnkwcCJ9.HRoFwmz1j80gyz18ruggqw`;
+}
+
+export class LiteMapWidget extends LiteSVGZoomWidget {
+
+    protected _mapVisible = false;
+    private _mapScale = 1 << 15;
+
+    protected _levels: any;
+
+    protected _projection = d3GeoMercator()
+        .scale(this._mapScale / (2 * Math.PI))
+        ;
+
+    protected _tile = d3Tile()
+        .tileSize(512)
+        .clampX(false)
+        ;
+
+    project(lat: number, lng: number): [number, number] {
+        return this._projection([lng, lat]);
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._zoom.scaleExtent([0.0078125, 4096]);
+        const deltas = [-100, -4, -1, 0];
+        this._levels = this._svgElement.insert("g", "g")
+            .attr("pointer-events", "none")
+            .selectAll("g").data(deltas)
+            .join("g")
+            ;
+
+        this.mapZoomed(d3ZoomTransform(this._svgElement.node()));
+    }
+
+    mapZoomed(transform) {
+        const { width, height } = this.size();
+
+        const context = this;
+        const mapTransform = transform.translate(width >> 1, height >> 1).scale(this._mapScale);
+        this._levels.each(function (delta) {
+            const tiles = context._mapVisible ? context._tile.zoomDelta(delta)(mapTransform) : [];
+            d3Select(this).selectAll("image").data(tiles, d => d as any)
+                .join("image")
+                .attr("xlink:href", d => {
+                    const tmp = d3TileWrap(d) as [number, number, number];
+                    return url(...tmp);
+                })
+                .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)
+                .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
+                .attr("width", tiles.scale)
+                .attr("height", tiles.scale)
+                ;
+        });
+
+        this._projection
+            .translate([width >> 1, height >> 1])
+            ;
+    }
+
+    zoomed(transform) {
+        super.zoomed(transform);
+        this.mapZoomed(transform);
+    }
+}

package/src/common/liteSVGZooom.ts

@@ -1,61 +1,61 @@
-import { d3Event, HTMLWidget, zoom as d3Zoom } from "@hpcc-js/common";
-
-export class LiteSVGZoomWidget extends HTMLWidget {
-
-    protected _svgElement: any;
-    protected _svgDefs: any;
-    protected _zoomElement: any;
-    protected _zoom = d3Zoom();
-    protected _zoomScale = 1;
-    protected _zoomTranslate = [0, 0];
-
-    constructor() {
-        super();
-        this._tag = "div";
-        this._drawStartPos = "origin";
-    }
-
-    resize(size?) {
-        const retVal = super.resize(size);
-        if (this._svgElement) {
-            this._svgElement
-                .style("width", this._size.width + "px")
-                .style("height", this._size.height + "px")
-                ;
-        }
-        return retVal;
-    }
-
-    zoomed(transform) {
-        this._zoomScale = transform.k;
-        this._zoomTranslate = [transform.x, transform.y];
-        this._zoomElement.attr("transform", transform);
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        element
-            .style("position", "relative")
-            ;
-
-        this._svgElement = element.append("svg");
-        this._svgDefs = this._svgElement.append("defs");
-        this._zoomElement = this._svgElement.append("g");
-
-        this.resize();
-
-        this._zoom.on("zoom", () => this.zoomed(d3Event().transform));
-        this._svgElement.call(this._zoom);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-}
-LiteSVGZoomWidget.prototype._class += " graph_SVGZoomLiteWidget";
+import { d3Event, HTMLWidget, zoom as d3Zoom } from "@hpcc-js/common";
+
+export class LiteSVGZoomWidget extends HTMLWidget {
+
+    protected _svgElement: any;
+    protected _svgDefs: any;
+    protected _zoomElement: any;
+    protected _zoom = d3Zoom();
+    protected _zoomScale = 1;
+    protected _zoomTranslate = [0, 0];
+
+    constructor() {
+        super();
+        this._tag = "div";
+        this._drawStartPos = "origin";
+    }
+
+    resize(size?) {
+        const retVal = super.resize(size);
+        if (this._svgElement) {
+            this._svgElement
+                .style("width", this._size.width + "px")
+                .style("height", this._size.height + "px")
+                ;
+        }
+        return retVal;
+    }
+
+    zoomed(transform) {
+        this._zoomScale = transform.k;
+        this._zoomTranslate = [transform.x, transform.y];
+        this._zoomElement.attr("transform", transform);
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        element
+            .style("position", "relative")
+            ;
+
+        this._svgElement = element.append("svg");
+        this._svgDefs = this._svgElement.append("defs");
+        this._zoomElement = this._svgElement.append("g");
+
+        this.resize();
+
+        this._zoom.on("zoom", () => this.zoomed(d3Event().transform));
+        this._svgElement.call(this._zoom);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+}
+LiteSVGZoomWidget.prototype._class += " graph_SVGZoomLiteWidget";

package/src/common/sankeyGraph.css

@@ -1,45 +1,45 @@
-.graph_SankeyGraph .node rect {
-  cursor: move;
-  fill-opacity: .9;
-  shape-rendering: crispEdges;
-  stroke: darkgray;
-}
-
-.graph_SankeyGraph .node.selected rect {
-  stroke: red;
-}
-
-.graph_SankeyGraph .node.over rect {
-  stroke: orange;
-}
-
-.graph_SankeyGraph .node.selected.over rect {
-  stroke: red;
-}
-
-.graph_SankeyGraph .node text {
-  pointer-events: none;
-  text-shadow: 0 1px 0 #fff;
-}
-
-.graph_SankeyGraph .node.selected text {
-  fill: red;
-}
-
-.graph_SankeyGraph .node.over text {
-  fill: orange;
-}
-
-.graph_SankeyGraph .node.selected.over text {
-  fill: red;
-}
-
-.graph_SankeyGraph .link {
-  fill: none;
-  stroke: #000;
-  stroke-opacity: .2;
-}
-
-.graph_SankeyGraph .link:hover {
-  stroke-opacity: .5;
+.graph_SankeyGraph .node rect {
+  cursor: move;
+  fill-opacity: .9;
+  shape-rendering: crispEdges;
+  stroke: darkgray;
+}
+
+.graph_SankeyGraph .node.selected rect {
+  stroke: red;
+}
+
+.graph_SankeyGraph .node.over rect {
+  stroke: orange;
+}
+
+.graph_SankeyGraph .node.selected.over rect {
+  stroke: red;
+}
+
+.graph_SankeyGraph .node text {
+  pointer-events: none;
+  text-shadow: 0 1px 0 #fff;
+}
+
+.graph_SankeyGraph .node.selected text {
+  fill: red;
+}
+
+.graph_SankeyGraph .node.over text {
+  fill: orange;
+}
+
+.graph_SankeyGraph .node.selected.over text {
+  fill: red;
+}
+
+.graph_SankeyGraph .link {
+  fill: none;
+  stroke: #000;
+  stroke-opacity: .2;
+}
+
+.graph_SankeyGraph .link:hover {
+  stroke-opacity: .5;
 }