boundingbox now optional

index.html

@@ -21,46 +21,60 @@
   <div id="wrapper">
     <div id="sidebar">
       <form>
-        <div class="row">
-          <div class="col-8">
-            <div class="form-group">
-              <label>host</label>
-              <input type="text" class="form-control" id="host" />
-            </div>
+        <div class="form-row">
+
+          <div class="form-group col-8">
+            <label>host</label>
+            <input type="text" class="form-control" id="host" />
           </div>
-          <div class="col-4">
-            <div class="form-group">
-              <label>port</label>
-              <input type="text" class="form-control" id="port" />
-            </div>
+
+          <div class="form-group col-4">
+            <label>port</label>
+            <input type="text" class="form-control" id="port" />
           </div>
-        </div>
-        <div class="form-group">
-          <label>endpoint</label>
-          <input type="text" class="form-control" id="endpoint" />
-        </div>
 
-        <div class="form-group">
-          <label>layers</label>
-          <select class="form-control" id="layersList" size="10"></select>
-          <button id="getLayers" class="btn btn-primary btn-block" type="button">Get Layers</button>
-        </div>
+          <div class="form-group col-12">
+            <label>endpoint</label>
+            <input type="text" class="form-control" id="endpoint" />
+          </div>
+
+          <div class="form-group col-12">
+            <label>layers</label>
+            <select class="form-control" id="layersList" size="10"></select>
+          </div>
+
+          <div class="form-group col-12">
+            <button id="getLayers" class="btn btn-primary btn-block" type="button">Get Layers</button>
+          </div>
+
+          <div class="form-group col-12">
+            <label>bounding box</label>
+            <input id="boundingBoxInput" type="text" class="form-control" />
+          </div>
+
+          <div class="form-group col-6">
+            <button id="setBoundingBox" class="btn btn-primary btn-block" type="button">Set</button>
+          </div>
+          
+          <div class="form-group col-6">
+            <button id="clearBoundingBox" class="btn btn-primary btn-block" type="button">Clear</button>
+          </div>
+
+          <div class="form-group col-12">
+            <label for="stylesList">style</label>
+            <select class="form-control" id="stylesList">
+              <option>Default</option>
+              <option>Node Level</option>
+            </select>
+          </div>
+
+          <div class="form-group col-12">
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="toggleFreezeScene" disabled>
+              <label class="form-check-label" for="toggleFreezeScene">Freeze Scene</label>
+            </div>
+          </div>
 
-        <div class="form-group">
-          <label>bounding box</label>
-          <input id="boundingBoxInput" type="text" class="form-control mb-2" />
-          <button id="setBoundingBox" class="btn btn-primary btn-block" type="button">Set</button>
-        </div>
-        <div class="form-group">
-          <label for="stylesList">style</label>
-          <select class="form-control" id="stylesList">
-            <option>Default</option>
-            <option>Node Level</option>
-          </select>
-        </div>
-        <div class="form-check">
-          <input type="checkbox" class="form-check-input" id="toggleFreezeScene" disabled>
-          <label class="form-check-label" for="toggleFreezeScene">Freeze Scene</label>
         </div>
       </form>
     </div>

lib/helpers/BoundingBox.js

