1 line
2.9 KiB
JavaScript
1 line
2.9 KiB
JavaScript
|
"use strict";var e=function(e){return e&&e.__esModule?e["default"]:e},t=e(require("react")),i=e(require("../../atom-react/components/jibo-combo-box")),a=t.createClass({displayName:"TimeNotchesView",onNewLayer:function(e){this.props.animationModel.addLayer(e.value),document.querySelector(".active .animation-editor").childNodes[0].focus()},render:function(){for(var e=this.props.animationModel.state.keyframes.duration,a=this.props.animationModel.state.keyframes.framerate,n=this.props.animationModel.state.keyframes.duration/a,o=this.props.animationModel.uiState.currentKeyframe,s=[],r=Math.floor(this.props.totalFrames/5)+1,l=0;r>l;l++)s.push(t.createElement("span",{key:l,className:"animation-timeline-notch"},5*l));var m=22,d={container:{width:Math.max(5*r*18+this.props.labelWidth+20,this.props.width),height:m,position:"absolute",marginTop:this.props.offset.y,background:"#363636",borderBottom:"thin solid #444444",zIndex:10},indicator:{marginLeft:18*o,height:20,display:null===this.props.animationModel.getSelectedLayer()?"none":"inline-block"},displayAnchor:{width:this.props.labelWidth-13,marginRight:13,height:m,"float":"left",position:"relative"},display:{width:this.props.labelWidth,paddingRight:13,height:m-1,position:"absolute",marginLeft:this.props.offset.x,background:"#363636",zIndex:2},notches:{width:18*r*5,height:m,"float":"left",marginLeft:270},miniLine:{height:4,width:2,opacity:.7,position:"absolute",marginTop:18,marginLeft:7,background:"red"}},c=this.props.animationModel.getKeyframeInfo(),p=Object.keys(c.layerTypes),h=[],u=this.props.animationModel.getLayersOfType("Video");p.forEach(function(e){"Video"===e&&u.length>0||h.push({label:e,display:function(){return t.createElement("i",{className:"fa fa-plus-square",style:{fontSize:17}})},value:e})});var f=h[0];return t.createElement("div",{style:d.container,className:"animation-timeline-notches-container"},t.createElement("div",{style:this.displayAnchor},t.createElement("div",{style:d.display,className:"time-display"},t.createElement("div",{style:{"float":"left"},className:"new-layer"},t.createElement(i,{hideButton:!0,data:h,init:f,onSelected:this.onNewLayer})),t.createElement("span",{className:"frames"},o," of ",e,", "),t.createElement("span",{className:"frame-rate"},a,"fps, "),t.createElement("span",{className:"seconds"},n.toFixed(1),"s"))),t.createElement("div",{style:d.notches,className:"animation-timeline-notches"},t.createElement("div",{style:d.indicator,className:"animation-timeline-indicator",onMouseDown:this.onMouseDown,onMouseUp:this.onMouseUp},t.createElement("div",{className:"animation-timeline-indicator-handle"},t.createElement("div",{style:d.miniLine}))),s))},onMouseDown:function(){this.props.animationModel.emit("toggle-time-scrub",!0),this.onMouseUpBind=this.onMouseUp.bind(this),document.addEventListener("mouseup",this.onMouseUpBind)},onMouseUp:function(){this.props.animationModel.emit("toggle-time-scrub",!1),document.removeEventListener("mouseup",this.onMouseUpBind)}});module.exports=a;
|