emacroh5lib 1.0.78 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.78",
+  "version": "1.0.79",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js",
   "scripts": {

package/src/index.ts

@@ -6,11 +6,12 @@ import FileViewer from './views/FileViewer/index.vue'
 import ImageViewer from './views/ImageViewer/index.vue'
 import VideoViewer from './views/VideoViewer/index.vue'
 import ModelViewer from './views/ModelViewer/index.vue'
+import HtmlViewer from './views/HtmlViewer/index.vue'
 import DragResizeView from './views/DragResizeView/index.vue'
 import DragView from './views/Draw/index.vue'
 import MessageBoxTest from "@/components/MessageBoxTest";
 
-const components = [FileViewer, ImageViewer, VideoViewer, DragResizeView, ModelViewer];
+const components = [FileViewer, ImageViewer, VideoViewer, DragResizeView, ModelViewer, HtmlViewer];
 
 const install = (Vue: any) => {
   if ((install as any).installed) return;
@@ -33,4 +34,4 @@ if (typeof window !== 'undefined' && (window as any).Vue) {
 
 
 export default {}
-export { EMacro, FileViewer, ImageViewer, VideoViewer, ModelViewer, DragResizeView }
+export { EMacro, FileViewer, ImageViewer, VideoViewer, ModelViewer, DragResizeView, HtmlViewer }

package/src/views/HtmlViewer/index.vue

@@ -0,0 +1,357 @@
+<template>
+  <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
+    <div class="duo-viewer-mask" >
+      <div id="viewer" class="duo-viewer-mask__image" :style="viewerStyle()">
+        <iframe :onload='onload()' :src="currentWebsite" ref="microApp" id='micro-app' height="100%" width="100%"
+          frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" seamless
+          allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
+      </div>
+    </div>
+    <div class="duo-viewer-footer" v-if="showThumbnail">
+      <div class="duo-viewer-footer__title">{{ realName }}</div>
+      <div class="duo-viewer-footer__toolbar">
+        <ul>
+          <li class="duo-viewer-footer__zoom-in" data-viewer-action="zoom-in"></li>
+          <li class="duo-viewer-footer__zoom-out" data-viewer-action="zoom-out"></li>
+          <li class="duo-viewer-footer__one-to-one" data-viewer-action="one-to-one"></li>
+          <li class="duo-viewer-footer__prev" data-viewer-action="prev"></li>
+
+          <li class="duo-viewer-footer__play" data-viewer-action="play"></li>
+
+          <li class="duo-viewer-footer__next" data-viewer-action="next"></li>
+          <li class="duo-viewer-footer__reset" data-viewer-action="reset"></li>
+          <li class="duo-viewer-footer__rotate-left" data-viewer-action="rotate-left"></li>
+          <li class="duo-viewer-footer__rotate-right" data-viewer-action="rotate-right"></li>
+        </ul>
+      </div>
+      <div class="duo-viewer-footer__navbar">
+        <div class="duo-viewer-footer__navbar-thumbnail-wrap">
+          <div ref="duoViewerImageThumbnailList" class="duo-viewer-footer__navbar-thumbnail-list"
+            :style="{ width: `${listLength * 34}px` }">
+            <div :key="item + i" v-for="(item, i) in list" :class="
+                    i === index
+                      ? 'duo-viewer-footer__navbar-thumbnail-item viewer-current'
+                      : 'duo-viewer-footer__navbar-thumbnail-item'
+                  ">
+              <img data-viewer-action="select" :data-viewer-action-index="i" :src="getModelImg(item, i)" :alt="alt"
+                class="duo-viewer-footer__navbar-thumbnail-image" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="duo-viewer-close" @click="handleClose">
+      <div class="duo-viewer-close__off"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import * as THREE from "three";
+  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+  import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+  import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+  import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
+  import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
+  import { Line2 } from 'three/examples/jsm/lines/Line2'
+  import { CSS2DObject, CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
+  import { AsciiEffect } from "three/examples/jsm/effects/AsciiEffect.js";
+  // import TWEEN from "@tweenjs/tween.js";
+  // import Stats from "stats.js";
+  // import * as dat from "dat.gui";
+
+  export default {
+    name: "ModelViewer",
+    data() {
+      return {
+        viewerSrc: "",
+        image: null,
+        index: 0,
+        imgUrl: "",
+        isCreatePoster: false,
+        gl: {
+          scene: null,
+          renderer: null,
+          camera: null,
+          controls: null,
+          geometry: null,
+          isRotate: false,
+          isMove: false,
+          startEvent: null,
+          WebGLoutput: null,
+          animationFrame: null
+        }
+      };
+    },
+    props: {
+      list: {
+        type: [Array, String],
+        default: () => [],
+      },
+      // Control is show of viewer
+      show: {
+        type: Boolean,
+        default: false,
+      },
+      // Default index
+      currentIndex: {
+        type: Number,
+        default: 0,
+      },
+      width: {
+        type: String,
+        default: "80%",
+      },
+      height: {
+        type: String,
+        default: "80%",
+      },
+      showThumbnail: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    computed: {
+      listLength() {
+        return this.list.length;
+      },
+      realName() {
+        return this.list[this.index].name;
+      },
+      currentWebsite() {
+        if (typeof this.list === "string")
+          return this.list
+        return this.list[this.index].src;
+      }
+    },
+    watch: {
+      show(val) {
+        if (val) {
+          this.$emit("open");
+          this.index = this.currentIndex;
+          this.init();
+        } else {
+          this.$emit("close");
+        }
+      },
+    },
+    mounted() {
+
+    },
+    methods: {
+      viewerStyle() {
+        return `width:${this.width};height:${this.height};`;
+      },
+      getModelImg(item) {
+
+      },
+      onload() {
+        console.log("加载完毕...");
+      },
+      // Global init
+      init() {
+        console.log("你好");
+        //   this.initMouseWheel();
+        this.keydown();
+      },
+
+      // Next or prev action
+      switchAction(a) {
+        let lastIndex = this.index;
+        switch (a) {
+          case "prev":
+            // prev action
+            this.index += this.index <= 0 ? 0 : -1;
+            break;
+          case "next": {
+            // next action
+            let srcListLength = this.listLength - 1;
+
+            this.index +=
+              this.index >= srcListLength ? srcListLength - this.index : 1;
+          }
+            break;
+          default:
+            this.index = +a;
+            break;
+        }
+        this.judgeThumbnailListMove(lastIndex, this.index);
+
+      },
+      // To judge thumbnail list move
+      judgeThumbnailListMove(lastIndex, index) {
+        if (lastIndex == index) return;
+
+        let translateX = 0,
+          lastTransform = 0,
+          step = index - lastIndex,
+          move = step * 34,
+          length = this.listLength,
+          target = this.$refs["duoViewerImageThumbnailList"];
+
+        if (!target) return;
+
+        lastTransform = this.getCurrentTransform(target);
+
+        if (lastTransform) {
+          translateX = Math.abs(+lastTransform.translateX);
+        }
+
+        this.setTransform(target, {
+          scaleX: "1",
+          skewY: "0",
+          translateX: `-${translateX + move}px`,
+          translateY: "0%",
+          rotate: "0deg",
+        });
+      },
+
+
+      // FullScreen action
+      requestFullScreen() {
+
+
+
+        const isFullScreen = document.fullscreenElement
+
+        if (isFullScreen) {
+
+          if (document.exitFullscreen) {
+            document.exitFullscreen()
+          } else if (document.msExitFullscreen) {
+            document.msExitFullscreen()
+          } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+          } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen()
+          }
+
+        } else {
+          let element = this.$refs["duoViewer"],
+            requestMethod =
+              element.requestFullScreen ||
+              element.webkitRequestFullScreen ||
+              element.mozRequestFullScreen ||
+              element.msRequestFullScreen;
+
+          if (requestMethod) {
+            requestMethod.call(element);
+          }
+        }
+
+        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
+
+      },
+
+      // Keydown action
+      keydown() {
+        window.addEventListener("keydown", (e) => {
+          e = event || window.event
+
+          if (e && e.keyCode == 40) {
+            // down
+            this.zoom("out");
+          }
+          if (e && e.keyCode == 37) {
+            // left
+            this.switchAction("prev");
+          }
+          if (e && e.keyCode == 39) {
+            // right
+            this.switchAction("next");
+          }
+          if (e && e.keyCode == 38) {
+            // up
+            this.zoom("in");
+          }
+          if (e && e.keyCode == 27) {
+            // esc
+            this.handleClose()
+          }
+        });
+      },
+
+      // Init mouse wheel event
+      initMouseWheel() {
+        const scrollFn = (e) => {
+          e = e || window.event;
+          if (e.wheelDelta) {
+            // for IE/Google
+            if (e.wheelDelta > 0) {
+              this.zoom("out");
+            }
+            if (e.wheelDelta < 0) {
+              this.zoom("in");
+            }
+          } else if (e.detail) {
+            // for Firefox
+            if (e.detail > 0) {
+              this.zoom("out");
+            }
+            if (e.detail < 0) {
+              this.zoom("in");
+            }
+          }
+        };
+
+        document.addEventListener &&
+          document.addEventListener("DOMMouseScroll", scrollFn, false);
+        window.onmousewheel = document.onmousewheel = scrollFn;
+      },
+
+      // Agent
+      clickAgent(e) {
+        switch (e.target.getAttribute("data-viewer-action")) {
+          case "zoom-in":
+            this.zoom("in");
+            break;
+          case "zoom-out":
+            this.zoom("out");
+            break;
+          case "one-to-one":
+            this.resetZoom();
+            break;
+          case "prev":
+            this.switchAction("prev");
+            break;
+          case "play":
+            this.requestFullScreen();
+            break;
+          case "next":
+            this.switchAction("next");
+            break;
+          case "reset":
+            this.resetAll();
+            break;
+          case "select":
+            this.switchAction(e.target.getAttribute("data-viewer-action-index"));
+            break;
+          case "rotate-left":
+            this.rotate("left");
+            break;
+          case "rotate-right":
+            this.rotate("right");
+            break;
+        }
+      },
+      // On close
+      handleClose() {
+
+        cancelAnimationFrame(this.gl.animationFrame)
+
+        const keys = Object.keys(this.gl)
+        for (let i = 0; i < keys.length; i++) {
+          this.gl[keys[i]] = null
+        }
+        this.$emit("update:show", false);
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import "./style/css/index.css";
+  /* @import "./style/css/index.less"; */
+</style>

package/src/views/HtmlViewer/style/css/index.css

@@ -0,0 +1,190 @@
+.duo-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  width: 100%;
+  height: 100vh;
+}
+.duo-viewer-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9;
+  display: flex;
+  justify-content: center;
+  align-items: center; 
+}
+.duo-viewer-mask__image {
+  cursor: grab;
+  /* height: 80%; 
+  width: 80%; */
+  position: absolute; 
+  /* top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); */
+  z-index: 8;
+  /* transition-property: transform, height, width; */
+  transition-duration: 0.3s, 0.3s, 0.3s;
+}
+.duo-viewer-footer {
+  position: absolute;
+  text-align: center;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+.duo-viewer-footer__title {
+  color: #cfcfcf;
+  position: absolute;
+  bottom: 95px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  z-index: 10;
+  width: 100%;
+}
+.duo-viewer-footer__toolbar {
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  z-index: 10;
+}
+.duo-viewer-footer__toolbar li {
+  margin: 2px;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  cursor: pointer;
+  float: left;
+  height: 28px;
+  overflow: hidden;
+  -webkit-transition: background-color 0.15s;
+  transition: background-color 0.15s;
+  width: 28px;
+  position: relative;
+}
+.duo-viewer-footer__toolbar li::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: "";
+  display: inline-block;
+  background: url("../images/icons.png") no-repeat;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__zoom-in::after {
+  background-position: 4px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__zoom-out::after {
+  background-position: -16px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__one-to-one::after {
+  background-position: -35px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__reset::after {
+  background-position: -56px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__prev::after {
+  background-position: -77px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__play {
+  width: 34px;
+  height: 34px;
+  margin-top: -2px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__play::after {
+  background-position: -93px 6px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__next::after {
+  background-position: -116px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__rotate-left::after {
+  background-position: -136px 3px;
+}
+.duo-viewer-footer__toolbar li.duo-viewer-footer__rotate-right::after {
+  background-position: -156px 3px;
+}
+.duo-viewer-footer__navbar {
+  width: 100%;
+  height: 50px;
+  background: rgba(0, 0, 0, 0.9);
+  overflow: hidden;
+}
+.duo-viewer-footer__navbar-thumbnail-image {
+  height: 100%;
+  width: 80px;
+  -o-object-fit: fill;
+  object-fit: fill;
+  transform: translateX(-30px);
+}
+.duo-viewer-footer__navbar-thumbnail-item {
+  margin: 0 2px;
+  color: transparent;
+  cursor: pointer;
+  float: left;
+  font-size: 0;
+  width: 30px;
+  opacity: 0.2;
+  overflow: hidden;
+  -webkit-transition: opacity 0.15s;
+  transition: opacity 0.15s;
+}
+.duo-viewer-footer__navbar-thumbnail-item.viewer-current {
+  opacity: 0.9;
+}
+.duo-viewer-footer__navbar-thumbnail-wrap {
+  position: relative;
+  overflow: hidden;
+  width: 660px;
+  height: inherit;
+  margin: 0 auto;
+}
+.duo-viewer-footer__navbar-thumbnail-list {
+  padding: 10px 0;
+  width: auto;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transition: all 0.3s;
+}
+.duo-viewer-close {
+  background-color: rgba(0, 0, 0, 0.9);
+  border-radius: 0% 0% 0% 100%;
+  cursor: pointer;
+  height: 50px;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: background-color 0.15s;
+  width: 50px;
+  z-index: 10;
+  line-height: 50px;
+  text-align: center;
+}
+.duo-viewer-close__off {
+  margin: 18px 12px;
+  position: relative;
+  width: 2em;
+  height: 0.3em;
+  background-color: #fff;
+  transform: rotate(45deg);
+  border-radius: 0.15em;
+}
+.duo-viewer-close__off:after {
+  content: "";
+  position: absolute;
+  width: 2em;
+  height: 0.3em;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  transform: rotate(90deg);
+  border-radius: 0.15em;
+}