Skip to content

Commit

Permalink
feat(draw): Management of the editing of the labels (#1059)
Browse files Browse the repository at this point in the history
* Merge branch 'DrawingGestionOnLabels' into DessinGestionDesEtiquettes

* formatted the html

* format ts file

* Fixed some formatting issues

* Redid design of the inputs box

* Reformatting
  • Loading branch information
kalvinkhuu authored Jun 10, 2022
1 parent b922508 commit 2c039e2
Show file tree
Hide file tree
Showing 9 changed files with 408 additions and 171 deletions.
21 changes: 10 additions & 11 deletions packages/geo/src/lib/draw/draw/draw-popup.component.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
<div mat-dialog-content>
<p class="mat-typography">{{'igo.geo.draw.dialogInstruction' | translate}}</p>
<p class="mat-typography">
{{ 'igo.geo.draw.dialogInstruction' | translate }}
</p>
<mat-form-field class="example-full-width">
<input
#input
matInput
placeholder="{{'igo.geo.draw.dialogTitle' | translate}}"
value="{{data.currentLabel}}">
placeholder="{{ 'igo.geo.draw.dialogTitle' | translate }}"
value="{{ data.currentLabel }}"/>
</mat-form-field>
</div>
<div mat-dialog-actions>
<button
mat-raised-button
(click)="noLabel()">{{'igo.geo.draw.noLabel' | translate}}
<button mat-raised-button (click)="cancelDrawing()">
{{ 'igo.geo.draw.cancel' | translate }}
</button>
<button
mat-raised-button
color="primary"
[mat-dialog-close]="input.value">OK
<button mat-raised-button color="primary" (click)="confirm(input.value)">
OK
</button>
</div>
</div>
30 changes: 18 additions & 12 deletions packages/geo/src/lib/draw/draw/draw-popup.component.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import { Component, Inject } from '@angular/core';
import { Component, Inject, Input } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
label: string;
}

@Component({
selector: 'igo-draw-popup-component',
templateUrl: './draw-popup.component.html',
styleUrls: ['./draw-popup.component.scss'],
})
export class DrawPopupComponent {
selector: 'igo-draw-popup-component',
templateUrl: './draw-popup.component.html',
styleUrls: ['./draw-popup.component.scss']
})
export class DrawPopupComponent {
@Input() confirmFlag: boolean = false;

constructor(
public dialogRef: MatDialogRef<DrawPopupComponent>,
@Inject(MAT_DIALOG_DATA) public data: {currentLabel: string}) {}
constructor(
public dialogRef: MatDialogRef<DrawPopupComponent>,
@Inject(MAT_DIALOG_DATA) public data: { currentLabel: string }
) {}

noLabel() {
this.dialogRef.close();
}
cancelDrawing() {
this.dialogRef.close();
}
confirm(labelString: string) {
this.confirmFlag = true;
this.dialogRef.close(labelString);
}
}
88 changes: 62 additions & 26 deletions packages/geo/src/lib/draw/draw/draw.component.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<div>
<div class="geometry-type-toggle mat-typography">
<mat-button-toggle-group
(change)="onGeometryTypeChange($event.value)" [value]="geometryType.Point">
<mat-button-toggle-group (change)="onGeometryTypeChange($event.value)" [value]="geometryType.Point">

<mat-button-toggle [value]="geometryType.Point">
{{('igo.geo.draw.' + geometryType.Point) | translate}}
{{ 'igo.geo.draw.' + geometryType.Point | translate }}
</mat-button-toggle>

<mat-button-toggle [value]="geometryType.LineString">
{{('igo.geo.draw.' + geometryType.LineString) | translate}}
{{ 'igo.geo.draw.' + geometryType.LineString | translate }}
</mat-button-toggle>

<mat-button-toggle [value]="geometryType.Polygon">
{{('igo.geo.draw.' + geometryType.Polygon) | translate}}
{{ 'igo.geo.draw.' + geometryType.Polygon | translate }}
</mat-button-toggle>

