Fire editor ready and content validated events from Flo editor

PaletteReadt observable on editor

Switch to BehaviorSubject

src/lib/src/editor/editor.component.html

@@ -2,7 +2,9 @@
 <div id="flow-view" class="flow-view" style="position:relative">
   <div id="canvas" class="canvas" style="position:relative; display: block; width: 100%; height: 100%;">
     <div *ngIf="!noPalette" id="palette-container" class="palette-container" style="overflow:hidden;">
-      <flo-palette [metamodel]="metamodel" [renderer]="renderer" [paletteSize]="paletteSize" (onPaletteEntryDrop)="handleDnDFromPalette($event)"></flo-palette>
+      <flo-palette [metamodel]="metamodel" [renderer]="renderer" [paletteSize]="paletteSize"
+                   (onPaletteEntryDrop)="handleDnDFromPalette($event)"
+                    (paletteReady)="updatePaletteReadyState($event)"></flo-palette>
     </div>
 
     <div id="sidebar-resizer" *ngIf="!noPalette"

src/lib/src/editor/editor.component.ts

@@ -10,6 +10,7 @@ import * as _ from 'lodash';
 import * as _joint from 'jointjs';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 const joint : any = _joint;
 const $ : any = _$;
 
@@ -78,6 +79,9 @@ export class EditorComponent implements OnInit, OnDestroy {
   @Output()
   validationMarkers = new EventEmitter<Map<string, Array<Flo.Marker>>>();
 
+  @Output()
+  contentValidated = new EventEmitter<boolean>();
+
   /**
    * Joint JS Graph object representing the Graph model
    */
@@ -135,6 +139,8 @@ export class EditorComponent implements OnInit, OnDestroy {
 
   private graphToTextConversionCompleted = new Subject<void>();
 
+  private paletteReady = new BehaviorSubject<boolean>(false);
+
   constructor(private element: ElementRef) {
     let self = this;
     this.editorContext = new (class DefaultRunnableContext implements Flo.EditorContext {
@@ -265,6 +271,10 @@ export class EditorComponent implements OnInit, OnDestroy {
         return self.graphToTextConversionCompleted;
       }
 
+      get paletteReady(): Observable<boolean> {
+        return self.paletteReady;
+      }
+
     })();
   }
 
@@ -759,6 +769,7 @@ export class EditorComponent implements OnInit, OnDestroy {
             this.graph.getCells()
               .forEach((cell: dia.Cell) => this.markElement(cell, allMarkers.has(cell.id) ? allMarkers.get(cell.id) : []));
             this.validationMarkers.emit(allMarkers);
+            this.contentValidated.emit(true);
             resolve();
           });
       } else {
@@ -862,12 +873,20 @@ export class EditorComponent implements OnInit, OnDestroy {
       });
       this._disposables.add(Disposable.create(() => textSyncSubscription.unsubscribe()));
 
+      // Setup content validated event emitter. Emit not validated when graph to text conversion required
+      let graphValidatedSubscription1 = this.graphToTextEventEmitter.subscribe(() => this.contentValidated.emit(false));
+      this._disposables.add(Disposable.create(() => graphValidatedSubscription1.unsubscribe));
+
       // let validationSubscription = this.validationEventEmitter.debounceTime(100).subscribe(() => this.validateGraph());
       // this._disposables.add(Disposable.create(() => validationSubscription.unsubscribe()));
 
       let graphSyncSubscription = this.textToGraphEventEmitter.debounceTime(300).subscribe(() => this.updateGraphRepresentation());
       this._disposables.add(Disposable.create(() => graphSyncSubscription.unsubscribe()));
 
+      // Setup content validated event emitter. Emit not validated when text to graph conversion required
+      let graphValidatedSubscription2 = this.textToGraphEventEmitter.subscribe(() => this.contentValidated.emit(false));
+      this._disposables.add(Disposable.create(() => graphValidatedSubscription2.unsubscribe));
+
       if (this.editor && this.editor.setDefaultContent) {
         this.editor.setDefaultContent(this.editorContext, data);
       }
@@ -1122,4 +1141,8 @@ export class EditorComponent implements OnInit, OnDestroy {
     this.paper = new joint.dia.Paper(options);
   }
 
+  updatePaletteReadyState(ready: boolean) {
+    this.paletteReady.next(ready);
+  }
+
 }

src/lib/src/palette/palette.component.ts

@@ -80,6 +80,9 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
   @Output()
   onPaletteEntryDrop = new EventEmitter<Flo.DnDEvent>();
 
+  @Output()
+  paletteReady = new EventEmitter<boolean>();
+
   private _paletteSize : number;
 
   private _filterText : string = '';
@@ -218,6 +221,7 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
   private buildPalette(metamodel : Map<string, Map<string, Flo.ElementMetadata>>) {
     let startTime : number = new Date().getTime();
 
+    this.paletteReady.emit(false);
     this.paletteGraph.clear();
 
     let filterText = this.filterText;
@@ -332,6 +336,7 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
       prevNode = pnode;
     });
     this.palette.setDimensions(parentWidth, ypos);
+    this.paletteReady.emit(true);
     console.info('buildPalette took '+(new Date().getTime()-startTime)+'ms');
   }
 

src/lib/src/shared/flo.common.ts

@@ -26,6 +26,7 @@ export namespace Flo {
     readonly titleProperty? : string;
     readonly noEditableProps? : boolean;
     readonly noPaletteEntry? : boolean;
+    readonly unselectable? : boolean;
     readonly [propName : string] : any;
 
     readonly allowAdditionalProperties? : boolean; //TODO: Verify it is still needed
@@ -147,6 +148,7 @@ export namespace Flo {
     deleteSelectedNode() : void;
     readonly textToGraphConversionObservable: Observable<void>;
     readonly graphToTextConversionObservable: Observable<void>;
+    readonly paletteReady: Observable<boolean>;
     [propName : string] : any;
   }