fix(bug): postil image zoom

dream-num · Oct 21, 2020 · 76dbb5c · 76dbb5c
1 parent 37c56ac
commit 76dbb5c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 58 deletions.
diff --git a/src/controllers/imageCtrl.js b/src/controllers/imageCtrl.js
@@ -97,19 +97,19 @@ const imageCtrl = {
         let src = imgItem.src;
         let imgItemParam = _this.getImgItemParam(imgItem);
 
-        let width = imgItemParam.width*Store.zoomRatio;
-        let height = imgItemParam.height*Store.zoomRatio;
-        let left = imgItemParam.left*Store.zoomRatio;
-        let top = imgItemParam.top*Store.zoomRatio;
+        let width = imgItemParam.width * Store.zoomRatio;
+        let height = imgItemParam.height * Store.zoomRatio;
+        let left = imgItemParam.left * Store.zoomRatio;
+        let top = imgItemParam.top * Store.zoomRatio;
         let position = imgItemParam.position;
 
         let borderWidth = imgItem.border.width;
 
         return  `<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width:${width}px;height:${height}px;padding:0;position:${position};left:${left}px;top:${top}px;z-index:200;">
                     <div class="luckysheet-modal-dialog-content" style="width:100%;height:100%;overflow:hidden;position:relative;">
-                        <img src="${src}" style="position:absolute;width:${imgItem.default.width*Store.zoomRatio}px;height:${imgItem.default.height*Store.zoomRatio}px;left:${-imgItem.crop.offsetLeft*Store.zoomRatio}px;top:${-imgItem.crop.offsetTop*Store.zoomRatio}px;" />
+                        <img src="${src}" style="position:absolute;width:${imgItem.default.width * Store.zoomRatio}px;height:${imgItem.default.height * Store.zoomRatio}px;left:${-imgItem.crop.offsetLeft * Store.zoomRatio}px;top:${-imgItem.crop.offsetTop * Store.zoomRatio}px;" />
                     </div>
-                    <div class="luckysheet-modal-dialog-border" style="border:${borderWidth}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius*Store.zoomRatio}px;position:absolute;left:${-borderWidth}px;right:${-borderWidth}px;top:${-borderWidth}px;bottom:${-borderWidth}px;"></div>
+                    <div class="luckysheet-modal-dialog-border" style="border:${borderWidth}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius * Store.zoomRatio}px;position:absolute;left:${-borderWidth}px;right:${-borderWidth}px;top:${-borderWidth}px;bottom:${-borderWidth}px;"></div>
                 </div>`;
     },
     getSliderHtml: function() {
@@ -354,10 +354,10 @@ const imageCtrl = {
             let item = _this.images[id];
             let imgItemParam = _this.getImgItemParam(item);
 
-            let width = imgItemParam.width*Store.zoomRatio;
-            let height = imgItemParam.height*Store.zoomRatio;
-            let left = imgItemParam.left*Store.zoomRatio;
-            let top = imgItemParam.top*Store.zoomRatio;
+            let width = imgItemParam.width * Store.zoomRatio;
+            let height = imgItemParam.height * Store.zoomRatio;
+            let left = imgItemParam.left * Store.zoomRatio;
+            let top = imgItemParam.top * Store.zoomRatio;
             let position = imgItemParam.position;
 
             $("#luckysheet-modal-dialog-activeImage").show().css({
@@ -370,19 +370,19 @@ const imageCtrl = {
 
             $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
                 "background-image": "url(" + item.src + ")",
-                "background-size": item.default.width*Store.zoomRatio + "px " + item.default.height*Store.zoomRatio + "px",
-                "background-position": -item.crop.offsetLeft*Store.zoomRatio + "px " + -item.crop.offsetTop*Store.zoomRatio + "px"
+                "background-size": item.default.width * Store.zoomRatio + "px " + item.default.height * Store.zoomRatio + "px",
+                "background-position": -item.crop.offsetLeft * Store.zoomRatio + "px " + -item.crop.offsetTop * Store.zoomRatio + "px"
             })
 
             $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css({
-                "border-width": item.border.width*Store.zoomRatio,
+                "border-width": item.border.width * Store.zoomRatio,
                 "border-style": item.border.style,
                 "border-color": item.border.color,
-                "border-radius": item.border.radius*Store.zoomRatio,
-                "left": -item.border.width*Store.zoomRatio,
-                "right": -item.border.width*Store.zoomRatio,
-                "top": -item.border.width*Store.zoomRatio,
-                "bottom": -item.border.width*Store.zoomRatio,
+                "border-radius": item.border.radius * Store.zoomRatio,
+                "left": -item.border.width * Store.zoomRatio,
+                "right": -item.border.width * Store.zoomRatio,
+                "top": -item.border.width * Store.zoomRatio,
+                "bottom": -item.border.width * Store.zoomRatio,
             })
 
             _this.sliderHtmlShow();
@@ -591,10 +591,10 @@ const imageCtrl = {
         let imgItem = _this.images[_this.currentImgId];
         let imgItemParam = _this.getImgItemParam(imgItem);
 
-        let width = imgItemParam.width*Store.zoomRatio;
-        let height = imgItemParam.height*Store.zoomRatio;
-        let left = imgItemParam.left*Store.zoomRatio;
-        let top = imgItemParam.top*Store.zoomRatio;
+        let width = imgItemParam.width * Store.zoomRatio;
+        let height = imgItemParam.height * Store.zoomRatio;
+        let left = imgItemParam.left * Store.zoomRatio;
+        let top = imgItemParam.top * Store.zoomRatio;
         let position = imgItemParam.position;
 
         $("#" + _this.currentImgId).show().css({
@@ -605,20 +605,20 @@ const imageCtrl = {
             "position": position
         });
         $("#" + _this.currentImgId + " img").css({
-            "width": imgItem.default.width*Store.zoomRatio,
-            "height": imgItem.default.height*Store.zoomRatio,
-            "left": -imgItem.crop.offsetLeft*Store.zoomRatio,
-            "top": -imgItem.crop.offsetTop*Store.zoomRatio
+            "width": imgItem.default.width * Store.zoomRatio,
+            "height": imgItem.default.height * Store.zoomRatio,
+            "left": -imgItem.crop.offsetLeft * Store.zoomRatio,
+            "top": -imgItem.crop.offsetTop * Store.zoomRatio
         });
         $("#" + _this.currentImgId + " .luckysheet-modal-dialog-border").css({
-            "border-width": imgItem.border.width*Store.zoomRatio,
+            "border-width": imgItem.border.width * Store.zoomRatio,
             "border-style": imgItem.border.style,
             "border-color": imgItem.border.color,
-            "border-radius": imgItem.border.radius*Store.zoomRatio,
-            "left": -imgItem.border.width*Store.zoomRatio,
-            "right": -imgItem.border.width*Store.zoomRatio,
-            "top": -imgItem.border.width*Store.zoomRatio,
-            "bottom": -imgItem.border.width*Store.zoomRatio,
+            "border-radius": imgItem.border.radius * Store.zoomRatio,
+            "left": -imgItem.border.width * Store.zoomRatio,
+            "right": -imgItem.border.width * Store.zoomRatio,
+            "top": -imgItem.border.width * Store.zoomRatio,
+            "bottom": -imgItem.border.width * Store.zoomRatio,
         })
 
         _this.currentImgId = null;

diff --git a/src/controllers/postil.js b/src/controllers/postil.js
@@ -208,18 +208,21 @@ const luckysheetPostil = {
         let toX = col;
         let toY = row_pre;
 
-        let fromX = toX + 18;
-        let fromY = toY - 18;
+        let fromX = toX + 18 * Store.zoomRatio;
+        let fromY = toY - 18 * Store.zoomRatio;
 
         if(fromY < 0){
             fromY = 2;
         }
 
+        let width = _this.defaultWidth * Store.zoomRatio
+        let height = _this.defaultHeight * Store.zoomRatio
+
         let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
 
         let html =  '<div id="luckysheet-postil-overshow">' +
                         '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
-                        '<div style="width:132px;min-height:72px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ value +'</div>' +
+                        '<div style="width:'+ (width - 12) +'px;min-height:'+ (height - 12) +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;z-index:100;">'+ value +'</div>' +
                     '</div>';
 
         $(html).appendTo($("#luckysheet-cell-main"));
@@ -349,10 +352,10 @@ const luckysheetPostil = {
             let toX = col;
             let toY = row_pre;
 
-            let left = postil["left"] == null ? toX + 18 : postil["left"];
-            let top = postil["top"] == null ? toY - 18 : postil["top"];
-            let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-            let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+            let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+            let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+            let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+            let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
             let value = postil["value"] == null ? "" : postil["value"];
 
             if(top < 0){
@@ -418,18 +421,21 @@ const luckysheetPostil = {
         let toX = col;
         let toY = row_pre;
 
-        let fromX = toX + 18;
-        let fromY = toY - 18;
+        let fromX = toX + 18 * Store.zoomRatio;
+        let fromY = toY - 18 * Store.zoomRatio;
 
         if(fromY < 0){
             fromY = 2;
         }
 
+        let width = _this.defaultWidth * Store.zoomRatio;
+        let height = _this.defaultHeight * Store.zoomRatio;
+
         let size = _this.getArrowCanvasSize(fromX, fromY, toX, toY);
 
         let html =  '<div id="luckysheet-postil-show_'+ r +'_'+ c +'" class="luckysheet-postil-show luckysheet-postil-show-active">' +
                         '<canvas class="arrowCanvas" width="'+ size[2] +'" height="'+ size[3] +'" style="position:absolute;left:'+ size[0] +'px;top:'+ size[1] +'px;z-index:100;pointer-events:none;"></canvas>' +
-                        '<div class="luckysheet-postil-show-main" style="width:144px;height:84px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;box-sizing:border-box;z-index:100;">' +
+                        '<div class="luckysheet-postil-show-main" style="width:'+ width +'px;height:'+ height +'px;color:#000;padding:5px;border:1px solid #000;background-color:rgb(255,255,225);position:absolute;left:'+ fromX +'px;top:'+ fromY +'px;box-sizing:border-box;z-index:100;">' +
                             '<div class="luckysheet-postil-dialog-move">' +
                                 '<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-t" data-type="t"></div>' +
                                 '<div class="luckysheet-postil-dialog-move-item luckysheet-postil-dialog-move-item-r" data-type="r"></div>' +
@@ -507,10 +513,10 @@ const luckysheetPostil = {
             let toX = col;
             let toY = row_pre;
 
-            let left = postil["left"] == null ? toX + 18 : postil["left"];
-            let top = postil["top"] == null ? toY - 18 : postil["top"];
-            let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-            let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+            let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+            let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+            let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+            let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
             let value = postil["value"] == null ? "" : postil["value"];
 
             if(top < 0){
@@ -609,10 +615,10 @@ const luckysheetPostil = {
             let toX = col;
             let toY = row_pre;
 
-            let left = postil["left"] == null ? toX + 18 : postil["left"];
-            let top = postil["top"] == null ? toY - 18 : postil["top"];
-            let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-            let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+            let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+            let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+            let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+            let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
             let value = postil["value"] == null ? "" : postil["value"];
 
             if(top < 0){
@@ -723,10 +729,10 @@ const luckysheetPostil = {
                         let toX = col;
                         let toY = row_pre;
 
-                        let left = postil["left"] == null ? toX + 18 : postil["left"];
-                        let top = postil["top"] == null ? toY - 18 : postil["top"];
-                        let width = postil["width"] == null ? _this.defaultWidth : postil["width"];
-                        let height = postil["height"] == null ? _this.defaultHeight : postil["height"];
+                        let left = postil["left"] == null ? toX + 18 * Store.zoomRatio : postil["left"] * Store.zoomRatio;
+                        let top = postil["top"] == null ? toY - 18 * Store.zoomRatio : postil["top"] * Store.zoomRatio;
+                        let width = postil["width"] == null ? _this.defaultWidth * Store.zoomRatio : postil["width"] * Store.zoomRatio;
+                        let height = postil["height"] == null ? _this.defaultHeight * Store.zoomRatio : postil["height"] * Store.zoomRatio;
                         let value = postil["value"] == null ? "" : postil["value"];
 
                         if(top < 0){

diff --git a/src/controllers/zoom.js b/src/controllers/zoom.js
@@ -5,6 +5,7 @@ import sheetmanage from './sheetmanage';
 import {changeSheetContainerSize} from './resize';
 import { jfrefreshgrid_rhcw } from '../global/refresh';
 import server from './server';
+import luckysheetPostil from './postil';
 import imageCtrl from './imageCtrl';
 
 
@@ -31,6 +32,9 @@ export function zoomChange(ratio){
 
         let currentSheet = sheetmanage.getSheetByIndex();
 
+        //批注
+        luckysheetPostil.buildAllPs(currentSheet.data);
+
         //图片
         imageCtrl.images = currentSheet.images;
         imageCtrl.allImagesShow();

diff --git a/src/global/draw.js b/src/global/draw.js
@@ -1112,7 +1112,7 @@ let nullCellRender = function(r, c, start_r, start_c, end_r, end_c,luckysheetTab
 
     //若单元格有批注
     if(Store.flowdata[r][c] != null && Store.flowdata[r][c].ps != null){
-        let ps_w = 5*Store.zoomRatio, ps_h = 5*Store.zoomRatio; 
+        let ps_w = 8*Store.zoomRatio, ps_h = 8*Store.zoomRatio; 
         luckysheetTableContent.beginPath();
         luckysheetTableContent.moveTo( (end_c + offsetLeft - 1- ps_w),  (start_r + offsetTop));
         luckysheetTableContent.lineTo( (end_c + offsetLeft - 1),  (start_r + offsetTop));
@@ -1338,17 +1338,17 @@ let cellRender = function(r, c, start_r, start_c, end_r, end_c, value, luckyshee
 
         let verticalAlignPos_text = (pos_y + verticalCellHeight - space_height) ; //文本垂直方向基准线
         luckysheetTableContent.textBaseline = "bottom";
-        let verticalAlignPos_checkbox = verticalAlignPos_text - 13;
+        let verticalAlignPos_checkbox = verticalAlignPos_text - 13 * Store.zoomRatio;
 
         if(verticalAlign == "0"){ //居中对齐 
             verticalAlignPos_text = (pos_y + verticalCellHeight / 2);
             luckysheetTableContent.textBaseline = "middle";
-            verticalAlignPos_checkbox = verticalAlignPos_text - 6;
+            verticalAlignPos_checkbox = verticalAlignPos_text - 6 * Store.zoomRatio;
         }
         else if(verticalAlign == "1"){ //上对齐
             verticalAlignPos_text = (pos_y + space_height);
             luckysheetTableContent.textBaseline = "top";
-            verticalAlignPos_checkbox = verticalAlignPos_text + 1;
+            verticalAlignPos_checkbox = verticalAlignPos_text + 1 * Store.zoomRatio;
         }
 
         horizonAlignPos = horizonAlignPos / Store.zoomRatio;