emacroh5lib 1.0.91 → 1.0.95

package/src/views/DragResizeView/index.vue

@@ -1,955 +1,1076 @@
 <template>
-  <div class="vdr" :style="positionStyle"
-    :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass : ''}`"
-    @mousedown="bodyDown($event)" @touchstart="bodyDown($event)" @touchend="up($event)">
+  <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
+      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',
+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;
     },
-    x: {
-      l: 'left',
-      m: 'marginLeft',
-      r: 'right',
+  })
+  gridX!: number;
+
+  @Prop({
+    type: Number,
+    default: 50,
+    validator(val) {
+      return val >= 0;
     },
-  };
-
-  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);
-    });
+  })
+  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;
   }
 
-  @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);
+      });
     }
 
-
-    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)
+    if (this.dragCancel) {
+      [...this.$el.querySelectorAll(this.dragCancel)].forEach(
+        (cancelHandle) => {
+          cancelHandle.setAttribute("data-drag-cancel", this._uid);
         }
-      }
-    }
-
-    beforeDestroy() {
-      removeEvents(this.domEvents);
+      );
     }
 
-    deselect() {
-      if (this.preventActiveBehavior) {
-        return;
+    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);
       }
-      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);
-      }
+  beforeDestroy() {
+    removeEvents(this.domEvents);
+  }
 
-      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);
-      }
+  deselect() {
+    if (this.preventActiveBehavior) {
+      return;
     }
+    this.active = false;
+  }
 
-    up(ev: any) {
-      if (this.stickDrag) {
-        this.stickUp();
-      } else if (this.bodyDrag) {
-        this.bodyUp();
-      }
+  move(ev: any) {
+    if (!this.stickDrag && !this.bodyDrag) {
+      return;
     }
 
-    keydown(ev: any) {
+    ev.stopPropagation();
 
-      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;
-      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 { dimensionsBeforeMove } = this;
 
-      const delta = {
-        x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
-        y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
-      };
+    const delta = {
+      x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
+      y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
+    };
 
-      if (this.stickDrag) {
-        this.stickMove(delta);
-      }
+    if (this.stickDrag) {
+      this.stickMove(delta);
+    }
 
-      if (this.axis === 'x') {
+    if (this.bodyDrag) {
+      if (this.axis === "x") {
         delta.y = 0;
-      } else if (this.axis === 'y') {
+      } else if (this.axis === "y") {
         delta.x = 0;
-      } else if (this.axis === 'none') {
+      } else if (this.axis === "none") {
         return;
       }
       this.bodyMove(delta);
-
-      this.saveDimensionsBeforeMove(delta.x, delta.y);
     }
+  }
 
+  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;
-      }
+  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;
+    }
 
-      this.$emit('clicked', ev);
+    const delta = {
+      x: (dimensionsBeforeMove.pointerX - pageX) / this.parentScaleX,
+      y: (dimensionsBeforeMove.pointerY - pageY) / this.parentScaleY,
+    };
 
-      if (!this.active) {
-        return;
-      }
+    if (this.stickDrag) {
+      this.stickMove(delta);
+    }
 
-      if (this.dragHandle && target.getAttribute('data-drag-handle') !== this._uid.toString()) {
-        return;
-      }
+    if (this.axis === "x") {
+      delta.y = 0;
+    } else if (this.axis === "y") {
+      delta.x = 0;
+    } else if (this.axis === "none") {
+      return;
+    }
+    this.bodyMove(delta);
 
-      if (this.dragCancel && target.getAttribute('data-drag-cancel') === this._uid.toString()) {
-        return;
-      }
+    this.saveDimensionsBeforeMove(delta.x, delta.y);
+  }
 
-      if (typeof ev.stopPropagation !== 'undefined') {
-        ev.stopPropagation();
-      }
+  bodyDown(ev: any) {
+    const { target, button } = ev;
 
-      if (typeof ev.preventDefault !== 'undefined') {
-        ev.preventDefault();
-      }
+    if (!this.preventActiveBehavior) {
+      this.active = true;
+    }
 
-      if (this.isDraggable) {
-        this.bodyDrag = true;
-      }
+    if (button && button !== 0) {
+      return;
+    }
 
-      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.$emit("clicked", ev);
 
-      this.saveDimensionsBeforeMove(pointerX, pointerY);
+    if (!this.active) {
+      return;
+    }
 
-      if (this.parentLimitation) {
-        this.limits = this.calcDragLimitation();
-      }
+    if (
+      this.dragHandle &&
+      target.getAttribute("data-drag-handle") !== this._uid.toString()
+    ) {
+      return;
     }
 
-    bodyMove(delta: any) {
+    if (
+      this.dragCancel &&
+      target.getAttribute("data-drag-cancel") === this._uid.toString()
+    ) {
+      return;
+    }
 
-      const { dimensionsBeforeMove, parentWidth, parentHeight, gridX, gridY, width, height } = this;
+    if (typeof ev.stopPropagation !== "undefined") {
+      ev.stopPropagation();
+    }
 
-      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 (typeof ev.preventDefault !== "undefined") {
+      ev.preventDefault();
+    }
 
-      if (this.snapToGrid) {
-        let alignTop = true;
-        let alignLeft = true;
+    if (this.isDraggable) {
+      this.bodyDrag = 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;
+    const pointerX =
+      typeof ev.pageX !== "undefined" ? ev.pageX : ev.touches[0].pageX;
+    const pointerY =
+      typeof ev.pageY !== "undefined" ? ev.pageY : ev.touches[0].pageY;
 
-        if (diffT > (gridY / 2)) {
-          diffT -= gridY;
-        }
-        if (diffB > (gridY / 2)) {
-          diffB -= gridY;
-        }
-        if (diffL > (gridX / 2)) {
-          diffL -= gridX;
-        }
-        if (diffR > (gridX / 2)) {
-          diffR -= gridX;
-        }
+    this.saveDimensionsBeforeMove(pointerX, pointerY);
 
-        if (Math.abs(diffB) < Math.abs(diffT)) {
-          alignTop = false;
-        }
-        if (Math.abs(diffR) < Math.abs(diffL)) {
-          alignLeft = false;
-        }
+    if (this.parentLimitation) {
+      this.limits = this.calcDragLimitation();
+    }
+  }
 
-        newTop -= (alignTop ? diffT : diffB);
-        newBottom = parentHeight - height - newTop;
-        newLeft -= (alignLeft ? diffL : diffR);
-        newRight = parentWidth - width - newLeft;
+  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;
       }
 
-      ({
-        newLeft: this.left,
-        newRight: this.right,
-        newTop: this.top,
-        newBottom: this.bottom,
-      } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
-
-      this.$emit('dragging', this.rect);
+      if (Math.abs(diffB) < Math.abs(diffT)) {
+        alignTop = false;
+      }
+      if (Math.abs(diffR) < Math.abs(diffL)) {
+        alignLeft = false;
+      }
 
-      this.storageElementInfo();
+      newTop -= alignTop ? diffT : diffB;
+      newBottom = parentHeight - height - newTop;
+      newLeft -= alignLeft ? diffL : diffR;
+      newRight = parentWidth - width - newLeft;
     }
 
-    bodyUp() {
-      this.bodyDrag = false;
-      this.$emit('dragging', this.rect);
-      this.$emit('dragstop', this.rect);
+    ({
+      newLeft: this.left,
+      newRight: this.right,
+      newTop: this.top,
+      newBottom: this.bottom,
+    } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
 
-      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("dragging", this.rect);
 
-    stickDown(stick: any, ev: any, force = false) {
-      if ((!this.isResizable || !this.active) && !force) {
-        return;
-      }
+    this.storageElementInfo();
+  }
 
-      this.stickDrag = true;
+  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 },
+    };
+  }
 
-      const pointerX = typeof ev.pageX !== 'undefined' ? ev.pageX : ev.touches[0].pageX;
-      const pointerY = typeof ev.pageY !== 'undefined' ? ev.pageY : ev.touches[0].pageY;
+  stickDown(stick: any, ev: any, force = false) {
+    if ((!this.isResizable || !this.active) && !force) {
+      return;
+    }
 
-      this.saveDimensionsBeforeMove(pointerX, pointerY);
+    this.stickDrag = true;
 
-      this.currentStick = stick;
+    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.limits = this.calcResizeLimits();
-    }
+    this.saveDimensionsBeforeMove(pointerX, pointerY);
 
-    saveDimensionsBeforeMove(pointerX: number, pointerY: number): void {
-      this.dimensionsBeforeMove.pointerX = pointerX;
-      this.dimensionsBeforeMove.pointerY = pointerY;
+    this.currentStick = stick;
 
-      this.dimensionsBeforeMove.left = this.left;
-      this.dimensionsBeforeMove.right = this.right;
-      this.dimensionsBeforeMove.top = this.top;
-      this.dimensionsBeforeMove.bottom = this.bottom;
+    this.limits = this.calcResizeLimits();
+  }
 
-      this.dimensionsBeforeMove.width = this.width;
-      this.dimensionsBeforeMove.height = this.height;
+  saveDimensionsBeforeMove(pointerX: number, pointerY: number): void {
+    this.dimensionsBeforeMove.pointerX = pointerX;
+    this.dimensionsBeforeMove.pointerY = pointerY;
 
-      this.aspectFactor = this.width / this.height;
-    }
+    this.dimensionsBeforeMove.left = this.left;
+    this.dimensionsBeforeMove.right = this.right;
+    this.dimensionsBeforeMove.top = this.top;
+    this.dimensionsBeforeMove.bottom = this.bottom;
 
-    stickMove(delta: any) {
-      const {
-        currentStick,
-        dimensionsBeforeMove,
-        gridY,
-        gridX,
-        snapToGrid,
-        parentHeight,
-        parentWidth,
-      } = this;
+    this.dimensionsBeforeMove.width = this.width;
+    this.dimensionsBeforeMove.height = this.height;
 
-      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;
+    this.aspectFactor = this.width / this.height;
+  }
 
-          if (snapToGrid) {
-            newBottom = parentHeight - Math.round((parentHeight - newBottom) / gridY) * gridY;
-          }
+  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;
+        break;
 
-        case 't':
-          newTop = dimensionsBeforeMove.top - delta.y;
+      case "t":
+        newTop = dimensionsBeforeMove.top - delta.y;
 
-          if (snapToGrid) {
-            newTop = Math.round(newTop / gridY) * gridY;
-          }
+        if (snapToGrid) {
+          newTop = Math.round(newTop / gridY) * gridY;
+        }
 
-          break;
-        default:
-          break;
-      }
+        break;
+      default:
+        break;
+    }
 
-      switch (currentStick[1]) {
-        case 'r':
-          newRight = dimensionsBeforeMove.right + delta.x;
+    switch (currentStick[1]) {
+      case "r":
+        newRight = dimensionsBeforeMove.right + delta.x;
 
-          if (snapToGrid) {
-            newRight = parentWidth - Math.round((parentWidth - newRight) / gridX) * gridX;
-          }
+        if (snapToGrid) {
+          newRight =
+            parentWidth - Math.round((parentWidth - newRight) / gridX) * gridX;
+        }
 
-          break;
+        break;
 
-        case 'l':
-          newLeft = dimensionsBeforeMove.left - delta.x;
+      case "l":
+        newLeft = dimensionsBeforeMove.left - delta.x;
 
-          if (snapToGrid) {
-            newLeft = Math.round(newLeft / gridX) * gridX;
-          }
+        if (snapToGrid) {
+          newLeft = Math.round(newLeft / gridX) * gridX;
+        }
 
-          break;
-        default:
-          break;
-      }
+        break;
+      default:
+        break;
+    }
 
-      ({
-        newLeft,
-        newRight,
-        newTop,
-        newBottom,
-      } = this.rectCorrectionByLimit({ newLeft, newRight, newTop, newBottom }));
+    ({ newLeft, newRight, newTop, newBottom } = this.rectCorrectionByLimit({
+      newLeft,
+      newRight,
+      newTop,
+      newBottom,
+    }));
 
-      if (this.aspectRatio) {
-        ({
+    if (this.aspectRatio) {
+      ({ newLeft, newRight, newTop, newBottom } =
+        this.rectCorrectionByAspectRatio({
           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);
-    }
+    this.left = newLeft;
+    this.right = newRight;
+    this.top = newTop;
+    this.bottom = newBottom;
 
-    calcDragLimitation() {
-      const { parentWidth, parentHeight } = this;
+    this.$emit("resizing", this.rect);
 
-      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 },
-      };
-    }
+    this.storageElementInfo();
+  }
 
-    calcResizeLimits() {
-      const { aspectFactor, width, height, bottom, top, left, right } = this;
-      let { minh: minHeight, minw: minWidth } = this;
+  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);
+  }
 
-      const parentLim = this.parentLimitation ? 0 : null;
+  calcDragLimitation() {
+    const { parentWidth, parentHeight } = this;
 
-      if (this.aspectRatio) {
-        if (minWidth / minHeight > aspectFactor) {
-          minHeight = minWidth / aspectFactor;
-        } else {
-          minWidth = aspectFactor * minHeight;
-        }
-      }
+    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 },
+    };
+  }
 
-      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) },
-      };
+  calcResizeLimits() {
+    const { aspectFactor, width, height, bottom, top, left, right } = this;
+    let { minh: minHeight, minw: minWidth } = this;
 
-      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),
-          },
-        };
+    const parentLim = this.parentLimitation ? 0 : null;
 
-        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),
-          };
-        }
+    if (this.aspectRatio) {
+      if (minWidth / minHeight > aspectFactor) {
+        minHeight = minWidth / aspectFactor;
+      } else {
+        minWidth = aspectFactor * minHeight;
       }
-
-      return limits;
     }
 
-    sideCorrectionByLimit(limit: any, current: any) {
-      let value = current;
+    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 (limit.min !== null && current < limit.min) {
-        value = limit.min;
-      } else if (limit.max !== null && limit.max < current) {
-        value = limit.max;
+      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 value;
     }
 
-    rectCorrectionByLimit(rect: any) {
-      const { limits } = this;
-      let { newRight, newLeft, newBottom, newTop } = rect;
+    return limits;
+  }
 
-      newLeft = this.sideCorrectionByLimit(limits.left, newLeft);
-      newRight = this.sideCorrectionByLimit(limits.right, newRight);
-      newTop = this.sideCorrectionByLimit(limits.top, newTop);
-      newBottom = this.sideCorrectionByLimit(limits.bottom, newBottom);
+  sideCorrectionByLimit(limit: any, current: any) {
+    let value = current;
 
-      return {
-        newLeft,
-        newRight,
-        newTop,
-        newBottom,
-      };
+    if (limit.min !== null && current < limit.min) {
+      value = limit.min;
+    } else if (limit.max !== null && limit.max < current) {
+      value = limit.max;
     }
 
-    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;
+    return value;
+  }
 
-        newTop -= (deltaWidth / aspectFactor) / 2;
-        newBottom -= (deltaWidth / aspectFactor) / 2;
-      } else if (newWidth / newHeight > aspectFactor) {
-        newWidth = aspectFactor * newHeight;
+  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,
+    };
+  }
 
-        if (currentStick[1] === 'l') {
-          newLeft = parentWidth - newRight - newWidth;
-        } else {
-          newRight = parentWidth - newLeft - newWidth;
-        }
+  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 {
-        newHeight = newWidth / aspectFactor;
-
-        if (currentStick[0] === 't') {
-          newTop = parentHeight - newBottom - newHeight;
-        } else {
-          newBottom = parentHeight - newTop - newHeight;
-        }
+        newRight = parentWidth - newLeft - newWidth;
       }
+    } else {
+      newHeight = newWidth / aspectFactor;
 
-      return { newLeft, newRight, newTop, newBottom };
+      if (currentStick[0] === "t") {
+        newTop = parentHeight - newBottom - newHeight;
+      } else {
+        newBottom = parentHeight - newTop - newHeight;
+      }
     }
 
-    storageElementInfo() {
-
-      if (!this.isStorage)
-        return
+    return { newLeft, newRight, newTop, newBottom };
+  }
 
-      if (this.name.trim() === "") {
-        throw "unspecified name"
-      }
+  storageElementInfo() {
+    if (!this.isStorage) return;
 
-      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))
+    if (this.name.trim() === "") {
+      throw "unspecified name";
     }
 
-    get positionStyle() {
-      return {
-        top: this.top + 'px',
-        left: this.left + 'px',
-        zIndex: this.zIndex,
-      };
+    if (
+      this.rect.left === null ||
+      this.rect.top === null ||
+      this.right === null ||
+      this.bottom === null
+    ) {
+      return;
     }
 
-    get sizeStyle() {
-      return {
-        width: this.w == 'auto' ? 'auto' : this.width + 'px',
-        height: this.h == 'auto' ? 'auto' : this.height + 'px'
-      };
-    }
+    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 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 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 width() {
+    return this.parentWidth - this.left - this.right;
+  }
 
-    get height() {
-      return this.parentHeight - this.top - this.bottom;
-    }
+  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),
-      };
-    }
+  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("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("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("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("x", { immediate: false, deep: false })
+  onX(newVal: number, oldVal: number) {
+    if (this.stickDrag || this.bodyDrag || newVal === this.left) {
+      return;
     }
 
-    @Watch('y', { immediate: false, deep: false })
-    onY(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.top)) {
-        return;
-      }
+    const delta = oldVal - newVal;
 
-      const delta = oldVal - newVal;
+    this.bodyDown({ pageX: this.left, pageY: this.top });
+    this.bodyMove({ x: delta, y: 0 });
 
-      this.bodyDown({ pageX: this.left, pageY: this.top });
-      this.bodyMove({ x: 0, y: delta });
+    this.$nextTick(() => {
+      this.bodyUp();
+    });
+  }
 
-      this.$nextTick(() => {
-        this.bodyUp();
-      });
+  @Watch("y", { immediate: false, deep: false })
+  onY(newVal: number, oldVal: number) {
+    if (this.stickDrag || this.bodyDrag || newVal === this.top) {
+      return;
     }
 
-    @Watch('w', { immediate: false, deep: false })
-    onW(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.width)) {
-        return;
-      }
+    const delta = oldVal - newVal;
 
-      const stick = 'mr';
-      const delta = oldVal - newVal;
+    this.bodyDown({ pageX: this.left, pageY: this.top });
+    this.bodyMove({ x: 0, y: delta });
 
-      this.stickDown(stick, { pageX: this.right, pageY: this.top + (this.height / 2) }, true);
-      this.stickMove({ x: delta, y: 0 });
+    this.$nextTick(() => {
+      this.bodyUp();
+    });
+  }
 
-      this.$nextTick(() => {
-        this.stickUp();
-      });
+  @Watch("w", { immediate: false, deep: false })
+  onW(newVal: number, oldVal: number) {
+    if (this.stickDrag || this.bodyDrag || newVal === this.width) {
+      return;
     }
 
-    @Watch('h', { immediate: false, deep: false })
-    onH(newVal: number, oldVal: number) {
-      if (this.stickDrag || this.bodyDrag || (newVal === this.height)) {
-        return;
-      }
+    const stick = "mr";
+    const delta = oldVal - newVal;
 
-      const stick = 'bm';
-      const delta = oldVal - newVal;
+    this.stickDown(
+      stick,
+      { pageX: this.right, pageY: this.top + this.height / 2 },
+      true
+    );
+    this.stickMove({ x: delta, y: 0 });
 
-      this.stickDown(stick, { pageX: this.left + (this.width / 2), pageY: this.bottom }, true);
-      this.stickMove({ x: 0, y: delta });
+    this.$nextTick(() => {
+      this.stickUp();
+    });
+  }
 
-      this.$nextTick(() => {
-        this.stickUp();
-      });
+  @Watch("h", { immediate: false, deep: false })
+  onH(newVal: number, oldVal: number) {
+    if (this.stickDrag || this.bodyDrag || newVal === this.height) {
+      return;
     }
 
-    @Watch('parentW', { immediate: false, deep: false })
-    onParentW(val: number) {
-      this.right = val - this.width - this.left;
-      this.parentWidth = val;
-    }
+    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 });
 
-    @Watch('parentH', { immediate: false, deep: false })
-    onParentH(val: number) {
-      this.bottom = val - this.height - this.top;
-      this.parentHeight = val;
-    }
+    this.$nextTick(() => {
+      this.stickUp();
+    });
+  }
 
+  @Watch("parentW", { immediate: false, deep: false })
+  onParentW(val: number) {
+    this.right = val - this.width - this.left;
+    this.parentWidth = val;
   }
 
-  // 待实现功能:
-  // 1. 移动时与其他组件对齐
-  // 2. 通过键盘上下左右移动
+  @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>
+@import "index.less";
+</style>