@smallwei/avue 3.9.2 → 3.9.4

package/lib/packages/element-plus/draggable/index2.js

@@ -1,4 +1,4 @@
-/*! Avue.js v3.9.2 | (c) 2017-2026 Smallwei | Released under the MIT License. */
+/*! Avue.js v3.9.4 | (c) 2017-2026 Smallwei | Released under the MIT License. */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -7,11 +7,10 @@ var src_core_create = require('../../../src/core/create.js');
 var src_utils_util = require('../../../src/utils/util.js');
 
 var script = src_core_create.default({
-  name: "draggable",
+  name: 'draggable',
+  emits: ['move', 'resize', 'change', 'focus', 'blur', 'over', 'out'],
   props: {
-    index: {
-      type: [String, Number],
-    },
+    index: [String, Number],
     mask: {
       type: Boolean,
       default: true
@@ -20,385 +19,434 @@ var script = src_core_create.default({
       type: Number,
       default: 1
     },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
+    readonly: Boolean,
     resize: {
       type: Boolean,
       default: true
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
+    disabled: Boolean,
     step: {
       type: Number,
       default: 1
     },
-    lock: {
-      type: Boolean,
-      default: false
+    grid: {
+      type: Number,
+      default: 0
     },
+    lock: Boolean,
     zIndex: {
       type: [Number, String],
       default: 1
     },
     left: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
     top: {
-      type: Number,
+      type: [Number, String],
       default: 0
     },
-    width: {
-      type: Number
+    width: [Number, String],
+    height: [Number, String],
+    minWidth: {
+      type: Number,
+      default: 20
     },
-    height: {
-      type: Number
+    minHeight: {
+      type: Number,
+      default: 20
+    },
+    maxWidth: Number,
+    maxHeight: Number,
+    bounds: Object,
+    handle: String,
+    ignore: {
+      type: String,
+      default: 'input, textarea, button, select, a, [data-avue-draggable-ignore]'
     }
   },
   data () {
     return {
-      first: true,
-      value: '',
       baseWidth: 0,
       baseHeight: 0,
       baseLeft: 0,
       baseTop: 0,
-      children: {},
+      children: null,
       moveActive: false,
       overActive: false,
-      rangeActive: false,
       active: false,
-      keyDown: null,
+      documentMoveHandler: null,
+      documentUpHandler: null,
       rangeList: [
-        {
-          classname: "left",
-        },
-        {
-          classname: "right",
-        },
-        {
-          classname: "top",
-        },
-        {
-          classname: "bottom",
-        },
-        {
-          classname: "top-left",
-        },
-        {
-          classname: "top-right",
-        },
-        {
-          classname: "bottom-left",
-        },
-        {
-          classname: "bottom-right",
-        }
+        { classname: 'left' },
+        { classname: 'right' },
+        { classname: 'top' },
+        { classname: 'bottom' },
+        { classname: 'top-left' },
+        { classname: 'top-right' },
+        { classname: 'bottom-left' },
+        { classname: 'bottom-right' }
       ]
     };
   },
   computed: {
     scaleVal () {
-      return this.scale;
+      return Number(this.scale) > 0 ? Number(this.scale) : 1;
     },
     styleMenuName () {
       return {
-        transformOrigin: "0 0",
+        transformOrigin: '0 0',
         transform: `scale(${this.scaleVal})`
       };
     },
     styleLineName () {
-      return {
-        borderWidth: this.setPx(this.scaleVal)
-      };
+      return { borderWidth: this.setPx(this.scaleVal) };
     },
     styleRangeName () {
-      const calc = 10 * this.scaleVal;
-      return {
-        width: this.setPx(calc),
-        height: this.setPx(calc)
-      };
+      const size = 10 * this.scaleVal;
+      return { width: this.setPx(size), height: this.setPx(size) };
     },
     styleLabelName () {
-      return {
-        fontSize: this.setPx(18 * this.scaleVal)
-      };
+      return { fontSize: this.setPx(Math.max(11, 14 * this.scaleVal)) };
     },
     styleName () {
-      return Object.assign(
-        (() => {
-          if (this.active) {
-            return Object.assign(
-              {
-                zIndex: 9999
-              },
-              this.styleLineName
-            );
-          }
-          return { zIndex: this.zIndex };
-        })(),
-        {
-          top: this.setPx(this.baseTop),
-          left: this.setPx(this.baseLeft),
-          width: this.setPx(this.baseWidth),
-          height: this.setPx(this.baseHeight)
-        }
-      );
+      return {
+        zIndex: this.active ? 9999 : this.zIndex,
+        top: this.setPx(this.baseTop),
+        left: this.setPx(this.baseLeft),
+        width: this.setPx(this.baseWidth),
+        height: this.setPx(this.baseHeight)
+      };
     }
   },
   watch: {
-    active (val) {
-      if (val) {
-        this.handleKeydown();
-      } else {
-        document.onkeydown = this.keyDown;
-      }
-    },
-    width (val) {
-      this.baseWidth = src_utils_util.getFixed(val) || this.children.offsetWidth;
-    },
-    height (val) {
-      this.baseHeight = src_utils_util.getFixed(val) || this.children.offsetHeight;
+    width (value) {
+      this.setSize(this.toNumber(value, this.baseWidth), this.baseHeight);
     },
-    left (val) {
-      this.baseLeft = src_utils_util.getFixed(val);
+    height (value) {
+      this.setSize(this.baseWidth, this.toNumber(value, this.baseHeight));
     },
-    top (val) {
-      this.baseTop = src_utils_util.getFixed(val);
+    left (value) {
+      this.setLeft(value);
     },
-    baseWidth (val) {
-      this.$refs.wrapper.style.width = this.setPx(val);
-      if (this.resize && this.children.style) {
-        this.children.style.width = this.setPx(val);
-      }
+    top (value) {
+      this.setTop(value);
     },
-    baseHeight (val) {
-      this.$refs.wrapper.style.height = this.setPx(val);
-      if (this.resize && this.children.style) {
-        this.children.style.height = this.setPx(val);
+    bounds: {
+      deep: true,
+      handler () {
+        this.normalizeBox();
       }
     },
-    baseLeft (n, o) {
-      if (this.first) return
-      this.setMove(n - o, 0);
+    baseWidth () {
+      this.syncChildSize();
     },
-    baseTop (n, o) {
-      if (this.first) return
-      this.setMove(0, n - o);
+    baseHeight () {
+      this.syncChildSize();
     }
   },
   mounted () {
     this.init();
   },
+  beforeUnmount () {
+    this.removeDocumentDrag();
+  },
   methods: {
     init () {
-      this.children = this.$refs.item.firstChild;
-      this.baseWidth = src_utils_util.getFixed(this.width) || this.children.offsetWidth;
-      this.baseHeight = src_utils_util.getFixed(this.height) || this.children.offsetHeight;
-      this.baseLeft = src_utils_util.getFixed(this.left);
-      this.baseTop = src_utils_util.getFixed(this.top);
-      this.keyDown = document.onkeydown;
-      this.$nextTick(() => {
-        this.first = false;
-      });
-    },
-    setMove (left, top) {
-      this.$emit('move', {
-        index: this.index,
-        left: left,
-        top: top
-      });
+      this.children = this.$refs.item && this.$refs.item.firstElementChild;
+      this.baseWidth = this.constrainSizeToBounds(
+        this.clampSize(this.toNumber(this.width, this.children ? this.children.offsetWidth : 0), 'width'),
+        'width'
+      );
+      this.baseHeight = this.constrainSizeToBounds(
+        this.clampSize(this.toNumber(this.height, this.children ? this.children.offsetHeight : 0), 'height'),
+        'height'
+      );
+      const position = this.constrainPosition(this.toNumber(this.left, 0), this.toNumber(this.top, 0));
+      this.baseLeft = position.left;
+      this.baseTop = position.top;
+      this.syncChildSize();
+    },
+    toNumber (value, fallback = 0) {
+      const number = Number(value);
+      return Number.isFinite(number) ? src_utils_util.getFixed(number) : fallback;
+    },
+    setSize (width, height) {
+      this.baseWidth = this.constrainSizeToBounds(this.clampSize(width, 'width'), 'width');
+      this.baseHeight = this.constrainSizeToBounds(this.clampSize(height, 'height'), 'height');
+      const position = this.constrainPosition(this.baseLeft, this.baseTop);
+      this.baseLeft = position.left;
+      this.baseTop = position.top;
+    },
+    syncChildSize () {
+      if (!this.resize || !this.children || !this.children.style) return;
+      this.children.style.boxSizing = 'border-box';
+      this.children.style.width = '100%';
+      this.children.style.height = '100%';
+    },
+    getRangeStyle (position) {
+      const offset = (10 * this.scaleVal) / 2;
+      return position.split('-').reduce((style, side) => {
+        style[side] = this.setPx(-offset);
+        return style;
+      }, {});
     },
     setLeft (left) {
-      this.baseLeft = left;
+      this.baseLeft = this.constrainPosition(this.toNumber(left), this.baseTop).left;
     },
     setTop (top) {
-      this.baseTop = top;
-    },
-    getRangeStyle (postion) {
-      const calc = (10 * this.scaleVal) / 2;
-      let result = {};
-      let list = postion.split("-");
-      list.forEach(ele => {
-        result[ele] = this.setPx(-calc);
-      });
-      return result;
-    },
-    setOverActive (val) {
-      this.overActive = val;
-    },
-    setActive (val) {
-      this.active = val;
-    },
-    rangeMove (e, position) {
-      if (this.disabled || this.lock) return
-      //移动的方向
-      let x, y;
-      //移动的位置
-      let xp, yp;
-      //移动的正负
-      let xc, yc;
-      this.rangeActive = true;
-      this.handleMouseDown();
-      let disX = e.clientX;
-      let disY = e.clientY;
-      document.onmousemove = e => {
-        this.moveActive = true;
-        if (position === "right") {
-          x = true;
-          y = false;
-        } else if (position === "left") {
-          x = true;
-          xp = true;
-          xc = true;
-          y = false;
-        } else if (position === "top") {
-          x = false;
-          y = true;
-          yp = true;
-          yc = true;
-        } else if (position === "bottom") {
-          x = false;
-          y = true;
-        } else if (position === "bottom-right") {
-          x = true;
-          y = true;
-        } else if (position === "bottom-left") {
-          x = true;
-          y = true;
-          xp = true;
-          xc = true;
-        } else if (position === "top-right") {
-          x = true;
-          y = true;
-          yp = true;
-          yc = true;
-        } else if (position === "top-left") {
-          x = true;
-          y = true;
-          xp = true;
-          xc = true;
-          yp = true;
-          yc = true;
-        }
-        let left = e.clientX - disX;
-        let top = e.clientY - disY;
-        disX = e.clientX;
-        disY = e.clientY;
-        if (x) {
-          let calc = left * this.step;
-          if (xc) calc = -calc;
-          if (xp) this.baseLeft = src_utils_util.getFixed(this.baseLeft - calc);
-          this.baseWidth = src_utils_util.getFixed(this.baseWidth + calc);
-        }
-        if (y) {
-          let calc = top * this.step;
-          if (yc) calc = -calc;
-          if (yp) this.baseTop = src_utils_util.getFixed(this.baseTop - calc);
-          this.baseHeight = src_utils_util.getFixed(this.baseHeight + calc);
-        }
-      };
-      this.handleClear();
-
+      this.baseTop = this.constrainPosition(this.baseLeft, this.toNumber(top)).top;
+    },
+    setOverActive (value) {
+      this.overActive = !!value;
+    },
+    setActive (value) {
+      this.active = !!value;
+      if (this.active) this.focusRoot();
+    },
+    handleOver () {
+      if (this.disabled) return;
+      this.overActive = true;
+      this.$emit('over', this.getState());
     },
     handleOut () {
       this.overActive = false;
-      this.$emit("out", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
+      this.$emit('out', this.getState());
+    },
+    handleMove (event) {
+      if (event.button !== 0 || this.disabled || this.lock || this.readonly) return;
+      const target = event.target;
+      if (this.handle && (!target.closest || !target.closest(this.handle))) return;
+      if (!this.handle && this.ignore && target.closest && target.closest(this.ignore)) return;
+      this.active = true;
+      this.focusRoot();
+      this.handleMouseDown('move');
+      const start = this.getPointerState(event);
+      this.bindDocumentDrag(
+        (moveEvent) => this.applyMove(moveEvent, start),
+        event.pointerId
+      );
+    },
+    rangeMove (event, position) {
+      if (event.button !== 0 || this.disabled || this.lock || this.readonly || !this.resize) return;
+      this.active = true;
+      this.focusRoot();
+      this.handleMouseDown('resize');
+      const start = { ...this.getPointerState(event), position };
+      this.bindDocumentDrag(
+        (moveEvent) => this.applyResize(moveEvent, start),
+        event.pointerId
+      );
+    },
+    getPointerState (event) {
+      return {
+        clientX: event.clientX,
+        clientY: event.clientY,
         left: this.baseLeft,
-        top: this.baseTop
-      });
+        top: this.baseTop,
+        width: this.baseWidth,
+        height: this.baseHeight
+      };
     },
-    handleOver () {
-      if (this.disabled) return
-      this.overActive = true;
-      this.$emit("over", {
+    getDelta (event, start) {
+      const multiplier = Number(this.step) || 1;
+      return {
+        x: (event.clientX - start.clientX) / this.scaleVal * multiplier,
+        y: (event.clientY - start.clientY) / this.scaleVal * multiplier
+      };
+    },
+    applyMove (event, start) {
+      const delta = this.getDelta(event, start);
+      const position = this.constrainPosition(
+        this.snap(start.left + delta.x),
+        this.snap(start.top + delta.y)
+      );
+      this.baseLeft = position.left;
+      this.baseTop = position.top;
+      this.emitMove(delta);
+    },
+    applyResize (event, start) {
+      const delta = this.getDelta(event, start);
+      const sides = start.position.split('-');
+      let left = start.left;
+      let top = start.top;
+      let width = start.width;
+      let height = start.height;
+      if (sides.includes('left')) {
+        left = this.snap(start.left + delta.x);
+        width = start.width - delta.x;
+      }
+      if (sides.includes('right')) width = start.width + delta.x;
+      if (sides.includes('top')) {
+        top = this.snap(start.top + delta.y);
+        height = start.height - delta.y;
+      }
+      if (sides.includes('bottom')) height = start.height + delta.y;
+
+      const right = start.left + start.width;
+      const bottom = start.top + start.height;
+      width = this.clampSize(this.snap(width), 'width');
+      height = this.clampSize(this.snap(height), 'height');
+      if (sides.includes('left')) left = right - width;
+      if (sides.includes('top')) top = bottom - height;
+      const bounded = this.constrainResize(left, top, width, height, sides);
+      this.baseLeft = bounded.left;
+      this.baseTop = bounded.top;
+      this.baseWidth = bounded.width;
+      this.baseHeight = bounded.height;
+      this.$emit('resize', this.getState({ deltaX: delta.x, deltaY: delta.y }));
+      this.$emit('change', { type: 'resize', ...this.getState() });
+    },
+    snap (value) {
+      const grid = Number(this.grid);
+      return src_utils_util.getFixed(grid > 0 ? Math.round(value / grid) * grid : value);
+    },
+    clampSize (value, dimension) {
+      const min = dimension === 'width' ? Number(this.minWidth) || 0 : Number(this.minHeight) || 0;
+      const maxValue = dimension === 'width' ? this.maxWidth : this.maxHeight;
+      const max = Number(maxValue);
+      return src_utils_util.getFixed(Math.max(min, Number.isFinite(max) && max > 0 ? Math.min(value, max) : value));
+    },
+    constrainSizeToBounds (value, dimension) {
+      const bounds = this.getBounds();
+      if (!bounds) return src_utils_util.getFixed(value);
+      const limit = dimension === 'width'
+        ? Math.max(0, bounds.right - bounds.left)
+        : Math.max(0, bounds.bottom - bounds.top);
+      return src_utils_util.getFixed(Math.min(value, limit));
+    },
+    normalizeBox () {
+      if (!this.bounds) return;
+      this.baseWidth = this.constrainSizeToBounds(this.clampSize(this.baseWidth, 'width'), 'width');
+      this.baseHeight = this.constrainSizeToBounds(this.clampSize(this.baseHeight, 'height'), 'height');
+      const position = this.constrainPosition(this.baseLeft, this.baseTop);
+      this.baseLeft = position.left;
+      this.baseTop = position.top;
+    },
+    getBounds () {
+      if (!this.bounds || typeof this.bounds !== 'object') return null;
+      const left = this.toNumber(this.bounds.left, 0);
+      const top = this.toNumber(this.bounds.top, 0);
+      const right = Number.isFinite(Number(this.bounds.right))
+        ? Number(this.bounds.right)
+        : Number.isFinite(Number(this.bounds.width)) ? left + Number(this.bounds.width) : Infinity;
+      const bottom = Number.isFinite(Number(this.bounds.bottom))
+        ? Number(this.bounds.bottom)
+        : Number.isFinite(Number(this.bounds.height)) ? top + Number(this.bounds.height) : Infinity;
+      return { left, top, right, bottom };
+    },
+    constrainPosition (left, top) {
+      const bounds = this.getBounds();
+      if (!bounds) return { left: src_utils_util.getFixed(left), top: src_utils_util.getFixed(top) };
+      return {
+        left: src_utils_util.getFixed(Math.min(Math.max(left, bounds.left), Math.max(bounds.left, bounds.right - this.baseWidth))),
+        top: src_utils_util.getFixed(Math.min(Math.max(top, bounds.top), Math.max(bounds.top, bounds.bottom - this.baseHeight)))
+      };
+    },
+    constrainResize (left, top, width, height, sides) {
+      const bounds = this.getBounds();
+      if (!bounds) return { left, top, width, height };
+      if (sides.includes('left') && left < bounds.left) {
+        width -= bounds.left - left;
+        left = bounds.left;
+      }
+      if (sides.includes('top') && top < bounds.top) {
+        height -= bounds.top - top;
+        top = bounds.top;
+      }
+      if (left + width > bounds.right) {
+        if (sides.includes('left')) left = bounds.right - width;
+        else width = bounds.right - left;
+      }
+      if (top + height > bounds.bottom) {
+        if (sides.includes('top')) top = bounds.bottom - height;
+        else height = bounds.bottom - top;
+      }
+      width = this.constrainSizeToBounds(this.clampSize(width, 'width'), 'width');
+      height = this.constrainSizeToBounds(this.clampSize(height, 'height'), 'height');
+      left = Math.min(Math.max(left, bounds.left), Math.max(bounds.left, bounds.right - width));
+      top = Math.min(Math.max(top, bounds.top), Math.max(bounds.top, bounds.bottom - height));
+      return {
+        left: src_utils_util.getFixed(left),
+        top: src_utils_util.getFixed(top),
+        width,
+        height
+      };
+    },
+    emitMove (delta) {
+      this.$emit('move', { index: this.index, left: src_utils_util.getFixed(delta.x), top: src_utils_util.getFixed(delta.y) });
+      this.$emit('change', { type: 'move', ...this.getState() });
+    },
+    getState (extra = {}) {
+      return {
         index: this.index,
         width: this.baseWidth,
         height: this.baseHeight,
         left: this.baseLeft,
-        top: this.baseTop
-      });
-    },
-    handleMove (e) {
-      if (this.disabled || this.lock) return
-      setTimeout(() => {
-        this.$refs.input.focus();
-      });
-      this.active = true;
-      this.handleMouseDown();
-      let disX = e.clientX;
-      let disY = e.clientY;
-      document.onmousemove = (e) => {
-        let left = e.clientX - disX;
-        let top = e.clientY - disY;
-        disX = e.clientX;
-        disY = e.clientY;
-        this.baseLeft = src_utils_util.getFixed(this.baseLeft + left * this.step);
-        this.baseTop = src_utils_util.getFixed(this.baseTop + top * this.step);
+        top: this.baseTop,
+        ...extra
       };
-      this.handleClear();
     },
-    handleClear () {
-      document.onmouseup = () => {
-        document.onmousemove = null;
-        document.onmouseup = null;
+    bindDocumentDrag (moveHandler, pointerId) {
+      this.removeDocumentDrag();
+      this.documentMoveHandler = (event) => {
+        if (pointerId !== undefined && event.pointerId !== pointerId) return;
+        this.moveActive = true;
+        moveHandler(event);
+      };
+      this.documentUpHandler = (event) => {
+        if (pointerId !== undefined && event.pointerId !== pointerId) return;
+        this.removeDocumentDrag();
         this.handleMouseUp();
       };
+      document.addEventListener('pointermove', this.documentMoveHandler);
+      document.addEventListener('pointerup', this.documentUpHandler);
+      document.addEventListener('pointercancel', this.documentUpHandler);
+    },
+    removeDocumentDrag () {
+      if (this.documentMoveHandler) {
+        document.removeEventListener('pointermove', this.documentMoveHandler);
+        this.documentMoveHandler = null;
+      }
+      if (this.documentUpHandler) {
+        document.removeEventListener('pointerup', this.documentUpHandler);
+        document.removeEventListener('pointercancel', this.documentUpHandler);
+        this.documentUpHandler = null;
+      }
     },
-    handleKeydown () {
-      document.onkeydown = (event) => {
-        var e = event || window.event || arguments.callee.caller.arguments[0];
-        let step = 1 * this.step;
-        if (this.$refs.input.focused) {
-          if (e && e.keyCode == 38) {//上
-            this.baseTop = src_utils_util.getFixed(this.baseTop - step);
-          } else if (e && e.keyCode == 37) {//左
-            this.baseLeft = src_utils_util.getFixed(this.baseLeft - step);
-          } else if (e && e.keyCode == 40) {//下
-            this.baseTop = src_utils_util.getFixed(this.baseTop + step);
-          } else if (e && e.keyCode == 39) {//右
-            this.baseLeft = src_utils_util.getFixed(this.baseLeft + step);
-          }
-          event.stopPropagation();
-          event.preventDefault();
-          this.$emit("blur", {
-            index: this.index,
-            width: this.baseWidth,
-            height: this.baseHeight,
-            left: this.baseLeft,
-            top: this.baseTop
-          });
-          this.keyDown && this.keyDown(event);
-        }
-      };
+    focusRoot () {
+      if (this.$refs.root && document.activeElement !== this.$refs.root) {
+        this.$refs.root.focus({ preventScroll: true });
+      }
     },
-    handleMouseDown (e) {
+    handleKeydown (event) {
+      if (!this.active || this.disabled || this.lock || this.readonly) return;
+      if (event.key === 'Escape') {
+        this.active = false;
+        return;
+      }
+      const step = Number(event.shiftKey ? this.step * 10 : this.step) || 1;
+      let left = this.baseLeft;
+      let top = this.baseTop;
+      if (event.key === 'ArrowUp') top -= step;
+      else if (event.key === 'ArrowDown') top += step;
+      else if (event.key === 'ArrowLeft') left -= step;
+      else if (event.key === 'ArrowRight') left += step;
+      else return;
+      event.preventDefault();
+      const previous = { left: this.baseLeft, top: this.baseTop };
+      const position = this.constrainPosition(this.snap(left), this.snap(top));
+      this.baseLeft = position.left;
+      this.baseTop = position.top;
+      this.emitMove({ x: this.baseLeft - previous.left, y: this.baseTop - previous.top });
+    },
+    handleMouseDown (type) {
       this.moveActive = true;
-      this.$emit("focus", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
-        left: this.baseLeft,
-        top: this.baseTop
-      });
+      this.$emit('focus', { type, ...this.getState() });
     },
     handleMouseUp () {
       this.moveActive = false;
-      this.rangeActive = false;
-      this.$emit("blur", {
-        index: this.index,
-        width: this.baseWidth,
-        height: this.baseHeight,
-        left: this.baseLeft,
-        top: this.baseTop
-      });
+      this.$emit('blur', this.getState());
     }
   }
 });