@geoblocks/elevation-profile 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/elevation-profile.d.ts +3 -2
  2. package/dist/elevation-profile.d.ts.map +1 -1
  3. package/dist/elevation-profile.js +14 -7
  4. package/dist/elevation-profile.js.map +1 -1
  5. package/dist/index.600fa9d1.js +30 -231
  6. package/dist/index.600fa9d1.js.map +1 -1
  7. package/dist/index.html +16 -6
  8. package/elevation-profile.ts +40 -25
  9. package/package.json +1 -1
package/dist/elevation-profile.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement } from "lit";
1
+ import { LitElement, PropertyValues } from "lit";
2
2
  export class ElevationProfile extends LitElement {
3
3
  lines: number[][];
4
4
  margin: {
@@ -15,8 +15,9 @@ export class ElevationProfile extends LitElement {
15
15
  x: number;
16
16
  y: number;
17
17
  };
18
- willUpdate(changedProperties: any): void;
18
+ willUpdate(changedProperties: PropertyValues): void;
19
19
  render(): import("lit-html").TemplateResult<2>;
20
+ firstUpdated(): void;
20
21
  createRenderRoot(): this;
21
22
  }
22
23
  declare global {
package/dist/elevation-profile.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";AAYA,6BAC8B,SAAQ,UAAU;IACrB,KAAK,EAAE,MAAM,EAAE,EAAE,CAAM;IACtB,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IA2BhC,UAAU,CAAC,iBAAiB,KAAA;IAS5B,MAAM;IA2FN,gBAAgB;CAGjB;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 {createRef, ref} from 'lit/directives/ref.js';\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\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\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: number[][] = [];\n private scaleX = scaleLinear();\n private scaleY = scaleLinear();\n\n private bisectDistance = bisector((data) => data[0]).left;\n\n private line = line()\n .x((point) => this.scaleX(point[0]))\n .y((point) => this.scaleY(point[1]));\n private area = area()\n .x((point) => this.scaleX(point[0]))\n .y1((point) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX)\n .tickFormat((i) => i + ' m');\n private yAxis = axisLeft(this.scaleY)\n .tickFormat((i) => i + ' m');\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private xRef = createRef();\n private yRef = createRef();\n private yGridRef = createRef();\n private xGridRef = createRef();\n\n willUpdate(changedProperties) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data) => data[1])).nice();\n }\n }\n\n 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.xRef.value).call(this.xAxis);\n select(this.yRef.value).call(this.yAxis);\n select(this.xGridRef.value).call(this.xGrid);\n select(this.yGridRef.value).call(this.yGrid);\n\n return svg`\n <svg width=\"${width}\" height=\"${height}\">\n <g class=\"grid y\" ${ref(this.yGridRef)} transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" ${ref(this.xGridRef)} transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" ${ref(this.xRef)} transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" ${ref(this.yRef)} 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 - 40} 0, ${this.pointer.x - 40} 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\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\n `;\n }\n\n private pointerMove(event: PointerEvent) {\n const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n const index = Math.min(this.bisectDistance(this.plotData, pointerDistance), this.plotData.length - 1);\n // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\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 this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\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 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"}
1
+ {"mappings":";AAcA,6BAC8B,SAAQ,UAAU;IACrB,KAAK,EAAE,MAAM,EAAE,EAAE,CAAM;IACtB,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IA2BvB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAa5C,MAAM;IAyDN,YAAY;IAuCZ,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 {createRef, ref} from 'lit/directives/ref.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\ntype PlotPoint = number[];\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\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[0]);\n\n private line = line()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y((point: PlotPoint) => this.scaleY(point[1]));\n private area = area()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y1((point: PlotPoint) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX)\n .tickFormat((val: number) => `${val} m`);\n private yAxis = axisLeft(this.scaleY)\n .tickFormat((val: number) => `${val} m`);\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private xRef = createRef();\n private yRef = createRef();\n private yGridRef = createRef();\n private xGridRef = createRef();\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data[1])).nice();\n }\n }\n\n // override shouldUpdate(): boolean {\n // return this.lines.length > 0;\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.xRef.value).call(this.xAxis);\n select(this.yRef.value).call(this.yAxis);\n select(this.xGridRef.value).call(this.xGrid);\n select(this.yGridRef.value).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\" ${ref(this.yGridRef)} transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" ${ref(this.xGridRef)} transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" ${ref(this.xRef)} transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" ${ref(this.yRef)} 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\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\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 // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\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 this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\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 CHANGED
@@ -41,15 +41,15 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
41
41
  x: 0,
42
42
  y: 0
43
43
  };
44
- this.resizeController = new (0, $agntW$ResizeController)(this, {});
44
+ this._resizeController = new (0, $agntW$ResizeController)(this, {});
45
45
  this.plotData = [];
46
46
  this.scaleX = (0, $agntW$scaleLinear)();
47
47
  this.scaleY = (0, $agntW$scaleLinear)();
48
- this.bisectDistance = (0, $agntW$bisector)((data)=>data[0]).left;
48
+ this.bisectDistance = (0, $agntW$bisector)((point)=>point[0]);
49
49
  this.line = (0, $agntW$line)().x((point)=>this.scaleX(point[0])).y((point)=>this.scaleY(point[1]));
50
50
  this.area = (0, $agntW$area)().x((point)=>this.scaleX(point[0])).y1((point)=>this.scaleY(point[1]));
51
- this.xAxis = (0, $agntW$axisBottom)(this.scaleX).tickFormat((i)=>i + " m");
52
- this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((i)=>i + " m");
51
+ this.xAxis = (0, $agntW$axisBottom)(this.scaleX).tickFormat((val)=>`${val} m`);
52
+ this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((val)=>`${val} m`);
53
53
  this.xGrid = (0, $agntW$axisBottom)(this.scaleX).tickFormat(()=>"");
54
54
  this.yGrid = (0, $agntW$axisLeft)(this.scaleY).tickFormat(()=>"");
55
55
  this.xRef = (0, $agntW$createRef)();
@@ -67,6 +67,9 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
67
67
  this.scaleY.domain((0, $agntW$extent)(this.plotData, (data)=>data[1])).nice();
68
68
  }
69
69
  }
70
+ // override shouldUpdate(): boolean {
71
+ // return this.lines.length > 0;
72
+ // }
70
73
  render() {
71
74
  const width = this.offsetWidth;
72
75
  const height = this.offsetHeight;
@@ -92,7 +95,7 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
92
95
  (0, $agntW$select)(this.xGridRef.value).call(this.xGrid);
93
96
  (0, $agntW$select)(this.yGridRef.value).call(this.yGrid);
94
97
  return (0, $agntW$svg)`
95
- <svg width="${width}" height="${height}">
98
+ <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
96
99
  <g class="grid y" ${(0, $agntW$ref)(this.yGridRef)} transform="translate(${this.margin.left}, 0)" />
97
100
  <g class="grid x" ${(0, $agntW$ref)(this.xGridRef)} transform="translate(0, ${this.margin.bottom})" />
98
101
  <g class="axis x" ${(0, $agntW$ref)(this.xRef)} transform="translate(0, ${height - this.margin.bottom})" />
@@ -101,7 +104,7 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
101
104
  <path class="elevation" d="${this.line(this.plotData)}" fill="none" />
102
105
  <g style="visibility: ${this.pointer.x > 0 ? "visible" : "hidden"}">
103
106
  <path class="elevation highlight" d="${this.line(this.plotData)}" fill="none"
104
- clip-path="polygon(0 0, ${this.pointer.x - 40} 0, ${this.pointer.x - 40} 100%, 0 100%)"
107
+ clip-path="polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)"
105
108
  />
106
109
  <line
107
110
  class="pointer-line y"
@@ -123,9 +126,13 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
123
126
  </svg>
124
127
  `;
125
128
  }
129
+ firstUpdated() {
130
+ // FIXME: because the ref element are used before render is done, we need to force an update
131
+ this.requestUpdate();
132
+ }
126
133
  pointerMove(event) {
127
134
  const pointerDistance = this.scaleX.invert((0, $agntW$pointer)(event)[0]);
128
- const index = Math.min(this.bisectDistance(this.plotData, pointerDistance), this.plotData.length - 1);
135
+ const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);
129
136
  // FIXME:
130
137
  // var d0 = data[i - 1]
131
138
  // var d1 = data[i];
package/dist/elevation-profile.js.map CHANGED
@@ -1 +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 {createRef, ref} from 'lit/directives/ref.js';\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\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\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: number[][] = [];\n private scaleX = scaleLinear();\n private scaleY = scaleLinear();\n\n private bisectDistance = bisector((data) => data[0]).left;\n\n private line = line()\n .x((point) => this.scaleX(point[0]))\n .y((point) => this.scaleY(point[1]));\n private area = area()\n .x((point) => this.scaleX(point[0]))\n .y1((point) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX)\n .tickFormat((i) => i + ' m');\n private yAxis = axisLeft(this.scaleY)\n .tickFormat((i) => i + ' m');\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private xRef = createRef();\n private yRef = createRef();\n private yGridRef = createRef();\n private xGridRef = createRef();\n\n willUpdate(changedProperties) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data) => data[1])).nice();\n }\n }\n\n 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.xRef.value).call(this.xAxis);\n select(this.yRef.value).call(this.yAxis);\n select(this.xGridRef.value).call(this.xGrid);\n select(this.yGridRef.value).call(this.yGrid);\n\n return svg`\n <svg width=\"${width}\" height=\"${height}\">\n <g class=\"grid y\" ${ref(this.yGridRef)} transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" ${ref(this.xGridRef)} transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" ${ref(this.xRef)} transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" ${ref(this.yRef)} 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 - 40} 0, ${this.pointer.x - 40} 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\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\n `;\n }\n\n private pointerMove(event: PointerEvent) {\n const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n const index = Math.min(this.bisectDistance(this.plotData, pointerDistance), this.plotData.length - 1);\n // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\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 this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\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 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"}
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 {createRef, ref} from 'lit/directives/ref.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\ntype PlotPoint = number[];\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\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[0]);\n\n private line = line()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y((point: PlotPoint) => this.scaleY(point[1]));\n private area = area()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y1((point: PlotPoint) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX)\n .tickFormat((val: number) => `${val} m`);\n private yAxis = axisLeft(this.scaleY)\n .tickFormat((val: number) => `${val} m`);\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private xRef = createRef();\n private yRef = createRef();\n private yGridRef = createRef();\n private xGridRef = createRef();\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data[1])).nice();\n }\n }\n\n // override shouldUpdate(): boolean {\n // return this.lines.length > 0;\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.xRef.value).call(this.xAxis);\n select(this.yRef.value).call(this.yAxis);\n select(this.xGridRef.value).call(this.xGrid);\n select(this.yGridRef.value).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\" ${ref(this.yGridRef)} transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" ${ref(this.xGridRef)} transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" ${ref(this.xRef)} transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" ${ref(this.yRef)} 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\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\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 // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\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 this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\n position: this.pointer\n }\n }),\n );\n }\n\n private pointerOut() {\n this.pointer = {\n x: 0,\n y: 0,\n };\n this.dispatchEvent(new CustomEvent('out'));\n }\n\n override createRenderRoot() {\n return this;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'elevation-profile': ElevationProfile;\n }\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}
package/dist/index.600fa9d1.js CHANGED
@@ -581,7 +581,6 @@ parcelHelpers.export(exports, "ElevationProfile", ()=>ElevationProfile);
581
581
  var _lit = require("lit");
582
582
  var _decoratorsJs = require("lit/decorators.js");
583
583
  var _resizeControllerJs = require("@lit-labs/observers/resize-controller.js");
584
- var _refJs = require("lit/directives/ref.js");
585
584
  var _d3Array = require("d3-array");
586
585
  var _d3Scale = require("d3-scale");
587
586
  var _d3Shape = require("d3-shape");
@@ -611,21 +610,25 @@ let ElevationProfile = class ElevationProfile extends (0, _lit.LitElement) {
611
610
  x: 0,
612
611
  y: 0
613
612
  };
614
- this.resizeController = new (0, _resizeControllerJs.ResizeController)(this, {});
613
+ this._resizeController = new (0, _resizeControllerJs.ResizeController)(this, {});
615
614
  this.plotData = [];
616
615
  this.scaleX = (0, _d3Scale.scaleLinear)();
617
616
  this.scaleY = (0, _d3Scale.scaleLinear)();
618
617
  this.bisectDistance = (0, _d3Array.bisector)((point)=>point[0]);
619
618
  this.line = (0, _d3Shape.line)().x((point)=>this.scaleX(point[0])).y((point)=>this.scaleY(point[1]));
620
619
  this.area = (0, _d3Shape.area)().x((point)=>this.scaleX(point[0])).y1((point)=>this.scaleY(point[1]));
621
- this.xAxis = (0, _d3Axis.axisBottom)(this.scaleX).tickFormat((val)=>val + " m");
622
- this.yAxis = (0, _d3Axis.axisLeft)(this.scaleY).tickFormat((val)=>val + " m");
620
+ this.xAxis = (0, _d3Axis.axisBottom)(this.scaleX).tickFormat((value)=>this.tickFormat(value));
621
+ this.yAxis = (0, _d3Axis.axisLeft)(this.scaleY).tickFormat((value)=>this.tickFormat(value));
623
622
  this.xGrid = (0, _d3Axis.axisBottom)(this.scaleX).tickFormat(()=>"");
624
623
  this.yGrid = (0, _d3Axis.axisLeft)(this.scaleY).tickFormat(()=>"");
625
- this.xRef = (0, _refJs.createRef)();
626
- this.yRef = (0, _refJs.createRef)();
627
- this.yGridRef = (0, _refJs.createRef)();
628
- this.xGridRef = (0, _refJs.createRef)();
624
+ this.meterFormat = Intl.NumberFormat("de-CH", {
625
+ style: "unit",
626
+ unit: "meter"
627
+ });
628
+ this.kilometerFormat = Intl.NumberFormat("de-CH", {
629
+ style: "unit",
630
+ unit: "kilometer"
631
+ });
629
632
  }
630
633
  willUpdate(changedProperties) {
631
634
  if (changedProperties.has("lines")) {
@@ -637,9 +640,9 @@ let ElevationProfile = class ElevationProfile extends (0, _lit.LitElement) {
637
640
  this.scaleY.domain((0, _d3Array.extent)(this.plotData, (data)=>data[1])).nice();
638
641
  }
639
642
  }
640
- shouldUpdate() {
641
- return this.lines.length > 0;
642
- }
643
+ // override shouldUpdate(): boolean {
644
+ // return this.lines.length > 0;
645
+ // }
643
646
  render() {
644
647
  const width = this.offsetWidth;
645
648
  const height = this.offsetHeight;
@@ -660,16 +663,16 @@ let ElevationProfile = class ElevationProfile extends (0, _lit.LitElement) {
660
663
  this.xGrid.ticks(xTicks);
661
664
  this.yAxis.ticks(yTicks);
662
665
  this.yGrid.ticks(yTicks);
663
- (0, _d3Selection.select)(this.xRef.value).call(this.xAxis);
664
- (0, _d3Selection.select)(this.yRef.value).call(this.yAxis);
665
- (0, _d3Selection.select)(this.xGridRef.value).call(this.xGrid);
666
- (0, _d3Selection.select)(this.yGridRef.value).call(this.yGrid);
666
+ (0, _d3Selection.select)(this.querySelector(".axis.x")).call(this.xAxis);
667
+ (0, _d3Selection.select)(this.querySelector(".axis.y")).call(this.yAxis);
668
+ (0, _d3Selection.select)(this.querySelector(".grid.x")).call(this.xGrid);
669
+ (0, _d3Selection.select)(this.querySelector(".grid.y")).call(this.yGrid);
667
670
  return (0, _lit.svg)`
