From 01ab7f35cc7a70586951a296a1133625db687bca Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 5 Dec 2021 11:19:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4SvgWrapper?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LaTeXEditor/FormulaContent.vue     |  4 ++--
 src/components/SvgWrapper.vue                     | 15 ---------------
 src/plugins/component.ts                          |  2 --
 .../Editor/Canvas/ElementCreateSelection.vue      |  4 ++--
 src/views/Editor/Canvas/GridLines.vue             |  4 ++--
 src/views/Editor/CanvasTool/LinePool.vue          |  4 ++--
 src/views/Editor/CanvasTool/ShapePool.vue         |  4 ++--
 src/views/components/element/ElementOutline.vue   |  4 ++--
 .../element/ImageElement/ImageClipHandler.vue     |  8 ++++----
 .../ImageOutline/ImageEllipseOutline.vue          |  4 ++--
 .../ImageOutline/ImagePolygonOutline.vue          |  4 ++--
 .../ImageOutline/ImageRectOutline.vue             |  4 ++--
 .../element/LatexElement/BaseLatexElement.vue     |  4 ++--
 .../components/element/LatexElement/index.vue     |  4 ++--
 .../element/LineElement/BaseLineElement.vue       |  4 ++--
 .../components/element/LineElement/index.vue      |  4 ++--
 .../element/ShapeElement/BaseShapeElement.vue     |  4 ++--
 .../components/element/ShapeElement/index.vue     |  4 ++--
 18 files changed, 34 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/SvgWrapper.vue

diff --git a/src/components/LaTeXEditor/FormulaContent.vue b/src/components/LaTeXEditor/FormulaContent.vue
index 347d6f28..9cc12e47 100644
--- a/src/components/LaTeXEditor/FormulaContent.vue
+++ b/src/components/LaTeXEditor/FormulaContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgWrapper 
+  <svg 
     class="formula-content"
     overflow="visible" 
     :width="box.w + 32"
@@ -16,7 +16,7 @@
     >
       <path :d="pathd"></path>
     </g>
-  </SvgWrapper>
+  </svg>
 </template>
 
 <script lang="ts">
diff --git a/src/components/SvgWrapper.vue b/src/components/SvgWrapper.vue
deleted file mode 100644
index f76eb997..00000000
--- a/src/components/SvgWrapper.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    xmlnsXlink="http://www.w3.org/1999/xlink" 
-    version="1.1"
-  >
-    <slot></slot>
-  </svg>
-</template>
-
-<script lang="ts">
-export default {
-  name: 'svg-wrapper',
-}
-</script>
\ No newline at end of file
diff --git a/src/plugins/component.ts b/src/plugins/component.ts
index bbe7ff86..8d284187 100644
--- a/src/plugins/component.ts
+++ b/src/plugins/component.ts
@@ -1,7 +1,6 @@
 import { App } from 'vue'
 
 import FileInput from '@/components/FileInput.vue'
-import SvgWrapper from '@/components/SvgWrapper.vue'
 import CheckboxButton from '@/components/CheckboxButton.vue'
 import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
