Source: public/javascript/modules/olqv_boxes.js

  1. import {ShapesFactory} from "./olqv_shapes.js";
  2. import { box2DTranslator, box3DTranslator } from "./olqv_selector.js";
  3. import {DOMAccessor} from "./domelements.js";
  4. import { ServerApi } from "./serverApi.js";
  5. import {highlightedFeature, standardFeature} from "./olqv_shapestyle.js";
  6. import {BoxButton} from "./olqv_olbuttons.js";
  9. /** A class to create and to manage rectangular boxes in the 2D part of YAFITS. A box is basically defined by a pair of opposite corners.
  10.  * 
  11.  * Boxes are created and manipulated with the {@link https://openlayers.org/en/v5.3.0/apidoc/|OpenLayers} API. 
  12.  * In particular the {@link https://openlayers.org/en/v5.3.0/apidoc/module-ol_interaction_DragBox.html|DragBox} 
  13.  * and {@link https://openlayers.org/en/v5.3.0/apidoc/module-ol_Feature-Feature.html|Feature} classes are used.
  14.  * 
  15.  * Boxes style is defined in ShapesFactory
  16.  * 
  17.  * <ul>
  18.  * <li>Boxes have their side parallels to the image sides (No rotation possible).</li>
  19.  * <li>A method is provided to obtain measurements associated to the collection of pixels contained in a box. </li>
  20.  * </ul>
  21.  *
  22.  * @extends ShapesFactory
  23.  */
  24. class BoxesFactory extends ShapesFactory {
  26.     static enter(what) {
  27.         console.group(this.name + "." + what);
  28.     }
  30.     static exit() {
  31.         console.groupEnd();
  32.     }
  34.     /**
  35.      * Creates an instance.
  36.      * @param {Viewer} viewer instance of the Viewer class that will host the boxes.
  37.      */
  38.     constructor(viewer) {
  39.         super(viewer, 'box');
  40.         BoxesFactory.enter(this.constructor.name);
  41.         this.mode = this;
  42.         this.lastSelectedBox = null;
  43.         this.layer.setZIndex(30);
  44.         this.buttonObject = new BoxButton(this.viewer);
  45.         let self = this;
  47.         let f = function (event) {
  48.             if(self.isOpened){
  49.                 self.close(); 
  50.                 self.buttonObject.unsetActive();
  51.             } else {
  52.                 self.open(self.dragBox, 'nesw-resize');
  53.                 self.buttonObject.setActive();
  54.             }                
  55.         };
  56.         this.buttonObject.setClickAction(f);
  57.         this.numOfBoxes = 0;  // The number of boxes created sbsiao far
  59.         /*
  60.         ** This is our dragbox interaction
  61.         */
  62.         //this.dragBox = new ol.interaction.DragBox({ condition: ol.events.condition.platformModifierKeyOnly });
  63.         this.dragBox = new ol.interaction.DragBox({ condition: ol.events.condition.noModifierKeys });
  64.         this.dragBox.on('boxend', () => {
  65.             ShapesFactory.enter("this.dragBox.on('boxend', function() { : entering");
  66.             const extent = this.dragBox.getGeometry().getExtent();
  67.             this.addBox(extent[0], extent[2], extent[1], extent[3]);
  68.             /*
  70.             // The real work when a drag box interaction reach its end is done below ( saynchronously )
  71.             //this.createAndMeasureBox(this.relFITSFilePath, this.viewer.getSliceRange()[0], extent[0], extent[2], extent[1], extent[3]);
  72.             let box = this.prepareBox(extent[0], extent[2], extent[1], extent[3]);
  73.             this.measure(box);
  74.             this.numOfBoxes += 1;*/
  75.             ShapesFactory.exit();
  76.         });
  78.         /*
  79.         ** This the behaviour when a box has been selected.
  80.         */
  81.         this.selector.select['Polygon'] = (feature) => {
  82.             ShapesFactory.enter("A box is selected");
  83.             this.selected(feature);
  84.             ShapesFactory.exit();
  85.         };
  87.         /*
  88.         ** This the behaviour when a box has been unselected.
  89.         */
  90.         this.selector.unselect['Polygon'] = (feature) => {
  91.             ShapesFactory.enter("A box is unselected");
  92.             this.unselected(feature);
  93.             ShapesFactory.exit();
  94.         };
  96.         /*
  97.         ** This is the behaviour when a selected box is going to be removed
  98.         */
  99.         this.selector.remove['Polygon'] = (f) => {
  100.             ShapesFactory.enter("A selected box is about to be removed");
  101.             this.remove(f);
  102.             ShapesFactory.exit();
  103.         };
  105.         this._setBoxTranslator();
  106.         this.selector.setTranslateInteraction(this);
  108.         BoxesFactory.exit();
  109.     }
  111.     _setBoxTranslator(){
  112.         Object.assign(this.selector, box2DTranslator);
  113.     }
  115.     addBox(iRA0, iRA1, iDEC0, iDEC1){
  116.         // The real work when a drag box interaction reach its end is done below ( saynchronously )
  117.         //this.createAndMeasureBox(this.relFITSFilePath, this.viewer.getSliceRange()[0], extent[0], extent[2], extent[1], extent[3]);
  118.         DOMAccessor.showLoaderAction(true);
  119.         let box = this.prepareBox(iRA0, iRA1, iDEC0, iDEC1);
  120.         this.measure(box);
  121.         this.numOfBoxes += 1;
  122. 	    this.viewer.map.updateSize();
  123.         DOMAccessor.showLoaderAction(false);
  124.     }
  126.     /**
  127.      * Utility. Returns the toolbox button that will activate this instance.
  128.      * @returns a {@link https://developer.mozilla.org/fr/docs/Web/HTML/Element/Button|button}
  129.      */
  130.     getButtonObject() {
  131.         return this.buttonObject;
  132.     }
  134.     /**
  135.      * Creates an OpenLayers feature that describres a box given bottom left and upper right coordinates.
  136.      * A label is automatically generated that will be displayed beside the box.
  137.      * @param {number} iRA0 lower 1st coordinate
  138.      * @param {*} iRA1 upper 1st coordinate
  139.      * @param {*} iDEC0 lower 2nd coordinate
  140.      * @param {*} iDEC1 upper 2nd coordinate
  141.      * @returns {Feature}
  142.      */
  143.     prepareBox(iRA0, iRA1, iDEC0, iDEC1) {
  144.         ShapesFactory.enter(this.prepareBox.name);
  145.         //DOMAccessor.getLoading().style.display = 'block';
  146.         var tl = [iRA0, iDEC1];
  147.         var tr = [iRA1, iDEC1];
  148.         var br = [iRA1, iDEC0];
  149.         var bl = [iRA0, iDEC0];
  151.         var corners = [];
  152.         corners.push(tl, tr, br, bl, tl);
  154.         let feature = new ol.Feature({ geometry: new ol.geom.Polygon([corners]) });
  155.         let properties = {};
  156.         properties["type"] = "box";
  157.         feature.set("properties", properties);
  158.         feature.set("label", `b_${this.numOfBoxes}`);
  159.         feature.setStyle(standardFeature(feature));
  160.         ShapesFactory.exit();
  161.         return feature;
  162.     }
  164.     /**
  165.      * Calculates some measurements associated to the box described in feature.
  166.      * The measurements are stored in an entry "measurements" of feature "properties" property.
  167.      * 
  168.      * > The measurements are calculated remotely by the YAFITSS server.
  169.      *  
  170.      * @param {Feature} feature the OpenLayers feature expected to represent a box.
  171.      * @param {boolean} addFeature Deprecated, don't use it.
  172.      */
  173.     measure(feature, addFeature = true) {
  174.         BoxesFactory.enter(this.measure.name);
  175.         console.warn("range : " + this.viewer.getSliceRange());
  176.         if (typeof this.viewer.getSliceRange() != "number") {
  177.             alert("Do not know how to measure a 2D box on an image representing a 3D dataset");
  178.         }
  179.         else {
  180.             let properties = feature.get("properties");
  181.             if (properties.hasOwnProperty("type") && properties["type"] === "box") {
  182.                 //DOMAccessor.getLoading().style.display = "block";
  183.                 DOMAccessor.showLoaderAction(true);
  184.                 let corners = feature.getGeometry().getCoordinates()[0];
  185.                 let iRA0, iRA1, iDEC0, iDEC1;
  186.                 [iRA0, iRA1] = [Math.min(corners[0][0], corners[2][0]), Math.max(corners[0][0], corners[2][0])];
  187.                 [iDEC0, iDEC1] = [Math.min(corners[0][1], corners[2][1]), Math.max(corners[0][1], corners[2][1])];
  188.                 // query server
  189.                 let serverApi = new ServerApi();
  190.                 serverApi.measureBox(iRA0, iRA1, iDEC0, iDEC1, this.viewer.getSliceRange(), this.relFITSFilePath, (resp)=>{
  191.                     properties["measurements"] = resp["result"];
  192.                     feature.set("properties", properties);
  193.                     if (addFeature) {
  194.                         feature.setStyle(this.style_f(feature));
  195.                         this.source.addFeature(feature);
  196.                         this.viewer.map.updateSize();
  197.                     }
  198.                 });
  199.             }
  200.             else {
  201.                 console.log("Unable to measure such a feature");
  202.             }
  203.         }
  204.         BoxesFactory.exit();
  205.     }
  207.     /**
  208.      * Behaviour when an instance is activated.
  209.      *
  210.      * @see {@link https://openlayers.org/en/v5.3.0/apidoc/module-ol_interaction_Interaction-Interaction.html|Interaction }
  211.      * @see {@link https://developer.mozilla.org/fr/docs/Web/CSS/cursor | cursor}
  212.      * @param {Interaction} interaction
  213.      * @param {cursor} cursor
  214.     */
  215.     open(interaction, cursor) {
  216.         BoxesFactory.enter(this.open.name);
  217.         super.open(interaction, cursor);
  218.         BoxesFactory.exit();
  219.     }
  221.     /**
  222.      * Behaviour when a box is selected.
  223.      * @param {Feature} box 
  224.      */
  225.     selected(box) {
  226.         ShapesFactory.enter(this.selected.name);
  227.         super.selected(box);
  228.         ShapesFactory.exit();
  229.     }
  230. }
  232. class Boxes3DFactory extends BoxesFactory {
  233.     /**
  234.      * Creates an instance.
  235.      * @param {Viewer} viewer instance of the Viewer class that will host the boxes.
  236.      */
  237.     constructor(viewer) {
  238.         super(viewer);
  239.         this.selectAction = undefined;
  240.     }
  242.     _setBoxTranslator(){
  243.         Object.assign(this.selector, box3DTranslator);
  244.     }
  246.     addBox(iRA0, iRA1, iDEC0, iDEC1){
  247.         // The real work when a drag box interaction reach its end is done below ( saynchronously )
  248.         //this.createAndMeasureBox(this.relFITSFilePath, this.viewer.getSliceRange()[0], extent[0], extent[2], extent[1], extent[3]);
  249.         DOMAccessor.showLoaderAction(true);
  250.         let boxFeature = this.prepareBox(iRA0, iRA1, iDEC0, iDEC1);
  251.         boxFeature.setStyle(this.style_f(boxFeature));
  252.         this.source.addFeature(boxFeature);
  253.         this.numOfBoxes += 1;
  254.         //make sure the box is immediately visible
  255.         this.viewer.map.updateSize();
  256.         DOMAccessor.showLoaderAction(false);
  257.     }
  259.     setSelectAction(action){
  260.         this.selectAction = action;
  261.     }
  263.     /**
  264.      * Behaviour when a box is selected.
  265.      * @param {Feature} box 
  266.      */
  267.     selected(box) {
  268.         ShapesFactory.enter(this.selected.name);
  269.         super.selected(box);
  270.         if (this.selectAction !== undefined){
  271.             this.selectAction(box);
  272.         }
  273.         ShapesFactory.exit();
  274.     }
  275. }
  277. export {
  278.     BoxesFactory,
  279.     Boxes3DFactory
  280. }