Skip to content

Commit 3bc96f8

Browse files
daniel-freiermuthdaniel-freiermuth
committed
Merge branch 'configurable-line-styles' into feat-great-circle-new
2 parents 786c186 + 3bcc53b commit 3bc96f8

2 files changed

Lines changed: 87 additions & 63 deletions

File tree

‎src/app/modules/settings/components/settings-dialog.html‎

Lines changed: 78 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -785,9 +785,16 @@
785785
</mat-checkbox>
786786
</div>
787787
<div class="setting-card-row" style="padding-bottom: 6px; align-items: center; gap: 12px; flex-wrap: wrap">
788-
<div style="flex: 0 0 auto; font-size: 0.85em; min-width: 120px">Heading Line Style:</div>
789-
<mat-form-field style="width: 150px">
790-
<mat-label>Length kind</mat-label>
788+
<div style="flex: 0 0 auto; min-width: 120px">Heading Line Style:</div>
789+
<mat-form-field style="width: 110px">
790+
<mat-label>Value</mat-label>
791+
<input matInput type="number" min="0"
792+
[(ngModel)]="facade.settings.vessels.headingLineStyle.lineLength.value"
793+
(change)="persistModel()"
794+
>
795+
</mat-form-field>
796+
<mat-form-field style="width: 75px">
797+
<mat-label>Unit</mat-label>
791798
<mat-select
792799
[(ngModel)]="facade.settings.vessels.headingLineStyle.lineLength.kind"
793800
(selectionChange)="persistModel()"
@@ -797,47 +804,49 @@
797804
}
798805
</mat-select>
799806
</mat-form-field>
800-
<mat-form-field style="width: 90px">
801-
<mat-label>Value</mat-label>
802-
<input matInput type="number" min="0"
803-
[(ngModel)]="facade.settings.vessels.headingLineStyle.lineLength.value"
807+
<mat-form-field style="width: 70px">
808+
<mat-label>Color</mat-label>
809+
<input matInput type="color"
810+
[(ngModel)]="facade.settings.vessels.headingLineStyle.color"
804811
(change)="persistModel()"
812+
style="cursor: pointer; padding: 0; height: 24px"
805813
>
806-
<span matSuffix>
807-
@if (facade.settings.vessels.headingLineStyle.lineLength.kind === 'time') { min }
808-
@if (facade.settings.vessels.headingLineStyle.lineLength.kind === 'distance') { nmi }
809-
@if (facade.settings.vessels.headingLineStyle.lineLength.kind === 'pixels') { px }
810-
</span>
811814
</mat-form-field>
812-
<label style="font-size: 0.8em">Color</label>
813-
<input type="color"
814-
[(ngModel)]="facade.settings.vessels.headingLineStyle.color"
815-
(change)="persistModel()"
816-
style="width: 40px; height: 28px; padding: 2px; cursor: pointer; border: none"
817-
>
818-
<mat-form-field style="width: 70px">
815+
<mat-form-field style="width: 80px">
819816
<mat-label>Width</mat-label>
820817
<input matInput type="number" min="1" max="10"
821818
[(ngModel)]="facade.settings.vessels.headingLineStyle.width"
822819
(change)="persistModel()"
823820
>
824821
</mat-form-field>
825-
<mat-form-field style="width: 130px">
822+
<mat-form-field style="width: 200px">
826823
<mat-label>Pattern</mat-label>
827824
<mat-select
828825
[(ngModel)]="facade.settings.vessels.headingLineStyle.dash"
829826
(selectionChange)="persistModel()"
830827
>
831828
@for(d of options.lineStyle.dashPatterns; track d[0]) {
832-
<mat-option [value]="d[0]">{{d[1]}}</mat-option>
829+
<mat-option [value]="d[0]">
830+
<svg width="48" height="10" style="vertical-align: middle; margin-right: 6px">
831+
<line x1="0" y1="5" x2="48" y2="5" stroke="currentColor" stroke-width="2"
832+
[attr.stroke-dasharray]="options.lineStyle.dashArrays.get(d[0])"/>
833+
</svg>{{d[1]}}
834+
</mat-option>
833835
}
834836
</mat-select>
835837
</mat-form-field>
836838
</div>
837839
<div class="setting-card-row" style="padding-bottom: 10px; align-items: center; gap: 12px; flex-wrap: wrap">
838-
<div style="flex: 0 0 auto; font-size: 0.85em; min-width: 120px">COG Line Style:</div>
839-
<mat-form-field style="width: 150px">
840-
<mat-label>Length kind</mat-label>
840+
<div style="flex: 0 0 auto; min-width: 120px">COG Line Style:</div>
841+
<mat-form-field style="width: 110px">
842+
<mat-label>Value</mat-label>
843+
<input matInput type="number" min="0"
844+
[(ngModel)]="facade.settings.vessels.cogLineStyle.lineLength.value"
845+
(change)="persistModel()"
846+
>
847+
</mat-form-field>
848+
<mat-form-field style="width: 75px">
849+
<mat-label>Unit</mat-label>
841850
<mat-select
842851
[(ngModel)]="facade.settings.vessels.cogLineStyle.lineLength.kind"
843852
(selectionChange)="persistModel()"
@@ -847,39 +856,34 @@
847856
}
848857
</mat-select>
849858
</mat-form-field>
850-
<mat-form-field style="width: 90px">
851-
<mat-label>Value</mat-label>
852-
<input matInput type="number" min="0"
853-
[(ngModel)]="facade.settings.vessels.cogLineStyle.lineLength.value"
859+
<mat-form-field style="width: 70px">
860+
<mat-label>Color</mat-label>
861+
<input matInput type="color"
862+
[(ngModel)]="facade.settings.vessels.cogLineStyle.color"
854863
(change)="persistModel()"
864+
style="cursor: pointer; padding: 0; height: 24px"
855865
>
856-
<span matSuffix>
857-
@if (facade.settings.vessels.cogLineStyle.lineLength.kind === 'time') { min }
858-
@if (facade.settings.vessels.cogLineStyle.lineLength.kind === 'distance') { nmi }
859-
@if (facade.settings.vessels.cogLineStyle.lineLength.kind === 'pixels') { px }
860-
</span>
861866
</mat-form-field>
862-
<label style="font-size: 0.8em">Color</label>
863-
<input type="color"
864-
[(ngModel)]="facade.settings.vessels.cogLineStyle.color"
865-
(change)="persistModel()"
866-
style="width: 40px; height: 28px; padding: 2px; cursor: pointer; border: none"
867-
>
868-
<mat-form-field style="width: 70px">
867+
<mat-form-field style="width: 80px">
869868
<mat-label>Width</mat-label>
870869
<input matInput type="number" min="1" max="10"
871870
[(ngModel)]="facade.settings.vessels.cogLineStyle.width"
872871
(change)="persistModel()"
873872
>
874873
</mat-form-field>
875-
<mat-form-field style="width: 130px">
874+
<mat-form-field style="width: 200px">
876875
<mat-label>Pattern</mat-label>
877876
<mat-select
878877
[(ngModel)]="facade.settings.vessels.cogLineStyle.dash"
879878
(selectionChange)="persistModel()"
880879
>
881880
@for(d of options.lineStyle.dashPatterns; track d[0]) {
882-
<mat-option [value]="d[0]">{{d[1]}}</mat-option>
881+
<mat-option [value]="d[0]">
882+
<svg width="48" height="10" style="vertical-align: middle; margin-right: 6px">
883+
<line x1="0" y1="5" x2="48" y2="5" stroke="currentColor" stroke-width="2"
884+
[attr.stroke-dasharray]="options.lineStyle.dashArrays.get(d[0])"/>
885+
</svg>{{d[1]}}
886+
</mat-option>
883887
}
884888
</mat-select>
885889
</mat-form-field>
@@ -1114,28 +1118,35 @@
11141118
<mat-card class="setting-card">
11151119
<mat-card-content>
11161120
<div class="setting-card-row" style="padding-bottom: 6px; align-items: center; gap: 12px; flex-wrap: wrap">
1117-
<div style="flex: 0 0 auto; font-size: 0.85em; min-width: 120px">Self Track Style:</div>
1118-
<label style="font-size: 0.8em">Color</label>
1119-
<input type="color"
1120-
[(ngModel)]="facade.settings.vessels.selfTrailStyle.color"
1121-
(change)="persistModel()"
1122-
style="width: 40px; height: 28px; padding: 2px; cursor: pointer; border: none"
1123-
>
1121+
<div style="flex: 0 0 auto; min-width: 120px">Self Track Style:</div>
11241122
<mat-form-field style="width: 70px">
1123+
<mat-label>Color</mat-label>
1124+
<input matInput type="color"
1125+
[(ngModel)]="facade.settings.vessels.selfTrailStyle.color"
1126+
(change)="persistModel()"
1127+
style="cursor: pointer; padding: 0; height: 24px"
1128+
>
1129+
</mat-form-field>
1130+
<mat-form-field style="width: 80px">
11251131
<mat-label>Width</mat-label>
11261132
<input matInput type="number" min="1" max="10"
11271133
[(ngModel)]="facade.settings.vessels.selfTrailStyle.width"
11281134
(change)="persistModel()"
11291135
>
11301136
</mat-form-field>
1131-
<mat-form-field style="width: 130px">
1137+
<mat-form-field style="width: 200px">
11321138
<mat-label>Pattern</mat-label>
11331139
<mat-select
11341140
[(ngModel)]="facade.settings.vessels.selfTrailStyle.dash"
11351141
(selectionChange)="persistModel()"
11361142
>
11371143
@for(d of options.lineStyle.dashPatterns; track d[0]) {
1138-
<mat-option [value]="d[0]">{{d[1]}}</mat-option>
1144+
<mat-option [value]="d[0]">
1145+
<svg width="48" height="10" style="vertical-align: middle; margin-right: 6px">
1146+
<line x1="0" y1="5" x2="48" y2="5" stroke="currentColor" stroke-width="2"
1147+
[attr.stroke-dasharray]="options.lineStyle.dashArrays.get(d[0])"/>
1148+
</svg>{{d[1]}}
1149+
</mat-option>
11391150
}
11401151
</mat-select>
11411152
</mat-form-field>
@@ -1174,28 +1185,35 @@
11741185
</div>
11751186
</div>
11761187
<div class="setting-card-row" style="padding-bottom: 6px; align-items: center; gap: 12px; flex-wrap: wrap">
1177-
<div style="flex: 0 0 auto; font-size: 0.85em; min-width: 140px">Other Vessel Track Style:</div>
1178-
<label style="font-size: 0.8em">Color</label>
1179-
<input type="color"
1180-
[(ngModel)]="facade.settings.vessels.aisTrackStyle.color"
1181-
(change)="persistModel()"
1182-
style="width: 40px; height: 28px; padding: 2px; cursor: pointer; border: none"
1183-
>
1188+
<div style="flex: 0 0 auto; min-width: 140px">Other Vessel Track Style:</div>
11841189
<mat-form-field style="width: 70px">
1190+
<mat-label>Color</mat-label>
1191+
<input matInput type="color"
1192+
[(ngModel)]="facade.settings.vessels.aisTrackStyle.color"
1193+
(change)="persistModel()"
1194+
style="cursor: pointer; padding: 0; height: 24px"
1195+
>
1196+
</mat-form-field>
1197+
<mat-form-field style="width: 80px">
11851198
<mat-label>Width</mat-label>
11861199
<input matInput type="number" min="1" max="10"
11871200
[(ngModel)]="facade.settings.vessels.aisTrackStyle.width"
11881201
(change)="persistModel()"
11891202
>
11901203
</mat-form-field>
1191-
<mat-form-field style="width: 130px">
1204+
<mat-form-field style="width: 200px">
11921205
<mat-label>Pattern</mat-label>
11931206
<mat-select
11941207
[(ngModel)]="facade.settings.vessels.aisTrackStyle.dash"
11951208
(selectionChange)="persistModel()"
11961209
>
11971210
@for(d of options.lineStyle.dashPatterns; track d[0]) {
1198-
<mat-option [value]="d[0]">{{d[1]}}</mat-option>
1211+
<mat-option [value]="d[0]">
1212+
<svg width="48" height="10" style="vertical-align: middle; margin-right: 6px">
1213+
<line x1="0" y1="5" x2="48" y2="5" stroke="currentColor" stroke-width="2"
1214+
[attr.stroke-dasharray]="options.lineStyle.dashArrays.get(d[0])"/>
1215+
</svg>{{d[1]}}
1216+
</mat-option>
11991217
}
12001218
</mat-select>
12011219
</mat-form-field>

‎src/app/modules/settings/settings.facade.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -227,10 +227,16 @@ export class SettingsOptions {
227227
['medium', 'Dashed'],
228228
['long', 'Long Dash']
229229
]),
230+
dashArrays: new Map([
231+
['solid', 'none'],
232+
['short', '2 2'],
233+
['medium', '4 4'],
234+
['long', '8 4']
235+
]),
230236
lineLengthKinds: new Map([
231-
['time', 'Time (min)'],
232-
['distance', 'Distance (nmi)'],
233-
['pixels', 'On screen (px)']
237+
['time', 'min'],
238+
['distance', 'nm'],
239+
['pixels', 'px']
234240
])
235241
};
236242
}

0 commit comments

Comments
 (0)