From 8a8a5972080d75880eaa7a1417b91b0c2546a453 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 20 Nov 2021 16:05:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=B8=BA=E7=BA=BF=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=A5=E5=A4=96=E7=9A=84=E5=85=83=E7=B4=A0=E9=83=BD=E8=A1=A5?=
 =?UTF-8?q?=E5=85=85=E6=97=8B=E8=BD=AC=E8=A7=92=E5=BA=A6=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCreateElement.ts                 |  4 ++
 src/types/slides.ts                           | 14 ++---
 .../Canvas/Operate/CommonElementOperate.vue   | 22 +++++--
 .../Canvas/Operate/ImageElementOperate.vue    |  8 +--
 .../Canvas/Operate/LineElementOperate.vue     |  8 +--
 .../Canvas/Operate/ShapeElementOperate.vue    |  8 +--
 .../Canvas/Operate/TableElementOperate.vue    | 16 +++--
 .../Canvas/Operate/TextElementOperate.vue     |  8 +--
 src/views/Editor/Canvas/Operate/index.vue     |  3 +-
 .../Editor/Canvas/hooks/useDragLineElement.ts |  2 +-
 .../Editor/Toolbar/ElementPositionPanel.vue   |  2 +-
 .../element/ChartElement/BaseChartElement.vue | 53 ++++++++++-------
 .../components/element/ChartElement/index.vue | 58 +++++++++++--------
 .../element/TableElement/BaseTableElement.vue | 26 ++++++---
 .../components/element/TableElement/index.vue | 52 ++++++++++-------
 .../element/VideoElement/BaseVideoElement.vue | 18 ++++--
 .../VideoElement/ScreenVideoElement.vue       | 30 ++++++----
 .../components/element/VideoElement/index.vue | 48 ++++++++-------
 tsconfig.json                                 |  1 -
 19 files changed, 218 insertions(+), 163 deletions(-)

diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts
index d1221991..70a2380b 100644
--- a/src/hooks/useCreateElement.ts
+++ b/src/hooks/useCreateElement.ts
@@ -90,6 +90,7 @@ export default () => {
       top: 81.25,
       width: 400,
       height: 400,
+      rotate: 0,
       themeColor: [themeColor.value],
       gridColor: fontColor.value,
       data: {
@@ -135,6 +136,7 @@ export default () => {
       width,
       height,
       colWidths,
+      rotate: 0,
       data,
       left: (VIEWPORT_SIZE - width) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
@@ -233,6 +235,7 @@ export default () => {
       id: createRandomCode(),
       width: data.w,
       height: data.h,
+      rotate: 0,
       left: (VIEWPORT_SIZE - data.w) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - data.h) / 2,
       path: data.path,
@@ -254,6 +257,7 @@ export default () => {
       id: createRandomCode(),
       width: 500,
       height: 300,
+      rotate: 0,
       left: (VIEWPORT_SIZE - 500) / 2,
       top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2,
       src,
diff --git a/src/types/slides.ts b/src/types/slides.ts
index afd41900..55a15699 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -62,6 +62,8 @@ export interface PPTElementOutline {
  * 
  * height: 元素高度
  * 
+ * rotate: 旋转角度
+ * 
  * link?: 超链接地址
  */
 interface PPTBaseElement {
@@ -72,6 +74,7 @@ interface PPTBaseElement {
   groupId?: string;
   width: number;
   height: number;
+  rotate: number;
   link?: string;
 }
 
@@ -83,8 +86,6 @@ interface PPTBaseElement {
  * 
  * content: 文本内容（HTML字符串）
  * 
- * rotate: 旋转角度
- * 
  * defaultFontName: 默认字体（会被文本内容中的HTML内联样式覆盖）
  * 
  * defaultColor: 默认颜色（会被文本内容中的HTML内联样式覆盖）
@@ -104,7 +105,6 @@ interface PPTBaseElement {
 export interface PPTTextElement extends PPTBaseElement {
   type: 'text';
   content: string;
-  rotate: number;
   defaultFontName: string;
   defaultColor: string;
   outline?: PPTElementOutline;
@@ -178,8 +178,6 @@ export interface ImageElementClip {
  * 
  * src: 图片地址
  * 
- * rotate: 旋转角度
- * 
  * outline?: 边框
  * 
  * filters?: 图片滤镜
@@ -196,7 +194,6 @@ export interface PPTImageElement extends PPTBaseElement {
   type: 'image';
   fixedRatio: boolean;
   src: string;
-  rotate: number;
   outline?: PPTElementOutline;
   filters?: ImageElementFilters;
   clip?: ImageElementClip;
@@ -254,8 +251,6 @@ export interface ShapeText {
  * 
  * gradient?: 渐变，该属性存在时将优先作为填充
  * 
- * rotate: 旋转角度
- * 
  * outline?: 边框
  * 
  * opacity?: 不透明度
@@ -277,7 +272,6 @@ export interface PPTShapeElement extends PPTBaseElement {
   fixedRatio: boolean;
   fill: string;
   gradient?: ShapeGradient;
-  rotate: number;
   outline?: PPTElementOutline;
   opacity?: number;
   flipH?: boolean;
@@ -311,7 +305,7 @@ export type LinePoint = '' | 'arrow' | 'dot'
  * 
  * curve?: 曲线中点位置（[x, y]）
  */
-export interface PPTLineElement extends Omit<PPTBaseElement, 'height'> {
+export interface PPTLineElement extends Omit<PPTBaseElement, 'height' | 'rotate'> {
   type: 'line';
   start: [number, number];
   end: [number, number];
diff --git a/src/views/Editor/Canvas/Operate/CommonElementOperate.vue b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
index 31d2d9bc..6e22d4e7 100644
--- a/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/CommonElementOperate.vue
@@ -7,15 +7,21 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />
+      <RotateHandler
+        class="operate-rotate-handler" 
+        :style="{ left: scaleWidth / 2 + 'px' }"
+        @mousedown.stop="rotateElement(elementInfo)"
+      />
     </template>
   </div>
 </template>
@@ -28,31 +34,35 @@ import { PPTShapeElement, PPTVideoElement, PPTLatexElement } from '@/types/slide
 import { OperateResizeHandler } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
 
+import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
+type PPTElement = PPTShapeElement | PPTVideoElement | PPTLatexElement
+
 export default defineComponent({
   name: 'common-element-operate',
   inheritAttrs: false,
   components: {
+    RotateHandler,
     ResizeHandler,
     BorderLine,
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTShapeElement | PPTVideoElement | PPTLatexElement>,
+      type: Object as PropType<PPTElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
-    isMultiSelect: {
-      type: Boolean,
+    rotateElement: {
+      type: Function as PropType<(element: PPTElement) => void>,
       required: true,
     },
     scaleElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTShapeElement, command: OperateResizeHandler) => void>,
+      type: Function as PropType<(e: MouseEvent, element: PPTElement, command: OperateResizeHandler) => void>,
       required: true,
     },
   },
diff --git a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
index 9c550ed4..9375e485 100644
--- a/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ImageElementOperate.vue
@@ -7,7 +7,7 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
@@ -50,11 +50,7 @@ export default defineComponent({
       type: Object as PropType<PPTImageElement>,
       required: true,
     },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
diff --git a/src/views/Editor/Canvas/Operate/LineElementOperate.vue b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
index c45bd1ed..8a1f9217 100644
--- a/src/views/Editor/Canvas/Operate/LineElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/LineElementOperate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="text-element-operate">
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
@@ -33,11 +33,7 @@ export default defineComponent({
       type: Object as PropType<PPTLineElement>,
       required: true,
     },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
diff --git a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
index ffb56c10..dfe7cd17 100644
--- a/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/ShapeElementOperate.vue
@@ -7,7 +7,7 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in resizeHandlers"
@@ -51,11 +51,7 @@ export default defineComponent({
       type: Object as PropType<PPTShapeElement>,
       required: true,
     },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
diff --git a/src/views/Editor/Canvas/Operate/TableElementOperate.vue b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
index e2d92a47..4f9a36de 100644
--- a/src/views/Editor/Canvas/Operate/TableElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TableElementOperate.vue
@@ -7,15 +7,21 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in textElementResizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />
+      <RotateHandler
+        class="operate-rotate-handler" 
+        :style="{ left: scaleWidth / 2 + 'px' }"
+        @mousedown.stop="rotateElement(elementInfo)"
+      />
     </template>
   </div>
 </template>
@@ -28,6 +34,7 @@ import { PPTTableElement } from '@/types/slides'
 import { OperateResizeHandler } from '@/types/edit'
 import useCommonOperate from '../hooks/useCommonOperate'
 
+import RotateHandler from './RotateHandler.vue'
 import ResizeHandler from './ResizeHandler.vue'
 import BorderLine from './BorderLine.vue'
 
@@ -35,6 +42,7 @@ export default defineComponent({
   name: 'table-element-operate',
   inheritAttrs: false,
   components: {
+    RotateHandler,
     ResizeHandler,
     BorderLine,
   },
@@ -43,12 +51,12 @@ export default defineComponent({
       type: Object as PropType<PPTTableElement>,
       required: true,
     },
-    isActiveGroupElement: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
-    isMultiSelect: {
-      type: Boolean,
+    rotateElement: {
+      type: Function as PropType<(element: PPTTableElement) => void>,
       required: true,
     },
     scaleElement: {
diff --git a/src/views/Editor/Canvas/Operate/TextElementOperate.vue b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
index 80414b0f..a55a2655 100644
--- a/src/views/Editor/Canvas/Operate/TextElementOperate.vue
+++ b/src/views/Editor/Canvas/Operate/TextElementOperate.vue
@@ -7,7 +7,7 @@
       :type="line.type" 
       :style="line.style"
     />
-    <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
+    <template v-if="handlerVisible">
       <ResizeHandler
         class="operate-resize-handler" 
         v-for="point in textElementResizeHandlers"
@@ -51,11 +51,7 @@ export default defineComponent({
       type: Object as PropType<PPTTextElement>,
       required: true,
     },
-    isActiveGroupElement: {
-      type: Boolean,
-      required: true,
-    },
-    isMultiSelect: {
+    handlerVisible: {
       type: Boolean,
       required: true,
     },
diff --git a/src/views/Editor/Canvas/Operate/index.vue b/src/views/Editor/Canvas/Operate/index.vue
index 190157ba..68381d22 100644
--- a/src/views/Editor/Canvas/Operate/index.vue
+++ b/src/views/Editor/Canvas/Operate/index.vue
@@ -13,8 +13,7 @@
       v-if="isSelected"
       :is="currentOperateComponent"
       :elementInfo="elementInfo"
-      :isActiveGroupElement="isActiveGroupElement"
-      :isMultiSelect="isMultiSelect"
+      :handlerVisible="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)"
       :rotateElement="rotateElement"
       :scaleElement="scaleElement"
       :dragLineElement="dragLineElement"
diff --git a/src/views/Editor/Canvas/hooks/useDragLineElement.ts b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
index 372c347f..58fed886 100644
--- a/src/views/Editor/Canvas/hooks/useDragLineElement.ts
+++ b/src/views/Editor/Canvas/hooks/useDragLineElement.ts
@@ -29,7 +29,7 @@ export default (elementList: Ref<PPTElement[]>) => {
     // 获取所有线条以外的未旋转的元素的8个缩放点作为吸附位置
     for (let i = 0; i < elementList.value.length; i++) {
       const _element = elementList.value[i]
-      if (_element.type === 'line' || ('rotate' in _element && _element.rotate)) continue
+      if (_element.type === 'line' || _element.rotate) continue
 
       const left = _element.left
       const top = _element.top
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 8338ccdb..e31c2240 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -99,7 +99,7 @@
       </div>
     </template>
 
-    <template v-if="['text', 'image', 'shape'].includes(handleElement.type)">
+    <template v-if="handleElement.type !== 'line'">
       <Divider />
 
       <div class="row">
diff --git a/src/views/components/element/ChartElement/BaseChartElement.vue b/src/views/components/element/ChartElement/BaseChartElement.vue
index 880d2a01..ffca87c6 100644
--- a/src/views/components/element/ChartElement/BaseChartElement.vue
+++ b/src/views/components/element/ChartElement/BaseChartElement.vue
@@ -7,29 +7,34 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div 
-      class="element-content"
-      :style="{
-        backgroundColor: elementInfo.fill,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
-      <Chart
-        :class="{ 'need-scale': needScaleSize }"
-        :width="chartWidth"
-        :height="chartHeight"
-        :type="elementInfo.chartType"
-        :data="elementInfo.data"
-        :options="elementInfo.options"
-        :themeColor="elementInfo.themeColor"
-        :gridColor="elementInfo.gridColor"
-        :legends="elementInfo.data.legends"
-        :legend="elementInfo.legend || ''"
-      />
+      <div 
+        class="element-content"
+        :style="{
+          backgroundColor: elementInfo.fill,
+        }"
+      >
+        <ElementOutline
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :outline="elementInfo.outline"
+        />
+        <Chart
+          :class="{ 'need-scale': needScaleSize }"
+          :width="chartWidth"
+          :height="chartHeight"
+          :type="elementInfo.chartType"
+          :data="elementInfo.data"
+          :options="elementInfo.options"
+          :themeColor="elementInfo.themeColor"
+          :gridColor="elementInfo.gridColor"
+          :legends="elementInfo.data.legends"
+          :legend="elementInfo.legend || ''"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -70,6 +75,10 @@ export default defineComponent({
 .base-element-chart {
   position: absolute;
 }
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
index 1507d58c..a3d51a6f 100644
--- a/src/views/components/element/ChartElement/index.vue
+++ b/src/views/components/element/ChartElement/index.vue
@@ -8,31 +8,36 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div 
-      class="element-content" 
-      :style="{
-        backgroundColor: elementInfo.fill,
-      }"
-      v-contextmenu="contextmenus"
-      @mousedown="$event => handleSelectElement($event)"
-      @dblclick="openDataEditor()"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
-      <Chart
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :type="elementInfo.chartType"
-        :data="elementInfo.data"
-        :options="elementInfo.options"
-        :themeColor="elementInfo.themeColor"
-        :gridColor="elementInfo.gridColor"
-        :legends="elementInfo.data.legends"
-        :legend="elementInfo.legend || ''"
-      />
+      <div 
+        class="element-content" 
+        :style="{
+          backgroundColor: elementInfo.fill,
+        }"
+        v-contextmenu="contextmenus"
+        @mousedown="$event => handleSelectElement($event)"
+        @dblclick="openDataEditor()"
+      >
+        <ElementOutline
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :outline="elementInfo.outline"
+        />
+        <Chart
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :type="elementInfo.chartType"
+          :data="elementInfo.data"
+          :options="elementInfo.options"
+          :themeColor="elementInfo.themeColor"
+          :gridColor="elementInfo.gridColor"
+          :legends="elementInfo.data.legends"
+          :legend="elementInfo.legend || ''"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -93,7 +98,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/TableElement/BaseTableElement.vue b/src/views/components/element/TableElement/BaseTableElement.vue
index 303c4b45..2cd09e61 100644
--- a/src/views/components/element/TableElement/BaseTableElement.vue
+++ b/src/views/components/element/TableElement/BaseTableElement.vue
@@ -7,14 +7,19 @@
       width: elementInfo.width + 'px',
     }"
   >
-    <div class="element-content">
-      <StaticTable
-        :data="elementInfo.data"
-        :width="elementInfo.width"
-        :colWidths="elementInfo.colWidths"
-        :outline="elementInfo.outline"
-        :theme="elementInfo.theme"
-      />
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
+    >
+      <div class="element-content">
+        <StaticTable
+          :data="elementInfo.data"
+          :width="elementInfo.width"
+          :colWidths="elementInfo.colWidths"
+          :outline="elementInfo.outline"
+          :theme="elementInfo.theme"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -43,7 +48,10 @@ export default defineComponent({
 .base-element-table {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index f4f18852..caef8657 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -9,30 +9,35 @@
       width: elementInfo.width + 'px',
     }"
   >
-    <div 
-      class="element-content" 
-      v-contextmenu="contextmenus"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <EditableTable 
-        @mousedown.stop
-        :data="elementInfo.data"
-        :width="elementInfo.width"
-        :colWidths="elementInfo.colWidths"
-        :outline="elementInfo.outline"
-        :theme="elementInfo.theme"
-        :editable="editable"
-        @change="data => updateTableCells(data)"
-        @changeColWidths="widths => updateColWidths(widths)"
-        @changeSelectedCells="cells => updateSelectedCells(cells)"
-      />
       <div 
-        class="table-mask" 
-        :class="{ 'lock': elementInfo.lock }"
-        v-if="!editable || elementInfo.lock"
-        @dblclick="startEdit()"
-        @mousedown="$event => handleSelectElement($event)"
+        class="element-content" 
+        v-contextmenu="contextmenus"
       >
-        <div class="mask-tip" :style="{ transform: `scale(${ 1 / canvasScale })` }">双击编辑</div>
+        <EditableTable 
+          @mousedown.stop
+          :data="elementInfo.data"
+          :width="elementInfo.width"
+          :colWidths="elementInfo.colWidths"
+          :outline="elementInfo.outline"
+          :theme="elementInfo.theme"
+          :editable="editable"
+          @change="data => updateTableCells(data)"
+          @changeColWidths="widths => updateColWidths(widths)"
+          @changeSelectedCells="cells => updateSelectedCells(cells)"
+        />
+        <div 
+          class="table-mask" 
+          :class="{ 'lock': elementInfo.lock }"
+          v-if="!editable || elementInfo.lock"
+          @dblclick="startEdit()"
+          @mousedown="$event => handleSelectElement($event)"
+        >
+          <div class="mask-tip" :style="{ transform: `scale(${ 1 / canvasScale })` }">双击编辑</div>
+        </div>
       </div>
     </div>
   </div>
@@ -190,7 +195,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/VideoElement/BaseVideoElement.vue b/src/views/components/element/VideoElement/BaseVideoElement.vue
index 1c09ba51..4bb1bf51 100644
--- a/src/views/components/element/VideoElement/BaseVideoElement.vue
+++ b/src/views/components/element/VideoElement/BaseVideoElement.vue
@@ -7,21 +7,26 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div class="element-content" :style="{ backgroundImage: `url(${elementInfo.poster})` }">
-      <IconPlayOne class="icon" />
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
+    >
+      <div class="element-content" :style="{ backgroundImage: `url(${elementInfo.poster})` }">
+        <IconPlayOne class="icon" />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import { PPTTableElement } from '@/types/slides'
+import { PPTVideoElement } from '@/types/slides'
 
 export default defineComponent({
   name: 'base-element-video',
   props: {
     elementInfo: {
-      type: Object as PropType<PPTTableElement>,
+      type: Object as PropType<PPTVideoElement>,
       required: true,
     },
   },
@@ -32,7 +37,10 @@ export default defineComponent({
 .base-element-video {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/VideoElement/ScreenVideoElement.vue b/src/views/components/element/VideoElement/ScreenVideoElement.vue
index abf624cf..a57f79c9 100644
--- a/src/views/components/element/VideoElement/ScreenVideoElement.vue
+++ b/src/views/components/element/VideoElement/ScreenVideoElement.vue
@@ -7,21 +7,26 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div class="element-content">
-      <VideoPlayer
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :src="elementInfo.src" 
-        :poster="elementInfo.poster"  
-        :scale="scale" 
-      />
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
+    >
+      <div class="element-content">
+        <VideoPlayer
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :src="elementInfo.src" 
+          :poster="elementInfo.poster"  
+          :scale="scale" 
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, inject, PropType, Ref, ref } from 'vue'
-import { PPTTableElement } from '@/types/slides'
+import { PPTVideoElement } from '@/types/slides'
 
 import VideoPlayer from './VideoPlayer/index.vue'
 
@@ -32,7 +37,7 @@ export default defineComponent({
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTTableElement>,
+      type: Object as PropType<PPTVideoElement>,
       required: true,
     },
   },
@@ -50,7 +55,10 @@ export default defineComponent({
 .screen-element-video {
   position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/element/VideoElement/index.vue b/src/views/components/element/VideoElement/index.vue
index b8e80994..2579ebbd 100644
--- a/src/views/components/element/VideoElement/index.vue
+++ b/src/views/components/element/VideoElement/index.vue
@@ -8,24 +8,29 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div 
-      class="element-content" 
-      v-contextmenu="contextmenus" 
-      @mousedown="$event => handleSelectElement($event, false)"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
-      <VideoPlayer
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :src="elementInfo.src" 
-        :poster="elementInfo.poster"  
-        :scale="scale" 
-      />
       <div 
-        :class="['handler-border', item]" 
-        v-for="item in ['t', 'b', 'l', 'r']" 
-        :key="item"
-        @mousedown="$event => handleSelectElement($event)"
-      ></div>
+        class="element-content" 
+        v-contextmenu="contextmenus" 
+        @mousedown="$event => handleSelectElement($event, false)"
+      >
+        <VideoPlayer
+          :width="elementInfo.width"
+          :height="elementInfo.height"
+          :src="elementInfo.src" 
+          :poster="elementInfo.poster"  
+          :scale="scale" 
+        />
+        <div 
+          :class="['handler-border', item]" 
+          v-for="item in ['t', 'b', 'l', 'r']" 
+          :key="item"
+          @mousedown="$event => handleSelectElement($event)"
+        ></div>
+      </div>
     </div>
   </div>
 </template>
@@ -33,7 +38,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import { useStore } from '@/store'
-import { PPTTableElement } from '@/types/slides'
+import { PPTVideoElement } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 import VideoPlayer from './VideoPlayer/index.vue'
@@ -45,11 +50,11 @@ export default defineComponent({
   },
   props: {
     elementInfo: {
-      type: Object as PropType<PPTTableElement>,
+      type: Object as PropType<PPTVideoElement>,
       required: true,
     },
     selectElement: {
-      type: Function as PropType<(e: MouseEvent, element: PPTTableElement, canMove?: boolean) => void>,
+      type: Function as PropType<(e: MouseEvent, element: PPTVideoElement, canMove?: boolean) => void>,
       required: true,
     },
     contextmenus: {
@@ -83,7 +88,10 @@ export default defineComponent({
     cursor: default;
   }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
   width: 100%;
   height: 100%;
diff --git a/tsconfig.json b/tsconfig.json
index b61f92d4..c224e17d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,6 @@
     "baseUrl": ".",
     "types": [
       "webpack-env",
-      "jest",
       "resize-observer-browser"
     ],
     "paths": {