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