签章移动相关功能优化

app/public/css/main.css

@@ -2061,9 +2061,7 @@ animation:shake 1s .2s ease both;}
   right: 10px;
   top: 10px;
 }
-.signatureMoving{
-  cursor: move;
-}
+
 .signatureRptBar{
   position: absolute;
   top: 0;

app/public/report/js/jpc_output.js

@@ -534,7 +534,16 @@ let JpcCanvasOutput = {
             // 新增签章数据到移动工具中
             if(moveSignatureTool){
                 const {Left,Right,Top,Bottom}=cell.area;
-                moveSignatureTool.setSignature(imageData, Left* JpcCanvasOutput.scaleFactor, Top* JpcCanvasOutput.scaleFactor, (Right-Left)* JpcCanvasOutput.scaleFactor, (Bottom-Top)* JpcCanvasOutput.scaleFactor ,cell.signature_name,cell.signatureName,cell.signType);
+                moveSignatureTool.setSignature(
+                    imageData, 
+                    Left* JpcCanvasOutput.scaleFactor, 
+                    Top* JpcCanvasOutput.scaleFactor, 
+                    (Right-Left)* JpcCanvasOutput.scaleFactor, 
+                    (Bottom-Top)* JpcCanvasOutput.scaleFactor,
+                    cell.signature_name,
+                    cell.signatureName,
+                    cell.signType
+                );
             }  
             let area = private_getProperSignatureArea(cell, control);
             if (orgSize) {

app/public/report/js/rpt_move_signature.js

@@ -1,4 +1,4 @@
-
+// 思路是点击签章的时候，原来的签章不显示，生成一个img用于拖动，实现拖动效果，再点击新生成的img就保存数据，干掉临时的img
 class MoveSignatureTool {
     constructor(ctx, canvas, pageObj, pageIdx, jpcOutput) {
         this.signatureList = [];
@@ -65,7 +65,7 @@ class MoveSignatureTool {
 
         // 找到相应的对象
         const target = me.signatureList.find((item) => me.containPoint(item, mousePos));
-        if (target) {
+        if ($('#templateSignature').length === 0 && target) {
             //先把上一次的数据记录下来
             const { x, y, width, height } = target;
             Object.assign(me.lastPosition, { x, y, width, height });
@@ -77,58 +77,24 @@ class MoveSignatureTool {
                 x: mousePos.x - me.activeImg.x,
                 y: mousePos.y - me.activeImg.y,
             };
-           $("#rptCanvas").addClass('signatureMoving');
-        //    const orgTargetData = this.pageObj.items[0].signature_cells.find(item => item.signatureName === target.signatureName && item.signType===target.signType);
-            // orgTargetData.isMoving=true;
-            // this.render(me);
-
-            
-            // $("#signatureRptCanvas").attr("width",$("#rptCanvas").width());
-            // $("#signatureRptCanvas").attr("height",$("#rptCanvas").height());
-            // $("#signatureRptBar").show();
-
         
-
+            const orgTargetData = this.pageObj.items[0].signature_cells.find(item => item.signatureName === target.signatureName && item.signType === target.signType);
+            orgTargetData.isMoving = true;
+            this.render(me);
+
+            const { top, left } = $("#rptCanvas").position();
+            $("#rptCanvas").after(`<image id='templateSignature' data-ID='${orgTargetData.signature_name}' src='${orgTargetData.path}' style=" cursor: move;position: absolute;top: ${y + top + 10}px;left:${x + left + 10}px;width:${width}px;height:${height}px;" />`);
+            $("#templateSignature").unbind('mousemove').on('mousemove', (e) => { this.templateSignatureMove(e, this) });
+            $("#templateSignature").unbind('click').on('click', (e) => { this.templateSignatureClick(e, this) });
         } else {
             me.selected = false;
-            // $("#signatureRptBar").hide();
         }
-       
-
     }
 
-    mousemoveFn(event, me) {
-        //鼠标位置
-        const mousePos = me.getMousePos(event, me);
-        /*如果鼠标选择了图形
-         *   让图形跟着鼠标动
-         *   按需渲染
-         * */
-        if (me.selected) {
-            //先把上一次的数据记录下来
-            const { x, y, width, height } = me.activeImg;
-            Object.assign(me.lastPosition, { x, y, width, height });
-            me.activeImg.x = mousePos.x - me.subPos.x;
-            me.activeImg.y = mousePos.y - me.subPos.y;
-            // me.render(me);
-
-            // const moveCanvas = $('#signatureRptCanvas')[0].getContext('2d');
-            // const img = me.activeImg.obj;
-            // const newImg= new Image();
-            // newImg.src='#'
-            // newImg.onload = () => {
-              
-            //     moveCanvas.drawImage(newImg, x, y, width, height);
-            // }
-        }
-
-    }
-    mouseupFn(event, me) {
+    saveSignature(me) {
         //鼠标抬起，取消拖拽
         me.selected = false;
-        $("#rptCanvas").removeClass('signatureMoving')
         me.render(me);
-
         const params = {};
         params.id = CURRENT_ROLE_REL_ID;
         params.tender_id = TENDER_ID;
@@ -140,34 +106,32 @@ class MoveSignatureTool {
         if (target) {
             if (!target.areaData) target.areaData = {};
             target.areaData[signType] = {
-                Top: y ,
-                Bottom: y + height ,
-                Left: x ,
-                Right: x + width 
+                Top: y,
+                Bottom: y + height,
+                Left: x,
+                Right: x + width
             }
         }
         CommonAjax.postXsrfEx("/tender/report_api/updateRoleRelationship", params, 10000, true, getCookie('csrfToken_j'),
             async function (result) {
-                console.log(result);
+                // console.log(result);
             }
         )
-
     }
 
-
     render(me, isHideSignature = false) {
         let target;
         // 因为只有一页，所以就默认取是一个数据
         for (const signature of me.pageObj.items[0].signature_cells) {
             //找到要移动的签章
-            if (signature.signature_name&&me.activeImg&&me.activeImg.signature_name.includes(signature.signature_name)) {
+            if (signature.signature_name && me.activeImg && me.activeImg.signature_name.includes(signature.signature_name)) {
                 target = signature;
             }
         }
-        if(target){
+        if (target) {
             Object.assign(target.area, {
                 Top: me.activeImg.y,
-                Bottom: me.activeImg.y + me.activeImg.height ,
+                Bottom: me.activeImg.y + me.activeImg.height,
                 Left: me.activeImg.x,
                 Right: me.activeImg.x + me.activeImg.width,
             })
@@ -175,20 +139,31 @@ class MoveSignatureTool {
             me.jpcOutput.drawPageBorder(me.pageObj, me.canvas, getScreenDPI())
             me.jpcOutput.drawToCanvas(me.pageObj, me.canvas, me.pageIdx, isHideSignature);
         }
-        
+
     }
     domAddEventListener(canvas) {
         //点击事件
         $("#rptCanvas").unbind('mousedown').on('mousedown', (e) => { this.mousedownFn(e, this) });
-        //移动
-        $("#rptCanvas").unbind('mousemove').on('mousemove', (e) => {this.mousemoveFn(e, this)});
-        //鼠标抬起
-        $("#rptCanvas").unbind('mouseup').on('mouseup', (e) => { this.mouseupFn(e, this) });
-
+        // $("#rptCanvas").unbind('mousemove').on('mousemove', (e) => { this.mouseMove(e, this) });
+    }
 
-        //  //移动
-        //  $("#signatureRptCanvas").unbind('mousemove').on('mousemove', (e) => {this.mousemoveFn(e, this)});
-        //  //鼠标抬起
-        //  $("#signatureRptCanvas").unbind('mouseup').on('mouseup', (e) => { this.mouseupFn(e, this) });
+    // 临时签章移动事件
+    templateSignatureMove(event, me) {
+        const mousePos = me.getMousePos(event, me);
+        const { top, left } = $("#rptCanvas").position();
+        event.currentTarget.style.top = `${mousePos.y - me.subPos.y + top}px`;
+        event.currentTarget.style.left = `${mousePos.x - me.subPos.x + left}px`;
+    }
+    // 临时签章点击事件
+    templateSignatureClick(event, me) {
+        const canvasOuterTop = $("#rptCanvas").position().top;
+        const canvasOuterLeft = $("#rptCanvas").position().left;
+        const { top, left } = $(event.currentTarget).position();
+        me.activeImg.y = top - canvasOuterTop - this.jpcOutput.offsetY;
+        me.activeImg.x = left - canvasOuterLeft - this.jpcOutput.offsetX;
+        const orgTargetData = this.pageObj.items[0].signature_cells.find(item => item.signature_name === $(event.currentTarget).data('id'));
+        orgTargetData.isMoving = false;
+        this.saveSignature(me);
+        $("#templateSignature").remove();
     }
 }