@geoblocks/elevation-profile 0.0.2 → 0.0.4

package/elevation-profile.ts

@@ -1,7 +1,7 @@
 import {LitElement, svg} from 'lit';
 import {customElement, state, property} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
-import {createRef, ref} from 'lit/directives/ref.js';
+import type {PropertyValues} from 'lit';
 
 import {extent, bisector} from 'd3-array';
 import {scaleLinear} from 'd3-scale';
@@ -9,6 +9,7 @@ import {line, area} from 'd3-shape';
 import {axisBottom, axisLeft} from 'd3-axis';
 import {select, pointer} from 'd3-selection';
 
+type PlotPoint = number[];
 
 @customElement('elevation-profile')
 export class ElevationProfile extends LitElement {
@@ -17,42 +18,49 @@ export class ElevationProfile extends LitElement {
   @property({type: Object}) tickSize = {x: 100, y: 40};
 
   @state() pointer = {x: 0, y: 0};
-  private resizeController = new ResizeController(this, {});
+  private _resizeController = new ResizeController(this, {});
 
-  private plotData: number[][] = [];
+  private plotData: PlotPoint[] = [];
   private scaleX = scaleLinear();
   private scaleY = scaleLinear();
 
-  private bisectDistance = bisector((data) => data[0]).left;
+  private bisectDistance = bisector((point: PlotPoint) => point[0]);
 
   private line = line()
-    .x((point) => this.scaleX(point[0]))
-    .y((point) => this.scaleY(point[1]));
+    .x((point: PlotPoint) => this.scaleX(point[0]))
+    .y((point: PlotPoint) => this.scaleY(point[1]));
   private area = area()
-    .x((point) => this.scaleX(point[0]))
-    .y1((point) => this.scaleY(point[1]));
-  private xAxis = axisBottom(this.scaleX)
-    .tickFormat((i) => i + ' m');
-  private yAxis = axisLeft(this.scaleY)
-    .tickFormat((i) => i + ' m');
-    private xGrid = axisBottom(this.scaleX).tickFormat(() => '');
-    private yGrid = axisLeft(this.scaleY).tickFormat(() => '');
-
-  private xRef = createRef();
-  private yRef = createRef();
-  private yGridRef = createRef();
-  private xGridRef = createRef();
-
-  willUpdate(changedProperties) {
+    .x((point: PlotPoint) => this.scaleX(point[0]))
+    .y1((point: PlotPoint) => this.scaleY(point[1]));
+  private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));
+  private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.tickFormat(value));
+  private xGrid = axisBottom(this.scaleX).tickFormat(() => '');
+  private yGrid = axisLeft(this.scaleY).tickFormat(() => '');
+
+  private meterFormat = Intl.NumberFormat('de-CH', {
+    style: 'unit',
+    unit: 'meter',
+  });
+
+  private kilometerFormat = Intl.NumberFormat('de-CH', {
+    style: 'unit',
+    unit: 'kilometer',
+  });
+
+  override willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has('lines')) {
       this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);
 
-      this.scaleX.domain(extent(this.plotData, (data) => data[0]));
-      this.scaleY.domain(extent(this.plotData, (data) => data[1])).nice();
+      this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data[0]));
+      this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data[1])).nice();
     }
   }
 
-  render() {
+  // override shouldUpdate(): boolean {
+  //     return this.lines.length > 0;
+  // }
+
+  override render() {
     const width = this.offsetWidth;
     const height = this.offsetHeight;
 
@@ -71,22 +79,22 @@ export class ElevationProfile extends LitElement {
     this.yAxis.ticks(yTicks);
     this.yGrid.ticks(yTicks);
 
-    select(this.xRef.value).call(this.xAxis);
-    select(this.yRef.value).call(this.yAxis);
-    select(this.xGridRef.value).call(this.xGrid);
-    select(this.yGridRef.value).call(this.yGrid);
+    select(this.querySelector('.axis.x')).call(this.xAxis);
+    select(this.querySelector('.axis.y')).call(this.yAxis);
+    select(this.querySelector('.grid.x')).call(this.xGrid);
+    select(this.querySelector('.grid.y')).call(this.yGrid);
 
     return svg`
-      <svg width="${width}" height="${height}">
-        <g class="grid y" ${ref(this.yGridRef)} transform="translate(${this.margin.left}, 0)" />
-        <g class="grid x" ${ref(this.xGridRef)} transform="translate(0, ${this.margin.bottom})" />
-        <g class="axis x" ${ref(this.xRef)} transform="translate(0, ${height - this.margin.bottom})" />
-        <g class="axis y" ${ref(this.yRef)} transform="translate(${this.margin.left}, 0)" />
+      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+        <g class="grid y" transform="translate(${this.margin.left}, 0)" />
+        <g class="grid x" transform="translate(0, ${this.margin.bottom})" />
+        <g class="axis x" transform="translate(0, ${height - this.margin.bottom})" />
+        <g class="axis y" transform="translate(${this.margin.left}, 0)" />
         <path class="area" d="${this.area(this.plotData)}" />
         <path class="elevation" d="${this.line(this.plotData)}" fill="none" />
         <g style="visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}">
           <path class="elevation highlight" d="${this.line(this.plotData)}" fill="none"
-            clip-path="polygon(0 0, ${this.pointer.x - 40} 0, ${this.pointer.x - 40} 100%, 0 100%)"
+            clip-path="polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)"
           />
           <line
             class="pointer-line y"
@@ -102,6 +110,7 @@ export class ElevationProfile extends LitElement {
           height="${height}"
           fill="none"
           pointer-events="all"
+          style="touch-action: none;"
           @pointermove="${this.pointerMove}"
           @pointerout="${this.pointerOut}"
         />
@@ -109,9 +118,26 @@ export class ElevationProfile extends LitElement {
     `;
   }
 
+  private tickFormat(value: number) {
+    if (value < 1000) {
+      return this.meterFormat.format(value);
+    } else {
+      return this.kilometerFormat.format(value / 1000);
+    }
+  }
+
+  override firstUpdated() {
+    // FIXME: because the ref element are used before render is done, we need to force an update
+    this.requestUpdate();
+  }
+
   private pointerMove(event: PointerEvent) {
     const pointerDistance = this.scaleX.invert(pointer(event)[0]);
-    const index = Math.min(this.bisectDistance(this.plotData, pointerDistance), this.plotData.length - 1);
+    const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);
+
+    if (index < 0) {
+      return;
+    }
     // FIXME:
     // var d0 = data[i - 1]
     // var d1 = data[i];
@@ -143,7 +169,7 @@ export class ElevationProfile extends LitElement {
     this.dispatchEvent(new CustomEvent('out'));
   }
 
-  createRenderRoot() {
+  override createRenderRoot() {
     return this;
   }
 }

package/package.json

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