@geoblocks/elevation-profile 0.0.1 → 0.0.3
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.
- package/dist/elevation-profile.d.ts +28 -0
- package/dist/elevation-profile.d.ts.map +1 -0
- package/dist/elevation-profile.js +160 -104
- package/dist/elevation-profile.js.map +1 -1
- package/dist/index.600fa9d1.js +5446 -0
- package/dist/index.600fa9d1.js.map +1 -0
- package/dist/index.html +564 -0
- package/elevation-profile.ts +34 -16
- package/package.json +18 -5
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
export class ElevationProfile extends LitElement {
|
|
3
|
+
lines: number[][];
|
|
4
|
+
margin: {
|
|
5
|
+
top: number;
|
|
6
|
+
right: number;
|
|
7
|
+
bottom: number;
|
|
8
|
+
left: number;
|
|
9
|
+
};
|
|
10
|
+
tickSize: {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
};
|
|
14
|
+
pointer: {
|
|
15
|
+
x: number;
|
|
16
|
+
y: number;
|
|
17
|
+
};
|
|
18
|
+
willUpdate(changedProperties: any): void;
|
|
19
|
+
render(): import("lit-html").TemplateResult<2>;
|
|
20
|
+
createRenderRoot(): this;
|
|
21
|
+
}
|
|
22
|
+
declare global {
|
|
23
|
+
interface HTMLElementTagNameMap {
|
|
24
|
+
'elevation-profile': ElevationProfile;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
//# sourceMappingURL=elevation-profile.d.ts.map
|
|
@@ -0,0 +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,125 +1,181 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
if(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<g class="grid
|
|
97
|
-
<g class="
|
|
98
|
-
<g class="axis
|
|
1
|
+
import {svg as $agntW$svg, LitElement as $agntW$LitElement} from "lit";
|
|
2
|
+
import {property as $agntW$property, state as $agntW$state, customElement as $agntW$customElement} from "lit/decorators.js";
|
|
3
|
+
import {ResizeController as $agntW$ResizeController} from "@lit-labs/observers/resize-controller.js";
|
|
4
|
+
import {createRef as $agntW$createRef, ref as $agntW$ref} from "lit/directives/ref.js";
|
|
5
|
+
import {bisector as $agntW$bisector, extent as $agntW$extent} from "d3-array";
|
|
6
|
+
import {scaleLinear as $agntW$scaleLinear} from "d3-scale";
|
|
7
|
+
import {line as $agntW$line, area as $agntW$area} from "d3-shape";
|
|
8
|
+
import {axisBottom as $agntW$axisBottom, axisLeft as $agntW$axisLeft} from "d3-axis";
|
|
9
|
+
import {select as $agntW$select, pointer as $agntW$pointer} from "d3-selection";
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
var $916babf1e6dc2c08$var$__decorate = undefined && undefined.__decorate || function(decorators, target, key, desc) {
|
|
21
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
22
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
23
|
+
else for(var i = decorators.length - 1; i >= 0; i--)if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
24
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
25
|
+
};
|
|
26
|
+
let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (0, $agntW$LitElement) {
|
|
27
|
+
constructor(){
|
|
28
|
+
super(...arguments);
|
|
29
|
+
this.lines = [];
|
|
30
|
+
this.margin = {
|
|
31
|
+
top: 20,
|
|
32
|
+
right: 20,
|
|
33
|
+
bottom: 20,
|
|
34
|
+
left: 40
|
|
35
|
+
};
|
|
36
|
+
this.tickSize = {
|
|
37
|
+
x: 100,
|
|
38
|
+
y: 40
|
|
39
|
+
};
|
|
40
|
+
this.pointer = {
|
|
41
|
+
x: 0,
|
|
42
|
+
y: 0
|
|
43
|
+
};
|
|
44
|
+
this.resizeController = new (0, $agntW$ResizeController)(this, {});
|
|
45
|
+
this.plotData = [];
|
|
46
|
+
this.scaleX = (0, $agntW$scaleLinear)();
|
|
47
|
+
this.scaleY = (0, $agntW$scaleLinear)();
|
|
48
|
+
this.bisectDistance = (0, $agntW$bisector)((data)=>data[0]).left;
|
|
49
|
+
this.line = (0, $agntW$line)().x((point)=>this.scaleX(point[0])).y((point)=>this.scaleY(point[1]));
|
|
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");
|
|
53
|
+
this.xGrid = (0, $agntW$axisBottom)(this.scaleX).tickFormat(()=>"");
|
|
54
|
+
this.yGrid = (0, $agntW$axisLeft)(this.scaleY).tickFormat(()=>"");
|
|
55
|
+
this.xRef = (0, $agntW$createRef)();
|
|
56
|
+
this.yRef = (0, $agntW$createRef)();
|
|
57
|
+
this.yGridRef = (0, $agntW$createRef)();
|
|
58
|
+
this.xGridRef = (0, $agntW$createRef)();
|
|
59
|
+
}
|
|
60
|
+
willUpdate(changedProperties) {
|
|
61
|
+
if (changedProperties.has("lines")) {
|
|
62
|
+
this.plotData = this.lines.map((coordinate)=>[
|
|
63
|
+
coordinate[3],
|
|
64
|
+
coordinate[2]
|
|
65
|
+
]);
|
|
66
|
+
this.scaleX.domain((0, $agntW$extent)(this.plotData, (data)=>data[0]));
|
|
67
|
+
this.scaleY.domain((0, $agntW$extent)(this.plotData, (data)=>data[1])).nice();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
render() {
|
|
71
|
+
const width = this.offsetWidth;
|
|
72
|
+
const height = this.offsetHeight;
|
|
73
|
+
this.scaleX.range([
|
|
74
|
+
this.margin.left,
|
|
75
|
+
width - this.margin.right
|
|
76
|
+
]);
|
|
77
|
+
this.scaleY.range([
|
|
78
|
+
height - this.margin.bottom,
|
|
79
|
+
this.margin.top
|
|
80
|
+
]);
|
|
81
|
+
this.area.y0(height - this.margin.bottom);
|
|
82
|
+
this.yGrid.tickSize(-width + this.margin.left + this.margin.right);
|
|
83
|
+
this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);
|
|
84
|
+
const xTicks = width / this.tickSize.x;
|
|
85
|
+
const yTicks = height / this.tickSize.y;
|
|
86
|
+
this.xAxis.ticks(xTicks);
|
|
87
|
+
this.xGrid.ticks(xTicks);
|
|
88
|
+
this.yAxis.ticks(yTicks);
|
|
89
|
+
this.yGrid.ticks(yTicks);
|
|
90
|
+
(0, $agntW$select)(this.xRef.value).call(this.xAxis);
|
|
91
|
+
(0, $agntW$select)(this.yRef.value).call(this.yAxis);
|
|
92
|
+
(0, $agntW$select)(this.xGridRef.value).call(this.xGrid);
|
|
93
|
+
(0, $agntW$select)(this.yGridRef.value).call(this.yGrid);
|
|
94
|
+
return (0, $agntW$svg)`
|
|
95
|
+
<svg width="${width}" height="${height}">
|
|
96
|
+
<g class="grid y" ${(0, $agntW$ref)(this.yGridRef)} transform="translate(${this.margin.left}, 0)" />
|
|
97
|
+
<g class="grid x" ${(0, $agntW$ref)(this.xGridRef)} transform="translate(0, ${this.margin.bottom})" />
|
|
98
|
+
<g class="axis x" ${(0, $agntW$ref)(this.xRef)} transform="translate(0, ${height - this.margin.bottom})" />
|
|
99
|
+
<g class="axis y" ${(0, $agntW$ref)(this.yRef)} transform="translate(${this.margin.left}, 0)" />
|
|
99
100
|
<path class="area" d="${this.area(this.plotData)}" />
|
|
100
101
|
<path class="elevation" d="${this.line(this.plotData)}" fill="none" />
|
|
101
|
-
<g style="visibility: ${this.pointer.x>0?"visible":"hidden"}">
|
|
102
|
+
<g style="visibility: ${this.pointer.x > 0 ? "visible" : "hidden"}">
|
|
102
103
|
<path class="elevation highlight" d="${this.line(this.plotData)}" fill="none"
|
|
103
|
-
clip-path="polygon(0 0, ${this.pointer.x-40} 0, ${this.pointer.x-40} 100%, 0 100%)"
|
|
104
|
+
clip-path="polygon(0 0, ${this.pointer.x - 40} 0, ${this.pointer.x - 40} 100%, 0 100%)"
|
|
104
105
|
/>
|
|
105
106
|
<line
|
|
106
107
|
class="pointer-line y"
|
|
107
108
|
x1="${this.pointer.x}"
|
|
108
109
|
y1="${this.margin.top}"
|
|
109
110
|
x2="${this.pointer.x}"
|
|
110
|
-
y2="${
|
|
111
|
+
y2="${height - this.margin.bottom}"
|
|
111
112
|
/>
|
|
112
113
|
<circle class="pointer-circle" cx="${this.pointer.x}" cy="${this.pointer.y}" />
|
|
113
114
|
</g>
|
|
114
115
|
<rect
|
|
115
|
-
width="${
|
|
116
|
-
height="${
|
|
116
|
+
width="${width}"
|
|
117
|
+
height="${height}"
|
|
117
118
|
fill="none"
|
|
118
119
|
pointer-events="all"
|
|
119
120
|
@pointermove="${this.pointerMove}"
|
|
120
121
|
@pointerout="${this.pointerOut}"
|
|
121
122
|
/>
|
|
122
123
|
</svg>
|
|
123
|
-
|
|
124
|
+
`;
|
|
125
|
+
}
|
|
126
|
+
pointerMove(event) {
|
|
127
|
+
const pointerDistance = this.scaleX.invert((0, $agntW$pointer)(event)[0]);
|
|
128
|
+
const index = Math.min(this.bisectDistance(this.plotData, pointerDistance), this.plotData.length - 1);
|
|
129
|
+
// FIXME:
|
|
130
|
+
// var d0 = data[i - 1]
|
|
131
|
+
// var d1 = data[i];
|
|
132
|
+
// // work out which date value is closest to the mouse
|
|
133
|
+
// var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;
|
|
134
|
+
const data = this.plotData[index];
|
|
135
|
+
this.pointer = {
|
|
136
|
+
x: this.scaleX(data[0]),
|
|
137
|
+
y: this.scaleY(data[1])
|
|
138
|
+
};
|
|
139
|
+
this.dispatchEvent(new CustomEvent("over", {
|
|
140
|
+
detail: {
|
|
141
|
+
coordinate: this.lines[index],
|
|
142
|
+
position: this.pointer
|
|
143
|
+
}
|
|
144
|
+
}));
|
|
145
|
+
}
|
|
146
|
+
pointerOut() {
|
|
147
|
+
this.pointer = {
|
|
148
|
+
x: 0,
|
|
149
|
+
y: 0
|
|
150
|
+
};
|
|
151
|
+
this.dispatchEvent(new CustomEvent("out"));
|
|
152
|
+
}
|
|
153
|
+
createRenderRoot() {
|
|
154
|
+
return this;
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
$916babf1e6dc2c08$var$__decorate([
|
|
158
|
+
(0, $agntW$property)({
|
|
159
|
+
type: Array
|
|
160
|
+
})
|
|
161
|
+
], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "lines", void 0);
|
|
162
|
+
$916babf1e6dc2c08$var$__decorate([
|
|
163
|
+
(0, $agntW$property)({
|
|
164
|
+
type: Object
|
|
165
|
+
})
|
|
166
|
+
], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "margin", void 0);
|
|
167
|
+
$916babf1e6dc2c08$var$__decorate([
|
|
168
|
+
(0, $agntW$property)({
|
|
169
|
+
type: Object
|
|
170
|
+
})
|
|
171
|
+
], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "tickSize", void 0);
|
|
172
|
+
$916babf1e6dc2c08$var$__decorate([
|
|
173
|
+
(0, $agntW$state)()
|
|
174
|
+
], $916babf1e6dc2c08$export$14ab3917b98d786a.prototype, "pointer", void 0);
|
|
175
|
+
$916babf1e6dc2c08$export$14ab3917b98d786a = $916babf1e6dc2c08$var$__decorate([
|
|
176
|
+
(0, $agntW$customElement)("elevation-profile")
|
|
177
|
+
], $916babf1e6dc2c08$export$14ab3917b98d786a);
|
|
178
|
+
|
|
124
179
|
|
|
180
|
+
export {$916babf1e6dc2c08$export$14ab3917b98d786a as ElevationProfile};
|
|
125
181
|
//# sourceMappingURL=elevation-profile.js.map
|