skyquake/plugins/composer/src/src/components/CatalogItemCanvasEditor.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 ReactDOM from 'react-dom'
  23 import PureRenderMixin from 'react-addons-pure-render-mixin'
  24 import DescriptorGraph from '../libraries/graph/DescriptorGraph'
  25 import ComposerAppStore from '../stores/ComposerAppStore'
  26
  27 import '../styles/CatalogItemCanvasEditor.scss'
  28 import '../styles/DescriptorGraph.scss'
  29
  30 class CatalogItemCanvasEditor extends React.Component {
  31         constructor(props) {
  32                 super(props);
  33                 this.state = {
  34                         graph: null,
  35                         zoom: 100,
  36                         containers: [],
  37                         isShowingMoreInfo: false
  38                 };
  39         }
  40
  41         componentDidMount() {
  42                 const element = ReactDOM.findDOMNode(this.refs.descriptorGraph);
  43                 const options = {
  44                         zoom: this.props.zoom,
  45                         readOnly: this.props.readOnly
  46                 };
  47                 const graph = new DescriptorGraph(element, options);
  48                 graph.containers = this.props.containers;
  49                 this.setState({graph: graph});
  50         }
  51
  52         componentDidUpdate() {
  53                 this.state.graph.containers = this.props.containers;
  54                 const isNSD = this.props.containers[0] && this.props.containers[0].uiState.type === 'nsd';
  55                 if (isNSD) {
  56                         this.state.graph.showMoreInfo = this.props.isShowingMoreInfo;
  57                 } else {
  58                         this.state.graph.showMoreInfo = true;
  59                 }
  60                 this.state.graph.update();
  61         }
  62
  63         componentWillUnmount() {
  64                 this.state.graph.destroy();
  65         }
  66
  67         render() {
  68                 const graph = this.state.graph;
  69                 if (graph) {
  70                         graph.zoom(this.props.zoom);
  71                 }
  72                 return (
  73                         <div data-offset-parent="true" className="CatalogItemCanvasEditor">
  74                                 <div key="outline-indicator" data-outline-indicator="true"></div>
  75                                 <div id='canvas-dropzone' style={{visibility: 'hidden'}}></div>
  76                                 <div ref="descriptorGraph" className="DescriptorGraph"></div>
  77                         </div>
  78                 );
  79         }
  80 };
  81
  82 export default CatalogItemCanvasEditor;