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