From d1db7ad494f400c168ddd1f84c3a7cf9341a73d3 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 3 Mar 2022 10:19:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/common/format.scss                 |  3 +
 src/styles/common/style.scss                  |  1 +
 .../components/EditShapeBox/index.vue         | 50 +++++++++++--
 .../chart/ContentEdit/hooks/useDrag.hook.ts   | 73 +++++++++++++++----
 .../chart/ContentEdit/hooks/useStyle.hook.ts  | 46 ++++++++++++
 5 files changed, 151 insertions(+), 22 deletions(-)
 create mode 100644 src/styles/common/format.scss

diff --git a/src/styles/common/format.scss b/src/styles/common/format.scss
new file mode 100644
index 00000000..8d61cffc
--- /dev/null
+++ b/src/styles/common/format.scss
@@ -0,0 +1,3 @@
+body {
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/src/styles/common/style.scss b/src/styles/common/style.scss
index c87a9066..c06dee6c 100644
--- a/src/styles/common/style.scss
+++ b/src/styles/common/style.scss
@@ -1,4 +1,5 @@
 @import './var.scss';
+@import './format.scss';
 @import './animation.scss';
 @import './mixins/mixins.scss';
 
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index 86c1cfd1..7111f045 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@@ -1,21 +1,33 @@
 <template>
   <div class="go-shape-box">
     <slot></slot>
+    <!-- 锚点 -->
+    <div
+      class="shape-point"
+      v-for="(point, index) in (select? pointList : [])"
+      :key="index"
+      :style="usePointStyle(point, index, item.attr, cursorResize)"
+      @mousedown="useMousePointHandle($event, point, item.attr)"
+    />
 
     <!-- 选中 -->
     <div class="shape-modal" :style="useSizeStyle(item.attr)">
       <div class="shape-modal-select" :class="{ active: select }" />
-      <div class="shape-modal-change" :class="{ active: select || hover }" />
+      <div
+        class="shape-modal-change"
+        :class="{ selectActive: select, hoverActive: hover }"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, PropType } from 'vue';
+import { ref, computed, PropType, toRefs } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { CreateComponentType } from '@/packages/index.d'
-import { useSizeStyle } from '../../hooks/useStyle.hook'
+import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
+import { useSizeStyle, usePointStyle } from '../../hooks/useStyle.hook'
+import { useMousePointHandle } from '../../hooks/useDrag.hook'
 
 const props = defineProps({
   item: {
@@ -29,6 +41,12 @@ const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 const chartEditStore = useChartEditStoreStore()
 
+// 锚点
+const pointList = ['t', 'r', 'b', 'l', 'lt', 'rt', 'lb', 'rb']
+
+// 光标朝向
+const cursorResize = ['n', 'e', 's', 'w', 'nw', 'ne', 'sw', 'se']
+
 // 计算当前选中目标
 const hover = computed(() => {
   return props.item.id === chartEditStore.getTargetChart.hoverId
@@ -43,6 +61,17 @@ const select = computed(() => {
 @include go(shape-box) {
   position: absolute;
   cursor: move;
+  /* 锚点 */
+  .shape-point {
+    z-index: 1;
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border: 3px solid v-bind('themeColor');
+    border-radius: 5px;
+    background-color: #fff;
+  }
+  /* 选中 */
   .shape-modal {
     position: absolute;
     top: 0;
@@ -54,7 +83,6 @@ const select = computed(() => {
       width: 100%;
       height: 100%;
       border-radius: 10px;
-      @extend .go-transition-quick;
     }
 
     .shape-modal-select {
@@ -67,8 +95,16 @@ const select = computed(() => {
     }
     .shape-modal-change {
       border: 2px solid rgba(0, 0, 0, 0);
-      &.active {
-        border: 2px solid v-bind('themeColor');
+      &.selectActive,
+      &.hoverActive {
+        border-color: v-bind('themeColor');
+        border-width: 2px;
+      }
+      &.hoverActive {
+        border-style: dotted;
+      }
+      &.selectActive {
+        border-style: solid;
       }
     }
   }
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 09233341..116f92c1 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -1,18 +1,15 @@
-import { toRefs } from 'vue'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { createComponent } from '@/packages'
 import { ConfigType } from '@/packages/index.d'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { getChartEditStore, getChartEditStoreEnum } from './useStore.hook'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import throttle from 'lodash/throttle'
-
 const { onClickoutside } = useContextMenu()
 
 const chartEditStore = getChartEditStore()
 const chartEditStoreEnum = getChartEditStoreEnum()
-const { scale } = toRefs(chartEditStore.getEditCanvas)
 
 // * 拖拽到编辑区域里
 export const handleDrag = async (e: DragEvent) => {
@@ -34,11 +31,14 @@ export const handleDrag = async (e: DragEvent) => {
       drayDataString
     )
     // 创建新图表组件
-    let newComponent:CreateComponentType = await createComponent(dropData)
+    let newComponent: CreateComponentType = await createComponent(dropData)
 
-    newComponent.setPosition(e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
+    newComponent.setPosition(
+      e.offsetX - newComponent.attr.w / 2,
+      e.offsetY - newComponent.attr.h / 2
+    )
     chartEditStore.addComponentList(newComponent, false, true)
-    chartEditStore.setTargetSelectChart(newComponent.id) 
+    chartEditStore.setTargetSelectChart(newComponent.id)
     loadingFinish()
   } catch (error) {
     loadingError()
@@ -81,9 +81,6 @@ export const useMouseHandle = () => {
     const width = chartEditStore.getEditCanvasConfig.width
     const height = chartEditStore.getEditCanvasConfig.height
 
-    // 获取编辑区域 Dom
-    const editcontentDom = chartEditStore.getEditCanvas.editContentDom
-
     // 记录图表初始位置和大小
     const itemAttrX = item.attr.x
     const itemAttrY = item.attr.y
@@ -114,12 +111,12 @@ export const useMouseHandle = () => {
     }, 30)
 
     const mouseup = () => {
-      editcontentDom!.removeEventListener('mousemove', mousemove)
-      editcontentDom!.removeEventListener('mouseup', mouseup)
+      document.removeEventListener('mousemove', mousemove)
+      document.removeEventListener('mouseup', mouseup)
     }
 
-    editcontentDom!.addEventListener('mousemove', mousemove)
-    editcontentDom!.addEventListener('mouseup', mouseup)
+    document.addEventListener('mousemove', mousemove)
+    document.addEventListener('mouseup', mouseup)
   }
 
   // * 进入事件
@@ -137,4 +134,50 @@ export const useMouseHandle = () => {
   }
 
   return { mousedownHandle, mouseenterHandle, mouseleaveHandle }
-}
\ No newline at end of file
+}
+
+// * 移动锚点
+export const useMousePointHandle = (
+  e: MouseEvent,
+  point: string,
+  attr: PickCreateComponentType<'attr'>
+) => {
+  e.stopPropagation()
+  e.preventDefault()
+  const scale = chartEditStore.getEditCanvas.scale
+
+  const itemAttrX = attr.x
+  const itemAttrY = attr.y
+  const itemAttrW = attr.w
+  const itemAttrH = attr.h
+
+  // 记录点击初始位置
+  const startX = e.screenX
+  const startY = e.screenY
+ 
+  const move = throttle((moveEvent: MouseEvent) => {
+    let currX = Math.round((moveEvent.screenX - startX) / scale)
+    let currY = Math.round((moveEvent.screenY - startY) / scale)
+ 
+    const isTop = /t/.test(point)
+    const isBottom = /b/.test(point)
+    const isLeft = /l/.test(point)
+    const isRight = /r/.test(point)
+
+    const newHeight = itemAttrH + (isTop ? -currY : (isBottom ? currY : 0))
+    const newWidth = itemAttrW + (isLeft ? -currX : (isRight ? currX : 0))
+    
+    attr.h = newHeight > 0 ? newHeight : 0
+    attr.w = newWidth > 0 ? newWidth : 0
+    attr.x = itemAttrX + (isLeft ? currX : 0)
+    attr.y = itemAttrY + (isTop ? currY : 0)
+  })
+
+  const up = () => {
+    document.removeEventListener('mousemove', move)
+    document.removeEventListener('mouseup', up)
+  }
+
+  document.addEventListener('mousemove', move)
+  document.addEventListener('mouseup', up)
+}
diff --git a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
index 85cc970d..e2e5e890 100644
--- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
@@ -18,3 +18,49 @@ export const useSizeStyle = (attr: AttrType) => {
   }
   return sizeStyle
 }
+
+// 锚点位置
+export const usePointStyle = (
+  point: string,
+  index: number,
+  attr: PickCreateComponentType<'attr'>,
+  cursorResize: string[]
+) => {
+  const { w: width, h: height } = attr
+
+  const isTop = /t/.test(point)
+  const isBottom = /b/.test(point)
+  const isLeft = /l/.test(point)
+  const isRight = /r/.test(point)
+
+  let newLeft = 0
+  let newTop = 0
+
+  // 四个角的点
+  if (point.length === 2) {
+    newLeft = isLeft ? 0 : width
+    newTop = isTop ? 0 : height
+  } else {
+    // 上下两点的点，宽度居中
+    if (isTop || isBottom) {
+      newLeft = width / 2
+      newTop = isTop ? 0 : height
+    }
+
+    // 左右两边的点，高度居中
+    if (isLeft || isRight) {
+      newLeft = isLeft ? 0 : width
+      newTop = Math.floor(height / 2)
+    }
+  }
+
+  const style = {
+    marginLeft: isRight ? '-3px' : '-3px',
+    marginTop: '-3px',
+    left: `${newLeft}px`,
+    top: `${newTop}px`,
+    cursor: cursorResize[index] + '-resize',
+  }
+
+  return style
+}