skyquake/plugins/composer/src/src/components/CanvasZoom.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 'use strict';
  20
  21 import React from 'react'
  22 import Range from './Range'
  23 import numeral from 'numeral'
  24 import PureRenderMixin from 'react-addons-pure-render-mixin'
  25 import CanvasEditorActions from '../actions/CanvasEditorActions'
  26 import SelectionManager from '../libraries/SelectionManager'
  27
  28 import '../styles/CanvasZoom.scss'
  29
  30 const CanvasZoom = React.createClass({
  31         mixins: [PureRenderMixin],
  32         getInitialState: function () {
  33                 return {};
  34         },
  35         getDefaultProps: function () {
  36                 return {
  37                         min: 25,
  38                         max: 200,
  39                         zoom: 100,
  40                         defaultZoom: 100
  41                 };
  42         },
  43         componentWillMount: function () {
  44         },
  45         componentDidMount: function () {
  46         },
  47         componentDidUpdate: function () {
  48         },
  49         componentWillUnmount: function () {
  50         },
  51         render() {
  52                 const zoom = this.props.zoom || this.props.defaultZoom
  53                 const displayValue = numeral(zoom).format('0.0') + '%';
  54                 return (
  55                         <div ref="canvasZoom" className="CanvasZoom" style={this.props.style} onClick={event => event.preventDefault()}>
  56                                 <Range
  57                                            value={zoom} min={this.props.min} max={this.props.max}
  58                                            title="Zoom the canvas. Double Click to reset to 100%."
  59                                            onChange={this.onChange} onDoubleClick={this.onDblClick} />
  60                                 <span>{displayValue}</span>
  61                         </div>
  62                 );
  63         },
  64         onChange(event) {
  65                 const zoom = event.target.value;
  66                 CanvasEditorActions.setCanvasZoom(zoom);
  67         },
  68         onDblClick() {
  69                 const zoom = this.props.defaultZoom;
  70                 CanvasEditorActions.setCanvasZoom(zoom);
  71         }
  72 });
  73
  74 export default CanvasZoom;