@@ -10,7 +9,6 @@ import FullscreenSpin from '@/components/FullscreenSpin.vue'
 export default {
   install(app: App) {
     app.component('FileInput', FileInput)
-    app.component('SvgWrapper', SvgWrapper)
     app.component('CheckboxButton', CheckboxButton)
     app.component('CheckboxButtonGroup', CheckboxButtonGroup)
     app.component('ColorPicker', ColorPicker)
diff --git a/src/views/Editor/Canvas/ElementCreateSelection.vue b/src/views/Editor/Canvas/ElementCreateSelection.vue
index 5564bc6f..638c5f2f 100644
--- a/src/views/Editor/Canvas/ElementCreateSelection.vue
+++ b/src/views/Editor/Canvas/ElementCreateSelection.vue
@@ -8,7 +8,7 @@
     <div :class="['selection', creatingElement.type]" v-if="start && end" :style="position">
 
       <!-- 绘制线条专用 -->
-      <SvgWrapper
+      <svg
         v-if="creatingElement.type === 'line' && lineData"
         overflow="visible" 
         :width="lineData.svgWidth"
@@ -23,7 +23,7 @@
           stroke-linejoin 
           stroke-miterlimit 
         ></path>
-			</SvgWrapper>
+			</svg>
     </div>
   </div>
 </template>
diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index df14cdf5..cbf0f193 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgWrapper class="grid-lines">
+  <svg class="grid-lines">
     <path 
       :style="{
         transform: `scale(${canvasScale})`,
@@ -10,7 +10,7 @@
       stroke-width="0.3" 
       stroke-dasharray="5"
     ></path>
-  </SvgWrapper>
+  </svg>
 </template>
 
 <script lang="ts">
diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue
index 3f557eba..c828a609 100644
--- a/src/views/Editor/CanvasTool/LinePool.vue
+++ b/src/views/Editor/CanvasTool/LinePool.vue
@@ -5,7 +5,7 @@
       <div class="line-list">
         <div class="line-item" v-for="(line, index) in item.children" :key="index">
           <div class="line-content" @click="selectLine(line)">
-            <SvgWrapper
+            <svg
               overflow="visible" 
               width="20"
               height="20"
@@ -43,7 +43,7 @@
                 :marker-start="line.points[0] ? `url(#${`preset-line-${index}`}-${line.points[0]}-start)` : ''"
                 :marker-end="line.points[1] ? `url(#${`preset-line-${index}`}-${line.points[1]}-end)` : ''"
               ></path>
-            </SvgWrapper>
+            </svg>
           </div>
         </div>
       </div>
diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue
index 57fd0b0f..e43e2993 100644
--- a/src/views/Editor/CanvasTool/ShapePool.vue
+++ b/src/views/Editor/CanvasTool/ShapePool.vue
@@ -5,7 +5,7 @@
       <div class="shape-list">
         <div class="shape-item" v-for="(shape, index) in item.children" :key="index">
           <div class="shape-content" @click="selectShape(shape)">
-            <SvgWrapper 
+            <svg 
               overflow="visible" 
               width="18"
               height="18"
@@ -25,7 +25,7 @@
                   :d="shape.path"
                 ></path>
               </g>
-            </SvgWrapper>
+            </svg>
           </div>
         </div>
       </div>
diff --git a/src/views/components/element/ElementOutline.vue b/src/views/components/element/ElementOutline.vue
index 3bfd1ee7..5d2f45b7 100644
--- a/src/views/components/element/ElementOutline.vue
+++ b/src/views/components/element/ElementOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgWrapper 
+  <svg 
     class="element-outline"
     v-if="outline"
     overflow="visible" 
@@ -17,7 +17,7 @@
       :stroke-width="outlineWidth" 
       :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
     ></path>
-	</SvgWrapper>
+	</svg>
 </template>
 
 <script lang="ts">
diff --git a/src/views/components/element/ImageElement/ImageClipHandler.vue b/src/views/components/element/ImageElement/ImageClipHandler.vue
index 36e86ffc..12444a5c 100644
--- a/src/views/components/element/ImageElement/ImageClipHandler.vue
+++ b/src/views/components/element/ImageElement/ImageClipHandler.vue
@@ -39,13 +39,13 @@
         :key="point" 
         @mousedown.stop="$event => scaleClipRange($event, point)"
       >
-        <SvgWrapper width="16" height="16" fill="#fff" stroke="#333">
+        <svg width="16" height="16" fill="#fff" stroke="#333">
           <path
             stroke-width="0.3" 
             shape-rendering="crispEdges"
             d="M 16 0 L 0 0 L 0 16 L 4 16 L 4 4 L 16 4 L 16 0 Z"
           ></path>
-        </SvgWrapper>
+        </svg>
       </div>
       <div 
         :class="['clip-point', '', point]" 
@@ -53,13 +53,13 @@
         :key="point" 
         @mousedown.stop="$event => scaleClipRange($event, point)"
       >
-        <SvgWrapper width="16" height="16" fill="#fff" stroke="#333">
+        <svg width="16" height="16" fill="#fff" stroke="#333">
           <path
             stroke-width="0.3" 
             shape-rendering="crispEdges"
             d="M 16 0 L 0 0 L 0 4 L 16 4 Z"
           ></path>
-        </SvgWrapper>
+        </svg>
       </div>
     </div>
   </div>
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
index d6dfa36a..a6abfe8b 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgWrapper 
+  <svg 
     class="image-ellipse-outline"
     v-if="outline"
     overflow="visible" 
@@ -20,7 +20,7 @@
       :stroke-width="outlineWidth" 
       :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
     ></ellipse>
-	</SvgWrapper>
+	</svg>
 </template>
 
 <script lang="ts">
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
index d57a567d..94b87b59 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgWrapper 
+  <svg 
     class="image-polygon-outline" 
     v-if="outline"
     overflow="visible" 
@@ -17,7 +17,7 @@
       :stroke-width="outlineWidth" 
       :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
     ></path>
-	</SvgWrapper>
+	</svg>
 </template>
 
 <script lang="ts">
diff --git a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
index df17ec78..a47874fe 100644
--- a/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
+++ b/src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <SvgWrapper 
+  <svg 
     class="image-rect-outline" 
     v-if="outline"
     overflow="visible" 
@@ -20,7 +20,7 @@
       :stroke-width="outlineWidth" 
       :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
     ></rect>
-	</SvgWrapper>
+	</svg>
 </template>
 
 <script lang="ts">
diff --git a/src/views/components/element/LatexElement/BaseLatexElement.vue b/src/views/components/element/LatexElement/BaseLatexElement.vue
index 04ef4a05..29783408 100644
--- a/src/views/components/element/LatexElement/BaseLatexElement.vue
+++ b/src/views/components/element/LatexElement/BaseLatexElement.vue
@@ -13,7 +13,7 @@
       :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
     >
       <div class="element-content">
-        <SvgWrapper 
+        <svg 
           overflow="visible" 
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -28,7 +28,7 @@
           >
             <path :d="elementInfo.path"></path>
           </g>
-        </SvgWrapper>
+        </svg>
       </div>
     </div>
   </div>
diff --git a/src/views/components/element/LatexElement/index.vue b/src/views/components/element/LatexElement/index.vue
index eb601540..9d9ce1cd 100644
--- a/src/views/components/element/LatexElement/index.vue
+++ b/src/views/components/element/LatexElement/index.vue
@@ -19,7 +19,7 @@
         @mousedown="$event => handleSelectElement($event)"
         @dblclick="openLatexEditor()"
       >
-        <SvgWrapper 
+        <svg 
           overflow="visible" 
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -34,7 +34,7 @@
           >
             <path :d="elementInfo.path"></path>
           </g>
-        </SvgWrapper>
+        </svg>
       </div>
     </div>
   </div>
diff --git a/src/views/components/element/LineElement/BaseLineElement.vue b/src/views/components/element/LineElement/BaseLineElement.vue
index 747a91f3..1adc9eb8 100644
--- a/src/views/components/element/LineElement/BaseLineElement.vue
+++ b/src/views/components/element/LineElement/BaseLineElement.vue
@@ -10,7 +10,7 @@
       class="element-content"
       :style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }"
     >
-      <SvgWrapper
+      <svg
         overflow="visible" 
         :width="svgWidth"
         :height="svgHeight"
@@ -45,7 +45,7 @@
           :marker-start="elementInfo.points[0] ? `url(#${elementInfo.id}-${elementInfo.points[0]}-start)` : ''"
           :marker-end="elementInfo.points[1] ? `url(#${elementInfo.id}-${elementInfo.points[1]}-end)` : ''"
         ></path>
-			</SvgWrapper>
+			</svg>
     </div>
   </div>
 </template>
diff --git a/src/views/components/element/LineElement/index.vue b/src/views/components/element/LineElement/index.vue
index 8f60eaf1..30e9e42c 100644
--- a/src/views/components/element/LineElement/index.vue
+++ b/src/views/components/element/LineElement/index.vue
@@ -11,7 +11,7 @@
       class="element-content" 
       :style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }"
     >
