refactoring to fireButton

CCMi-FIT · Aug 18, 2019 · 4313dcb · 4313dcb
1 parent 794d51a
commit 4313dcb
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 43 deletions.
diff --git a/app/diagram.js b/app/diagram.js
@@ -11,6 +11,18 @@ export type VisId = string;
 export type VisLabel = string;
 export type VisColor = string;
 
+export type Coords = {
+  x: number,
+  y: number
+};
+
+type BoundingBox = {
+  top: number,
+  left: number,
+  right: number,
+  bottom: number
+};
+
 export type VisNode = { 
   id: VisId,
   label: VisLabel,
@@ -39,6 +51,13 @@ export type Layout = {
   [key: Id]: { x: number, y: number}
 }
 
+export function getBoundingBox(network: any, nodeId: Id): BoundingBox {
+  const bb: BoundingBox = network.getBoundingBox(nodeId);
+  const topLeft = network.canvasToDOM({x: bb.left, y: bb.top});
+  const bottomRight = network.canvasToDOM({x: bb.right, y: bb.bottom});
+  return { left: topLeft.x, right: bottomRight.x, top: topLeft.y, bottom: bottomRight.y };
+}
+
 export function renderEntity(e: UfoaEntity) {
   return (
     <div className="entity-box" style={{backgroundColor: ufoaMeta.entityColor(e)}}>

diff --git a/app/simulation/view/diagram.js b/app/simulation/view/diagram.js
@@ -210,7 +210,6 @@ export function colorise(ufobVisModel: VisModel, machine: any) {
           ufobVisModel.nodes.update({ id: n.id, color: unvisitedCol });
         }
         break;
-      default: throw("colorise: unknown node type " + n.type);
     }
   });
 }

diff --git a/app/simulation/view/dispatch.js b/app/simulation/view/dispatch.js
@@ -3,55 +3,58 @@
 import NanoEvents from 'nanoevents';
 import type { Id } from '../../metamodel';
 import type { VisModel } from '../../diagram';
-import * as ufobDB from '../../ufob/db';
-import * as diagram from './diagram';
-import * as panels from '../../panels';
 
 var ufoBDiagramEmmiter = new NanoEvents();
+const EVENT_CLICK = "eventClick";
+const SITUATION_CLICK = "situationClick";
+const UNSELECTED = "unselected";
+const DRAG_START = "dragStart";
+const ZOOM = "zoom";
 
