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/06/10 08:26:19 UTC
[incubator-streampipes] branch dev updated: - image container show
loading spinner and notify child if it's drawing - image labeling does not
allow change image while container is drawing
This is an automated email from the ASF dual-hosted git repository.
tex pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 3c983a9 - image container show loading spinner and notify child if it's drawing - image labeling does not allow change image while container is drawing
new 1fa8cd0 Merge remote-tracking branch 'origin/dev' into dev
3c983a9 is described below
commit 3c983a9d5c4f3c706c4d6c7e819ba110d4df57ad
Author: tex <te...@fzi.de>
AuthorDate: Wed Jun 10 10:25:53 2020 +0200
- image container show loading spinner and notify child if it's drawing
- image labeling does not allow change image while container is drawing
---
.../image-container/image-container.component.html | 1 +
.../image-container/image-container.component.ts | 12 +++++
.../image-labeling/image-labeling.component.html | 3 +-
.../image-labeling/image-labeling.component.ts | 60 ++++++++++++++--------
4 files changed, 53 insertions(+), 23 deletions(-)
diff --git a/ui/src/app/core-ui/image/components/image-container/image-container.component.html b/ui/src/app/core-ui/image/components/image-container/image-container.component.html
index b204c11..0d95415 100644
--- a/ui/src/app/core-ui/image/components/image-container/image-container.component.html
+++ b/ui/src/app/core-ui/image/components/image-container/image-container.component.html
@@ -16,5 +16,6 @@
~
-->
<div class="canvas-container">
+ <mat-spinner *ngIf="isDrawingVar" [diameter]="40" style="position: fixed"></mat-spinner>
<div id="canvas-container" (dblclick)="dblclick($event)"></div>
</div>
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 b1c47c0..e459d0f 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
@@ -47,6 +47,8 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
dbclick: EventEmitter<[Konva.Layer, ICoordinates, ICoordinates]> = new EventEmitter<[Konva.Layer, ICoordinates, ICoordinates]>();
@Output()
mouseDownRight: EventEmitter<[Konva.Layer, ICoordinates, ICoordinates]> = new EventEmitter<[Konva.Layer, ICoordinates, ICoordinates]>();
+ @Output()
+ isDrawing: EventEmitter<boolean> = new EventEmitter<boolean>();
private image;
@@ -68,6 +70,8 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
private isHoverComponent: boolean;
+ private isDrawingVar: boolean;
+
constructor() { }
ngOnInit(): void {
@@ -77,6 +81,7 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
this.isMiddleMouseDown = false;
this.isRightMouseDown = false;
this.isHoverComponent = false;
+ this.isDrawingVar = false;
}
ngAfterViewInit(): void {
@@ -97,6 +102,8 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
}
loadImage(src) {
+ this.isDrawing.emit(true);
+ this.isDrawingVar = true;
this.reset();
this.image = new window.Image();
@@ -179,6 +186,9 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
/* Draw */
redrawAll() {
+ this.isDrawing.emit(true);
+ this.isDrawingVar = true;
+
if (this.drawLayer !== undefined) {
this.drawLayer.destroyChildren();
}
@@ -187,6 +197,8 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
}
this.childRedraw.emit([this.annotationLayer, this.getShift()]);
this.shiftViewContent();
+ this.isDrawing.emit(false);
+ this.isDrawingVar = false;
}
shiftViewContent() {
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
index 18ff8b1..fe8d593 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
@@ -58,7 +58,8 @@
(mouseUpLeft)="handleMouseUpLeft($event[0], $event[1], $event[2], $event[3])"
(shortCut)="handleImageViewShortCuts($event)"
(dbclick)="handleImageViewDBClick($event[0], $event[1], $event[2])"
- (mouseDownRight)="handleMouseDownRight($event[0], $event[1], $event[2])">
+ (mouseDownRight)="handleMouseDownRight($event[0], $event[1], $event[2])"
+ (isDrawing)="handleIsDrawing($event)">
</sp-image-container>
</div>
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
index 2d74f25..8c3238c 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
@@ -47,13 +47,15 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
// images
public imagesSrcs = [];
public imagesIndex: number;
- imageDescription: String;
+ imageDescription: string;
public cocoFiles: CocoFormat[] = [];
public isHoverComponent;
public brushSize: number;
+ public isDrawing: boolean = false;
+
@ViewChild(ImageContainerComponent) imageView: ImageContainerComponent;
@Input() measureName = 'image'; // TODO: Remove default value for production
@@ -286,6 +288,10 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
}
}
+ handleIsDrawing(bool: boolean) {
+ this.isDrawing = bool;
+ }
+
/* sp-image-labels handler */
handleLabelChange(label: {category, label}) {
this.selectedLabel = label;
@@ -293,39 +299,49 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
/* sp-image-bar */
handleImageIndexChange(index) {
- this.save();
- this.imagesIndex = index;
+ if (!this.isDrawing) {
+ this.save();
+ this.imagesIndex = index;
+ }
}
handleImagePageUp(e) {
- this.save();
- this.pageIndex += 1;
- this.setImagesIndexToLast = true;
- this.loadData();
+ if (!this.isDrawing) {
+ this.save();
+ this.pageIndex += 1;
+ this.setImagesIndexToLast = true;
+ this.loadData();
+ }
}
handleImagePageDown(e) {
- this.save();
- if (this.pageIndex - 1 >= 0) {
- this.pageIndex -= 1;
- this.setImagesIndexToFirst = true;
- this.loadData();
+ if (!this.isDrawing) {
+ this.save();
+ if (this.pageIndex - 1 >= 0) {
+ this.pageIndex -= 1;
+ this.setImagesIndexToFirst = true;
+ this.loadData();
+ }
}
}
/* sp-image-annotations handlers */
handleChangeAnnotationLabel(change: [Annotation, string, string]) {
- const coco = this.cocoFiles[this.imagesIndex];
- const categoryId = this.cocoFormatService.getLabelId(coco, change[1], change[2]);
- change[0].category_id = categoryId;
- change[0].category_name = change[2];
- this.imageView.redrawAll();
+ if (!this.isDrawing) {
+ const coco = this.cocoFiles[this.imagesIndex];
+ const categoryId = this.cocoFormatService.getLabelId(coco, change[1], change[2]);
+ change[0].category_id = categoryId;
+ change[0].category_name = change[2];
+ this.imageView.redrawAll();
+ }
}
handleDeleteAnnotation(annotation) {
- if (annotation !== undefined) {
- const coco = this.cocoFiles[this.imagesIndex];
- this.cocoFormatService.removeAnnotation(coco, annotation.id);
- this.imageView.redrawAll();
+ if (!this.isDrawing) {
+ if (annotation !== undefined) {
+ const coco = this.cocoFiles[this.imagesIndex];
+ this.cocoFormatService.removeAnnotation(coco, annotation.id);
+ this.imageView.redrawAll();
+ }
}
}
@@ -342,7 +358,6 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
}
save() {
- // TODO
const coco = this.cocoFiles[this.imagesIndex];
if (coco !== undefined) {
const imageSrcSplitted = this.imagesSrcs[this.imagesIndex].split('/');
@@ -360,4 +375,5 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
});
}
+
}