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 const CatalogItemCanvasEditor = React.createClass({
  31         mixins: [PureRenderMixin],
  32         getInitialState() {
  33                 return {
  34                         graph: null
  35                 };
  36         },
  37         getDefaultProps() {
  38                 return {
  39                         zoom: 100,
  40                         containers: [],
  41                         isShowingMoreInfo: false
  42                 };
  43         },
  44         componentWillMount() {
  45         },
  46         componentDidMount() {
  47                 const element = ReactDOM.findDOMNode(this.refs.descriptorGraph);
  48                 const options = {
  49                         zoom: this.props.zoom
  50                 };
  51                 const graph = new DescriptorGraph(element, options);
  52                 graph.containers = this.props.containers;
  53                 this.setState({graph: graph});
  54         },
  55         componentDidUpdate() {
  56                 this.state.graph.containers = this.props.containers;
  57                 const isNSD = this.props.containers[0] && this.props.containers[0].uiState.type === 'nsd';
  58                 if (isNSD) {
  59                         this.state.graph.showMoreInfo = this.props.isShowingMoreInfo;
  60                 } else {
  61                         this.state.graph.showMoreInfo = true;
  62                 }
  63                 this.state.graph.update();
  64         },
  65         componentWillUnmount() {
  66                 this.state.graph.destroy();
  67         },
  68         render() {
  69                 const graph = this.state.graph;
  70                 if (graph) {
  71                         graph.zoom(this.props.zoom);
  72                 }
  73                 return (
  74                         <div data-offset-parent="true" className="CatalogItemCanvasEditor">
  75                                 <div key="outline-indicator" data-outline-indicator="true"></div>
  76                                 <div id='canvas-dropzone' style={{visibility: 'hidden'}}></div>
  77                                 <div ref="descriptorGraph" className="DescriptorGraph"></div>
  78                         </div>
  79                 );
  80         }
  81 });
  82
  83 export default CatalogItemCanvasEditor;