Skip to content

D
dataease
提交 09aaaede authored 作者: junjie's avatar junjie
浏览文件
操作

fix:代码规范

上级 076a66ed
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 444 行增加 和 457 行删除
frontend/src/components/RightPanel/index.vue
浏览文件 @ 09aaaede
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container"> <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
<div class="rightPanel-background" /> <div class="rightPanel-background" />
<div class="rightPanel"> <div class="rightPanel">
<!-- <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">--> <!-- <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">-->
<!-- <i :class="show?'el-icon-close':'el-icon-setting'" />--> <!-- <i :class="show?'el-icon-close':'el-icon-setting'" />-->
<!-- </div>--> <!-- </div>-->
<div class="rightPanel-items"> <div class="rightPanel-items">
<slot /> <slot />
</div> </div>
......
frontend/src/components/canvas/components/AnimationList.vue
浏览文件 @ 09aaaede
<template> <template>
<div class="animation-list"> <div class="animation-list">
<div class="div-animation"> <div class="div-animation">
<el-button @click="isShowAnimation = true">添加动画</el-button> <el-button @click="isShowAnimation = true">添加动画</el-button>
<el-button @click="previewAnimate">预览动画</el-button> <el-button @click="previewAnimate">预览动画</el-button>
<div> <div>
<el-tag <el-tag
v-for="(tag, index) in curComponent.animations" v-for="(tag, index) in curComponent.animations"
:key="index" :key="index"
closable closable
@close="removeAnimation(index)" @close="removeAnimation(index)"
> >
{{ tag.label }} {{ tag.label }}
</el-tag> </el-tag>
</div> </div>
</div>
<!-- 选择动画 -->
<Modal v-model="isShowAnimation">
<el-tabs v-model="animationActiveName">
<el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
<el-scrollbar class="animate-container">
<div
class="animate"
v-for="(animate, index) in item.children"
:key="index"
@mouseover="hoverPreviewAnimate = animate.value"
@click="addAnimation(animate)"
>
<div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
{{ animate.label }}
</div>
</div>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</Modal>
</div> </div>
<!-- 选择动画 -->
<Modal v-model="isShowAnimation">
<el-tabs v-model="animationActiveName">
<el-tab-pane v-for="item in animationClassData" :key="item.label" :label="item.label" :name="item.label">
<el-scrollbar class="animate-container">
<div
v-for="(animate, index) in item.children"
:key="index"
class="animate"
@mouseover="hoverPreviewAnimate = animate.value"
@click="addAnimation(animate)"
>
<div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
{{ animate.label }}
</div>
</div>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</Modal>
</div>
</template> </template>
<script> <script>
...@@ -45,33 +45,33 @@ import animationClassData from '@/components/canvas/utils/animationClassData' ...@@ -45,33 +45,33 @@ import animationClassData from '@/components/canvas/utils/animationClassData'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
components: { Modal }, components: { Modal },
data() { data() {
return { return {
isShowAnimation: false, isShowAnimation: false,
hoverPreviewAnimate: '', hoverPreviewAnimate: '',
animationActiveName: '进入', animationActiveName: '进入',
animationClassData, animationClassData,
showAnimatePanel: false, showAnimatePanel: false
} }
},
computed: mapState([
'curComponent'
]),
methods: {
addAnimation(animate) {
this.$store.commit('addAnimation', animate)
this.isShowAnimation = false
}, },
computed: mapState([
'curComponent',
]),
methods: {
addAnimation(animate) {
this.$store.commit('addAnimation', animate)
this.isShowAnimation = false
},
previewAnimate() {
eventBus.$emit('runAnimation')
},
removeAnimation(index) { previewAnimate() {
this.$store.commit('removeAnimation', index) eventBus.$emit('runAnimation')
},
}, },
removeAnimation(index) {
this.$store.commit('removeAnimation', index)
}
}
} }
</script> </script>
......
frontend/src/components/canvas/components/Editor/ContextMenu.vue
浏览文件 @ 09aaaede
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
bus.$emit('component-dialog-edit') bus.$emit('component-dialog-edit')
} }
//编辑样式组件 // 编辑样式组件
if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') { if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
bus.$emit('component-dialog-style') bus.$emit('component-dialog-style')
......
frontend/src/components/canvas/components/EventList.vue
浏览文件 @ 09aaaede
<template> <template>
<div class="event-list"> <div class="event-list">
<div class="div-events"> <div class="div-events">
<el-button @click="isShowEvent = true">添加事件</el-button> <el-button @click="isShowEvent = true">添加事件</el-button>
<div> <div>
<el-tag <el-tag
v-for="event in Object.keys(curComponent.events)" v-for="event in Object.keys(curComponent.events)"
:key="event" :key="event"
closable closable
@close="removeEvent(event)" @close="removeEvent(event)"
> >
{{ event }} {{ event }}
</el-tag> </el-tag>
</div> </div>
</div>
<!-- 选择事件 -->
<Modal v-model="isShowEvent">
<el-tabs v-model="eventActiveName">
<el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
<el-input v-if="item.key == 'redirect'" v-model="item.param" type="textarea" placeholder="请输入完整的 URL" />
<el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
<el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
</el-tab-pane>
</el-tabs>
</Modal>
</div> </div>
<!-- 选择事件 -->
<Modal v-model="isShowEvent">
<el-tabs v-model="eventActiveName">
<el-tab-pane v-for="item in eventList" :key="item.key" :label="item.label" :name="item.key" style="padding: 0 20px">
<el-input v-if="item.key == 'redirect'" v-model="item.param" type="textarea" placeholder="请输入完整的 URL" />
<el-input v-if="item.key == 'alert'" v-model="item.param" type="textarea" placeholder="请输入要 alert 的内容" />
<el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
</el-tab-pane>
</el-tabs>
</Modal>
</div>
</template> </template>
<script> <script>
...@@ -33,28 +33,28 @@ import Modal from '@/components/canvas/components/Modal' ...@@ -33,28 +33,28 @@ import Modal from '@/components/canvas/components/Modal'
import { eventList } from '@/components/canvas/utils/events' import { eventList } from '@/components/canvas/utils/events'
export default { export default {
components: { Modal }, components: { Modal },
data() { data() {
return { return {
isShowEvent: false, isShowEvent: false,
eventURL: '', eventURL: '',
eventActiveName: 'redirect', eventActiveName: 'redirect',
eventList, eventList
} }
},
computed: mapState([
'curComponent'
]),
methods: {
addEvent(event, param) {
this.isShowEvent = false
this.$store.commit('addEvent', { event, param })
}, },
computed: mapState([
'curComponent',
]),
methods: {
addEvent(event, param) {
this.isShowEvent = false
this.$store.commit('addEvent', { event, param })
},
removeEvent(event) { removeEvent(event) {
this.$store.commit('removeEvent', event) this.$store.commit('removeEvent', event)
}, }
}, }
} }
</script> </script>
......
frontend/src/components/canvas/components/Modal.vue
浏览文件 @ 09aaaede
<template> <template>
<div class="modal-bg" v-if="show" @click="hide"> <div v-if="show" class="modal-bg" @click="hide">
<div class="fadeInLeft animated modal" @click="stopPropagation"> <div class="fadeInLeft animated modal" @click="stopPropagation">
<slot></slot> <slot />
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
model: { model: {
prop: 'show', prop: 'show',
event: 'change', event: 'change'
}, },
props: { props: {
show: { show: {
type: Boolean, type: Boolean,
default: false, default: false
}, }
},
methods: {
hide() {
this.$emit('change')
}, },
methods: {
hide() {
this.$emit('change')
},
stopPropagation(e) { stopPropagation(e) {
e.stopPropagation() e.stopPropagation()
}, }
}, }
} }
</script> </script>
...@@ -46,4 +46,4 @@ export default { ...@@ -46,4 +46,4 @@ export default {
height: 100%; height: 100%;
} }
} }
</style> </style>
\ No newline at end of file
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ 09aaaede
...@@ -3,12 +3,12 @@ ...@@ -3,12 +3,12 @@
<div class="toolbar"> <div class="toolbar">
<div class="canvas-config" style="margin-right: 10px"> <div class="canvas-config" style="margin-right: 10px">
<el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" /> <el-switch v-model="canvasStyleData.auxiliaryMatrix" :width="35" name="auxiliaryMatrix" />
<span>{{ $t('panel.matrix_design') }}</span> <span>{{ $t('panel.matrix_design') }}</span>
</div> </div>
<div class="canvas-config" style="margin-right: 10px"> <div class="canvas-config" style="margin-right: 10px">
<el-switch v-model="canvasStyleData.selfAdaption" :width="35" name="selfAdaption" /> <el-switch v-model="canvasStyleData.selfAdaption" :width="35" name="selfAdaption" />
<span>{{ $t('panel.canvas_self_adaption') }} </span> <span>{{ $t('panel.canvas_self_adaption') }} </span>
</div> </div>
......
frontend/src/components/canvas/custom-component/Picture.vue
浏览文件 @ 09aaaede
<template> <template>
<div style="overflow: hidden"> <div style="overflow: hidden">
<img :src="propValue"> <img :src="propValue">
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
propValue: { propValue: {
type: String, type: String,
require: true, require: true
}, }
}, }
} }
</script> </script>
...@@ -20,4 +20,4 @@ img { ...@@ -20,4 +20,4 @@ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
\ No newline at end of file
frontend/src/components/canvas/custom-component/VButton.vue
浏览文件 @ 09aaaede
<template> <template>
<button class="v-button">{{ propValue }}</button> <button class="v-button">{{ propValue }}</button>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
propValue: { propValue: {
type: String, type: String,
default: '', default: ''
}, }
}, }
} }
</script> </script>
...@@ -44,4 +44,4 @@ export default { ...@@ -44,4 +44,4 @@ export default {
color: #3a8ee6; color: #3a8ee6;
} }
} }
</style> </style>
\ No newline at end of file
frontend/src/components/canvas/store/animation.js
浏览文件 @ 09aaaede
export default { export default {
mutations: { mutations: {
addAnimation({ curComponent }, animation) { addAnimation({ curComponent }, animation) {
curComponent.animations.push(animation) curComponent.animations.push(animation)
},
removeAnimation({ curComponent }, index) {
curComponent.animations.splice(index, 1)
},
}, },
}
\ No newline at end of file removeAnimation({ curComponent }, index) {
curComponent.animations.splice(index, 1)
}
}
}
frontend/src/components/canvas/store/contextmenu.js
浏览文件 @ 09aaaede
export default { export default {
state: { state: {
menuTop: 0, // 右击菜单数据 menuTop: 0, // 右击菜单数据
menuLeft: 0, menuLeft: 0,
menuShow: false, menuShow: false
},
mutations: {
showContextMenu(state, { top, left }) {
state.menuShow = true
state.menuTop = top
state.menuLeft = left
}, },
mutations: {
showContextMenu(state, { top, left }) {
state.menuShow = true
state.menuTop = top
state.menuLeft = left
},
hideContextMenu(state) { hideContextMenu(state) {
state.menuShow = false state.menuShow = false
}, }
}, }
} }
\ No newline at end of file
frontend/src/components/canvas/store/event.js
浏览文件 @ 09aaaede
export default { export default {
mutations: { mutations: {
addEvent({ curComponent }, { event, param }) { addEvent({ curComponent }, { event, param }) {
curComponent.events[event] = param curComponent.events[event] = param
},
removeEvent({ curComponent }, event) {
delete curComponent.events[event]
},
}, },
}
\ No newline at end of file removeEvent({ curComponent }, event) {
delete curComponent.events[event]
}
}
}
frontend/src/components/canvas/store/lock.js
浏览文件 @ 09aaaede
export default { export default {
mutations: { mutations: {
lock({ curComponent }) { lock({ curComponent }) {
curComponent.isLock = true curComponent.isLock = true
},
unlock({ curComponent }) {
curComponent.isLock = false
},
}, },
}
\ No newline at end of file unlock({ curComponent }) {
curComponent.isLock = false
}
}
}
frontend/src/components/canvas/utils/animationClassData.js
浏览文件 @ 09aaaede
export default [ export default [
{ {
label: '进入', label: '进入',
children: [ children: [
{ label: '渐显', value: 'fadeIn' }, { label: '渐显', value: 'fadeIn' },
{ label: '向右进入', value: 'fadeInLeft' }, { label: '向右进入', value: 'fadeInLeft' },
{ label: '向左进入', value: 'fadeInRight' }, { label: '向左进入', value: 'fadeInRight' },
{ label: '向上进入', value: 'fadeInUp' }, { label: '向上进入', value: 'fadeInUp' },
{ label: '向下进入', value: 'fadeInDown' }, { label: '向下进入', value: 'fadeInDown' },
{ label: '向右长距进入', value: 'fadeInLeftBig' }, { label: '向右长距进入', value: 'fadeInLeftBig' },
{ label: '向左长距进入', value: 'fadeInRightBig' }, { label: '向左长距进入', value: 'fadeInRightBig' },
{ label: '向上长距进入', value: 'fadeInUpBig' }, { label: '向上长距进入', value: 'fadeInUpBig' },
{ label: '向下长距进入', value: 'fadeInDownBig' }, { label: '向下长距进入', value: 'fadeInDownBig' },
{ label: '旋转进入', value: 'rotateIn' }, { label: '旋转进入', value: 'rotateIn' },
{ label: '左顺时针旋转', value: 'rotateInDownLeft' }, { label: '左顺时针旋转', value: 'rotateInDownLeft' },
{ label: '右逆时针旋转', value: 'rotateInDownRight' }, { label: '右逆时针旋转', value: 'rotateInDownRight' },
{ label: '左逆时针旋转', value: 'rotateInUpLeft' }, { label: '左逆时针旋转', value: 'rotateInUpLeft' },
{ label: '右逆时针旋转', value: 'rotateInUpRight' }, { label: '右逆时针旋转', value: 'rotateInUpRight' },
{ label: '弹入', value: 'bounceIn' }, { label: '弹入', value: 'bounceIn' },
{ label: '向右弹入', value: 'bounceInLeft' }, { label: '向右弹入', value: 'bounceInLeft' },
{ label: '向左弹入', value: 'bounceInRight' }, { label: '向左弹入', value: 'bounceInRight' },
{ label: '向上弹入', value: 'bounceInUp' }, { label: '向上弹入', value: 'bounceInUp' },
{ label: '向下弹入', value: 'bounceInDown' }, { label: '向下弹入', value: 'bounceInDown' },
{ label: '光速从右进入', value: 'lightSpeedInRight' }, { label: '光速从右进入', value: 'lightSpeedInRight' },
{ label: '光速从左进入', value: 'lightSpeedInLeft' }, { label: '光速从左进入', value: 'lightSpeedInLeft' },
{ label: '光速从右退出', value: 'lightSpeedOutRight' }, { label: '光速从右退出', value: 'lightSpeedOutRight' },
{ label: '光速从左退出', value: 'lightSpeedOutLeft' }, { label: '光速从左退出', value: 'lightSpeedOutLeft' },
{ label: 'Y轴旋转', value: 'flip' }, { label: 'Y轴旋转', value: 'flip' },
{ label: '中心X轴旋转', value: 'flipInX' }, { label: '中心X轴旋转', value: 'flipInX' },
{ label: '中心Y轴旋转', value: 'flipInY' }, { label: '中心Y轴旋转', value: 'flipInY' },
{ label: '左长半径旋转', value: 'rollIn' }, { label: '左长半径旋转', value: 'rollIn' },
{ label: '由小变大进入', value: 'zoomIn' }, { label: '由小变大进入', value: 'zoomIn' },
{ label: '左变大进入', value: 'zoomInLeft' }, { label: '左变大进入', value: 'zoomInLeft' },
{ label: '右变大进入', value: 'zoomInRight' }, { label: '右变大进入', value: 'zoomInRight' },
{ label: '向上变大进入', value: 'zoomInUp' }, { label: '向上变大进入', value: 'zoomInUp' },
{ label: '向下变大进入', value: 'zoomInDown' }, { label: '向下变大进入', value: 'zoomInDown' },
{ label: '向右滑动展开', value: 'slideInLeft' }, { label: '向右滑动展开', value: 'slideInLeft' },
{ label: '向左滑动展开', value: 'slideInRight' }, { label: '向左滑动展开', value: 'slideInRight' },
{ label: '向上滑动展开', value: 'slideInUp' }, { label: '向上滑动展开', value: 'slideInUp' },
{ label: '向下滑动展开', value: 'slideInDown' }, { label: '向下滑动展开', value: 'slideInDown' }
], ]
}, },
{ {
label: '强调', label: '强调',
children: [ children: [
{ label: '弹跳', value: 'bounce' }, { label: '弹跳', value: 'bounce' },
{ label: '闪烁', value: 'flash' }, { label: '闪烁', value: 'flash' },
{ label: '放大缩小', value: 'pulse' }, { label: '放大缩小', value: 'pulse' },
{ label: '放大缩小弹簧', value: 'rubberBand' }, { label: '放大缩小弹簧', value: 'rubberBand' },
{ label: '左右晃动', value: 'headShake' }, { label: '左右晃动', value: 'headShake' },
{ label: '左右扇形摇摆', value: 'swing' }, { label: '左右扇形摇摆', value: 'swing' },
{ label: '放大晃动缩小', value: 'tada' }, { label: '放大晃动缩小', value: 'tada' },
{ label: '扇形摇摆', value: 'wobble' }, { label: '扇形摇摆', value: 'wobble' },
{ label: '左右上下晃动', value: 'jello' }, { label: '左右上下晃动', value: 'jello' },
{ label: 'Y轴旋转', value: 'flip' }, { label: 'Y轴旋转', value: 'flip' }
], ]
}, },
{ {
label: '退出', label: '退出',
children: [ children: [
{ label: '渐隐', value: 'fadeOut' }, { label: '渐隐', value: 'fadeOut' },
{ label: '向左退出', value: 'fadeOutLeft' }, { label: '向左退出', value: 'fadeOutLeft' },
{ label: '向右退出', value: 'fadeOutRight' }, { label: '向右退出', value: 'fadeOutRight' },
{ label: '向上退出', value: 'fadeOutUp' }, { label: '向上退出', value: 'fadeOutUp' },
{ label: '向下退出', value: 'fadeOutDown' }, { label: '向下退出', value: 'fadeOutDown' },
{ label: '向左长距退出', value: 'fadeOutLeftBig' }, { label: '向左长距退出', value: 'fadeOutLeftBig' },
{ label: '向右长距退出', value: 'fadeOutRightBig' }, { label: '向右长距退出', value: 'fadeOutRightBig' },
{ label: '向上长距退出', value: 'fadeOutUpBig' }, { label: '向上长距退出', value: 'fadeOutUpBig' },
{ label: '向下长距退出', value: 'fadeOutDownBig' }, { label: '向下长距退出', value: 'fadeOutDownBig' },
{ label: '旋转退出', value: 'rotateOut' }, { label: '旋转退出', value: 'rotateOut' },
{ label: '左顺时针旋转', value: 'rotateOutDownLeft' }, { label: '左顺时针旋转', value: 'rotateOutDownLeft' },
{ label: '右逆时针旋转', value: 'rotateOutDownRight' }, { label: '右逆时针旋转', value: 'rotateOutDownRight' },
{ label: '左逆时针旋转', value: 'rotateOutUpLeft' }, { label: '左逆时针旋转', value: 'rotateOutUpLeft' },
{ label: '右逆时针旋转', value: 'rotateOutUpRight' }, { label: '右逆时针旋转', value: 'rotateOutUpRight' },
{ label: '弹出', value: 'bounceOut' }, { label: '弹出', value: 'bounceOut' },
{ label: '向左弹出', value: 'bounceOutLeft' }, { label: '向左弹出', value: 'bounceOutLeft' },
{ label: '向右弹出', value: 'bounceOutRight' }, { label: '向右弹出', value: 'bounceOutRight' },
{ label: '向上弹出', value: 'bounceOutUp' }, { label: '向上弹出', value: 'bounceOutUp' },
{ label: '向下弹出', value: 'bounceOutDown' }, { label: '向下弹出', value: 'bounceOutDown' },
{ label: '中心X轴旋转', value: 'flipOutX' }, { label: '中心X轴旋转', value: 'flipOutX' },
{ label: '中心Y轴旋转', value: 'flipOutY' }, { label: '中心Y轴旋转', value: 'flipOutY' },
{ label: '左长半径旋转', value: 'rollOut' }, { label: '左长半径旋转', value: 'rollOut' },
{ label: '由小变大退出', value: 'zoomOut' }, { label: '由小变大退出', value: 'zoomOut' },
{ label: '左变大退出', value: 'zoomOutLeft' }, { label: '左变大退出', value: 'zoomOutLeft' },
{ label: '右变大退出', value: 'zoomOutRight' }, { label: '右变大退出', value: 'zoomOutRight' },
{ label: '向上变大退出', value: 'zoomOutUp' }, { label: '向上变大退出', value: 'zoomOutUp' },
{ label: '向下变大退出', value: 'zoomOutDown' }, { label: '向下变大退出', value: 'zoomOutDown' },
{ label: '向左滑动收起', value: 'slideOutLeft' }, { label: '向左滑动收起', value: 'slideOutLeft' },
{ label: '向右滑动收起', value: 'slideOutRight' }, { label: '向右滑动收起', value: 'slideOutRight' },
{ label: '向上滑动收起', value: 'slideOutUp' }, { label: '向上滑动收起', value: 'slideOutUp' },
{ label: '向下滑动收起', value: 'slideOutDown' }, { label: '向下滑动收起', value: 'slideOutDown' }
], ]
}, }
] ]
frontend/src/components/canvas/utils/decomposeComponent.js
浏览文件 @ 09aaaede
...@@ -3,18 +3,18 @@ import { mod360 } from './translate' ...@@ -3,18 +3,18 @@ import { mod360 } from './translate'
// 将组合中的各个子组件拆分出来，并计算它们新的 style // 将组合中的各个子组件拆分出来，并计算它们新的 style
export default function decomposeComponent(component, editorRect, parentStyle) { export default function decomposeComponent(component, editorRect, parentStyle) {
const componentRect = $(`#component${component.id}`).getBoundingClientRect() const componentRect = $(`#component${component.id}`).getBoundingClientRect()
// 获取元素的中心点坐标 // 获取元素的中心点坐标
const center = { const center = {
x: componentRect.left - editorRect.left + componentRect.width / 2, x: componentRect.left - editorRect.left + componentRect.width / 2,
y: componentRect.top - editorRect.top + componentRect.height / 2, y: componentRect.top - editorRect.top + componentRect.height / 2
} }
component.style.rotate = mod360(component.style.rotate + parentStyle.rotate) component.style.rotate = mod360(component.style.rotate + parentStyle.rotate)
component.style.width = parseFloat(component.groupStyle.width) / 100 * parentStyle.width component.style.width = parseFloat(component.groupStyle.width) / 100 * parentStyle.width
component.style.height = parseFloat(component.groupStyle.height) / 100 * parentStyle.height component.style.height = parseFloat(component.groupStyle.height) / 100 * parentStyle.height
// 计算出元素新的 top left 坐标 // 计算出元素新的 top left 坐标
component.style.left = center.x - component.style.width / 2 component.style.left = center.x - component.style.width / 2
component.style.top = center.y - component.style.height / 2 component.style.top = center.y - component.style.height / 2
component.groupStyle = {} component.groupStyle = {}
} }
\ No newline at end of file
frontend/src/components/canvas/utils/eventBus.js
浏览文件 @ 09aaaede
import Vue from 'vue' import Vue from 'vue'
// 用于监听、触发事件 // 用于监听、触发事件
export default new Vue() export default new Vue()
\ No newline at end of file
frontend/src/components/canvas/utils/events.js
浏览文件 @ 09aaaede
// 编辑器自定义事件 // 编辑器自定义事件
const events = { const events = {
redirect(url) { redirect(url) {
if (url) { if (url) {
window.location.href = url window.location.href = url
} }
}, },
alert(msg) { alert(msg) {
if (msg) { if (msg) {
alert(msg) alert(msg)
} }
}, }
} }
const mixins = { const mixins = {
methods: events, methods: events
} }
const eventList = [ const eventList = [
{ {
key: 'redirect', key: 'redirect',
label: '跳转事件', label: '跳转事件',
event: events.redirect, event: events.redirect,
param: '', param: ''
}, },
{ {
key: 'alert', key: 'alert',
label: 'alert 事件', label: 'alert 事件',
event: events.alert, event: events.alert,
param: '', param: ''
}, }
] ]
export { export {
mixins, mixins,
events, events,
eventList, eventList
} }
\ No newline at end of file
frontend/src/components/canvas/utils/generateID.js
浏览文件 @ 09aaaede
let id = 0 let id = 0
// 主要用于 Vue 的 diff 算法，为每个元素创建一个独一无二的 ID // 主要用于 Vue 的 diff 算法，为每个元素创建一个独一无二的 ID
export default function generateID() { export default function generateID() {
return id++ return id++
} }
\ No newline at end of file
frontend/src/components/canvas/utils/runAnimation.js
浏览文件 @ 09aaaede
export default async function runAnimation($el, animations = []) { export default async function runAnimation($el, animations = []) {
const play = (animation) => new Promise(resolve => { const play = (animation) => new Promise(resolve => {
$el.classList.add(animation.value, 'animated') $el.classList.add(animation.value, 'animated')
const removeAnimation = () => { const removeAnimation = () => {
$el.removeEventListener('animationend', removeAnimation) $el.removeEventListener('animationend', removeAnimation)
$el.removeEventListener('animationcancel', removeAnimation) $el.removeEventListener('animationcancel', removeAnimation)
$el.classList.remove(animation.value, 'animated') $el.classList.remove(animation.value, 'animated')
resolve() resolve()
}
$el.addEventListener('animationend', removeAnimation)
$el.addEventListener('animationcancel', removeAnimation)
})
for (let i = 0, len = animations.length; i < len; i++) {
await play(animations[i])
} }
$el.addEventListener('animationend', removeAnimation)
$el.addEventListener('animationcancel', removeAnimation)
})
for (let i = 0, len = animations.length; i < len; i++) {
await play(animations[i])
}
} }
frontend/src/components/canvas/utils/shortcutKey.js
浏览文件 @ 09aaaede
import store from '@/store' import store from '@/store'
import eventBus from '@/components/canvas/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
const ctrlKey = 17, const ctrlKey = 17
vKey = 86, // 粘贴 const vKey = 86 // 粘贴
cKey = 67, // 复制 const cKey = 67 // 复制
xKey = 88, // 剪切 const xKey = 88 // 剪切
yKey = 89, // 重做 const yKey = 89 // 重做
zKey = 90, // 撤销 const zKey = 90 // 撤销
gKey = 71, // 组合 const gKey = 71 // 组合
bKey = 66, // 拆分 const bKey = 66 // 拆分
lKey = 76, // 锁定 const lKey = 76 // 锁定
uKey = 85, // 解锁 const uKey = 85 // 解锁
sKey = 83, // 保存 const sKey = 83 // 保存
pKey = 80, // 预览 const pKey = 80 // 预览
dKey = 68, // 删除 const dKey = 68 // 删除
deleteKey = 46, // 删除 const deleteKey = 46 // 删除
eKey = 69 // 清空画布 const eKey = 69 // 清空画布
export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90] export const keycodes = [66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]
// 与组件状态无关的操作 // 与组件状态无关的操作
const basemap = { const basemap = {
[vKey]: paste, [vKey]: paste,
[yKey]: redo, [yKey]: redo,
[zKey]: undo, [zKey]: undo,
[sKey]: save, [sKey]: save,
[pKey]: preview, [pKey]: preview,
[eKey]: clearCanvas, [eKey]: clearCanvas
} }
// 组件锁定状态下可以执行的操作 // 组件锁定状态下可以执行的操作
const lockMap = { const lockMap = {
...basemap, ...basemap,
[uKey]: unlock, [uKey]: unlock
} }
// 组件未锁定状态下可以执行的操作 // 组件未锁定状态下可以执行的操作
const unlockMap = { const unlockMap = {
...basemap, ...basemap,
[cKey]: copy, [cKey]: copy,
[xKey]: cut, [xKey]: cut,
[gKey]: compose, [gKey]: compose,
[bKey]: decompose, [bKey]: decompose,
[dKey]: deleteComponent, [dKey]: deleteComponent,
[deleteKey]: deleteComponent, [deleteKey]: deleteComponent,
[lKey]: lock, [lKey]: lock
} }
let isCtrlDown = false let isCtrlDown = false
// 全局监听按键操作并执行相应命令 // 全局监听按键操作并执行相应命令
export function listenGlobalKeyDown() { export function listenGlobalKeyDown() {
window.onkeydown = (e) => { window.onkeydown = (e) => {
const { curComponent } = store.state const { curComponent } = store.state
if (e.keyCode == ctrlKey) { if (e.keyCode == ctrlKey) {
isCtrlDown = true isCtrlDown = true
} else if (e.keyCode == deleteKey && curComponent) { } else if (e.keyCode == deleteKey && curComponent) {
store.commit('deleteComponent') store.commit('deleteComponent')
store.commit('recordSnapshot') store.commit('recordSnapshot')
} else if (isCtrlDown) { } else if (isCtrlDown) {
if (!curComponent || !curComponent.isLock) { if (!curComponent || !curComponent.isLock) {
e.preventDefault() e.preventDefault()
unlockMap[e.keyCode] && unlockMap[e.keyCode]() unlockMap[e.keyCode] && unlockMap[e.keyCode]()
} else if (curComponent && curComponent.isLock) { } else if (curComponent && curComponent.isLock) {
e.preventDefault() e.preventDefault()
lockMap[e.keyCode] && lockMap[e.keyCode]() lockMap[e.keyCode] && lockMap[e.keyCode]()
} }
}
} }
}
window.onkeyup = (e) => { window.onkeyup = (e) => {
if (e.keyCode == ctrlKey) { if (e.keyCode == ctrlKey) {
isCtrlDown = false isCtrlDown = false
}
} }
}
} }
function copy() { function copy() {
store.commit('copy') store.commit('copy')
} }
function paste() { function paste() {
store.commit('paste') store.commit('paste')
store.commit('recordSnapshot') store.commit('recordSnapshot')
} }
function cut() { function cut() {
store.commit('cut') store.commit('cut')
} }
function redo() { function redo() {
store.commit('redo') store.commit('redo')
} }
function undo() { function undo() {
store.commit('undo') store.commit('undo')
} }
function compose() { function compose() {
if (store.state.areaData.components.length) { if (store.state.areaData.components.length) {
store.commit('compose') store.commit('compose')
store.commit('recordSnapshot') store.commit('recordSnapshot')
} }
} }
function decompose() { function decompose() {
const curComponent = store.state.curComponent const curComponent = store.state.curComponent
if (curComponent && !curComponent.isLock && curComponent.component == 'Group') { if (curComponent && !curComponent.isLock && curComponent.component == 'Group') {
store.commit('decompose') store.commit('decompose')
store.commit('recordSnapshot') store.commit('recordSnapshot')
} }
} }
function save() { function save() {
eventBus.$emit('save') eventBus.$emit('save')
} }
function preview() { function preview() {
eventBus.$emit('preview') eventBus.$emit('preview')
} }
function deleteComponent() { function deleteComponent() {
if (store.state.curComponent) { if (store.state.curComponent) {
store.commit('deleteComponent') store.commit('deleteComponent')
store.commit('recordSnapshot') store.commit('recordSnapshot')
} }
} }
function clearCanvas() { function clearCanvas() {
eventBus.$emit('clearCanvas') eventBus.$emit('clearCanvas')
} }
function lock() { function lock() {
store.commit('lock') store.commit('lock')
} }
function unlock() { function unlock() {
store.commit('unlock') store.commit('unlock')
} }
frontend/src/components/canvas/utils/toast.js
浏览文件 @ 09aaaede
import { Message } from 'element-ui' import { Message } from 'element-ui'
export default function toast(message = '', type = 'error', duration = 1500) { export default function toast(message = '', type = 'error', duration = 1500) {
Message({ Message({
message, message,
type, type,
duration, duration
}) })
} }
\ No newline at end of file
frontend/src/components/canvas/utils/utils.js
浏览文件 @ 09aaaede
export function deepCopy(target) { export function deepCopy(target) {
if (typeof target == 'object') { if (typeof target === 'object') {
const result = Array.isArray(target)? [] : {} const result = Array.isArray(target) ? [] : {}
for (const key in target) { for (const key in target) {
if (typeof target[key] == 'object') { if (typeof target[key] === 'object') {
result[key] = deepCopy(target[key]) result[key] = deepCopy(target[key])
} else { } else {
result[key] = target[key] result[key] = target[key]
} }
}
return result
} }
return target return result
}
return target
} }
export function swap(arr, i, j) { export function swap(arr, i, j) {
const temp = arr[i] const temp = arr[i]
arr[i] = arr[j] arr[i] = arr[j]
arr[j] = temp arr[j] = temp
} }
export function $(selector) { export function $(selector) {
return document.querySelector(selector) return document.querySelector(selector)
} }
\ No newline at end of file
frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItemback.vue
浏览文件 @ 09aaaede
...@@ -80,7 +80,7 @@ export default { ...@@ -80,7 +80,7 @@ export default {
background: '0% 0% / cover rgb(239, 241, 244)' background: '0% 0% / cover rgb(239, 241, 244)'
} }
if (this.subjectItemDetails) { if (this.subjectItemDetails) {
if (this.subjectItemDetails.panel.backgroundType === 'image'&&this.subjectItemDetails.panel.imageUrl) { if (this.subjectItemDetails.panel.backgroundType === 'image' && this.subjectItemDetails.panel.imageUrl) {
style = { style = {
width: '100%', width: '100%',
height: '100%', height: '100%',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论