668
- <svg width="${width}" height="${height}">
669
- <g class="grid y" ${(0, _refJs.ref)(this.yGridRef)} transform="translate(${this.margin.left}, 0)" />
670
- <g class="grid x" ${(0, _refJs.ref)(this.xGridRef)} transform="translate(0, ${this.margin.bottom})" />
671
- <g class="axis x" ${(0, _refJs.ref)(this.xRef)} transform="translate(0, ${height - this.margin.bottom})" />
672
- <g class="axis y" ${(0, _refJs.ref)(this.yRef)} transform="translate(${this.margin.left}, 0)" />
671
+ <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
672
+ <g class="grid y" transform="translate(${this.margin.left}, 0)" />
673
+ <g class="grid x" transform="translate(0, ${this.margin.bottom})" />
674
+ <g class="axis x" transform="translate(0, ${height - this.margin.bottom})" />
675
+ <g class="axis y" transform="translate(${this.margin.left}, 0)" />
673
676
  <path class="area" d="${this.area(this.plotData)}" />
674
677
  <path class="elevation" d="${this.line(this.plotData)}" fill="none" />
675
678
  <g style="visibility: ${this.pointer.x > 0 ? "visible" : "hidden"}">
@@ -690,12 +693,17 @@ let ElevationProfile = class ElevationProfile extends (0, _lit.LitElement) {
690
693
  height="${height}"
691
694
  fill="none"
692
695
  pointer-events="all"
696
+ style="touch-action: none;"
693
697
  @pointermove="${this.pointerMove}"
694
698
  @pointerout="${this.pointerOut}"
695
699
  />
696
700
  </svg>
697
701
  `;
698
702
  }
703
+ tickFormat(value) {
704
+ if (value < 1000) return this.meterFormat.format(value);
705
+ else return this.kilometerFormat.format(value / 1000);
706
+ }
699
707
  firstUpdated() {
700
708
  // FIXME: because the ref element are used before render is done, we need to force an update
701
709
  this.requestUpdate();
@@ -703,6 +711,7 @@ let ElevationProfile = class ElevationProfile extends (0, _lit.LitElement) {
703
711
  pointerMove(event) {
704
712
  const pointerDistance = this.scaleX.invert((0, _d3Selection.pointer)(event)[0]);
705
713
  const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);
714
+ if (index < 0) return;
706
715
  // FIXME:
707
716
  // var d0 = data[i - 1]
708
717
  // var d1 = data[i];
@@ -753,7 +762,7 @@ ElevationProfile = __decorate([
753
762
  (0, _decoratorsJs.customElement)("elevation-profile")
754
763
  ], ElevationProfile);
755
764
 
756
- },{"lit":"4antt","lit/decorators.js":"bCPKi","@lit-labs/observers/resize-controller.js":"567XO","lit/directives/ref.js":"eKwmp","d3-array":"1yX2W","d3-scale":"UQ8g3","d3-shape":"SqrXv","d3-axis":"2g6gM","d3-selection":"gn9gd","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"4antt":[function(require,module,exports) {
765
+ },{"lit":"4antt","lit/decorators.js":"bCPKi","@lit-labs/observers/resize-controller.js":"567XO","d3-array":"1yX2W","d3-scale":"UQ8g3","d3-shape":"SqrXv","d3-axis":"2g6gM","d3-selection":"gn9gd","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"4antt":[function(require,module,exports) {
757
766
  var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
758
767
  parcelHelpers.defineInteropFlag(exports);
759
768
  var _reactiveElement = require("@lit/reactive-element");
@@ -1719,216 +1728,6 @@ class s {
1719
1728
  }
1720
1729
  }
1721
1730
 
1722
- },{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"eKwmp":[function(require,module,exports) {
1723
- var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
1724
- parcelHelpers.defineInteropFlag(exports);
1725
- var _refJs = require("lit-html/directives/ref.js");
1726
- parcelHelpers.exportAll(_refJs, exports);
1727
-
1728
- },{"lit-html/directives/ref.js":"dVEkM","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"dVEkM":[function(require,module,exports) {
1729
- var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
1730
- parcelHelpers.defineInteropFlag(exports);
1731
- parcelHelpers.export(exports, "createRef", ()=>e);
1732
- parcelHelpers.export(exports, "ref", ()=>n);
1733
- var _litHtmlJs = require("../lit-html.js");
1734
- var _asyncDirectiveJs = require("../async-directive.js");
1735
- var _directiveJs = require("../directive.js");
1736
- /**
1737
- * @license
1738
- * Copyright 2020 Google LLC
1739
- * SPDX-License-Identifier: BSD-3-Clause
1740
- */ const e = ()=>new h;
1741
- class h {
1742
- }
1743
- const o = new WeakMap, n = (0, _directiveJs.directive)(class extends (0, _asyncDirectiveJs.AsyncDirective) {
1744
- render(i) {
1745
- return 0, _litHtmlJs.nothing;
1746
- }
1747
- update(i, [s]) {
1748
- const e = s !== this.G;
1749
- return e && void 0 !== this.G && this.ot(void 0), (e || this.rt !== this.lt) && (this.G = s, this.ct = i.options?.host, this.ot(this.lt = i.element)), _litHtmlJs.nothing;
1750
- }
1751
- ot(t) {
1752
- if ("function" == typeof this.G) {
1753
- const i = this.ct ?? globalThis;
1754
- let s = o.get(i);
1755
- void 0 === s && (s = new WeakMap, o.set(i, s)), void 0 !== s.get(this.G) && this.G.call(this.ct, void 0), s.set(this.G, t), void 0 !== t && this.G.call(this.ct, t);
1756
- } else this.G.value = t;
1757
- }
1758
- get rt() {
1759
- return "function" == typeof this.G ? o.get(this.ct ?? globalThis)?.get(this.G) : this.G?.value;
1760
- }
1761
- disconnected() {
1762
- this.rt === this.lt && this.ot(void 0);
1763
- }
1764
- reconnected() {
1765
- this.ot(this.lt);
1766
- }
1767
- });
1768
-
1769
- },{"../lit-html.js":"1cmQt","../async-directive.js":"4f1Uv","../directive.js":"9lbyV","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"4f1Uv":[function(require,module,exports) {
1770
- var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
1771
- parcelHelpers.defineInteropFlag(exports);
1772
- parcelHelpers.export(exports, "Directive", ()=>(0, _directiveJs.Directive));
1773
- parcelHelpers.export(exports, "PartType", ()=>(0, _directiveJs.PartType));
1774
- parcelHelpers.export(exports, "directive", ()=>(0, _directiveJs.directive));
1775
- parcelHelpers.export(exports, "AsyncDirective", ()=>f);
1776
- var _directiveHelpersJs = require("./directive-helpers.js");
1777
- var _directiveJs = require("./directive.js");
1778
- /**
1779
- * @license
1780
- * Copyright 2017 Google LLC
1781
- * SPDX-License-Identifier: BSD-3-Clause
1782
- */ const s = (i, t)=>{
1783
- const e = i._$AN;
1784
- if (void 0 === e) return !1;
1785
- for (const i of e)i._$AO?.(t, !1), s(i, t);
1786
- return !0;
1787
- }, o = (i)=>{
1788
- let t, e;
1789
- do {
1790
- if (void 0 === (t = i._$AM)) break;
1791
- e = t._$AN, e.delete(i), i = t;
1792
- }while (0 === e?.size);
1793
- }, r = (i)=>{
1794
- for(let t; t = i._$AM; i = t){
1795
- let e = t._$AN;
1796
- if (void 0 === e) t._$AN = e = new Set;
1797
- else if (e.has(i)) break;
1798
- e.add(i), c(t);
1799
- }
1800
- };
1801
- function h(i) {
1802
- void 0 !== this._$AN ? (o(this), this._$AM = i, r(this)) : this._$AM = i;
1803
- }
1804
- function n(i, t = !1, e = 0) {
1805
- const r = this._$AH, h = this._$AN;
1806
- if (void 0 !== h && 0 !== h.size) {
1807
- if (t) {
1808
- if (Array.isArray(r)) for(let i = e; i < r.length; i++)s(r[i], !1), o(r[i]);
1809
- else null != r && (s(r, !1), o(r));
1810
- } else s(this, i);
1811
- }
1812
- }
1813
- const c = (i)=>{
1814
- i.type == (0, _directiveJs.PartType).CHILD && (i._$AP ??= n, i._$AQ ??= h);
1815
- };
1816
- class f extends (0, _directiveJs.Directive) {
1817
- constructor(){
1818
- super(...arguments), this._$AN = void 0;
1819
- }
1820
- _$AT(i, t, e) {
1821
- super._$AT(i, t, e), r(this), this.isConnected = i._$AU;
1822
- }
1823
- _$AO(i, t = !0) {
1824
- i !== this.isConnected && (this.isConnected = i, i ? this.reconnected?.() : this.disconnected?.()), t && (s(this, i), o(this));
1825
- }
1826
- setValue(t) {
1827
- if ((0, _directiveHelpersJs.isSingleExpression)(this._$Ct)) this._$Ct._$AI(t, this);
1828
- else {
1829
- const i = [
1830
- ...this._$Ct._$AH
1831
- ];
1832
- i[this._$Ci] = t, this._$Ct._$AI(i, this, 0);
1833
- }
1834
- }
1835
- disconnected() {}
1836
- reconnected() {}
1837
- }
1838
-
1839
- },{"./directive-helpers.js":"cJsxz","./directive.js":"9lbyV","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"cJsxz":[function(require,module,exports) {
1840
- var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
1841
- parcelHelpers.defineInteropFlag(exports);
1842
- parcelHelpers.export(exports, "TemplateResultType", ()=>n);
1843
- parcelHelpers.export(exports, "clearPart", ()=>j);
1844
- parcelHelpers.export(exports, "getCommittedValue", ()=>p);
1845
- parcelHelpers.export(exports, "getDirectiveClass", ()=>d);
1846
- parcelHelpers.export(exports, "insertPart", ()=>r);
1847
- parcelHelpers.export(exports, "isCompiledTemplateResult", ()=>l);
1848
- parcelHelpers.export(exports, "isDirectiveResult", ()=>c);
1849
- parcelHelpers.export(exports, "isPrimitive", ()=>i);
1850
- parcelHelpers.export(exports, "isSingleExpression", ()=>f);
1851
- parcelHelpers.export(exports, "isTemplateResult", ()=>e);
1852
- parcelHelpers.export(exports, "removePart", ()=>h);
1853
- parcelHelpers.export(exports, "setChildPartValue", ()=>v);
1854
- parcelHelpers.export(exports, "setCommittedValue", ()=>m);
1855
- var _litHtmlJs = require("./lit-html.js");
1856
- /**
1857
- * @license
1858
- * Copyright 2020 Google LLC
1859
- * SPDX-License-Identifier: BSD-3-Clause
1860
- */ const { D: t } = (0, _litHtmlJs._$LH), i = (o)=>null === o || "object" != typeof o && "function" != typeof o, n = {
1861
- HTML: 1,
1862
- SVG: 2
1863
- }, e = (o, t)=>void 0 === t ? void 0 !== o?._$litType$ : o?._$litType$ === t, l = (o)=>null != o?._$litType$?.h, c = (o)=>void 0 !== o?._$litDirective$, d = (o)=>o?._$litDirective$, f = (o)=>void 0 === o.strings, s = ()=>document.createComment(""), r = (o, i, n)=>{
1864
- const e = o._$AA.parentNode, l = void 0 === i ? o._$AB : i._$AA;
1865
- if (void 0 === n) {
1866
- const i = e.insertBefore(s(), l), c = e.insertBefore(s(), l);
1867
- n = new t(i, c, o, o.options);
1868
- } else {
1869
- const t = n._$AB.nextSibling, i = n._$AM, c = i !== o;
1870
- if (c) {
1871
- let t;
1872
- n._$AQ?.(o), n._$AM = o, void 0 !== n._$AP && (t = o._$AU) !== i._$AU && n._$AP(t);
1873
- }
1874
- if (t !== l || c) {
1875
- let o = n._$AA;
1876
- for(; o !== t;){
1877
- const t = o.nextSibling;
1878
- e.insertBefore(o, l), o = t;
1879
- }
1880
- }
1881
- }
1882
- return n;
1883
- }, v = (o, t, i = o)=>(o._$AI(t, i), o), u = {}, m = (o, t = u)=>o._$AH = t, p = (o)=>o._$AH, h = (o)=>{
1884
- o._$AP?.(!1, !0);
1885
- let t = o._$AA;
1886
- const i = o._$AB.nextSibling;
1887
- for(; t !== i;){
1888
- const o = t.nextSibling;
1889
- t.remove(), t = o;
1890
- }
1891
- }, j = (o)=>{
1892
- o._$AR();
1893
- };
1894
-
1895
- },{"./lit-html.js":"1cmQt","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"9lbyV":[function(require,module,exports) {
1896
- /**
1897
- * @license
1898
- * Copyright 2017 Google LLC
1899
- * SPDX-License-Identifier: BSD-3-Clause
1900
- */ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
1901
- parcelHelpers.defineInteropFlag(exports);
1902
- parcelHelpers.export(exports, "Directive", ()=>i);
1903
- parcelHelpers.export(exports, "PartType", ()=>t);
1904
- parcelHelpers.export(exports, "directive", ()=>e);
1905
- const t = {
1906
- ATTRIBUTE: 1,
1907
- CHILD: 2,
1908
- PROPERTY: 3,
1909
- BOOLEAN_ATTRIBUTE: 4,
1910
- EVENT: 5,
1911
- ELEMENT: 6
1912
- }, e = (t)=>(...e)=>({
1913
- _$litDirective$: t,
1914
- values: e
1915
- });
1916
- class i {
1917
- constructor(t){}
1918
- get _$AU() {
1919
- return this._$AM._$AU;
1920
- }
1921
- _$AT(t, e, i) {
1922
- this._$Ct = t, this._$AM = e, this._$Ci = i;
1923
- }
1924
- _$AS(t, e) {
1925
- return this.update(t, e);
1926
- }
1927
- update(t, e) {
1928
- return this.render(...e);
1929
- }
1930
- }
1931
-
1932
1731
  },{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"1yX2W":[function(require,module,exports) {
1933
1732
  var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
1934
1733
  parcelHelpers.defineInteropFlag(exports);