@geoblocks/elevation-profile 0.0.3 → 0.0.4

package/dist/index.html

@@ -83,6 +83,7 @@ elevation-profile .area {
     </div>
     <button id="set-lines">set lines</button>
     <button id="reset-lines">reset lines</button>
+    <button id="save">save</button>
 
     <pre id="logs"></pre>
 
@@ -91,12 +92,20 @@ const tooltip = document.querySelector("#tooltip");
 const logs = document.querySelector("#logs");
 const setLines = document.querySelector("#set-lines");
 const resetLines = document.querySelector("#reset-lines");
-profile.margin = {
-    top: 20,
-    right: 20,
-    bottom: 30,
-    left: 100
-};
+const save = document.querySelector("#save");
+save.addEventListener("click", ()=>{
+    const svg = profile.innerHTML;
+    const blob = new Blob([
+        svg
+    ], {
+        type: "image/svg+xml"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "elevation.svg";
+    a.click();
+});
 setLines.addEventListener("click", ()=>{
     profile.lines = [
         [
@@ -553,6 +562,7 @@ profile.addEventListener("over", (event)=>{
     tooltip.style.display = "block";
     tooltip.textContent = `${event.detail.coordinate[2]} m`;
     tooltip.style.left = `${event.detail.position.x}px`;
+    tooltip.style.top = `${event.detail.position.y - 20}px`;
 });
 profile.addEventListener("out", (event)=>{
     logs.textContent = "";

package/elevation-profile.ts

@@ -1,7 +1,6 @@
 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';
@@ -19,7 +18,7 @@ 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: PlotPoint[] = [];
   private scaleX = scaleLinear();
@@ -33,17 +32,20 @@ export class ElevationProfile extends LitElement {
   private area = area()
     .x((point: PlotPoint) => this.scaleX(point[0]))
     .y1((point: PlotPoint) => this.scaleY(point[1]));
-  private xAxis = axisBottom(this.scaleX)
-    .tickFormat((val: number) => val + ' m');
-  private yAxis = axisLeft(this.scaleY)
-    .tickFormat((val: number) => val + ' 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();
+  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')) {
@@ -54,9 +56,9 @@ export class ElevationProfile extends LitElement {
     }
   }
 
-  override shouldUpdate(): boolean {
-      return this.lines.length > 0;
-  }
+  // override shouldUpdate(): boolean {
+  //     return this.lines.length > 0;
+  // }
 
   override render() {
     const width = this.offsetWidth;
@@ -77,17 +79,17 @@ 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'}">
@@ -108,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}"
         />
@@ -115,6 +118,14 @@ 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();
@@ -123,6 +134,10 @@ export class ElevationProfile extends LitElement {
   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);
+
+    if (index < 0) {
+      return;
+    }
     // FIXME:
     // var d0 = data[i - 1]
     // var d1 = data[i];

package/package.json

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