@@ -10,6 +10,7 @@ define([
       this.mouseClicks = 0;
       this.lons = [];
       this.lats = [];
+      this.defined = false;
       this.bindedClickHandler = this.clickHandler.bind(this);
       this.bindedMoveHandler = this.moveHandler.bind(this);
       this.bindedDynaimcPropertyHandler = this.dynamicPropertyHandler.bind(this);
@@ -22,7 +23,6 @@ define([
     register: function () {
       let viewer = CesiumViewer.getViewer();
       viewer.scene.canvas.addEventListener('click', this.bindedClickHandler);
-
     },
 
     unregister: function () {
@@ -39,7 +39,7 @@ define([
       this.mouseClicks = 0;
       this.lons = [];
       this.lats = [];
-
+      this.defined = false;
       let viewer = CesiumViewer.getViewer();
       viewer.entities.removeById("bb");
       this.rectangle = new Cesium.Rectangle();
@@ -75,6 +75,7 @@ define([
         viewer.scene.canvas.removeEventListener('mousemove', this.bindedMoveHandler);
         this.lons = this.lons.sort(function (a, b) { return a - b; });
         this.lats = this.lats.sort(function (a, b) { return a - b; });
+        this.defined = true;
         topic.publish("BoundingBoxCreated", "BoundingBoxDefined");
       }
 
@@ -99,8 +100,12 @@ define([
       return Cesium.Rectangle.clone(this.rectangle, result);
     },
 
+    isDefined: function () {
+      return this.defined;
+    },
+
     toString: function () {
-      return this.lons[0] + "," + this.lats[0] + "," + this.lons[1] + "," + this.lats[1];
+      return `${this.lons[0]},${this.lats[0]},${this.lons[1]},${this.lats[1]}`;
     }
 
   });

lib/helpers/RequestWrapper.js

@@ -22,13 +22,13 @@ define([
         .param("service", "3DPS")
         .param("acceptversions", "1.0")
         .param("request", "GetScene")
-        .param("boundingbox", req.boundingBox)
+        .param("layers", req.layer)
         .param("cullingvolume", clientParams.cullingVolume2Url())
         .param("camera", clientParams.camera2Url())
         .param("frustum", clientParams.frustum2Url())
         .param("drawingbuffer", clientParams.drawingBuffer2Url())
         .param("time", Date.now())
-        .param("intersect", true)
+        .optional("boundingbox", req.boundingBox)
         .build();
 
       StatusBar.beginProcess("Waiting for response");

lib/helpers/UrlBuilder.js

@@ -26,8 +26,15 @@ define([
         return this;
       };
 
+      this.optional = function (name, value) {
+        if (value) {
+          this._params.push(`${name}=${value}&`);
+        }
+        return this;
+      }
+
       this.build = function () {
-        let result =  `${this._protocol}://${this._host}`;
+        let result = `${this._protocol}://${this._host}`;
         if (this._port) { result += `:${this._port}`; }
         if (this._path) { result += `/${this._path}`; }
         if (this._params) {

lib/main.js

@@ -83,6 +83,10 @@ require([
     state.setBoundingBox();
   });
 
+  $("#clearBoundingBox").click(function (event) {
+    state.clearBoundingBox();
+  });
+
   $("#toggleFreezeScene").change(function () {
     state.toggleFreezeScene();
   });

lib/state/BoundingBoxDefined.js

 define([
   "dojo/_base/declare",
-  "helpers/NodeCache",
-  "helpers/RequestWrapper"
-], function (declare, NodeCache, RequestWrapper) {
+  "helpers/NodeCache"
+], function (declare, NodeCache) {
 
   return declare(null, {
 
@@ -10,8 +9,11 @@ define([
 
     init(target, bb) {
       bb.unregister();
+      NodeCache.clearAll();
       $("#boundingBoxInput").val(bb.toString());
+      $('#toggleFreezeScene').prop('checked', false);
       $("#toggleFreezeScene").prop("disabled", false);
+      target.operations.setBoundingBox(bb.toString());
       target.makeRequest();
     },
 
@@ -21,14 +23,12 @@ define([
       target.changeState("BoundingBoxDefining");
     },
 
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
     makingRequest: function (target) {
-      let requestWrapper = new RequestWrapper();
-      requestWrapper.request({
-        host: $("#host").val(),
-        port: $("#port").val(),
-        endpoint: $("#endpoint").val(),
-        boundingBox: $("#boundingBoxInput").val()
-      });
+      target.operations.invokeRequest();
       target.changeState("WaitingForPortrayal");
     },
 
@@ -38,7 +38,7 @@ define([
 
     selectingLayer: function (target, layer) {
       target.operations.selectLayer(layer);
-      target.changeState("BoundingBoxUndefined");
+      target.changeState("LayerSelected");
     },
 
     gettingLayers: function (target) {

lib/state/BoundingBoxDefining.js

@@ -19,6 +19,10 @@ define([
       bb.clear();
     },
 
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
     makingRequest: function (target) {
       // no-op
     },

lib/state/BoundingBoxUndefined.js

@@ -13,6 +13,7 @@ define([
       bb.clear();
       NodeCache.clearAll();
       $("#boundingBoxInput").val("");
+      $('#toggleFreezeScene').prop('checked', false);
       $('#toggleFreezeScene').prop('disabled', true);
     },
 
@@ -20,6 +21,10 @@ define([
       target.changeState("BoundingBoxDefining");
     },
 
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
     makingRequest: function (target) {
       // no-op
     },
@@ -30,6 +35,8 @@ define([
 
     selectingLayer: function (target, layer) {
       target.operations.selectLayer(layer);
+      target.operations.invokeRequest({ layer: layer });
+      target.changeState("WaitingForPortrayal");
     },
 
     gettingLayers: function (target) {

lib/state/FreezeScene.js

@@ -15,10 +15,14 @@ define([
 
     settingBoundingBox: function (target, bb) {
       bb.clear();
-      NodeCache.clearAll();
+      // NodeCache.clearAll();  
       target.changeState("BoundingBoxDefining");
     },
 
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
     makingRequest: function (target) {
       // no-op
     },
@@ -28,8 +32,9 @@ define([
     },
 
     selectingLayer: function (target, layer) {
+      target.operations.clear();
       target.operations.selectLayer(layer);
-      target.changeState("BoundingBoxUndefined");
+      target.changeState("LayerSelected");
     },
 
     gettingLayers: function (target) {

lib/state/LayerSelected.js

+define([
+  "dojo/_base/declare",
+  "helpers/NodeCache"
+], function (declare, NodeCache) {
+
+  return declare(null, {
+
+    constructor: function () {
+
+    },
+
+    init(target, bb) {
+      bb.clear();
+      NodeCache.clearAll();
+      $("#boundingBoxInput").val("");
+      $('#toggleFreezeScene').prop('checked', false);
+      $('#toggleFreezeScene').prop('disabled', true);
+    },
+
+    settingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
+    makingRequest: function (target) {
+      target.operations.invokeRequest();
+      target.changeState("WaitingForPortrayal");
+    },
+
+    toggleFreezingScene: function (target) {
+      // no-op
+    },
+
+    selectingLayer: function (target, layer) {
+      console.log("hihoho");
+      target.operations.selectLayer(layer);
+    },
+
+    gettingLayers: function (target) {
+      target.operations.getLayers();
+      target.changeState("NoLayerSelected");
+    }
+
+  });
+
+});
\ No newline at end of file

lib/state/NoLayerSelected.js

@@ -12,7 +12,9 @@ define([
     init(target, bb) {
       bb.clear();
       NodeCache.clearAll();
+      target.operations.clear();
       $("#boundingBoxInput").val("");
+      $('#toggleFreezeScene').prop('checked', false);
       $('#toggleFreezeScene').prop('disabled', true);
     },
 
@@ -20,6 +22,10 @@ define([
       // no-op
     },
 
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
     makingRequest: function (target) {
       // no-op
     },
@@ -29,8 +35,9 @@ define([
     },
 
     selectingLayer: function (target, layer) {
+      target.operations.clear();
       target.operations.selectLayer(layer);
-      target.changeState("BoundingBoxUndefined");
+      target.changeState("LayerSelected");
     },
 
     gettingLayers: function (target) {

lib/state/Operations.js

@@ -3,13 +3,16 @@ define([
   "dojo/request",
   "helpers/UrlBuilder",
   "CesiumAdaptor/CesiumViewer",
-  "helpers/Layers"
-], function (declare, request, UrlBuilder, CesiumViewer, Layers) {
+  "helpers/Layers",
+  "helpers/RequestWrapper"
+], function (declare, request, UrlBuilder, CesiumViewer, Layers, RequestWrapper) {
 
   return declare(null, {
 
     constructor: function () {
       this._layers = null;
+      this._active_layer = null;
+      this._bb = null;
 
     },
 
@@ -42,13 +45,45 @@ define([
     },
 
     selectLayer: function (layer) {
-      // let selection = listElement.value;
+      this._active_layer = layer;
       let layerCenter = this._layers.getLayerCenter(layer);
       let viewer = CesiumViewer.getViewer();
       let center = Cesium.Cartesian3.fromDegrees(layerCenter.lon, layerCenter.lat, 20000.0);
       viewer.camera.setView({
-        destination: center
+        destination: center,
+        orientation: {
+          heading: 0.0,
+          pitch: Cesium.Math.toRadians(-90),
+          roll: 0.0
+        }
       });
+    },
+
+    setBoundingBox: function (bb) {
+      this._bb = bb;
+    },
+
+    invokeRequest: function () {
+      let requestWrapper = new RequestWrapper();
+      let req = {
+        host: $("#host").val(),
+        port: $("#port").val(),
+        endpoint: $("#endpoint").val(),
+        layer: this._active_layer
+      };
+      if (this._bb) {
+        req.boundingBox = this._bb;
+      }
+      requestWrapper.request(req);
+    },
+
+    clear: function () {
+      this._active_layer = null;
+      this._bb = null;
+    },
+
+    clearBoundingBox: function () {
+      this._bb = null;
     }
 
   });

lib/state/SceneRendered.js

@@ -14,18 +14,22 @@ define([
 
     settingBoundingBox: function (target, bb) {
       bb.clear();
-      NodeCache.clearAll();
       target.changeState("BoundingBoxDefining");
     },
 
+    clearingBoundingBox: function (target, bb) {
+      if (bb.isDefined()) {
+        bb.clear();
+        NodeCache.clearAll();
+        target.operations.clearBoundingBox();
+        $("#boundingBoxInput").val("");
+        target.makeRequest();
+      }
+
+    },
+
     makingRequest: function (target) {
-      let requestWrapper = new RequestWrapper();
-      requestWrapper.request({
-        host: $("#host").val(),
-        port: $("#port").val(),
-        endpoint: $("#endpoint").val(),
-        boundingBox: $("#boundingBoxInput").val()
-      });
+      target.operations.invokeRequest();
       target.changeState("WaitingForPortrayal");
     },
 
@@ -34,8 +38,9 @@ define([
     },
 
     selectingLayer: function (target, layer) {
+      target.operations.clear();
       target.operations.selectLayer(layer);
-      target.changeState("BoundingBoxUndefined");
+      target.changeState("LayerSelected");
     },
 
     gettingLayers: function (target) {

lib/state/State.js

@@ -20,6 +20,10 @@ define([
       this._current.settingBoundingBox(this, this._boundingBox);
     },
 
+    clearBoundingBox: function () {
+      this._current.clearingBoundingBox(this, this._boundingBox);
+    },
+
     makeRequest: function () {
       this._current.makingRequest(this);
     },

lib/state/StateFactory.js

 define([
   "dojo/_base/declare",
   "state/NoLayerSelected",
+  "state/LayerSelected",
   "state/BoundingBoxUndefined",
   "state/BoundingBoxDefining",
   "state/BoundingBoxDefined",
   "state/WaitingForPortrayal",
   "state/FreezeScene",
   "state/SceneRendered"
-], function (declare, NoLayerSelected, BoundingBoxUndefined, BoundingBoxDefining, BoundingBoxDefined, WaitingForPortrayal, FreezeScene, SceneRendered) {
+], function (declare, NoLayerSelected, LayerSelected, BoundingBoxUndefined, BoundingBoxDefining, BoundingBoxDefined, WaitingForPortrayal, FreezeScene, SceneRendered) {
 
   return declare(null, {
 
@@ -19,6 +20,8 @@ define([
       switch (stateName) {
         case "NoLayerSelected":
           return new NoLayerSelected();
+        case "LayerSelected":
+          return new LayerSelected();
         case "BoundingBoxUndefined":
           return new BoundingBoxUndefined();
         case "BoundingBoxDefining":

lib/state/WaitingForPortrayal.js

 define([
-  "dojo/_base/declare",
-  "helpers/RequestWrapper"
-], function (declare, RequestWrapper) {
+  "dojo/_base/declare"
+], function (declare) {
 
   return declare(null, {
 
@@ -15,14 +14,12 @@ define([
       // no-op
     },
 
+    clearingBoundingBox: function (target, bb) {
+      // no-op
+    },
+
     makingRequest: function (target) {
-      requestWrapper = new RequestWrapper();
-      requestWrapper.request({
-        host: $("#host").val(),
-        port: $("#port").val(),
-        endpoint: $("#endpoint").val(),
-        boundingBox: $("#boundingBoxInput").val()
-      });
+      target.operations.invokeRequest();
     },
 
     toggleFreezingScene: function (target) {