notes. developing...

slide/Drawing/DrawingDocument.js

@@ -5381,6 +5381,153 @@ function CSlideDrawer()
 	}
 }
 
+function CNotesDrawer(page)
+{
+	this.Width 	= 0;
+	this.Height = 0;
+
+	this.HtmlPage = page;
+	this.TargetHtmlElement = document.getElementById('id_notes_target_cursor');
+
+	this.IsRepaint = false;
+	this.Slide = -1;
+
+	this.m_oOverlayApi = new AscCommon.COverlay();
+	this.m_oOverlayApi.m_oControl  = this.HtmlPage.m_oNotesOverlay;
+	this.m_oOverlayApi.m_oHtmlPage = this.HtmlPage;
+	this.m_oOverlayApi.Clear();
+
+	this.OffsetX = 10;
+	this.OffsetY = 10;
+
+	this.fontManager = new AscFonts.CFontManager();
+	this.fontManager.Initialize(true);
+
+	var oThis = this;
+
+	this.Init = function()
+	{
+		var _elem = this.HtmlPage.m_oNotes;
+		var _elemOverlay = this.HtmlPage.m_oNotesOverlay;
+
+		_elem.HtmlElement.onmousedown = this.onMouseDown;
+		_elem.HtmlElement.onmousemove = this.onMouseMove;
+		_elem.HtmlElement.onmouseup   = this.onMouseUp;
+
+		_elemOverlay.HtmlElement.onmousedown = this.onMouseDown;
+		_elemOverlay.HtmlElement.onmousemove = this.onMouseMove;
+		_elemOverlay.HtmlElement.onmouseup   = this.onMouseUp;
+	};
+
+	this.OnUpdateOverlay = function()
+	{
+		var overlay = this.m_oOverlayApi;
+
+		overlay.SetBaseTransform();
+		overlay.Clear();
+
+		if (this.Slide == -1)
+			return;
+
+		var logicDocument = this.HtmlPage.m_oLogicDocument;
+
+		var ctx = overlay.m_oContext;
+		if (drDoc.m_bIsSelection)
+		{
+			ctx.fillStyle   = "rgba(51,102,204,255)";
+			ctx.strokeStyle = "#9ADBFE";
+			ctx.beginPath();
+
+			logicDocument.drawNotesSelect(1);
+
+			ctx.globalAlpha = 0.2;
+			ctx.fill();
+			ctx.globalAlpha = 1.0;
+		}
+
+		ctx.globalAlpha = 1.0;
+		ctx = null;
+	};
+
+	this.OnPaint = function()
+	{
+		var element = this.HtmlPage.m_oNotes.HtmlElement;
+		var ctx = element.getContext('2d');
+		ctx.clearRect(0, 0, element.width, element.height);
+
+		if (-1 == this.Slide)
+			return;
+
+		var dKoef = g_dKoef_mm_to_pix / 100;
+		if (this.HtmlPage.bIsRetinaSupport)
+			dKoef *= AscCommon.AscBrowser.retinaPixelRatio;
+
+		var w_mm = this.Width;
+		var h_mm = this.Height;
+		var w_px = (w_mm * dKoef) >> 0;
+		var h_px = (h_mm * dKoef) >> 0;
+
+		var g = new AscCommon.CGraphics();
+		g.init(ctx, w_px, h_px, w_mm, h_mm);
+		g.m_oFontManager = this.fontManager;
+
+		if (this.HtmlPage.bIsRetinaSupport)
+			g.IsRetina = true;
+
+		g.m_oCoordTransform.tx = this.OffsetX;
+		g.m_oCoordTransform.ty = this.OffsetY;
+		g.transform(1, 0, 0, 1, 0, 0);
+
+		g.IsNoDrawingEmptyPlaceholderText = true;
+
+		this.HtmlPage.m_oLogicDocument.DrawNote(this.Slide, g);
+		this.IsRepaint = false;
+	};
+
+	this.OnRecalculateNote = function(slideNum, width, heigth)
+	{
+		this.Slide = slideNum;
+		this.IsRepaint = true;
+	};
+
+	this.CheckPaint = function()
+	{
+		if (this.IsRepaint)
+			this.OnPaint();
+	};
+
+	this.onMouseDown = function(e)
+	{
+		AscCommon.check_MouseDownEvent(e, true);
+		global_mouseEvent.LockMouse();
+
+		oThis.HtmlPage.Thumbnails.SetFocusElement(FOCUS_OBJECT_MAIN);
+
+		var _x = global_mouseEvent.X - oThis.HtmlPage.X - ((oThis.HtmlPage.m_oMainParent.AbsolutePosition.L * g_dKoef_mm_to_pix + 0.5) >> 0);
+		var _y = global_mouseEvent.Y - oThis.HtmlPage.Y - ((oThis.HtmlPage.m_oNotesContainer.AbsolutePosition.T * g_dKoef_mm_to_pix + 0.5) >> 0);
+
+		console.log(_x + ", " + _y);
+	};
+	this.onMouseMove = function(e)
+	{
+		AscCommon.check_MouseMoveEvent(e);
+	};
+	this.onMouseUp = function(e)
+	{
+		AscCommon.check_MouseUpEvent(e);
+
+		var _x = global_mouseEvent.X - oThis.HtmlPage.X - ((oThis.HtmlPage.m_oMainParent.AbsolutePosition.L * g_dKoef_mm_to_pix + 0.5) >> 0);
+		var _y = global_mouseEvent.Y - oThis.HtmlPage.Y - ((oThis.HtmlPage.m_oNotesContainer.AbsolutePosition.T * g_dKoef_mm_to_pix + 0.5) >> 0);
+
+		console.log(_x + ", " + _y);
+	};
+
+	this.onUpdateTarget = function()
+	{
+
+	};
+}
+
 window.g_comment_image = new Image();
 window.g_comment_image;
 window.g_comment_image.asc_complete = false;

