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:03:38 UTC
[incubator-streampipes] 01/01: fix: wrong property access type
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 aa9dc41b1e3e7228e4836a4a9921adbce4211b69
Author: tex <te...@fzi.de>
AuthorDate: Sat Aug 29 14:03:10 2020 +0200
fix: wrong property access type
---
.../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();