Igor Kulikov
2 years ago
23 changed files with 918 additions and 72 deletions
@ -0,0 +1,143 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
import { MatIconRegistry } from '@angular/material/icon'; |
||||
|
import { DomSanitizer } from '@angular/platform-browser'; |
||||
|
import { Observable, of, switchMap } from 'rxjs'; |
||||
|
import { catchError, map, take } from 'rxjs/operators'; |
||||
|
import { isSvgIcon, splitIconName } from '@shared/models/icon.models'; |
||||
|
import { Element, Text, G } from '@svgdotjs/svg.js'; |
||||
|
|
||||
|
export enum MarkerShape { |
||||
|
markerShape1 = 'markerShape1', |
||||
|
markerShape2 = 'markerShape2', |
||||
|
markerShape3 = 'markerShape3', |
||||
|
markerShape4 = 'markerShape4', |
||||
|
markerShape5 = 'markerShape5', |
||||
|
markerShape6 = 'markerShape6', |
||||
|
markerShape7 = 'markerShape7', |
||||
|
markerShape8 = 'markerShape8', |
||||
|
markerShape9 = 'markerShape9', |
||||
|
markerShape10 = 'markerShape10' |
||||
|
} |
||||
|
|
||||
|
export const markerShapeMap = new Map<MarkerShape, string>( |
||||
|
[ |
||||
|
[MarkerShape.markerShape1, '/assets/markers/shape1.svg'], |
||||
|
[MarkerShape.markerShape2, '/assets/markers/shape2.svg'], |
||||
|
[MarkerShape.markerShape3, '/assets/markers/shape3.svg'], |
||||
|
[MarkerShape.markerShape4, '/assets/markers/shape4.svg'], |
||||
|
[MarkerShape.markerShape5, '/assets/markers/shape5.svg'], |
||||
|
[MarkerShape.markerShape6, '/assets/markers/shape6.svg'], |
||||
|
[MarkerShape.markerShape7, '/assets/markers/shape7.svg'], |
||||
|
[MarkerShape.markerShape8, '/assets/markers/shape8.svg'], |
||||
|
[MarkerShape.markerShape9, '/assets/markers/shape9.svg'], |
||||
|
[MarkerShape.markerShape10, '/assets/markers/shape10.svg'] |
||||
|
] |
||||
|
); |
||||
|
|
||||
|
const createColorMarkerShape = (iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer, shape: MarkerShape, color: tinycolor.Instance): Observable<SVGElement> => { |
||||
|
const markerAssetUrl = markerShapeMap.get(shape); |
||||
|
const safeUrl = domSanitizer.bypassSecurityTrustResourceUrl(markerAssetUrl); |
||||
|
return iconRegistry.getSvgIconFromUrl(safeUrl).pipe( |
||||
|
map((svgElement) => { |
||||
|
const colorElements = Array.from(svgElement.getElementsByClassName('marker-color')); |
||||
|
colorElements.forEach(el => { |
||||
|
el.setAttribute('fill', '#'+color.toHex()); |
||||
|
}); |
||||
|
const strokeElements = Array.from(svgElement.getElementsByClassName('marker-stroke')); |
||||
|
strokeElements.forEach(el => { |
||||
|
el.setAttribute('stroke', '#'+color.toHex()); |
||||
|
}); |
||||
|
return svgElement; |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export const createColorMarkerShapeURI = (iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer, shape: MarkerShape, color: tinycolor.Instance): Observable<string> => { |
||||
|
return createColorMarkerShape(iconRegistry, domSanitizer, shape, color).pipe( |
||||
|
map((svgElement) => { |
||||
|
const svg = svgElement.outerHTML; |
||||
|
return 'data:image/svg+xml;base64,' + btoa(svg); |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const createIconElement = (iconRegistry: MatIconRegistry, icon: string, size: number, color: tinycolor.Instance): Observable<Element> => { |
||||
|
const isSvg = isSvgIcon(icon); |
||||
|
const iconColor = tinycolor.mix(color, tinycolor('rgba(0,0,0,0.38)')); |
||||
|
if (isSvg) { |
||||
|
const [namespace, iconName] = splitIconName(icon); |
||||
|
return iconRegistry |
||||
|
.getNamedSvgIcon(iconName, namespace) |
||||
|
.pipe( |
||||
|
take(1), |
||||
|
map((svgElement) => { |
||||
|
const element = new Element(svgElement.firstChild); |
||||
|
element.fill('#'+iconColor.toHex()); |
||||
|
//const box = element.bbox();
|
||||
|
const scale = size / 24;//box.height;
|
||||
|
element.scale(scale); |
||||
|
return element; |
||||
|
}), |
||||
|
catchError(() => of(null)) |
||||
|
); |
||||
|
} else { |
||||
|
const iconName = splitIconName(icon)[1]; |
||||
|
const textElement = new Text(document.createElementNS('http://www.w3.org/2000/svg', 'text')); |
||||
|
const fontSetClasses = ( |
||||
|
iconRegistry.getDefaultFontSetClass() |
||||
|
).filter(className => className.length > 0); |
||||
|
fontSetClasses.forEach(className => textElement.addClass(className)); |
||||
|
textElement.font({size: `${size}px`}); |
||||
|
textElement.attr({ |
||||
|
style: `font-size: ${size}px`, |
||||
|
'text-anchor': 'start' |
||||
|
}); |
||||
|
textElement.fill('#'+iconColor.toHex()); |
||||
|
const tspan = textElement.tspan(iconName); |
||||
|
tspan.attr({ |
||||
|
'dominant-baseline': 'hanging' |
||||
|
}); |
||||
|
return of(textElement); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const createColorMarkerIconElement = (iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer, icon: string, color: tinycolor.Instance): Observable<SVGElement> => { |
||||
|
return createColorMarkerShape(iconRegistry, domSanitizer, MarkerShape.markerShape6, color).pipe( |
||||
|
switchMap((svgElement) => { |
||||
|
return createIconElement(iconRegistry, icon, 12, color).pipe( |
||||
|
map((iconElement) => { |
||||
|
let elements = svgElement.getElementsByClassName('marker-icon-container'); |
||||
|
if (iconElement && elements.length) { |
||||
|
const iconContainer = new G(elements[0] as SVGGElement); |
||||
|
iconContainer.add(iconElement); |
||||
|
const box = iconElement.bbox(); |
||||
|
iconElement.translate(-box.cx, -box.cy); |
||||
|
} |
||||
|
elements = svgElement.getElementsByClassName('marker-icon-background'); |
||||
|
if (elements.length) { |
||||
|
(elements[0] as SVGGElement).style.display = ''; |
||||
|
} |
||||
|
return svgElement; |
||||
|
}) |
||||
|
); |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,34 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="flex flex-row items-center justify-start gap-2" [formGroup]="shapeSettingsFormGroup"> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="size" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>px</div> |
||||
|
</mat-form-field> |
||||
|
<button type="button" |
||||
|
mat-stroked-button |
||||
|
class="tb-box-button" |
||||
|
[disabled]="disabled" |
||||
|
#matButton |
||||
|
(click)="openShapePopup($event, matButton)"> |
||||
|
<img *ngIf="markerType === MarkerType.shape" matButtonIcon width="24px" height="24px" style="object-fit: contain;" [src]="shapePreview$ | async" [class.disabled]="disabled"/> |
||||
|
<div *ngIf="markerType === MarkerType.icon" matButtonIcon style="object-fit: contain; width: 24px; height: 24px;" [innerHTML]="iconPreview$ | async" [class.disabled]="disabled"> |
||||
|
</div> |
||||
|
</button> |
||||
|
<tb-data-layer-color-settings formControlName="color"></tb-data-layer-color-settings> |
||||
|
</div> |
||||
@ -0,0 +1,204 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
DestroyRef, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
Renderer2, |
||||
|
ViewContainerRef |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormGroup, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { MatButton } from '@angular/material/button'; |
||||
|
import { TbPopoverService } from '@shared/components/popover.service'; |
||||
|
import { MarkerIconSettings, MarkerShapeSettings, MarkerType } from '@home/components/widget/lib/maps/map.models'; |
||||
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser'; |
||||
|
import { MatIconRegistry } from '@angular/material/icon'; |
||||
|
import { |
||||
|
createColorMarkerIconElement, |
||||
|
createColorMarkerShapeURI |
||||
|
} from '@home/components/widget/lib/maps/marker-shape.models'; |
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
import { map, share } from 'rxjs/operators'; |
||||
|
import { MarkerShapesComponent } from '@home/components/widget/lib/settings/common/map/marker-shapes.component'; |
||||
|
import { MaterialIconsComponent } from '@shared/components/material-icons.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-marker-shape-settings', |
||||
|
templateUrl: './marker-shape-settings.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => MarkerShapeSettingsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class MarkerShapeSettingsComponent implements ControlValueAccessor, OnInit { |
||||
|
|
||||
|
MarkerType = MarkerType; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
markerType: MarkerType; |
||||
|
|
||||
|
modelValue: MarkerShapeSettings | MarkerIconSettings; |
||||
|
|
||||
|
public shapeSettingsFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
public shapePreview$: Observable<SafeUrl>; |
||||
|
public iconPreview$: Observable<SafeHtml>; |
||||
|
|
||||
|
private propagateChange: (v: any) => void = () => { }; |
||||
|
|
||||
|
constructor(private popoverService: TbPopoverService, |
||||
|
private fb: UntypedFormBuilder, |
||||
|
private destroyRef: DestroyRef, |
||||
|
private iconRegistry: MatIconRegistry, |
||||
|
private domSanitizer: DomSanitizer, |
||||
|
private renderer: Renderer2, |
||||
|
private cd: ChangeDetectorRef, |
||||
|
private viewContainerRef: ViewContainerRef) {} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.shapeSettingsFormGroup = this.fb.group({ |
||||
|
size: [null, [Validators.required, Validators.min(1)]], |
||||
|
color: [null, [Validators.required]] |
||||
|
}); |
||||
|
if (this.markerType === MarkerType.shape) { |
||||
|
this.shapeSettingsFormGroup.addControl('shape', this.fb.control(null, [Validators.required])); |
||||
|
} |
||||
|
if (this.markerType === MarkerType.icon) { |
||||
|
this.shapeSettingsFormGroup.addControl('icon', this.fb.control(null, [Validators.required])); |
||||
|
} |
||||
|
this.shapeSettingsFormGroup.valueChanges.pipe( |
||||
|
takeUntilDestroyed(this.destroyRef) |
||||
|
).subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.shapeSettingsFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.shapeSettingsFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: MarkerShapeSettings | MarkerIconSettings): void { |
||||
|
this.modelValue = value; |
||||
|
this.shapeSettingsFormGroup.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
this.updatePreview(); |
||||
|
} |
||||
|
|
||||
|
openShapePopup($event: Event, matButton: MatButton) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const trigger = matButton._elementRef.nativeElement; |
||||
|
if (this.popoverService.hasPopover(trigger)) { |
||||
|
this.popoverService.hidePopover(trigger); |
||||
|
} else { |
||||
|
if (this.markerType === MarkerType.shape) { |
||||
|
const ctx: any = { |
||||
|
shape: (this.modelValue as MarkerShapeSettings).shape, |
||||
|
color: this.modelValue.color.color |
||||
|
}; |
||||
|
const markerShapesPopover = this.popoverService.displayPopover(trigger, this.renderer, |
||||
|
this.viewContainerRef, MarkerShapesComponent, 'left', true, null, |
||||
|
ctx, |
||||
|
{}, |
||||
|
{}, {}, true); |
||||
|
markerShapesPopover.tbComponentRef.instance.popover = markerShapesPopover; |
||||
|
markerShapesPopover.tbComponentRef.instance.markerShapeSelected.subscribe((shape) => { |
||||
|
markerShapesPopover.hide(); |
||||
|
this.shapeSettingsFormGroup.get('shape').patchValue( |
||||
|
shape |
||||
|
); |
||||
|
}); |
||||
|
} else if (this.markerType === MarkerType.icon) { |
||||
|
const ctx: any = { |
||||
|
selectedIcon: (this.modelValue as MarkerIconSettings).icon, |
||||
|
iconClearButton: false |
||||
|
}; |
||||
|
const materialIconsPopover = this.popoverService.displayPopover(trigger, this.renderer, |
||||
|
this.viewContainerRef, MaterialIconsComponent, 'left', true, null, |
||||
|
ctx, |
||||
|
{}, |
||||
|
{}, {}, true); |
||||
|
materialIconsPopover.tbComponentRef.instance.popover = materialIconsPopover; |
||||
|
materialIconsPopover.tbComponentRef.instance.iconSelected.subscribe((icon) => { |
||||
|
materialIconsPopover.hide(); |
||||
|
this.shapeSettingsFormGroup.get('icon').patchValue( |
||||
|
icon |
||||
|
); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
this.modelValue = this.shapeSettingsFormGroup.getRawValue(); |
||||
|
this.propagateChange(this.modelValue); |
||||
|
this.updatePreview(); |
||||
|
} |
||||
|
|
||||
|
private updatePreview() { |
||||
|
const color = this.modelValue.color.color; |
||||
|
if (this.markerType === MarkerType.shape) { |
||||
|
const shape = (this.modelValue as MarkerShapeSettings).shape; |
||||
|
this.shapePreview$ = createColorMarkerShapeURI(this.iconRegistry, this.domSanitizer, shape, tinycolor(color)).pipe( |
||||
|
map((url) => { |
||||
|
return this.domSanitizer.bypassSecurityTrustUrl(url); |
||||
|
}), |
||||
|
share() |
||||
|
); |
||||
|
} else if (this.markerType === MarkerType.icon) { |
||||
|
const icon = (this.modelValue as MarkerIconSettings).icon; |
||||
|
this.iconPreview$ = createColorMarkerIconElement(this.iconRegistry, this.domSanitizer, icon, tinycolor(color)).pipe( |
||||
|
map((element) => { |
||||
|
return this.domSanitizer.bypassSecurityTrustHtml(element.outerHTML); |
||||
|
}), |
||||
|
share() |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
<div class="tb-marker-shapes-panel"> |
||||
|
<div class="tb-marker-shapes-title" translate>widgets.maps.data-layer.marker.marker-shapes</div> |
||||
|
<div class="flex flex-row flex-wrap gap-3"> |
||||
|
<ng-container *ngFor="let shapeInfo of shapes"> |
||||
|
<button *ngIf="shapeInfo.shape === shape" |
||||
|
class="tb-select-shape-button" |
||||
|
mat-raised-button |
||||
|
(click)="selectShape(shapeInfo.shape)" |
||||
|
type="button"> |
||||
|
<img matButtonIcon class="tb-marker-shape" [src]="shapeInfo.url$ | async"/> |
||||
|
</button> |
||||
|
<button *ngIf="shapeInfo.shape !== shape" |
||||
|
class="tb-select-shape-button" |
||||
|
mat-button |
||||
|
(click)="selectShape(shapeInfo.shape)" |
||||
|
type="button"> |
||||
|
<img matButtonIcon class="tb-marker-shape" [src]="shapeInfo.url$ | async"/> |
||||
|
</button> |
||||
|
</ng-container> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,39 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2024 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
.tb-marker-shapes-panel { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
.tb-marker-shapes-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
line-height: 24px; |
||||
|
letter-spacing: 0.25px; |
||||
|
color: rgba(0, 0, 0, 0.87); |
||||
|
} |
||||
|
button.mat-mdc-button-base.tb-select-shape-button { |
||||
|
width: 42px; |
||||
|
min-width: 42px; |
||||
|
height: 42px; |
||||
|
padding: 4px; |
||||
|
img.tb-marker-shape { |
||||
|
width: 34px; |
||||
|
height: 34px; |
||||
|
object-fit: contain; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,84 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { TbPopoverComponent } from '@shared/components/popover.component'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { createColorMarkerShapeURI, MarkerShape } from '@home/components/widget/lib/maps/marker-shape.models'; |
||||
|
import { Observable } from 'rxjs'; |
||||
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
||||
|
import { MatIconRegistry } from '@angular/material/icon'; |
||||
|
import tinycolor from 'tinycolor2'; |
||||
|
import { map, share } from 'rxjs/operators'; |
||||
|
|
||||
|
interface MarkerShapeInfo { |
||||
|
shape: MarkerShape; |
||||
|
url$: Observable<SafeUrl>; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-marker-shapes', |
||||
|
templateUrl: './marker-shapes.component.html', |
||||
|
providers: [], |
||||
|
styleUrls: ['./marker-shapes.component.scss'], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class MarkerShapesComponent extends PageComponent implements OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
shape: MarkerShape; |
||||
|
|
||||
|
@Input() |
||||
|
color: string; |
||||
|
|
||||
|
@Input() |
||||
|
popover: TbPopoverComponent<MarkerShapesComponent>; |
||||
|
|
||||
|
@Output() |
||||
|
markerShapeSelected = new EventEmitter<MarkerShape>(); |
||||
|
|
||||
|
shapes: MarkerShapeInfo[]; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private iconRegistry: MatIconRegistry, |
||||
|
private domSanitizer: DomSanitizer) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.shapes = (Object.keys(MarkerShape) as MarkerShape[]).map((shape) => { |
||||
|
return { |
||||
|
shape, |
||||
|
url$: createColorMarkerShapeURI(this.iconRegistry, this.domSanitizer, shape, tinycolor(this.color)).pipe( |
||||
|
map((url) => { |
||||
|
return this.domSanitizer.bypassSecurityTrustUrl(url); |
||||
|
}), |
||||
|
share() |
||||
|
) |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
cancel() { |
||||
|
this.popover?.hide(); |
||||
|
} |
||||
|
|
||||
|
selectShape(shape: MarkerShape) { |
||||
|
this.markerShapeSelected.emit(shape); |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
Reference in new issue