You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/03/09 21:50:03 UTC
[incubator-streampipes] 01/06: [STREAMPIPES-304] Restrict pipeline
canvas to 100% remaining height, add maximize feature
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 8e5074ef46fbd53dc6a0cc4b480c4905021a662f
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Feb 25 23:06:52 2021 +0100
[STREAMPIPES-304] Restrict pipeline canvas to 100% remaining height, add maximize feature
---
ui/package.json | 2 +-
.../pipeline-assembly.component.html | 40 +++++++++++++---------
.../pipeline-assembly.component.scss | 37 +++++++++++++++++++-
.../pipeline-assembly.component.ts | 32 ++++++++++-------
ui/src/app/editor/editor.component.html | 37 ++++++++++----------
ui/src/app/editor/editor.component.scss | 6 +++-
ui/src/app/editor/editor.component.ts | 12 +++----
ui/src/scss/main.scss | 3 +-
ui/src/scss/sp/main.scss | 25 --------------
9 files changed, 112 insertions(+), 82 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index af7ae1f..ad82c27 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -65,7 +65,7 @@
"konva": "3.2.4",
"leaflet": "1.6.0",
"lodash": "4.17.20",
- "material-design-icons": "3.0.1",
+ "material-icons": "^0.5.3",
"ng-file-upload": "9.0.13",
"ng-pick-datetime": "7.0.0",
"ng-prettyjson": "0.1.8",
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
index 6fe56a1..f2424b9 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
@@ -16,38 +16,37 @@
~
-->
-<div>
- <div class="assemblyOptions sp-blue-bg">
+<div fxFlex="100" fxLayout="column">
+ <div class="pipeline-assembly-options sp-blue-bg">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
<button mat-button matTooltip="Save Pipeline" [matTooltipPosition]="'above'"
- style="display:flex;align-items:center;" class="settings-bar-icon-button"
+ style="display:flex;align-items:center;"
[disabled]="!PipelineValidationService.pipelineValid"
(click)="submit()" type="submit">
<mat-icon>save</mat-icon> <span>Save pipeline</span>
</button>
- <button mat-button matTooltip="Pan" [matTooltipPosition]="'above'"
- class="settings-bar-icon-button"
+ <button mat-button mat-icon-button matTooltip="Pan" [matTooltipPosition]="'above'"
[disabled]="!selectMode"
(click)="toggleSelectMode()">
<i class="material-icons">open_with</i>
</button>
- <button mat-button matTooltip="Select" [matTooltipPosition]="'above'"
- class="settings-bar-icon-button" [disabled]="selectMode"
+ <button mat-button mat-icon-button matTooltip="Select" [matTooltipPosition]="'above'"
+ [disabled]="selectMode"
(click)="toggleSelectMode()">
<i class="material-icons">mode_edit</i>
</button>
- <button mat-button matTooltip="Zoom In" [matTooltipPosition]="'above'"
- class="settings-bar-icon-button" [disabled]="currentZoomLevel == 1"
+ <button mat-button mat-icon-button matTooltip="Zoom In" [matTooltipPosition]="'above'"
+ [disabled]="currentZoomLevel == 1"
(click)="zoomIn()">
<i class="material-icons">zoom_in</i>
</button>
- <button mat-button matTooltip="Zoom Out" [matTooltipPosition]="'above'"
- class="settings-bar-icon-button" [disabled]="currentZoomLevel == 0.5"
+ <button mat-button mat-icon-button matTooltip="Zoom Out" [matTooltipPosition]="'above'"
+ [disabled]="currentZoomLevel == 0.5"
(click)="zoomOut()">
<i class="material-icons">zoom_out</i>
</button>
- <button mat-button matTooltip="Auto Layout" [matTooltipPosition]="'above'"
- class="settings-bar-icon-button" (click)="autoLayout()">
+ <button mat-button mat-icon-button matTooltip="Auto Layout" [matTooltipPosition]="'above'"
+ (click)="autoLayout()">
<i class="material-icons">settings_overscan</i>
</button>
<div fxLayout="column" fxLayoutAlign="start center" class="pipeline-cache-block">
@@ -88,8 +87,17 @@
</div>
</div>
</div>
- <button mat-button matTooltip="Clear Assembly Area" [matTooltipPosition]="'above'" [disabled]="EditorService.pipelineAssemblyEmpty"
- class="md-icon-button" (click)="showClearAssemblyConfirmDialog($event)">
+ <button mat-button mat-icon-button
+ [matTooltip]="pipelineCanvasMaximized ? 'Minimize' : 'Maximize'"
+ [matTooltipPosition]="'above'"
+ (click)="toggleCanvasMaximized()">
+ <i class="material-icons" *ngIf="!pipelineCanvasMaximized">open_in_full</i>
+ <i class="material-icons" *ngIf="pipelineCanvasMaximized">close_fullscreen</i>
+ </button>
+ <button mat-button mat-icon-button matTooltip="Clear Assembly Area"
+ [matTooltipPosition]="'above'"
+ [disabled]="EditorService.pipelineAssemblyEmpty"
+ (click)="showClearAssemblyConfirmDialog($event)">
<i class="material-icons">clear</i>
</button>
</div>
@@ -108,4 +116,4 @@
></pipeline>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
index ea90e47..d252c0d 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
@@ -27,4 +27,39 @@
.pipeline-cache-block {
height: 100%;
margin-left:15px;
-}
\ No newline at end of file
+}
+
+.outerAssembly {
+ position: relative;
+ left: 0px;
+ top: 0px;
+ overflow: visible;
+ //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+ padding: 5px;
+ height: 100%;
+ flex: 1;
+ width: 100%;
+}
+
+.pipeline-canvas-outer {
+ flex: 1;
+}
+
+.canvas {
+ overflow: visible;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ height: 300%;
+ width: 300%;
+ z-index: 0;
+ margin: -1px;
+
+ background-color: white;
+ background-image: linear-gradient(90deg, rgba(208, 208, 208, .5) 10%, transparent 0%), linear-gradient(rgba(208, 208, 208, .5) 10%, transparent 0%);
+ background-size: 15px 15px;
+}
+
+.pipeline-assembly-options {
+ color: white;
+}
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
index be84a50..6979f0e 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -16,7 +16,7 @@
*
*/
-import {Component, Input, NgZone, OnInit,} from "@angular/core";
+import {Component, EventEmitter, Input, NgZone, OnInit, Output,} from "@angular/core";
import {JsplumbBridge} from "../../services/jsplumb-bridge.service";
import {PipelinePositioningService} from "../../services/pipeline-positioning.service";
import {PipelineValidationService} from "../../services/pipeline-validation.service";
@@ -40,17 +40,8 @@ import {PipelineService} from "../../../platform-services/apis/pipeline.service"
})
export class PipelineAssemblyComponent implements OnInit {
- PipelineEditorService: any;
- DialogBuilder: any;
- currentMouseOverElement: any;
- currentZoomLevel: any;
- preview: any;
-
@Input()
rawPipelineModel: PipelineElementConfig[];
- selectMode: any;
- currentPipelineName: any;
- currentPipelineDescription: any;
@Input()
currentModifiedPipelineId: any;
@@ -58,6 +49,19 @@ export class PipelineAssemblyComponent implements OnInit {
@Input()
allElements: PipelineElementUnion[];
+ @Output()
+ pipelineCanvasMaximizedEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+ pipelineCanvasMaximized: boolean = false;
+
+ currentMouseOverElement: any;
+ currentZoomLevel: any;
+ preview: any;
+
+ selectMode: any;
+ currentPipelineName: any;
+ currentPipelineDescription: any;
+
errorMessagesDisplayed: any = false;
pipelineValid: boolean = false;
@@ -65,7 +69,6 @@ export class PipelineAssemblyComponent implements OnInit {
pipelineCacheRunning: boolean = false;
pipelineCached: boolean = false;
-
constructor(private JsplumbBridge: JsplumbBridge,
private PipelinePositioningService: PipelinePositioningService,
private ObjectProvider: ObjectProvider,
@@ -241,4 +244,9 @@ export class PipelineAssemblyComponent implements OnInit {
return this.rawPipelineModel.length === 0 || this.rawPipelineModel.every(pe => pe.settings.disabled);
}
-}
\ No newline at end of file
+ toggleCanvasMaximized() {
+ this.pipelineCanvasMaximized = !(this.pipelineCanvasMaximized);
+ this.pipelineCanvasMaximizedEmitter.emit(this.pipelineCanvasMaximized);
+ }
+
+}
diff --git a/ui/src/app/editor/editor.component.html b/ui/src/app/editor/editor.component.html
index 9653198..5d47715 100644
--- a/ui/src/app/editor/editor.component.html
+++ b/ui/src/app/editor/editor.component.html
@@ -17,29 +17,22 @@
-->
<div fxLayout="column" class="page-container">
- <div fxLayout="row" class="border" style="padding:0px;background-color:#f6f6f6;">
+ <div fxLayout="row" class="border" style="padding:0px;background-color:#f6f6f6;" *ngIf="!pipelineCanvasMaximized">
<div fxFlex="100" style="line-height:24px;border-bottom:1px solid #ccc">
<div fxFlex="100" fxLayout="row">
<div fxFlex fxLayoutAlign="start center" [attr.id]="'peType'">
- <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectPipelineElements($event)">
+ <mat-tab-group [selectedIndex]="selectedIndex"
+ (selectedIndexChange)="selectPipelineElements($event)">
<mat-tab *ngFor="let tab of tabs" label="{{tab.title}}"></mat-tab>
</mat-tab-group>
</div>
- <div fxFlex="30" fxLayout="row" fxLayoutAlign="end center"
- style="padding-left:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc">
- <button mat-button class="md-icon-button" (click)="startCreatePipelineTour()" [matTooltip]="'Tutorial'">
+ <div fxFlex="30" fxLayout="row" fxLayoutAlign="end center" style="padding-left:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc">
+ <button mat-button mat-icon-button (click)="startCreatePipelineTour()"
+ [matTooltip]="'Tutorial'" style="margin-right: 5px;">
<i class="material-icons text-color">
school
</i>
</button>
- <button mat-button class="md-icon-button" *ngIf="!minimizedEditorStand"
- (click)="toggleEditorStand()" [matTooltip]="'Hide'">
- <i class="material-icons text-color">arrow_drop_up</i>
- </button>
- <button mat-button class="md-icon-button" *ngIf="minimizedEditorStand"
- (click)="toggleEditorStand()" [matTooltip]="'Show'">
- <i class="material-icons text-color">arrow_drop_down</i>
- </button>
</div>
</div>
</div>
@@ -47,13 +40,19 @@
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
<div id="shepherd-test"
- style="background-color:#f6f6f6;padding:0px;border-bottom:1px solid #ffffff" [hidden]="minimizedEditorStand">
- <pipeline-element-icon-stand [activeType]="activeType"
- [currentElements]="currentElements"
- *ngIf="allElementsLoaded">
+ style="background-color:#f6f6f6;padding:0px;border-bottom:1px solid #ffffff">
+ <pipeline-element-icon-stand
+ class="icon-stand-margin"
+ [activeType]="activeType"
+ [currentElements]="currentElements"
+ *ngIf="allElementsLoaded && !pipelineCanvasMaximized">
</pipeline-element-icon-stand>
</div>
- <pipeline-assembly [rawPipelineModel]="rawPipelineModel" [allElements]="allElements"
- [currentModifiedPipelineId]="currentModifiedPipelineId"></pipeline-assembly>
+ <pipeline-assembly fxFlex="1"
+ [rawPipelineModel]="rawPipelineModel"
+ [allElements]="allElements"
+ [currentModifiedPipelineId]="currentModifiedPipelineId"
+ (pipelineCanvasMaximizedEmitter)="togglePipelineCanvasMode($event)">
+ </pipeline-assembly>
</div>
</div>
diff --git a/ui/src/app/editor/editor.component.scss b/ui/src/app/editor/editor.component.scss
index 6c14207..8aeccf2 100644
--- a/ui/src/app/editor/editor.component.scss
+++ b/ui/src/app/editor/editor.component.scss
@@ -28,4 +28,8 @@
.border {
border: 1px solid #cccccc;
-}
\ No newline at end of file
+}
+
+.icon-stand-margin {
+ margin-bottom: 10px;
+}
diff --git a/ui/src/app/editor/editor.component.ts b/ui/src/app/editor/editor.component.ts
index 7d44d3f..f281b24 100644
--- a/ui/src/app/editor/editor.component.ts
+++ b/ui/src/app/editor/editor.component.ts
@@ -66,13 +66,13 @@ export class EditorComponent implements OnInit {
elementsLoaded = [false, false, false];
allElementsLoaded: boolean = false;
- minimizedEditorStand: boolean = false;
-
requiredStreamForTutorialAppId: any = "org.apache.streampipes.sources.simulator.flowrate1";
requiredProcessorForTutorialAppId: any = "org.apache.streampipes.processors.filters.jvm.numericalfilter";
requiredSinkForTutorialAppId: any = "org.apache.streampipes.sinks.internal.jvm.dashboard";
missingElementsForTutorial: any = [];
+ pipelineCanvasMaximized: boolean = false;
+
isTutorialOpen: boolean = false;
tabs: TabsModel[] = [
@@ -188,10 +188,6 @@ export class EditorComponent implements OnInit {
this.shepherdService.trigger("select-" +this.activeShorthand);
}
- toggleEditorStand() {
- this.minimizedEditorStand = !this.minimizedEditorStand;
- }
-
startCreatePipelineTour() {
if (this.requiredPipelineElementsForTourPresent()) {
this.shepherdService.startCreatePipelineTour();
@@ -243,4 +239,8 @@ export class EditorComponent implements OnInit {
return el.appId === appId;
});
}
+
+ togglePipelineCanvasMode(maximize: boolean) {
+ this.pipelineCanvasMaximized = maximize;
+ }
}
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index b922b95..3c96525 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -31,7 +31,8 @@
@import '~shepherd.js/dist/css/shepherd-theme-default.css';
@import "~ng-pick-datetime/assets/style/picker.min.css";
@import '~leaflet/dist/leaflet.css';
-@import '~material-design-icons/iconfont/material-icons.css';
+@import '~material-icons/iconfont/material-icons.css';
+//@import '~material-design-icons/iconfont/material-icons.css';
@import '~quill/dist/quill.snow.css';
@import '~swagger-ui/dist/swagger-ui.css';
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 945aa26..4185bdb 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -886,17 +886,6 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
/* margin-top: 1%; */
}
-.outerAssembly {
- position: relative;
- left: 0px;
- top: 0px;
- overflow: visible;
- //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
- padding: 5px;
- height: 80vh;
- width: 100%;
-}
-
.outer-assembly-preview {
position: relative;
overflow: auto;
@@ -911,21 +900,7 @@ md-select.md-default-theme .md-select-value.md-select-placeholder, md-select .md
background-size: 15px 15px;
}
-.canvas {
- overflow: visible;
- position: absolute;
- left: 0px;
- top: 0px;
- height: 300%;
- width: 300%;
- z-index: 0;
- margin: -1px;
- background-color: white;
- background-image: linear-gradient(90deg, rgba(208, 208, 208, .5) 10%, transparent 0%), linear-gradient(rgba(208, 208, 208, .5) 10%, transparent 0%);
- background-size: 15px 15px;
-
-}
.canvas-preview-inner {
position: relative;