From 7a12bd549a392b557d74cc37f58165fdcad65cb0 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 16 Sep 2021 20:03:09 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=85=83=E7=B4=A0Operate=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ntOperate.vue => CommonElementOperate.vue} |  8 +-
 .../Canvas/Operate/LatexElementOperate.vue    | 74 -------------------
 .../Canvas/Operate/VideoElementOperate.vue    | 74 -------------------
 src/views/Editor/Canvas/Operate/index.vue     | 10 +--
 4 files changed, 8 insertions(+), 158 deletions(-)
 rename src/views/Editor/Canvas/Operate/{ChartElementOperate.vue => CommonElementOperate.vue} (88%)
 delete mode 100644 src/views/Editor/Canvas/Operate/LatexElementOperate.vue
 delete mode 100644 src/views/Editor/Canvas/Operate/VideoElementOperate.vue

diff --git a/src/views/Editor/Canvas/Operate/ChartElementOperate.vue b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
similarity index 88%
rename from src/views/Editor/Canvas/Operate/ChartElementOperate.vue
rename to src/views/Editor/Canvas/Operate/CommonElementOperate.vue
index 6e5d0c58..31d2d9bc 100644
--- a/src/views/Editor/Canvas/Operate/ChartElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chart-element-operate">
+  <div class="common-element-operate">
     <BorderLine 
       class="operate-border-line"
       v-for="line in borderLines" 
@@ -24,7 +24,7 @@
 import { computed, defineComponent, PropType } from 'vue'
 import { useStore } from '@/store'
 
-import { PPTShapeElement } from '@/types/slides'
+import { PPTShapeElement, PPTVideoElement, PPTLatexElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
 
@@ -32,7 +32,7 @@ import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
 export default defineComponent({
-  name: 'chart-element-operate',
+  name: 'common-element-operate',
   inheritAttrs: false,
   components: {
     ResizeHandler,
@@ -40,7 +40,7 @@ export default defineComponent({
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTShapeElement>,
+      type: Object as PropType<PPTShapeElement | PPTVideoElement | PPTLatexElement>,
       required: true,
     },
     isActiveGroupElement: {
diff --git a/src/views/Editor/Canvas/Operate/LatexElementOperate.vue b/src/views/Editor/Canvas/Operate/LatexElementOperate.vue
deleted file mode 100644
index 629ee4e6..00000000
--- a/src/views/Editor/Canvas/Operate/LatexElementOperate.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="latex-element-operate">
-    <BorderLine 
-      class="operate-border-line"
-      v-for="line in borderLines" 
-      :key="line.type" 
-      :type="line.type" 
-      :style="line.style"
-    />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
-      <ResizeHandler
-        class="operate-resize-handler" 
-        v-for="point in resizeHandlers"
-        :key="point.direction"
-        :type="point.direction"
-        :style="point.style"
-        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from '@/store'
-
-import { PPTShapeElement } from '@/types/slides'
-import { OperateResizeHandler } from '@/types/edit'
-import useCommonOperate from '../hooks/useCommonOperate'
-
-import ResizeHandler from './ResizeHandler.vue'
-import BorderLine from './BorderLine.vue'
-
-export default defineComponent({
-  name: 'latex-element-operate',
-  inheritAttrs: false,
-  components: {
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTShapeElement>,
-      required: true,
-    },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
-      type: Boolean,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const store = useStore()
-    const canvasScale = computed(() => store.state.canvasScale)
-
-    const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
-    const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
-    const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      scaleWidth,
-      resizeHandlers,
-      borderLines,
-    }
-  },
-})
-</script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/VideoElementOperate.vue b/src/views/Editor/Canvas/Operate/VideoElementOperate.vue
deleted file mode 100644
index 0b1fb29a..00000000
--- a/src/views/Editor/Canvas/Operate/VideoElementOperate.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-  <div class="video-element-operate">
-    <BorderLine 
-      class="operate-border-line"
-      v-for="line in borderLines" 
-      :key="line.type" 
-      :type="line.type" 
-      :style="line.style"
-    />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
-      <ResizeHandler
-        class="operate-resize-handler" 
-        v-for="point in resizeHandlers"
-        :key="point.direction"
-        :type="point.direction"
-        :style="point.style"
-        @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
-      />
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
-import { useStore } from '@/store'
-
-import { PPTShapeElement } from '@/types/slides'
-import { OperateResizeHandler } from '@/types/edit'
-import useCommonOperate from '../hooks/useCommonOperate'
-
-import ResizeHandler from './ResizeHandler.vue'
-import BorderLine from './BorderLine.vue'
-
-export default defineComponent({
-  name: 'video-element-operate',
-  inheritAttrs: false,
-  components: {
-    ResizeHandler,
-    BorderLine,
-  },
-  props: {
-    elementInfo: {
-      type: Object as PropType<PPTShapeElement>,
-      required: true,
-    },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
-      type: Boolean,
-      required: true,
-    },
-    scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const store = useStore()
-    const canvasScale = computed(() => store.state.canvasScale)
-
-    const scaleWidth = computed(() => props.elementInfo.width * canvasScale.value)
-    const scaleHeight = computed(() => props.elementInfo.height * canvasScale.value)
-    const { resizeHandlers, borderLines } = useCommonOperate(scaleWidth, scaleHeight)
-
-    return {
-      scaleWidth,
-      resizeHandlers,
-      borderLines,
-    }
-  },
-})
-</script>
\ No newline at end of file
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index 1fe74455..190157ba 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -46,10 +46,8 @@ import ImageElementOperate from './ImageElementOperate.vue'
 import TextElementOperate from './TextElementOperate.vue'
 import ShapeElementOperate from './ShapeElementOperate.vue'
 import LineElementOperate from './LineElementOperate.vue'
-import ChartElementOperate from './ChartElementOperate.vue'
 import TableElementOperate from './TableElementOperate.vue'
-import LatexElementOperate from './LatexElementOperate.vue'
-import VideoElementOperate from './VideoElementOperate.vue'
+import CommonElementOperate from './CommonElementOperate.vue'
 import LinkHandler from './LinkHandler.vue'
 
 export default defineComponent({
@@ -107,10 +105,10 @@ export default defineComponent({
         [ElementTypes.TEXT]: TextElementOperate,
         [ElementTypes.SHAPE]: ShapeElementOperate,
         [ElementTypes.LINE]: LineElementOperate,
-        [ElementTypes.CHART]: ChartElementOperate,
         [ElementTypes.TABLE]: TableElementOperate,
-        [ElementTypes.LATEX]: LatexElementOperate,
-        [ElementTypes.VIDEO]: VideoElementOperate,
+        [ElementTypes.CHART]: CommonElementOperate,
+        [ElementTypes.LATEX]: CommonElementOperate,
+        [ElementTypes.VIDEO]: CommonElementOperate,
       }
       return elementTypeMap[props.elementInfo.type] || null
     })