diff --git a/package.json b/package.json index 53365b9..9e98aad 100644 --- a/package.json +++ b/package.json @@ -41,18 +41,18 @@ "ts-disposables": "2.2.3" }, "devDependencies": { - "@angular-devkit/build-angular": "0.1102.6", - "@angular-devkit/schematics": "~11.2.6", - "@angular/animations": "~11.2.7", - "@angular/cli": "~11.2.6", - "@angular/common": "~11.2.7", - "@angular/compiler": "~11.2.7", - "@angular/compiler-cli": "~11.2.7", - "@angular/core": "~11.2.7", - "@angular/forms": "~11.2.7", - "@angular/platform-browser": "~11.2.7", - "@angular/platform-browser-dynamic": "~11.2.7", - "@angular/platform-server": "~11.2.7", + "@angular-devkit/build-angular": "~12.0.0", + "@angular-devkit/schematics": "~12.0.0", + "@angular/animations": "~12.0.0", + "@angular/cli": "~12.0.0", + "@angular/common": "~12.0.0", + "@angular/compiler": "~12.0.0", + "@angular/compiler-cli": "~12.0.0", + "@angular/core": "~12.0.0", + "@angular/forms": "~12.0.0", + "@angular/platform-browser": "~12.0.0", + "@angular/platform-browser-dynamic": "~12.0.0", + "@angular/platform-server": "~12.0.0", "@types/backbone": "1.3.42", "@types/codemirror": "0.0.64", "@types/jasmine": "2.5.36", @@ -60,19 +60,18 @@ "@types/lodash": "4.14.165", "@types/node": "12.11.1", "cpr": "^3.0.1", - "fibers": "^4.0.2", + "fibers": "^5.0.0", "html-webpack-plugin": "^3.2.0", - "jshint": "2.10.2", - "ng-packagr": "11.2.4", - "ngx-bootstrap": "6.0.0", + "ng-packagr": "^12.0.0", + "ngx-bootstrap": "^6.2.0", "node-sass": "^4.13.1", "rimraf": "2.6.1", - "rxjs": "~6.6.7", + "rxjs": "~6.5.3", "scss-bundle": "^3.0.2", "standard-version": "^9.0.0", "tslib": "^2.0.3", "tslint": "^6.1.3", - "typescript": "4.1.5", - "zone.js": "~0.11.3" + "typescript": "~4.2.4", + "zone.js": "~0.11.4" } } diff --git a/src/demo/app/app.component.html b/src/demo/app/app.component.html index 5f7da64..d6ada2c 100644 --- a/src/demo/app/app.component.html +++ b/src/demo/app/app.component.html @@ -10,7 +10,7 @@ + (onProperties)="openPropertiesDialog($event)">
diff --git a/src/demo/app/app.component.ts b/src/demo/app/app.component.ts index f794328..0acdf72 100644 --- a/src/demo/app/app.component.ts +++ b/src/demo/app/app.component.ts @@ -10,6 +10,8 @@ import 'codemirror-minified/mode/javascript/javascript'; import 'codemirror-minified/mode/ruby/ruby'; import 'codemirror-minified/mode/clike/clike'; import 'codemirror-minified/addon/lint/javascript-lint'; +import {PropertiesEditorService} from './properties-editor.service'; +import {dia} from 'jointjs'; @Component({ selector: 'demo-app', @@ -19,20 +21,20 @@ import 'codemirror-minified/addon/lint/javascript-lint'; }) export class AppComponent { - metamodel : Flo.Metamodel; - renderer : Flo.Renderer; - editor : Flo.Editor; - dsl : string; + metamodel: Flo.Metamodel; + renderer: Flo.Renderer; + editor: Flo.Editor; + dsl: string; dslEditor = false; editorContext: Flo.EditorContext; paletteSize = 170; - constructor(private modelService : BsModalService) { + constructor(private propertiesEditor: PropertiesEditorService) { this.metamodel = new Metamodel(); this.renderer = new Renderer(); - this.editor = new Editor(modelService); + this.editor = new Editor(propertiesEditor); this.dsl = ''; } @@ -43,4 +45,8 @@ export class AppComponent { markersChanged(markers: Map>) { console.log('MARKERS: ' + JSON.stringify(markers)); } + + openPropertiesDialog(cell: dia.Cell) { + this.propertiesEditor.openPropertiesDialog(cell) + } } diff --git a/src/demo/app/editor.ts b/src/demo/app/editor.ts index 33def2d..ac9c189 100644 --- a/src/demo/app/editor.ts +++ b/src/demo/app/editor.ts @@ -15,11 +15,9 @@ */ import { Flo, Constants, Properties } from 'spring-flo'; -import { Validators } from '@angular/forms'; import { dia, g } from 'jointjs'; -import { BsModalService } from 'ngx-bootstrap/modal'; -import { PropertiesDialogComponent } from './properties.dialog.component'; -const joint : any = Flo.joint; +import {PropertiesEditorService} from './properties-editor.service'; +const joint: any = Flo.joint; /** * @author Alex Boyko @@ -44,7 +42,7 @@ export class Editor implements Flo.Editor { }; } - constructor(private modelService : BsModalService) {} + constructor(private propertiesEditor: PropertiesEditorService) {} createHandles(context : Flo.EditorContext, createHandle : (owner : dia.CellView, kind : string, action : () => void, location : dia.Point) => void, owner : dia.CellView) { if (owner.model instanceof joint.dia.Element) { @@ -55,20 +53,11 @@ export class Editor implements Flo.Editor { // Properties handle if (!owner.model.get('metadata')?.unresolved) { - createHandle(owner, Constants.PROPERTIES_HANDLE_TYPE, () => this.openPropertiesDialog(owner.model), bbox.origin().offset(-14, bbox.height + 3)); + createHandle(owner, Constants.PROPERTIES_HANDLE_TYPE, () => this.propertiesEditor.openPropertiesDialog(owner.model), bbox.origin().offset(-14, bbox.height + 3)); } } } - openPropertiesDialog(cell: dia.Cell) { - let bsModalRef = this.modelService.show(PropertiesDialogComponent); - let metadata : Flo.ElementMetadata = cell.get('metadata'); - bsModalRef.content.title = `Properties for ${metadata.name.toUpperCase()}`; - let propertiesModel = new SamplePropertiesGroupModel(new Properties.DefaultCellPropertiesSource(cell)); - propertiesModel.load(); - bsModalRef.content.propertiesGroupModel = propertiesModel; - } - validatePort(context: Flo.EditorContext, view : dia.ElementView, magnet : SVGElement) { return true; } @@ -561,65 +550,3 @@ export class Editor implements Flo.Editor { } } - -class SamplePropertiesGroupModel extends Properties.PropertiesGroupModel { - protected createControlModel(property : Properties.Property) : Properties.ControlModel { - let inputType = Properties.InputType.TEXT; - let validation : Properties.Validation; - switch (property.type) { - case 'number': - inputType = Properties.InputType.NUMBER; - break; - case 'url': - inputType = Properties.InputType.URL; - break; - case 'password': - inputType = Properties.InputType.PASSWORD; - break; - case 'boolean': - return new Properties.CheckBoxControlModel(property); - case 'e-mail': - inputType = Properties.InputType.EMAIL; - break; - case 'list': - case 'list[number]': - case 'list[boolean]': - return new Properties.GenericListControlModel(property); - case 'enum': - if (Array.isArray(property.valueOptions)) { - return new Properties.SelectControlModel(property, Properties.InputType.SELECT, (> property.valueOptions).map(o => { - return { - name: o, - value: o === property.defaultValue ? undefined : o - } - })); - } - case 'code': - return new Properties.CodeControlModelWithDynamicLanguageProperty(property, 'language', this, this.encodeTextToDSL, this.decodeTextFromDSL); - default: - if (property.name === 'name') { - validation = { - validator: Validators.required, - errorData: [ - { id: 'required', message: 'Name is required!' } - ] - } - } - break; - } - return new Properties.GenericControlModel(property, inputType, validation); - } - - encodeTextToDSL(text: string): string { - return '\"' + text.replace(/(?:\r\n|\r|\n)/g, '\\n').replace(/"/g, '""') + '\"'; - } - - decodeTextFromDSL(dsl: string): string { - if (dsl.charAt(0) === '\"' && dsl.charAt(dsl.length - 1) === '\"') { - dsl = dsl.substr(1, dsl.length - 2); - } - return dsl.replace(/\\n/g, '\n').replace(/\"\"/g, '"'); - } - -} - diff --git a/src/demo/app/properties-editor.service.ts b/src/demo/app/properties-editor.service.ts new file mode 100644 index 0000000..11277a1 --- /dev/null +++ b/src/demo/app/properties-editor.service.ts @@ -0,0 +1,89 @@ +import {Injectable} from '@angular/core'; +import {dia} from 'jointjs'; +import {PropertiesDialogComponent} from './properties.dialog.component'; +import {BsModalService} from 'ngx-bootstrap/modal'; +import {Flo, Properties} from '../../lib'; +import {Validators} from '@angular/forms'; + + +@Injectable({ + providedIn: 'root' +}) +export class PropertiesEditorService { + + constructor(private modalService: BsModalService) {} + + openPropertiesDialog(cell: dia.Cell) { + const bsModalRef = this.modalService.show(PropertiesDialogComponent); + const metadata: Flo.ElementMetadata = cell.get('metadata'); + bsModalRef.content.title = `Properties for ${metadata.name.toUpperCase()}`; + let propertiesModel = new SamplePropertiesGroupModel(new Properties.DefaultCellPropertiesSource(cell)); + propertiesModel.load(); + bsModalRef.content.propertiesGroupModel = propertiesModel; + } + + +} + +class SamplePropertiesGroupModel extends Properties.PropertiesGroupModel { + protected createControlModel(property: Properties.Property): Properties.ControlModel { + let inputType = Properties.InputType.TEXT; + let validation: Properties.Validation; + switch (property.type) { + case 'number': + inputType = Properties.InputType.NUMBER; + break; + case 'url': + inputType = Properties.InputType.URL; + break; + case 'password': + inputType = Properties.InputType.PASSWORD; + break; + case 'boolean': + return new Properties.CheckBoxControlModel(property); + case 'e-mail': + inputType = Properties.InputType.EMAIL; + break; + case 'list': + case 'list[number]': + case 'list[boolean]': + return new Properties.GenericListControlModel(property); + case 'enum': + if (Array.isArray(property.valueOptions)) { + return new Properties.SelectControlModel(property, Properties.InputType.SELECT, (> property.valueOptions).map(o => { + return { + name: o, + value: o === property.defaultValue ? undefined : o + } + })); + } + break; + case 'code': + return new Properties.CodeControlModelWithDynamicLanguageProperty(property, 'language', this, this.encodeTextToDSL, this.decodeTextFromDSL); + default: + if (property.name === 'name') { + validation = { + validator: Validators.required, + errorData: [ + { id: 'required', message: 'Name is required!' } + ] + } + } + break; + } + return new Properties.GenericControlModel(property, inputType, validation); + } + + encodeTextToDSL(text: string): string { + return '\"' + text.replace(/(?:\r\n|\r|\n)/g, '\\n').replace(/"/g, '""') + '\"'; + } + + decodeTextFromDSL(dsl: string): string { + if (dsl.charAt(0) === '\"' && dsl.charAt(dsl.length - 1) === '\"') { + dsl = dsl.substr(1, dsl.length - 2); + } + return dsl.replace(/\\n/g, '\n').replace(/\"\"/g, '"'); + } + +} + diff --git a/src/lib/shared/flo-common.ts b/src/lib/shared/flo-common.ts index cfdaa82..bd3a1d8 100644 --- a/src/lib/shared/flo-common.ts +++ b/src/lib/shared/flo-common.ts @@ -208,7 +208,6 @@ export namespace Flo { validate?(graph: dia.Graph, dsl: string, flo: EditorContext): Promise>>; preDelete?(context: EditorContext, deletedElement: dia.Cell): boolean; setDefaultContent?(editorContext: EditorContext, data: Map>): void; - openPropertiesDialog(cell: dia.Cell): void; } export function findMagnetByClass(view: dia.CellView, className: string): SVGElement | undefined {