slide/Drawing/HtmlPage.js

@@ -142,6 +142,9 @@ function CEditorPage(api)
 	this.m_oNotesContainer = null;
 	this.m_oNotes          = null;
 	this.m_oNotes_scroll   = null;
+	this.m_oNotesOverlay   = null;
+
+	this.m_oNotesApi	   = null;
 
 	// main
 	this.m_oMainParent = null;
@@ -518,6 +521,11 @@ function CEditorPage(api)
 		this.m_oNotes.Anchor = (g_anchor_left | g_anchor_top | g_anchor_right | g_anchor_bottom);
 		this.m_oNotesContainer.AddControl(this.m_oNotes);
 
+		this.m_oNotesOverlay = CreateControl("id_notes_overlay");
+		this.m_oNotesOverlay.Bounds.SetParams(0, 0, ScrollWidthMm, 1000, false, false, true, false, -1, -1);
+		this.m_oNotesOverlay.Anchor = (g_anchor_left | g_anchor_top | g_anchor_right | g_anchor_bottom);
+		this.m_oNotesContainer.AddControl(this.m_oNotesOverlay);
+
 		this.m_oNotes_scroll = CreateControl("id_vertical_scroll_notes");
 		this.m_oNotes_scroll.Bounds.SetParams(0, 0, 1000, 1000, false, false, false, false, ScrollWidthMm, -1);
 		this.m_oNotes_scroll.Anchor = (g_anchor_top | g_anchor_right | g_anchor_bottom);
@@ -577,6 +585,9 @@ function CEditorPage(api)
 		this.checkNeedRules();
 		this.initEvents();
 		this.OnResize(true);
+
+		this.m_oNotesApi = new CNotesDrawer(this);
+		this.m_oNotesApi.Init();
 	};
 
 	this.CheckRetinaDisplay = function()
