spincycle/lib/spin/src/spin-app/flow-input.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">

<link rel="import" href="canvas-utils.html">

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

    </template>

    <script>
			// {name: 'qqqq', destinationModule: 'yyyy', destinationFunction: 'zzzz'}
			Polymer( {

				is: 'flow-input',

				properties: {
					ctx:             {type: Object, observer: 'onStuff'},
					canvas:          {type: Object, observer: 'onStuff'},
					input:           {type: Object, observer: 'onStuff'},
					basex:           {type: Number, value: 10},
					basey:           {type: Number, value: 10},
					gap:             {type: Number, value: 15},
					textoffset:      {type: Number, value: 5},
					height:          {type: Number, value: 40},
					width:           {type: Number, value: 140},
					strokeStyle:     {type: String, value: '#488'},
					highlightcolor:  {type: String, value: '#7bb'},
					backgroundcolor: {type: String, value: '#add'},
					textoffsetx:     {type: Number, value: 5},
					textoffsety:     {type: Number, value: 25},
				},

				behaviors: [ canvasUtils ],

                attached: function()
                          {
                              console.log('input attached: ',this.ctx, this.canvas, this.input)
                          },

				onStuff: function ()
				         {
					         if (this.ctx && this.input)
					         {
						         console.log( 'drawing input ' )
						         this.ctx.lineWidth = 1
						         this.ctx.strokeStyle = this.strokeStyle
						         this.ctx.fillStyle = this.strokeStyle
						         var x = this.basex
						         var y = this.basey + (this.input.index * (this.gap + this.height))
						         this.x = x
						         this.y = y
						         this.ctx.strokeRect( x, y, this.width, this.height )
						         this.ctx.fillStyle = this.backgroundcolor
						         this.ctx.fillRect( x + 2, y + 2, this.width - 2, this.height - 2 )
						         this.area = {x: x + 2, y: y + 2, width: this.width - 2, height: this.height - 2}
						         this.addEventListener( this.canvas, 'click', this.area, function ( e )
						         {
							         console.log( 'input click' )
							         console.dir( this.area )
						         }.bind( this ) )
						         this.addEventListener( this.canvas, 'mouseenter', this.area, function ( e )
						         {
							         console.log( '--enter' )
							         this.drawBackground( this.highlightcolor )
						         }.bind( this ) )
						         this.addEventListener( this.canvas, 'mouseout', this.area, function ( e )
						         {
							         console.log( '--out' )
							         this.drawBackground( this.backgroundcolor )
						         }.bind( this ) )
						         this.drawBackground( this.backgroundcolor )
					         }
				         },

				drawBackground: function ( bgcolor )
				                {
					                this.ctx.fillStyle = bgcolor
					                this.ctx.fillRect( this.x + 2, this.y + 2, this.width - 2, this.height - 2 )
					                this.ctx.fillStyle = 'black'
					                this.ctx.font = "16px Sans-Serif";
					                this.ctx.fillText( this.input.name, this.x + this.textoffsetx, this.y + this.textoffsety )
				                }

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