mobile web: new table track

common/Scrolls/mobileTouchManagerBase.js

@@ -638,13 +638,63 @@
 	// грузим в конструкторе, используем тогда, когда загружено (asc_complete)
 	CMobileTouchManagerBase.prototype.LoadMobileImages = function()
 	{
-		window.g_table_track_mobile_move = new Image();
-		window.g_table_track_mobile_move.asc_complete = false;
-		window.g_table_track_mobile_move.onload       = function()
+		window.g_table_track_mobile_move = document.createElement("canvas");
+
+		if (AscCommon.AscBrowser.isRetina)
 		{
-			window.g_table_track_mobile_move.asc_complete = true;
-		};
-		window.g_table_track_mobile_move.src          = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArlJREFUeNqMlc9rWkEQx8ffGqMJBJpSUEIISInxpCfT1krioQQ85xISEKGBkGuhpxwEL4GAoOBJ8V9IxJCQ1l4SkFKxQvEfKEXQ0Nb4IxLtfBefvMeriQPj7ps377Mzu7OjZjgckoYlGo2+tFqtcZ1OFyAiG00nfx8eHj7f3d19SKfTP5g11LBRs7u761lYWPiytbVl9/l8ZDKZpqL1ej0qlUp0enr6p9FovM5kMhU92w02my0OmN/vJ0TcbreJVxZzCH9ARqORQqGQCurxeAC2n52dxfkxDOCMXq9/5fV6aTAYEIc/BkHYkWKx2Ni2ubn5X+j5+fkbweIf5GdFmoAhMkny+TzF43GyWCzi+ejoSIA3NjYUQA4IA5xMmGnhBO33+4rowuEwbW9vKz7Gdtzf36uiHH2n1eJQkCoE0WFeKBTE2O12qdlsKhQ2vLu6uhKjXMHSyuhivLi4oEQiQVLUk/T4+JiKxaLCJtKXQNDLy0tKJpM0NzcnrThR4HNyciLm6+vraiAEB8P1KE9hoqCMzGYzGQwG4asASoZAIEDz8/OUSqWeBGLxg4MDWl1dHe+rKkKUDWpqf3//SeDh4SG5XC5x6nKGYg+lW+J2u6nT6TwKBEzuo0pZPiJSyPX1NWWz2bFdy1UWiUQIt0rykUSe8pDrr837MCMvakgwGCSHw0G5XE487+3t0dLSkip6FDozumABOODVvt3c3PiXl5cVjq1Wi1ZWVmhnZ0dcL6fTqYoMUqlUYP8Klg7dhlNp3N7evuM7a0DZcE9UrL64uEh2u318APJ35XIZl6HN0I/1er2GfmhkfcGb/JYP4/3s7OwaL2Ceph/yvnU5i+/VajVVq9U+semnaLCjTvGM9TkuAaKesmP3WX+z/mKts3Y00l/ACDIzamfa0UKPCU4QR9tDEwIcfwH/BBgAl4G4NBf6Z6AAAAAASUVORK5CYII=";
+			window.g_table_track_mobile_move.width = 40;
+			window.g_table_track_mobile_move.height = 40;
+
+		}
+		else
+		{
+			window.g_table_track_mobile_move.width = 20;
+			window.g_table_track_mobile_move.height = 20;
+		}
+		window.g_table_track_mobile_move.asc_complete = true;
+		window.g_table_track_mobile_move.size = 20;
+
+		var _ctx = window.g_table_track_mobile_move.getContext("2d");
+		if (AscCommon.AscBrowser.isRetina)
+			_ctx.setTransform(2, 0, 0, 2, 0, 0);
+
+		_ctx.lineWidth = 1;
+
+		var r = 4;
+		var w = 19;
+		var h = 19;
+		var x = 0.5;
+		var y = 0.5;
+
+		_ctx.moveTo(x + r, y);
+		_ctx.lineTo(x + w - r, y);
+		_ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+		_ctx.lineTo(x + w, y + h - r);
+		_ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+		_ctx.lineTo(x + r, y + h);
+		_ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+		_ctx.lineTo(x, y + r);
+		_ctx.quadraticCurveTo(x, y, x + r, y);
+
+		_ctx.strokeStyle = "#747474";
+		_ctx.fillStyle = "#DFDFDF";
+		_ctx.fill();
+		_ctx.stroke();
+		_ctx.beginPath();
+
+		_ctx.moveTo(2, 10);
+		_ctx.lineTo(10, 2);
+		_ctx.lineTo(18, 10);
+		_ctx.lineTo(10, 18);
+		_ctx.closePath();
+
+		_ctx.fillStyle = "#146FE1";
+		_ctx.fill();
+		_ctx.beginPath();
+
+		_ctx.fillStyle = "#DFDFDF";
+		_ctx.fillRect(6, 6, 8, 8);
+		_ctx.beginPath();
 	};
 
 	// onTouchStart => попали ли в якорьки селекта, чтобы не начинать скроллы/зумы
