UNPKG

spincycle

Version:

A reactive message router and object manager that lets clients subscribe to object property changes on the server

204 lines (182 loc) 9.52 kB
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../spin-client/spin-client.html"> <link rel="import" href="../spin-client/spin-admin.html"> <link rel="import" href="../bower_components/paper-tabs/paper-tabs.html"> <link rel="import" href="../bower_components/paper-tabs/paper-tab.html"> <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html"> <link rel="import" href="../bower_components/neon-animation/neon-animatable.html"> <link rel="import" href="../bower_components/neon-animation/neon-animations.html"> <link rel="import" href="../spin-client/spin-element.html"> <link rel="import" href="../spin-client/spin-elementlist.html"> <link rel="import" href="./flow-connector.html"> <link rel="import" href="./flow-input.html"> <link rel="import" href="./flow-output.html"> <link rel="import" href="./flow-function.html"> <dom-module id="flow-chart"> <template> <style> :host { display: block; } </style> <div style="display:flex; flex-direction: row; padding-top:15px"> <spin-elementlist spintype="SpinApp" captions="{{captions}}" client="{{client}}" list="{{list}}" style="padding-left:20px;padding-top:10px"> <div> <template is="dom-repeat" items="{{list}}"> <paper-item raised on-tap="onSelect">{{item.name}}</paper-item> </template> </div> </spin-elementlist> <spin-model client="{{client}}" model="{{selecteditem}}" modelproperties="{{modelprops}}" style="padding-left:10px; margin-left:4px; border-left: 1px solid grey"></spin-model> <template is="dom-if" if="{{selecteditem.id}}"> <div style="display:flex; flex-direction: column;padding-left:20px; margin-left:4px; border-left: 1px solid grey"> <spin-element client="{{client}}" spintype="SpinModule" spinid="{{selecteditem.targetModule}}" model="{{selectedmodule}}"> <h3>Selected Module: {{selectedmodule.name}}</h3> </spin-element> <div> <paper-button raised on-tap="newInput">New Input</paper-button> <paper-button raised >New Output</paper-button> <paper-button raised >New Connection</paper-button> <paper-button raised on-tap="newFunction">New Function</paper-button> <paper-button raised >New State Property</paper-button> <paper-button raised disabled="true">New Sub-module</paper-button> </div> <!-- inputs --> <template is="dom-repeat" items="{{selectedmodule.inputs}}"> <flow-input input="{{item}}" ctx="{{ctx}}" canvas="{{canvas}}"></flow-input> </template> <!-- functions --> <template is="dom-repeat" items="{{selectedmodule.functions}}"> <flow-function index="{{index}}" client="{{client}}" functionid="{{item}}" ctx="{{ctx}}" canvas="{{canvas}}"></flow-function> </template> <!-- outputs --> <template is="dom-repeat" items="{{selectedmodule.outputs}}"> <flow-output connection="{{item}}" ctx="{{ctx}}"></flow-output> </template> <!-- module connections --> <template is="dom-repeat" items="{{selectedmodule.moduleConnections}}"> <flow-connector connection="{{item}}" ctx="{{ctx}}"></flow-connector> </template> <!-- canvas --> <canvas id="canvas" style="height:600px;width:800px;padding-top:10px" height="600" width="800"></canvas> </div> </template> </div> </template> <script> Polymer( { is: 'flow-chart', properties: { selected: {type: String, value: 'view1'}, client: {type: 'Object', observer: 'onClient'}, captions: {type: Object}, selecteditem: {type: Object, observer: 'onSelectedItem'}, selectedmodule: { type: Object, observer: 'onSelectedModule'}, resolvedFunctions:{type:Array, value: []} }, /* _moduleChanged: function(newm) { console.log('_moduleChanged') console.dir(newm) this.resolveFunctions() }, resolveFunctions: function() { var count = this.resolvedFunctions.length var narr = [] this.splice('this.resolvedFunctions',0, count) this.selectedmodule.functions.forEach(function(fid) { this.client.get('SpinFunction', fid).then(function(func) { narr.push(func) if(-count === 0) { narr.sort() narr.forEach(function(nf) { this.push('this.resolvedFunctions', nf) }) } }.bind(this)) }.bind(this)) }, */ newInput: function () { console.log('newInput') this.push( 'selectedmodule.inputs', { index: this.selectedmodule.inputs.length, name: 'New Input', destinationModule: this.selectedmodule.id, destinationFunction: '' } ) console.dir(this.selectedmodule) }, newFunction: function () { console.log('newFunction') this.client.emitMessage({target: '_createSpinFunction', obj:{type: 'SpinFunction'}}).then(function (newf) { console.log('new SpinFunction created') this.push('selectedmodule.functions', newf.id) this.client.save(this.selectedmodule) console.log('selected module is now') console.dir(this.selectedmodule) }.bind(this)) }, onClient: function () { this.client.emitMessage( {target: 'getModelFor', modelname: 'SpinApp'} ).then( function ( mprops ) { this.modelprops = mprops }.bind( this ) ) }, onSelect: function ( e ) { console.log( 'flow-chart selected app' ) var app = e.model.item console.dir( app ) this.set( 'selecteditem', app ) }, ready: function() { }, attached: function () { }, onSelectedModule: function () { console.log( 'onSelectedModule:' + this.selectedmodule ) console.dir( this.selectedmodule ) }, onSelectedItem: function () { console.log( 'onSelectedItem:' + this.selecteditem ) console.dir( this.selecteditem ) setTimeout( function () { var canvaslist = document.getElementsByTagName( 'canvas' ) console.log( 'canvaslist is' ) console.dir( canvaslist ) var canvas = canvaslist[ 0 ] console.log( 'canvas is ' + canvas ) console.dir( canvas ) if (this.selecteditem.id && canvas) { console.log( '--- drawing canvas ---' ) this.canvas = canvas this.ctx = canvas.getContext( '2d' ); this.ctx.fillStyle = "orange"; this.ctx.fillRect( 0, 0, 800, 600 ) } }.bind( this ), 100 ) } } ); </script> </dom-module>