1 line
5.3 KiB
JavaScript
1 line
5.3 KiB
JavaScript
"use strict";var e=function(e){return e&&e.__esModule?e["default"]:e},t=e(require("react")),a=e(require("../../../atom-react/components/float-input-view")),r=e(require("./color-picker/index")),i=require("color-space"),o=i.rgb,n=i.hsv,s=e(require("color-string")),l=0,h=t.createClass({displayName:"RGBInput",getInitialState:function(){var e=[Math.floor(this.props.value.r),Math.floor(this.props.value.g),Math.floor(this.props.value.b)];return{color:s.hexString(e),value:this.props.value}},updateFromDrag:function(e,t){var a=n.rgb([Math.round(t.h),Math.round(100*t.s),Math.round(100*t.v)]),r={r:Math.round(a[0]),g:Math.round(a[1]),b:Math.round(a[2])},i={};i[this.props.propName]=r,this.props.animationModel.updateSelectedLayerProperties(i)},updateFromHexString:function(e){var a=s.getRgb(e);if(a){var r={};r[this.props.propName]={r:a[0],g:a[1],b:a[2]},this.props.animationModel.updateSelectedLayerProperties(r)}else{var i=t.findDOMNode(this.refs.editor);i.getModel().setText(this.state.color)}},updateFromHsv:function(e){var t=n.rgb(e),a={r:Math.round(t[0]),g:Math.round(t[1]),b:Math.round(t[2])},r={};r[this.props.propName]=a,this.props.animationModel.updateSelectedLayerProperties(r)},_hsvFromState:function(){var e=o.hsv([this.state.value.r,this.state.value.g,this.state.value.b]);return e},_clamp:function(e){return e},onRChange:function(e){var t={};t[this.props.propName]={r:this._clamp(e,0,255),g:this.state.g,b:this.state.b},this.props.animationModel.updateSelectedLayerProperties(t)},onGChange:function(e){var t={};t[this.props.propName]={r:this.state.r,g:this._clamp(e,0,255),b:this.state.b},this.props.animationModel.updateSelectedLayerProperties(t)},onBChange:function(e){var t={};t[this.props.propName]={r:this.state.r,g:this.state.g,b:this._clamp(e,0,255)},this.props.animationModel.updateSelectedLayerProperties(t)},onHChange:function(e){var t=this._hsvFromState();t[0]=this._clamp(Math.round(e),0,360),this.updateFromHsv(t)},onSChange:function(e){var t=this._hsvFromState();t[1]=this._clamp(Math.round(e),0,100),this.updateFromHsv(t)},onVChange:function(e){var t=this._hsvFromState();t[2]=this._clamp(Math.round(e),0,100),this.updateFromHsv(t)},componentWillReceiveProps:function(e){var a=[Math.round(e.value.r),Math.round(e.value.g),Math.round(e.value.b)],r=s.hexString(a),i=t.findDOMNode(this.refs.editor);i.getModel().setText(r),this.setState({color:r,value:{r:a[0],g:a[1],b:a[2]}})},componentWillUnmount:function(){this.disposable.dispose()},componentDidMount:function(){var e=t.findDOMNode(this.refs.editor);this.disposable=atom.commands.add(e,"core:confirm",function(){e.blur()})},onRgbConfirm:function(){var e=t.findDOMNode(this.refs.editor),a=e.getModel().getText();this.updateFromHexString(a)},render:function(){var e=this,i=this.props.animationModel.getKeyframeInfo(),o=this.props.animationModel.getSelectedLayer(),n=i.layerTypes[o.type].getInfo(),s=this.props.tabIndex,l=this._hsvFromState();return t.createElement("div",{className:"hsv-input",style:{"float":"right"}},t.createElement(r,{saturationWidth:150,saturationHeight:150,value:this.state.color,width:150,onDrag:this.updateFromDrag}),t.createElement("div",{style:{display:"flex","float":"right",clear:"both",marginTop:15}},t.createElement("div",{style:{fontSize:14,margin:2}},"rgb"),t.createElement("atom-text-editor",{mini:!0,ref:"editor",onBlur:this.onRgbConfirm,style:{width:150,"float":"left"}},this.state.color)),t.createElement("div",{style:{display:"flex","float":"right",clear:"both",marginTop:15}},t.createElement("div",{className:"btn",style:{marginRight:5},onClick:function(){var t={};for(var a in n.properties)t[a]=n.properties[a].defaultValue;e.props.animationModel.updateSelectedLayerProperties(t),e.props.animationModel.addRedoUndoEntry()}},t.createElement("i",{className:"fa fa-refresh"})),t.createElement("div",{style:{"float":"left"}},[t.createElement("div",{style:{display:"flex"}},t.createElement("div",{style:{fontSize:14,margin:2,width:10}},"r"),t.createElement(a,{step:1,style:{clear:"both",maxWidth:150},onChange:this.onRChange,value:this.state.value.r,precision:0,tabIndex:s})),t.createElement("div",{style:{display:"flex"}},t.createElement("div",{style:{fontSize:14,margin:2,width:10}},"g"),t.createElement(a,{step:1,style:{clear:"both",maxWidth:150},onChange:this.onGChange,value:this.state.value.g,precision:0,tabIndex:s+1})),t.createElement("div",{style:{display:"flex"}},t.createElement("div",{style:{fontSize:14,margin:2,width:10}},"b"),t.createElement(a,{step:1,style:{clear:"both",maxWidth:150},onChange:this.onBChange,value:this.state.value.b,precision:0,tabIndex:s+2})),t.createElement("div",{style:{height:10}}),t.createElement("div",{style:{display:"flex"}},t.createElement("div",{style:{fontSize:14,margin:2,width:10}},"h"),t.createElement(a,{step:1,style:{clear:"both",maxWidth:150},onChange:this.onHChange,value:l[0],precision:0,tabIndex:s+3})),t.createElement("div",{style:{display:"flex"}},t.createElement("div",{style:{fontSize:14,margin:2,width:10}},"s"),t.createElement(a,{step:1,style:{clear:"both",maxWidth:150},onChange:this.onSChange,value:l[1],precision:0,tabIndex:s+4})),t.createElement("div",{style:{display:"flex"}},t.createElement("div",{style:{fontSize:14,margin:2,width:10}},"v"),t.createElement(a,{step:1,style:{clear:"both",maxWidth:150},onChange:this.onVChange,value:l[2],precision:0,tabIndex:s+5}))])))}});module.exports=function(e,a,r,i,o){return t.createElement(h,{propName:e,value:a,tabIndex:r,defaultValue:i,animationModel:o})}; |