dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/designer/components/message/Messages.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 Common from '../../../../../../common/Common';
  20
  21 import Message from './Message';
  22 import MessageNew from './MessageNew';
  23
  24 /**
  25  * Messages container, facilitating DND.
  26  * @param props lifeline element properties.
  27  * @returns {*}
  28  * @constructor
  29  */
  30 export default class Messages extends React.Component {
  31
  32   // ///////////////////////////////////////////////////////////////////////////////////////////////
  33
  34   /**
  35    * Construct view.
  36    * @param props element properties.
  37    * @param context react context.
  38    */
  39   constructor(props, context) {
  40     super(props, context);
  41     this.state = {
  42     };
  43     this.setHoverIndex = this.setHoverIndex.bind(this);
  44     this.getHoverIndex = this.getHoverIndex.bind(this);
  45   }
  46
  47   // ///////////////////////////////////////////////////////////////////////////////////////////////
  48
  49   /**
  50    * Record last hover index as non-state.
  51    * @param index index.
  52    */
  53   setHoverIndex(index) {
  54     this.hoverIndex = index;
  55   }
  56
  57   // ///////////////////////////////////////////////////////////////////////////////////////////////
  58
  59   /**
  60    * Get last recorded hover index.
  61    * @returns {*}
  62    */
  63   getHoverIndex() {
  64     return this.hoverIndex;
  65   }
  66
  67   // ///////////////////////////////////////////////////////////////////////////////////////////////
  68
  69   /**
  70    * Handle drop.
  71    * @param dragIndex dragged item index; undefined if new.
  72    * @param hoverIndex drop index.
  73    */
  74   onDrop(dragIndex, hoverIndex) {
  75     if (hoverIndex >= 0) {
  76       const application = this.props.application;
  77       const model = application.getModel();
  78       if (Common.isNumber(dragIndex)) {
  79         if (dragIndex !== hoverIndex) {
  80           model.reorderMessages(dragIndex, hoverIndex);
  81         }
  82       } else {
  83         model.addMessage(hoverIndex);
  84       }
  85       this.forceUpdate();
  86       application.renderDiagram();
  87     }
  88   }
  89
  90   // ///////////////////////////////////////////////////////////////////////////////////////////////
  91
  92   /**
  93    * Render view.
  94    * @returns {*}
  95    */
  96   render() {
  97
  98     const model = this.props.application.getModel();
  99     const diagram = model.unwrap().diagram;
 100
 101     // Render existing messages.
 102
 103     const messages = [];
 104     for (const step of diagram.steps) {
 105       const message = step.message;
 106       const from = model.getLifelineById(message.from);
 107       const to = model.getLifelineById(message.to);
 108       messages.push(<Message
 109         key={`m${message.id}`}
 110         application={this.props.application}
 111         designer={this.props.designer}
 112         message={message}
 113         active={this.props.activeMessageId === message.id}
 114         from={from}
 115         to={to}
 116         model={model}
 117         index={messages.length}
 118         messages={this}
 119       />);
 120     }
 121
 122     // Render add.
 123
 124     messages.push(<MessageNew
 125       key="_m"
 126       designer={this.props.designer}
 127       messages={this}
 128     />);
 129
 130     return (
 131       <div className="asdcs-designer-steps">
 132         {messages}
 133       </div>
 134     );
 135   }
 136 }
 137
 138 /** Element properties. */
 139 Messages.propTypes = {
 140   application: React.PropTypes.object.isRequired,
 141   designer: React.PropTypes.object.isRequired,
 142   activeMessageId: React.PropTypes.string,
 143 };