third_party/WebKit/Source/devtools/front_end/animation/AnimationModel.js

   1 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5
   6 /**
   7  * @constructor
   8  * @extends {WebInspector.SDKModel}
   9  * @param {!WebInspector.Target} target
  10  */
  11 WebInspector.AnimationModel = function(target)
  12 {
  13     WebInspector.SDKModel.call(this, WebInspector.AnimationModel, target);
  14     this._agent = target.animationAgent();
  15     target.registerAnimationDispatcher(new WebInspector.AnimationDispatcher(this));
  16     /** @type {!Map.<string, !WebInspector.AnimationModel.Animation>} */
  17     this._animationsById = new Map();
  18     /** @type {!Map.<string, !WebInspector.AnimationModel.AnimationGroup>} */
  19     this._animationGroups = new Map();
  20     /** @type {!Array.<string>} */
  21     this._pendingAnimations = [];
  22 }
  23
  24 WebInspector.AnimationModel.Events = {
  25     AnimationCreated: "AnimationCreated",
  26     AnimationCanceled: "AnimationCanceled"
  27 }
  28
  29 WebInspector.AnimationModel.prototype = {
  30     /**
  31      * @param {string} id
  32      */
  33     animationCreated: function(id)
  34     {
  35         this._pendingAnimations.push(id);
  36     },
  37
  38     /**
  39      * @param {!AnimationAgent.Animation} payload
  40      */
  41     animationStarted: function(payload)
  42     {
  43         var animation = WebInspector.AnimationModel.Animation.parsePayload(this.target(), payload);
  44         this._animationsById.set(animation.id(), animation);
  45
  46         for (var id of this._pendingAnimations) {
  47             if (!this._animationsById.get(id))
  48                 return;
  49         }
  50
  51         while (this._pendingAnimations.length) {
  52             var group = this._createGroupFromPendingAnimations();
  53             this._animationGroups.set(group.id(), group);
  54             // TODO(samli): Dispatch single group event.
  55             for (var anim of group.animations())
  56                 this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationCreated, { "player": anim, "resetTimeline": anim.id() === group.id() });
  57         }
  58     },
  59
  60     /**
  61      * @return {!WebInspector.AnimationModel.AnimationGroup}
  62      */
  63     _createGroupFromPendingAnimations: function()
  64     {
  65         console.assert(this._pendingAnimations.length);
  66         var groupedAnimations = [this._animationsById.get(this._pendingAnimations.shift())];
  67         var remainingAnimations = [];
  68         for (var id of this._pendingAnimations) {
  69             var anim = this._animationsById.get(id);
  70             if (anim.startTime() === groupedAnimations[0].startTime())
  71                 groupedAnimations.push(anim);
  72             else
  73                 remainingAnimations.push(id);
  74         }
  75         this._pendingAnimations = remainingAnimations;
  76         return new WebInspector.AnimationModel.AnimationGroup(this.target(), groupedAnimations[0].id(), groupedAnimations);
  77     },
  78
  79     /**
  80      * @param {string} id
  81      */
  82     animationCanceled: function(id)
  83     {
  84         this.dispatchEventToListeners(WebInspector.AnimationModel.Events.AnimationCanceled, { "id": id });
  85     },
  86
  87     /**
  88      * @param {number} playbackRate
  89      */
  90     setPlaybackRate: function(playbackRate)
  91     {
  92         this._agent.setPlaybackRate(playbackRate);
  93     },
  94
  95     ensureEnabled: function()
  96     {
  97         if (this._enabled)
  98             return;
  99         this._agent.enable();
 100         this._enabled = true;
 101     },
 102
 103     __proto__: WebInspector.SDKModel.prototype
 104 }
 105
 106 WebInspector.AnimationModel._symbol = Symbol("AnimationModel");
 107
 108 /**
 109  * @param {!WebInspector.Target} target
 110  * @return {!WebInspector.AnimationModel}
 111  */
 112 WebInspector.AnimationModel.fromTarget = function(target)
 113 {
 114     if (!target[WebInspector.AnimationModel._symbol])
 115         target[WebInspector.AnimationModel._symbol] = new WebInspector.AnimationModel(target);
 116
 117     return target[WebInspector.AnimationModel._symbol];
 118 }
 119
 120 /**
 121  * @constructor
 122  * @extends {WebInspector.SDKObject}
 123  * @param {!WebInspector.Target} target
 124  * @param {!AnimationAgent.Animation} payload
 125  */
 126 WebInspector.AnimationModel.Animation = function(target, payload)
 127 {
 128     WebInspector.SDKObject.call(this, target);
 129     this._payload = payload;
 130     this._source = new WebInspector.AnimationModel.AnimationEffect(this.target(), this._payload.source);
 131 }
 132
 133 /**
 134  * @param {!WebInspector.Target} target
 135  * @param {!AnimationAgent.Animation} payload
 136  * @return {!WebInspector.AnimationModel.Animation}
 137  */
 138 WebInspector.AnimationModel.Animation.parsePayload = function(target, payload)
 139 {
 140     return new WebInspector.AnimationModel.Animation(target, payload);
 141 }
 142
 143 WebInspector.AnimationModel.Animation.prototype = {
 144     /**
 145      * @return {!AnimationAgent.Animation}
 146      */
 147     payload: function()
 148     {
 149         return this._payload;
 150     },
 151
 152     /**
 153      * @return {string}
 154      */
 155     id: function()
 156     {
 157         return this._payload.id;
 158     },
 159
 160     /**
 161      * @return {string}
 162      */
 163     name: function()
 164     {
 165         return this.source().name();
 166     },
 167
 168     /**
 169      * @return {boolean}
 170      */
 171     paused: function()
 172     {
 173         return this._payload.pausedState;
 174     },
 175
 176     /**
 177      * @return {string}
 178      */
 179     playState: function()
 180     {
 181         return this._playState || this._payload.playState;
 182     },
 183
 184     /**
 185      * @param {string} playState
 186      */
 187     setPlayState: function(playState)
 188     {
 189         this._playState = playState;
 190     },
 191
 192     /**
 193      * @return {number}
 194      */
 195     playbackRate: function()
 196     {
 197         return this._payload.playbackRate;
 198     },
 199
 200     /**
 201      * @return {number}
 202      */
 203     startTime: function()
 204     {
 205         return this._payload.startTime;
 206     },
 207
 208     /**
 209      * @return {number}
 210      */
 211     endTime: function()
 212     {
 213         if (!this.source().iterations)
 214             return Infinity;
 215         return this.startTime() + this.source().delay() + this.source().duration() * this.source().iterations() + this.source().endDelay();
 216     },
 217
 218     /**
 219      * @return {number}
 220      */
 221     currentTime: function()
 222     {
 223         return this._payload.currentTime;
 224     },
 225
 226     /**
 227      * @return {!WebInspector.AnimationModel.AnimationEffect}
 228      */
 229     source: function()
 230     {
 231         return this._source;
 232     },
 233
 234     /**
 235      * @return {string}
 236      */
 237     type: function()
 238     {
 239         return this._payload.type;
 240     },
 241
 242     /**
 243      * @param {!WebInspector.AnimationModel.Animation} animation
 244      * @return {boolean}
 245      */
 246     overlaps: function(animation)
 247     {
 248         // Infinite animations
 249         if (!this.source().iterations() || !animation.source().iterations())
 250             return true;
 251
 252         var firstAnimation = this.startTime() < animation.startTime() ? this : animation;
 253         var secondAnimation = firstAnimation === this ? animation : this;
 254         return firstAnimation.endTime() >= secondAnimation.startTime();
 255     },
 256
 257     __proto__: WebInspector.SDKObject.prototype
 258 }
 259
 260 /**
 261  * @constructor
 262  * @extends {WebInspector.SDKObject}
 263  * @param {!WebInspector.Target} target
 264  * @param {!AnimationAgent.AnimationEffect} payload
 265  */
 266 WebInspector.AnimationModel.AnimationEffect = function(target, payload)
 267 {
 268     WebInspector.SDKObject.call(this, target);
 269     this._payload = payload;
 270     if (payload.keyframesRule)
 271         this._keyframesRule = new WebInspector.AnimationModel.KeyframesRule(target, payload.keyframesRule);
 272     this._delay = this._payload.delay;
 273     this._duration = this._payload.duration;
 274 }
 275
 276 WebInspector.AnimationModel.AnimationEffect.prototype = {
 277     /**
 278      * @return {number}
 279      */
 280     delay: function()
 281     {
 282         return this._delay;
 283     },
 284
 285     /**
 286      * @param {number} delay
 287      */
 288     setDelay: function(delay)
 289     {
 290         this._delay = delay;
 291     },
 292
 293     /**
 294      * @return {number}
 295      */
 296     endDelay: function()
 297     {
 298         return this._payload.endDelay;
 299     },
 300
 301     /**
 302      * @return {number}
 303      */
 304     playbackRate: function()
 305     {
 306         return this._payload.playbackRate;
 307     },
 308
 309     /**
 310      * @return {number}
 311      */
 312     iterationStart: function()
 313     {
 314         return this._payload.iterationStart;
 315     },
 316
 317     /**
 318      * @return {number}
 319      */
 320     iterations: function()
 321     {
 322         return this._payload.iterations || Infinity;
 323     },
 324
 325     /**
 326      * @return {number}
 327      */
 328     duration: function()
 329     {
 330         return this._duration;
 331     },
 332
 333     setDuration: function(duration)
 334     {
 335         this._duration = duration;
 336     },
 337
 338     /**
 339      * @return {string}
 340      */
 341     direction: function()
 342     {
 343         return this._payload.direction;
 344     },
 345
 346     /**
 347      * @return {string}
 348      */
 349     fill: function()
 350     {
 351         return this._payload.fill;
 352     },
 353
 354     /**
 355      * @return {string}
 356      */
 357     name: function()
 358     {
 359         return this._payload.name;
 360     },
 361
 362     /**
 363      * @return {!WebInspector.DeferredDOMNode}
 364      */
 365     deferredNode: function()
 366     {
 367         return new WebInspector.DeferredDOMNode(this.target(), this.backendNodeId());
 368     },
 369
 370     /**
 371      * @return {number}
 372      */
 373     backendNodeId: function()
 374     {
 375         return this._payload.backendNodeId;
 376     },
 377
 378     /**
 379      * @return {?WebInspector.AnimationModel.KeyframesRule}
 380      */
 381     keyframesRule: function()
 382     {
 383         return this._keyframesRule;
 384     },
 385
 386     /**
 387      * @return {string}
 388      */
 389     easing: function()
 390     {
 391         return this._payload.easing;
 392     },
 393
 394     __proto__: WebInspector.SDKObject.prototype
 395 }
 396
 397 /**
 398  * @constructor
 399  * @extends {WebInspector.SDKObject}
 400  * @param {!WebInspector.Target} target
 401  * @param {!AnimationAgent.KeyframesRule} payload
 402  */
 403 WebInspector.AnimationModel.KeyframesRule = function(target, payload)
 404 {
 405     WebInspector.SDKObject.call(this, target);
 406     this._payload = payload;
 407     this._keyframes = this._payload.keyframes.map(function (keyframeStyle) {
 408         return new WebInspector.AnimationModel.KeyframeStyle(target, keyframeStyle);
 409     });
 410 }
 411
 412 WebInspector.AnimationModel.KeyframesRule.prototype = {
 413     /**
 414      * @param {!Array.<!AnimationAgent.KeyframeStyle>} payload
 415      */
 416     _setKeyframesPayload: function(payload)
 417     {
 418         this._keyframes = payload.map(function (keyframeStyle) {
 419             return new WebInspector.AnimationModel.KeyframeStyle(this._target, keyframeStyle);
 420         });
 421     },
 422
 423     /**
 424      * @return {string|undefined}
 425      */
 426     name: function()
 427     {
 428         return this._payload.name;
 429     },
 430
 431     /**
 432      * @return {!Array.<!WebInspector.AnimationModel.KeyframeStyle>}
 433      */
 434     keyframes: function()
 435     {
 436         return this._keyframes;
 437     },
 438
 439     __proto__: WebInspector.SDKObject.prototype
 440 }
 441
 442 /**
 443  * @constructor
 444  * @extends {WebInspector.SDKObject}
 445  * @param {!WebInspector.Target} target
 446  * @param {!AnimationAgent.KeyframeStyle} payload
 447  */
 448 WebInspector.AnimationModel.KeyframeStyle = function(target, payload)
 449 {
 450     WebInspector.SDKObject.call(this, target);
 451     this._payload = payload;
 452     this._offset = this._payload.offset;
 453 }
 454
 455 WebInspector.AnimationModel.KeyframeStyle.prototype = {
 456     /**
 457      * @return {string}
 458      */
 459     offset: function()
 460     {
 461         return this._offset;
 462     },
 463
 464     /**
 465      * @param {number} offset
 466      */
 467     setOffset: function(offset)
 468     {
 469         this._offset = offset * 100 + "%";
 470     },
 471
 472     /**
 473      * @return {number}
 474      */
 475     offsetAsNumber: function()
 476     {
 477         return parseFloat(this._offset) / 100;
 478     },
 479
 480     /**
 481      * @return {string}
 482      */
 483     easing: function()
 484     {
 485         return this._payload.easing;
 486     },
 487
 488     __proto__: WebInspector.SDKObject.prototype
 489 }
 490
 491 /**
 492  * @constructor
 493  * @extends {WebInspector.SDKObject}
 494  * @param {!WebInspector.Target} target
 495  * @param {string} id
 496  * @param {!Array.<!WebInspector.AnimationModel.Animation>} animations
 497  */
 498 WebInspector.AnimationModel.AnimationGroup = function(target, id, animations)
 499 {
 500     WebInspector.SDKObject.call(this, target);
 501     this._id = id;
 502     this._animations = animations;
 503 }
 504
 505 WebInspector.AnimationModel.AnimationGroup.prototype = {
 506     /**
 507      * @return {string}
 508      */
 509     id: function()
 510     {
 511         return this._id;
 512     },
 513
 514     /**
 515      * @return {!Array.<!WebInspector.AnimationModel.Animation>}
 516      */
 517     animations: function()
 518     {
 519         return this._animations;
 520     },
 521
 522     __proto__: WebInspector.SDKObject.prototype
 523 }
 524
 525
 526 /**
 527  * @constructor
 528  * @implements {AnimationAgent.Dispatcher}
 529  */
 530 WebInspector.AnimationDispatcher = function(animationModel)
 531 {
 532     this._animationModel = animationModel;
 533 }
 534
 535 WebInspector.AnimationDispatcher.prototype = {
 536     /**
 537      * @override
 538      * @param {string} id
 539      */
 540     animationCreated: function(id)
 541     {
 542         this._animationModel.animationCreated(id);
 543     },
 544
 545     /**
 546      * @override
 547      * @param {!AnimationAgent.Animation} payload
 548      */
 549     animationStarted: function(payload)
 550     {
 551         this._animationModel.animationStarted(payload);
 552     },
 553
 554     /**
 555      * @override
 556      * @param {string} id
 557      */
 558     animationCanceled: function(id)
 559     {
 560         this._animationModel.animationCanceled(id);
 561     }
 562 }