Skip to content

D
dataease
提交 e09e352f authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat:组件样式修改时可以延迟保存组件镜像

上级 b2ea0c71
隐藏空白字符变更
内嵌 并排
正在显示 包含 51 行增加 和 201 行删除
frontend/src/components/canvas/components/RectangleAttr.vue
浏览文件 @ e09e352f
......@@ -3,7 +3,7 @@
<div style="position: relative;">
<div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
<el-tooltip content="边框风格">
<el-select v-model="styleInfo.borderStyle" size="mini">
<el-select v-model="styleInfo.borderStyle" size="mini" @change="styleChange">
<el-option
v-for="item in lineStyle"
:key="item.value"
......@@ -21,7 +21,7 @@
<div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="边框宽度">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="" @change="styleChange">
<el-option
v-for="item in lineFont"
:key="item.value"
......@@ -38,7 +38,7 @@
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
</div>
</div>
......@@ -48,7 +48,7 @@
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
</div>
</div>
</div>
......@@ -158,6 +158,9 @@ export default {
} else {
return y
}
},
styleChange() {
this.$store.state.styleChangeTimes++
}
}
}
......
frontend/src/components/canvas/store/snapshot.js
浏览文件 @ e09e352f
......@@ -7,7 +7,8 @@ export default {
snapshotStyleData: [], // 样式改变也记录快照
snapshotIndex: -1, // 快照索引
changeTimes: -1, // 修改次数
lastSaveSnapshotIndex: 0 // 最后保存是snapshotIndex的索引
lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
styleChangeTimes: 0 // 组件样式修改次数
},
mutations: {
undo(state) {
......
frontend/src/store/index.js
浏览文件 @ e09e352f
......@@ -72,6 +72,7 @@ const data = {
},
setCurComponent(state, { component, index }) {
state.styleChangeTimes = 0
state.curComponent = component
state.curComponentIndex = index
},
......
frontend/src/views/Tinymce/FilterTextAttr.vue
浏览文件 @ e09e352f
......@@ -7,7 +7,7 @@
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange"/>
</div>
<el-tooltip :content="$t('panel.fontWeight')">
......@@ -15,7 +15,7 @@
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange"/>
</div>
<el-tooltip :content="$t('panel.letterSpacing')">
......@@ -23,7 +23,7 @@
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange"/>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
......@@ -32,7 +32,7 @@
<i class="icon iconfont icon-zimua" @click="goColor" />
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
</div>
</div>
......@@ -42,7 +42,7 @@
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange"/>
</div>
</div>
</div>
......@@ -136,6 +136,10 @@ export default {
} else {
return y
}
},
styleChange() {
debugger
this.$store.state.styleChangeTimes++
}
}
}
......
frontend/src/views/Tinymce/RectangleAttr.vue deleted 100644 → 0
浏览文件 @ b2ea0c71
<template>
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
<el-tooltip content="边框风格">
<el-select v-model="styleInfo.borderStyle" size="mini">
<el-option
v-for="item in lineStyle"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left;">
<i :class="item.icon" />
</span>
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
</el-tooltip>
</div>
<div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="边框宽度">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
<el-option
v-for="item in lineFont"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-tooltip>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
</div>
</el-card>
</template>
<script>
import { mapState } from 'vuex'
export default {
props: {
scrollLeft: {
type: Number,
default: 0
},
scrollTop: {
type: Number,
default: 0
}
},
data() {
return {
lineStyle: [{
icon: 'iconfont icon-solid_line',
value: 'solid',
label: '实线'
}, {
icon: 'iconfont icon-xuxian',
value: 'dashed',
label: '虚线'
}, {
icon: 'iconfont icon-dianxian',
value: 'dotted',
label: '点线'
}],
lineFont: [{
value: '0',
label: '0'
}, {
value: '1',
label: '1'
}, {
value: '2',
label: '2'
}, {
value: '3',
label: '3'
}, {
value: '4',
label: '4'
}, {
value: '5',
label: '5'
}]
}
},
computed: {
boardDivColor() {
const style = {
height: '2px',
background: this.styleInfo.borderColor
}
return style
},
backgroundDivColor() {
const style = {
height: '2px',
background: this.styleInfo.backgroundColor
}
return style
},
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
}
return style
},
styleInfo() {
return this.$store.state.curComponent.style
},
...mapState([
'curComponent',
'curCanvasScale',
'canvasStyleData'
])
},
methods: {
goBoardColor() {
this.$refs.boardColorPicker.handleTrigger()
},
goBackgroundColor() {
this.$refs.backgroundColorPicker.handleTrigger()
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 60
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * this.curCanvasScale.scaleHeight / 100
} else {
return y
}
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 20px;
padding-top: 0;
height: 100%;
}
.el-card-main {
height: 34px;
z-index: 10;
width: 210px;
position: absolute;
}
.el-card-main ::v-deep .el-card__body {
padding: 0px!important;
}
</style>
frontend/src/views/Tinymce/TextAttr.vue
浏览文件 @ e09e352f
......@@ -2,7 +2,7 @@
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
<el-radio-group v-model="styleInfo.textAlign" size="mini">
<el-radio-group v-model="styleInfo.textAlign" size="mini" @change="styleChange">
<el-radio-button
v-for="item in textAlignOptions"
:key="item.label"
......@@ -22,7 +22,7 @@
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" @change="styleChange" />
</div>
<el-tooltip :content="$t('panel.fontWeight')">
......@@ -30,7 +30,7 @@
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" @change="styleChange" />
</div>
<el-tooltip :content="$t('panel.letterSpacing')">
......@@ -38,7 +38,7 @@
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
......@@ -47,7 +47,7 @@
<i class="icon iconfont icon-zimua" @click="goColor" />
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
</div>
</div>
......@@ -57,7 +57,7 @@
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" @change="styleChange" />
</div>
</div>
</div>
......@@ -151,6 +151,9 @@ export default {
} else {
return y
}
},
styleChange() {
this.$store.state.styleChangeTimes++
}
}
}
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ e09e352f
......@@ -274,7 +274,8 @@ export default {
currentDropElement: null,
adviceGroupId: null,
scrollLeft: 0,
scrollTop: 0
scrollTop: 0,
timeMachine: null
}
},
......@@ -305,6 +306,12 @@ export default {
},
panelInfo(newVal, oldVal) {
this.init(newVal.id)
},
'$store.state.styleChangeTimes'() {
if (this.$store.state.styleChangeTimes > 0) {
this.destroyTimeMachine()
this.recordStyleChange(this.$store.state.styleChangeTimes)
}
}
},
created() {
......@@ -674,6 +681,21 @@ export default {
debugger
this.scrollLeft = event.target.scrollLeft
this.scrollTop = event.target.scrollTop
},
destroyTimeMachine() {
this.timeMachine && clearTimeout(this.timeMachine)
this.timeMachine = null
},
// 如果内部样式有变化 1秒钟后保存一个镜像
recordStyleChange(index) {
this.timeMachine = setTimeout(() => {
if (index === this.$store.state.styleChangeTimes) {
this.$store.commit('recordSnapshot')
this.$store.state.styleChangeTimes = 0
}
this.destroyTimeMachine()
}, 1000)
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论