emacroh5lib 1.0.16 → 1.0.20

package/src/views/DragResizeViewTs/index.vue

@@ -1,917 +0,0 @@
-<!-- <template src="./vue-drag-resize.html"></template>
-<script src="./vue-drag-resize.ts"></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 = {
-    y: {
-        t: 'top',
-        m: 'marginTop',
-        b: 'bottom',
-    },
-    x: {
-        l: 'left',
-        m: 'marginLeft',
-        r: 'right',
-    },
-};
-
-function addEvents(events) {
-    events.forEach((cb, eventName) => {
-        document.documentElement.addEventListener(eventName, cb);
-    });
-}
-
-function removeEvents(events) {
-    events.forEach((cb, eventName) => {
-        document.documentElement.removeEventListener(eventName, cb);
-    });
-}
-
-@Component({ name: 'DragResizeViewTs' })
-export default class DragResizeViewTs extends Vue {
-
-    @Prop({
-        type: String,
-        required: false,
-        default: ''
-    }) name;
-
-
-    @Prop({ type: Number, default: 8 }) stickSize;
-    @Prop({ type: Number, default: 1 }) parentScaleX;
-    @Prop({ type: Number, default: 1 }) parentScaleY;
-    @Prop({ type: Boolean, default: false, }) isActive;
-    @Prop({ type: Boolean, default: false, }) preventActiveBehavior;
-    @Prop({ type: Boolean, default: true, }) isDraggable;
-    @Prop({ type: Boolean, default: true, }) isResizable;
-    @Prop({ type: Boolean, default: false, }) aspectRatio;
-    @Prop({
-        type: Boolean, default: false,
-    }) parentLimitation;
-    @Prop({
-        type: Boolean, default: false,
-    }) snapToGrid;
-
-    @Prop({
-        type: Number,
-        default: 50,
-        validator(val) {
-            return val >= 0;
-        },
-    }) gridX;
-
-    @Prop({
-        type: Number,
-        default: 50,
-        validator(val) {
-            return val >= 0;
-        },
-    }) gridY;
-
-    @Prop({
-        type: Number,
-        default: 0,
-        validator(val) {
-            return val >= 0;
-        },
-    }) parentW;
-
-    @Prop({
-        type: Number,
-        default: 0,
-        validator(val) {
-            return val >= 0;
-        },
-    }) parentH;
-
-    @Prop({
-        type: [String, Number],
-        default: 200,
-        validator(val) {
-            return (typeof val === 'string') ? val === 'auto' : val >= 0;
-        },
-    }) w;
-
-    @Prop({
-        type: [String, Number],
-        default: 200,
-        validator(val) {
-            return (typeof val === 'string') ? val === 'auto' : val >= 0;
-        },
-    }) h;
-
-    @Prop({
-        type: Number,
-        default: 50,
-        validator(val) {
-            return val >= 0;
-        },
-    }) minw;
-
-    @Prop({
-        type: Number,
-        default: 50,
-        validator(val) {
-            return val >= 0;
-        },
-    }) minh;
-
-    @Prop({
-        type: Number,
-        default: 0,
-        validator(val) {
-            return typeof val === 'number';
-        },
-    }) x;
-
-    @Prop({
-        type: Number,
-        default: 0,
-        validator(val) {
-            return typeof val === 'number';
-        },
-    }) y;
-    @Prop({
-        type: [String, Number],
-        default: 'auto',
-        validator(val) {
-            return (typeof val === 'string') ? val === 'auto' : val >= 0;
-        },
-    }) z;
-    @Prop({
-        type: String,
-        default: null,
-    }) dragHandle;
-
-    @Prop({
-        type: String,
-        default: null,
-    }) dragCancel;
-
-    @Prop({
-        type: Array,
-        default() {
-            return ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'];
-        },
-    }) sticks;
-
-    @Prop({
-        type: String,
-        default: 'both',
-        validator(val) {
-            return ['x', 'y', 'both', 'none'].indexOf(val) !== -1;
-        },
-    }) axis;
-
-    @Prop({
-        type: String,
-        required: false,
-        default: '',
-    }) contentClass;
-
-    @Prop({
-        type: Boolean,
-        required: false,
-        default: false
-    }) isStorage;
-
-    public emits = ['clicked', 'dragging', 'dragstop', 'resizing', 'resizestop', 'activated', 'deactivated']
-
-    public fixAspectRatio = null
-    public active = false
-    public zIndex = 1;
-    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() {
-        console.log("测试");
-
-        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_Info_" + 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_Info_" + this.name)
-            }
-        }
-    }
-
-    beforeDestroy() {
-        removeEvents(this.domEvents);
-    }
-
-    deselect() {
-        if (this.preventActiveBehavior) {
-            return;
-        }
-        this.active = false;
-    }
-
-    move(ev) {
-        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) {
-        if (this.stickDrag) {
-            this.stickUp();
-        } else if (this.bodyDrag) {
-            this.bodyUp();
-        }
-
-    }
-
-
-    bodyDown(ev) {
-        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) {
-        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 }));
-
-        console.log("宽高异常", this.rect);
-
-        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, ev, 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, pointerY }) {
-        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) {
-        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, current) {
-        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) {
-        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) {
-        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"
-        }
-
-        const info = { "left": this.rect.left, "top": this.rect.top, "right": this.right, "bottom": this.bottom }
-        localStorage.setItem("DragResizeView_Info_" + this.name, JSON.stringify(info))
-    }
-
-    get positionStyle() {
-        console.log("绑定");
-
-        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) => {
-            const stickStyle = {
-                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() {
-        console.log("宽高获取1A", this);
-        console.log("宽高获取1", this.parentWidth);
-        console.log("宽高获取2", this.left);
-        console.log("宽高获取3", this.right);
-
-        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('isActive', { immediate: false, deep: false })
-    onActive(isActive) {
-        if (isActive) {
-            this.$emit('activated');
-        } else {
-            this.$emit('deactivated');
-        }
-    }
-
-    @Watch('isActive', { immediate: true, deep: false })
-    onIsActive(val) {
-        this.active = val;
-    }
-
-    @Watch('z', { immediate: true, deep: false })
-    onZ(val) {
-        if (val >= 0 || val === 'auto') {
-            this.zIndex = val;
-        }
-    }
-
-    @Watch('x', { immediate: false, deep: false })
-    onX(newVal, oldVal) {
-        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, oldVal) {
-        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, oldVal) {
-        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, oldVal) {
-        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) {
-        this.right = val - this.width - this.left;
-        this.parentWidth = val;
-    }
-
-
-    @Watch('parentH', { immediate: false, deep: false })
-    onParentH(val) {
-        this.bottom = val - this.height - this.top;
-        this.parentHeight = val;
-    }
-
-}
-
-</script>
-
-<style lang="less" scoped>
-@import "index.less";
-</style>