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:06 UTC
[incubator-streampipes] 04/06: [STREAMPIPES-304] Improve pan
behaviour
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 8c0fc103a7ea627661e4bf85745460696e6635aa
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Mar 9 21:59:01 2021 +0100
[STREAMPIPES-304] Improve pan behaviour
---
.../pipeline-assembly.component.html | 4 +-
.../pipeline-assembly.component.ts | 51 +++++++++-------------
.../components/pipeline/pipeline.component.ts | 20 +--------
ui/src/app/editor/services/jsplumb.service.ts | 23 +++++-----
4 files changed, 36 insertions(+), 62 deletions(-)
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 bb088c6..ce6c419 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
@@ -93,7 +93,7 @@
</div>
</div>
<div id="outerAssemblyArea" class="outerAssembly sp-blue-border-nopadding">
- <div class="pipeline-canvas-outer">
+ <div class="pipeline-canvas-outer" #outerCanvas>
<div class="pan-control">
<div class="pan-zoom-control-buttons">
<div class="pan-zoom-button pan-left" (click)="panLeft()">
@@ -124,7 +124,7 @@
</div>
</div>
</div>
- <div id="assembly" class="canvas">
+ <div id="assembly" class="canvas" #assembly>
<pipeline [pipelineValid]="pipelineValid"
[canvasId]="'assembly'"
[rawPipelineModel]="rawPipelineModel"
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 9ce6213..385d5c3 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
@@ -43,6 +43,7 @@ import {PipelineService} from "../../../platform-services/apis/pipeline.service"
import {PipelineCanvasScrollingService} from "../../services/pipeline-canvas-scrolling.service";
import {JsplumbFactoryService} from "../../services/jsplumb-factory.service";
import Panzoom, {PanzoomObject} from "@panzoom/panzoom";
+import {PipelineElementDraggedService} from "../../services/pipeline-element-dragged.service";
@Component({
@@ -84,7 +85,7 @@ export class PipelineAssemblyComponent implements OnInit {
pipelineCached: boolean = false;
config: any = {};
- @ViewChild("assembly") pipelineCanvas: ElementRef;
+ @ViewChild("outerCanvas") pipelineCanvas: ElementRef;
panzoom: PanzoomObject;
constructor(private JsPlumbFactoryService: JsplumbFactoryService,
@@ -98,11 +99,10 @@ export class PipelineAssemblyComponent implements OnInit {
private dialogService: DialogService,
private dialog: MatDialog,
private ngZone: NgZone,
- private pipelineCanvasScrollingService: PipelineCanvasScrollingService) {
+ private pipelineElementDraggedService: PipelineElementDraggedService) {
this.selectMode = true;
this.currentZoomLevel = 1;
-
}
ngOnInit(): void {
@@ -112,15 +112,24 @@ export class PipelineAssemblyComponent implements OnInit {
} else {
this.checkAndDisplayCachedPipeline();
}
- this.pipelineCanvasScrollingService.canvasScrollYSubject.subscribe(position => {
- console.log("scrolling to" + position);
- console.log(this.pipelineCanvas.nativeElement.scrollHeight);
- console.log(this.pipelineCanvas.nativeElement.scrollTop);
- this.pipelineCanvas.nativeElement.scrollTop = this.pipelineCanvas.nativeElement.scrollHeight;
+ this.pipelineElementDraggedService.pipelineElementMovedSubject.subscribe(position => {
+ let offsetHeight = this.pipelineCanvas.nativeElement.offsetHeight;
+ let offsetWidth = this.pipelineCanvas.nativeElement.offsetWidth;
+ let currentPan = this.panzoom.getPan();
+ let xOffset = 0;
+ let yOffset = 0;
+ if ((position.y + currentPan.y) > (offsetHeight - 100)) {
+ yOffset = -10;
+ }
+ if ((position.x + currentPan.x) > (offsetWidth - 100)) {
+ xOffset = -10;
+ }
+ if (xOffset < 0 || yOffset < 0) {
+ this.pan(xOffset, yOffset);
+ }
});
}
-
ngAfterViewInit() {
const elem = document.getElementById('assembly')
this.panzoom = Panzoom(elem, {
@@ -129,26 +138,6 @@ export class PipelineAssemblyComponent implements OnInit {
canvas: true,
contain: "outside"
})
- //panzoom.pan(10, 10)
- //panzoom.zoom(2, { animate: true })
- // ($("#assembly") as any).panzoom({
- // disablePan: false,
- // increment: 0.25,
- // minScale: 0.5,
- // maxScale: 1.5,
- // contain: 'invert',
- // excludeClass: "jtk-managed"
- // });
- //
- // $("#assembly").on('panzoomzoom', (e, panzoom, scale) => {
- // this.currentZoomLevel = scale;
- // this.JsplumbBridge.setZoom(scale);
- // this.JsplumbBridge.repaintEverything();
- // });
- //
- // $("#assembly").on('panzoompan', (e, panzoom, scale) => {
- // console.log(e);
- // });
}
autoLayout() {
@@ -231,7 +220,7 @@ export class PipelineAssemblyComponent implements OnInit {
pipeline._id = this.currentModifiedPipelineId;
}
- const dialogRef = this.dialogService.open(SavePipelineComponent,{
+ this.dialogService.open(SavePipelineComponent,{
panelType: PanelType.SLIDE_IN_PANEL,
title: "Save pipeline",
data: {
@@ -310,7 +299,7 @@ export class PipelineAssemblyComponent implements OnInit {
let currentPan = this.panzoom.getPan();
let panX = Math.min(0, currentPan.x + xOffset);
let panY = Math.min(0, currentPan.y + yOffset);
- let values = this.panzoom.pan(panX, panY);
+ this.panzoom.pan(panX, panY);
}
panAbsolute(x: number, y: number) {
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index a4a3a34..22ad8c0 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -104,8 +104,6 @@ export class PipelineComponent implements OnInit, OnDestroy {
JsplumbBridge: JsplumbBridge;
- //@ViewChild('outerCanvas') canvasRef: ElementRef;
-
constructor(private JsplumbService: JsplumbService,
private PipelineEditorService: PipelineEditorService,
private JsplumbFactoryService: JsplumbFactoryService,
@@ -115,9 +113,7 @@ export class PipelineComponent implements OnInit, OnDestroy {
private PipelineValidationService: PipelineValidationService,
private dialogService: DialogService,
private dialog: MatDialog,
- private ngZone: NgZone,
- private pipelineElementDraggedService: PipelineElementDraggedService,
- private pipelineCanvasScrollingService: PipelineCanvasScrollingService) {
+ private ngZone: NgZone) {
this.plumbReady = false;
this.currentMouseOverElement = "";
this.currentPipelineModel = new Pipeline();
@@ -127,19 +123,6 @@ export class PipelineComponent implements OnInit, OnDestroy {
}
ngOnInit() {
- // this.pipelineElementDraggedService.pipelineElementMovedSubject.subscribe(position => {
- // console.log(position);
- // console.log(this.canvasHeight);
- // console.log(this.canvasRef.nativeElement.offsetHeight);
- // console.log(this.canvasRef.nativeElement.scrollHeight);
- // if ((position.y + 200) > this.canvasRef.nativeElement.offsetHeight) {
- // this.canvasHeight = this.canvasRef.nativeElement.offsetHeight +10 + "px";
- // this.pipelineCanvasScrollingService.canvasScrollYSubject.next(position.y);
- // }
- // if ((position.x + 200) > this.canvasRef.nativeElement.offsetWidth) {
- // this.canvasWidth = this.canvasRef.nativeElement.offsetWidth + 100 + "px";
- // }
- // });
this.JsplumbBridge = this.JsplumbFactoryService.getJsplumbBridge(this.preview);
this.JsplumbBridge.setContainer(this.canvasId);
this.initAssembly();
@@ -159,7 +142,6 @@ export class PipelineComponent implements OnInit, OnDestroy {
ngOnDestroy() {
this.JsplumbBridge.deleteEveryEndpoint();
this.plumbReady = false;
- //this.pipelineElementDraggedService.pipelineElementMovedSubject.unsubscribe();
}
updateMouseover(elementId) {
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index 4196480..8bdcf2e 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -191,13 +191,7 @@ export class JsplumbService {
preview: boolean) {
let jsplumbBridge = this.getBridge(preview);
if (endpoints) {
- if (!preview) {
- jsplumbBridge.draggable(pipelineElementDomId, {containment: 'parent',
- // drag: (e => {
- // this.pipelineElementDraggedService.notify({x: e.pos[0], y: e.pos[1]});
- // })
- });
- }
+ this.makeDraggableIfNotPreview(pipelineElementDomId, jsplumbBridge, preview);
let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
@@ -223,9 +217,7 @@ export class JsplumbService {
endpoints: boolean,
preview: boolean): string {
let jsplumbBridge = this.getBridge(preview);
- if (!preview) {
- jsplumbBridge.draggable(pipelineElementDomId, {containment: 'parent'});
- }
+ this.makeDraggableIfNotPreview(pipelineElementDomId, jsplumbBridge, preview);
if (endpoints) {
if (pipelineElement.inputStreams.length < 2) { //1 InputNode
@@ -245,4 +237,15 @@ export class JsplumbService {
return this.JsplumbFactory.getJsplumbBridge(previewConfig);
}
+ makeDraggableIfNotPreview(pipelineElementDomId: string,
+ jsplumbBridge: JsplumbBridge,
+ previewConfig: boolean) {
+ if (!previewConfig) {
+ jsplumbBridge.draggable(pipelineElementDomId, {containment: 'parent',
+ drag: (e => {
+ this.pipelineElementDraggedService.notify({x: e.pos[0], y: e.pos[1]});
+ })
+ });
+ }
+ }
}