add Align Ruler for Web (#833)

Web/packages/web/src/feature.js

@@ -4,6 +4,7 @@ import Storage from './plugins/storage/index'
 import DemoPlugin from './plugins/demo-plugin/index'
 import DemoIndependPlugin from './plugins/demo-single-plugin/index'
 import H5DoorPlugin from './plugins/h5-door/index'
+import AlignRuler from './plugins/align-ruler/index'
 import HelloWorld from './components/ToolHelloWorld'
 import Resource from './plugins/resources/index'
 import {IndependPlugin, RouterPlugin} from '@dokit/web-core'
@@ -25,12 +26,8 @@ export const DokitFeatures = {
 
 export const UIFeatures = {
   title: '视觉功能',
-  list: [new RouterPlugin({
-    nameZh: '对齐标尺',
-    name: 'align-ruler',
-    icon: 'https://pt-starimg.didistatic.com/static/starimg/img/a5UTjMn6lO1618997535798.png',
-    component: HelloWorld
-  }), new RouterPlugin({
+  list: [AlignRuler, 
+  new RouterPlugin({
     nameZh: 'UI结构',
     name: 'view-selector',
     icon: 'https://pt-starimg.didistatic.com/static/starimg/img/XNViIWzG7N1618997548483.png',

Web/packages/web/src/plugins/align-ruler/align-ruler.vue

+<template>
+  <div>
+    <div class="ruler-center-bg" :style="centerStyle"></div>
+    <div class="ruler-center-round" :style="centerStyle"></div>
+    <div class="ruler-center-dot" :style="centerStyle"></div>
+    <div class="ruler-line ruler-horizon-line" :style="horizonLineStyle"></div>
+    <div
+      class="ruler-line ruler-vertical-line"
+      :style="verticalLineStyle"
+    ></div>
+    <div class="ruler-info" :style="topInfoStyle">{{ position.top }}</div>
+    <div class="ruler-info" :style="rightInfoStyle">
+      {{ position.right }}
+    </div>
+    <div class="ruler-info" :style="bottomInfoStyle">
+      {{ position.bottom }}
+    </div>
+    <div class="ruler-info" :style="leftInfoStyle">{{ position.left }}</div>
+
+    <InfoBox :position="position" @remove="remove" />
+
+    <div
+      class="ruler-drag-mask"
+      :style="centerStyle"
+      @mousedown="drag"
+      @touchstart="drag"
+    ></div>
+  </div>
+</template>
+
+<script>
+import InfoBox from "./info-box";
+import { removeIndependPlugin } from "@dokit/web-core";
+
+export default {
+  name: "align-ruler",
+  components: {
+    InfoBox,
+  },
+  data() {
+    return {
+      posX: 200,
+      posY: 200,
+      screenWidth: document.documentElement.clientWidth,
+      screenHeight: document.documentElement.clientHeight,
+    };
+  },
+  computed: {
+    position() {
+      return {
+        top: this.posY,
+        left: this.posX,
+        right: this.screenWidth - this.posX,
+        bottom: this.screenHeight - this.posY,
+      };
+    },
+
+    centerStyle() {
+      return {
+        top: this.posY + "px",
+        left: this.posX + "px",
+      };
+    },
+    horizonLineStyle() {
+      return {
+        width: this.screenWidth + "px",
+        top: this.posY + "px",
+      };
+    },
+    verticalLineStyle() {
+      return {
+        height: this.screenHeight + "px",
+        left: this.posX + "px",
+      };
+    },
+    topInfoStyle() {
+      return {
+        top: this.posY / 2 + "px",
+        left: this.posX + "px",
+      };
+    },
+    rightInfoStyle() {
+      return {
+        top: this.posY + "px",
+        left: (this.posX + this.screenWidth) / 2 + "px",
+      };
+    },
+    bottomInfoStyle() {
+      return {
+        top: (this.screenHeight + this.posY) / 2 + "px",
+        left: this.posX + "px",
+      };
+    },
+    leftInfoStyle() {
+      return {
+        top: this.posY + "px",
+        left: this.posX / 2 + "px",
+      };
+    },
+  },
+
+  // 监听浏览器缩放
+  mounted() {
+    window.addEventListener("resize", this.handleResize);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.handleResize);
+  },
+
+  methods: {
+    remove() {
+      removeIndependPlugin("align-ruler");
+    },
+    handleResize(event) {
+      this.screenWidth = document.documentElement.clientWidth;
+      this.screenHeight = document.documentElement.clientHeight;
+      this.posX = this.screenWidth * 0.3;
+      this.posY = this.screenHeight * 0.3;
+    },
+    drag(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      let el = e.target;
+
+      // 算出鼠标相对元素的位置
+      // 兼容触摸和鼠标
+      let startX = e.clientX ? e.clientX : e.touches[0].clientX;
+      let startY = e.clientY ? e.clientY : e.touches[0].clientY;
+      let offsetX = startX - el.offsetLeft;
+      let offsetY = startY - el.offsetTop;
+
+      let update = (X, Y) => {
+        let left = X - offsetX;
+        let top = Y - offsetY;
+
+        this.posX = Math.round(left);
+        this.posY = Math.round(top);
+      };
+
+      let handleMousemove = (e) => {
+        update(e.clientX, e.clientY);
+      };
+
+      let handleTouchmove = (e) => {
+        update(e.touches[0].clientX, e.touches[0].clientY);
+      };
+
+      let removeDragHandle = (e) => {
+        document.removeEventListener("mousemove", handleMousemove);
+        document.removeEventListener("touchmove", handleTouchmove);
+        document.removeEventListener("mouseup", removeDragHandle);
+        document.removeEventListener("touchend", removeDragHandle);
+      };
+
+      document.addEventListener("mousemove", handleMousemove);
+      document.addEventListener("touchmove", handleTouchmove);
+      document.addEventListener("mouseup", removeDragHandle);
+      document.addEventListener("touchend", removeDragHandle);
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+.color {
+  color: #ffffff;
+  color: #cc3a4b;
+  color: #337cc4;
+  color: #cc3a4b30;
+}
+
+.ruler-center-bg {
+  box-sizing: border-box;
+  background-color: rgba(255, 255, 255, 0.392156863);
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  transform: translate(-30px, -30px);
+  border-radius: 30px;
+  border: solid 1px rgba(51, 124, 196, 0.392156863);
+}
+
+.ruler-center-round {
+  background-color: rgba(204, 58, 75, 0.196078431);
+  position: fixed;
+  width: 40px;
+  height: 40px;
+  transform: translate(-20px, -20px);
+  border-radius: 20px;
+}
+
+.ruler-center-dot {
+  background-color: #cc3a4b;
+  position: fixed;
+  width: 6px;
+  height: 6px;
+  transform: translate(-3px, -3px);
+  border-radius: 3px;
+}
+
+.ruler-line {
+  position: fixed;
+  background-color: #cc3a4b;
+}
+
+.ruler-horizon-line {
+  left: 0;
+  height: 1px;
+  transform: translate(0px, -0.5px);
+}
+
+.ruler-vertical-line {
+  top: 0;
+  width: 1px;
+  transform: translate(-0.5px, 0px);
+}
+
+.ruler-info {
+  position: fixed;
+}
+
+.ruler-drag-mask {
+  position: fixed;
+  width: 60px;
+  height: 60px;
+  transform: translate(-30px, -30px);
+  border-radius: 30px;
+}
+</style>

Web/packages/web/src/plugins/align-ruler/index.js

+// 
+// 功能: 对齐标尺
+// 作者: foolbit (唐斌)
+// 时间v2021-5-30
+// 
+
+import AlignRuler from './align-ruler.vue'
+import {IndependPlugin} from '@dokit/web-core'
+
+export default new IndependPlugin({
+  nameZh: '对齐标尺',
+  name: 'align-ruler',
+  icon: 'https://pt-starimg.didistatic.com/static/starimg/img/a5UTjMn6lO1618997535798.png',
+  component: AlignRuler
+})
+

Web/packages/web/src/plugins/align-ruler/info-box.vue

+<template>
+  <div class="position-infobox-container">
+    位置: 左 {{ position.left }}, 右 {{ position.right }}, 上 {{ position.top }}, 下 {{ 
+      position.bottom
+    }}
+    <span class="close-button" @click="$emit('remove')"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    position: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.position-infobox-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 20px;
+
+  width: 250px;
+  height: 50px;
+  padding: 0px 20px;
+  line-height: 50px;
+  font-size: 12px;
+
+  border-radius: 5px;
+  box-shadow: 0px 0px 2px #cccccc;
+}
+
+.position-info {
+  font-size: 10px;
+}
+
+.close-button {
+  background: #324456;
+  color: #fff;
+
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+
+  line-height: 18px;
+  font-size: 15px;
+  text-align: center;
+
+  top: 15px;
+  right: 10px;
+  position: absolute;
+}
+
+.close-button::before {
+  content: "×";
+}
+</style>
\ No newline at end of file