client/annotviz/app/js/annotsroll.js
changeset 111 a7b72620d227
parent 106 9b20ddf1fc70
child 112 3e075a48e19e
equal deleted inserted replaced
106:9b20ddf1fc70 111:a7b72620d227
    19 };
    19 };
    20 
    20 
    21 var defaultOptions = {
    21 var defaultOptions = {
    22     externalRefresh: false,
    22     externalRefresh: false,
    23     defaultColor: DEFAULT_ANNOT_COLOR,
    23     defaultColor: DEFAULT_ANNOT_COLOR,
    24     annotStyles: defaultAnnotStyles
    24     annotStyles: defaultAnnotStyles,
       
    25     ignoreAnnots:false
    25 };
    26 };
    26 
    27 
    27 function AnnotsRoll(options) {
    28 function AnnotsRoll(options) {
    28 
    29 
    29 //parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors
    30 //parentContainer, xInit, yInit, width, height, widthRoll, pixelsPerSecond, annotColors
    39     this.height = opts.height;
    40     this.height = opts.height;
    40     this.width = opts.width;
    41     this.width = opts.width;
    41     this.widthRoll = opts.widthRoll;
    42     this.widthRoll = opts.widthRoll;
    42     this.pixelsPerSecond = opts.pixelsPerSecond;
    43     this.pixelsPerSecond = opts.pixelsPerSecond;
    43     this.annotColors = opts.annotColors;
    44     this.annotColors = opts.annotColors;
    44     this.startTs = options.startTs || Date.now();
    45     this.startTs = opts.startTs || Date.now();
       
    46     this.ignoreAnnots = opts.ignoreAnnots;
    45 
    47 
    46     var yInit = opts.yInit;
    48     var yInit = opts.yInit;
    47     var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
    49     var annotStyles = _(opts.annotStyles).defaults(defaultAnnotStyles).value();
    48     for(var style in annotStyles) {
    50     for(var style in annotStyles) {
    49     	if (annotStyles[style].wordWrap === true){
    51     	if (annotStyles[style].wordWrap === true){
    50     		annotStyles[style].wordWrapWidth = this.widthRoll; 
    52     		annotStyles[style].wordWrapWidth = this.widthRoll; 
    51     	}
    53     	}
    52     }
    54     }
    53     console.log(annotStyles);
       
    54     var started = false;
    55     var started = false;
    55     var ws = opts.ws;
    56     var ws = opts.ws;
    56     var externalRefresh = opts.externalRefresh;
    57     var externalRefresh = opts.externalRefresh;
    57     var stageView = opts.stageView;
    58     var stageView = opts.stageView;
       
    59     var waitInterval;
       
    60     var wait = 0;
    58     
    61     
    59     stageView.registerComponent(this);
    62     stageView.registerComponent(this);
    60 
    63 
    61     var isHidden = function(child) {
    64     var isHidden = function(child) {
    62         // TODO: the origin point is an approximation. Should refine this
    65         // TODO: the origin point is an approximation. Should refine this
   106         var x = 0;
   109         var x = 0;
   107         var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;
   110         var y = (ts-this.startTs) * this.pixelsPerSecond / 1000 + yInit;
   108 
   111 
   109         var colorHex = parseInt(color.replace(/^#/, ''), 16);
   112         var colorHex = parseInt(color.replace(/^#/, ''), 16);
   110 
   113 
   111         var graphics = new PIXI.Graphics()
   114         if (wait === 0){
   112             .beginFill(colorHex)
   115 	        var graphics = new PIXI.Graphics()
   113             .drawRect(x, y, 10, 3)
   116 	            .beginFill(colorHex)
   114             .endFill();
   117 	            .drawRect(x, y, 10, 3)
   115 
   118 	            .endFill();
   116         this.container.addChild(graphics);
   119 	
   117 
   120 	        this.container.addChild(graphics);
   118         var textHeight = 0;
   121 	
   119         var catLabel = new PIXI.Text(
   122 	        var textHeight = 0;
   120             category,
   123 	        var catLabel = new PIXI.Text(
   121             _(annotStyles.label).extend({fill: color}).value()
   124 	            category,
   122         );
   125 	            _(annotStyles.label).extend({fill: color}).value()
   123         catLabel.x = x + 20;
   126 	        );
   124         catLabel.y = y - 23;
   127 	        catLabel.x = x + 20;
   125         this.container.addChild(catLabel);
   128 	        catLabel.y = y - 23;
   126         textHeight += (catLabel.height - 23 + 2);
   129 	        this.container.addChild(catLabel);
   127 
   130 	        textHeight += (catLabel.height - 23 + 2);
   128         if(text) {
   131 	
   129             var catText = new PIXI.Text(text, annotStyles.text);
   132 	        if(text) {
   130             catText.x = x + 20;
   133 	            var catText = new PIXI.Text(text, annotStyles.text);
   131             catText.y = y + 2;
   134 	            catText.x = x + 20;
   132             this.container.addChild(catText);
   135 	            catText.y = y;
   133             textHeight += (catText.height + 2);
   136 	            this.container.addChild(catText);
   134         }
   137 	            textHeight += (catText.height + 2);
   135 
   138 	        }
   136         var catUser = new PIXI.Text(user, annotStyles.user);
   139 	
   137         catUser.x = x + 20;
   140 	        var catUser = new PIXI.Text(user, annotStyles.user);
   138         catUser.y = y + 2 + textHeight;
   141 	        catUser.x = x + 20;
   139         this.container.addChild(catUser);
   142 	        catUser.y = y + textHeight;
       
   143 	        this.container.addChild(catUser);
       
   144 	        textHeight += (catUser.height + 8);
       
   145 	        
       
   146 	        if (this.ignoreAnnots === true){
       
   147 		        wait = textHeight / this.pixelsPerSecond;
       
   148 		        waitInterval = setInterval(function() {_this.refreshWait();}, 1000);
       
   149 	        }
       
   150         }
   140 
   151 
   141         this.addAnnotLine(colorHex, y);
   152         this.addAnnotLine(colorHex, y);
   142     };
   153     };
   143 
   154 
   144     this.addAnnotLine = function(color, y) {
   155     this.addAnnotLine = function(color, y) {
   158     };
   169     };
   159 
   170 
   160     this.move = this.refresh = function() {
   171     this.move = this.refresh = function() {
   161         var diff = (this.startTs - Date.now())/1000;
   172         var diff = (this.startTs - Date.now())/1000;
   162         this.moveTo(diff);
   173         this.moveTo(diff);
       
   174     };
       
   175     
       
   176     this.refreshWait = function(){
       
   177     	wait -= 1;
       
   178     	if (wait < 0){
       
   179     		wait = 0;
       
   180     		clearInterval(waitInterval);
       
   181     	}
   163     };
   182     };
   164 
   183 
   165     this.removePassedObjets = function(){
   184     this.removePassedObjets = function(){
   166         var childrenToRemove = [];
   185         var childrenToRemove = [];
   167         _(_this.container.children).forEach(function(child) {
   186         _(_this.container.children).forEach(function(child) {
   178         ws.message(function(data) {
   197         ws.message(function(data) {
   179             _this.addAnnots(data);
   198             _this.addAnnots(data);
   180         });
   199         });
   181 
   200 
   182     };
   201     };
       
   202     
   183 
   203 
   184     this.start = function() {
   204     this.start = function() {
   185         if(!started) {
   205         if(!started) {
   186             this.startTs = Date.now();
   206             this.startTs = Date.now();
   187             started = true;
   207             started = true;