emacroh5lib 1.0.18 → 1.0.21

package/src/views/DragResizeViewTs/index.vue

@@ -1,904 +0,0 @@
-<template>
-  <div class="vdr" :style="positionStyle"
-    :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass : ''}`"
-    @mousedown="bodyDown($event)" @touchstart="bodyDown($event)" @touchend="up($event)">
-    <div :style="sizeStyle" class="content-container" ref="container">
-      <slot></slot>
-    </div>
-    <div v-for="stick in sticks" class="vdr-stick" :class="['vdr-stick-' + stick, isResizable ? '' : 'not-resizable']"
-      @mousedown.stop.prevent="stickDown(stick, $event)" @touchstart.stop.prevent="stickDown(stick, $event)"
-      :style="vdrStick(stick)">
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-
-  const styleMapping: any = {
-    y: {
-      t: 'top',
-      m: 'marginTop',
-      b: 'bottom',
-    },
-    x: {
-      l: 'left',
-      m: 'marginLeft',
-      r: 'right',
-    },
-  };
-
-  function addEvents(events: any) {
-    events.forEach((cb: any, eventName: string) => {
-      document.documentElement.addEventListener(eventName, cb);
-    });
-  }
-
-  function removeEvents(events: any) {
-    events.forEach((cb: any, eventName: any) => {
-      document.documentElement.removeEventListener(eventName, cb);
-    });
-  }
-
-  @Component({ name: 'DragResizeView' })
-  export default class DragResizeView extends Vue {
-
-    @Prop({
-      type: String,
-      required: false,
-      default: ''
-    }) name!: string;
-
-
-    @Prop({ type: Number, default: 8 }) stickSize!: number;
-    @Prop({ type: Number, default: 1 }) parentScaleX!: number;
-    @Prop({ type: Number, default: 1 }) parentScaleY!: number;
-    @Prop({ type: Boolean, default: false, }) isActive!: boolean;
-    @Prop({ type: Boolean, default: false, }) preventActiveBehavior!: boolean;
-    @Prop({ type: Boolean, default: true, }) isDraggable!: boolean;
-    @Prop({ type: Boolean, default: true, }) isResizable!: boolean;
-    @Prop({ type: Boolean, default: false, }) aspectRatio!: boolean;
-    @Prop({
-      type: Boolean, default: false,
-    }) parentLimitation!: boolean;
-    @Prop({
-      type: Boolean, default: false,
-    }) snapToGrid!: number;
-
-    @Prop({
-      type: Number,
-      default: 50,
-      validator(val) {
-        return val >= 0;
-      },
-    }) gridX!: number;
-
-    @Prop({
-      type: Number,
-      default: 50,
-      validator(val) {
-        return val >= 0;
-      },
-    }) gridY!: number;
-
-    @Prop({
-      type: Number,
-      default: 0,
-      validator(val) {
-        return val >= 0;
-      },
-    }) parentW!: number;
-
-    @Prop({
-      type: Number,
-      default: 0,
-      validator(val) {
-        return val >= 0;
-      },
-    }) parentH!: number;
-
-    @Prop({
-      type: [String, Number],
-      default: 200,
-      validator(val) {
-        return (typeof val === 'string') ? val === 'auto' : val >= 0;
-      },
-    }) w!: any;
-
-    @Prop({
-      type: [String, Number],
-      default: 200,
-      validator(val) {
-        return (typeof val === 'string') ? val === 'auto' : val >= 0;
-      },
-    }) h!: any;
-
-    @Prop({
-      type: Number,
-      default: 50,
-      validator(val) {
-        return val >= 0;
-      },
-    }) minw!: number;
-
-    @Prop({
-      type: Number,
-      default: 50,
-      validator(val) {
-        return val >= 0;
-      },
-    }) minh!: number;
-
-    @Prop({
-      type: Number,
-      default: 0,
-      validator(val) {
-        return typeof val === 'number';
-      },
-    }) x!: number;
-
-    @Prop({
-      type: Number,
-      default: 0,
-      validator(val) {
-        return typeof val === 'number';
-      },
-    }) y!: number;
-    @Prop({
-      type: [String, Number],
-      default: 'auto',
-      validator(val) {
-        return (typeof val === 'string') ? val === 'auto' : val >= 0;
-      },
-    }) z!: string | number;
-    @Prop({
-      type: String,
-      default: null,
-    }) dragHandle!: string;
-
-    @Prop({
-      type: String,
-      default: null,
-    }) dragCancel!: string;
-
-    @Prop({
-      type: Array,
-      default() {
-        return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
-      },
-    }) sticks!: Array<string>;
-
-    @Prop({
-      type: String,
-      default: 'both',
-      validator(val) {
-        return ['x', 'y', 'both', 'none'].indexOf(val) !== -1;
-      },
-    }) axis!: string;
-
-    @Prop({
-      type: String,
-      required: false,
-      default: '',
-    }) contentClass!: boolean;
-
-    @Prop({
-      type: Boolean,
-      required: false,
-      default: false
-    }) isStorage!: boolean;
-
-
-
-    public emits = ['clicked', 'dragging', 'dragstop', 'resizing', 'resizestop', 'activated', 'deactivated']
-
-    public fixAspectRatio = null
-    public active = false
-    public zIndex: number = 0;
-    public parentWidth = 0;
-    public parentHeight = 0;
-    public left = 0;
-    public top = 0;
-    public right = 50;
-    public bottom = 50;
-    public minHeight = 10;
-    public stickDrag = false;
-    public bodyDrag = false;
-    public dimensionsBeforeMove: any;
-    public limits: any;
-    public currentStick: any;
-    public aspectFactor: any;
-    public domEvents: any;
-    public parentElement: any;
-    public _uid: any;
-
-    beforeCreate() {
-      this.stickDrag = false;
-      this.bodyDrag = false;
-      this.dimensionsBeforeMove = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
-      this.limits = {
-        left: { min: null, max: null },
-        right: { min: null, max: null },
-        top: { min: null, max: null },
-        bottom: { min: null, max: null },
-      };
-
-      this.currentStick = null;
-    }
-
-
-    mounted() {
-
-      this.parentElement = this.$el.parentNode;
-      this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
-      this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
-
-
-      this.left = this.x;
-      this.top = this.y;
-      this.right = this.parentWidth - (this.w === 'auto' ? (this.$refs.container as HTMLElement).scrollWidth : this.w) - this.left;
-      this.bottom = this.parentHeight - (this.h === 'auto' ? (this.$refs.container as HTMLElement).scrollHeight : this.h) - this.top;
-
-      this.domEvents = new Map([
-        ['mousemove', this.move],
-        ['mouseup', this.up],
-        ['mouseleave', this.up],
-        ['mousedown', this.deselect],
-        ['touchmove', this.move],
-        ['touchend', this.up],
-        ['touchcancel', this.up],
-        ['touchstart', this.up],
-      ]);
-
-      addEvents(this.domEvents);
-
-      if (this.dragHandle) {
-        [...this.$el.querySelectorAll(this.dragHandle)].forEach((dragHandle) => {
-          dragHandle.setAttribute('data-drag-handle', this._uid);
-        });
-      }
-
-      if (this.dragCancel) {
-        [...this.$el.querySelectorAll(this.dragCancel)].forEach((cancelHandle) => {
-          cancelHandle.setAttribute('data-drag-cancel', this._uid);
-        });
-      }
-
-      if (this.name.trim() !== '' && this.isStorage) {
-        let info = JSON.parse(localStorage.getItem("DragResizeView_Rect_" + this.name) as string)
-        if (info !== null
-          && info.left !== null && info.top !== null
-          && info.right !== null && info.bottom !== null) {
-          this.left = info.left
-          this.top = info.top
-          this.right = info.right
-          this.bottom = info.bottom
-        } else {
-          localStorage.removeItem("DragResizeView_Rect_" + this.name)
-        }
-      }
-    }
-
-    beforeDestroy() {
-      removeEvents(this.domEvents);
-    }
-
-    deselect() {
-      if (this.preventActiveBehavior) {
-        return;
-      }
-      this.active = false;
-    }
-
-    move(ev: any) {
-
-      if (!this.stickDrag && !this.bodyDrag) {
-        return;
-      }
-
-      ev.stopPropagation();
-
-      const pageX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
-      const pageY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
-
-      const { dimensionsBeforeMove } = this;
-
-      const delta = {
-        x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
-        y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
-      };
-
-      if (this.stickDrag) {
-        this.stickMove(delta);
-      }
-
-      if (this.bodyDrag) {
-        if (this.axis === 'x') {
-          delta.y = 0;
-        } else if (this.axis === 'y') {
-          delta.x = 0;
-        } else if (this.axis === 'none') {
-          return;
-        }
-        this.bodyMove(delta);
-      }
-    }
-
-    up(ev: any) {
-      if (this.stickDrag) {
-        this.stickUp();
-      } else if (this.bodyDrag) {
-        this.bodyUp();
-      }
-    }
-
-
-    bodyDown(ev: any) {
-      const { target, button } = ev;
-
-      if (!this.preventActiveBehavior) {
-        this.active = true;
-      }
-
-      if (button && button !== 0) {
-        return;
-      }
-
-      this.$emit('clicked', ev);
-
-      if (!this.active) {
-        return;
-      }
-
-      if (this.dragHandle && target.getAttribute('data-drag-handle') !== this._uid.toString()) {
-        return;
-      }
-
-      if (this.dragCancel && target.getAttribute('data-drag-cancel') === this._uid.toString()) {
-        return;
-      }
-
-      if (typeof ev.stopPropagation !== 'undefined') {
-        ev.stopPropagation();
-      }
-
-      if (typeof ev.preventDefault !== 'undefined') {
-        ev.preventDefault();
-      }
-
-      if (this.isDraggable) {
-        this.bodyDrag = true;
-      }
-
-      const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
-      const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
-
-      this.saveDimensionsBeforeMove(pointerX, pointerY);
-
-      if (this.parentLimitation) {
-        this.limits = this.calcDragLimitation();
-      }
-    }
-
-    bodyMove(delta: any) {
-
-      const { dimensionsBeforeMove, parentWidth, parentHeight, gridX, gridY, width, height } = this;
-
-      let newTop = dimensionsBeforeMove.top - delta.y;
-      let newBottom = dimensionsBeforeMove.bottom + delta.y;
-      let newLeft = dimensionsBeforeMove.left - delta.x;
-      let newRight = dimensionsBeforeMove.right + delta.x;
-
-      if (this.snapToGrid) {
-        let alignTop = true;
-        let alignLeft = true;
-
-        let diffT = newTop - Math.floor(newTop / gridY) * gridY;
-        let diffB = (parentHeight - newBottom) - Math.floor((parentHeight - newBottom) / gridY) * gridY;
-        let diffL = newLeft - Math.floor(newLeft / gridX) * gridX;
-        let diffR = (parentWidth - newRight) - Math.floor((parentWidth - newRight) / gridX) * gridX;
-
-        if (diffT > (gridY / 2)) {
-          diffT -= gridY;
-        }
-        if (diffB > (gridY / 2)) {
-          diffB -= gridY;
-        }
-        if (diffL > (gridX / 2)) {
-          diffL -= gridX;
-        }
-        if (diffR > (gridX / 2)) {
-          diffR -= gridX;
-        }
-
-        if (Math.abs(diffB) < Math.abs(diffT)) {
-          alignTop = false;
-        }
-        if (Math.abs(diffR) < Math.abs(diffL)) {
-          alignLeft = false;
-        }
-
-        newTop -= (alignTop ? diffT : diffB);
-        newBottom = parentHeight - height - newTop;
-        newLeft -= (alignLeft ? diffL : diffR);
-        newRight = parentWidth - width - newLeft;
-      }
-
-      ({
-        newLeft: this.left,
-        newRight: this.right,
-        newTop: this.top,
-        newBottom: this.bottom,
-      } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
-
-      this.$emit('dragging', this.rect);
-
-      this.storageElementInfo();
-    }
-
-    bodyUp() {
-      this.bodyDrag = false;
-      this.$emit('dragging', this.rect);
-      this.$emit('dragstop', this.rect);
-
-      this.dimensionsBeforeMove = { pointerX: 0, pointerY: 0, x: 0, y: 0, w: 0, h: 0 };
-
-      this.limits = {
-        left: { min: null, max: null },
-        right: { min: null, max: null },
-        top: { min: null, max: null },
-        bottom: { min: null, max: null },
-      };
-    }
-
-    stickDown(stick: any, ev: any, force = false) {
-      if ((!this.isResizable || !this.active) && !force) {
-        return;
-      }
-
-      this.stickDrag = true;
-
-      const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
-      const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
-
-      this.saveDimensionsBeforeMove(pointerX, pointerY);
-
-      this.currentStick = stick;
-
-      this.limits = this.calcResizeLimits();
-    }
-
-    saveDimensionsBeforeMove(pointerX: number, pointerY: number): void {
-      this.dimensionsBeforeMove.pointerX = pointerX;
-      this.dimensionsBeforeMove.pointerY = pointerY;
-
-      this.dimensionsBeforeMove.left = this.left;
-      this.dimensionsBeforeMove.right = this.right;
-      this.dimensionsBeforeMove.top = this.top;
-      this.dimensionsBeforeMove.bottom = this.bottom;
-
-      this.dimensionsBeforeMove.width = this.width;
-      this.dimensionsBeforeMove.height = this.height;
-
-      this.aspectFactor = this.width / this.height;
-    }
-
-    stickMove(delta: any) {
-      const {
-        currentStick,
-        dimensionsBeforeMove,
-        gridY,
-        gridX,
-        snapToGrid,
-        parentHeight,
-        parentWidth,
-      } = this;
-
-      let newTop = dimensionsBeforeMove.top;
-      let newBottom = dimensionsBeforeMove.bottom;
-      let newLeft = dimensionsBeforeMove.left;
-      let newRight = dimensionsBeforeMove.right;
-      switch (currentStick[0]) {
-        case 'b':
-          newBottom = dimensionsBeforeMove.bottom + delta.y;
-
-          if (snapToGrid) {
-            newBottom = parentHeight - Math.round((parentHeight - newBottom) / gridY) * gridY;
-          }
-
-          break;
-
-        case 't':
-          newTop = dimensionsBeforeMove.top - delta.y;
-
-          if (snapToGrid) {
-            newTop = Math.round(newTop / gridY) * gridY;
-          }
-
-          break;
-        default:
-          break;
-      }
-
-      switch (currentStick[1]) {
-        case 'r':
-          newRight = dimensionsBeforeMove.right + delta.x;
-
-          if (snapToGrid) {
-            newRight = parentWidth - Math.round((parentWidth - newRight) / gridX) * gridX;
-          }
-
-          break;
-
-        case 'l':
-          newLeft = dimensionsBeforeMove.left - delta.x;
-
-          if (snapToGrid) {
-            newLeft = Math.round(newLeft / gridX) * gridX;
-          }
-
-          break;
-        default:
-          break;
-      }
-
-      ({
-        newLeft,
-        newRight,
-        newTop,
-        newBottom,
-      } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
-
-      if (this.aspectRatio) {
-        ({
-          newLeft,
-          newRight,
-          newTop,
-          newBottom,
-        } = this.rectCorrectionByAspectRatio({ newLeft, newRight, newTop, newBottom }));
-      }
-
-      this.left = newLeft;
-      this.right = newRight;
-      this.top = newTop;
-      this.bottom = newBottom;
-
-      this.$emit('resizing', this.rect);
-
-      this.storageElementInfo()
-    }
-
-    stickUp() {
-      this.stickDrag = false;
-      this.dimensionsBeforeMove = {
-        pointerX: 0,
-        pointerY: 0,
-        x: 0,
-        y: 0,
-        w: 0,
-        h: 0,
-      };
-      this.limits = {
-        left: { min: null, max: null },
-        right: { min: null, max: null },
-        top: { min: null, max: null },
-        bottom: { min: null, max: null },
-      };
-
-      this.$emit('resizing', this.rect);
-      this.$emit('resizestop', this.rect);
-    }
-
-    calcDragLimitation() {
-      const { parentWidth, parentHeight } = this;
-
-      return {
-        left: { min: 0, max: parentWidth - this.width },
-        right: { min: 0, max: parentWidth - this.width },
-        top: { min: 0, max: parentHeight - this.height },
-        bottom: { min: 0, max: parentHeight - this.height },
-      };
-    }
-
-    calcResizeLimits() {
-      const { aspectFactor, width, height, bottom, top, left, right } = this;
-      let { minh: minHeight, minw: minWidth } = this;
-
-      const parentLim = this.parentLimitation ? 0 : null;
-
-      if (this.aspectRatio) {
-        if (minWidth / minHeight > aspectFactor) {
-          minHeight = minWidth / aspectFactor;
-        } else {
-          minWidth = aspectFactor * minHeight;
-        }
-      }
-
-      const limits = {
-        left: { min: parentLim, max: left + (width - minWidth) },
-        right: { min: parentLim, max: right + (width - minWidth) },
-        top: { min: parentLim, max: top + (height - minHeight) },
-        bottom: { min: parentLim, max: bottom + (height - minHeight) },
-      };
-
-      if (this.aspectRatio) {
-        const aspectLimits = {
-          left: {
-            min: left - (Math.min(top, bottom) * aspectFactor) * 2,
-            max: left + ((((height - minHeight) / 2) * aspectFactor) * 2),
-          },
-          right: {
-            min: right - (Math.min(top, bottom) * aspectFactor) * 2,
-            max: right + ((((height - minHeight) / 2) * aspectFactor) * 2),
-          },
-          top: {
-            min: top - (Math.min(left, right) / aspectFactor) * 2,
-            max: top + ((((width - minWidth) / 2) / aspectFactor) * 2),
-          },
-          bottom: {
-            min: bottom - (Math.min(left, right) / aspectFactor) * 2,
-            max: bottom + ((((width - minWidth) / 2) / aspectFactor) * 2),
-          },
-        };
-
-        if (this.currentStick[0] === 'm') {
-          limits.left = {
-            min: Math.max(limits.left.min as number, aspectLimits.left.min),
-            max: Math.min(limits.left.max, aspectLimits.left.max),
-          };
-          limits.right = {
-            min: Math.max(limits.right.min as number, aspectLimits.right.min),
-            max: Math.min(limits.right.max, aspectLimits.right.max),
-          };
-
-        } else if (this.currentStick[1] === 'm') {
-          limits.top = {
-            min: Math.max(limits.top.min as number, aspectLimits.top.min),
-            max: Math.min(limits.top.max, aspectLimits.top.max),
-          };
-          limits.bottom = {
-            min: Math.max(limits.bottom.min as number, aspectLimits.bottom.min),
-            max: Math.min(limits.bottom.max, aspectLimits.bottom.max),
-          };
-        }
-      }
-
-      return limits;
-    }
-
-    sideCorrectionByLimit(limit: any, current: any) {
-      let value = current;
-
-      if (limit.min !== null && current < limit.min) {
-        value = limit.min;
-      } else if (limit.max !== null && limit.max < current) {
-        value = limit.max;
-      }
-
-      return value;
-    }
-
-    rectCorrectionByLimit(rect: any) {
-      const { limits } = this;
-      let { newRight, newLeft, newBottom, newTop } = rect;
-
-      newLeft = this.sideCorrectionByLimit(limits.left, newLeft);
-      newRight = this.sideCorrectionByLimit(limits.right, newRight);
-      newTop = this.sideCorrectionByLimit(limits.top, newTop);
-      newBottom = this.sideCorrectionByLimit(limits.bottom, newBottom);
-
-      return {
-        newLeft,
-        newRight,
-        newTop,
-        newBottom,
-      };
-    }
-
-    rectCorrectionByAspectRatio(rect: any) {
-      let { newLeft, newRight, newTop, newBottom } = rect;
-      const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this;
-
-      let newWidth = parentWidth - newLeft - newRight;
-      let newHeight = parentHeight - newTop - newBottom;
-
-      if (currentStick[1] === 'm') {
-        const deltaHeight = newHeight - dimensionsBeforeMove.height;
-
-        newLeft -= (deltaHeight * aspectFactor) / 2;
-        newRight -= (deltaHeight * aspectFactor) / 2;
-      } else if (currentStick[0] === 'm') {
-        const deltaWidth = newWidth - dimensionsBeforeMove.width;
-
-        newTop -= (deltaWidth / aspectFactor) / 2;
-        newBottom -= (deltaWidth / aspectFactor) / 2;
-      } else if (newWidth / newHeight > aspectFactor) {
-        newWidth = aspectFactor * newHeight;
-
-        if (currentStick[1] === 'l') {
-          newLeft = parentWidth - newRight - newWidth;
-        } else {
-          newRight = parentWidth - newLeft - newWidth;
-        }
-      } else {
-        newHeight = newWidth / aspectFactor;
-
-        if (currentStick[0] === 't') {
-          newTop = parentHeight - newBottom - newHeight;
-        } else {
-          newBottom = parentHeight - newTop - newHeight;
-        }
-      }
-
-      return { newLeft, newRight, newTop, newBottom };
-    }
-
-    storageElementInfo() {
-
-      if (!this.isStorage)
-        return
-
-      if (this.name.trim() === "") {
-        throw "unspecified name"
-      }
-
-      if (this.rect.left === null || this.rect.top === null || this.right === null || this.bottom === null) {
-        return
-      }
-
-      const info = { "left": this.rect.left, "top": this.rect.top, "right": this.right, "bottom": this.bottom }
-      localStorage.setItem("DragResizeView_Rect_" + this.name, JSON.stringify(info))
-    }
-
-    get positionStyle() {
-      return {
-        top: this.top + 'px',
-        left: this.left + 'px',
-        zIndex: this.zIndex,
-      };
-    }
-
-    get sizeStyle() {
-      return {
-        width: this.w == 'auto' ? 'auto' : this.width + 'px',
-        height: this.h == 'auto' ? 'auto' : this.height + 'px'
-      };
-    }
-
-
-    get vdrStick() {
-      return (stick: any) => {
-        const stickStyle: any = {
-          width: `${this.stickSize / this.parentScaleX}px`,
-          height: `${this.stickSize / this.parentScaleY}px`,
-        };
-        stickStyle[styleMapping.y[stick[0]]] = `${this.stickSize / this.parentScaleX / -2}px`;
-        stickStyle[styleMapping.x[stick[1]]] = `${this.stickSize / this.parentScaleX / -2}px`;
-        return stickStyle;
-      };
-    }
-
-    get width() {
-      return this.parentWidth - this.left - this.right;
-    }
-
-    get height() {
-      return this.parentHeight - this.top - this.bottom;
-    }
-
-    get rect() {
-      return {
-        left: Math.round(this.left),
-        top: Math.round(this.top),
-        width: Math.round(this.width),
-        height: Math.round(this.height),
-      };
-    }
-
-    @Watch('active', { immediate: false, deep: false })
-    onActive(isActive: boolean) {
-      if (isActive) {
-        this.$emit('activated');
-      } else {
-        this.$emit('deactivated');
-      }
-    }
-
-    @Watch('isActive', { immediate: true, deep: false })
-    onIsActive(val: boolean) {
-      this.active = val;
-    }
-
-    @Watch('z', { immediate: true, deep: false })
-    onZ(val: number | string) {
-      if (val >= 0 || val === 'auto') {
-        this.zIndex = val as number;
-      }
-    }
-
-    @Watch('x', { immediate: false, deep: false })
-    onX(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.left)) {
-        return;
-      }
-
-      const delta = oldVal - newVal;
-
-      this.bodyDown({ pageX: this.left, pageY: this.top });
-      this.bodyMove({ x: delta, y: 0 });
-
-      this.$nextTick(() => {
-        this.bodyUp();
-      });
-    }
-
-    @Watch('y', { immediate: false, deep: false })
-    onY(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.top)) {
-        return;
-      }
-
-      const delta = oldVal - newVal;
-
-      this.bodyDown({ pageX: this.left, pageY: this.top });
-      this.bodyMove({ x: 0, y: delta });
-
-      this.$nextTick(() => {
-        this.bodyUp();
-      });
-    }
-
-    @Watch('w', { immediate: false, deep: false })
-    onW(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.width)) {
-        return;
-      }
-
-      const stick = 'mr';
-      const delta = oldVal - newVal;
-
-      this.stickDown(stick, { pageX: this.right, pageY: this.top + (this.height / 2) }, true);
-      this.stickMove({ x: delta, y: 0 });
-
-      this.$nextTick(() => {
-        this.stickUp();
-      });
-    }
-
-    @Watch('h', { immediate: false, deep: false })
-    onH(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.height)) {
-        return;
-      }
-
-      const stick = 'bm';
-      const delta = oldVal - newVal;
-
-      this.stickDown(stick, { pageX: this.left + (this.width / 2), pageY: this.bottom }, true);
-      this.stickMove({ x: 0, y: delta });
-
-      this.$nextTick(() => {
-        this.stickUp();
-      });
-    }
-
-    @Watch('parentW', { immediate: false, deep: false })
-    onParentW(val: number) {
-      this.right = val - this.width - this.left;
-      this.parentWidth = val;
-    }
-
-
-    @Watch('parentH', { immediate: false, deep: false })
-    onParentH(val: number) {
-      this.bottom = val - this.height - this.top;
-      this.parentHeight = val;
-    }
-
-  }
-
-</script>
-
-<style lang="less" scoped>
-  @import "index.less";
-</style>