-      <SvgWrapper
+      <svg
         overflow="visible" 
         :width="svgWidth"
         :height="svgHeight"
@@ -55,7 +55,7 @@
           @mousedown="$event => handleSelectElement($event)"
           v-contextmenu="contextmenus"
         ></path>
-			</SvgWrapper>
+			</svg>
     </div>
   </div>
 </template>
diff --git a/src/views/components/element/ShapeElement/BaseShapeElement.vue b/src/views/components/element/ShapeElement/BaseShapeElement.vue
index be00350c..8e707af8 100644
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@@ -22,7 +22,7 @@
           fontFamily: text.defaultFontName,
         }"
       >
-        <SvgWrapper 
+        <svg 
           overflow="visible" 
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -51,7 +51,7 @@
               :stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'" 
             ></path>
           </g>
-        </SvgWrapper>
+        </svg>
 
         <div class="shape-text" :class="text.align">
           <div class="ProseMirror-static" v-html="text.content"></div>
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index 6578cdd0..730b599a 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -26,7 +26,7 @@
         @mousedown="$event => handleSelectElement($event)"
         @dblclick="enterEditing()"
       >
-        <SvgWrapper 
+        <svg 
           overflow="visible" 
           :width="elementInfo.width"
           :height="elementInfo.height"
@@ -55,7 +55,7 @@
               :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
             ></path>
           </g>
-        </SvgWrapper>
+        </svg>
 
         <div class="shape-text" :class="text.align">
           <ProsemirrorEditor