feat: 评卷区设置优化

src/modules/mark/components/markParam/areaCropper/ElementResize.vue

@@ -114,8 +114,6 @@ export default {
         w: 0,
         h: 0,
       },
-      validSizePos: {},
-      points: {},
     };
   },
   computed: {
@@ -126,6 +124,7 @@ export default {
             top: this.sizePos.y + "px",
             width: this.sizePos.w + "px",
             height: this.sizePos.h + "px",
+            zIndex: this.sizePos.zindex,
             position: this.positionType,
           }
         : {};
@@ -155,23 +154,25 @@ export default {
   },
   methods: {
     initControlPoints() {
-      const posName = {
-        l: "Left",
-        r: "Right",
-        t: "Top",
-        b: "Bottom",
+      const actions = {
+        l: this.moveLeftPoint,
+        r: this.moveRightPoint,
+        t: this.moveTopPoint,
+        b: this.moveBottomPoint,
+        lt: this.moveLeftTopPoint,
+        rt: this.moveRightTopPoint,
+        lb: this.moveLeftBottomPoint,
+        rb: this.moveRightBottomPoint,
       };
+
       this.controlPoints = this.active.map((type) => {
-        const posFullName = type
-          .split("")
-          .map((item) => {
-            return posName[item];
-          })
-          .join("");
         return {
           classes: ["control-point", `control-point-${type}`],
-          movePoint: this[`move${posFullName}Point`],
-          movePointOver: this.moveOver,
+          movePoint: actions[type],
+          movePointOver: (data) => {
+            actions[type](data);
+            this.movePointOver();
+          },
         };
       });
     },
@@ -183,118 +184,28 @@ export default {
       this.sizePosOrigin = { ...this.value };
       if (this.positionType === "relative")
         this.offsetTopOrigin = this.$el.offsetTop;
-      this.initValidSizePos();
       this.initOver = true;
     },
-    initValidSizePos() {
-      const s = this.sizePosOrigin;
-      const points = {
-        rt: {
-          x: s.x + s.w,
-          y: s.y,
-        },
-        lt: {
-          x: s.x,
-          y: s.y,
-        },
-        lb: {
-          x: s.x,
-          y: s.y + s.h,
-        },
-        rb: {
-          x: s.x + s.w,
-          y: s.y + s.h,
-        },
-      };
-      const action = {
-        rt: () => {
-          const point = points.rt;
-          return {
-            min: {
-              x: point.x - this.minWidth,
-              y: point.y,
-            },
-            max: {
-              x: point.x - this.maxWidth,
-              y: point.y,
-            },
-          };
-        },
-        lt: () => {
-          const point = points.lt;
-          return {
-            min: {
-              x: point.x,
-              y: point.y,
-            },
-            max: {
-              x: point.x,
-              y: point.y,
-            },
-          };
-        },
-        lb: () => {
-          const point = points.lb;
-          return {
-            min: {
-              x: point.x,
-              y: point.y - this.minHeight,
-            },
-            max: {
-              x: point.x,
-              y: point.y - this.maxHeight,
-            },
-          };
-        },
-        rb: () => {
-          const point = points.rb;
-          return {
-            min: {
-              x: point.x - this.minWidth,
-              y: point.y - this.minHeight,
-            },
-            max: {
-              x: point.x - this.maxWidth,
-              y: point.y - this.maxHeight,
-            },
-          };
-        },
-      };
-
-      this.validSizePos = {
-        rt: action.rt(),
-        lt: action.lt(),
-        lb: action.lb(),
-        rb: action.rb(),
-      };
-    },
     fetchValidSizePos(sizePos, actionType) {
-      const staticPointConfig = {
-        left: "rt",
-        "left-bottom": "rt",
-        bottom: "lt",
-        "right-bottom": "lt",
-        right: "lb",
-        "right-top": "lb",
-        top: "rb",
-        "left-top": "rb",
-      };
-      const validSizePos = this.validSizePos[staticPointConfig[actionType]];
-
       if (sizePos.w <= this.minWidth) {
         sizePos.w = this.minWidth;
-        sizePos.x = validSizePos.min.x;
-      } else if (this.maxWidth !== 0 && sizePos.w >= this.maxWidth) {
+
+        if (actionType.includes("l"))
+          sizePos.x = this.lastSizePos.x + this.lastSizePos.w - sizePos.w;
+      }
+      if (this.maxWidth !== 0 && sizePos.w >= this.maxWidth) {
         sizePos.w = this.maxWidth;
-        sizePos.x = validSizePos.max.x;
       }
 
       if (sizePos.h <= this.minHeight) {
         sizePos.h = this.minHeight;
-        sizePos.y = validSizePos.min.y;
-      } else if (this.maxHeight !== 0 && sizePos.h >= this.maxHeight) {
+
+        if (actionType.includes("t"))
+          sizePos.y = this.lastSizePos.y + this.lastSizePos.h - sizePos.h;
+      }
+
+      if (this.maxHeight !== 0 && sizePos.h >= this.maxHeight) {
         sizePos.h = this.maxHeight;
-        sizePos.y = validSizePos.max.y;
       }
 
       if (!this.fitParent.length) {
@@ -311,37 +222,44 @@ export default {
       if (this.fitParentTypeWidth) {
         if (sizePos.x <= 0) {
           sizePos.x = 0;
-          if (actionType.includes("left")) sizePos.w = this.lastSizePos.w;
+          if (actionType.includes("l")) {
+            sizePos.w = this.lastSizePos.w + this.lastSizePos.x;
+          }
         }
 
-        if (sizePos.x + sizePos.w > this.parentNodeSize.w) {
-          sizePos.x = this.lastSizePos.x;
-          sizePos.w = this.parentNodeSize.w - sizePos.x;
+        if (sizePos.x + sizePos.w >= this.parentNodeSize.w) {
+          if (actionType === "move") {
+            sizePos.x = this.parentNodeSize.w - sizePos.w;
+          } else {
+            sizePos.w = this.parentNodeSize.w - sizePos.x;
+          }
         }
       }
 
       if (this.fitParentTypeHeight) {
         if (this.positionType === "relative") {
           const elOffsetTop = this.$el.offsetTop;
-          if (this.sizePosOrigin.y - sizePos.y >= this.offsetTopOrigin) {
-            sizePos.h = this.lastSizePos.h;
-            sizePos.y = this.sizePosOrigin.y - this.offsetTopOrigin;
-          }
+          // relative目前只开放bottom编辑，这里也只处理这中场景
           if (elOffsetTop + sizePos.h >= this.parentNodeSize.h) {
-            sizePos.y = this.lastSizePos.y;
-            sizePos.h = this.lastSizePos.h;
+            sizePos.h = this.parentNodeSize.h - elOffsetTop;
           }
         } else {
           if (sizePos.y <= 0) {
             sizePos.y = 0;
-            if (actionType.includes("top")) sizePos.h = this.lastSizePos.h;
+            if (actionType.includes("t")) {
+              sizePos.h = this.lastSizePos.h + this.lastSizePos.y;
+            }
           }
           if (sizePos.y + sizePos.h > this.parentNodeSize.h) {
-            sizePos.y = this.lastSizePos.y;
-            sizePos.h = this.parentNodeSize.h - sizePos.y;
+            if (actionType === "move") {
+              sizePos.y = this.parentNodeSize.h - sizePos.h;
+            } else {
+              sizePos.h = this.parentNodeSize.h - sizePos.y;
+            }
           }
         }
       }
+
       this.lastSizePos = { ...sizePos };
       return sizePos;
     },
@@ -368,24 +286,23 @@ export default {
       };
     },
     moveLeftPoint({ left }) {
-      console.log(this.sizePosOrigin);
       const sp = { ...this.sizePos, ...this.getLeftSize(left) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "left") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "l") };
       this.emitChange();
     },
     moveRightPoint({ left }) {
       const sp = { ...this.sizePos, ...this.getRightSize(left) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "right") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "r") };
       this.emitChange();
     },
     moveTopPoint({ top }) {
       const sp = { ...this.sizePos, ...this.getTopSize(top) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "top") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "t") };
       this.emitChange();
     },
     moveBottomPoint({ top }) {
       const sp = { ...this.sizePos, ...this.getBottomSize(top) };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "bottom") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "b") };
       this.emitChange();
     },
     moveLeftTopPoint({ left, top }) {
@@ -394,7 +311,7 @@ export default {
         ...this.getLeftSize(left),
         ...this.getTopSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "left-top") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "lt") };
       this.emitChange();
     },
     moveRightTopPoint({ left, top }) {
@@ -403,7 +320,7 @@ export default {
         ...this.getRightSize(left),
         ...this.getTopSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "right-top") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "rt") };
       this.emitChange();
     },
     moveLeftBottomPoint({ left, top }) {
@@ -412,7 +329,7 @@ export default {
         ...this.getLeftSize(left),
         ...this.getBottomSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "left-bottom") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "lb") };
       this.emitChange();
     },
     moveRightBottomPoint({ left, top }) {
@@ -421,16 +338,14 @@ export default {
         ...this.getRightSize(left),
         ...this.getBottomSize(top),
       };
-      this.sizePos = { ...this.fetchValidSizePos(sp, "right-bottom") };
+      this.sizePos = { ...this.fetchValidSizePos(sp, "rb") };
       this.emitChange();
     },
