gh-865 Specialize "smooth" connectors for horizontal and vertical

* Make adjustments to fitToPage() and layout

Author: BoykoAlex

ui/package.json

@@ -49,7 +49,7 @@
     "web-animations-js": "2.3.1",
     "stompjs": "2.3.3",
     "jshint": "2.9.5",
-    "spring-flo": "0.8.0",
+    "spring-flo": "git://github.com/spring-projects/spring-flo#bc0eeb08c0e5121cd62bf2759009f54fe8317379",
     "ng-busy": "1.4.4",
     "rxjs-compat": "^6.2.1",
     "uuid": "3.3.2"

ui/src/app/shared/flo/support/shared-shapes.ts

@@ -0,0 +1,82 @@
+import { dia } from 'jointjs';
+import * as _joint from 'jointjs';
+const joint: any = _joint;
+const g = joint.g;
+const V = joint.V;
+
+joint.connectors.smoothHorizontal = function(sourcePoint, targetPoint, route, opt) {
+
+  const raw = opt && opt.raw;
+  let path;
+
+  if (route && route.length !== 0) {
+
+    const points = [sourcePoint].concat(route).concat([targetPoint]);
+    const curves = g.Curve.throughPoints(points);
+
+    path = new g.Path(curves);
+
+  } else {
+    // if we have no route, use a default cubic bezier curve
+    // cubic bezier requires two control points
+    // the control points have `x` midway between source and target
+    // this produces an S-like curve
+
+    path = new g.Path();
+
+    let segment;
+
+    segment = g.Path.createSegment('M', sourcePoint);
+    path.appendSegment(segment);
+
+    const controlPointX = (sourcePoint.x + targetPoint.x) / 2;
+
+    segment = g.Path.createSegment('C', controlPointX, sourcePoint.y, controlPointX, targetPoint.y, targetPoint.x, targetPoint.y);
+    path.appendSegment(segment);
+  }
+
+  return (raw) ? path : path.serialize();
+};
+
+joint.connectors.smoothVertical = function(sourcePoint, targetPoint, route, opt) {
+
+  const raw = opt && opt.raw;
+  let path;
+
+  if (route && route.length !== 0) {
+
+    const points = [sourcePoint].concat(route).concat([targetPoint]);
+    const curves = g.Curve.throughPoints(points);
+
+    path = new g.Path(curves);
+
+  } else {
+    // if we have no route, use a default cubic bezier curve
+    // cubic bezier requires two control points
+    // the control points have `x` midway between source and target
+    // this produces an S-like curve
+
+    path = new g.Path();
+
+    let segment;
+
+    segment = g.Path.createSegment('M', sourcePoint);
+    path.appendSegment(segment);
+
+    const controlPointY = (sourcePoint.y + targetPoint.y) / 2;
+
+    segment = g.Path.createSegment('C', sourcePoint.x, controlPointY, targetPoint.x, controlPointY, targetPoint.x, targetPoint.y);
+    path.appendSegment(segment);
+  }
+
+  return (raw) ? path : path.serialize();
+};
+
+export function centerGraphHorizontallyOnPaper(paper: dia.Paper) {
+  const currentTranslate = paper.translate();
+  const box = /*V(paper.viewport).getBBox()*/paper.getContentBBox();
+  const tx = (paper.$el.innerWidth() - box.width) / 2;
+  paper.translate(tx, currentTranslate.ty);
+}
+
+

ui/src/app/streams/components/flo/render.service.ts

@@ -58,7 +58,7 @@ export class RenderService implements Flo.Renderer {
   }
 
   initializeNewLink(link: dia.Link, viewerDescriptor: Flo.ViewerDescriptor) {
-    link.set('smooth', true);
+    link.set('connector/name', 'smoothHorizontal');
     link.attr('metadata/metadata/unselectable', true);
   }
 

ui/src/app/streams/components/flo/support/layout.ts

@@ -7,7 +7,7 @@ export function layout(paper: dia.Paper) {
 
     let gridSize = paper.options.gridSize;
     if (gridSize <= 1) {
-        gridSize = IMAGE_H;
+        gridSize = IMAGE_H / 2;
     }
 
     const g = new dagre.graphlib.Graph();
@@ -25,8 +25,6 @@ export function layout(paper: dia.Paper) {
     });
 
     g.graph().rankdir = 'LR';
-    g.graph().marginx = gridSize;
-    g.graph().marginy = gridSize;
     g.graph().nodesep = 2 * gridSize;
     g.graph().ranksep = 2 * gridSize;
     g.graph().edgesep = gridSize;

