@geoblocks/elevation-profile 0.0.23 → 0.0.25-beta.1

package/README.md

@@ -26,6 +26,9 @@ npm i --save @geoblocks/elevation-profile
 | --------------- | ---------------- | -------------------------------------------- | -----------
 | `lines`         | `number[][][]`   |                                              | **required** MultiLineString coordinates
 | `points`        | `number[][]`     |                                              | Points to be displayed on the profile
+| `lineSegments`  | `SegmentData`    | `undefined`                                  | Segments for the elevation line with different visual properties
+| `xAxisSegments` | `SegmentData`    | `undefined`                                  | Segments for trail bands below the x-axis
+| `areaSegments`  | `SegmentData`    | `undefined`                                  | Segments for the area below the elevation line
 | `margin`        | `Object`         | `{top: 20, right: 20, bottom: 20, left: 40}` | Margin in pixels around the elevation profile
 | `pointerEvents` | `Boolean`        | `true`                                       | Whether to emit pointer events
 | `tickSize`      | `Object`         | `{x: 100, y: 40}`                            | Size of the ticks in pixels
@@ -66,13 +69,79 @@ profile.pointSvg = (x, y, index) => {
 
 Where `x` and `y` are the position in pixels and `index` is the index of the point in the `points` array.
 
+### Segments
+
+Segments allow you to style different parts of the elevation profile based on properties like surface type, hiking category, etc.
+
+**Type definition:**
+```typescript
+type SegmentData = Array<[number, number, string | null]>;
+// Format: [startIndex, endIndex, value]
+// Use null as value to create "holes" (segments without styling)
+```
+
+**Example usage:**
+```javascript
+profile.lineSegments = [
+  [0, 175, "paved"],
+  [175, 195, "unpaved"],
+  [195, 196, "paved"],
+  [196, 213, "unpaved"]
+];
+
+profile.xAxisSegments = [
+  [0, 5, "bergwanderweg"],
+  [5, 102, "other"],
+  [102, 113, "bergwanderweg"]
+];
+
+// Example with holes (null values won't render)
+profile.lineSegments = [
+  [0, 50, "paved"],
+  [50, 100, null],  // No segment rendered for this range
+  [100, 150, "unpaved"]
+];
+```
+
+**Styling segments:**
+
+Segments are rendered with `data-value` attributes that you can style externally:
+
+- **Line segments** (`lineSegments`): Multiple `<path>` elements with class `elevation` and `data-value` attribute
+- **Trail bands** (`xAxisSegments`): Horizontal `<rect>` elements with class `trail-band` and `data-value` attribute
+
+```css
+/* Style line segments */
+.elevation {
+  /* style for segments without a specific value */
+  stroke: #000;
+}
+.elevation[data-value="paved"] {
+  stroke: #2ecc71;
+}
+.elevation[data-value="unpaved"] {
+  stroke: #e67e22;
+  stroke-dasharray: 5, 5;
+}
+
+/* Style trail bands */
+.trail-band[data-value="bergwanderweg"] {
+  fill: #e74c3c;
+}
+.trail-band[data-value="other"] {
+  fill: #3498db;
+}
+```
+
+**Note:** Segment indices should match the input coordinate array (before simplification).
+
 ### Events
 
 If `pointerEvents` is `true`, the component will emit the following custom events on pointer interaction:
 
 | Name            | When                                        | Detail type                                                | Description
 | --------------- | ------------------------------------------- | ---------------------------------------------------------- | -----------
-| `over`          | The pointer is over the profile  | `{coordinate: number[], position: {x: number, y: number}}` | `coordinate` is the coordinate of the point on the MultiLineString and `position` is the position of the pointer relative to the component
+| `over`          | The pointer is over the profile  | `{coordinate: number[], position: {x: number, y: number}, segments?: {line?: string, xAxis?: string, area?: string}}` | `coordinate` is the coordinate of the point on the MultiLineString, `position` is the position of the pointer relative to the component, and `segments` contains the segment values at the pointer location
 | `out`           | The pointer leaves the profile   |  |
 
 ### Styling

package/dist/elevation-profile.d.ts

@@ -1,11 +1,16 @@
 import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { scaleLinear } from "d3-scale";
+export type SegmentData = Array<[number, number, string | null]>;
 export type OverDetails = {
     coordinate: number[];
     position: {
         x: number;
         y: number;
     };
+    segments?: {
+        line: string | null;
+        xAxis: string | null;
+    };
 };
 export default class ElevationProfile extends LitElement {
     tolerance: number;
@@ -24,6 +29,8 @@ export default class ElevationProfile extends LitElement {
         y: number;
     };
     pointerEvents: boolean;
+    lineSegments?: SegmentData;
+    xAxisSegments?: SegmentData;
     pointer: {
         x: number;
         y: number;
@@ -35,6 +42,7 @@ export default class ElevationProfile extends LitElement {
     tickValues(values: number[], axis: 'x' | 'y'): void;
     pointSvg(x: number, y: number, index: number): TemplateResult;
     firstUpdated(): void;
+    disconnectedCallback(): void;
     createRenderRoot(): this;
 }
 declare global {

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

@@ -1 +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,MAAO,WAAW,KAAK,WAAW,SAAS,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;IAiFR,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG;IAQzC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG;IAO5C,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: 20};\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));\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    const ml = (this.querySelector('.axis.y')?.getBoundingClientRect().width || 0) + this.margin.left\n\n    this.scaleX.range([ml, 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 + ml + 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}\" viewBox=\"0 0 ${width} ${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${ml}, 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(${ml}, 0)\" />\n\n        ${guard([this.lines, width, height, ml], () => 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 - ml} 0, ${this.pointer.x - ml} 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 x\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${ml}\"\n            y1=\"${this.pointer.y}\"\n            x2=\"${width - this.margin.right}\"\n            y2=\"${this.pointer.y}\"\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(${ml},${height - this.margin.bottom + offset})\"\n          class=\"axis\"\n          style=\"visibility: ${this.lines.length ? 'visible' : 'hidden'}\">\n          <line x2=\"${width - ml - 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 tickValues(values: number[], axis: 'x' | 'y') {\n    if (values.length === 0 || (axis !== 'x' && axis !== 'y')) {\n      return;\n    }\n    axis === 'x' ? this.xAxis.tickValues(values) : this.yAxis.tickValues(values);\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"}
+{"mappings":";;AAqBA,0BAA0B,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;AAEjE,0BAA0B;IACxB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACjC,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;CACH,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,GAAI,GAAG,WAAW,EAAE,GAAG,WAAW,EAAE,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,IAAI,CAAO;IAC5E,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAC1B,aAAa,UAAQ;IACvB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,WAAW,CAAC;IAG5C,OAAO;;;MAAgB;IA8BvB,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAczC,UAAU,CAAC,iBAAiB,EAAE,cAAc;IA6B5C,MAAM;IAsGR,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG;IAQzC,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,GAAG,GAAG;IAO5C,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc;IAI3D,YAAY;IAYZ,oBAAoB;IAuDpB,gBAAgB;CAG1B;AAgCD,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 {ifDefined} from 'lit/directives/if-defined.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 SegmentData = Array<[number, number, string | null]>;\n\nexport type OverDetails = {\n  coordinate: number[];\n  position: {x: number; y: number};\n  segments?: {\n    line: string | null;\n    xAxis: string | null;\n  };\n};\n\n@customElement('elevation-profile')\nexport default class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 0;\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: 20};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n  @property({type: Boolean}) pointerEvents = true;\n  @property({type: Array}) lineSegments?: SegmentData;\n  @property({type: Array}) xAxisSegments?: SegmentData;\n  private yAxisObserver: ResizeObserver | null = null;\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 lineSegmentsData: SegmentData = [];\n  private xAxisSegmentsData: SegmentData = [];\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));\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    // FIXME: what if this.lines is not set yet?\n    if (changedProperties.has('lineSegments')) {\n      this.lineSegmentsData = fillUnspecified(this.lineSegments || [], this.lines.length);\n    }\n    if (changedProperties.has('xAxisSegments')) {\n      this.xAxisSegmentsData = fillUnspecified(this.xAxisSegments || [], this.lines.length);\n    }\n  }\n\n  override render() {\n    const [width, height] = this.resizeController.value ?? [0, 0];\n    const ml = (this.querySelector('.axis.y')?.getBoundingClientRect().width || 0) + this.margin.left\n\n    this.scaleX.range([ml, 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 + ml + 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}\" viewBox=\"0 0 ${width} ${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${ml}, 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(${ml}, 0)\" />\n\n        ${guard([this.lines, width, height, ml], () => svg`\n          <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n          ${this.renderLineSegments('elevation')}`\n        )}\n\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <g clip-path=\"polygon(0 0, ${this.pointer.x - ml} 0, ${this.pointer.x - ml} 100%, 0 100%)\">\n            ${guard([this.lines, width, height, ml], () => this.renderLineSegments('elevation highlight'))}\n          </g>\n          <line\n            class=\"pointer-line x\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${ml}\"\n            y1=\"${this.pointer.y}\"\n            x2=\"${width - this.margin.right}\"\n            y2=\"${this.pointer.y}\"\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(${ml},${height - this.margin.bottom + offset})\"\n          class=\"axis\"\n          style=\"visibility: ${this.lines.length ? 'visible' : 'hidden'}\">\n          <line x2=\"${width - ml - this.margin.right}\"></line>\n        </g>\n        <g transform=\"translate(0,${height - this.margin.bottom + offset})\">\n          ${this.renderTrailBands()}\n        </g>\n      </svg>\n    `;\n  }\n\n  private renderLineSegments(className: string) {\n    return this.lineSegmentsData.map(([start, end, value]) => {\n      // FIXME: take line simplification into account: we have less points in plotData than in lines\n      const segmentData = this.plotData.slice(start, end + 1);\n      return svg`<path class=\"${className}\" data-value=\"${ifDefined(value)}\" d=\"${this.line(segmentData)}\" fill=\"none\" />`;\n    });\n  }\n\n  private renderTrailBands() {\n    return this.xAxisSegmentsData.map(([start, end, value]) => {\n      // FIXME: take line simplification into account: we have less points in plotData than in lines\n      const x1 = this.scaleX(this.plotData[start]?.x ?? 0);\n      const x2 = this.scaleX(this.plotData[end]?.x ?? 0);\n      const bandWidth = x2 - x1;\n      return svg`<rect class=\"trail-band\" data-value=\"${ifDefined(value)}\" x=\"${x1}\" width=\"${bandWidth}\" />`;\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 tickValues(values: number[], axis: 'x' | 'y') {\n    if (values.length === 0 || (axis !== 'x' && axis !== 'y')) {\n      return;\n    }\n    axis === 'x' ? this.xAxis.tickValues(values) : this.yAxis.tickValues(values);\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    const axisY = this.querySelector('.axis.y');\n    if (axisY) {\n      this.yAxisObserver = new ResizeObserver(() => {\n        this.requestUpdate()\n      })\n      this.yAxisObserver.observe(axisY);\n    }\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback() {\n    if (this.yAxisObserver) {\n      this.yAxisObserver.disconnect();\n    }\n    super.disconnectedCallback();\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    const segments: OverDetails['segments'] = {\n      line: getSegmentValueAtIndex(this.lineSegmentsData, index),\n      xAxis: getSegmentValueAtIndex(this.xAxisSegmentsData, index),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent<OverDetails>('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer,\n          ...(Object.keys(segments).length > 0 && { segments })\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\nfunction fillUnspecified(segment: SegmentData, length: number): SegmentData {\n  const filledSegments: SegmentData = [];\n  let currentIndex = 0;\n\n  for (const [start, end, value] of segment) {\n    if (start > currentIndex) {\n      filledSegments.push([currentIndex, start, null]);\n    }\n    filledSegments.push([start, end, value]);\n    currentIndex = end;\n  }\n\n  if (currentIndex < length) {\n    filledSegments.push([currentIndex, length, null]);\n  }\n\n  return filledSegments;\n}\n\nfunction getSegmentValueAtIndex(segments: SegmentData, index: number): string | null {\n  for (const [start, end, value] of segments) {\n    if (index >= start && index < end) {\n      return value;\n    }\n  }\n  // we must never be here because of fillUnspecified\n  return null;\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

@@ -2,6 +2,7 @@ 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 {ifDefined as $agntW$ifDefined} from "lit/directives/if-defined.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";
@@ -17,6 +18,7 @@ import {select as $agntW$select, pointer as $agntW$pointer} from "d3-selection";
 
 
 
+
 /*
  (c) 2017, Vladimir Agafonkin
  Simplify.js, a high-performance JS polyline simplification library
@@ -104,7 +106,7 @@ var $916babf1e6dc2c08$var$__decorate = undefined && undefined.__decorate || func
 let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0, $agntW$LitElement) {
     constructor(){
         super(...arguments);
-        this.tolerance = 1;
+        this.tolerance = 0;
         this.locale = navigator.language;
         this.lines = [];
         this.points = [];
@@ -120,6 +122,7 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
             y: 40
         };
         this.pointerEvents = true;
+        this.yAxisObserver = null;
         this.pointer = {
             x: 0,
             y: 0
@@ -132,6 +135,8 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
         });
         this.plotData = [];
         this.pointsData = [];
+        this.lineSegmentsData = [];
+        this.xAxisSegmentsData = [];
         this.scaleX = (0, $agntW$scaleLinear)();
         this.scaleY = (0, $agntW$scaleLinear)();
         this.bisectDistance = (0, $agntW$bisector)((point)=>point.x);
@@ -184,6 +189,9 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
                 coordinate: point
             });
         }
+        // FIXME: what if this.lines is not set yet?
+        if (changedProperties.has('lineSegments')) this.lineSegmentsData = $916babf1e6dc2c08$var$fillUnspecified(this.lineSegments || [], this.lines.length);
+        if (changedProperties.has('xAxisSegments')) this.xAxisSegmentsData = $916babf1e6dc2c08$var$fillUnspecified(this.xAxisSegments || [], this.lines.length);
     }
     render() {
         const [width, height] = this.resizeController.value ?? [
@@ -227,7 +235,7 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
             ml
         ], ()=>(0, $agntW$svg)`
           <path class="area" d="${this.area(this.plotData)}" />
-          <path class="elevation" d="${this.line(this.plotData)}" fill="none" />`)}
+          ${this.renderLineSegments('elevation')}`)}
 
         <g style="visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}">
           <g clip-path="polygon(0 0, ${this.pointer.x - ml} 0, ${this.pointer.x - ml} 100%, 0 100%)">
@@ -236,7 +244,7 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
             width,
             height,
             ml
-        ], ()=>(0, $agntW$svg)`<path class="elevation highlight" d="${this.line(this.plotData)}" fill="none" />`)}
+        ], ()=>this.renderLineSegments('elevation highlight'))}
           </g>
           <line
             class="pointer-line x"
@@ -273,9 +281,28 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
           style="visibility: ${this.lines.length ? 'visible' : 'hidden'}">
           <line x2="${width - ml - this.margin.right}"></line>
         </g>
+        <g transform="translate(0,${height - this.margin.bottom + offset})">
+          ${this.renderTrailBands()}
+        </g>
       </svg>
     `;
     }
+    renderLineSegments(className) {
+        return this.lineSegmentsData.map(([start, end, value])=>{
+            // FIXME: take line simplification into account: we have less points in plotData than in lines
+            const segmentData = this.plotData.slice(start, end + 1);
+            return (0, $agntW$svg)`<path class="${className}" data-value="${(0, $agntW$ifDefined)(value)}" d="${this.line(segmentData)}" fill="none" />`;
+        });
+    }
+    renderTrailBands() {
+        return this.xAxisSegmentsData.map(([start, end, value])=>{
+            // FIXME: take line simplification into account: we have less points in plotData than in lines
+            const x1 = this.scaleX(this.plotData[start]?.x ?? 0);
+            const x2 = this.scaleX(this.plotData[end]?.x ?? 0);
+            const bandWidth = x2 - x1;
+            return (0, $agntW$svg)`<rect class="trail-band" data-value="${(0, $agntW$ifDefined)(value)}" x="${x1}" width="${bandWidth}" />`;
+        });
+    }
     tickFormat(value, axis) {
         if (axis === 'y' || value < 1000) return this.meterFormat.format(value);
         else return this.kilometerFormat.format(value / 1000);
@@ -288,9 +315,20 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
         return (0, $agntW$svg)`<circle class="point" cx="${x}" cy="${y}" r="10"/>`;
     }
     firstUpdated() {
+        const axisY = this.querySelector('.axis.y');
+        if (axisY) {
+            this.yAxisObserver = new ResizeObserver(()=>{
+                this.requestUpdate();
+            });
+            this.yAxisObserver.observe(axisY);
+        }
         // FIXME: because the ref element are used before render is done, we need to force an update
         this.requestUpdate();
     }
+    disconnectedCallback() {
+        if (this.yAxisObserver) this.yAxisObserver.disconnect();
+        super.disconnectedCallback();
+    }
     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);
@@ -306,10 +344,17 @@ let $916babf1e6dc2c08$var$ElevationProfile = class ElevationProfile extends (0,
             x: this.scaleX(data.x),
             y: this.scaleY(data.y)
         };
+        const segments = {
+            line: $916babf1e6dc2c08$var$getSegmentValueAtIndex(this.lineSegmentsData, index),
+            xAxis: $916babf1e6dc2c08$var$getSegmentValueAtIndex(this.xAxisSegmentsData, index)
+        };
         this.dispatchEvent(new CustomEvent('over', {
             detail: {
                 coordinate: this.plotData[index].coordinate,
-                position: this.pointer
+                position: this.pointer,
+                ...Object.keys(segments).length > 0 && {
+                    segments: segments
+                }
             }
         }));
     }
@@ -362,6 +407,16 @@ $916babf1e6dc2c08$var$__decorate([
         type: Boolean
     })
 ], $916babf1e6dc2c08$var$ElevationProfile.prototype, "pointerEvents", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Array
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "lineSegments", void 0);
+$916babf1e6dc2c08$var$__decorate([
+    (0, $agntW$property)({
+        type: Array
+    })
+], $916babf1e6dc2c08$var$ElevationProfile.prototype, "xAxisSegments", void 0);
 $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$state)()
 ], $916babf1e6dc2c08$var$ElevationProfile.prototype, "pointer", void 0);
@@ -369,6 +424,36 @@ $916babf1e6dc2c08$var$ElevationProfile = $916babf1e6dc2c08$var$__decorate([
     (0, $agntW$customElement)('elevation-profile')
 ], $916babf1e6dc2c08$var$ElevationProfile);
 var $916babf1e6dc2c08$export$2e2bcd8739ae039 = $916babf1e6dc2c08$var$ElevationProfile;
+function $916babf1e6dc2c08$var$fillUnspecified(segment, length) {
+    const filledSegments = [];
+    let currentIndex = 0;
+    for (const [start, end, value] of segment){
+        if (start > currentIndex) filledSegments.push([
+            currentIndex,
+            start,
+            null
+        ]);
+        filledSegments.push([
+            start,
+            end,
+            value
+        ]);
+        currentIndex = end;
+    }
+    if (currentIndex < length) filledSegments.push([
+        currentIndex,
+        length,
+        null
+    ]);
+    return filledSegments;
+}
+function $916babf1e6dc2c08$var$getSegmentValueAtIndex(segments, index) {
+    for (const [start, end, value] of segments){
+        if (index >= start && index < end) return value;
+    }
+    // we must never be here because of fillUnspecified
+    return null;
+}
 
 
 export {$916babf1e6dc2c08$export$2e2bcd8739ae039 as default};

package/dist/elevation-profile.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["elevation-profile.ts","simplify.js"],"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: 20};\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));\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    const ml = (this.querySelector('.axis.y')?.getBoundingClientRect().width || 0) + this.margin.left\n\n    this.scaleX.range([ml, 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 + ml + 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}\" viewBox=\"0 0 ${width} ${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${ml}, 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(${ml}, 0)\" />\n\n        ${guard([this.lines, width, height, ml], () => 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 - ml} 0, ${this.pointer.x - ml} 100%, 0 100%)\">\n            ${guard([this.lines, width, height, ml], () => svg`<path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\" />`)}\n          </g>\n          <line\n            class=\"pointer-line x\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${ml}\"\n            y1=\"${this.pointer.y}\"\n            x2=\"${width - this.margin.right}\"\n            y2=\"${this.pointer.y}\"\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(${ml},${height - this.margin.bottom + offset})\"\n          class=\"axis\"\n          style=\"visibility: ${this.lines.length ? 'visible' : 'hidden'}\">\n          <line x2=\"${width - ml - 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 tickValues(values: number[], axis: 'x' | 'y') {\n    if (values.length === 0 || (axis !== 'x' && axis !== 'y')) {\n      return;\n    }\n    axis === 'x' ? this.xAxis.tickValues(values) : this.yAxis.tickValues(values);\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","/*\n (c) 2017, Vladimir Agafonkin\n Simplify.js, a high-performance JS polyline simplification library\n mourner.github.io/simplify-js\n*/\n\n// to suit your point format, run search/replace for '.x' and '.y';\n// for 3D version, see 3d branch (configurability would draw significant performance overhead)\n\n// square distance between 2 points\nfunction getSqDist(p1, p2) {\n  var dx = p1.x - p2.x,\n    dy = p1.y - p2.y;\n\n  return dx * dx + dy * dy;\n}\n\n// square distance from a point to a segment\nfunction getSqSegDist(p, p1, p2) {\n  var x = p1.x,\n    y = p1.y,\n    dx = p2.x - x,\n    dy = p2.y - y;\n\n  if (dx !== 0 || dy !== 0) {\n    var t = ((p.x - x) * dx + (p.y - y) * dy) / (dx * dx + dy * dy);\n\n    if (t > 1) {\n      x = p2.x;\n      y = p2.y;\n    } else if (t > 0) {\n      x += dx * t;\n      y += dy * t;\n    }\n  }\n\n  dx = p.x - x;\n  dy = p.y - y;\n\n  return dx * dx + dy * dy;\n}\n// rest of the code doesn't care about point format\n\n// basic distance-based simplification\nfunction simplifyRadialDist(points, sqTolerance) {\n  var prevPoint = points[0],\n    newPoints = [prevPoint],\n    point;\n\n  for (var i = 1, len = points.length; i < len; i++) {\n    point = points[i];\n\n    if (getSqDist(point, prevPoint) > sqTolerance) {\n      newPoints.push(point);\n      prevPoint = point;\n    }\n  }\n\n  if (prevPoint !== point) newPoints.push(point);\n\n  return newPoints;\n}\n\nfunction simplifyDPStep(points, first, last, sqTolerance, simplified) {\n  var maxSqDist = sqTolerance,\n    index;\n\n  for (var i = first + 1; i < last; i++) {\n    var sqDist = getSqSegDist(points[i], points[first], points[last]);\n\n    if (sqDist > maxSqDist) {\n      index = i;\n      maxSqDist = sqDist;\n    }\n  }\n\n  if (maxSqDist > sqTolerance) {\n    if (index - first > 1)\n      simplifyDPStep(points, first, index, sqTolerance, simplified);\n    simplified.push(points[index]);\n    if (last - index > 1)\n      simplifyDPStep(points, index, last, sqTolerance, simplified);\n  }\n}\n\n// simplification using Ramer-Douglas-Peucker algorithm\nfunction simplifyDouglasPeucker(points, sqTolerance) {\n  var last = points.length - 1;\n\n  var simplified = [points[0]];\n  simplifyDPStep(points, 0, last, sqTolerance, simplified);\n  simplified.push(points[last]);\n\n  return simplified;\n}\n\n// both algorithms combined for awesome performance\nexport default function simplify(points, tolerance, highestQuality) {\n  if (points.length <= 2) return points;\n\n  var sqTolerance = tolerance !== undefined ? tolerance * tolerance : 1;\n\n  points = highestQuality ? points : simplifyRadialDist(points, sqTolerance);\n  points = simplifyDouglasPeucker(points, sqTolerance);\n\n  return points;\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}
+{"mappings":"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","sources":["elevation-profile.ts","simplify.js"],"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 {ifDefined} from 'lit/directives/if-defined.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 SegmentData = Array<[number, number, string | null]>;\n\nexport type OverDetails = {\n  coordinate: number[];\n  position: {x: number; y: number};\n  segments?: {\n    line: string | null;\n    xAxis: string | null;\n  };\n};\n\n@customElement('elevation-profile')\nexport default class ElevationProfile extends LitElement {\n  @property({type: Number}) tolerance = 0;\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: 20};\n  @property({type: Object}) tickSize = {x: 100, y: 40};\n  @property({type: Boolean}) pointerEvents = true;\n  @property({type: Array}) lineSegments?: SegmentData;\n  @property({type: Array}) xAxisSegments?: SegmentData;\n  private yAxisObserver: ResizeObserver | null = null;\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 lineSegmentsData: SegmentData = [];\n  private xAxisSegmentsData: SegmentData = [];\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));\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    // FIXME: what if this.lines is not set yet?\n    if (changedProperties.has('lineSegments')) {\n      this.lineSegmentsData = fillUnspecified(this.lineSegments || [], this.lines.length);\n    }\n    if (changedProperties.has('xAxisSegments')) {\n      this.xAxisSegmentsData = fillUnspecified(this.xAxisSegments || [], this.lines.length);\n    }\n  }\n\n  override render() {\n    const [width, height] = this.resizeController.value ?? [0, 0];\n    const ml = (this.querySelector('.axis.y')?.getBoundingClientRect().width || 0) + this.margin.left\n\n    this.scaleX.range([ml, 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 + ml + 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}\" viewBox=\"0 0 ${width} ${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g class=\"grid y\" transform=\"translate(${ml}, 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(${ml}, 0)\" />\n\n        ${guard([this.lines, width, height, ml], () => svg`\n          <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n          ${this.renderLineSegments('elevation')}`\n        )}\n\n        <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n          <g clip-path=\"polygon(0 0, ${this.pointer.x - ml} 0, ${this.pointer.x - ml} 100%, 0 100%)\">\n            ${guard([this.lines, width, height, ml], () => this.renderLineSegments('elevation highlight'))}\n          </g>\n          <line\n            class=\"pointer-line x\"\n            x1=\"${this.pointer.x}\"\n            y1=\"${this.margin.top}\"\n            x2=\"${this.pointer.x}\"\n            y2=\"${height - this.margin.bottom}\"\n          />\n          <line\n            class=\"pointer-line y\"\n            x1=\"${ml}\"\n            y1=\"${this.pointer.y}\"\n            x2=\"${width - this.margin.right}\"\n            y2=\"${this.pointer.y}\"\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(${ml},${height - this.margin.bottom + offset})\"\n          class=\"axis\"\n          style=\"visibility: ${this.lines.length ? 'visible' : 'hidden'}\">\n          <line x2=\"${width - ml - this.margin.right}\"></line>\n        </g>\n        <g transform=\"translate(0,${height - this.margin.bottom + offset})\">\n          ${this.renderTrailBands()}\n        </g>\n      </svg>\n    `;\n  }\n\n  private renderLineSegments(className: string) {\n    return this.lineSegmentsData.map(([start, end, value]) => {\n      // FIXME: take line simplification into account: we have less points in plotData than in lines\n      const segmentData = this.plotData.slice(start, end + 1);\n      return svg`<path class=\"${className}\" data-value=\"${ifDefined(value)}\" d=\"${this.line(segmentData)}\" fill=\"none\" />`;\n    });\n  }\n\n  private renderTrailBands() {\n    return this.xAxisSegmentsData.map(([start, end, value]) => {\n      // FIXME: take line simplification into account: we have less points in plotData than in lines\n      const x1 = this.scaleX(this.plotData[start]?.x ?? 0);\n      const x2 = this.scaleX(this.plotData[end]?.x ?? 0);\n      const bandWidth = x2 - x1;\n      return svg`<rect class=\"trail-band\" data-value=\"${ifDefined(value)}\" x=\"${x1}\" width=\"${bandWidth}\" />`;\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 tickValues(values: number[], axis: 'x' | 'y') {\n    if (values.length === 0 || (axis !== 'x' && axis !== 'y')) {\n      return;\n    }\n    axis === 'x' ? this.xAxis.tickValues(values) : this.yAxis.tickValues(values);\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    const axisY = this.querySelector('.axis.y');\n    if (axisY) {\n      this.yAxisObserver = new ResizeObserver(() => {\n        this.requestUpdate()\n      })\n      this.yAxisObserver.observe(axisY);\n    }\n    // FIXME: because the ref element are used before render is done, we need to force an update\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback() {\n    if (this.yAxisObserver) {\n      this.yAxisObserver.disconnect();\n    }\n    super.disconnectedCallback();\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    const segments: OverDetails['segments'] = {\n      line: getSegmentValueAtIndex(this.lineSegmentsData, index),\n      xAxis: getSegmentValueAtIndex(this.xAxisSegmentsData, index),\n    };\n\n    this.dispatchEvent(\n      new CustomEvent<OverDetails>('over', {\n        detail: {\n          coordinate: this.plotData[index].coordinate,\n          position: this.pointer,\n          ...(Object.keys(segments).length > 0 && { segments })\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\nfunction fillUnspecified(segment: SegmentData, length: number): SegmentData {\n  const filledSegments: SegmentData = [];\n  let currentIndex = 0;\n\n  for (const [start, end, value] of segment) {\n    if (start > currentIndex) {\n      filledSegments.push([currentIndex, start, null]);\n    }\n    filledSegments.push([start, end, value]);\n    currentIndex = end;\n  }\n\n  if (currentIndex < length) {\n    filledSegments.push([currentIndex, length, null]);\n  }\n\n  return filledSegments;\n}\n\nfunction getSegmentValueAtIndex(segments: SegmentData, index: number): string | null {\n  for (const [start, end, value] of segments) {\n    if (index >= start && index < end) {\n      return value;\n    }\n  }\n  // we must never be here because of fillUnspecified\n  return null;\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'elevation-profile': ElevationProfile;\n  }\n}\n","/*\n (c) 2017, Vladimir Agafonkin\n Simplify.js, a high-performance JS polyline simplification library\n mourner.github.io/simplify-js\n*/\n\n// to suit your point format, run search/replace for '.x' and '.y';\n// for 3D version, see 3d branch (configurability would draw significant performance overhead)\n\n// square distance between 2 points\nfunction getSqDist(p1, p2) {\n  var dx = p1.x - p2.x,\n    dy = p1.y - p2.y;\n\n  return dx * dx + dy * dy;\n}\n\n// square distance from a point to a segment\nfunction getSqSegDist(p, p1, p2) {\n  var x = p1.x,\n    y = p1.y,\n    dx = p2.x - x,\n    dy = p2.y - y;\n\n  if (dx !== 0 || dy !== 0) {\n    var t = ((p.x - x) * dx + (p.y - y) * dy) / (dx * dx + dy * dy);\n\n    if (t > 1) {\n      x = p2.x;\n      y = p2.y;\n    } else if (t > 0) {\n      x += dx * t;\n      y += dy * t;\n    }\n  }\n\n  dx = p.x - x;\n  dy = p.y - y;\n\n  return dx * dx + dy * dy;\n}\n// rest of the code doesn't care about point format\n\n// basic distance-based simplification\nfunction simplifyRadialDist(points, sqTolerance) {\n  var prevPoint = points[0],\n    newPoints = [prevPoint],\n    point;\n\n  for (var i = 1, len = points.length; i < len; i++) {\n    point = points[i];\n\n    if (getSqDist(point, prevPoint) > sqTolerance) {\n      newPoints.push(point);\n      prevPoint = point;\n    }\n  }\n\n  if (prevPoint !== point) newPoints.push(point);\n\n  return newPoints;\n}\n\nfunction simplifyDPStep(points, first, last, sqTolerance, simplified) {\n  var maxSqDist = sqTolerance,\n    index;\n\n  for (var i = first + 1; i < last; i++) {\n    var sqDist = getSqSegDist(points[i], points[first], points[last]);\n\n    if (sqDist > maxSqDist) {\n      index = i;\n      maxSqDist = sqDist;\n    }\n  }\n\n  if (maxSqDist > sqTolerance) {\n    if (index - first > 1)\n      simplifyDPStep(points, first, index, sqTolerance, simplified);\n    simplified.push(points[index]);\n    if (last - index > 1)\n      simplifyDPStep(points, index, last, sqTolerance, simplified);\n  }\n}\n\n// simplification using Ramer-Douglas-Peucker algorithm\nfunction simplifyDouglasPeucker(points, sqTolerance) {\n  var last = points.length - 1;\n\n  var simplified = [points[0]];\n  simplifyDPStep(points, 0, last, sqTolerance, simplified);\n  simplified.push(points[last]);\n\n  return simplified;\n}\n\n// both algorithms combined for awesome performance\nexport default function simplify(points, tolerance, highestQuality) {\n  if (points.length <= 2) return points;\n\n  var sqTolerance = tolerance !== undefined ? tolerance * tolerance : 1;\n\n  points = highestQuality ? points : simplifyRadialDist(points, sqTolerance);\n  points = simplifyDouglasPeucker(points, sqTolerance);\n\n  return points;\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}

package/elevation-profile.ts

@@ -2,6 +2,7 @@ import {LitElement, svg} from 'lit';
 import {customElement, state, property} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {guard} from 'lit/directives/guard.js';
+import {ifDefined} from 'lit/directives/if-defined.js';
 import type {PropertyValues, TemplateResult} from 'lit';
 
 import {extent, bisector} from 'd3-array';
@@ -18,14 +19,20 @@ type PlotPoint = {
   coordinate: number[];
 };
 
+export type SegmentData = Array<[number, number, string | null]>;
+
 export type OverDetails = {
   coordinate: number[];
   position: {x: number; y: number};
+  segments?: {
+    line: string | null;
+    xAxis: string | null;
+  };
 };
 
 @customElement('elevation-profile')
 export default class ElevationProfile extends LitElement {
-  @property({type: Number}) tolerance = 1;
+  @property({type: Number}) tolerance = 0;
   @property({type: String}) locale = navigator.language;
   @property({type: Array}) lines: number[][][] = [];
   @property({type: Array}) points: number[][] = [];
@@ -33,6 +40,9 @@ export default class ElevationProfile extends LitElement {
   @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 20};
   @property({type: Object}) tickSize = {x: 100, y: 40};
   @property({type: Boolean}) pointerEvents = true;
+  @property({type: Array}) lineSegments?: SegmentData;
+  @property({type: Array}) xAxisSegments?: SegmentData;
+  private yAxisObserver: ResizeObserver | null = null;
 
   @state() pointer = {x: 0, y: 0};
   private resizeController = new ResizeController(this, {
@@ -41,6 +51,8 @@ export default class ElevationProfile extends LitElement {
 
   private plotData: PlotPoint[] = [];
   private pointsData: PlotPoint[] = [];
+  private lineSegmentsData: SegmentData = [];
+  private xAxisSegmentsData: SegmentData = [];
   private scaleX = scaleLinear();
   private scaleY = scaleLinear();
 
@@ -96,6 +108,13 @@ export default class ElevationProfile extends LitElement {
         this.pointsData.push({x: point[3], y: point[2], coordinate: point});
       }
     }
+    // FIXME: what if this.lines is not set yet?
+    if (changedProperties.has('lineSegments')) {
+      this.lineSegmentsData = fillUnspecified(this.lineSegments || [], this.lines.length);
+    }
+    if (changedProperties.has('xAxisSegments')) {
+      this.xAxisSegmentsData = fillUnspecified(this.xAxisSegments || [], this.lines.length);
+    }
   }
 
   override render() {
@@ -133,12 +152,12 @@ export default class ElevationProfile extends LitElement {
 
         ${guard([this.lines, width, height, ml], () => svg`
           <path class="area" d="${this.area(this.plotData)}" />
-          <path class="elevation" d="${this.line(this.plotData)}" fill="none" />`
+          ${this.renderLineSegments('elevation')}`
         )}
 
         <g style="visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}">
           <g clip-path="polygon(0 0, ${this.pointer.x - ml} 0, ${this.pointer.x - ml} 100%, 0 100%)">
-            ${guard([this.lines, width, height, ml], () => svg`<path class="elevation highlight" d="${this.line(this.plotData)}" fill="none" />`)}
+            ${guard([this.lines, width, height, ml], () => this.renderLineSegments('elevation highlight'))}
           </g>
           <line
             class="pointer-line x"
@@ -175,10 +194,31 @@ export default class ElevationProfile extends LitElement {
           style="visibility: ${this.lines.length ? 'visible' : 'hidden'}">
           <line x2="${width - ml - this.margin.right}"></line>
         </g>
+        <g transform="translate(0,${height - this.margin.bottom + offset})">
+          ${this.renderTrailBands()}
+        </g>
       </svg>
     `;
   }
 
+  private renderLineSegments(className: string) {
+    return this.lineSegmentsData.map(([start, end, value]) => {
+      // FIXME: take line simplification into account: we have less points in plotData than in lines
+      const segmentData = this.plotData.slice(start, end + 1);
+      return svg`<path class="${className}" data-value="${ifDefined(value)}" d="${this.line(segmentData)}" fill="none" />`;
+    });
+  }
+
+  private renderTrailBands() {
+    return this.xAxisSegmentsData.map(([start, end, value]) => {
+      // FIXME: take line simplification into account: we have less points in plotData than in lines
+      const x1 = this.scaleX(this.plotData[start]?.x ?? 0);
+      const x2 = this.scaleX(this.plotData[end]?.x ?? 0);
+      const bandWidth = x2 - x1;
+      return svg`<rect class="trail-band" data-value="${ifDefined(value)}" x="${x1}" width="${bandWidth}" />`;
+    });
+  }
+
   public tickFormat(value: number, axis: 'x' | 'y') {
     if (axis === 'y' || value < 1000) {
       return this.meterFormat!.format(value);
@@ -199,10 +239,24 @@ export default class ElevationProfile extends LitElement {
   }
 
   override firstUpdated() {
+    const axisY = this.querySelector('.axis.y');
+    if (axisY) {
+      this.yAxisObserver = new ResizeObserver(() => {
+        this.requestUpdate()
+      })
+      this.yAxisObserver.observe(axisY);
+    }
     // FIXME: because the ref element are used before render is done, we need to force an update
     this.requestUpdate();
   }
 
+  override disconnectedCallback() {
+    if (this.yAxisObserver) {
+      this.yAxisObserver.disconnect();
+    }
+    super.disconnectedCallback();
+  }
+
   private pointerMove(event: PointerEvent) {
     const pointerDistance = this.scaleX.invert(pointer(event)[0]);
     const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);
@@ -227,11 +281,17 @@ export default class ElevationProfile extends LitElement {
       y: this.scaleY(data.y),
     };
 
+    const segments: OverDetails['segments'] = {
+      line: getSegmentValueAtIndex(this.lineSegmentsData, index),
+      xAxis: getSegmentValueAtIndex(this.xAxisSegmentsData, index),
+    };
+
     this.dispatchEvent(
       new CustomEvent<OverDetails>('over', {
         detail: {
           coordinate: this.plotData[index].coordinate,
-          position: this.pointer
+          position: this.pointer,
+          ...(Object.keys(segments).length > 0 && { segments })
         }
       }),
     );
@@ -250,6 +310,35 @@ export default class ElevationProfile extends LitElement {
   }
 }
 
+function fillUnspecified(segment: SegmentData, length: number): SegmentData {
+  const filledSegments: SegmentData = [];
+  let currentIndex = 0;
+
+  for (const [start, end, value] of segment) {
+    if (start > currentIndex) {
+      filledSegments.push([currentIndex, start, null]);
+    }
+    filledSegments.push([start, end, value]);
+    currentIndex = end;
+  }
+
+  if (currentIndex < length) {
+    filledSegments.push([currentIndex, length, null]);
+  }
+
+  return filledSegments;
+}
+
+function getSegmentValueAtIndex(segments: SegmentData, index: number): string | null {
+  for (const [start, end, value] of segments) {
+    if (index >= start && index < end) {
+      return value;
+    }
+  }
+  // we must never be here because of fillUnspecified
+  return null;
+}
+
 
 declare global {
   interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/elevation-profile",
-  "version": "0.0.23",
+  "version": "0.0.25-beta.1",
   "license": "BSD-3-Clause",
   "repository": "github:geoblocks/elevation-profile",
   "type": "module",
@@ -29,20 +29,20 @@
     "publish-demo": "rm -rf build && npm run build-demo && gh-pages -d build"
   },
   "dependencies": {
-    "@lit-labs/observers": "2.0.4",
+    "@lit-labs/observers": "2.0.6",
     "d3-array": "3.2.4",
     "d3-axis": "3.0.0",
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
     "d3-shape": "3.2.0",
-    "lit": "3.2.1"
+    "lit": "3.3.1"
   },
   "devDependencies": {
-    "@parcel/packager-ts": "2.13.3",
-    "@parcel/transformer-typescript-tsc": "2.13.3",
-    "@parcel/transformer-typescript-types": "2.13.3",
+    "@parcel/packager-ts": "2.16.3",
+    "@parcel/transformer-typescript-tsc": "2.16.3",
+    "@parcel/transformer-typescript-types": "2.16.3",
     "gh-pages": "6.3.0",
-    "parcel": "2.13.3",
-    "typescript": "5.7.3"
+    "parcel": "2.16.3",
+    "typescript": "5.9.3"
   }
 }