tile-element.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="custom-animations.html">
<link rel="import" href="cross-hair.html">
<link rel="import" href="managed-canvas.html">
<link rel="import" href="palettes.html">

<dom-module id="tile-element">
<style>
:host {
display: inline-table;
position: relative;
transform: rotateY(0);
-webkit-transform: rotateY(0);
min-width: 98px;
min-height: 128px;
left: 0px;
top: 0px;
border: 1px solid #CCC;
line-height: 0px;
text-align: right;
}
:host(.noborder){
border: none;
}
.over{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
}
.caption{
padding-top: 2px;
line-height: 12px;
text-align: center;
background-color:rgba(255,255,255,0.85);
box-shadow: -3px 0px 6px #ddc;
}
.sticker{
line-height: 12px;
width: 20px;
height: 17px;
border: 1px solid #000;
text-align: center;
font-size: 0.8em;
padding-top: 3px;
position: absolute;
right: 2px;
top: 2px;
z-index: 10;
}
.side{
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 60px;
}
.blind{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 100;
background: rgba(0,0,0,0.5);
display: none;
}
.dir-rm{
height:78px;
}
.speed-rm{
}
.tc{
height:50px;
}
.caption_inner{
border-bottom: 1px solid #000;
padding-bottom: 1px;
padding-top: 1px;
}
.caption_inner:last-of-type{
border-bottom: 0px;    
}
.caption_inner-label{
font-weight: bold;
font-size: 0.8em;
}
.grabber{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.grabber:hover{
@apply(--grabber-hover);
}
.canvas_part_1{
display: table-cell;
vertical-align: bottom;
text-align: left;
}
.canvas_part_2{
display: table-cell;
vertical-align: bottom;
text-align: right;    
}
.side{
display: flex;
flex-direction: column; 
}
.flex{
flex:2;
}
@-webkit-keyframes fadeout{
0%     { opacity: 1;  }
33%   { opacity: 1;   }
50%   { opacity: 0;   }
83%   { opacity: 0;   }
100%   { opacity: 1;   }
}
.placeholder{
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
text-align: center;
}
.placeholder_text{
display: inline-block;
position: relative;
top: 45%;
font-size: 20px;
}
:host(.active.moving){
opacity: 0.5;
border-width: 10px;
margin: -9px;
border-color: #000;
background-color: #888;
pointer-events: none;
z-index: 100;
box-shadow: initial;
}
.placeholder{
display: none;
}
:host(.active.moving) .placeholder{
display: block;
}
:host(.active){
box-shadow: 0px 0px 5px 3px #fc0;
background-color: #eee;
}
.over {
display: none;
}
:host(.active) .over{
display: block;
pointer-events: none;
}
:host(.active.moving) .over{
display: none;
}
:host(.active.moving.proximate){
background-color: initial;
opacity: 1;
}

:host(.active.moving.proximate) .sticker{
right: 26px;
}

:host(.active.moving.proximate) .sticker,
:host(.active.moving.proximate) managed-canvas {
-webkit-animation: fadeout 1.5s linear infinite;
}

:host(.disabled) .blind{
display: block;
};
:host(.disabled){
pointer-events: none;
}
:host(.active.splitting){
/* cursor: none; */ /* TODO: this doesn't seem to update until after you mouseup, and anyway we actually do want the mouse when the mouse is up */;
}
</style>

<template>
    <div class="placeholder" id="placeholder">
        <div class="placeholder_text">[group [[group_num]]]</div> 
    </div>
    <div class="canvas_part_1">
        <managed-canvas ckey="[[group_model.waves]]" on-canvas-mousedown="_mousedown_splitter" fix_height="128"></managed-canvas>
        <template is="dom-if" if="[[splitter_metrics]]">
            <cross-hair r="6" show_bars="1" x="[[splitter_metrics.x]]" y="[[splitter_metrics.y]]" w="[[splitter_metrics.w]]"></cross-hair>
        </template>
        <managed-canvas ckey="[[group_model.rm.spa]]" fix_height="[[spa_rm_height]]"></managed-canvas>
    </div>
    <div class="canvas_part_2">
        <div>
            <managed-canvas ckey="[[group_model.rm.dir]]"></managed-canvas>
            <managed-canvas ckey="[[group_model.rm.speed]]"></managed-canvas>
        </div>
        <managed-canvas ckey="[[group_model.tac]]"></managed-canvas>
    </div>
    <div id='sticker' class='sticker' style$="[[_sticker_style(group_num)]]">[[group_num]]</div>
    <div id='over' class='over'>
        <div class='side'>
            <div class="flex"></div>
            <div class='caption'>
                <div style$='[[_show(group_model.rm.spa_max)]]' class="caption_inner">
                    [[group_model.rm.spa_max]]Hz
                    <div class="caption_inner-label">spa max</div>
                </div>
                <div style$='[[_show(group_model.rm.dir_max)]]' class="caption_inner">
                    [[group_model.rm.dir_max]]Hz
                    <div class="caption_inner-label">dir max</div>
                </div>
                <div class="caption_inner">[[group_model.n_spikes]]
                    <div class="caption_inner-label">n spikes</div>
                </div>
            </div>
        </div>
    </div>
    <div id='blind' class='blind'></div>
    <div class="grabber" hidden$="{{!grabber_mode}}" on-mouseup="_grab"></div>
</template>


<script>
    "use strict";
        
    Polymer({
        is:'tile-element',
        behaviors: [
            Polymer.NeonAnimationRunnerBehavior, 
            Polymer.ShortcutNotifyTargetBehavior(['group_model'])
        ], properties: {
            group_num: {
                type: Number,
                notify: true,
                value: -1,
                notify: true
            },
            group_model: {
                type: Object,
                notify: true,
                value: function(){return {};},
                notify: true
            },
            moving: {
                type: Boolean,
                value: false,
                notify: true
            },
            active: {
                type: Boolean,
                value: false,
                notify: true
            },
            proximate: {
                type: Boolean,
                value: false,
                notify: true
            },
            disabled: {
                type: Boolean,
                value: false,
                notify: true
            },
            spa_rm_height:{
                type: Number,
                value: 120,
                notify: true
            },
            animationConfig: { // for use with NeonAnimationRunnerBehavior
                value: function(){
                    return { shake: {name: 'shake-animation', node: this} };
                }
            },
            grabber_mode: {
                type: Boolean,
                value: false,
                notify: true
            },
            splitter_metrics: {
                type: Object,
                value: null,
                notify: true
            },
            tool_is_active:{
                type: Boolean
            }
        },
        observers: [
            '_update_state(active, moving, proximate, disabled, splitter_metrics)',
        ], _show: function(val){ // for use in binding as style$='display:_show(val)', truthy vals are shown, falsey are hidden
            return val !== null && val !== "" && val >= 0 ? '' : 'display:none;';
        }, _sticker_style: function(group_num){
            return "background-color:" + Palettes.flag_css[group_num] + "; color:" + Palettes.flag_css_text[group_num] + ";";
        }, _update_state: function(active, moving, proximate, disabled, splitter_metrics){
            // TODO: the various states may be entirely separable now (it was much, much worse in the past!)
            if(disabled && moving){
                throw "cannot disable tile while moving";
            }
                
            if(disabled && this.active){
                this.set('active', false); // this can happen if you move the cursor over cluster plots during split
                return;
            } 

            if(proximate && !moving){
                console.warn("tile for group " + this.group_num + " cannot be proximate unless it is moving");
            }

            moving ? this.classList.add('moving') : this.classList.remove('moving');
            proximate ? this.classList.add('proximate') : this.classList.remove('proximate');
            splitter_metrics ? this.classList.add('splitting') : this.classList.remove('splitting');
            disabled ? this.classList.add('disabled') : this.classList.remove('disabled');
            active ? this.classList.add('active') : this.classList.remove('active');

        }, shake: function(){
            this.cancelAnimation();
            this.playAnimation('shake');
        }, translate_xy: function(x,y){
            if(x || y){
                this.transform('translate(' + x + 'px,' + y + 'px)');
                this.transform('translate(' + -x + 'px,' + -y + 'px)', this.$.placeholder)
            } else {
                this.transform('');
                this.transform('',this.$.placeholder);
            }
        }, _grab: function(){
            // do a sufficiently-deep clone of the group model
            // TODO: this could perhaps be turned into a fucntion in cut-object
            // rather than doing it here
            let group = {
                waves: {canvas: Utils.clone_canvas(this.group_model.waves && this.group_model.waves.canvas)}, 
                tac: this.group_model.tac,
                rm: {
                  spa: this.group_model.rm.spa,
                  dir: this.group_model.rm.dir,
                  speed: this.group_model.rm.speed  
                }
            };
            let rect = this.getBoundingClientRect();
            this.fire('grab_group', {
                src_client_x: rect.left,
                src_client_y: rect.top,
                group: group,
                group_num: this.group_num
            });
        }, _mousedown_splitter: function(e){
            if(e.detail.button === 0){
                return; // left click either irrelevant or handled by tile-wall itself
            }

            if(this.tool_is_active && !this.splitter_metrics){
                return; // something else is already going on
            }

            let detail = {
                state: '',
                group: this.group_model,
                point: e.detail.canvas_point,
                x: e.detail.offset_x,
                y: e.detail.offset_y,
                w: e.detail.canvas_width
            };

            e.detail.stopPropagation(); // a bit hacky, but prevents raw mouse-down event from propagating to tile-wall
            detail.state = this.splitter_metrics ? 'move' : 'start';
            this.fire('splitter', detail);
            this._splitter_el = e.target;

            this.listen(this._splitter_el, 'canvas-mousemove', '_mousemove_splitter');
            this.listen(this._splitter_el, 'canvas-mouseup', '_mousemove_splitter'); // this just goes to mousemove, and then ...
            this.listen(document, 'mouseup', '_mouseup_splitter'); // we actually process the up on the document

        }, _mouseup_splitter: function(e){
            this.unlisten(document, 'mouseup', '_mouseup_splitter');
            this.unlisten(this._splitter_el, 'canvas-mousemove', '_mousemove_splitter');
            this.unlisten(this._splitter_el, 'canvas-mouseup', '_mousemove_splitter');
            this.fire('splitter', {
                state: 'update',
                group: this.group_model,
                point: null,
                x: null,
                y: null,
                w: null
            });
        }, _mousemove_splitter: function(e){
            this.fire('splitter', {
                state: 'move',
                group: this.group_model,
                point: e.detail.canvas_point,
                x: e.detail.offset_x,
                y: e.detail.offset_y,
                w: e.detail.canvas_width
            });
        }
    });
</script>

  
</dom-module>