-    moveOver() {
+    movePointOver() {
       this.sizePosOrigin = { ...this.sizePos };
       this.lastSizePos = { ...this.sizePos };
       if (this.positionType === "relative")
         this.offsetTopOrigin = this.$el.offsetTop < 0 ? 0 : this.$el.offsetTop;
-
-      this.initValidSizePos();
       this.$emit("resize-over", this.sizePos);
     },
     moveStart() {
@@ -449,9 +364,11 @@ export default {
       this.sizePos = { ...this.fetchValidSizePos(sp, "move") };
       this.emitChange();
     },
-    moveElementOver() {
+    moveElementOver({ left, top }) {
       if (!this.move) return;
-      this.moveOver();
+      this.moveElement({ left, top });
+
+      this.movePointOver();
     },
     emitChange() {
       this.$emit("input", this.sizePos);
@@ -487,7 +404,7 @@ export default {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background: #3a5ae5;
+    background: #617bea;
     z-index: 99;
     &-l {
       left: 0;

src/modules/mark/components/markParam/areaCropper/move-ele.js

@@ -25,7 +25,11 @@ module.exports = {
       if (modifiers.stop) {
         e.stopPropagation();
       }
-      value.moveStop && value.moveStop(e);
+
+      let left = e.pageX - _x;
+      let top = e.pageY - _y;
+      value.moveStop && value.moveStop({ left, top }, e);
+
       document.removeEventListener("mousemove", moveHandle);
       document.removeEventListener("mouseup", upHandle);
     };