-export function addUfoBDiagramClickHandler(handler: any) {
-  ufoBDiagramEmmiter.on("ufobClick", handler);
+// Event handlers {{{1
+export function addEventClickHandler(handler: (Id) => void) {
+  ufoBDiagramEmmiter.on(EVENT_CLICK, (evId: Id) => handler(evId));
 }
 
-async function handleEvent(evId: Id, machine: any, ufobVisModel: VisModel, ufoaInstVisModel: VisModel, ufoaInstNetwork: any) {
-  let ev = ufobDB.getUfobEventById(evId);               
-  if (ev) {
-    $(`#${panels.wmdaTitleId}`).html(ev.ev_name);
-    $(`#${panels.wmdaPanelId}`).html(ev.ev_wmda_text);
-  } else {
-    console.error(`Inconsistency: event ${evId} not present in the model`);
-  }
-  if (machine.isInPresent()) {
-    await diagram.doStep(machine, ufobVisModel, ufoaInstVisModel, ufoaInstNetwork, evId);
-    ufoBDiagramEmmiter.emit("ufobClick");
-  } else {
-    panels.displayError("You are currently viewing a non-last state. Move to it first to make the transition.");
-  }
+export function addSituationClickHandler(handler: (Id) => void) {
+  ufoBDiagramEmmiter.on(SITUATION_CLICK, (sId: Id) => handler(sId));
 }
 
-function handleSituation(sId: Id) {
-  let s = ufobDB.getSituationById(sId);               
-  if (s) {
-    $(`#${panels.wmdaTitleId}`).html(s.s_name);
-    $(`#${panels.wmdaPanelId}`).html(s.s_wmda_text);
-  } else {
-    console.error(`Inconsistency: situation${sId} not present in the model`);
-  }
+export function addUnselectHandler(handler: () => void) {
+  ufoBDiagramEmmiter.on(UNSELECTED, handler);
+}
+
+export function addDragStartHandler(handler: () => void) {
+  ufoBDiagramEmmiter.on(DRAG_START, handler);
+}
+
+export function addZoomHandler(handler: () => void) {
+  ufoBDiagramEmmiter.on(ZOOM, handler);
 }
 
-export function dispatchUfoBDiagramClick(machine: any, ufobVisModel: VisModel, simUfobNetwork: any,  ufoaInstVisModel: VisModel, ufoaInstNetwork: any, params: any) {
+// Registering functions {{{1
+
+function dispatchUfoBDiagramClick(ufobVisModel: VisModel, params: any) {
   const nodeId = params.nodes[0];
   if (nodeId) {
     const node = ufobVisModel.nodes.get(nodeId);
     if (node.type === "event") {
-      handleEvent(nodeId, machine, ufobVisModel, ufoaInstVisModel, ufoaInstNetwork);
+      ufoBDiagramEmmiter.emit(EVENT_CLICK, nodeId);
     } else { // situation ... hopefully
       if (node.type === "situation") {
-        handleSituation(nodeId);
+        ufoBDiagramEmmiter.emit(SITUATION_CLICK, nodeId);
       } else {
         console.error("Unknown UFO-B diagram node type: " + node.type);
       }
     }
+  } else {
+    ufoBDiagramEmmiter.emit(UNSELECTED);
   }
 }
+export function registerHandlers(ufobVisModel: VisModel, simUfobNetwork: any) {
+  simUfobNetwork.on("click", params => dispatchUfoBDiagramClick(ufobVisModel, params));
+  simUfobNetwork.on("dragStart", () => ufoBDiagramEmmiter.emit(DRAG_START));
+  simUfobNetwork.on("zoom", () => ufoBDiagramEmmiter.emit(ZOOM));
+}
+
 
diff --git a/app/simulation/view/panel.js b/app/simulation/view/panel.js
@@ -6,10 +6,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import SplitPane from 'react-split-pane';
 import { Tabs, Tab } from '../../components';
+import type { Id } from '../../metamodel.js';
 import type { Situation } from '../../ufob/metamodel';
-import type { UfobEventInst } from '../../ufob-inst/metamodel';
 import * as ufobDB from '../../ufob/db';
-import * as diagram from './diagram';
+import * as diagram from '../../diagram';
+import * as simDiagram from './diagram';
 import { cloneVisModel } from '../../diagram';
 import * as machine from './../machine';
 import * as panels from '../../panels';
@@ -18,13 +19,15 @@ import * as ufoaInstDiagram from '../../ufoa-inst/view/diagram';
 import type { VisModel } from '../../diagram';
 import * as dispatch from './dispatch';
 
-//import { counter as Counter } from '../../purescript/Counter';
 
 // Decls {{{1
 
 type Props = { };
 type State = {
-  showTimeline: bool
+  showTimeline: boolean,
+  fireButtonPos: {left: number, top: number},
+  fireButtonVisible: boolean,
+  eventToFire: ?Id
 };
 
 var ufobVisModel: any = null;
@@ -33,24 +36,80 @@ var simUfobNetwork: any = null;
 var ufoaInstVisModel: any = null;
 var ufoaInstNetwork: any = null;
 
+// Handling {{{1
+
+function setWmdaTab(heading: string, body: string) {
+  $(`#${panels.wmdaTitleId}`).html(heading);
+  $(`#${panels.wmdaPanelId}`).html(body);
+}
+
 // Component {{{1
 
 class SimulationBox extends panels.PaneDialog<Props, State> {
 
   constructor(props) {
     super(props);
     this.state = {
-      showTimeline: false
+      showTimeline: false,
+      fireButtonPos: {left: 0, top: 0},
+      fireButtonVisible: false,
+      eventToFire: null
     };
-    dispatch.addUfoBDiagramClickHandler(this.ufobDiagramClicked);
+    dispatch.addEventClickHandler(this.clickEventEv);
+    dispatch.addSituationClickHandler(this.clickSituationEv);
+    dispatch.addUnselectHandler(this.hideFireButton);
+    dispatch.addDragStartHandler(this.hideFireButton);    
+    dispatch.addZoomHandler(this.hideFireButton);    
   }
 
+
   // Events {{{2
-  ufobDiagramClicked = () => {
-    this.forceUpdate();
+
+  showFireButton = (evId: Id) => {
+    const bb = diagram.getBoundingBox(simUfobNetwork, evId);
+    const height = bb.bottom - bb.top;
+    const fbPos = { left: bb.right, top: bb.top + (height / 2) + 20};
+    this.setState({ fireButtonPos: fbPos, fireButtonVisible: true, eventToFire: evId });
+  }
+
+  clickEventEv = (evId: Id) => {
+    this.showFireButton(evId);
+    let ev = ufobDB.getUfobEventById(evId);               
+    if (ev) {
+      setWmdaTab(ev.ev_name, ev.ev_wmda_text);
+    } else {
+      console.error(`Inconsistency: event ${evId} not present in the model`);
+    }
+  }
+
+  clickSituationEv = (sId: Id) => {
+    let s = ufobDB.getSituationById(sId);               
+    if (s) {
+      setWmdaTab(s.s_name, s.s_wmda_text);
+    } else {
+      throw(`Inconsistency: situation${sId} not present in the model`);
+    }
   }
 
   // Actions {{{2
+  hideFireButton = () => {
+    this.setState({ fireButtonVisible: false, eventToFire: null });
+    simUfobNetwork.unselectAll();
+  }
+
+  fireEvent = () => {
+    if (machine.isInPresent()) {
+      const evId = this.state.eventToFire;
+      if (evId) {
+        simDiagram.doStep(machine, ufobVisModel, ufoaInstVisModel, ufoaInstNetwork, evId);
+      } else {
+        throw("eventToFire is null, this should not happen");
+      }
+    } else {
+      panels.displayError("You are currently viewing a non-last state. Move to it first to make the transition.");
+    }
+  }
+
   switchCurrentSituation = (s: Situation) => {
     ufoaInstVisModel = ufoaInstDiagram.newVis();
     const ufoaInstDiagramContainer = panels.getSimInstDiagram();
@@ -70,7 +129,7 @@ class SimulationBox extends panels.PaneDialog<Props, State> {
       console.error("moveToCurrent(): non-existent event instance found");
     } else {
       // $FlowFixMe
-      diagram.colorise(ufobVisModel, machine);
+      simDiagram.colorise(ufobVisModel, machine);
     }
     this.forceUpdate();
   }
@@ -86,6 +145,7 @@ class SimulationBox extends panels.PaneDialog<Props, State> {
       <ul key={s.s_id} className="list-group list-group-flush">
         <li className={"list-group-item pr-0 pt-0 pb-0" + (!isCurrent ? " clickable-log" : "")}
           onClick={() => { 
+            //TODO
             this.switchCurrentSituation(s);
             this.forceUpdate();
           }}
@@ -153,12 +213,37 @@ class SimulationBox extends panels.PaneDialog<Props, State> {
     );
   }
 
+  renderFireButton = () => {
+    return (
+      this.state.fireButtonVisible ? 
+      (<button 
+      id="fire-button"
+      type="button"
+      className="btn btn-danger"
+      data-toggle="tooltip" data-placement="right" title="Play event"
+      style={{
+        position: "absolute",
+        left: this.state.fireButtonPos.left,
+        top: this.state.fireButtonPos.top,
+        width: "40px",
+        height: "40px",
+        padding: "6px",
+        fontSize: "12px",
+        borderRadius: "50%"}}
+      onClick={this.fireEvent}>
+        <i className="fas fa-play"></i>
+      </button>)
+      : ""
+    );
+  }
+
   renderSimulationPane() {
     return (
       <div>
         {this.renderSimulationToolbar()}
         {this.renderTimeline()}
         <div id={panels.simUfobDiagramId}></div>
+        {this.renderFireButton()}
       </div>
     );
   }
@@ -206,8 +291,8 @@ class SimulationBox extends panels.PaneDialog<Props, State> {
         <div className="container-fluid">
           <div className="row">
             <div className="col">
-              <h2 id={panels.wmdaTitleId}></h2> {/*Populated by dispatch*/}
-              <div id={panels.wmdaPanelId} style={{ paddingTop: "10px" }}></div> {/*Populated by dispatch*/}
+              <h2 id={panels.wmdaTitleId}></h2> {/*Populated by dispatch.setWmdaTab()*/}
+              <div id={panels.wmdaPanelId} style={{ paddingTop: "10px" }}></div> {/*Populated by dispatch.setWmdaTab()*/}
             </div>
           </div>
         </div>
@@ -242,7 +327,7 @@ export function initialize(ufobVisModel1: VisModel) {
       simUfobNetwork = ufobDiagram.renderUfob(ufobVisModel, simUfobDiagramContainer);
       ufoaInstNetwork = ufoaInstDiagram.renderUfoaInst(ufoaInstDiagramContainer, ufoaInstVisModel);
       simUfobNetwork.setOptions({ manipulation: false });
-      simUfobNetwork.on("click", params => dispatch.dispatchUfoBDiagramClick(machine, ufobVisModel, simUfobNetwork, ufoaInstVisModel, ufoaInstNetwork, params));
+      dispatch.registerHandlers(ufobVisModel, simUfobNetwork);
       simUfobNetwork.fit();
     }
   }

diff --git a/bin/deploy.sh b/bin/deploy.sh
@@ -6,6 +6,7 @@ rm -rf dist/*
 npm run server:build
 rm -rf public/*
 npm run client:build
+
 rsync -rvLz -e ssh bin dist node_modules public [email protected]:$D
 #rsync -rvLz -e ssh data [email protected]:$D
 rsync -rvLz --ignore-existing -e ssh data [email protected]:$D
-Original file line number
+Diff line change
@@ Expand Up @@
               ufobVisModel.nodes.update({ id: n.id, color: unvisitedCol });
             }
             break;
-          default: throw("colorise: unknown node type " + n.type);
         }
       });
     }
@@ Expand Down @@