laser pointer in reporter mode

slide/Drawing/HtmlPage.js

@@ -341,6 +341,7 @@ function CEditorPage(api)
 	this.reporterTimer = -1;
 	this.reporterTimerAdd = 0;
 	this.reporterTimerLastStart = -1;
+	this.reporterPointer = false;
 
 	this.m_oApi = api;
 	var oThis   = this;
@@ -659,6 +660,11 @@ function CEditorPage(api)
 			styleContent += ".btn-prev { background-position: 0px 0px; } .btn-prev:active { background-position: -20px 0px; }";
 			styleContent += ".btn-next { background-position: 0px -20px; } .btn-next:active { background-position: -20px -20px; }";
 			styleContent += ".btn-pause { background-position: 0px -80px; } .btn-pause:active { background-position: -20px -80px; }";
+			styleContent += ".btn-pointer { background-position: 0px -100px; } .btn-pointer-active { background-position: -20px -100px; }";
+			styleContent += ".btn-pointer:active { background-position: -20px -100px; }";
+			styleContent += ".btn-text-default-img2 { background-repeat: no-repeat; position: absolute; background-color: #7d858c; border: none; color: #7d858c; font-size: 11px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 22px; cursor: pointer; }";
+			styleContent += ".btn-text-default-img2:focus { outline: 0; outline-offset: 0; }";
+
 
 			var style		 = document.createElement('style');
 			style.type 	 = 'text/css';
@@ -678,6 +684,10 @@ function CEditorPage(api)
 
 			_buttonsContent += "<label class=\"block_elem_no_select\" id=\"dem_id_slides\" style=\"color:#666666;text-shadow: none;white-space: nowrap;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; position:absolute; left:207px; bottom: 7px;\"></label>";
 
+			_buttonsContent += "<div class=\"separator block_elem_no_select\" id=\"dem_id_sep2\" style=\"left: 350px; bottom: 3px;\"></div>";
+
+			_buttonsContent += "<button class=\"btn-text-default-img\" id=\"dem_id_pointer\"  style=\"left: 365px; bottom: 3px; width: 20px; height: 20px;\"><span id=\"dem_id_pointer_span\" class=\"btn-pointer back_image_buttons1\" style=\"width:100%;height:100%;\"></span></button>";
+
 			demBottonsDiv.innerHTML = _buttonsContent;
 
 			// events
@@ -778,6 +788,35 @@ function CEditorPage(api)
 
 			};
 
+			document.getElementById("dem_id_pointer").onclick = function() {
+
+				var _wordControl = window.editor.WordControl;
+				var _elem1 = document.getElementById("dem_id_pointer");
+				var _elem2 = document.getElementById("dem_id_pointer_span");
+
+				if (_wordControl.reporterPointer)
+				{
+					_elem1.classList.remove("btn-text-default-img2");
+					_elem1.classList.add("btn-text-default-img");
+
+					_elem2.classList.remove("btn-pointer-active");
+					_elem2.classList.add("btn-pointer");
+				}
+				else
+				{
+					_elem1.classList.remove("btn-text-default-img");
+					_elem1.classList.add("btn-text-default-img2");
+
+					_elem2.classList.remove("btn-pointer");
+					_elem2.classList.add("btn-pointer-active");
+				}
+
+				_wordControl.reporterPointer = !_wordControl.reporterPointer;
+
+				if (!_wordControl.reporterPointer)
+					_wordControl.DemonstrationManager.PointerRemove();
+			};
+
 			window.onbeforeunload = function(e)
 			{
 				window.editor.sync_endDemonstration();
@@ -2846,6 +2885,8 @@ function CEditorPage(api)
 			var _buttonNext = document.getElementById("dem_id_next");
 			var _buttonSeparator = document.getElementById("dem_id_sep");
 			var _labelMain = document.getElementById("dem_id_slides");
+			var _buttonSeparator2 = document.getElementById("dem_id_sep2");
+			var _buttonPointer = document.getElementById("dem_id_pointer");
 
 			var _width = parseInt(this.m_oMainView.HtmlElement.style.width);
 			var _posStart = 10;
@@ -2855,7 +2896,7 @@ function CEditorPage(api)
 				_buttonPlay.style.display = "block";
 				_buttonReset.style.display = "block";
 
-				_posStart = (_width >> 1) - 40;
+				_posStart = (_width >> 1) - 60;
 			}
 			else
 			{
@@ -2868,6 +2909,12 @@ function CEditorPage(api)
 			_buttonNext.style.left = _posStart + 20 + "px";
 			_buttonSeparator.style.left = _posStart + 35 + "px";
 			_labelMain.style.left = _posStart + 57 + "px";
+			var _mainW = _labelMain.offsetWidth;
+			if (_mainW == 0)
+				_mainW = 55;
+			var _leftPos = _posStart + 57 + _mainW + 2;
+			_buttonSeparator2.style.left = _leftPos + "px";
+			_buttonPointer.style.left = _leftPos + 15 + "px";
 		}
 	};
 

slide/Drawing/Transitions.js

@@ -2702,6 +2702,8 @@ function CDemonstrationManager(htmlpage)
 
     this.waitReporterObject = null;
 
+    this.PointerDiv = null;
+
     var oThis = this;
 
     this.CacheSlide = function(slide_num, slide_index)
@@ -2937,9 +2939,10 @@ function CDemonstrationManager(htmlpage)
 
         this.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(this.SlideNum);
 
-        //this.DemonstrationCanvas.onmousedown  = this.onMouseDownDemonstration;
-        //this.DemonstrationCanvas.onmousemove  = this.onMouseMoveDemonstration;
+		this.Canvas.onmousedown  = this.onMouseDown;
+		this.Canvas.onmousemove  = this.onMouseMove;
         this.Canvas.onmouseup    = this.onMouseUp;