@@ -659,10 +670,6 @@ function CEditorPage(api)
 		this.m_oOverlay.HtmlElement.onmousemove = this.onMouseMove;
 		this.m_oOverlay.HtmlElement.onmouseup   = this.onMouseUp;
 
-		this.m_oNotes.HtmlElement.onmousedown = this.onMouseDownNotes;
-		this.m_oNotes.HtmlElement.onmousemove = this.onMouseMoveNotes;
-		this.m_oNotes.HtmlElement.onmouseup   = this.onMouseUpNotes;
-
 		var _cur         = document.getElementById('id_target_cursor');
 		_cur.onmousedown = this.onMouseDown;
 		_cur.onmousemove = this.onMouseMove;
@@ -1852,34 +1859,11 @@ function CEditorPage(api)
 		oWordControl.EndUpdateOverlay();
 	};
 
-	this.onMouseDownNotes = function(e)
-	{
-		AscCommon.check_MouseDownEvent(e, true);
-		global_mouseEvent.LockMouse();
-
-		oThis.Thumbnails.SetFocusElement(FOCUS_OBJECT_MAIN);
-
-		var _x = global_mouseEvent.X - oThis.X - ((oThis.m_oNotesContainer.AbsolutePosition.L * g_dKoef_mm_to_pix + 0.5) >> 0);
-		var _y = global_mouseEvent.Y - oThis.Y - ((oThis.m_oNotesContainer.AbsolutePosition.T * g_dKoef_mm_to_pix + 0.5) >> 0);
-
-		console.log(_x + ", " + _y);
-	};
-	this.onMouseMoveNotes = function(e)
-	{
-		AscCommon.check_MouseMoveEvent(e);
-	};
-	this.onMouseUpNotes = function(e)
-	{
-		AscCommon.check_MouseUpEvent(e);
-
-		var _x = global_mouseEvent.X - oThis.X - ((oThis.m_oNotesContainer.AbsolutePosition.L * g_dKoef_mm_to_pix + 0.5) >> 0);
-		var _y = global_mouseEvent.Y - oThis.Y - ((oThis.m_oNotesContainer.AbsolutePosition.T * g_dKoef_mm_to_pix + 0.5) >> 0);
-
-		console.log(_x + ", " + _y);
-	};
-
 	this.setNodesEnable = function(bEnabled)
 	{
+		if (bEnabled == this.IsSupportNotes)
+			return;
+
 		GlobalSkin.SupportNotes = bEnabled;
 		this.IsSupportNotes = bEnabled;
 		this.Splitter2Pos = 0;

slide/api.js

@@ -1355,7 +1355,9 @@ background-repeat: no-repeat;\
 		if (true)
 		{
 			_innerHTML += "<div id=\"id_panel_notes\" class=\"block_elem\" style=\"background-color:#FFFFFF;\">\
-                                <canvas id=\"id_notes\" class=\"block_elem\" style=\"background-color:#FFFFFF;z-index:1\"></canvas>\
+                                <canvas id=\"id_notes\" class=\"block_elem\" style=\"-ms-touch-action: none;-webkit-user-select: none;background-color:#FFFFFF;z-index:1\"></canvas>\
+                                <canvas id=\"id_notes_overlay\" class=\"block_elem\" style=\"-ms-touch-action: none;-webkit-user-select: none;z-index:2\"></canvas>\
+                                <canvas id=\"id_notes_target_cursor\" class=\"block_elem\" width=\"1\" height=\"1\" style=\"-ms-touch-action: none;-webkit-user-select: none;width:2px;height:13px;display:none;z-index:4;\"></canvas>\
                                 <div id=\"id_vertical_scroll_notes\" style=\"left:0;top:0;width:16px;overflow:hidden;position:absolute;\">\
                                     <div id=\"panel_right_scroll_notes\" class=\"block_elem\" style=\"left:0;top:0;width:16px;height:6000px;\"></div>\
                                 </div>\