emacroh5lib 1.0.18 → 1.0.21

package/src/views/Draw/index.vue

@@ -6,14 +6,9 @@
     </slot>
 
     <div ref="sticks" :style="sticksStyle">
-
-
-
       <div class="tl"></div>
       <div class="lm"></div>
       <div class="lb"></div>
-
-
     </div>
 
 
@@ -21,403 +16,414 @@
 </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);
-  });
-}
-
-@Component({
-  components: {}
-})
-export default class DrawView extends Vue {
-
-  @Prop({
-    type: String,
-    required: false,
-    default: ''
-  }) name!: string;
-
-
-  //#region
-
-
-  @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;
+  import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 
-  @Prop({
-    type: Number,
-    default: 50,
-    validator(val) {
-      return val >= 0;
+  const styleMapping: any = {
+    y: {
+      t: 'top',
+      m: 'marginTop',
+      b: 'bottom',
     },
-  }) gridY!: number;
-
-  @Prop({
-    type: Number,
-    default: 0,
-    validator(val) {
-      return val >= 0;
+    x: {
+      l: 'left',
+      m: 'marginLeft',
+      r: 'right',
     },
-  }) parentW!: number;
+  };
 
-  @Prop({
-    type: Number,
-    default: 0,
-    validator(val) {
-      return val >= 0;
-    },
-  }) parentH!: number;
+  function addEvents(events: any) {
+    events.forEach((cb: any, eventName: string) => {
+      document.documentElement.addEventListener(eventName, cb);
+    });
+  }
 
-  @Prop({
-    type: [String, Number],
-    default: 200,
-    validator(val) {
-      return (typeof val === 'string') ? val === 'auto' : val >= 0;
-    },
-  }) w!: any;
+  @Component({
+    components: {}
+  })
+  export default class DrawView extends Vue {
+
+    @Prop({
+      type: String,
+      required: false,
+      default: ''
+    }) name!: string;
+
+
+    //#region
+
+
+    @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 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;
+
+    public slot!: HTMLElement;
+
+    width = 10
+    height = 10
+
+    //#endregion
+
+
+    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;
+      };
+    }
 
-  @Prop({
-    type: [String, Number],
-    default: 200,
-    validator(val) {
-      return (typeof val === 'string') ? val === 'auto' : val >= 0;
-    },
-  }) h!: any;
+    get containerStyle() {
+      return {
+        top: this.top + 'px',
+        left: this.left + 'px',
+        boxSizing: "border-box",
+        position: "absolute",
+      };
+    }
 
-  @Prop({
-    type: Number,
-    default: 50,
-    validator(val) {
-      return val >= 0;
-    },
-  }) minw!: number;
+    get sticksStyle() {
+
+      return {
+        top: '0px',
+        left: '0px',
+        zIndex: 0,
+        boxSizing: "border-box",
+        position: "relative",
+        width: this.width + 'px',
+        height: this.height + 'px',
+        pointerEvents: "none"
+      };
+    }
 
-  @Prop({
-    type: Number,
-    default: 50,
-    validator(val) {
-      return val >= 0;
-    },
-  }) minh!: number;
+    // get contentStyle(){
+    //   return {
+    //     top: this.top + 'px',
+    //     left: this.left + 'px',
+    //     zIndex: this.zIndex,
+    //     position: "absolute",
+    //     boxSizing: "border-box",
+    //     width: this.width + "px",
+    //     height: this.height + "px",
+    //   };
+    // }
 
-  @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 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;
-
-  public slot!: HTMLElement;
-
-  width = 10
-  height = 10
-
-  //#endregion
-
-
-  get vdrStick() {
-    return (stick: any) => {
-      const stickStyle: any = {
-        width: `${this.stickSize / this.parentScaleX}px`,
-        height: `${this.stickSize / this.parentScaleY}px`
+    beforeCreate() {
+      this.stickDrag = false;
+      this.stickDrag = false;
+      this.bodyDrag = 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 },
       };
-      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 containerStyle() {
-    return {
-      top: this.top + 'px',
-      left: this.left + 'px',
-      boxSizing: "border-box",
-      position: "absolute",
-    };
-  }
+      this.currentStick = null;
+    }
 
-  get sticksStyle() {
-
-    return {
-      top: '0px',
-      left: '0px',
-      zIndex: 0,
-      boxSizing: "border-box",
-      position: "relative",
-      width: this.width + 'px',
-      height: this.height + 'px',
-      pointerEvents: "none"
-    };
-  }
 
-  // get contentStyle(){
-  //   return {
-  //     top: this.top + 'px',
-  //     left: this.left + 'px',
-  //     zIndex: this.zIndex,
-  //     position: "absolute",
-  //     boxSizing: "border-box",
-  //     width: this.width + "px",
-  //     height: this.height + "px",
-  //   };
-  // }
-
-
-
-  beforeCreate() {
-    this.stickDrag = false;
-    this.stickDrag = false;
-    this.bodyDrag = 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;
-  }
+    deselect() {
+      // if (this.preventActiveBehavior) {
+      //   return;
+      // }
+      // this.active = true;
+    }
 
+    mounted() {
 
-  deselect() {
-    // if (this.preventActiveBehavior) {
-    //   return;
-    // }
-    // this.active = true;
-  }
+      // this.parentElement = this.$el.parentNode;
+      // this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
+      // this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
 
-  mounted() {
+      this.$nextTick(() => {
+        // console.log("父元素", this.$slots.test);
 
-    // this.parentElement = this.$el.parentNode;
-    // this.parentWidth = this.parentW ? this.parentW : this.parentElement.clientWidth;
-    // this.parentHeight = this.parentH ? this.parentH : this.parentElement.clientHeight;
 
-    this.$nextTick(() => {
-      // console.log("父元素", this.$slots.test);
+        // let style = window.getComputedStyle(this.$slots.default[0].elm, null);
+        // let style = window.getDefaultComputedStyle(this.$slots.default[0].elm, null);
 
+        // console.log("父元素", style);
+        console.log("父元素", this.$slots.default![0]);
 
-      // let style = window.getComputedStyle(this.$slots.default[0].elm, null);
-      // let style = window.getDefaultComputedStyle(this.$slots.default[0].elm, null);
+        this.width = this.slot.clientWidth
+        this.height = this.slot.clientHeight
+        console.log("宽度", this.slot.clientHeight);
 
-      // console.log("父元素", style);
-      console.log("父元素", this.$slots.default![0]);
+      })
 
-      this.width = this.slot.clientWidth
-      this.height = this.slot.clientHeight
-      console.log("宽度", this.slot.clientHeight);
 
-    })
+      let start = { x: 0, y: 0 };
 
+      this.slot = this.$slots.default![0].elm as HTMLElement;
 
-    let start = { x: 0, y: 0 };
 
-    this.slot = this.$slots.default![0].elm as HTMLElement;
 
+      document.addEventListener("mousemove", (e) => {
 
+        if (!this.active)
+          return
 
-    this.slot.addEventListener("mousemove", (e) => {
+        e.stopPropagation()
 
-      if (!this.active)
-        return
 
-      // this.active = false
+        // this.active = false
 
-      // console.log("mousemove pageX", e.pageX);
-      // console.log("mousemove", start);
+        // console.log("mousemove pageX", e.pageX);
+        // console.log("mousemove", start);
 
-      let l = e.pageX - start.x
-      let t = e.pageY - start.y
+        let l = e.pageX - start.x
+        let t = e.pageY - start.y
 
-      this.top = Math.floor(this.top + t)
-      this.left = Math.floor(this.left + l)
+        this.top = Math.floor(this.top + t)
+        this.left = Math.floor(this.left + l)
 
-      start.x = e.pageX
-      start.y = e.pageY
+        start.x = e.pageX
+        start.y = e.pageY
 
 
-      // console.log("t", this.$slots.default[0].elm.style);
+        // console.log("t", this.$slots.default[0].elm.style);
 
-    })
-    this.slot.addEventListener("mousedown", (e) => {
+      })
+      document.addEventListener("mousedown", (e) => {
 
-      console.log("mousedown", e);
-      this.active = true
+        console.log("mousedown", e);
+        this.active = true
 
-      e.stopPropagation();
-      start.x = e.pageX;
-      start.y = e.pageY;
-    })
-    this.slot.addEventListener("mouseleave", (e) => {
 
-      console.log("mouseleave", e);
-      // this.active = false
-    })
-    this.slot.addEventListener("mouseup", (e) => {
+        // if (typeof e.stopPropagation !== 'undefined') {
+        //   e.stopPropagation();
+        // }
 
-      console.log("mouseleave", e);
-      this.active = false
-    })
+        // if (typeof e.preventDefault !== 'undefined') {
+        //   e.preventDefault();
+        // }
 
-    // console.log("父元素", this.$slots.default[0].elm);
+        start.x = e.pageX;
+        start.y = e.pageY;
+      })
+      document.addEventListener("mouseleave", (e) => {
 
-    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;
+        console.log("mouseleave", e);
+        // this.active = false
+      })
+      document.addEventListener("mouseup", (e) => {
 
-    // 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],
-    // ]);
+        console.log("mouseleave", e);
+        this.active = false
+      })
 
-    // addEvents(this.domEvents);
+      // console.log("父元素", this.$slots.default[0].elm);
 
-    if (this.dragHandle) {
-      [...this.$el.querySelectorAll(this.dragHandle)].forEach((dragHandle) => {
-        dragHandle.setAttribute('data-drag-handle', this._uid);
-      });
-    }
+      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;
 
-    if (this.dragCancel) {
-      [...this.$el.querySelectorAll(this.dragCancel)].forEach((cancelHandle) => {
-        cancelHandle.setAttribute('data-drag-cancel', this._uid);
-      });
-    }
+      // this.domEvents = new Map([
+      //   ['mousemove', this.move],
+      //   ['mouseup', this.up],
+      //   ['mouseleave', this.up],
+      //   ['mousedown', this.deselect],
+      //   ['touchmove', this.move],
+      //   ['touchend', this.up],
+      //   ['touchcancel', this.up],
+      //   ['touchstart', this.up],
+      // ]);
+
+      // addEvents(this.domEvents);
+
+      if (this.dragHandle) {
+        [...this.$el.querySelectorAll(this.dragHandle)].forEach((dragHandle) => {
+          dragHandle.setAttribute('data-drag-handle', this._uid);
+        });
+      }
+
+      if (this.dragCancel) {
+        [...this.$el.querySelectorAll(this.dragCancel)].forEach((cancelHandle) => {
+          cancelHandle.setAttribute('data-drag-cancel', this._uid);
+        });
+      }
 
-    if (this.name.trim() !== '' && this.isStorage) {
-      let info = JSON.parse(localStorage.getItem("DragResizeView_Rect_" + this.name) as string)
-      if (info !== null
-        && info.left !== null && info.top !== null
-        && info.right !== null && info.bottom !== null) {
-        this.left = info.left
-        this.top = info.top
-        this.right = info.right
-        this.bottom = info.bottom
-      } else {
-        localStorage.removeItem("DragResizeView_Rect_" + this.name)
+      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)
+        }
       }
     }
-  }
 
-}
+  }
 </script>
 
 <style lang="less" scoped>
-@import "index.less";
-</style>
+  @import "index.less";
+</style>