You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by te...@apache.org on 2020/08/29 12:13:28 UTC
[incubator-streampipes] branch responsive_canvas created (now
53d444f)
This is an automated email from the ASF dual-hosted git repository.
tex pushed a change to branch responsive_canvas
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
at 53d444f start to make a responsive canvas for the data explorer
This branch includes the following new commits:
new 53d444f start to make a responsive canvas for the data explorer
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-streampipes] 01/01: start to make a responsive canvas
for the data explorer
Posted by te...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
tex pushed a commit to branch responsive_canvas
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 53d444fb901f9acc1b53c74aefc45b89f2c5e4fb
Author: tex <te...@fzi.de>
AuthorDate: Sat Aug 29 14:10:52 2020 +0200
start to make a responsive canvas for the data explorer
---
.../image/components/image-bar/image-bar.component.css | 4 ++--
.../components/image-bar/image-bar.component.html | 10 +++++-----
.../image/components/image-bar/image-bar.component.ts | 1 +
.../image-container/image-container.component.ts | 18 ++++++++++++++++--
.../image/image-viewer/image-viewer.component.html | 5 ++++-
.../image/image-viewer/image-viewer.component.ts | 10 ++++++++++
.../widgets/image/image-widget.component.html | 7 ++++++-
.../components/widgets/image/image-widget.component.ts | 8 ++++++++
8 files changed, 52 insertions(+), 11 deletions(-)
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css
index 53539c2..54647dc 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css
@@ -18,11 +18,11 @@
.imageBar {
height: 70px;
- width: 1000px;
+ /*width: 640px;*/
}
.imagePreview {
- height: 65px
+ /*height: 65px*/
}
.imageFocus {
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
index 66fc60e..ccbc6b5 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
@@ -24,20 +24,20 @@
<div fxLayout="row" fxLayoutAlign="center center" class="imageBar">
<div fxFlex="40" fxLayoutAlign="end center">
- <img class="imagePreview" *ngIf="selectedIndex >= 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 2])}}" (click)="changeImage(selectedIndex - 2)">
- <img class="imagePreview" *ngIf="selectedIndex >= 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 1])}}" (click)="changeImage(selectedIndex - 1)">
+ <img class="imagePreview" [style.height.px]="imagePreviewHeight" *ngIf="selectedIndex >= 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 2])}}" (click)="changeImage(selectedIndex - 2)">
+ <img class="imagePreview" [style.height.px]="imagePreviewHeight" *ngIf="selectedIndex >= 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 1])}}" (click)="changeImage(selectedIndex - 1)">
</div>
<div fxFlex="20">
<div fxLayout="row" fxLayoutAlign="center">
- <img class="imagePreview imageFocus" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(selectedIndex)">
+ <img class="imagePreview imageFocus" [style.height.px]="imagePreviewHeight" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(selectedIndex)">
</div>
</div>
<div fxFlex="40">
<div fxLayout="row" fxLayoutAlign="start center">
- <img class="imagePreview" *ngIf="selectedIndex < maxImages - 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 1])}}" (click)="changeImage(selectedIndex + 1)">
- <img class="imagePreview" *ngIf="selectedIndex < maxImages - 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 2])}}" (click)="changeImage(selectedIndex + 2)">
+ <img class="imagePreview" [style.height.px]="imagePreviewHeight" *ngIf="selectedIndex < maxImages - 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 1])}}" (click)="changeImage(selectedIndex + 1)">
+ <img class="imagePreview" [style.height.px]="imagePreviewHeight" *ngIf="selectedIndex < maxImages - 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 2])}}" (click)="changeImage(selectedIndex + 2)">
</div>
</div>
</div>
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
index a62ecb1..5c5d820 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
@@ -35,6 +35,7 @@ export class ImageBarComponent implements OnInit {
}
@Input() selectedIndex: number;
@Input() enableShortCuts: boolean;
+ @Input() imagePreviewHeight = 65;
@Output() indexChange: EventEmitter<number> = new EventEmitter<number>();
diff --git a/ui/src/app/core-ui/image/components/image-container/image-container.component.ts b/ui/src/app/core-ui/image/components/image-container/image-container.component.ts
index 30dd48d..52f90aa 100644
--- a/ui/src/app/core-ui/image/components/image-container/image-container.component.ts
+++ b/ui/src/app/core-ui/image/components/image-container/image-container.component.ts
@@ -32,6 +32,12 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
this.loadImage(src);
}
+ @Input()
+ public canvasHeight = 500;
+
+ @Input()
+ public canvasWidth = 800;
+
@Output()
childRedraw: EventEmitter<[Konva.Layer, ICoordinates]> = new EventEmitter<[Konva.Layer, ICoordinates]>();
@Output()
@@ -95,13 +101,21 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
// TODO fit to parent
this.mainCanvasStage = new Konva.Stage({
container: 'canvas-container',
- width: 800,
- height: 500
+ width: this.canvasWidth,
+ height: this.canvasHeight
});
this.registerEventHandler();
+ window.addEventListener('resize', this.fitStageIntoParentContainer);
}
+ fitStageIntoParentContainer() {
+ this.mainCanvasStage.width(500);
+ this.mainCanvasStage.height(500 * this.scale);
+ this.mainCanvasStage.scale({ x: this.scale, y: this.scale });
+ this.mainCanvasStage.draw();
+ }
+
loadImage(src) {
this.isDrawing.emit(true);
this.isDrawingVar = true;
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
index 6f29f71..399b165 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
@@ -21,7 +21,9 @@
<div fxLayout="row" fxLayoutAlign="space-around start">
<div fxLayout="column" fxLayoutAlign="space-between " >
<sp-image-container *ngIf="imagesRoutes.length > 0"
- [imageSrc]="imagesRoutes[imagesIndex]">
+ [imageSrc]="imagesRoutes[imagesIndex]"
+ [canvasWidth]="canvasWidth"
+ [canvasHeight]="canvasHeight">
</sp-image-container>
</div>
</div>
@@ -31,6 +33,7 @@
[imagesRoutes]="imagesRoutes"
[selectedIndex]="imagesIndex"
[enableShortCuts]="true"
+ [imagePreviewHeight]="imagePreviewHeight"
(indexChange)="handleImageIndexChange($event)">
</sp-image-bar>
</div>
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
index e8d99c3..0a279b9 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
@@ -28,6 +28,16 @@ export class ImageViewerComponent {
@Input()
public imagesRoutes;
+ @Input()
+ public canvasHeight = 500;
+
+ @Input()
+ public canvasWidth = 800;
+
+ @Input()
+ public imagePreviewHeight = 65;
+
+
public imagesIndex = 0;
constructor() {}
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
index a2061e5..059ad95 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
@@ -29,6 +29,11 @@
<div class="widget-inner-content">
<sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
<sp-no-data-in-date-range *ngIf="imagesRoutes.length === 0" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
- <sp-image-viewer *ngIf="imagesRoutes.length > 0" [imagesRoutes]="imagesRoutes"></sp-image-viewer>
+ <sp-image-viewer *ngIf="imagesRoutes.length > 0"
+ [imagesRoutes]="imagesRoutes"
+ [canvasHeight]="canvasHeight"
+ [canvasWidth]="canvasWidth"
+ [imagePreviewHeight]="imagePreviewHeight"
+ ></sp-image-viewer>
</div>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
index 033fa88..ccf2423 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
@@ -36,6 +36,10 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget implements OnIn
availableColumns: EventPropertyUnion[];
selectedColumn: EventPropertyUnion;
+ canvasHeight;
+ canvasWidth;
+ imagePreviewHeight;
+
public imagesRoutes = [];
constructor(
@@ -45,6 +49,10 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget implements OnIn
}
ngOnInit(): void {
+ this.canvasHeight = this.gridsterItemComponent.height - 240;
+ this.canvasWidth = this.gridsterItemComponent.width - 20;
+ this.imagePreviewHeight = this.gridsterItemComponent.width / 14;
+
this.availableColumns = this.getImageProperties(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
this.selectedColumn = this.availableColumns[0];
this.updateData();