Various Flo fixes. Flo 0.8.4

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.1",
+    "spring-flo": "0.8.4",
     "ng-busy": "1.4.4",
     "rxjs-compat": "6.2.1",
     "uuid": "3.3.2"
@@ -64,6 +64,10 @@
     "@types/jasminewd2": "2.0.3",
     "@types/node": "8.9.5",
     "@types/uuid": "3.4.3",
+    "@types/backbone": "1.3.43",
+    "@types/codemirror": "0.0.60",
+    "@types/jquery": "3.3.6",
+    "@types/lodash": "4.14.116",
     "codelyzer": "4.2.1",
     "jasmine-core": "2.99.1",
     "jasmine-spec-reporter": "4.2.1",

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

@@ -1,10 +1,11 @@
 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) {
+joint.connectors.smoothHorizontal = function (sourcePoint, targetPoint, route, opt) {
 
   const raw = opt && opt.raw;
   let path;
@@ -38,7 +39,7 @@ joint.connectors.smoothHorizontal = function(sourcePoint, targetPoint, route, op
   return (raw) ? path : path.serialize();
 };
 
-joint.connectors.smoothVertical = function(sourcePoint, targetPoint, route, opt) {
+joint.connectors.smoothVertical = function (sourcePoint, targetPoint, route, opt) {
 
   const raw = opt && opt.raw;
   let path;
@@ -72,10 +73,10 @@ joint.connectors.smoothVertical = function(sourcePoint, targetPoint, route, opt)
   return (raw) ? path : path.serialize();
 };
 
-export function centerGraphHorizontallyOnPaper(paper: dia.Paper) {
+export function shiftGraphHorizontallyOnPaper(paper: dia.Paper, offset: number) {
   const currentTranslate = paper.translate();
   const box = /*V(paper.viewport).getBBox()*/paper.getContentBBox();
-  const tx = (paper.$el.innerWidth() - box.width) / 2;
+  const tx = offset > 0 && offset <= 1 ? (paper.$el.innerWidth() - box.width) * offset : offset;
   paper.translate(tx, currentTranslate.ty);
 }
 

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

@@ -9,7 +9,7 @@
 
   <div id="flo-container" class="stream-editor" dataflowLayoutType type="full">
     <flo-editor (floApi)="setEditorContext($event)" [metamodel]="metamodelService" [renderer]="renderService"
-                [editor]="editorService" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="20"
+                [editor]="editorService" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="55"
                 (contentValidated)="contentValidated=$event" (validationMarkers)="validationMarkers = $event">
 
       <div class="flow-definition-container">

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

@@ -1,7 +1,7 @@
 import { dia } from 'jointjs';
 import { IMAGE_H, START_NODE_TYPE, END_NODE_TYPE, CONTROL_GROUP_TYPE } from './shapes';
 import * as dagre from 'dagre';
-import { centerGraphHorizontallyOnPaper } from '../../../../shared/flo/support/shared-shapes';
+import { shiftGraphHorizontallyOnPaper } from '../../../../shared/flo/support/shared-shapes';
 import { Flo } from 'spring-flo';
 
 export function layout(paper: dia.Paper) {
@@ -68,7 +68,7 @@ export function layout(paper: dia.Paper) {
 export function arrangeAll(editorContext: Flo.EditorContext): Promise<void> {
   return editorContext.performLayout().then(() => {
     editorContext.fitToPage();
-    centerGraphHorizontallyOnPaper(editorContext.getPaper());
+    shiftGraphHorizontallyOnPaper(editorContext.getPaper(), 1 / 5);
   });
 }
 

ui/src/app/tasks/task-definition-create/task-definition-create.component.html

@@ -9,7 +9,7 @@
 
   <div id="flo-container" class="stream-editor" [ngBusy]="busy">
     <flo-editor (floApi)="setEditorContext($event)" [metamodel]="metamodelService" [renderer]="renderService"
-                [editor]="editorService" [paletteSize]="paletteSize" [paperPadding]="20" [(dsl)]="dsl"
+                [editor]="editorService" [paletteSize]="paletteSize" [paperPadding]="55" [(dsl)]="dsl"
                 (contentValidated)="contentValidated=$event" (validationMarkers)="validationMarkers = $event">
 
       <div class="flow-definition-container">