@geoblocks/elevation-profile 0.0.16 → 0.0.18

package/dist/elevation-profile.d.ts

@@ -0,0 +1,44 @@
+import { LitElement, PropertyValues, TemplateResult } from "lit";
+export type OverDetails = {
+    coordinate: number[];
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export default class ElevationProfile extends LitElement {
+    tolerance: number;
+    locale: string;
+    lines: number[][][];
+    points: number[][];
+    updateScale: (x: scaleLinear, y: scaleLinear, width: number, height: number) => void;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    tickSize: {
+        x: number;
+        y: number;
+    };
+    pointerEvents: boolean;
+    pointer: {
+        x: number;
+        y: number;
+    };
+    updated(changedProperties: PropertyValues): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<2>;
+    tickFormat(value: number, axis: 'x' | 'y'): string;
+    pointSvg(x: number, y: number, index: number): TemplateResult;
+    firstUpdated(): void;
+    createRenderRoot(): this;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'elevation-profile': ElevationProfile;
+    }
+}
+
+//# sourceMappingURL=elevation-profile.d.ts.map

package/dist/elevation-profile.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";AAoBA,0BAA0B;IACxB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CAClC,CAAC;AAEF,qCACsC,SAAQ,UAAU;IAC5B,SAAS,SAAK;IACd,MAAM,SAAsB;IAC7B,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAM;IACzB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAM;IACrC,WAAW,0CAA2C,MAAM,UAAU,MAAM,KAAG,IAAI,CAAO;IAC5E,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAC1B,aAAa,UAAQ;IAEvC,OAAO;;;MAAgB;IA4BvB,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAczC,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAsB5C,MAAM;IAyER,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG;IAQzC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc;IAI3D,YAAY;IA+CZ,gBAAgB;CAG1B;AAGD,QAAQ,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {guard} from 'lit/directives/guard.js';\nimport type {PropertyValues, TemplateResult} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\nimport simplify from 'simplify-js';\n\ntype PlotPoint = {\n  x: number;\n  y: number;\n  coordinate: number[];\n};\n\nexport type OverDetails = {\n  coordinate: number[];\n  position: {x: number; y: number};\n};\n\n@customElement('elevation-profile')\nexport default class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 1;\n  @property({type: String}) locale = navigator.language;\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Array}) points: number[][] = [];\n  @property() updateScale = (x: scaleLinear, y: scaleLinear, width: number, height: number): void => {};\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n  @property({type: Boolean}) pointerEvents = true;\n\n  @state() pointer = {x: 0, y: 0};\n  private resizeController = new ResizeController(this, {\n    callback: () => [this.offsetWidth, this.offsetHeight],\n  });\n\n  private plotData: PlotPoint[] = [];\n  private pointsData: PlotPoint[] = [];\n  private scaleX = scaleLinear();\n  private scaleY = scaleLinear();\n\n  private bisectDistance = bisector((point: PlotPoint) => point.x);\n\n  private line = line()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y((point: PlotPoint) => this.scaleY(point.y));\n  private area = area()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y1((point: PlotPoint) => this.scaleY(point.y));\n  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value, 'x'));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.tickFormat(value, 'y'));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat: Intl.NumberFormat | null = null;\n  private kilometerFormat: Intl.NumberFormat | null = null;\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('locale')) {\n      this.meterFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'meter',\n      });\n\n      this.kilometerFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'kilometer',\n      });\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('lines')) {\n      this.plotData.length = 0;\n      for (const line of this.lines) {\n        const data = line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate}));\n        this.plotData.push(...simplify(data, this.tolerance));\n        this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});\n      }\n\n      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));\n      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();\n\n      this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);\n    }\n    if (changedProperties.has('points')) {\n      this.pointsData.length = 0;\n      for (const point of this.points) {\n        this.pointsData.push({x: point[3], y: point[2], coordinate: point});\n      }\n    }\n  }\n\n  override render() {\n    const [width, height] = this.resizeController.value ?? [0, 0];\n\n    this.scaleX.range([this.margin.left, width - this.margin.right]);\n    this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n    this.area.y0(height - this.margin.bottom);\n\n    this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n    this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n    const xTicks = width / this.tickSize.x;\n    const yTicks = height / this.tickSize.y;\n    this.xAxis.ticks(xTicks);\n    this.xGrid.ticks(xTicks);\n    this.yAxis.ticks(yTicks);\n    this.yGrid.ticks(yTicks);\n\n    select(this.querySelector('.axis.x')).call(this.xAxis);\n    select(this.querySelector('.axis.y')).call(this.yAxis);\n    select(this.querySelector('.grid.x')).call(this.xGrid);\n    select(this.querySelector('.grid.y')).call(this.yGrid);\n\n    const offset = this.yGrid.offset();\n\n    return svg`\n      <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n        <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n        <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n\n        ${guard([this.lines, width, height], () => svg`\n          <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n          <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />`\n        )}\n\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <g clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\">\n            ${guard([this.lines, width, height], () => svg`<path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\" />`)}\n          </g>\n          <line\n            class=\"pointer-line\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <circle class=\"pointer-circle-outline\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"16\"/>\n          <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"6\"/>\n        </g>\n\n        ${this.pointsData.map((point, index) => this.pointSvg(this.scaleX(point.x), this.scaleY(point.y), index))}\n\n        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"${this.pointerEvents ? 'all' : 'none'}\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n        <g \n          transform=\"translate(${this.margin.left},${height - this.margin.bottom + offset})\"\n          class=\"axis\"\n          style=\"visibility: ${this.lines.length ? 'visible' : 'hidden'}\">\n          <line x2=\"${width - this.margin.left - this.margin.right}\"></line>\n        </g>\n      </svg>\n    `;\n  }\n\n  public tickFormat(value: number, axis: 'x' | 'y') {\n    if (axis === 'y' || value < 1000) {\n      return this.meterFormat!.format(value);\n    } else {\n      return this.kilometerFormat!.format(value / 1000);\n    }\n  }\n\n  public pointSvg(x: number, y: number, index: number): TemplateResult {\n    return svg`<circle class=\"point\" cx=\"${x}\" cy=\"${y}\" r=\"10\"/>`;\n  }\n\n  override firstUpdated() {\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  private pointerMove(event: PointerEvent) {\n    const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n    if (index < 0) {\n      return;\n    }\n    // FIXME:\n    // var d0 = this.plotData[index - 1]\n    // var d1 = this.plotData[index];\n    // // work out which date value is closest to the mouse\n    // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n    const data = this.plotData[index];\n\n    if (isNaN(data.y)) {\n      return;\n    }\n\n    this.pointer = {\n      x: this.scaleX(data.x),\n      y: this.scaleY(data.y),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent<OverDetails>('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer\n        }\n      }),\n    );\n  }\n\n  private pointerOut() {\n    this.pointer = {\n      x: 0,\n      y: 0,\n    };\n    this.dispatchEvent(new CustomEvent('out'));\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n"],"names":[],"version":3,"file":"elevation-profile.d.ts.map"}

