jasder
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

This commit is contained in:
pipipi-pikachu 2020-12-24 22:50:53 +08:00
parent 57914f1e23
commit c58a6a4d24
6 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,8 +45,8 @@
:key="element.id" :key="element.id"
:elementInfo="element" :elementInfo="element"
:elementIndex="index + 1" :elementIndex="index + 1"
:isActive="activeElementIdList.includes(element.id)" :isSelected="activeElementIdList.includes(element.id)"
:isHandleEl="element.id === handleElementId" :isActive="element.id === handleElementId"
:isActiveGroupElement="activeGroupElementId === element.id" :isActiveGroupElement="activeGroupElementId === element.id"
:isMultiSelect="activeElementIdList.length > 1" :isMultiSelect="activeElementIdList.length > 1"
:selectElement="selectElement" :selectElement="selectElement"

6
src/views/_common/_element/EditableElement.vue
View File

@ -9,8 +9,8 @@
:is="currentElementComponent" :is="currentElementComponent"
:canvasScale="canvasScale" :canvasScale="canvasScale"
:elementInfo="elementInfo" :elementInfo="elementInfo"
:isSelected="isSelected"
:isActive="isActive" :isActive="isActive"
:isHandleEl="isHandleEl"
:isActiveGroupElement="isActiveGroupElement" :isActiveGroupElement="isActiveGroupElement"
:isMultiSelect="isMultiSelect" :isMultiSelect="isMultiSelect"
:animationIndex="animationIndex" :animationIndex="animationIndex"
@ -52,11 +52,11 @@ export default defineComponent({
type: Number, type: Number,
required: true, required: true,
}, },
isActive: { isSelected: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
isHandleEl: { isActive: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },

10
src/views/_common/_element/ImageElement/index.vue
View File

@ -73,9 +73,9 @@
<div <div
class="operate" class="operate"
:class="{ :class="{
'selected': isSelected,
'multi-select': isMultiSelect && isSelected,
'active': isActive, 'active': isActive,
'multi-select': isMultiSelect && isActive,
'selected': isHandleEl,
}" }"
:style="{ transform: `scale(${1 / canvasScale})` }" :style="{ transform: `scale(${1 / canvasScale})` }"
v-if="!isCliping" v-if="!isCliping"
@ -150,11 +150,11 @@ export default defineComponent({
type: Number, type: Number,
required: true, required: true,
}, },
isActive: { isSelected: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
isHandleEl: { isActive: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
@ -332,7 +332,7 @@ export default defineComponent({
z-index: 100; z-index: 100;
user-select: none; user-select: none;
&.active { &.selected {
.operate-border-line, .operate-border-line,
.operate-resize-handler, .operate-resize-handler,
.operate-rotate-handler { .operate-rotate-handler {

17
src/views/_common/_element/TextElement/index.vue
View File

@ -32,9 +32,9 @@
<div <div
class="operate" class="operate"
:class="{ :class="{
'selected': isSelected,
'multi-select': isMultiSelect && isSelected,
'active': isActive, 'active': isActive,
'multi-select': isMultiSelect && isActive,
'selected': isHandleEl
}" }"
:style="{ transform: `scale(${1 / canvasScale})` }" :style="{ transform: `scale(${1 / canvasScale})` }"
v-contextmenu="contextmenus" v-contextmenu="contextmenus"
@ -49,7 +49,8 @@
@mousedown="handleSelectElement($event)" @mousedown="handleSelectElement($event)"
/> />
<template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)"> <template v-if="!elementInfo.lock && (isActiveGroupElement || !isMultiSelect)">
<ResizeHandler class="operate-resize-handler" <ResizeHandler
class="operate-resize-handler"
v-for="point in resizeHandlers" v-for="point in resizeHandlers"
:key="point.direction" :key="point.direction"
:type="point.direction" :type="point.direction"
@ -101,11 +102,11 @@ export default defineComponent({
type: Number, type: Number,
required: true, required: true,
}, },
isActive: { isSelected: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
isHandleEl: { isActive: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
@ -210,10 +211,10 @@ export default defineComponent({
z-index: 100; z-index: 100;
user-select: none; user-select: none;
&.active { &.selected {
.operate-border-line, .operate-border-line,
.operate-resize-handler, .operate-resize-handler,
.operate-rotate-handles { .operate-rotate-handler {
display: block; display: block;
} }
} }
@ -224,7 +225,7 @@ export default defineComponent({
.operate-border-line, .operate-border-line,
.operate-resize-handler, .operate-resize-handler,
.operate-rotate-handles { .operate-rotate-handler {
display: none; display: none;
} }
} }

4
src/views/_common/_operate/ResizeHandler.vue
View File

@ -25,9 +25,9 @@ export default {
left: 0; left: 0;
top: 0; top: 0;
margin: -5px 0 0 -5px; margin: -5px 0 0 -5px;
border: 1px solid #666; border: 1px solid $themeColor;
background-color: #fff; background-color: #fff;
border-radius: 50%; border-radius: 1px;
&.left-top { &.left-top {
cursor: nwse-resize; cursor: nwse-resize;

12
src/views/_common/_operate/RotateHandler.vue
View File

@ -14,16 +14,18 @@ export default {
.rotate-handler { .rotate-handler {
position: absolute; position: absolute;
top: -24px; top: -24px;
margin: -12px 0 0 -12px; margin: -10px 0 0 -10px;
width: 24px; width: 20px;
height: 24px; height: 20px;
background-color: #333;
border-radius: 50%; border-radius: 50%;
color: #fff; background-color: #fff;
box-shadow: 1px 1px 2px #888;
.rotate-icon { .rotate-icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 12px;
color: #666;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;