refactor: 移除SvgWrapper组件

2025-04-15 02:20:00 +08:00 · 2021-12-05 11:19:25 +08:00 · 2021-12-05 11:19:25 +08:00 · 01ab7f35cc
commit 01ab7f35cc
parent c9fab09d02
18 changed files with 34 additions and 51 deletions
--- 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">
--- a/src/components/SvgWrapper.vue
+++ b/src/components/SvgWrapper.vue
@ -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>
--- 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)
--- 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>
--- 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">
--- 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>
--- 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>
--- 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">
--- 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>
--- 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">
--- 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">
--- 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">
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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