Skip to content

Commit

Permalink
* Fix broken mobile layout.
Browse files Browse the repository at this point in the history 
* Fix search and map panel layouts.
* Change appearance for style options.
* Collapse all style options by default for all disabled styles.
* Switch to boolean values for style options.
* Normalise checkbox sizes.
* Improve textarea focus on Ctrl-K.
* Retain inspection panels sizes.
* Improve tabbing in the maps panel.
* Parametrise camera movement.
  • Loading branch information
@Waguramu
Waguramu committed Sep 19, 2024
1 parent 00fa34e commit e720a9a
Show file tree
Hide file tree
Showing 16 changed files with 15,589 additions and 15,437 deletions.
2 changes: 1 addition & 1 deletion erdblick_app/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {filter} from "rxjs";
<erdblick-view></erdblick-view>
<map-panel></map-panel>
<p-toast position="top-center" key="tc"></p-toast>
<search-panel #searchoverlay></search-panel>
<search-panel></search-panel>
<inspection-panel></inspection-panel>
<pref-components></pref-components>
<coordinates-panel></coordinates-panel>
Expand Down
17 changes: 9 additions & 8 deletions erdblick_app/app/debugapi.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ export class ErdblickDebugApi {
*/
setCamera(cameraInfoStr: string) {
const cameraInfo = JSON.parse(cameraInfoStr);
this.parametersService.cameraViewData.next({
destination: Cartesian3.fromArray(cameraInfo.position),
orientation: {
this.parametersService.setView(
Cartesian3.fromArray(cameraInfo.position),
{
heading: cameraInfo.orientation.heading,
pitch: cameraInfo.orientation.pitch,
roll: cameraInfo.orientation.roll
}
});
);
}

/**
Expand All @@ -54,12 +54,13 @@ export class ErdblickDebugApi {
* @return A JSON-formatted string containing the current camera's position and orientation.
*/
getCamera() {
const destination = this.parametersService.getCameraPosition();
const position = [
this.parametersService.cameraViewData.getValue().destination.x,
this.parametersService.cameraViewData.getValue().destination.y,
this.parametersService.cameraViewData.getValue().destination.z,
destination.x,
destination.y,
destination.z,
];
const orientation = this.parametersService.cameraViewData.getValue().orientation;
const orientation = this.parametersService.getCameraOrientation();
return JSON.stringify({position, orientation});
}

Expand Down
7 changes: 1 addition & 6 deletions erdblick_app/app/feature.panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,6 @@ interface Column {
[style.height.px]="inspectionContainerHeight"
(mouseup)="parameterService.onInspectionContainerResize($event)"
[ngClass]="{'resizable-container-expanded': isExpanded}">
<div class="resize-handle" (click)="isExpanded = !isExpanded">
<i *ngIf="!isExpanded" class="pi pi-chevron-up"></i>
<i *ngIf="isExpanded" class="pi pi-chevron-down"></i>
</div>
<p-treeTable #tt filterMode="strict" scrollHeight="flex"
[value]="filteredTree"
[columns]="cols"
Expand Down Expand Up @@ -178,7 +174,6 @@ interface Column {
})
export class FeaturePanelComponent implements OnInit, OnDestroy {

//jsonTree: string = "";
filteredTree: TreeTableNode[] = [];
cols: Column[] = [];
isExpanded: boolean = false;
Expand Down Expand Up @@ -228,7 +223,7 @@ export class FeaturePanelComponent implements OnInit, OnDestroy {
});

this.inspectionContainerWidth = this.parameterService.inspectionContainerWidth * this.parameterService.baseFontSize;
this.inspectionContainerHeight = (window.innerHeight - this.parameterService.inspectionContainerHeight * this.parameterService.baseFontSize) * this.parameterService.baseFontSize;
this.inspectionContainerHeight = this.parameterService.inspectionContainerHeight * this.parameterService.baseFontSize;
this.containerSizeSubscription = this.parameterService.parameters.subscribe(parameter => {
if (parameter.panel.length == 2) {
this.inspectionContainerWidth = parameter.panel[0] * this.parameterService.baseFontSize;
Expand Down
8 changes: 4 additions & 4 deletions erdblick_app/app/keyboard.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import {Dialog} from "primeng/dialog";
selector: '[onEnterClick]'
})
export class OnEnterClickDirective {
constructor(private el: ElementRef, private renderer: Renderer2) {}
constructor(private el: ElementRef) {}

@HostListener('keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
if (event.key === 'Enter') {
this.renderer.selectRootElement(this.el.nativeElement).click();
this.el.nativeElement.click();
}
}
}
Expand Down Expand Up @@ -38,9 +38,9 @@ export class KeyboardService {
this.renderer.listen('window', 'keydown', (event: KeyboardEvent) => {
const target = event.target as HTMLElement;
const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
const key = this.getKeyCombination(event);

if (!isInput) {
const key = this.getKeyCombination(event);
if (!isInput || key.includes("Ctrl")) {
if (key === 'Escape' || key === 'Esc') {
// TODO: make this work!
// if (this.dialogStack.length > 0) {
Expand Down
104 changes: 80 additions & 24 deletions erdblick_app/app/map.panel.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Component, ViewChild, Pipe, PipeTransform} from "@angular/core";
import {Component, ViewChild, Pipe, PipeTransform, AfterViewInit, ElementRef} from "@angular/core";
import {InfoMessageService} from "./info.service";
import {CoverageRectItem, MapInfoItem, MapService} from "./map.service";
import {ErdblickStyle, StyleService} from "./style.service";
Expand All @@ -20,8 +20,7 @@ import {DataSourcesService} from "./datasources.service";
selector: 'map-panel',
template: `
<p-dialog #mapLayerDialog class="map-layer-dialog" header="" [(visible)]="layerDialogVisible"
[position]="'topleft'" [draggable]="false" [resizable]="false" (onShow)="keyboardService.dialogOnShow($event)"
(onHide)="keyboardService.dialogOnHide($event)">
[position]="'topleft'" [draggable]="false" [resizable]="false">
<p-fieldset class="map-tab" legend="Maps and Layers">
<div class="osm-controls">
<p-button onEnterClick (click)="openDatasources()" class="osm-button"
Expand All @@ -36,9 +35,9 @@ import {DataSourcesService} from "./datasources.service";
</p-button>
<div *ngIf="osmEnabled" style="display: inline-block">
<input type="text" pInputText [(ngModel)]="osmOpacityString"
class="w-full slider-input"/>
class="w-full slider-input" tabindex="0"/>
<p-slider [(ngModel)]="osmOpacityValue" (ngModelChange)="updateOSMOverlay()"
class="w-full" tabindex="0">
class="w-full" tabindex="-1">
</p-slider>
</div>
</div>
Expand Down Expand Up @@ -104,13 +103,14 @@ import {DataSourcesService} from "./datasources.service";
<span onEnterClick *ngIf="style.value.options.length" class="material-icons"
[ngClass]="{'rotated-icon': !style.value.params.showOptions}"
style="font-size: 1.5em; margin-left: -0.75em; margin-right: -0.25em; cursor: pointer"
(click)="style.value.params.showOptions = !style.value.params.showOptions; applyStyleConfig(style.value, false)"
tabindex="0">
(click)="expandStyle(style.key)" tabindex="0">
expand_more
</span>
<span onEnterClick class="material-icons"
style="font-size: 1.5em; cursor: pointer"
(click)="showStylesToggleMenu($event, style.key)" tabindex="0">more_vert</span>
(click)="showStylesToggleMenu($event, style.key)" tabindex="0">
more_vert
</span>
<span>
<p-checkbox onEnterClick [(ngModel)]="style.value.params.visible"
(ngModelChange)="applyStyleConfig(style.value)"
Expand Down Expand Up @@ -140,12 +140,19 @@ import {DataSourcesService} from "./datasources.service";
</p-button>
</div>
</div>
<div *ngIf="style.value.options.length && style.value.params.showOptions">
<div *ngIf="style.value.options.length && style.value.params.showOptions && style.value.params.visible">
<div *ngFor="let option of style.value.options"
style="margin-left: 4.25em; align-items: center; font-size: 0.9em; margin-top: 0.25em">
<p-checkbox onEnterClick [(ngModel)]="style.value.params.options[option.id]"
(ngModelChange)="applyStyleConfig(style.value)"
[label]="option.label" [binary]="true" tabindex="0"/>
style="margin-left: 2.25em; align-items: center; font-size: 0.9em; margin-top: 0.25em">
<span onEnterClick class="material-icons"
style="font-size: 1.5em; cursor: pointer"
(click)="showOptionsToggleMenu($event, style.value, option.id)" tabindex="0">
more_vert
</span>
<span style="font-style: oblique">
<p-checkbox onEnterClick [(ngModel)]="style.value.params.options[option.id]"
(ngModelChange)="applyStyleConfig(style.value)"
[label]="option.label" [binary]="true" tabindex="0"/>
</span>
</div>
</div>
</div>
Expand All @@ -160,13 +167,11 @@ import {DataSourcesService} from "./datasources.service";
</div>
<div class="styles-container">
<div class="styles-import">
<p-fileUpload onEnterClick name="demo[]" mode="basic" chooseLabel="Import Style"
[customUpload]="true" [fileLimit]="1" [multiple]="false"
accept=".yaml" [maxFileSize]="1048576"
(uploadHandler)="importStyle($event)"
pTooltip="Import style" tooltipPosition="bottom"
class="import-dialog" #styleUploader tabindex="0">
</p-fileUpload>
<p-fileUpload #styleUploader onEnterClick mode="basic" name="demo[]" chooseIcon="pi pi-upload"
accept=".yaml" maxFileSize="1048576" fileLimit="1" multiple="false"
customUpload="true" (uploadHandler)="importStyle($event)" [auto]="true"
class="import-dialog" pTooltip="Import style" tooltipPosition="bottom"
chooseLabel="Import Style" tabindex="0" />
</div>
</div>
</p-fieldset>
Expand Down Expand Up @@ -236,8 +241,7 @@ export class MapPanelComponent {
public keyboardService: KeyboardService,
public editorService: EditorService,
public dsService: DataSourcesService,
private sidePanelService: SidePanelService)
{
private sidePanelService: SidePanelService) {
this.keyboardService.registerShortcuts(['m', 'M'], this.showLayerDialog.bind(this));

this.parameterService.parameters.subscribe(parameters => {
Expand All @@ -255,14 +259,59 @@ export class MapPanelComponent {
this.editorService.editedStateData.subscribe(state => {
this.styleService.styleEditedStateData.next(state);
});
this.keyboardService.registerShortcut('m', this.showLayerDialog.bind(this));
this.keyboardService.registerShortcut('M', this.showLayerDialog.bind(this));
}

get osmOpacityString(): string {
return 'Opacity: ' + this.osmOpacityValue;
}

// TODO: Refactor these into a generic solution
showOptionsToggleMenu(event: MouseEvent, style: ErdblickStyle, optionId: string) {
this.toggleMenu.toggle(event);
this.toggleMenuItems = [
{
label: 'Toggle All off but This',
command: () => {
for (const id in style.params.options) {
this.styleService.toggleOption(style.id, id, id == optionId);
}
this.applyStyleConfig(style);
// this.mapService.update();
}
},
{
label: 'Toggle All on but This',
command: () => {
for (const id in style.params.options) {
this.styleService.toggleOption(style.id, id, id != optionId);
}
this.applyStyleConfig(style);
// this.mapService.update();
}
},
{
label: 'Toggle All Off',
command: () => {
for (const id in style.params.options) {
this.styleService.toggleOption(style.id, id, false);
}
this.applyStyleConfig(style);
// this.mapService.update();
}
},
{
label: 'Toggle All On',
command: () => {
for (const id in style.params.options) {
this.styleService.toggleOption(style.id, id, true);
}
this.applyStyleConfig(style);
// this.mapService.update();
}
}
];
}

showStylesToggleMenu(event: MouseEvent, styleId: string) {
this.toggleMenu.toggle(event);
this.toggleMenuItems = [
Expand Down Expand Up @@ -410,6 +459,12 @@ export class MapPanelComponent {
this.mapService.toggleMapLayerVisibility(mapName, layerName);
}

expandStyle(styleId: string) {
const style = this.styleService.styles.get(styleId)!;
style.params.showOptions = !style.params.showOptions;
this.applyStyleConfig(style, false);
}

applyStyleConfig(style: ErdblickStyle, redraw: boolean=true) {
if (redraw) {
this.styleService.reapplyStyle(style.id);
Expand All @@ -429,6 +484,7 @@ export class MapPanelComponent {
}

importStyle(event: any) {
console.log(event)
if (event.files && event.files.length > 0) {
const file: File = event.files[0];
let styleId = file.name;
Expand Down
2 changes: 1 addition & 1 deletion erdblick_app/app/map.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -679,7 +679,7 @@ export class MapService {
async highlightFeatures(tileFeatureIds: (TileFeatureId|null|string)[], focus: boolean=false, mode: HighlightMode=coreLib.HighlightMode.SELECTION_HIGHLIGHT) {
// Load the tiles for the selection.
const tiles = await this.loadTiles(
new Set(tileFeatureIds.filter(s => typeof s !== "string").map(s => s?.mapTileKey || null)));
new Set(tileFeatureIds.filter(s => s && typeof s !== "string").map(s => (s as TileFeatureId).mapTileKey)));

// Ensure that the feature really exists in the tile.
let features = new Array<FeatureWrapper>();
Expand Down
36 changes: 19 additions & 17 deletions erdblick_app/app/parameters.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface TileFeatureId {

export interface StyleParameters {
visible: boolean,
options: Record<string, string>,
options: Record<string, boolean>,
showOptions: boolean,
}

Expand Down Expand Up @@ -214,10 +214,11 @@ export class ParametersService {

baseFontSize: number = 16;
inspectionContainerWidth: number = 40;
inspectionContainerHeight: number = 10.5;
inspectionContainerHeight: number = (window.innerHeight - 10.5 * this.baseFontSize);

CAMERA_MOVE_AMOUNT = 1000.0;
CAMERA_ZOOM_AMOUNT = 5000.0;
private baseCameraMoveM = 100.0;
private baseCameraZoomM = 100.0;
private scalingFactor = 1;

constructor(public router: Router) {
this.baseFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
Expand All @@ -227,11 +228,20 @@ export class ParametersService {
this.saveParameters();
this.parameters.subscribe(parameters => {
if (parameters) {
this.scalingFactor = Math.pow(parameters.alt / 1000, 1.1) / 2;
this.saveParameters();
}
});
}

get cameraMoveUnits() {
return this.baseCameraMoveM * this.scalingFactor / 75000;
}

get cameraZoomUnits() {
return this.baseCameraZoomM * this.scalingFactor;
}

get replaceUrl() {
const currentValue = this._replaceUrl;
this._replaceUrl = true;
Expand Down Expand Up @@ -382,6 +392,11 @@ export class ParametersService {
this.p().pitch = camera.pitch;
this.p().roll = camera.roll;
this.parameters.next(this.p());
this.setView(Cartesian3.fromDegrees(this.p().lon, this.p().lat, this.p().alt), {
heading: this.p().heading,
pitch: this.p().pitch,
roll: this.p().roll
});
}

loadSavedParameters(): ErdblickParameters | null {
Expand Down Expand Up @@ -508,19 +523,6 @@ export class ParametersService {
}
}

// resizeInspectionContainer() {
// this.baseFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
// const containerSize = localStorage.getItem('inspectContainerSize');
// if (containerSize) {
// const parsedContainerSize = JSON.parse(containerSize) as InspectionContainerSize;
// this.inspectionContainerWidth = parsedContainerSize.width * this.baseFontSize;
// this.inspectionContainerWidth = parsedContainerSize.height * this.baseFontSize;
// } else {
// this.inspectionContainerWidth = 40 * this.baseFontSize;
// this.inspectionContainerWidth = (window.innerHeight - 10.5 * this.baseFontSize) * this.baseFontSize;
// }
// }

onInspectionContainerResize(event: MouseEvent): void {
const element = event.target as HTMLElement;
if (!element.classList.contains("resizable-container")) {
Expand Down
Loading

0 comments on commit e720a9a

Please sign in to comment.