emacroh5lib 1.0.15 → 1.0.19

package/src/views/DragResizeViewJs/index.vue

@@ -0,0 +1,3 @@
+<template src="./vue-drag-resize.html"></template>
+<script src="./vue-drag-resize.js"></script>
+<style src="./vue-drag-resize.css"></style>

package/src/views/Draw/index.less

@@ -0,0 +1,98 @@
+.vdr {
+  // width: 100%;
+  // height: 100%;
+  background-color: transparent;
+  position: absolute;
+}
+ 
+.vdr.active:before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  outline: 1px dashed #d6d6d6;
+
+  
+}
+
+.vdr-stick {
+  box-sizing: border-box;
+  position: absolute;
+  font-size: 1px;
+  background: #ffffff;
+  border: 2px solid #6c6c6c;
+  box-shadow: 0 0 2px #bbb;
+  pointer-events: visible;
+}
+
+.inactive .vdr-stick {
+  display: none; 
+}
+
+.vdr-stick-tl,
+.vdr-stick-br {
+  cursor: nwse-resize;
+}
+
+.vdr-stick-tm,
+.vdr-stick-bm {
+  left: 50%;
+  cursor: ns-resize;
+}
+
+.vdr-stick-tr,
+.vdr-stick-bl {
+  cursor: nesw-resize;
+}
+
+.vdr-stick-ml,
+.vdr-stick-mr {
+  top: 50%;
+  cursor: ew-resize;
+}
+
+.vdr-stick.not-resizable {
+  display: none;
+}
+
+.content-container {
+  display: block;
+  position: relative;
+}
+
+
+.tl{
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  width: 4px !important;
+  height: 4px !important;
+  background-color: #f00;
+  pointer-events: visible; 
+  cursor: nwse-resize;
+}
+
+.lm{
+  position: absolute;
+  top: calc(50% - 2px);
+  left: -2px;
+  width: 4px !important;
+  height: 4px !important;
+  background-color: #fff;
+  pointer-events: visible;
+  cursor: ew-resize;
+}
+
+.lb{
+  position: absolute;
+  bottom: -2px;
+  left: -2px;
+  width: 4px !important;
+  height: 4px !important;
+  background-color: #f00;
+  pointer-events: visible;
+  cursor: nesw-resize;
+}

package/src/views/Draw/index.vue

@@ -0,0 +1,429 @@
+<template>
+  <div class="vdr" :style="containerStyle">
+
+
+    <slot>
+    </slot>
+
+    <div ref="sticks" :style="sticksStyle">
+      <div class="tl"></div>
+      <div class="lm"></div>
+      <div class="lb"></div>
+    </div>
+
+
+  </div>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+
+  const styleMapping: any = {
+    y: {
+      t: 'top',
+      m: 'marginTop',
+      b: 'bottom',
+    },
+    x: {
+      l: 'left',
+      m: 'marginLeft',
+      r: 'right',
+    },
+  };
+
+  function addEvents(events: any) {
+    events.forEach((cb: any, eventName: string) => {
+      document.documentElement.addEventListener(eventName, cb);
+    });
+  }
+
+  @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;
+      };
+    }
+
+    get containerStyle() {
+      return {
+        top: this.top + 'px',
+        left: this.left + 'px',
+        boxSizing: "border-box",
+        position: "absolute",
+      };
+    }
+
+    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() {
+
+      // 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]);
+
+        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;
+
+
+
+      document.addEventListener("mousemove", (e) => {
+
+        if (!this.active)
+          return
+
+        e.stopPropagation()
+
+
+        // this.active = false
+
+        // console.log("mousemove pageX", e.pageX);
+        // console.log("mousemove", start);
+
+        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)
+
+        start.x = e.pageX
+        start.y = e.pageY
+
+
+        // console.log("t", this.$slots.default[0].elm.style);
+
+      })
+      document.addEventListener("mousedown", (e) => {
+
+        console.log("mousedown", e);
+        this.active = true
+
+
+        // if (typeof e.stopPropagation !== 'undefined') {
+        //   e.stopPropagation();
+        // }
+
+        // if (typeof e.preventDefault !== 'undefined') {
+        //   e.preventDefault();
+        // }
+
+        start.x = e.pageX;
+        start.y = e.pageY;
+      })
+      document.addEventListener("mouseleave", (e) => {
+
+        console.log("mouseleave", e);
+        // this.active = false
+      })
+      document.addEventListener("mouseup", (e) => {
+
+        console.log("mouseleave", e);
+        this.active = false
+      })
+
+      // console.log("父元素", this.$slots.default[0].elm);
+
+      this.left = this.x;
+      this.top = this.y;
+      this.right = this.parentWidth - (this.w === 'auto' ? (this.$refs.container as HTMLElement).scrollWidth : this.w) - this.left;
+      this.bottom = this.parentHeight - (this.h === 'auto' ? (this.$refs.container as HTMLElement).scrollHeight : this.h) - this.top;
+
+      // this.domEvents = new Map([
+      //   ['mousemove', this.move],
+      //   ['mouseup', this.up],
+      //   ['mouseleave', this.up],
+      //   ['mousedown', this.deselect],
+      //   ['touchmove', this.move],
+      //   ['touchend', this.up],
+      //   ['touchcancel', this.up],
+      //   ['touchstart', this.up],
+      // ]);
+
+      // addEvents(this.domEvents);
+
+      if (this.dragHandle) {
+        [...this.$el.querySelectorAll(this.dragHandle)].forEach((dragHandle) => {
+          dragHandle.setAttribute('data-drag-handle', this._uid);
+        });
+      }
+
+      if (this.dragCancel) {
+        [...this.$el.querySelectorAll(this.dragCancel)].forEach((cancelHandle) => {
+          cancelHandle.setAttribute('data-drag-cancel', this._uid);
+        });
+      }
+
+      if (this.name.trim() !== '' && this.isStorage) {
+        let info = JSON.parse(localStorage.getItem("DragResizeView_Rect_" + this.name) as string)
+        if (info !== null
+          && info.left !== null && info.top !== null
+          && info.right !== null && info.bottom !== null) {
+          this.left = info.left
+          this.top = info.top
+          this.right = info.right
+          this.bottom = info.bottom
+        } else {
+          localStorage.removeItem("DragResizeView_Rect_" + this.name)
+        }
+      }
+    }
+
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index.less";
+</style>

