Skip to content

Commit

Permalink
* Replace source data header with dropdown
Browse files Browse the repository at this point in the history 
* Remove DB icons
* Resize source inspection buttons
* Add left margin and horizontal borders for inspection tables
* Resize inspection panels
* Improve contrast for source data selection
* Update editor completions
  • Loading branch information
@Waguramu
Waguramu committed Sep 12, 2024
1 parent f7e0d52 commit 2a8b73b
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 60 deletions.
4 changes: 3 additions & 1 deletion erdblick_app/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ import {InputTextareaModule} from "primeng/inputtextarea";
import {FloatLabelModule} from "primeng/floatlabel";
import {TabViewModule} from "primeng/tabview";
import {OnEnterClickDirective} from "./keyboard.service";
import {DropdownModule} from "primeng/dropdown";

export function initializeServices(styleService: StyleService, mapService: MapService, coordService: CoordinatesService) {
return async () => {
Expand Down Expand Up @@ -127,7 +128,8 @@ export function initializeServices(styleService: StyleService, mapService: MapSe
ButtonGroupModule,
TabViewModule,
BreadcrumbModule,
TableModule
TableModule,
DropdownModule
],
providers: [
{
Expand Down
4 changes: 3 additions & 1 deletion erdblick_app/app/editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,9 @@ const completionsList = [
{label: "relation", type: "keyword"},
{label: "attribute", type: "keyword"},
{label: "normal", type: "keyword"},
{label: "highlight", type: "keyword"},
{label: "none", type: "keyword"},
{label: "selection", type: "keyword"},
{label: "hover", type: "keyword"},
{label: "Lane", type: "keyword"},
{label: "Boundary", type: "keyword"}
]
Expand Down
14 changes: 4 additions & 10 deletions erdblick_app/app/feature.panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,9 @@ interface Column {
</span>
<p-buttonGroup *ngIf="rowData['sourceDataReferences']"
class="source-data-ref-container">
<p-button icon="pi pi-database"
[rounded]="true"
severity="secondary"
disabled="true"
/>
<ng-template ngFor let-item [ngForOf]="rowData.sourceDataReferences">
<p-button
(click)="showSourceData($event, item)"
[rounded]="true"
severity="secondary"
label="{{ item.qualifier.substring(0, 1).toUpperCase() }}"
pTooltip="Go to {{ item.qualifier }} Source Data"
Expand Down Expand Up @@ -155,10 +149,10 @@ interface Column {
.source-data-ref-container {
button {
width: 20px;
height: 20px;
padding: 3px;
margin-bottom: 0.5px;
width: 1.1em;
height: 1em;
padding: 0.1em;
margin-bottom: 0.2em;
}
}
Expand Down
60 changes: 53 additions & 7 deletions erdblick_app/app/inspection.panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {distinctUntilChanged} from "rxjs";
import {FeaturePanelComponent} from "./feature.panel.component";
import {SourceDataPanelComponent} from "./sourcedata.panel.component";
import {ParametersService} from "./parameters.service";
import {MapService} from "./map.service";

interface InspectorTab {
title: string,
Expand All @@ -13,18 +14,28 @@ interface InspectorTab {
onClose?: any,
}

interface SourceLayerMenuItem {
label: string,
disabled: boolean,
command: () => void
}

@Component({
selector: 'inspection-panel',
template: `
<p-accordion *ngIf="inspectionService.featureTree.value.length && inspectionService.isInspectionPanelVisible"
class="w-full inspect-panel"
class="w-full inspect-panel" [ngClass]="{'inspect-panel-small-header': activeIndex > 0}"
[activeIndex]="0" >
<p-accordionTab>
<ng-template pTemplate="header">
<span class="inspector-title" *ngIf="activeIndex < tabs.length">
<p-button icon="pi pi-chevron-left" *ngIf="activeIndex > 0" (click)="onGoBack($event)" />
<i class="pi {{ tabs[activeIndex].icon || '' }}"></i>{{ tabs[activeIndex].title || '' }}
<p-dropdown class="source-layer-dropdown" *ngIf="activeIndex > 0" [options]="layerMenuItems"
[(ngModel)]="selectedLayerItem" (click)="onDropdownClick($event)"
(ngModelChange)="onSelectedLayerItem()" optionLabel="label" optionDisabled="disabled" />
</span>
</ng-template>
Expand All @@ -47,12 +58,13 @@ interface InspectorTab {
align-items: center;
.p-button {
width: 30px;
height: 30px;
width: 1.75em;
height: 1.75em;
margin: 0;
}
}
}`,
}
`,
]
})
export class InspectionPanelComponent
Expand All @@ -61,7 +73,12 @@ export class InspectionPanelComponent
tabs: InspectorTab[] = [];
activeIndex = 0;

constructor(public inspectionService: InspectionService, private parameterService: ParametersService) {
layerMenuItems: SourceLayerMenuItem[] = [];
selectedLayerItem?: SourceLayerMenuItem;

constructor(public inspectionService: InspectionService,
public mapService: MapService,
private parameterService: ParametersService) {
this.pushFeatureInspector();

this.inspectionService.featureTree.pipe(distinctUntilChanged()).subscribe((tree: string) => {
Expand All @@ -88,6 +105,25 @@ export class InspectionPanelComponent
this.inspectionService.selectedSourceData.pipe(distinctUntilChanged(selectedSourceDataEqualTo)).subscribe(selection => {
if (selection) {
this.reset();
const map = this.mapService.maps.getValue().get(selection.mapId);
if (map) {
this.layerMenuItems = Array.from(map.layers.values()).filter(item => item.type == "SourceData").map(item => {
return {
label: SourceDataPanelComponent.layerNameForLayerId(item.layerId),
disabled: item.layerId === selection.layerId,
command: () => {
let sourceData = {...selection};
sourceData.layerId = item.layerId;
sourceData.address = BigInt(0);

this.inspectionService.selectedSourceData.next(sourceData);
},
};
});
this.selectedLayerItem = this.layerMenuItems.filter(item => item.disabled).pop();
} else {
this.layerMenuItems = [];
}
this.pushSourceDataInspector(selection);
}
})
Expand Down Expand Up @@ -122,8 +158,8 @@ export class InspectionPanelComponent

pushSourceDataInspector(data: SelectedSourceData) {
let tab = {
title: SourceDataPanelComponent.layerNameForLayerId(data.layerId),
icon: "pi-database",
title: "Source Data",
icon: "",
component: SourceDataPanelComponent,
inputs: {
sourceData: data
Expand Down Expand Up @@ -155,4 +191,14 @@ export class InspectionPanelComponent
this.tabs.pop();
}
}

onSelectedLayerItem() {
if (this.selectedLayerItem && !this.selectedLayerItem.disabled) {
this.selectedLayerItem.command();
}
}

onDropdownClick(event: MouseEvent) {
event.stopPropagation();
}
}
39 changes: 6 additions & 33 deletions erdblick_app/app/sourcedata.panel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import {Menu} from "primeng/menu";
/>
<i *ngIf="filterString" (click)="clearFilter()"
class="pi pi-times clear-icon" style="cursor: pointer"></i>
<p-button icon="pi pi-ellipsis-v" tooltip="Select Layer" (click)="layerMenuItemsMenu.toggle($event)" />
</div>
</ng-template>
Expand Down Expand Up @@ -80,15 +79,13 @@ import {Menu} from "primeng/menu";
</div>
</div>
</ng-template>
<p-menu #layerMenuItemsMenu [model]="layerMenuItems" [popup]="true" appendTo="body" [style]="{'width': 'auto'}" />
`
})
export class SourceDataPanelComponent implements OnInit {
@Input() sourceData!: SelectedSourceData;

@ViewChild('tt') table!: TreeTable;
@ViewChild('layerMenuItemsMenu') layerListMenu!: Menu;
// @ViewChild('layerMenuItemsMenu') layerListMenu!: Menu;

treeData: TreeTableNode[] = [];
filterFields = [
Expand All @@ -108,10 +105,10 @@ export class SourceDataPanelComponent implements OnInit {
errorMessage = "";
isExpanded = false;

layerMenuItems: any[] = [];
// layerMenuItems: any[] = [];

/**
* Returns a human readable layer name for a layer id.
* Returns a human-readable layer name for a layer id.
*
* @param layerId Layer id to get the name for
*/
Expand Down Expand Up @@ -147,33 +144,9 @@ export class SourceDataPanelComponent implements OnInit {
this.loading = false;
});

this.mapService.maps.subscribe(maps => {
const map = maps.get(this.sourceData.mapId);
if (map) {
this.layerMenuItems = [
{
label: "Switch Layer",
items: Array.from(map.layers.values())
.filter(item => item.type == "SourceData")
.map(item => {
return {
label: SourceDataPanelComponent.layerNameForLayerId(item.layerId),
disabled: item.layerId === this.sourceData.layerId,
command: () => {
let sourceData = {...this.sourceData};
sourceData.layerId = item.layerId;
sourceData.address = BigInt(0);

this.inspectionService.selectedSourceData.next(sourceData);
},
};
}),
},
];
} else {
this.layerMenuItems = [];
}
});
// this.mapService.maps.subscribe(maps => {
//
// });
}

/**
Expand Down
43 changes: 35 additions & 8 deletions erdblick_app/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
@import "primeicons/primeicons.css";
@layer primeng, erdblick;

.source-layer-dropdown {
margin-left: 0.25em;

.p-dropdown-label {
padding: 0.4em;
min-width: 13em;
}
}

body {
overflow: hidden;
height: 100vh !important;
Expand Down Expand Up @@ -112,6 +121,18 @@ body {
right: 0.75rem;
}

.inspect-panel-small-header {
.p-accordion-header .p-accordion-header-link {
padding-top: 0.5em !important;
padding-bottom: 0.5em !important;
}

.resizable-container {
height: calc(100vh - 7.5em) !important;
max-height: calc(100vh - 7.5em) !important;
}
}

.inspect-panel {
position: absolute;
top: 0.5em;
Expand All @@ -120,7 +141,7 @@ body {
z-index: 110;

.p-accordion-header .p-accordion-header-link {
padding: 0.8em;
padding: 0.95em;
}

.p-accordion-content {
Expand Down Expand Up @@ -150,15 +171,15 @@ body {
}

.resizable-container {
width: 30em;
height: 30em;
width: 40em;
height: calc(100vh - 10.5em);
min-width: 30em;
min-height: 18em;
resize: both;
overflow: auto;
direction: rtl;
max-width: calc(100vw - 27em);
max-height: calc(100vh - 8.5em);
max-width: calc(100vw - 28em);
max-height: calc(100vh - 10.5em);

* {
direction: ltr;
Expand All @@ -185,12 +206,13 @@ body {
border-collapse: collapse;

td {
padding: 0px;
padding: 0 0 0 0.5em;
height: 26px;
border-right: 1px solid #e5e7eb;
}

th {
padding: 0px;
padding: 0;
height: 26px;
}

Expand All @@ -202,7 +224,12 @@ body {

/* Style used for highlighting individual table rows. */
tr.highlight {
background: hsl(105, 30%, 90%);
color: black;
background: var(--green-100);

td {
border-color: darkgrey;
}
}
}
}
Expand Down

0 comments on commit 2a8b73b

Please sign in to comment.