emacroh5lib 1.0.14 → 1.0.18

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,423 @@
+<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;
+
+
+
+    this.slot.addEventListener("mousemove", (e) => {
+
+      if (!this.active)
+        return
+
+      // 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);
+
+    })
+    this.slot.addEventListener("mousedown", (e) => {
+
+      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) => {
+
+      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 {

package/src/views/TestView/index.vue

@@ -10,15 +10,15 @@
 
     <div class="list" id="list">
 
-      <DragResizeView v-for="(rect, index) in rects" :key="index" :isStorage="true" :name="rect.name" :w="rect.width" :h="rect.height"
+      <DragResizeViewTs v-for="(rect, index) in rects" :key="index" :isStorage="true" :name="rect.name" :w="rect.width" :h="rect.height"
         :x="rect.left" :y="rect.top" :parentW="listWidth" :parentH="listHeight" :axis="rect.axis"
         :isActive="rect.active" :minw="rect.minw" :minh="rect.minh" :isDraggable="rect.draggable"
         :isResizable="rect.resizable" :parentLimitation="rect.parentLim" :snapToGrid="rect.snapToGrid"
         :aspectRatio="rect.aspectRatio" :z="rect.zIndex" :contentClass="rect.class" v-on:activated="activateEv(index)"
         v-on:deactivated="deactivateEv(index)" v-on:dragging="changePosition($event, index)"
         v-on:resizing="changeSize($event, index)">
-        <div class="filler" :style="{ backgroundColor: rect.color }"></div>
-      </DragResizeView>
+        <div class="filler" :style="{ backgroundColor: rect.color }">dsdsfd</div>
+      </DragResizeViewTs>
 
     </div>
 
@@ -29,7 +29,8 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import ImageViewer from "@/views/ImageViewer/index.vue";
-import DragResizeView from "@/views/DragResizeView/index.vue";
+import DragResizeViewTs from "@/views/DragResizeViewTs/index.vue";
+// import DragResizeViewTs from "@/views/DragResizeView/index.vue";
 
 import { formatJson, export_json_to_excel, number_to_excel, testToExcel } from "./Export2Excel"
 
@@ -40,7 +41,7 @@ import LAY_EXCEL from 'lay-excel';
 @Component({
   components: {
     ImageViewer,
-    DragResizeView
+    DragResizeViewTs
   },
   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", // 转化成的目标语言
+    "module": "es6",
+    "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,