@webilix/ngx-helper-m3 0.0.31 → 0.0.32
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.
|
@@ -2235,6 +2235,8 @@ class ShowComponent {
|
|
|
2235
2235
|
close;
|
|
2236
2236
|
distance;
|
|
2237
2237
|
copied;
|
|
2238
|
+
index = 0;
|
|
2239
|
+
layers = [];
|
|
2238
2240
|
copyTimeout;
|
|
2239
2241
|
map;
|
|
2240
2242
|
ngOnInit() {
|
|
@@ -2302,10 +2304,51 @@ class ShowComponent {
|
|
|
2302
2304
|
});
|
|
2303
2305
|
this.map.addLayer(layer);
|
|
2304
2306
|
});
|
|
2307
|
+
this.addLayers();
|
|
2308
|
+
}
|
|
2309
|
+
addLayers() {
|
|
2310
|
+
this.layers.forEach((layer) => this.map.removeLayer(layer));
|
|
2311
|
+
this.layers = [];
|
|
2312
|
+
// ADD CIRCLES
|
|
2313
|
+
this.route.forEach((coordinates, index) => {
|
|
2314
|
+
if (index !== this.index)
|
|
2315
|
+
return;
|
|
2316
|
+
const circle = {
|
|
2317
|
+
size: this.config?.circle?.size || 10,
|
|
2318
|
+
color: this.config?.circle?.color || 'rgb(42, 101, 126)',
|
|
2319
|
+
};
|
|
2320
|
+
const text = {
|
|
2321
|
+
size: this.config?.text?.size || 13,
|
|
2322
|
+
font: this.config?.text?.font || 'Yekan',
|
|
2323
|
+
color: this.config?.text?.color || 'rgb(255, 255, 255)',
|
|
2324
|
+
};
|
|
2325
|
+
const point = new Point([coordinates.longitude, coordinates.latitude]);
|
|
2326
|
+
const layer = new VectorLayer({
|
|
2327
|
+
source: new VectorSource({ features: [new Feature(point)] }),
|
|
2328
|
+
style: {
|
|
2329
|
+
// CIRCLE
|
|
2330
|
+
'circle-fill-color': circle.color,
|
|
2331
|
+
'circle-radius': circle.size * 1.4,
|
|
2332
|
+
'circle-stroke-color': '#FFF',
|
|
2333
|
+
'circle-stroke-width': 1,
|
|
2334
|
+
// TEXT
|
|
2335
|
+
'text-value': (index + 1).toString(),
|
|
2336
|
+
'text-font': `${text.size * 1.2}px ${text.font}`,
|
|
2337
|
+
'text-fill-color': text.color,
|
|
2338
|
+
'text-offset-y': 1,
|
|
2339
|
+
'text-stroke-color': circle.color,
|
|
2340
|
+
'text-stroke-width': 2,
|
|
2341
|
+
},
|
|
2342
|
+
});
|
|
2343
|
+
this.map.addLayer(layer);
|
|
2344
|
+
this.layers.push(layer);
|
|
2345
|
+
});
|
|
2305
2346
|
}
|
|
2306
2347
|
animate(index) {
|
|
2307
2348
|
if (!this.route[index])
|
|
2308
2349
|
return;
|
|
2350
|
+
this.index = index;
|
|
2351
|
+
this.addLayers();
|
|
2309
2352
|
const center = [this.route[index].longitude, this.route[index].latitude];
|
|
2310
2353
|
this.map.getView().animate({ center, duration: 250 });
|
|
2311
2354
|
}
|
|
@@ -2315,20 +2358,27 @@ class ShowComponent {
|
|
|
2315
2358
|
this.copied = index;
|
|
2316
2359
|
this.copyTimeout = setTimeout(() => (this.copied = undefined), 1000);
|
|
2317
2360
|
}
|
|
2318
|
-
|
|
2361
|
+
checkKey(event) {
|
|
2319
2362
|
if (!(event instanceof KeyboardEvent))
|
|
2320
2363
|
return;
|
|
2321
2364
|
if (event.code === 'Escape') {
|
|
2322
2365
|
event.preventDefault();
|
|
2323
2366
|
this.close();
|
|
2324
2367
|
}
|
|
2368
|
+
if (this.index !== undefined) {
|
|
2369
|
+
const change = event.code === 'ArrowUp' ? -1 : event.code === 'ArrowDown' ? 1 : 0;
|
|
2370
|
+
if (change !== 0) {
|
|
2371
|
+
event.preventDefault();
|
|
2372
|
+
this.animate(this.index + change);
|
|
2373
|
+
}
|
|
2374
|
+
}
|
|
2325
2375
|
}
|
|
2326
2376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ShowComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "show" }, listeners: { "window:keydown": "
|
|
2377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: ShowComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "show" }, listeners: { "window:keydown": "checkKey($event)" }, properties: { "className": "this.className" } }, ngImport: i0, template: "<div id=\"ngx-helper-m3-route-map\" class=\"map\"></div>\n\n<div class=\"route\">\n <div class=\"header\">\n <div class=\"title\">ROUTE</div>\n <mat-icon (click)=\"close()\">close</mat-icon>\n </div>\n\n <div class=\"coordinates\">\n @for (item of route; track $index) {\n <div class=\"coordinate ngx-helper-m3-route-coordinate\" [class.selected]=\"index === $index\" (click)=\"animate($index)\">\n <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n <div class=\"value\">{{ item.latitude.toFixed(5) }}</div>\n <div class=\"value\">{{ item.longitude.toFixed(5) }}</div>\n <mat-icon\n [cdkCopyToClipboard]=\"item.latitude.toString() + ',' + item.longitude.toString()\"\n (click)=\"setCopy($index)\"\n >\n {{ copied === $index ? 'done_all' : 'copy' }}\n </mat-icon>\n </div>\n }\n </div>\n\n <div class=\"footer\">\n <div class=\"distance\">{{ distance.length | number }} M</div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
|
|
2328
2378
|
}
|
|
2329
2379
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowComponent, decorators: [{
|
|
2330
2380
|
type: Component,
|
|
2331
|
-
args: [{ host: { selector: 'show', '(window:keydown)': '
|
|
2381
|
+
args: [{ host: { selector: 'show', '(window:keydown)': 'checkKey($event)' }, imports: [ClipboardModule, MatIcon, DecimalPipe], template: "<div id=\"ngx-helper-m3-route-map\" class=\"map\"></div>\n\n<div class=\"route\">\n <div class=\"header\">\n <div class=\"title\">ROUTE</div>\n <mat-icon (click)=\"close()\">close</mat-icon>\n </div>\n\n <div class=\"coordinates\">\n @for (item of route; track $index) {\n <div class=\"coordinate ngx-helper-m3-route-coordinate\" [class.selected]=\"index === $index\" (click)=\"animate($index)\">\n <div class=\"index\" [style.padding-left]=\"route.length > 1 ? '0' : '0.5rem'\">{{ $index + 1 }}</div>\n <div class=\"value\">{{ item.latitude.toFixed(5) }}</div>\n <div class=\"value\">{{ item.longitude.toFixed(5) }}</div>\n <mat-icon\n [cdkCopyToClipboard]=\"item.latitude.toString() + ',' + item.longitude.toString()\"\n (click)=\"setCopy($index)\"\n >\n {{ copied === $index ? 'done_all' : 'copy' }}\n </mat-icon>\n </div>\n }\n </div>\n\n <div class=\"footer\">\n <div class=\"distance\">{{ distance.length | number }} M</div>\n </div>\n</div>\n" }]
|
|
2332
2382
|
}], propDecorators: { className: [{
|
|
2333
2383
|
type: HostBinding,
|
|
2334
2384
|
args: ['className']
|