From b584fed1ed201f308bd9a4a6cb9e8f54c824e99d Mon Sep 17 00:00:00 2001
From: BoykoAlex <aboyko@pivotal.io>
Date: Tue, 12 Sep 2017 12:30:32 -0400
Subject: [PATCH] Validation

Validation

Validation

Validation

Validation markers emitter

DSL editor emitter

Validation

Validation

Validation
---
 src/demo/app/app.component.html               |  2 +-
 src/demo/app/app.component.ts                 |  4 +
 src/demo/app/editor.ts                        |  3 +-
 src/demo/app/metamodel.ts                     |  3 +-
 .../src/dsl-editor/dsl.editor.component.ts    |  4 +
 src/lib/src/editor/editor.component.ts        | 79 ++++++-------------
 src/lib/src/shared/flo.common.ts              | 11 +--
 7 files changed, 37 insertions(+), 69 deletions(-)

diff --git a/src/demo/app/app.component.html b/src/demo/app/app.component.html
index 7fe3ec6..662b0df 100644
--- a/src/demo/app/app.component.html
+++ b/src/demo/app/app.component.html
@@ -7,7 +7,7 @@
   Spring Flo Sample
 </div>
 <div id="flo-container">
-  <flo-editor (floApi)="editorContext = $event" [metamodel]="metamodel" [renderer]="renderer" [editor]="editor" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="20">
+  <flo-editor (floApi)="editorContext = $event" [metamodel]="metamodel" [renderer]="renderer" [editor]="editor" [paletteSize]="paletteSize" [(dsl)]="dsl" [paperPadding]="20" (validationMarkers)="markersChanged($event)">
       <div id="controls" class="controls">
         <button class="button" id="clearGraph" (click)="editorContext.clearGraph()">Create New Flow</button>
         <!-- let's use the 'x' control on the nodes themselves when they are selected
diff --git a/src/demo/app/app.component.ts b/src/demo/app/app.component.ts
index b673ebc..64b4cfc 100644
--- a/src/demo/app/app.component.ts
+++ b/src/demo/app/app.component.ts
@@ -34,4 +34,8 @@ export class AppComponent {
   arrangeAll() {
     this.editorContext.performLayout().then(() => this.editorContext.fitToPage());
   }
+
+  markersChanged(markers: Map<string, Array<Flo.Marker>>) {
+    console.log('MARKERS: ' + JSON.stringify(markers));
+  }
 }
diff --git a/src/demo/app/editor.ts b/src/demo/app/editor.ts
index 87b3490..77f8179 100644
--- a/src/demo/app/editor.ts
+++ b/src/demo/app/editor.ts
@@ -191,8 +191,7 @@ export class Editor implements Flo.Editor {
       };
     }
 
