github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 移除SvgWrapper组件

Browse Source
This commit is contained in:
pipipi-pikachu 2021-12-05 11:19:25 +08:00
parent c9fab09d02
commit 01ab7f35cc
18 changed files with 34 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/LaTeXEditor/FormulaContent.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SvgWrapper <svg
class="formula-content" class="formula-content"
overflow="visible" overflow="visible"
:width="box.w + 32" :width="box.w + 32"
@ -16,7 +16,7 @@
> >
<path :d="pathd"></path> <path :d="pathd"></path>
</g> </g>
</SvgWrapper> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">

15
src/components/SvgWrapper.vue
View File

@ -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>

2
src/plugins/component.ts
View File

@ -1,7 +1,6 @@
import { App } from 'vue' import { App } from 'vue'
import FileInput from '@/components/FileInput.vue' import FileInput from '@/components/FileInput.vue'
import SvgWrapper from '@/components/SvgWrapper.vue'
import CheckboxButton from '@/components/CheckboxButton.vue' import CheckboxButton from '@/components/CheckboxButton.vue'
import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue' import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'
@ -10,7 +9,6 @@ import FullscreenSpin from '@/components/FullscreenSpin.vue'
export default { export default {
install(app: App) { install(app: App) {
app.component('FileInput', FileInput) app.component('FileInput', FileInput)
app.component('SvgWrapper', SvgWrapper)
app.component('CheckboxButton', CheckboxButton) app.component('CheckboxButton', CheckboxButton)
app.component('CheckboxButtonGroup', CheckboxButtonGroup) app.component('CheckboxButtonGroup', CheckboxButtonGroup)
app.component('ColorPicker', ColorPicker) app.component('ColorPicker', ColorPicker)

4
src/views/Editor/Canvas/ElementCreateSelection.vue
View File

@ -8,7 +8,7 @@
<div :class="['selection', creatingElement.type]" v-if="start && end" :style="position"> <div :class="['selection', creatingElement.type]" v-if="start && end" :style="position">
<!-- 绘制线条专用 --> <!-- 绘制线条专用 -->
<SvgWrapper <svg
v-if="creatingElement.type === 'line' && lineData" v-if="creatingElement.type === 'line' && lineData"
overflow="visible" overflow="visible"
:width="lineData.svgWidth" :width="lineData.svgWidth"
@ -23,7 +23,7 @@
stroke-linejoin stroke-linejoin
stroke-miterlimit stroke-miterlimit
></path> ></path>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</template> </template>

4
src/views/Editor/Canvas/GridLines.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SvgWrapper class="grid-lines"> <svg class="grid-lines">
<path <path
:style="{ :style="{
transform: `scale(${canvasScale})`, transform: `scale(${canvasScale})`,
@ -10,7 +10,7 @@
stroke-width="0.3" stroke-width="0.3"
stroke-dasharray="5" stroke-dasharray="5"
></path> ></path>
</SvgWrapper> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">

4
src/views/Editor/CanvasTool/LinePool.vue
View File

@ -5,7 +5,7 @@
<div class="line-list"> <div class="line-list">
<div class="line-item" v-for="(line, index) in item.children" :key="index"> <div class="line-item" v-for="(line, index) in item.children" :key="index">
<div class="line-content" @click="selectLine(line)"> <div class="line-content" @click="selectLine(line)">
<SvgWrapper <svg
overflow="visible" overflow="visible"
width="20" width="20"
height="20" height="20"
@ -43,7 +43,7 @@
:marker-start="line.points[0] ? `url(#${`preset-line-${index}`}-${line.points[0]}-start)` : ''" :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)` : ''" :marker-end="line.points[1] ? `url(#${`preset-line-${index}`}-${line.points[1]}-end)` : ''"
></path> ></path>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</div> </div>

4
src/views/Editor/CanvasTool/ShapePool.vue
View File

@ -5,7 +5,7 @@
<div class="shape-list"> <div class="shape-list">
<div class="shape-item" v-for="(shape, index) in item.children" :key="index"> <div class="shape-item" v-for="(shape, index) in item.children" :key="index">
<div class="shape-content" @click="selectShape(shape)"> <div class="shape-content" @click="selectShape(shape)">
<SvgWrapper <svg
overflow="visible" overflow="visible"
width="18" width="18"
height="18" height="18"
@ -25,7 +25,7 @@
:d="shape.path" :d="shape.path"
></path> ></path>
</g> </g>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</div> </div>

4
src/views/components/element/ElementOutline.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SvgWrapper <svg
class="element-outline" class="element-outline"
v-if="outline" v-if="outline"
overflow="visible" overflow="visible"
@ -17,7 +17,7 @@
:stroke-width="outlineWidth" :stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
></path> ></path>
</SvgWrapper> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">

8
src/views/components/element/ImageElement/ImageClipHandler.vue
View File

@ -39,13 +39,13 @@
:key="point" :key="point"
@mousedown.stop="$event => scaleClipRange($event, 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 <path
stroke-width="0.3" stroke-width="0.3"
shape-rendering="crispEdges" 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" d="M 16 0 L 0 0 L 0 16 L 4 16 L 4 4 L 16 4 L 16 0 Z"
></path> ></path>
</SvgWrapper> </svg>
</div> </div>
<div <div
:class="['clip-point', '', point]" :class="['clip-point', '', point]"
@ -53,13 +53,13 @@
:key="point" :key="point"
@mousedown.stop="$event => scaleClipRange($event, 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 <path
stroke-width="0.3" stroke-width="0.3"
shape-rendering="crispEdges" shape-rendering="crispEdges"
d="M 16 0 L 0 0 L 0 4 L 16 4 Z" d="M 16 0 L 0 0 L 0 4 L 16 4 Z"
></path> ></path>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</div> </div>

4
src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SvgWrapper <svg
class="image-ellipse-outline" class="image-ellipse-outline"
v-if="outline" v-if="outline"
overflow="visible" overflow="visible"
@ -20,7 +20,7 @@
:stroke-width="outlineWidth" :stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
></ellipse> ></ellipse>
</SvgWrapper> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">

4
src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SvgWrapper <svg
class="image-polygon-outline" class="image-polygon-outline"
v-if="outline" v-if="outline"
overflow="visible" overflow="visible"
@ -17,7 +17,7 @@
:stroke-width="outlineWidth" :stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
></path> ></path>
</SvgWrapper> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">

4
src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SvgWrapper <svg
class="image-rect-outline" class="image-rect-outline"
v-if="outline" v-if="outline"
overflow="visible" overflow="visible"
@ -20,7 +20,7 @@
:stroke-width="outlineWidth" :stroke-width="outlineWidth"
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
></rect> ></rect>
</SvgWrapper> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">

4
src/views/components/element/LatexElement/BaseLatexElement.vue
View File

@ -13,7 +13,7 @@
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }" :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
> >
<div class="element-content"> <div class="element-content">
<SvgWrapper <svg
overflow="visible" overflow="visible"
:width="elementInfo.width" :width="elementInfo.width"
:height="elementInfo.height" :height="elementInfo.height"
@ -28,7 +28,7 @@
> >
<path :d="elementInfo.path"></path> <path :d="elementInfo.path"></path>
</g> </g>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</div> </div>

4
src/views/components/element/LatexElement/index.vue
View File

@ -19,7 +19,7 @@
@mousedown="$event => handleSelectElement($event)" @mousedown="$event => handleSelectElement($event)"
@dblclick="openLatexEditor()" @dblclick="openLatexEditor()"
> >
<SvgWrapper <svg
overflow="visible" overflow="visible"
:width="elementInfo.width" :width="elementInfo.width"
:height="elementInfo.height" :height="elementInfo.height"
@ -34,7 +34,7 @@
> >
<path :d="elementInfo.path"></path> <path :d="elementInfo.path"></path>
</g> </g>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</div> </div>

4
src/views/components/element/LineElement/BaseLineElement.vue
View File

@ -10,7 +10,7 @@
class="element-content" class="element-content"
:style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }" :style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }"
> >
<SvgWrapper <svg
overflow="visible" overflow="visible"
:width="svgWidth" :width="svgWidth"
:height="svgHeight" :height="svgHeight"
@ -45,7 +45,7 @@
:marker-start="elementInfo.points[0] ? `url(#${elementInfo.id}-${elementInfo.points[0]}-start)` : ''" :marker-start="elementInfo.points[0] ? `url(#${elementInfo.id}-${elementInfo.points[0]}-start)` : ''"
:marker-end="elementInfo.points[1] ? `url(#${elementInfo.id}-${elementInfo.points[1]}-end)` : ''" :marker-end="elementInfo.points[1] ? `url(#${elementInfo.id}-${elementInfo.points[1]}-end)` : ''"
></path> ></path>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</template> </template>

4
src/views/components/element/LineElement/index.vue
View File

@ -11,7 +11,7 @@
class="element-content" class="element-content"
:style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }" :style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }"
> >
<SvgWrapper <svg
overflow="visible" overflow="visible"
:width="svgWidth" :width="svgWidth"
:height="svgHeight" :height="svgHeight"
@ -55,7 +55,7 @@
@mousedown="$event => handleSelectElement($event)" @mousedown="$event => handleSelectElement($event)"
v-contextmenu="contextmenus" v-contextmenu="contextmenus"
></path> ></path>
</SvgWrapper> </svg>
</div> </div>
</div> </div>
</template> </template>

4
src/views/components/element/ShapeElement/BaseShapeElement.vue
View File

@ -22,7 +22,7 @@
fontFamily: text.defaultFontName, fontFamily: text.defaultFontName,
}" }"
> >
<SvgWrapper <svg
overflow="visible" overflow="visible"
:width="elementInfo.width" :width="elementInfo.width"
:height="elementInfo.height" :height="elementInfo.height"
@ -51,7 +51,7 @@
:stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'" :stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'"
></path> ></path>
</g> </g>
</SvgWrapper> </svg>
<div class="shape-text" :class="text.align"> <div class="shape-text" :class="text.align">
<div class="ProseMirror-static" v-html="text.content"></div> <div class="ProseMirror-static" v-html="text.content"></div>

4
src/views/components/element/ShapeElement/index.vue
View File

@ -26,7 +26,7 @@
@mousedown="$event => handleSelectElement($event)" @mousedown="$event => handleSelectElement($event)"
@dblclick="enterEditing()" @dblclick="enterEditing()"
> >
<SvgWrapper <svg
overflow="visible" overflow="visible"
:width="elementInfo.width" :width="elementInfo.width"
:height="elementInfo.height" :height="elementInfo.height"
@ -55,7 +55,7 @@
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
></path> ></path>
</g> </g>
</SvgWrapper> </svg>
<div class="shape-text" :class="text.align"> <div class="shape-text" :class="text.align">
<ProsemirrorEditor <ProsemirrorEditor