1 /**

     2 * js/annotsRoll.js

     3 *

     4 * annotsRoll basic component

     5 *

     6 */

     7 

     8 'use strict';

     9 

    10 var PIXI = require('pixi');

    11 var _ = require('lodash');

    12 

    13 //

    14 //

    15 //

    16 // options = {

    17 //     parentContainer:,

    18 //     externalRefresh: true/false

    19 //     ws:,

    20 //     xInit:,

    21 //     yInit:,

    22 //     width:,

    23 //     height:,

    24 //     widthRoll:,

    25 //     pixelsPerSecond:,

    26 //     framerate:,

    27 //     annotColors: [{ts: , colors: {code1 : '#dshdsj', code2: 'sdasd', 'default': 'dsadas'}}],

    28 //     defaultColor: default,

    29 //     annotStyles: {

    30 //         'label': {font:, fill:},

    31 //         'text':{font:, fill:},

    32 //         'user':{font:, fill:},

    33 //     }

    34 // }

    35 var DEFAULT_ANNOT_COLOR = '#bababa';

    36 

    37 var defaultAnnotStyles = {

    38     'label': { font: '26pt Arial Bold', fill: '#65A954' },

    39     'text' : { font: '20pt Arial Regular', fill: '#444444' },

    40     'user' : { font: '22pt Arial regular', fill: '#444444' },

    41 };

    42 

    43 var defaultOptions = {

    44     externalRefresh: false,

    45     defaultColor: DEFAULT_ANNOT_COLOR,

    46     annotStyles: defaultAnnotStyles

    47 };

    48 

    49 function AnnotsRoll(options) {

    50 

    51 //parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors

    52     var _this = this;

    53     var opts = _(options).defaults(defaultOptions).value();

    54 

    55 

    56     this.container = new PIXI.DisplayObjectContainer();

    57     this.container.x = opts.xInit;

    58     this.container.y = opts.yInit;

    59     this.container.width = opts.width;

    60 

    61     this.height = opts.height;

    62     this.width = opts.width;

    63     this.widthRoll = opts.widthRoll;

    64     this.pixelsPerSecond = opts.pixelsPerSecond;

    65     this.annotColors = opts.annotColors;

    66     this.startTs = options.startTs || Date.now();

    67 

    68     var yInit = opts.yInit;

    69     var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();

    70     var started = false;

    71     var ws = opts.ws;

    72     var externalRefresh = opts.externalRefresh;

    73     var stageView = opts.stageView;

    74     

    75     stageView.registerComponent(this);

    76 

    77     var isHidden = function(child) {

    78         // TODO: the origin point is an approximation. Should refine this

    79         var globalPos = child.toGlobal(new PIXI.Point(0,0));

    80         return ((globalPos.x + child.width) < 0) || ((globalPos.y + child.height) < 0) ;

    81     };

    82 

    83     this.addAnnots = function(data) {

    84 

    85         //var title = data.content.category.label;

    86         //var user = data.content.user;

    87         //Test cat and color

    88         //var colorAnnot = 0x65A954;

    89         var category = data.content.category.label,

    90             text     = data.content.text,

    91             user     = data.content.user,

    92             ts       = Date.parse(data.ts),

    93             color    = this.getColor(ts, data.content.category.code);

    94 

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

    96     };

    97 

    98     this.getColor = function(ts, code) {

    99         var colorsDef;

   100         _(this.annotColors).eachRight(function(cdef) {

   101             console.log("cDef", cdef);

   102             console.log("cDef ts", cdef.ts, ts);

   103             if(cdef.ts < ts) {

   104                 colorsDef = cdef.colors;

   105                 return false;

   106             }

   107         });

   108         var resColor;

   109         console.log("colorsDef", colorsDef);

   110         if(colorsDef) {

   111             resColor = colorsDef[code];

   112         }

   113         if(!resColor) {

   114             resColor = DEFAULT_ANNOT_COLOR;

   115         }

   116         return resColor;

   117     }

   118 

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

   120 

   121         var color = catColor ? catColor : DEFAULT_ANNOT_COLOR;

   122         var x = 0;

   123         var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;

   124 

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

   126 

   127         var graphics = new PIXI.Graphics()

   128             .beginFill(colorHex)

   129             .drawRect(x, y, 10, 3)

   130             .endFill();

   131 

   132         this.container.addChild(graphics);

   133 

   134         var catLabel = new PIXI.Text(

   135             category,

   136             _(annotStyles.label).extend({fill: color}).value()

   137         );

   138         catLabel.x = x + 20;

   139         catLabel.y = y - 23;

   140         this.container.addChild(catLabel);

   141 

   142         var textHeight = 0;

   143         if(text) {

   144             var catText = new PIXI.Text(text, annotStyles.text);

   145             catText.x = x + 20;

   146             catText.y = y + 2;

   147             this.container.addChild(catText);

   148             textHeight += (catText.height + 2);

   149         }

   150 

   151         var catUser = new PIXI.Text(user, annotStyles.user);

   152         catUser.x = x + 20;

   153         catUser.y = y + 2 + textHeight;

   154         this.container.addChild(catUser);

   155 

   156         this.addAnnotLine(colorHex, y);

   157     };

   158 

   159     this.addAnnotLine = function(color, y) {

   160         var x = this.widthRoll;

   161 

   162 

   163         var graphics = new PIXI.Graphics()

   164             .beginFill(color)

   165             .drawRect(x, y, this.width - x, 3)

   166             .endFill();

   167 

   168         this.container.addChild(graphics);

   169     };

   170 

   171     this.moveTo = function(diffTime){

   172     	this.container.y = Math.floor(diffTime*this.pixelsPerSecond);

   173     };

   174 

   175     this.move = this.refresh = function() {

   176         var diff = (this.startTs - Date.now())/1000;

   177         this.moveTo(diff);

   178     };

   179 

   180     this.removePassedObjets = function(){

   181         var childrenToRemove = [];

   182         _(_this.container.children).forEach(function(child) {

   183             return typeof(child) === 'undefined' ||

   184                 (isHidden(child) && childrenToRemove.push(child));

   185         });

   186         childrenToRemove.forEach(function(child) {

   187             _this.container.removeChild(child);

   188         });

   189     };

   190 

   191     this.init = function() {

   192 

   193         ws.message(function(data) {

   194             _this.addAnnots(data);

   195         });

   196 

   197     };

   198 

   199     this.start = function() {

   200         if(!started) {

   201             this.startTs = Date.now();

   202             started = true;

   203         }

   204         this.cleanInterval = setInterval(function () { _this.removePassedObjets(); }, 1000 * this.height / this.pixelsPerSecond );

   205         if(!externalRefresh) {

   206             this.refreshInterval = setInterval(function() {_this.move();}, 1000/this.framerate);

   207         }

   208     };

   209 

   210     this.stop = function() {

   211         clearInterval(this.cleanInterval);

   212         if(!externalRefresh) {

   213             clearInterval(this.refreshInterval);

   214         }

   215     };

   216 

   217 }

   218 

   219 module.exports = {

   220     AnnotsRoll: AnnotsRoll,

   221 };