-    validate(graph : dia.Graph, parseMarkers?: Array<Flo.ParseMarker>) : Promise<Map<string, Array<Flo.Marker>>> {
-      console.log('VALIDATION');
+    validate(graph : dia.Graph, dsl: string, flo: Flo.EditorContext) : Promise<Map<string, Flo.Marker[]>> {
       return new Promise((resolve, reject) => {
         let allMarkers = new Map<string, Array<Flo.Marker>>();
         graph.getElements().filter(e => e.attr('metadata')).forEach(e => {
diff --git a/src/demo/app/metamodel.ts b/src/demo/app/metamodel.ts
index d0ff073..a5a178a 100644
--- a/src/demo/app/metamodel.ts
+++ b/src/demo/app/metamodel.ts
@@ -124,13 +124,12 @@ export class Metamodel implements Flo.Metamodel {
     this.rawData = metamodelData;
   }
 
-  textToGraph(flo: Flo.EditorContext, dsl : string): Promise<Array<Flo.ParseMarker>> {
+  textToGraph(flo: Flo.EditorContext, dsl : string): Promise<any> {
     console.log('Text -> Graph');
     return this.load().then(metamodel => {
       convertTextToGraph(flo, metamodel, dsl);
       flo.performLayout();
       flo.fitToPage();
-      return [];
     })
   }
 
diff --git a/src/lib/src/dsl-editor/dsl.editor.component.ts b/src/lib/src/dsl-editor/dsl.editor.component.ts
index e26d501..d63cfeb 100644
--- a/src/lib/src/dsl-editor/dsl.editor.component.ts
+++ b/src/lib/src/dsl-editor/dsl.editor.component.ts
@@ -56,6 +56,9 @@ export class DslEditorComponent implements OnInit, OnDestroy {
   @Output()
   private blur = new EventEmitter<void>();
 
+  @Output()
+  private editor = new EventEmitter<CodeMirror.EditorFromTextArea>();
+
   private _dslChangedHandler = () => {
     this._dsl = this.doc.getValue();
     this.dslChange.emit(this._dsl);
@@ -126,6 +129,7 @@ export class DslEditorComponent implements OnInit, OnDestroy {
     this.doc.on('focus', () => this.focus.emit());
     this.doc.on('blur', () => this.blur.emit());
 
+    this.editor.emit(this.doc);
   }
 
   ngOnDestroy() {
diff --git a/src/lib/src/editor/editor.component.ts b/src/lib/src/editor/editor.component.ts
index 3bfc409..4dc88ea 100644
--- a/src/lib/src/editor/editor.component.ts
+++ b/src/lib/src/editor/editor.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, ElementRef, EventEmitter, OnInit, OnDestroy, ViewEncapsulation, OnChanges, SimpleChanges} from '@angular/core';
+import { Component, Input, Output, ElementRef, EventEmitter, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
 import 'rxjs/add/operator/debounceTime';
 import { dia } from 'jointjs';
 import { Flo } from './../shared/flo.common';
@@ -17,16 +17,13 @@ export interface VisibilityState {
   children : Array<VisibilityState>;
 }
 
-const isChrome = true/*!!window.chrome*/;
-const isFF = false/*typeof window.InstallTrigger !== 'undefined'*/;
-
 @Component({
   selector: 'flo-editor',
   templateUrl: './editor.component.html',
   styleUrls: ['./../../../../node_modules/jointjs/dist/joint.css', './../shared/flo.css'],
   encapsulation: ViewEncapsulation.None
 })
-export class EditorComponent implements OnInit, OnDestroy, OnChanges {
+export class EditorComponent implements OnInit, OnDestroy {
 
   /**
    * Metamodel. Retrieves metadata about elements that can be shown in Flo
@@ -76,6 +73,9 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
   @Output()
   floApi = new EventEmitter<Flo.EditorContext>();
 
+  @Output()
+  validationMarkers = new EventEmitter<Map<string, Array<Flo.Marker>>>();
+
   /**
    * Joint JS Graph object representing the Graph model
    */
@@ -251,10 +251,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
         }
       }
 
-      postValidation() {
-        // self.postValidation();
-      }
-
     })();
   }
 
@@ -288,10 +284,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
     this._disposables.dispose();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    console.log('Something changes');
-  }
-
   get noPalette() : boolean {
     return this._hiddenPalette;
   }
@@ -416,16 +408,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
     this._readOnlyCanvas = value;
   }
 
-  // _findMagnetByClass(view : dia.CellView, className : string) : HTMLElement {
-  //   if (className && className.startsWith('.')) {
-  //       className = className.substr(1);
-  //   }
-  //   return view.$('[magnet]').toArray().find(function(magnet) {
-  //     return magnet.getAttribute('class').split(/\s+/).indexOf(className) >= 0;
-  //   });
-  // }
-  //
-
   /**
    * Displays graphical feedback for the drag and drop in progress based on current drag and drop descriptor object
    *
@@ -754,15 +736,21 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
-  validateGraph(parseMarkers?: Array<Flo.ParseMarker>) : Promise<any> {
-    if (this.editor && this.editor.validate) {
-      return this.editor
-        .validate(this.graph, parseMarkers)
-        .then(allMarkers => this.graph.getCells()
-            .forEach((cell: dia.Cell) => this.markElement(cell, allMarkers.has(cell.id) ? allMarkers.get(cell.id) : [])));
-    } else {
-      return Promise.resolve();
-    }
+  validateContent() : Promise<any> {
+    return new Promise(resolve => {
+      if (this.editor && this.editor.validate) {
+        return this.editor
+          .validate(this.graph, this.dsl, this.editorContext)
+          .then(allMarkers => {
+            this.graph.getCells()
+              .forEach((cell: dia.Cell) => this.markElement(cell, allMarkers.has(cell.id) ? allMarkers.get(cell.id) : []));
+            this.validationMarkers.emit(allMarkers);
+            resolve();
+          });
+      } else {
+        resolve();
+      }
+    });
   }
 
   markElement(cell: dia.Cell, markers: Array<Flo.Marker>) {
@@ -823,9 +811,9 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
   updateGraphRepresentation() : Promise<any> {
     console.debug(`Updating graph to represent '${this._dslText}'`);
     if (this.metamodel && this.metamodel.textToGraph) {
-      return this.metamodel.textToGraph(this.editorContext, this._dslText).then(parseMarkers => this.validateGraph(parseMarkers));
+      return this.metamodel.textToGraph(this.editorContext, this._dslText).then(() => this.validateContent());
     } else {
-      return this.validateGraph();
+      return this.validateContent();
     }
   }
 
@@ -836,14 +824,10 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
           this._dslText = text;
           this.dslChange.emit(text);
         }
-        if (this.metamodel.parseDsl) {
-          return this.metamodel.parseDsl(text, this.editorContext).then(parseMarkers => this.validateGraph(parseMarkers));
-        } else {
-          return this.validateGraph();
-        }
+        return this.validateContent();
       });
     } else {
-      return this.validateGraph();
+      return this.validateContent();
     }
   }
 
@@ -875,11 +859,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
     this.graph.set('type', Constants.CANVAS_CONTEXT);
   }
 
-  // postValidation() {
-  //   console.log('Validation request posted');
-  //   this.validationEventEmitter.emit();
-  // }
-
   handleNodeCreation(node : dia.Element) {
     node.on('change:size', this._resizeHandler);
     node.on('change:position', this._resizeHandler);
@@ -892,7 +871,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
           if (propAttr.indexOf('metadata') === 0 ||
             propAttr.indexOf('props') === 0 ||
             (this.renderer && this.renderer.isSemanticProperty && this.renderer.isSemanticProperty(propAttr, node))) {
-            // this.postValidation();
             this.graphToTextEventEmitter.emit();
           }
           if (this.renderer && this.renderer.refreshVisuals) {
@@ -901,8 +879,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
 
         }
       });
-
-      // this.postValidation();
     }
   }
 
@@ -918,14 +894,12 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
 
   handleLinkCreation(link : dia.Link) {
     this.handleLinkEvent('add', link);
-    // this.postValidation();
 
     link.on('change:source', (link : dia.Link) => {
       this.autosizePaper();
       let newSourceId = link.get('source').id;
       let oldSourceId = link.previous('source').id;
       if (newSourceId !== oldSourceId) {
-        // this.postValidation();
         this.graphToTextEventEmitter.emit();
       }
       this.handleLinkEvent('change:source', link);
@@ -936,7 +910,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
       let newTargetId = link.get('target').id;
       let oldTargetId = link.previous('target').id;
       if (newTargetId !== oldTargetId) {
-        // this.postValidation();
         this.graphToTextEventEmitter.emit();
       }
       this.handleLinkEvent('change:target', link);
@@ -953,9 +926,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
           (this.renderer && this.renderer.isSemanticProperty && this.renderer.isSemanticProperty(propAttr, link))) {
           let sourceId = link.get('source').id;
           let targetId = link.get('target').id;
-          if (sourceId || targetId) {
-            // this.postValidation();
-          }
           this.graphToTextEventEmitter.emit();
         }
         if (this.renderer && this.renderer.refreshVisuals) {
@@ -987,7 +957,6 @@ export class EditorComponent implements OnInit, OnDestroy, OnChanges {
     this.graph.on('remove', (element : dia.Cell) => {
       if (element instanceof joint.dia.Link) {
         this.handleLinkEvent('remove', <dia.Link> element);
-        // this.postValidation();
       }
       if (this.selection && this.selection.model === element) {
         this.selection = undefined;
diff --git a/src/lib/src/shared/flo.common.ts b/src/lib/src/shared/flo.common.ts
index d669e9d..ec0b8fb 100644
--- a/src/lib/src/shared/flo.common.ts
+++ b/src/lib/src/shared/flo.common.ts
@@ -65,12 +65,11 @@ export namespace Flo {
   }
 
   export interface Metamodel {
-    textToGraph(flo : EditorContext, dsl : string) : Promise<Array<ParseMarker>>;
+    textToGraph(flo : EditorContext, dsl : string) : Promise<any>;
     graphToText(flo : EditorContext) : Promise<string>;
     load() : Promise<Map<string, Map<string, ElementMetadata>>>;
     groups() : Array<string>;
 
-    parseDsl?(dsl: string, flo: EditorContext): Promise<Array<ParseMarker>>;
     refresh?() : Promise<Map<string, Map<string, ElementMetadata>>>;
     subscribe?(listener : MetamodelListener) : void;
     unsubscribe?(listener : MetamodelListener) : void;
@@ -146,7 +145,6 @@ export namespace Flo {
     createNode(metadata : ElementMetadata, props? : Map<string, any>, position? : dia.Point) : dia.Element;
     createLink(source : LinkEnd, target : LinkEnd, metadata? : ElementMetadata, props? : Map<string, any>) : dia.Link;
     deleteSelectedNode() : void;
-    postValidation() : void;
     [propName : string] : any;
   }
 
@@ -179,11 +177,6 @@ export namespace Flo {
     range? : Range;
   }
 
-  export interface ParseMarker extends Marker {
-    cell: dia.Cell;
-    range: Range;
-  }
-
   export interface Position {
     ch: number;
     line: number;
@@ -205,7 +198,7 @@ export namespace Flo {
     handleNodeDropping?(context : EditorContext, dragDescriptor : DnDDescriptor) : void;
     showDragFeedback?(context : EditorContext, dragDescriptor : DnDDescriptor) : void;
     hideDragFeedback?(context : EditorContext, dragDescriptor : DnDDescriptor) : void;
-    validate?(graph : dia.Graph, parseMarkers?: Array<ParseMarker>) : Promise<Map<string, Array<Marker>>>;
+    validate?(graph : dia.Graph, dsl: string, flo: EditorContext) : Promise<Map<string, Array<Marker>>>;
     preDelete?(context : EditorContext, deletedElement : dia.Cell) : void;
     setDefaultContent?(editorContext : EditorContext, data : Map<string, Map<string, ElementMetadata>>) : void;
   }