spincycle/lib/spin/src/spin-app/flow-output.html

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

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

<dom-module id="flow-output">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>

    </template>

    <script>
            // just an array of strings (named output hooks)
			Polymer({

				is: 'flow-output',

				properties:
					{
						ctx:        {type: Object, observer:'onStuff'},
						connector:  {type: Object, observer:'onStuff'},
                        index:      {type: Number, notify: true},
						basex:      {type: Number, value: 500},
                        basey:      {type: Number, value: 100},
                        name:       {type: String, notify: true},
                        height:     {type: Number, value:40},
                        width:      {type: Number, value:140},
                        strokeStyle:{type: String, value: 'red'}
					},

				onStuff:function()
				        {
					        if(this.ctx && this.connector)
					        {
						        this.ctx.strokeStyle = this.strokeStyle
                                this.ctx.strokeRect(this.basex, this.basey * this.index * this.height, this.width, this.height)
					        }
				        }


			});
    </script>
</dom-module>