@@ -1481,6 +1531,9 @@
 			_tableW += _cols[i];
 		}
 
+		//var _mainFillStyle = "#DFDFDF";
+		var _mainFillStyle = "rgba(223, 223, 223, 0.5)";
+
 		if (!_table_outline_dr.TableMatrix || global_MatrixTransformer.IsIdentity(_table_outline_dr.TableMatrix))
 		{
 			this.TableMovePoint = {X : _tableOutline.X, Y : _tableOutline.Y};
@@ -1495,12 +1548,9 @@
 
 			overlay.CheckPoint(TableMoveRect_x, TableMoveRect_y);
 			overlay.CheckPoint(TableMoveRect_x + _rectWidth, TableMoveRect_y + _rectWidth);
-			ctx.drawImage(window.g_table_track_mobile_move, TableMoveRect_x, TableMoveRect_y);
+			ctx.drawImage(window.g_table_track_mobile_move, TableMoveRect_x, TableMoveRect_y, window.g_table_track_mobile_move.size, window.g_table_track_mobile_move.size);
 
-			var gradObj = ctx.createLinearGradient((pos1.X >> 0) + 0.5, TableMoveRect_y, (pos1.X >> 0) + 0.5, TableMoveRect_y + _rectWidth);
-			gradObj.addColorStop(0, "#f1f1f1");
-			gradObj.addColorStop(1, "#dfdfdf");
-			ctx.fillStyle = gradObj;
+			ctx.fillStyle = _mainFillStyle;
 
 			overlay.AddRoundRect((pos1.X >> 0) + 0.5, TableMoveRect_y, (pos2.X - pos1.X) >> 0, _rectWidth, 4);
 
@@ -1525,10 +1575,8 @@
 			var pos4 = DrawingDocument.ConvertCoordsToCursorWR(_tableOutline.X, _y2, DrawingDocument.m_lCurrentPage);
 
 			var _ttX = (pos1.X >> 0) + 0.5 - (_epsRects + _rectWidth);
-			gradObj  = ctx.createLinearGradient(_ttX, (pos3.Y >> 0) + 0.5, _ttX, (pos3.Y >> 0) + 0.5 + (pos4.Y - pos3.Y) >> 0);
-			gradObj.addColorStop(0, "#f1f1f1");
-			gradObj.addColorStop(1, "#dfdfdf");
-			ctx.fillStyle = gradObj;
+
+			ctx.fillStyle = _mainFillStyle;
 
 			overlay.AddRoundRect((pos1.X >> 0) + 1.5 - (_epsRects + _rectWidth), (pos3.Y >> 0) + 0.5, _rectWidth - 1, (pos4.Y - pos3.Y) >> 0, 4);
 
@@ -1646,10 +1694,7 @@
 
 			ctx.drawImage(window.g_table_track_mobile_move, this.TableMovePoint.X - _offset, this.TableMovePoint.Y - _offset, _rectW, _rectW);
 
-			var gradObj = ctx.createLinearGradient(this.TableMovePoint.X, this.TableMovePoint.Y - _offset, this.TableMovePoint.X, this.TableMovePoint.Y - _offset + _rectW);
-			gradObj.addColorStop(0, "#f1f1f1");
-			gradObj.addColorStop(1, "#dfdfdf");
-			ctx.fillStyle = gradObj;
+			ctx.fillStyle = _mainFillStyle;
 
 			overlay.AddRoundRectCtx(ctx, this.TableMovePoint.X, this.TableMovePoint.Y - _offset, _tableW, _rectW, 5 / dKoef);
 
@@ -1670,10 +1715,7 @@
 				_y2 += _table_markup.Rows[i].H;
 			}
 
-			gradObj = ctx.createLinearGradient(this.TableMovePoint.X - _offset, this.TableMovePoint.Y, this.TableMovePoint.X - _offset, this.TableMovePoint.X - _offset + _y2 - _y1);
-			gradObj.addColorStop(0, "#f1f1f1");
-			gradObj.addColorStop(1, "#dfdfdf");
-			ctx.fillStyle = gradObj;
+			ctx.fillStyle = _mainFillStyle;
 
 			overlay.AddRoundRectCtx(ctx, this.TableMovePoint.X - _offset, this.TableMovePoint.Y, _rectW, _y2 - _y1, 5 / dKoef);