@hpcc-js/map 3.5.2 → 3.5.4

package/src/Layered.ts

@@ -1,206 +1,206 @@
-import { SVGZoomWidget } from "@hpcc-js/common";
-import { geoPath as d3GeoPath } from "d3-geo";
-import { select as d3Select } from "d3-selection";
-import { resolve, types as projectionTypes } from "./Projection.ts";
-import "./Utility"; // For albersUsaPr
-
-import "../src/Layered.css";
-
-// const zoomFactor = 1 / 4;
-const projectionFactor = (1 << 12) / 2 / Math.PI;
-
-export class Layered extends SVGZoomWidget {
-    _autoScaleOnNextRender;
-    _layersTarget;
-    _prevAutoScaleMode;
-    _d3GeoProjection;
-
-    constructor() {
-        super();
-
-        this._drawStartPos = "origin";
-        this.projection("Mercator");
-    }
-
-    data(_?) {
-        const retVal = super.data.apply(this, arguments);
-        if (arguments.length) {
-            this._autoScaleOnNextRender = true;
-        }
-        return retVal;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._layersTarget = this._renderElement.append("g")
-            .attr("class", "layersTarget")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        const layers = this._layersTarget.selectAll(".layerContainer").data(this.layers().filter(function (d) { return d.visible(); }), function (d) { return d.id(); });
-        const context = this;
-        layers.enter().append("g")
-            .attr("id", function (d) { return d.id(); })
-            .attr("class", "layerContainer")
-            .each(function (d) {
-                d._svgElement = d3Select(this);
-                d._domElement = context._parentOverlay.append("div");
-                d.layerEnter(context, d._svgElement, d._domElement);
-            }).merge(layers)
-            .each(function (d) {
-                d.layerUpdate(context);
-            })
-            ;
-        layers.exit()
-            .each(function (d) {
-                d.layerExit(context);
-                d._domElement.remove();
-            })
-            .remove()
-            ;
-        layers.order();
-        this.onZoomed();
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    onZoomed() {
-        super.onZoomed();
-        const layers = this._layersTarget.selectAll(".layerContainer");
-        const context = this;
-        layers
-            .each(function (d) {
-                d.layerZoomed(context);
-            })
-            ;
-    }
-
-    preRender(callback?) {
-        return Promise.all(this.layers().filter(function (layer) {
-            return layer.visible();
-        }).map(function (layer) {
-            return layer.layerPreRender();
-        }));
-    }
-
-    render(callback?) {
-        const context = this;
-        this.preRender().then(function () {
-            SVGZoomWidget.prototype.render.call(context, function (w) {
-                if (context._layersTarget && ((context._renderCount && context._autoScaleOnNextRender) || context._prevAutoScaleMode !== context.autoScaleMode())) {
-                    context._prevAutoScaleMode = context.autoScaleMode();
-                    context._autoScaleOnNextRender = false;
-                    context.autoScale();
-                    if (callback) {
-                        callback(w);
-                    }
-                } else {
-                    if (callback) {
-                        callback(w);
-                    }
-                }
-            });
-        });
-        return this;
-    }
-
-    project(lat, long) {
-        if (lat >= 90)
-            lat = 89;
-        else if (lat <= -90)
-            lat = -89;
-        const pos = this._d3GeoProjection([long, lat]);
-        if (pos) {
-            // pos[0] *= this._zoom.scale();
-            // pos[1] *= this._zoom.scale();
-            // pos[0] += this._zoom.translate()[0];
-            // os[1] += this._zoom.translate()[1];
-        }
-        return pos;
-    }
-
-    invert(x, y) {
-        // x -= this._zoom.translate()[0];
-        // y -= this._zoom.translate()[1];
-        // x /= this._zoom.scale();
-        // y /= this._zoom.scale();
-        return this._d3GeoProjection.invert([x, y]);
-    }
-
-    getBounds() {
-        const bbox = this._layersTarget.node().getBBox();
-        return {
-            x: bbox.x,
-            y: bbox.y,
-            width: bbox.width,
-            height: bbox.height
-        };
-    }
-
-    autoScale() {
-        switch (this.autoScaleMode()) {
-            case "none":
-                return;
-            case "all":
-                this.zoomToBBox(this.getBounds());
-                break;
-        }
-    }
-}
-Layered.prototype._class += " map_Layered";
-
-export interface Layered {
-    projection(): string;
-    projection(_: string): this;
-    projection_exists(): boolean;
-    centerLat(): number;
-    centerLat(_: number): this;
-    centerLat_exists(): boolean;
-    centerLong(): number;
-    centerLong(_: number): this;
-    centerLong_exists(): boolean;
-    zoom(): number;
-    zoom(_: number): this;
-    zoom_exists(): boolean;
-    autoScaleMode(): string;
-    autoScaleMode(_: string): this;
-    autoScaleMode_exists(): boolean;
-    layers(): any[];
-    layers(_: any[]): this;
-    layers_exists(): boolean;
-}
-
-Layered.prototype.publish("projection", null, "set", "Map projection type", projectionTypes);
-Layered.prototype.publish("centerLat", 0, "number", "Center Latitude", null, { tags: ["Basic"] });
-Layered.prototype.publish("centerLong", 0, "number", "Center Longitude", null, { tags: ["Basic"] });
-Layered.prototype.publish("zoom", 1, "number", "Zoom Level", null, { tags: ["Basic"] });
-Layered.prototype.publish("autoScaleMode", "all", "set", "Auto Scale", ["none", "all"], { tags: ["Basic"] });
-Layered.prototype.publish("layers", [], "widgetArray", "Layers", null, { render: false });
-
-const projection_orig = Layered.prototype.projection;
-Layered.prototype.projection = function (_?) {
-    const retVal = projection_orig.apply(this, arguments);
-    if (arguments.length) {
-        this._d3GeoProjection = resolve(_)
-            .scale(projectionFactor)
-            .translate([0, 0])
-            ;
-        switch (_) {
-            case "orthographic":
-                this._d3GeoProjection
-                    .clipAngle(90)
-                    .rotate([0, 0])
-                    ;
-        }
-        this._d3GeoPath = d3GeoPath()
-            .projection(this._d3GeoProjection)
-            ;
-        this._autoScaleOnNextRender = true;
-    }
-    return retVal;
-};
+import { SVGZoomWidget } from "@hpcc-js/common";
+import { geoPath as d3GeoPath } from "d3-geo";
+import { select as d3Select } from "d3-selection";
+import { resolve, types as projectionTypes } from "./Projection.ts";
+import "./Utility.ts"; // For albersUsaPr
+
+import "../src/Layered.css";
+
+// const zoomFactor = 1 / 4;
+const projectionFactor = (1 << 12) / 2 / Math.PI;
+
+export class Layered extends SVGZoomWidget {
+    _autoScaleOnNextRender;
+    _layersTarget;
+    _prevAutoScaleMode;
+    _d3GeoProjection;
+
+    constructor() {
+        super();
+
+        this._drawStartPos = "origin";
+        this.projection("Mercator");
+    }
+
+    data(_?) {
+        const retVal = super.data.apply(this, arguments);
+        if (arguments.length) {
+            this._autoScaleOnNextRender = true;
+        }
+        return retVal;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._layersTarget = this._renderElement.append("g")
+            .attr("class", "layersTarget")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        const layers = this._layersTarget.selectAll(".layerContainer").data(this.layers().filter(function (d) { return d.visible(); }), function (d) { return d.id(); });
+        const context = this;
+        layers.enter().append("g")
+            .attr("id", function (d) { return d.id(); })
+            .attr("class", "layerContainer")
+            .each(function (d) {
+                d._svgElement = d3Select(this);
+                d._domElement = context._parentOverlay.append("div");
+                d.layerEnter(context, d._svgElement, d._domElement);
+            }).merge(layers)
+            .each(function (d) {
+                d.layerUpdate(context);
+            })
+            ;
+        layers.exit()
+            .each(function (d) {
+                d.layerExit(context);
+                d._domElement.remove();
+            })
+            .remove()
+            ;
+        layers.order();
+        this.onZoomed();
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    onZoomed() {
+        super.onZoomed();
+        const layers = this._layersTarget.selectAll(".layerContainer");
+        const context = this;
+        layers
+            .each(function (d) {
+                d.layerZoomed(context);
+            })
+            ;
+    }
+
+    preRender(callback?) {
+        return Promise.all(this.layers().filter(function (layer) {
+            return layer.visible();
+        }).map(function (layer) {
+            return layer.layerPreRender();
+        }));
+    }
+
+    render(callback?) {
+        const context = this;
+        this.preRender().then(function () {
+            SVGZoomWidget.prototype.render.call(context, function (w) {
+                if (context._layersTarget && ((context._renderCount && context._autoScaleOnNextRender) || context._prevAutoScaleMode !== context.autoScaleMode())) {
+                    context._prevAutoScaleMode = context.autoScaleMode();
+                    context._autoScaleOnNextRender = false;
+                    context.autoScale();
+                    if (callback) {
+                        callback(w);
+                    }
+                } else {
+                    if (callback) {
+                        callback(w);
+                    }
+                }
+            });
+        });
+        return this;
+    }
+
+    project(lat, long) {
+        if (lat >= 90)
+            lat = 89;
+        else if (lat <= -90)
+            lat = -89;
+        const pos = this._d3GeoProjection([long, lat]);
+        if (pos) {
+            // pos[0] *= this._zoom.scale();
+            // pos[1] *= this._zoom.scale();
+            // pos[0] += this._zoom.translate()[0];
+            // os[1] += this._zoom.translate()[1];
+        }
+        return pos;
+    }
+
+    invert(x, y) {
+        // x -= this._zoom.translate()[0];
+        // y -= this._zoom.translate()[1];
+        // x /= this._zoom.scale();
+        // y /= this._zoom.scale();
+        return this._d3GeoProjection.invert([x, y]);
+    }
+
+    getBounds() {
+        const bbox = this._layersTarget.node().getBBox();
+        return {
+            x: bbox.x,
+            y: bbox.y,
+            width: bbox.width,
+            height: bbox.height
+        };
+    }
+
+    autoScale() {
+        switch (this.autoScaleMode()) {
+            case "none":
+                return;
+            case "all":
+                this.zoomToBBox(this.getBounds());
+                break;
+        }
+    }
+}
+Layered.prototype._class += " map_Layered";
+
+export interface Layered {
+    projection(): string;
+    projection(_: string): this;
+    projection_exists(): boolean;
+    centerLat(): number;
+    centerLat(_: number): this;
+    centerLat_exists(): boolean;
+    centerLong(): number;
+    centerLong(_: number): this;
+    centerLong_exists(): boolean;
+    zoom(): number;
+    zoom(_: number): this;
+    zoom_exists(): boolean;
+    autoScaleMode(): string;
+    autoScaleMode(_: string): this;
+    autoScaleMode_exists(): boolean;
+    layers(): any[];
+    layers(_: any[]): this;
+    layers_exists(): boolean;
+}
+
+Layered.prototype.publish("projection", null, "set", "Map projection type", projectionTypes);
+Layered.prototype.publish("centerLat", 0, "number", "Center Latitude", null, { tags: ["Basic"] });
+Layered.prototype.publish("centerLong", 0, "number", "Center Longitude", null, { tags: ["Basic"] });
+Layered.prototype.publish("zoom", 1, "number", "Zoom Level", null, { tags: ["Basic"] });
+Layered.prototype.publish("autoScaleMode", "all", "set", "Auto Scale", ["none", "all"], { tags: ["Basic"] });
+Layered.prototype.publish("layers", [], "widgetArray", "Layers", null, { render: false });
+
+const projection_orig = Layered.prototype.projection;
+Layered.prototype.projection = function (_?) {
+    const retVal = projection_orig.apply(this, arguments);
+    if (arguments.length) {
+        this._d3GeoProjection = resolve(_)
+            .scale(projectionFactor)
+            .translate([0, 0])
+            ;
+        switch (_) {
+            case "orthographic":
+                this._d3GeoProjection
+                    .clipAngle(90)
+                    .rotate([0, 0])
+                    ;
+        }
+        this._d3GeoPath = d3GeoPath()
+            .projection(this._d3GeoProjection)
+            ;
+        this._autoScaleOnNextRender = true;
+    }
+    return retVal;
+};

package/src/Lines.css

@@ -1,9 +1,9 @@
-.map_Layered .marker {
-    fill: #656565;
-    stroke: none;
-}
-
-.map_Layered .dataEdge {
-    stroke: black;
-    fill: none;
+.map_Layered .marker {
+    fill: #656565;
+    stroke: none;
+}
+
+.map_Layered .dataEdge {
+    stroke: black;
+    fill: none;
 }

package/src/Lines.ts

@@ -1,78 +1,78 @@
-import { Layer } from "./Layer.ts";
-
-import "../src/Lines.css";
-
-export class Lines extends Layer {
-    dataEdges;
-    _edgesTransform;
-
-    constructor() {
-        super();
-    }
-
-    data(_) {
-        const retVal = Layer.prototype.data.apply(this, arguments);
-        if (arguments.length) {
-            this.dataEdges = [];
-            _.forEach(function (row) {
-                this.dataEdges.push({
-                    type: "LineString",
-                    coordinates: [[row[1], row[0]], [row[3], row[2]]]
-                });
-            }, this);
-        }
-        return retVal;
-    }
-
-    layerEnter(base, svgElement, domElement) {
-        Layer.prototype.layerEnter.apply(this, arguments);
-
-        svgElement.append("defs").append("marker")
-            .attr("class", "marker")
-            .attr("id", this._id + "_arrowHead")
-            .attr("viewBox", "0 0 10 10")
-            .attr("refX", 10)
-            .attr("refY", 5)
-            .attr("markerWidth", 16)
-            .attr("markerHeight", 16)
-            .attr("markerUnits", "strokeWidth")
-            .attr("orient", "auto")
-            .append("polyline")
-            .attr("points", "0,0 10,5 0,10 1,5")
-            ;
-        this._edgesTransform = svgElement.append("g");
-    }
-
-    _edgesPaths;
-    layerUpdate(base) {
-        Layer.prototype.layerUpdate.apply(this, arguments);
-
-        this._edgesTransform
-            .style("opacity", this.opacity())
-            ;
-
-        const edgesPaths = this._edgesTransform.selectAll(".dataEdge").data(this.visible() ? this.dataEdges : []);
-        this._edgesPaths = edgesPaths.enter().append("path")
-            .attr("class", "dataEdge")
-            .attr("marker-end", "url(#" + this._id + "_arrowHead)")
-            .merge(edgesPaths)
-            .attr("d", base._d3GeoPath)
-            ;
-        edgesPaths.exit().remove();
-    }
-
-    layerZoomed(base) {
-        Layer.prototype.layerZoomed.apply(this, arguments);
-        this._edgesPaths
-            .attr("stroke-width", `${0.5 / base.zoomScale()}px`)
-            ;
-    }
-}
-Lines.prototype._class += " map_Lines";
-
-export interface Lines {
-    opacity(): number;
-    opacity(_: number): this;
-}
-
-Lines.prototype.publish("opacity", 1.0, "number", "Opacity", null, { tags: ["Advanced"] });
+import { Layer } from "./Layer.ts";
+
+import "../src/Lines.css";
+
+export class Lines extends Layer {
+    dataEdges;
+    _edgesTransform;
+
+    constructor() {
+        super();
+    }
+
+    data(_) {
+        const retVal = Layer.prototype.data.apply(this, arguments);
+        if (arguments.length) {
+            this.dataEdges = [];
+            _.forEach(function (row) {
+                this.dataEdges.push({
+                    type: "LineString",
+                    coordinates: [[row[1], row[0]], [row[3], row[2]]]
+                });
+            }, this);
+        }
+        return retVal;
+    }
+
+    layerEnter(base, svgElement, domElement) {
+        Layer.prototype.layerEnter.apply(this, arguments);
+
+        svgElement.append("defs").append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_arrowHead")
+            .attr("viewBox", "0 0 10 10")
+            .attr("refX", 10)
+            .attr("refY", 5)
+            .attr("markerWidth", 16)
+            .attr("markerHeight", 16)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("polyline")
+            .attr("points", "0,0 10,5 0,10 1,5")
+            ;
+        this._edgesTransform = svgElement.append("g");
+    }
+
+    _edgesPaths;
+    layerUpdate(base) {
+        Layer.prototype.layerUpdate.apply(this, arguments);
+
+        this._edgesTransform
+            .style("opacity", this.opacity())
+            ;
+
+        const edgesPaths = this._edgesTransform.selectAll(".dataEdge").data(this.visible() ? this.dataEdges : []);
+        this._edgesPaths = edgesPaths.enter().append("path")
+            .attr("class", "dataEdge")
+            .attr("marker-end", "url(#" + this._id + "_arrowHead)")
+            .merge(edgesPaths)
+            .attr("d", base._d3GeoPath)
+            ;
+        edgesPaths.exit().remove();
+    }
+
+    layerZoomed(base) {
+        Layer.prototype.layerZoomed.apply(this, arguments);
+        this._edgesPaths
+            .attr("stroke-width", `${0.5 / base.zoomScale()}px`)
+            ;
+    }
+}
+Lines.prototype._class += " map_Lines";
+
+export interface Lines {
+    opacity(): number;
+    opacity(_: number): this;
+}
+
+Lines.prototype.publish("opacity", 1.0, "number", "Opacity", null, { tags: ["Advanced"] });

package/src/OpenStreet.css

@@ -1,16 +1,16 @@
-.map_OpenStreet .background {
-  fill: white;
-}
-
-.map_OpenStreet .graticule {
-  fill: none;
-  stroke: #777;
-  stroke-width: .5px;
-  stroke-opacity: .5;
-}
-
-.map_Layered .vector {
-  fill: none;
-  stroke: navy;
-  stroke-linejoin: round;
+.map_OpenStreet .background {
+  fill: white;
+}
+
+.map_OpenStreet .graticule {
+  fill: none;
+  stroke: #777;
+  stroke-width: .5px;
+  stroke-opacity: .5;
+}
+
+.map_Layered .vector {
+  fill: none;
+  stroke: navy;
+  stroke-linejoin: round;
 }