feat: 新增组件缩放

src/styles/common/format.scss

@@ -0,0 +1,3 @@
+body {
+  overflow: hidden;
+}

src/styles/common/style.scss

@@ -1,4 +1,5 @@
 @import './var.scss';
+@import './format.scss';
 @import './animation.scss';
 @import './mixins/mixins.scss';
 

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 { CreateComponentType, PickCreateComponentType } from '@/packages/index.d'
-import { useSizeStyle } from '../../hooks/useStyle.hook'
+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 {
+      &.selectActive,
-        border: 2px solid v-bind('themeColor');
+      &.hoverActive {
+        border-color: v-bind('themeColor');
+        border-width: 2px;
+      }
+      &.hoverActive {
+        border-style: dotted;
+      }
+      &.selectActive {
+        border-style: solid;
       }
     }
   }

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) => {
@@ -36,7 +33,10 @@ export const handleDrag = async (e: DragEvent) => {
     // 创建新图表组件
     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)
     loadingFinish()
@@ -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)
+      document.removeEventListener('mousemove', mousemove)
-      editcontentDom!.removeEventListener('mouseup', mouseup)
+      document.removeEventListener('mouseup', mouseup)
     }
 
-    editcontentDom!.addEventListener('mousemove', mousemove)
+    document.addEventListener('mousemove', mousemove)
-    editcontentDom!.addEventListener('mouseup', mouseup)
+    document.addEventListener('mouseup', mouseup)
   }
 
   // * 进入事件
@@ -138,3 +135,49 @@ export const useMouseHandle = () => {
 
   return { mousedownHandle, mouseenterHandle, mouseleaveHandle }
 }
+
+// * 移动锚点
+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)
+}

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
+}