Spring/spring-flo
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Validation

Browse Source 
Validation

Validation

Validation

Validation markers emitter

DSL editor emitter

Validation

Validation

Validation
This commit is contained in:
BoykoAlex
2017-09-12 12:30:32 -04:00
parent e0bdb77f8c
commit b584fed1ed
7 changed files with 37 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/demo/app/app.component.html
View File

@@ -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

4
src/demo/app/app.component.ts
View File

@@ -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));
}
}

3
src/demo/app/editor.ts
View File

@@ -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 => {

3
src/demo/app/metamodel.ts
View File

@@ -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 [];
})
}

4
src/lib/src/dsl-editor/dsl.editor.component.ts
View File

@@ -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() {

79
src/lib/src/editor/editor.component.ts
View File

@@ -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;

11
src/lib/src/shared/flo.common.ts
View File

@@ -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;
}