package/dist/elevation-profile.js

@@ -0,0 +1,285 @@
+import {svg as $agntW$svg, LitElement as $agntW$LitElement} from "lit";
+import {property as $agntW$property, state as $agntW$state, customElement as $agntW$customElement} from "lit/decorators.js";
+import {ResizeController as $agntW$ResizeController} from "@lit-labs/observers/resize-controller.js";
+import {guard as $agntW$guard} from "lit/directives/guard.js";
+import {bisector as $agntW$bisector, extent as $agntW$extent} from "d3-array";
+import {scaleLinear as $agntW$scaleLinear} from "d3-scale";
+import {line as $agntW$line, area as $agntW$area} from "d3-shape";
+import {axisBottom as $agntW$axisBottom, axisLeft as $agntW$axisLeft} from "d3-axis";
+import {select as $agntW$select, pointer as $agntW$pointer} from "d3-selection";
+import $agntW$simplifyjs from "simplify-js";
+
+
+
+
+
+
+
+
+
+
+
+var $916babf1e6dc2c08$var$__decorate = undefined && undefined.__decorate || function(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0, $agntW$LitElement) {
+    constructor(){
+        super(...arguments);
+        this.tolerance = 1;
+        this.locale = navigator.language;
+        this.lines = [];
+        this.points = [];
+        this.updateScale = (x, y, width, height)=>{};
+        this.margin = {
+            top: 20,
+            right: 20,
+            bottom: 20,
+            left: 40
+        };
+        this.tickSize = {
+            x: 100,
+            y: 40
+        };
+        this.pointerEvents = true;
+        this.pointer = {
+            x: 0,
+            y: 0
+        };
+        this.resizeController = new (0, $agntW$ResizeController)(this, {
+            callback: ()=>[
+                    this.offsetWidth,
+                    this.offsetHeight
+                ]
+        });
+        this.plotData = [];
+        this.pointsData = [];
+        this.scaleX = (0, $agntW$scaleLinear)();
+        this.scaleY = (0, $agntW$scaleLinear)();
+        this.bisectDistance = (0, $agntW$bisector)((point)=>point.x);
+        this.line = (0, $agntW$line)().defined((point)=>!isNaN(point.y)).x((point)=>this.scaleX(point.x)).y((point)=>this.scaleY(point.y));
+        this.area = (0, $agntW$area)().defined((point)=>!isNaN(point.y)).x((point)=>this.scaleX(point.x)).y1((point)=>this.scaleY(point.y));
+        this.xAxis = (0, $agntW$axisBottom)(this.scaleX).tickFormat((value)=>this.tickFormat(value, "x"));
+        this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((value)=>this.tickFormat(value, "y"));
+        this.xGrid = (0, $agntW$axisBottom)(this.scaleX).tickFormat(()=>"");
+        this.yGrid = (0, $agntW$axisLeft)(this.scaleY).tickFormat(()=>"");
+        this.meterFormat = null;
+        this.kilometerFormat = null;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("locale")) {
+            this.meterFormat = new Intl.NumberFormat(this.locale, {
+                style: "unit",
+                unit: "meter"
+            });
+            this.kilometerFormat = new Intl.NumberFormat(this.locale, {
+                style: "unit",
+                unit: "kilometer"
+            });
+        }
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has("lines")) {
+            this.plotData.length = 0;
+            for (const line of this.lines){
+                const data = line.map((coordinate)=>({
+                        x: coordinate[3],
+                        y: coordinate[2],
+                        coordinate: coordinate
+                    }));
+                this.plotData.push(...(0, $agntW$simplifyjs)(data, this.tolerance));
+                this.plotData.push({
+                    x: line[line.length - 1][3],
+                    y: NaN,
+                    coordinate: []
+                });
+            }
+            this.scaleX.domain((0, $agntW$extent)(this.plotData, (data)=>data.x));
+            this.scaleY.domain((0, $agntW$extent)(this.plotData, (data)=>data.y)).nice();
+            this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);
+        }
+        if (changedProperties.has("points")) {
+            this.pointsData.length = 0;
+            for (const point of this.points)this.pointsData.push({
+                x: point[3],
+                y: point[2],
+                coordinate: point
+            });
+        }
+    }
+    render() {
+        const [width, height] = this.resizeController.value ?? [
+            0,
+            0
+        ];
+        this.scaleX.range([
+            this.margin.left,
+            width - this.margin.right
+        ]);
+        this.scaleY.range([
+            height - this.margin.bottom,
+            this.margin.top
+        ]);
+        this.area.y0(height - this.margin.bottom);
+        this.yGrid.tickSize(-width + this.margin.left + this.margin.right);
+        this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);
+        const xTicks = width / this.tickSize.x;
+        const yTicks = height / this.tickSize.y;
+        this.xAxis.ticks(xTicks);
+        this.xGrid.ticks(xTicks);
+        this.yAxis.ticks(yTicks);
+        this.yGrid.ticks(yTicks);
+        (0, $agntW$select)(this.querySelector(".axis.x")).call(this.xAxis);
+        (0, $agntW$select)(this.querySelector(".axis.y")).call(this.yAxis);
+        (0, $agntW$select)(this.querySelector(".grid.x")).call(this.xGrid);
+        (0, $agntW$select)(this.querySelector(".grid.y")).call(this.yGrid);
+        const offset = this.yGrid.offset();
+        return (0, $agntW$svg)`
+      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+        <g class="grid y" transform="translate(${this.margin.left}, 0)" />
+        <g class="grid x" transform="translate(0, ${this.margin.bottom})" />
+        <g class="axis x" transform="translate(0, ${height - this.margin.bottom})" />
+        <g class="axis y" transform="translate(${this.margin.left}, 0)" />
+
+        ${(0, $agntW$guard)([
+            this.lines,
+            width,
+            height
+        ], ()=>(0, $agntW$svg)`
+          <path class="area" d="${this.area(this.plotData)}" />
+          <path class="elevation" d="${this.line(this.plotData)}" fill="none" />`)}
+
+        <g style="visibility: ${this.pointer.x > 0 ? "visible" : "hidden"}">
+          <g clip-path="polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)">
+            ${(0, $agntW$guard)([
+            this.lines,
+            width,
+            height
+        ], ()=>(0, $agntW$svg)`<path class="elevation highlight" d="${this.line(this.plotData)}" fill="none" />`)}
+          </g>
+          <line
+            class="pointer-line"
+            x1="${this.pointer.x}"
+            y1="${this.margin.top}"
+            x2="${this.pointer.x}"
+            y2="${height - this.margin.bottom}"
+          />
+          <circle class="pointer-circle-outline" cx="${this.pointer.x}" cy="${this.pointer.y}" r="16"/>
+          <circle class="pointer-circle" cx="${this.pointer.x}" cy="${this.pointer.y}" r="6"/>
+        </g>
+
+        ${this.pointsData.map((point, index)=>this.pointSvg(this.scaleX(point.x), this.scaleY(point.y), index))}
+
+        <rect
+          width="${width}"
+          height="${height}"
+          fill="none"
+          pointer-events="${this.pointerEvents ? "all" : "none"}"
+          style="display: block; touch-action: none;"
+          @pointermove="${this.pointerMove}"
+          @pointerout="${this.pointerOut}"
+        />
+        <g 
+          transform="translate(${this.margin.left},${height - this.margin.bottom + offset})"
+          class="axis"
+          style="visibility: ${this.lines.length ? "visible" : "hidden"}">
+          <line x2="${width - this.margin.left - this.margin.right}"></line>
+        </g>
+      </svg>
+    `;
+    }
+    tickFormat(value, axis) {
+        if (axis === "y" || value < 1000) return this.meterFormat.format(value);
+        else return this.kilometerFormat.format(value / 1000);
+    }
+    pointSvg(x, y, index) {
+        return (0, $agntW$svg)`<circle class="point" cx="${x}" cy="${y}" r="10"/>`;
+    }
+    firstUpdated() {
+        // FIXME: because the ref element are used before render is done, we need to force an update
+        this.requestUpdate();
+    }
+    pointerMove(event) {
+        const pointerDistance = this.scaleX.invert((0, $agntW$pointer)(event)[0]);
+        const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);
+        if (index < 0) return;
+        // FIXME:
+        // var d0 = this.plotData[index - 1]
+        // var d1 = this.plotData[index];
+        // // work out which date value is closest to the mouse
+        // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;
+        const data = this.plotData[index];
+        if (isNaN(data.y)) return;
+        this.pointer = {
+            x: this.scaleX(data.x),
+            y: this.scaleY(data.y)
+        };
+        this.dispatchEvent(new CustomEvent("over", {
+            detail: {
+                coordinate: this.plotData[index].coordinate,
+                position: this.pointer
+            }
+        }));
+    }
+    pointerOut() {
+        this.pointer = {
+            x: 0,
+            y: 0
+        };
+        this.dispatchEvent(new CustomEvent("out"));
+    }
+    createRenderRoot() {
+        return this;
+    }
+};
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Number
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "tolerance", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: String
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "locale", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Array
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "lines", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Array
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "points", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)()
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "updateScale", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Object
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "margin", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Object
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "tickSize", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Boolean
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "pointerEvents", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$state)()
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "pointer", void 0);
+$916babf1e6dc2c08$var$ElevationProfile = $916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$customElement)("elevation-profile")
+], $916babf1e6dc2c08$var$ElevationProfile);
+var $916babf1e6dc2c08$export$2e2bcd8739ae039 = $916babf1e6dc2c08$var$ElevationProfile;
+
+
+export {$916babf1e6dc2c08$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=elevation-profile.js.map

package/dist/elevation-profile.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {guard} from 'lit/directives/guard.js';\nimport type {PropertyValues, TemplateResult} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\nimport simplify from 'simplify-js';\n\ntype PlotPoint = {\n  x: number;\n  y: number;\n  coordinate: number[];\n};\n\nexport type OverDetails = {\n  coordinate: number[];\n  position: {x: number; y: number};\n};\n\n@customElement('elevation-profile')\nexport default class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 1;\n  @property({type: String}) locale = navigator.language;\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Array}) points: number[][] = [];\n  @property() updateScale = (x: scaleLinear, y: scaleLinear, width: number, height: number): void => {};\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n  @property({type: Boolean}) pointerEvents = true;\n\n  @state() pointer = {x: 0, y: 0};\n  private resizeController = new ResizeController(this, {\n    callback: () => [this.offsetWidth, this.offsetHeight],\n  });\n\n  private plotData: PlotPoint[] = [];\n  private pointsData: PlotPoint[] = [];\n  private scaleX = scaleLinear();\n  private scaleY = scaleLinear();\n\n  private bisectDistance = bisector((point: PlotPoint) => point.x);\n\n  private line = line()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y((point: PlotPoint) => this.scaleY(point.y));\n  private area = area()\n    .defined((point: PlotPoint) => !isNaN(point.y))\n    .x((point: PlotPoint) => this.scaleX(point.x))\n    .y1((point: PlotPoint) => this.scaleY(point.y));\n  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value, 'x'));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.tickFormat(value, 'y'));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat: Intl.NumberFormat | null = null;\n  private kilometerFormat: Intl.NumberFormat | null = null;\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('locale')) {\n      this.meterFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'meter',\n      });\n\n      this.kilometerFormat = new Intl.NumberFormat(this.locale, {\n        style: 'unit',\n        unit: 'kilometer',\n      });\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('lines')) {\n      this.plotData.length = 0;\n      for (const line of this.lines) {\n        const data = line.map((coordinate) => ({x: coordinate[3], y: coordinate[2], coordinate}));\n        this.plotData.push(...simplify(data, this.tolerance));\n        this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});\n      }\n\n      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));\n      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();\n\n      this.updateScale(this.scaleX, this.scaleY, this.offsetWidth, this.offsetHeight);\n    }\n    if (changedProperties.has('points')) {\n      this.pointsData.length = 0;\n      for (const point of this.points) {\n        this.pointsData.push({x: point[3], y: point[2], coordinate: point});\n      }\n    }\n  }\n\n  override render() {\n    const [width, height] = this.resizeController.value ?? [0, 0];\n\n    this.scaleX.range([this.margin.left, width - this.margin.right]);\n    this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n    this.area.y0(height - this.margin.bottom);\n\n    this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n    this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n    const xTicks = width / this.tickSize.x;\n    const yTicks = height / this.tickSize.y;\n    this.xAxis.ticks(xTicks);\n    this.xGrid.ticks(xTicks);\n    this.yAxis.ticks(yTicks);\n    this.yGrid.ticks(yTicks);\n\n    select(this.querySelector('.axis.x')).call(this.xAxis);\n    select(this.querySelector('.axis.y')).call(this.yAxis);\n    select(this.querySelector('.grid.x')).call(this.xGrid);\n    select(this.querySelector('.grid.y')).call(this.yGrid);\n\n    const offset = this.yGrid.offset();\n\n    return svg`\n      <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n        <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n        <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n        <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n\n        ${guard([this.lines, width, height], () => svg`\n          <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n          <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />`\n        )}\n\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <g clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\">\n            ${guard([this.lines, width, height], () => svg`<path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\" />`)}\n          </g>\n          <line\n            class=\"pointer-line\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <circle class=\"pointer-circle-outline\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"16\"/>\n          <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" r=\"6\"/>\n        </g>\n\n        ${this.pointsData.map((point, index) => this.pointSvg(this.scaleX(point.x), this.scaleY(point.y), index))}\n\n        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"${this.pointerEvents ? 'all' : 'none'}\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n        <g \n          transform=\"translate(${this.margin.left},${height - this.margin.bottom + offset})\"\n          class=\"axis\"\n          style=\"visibility: ${this.lines.length ? 'visible' : 'hidden'}\">\n          <line x2=\"${width - this.margin.left - this.margin.right}\"></line>\n        </g>\n      </svg>\n    `;\n  }\n\n  public tickFormat(value: number, axis: 'x' | 'y') {\n    if (axis === 'y' || value < 1000) {\n      return this.meterFormat!.format(value);\n    } else {\n      return this.kilometerFormat!.format(value / 1000);\n    }\n  }\n\n  public pointSvg(x: number, y: number, index: number): TemplateResult {\n    return svg`<circle class=\"point\" cx=\"${x}\" cy=\"${y}\" r=\"10\"/>`;\n  }\n\n  override firstUpdated() {\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  private pointerMove(event: PointerEvent) {\n    const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n    if (index < 0) {\n      return;\n    }\n    // FIXME:\n    // var d0 = this.plotData[index - 1]\n    // var d1 = this.plotData[index];\n    // // work out which date value is closest to the mouse\n    // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n    const data = this.plotData[index];\n\n    if (isNaN(data.y)) {\n      return;\n    }\n\n    this.pointer = {\n      x: this.scaleX(data.x),\n      y: this.scaleY(data.y),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent<OverDetails>('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer\n        }\n      }),\n    );\n  }\n\n  private pointerOut() {\n    this.pointer = {\n      x: 0,\n      y: 0,\n    };\n    this.dispatchEvent(new CustomEvent('out'));\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}

package/elevation-profile.ts

@@ -62,8 +62,6 @@ export default class ElevationProfile extends LitElement {
   private meterFormat: Intl.NumberFormat | null = null;
   private kilometerFormat: Intl.NumberFormat | null = null;
 
-  private lowestY: number | undefined;
-
   override updated(changedProperties: PropertyValues) {
     if (changedProperties.has('locale')) {
       this.meterFormat = new Intl.NumberFormat(this.locale, {
@@ -86,8 +84,6 @@ export default class ElevationProfile extends LitElement {
         this.plotData.push(...simplify(data, this.tolerance));
         this.plotData.push({x: line[line.length - 1][3], y: NaN, coordinate: []});
       }
-      this.lowestY = this.plotData.length && this.plotData
-          .reduce((a, b) => !isNaN(b.y) ? Math.min(a, b.y) : a, this.plotData[0].y);
 
       this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data.x));
       this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data.y)).nice();
@@ -125,8 +121,7 @@ export default class ElevationProfile extends LitElement {
     select(this.querySelector('.grid.x')).call(this.xGrid);
     select(this.querySelector('.grid.y')).call(this.yGrid);
 
-
-    const firstYTick = this.scaleY.ticks(yTicks)[0];
+    const offset = this.yGrid.offset();
 
     return svg`
       <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
@@ -167,9 +162,9 @@ export default class ElevationProfile extends LitElement {
           @pointerout="${this.pointerOut}"
         />
         <g 
-          transform="translate(${this.margin.left},${height - this.margin.bottom})"
+          transform="translate(${this.margin.left},${height - this.margin.bottom + offset})"
           class="axis"
-          style="visibility: ${this.lowestY && firstYTick >= this.lowestY ? 'visible' : 'hidden'}">
+          style="visibility: ${this.lines.length ? 'visible' : 'hidden'}">
           <line x2="${width - this.margin.left - this.margin.right}"></line>
         </g>
       </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/elevation-profile",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "license": "BSD-3-Clause",
   "repository": "github:geoblocks/elevation-profile",
   "type": "module",