notes. developing...

common/scroll.js

@@ -2214,7 +2214,7 @@ ScrollObject.prototype = {
 
             startColorFadeIn -= 2;
 
-            if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
+            if ( that._checkPiperImagesV() ) {
                 x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
                 y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;
 
@@ -2234,7 +2234,7 @@ ScrollObject.prototype = {
 
                 img = that.piperImgVert[0];
             }
-            else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
+            else if ( that._checkPiperImagesH() ) {
                 x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
                 y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);
 
@@ -2265,7 +2265,7 @@ ScrollObject.prototype = {
                 that.fadeInActive = false;
                 that.startColorFadeInOutStart = startColorFadeIn + 2;
 
-                if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
+                if ( that._checkPiperImagesV() ) {
 
                     ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
                     _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
@@ -2284,7 +2284,7 @@ ScrollObject.prototype = {
                     img = that.piperImgVert[0];
 
                 }
-                else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
+                else if ( that._checkPiperImagesH() ) {
 
                     ctx_piperImg = that.piperImgHor[0].getContext( '2d' );
                     _data = ctx_piperImg.getImageData( 0, 0, that.piperImgHor[0].width, that.piperImgHor[0].height );
@@ -2332,7 +2332,7 @@ ScrollObject.prototype = {
 
             startColorFadeOut += 2;
 
-            if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
+            if ( that._checkPiperImagesV() ) {
                 x = that.scroller.x + (that.settings.slimScroll ? 2 : 3);
                 y = (that.scroller.y >> 0) + Math.floor( that.scroller.h / 2 ) - 6;
 
@@ -2354,7 +2354,7 @@ ScrollObject.prototype = {
                 img = that.piperImgVert[0];
 
             }
-            else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
+            else if ( that._checkPiperImagesH() ) {
                 x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
                 y = that.scroller.y + (that.settings.slimScroll ? 2 : 3);
 
@@ -2385,7 +2385,7 @@ ScrollObject.prototype = {
                 that.startColorFadeInOutStart = startColorFadeOut - 2;
                 that.fadeOutActive = false;
 
-                if ( that.isVerticalScroll && that.maxScrollY != 0 ) {
+                if ( that._checkPiperImagesV() ) {
 
                     ctx_piperImg = that.piperImgVert[0].getContext( '2d' );
                     _data = ctx_piperImg.getImageData( 0, 0, that.piperImgVert[0].width, that.piperImgVert[0].height );
@@ -2404,7 +2404,7 @@ ScrollObject.prototype = {
                     img = that.piperImgVert[0];
 
                 }
-                else if ( that.isHorizontalScroll && that.maxScrollX != 0 ) {
+                else if ( that._checkPiperImagesH() ) {
                     x = (that.scroller.x >> 0) + Math.floor( that.scroller.w / 2 ) - 6;
                     y = that.scroller.y + 3;
 
@@ -2606,11 +2606,11 @@ ScrollObject.prototype = {
             this.context.fill();
             this.context.stroke();
 
-            if ( this.isVerticalScroll && this.maxScrollY != 0 ) {
+            if ( this._checkPiperImagesV() ) {
                 this.context.drawImage( this.piperImgVert[piperImgIndex], this.scroller.x + (this.settings.slimScroll ? 2 : 3), (this.scroller.y >> 0) + Math.floor( this.scroller.h / 2 ) - 6 );
             }
-            else if ( this.isHorizontalScroll && this.maxScrollX != 0 ) {
-                this.context.drawImage( this.piperImgHor[piperImgIndex], (this.scroller.x >> 0) + Math.floor( this.scroller.w / 2 ) - 6, this.scroller.y + (this.settings.slimScroll ? 2 : 3) );
+            else if ( this._checkPiperImagesH() ) {
+			    this.context.drawImage( this.piperImgHor[piperImgIndex], (this.scroller.x >> 0) + Math.floor( this.scroller.w / 2 ) - 6, this.scroller.y + (this.settings.slimScroll ? 2 : 3) );
             }
 
         }
@@ -2618,6 +2618,18 @@ ScrollObject.prototype = {
         this.lastScrollerStatus = this.scrollerStatus;
 
     },
+
+    _checkPiperImagesV : function() {
+		if ( this.isVerticalScroll && this.maxScrollY != 0 && this.scroller.h >= 13 )
+			return true;
+		return false;
+    },
+    _checkPiperImagesH : function() {
+        if ( this.isHorizontalScroll && this.maxScrollX != 0 && this.scroller.w >= 13 )
+            return true;
+        return false;
+    },
+
     _drawArrow:function ( type ) {
         if ( this.settings.showArrows ) {
             var w = this.canvasW;

slide/Drawing/DrawingDocument.js

@@ -5484,10 +5484,61 @@ function CNotesDrawer(page)
 		this.IsRepaint = false;
 	};
 
-	this.OnRecalculateNote = function(slideNum, width, heigth)
+	this.OnRecalculateNote = function(slideNum, width, height)
 	{
 		this.Slide = slideNum;
+		this.Width = width;
+		this.Height = height;
 		this.IsRepaint = true;
+
+		var element = this.HtmlPage.m_oNotes.HtmlElement;
+		var settings = {
+			showArrows    : true,
+			animateScroll : false,
+			screenW       : element.width,
+			screenH       : element.height,
+			screenAddW    : 0,
+			screenAddH    : 0,
+			vsscrollStep  : 45,
+			hsscrollStep  : 45,
+			contentW      : 2 * this.OffsetX + ((width * g_dKoef_mm_to_pix) >> 0),
+			contentH      : 2 * this.OffsetY + ((height * g_dKoef_mm_to_pix) >> 0),
+			scrollerMinHeight : 5
+		};
+
+		if (this.bIsRetinaSupport)
+		{
+			settings.screenW = AscCommon.AscBrowser.convertToRetinaValue(settings.screenW);
+			settings.screenH = AscCommon.AscBrowser.convertToRetinaValue(settings.screenH);
+
+			settings.screenAddH = AscCommon.AscBrowser.convertToRetinaValue(settings.screenAddH);
+		}
+
+		document.getElementById('panel_right_scroll_notes').style.height = settings.contentH + "px";
+
+		if (this.HtmlPage.m_oScrollNotes_)
+		{
+			this.HtmlPage.m_oScrollNotes_.Repos(settings, undefined, true);
+		}
+		else
+		{
+			this.HtmlPage.m_oScrollNotes_ = new AscCommon.ScrollObject("id_vertical_scroll_notes", settings);
+
+			this.HtmlPage.m_oScrollNotes_.onLockMouse  = function(evt)
+			{
+				AscCommon.check_MouseDownEvent(evt, true);
+				global_mouseEvent.LockMouse();
+			};
+			this.HtmlPage.m_oScrollNotes_.offLockMouse = function(evt)
+			{
+				AscCommon.check_MouseUpEvent(evt);
+			};
+
+			this.HtmlPage.m_oScrollNotes_.bind("scrollvertical", function(evt)
+			{
+				// TODO:
+			});
+		}
 	};
 
 	this.CheckPaint = function()
@@ -5526,6 +5577,11 @@ function CNotesDrawer(page)
 	{
 
 	};
+
+	this.OnResize = function()
+	{
+		this.OnRecalculateNote(this.Slide, this.Width, this.Height);
+	};
 }
 
 window.g_comment_image = new Image();

slide/Drawing/HtmlPage.js

@@ -970,6 +970,9 @@ function CEditorPage(api)
 
 		if (this.MobileTouchManager)
 			this.MobileTouchManager.Resize_After();
+
+		if (this.IsSupportNotes && this.m_oNotesApi)
+			this.m_oNotesApi.OnResize();
 	};
 
 	this.zoom_Out = function()
@@ -2430,22 +2433,6 @@ function CEditorPage(api)
 			this.m_oScrollVerApi = this.m_oScrollVer_;
 		}
 
-		if (GlobalSkin.SupportNotes)
-		{
-			if (this.m_oScrollNotes_)
-			{
-				this.m_oScrollNotes_.Repos(settings);
-			}
-			else
-			{
-				this.m_oScrollNotes_ = new AscCommon.ScrollObject("id_vertical_scroll_notes", settings);
-				this.m_oScrollNotes_.bind("scrollvertical", function(evt)
-				{
-				});
-				this.m_oScrollNotesApi = this.m_oScrollNotes_;
-			}
-		}
-
 		this.m_oApi.sendEvent("asc_onUpdateScrolls", this.m_dDocumentWidth, this.m_dDocumentHeight);
 
 		this.m_dScrollX_max = this.m_bIsHorScrollVisible ? this.m_oScrollHorApi.getMaxScrolledX() : 0;
@@ -2544,6 +2531,9 @@ function CEditorPage(api)
 
 		if (this.MobileTouchManager)
 			this.MobileTouchManager.Resize_After();
+
+		if (this.IsSupportNotes && this.m_oNotesApi)
+			this.m_oNotesApi.OnResize();
 	};
 
 	this.OnResize2 = function(isAttack)
@@ -2592,6 +2582,9 @@ function CEditorPage(api)
 		this.onTimerScroll_sync(true);
 
 		this.DemonstrationManager.Resize();
+
+		if (this.IsSupportNotes && this.m_oNotesApi)
+			this.m_oNotesApi.OnResize();
 	};
 
 	this.checkNeedRules     = function()

slide/api.js

@@ -1359,7 +1359,7 @@ background-repeat: no-repeat;\
                                 <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 id=\"panel_right_scroll_notes\" class=\"block_elem\" style=\"left:0;top:0;width:1px;height:1px;\"></div>\
                                 </div>\
                             </div>\
                             </div>";