Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(draw): Management of the editing of the labels #1059

Merged
merged 7 commits into from
Jun 10, 2022
Merged

feat(draw): Management of the editing of the labels #1059

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3003237
Merge branch 'DrawingGestionOnLabels' into DessinGestionDesEtiquettes
kalvinkhuu May 19, 2022
ffdc771
formatted the html
kalvinkhuu Jun 2, 2022
cfb4114
format ts file
kalvinkhuu Jun 2, 2022
d9acd2f
Fixed some formatting issues
kalvinkhuu Jun 3, 2022
dda2f4e
Merge branch 'next' into DessinGestionDesEtiquettes
kalvinkhuu Jun 3, 2022
eb6b73b
Redid design of the inputs box
kalvinkhuu Jun 3, 2022
fb7d92d
Reformatting
kalvinkhuu Jun 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions packages/geo/src/lib/draw/draw/draw-popup.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<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)="noLabel()">
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
{{ '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>
8 changes: 7 additions & 1 deletion packages/geo/src/lib/draw/draw/draw-popup.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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 {
Expand All @@ -12,11 +12,17 @@ export interface DialogData {
})
export class DrawPopupComponent {

@Input() confirmFlag: boolean = false;

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

noLabel() {
this.dialogRef.close();
}
confirm(labelString: string){
this.confirmFlag = true;
this.dialogRef.close(labelString);
}
}
131 changes: 98 additions & 33 deletions packages/geo/src/lib/draw/draw/draw.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
<div>
<div class="geometry-type-toggle mat-typography">
<mat-button-toggle-group
(change)="onGeometryTypeChange($event.value)" [value]="geometryType.Point">
(change)="onGeometryTypeChange($event.value)"
[value]="geometryType.Point"
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
>
<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 @@ -25,23 +27,25 @@
[disabled]="drawControlIsDisabled"
[checked]="drawControlIsActive"
[labelPosition]="'before'"
(change)="onToggleDrawControl($event.checked)">
{{'igo.geo.spatialFilter.drawControl' | translate}}
(change)="onToggleDrawControl($event.checked)"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
{{ 'igo.geo.spatialFilter.drawControl' | translate }}
</mat-slide-toggle>

<mat-slide-toggle
[checked]="labelsAreShown"
[labelPosition]="'before'"
(change)="onToggleLabels()">
{{'igo.geo.draw.toggleMapTooltips' | translate}}
(change)="onToggleLabels()"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
{{ '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 @@ -50,8 +54,9 @@
floatLabel="always"
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.draw.colorPicker' | translate">
<mat-label>{{fillColor}}</mat-label>
[matTooltip]="'igo.geo.draw.colorPicker' | translate"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
<mat-label>{{ fillColor }}</mat-label>

<input
formControlName="fill"
Expand All @@ -61,21 +66,25 @@
[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}}
<mat-icon
class="stroke-palette-icon"
svgIcon="square-outline"
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
></mat-icon>
{{ 'igo.geo.draw.stroke' | translate }}
</span>

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

<input
formControlName="stroke"
Expand All @@ -95,74 +105,129 @@
[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)">
(colorPickerChange)="onColorChange(labelsAreShown, false)"
/>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
</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 }}" />
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
</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
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
}}</mat-option>
<mat-option
*ngFor="let icon_html of icons"
[value]="icon_html"
(click)="onIconChange(icon_html)">
(click)="onIconChange(icon_html)"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
<div class="box">
<img src={{icon_html}}>
<img src="{{ icon_html }}" />
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>

<form class="igo-form">
<div>
<mat-form-field appearance="outline">
<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
)
"
/>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
<span matSuffix>px</span>
</mat-form-field>
</div>

<div>
<mat-form-field appearance="outline">
<mat-label>{{ 'igo.geo.draw.fontStyle' | translate }}</mat-label>
<mat-select
#testFontStyle
[value]="fontStyle"
(selectionChange)="
onFontChange(labelsAreShown, testFontSize.value, $event.value)
"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
<mat-option
*ngFor="let fontSelect of allFontStyles"
[value]="fontSelect"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
{{ fontSelect }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</form>

<mat-divider></mat-divider>

<div>
<button *ngIf="store.count$.getValue() > 0"
<button
*ngIf="store.count$.getValue() > 0"
class="deleteBtn"
mat-icon-button
color="warn"
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.draw.delete' | translate"
[disabled]="(selectedFeatures$ | async).length === 0"
(click)="deleteDrawings()">
(click)="deleteDrawings()"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
<mat-icon svgIcon="delete"></mat-icon>
</button>

<igo-entity-table
#table
class="table-compact"
[store]="store"
[template]="tableTemplate">
[template]="tableTemplate"
(dblclick)="editLabelDrawing()"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
</igo-entity-table>
</div>

<button
mat-icon-button
color="accent"
disableRipple="true"
(click)="openShorcutsDialog()">
(click)="openShorcutsDialog()"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
<mat-icon
class="shortcuts-icon"
svgIcon="keyboard-outline"
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.draw.shortcuts' | translate">
[matTooltip]="'igo.geo.draw.shortcuts' | translate"
>
PhilippeLafreniere18 marked this conversation as resolved.
Show resolved Hide resolved
</mat-icon>
</button>
</div>
1 change: 1 addition & 0 deletions packages/geo/src/lib/draw/draw/draw.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,4 @@ img {
.deleteBtn {
margin-left: 12px;
}

Loading