ui/src/app/streams/components/flo/support/shapes.ts

@@ -3,6 +3,7 @@ const joint: any = _joint;
 
 // Load changes into joint object
 import 'spring-flo';
+import '../../../../shared/flo/support/shared-shapes';
 
 export const IMAGE_W = 120;
 export const IMAGE_H = 40;
@@ -221,8 +222,10 @@ joint.shapes.flo.LinkDataflow = joint.dia.Link.extend({
         options: {
             linkToolsOffset: 1000,
         },
-        smooth: true,
-//             router: { name: 'metro' },
+        connector: {
+          name: 'smoothHorizontal'
+        },
+//      router: { name: 'metro' },
         attrs: {
             '.connection': { stroke: '#34302d', 'stroke-width': 2 },
             '.connection-wrap': { display: 'none' },
@@ -269,3 +272,5 @@ joint.shapes.flo.InstanceDot = joint.shapes.basic.Generic.extend({
 
 
 
+
+

ui/src/app/streams/components/stream-graph-definition/stream-graph-definition.component.html

@@ -1 +1 @@
-<app-graph-view [dsl]="dsl" [ngClass]="status ? status : 'undeployed'" (floApi)="setEditorContext($event)" [metamodel]="metamodel" [renderer]="renderer"></app-graph-view>
+<app-graph-view [dsl]="dsl" [ngClass]="status ? status : 'undeployed'" (floApi)="setEditorContext($event)" [metamodel]="metamodel" [renderer]="renderer" [paperPadding]="40"></app-graph-view>

ui/src/app/streams/stream-create/stream-create.component.html

@@ -9,7 +9,7 @@ <h1 class="no-user-selection">Create a stream</h1>
 
   <div id="flo-container" class="stream-editor">
     <flo-editor (floApi)="setEditorContext($event)" [metamodel]="metamodelService" [renderer]="renderService"
-                [editor]="editorService" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="20"
+                [editor]="editorService" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="40"
                 (contentValidated)="contentValidated=$event" (validationMarkers)="validationMarkers = $event">
 
       <button (click)="createStreamDefs()" class="btn btn-default" type="button" [disabled]="isCreateStreamsDisabled">Create Stream</button>

ui/src/app/streams/stream/graph/stream-graph.component.html

@@ -1,6 +1,6 @@
 <div>
 
-  <app-graph-view [dsl]="dsl" [paperPadding]="20" class="stream-details"
+  <app-graph-view [dsl]="dsl" [paperPadding]="40" class="stream-details"
                   [metamodel]="metamodelService"
                   [renderer]="renderService">
   </app-graph-view>

ui/src/app/tasks/components/flo/editor.service.ts

@@ -7,6 +7,7 @@ import * as _joint from 'jointjs';
 import { TaskPropertiesDialogComponent } from './properties/task-properties-dialog-component';
 import { TaskGraphPropertiesSource } from './properties/task-properties-source';
 import { Utils} from '../../../shared/flo/support/utils';
+import { arrangeAll } from './support/layout';
 
 const joint: any = _joint;
 
@@ -75,7 +76,7 @@ export class EditorService implements Flo.Editor {
     editorContext.getGraph().clear();
     editorContext.createNode(data.get(CONTROL_GROUP_TYPE).get(START_NODE_TYPE));
     editorContext.createNode(data.get(CONTROL_GROUP_TYPE).get(END_NODE_TYPE));
-    editorContext.performLayout();
+    arrangeAll(editorContext);
   }
 
   validateLink(flo: Flo.EditorContext, cellViewS: dia.ElementView, magnetS: SVGElement, cellViewT: dia.ElementView,

ui/src/app/tasks/components/flo/metamodel.service.ts

@@ -9,6 +9,7 @@ import { AppMetadata } from '../../../shared/flo/support/app-metadata';
 
 import * as _joint from 'jointjs';
 import { LoggerService } from '../../../shared/services/logger.service';
+import { arrangeAll } from './support/layout';
 
 const joint: any = _joint;
 
@@ -302,16 +303,7 @@ export class MetamodelService implements Flo.Metamodel {
     flo.performLayout();
 
     // Graph is empty? Ensure there are at least start and end nodes created!
-    const promise = nodesIndex.length ? flo.performLayout() : flo.clearGraph();
-
-    if (promise && promise.then && promise.then.call) {
-      promise.then(function () {
-        flo.fitToPage();
-      });
-    } else {
-      flo.fitToPage();
-    }
-
+    nodesIndex.length ? arrangeAll(flo) : flo.clearGraph();
   }
 
   clearCachedData() {