Add panel highlight in interactive plot

Benjamin Renard
1 parent 0ceb8de8
Showing 3 changed files with 48 additions and 2 deletions Show diff stats
js/app/views/PlotComponents/PlotResultImage.js
js/app/views/PlotComponents/PlotZoomPlug.js
js/app/views/PlotTabResultUI.js
@@ -25,6 +25,8 @@ Ext.define(&#39;amdaPlotComp.PlotResultImage&#39;, {
 	secondVerticalMarker   : null,
 	firstHorizontalMarker  : null,
 	secondHorizontalMarker : null,
+
+	panelMarker : null,
  
 	showVerticalCursor  : true,
 	showHorizontalCursor : true,
@@ -62,6 +64,17 @@ Ext.define(&#39;amdaPlotComp.PlotResultImage&#39;, {
 		this.el.parent().appendChild(horizontalDiv);
 		return horizontalDiv;
 	},
+
+	createNewPanelMarkerDiv : function() {
+		var panelDiv = new Ext.Element(document.createElement('div')); 
+		panelDiv.setStyle('position', 'absolute');
+		panelDiv.setStyle('left', '1px');
+		panelDiv.setStyle('width', '1px');
+		panelDiv.setStyle('border', "1px none rgb(255, 0, 0)");
+		panelDiv.setStyle('pointer-events', 'none');
+		this.el.parent().appendChild(panelDiv);
+		return panelDiv;
+	},
  
 	resetCursor : function() {
 		if (this.horizontalCursor)
@@ -86,6 +99,20 @@ Ext.define(&#39;amdaPlotComp.PlotResultImage&#39;, {
 			this.verticalCursor.setStyle('borderLeftStyle', 'solid');
 		}
 	},
+
+	resetPanel : function() {
+		if (this.panelMarker)
+			this.panelMarker.setStyle('borderStyle', 'none');
+	},
+
+	updatePanel : function(containerX, containerY, containerWidth, containerHeight) {
+		this.panelMarker.setStyle('left',containerX+'px');
+		this.panelMarker.setStyle('top',containerY+'px');
+		this.panelMarker.setStyle('width',containerWidth+'px');
+		this.panelMarker.setStyle('height',containerHeight+'px');
+		this.panelMarker.setStyle('borderStyle', 'dashed');
+		this.panelMarker.setStyle('borderWidth', '3px');
+	},
  
 	resetZoom : function() {
 		//This function is override during a startZoom call
@@ -195,6 +222,8 @@ Ext.define(&#39;amdaPlotComp.PlotResultImage&#39;, {
 					me.firstHorizontalMarker  = me.createNewHorizontalDiv();
 					me.secondHorizontalMarker = me.createNewHorizontalDiv();
  
+					me.panelMarker = me.createNewPanelMarkerDiv();
+					
 					me.resetCursor();
 				},
 				el: {
@@ -147,8 +147,12 @@ Ext.define(&#39;amdaPlotComp.PlotZoomPlug&#39;, {
         listeners: {
           scope: this,
           beforeclose: function () {
+            this.hostCmp.panelImage.hidePanelMarker();
             this.hostCmp.panelImage.stopZoom();
             Ext.PluginManager.unregister(this);
+          },
+          show: function(win, eOpts) {
+            this.hostCmp.panelImage.showPanelMarker(panelId);
           }
         },
         getConstrainVector: function (constrainTo) {
@@ -220,10 +220,10 @@ Ext.define(&#39;amdaUI.PlotTabResultUI&#39;, {
 			me.contextualMenu.add('-');
 			me.contextualMenu.add(insertIntervalItem);
 		}
-		/*if (plotFunctionItem != null) { // #9016 & #6018 - Hide - Not fully tested
+		if (plotFunctionItem != null) { // #9016 & #6018 - Hide - Not fully tested
 			me.contextualMenu.insert(0, '-');
 			me.contextualMenu.insert(0, plotFunctionItem);
-		}*/
+		}
 	},
  
 	getAxisValue: function (axis, pixelMin, pixelMax, pixelVal) {
@@ -238,6 +238,19 @@ Ext.define(&#39;amdaUI.PlotTabResultUI&#39;, {
 			src: this.getImageUrl(resultFolder, plotFile),
 			width: size.width,
 			height: size.height,
+			showPanelMarker: function (panelId) {
+				var panel = amdaPlotComp.PlotContextManager.getPanelById(me.crtContext, panelId);
+				if (panel) {
+					me.panelImage.updatePanel(
+						me.toPixelOnResultImage(panel.x),
+						me.toPixelOnResultImage(panel.y),
+						me.toPixelOnResultImage(panel.width),
+						me.toPixelOnResultImage(panel.height));
+				}
+			},
+			hidePanelMarker: function () {
+				me.panelImage.resetPanel();
+			},
 			onMouseMove: function (x, y) {
 				if (!me.crtContext)
 					return;