client/annotviz/app/js/annotsroll.js
author ymh <ymh.work@gmail.com>
Tue, 20 Jan 2015 11:57:44 +0100
changeset 98 72d767c5142d
parent 97 545803e685e0
child 100 0d7dac03c1a0
permissions -rw-r--r--
refactor and make work annotsroll

/**
* js/annotsRoll.js
*
* annotsRoll basic component
*
*/

'use strict';

var PIXI = require('pixi');
var _ = require('lodash');

//
//
//
// options = {
//     parentContainer:,
//     externalRefresh: true/false
//     ws:,
//     xInit:,
//     yInit:,
//     width:,
//     height:,
//     widthRoll:,
//     pixelsPerSecond:,
//     framerate:,
//     annotColors: [{ts: , colors: {code1 : '#dshdsj', code2: 'sdasd', 'default': 'dsadas'}}],
//     defaultColor: default,
//     annotStyles: {
//         'label': {font:, fill:},
//         'text':{font:, fill:},
//         'user':{font:, fill:},
//     }
// }
var DEFAULT_ANNOT_COLOR = '#bababa';

var defaultAnnotStyles = {
    'label': { font: '26pt Arial Bold', fill: '#65A954' },
    'text' : { font: '20pt Arial Regular', fill: '#444444' },
    'user' : { font: '22pt Arial regular', fill: '#444444' },
};

var defaultOptions = {
    externalRefresh: false,
    defaultColor: DEFAULT_ANNOT_COLOR,
    annotStyles: defaultAnnotStyles
};

function AnnotsRoll(options) {

//parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors
    var _this = this;
    var opts = _(options).defaults(defaultOptions).value();


    this.container = new PIXI.DisplayObjectContainer();
    this.container.x = opts.xInit;
    this.container.y = opts.yInit;
    this.container.width = opts.width;
    opts.parentContainer.addChild(this.container);

    this.height = opts.height;
    this.width = opts.width;
    this.widthRoll = opts.widthRoll;
    this.pixelsPerSecond = opts.pixelsPerSecond;
    this.annotColors = opts.annotColors;
    this.startTs = options.startTs || Date.now();

    var yInit = opts.yInit;
    var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
    var started = false;
    var ws = opts.ws;
    var externalRefresh = opts.externalRefresh;


    var isHidden = function(child) {
        // TODO: the origin point is an approximation. Should refine this
        var globalPos = child.toGlobal(new PIXI.Point(0,0));
        return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;
    };

    this.addAnnots = function(data) {

        //var title = data.content.category.label;
        //var user = data.content.user;
        //Test cat and color
        //var colorAnnot = 0x65A954;
        var category = data.content.category.label,
            text     = data.content.text,
            user     = data.content.user,
            ts       = Date.parse(data.ts),
            color    = this.getColor(ts, data.content.category.code);

        this.addAnnot(category, text, user, color, ts);
    };

    this.getColor = function(ts, code) {
        var colorsDef;
        _(this.annotColors).eachRight(function(cdef) {
            console.log("cDef", cdef);
            console.log("cDef ts", cdef.ts, ts);
            if(cdef.ts < ts) {
                colorsDef = cdef.colors;
                return false;
            }
        });
        var resColor;
        console.log("colorsDef", colorsDef);
        if(colorsDef) {
            resColor = colorsDef[code];
        }
        if(!resColor) {
            resColor = DEFAULT_ANNOT_COLOR;
        }
        return resColor;
    }

    this.addAnnot = function(category, text, user, catColor, ts){

        var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;
        var x = 0;
        var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;

        var colorHex = parseInt(color.replace(/^#/, ''), 16);

        var graphics = new PIXI.Graphics()
            .beginFill(colorHex)
            .drawRect(x, y, 10, 3)
            .endFill();

        this.container.addChild(graphics);

        var catLabel = new PIXI.Text(
            category,
            _(annotStyles.label).extend({fill: color}).value()
        );
        catLabel.x = x + 20;
        catLabel.y = y - 23;
        this.container.addChild(catLabel);

        var textHeight = 0;
        if(text) {
            var catText = new PIXI.Text(text, annotStyles.text);
            catText.x = x + 20;
            catText.y = y + 2;
            this.container.addChild(catText);
            textHeight += (catText.height + 2);
        }

        var catUser = new PIXI.Text(user, annotStyles.user);
        catUser.x = x + 20;
        catUser.y = y + 2 + textHeight;
        this.container.addChild(catUser);

        this.addAnnotLine(colorHex, y);
    };

    this.addAnnotLine = function(color, y) {
        var x = this.widthRoll;


        var graphics = new PIXI.Graphics()
            .beginFill(color)
            .drawRect(x, y, this.width - x, 3)
            .endFill();

        this.container.addChild(graphics);
    };

    this.moveTo = function(diffTime){
    	this.container.y = Math.floor(diffTime*this.pixelsPerSecond);
    };

    this.move = this.refresh = function() {
        var diff = (this.startTs - Date.now())/1000;
        this.moveTo(diff);
    };

    this.removePassedObjets = function(){
        var childrenToRemove = [];
        _(_this.container.children).forEach(function(child) {
            return typeof(child) === 'undefined' ||
                (isHidden(child) && childrenToRemove.push(child));
        });
        childrenToRemove.forEach(function(child) {
            _this.container.removeChild(child);
        });
    };

    this.init = function() {

        ws.message(function(data) {
            _this.addAnnots(data);
        });

    };


    this.start = function() {
        if(!started) {
            this.startTs = Date.now();
            started = true;
        }
        this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.height / this.pixelsPerSecond );
        if(!externalRefresh) {
            this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate);
        }
    };

    this.stop = function() {
        clearInterval(this.cleanInterval);
        if(!externalRefresh) {
            clearInterval(this.refreshInterval);
        }
    };

}

module.exports = {
    AnnotsRoll: AnnotsRoll,
};