Commit abc91c38 authored by Caillat Michel's avatar Caillat Michel
Browse files

As of now I become a subclass of ShapesFactory

parent 800d716b
<script>
class BoxFactory {
class BoxFactory extends ShapesFactory {
constructor (sliceViewer, infosBlock) {
super(sliceViewer, infosBlock);
ShapesFactory.enter(this.constructor.name);
console.log("BoxFactory ctor: entering");
this.source;
......@@ -13,53 +15,8 @@ class BoxFactory {
let target = this.map.getTarget();
this.jTarget = typeof target === "string" ? $("#" + target) : $(target);
this.lastSelectedBox = null;
this.highlightStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 3
})
});
this.style = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'lightblue',
//lineDash: [2],
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.6)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'lightblue',
//lineDash: [2],
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
};
this.style_f = (feature) => {
return this.style[feature.getGeometry().getType()];
};
this.source = new ol.source.Vector();
this.layer = new ol.layer.Vector({source: this.source, style: this.style_f});
this.map.addLayer(this.layer);
this.layer.setZIndex(12);
this.visible = true;
this.overlay = null;
this.container = document.getElementById('popup');
this.content = document.getElementById('popup-content');
this.closer = document.getElementById('popup-closer');
this.lastSelectedContour = null;
......@@ -73,77 +30,46 @@ class BoxFactory {
this.button.onclick = f.bind(this);
this.isOpened = false;
this.infosBlock = infosBlock;
/*
** This is our dragbox interaction
*/
this.dragBox = new ol.interaction.DragBox({condition: ol.events.condition.platformModifierKeyOnly});
this.dragBox.on('boxend', () => {
console.log("this.dragBox.on('boxend', function() { : entering");
ShapesFactory.enter("this.dragBox.on('boxend', function() { : entering");
var extent = this.dragBox.getGeometry().getExtent();
// The real work when a drag box interaction reach its end is done below ( saynchronously )
//this.createAndMeasureBox(this.relFITSFilePath, this.sliceIndex, extent[0], extent[2], extent[1], extent[3]);
let box = this.prepareBox(extent[0], extent[2], extent[1], extent[3]);
this.measure(box);
console.log("this.dragBox.on('boxend', function() { : exiting");
ShapesFactory.exit();
});
console.log("BoxFactory ctor: exiting");
ShapesFactory.exit();
}
getButton() {
return this.button;
}
highlight(feature) {
console.log("highlight : entering");
if (this.lastSelectedBox !== null) {
this.lastSelectedBox.setStyle(undefined);
}
feature.setStyle(this.highlightStyle);
this.lastSelectedBox = feature;
console.log("highlight : exiting");
}
open() {
console.log('open: entering');
this.map.addInteraction(this.dragBox);
this.jTarget.css('cursor','nwse-resize');
this.isOpened = true;
console.log('open: exiting');
ShapesFactory.enter(this.open.name);
this.map.addInteraction(this.dragBox);
this.jTarget.css('cursor','nwse-resize');
this.isOpened = true;
ShapesFactory.exit();
}
close() {
console.log('close: open');
ShapesFactory.enter(this.close.name);
this.map.removeInteraction(this.dragBox);
this.jTarget.css('cursor','pointer');
this.isOpened = false;
console.log('close: exiting');
ShapesFactory.exit();
}
hide() {
console.log("hide : entering");
this.layer.setVisible(false);
console.log("hide : exiting");
};
show() {
console.log("show : entering");
this.layer.setVisible(true);
console.log("show : exiting");
};
clear() {
console.log("clear : entering");
if (this.lastSelectedBox) this.lastSelectedBox.setStyle(undefined);
this.lastSelectedBox = null;
this.source.clear();
console.log("clear : exiting");
};
prepareBox(iRA0, iRA1, iDEC0, iDEC1){
console.log("createBox: entering");
ShapesFactory.enter(this.prepareBox.name);
document.getElementById('loading').style.display='block';
var tl = [iRA0, iDEC1];
var tr = [iRA1, iDEC1];
......@@ -157,12 +83,12 @@ class BoxFactory {
let properties = {};
properties["type"]="box";
feature.set("properties",properties);
console.log("createBox: exiting");
ShapesFactory.exit();
return feature;
}
measure(feature, addFeature=true) {
console.log("measure: entering");
ShapesFactory.enter(this.measure.name);
let properties = feature.get("properties");
if (properties.hasOwnProperty("type") && properties["type"] === "box") {
document.getElementById('loading').style.display="block";
......@@ -180,7 +106,7 @@ class BoxFactory {
'iDEC0': iDEC0,
'iDEC1': iDEC1 },
(resp) => {
console.log('measure callback: entering');
ShapesFactory.enter('measure callback: entering');
document.getElementById('loading').style.display="none";
if ( resp["status"] == false ){
alert ("Something went wrong with the measurements of contour. The message was '" + resp["message"]+"'");
......@@ -193,23 +119,24 @@ class BoxFactory {
this.selected(feature);
}
}
console.log('measureBox callback: exiting');
ShapesFactory.exit();
} );
}
else {
console.log("Unable to measure such a feature") ;
}
console.log("measure : exiting");
ShapesFactory.exit();
}
selected(feature) {
console.log("selected : entering");
let properties = feature.get("properties");
selected(box) {
ShapesFactory.enter(this.selected.name);
let properties = box.get("properties");
let title = "Flux in box : " + properties["measurements"]["sum"]["value"].toExponential(4) + " " + properties["measurements"]["sum"]["unit"];
this.infosBlock.headline(title)
this.infosBlock.populate(title, properties["measurements"]);
this.highlight(feature);
console.log("selected : exiting");
this.highlight(box);
ShapesFactory.selection = box;
ShapesFactory.exit();
}
}
</script>
<script>
class ContoursViewer {
class ContoursFactory extends ShapesFactory {
constructor (sliceViewer, infosBlock) {
console.log("ContoursViewer ctor: entering");console.trace();
this.infosBlock = infosBlock;
super(sliceViewer, infosBlock);
ShapesFactory.enter(this.constructor.name);
this.source;
this.layer;
this.sliceViewer = sliceViewer;
this.relFITSFilePath = this.sliceViewer.getRelFITSFilePath();
this.sliceIndex = this.sliceViewer.getSliceIndex();
this.map = sliceViewer.getMap();
this.infosBlock = infosBlock;
this.highlightStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 3
})
});
this.style = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [2],
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.6)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
lineDash: [2],
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
};
this.style_f = (feature) => {
return this.style[feature.getGeometry().getType()];
};
this.source = new ol.source.Vector();
this.layer = new ol.layer.Vector({source: this.source, style: this.style_f});
this.map.addLayer(this.layer);
this.layer.setZIndex(10);
this.visible = true;
this.overlay = null;
this.container = document.getElementById('popup');
this.content = document.getElementById('popup-content');
this.closer = document.getElementById('popup-closer');
this.lastSelectedContour = null;
this.lastBox = null;
$(this.map.getTargetElement()).append($("#ModalContoursForm"));
......@@ -74,37 +24,21 @@ class ContoursViewer {
this.button.setAttribute("title", "Draw contours");
this.button.append("C");
console.log("ContoursViewer ctor: exiting");console.trace();
ShapesFactory.exit();
}
getButton() {
return this.button;
}
highlight(feature) {
console.log("highlight : entering");
if (this.lastSelectedContour !== null) {
this.lastSelectedContour.setStyle(undefined);
if (this.lastBox !== null) {
this.source.removeFeature(this.lastBox);
this.lastBox = null;
}
}
feature.setStyle(this.highlightStyle);
this.box(feature);
//this.grid(feature);
this.lastSelectedContour = feature;
console.log("highlight : exiting");
}
box(feature) {
console.log("box : entering");
let br = feature.get("properties")["measurements"]["boundingRect"]["value"];
let corners=[[br[0], br[1]],
[br[0]+br[2]-1, br[1]],
[br[0]+br[2]-1, br[1]+br[3]-1],
[br[0], br[1]+br[3]-1],
[br[0], br[1]]];
[br[0]+br[2]-1, br[1]],
[br[0]+br[2]-1, br[1]+br[3]-1],
[br[0], br[1]+br[3]-1],
[br[0], br[1]]];
this.lastBox = new ol.Feature({geometry: new ol.geom.Polygon([corners])});
this.source.addFeature(this.lastBox);
......@@ -126,54 +60,47 @@ class ContoursViewer {
}
importYAFITSContours(yAFITSContours) {
ShapesFactory.enter(this.importYAFITSContours.name);
console.log("importYAFITSContours: entering");
this.clear();
var features = new Array();
yAFITSContours.forEach((contour) => {
let coordinates = contour["coordinates"];
coordinates.push(coordinates[0]);
coordinates.push(coordinates[0]);;
let properties = contour["properties"];
properties["type"] = "contour"
features.push(new ol.Feature( { geometry : new ol.geom.LineString(coordinates),
properties : contour["properties"]}))});
properties : properties}))}
);
this.source.addFeatures(features);
this.show();
console.log("importYAFITSContours: exiting");
ShapesFactory.exit()
}
hide() {
console.log("hide : entering");
this.layer.setVisible(false);
console.log("hide : exiting");
selected(contour) {
ShapesFactory.enter(this.selected.name);
let properties = contour.get("properties");
let level = properties["level"]["value"].toExponential(3);
let levelUnit = properties["level"]["unit"];
let title = 'Contour level at ' + level + ' ' + levelUnit;
this.infosBlock.headline(title)
this.infosBlock.populate(title, properties["measurements"]);
this.highlight(contour);
ShapesFactory.selection = contour;
ShapesFactory.exit()
}
}; // End of class ContoursFactory
show() {
console.log("show : entering");
this.layer.setVisible(true);
console.log("show : exiting");
class ContoursFactoryGUI {
static enter(what) {
console.group(this.name + "." + what);
}
clear() {
console.log("clear : entering");
if (this.lastSelectedContour) this.lastSelectedContour.setStyle(undefined);
this.lastSelectedContour = null;
this.source.clear();
console.log("clear : exiting");
}
selected(feature) {
console.log("selected : entering");
let properties = feature.get("properties");
let level = properties["level"]["value"].toExponential(3);
let levelUnit = properties["level"]["unit"];
let title = 'Contour level at ' + level + ' ' + levelUnit;
this.infosBlock.headline(title)
this.infosBlock.populate(title, properties["measurements"]);
this.highlight(feature);
console.log("selected : exiting");
}
}; // End of class ContoursViewer
class ContoursGUI {
static exit() {
console.groupEnd();
}
constructor () {
ContoursFactoryGUI.enter(this.constructor.name);
this.modal = $("#ModalContoursForm");
this.text_of_quantiles = $("#text_of_quantiles");
this.levels = $("#levels");
......@@ -190,6 +117,8 @@ class ContoursGUI {
this.number_of_bins.focus(() => {this.contoursMethod = "numberOfBins"});
this.modal.on("shown.bs.modal", this.drawThings.bind(this));
ContoursFactoryGUI.exit();
// this.histBinsMethodAuto=$("#hist-bins-method-auto");
// this.histBinsMethodAuto.click(() => {this.contoursMethod="histBinsMethod", this.histBinsMethodName="auto"});
......@@ -205,30 +134,32 @@ class ContoursGUI {
}
connect(contoursViewer, sliceViewer) {
console.log("connect : entering");
ContoursFactoryGUI.enter(this.connect.name);
this.contoursViewer = contoursViewer;
this.update_contours.click(this.queryYAFITSContours.bind(this));
//this.clear_contours.click(this.contoursViewer.clear.bind(this.contoursViewer));
this.clear_contours.click(this.clear.bind(this));
this.sliceViewer = sliceViewer;
console.log("connect : exting");
ContoursFactoryGUI.exit();
}
clear() {
ContoursFactoryGUI.enter(this.clear.name);
this.text_of_quantiles.val("");
this.levels.val("");
this.contoursViewer.clear();
ContoursFactoryGUI.exit();
}
drawThings() {
console.log("drawThings: entering");
ContoursFactoryGUI.enter(this.drawThings.name);
this.drawHistogram();
this.drawCumulativeDistribution();
console.log("drawThings: exiting");
ContoursFactoryGUI.exit();
}
drawHistogram() {
console.log("drawHistogram: entering");
ContoursFactoryGUI.enter(this.drawHistogram.name);
console.log(JSON.stringify(this.sliceViewer.getStatistics()));
let histogram = this.sliceViewer.getStatistics()["histogram"];
let population = histogram[0];
......@@ -265,9 +196,9 @@ class ContoursGUI {
events: {
click: function (e) {
if (that.hasLevelsDefined())
that.levels.val(that.levels.val()+","+e.point.x);
that.levels.val(that.levels.val()+","+e.point.x);
else
that.levels.val(e.point.x);
that.levels.val(e.point.x);
that.levels.focus();
}
}
......@@ -289,9 +220,9 @@ class ContoursGUI {
dashStyle: "shortdot",
lineWidth : 1,
data:[
[this.sliceViewer.getStatistics()["mean"], 0],
[this.sliceViewer.getStatistics()["mean"], Math.max(...population)]
]
[this.sliceViewer.getStatistics()["mean"], 0],
[this.sliceViewer.getStatistics()["mean"], Math.max(...population)]
]
},
{
name: '+sigma',
......@@ -299,9 +230,9 @@ class ContoursGUI {
dashStyle: "shortdot",
lineWidth : 2,
data:[
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], Math.max(...population)]
]
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], Math.max(...population)]
]
},
{
name:'-sigma',
......@@ -309,17 +240,17 @@ class ContoursGUI {
dashStyle: "shortdot",
lineWidth : 2,
data:[
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], Math.max(...population)]
]
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], Math.max(...population)]
]
}
]
});
console.log("drawHistogram: exiting");
ContoursFactoryGUI.exit();
}
drawCumulativeDistribution() {
console.log("drawCumulativeDistribution: entering");
ContoursFactoryGUI.enter(this.drawCumulativeDistribution.name);
let histogram = this.sliceViewer.getStatistics()["histogram"];
let bins = histogram[1];
let cumulDist = this.sliceViewer.getStatistics()["cumuldist"];
......@@ -353,9 +284,9 @@ class ContoursGUI {
events: {
click: function (e) {
if (that.hasQuantilesDefined())
that.text_of_quantiles.val(that.text_of_quantiles.val()+","+e.point.y);
that.text_of_quantiles.val(that.text_of_quantiles.val()+","+e.point.y);
else
that.text_of_quantiles.val(e.point.y);
that.text_of_quantiles.val(e.point.y);
that.text_of_quantiles.focus();
}
}
......@@ -373,7 +304,7 @@ class ContoursGUI {
}
]
});
console.log("drawCumulativeDistribution: exiting");
ContoursFactoryGUI.exit();
}
hasLevelsDefined () {
......@@ -386,7 +317,8 @@ class ContoursGUI {
return result;
}
parseTextOfLevels(){
parseTextOfLevels() {
ContoursFactoryGUI.enter(this.parseTextOfLevels.name);
let result = false;
let text = this.levels.val();
let x = str2FloatArray(text);
......@@ -397,10 +329,12 @@ class ContoursGUI {
else {
alert("Input invalid to express a sequence of levels.");
}
ContoursFactoryGUI.exit();
return result;
}
parseTextOfQuantiles(){
ContoursFactoryGUI.enter(this.parseTextOfQuantiles.name);
let result = false;
let text = this.text_of_quantiles.val();
let x = str2FloatArray(text, [0,1]);
......@@ -411,11 +345,12 @@ class ContoursGUI {
else {
alert("Input invalid to express a sequence of quantiles. It must be a ascending sequence of numbers in [0., 1.]");
}
ContoursFactoryGUI.exit();
return result;
}
queryYAFITSContours() {
console.log("queryYAFITSContours : entering");
ContoursFactoryGUI.enter(this.queryYAFITSContours.name);
document.getElementById('loading').style.display="block";
let iFREQ = 0;
......@@ -423,56 +358,56 @@ class ContoursGUI {
console.log("contoursMethod = " + this.contoursMethod);
switch (this.contoursMethod){
case "levels":
if (this.hasLevelsDefined()) {
let levels = this.parseTextOfLevels();
if (levels) {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'levels': levels}, 0, 4)}
}
}
else {
alert ("No levels defined");
if (this.hasLevelsDefined()) {
let levels = this.parseTextOfLevels();
if (levels) {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'levels': levels}, 0, 4)}
}
break;
}
else {
alert ("No levels defined");
}
break;
case "quantiles":
if (this.hasQuantilesDefined()) {
let quantiles = this.parseTextOfQuantiles();
if (quantiles) {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'quantiles': quantiles}, 0, 4)}
}
if (this.hasQuantilesDefined()) {
let quantiles = this.parseTextOfQuantiles();
if (quantiles) {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'quantiles': quantiles}, 0, 4)}
}
else {
alert("No quantiles defined");
}
break;
}
else {
alert("No quantiles defined");
}
break;
default:
alert("No contours method defined");
alert("No contours method defined");
}
document.getElementById('loading').style.display="none";
if (postParams) {
$.post('getContours', postParams,
(resp) => {
console.log("queryYAFITSContoursCallback: entering");
document.getElementById('loading').style.display="none";
if ( resp["status"] == false ){
alert ("Something went wrong during the generation of the contours. The message was '" + resp["message"]+"'");
}
else {;
this.contoursViewer.importYAFITSContours(resp["result"]["features"]);
}
console.log("queryYAFITSContoursCallback: exiting");
});
(resp) => {
ContoursFactoryGUI.enter("queryYAFITSContoursCallback");
document.getElementById('loading').style.display="none";
if ( resp["status"] == false ){
alert ("Something went wrong during the generation of the contours. The message was '" + resp["message"]+"'");
}
else {;
this.contoursViewer.importYAFITSContours(resp["result"]["features"]);
}
ContoursFactoryGUI.exit();
});
}
console.log("queryYAFITSContours : exiting");
ContoursFactoryGUI.exit();
}
}; // End of class ContoursGUI
}; // End of class ContoursFactoryGUI
</script>
<!-- <div id="x" class="yafitscontourscontrol ol-unselectable ol-control">
<button id="xx" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalContoursForm">C</button>
</script>
<!-- <div id="x" class="yafitscontourscontrol ol-unselectable ol-control">
<button id="xx" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalContoursForm">C</button>
</div> -->
<div id="ModalContoursForm" class="modal fade">
......