package/src/views/TestView/index.less

@@ -12,6 +12,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  background-color: red;
 }
 
 .list {
@@ -22,4 +23,14 @@
   right: 300px;
   box-shadow: 0 0 2px #AAA;
   background-color: white;
+}
+
+.filler2 {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: red;
 }

package/src/views/TestView/index.vue

@@ -22,6 +22,10 @@
 
     </div>
 
+    <Draw>
+      <div class="filler2">111</div>
+    </Draw>
+
 
   </div>
 </template>
@@ -30,6 +34,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import ImageViewer from "@/views/ImageViewer/index.vue";
 import DragResizeView from "@/views/DragResizeView/index.vue";
+import Draw from "@/views/Draw/index.vue";
 
 import { formatJson, export_json_to_excel, number_to_excel, testToExcel } from "./Export2Excel"
 
@@ -40,7 +45,8 @@ import LAY_EXCEL from 'lay-excel';
 @Component({
   components: {
     ImageViewer,
-    DragResizeView
+    DragResizeView,
+    Draw
   },
   mounted() {
 

package/tsconfig.json

@@ -5,13 +5,13 @@
     "sourceMap": true, // 是否生成sourceMap（用于浏览器调试）
     "noImplicitAny": false,
     "noUnusedLocals": false,
-    "noUnusedParameters": true,
+    "noUnusedParameters": false,
     "declaration": true, // 是否生成声明文件
     "declarationDir": "./dist/types/", // 声明文件打包的位置
     "declarationMap": false, // 是否生成声明文件map文件（便于调试）
     "moduleResolution": "node",
     "module": "esnext",
-    "target": "esnext", // 转化成的目标语言
+    "target": "es6", // 转化成的目标语言
     "baseUrl": "./",
     "strict": true,
     "jsx": "preserve", 
@@ -20,7 +20,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true, 
+    "useDefineForClassFields": true,  
     "types": [
       "node",
       "webpack-env",

package/webpack.config.js

@@ -35,6 +35,7 @@ const config = {
     open: true,
     host: "localhost",
   },
+  optimization: { sideEffects: true },
   externals: {
     './cptable': 'var cptable'
   },
@@ -76,7 +77,8 @@ const config = {
       },
       {
         test: /\.less$/i,
-        use: [stylesHandler, "css-loader", "postcss-loader", "less-loader"],
+        use: ['style-loader', 'css-loader', 'less-loader'],
+        // use: [stylesHandler, "css-loader", "postcss-loader", "less-loader"], // 会丢失样式
       },
       {
         test: /\.css$/i,

package/src/views/DragResizeViewTs/index.vue

@@ -1,3 +0,0 @@
-<template src="./vue-drag-resize.html"></template>
-<script src="./vue-drag-resize.ts"></script>
-<style src="./vue-drag-resize.css"></style>

package/src/views/DragResizeViewTs/vue-drag-resize.html

@@ -1,17 +0,0 @@
-<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>