+		this.Canvas.onmouseleave = this.onMouseLeave;
 
         this.Canvas.onmousewheel = this.onMouseWhell;
         if (this.Canvas.addEventListener)
@@ -3067,9 +3070,10 @@ function CDemonstrationManager(htmlpage)
             oThis.Overlay.width = oThis.Canvas.width;
             oThis.Overlay.height = oThis.Canvas.height;
 
-            //oThis.Overlay.onmousedown  = oThis.onMouseDownDemonstration;
-            //oThis.Overlay.onmousemove  = oThis.onMouseMoveDemonstration;
+            oThis.Overlay.onmousedown  = oThis.onMouseDown;
+            oThis.Overlay.onmousemove  = oThis.onMouseMove;
             oThis.Overlay.onmouseup    = oThis.onMouseUp;
+			oThis.Overlay.onmouseleave = oThis.onMouseLeave;
 
             oThis.Overlay.onmousewheel = oThis.onMouseWhell;
             if (oThis.Overlay.addEventListener)
@@ -3348,8 +3352,50 @@ function CDemonstrationManager(htmlpage)
         return false;
     }
 
+    this.onMouseLeave = function(e)
+    {
+		if (!oThis.HtmlPage.m_oApi.isReporterMode)
+			return;
+		if (!oThis.HtmlPage.reporterPointer)
+			return;
+
+		oThis.PointerRemove();
+
+        e.preventDefault();
+        return false;
+    }
+
     this.onMouseMove = function(e)
     {
+        if (!oThis.HtmlPage.m_oApi.isReporterMode)
+            return;
+		if (!oThis.HtmlPage.reporterPointer)
+			return;
+
+        var _x = 0;
+        var _y = 0;
+		if (e.pageX || e.pageY)
+		{
+			_x = e.pageX;
+			_y = e.pageY;
+		}
+		else if (e.clientX || e.clientY)
+		{
+			_x = e.clientX;
+			_y = e.clientY;
+		}
+
+		_x -= parseInt(oThis.HtmlPage.m_oMainParent.HtmlElement.style.left);
+		_y -= parseInt(oThis.HtmlPage.m_oMainParent.HtmlElement.style.top);
+
+		var _rect = oThis.Transition.Rect;
+		_x -= _rect.x;
+		_y -= _rect.y;
+		_x /= _rect.w;
+		_y /= _rect.h;
+
+		oThis.PointerMove(_x, _y);
+
         e.preventDefault();
         return false;
     }
@@ -3484,4 +3530,49 @@ function CDemonstrationManager(htmlpage)
         if (this.SlideNum < this.SlidesCount)
             this.StartSlide(this.Transition.IsPlaying(), false);
     }
+
+    this.PointerMove = function(x, y, w, h)
+    {
+        if (!this.PointerDiv)
+        {
+            this.PointerDiv = document.createElement("div");
+            this.PointerDiv.setAttribute("style", "position:absolute;z-index:100;pointer-events:none;width:10px;height:10px;margin:0;padding:0;border:none;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAX0lEQVR42mOAgTcyylFAfAqIf4MwlB0FkUUomgrE/3Hgqcgm/SeAoxhAVsAEPucW/f/38SMIg9jICk+BFP6GcsAKoADMfiOrAlP4m2iFRFuN6RlZFRDG8AzRwUN0gAMAjHbNbQMjzBIAAAAASUVORK5CYII=')");
+			this.DemonstrationDiv.appendChild(this.PointerDiv);
+        }
+        var _rect = this.Transition.Rect;
+		this.PointerDiv.style.left = ((_rect.x + x * _rect.w - 5) >> 0) + "px";
+		this.PointerDiv.style.top = ((_rect.y + y * _rect.h - 5) >> 0) + "px";
+
+		if (this.HtmlPage.m_oApi.isReporterMode)
+        {
+			this.Canvas.style.cursor = "none";
+			if (this.Overlay)
+				this.Overlay.style.cursor = "none";
+
+            var _msg_ = {
+                "reporter_command" : "pointer_move",
+                "x" : x,
+                "y" : y
+            };
+			window.postMessage(JSON.stringify(_msg_), "*");
+        }
+    }
+
+    this.PointerRemove = function()
+    {
+        if (!this.PointerDiv)
+            return;
+
+		this.DemonstrationDiv.removeChild(this.PointerDiv);
+		this.PointerDiv = null;
+
+		if (this.HtmlPage.m_oApi.isReporterMode)
+		{
+			this.Canvas.style.cursor = "default";
+			if (this.Overlay)
+				this.Overlay.style.cursor = "default";
+
+			window.postMessage("{ \"reporter_command\" : \"pointer_remove\" }", "*");
+		}
+    }
 }
\ No newline at end of file

slide/api.js

@@ -5951,10 +5951,22 @@ background-repeat: no-repeat;\
 				case "go_to_slide":
 				{
 					_this.WordControl.DemonstrationManager.GoToSlide(_obj["slide"]);
+					break;
 				}
 				case "start_show":
 				{
 					_this.WordControl.DemonstrationManager.EndWaitReporter();
+					break;
+				}
+				case "pointer_move":
+				{
+					_this.WordControl.DemonstrationManager.PointerMove(_obj["x"], _obj["y"], _obj["w"], _obj["h"]);
+					break;
+				}
+				case "pointer_remove":
+				{
+					_this.WordControl.DemonstrationManager.PointerRemove();
+					break;
 				}
 				default:
 					break;