@geoblocks/elevation-profile 0.0.9 → 0.0.11

package/dist/elevation-profile.d.ts

@@ -1,8 +1,16 @@
 import { LitElement, PropertyValues } from "lit";
-import { scaleLinear } from "d3-scale";
-export class ElevationProfile extends LitElement {
+export type OverDetails = {
+    coordinate: number[];
+    position: {
+        x: number;
+        y: number;
+    };
+};
+export default class ElevationProfile extends LitElement {
     tolerance: number;
+    locale: string;
     lines: number[][][];
+    updateScale: (x: scaleLinear, y: scaleLinear, width: number, height: number) => void;
     margin: {
         top: number;
         right: number;
@@ -17,7 +25,7 @@ export class ElevationProfile extends LitElement {
         x: number;
         y: number;
     };
-    updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void;
+    updated(changedProperties: PropertyValues): void;
     willUpdate(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<2>;
     firstUpdated(): void;

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

@@ -1 +1 @@
-{"mappings":";;AAmBA,6BAC8B,SAAQ,UAAU;IACpB,SAAS,SAAK;IACf,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAM;IACxB,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IAgCzB,WAAW,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAE9E,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAgB5C,MAAM;IAmEN,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 type {PropertyValues} 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\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 1;\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: 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));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat.format(value));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat = Intl.NumberFormat(undefined, {\n    style: 'unit',\n    unit: 'meter',\n  });\n\n  private kilometerFormat = Intl.NumberFormat(undefined, {\n    style: 'unit',\n    unit: 'kilometer',\n  });\n\n  public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}\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  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\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    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        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\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        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat.format(value);\n    } else {\n      return this.kilometerFormat.format(value / 1000);\n    }\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('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"}
+{"mappings":";AAmBA,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;IACtC,WAAW,0CAA2C,MAAM,UAAU,MAAM,KAAG,IAAI,CAAO;IAC5E,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IAyBvB,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAczC,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAgB5C,MAAM;IAmEN,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 type {PropertyValues} 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() 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\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: 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));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat!.format(value));\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  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\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    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        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\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        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat!.format(value);\n    } else {\n      return this.kilometerFormat!.format(value / 1000);\n    }\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

@@ -23,11 +23,13 @@ var $916babf1e6dc2c08$var$__decorate = undefined && undefined.__decorate || func
     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$export$14ab3917b98d786a = class ElevationProfile extends (0, $agntW$LitElement) {
+let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0, $agntW$LitElement) {
     constructor(){
         super(...arguments);
         this.tolerance = 1;
+        this.locale = navigator.language;
         this.lines = [];
+        this.updateScale = (x, y, width, height)=>{};
         this.margin = {
             top: 20,
             right: 20,
@@ -53,16 +55,21 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
         this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((value)=>this.meterFormat.format(value));
         this.xGrid = (0, $agntW$axisBottom)(this.scaleX).tickFormat(()=>"");
         this.yGrid = (0, $agntW$axisLeft)(this.scaleY).tickFormat(()=>"");
-        this.meterFormat = Intl.NumberFormat(undefined, {
-            style: "unit",
-            unit: "meter"
-        });
-        this.kilometerFormat = Intl.NumberFormat(undefined, {
-            style: "unit",
-            unit: "kilometer"
-        });
+        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"
+            });
+        }
     }
-    updateScale(x, y, width, height) {}
     willUpdate(changedProperties) {
         if (changedProperties.has("lines")) {
             this.plotData.length = 0;
@@ -187,29 +194,38 @@ $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$property)({
         type: Number
     })
-], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "tolerance", void 0);
+], $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$export$14ab3917b98d786a.prototype, "lines", void 0);
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "lines", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)()
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "updateScale", void 0);
 $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$property)({
         type: Object
     })
-], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "margin", void 0);
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "margin", void 0);
 $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$property)({
         type: Object
     })
-], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "tickSize", void 0);
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "tickSize", void 0);
 $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$state)()
-], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "pointer", void 0);
-$916babf1e6dc2c08$export$14ab3917b98d786a = $916babf1e6dc2c08$var$__decorate([
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "pointer", void 0);
+$916babf1e6dc2c08$var$ElevationProfile = $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$customElement)("elevation-profile")
-], $916babf1e6dc2c08$export$14ab3917b98d786a);
+], $916babf1e6dc2c08$var$ElevationProfile);
+var $916babf1e6dc2c08$export$2e2bcd8739ae039 = $916babf1e6dc2c08$var$ElevationProfile;
 
 
-export {$916babf1e6dc2c08$export$14ab3917b98d786a as ElevationProfile};
+export {$916babf1e6dc2c08$export$2e2bcd8739ae039 as default};
 //# sourceMappingURL=elevation-profile.js.map

package/dist/elevation-profile.js.map

@@ -1 +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 type {PropertyValues} 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\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 1;\n  @property({type: Array}) lines: number[][][] = [];\n  @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: 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));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat.format(value));\n  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n  private meterFormat = Intl.NumberFormat(undefined, {\n    style: 'unit',\n    unit: 'meter',\n  });\n\n  private kilometerFormat = Intl.NumberFormat(undefined, {\n    style: 'unit',\n    unit: 'kilometer',\n  });\n\n  public updateScale(x: scaleLinear, y: scaleLinear, width: number, height: number): void {}\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  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\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    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        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\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        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat.format(value);\n    } else {\n      return this.kilometerFormat.format(value / 1000);\n    }\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('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"}
+{"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 type {PropertyValues} 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() 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\n  @state() pointer = {x: 0, y: 0};\n  private _resizeController = new ResizeController(this, {});\n\n  private plotData: 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));\n  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.meterFormat!.format(value));\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  }\n\n  override render() {\n    const width = this.offsetWidth;\n    const height = this.offsetHeight;\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    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        <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n        <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n            clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n          />\n          <line\n            class=\"pointer-line y\"\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        <rect\n          width=\"${width}\"\n          height=\"${height}\"\n          fill=\"none\"\n          pointer-events=\"all\"\n          style=\"display: block; touch-action: none;\"\n          @pointermove=\"${this.pointerMove}\"\n          @pointerout=\"${this.pointerOut}\"\n        />\n      </svg>\n    `;\n  }\n\n  private tickFormat(value: number) {\n    if (value < 1000) {\n      return this.meterFormat!.format(value);\n    } else {\n      return this.kilometerFormat!.format(value / 1000);\n    }\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"}