Fleet Schedule

SketchSystems.spec

Fleet Schedule
  onMouseInVessel -> Vessel Active
  onMouseInRequirement -> Requirement Active
  onMouseOutVessel -> Idle
  onMouseOutRequirement -> Idle

  Idle*
  
  Vessel Active
    onVesselClick -> Vessel In Details Panel        
    
  Vessel In Details Panel    
    onRightClick -> Vessel Unassignment in Details Panel
    onMouseOutVessel*
    Vessel Unassignment in Details Panel

  Requirement Active
    onRequirementClick -> Click Requirement
    onDrag -> Dragging
    
  Click Requirement
  Right Click Requirement
  
  Dragging
    onDrop -> Drop
  Drop

SketchSystems_prototype.js

function render(model){

  var activeStates = model.active_states.map(x => x.name);
  
  return $('div',
            $('div', {style: {position: "relative", left: 50, top: 30, padding: 40, margin: 30, fontFamily: "sans-serif" },
                        draggable: false,
                        onClick: function(){ model.emit("onVesselClick") },
                        onMouseEnter: function(){ model.emit('onMouseInVessel')},
                        onMouseLeave: function(){ model.emit('onMouseOutVessel')},
                       },

                 `${activeStates.join(",")}`) ,
           $('button', {style: {position: "relative", left: 50, top: 30, padding: 40, margin: 30, fontFamily: "sans-serif" },
                        draggable: false,
                        onClick: function(){ model.emit("onVesselClick") },
                        onMouseEnter: function(){ model.emit('onMouseInVessel')},
                        onMouseLeave: function(){ model.emit('onMouseOutVessel')},
                       },

                 `Vessel`) ,
           
           $('button', {style: {position: "relative", left: 50, top: 30, padding: 40, margin: 30, fontFamily: "sans-serif"},
                        draggable: true,
                        onClick: function(){ model.emit("onRequirementClick") },
                        onMouseEnter: function(){ model.emit('onMouseInRequirement')},
                        onMouseLeave: function(){ model.emit('onMouseOutRequirement')},
                        onDragStart: function(){ model.emit('onDrag')},
                        onDragEnd: function(){ model.emit('onDrop')},
                       },

                 `Requirement`) 
          );

}