dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/Editor.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18
  19 import Logger from '../../common/Logger';
  20 import Common from '../../common/Common';
  21 import Designer from './components/designer/Designer';
  22 import Toolbar from './components/toolbar/Toolbar';
  23 import Source from './components/source/Source';
  24
  25 /**
  26  * Editor view, aggregating the designer, the code editor, the toolbar.
  27  */
  28 export default class Editor extends React.Component {
  29
  30   // ///////////////////////////////////////////////////////////////////////////////////////////////
  31
  32   /**
  33    * Construct React view.
  34    * @param props properties.
  35    * @param context context.
  36    */
  37   constructor(props, context) {
  38     super(props, context);
  39
  40     this.application = Common.assertNotNull(props.application);
  41     this.demo = this.application.getOptions().demo;
  42
  43     // Bindings.
  44
  45     this.selectMessage = this.selectMessage.bind(this);
  46     this.selectLifeline = this.selectLifeline.bind(this);
  47
  48     this.onMouseDown = this.onMouseDown.bind(this);
  49     this.onMouseUp = this.onMouseUp.bind(this);
  50     this.onMouseMove = this.onMouseMove.bind(this);
  51   }
  52
  53   // ///////////////////////////////////////////////////////////////////////////////////////////////
  54
  55   /**
  56    * Select message by ID.
  57    * @param id message ID.
  58    */
  59   selectMessage(id) {
  60     if (this.designer) {
  61       this.designer.selectMessage(id);
  62     }
  63   }
  64
  65   // ///////////////////////////////////////////////////////////////////////////////////////////////
  66
  67   /**
  68    * Select lifeline by ID.
  69    * @param id lifeline ID.
  70    */
  71   selectLifeline(id) {
  72     if (this.designer) {
  73       this.designer.selectLifeline(id);
  74     }
  75   }
  76
  77   // ///////////////////////////////////////////////////////////////////////////////////////////////
  78
  79   /**
  80    * Record that we're dragging.
  81    */
  82   onMouseDown() {
  83     if (this.editor) {
  84       this.resize = {
  85         initialWidth: this.editor.offsetWidth,
  86         initialPageX: undefined,
  87       };
  88     }
  89   }
  90
  91   // ///////////////////////////////////////////////////////////////////////////////////////////////
  92
  93   /**
  94    * Record that we're not dragging.
  95    */
  96   onMouseUp() {
  97     this.resize = undefined;
  98   }
  99
 100   // ///////////////////////////////////////////////////////////////////////////////////////////////
 101
 102   /**
 103    * Record mouse movement.
 104    */
 105   onMouseMove(event) {
 106     if (this.resize) {
 107       if (this.editor) {
 108         if (this.resize.initialPageX) {
 109           const deltaX = event.pageX - this.resize.initialPageX;
 110           const newWidth = this.resize.initialWidth + deltaX;
 111           const newWidthBounded = Math.min(800, Math.max(400, newWidth));
 112           this.editor.style.width = `${newWidthBounded}px`;
 113         } else {
 114           this.resize.initialPageX = event.pageX;
 115         }
 116       }
 117     }
 118   }
 119
 120   // ///////////////////////////////////////////////////////////////////////////////////////////////
 121
 122   /**
 123    * Render editor.
 124    */
 125   render() {
 126
 127     Logger.info('Editor.jsx - render()');
 128
 129     return (
 130
 131       <div
 132         className="asdcs-editor"
 133         ref={(r) => { this.editor = r; }}
 134       >
 135
 136         <Toolbar application={this.props.application} editor={this} />
 137
 138         <div className="asdcs-editor-content">
 139           <Source application={this.props.application} />
 140           <Designer
 141             application={this.props.application}
 142             ref={(r) => {
 143               if (r) {
 144                 this.designer = r.getDecoratedComponentInstance();
 145               } else {
 146                 this.designer = null;
 147               }
 148             }}
 149           />
 150         </div>
 151
 152         <div className="asdcs-editor-statusbar">
 153           <div className="asdcs-editor-status"></div>
 154           <div className="asdcs-editor-validation"></div>
 155         </div>
 156
 157         <div
 158           className="asdcs-editor-resize-handle"
 159           onMouseDown={this.onMouseDown}
 160           onMouseUp={this.onMouseUp}
 161         >
 162         </div>
 163       </div>
 164     );
 165   }
 166 }
 167
 168 /** Element properties. */
 169 Editor.propTypes = {
 170   application: React.PropTypes.object.isRequired,
 171 };