1 line
7.9 KiB
JavaScript
1 line
7.9 KiB
JavaScript
"use strict";var e=function(e){return e&&e.__esModule?e["default"]:e},t=e(require("react")),a=require("react/addons").addons.PureRenderMixin,$=e(require("jquery")),o=require("atom").CompositeDisposable,r=e(require("../../common/find-node")),n=new AudioContext,i=e(require("path")),s=void 0,d=void 0,l=!1,m=void 0,c=t.createClass({displayName:"KeyframeSlotView",mixins:[a],componentDidMount:function(){this.disposable=new o,this.disposable.add(atom.commands.add(this.getDOMNode(),{"jibo-sdk:delete-keyframe":this._deleteKeyframe,"jibo-sdk:add-keyframe":this._addKeyframe,"jibo-sdk:cut-keyframe":this._cutKeyframe,"jibo-sdk:copy-keyframe":this._copyKeyframe,"jibo-sdk:paste-keyframe":this._pasteKeyframe})),this.getDOMNode().keyframeSlotView=this,this.onDropCB=this.onDrop.bind(this),this.getDOMNode().addEventListener("drop",this.onDropCB,!0),this.renderWaveform(this.props)},componentWillUnmount:function(){this.disposable.dispose(),this.getDOMNode().removeEventListener("drop",this.onDropCB)},onMouseDown:function(e){1===e.nativeEvent.which&&this.props.animationModel.keyframeSelection.onMouseDown(e,this.props.layerId,this.props.keyframeIndex)},onMouseClick:function(e){1===e.nativeEvent.which&&this.props.animationModel.keyframeSelection.onClick(e,this.props.layerId,this.props.keyframeIndex)},componentWillReceiveProps:function(e){this.props.exists||e.exists!==!0?this.props.exists!==!0||e.exists?"undefined"!=typeof e.upserted&&$(this.getDOMNode().childNodes[0]).stop(!0,!0).css({display:"inline-block",backgroundColor:"white"}).fadeIn(100).fadeOut(200):$(this.getDOMNode().childNodes[0]).stop(!0,!0).css({backgroundColor:"#AF2B2B",display:"inline-block"}).fadeIn(100).fadeOut(200):$(this.getDOMNode().childNodes[0]).stop(!0,!0).css({backgroundColor:"#1F8BFF",display:"inline-block"}).fadeIn(200).fadeOut(200),this.renderWaveform(e)},renderWaveform:function(e){var a=this,o=e.animationModel,r=o.getLayer(e.layerId);if("Audio Event"===r.type&&e.exists){var s,d=function(){for(var d=null,l=0;l<r.keyframes.length;l++)if(r.keyframes[l].time===e.keyframeIndex){d=r.keyframes[l];break}var m=d.time/o.state.keyframes.framerate,c=o.audio.root,p=d.value.AudioEvent.file;if(!(p&&p.length>0))return{v:void 0};if(p===a.file)return{v:void 0};a.file=p;var f=i.resolve(c,"audio",p);a.clearCanvas(),s=new XMLHttpRequest,s.open("GET",f,!0),s.responseType="arraybuffer",s.onload=function(){n.decodeAudioData(s.response,function(e){var r=e.getChannelData(0),n=t.findDOMNode(a.refs.canvas),i=Math.min(o.state.keyframes.duration/o.state.keyframes.framerate-m,e.length/e.sampleRate);n.width=18*i*30,n.height=40;var s=n.getContext("2d");s.beginPath(),s.moveTo(0,20);for(var d=1/540,l=0,c=0;i>c;c+=d){var p=Math.floor(c*e.sampleRate);if(p<e.length){var f=r[p];s.lineTo(l,25*f+20)}l++}s.strokeStyle="#ffffff",s.stroke()})},s.send()}();if("object"==typeof d)return d.v}else{var l=t.findDOMNode(this.refs.canvas);l.width=0}},onDragStart:function(e){if(this.props.animationModel.keyframeSelection.isSelected(this.props.layerId,this.props.keyframeIndex)===!1)return void e.preventDefault();var a=t.findDOMNode(this.refs.canvas);a.width=0,a.height=0,l="win32"===process.platform?e.nativeEvent.shiftKey:e.nativeEvent.metaKey,m=l,e.dataTransfer.setData("animation-editor/keyframe-drop",JSON.stringify({layerId:this.props.layerId,keyframeIndex:this.props.keyframeIndex})),d={layerId:this.props.layerId,keyframeIndex:this.props.keyframeIndex},e.dataTransfer.effectAllowed="move"},onDragEnter:function(e){var t=this,a=this,o=e.dataTransfer.getData("animation-editor/keyframe-drop");if(""!==o){this.props.animationModel.setKeyframe(this.props.keyframeIndex),[].forEach.call(document.querySelectorAll(".animation-channel-keyframe-slot.drag-over"),function(e){e.classList.remove("drag-over")}),[].forEach.call(document.querySelectorAll(".animation-channel-keyframe-slot.drag-over-empty"),function(e){e.classList.remove("drag-over-empty")}),[].forEach.call(document.querySelectorAll(".animation-channel-keyframe-slot.drag-over-mismatched"),function(e){e.classList.remove("drag-over-mismatched")}),o=JSON.parse(o);var r=this.props.keyframeIndex-d.keyframeIndex,n=this.props.animationModel.getLayerIndex(this.props.layerId)-this.props.animationModel.getLayerIndex(d.layerId);this.props.animationModel.keyframeSelection.forEachSelected(!0,!0,function(e,o){var i=o+r,s=t.props.animationModel.getLayerIndex(e),d=s+n;0>i||i>=a.props.animationModel.getDuration()||0>d||d>=a.props.animationModel.getLayerCount()||(t.props.animationModel.getLayerByIndex(s).type!==t.props.animationModel.getLayerByIndex(d).type?a.getDOMNode().parentNode.parentNode.parentNode.childNodes[1+d].childNodes[0].childNodes[i].classList.add("drag-over-mismatched"):t.props.animationModel.keyframeExists(e,o)?a.getDOMNode().parentNode.parentNode.parentNode.childNodes[1+d].childNodes[0].childNodes[i].classList.add("drag-over"):a.getDOMNode().parentNode.parentNode.parentNode.childNodes[1+d].childNodes[0].childNodes[i].classList.add("drag-over-empty"))}),s={layerId:this.props.layerId,keyframeIndex:this.props.keyframeIndex}}},onDragLeave:function(){delete this.getDOMNode().style.background},clearDragOverClasses:function(){for(var e=document.getElementsByClassName("animation-channel-keyframes"),t=0;t<e.length;t++)for(var a=0;a<e[t].childNodes.length;a++)e[t].childNodes[a].classList.remove("drag-over"),e[t].childNodes[a].classList.remove("drag-over-empty"),e[t].childNodes[a].classList.remove("drag-over-mismatched")},onDrop:function(){m=!0},onDragEnd:function(e){s&&m&&e.nativeEvent.target.classList.contains("animation-channel-keyframe-slot")&&this.props.animationModel.keyframeSelection.moveSelection(d,s,l),s=null,this.clearDragOverClasses(),document.querySelector(".active .animation-editor").childNodes[0].focus()},clearCanvas:function(){var e=t.findDOMNode(this.refs.canvas),a=e.getContext("2d");a.clearRect(0,0,e.width,e.height)},render:function(){var e={},a="animation-channel-keyframe-slot native-key-bindings";return this.props.selected&&(a+=" selected"),a+=this.props.exists?" exists":" not-exists",this.props.marker&&(a+=" marker"),this.props.exceedsLimit&&(a+=" exceeds"),t.createElement("span",{draggable:"true",style:e,onDragStart:this.onDragStart,onDragEnd:this.onDragEnd,onDrop:this.onDrop,onDragEnter:this.onDragEnter,onDragLeave:this.onDragLeave,onClickCapture:this.onMouseClick,onMouseDownCapture:this.onMouseDown,className:a},t.createElement("span",{className:"slot-effect"}),t.createElement("span",{style:{position:"relative",width:0,height:0}},t.createElement("canvas",{width:0,height:0,ref:"canvas",style:{pointerEvents:"none",position:"absolute"}})))},_deleteKeyframe:function(){this.props.animationModel.keyframeSelection.deleteKeyframes()},_addKeyframe:function(){this.props.animationModel.addKeyByTime(this.props.layerId,this.props.keyframeIndex)},_cutKeyframe:function(){this.props.animationModel.keyframeSelection.cutSelectedKeyframes()},_copyKeyframe:function(){this.props.animationModel.keyframeSelection.copySelectedKeyframes()},_pasteKeyframe:function(){this.props.animationModel.keyframeSelection.pasteKeyframes(this.props.layerId,this.props.keyframeIndex)}});atom.contextMenu.add({".animation-channel-keyframe-slot.selected.exists":[{label:"Set Keyframe",command:"jibo-sdk:upsert-keyframe"}],".animation-channel-keyframe-slot.selected":[{label:"Delete Keyframe(s)",command:"jibo-sdk:delete-keyframe",shouldDisplay:function(e){var t=r.getAncestor(e.target,".animation-channel-keyframe-slot"),a=t?t.keyframeSlotView.props:void 0;return a&&a.animationModel.keyframeSelection.canDeleteKeyframes()}},{type:"separator"},{label:"Cut",command:"jibo-sdk:cut-keyframe"},{label:"Copy",command:"jibo-sdk:copy-keyframe"}],".animation-channel-keyframe-slot.not-exists":[{label:"Add Keyframe",command:"jibo-sdk:add-keyframe"},{type:"separator"}],".animation-channel-keyframe-slot":[{label:"Paste",command:"jibo-sdk:paste-keyframe",shouldDisplay:function(e){var t=r.getAncestor(e.target,".animation-channel-keyframe-slot"),a=t?t.keyframeSlotView.props:void 0;return a&&a.animationModel.keyframeSelection.canPasteKeyframes(a.layerId,a.keyframeIndex)}}]}),module.exports=c; |