1 line
5.8 KiB
JavaScript
1 line
5.8 KiB
JavaScript
"use strict";var e=function(e){return e&&e.__esModule?e["default"]:e},t=e(require("react")),i=e(require("./layer")),o=e(require("./layer-label")),s=e(require("./time-notches")),$=e(require("jquery")),a=e(require("lodash")),n=e(require("jibo-keyframes")),r=e(require("jibo-keyframes/lib/jibo-keyframe-info")),l=e(require("./playback-controls")),d=t.createClass({displayName:"layout-child",getInitialState:function(){var e=this;return this.props.animationModel.on("onpropertieschanged",function(){e.setLimits(),e.forceUpdate()}),{headerOffset:{x:0,y:0},labelsOffset:0}},componentDidMount:function(){this.getDOMNode().addEventListener("scroll",this.onScroll.bind(this)),this.onKeyframeUpsertCB=this.onKeyframeUpsert.bind(this),this.props.animationModel.on("onkeyframeupsert",this.onKeyframeUpsertCB),this.keyframesUpserted=void 0},componentWillUnmount:function(){this.props.animationModel.removeListener("onkeyframeupsert",this.onKeyframeUpsertCB)},componentWillReceiveProps:function(e){if(e.playbackTime!==this.props.playbackTime){var t=18*e.playbackTime+270;0===e.playbackTime&&this.props.playbackTime===this.props.animationModel.state.keyframes.duration-1?this.getDOMNode().scrollLeft=0:e.playbackTime>this.props.playbackTime?this.getDOMNode().scrollLeft+this.getDOMNode().offsetWidth<t&&(this.getDOMNode().scrollLeft=t-270):e.playbackTime<this.props.playbackTime&&this.getDOMNode().scrollLeft+270>t&&(this.getDOMNode().scrollLeft=t-this.getDOMNode().offsetWidth)}},onScroll:function(){this.setState({labelsOffset:this.getDOMNode().scrollLeft,headerOffset:{x:this.getDOMNode().scrollLeft,y:this.getDOMNode().scrollTop}})},onMouseMove:function(e){return 0===e.buttons?void this.onMouseUp():(this.setTimeFromMousePosition({nativeEvent:e}),void this.props.animationModel.emit("drag-keyframe"))},onMouseUp:function(){document.removeEventListener("mousemove",this.onMouseMoveBind),document.removeEventListener("mouseup",this.onMouseUpBind)},onMouseDown:function(e){1===e.nativeEvent.which&&(this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseUpBind=this.onMouseUp.bind(this),document.addEventListener("mousemove",this.onMouseMoveBind),document.addEventListener("mouseup",this.onMouseUpBind),this.setTimeFromMousePosition(e))},setTimeFromMousePosition:function(e){var t=$(this.getDOMNode()).find(".animation-timeline-notch").offset(),i=Math.floor((e.nativeEvent.clientX-t.left)/18);i=Math.max(i,0),i=Math.min(i,this.props.animationModel.state.keyframes.duration-1),this.props.animationModel.setKeyframe(i)},onKeyframeUpsert:function(e){this.keyframesUpserted=e},evaluateFiltered:function(e,t){return n.runtime.evaluateAllLayersFiltered(e,r,t,function(e){return"Body"===e.type})},toRadians:function(e){return Math.PI*e/180},setLimits:function(){var e=this.props.animationModel.state.keyframes,t=1/e.framerate,i=0,o=this.props.animationModel.limits,s=this.props.animationModel.state.keyframes.duration,a=!1,n=!1;this.keyframesExceeded=[];for(var r=0;s>r;r++){var l=!1,d=this.evaluateFiltered(e,i),h=void 0,m=void 0;r>0&&s-1>r&&(h=this.evaluateFiltered(e,i+t),m=this.evaluateFiltered(e,i-t));for(var p in d.Body){var c=0,f=0;if(h){c=(this.toRadians(h.Body[p])-this.toRadians(d.Body[p]))/t;var u=(this.toRadians(d.Body[p])-this.toRadians(m.Body[p]))/t;f=(c-u)/t}o[p]&&Math.abs(c)>o[p].velocityLimit&&(a=!0,l=!0),o[p]&&Math.abs(f)>o[p].accelerationLimit&&(n=!0,l=!0)}this.keyframesExceeded.push(l),i+=t}this.props.animationModel.setLimit(a,n)},render:function(){var e=this,n=this.props.animationModel.state.keyframes.duration,r=18*(n+1),d=40*this.props.animationModel.state.keyframes.layers.length,h=Math.floor(n/5)+1,m=270,p={timeline:{width:this.props.width,height:this.props.height,background:"#404040"},container:{width:m+5*h*18+20,height:d+22},headerAnchor:{position:"relative",width:m+5*h*18+20,height:22},labelsAnchor:{position:"relative",width:m,height:d,"float":"left",zIndex:2},labels:{position:"absolute",marginLeft:this.state.labelsOffset},channelsContainer:{width:r,height:d,"float":"left",zIndex:1},channels:{width:r},indicator:{position:"absolute",marginLeft:18*this.props.animationModel.uiState.currentKeyframe+9-this.state.labelsOffset,height:this.props.height-22,zIndex:1,display:null===this.props.animationModel.getSelectedLayer()?"none":"inline-block"}},c=this.props.animationModel,f=this,u=[],y=[],M=0,v=this.props.animationModel.state.keyframes;return v.layers.forEach(function(s){var l=f.props.animationModel.isLayerSelected(s.id)?f.props.animationModel.uiState.currentKeyframe:void 0,d=void 0;void 0!==f.keyframesUpserted&&-1!==a.indexOf(f.keyframesUpserted.layers,s)&&(d=f.keyframesUpserted.keyframeTime),u.push(t.createElement(i,{key:s.id,type:s.type,keyframesExceeded:e.keyframesExceeded,upserted:d,selected:l,totalWidth:r,layerId:s.id,animationModel:c,totalFrames:n,keyframes:s.keyframes,latestHash:e.props.animationModel.undoRedo.latestHash})),y.push(t.createElement(o,{tabIndex:200+M,animationModel:c,odd:M++%2===0,key:s.id,layerId:s.id}))}),this.keyframesUpserted=void 0,t.createElement("div",{style:p.timeline,className:"animation-timeline"},t.createElement(l,{animationModel:this.props.animationModel,timelineWidth:this.props.width,timelineHeight:this.props.height}),t.createElement("div",{style:p.container,className:"animation-timeline-container"},t.createElement("div",{style:p.headerAnchor,onMouseDownCapture:this.onMouseDown},t.createElement(s,{offset:this.state.headerOffset,channelWidth:r,width:this.props.width,height:this.props.height+22,labelWidth:m,totalFrames:n,animationModel:this.props.animationModel})),t.createElement("div",{style:p.labelsAnchor},t.createElement("div",{style:p.labels,className:"animation-channel-labels-container"},y)),t.createElement("div",{style:p.channelsContainer},t.createElement("div",{style:p.channels,className:"animation-timeline-channels"},t.createElement("div",{style:p.indicator,className:"animation-timeline-indicator-line"}),u))))}});module.exports=d; |