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

perf: 形状选中范围优化

Browse Source
This commit is contained in:
pipipi-pikachu 2022-01-15 16:34:53 +08:00
parent e2044636f6
commit 6526bf06ed
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@
<div <div
class="element-content" class="element-content"
:style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }" :style="{ filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '' }"
@mousedown="$event => handleSelectElement($event)"
> >
<svg <svg
overflow="visible" overflow="visible"
@ -53,7 +54,6 @@
stroke="transparent" stroke="transparent"
stroke-width="20" stroke-width="20"
fill="none" fill="none"
@mousedown="$event => handleSelectElement($event)"
v-contextmenu="contextmenus" v-contextmenu="contextmenus"
></path> ></path>
</svg> </svg>

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

@ -44,6 +44,7 @@
:transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`" :transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
> >
<path <path
class="shape-path"
vector-effect="non-scaling-stroke" vector-effect="non-scaling-stroke"
stroke-linecap="butt" stroke-linecap="butt"
stroke-miterlimit="8" stroke-miterlimit="8"
@ -57,7 +58,7 @@
</g> </g>
</svg> </svg>
<div class="shape-text" :class="text.align"> <div class="shape-text" :class="[text.align, { 'editable': editable }]">
<ProsemirrorEditor <ProsemirrorEditor
v-if="editable" v-if="editable"
:elementId="elementInfo.id" :elementId="elementInfo.id"
@ -196,6 +197,7 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.editable-element-shape { .editable-element-shape {
position: absolute; position: absolute;
pointer-events: none;
&.lock .element-content { &.lock .element-content {
cursor: default; cursor: default;
@ -215,6 +217,10 @@ export default defineComponent({
transform-origin: 0 0; transform-origin: 0 0;
overflow: visible; overflow: visible;
} }
.shape-path {
pointer-events: all;
}
} }
.shape-text { .shape-text {
position: absolute; position: absolute;
@ -227,6 +233,11 @@ export default defineComponent({
padding: 10px; padding: 10px;
line-height: 1.2; line-height: 1.2;
word-break: break-word; word-break: break-word;
pointer-events: none;
&.editable {
pointer-events: all;
}
&.top { &.top {
justify-content: flex-start; justify-content: flex-start;