<mat-button-toggle [value]="geometryType.Circle">
{{('igo.geo.draw.' + geometryType.Circle) | translate}}
{{ 'igo.geo.draw.' + geometryType.Circle | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
Expand All @@ -26,22 +26,22 @@
[checked]="drawControlIsActive"
[labelPosition]="'before'"
(change)="onToggleDrawControl($event.checked)">
{{'igo.geo.spatialFilter.drawControl' | translate}}
{{ 'igo.geo.spatialFilter.drawControl' | translate }}
</mat-slide-toggle>

<mat-slide-toggle
[checked]="labelsAreShown"
[labelPosition]="'before'"
(change)="onToggleLabels()">
{{'igo.geo.draw.toggleMapTooltips' | translate}}
{{ 'igo.geo.draw.toggleMapTooltips' | translate }}
</mat-slide-toggle>
</div>

<form class="igo-form" [formGroup]="form" >
<form class="igo-form" [formGroup]="form">
<div class="fill-color-picker mat-typography">
<span>
<mat-icon class="stroke-palette-icon" svgIcon="square"></mat-icon>
{{'igo.geo.draw.fill' | translate}}
{{ 'igo.geo.draw.fill' | translate }}
</span>

<mat-form-field
Expand All @@ -51,7 +51,7 @@
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.draw.colorPicker' | translate">
<mat-label>{{fillColor}}</mat-label>
<mat-label>{{ fillColor }}</mat-label>

<input
formControlName="fill"
Expand All @@ -61,21 +61,21 @@
[style.background]="fillColor"
[readonly]="true"
[colorPicker]="fillColor"
[cpWidth]="('200px')"
[cpWidth]="'200px'"
[cpOutputFormat]="'rgba'"
[cpPosition]="'bottom'"
[cpPositionOffset]="'-75%'"
[cpCancelButton]="true"
[cpCancelButtonText]="'igo.geo.draw.cancelColorPicker' | translate"
[cpCancelButtonText]="'igo.geo.draw.cancel' | translate"
[cpOKButton]="true"
(colorPickerChange)="onColorChange(labelsAreShown, false)">
(colorPickerChange)="onColorChange(labelsAreShown, false)"/>
</mat-form-field>
</div>

<div class="stroke-color-picker mat-typography">
<span>
<mat-icon class="stroke-palette-icon" svgIcon="square-outline"></mat-icon>
{{'igo.geo.draw.stroke' | translate}}
{{ 'igo.geo.draw.stroke' | translate }}
</span>

<mat-form-field
Expand All @@ -85,8 +85,7 @@
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.draw.colorPicker' | translate">
<mat-label>{{strokeColor}}</mat-label>

<mat-label>{{ strokeColor }}</mat-label>
<input
formControlName="stroke"
matInput
Expand All @@ -95,44 +94,80 @@
[style.background]="strokeColor"
[readonly]="true"
[colorPicker]="strokeColor"
[cpWidth]="('200px')"
[cpWidth]="'200px'"
[cpPosition]="'bottom'"
[cpPositionOffset]="'-75%'"
[cpOutputFormat]="'rgba'"
[cpCancelButton]="true"
[cpCancelButtonText]="'igo.geo.draw.cancelColorPicker' | translate"
[cpCancelButtonText]="'igo.geo.draw.cancel' | translate"
[cpOKButton]="true"
(colorPickerChange)="onColorChange(labelsAreShown, false)">
</mat-form-field>
</div>

<div>
<mat-form-field *ngIf="icons.length >= 1">
<mat-label>{{'igo.geo.draw.icon' | translate}}</mat-label>
<mat-label>{{ 'igo.geo.draw.icon' | translate }}</mat-label>
<mat-select>
<mat-select-trigger>
<div *ngIf="icon" class="box">
<img src={{icon}}>
<img src="{{ icon }}">
</div>
</mat-select-trigger>
<mat-option value="" (click)="onIconChange()">{{'igo.geo.draw.noIcon' | translate}}</mat-option>
<mat-option value="" (click)="onIconChange()">{{ 'igo.geo.draw.noIcon' | translate }}</mat-option>
<mat-option
*ngFor="let icon_html of icons"
[value]="icon_html"
(click)="onIconChange(icon_html)">
<div class="box">
<img src={{icon_html}}>
<img src="{{ icon_html }}">
</div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>

<mat-divider></mat-divider>

<div class="igo-form-font">
<mat-form-field appearance="outline" class="igo-form-fontSize">
<mat-label>{{ 'igo.geo.draw.fontSize' | translate }}</mat-label>
<input
matInput
#testFontSize
type="number"
placeholder="10"
min="10"
onkeydown="return event.keyCode !== 69"
[value]="fontSize"
(input)="
onFontChange(
labelsAreShown,
$event.target.value,
testFontStyle.value
)"
/>
<span matSuffix>px</span>
</mat-form-field>
<mat-form-field appearance="outline" class="igo-form-fontStyle">
<mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>
<mat-select
#testFontStyle
[value]="fontStyle"
(selectionChange)="onFontChange(labelsAreShown, testFontSize.value, $event.value)">
<mat-option
*ngFor="let fontSelect of allFontStyles"
[value]="fontSelect">
{{ fontSelect }}
</mat-option>
</mat-select>
</mat-form-field>
</div>

<mat-divider></mat-divider>
<div>
<button *ngIf="store.count$.getValue() > 0"
<button
*ngIf="store.count$.getValue() > 0"
class="deleteBtn"
mat-icon-button
color="warn"
Expand All @@ -148,7 +183,8 @@
#table
class="table-compact"
[store]="store"
[template]="tableTemplate">
[template]="tableTemplate"
(dblclick)="editLabelDrawing()">
</igo-entity-table>
</div>

Expand Down
13 changes: 13 additions & 0 deletions packages/geo/src/lib/draw/draw/draw.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,16 @@ img {
.deleteBtn {
margin-left: 12px;
}

.igo-form-font .mat-form-field + .mat-form-field{
margin-left: 18px;
}

.igo-form-fontSize{
left: 10px !important;
width: 150px;
}
.igo-form-fontStyle{
width: 150px;
}

Loading

0 comments on commit 2c039e2

Please sign in to comment.