emacroh5lib 1.0.18 → 1.0.21

package/src/views/DragResizeView/index.vue

@@ -1,3 +1,955 @@
-<template src="./vue-drag-resize.html"></template>
-<script src="./vue-drag-resize.js"></script>
-<style src="./vue-drag-resize.css"></style>
+<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],
+        ['keydown', this.keydown],
+      ]);
+
+      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();
+      }
+    }
+
+    keydown(ev: any) {
+
+      if (!this.stickDrag && !this.bodyDrag) {
+        return;
+      }
+      ev.stopPropagation();
+
+      const { dimensionsBeforeMove } = this;
+      let pageX = 0, pageY = 0;
+      if (ev.key === "a" || ev.key === "ArrowLeft") {
+        pageX = dimensionsBeforeMove.pointerX - 1;
+        pageY = dimensionsBeforeMove.pointerY;
+      } else if (ev.key === "d" || ev.key === "ArrowRight") {
+        pageX = dimensionsBeforeMove.pointerX + 1;
+        pageY = dimensionsBeforeMove.pointerY;
+      } else if (ev.key === "w" || ev.key === "ArrowUp") {
+        pageX = dimensionsBeforeMove.pointerX;
+        pageY = dimensionsBeforeMove.pointerY - 1;
+      } else if (ev.key === "s" || ev.key === "ArrowDown") {
+        pageX = dimensionsBeforeMove.pointerX;
+        pageY = dimensionsBeforeMove.pointerY + 1;
+      } else {
+        return
+      }
+
+      const delta = {
+        x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
+        y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
+      };
+
+      if (this.stickDrag) {
+        this.stickMove(delta);
+      }
+
+      if (this.axis === 'x') {
+        delta.y = 0;
+      } else if (this.axis === 'y') {
+        delta.x = 0;
+      } else if (this.axis === 'none') {
+        return;
+      }
+      this.bodyMove(delta);
+
+      this.saveDimensionsBeforeMove(delta.x, delta.y);
+    }
+
+
+    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;
+    }
+
+  }
+
+  // 待实现功能:
+  // 1. 移动时与其他组件对齐
+  // 2. 通过键盘上下左右移动
+
+</script>
+
+<style lang="less" scoped>
+  @import "index.less";
+</style>