提交 8016aba4 authored 作者: wangjiahao's avatar wangjiahao

feat:将画布整合在组件中

上级 5e8af7cf
...@@ -39,9 +39,9 @@ ...@@ -39,9 +39,9 @@
</template> </template>
<script> <script>
import Modal from '@/components/Modal' import Modal from '@/components/canvas/components/Modal'
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import animationClassData from '@/utils/animationClassData' import animationClassData from '@/components/canvas/utils/animationClassData'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</template> </template>
<script> <script>
import componentList from '@/custom-component/component-list' import componentList from '@/components/canvas/custom-component/component-list'
export default { export default {
data() { data() {
......
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
</template> </template>
<script> <script>
import { getStyle } from '@/utils/style' import { getStyle } from '@/components/canvas/utils/style'
import runAnimation from '@/utils/runAnimation' import runAnimation from '@/components/canvas/utils/runAnimation'
import { mixins } from '@/utils/events' import { mixins } from '@/components/canvas/utils/events'
export default { export default {
props: { props: {
......
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
</template> </template>
<script> <script>
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { getComponentRotatedStyle } from '@/utils/style' import { getComponentRotatedStyle } from '@/components/canvas/utils/style'
export default { export default {
data() { data() {
......
...@@ -19,10 +19,10 @@ ...@@ -19,10 +19,10 @@
</template> </template>
<script> <script>
import { getStyle } from '@/utils/style' import { getStyle } from '@/components/canvas/utils/style'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import ComponentWrapper from './ComponentWrapper' import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/utils/translate' import { changeStyleWithScale } from '@/components/canvas/utils/translate'
export default { export default {
model: { model: {
......
...@@ -20,10 +20,10 @@ ...@@ -20,10 +20,10 @@
</template> </template>
<script> <script>
import { getStyle } from '@/utils/style' import { getStyle } from '@/components/canvas/utils/style'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import ComponentWrapper from './ComponentWrapper' import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/utils/translate' import { changeStyleWithScale } from '@/components/canvas/utils/translate'
export default { export default {
components: { ComponentWrapper }, components: { ComponentWrapper },
......
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
</template> </template>
<script> <script>
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import runAnimation from '@/utils/runAnimation' import runAnimation from '@/components/canvas/utils/runAnimation'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import calculateComponentPositonAndSize from '@/utils/calculateComponentPositonAndSize' import calculateComponentPositonAndSize from '@/components/canvas/utils/calculateComponentPositonAndSize'
import { mod360 } from '@/utils/translate' import { mod360 } from '@/components/canvas/utils/translate'
export default { export default {
props: { props: {
......
...@@ -57,14 +57,14 @@ ...@@ -57,14 +57,14 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Shape from './Shape' import Shape from './Shape'
import { getStyle, getComponentRotatedStyle } from '@/utils/style' import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
import { $ } from '@/utils/utils' import { $ } from '@/components/canvas/utils/utils'
import ContextMenu from './ContextMenu' import ContextMenu from './ContextMenu'
import MarkLine from './MarkLine' import MarkLine from './MarkLine'
import Area from './Area' import Area from './Area'
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import Grid from './Grid' import Grid from './Grid'
import { changeStyleWithScale } from '@/utils/translate' import { changeStyleWithScale } from '@/components/canvas/utils/translate'
export default { export default {
components: { Shape, ContextMenu, MarkLine, Area, Grid }, components: { Shape, ContextMenu, MarkLine, Area, Grid },
......
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Modal from '@/components/Modal' import Modal from '@/components/canvas/components/Modal'
import { eventList } from '@/utils/events' import { eventList } from '@/components/canvas/utils/events'
export default { export default {
components: { Modal }, components: { Modal },
......
...@@ -39,13 +39,13 @@ ...@@ -39,13 +39,13 @@
</template> </template>
<script> <script>
import generateID from '@/utils/generateID' import generateID from '@/components/canvas/utils/generateID'
import toast from '@/utils/toast' import toast from '@/components/canvas/utils/toast'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Preview from '@/components/Editor/Preview' import Preview from '@/components/canvas/components/Editor/Preview'
import { commonStyle, commonAttr } from '@/custom-component/component-list' import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
import { post } from '@/api/panel/panel' import { post } from '@/api/panel/panel'
export default { export default {
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</template> </template>
<script> <script>
import { getStyle } from '@/utils/style' import { getStyle } from '@/components/canvas/utils/style'
export default { export default {
props: { props: {
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { keycodes } from '@/utils/shortcutKey.js' import { keycodes } from '@/components/canvas/utils/shortcutKey.js'
export default { export default {
props: { props: {
......
...@@ -59,7 +59,7 @@ const list = [ ...@@ -59,7 +59,7 @@ const list = [
label: '图片', label: '图片',
icon: 'tupian', icon: 'tupian',
type: 'other', type: 'other',
propValue: require('@/assets/title.jpg'), propValue: require('@/components/canvas/assets/title.jpg'),
style: { style: {
width: 300, width: 300,
height: 200, height: 200,
...@@ -72,7 +72,7 @@ const list = [ ...@@ -72,7 +72,7 @@ const list = [
label: '背景-科技1', label: '背景-科技1',
icon: 'tupian', icon: 'tupian',
type: 'other', type: 'other',
propValue: require('@/assets/bg-kj-1.jpg'), propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
style: { style: {
width: 600, width: 600,
height: 300, height: 300,
......
import Vue from 'vue' import Vue from 'vue'
import Picture from '@/custom-component/Picture' import Picture from '@/components/canvas/custom-component/Picture'
import VText from '@/custom-component/VText' import VText from '@/components/canvas/custom-component/VText'
import VButton from '@/custom-component/VButton' import VButton from '@/components/canvas/custom-component/VButton'
import Group from '@/custom-component/Group' import Group from '@/components/canvas/custom-component/Group'
import RectShape from '@/custom-component/RectShape' import RectShape from '@/components/canvas/custom-component/RectShape'
import UserView from '@/custom-component/UserView' import UserView from '@/components/canvas/custom-component/UserView'
Vue.component('Picture', Picture) Vue.component('Picture', Picture)
Vue.component('VText', VText) Vue.component('VText', VText)
......
import store from './index' import store from '@/store/index'
import generateID from '@/utils/generateID' import generateID from '@/components/canvas/utils/generateID'
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
import decomposeComponent from '@/utils/decomposeComponent' import decomposeComponent from '@/components/canvas/utils/decomposeComponent'
import { $ } from '@/utils/utils' import { $ } from '@/components/canvas/utils/utils'
import { commonStyle, commonAttr } from '@/custom-component/component-list' import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
export default { export default {
state: { state: {
......
import store from './index' import store from '@/store/index'
import toast from '@/utils/toast' import toast from '@/components/canvas/utils/toast'
import generateID from '@/utils/generateID' import generateID from '@/components/canvas/utils/generateID'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
export default { export default {
state: { state: {
......
import { swap } from '@/utils/utils' import { swap } from '@/components/canvas/utils/utils'
import toast from '@/utils/toast' import toast from '@/components/canvas/utils/toast'
export default { export default {
mutations: { mutations: {
......
import store from './index' import store from '@/store/index'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
export default { export default {
state: { state: {
......
import store from '@/store' import store from '@/store'
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
const ctrlKey = 17, const ctrlKey = 17,
vKey = 86, // 粘贴 vKey = 86, // 粘贴
......
import { sin, cos } from '@/utils/translate' import { sin, cos } from '@/components/canvas/utils/translate'
export function getStyle(style, filter = []) { export function getStyle(style, filter = []) {
const needUnit = [ const needUnit = [
......
...@@ -17,7 +17,7 @@ import directives from './directive' ...@@ -17,7 +17,7 @@ import directives from './directive'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
import widgets from '@/components/widget' import widgets from '@/components/widget'
import '@/custom-component' // 注册自定义组件 import '@/components/canvas/custom-component' // 注册自定义组件
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueClipboard) Vue.use(VueClipboard)
Vue.use(widgets) Vue.use(widgets)
......
...@@ -71,19 +71,6 @@ export const constantRoutes = [ ...@@ -71,19 +71,6 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: '/panelCanvas',
component: Layout,
redirect: '/panelCanvas/canvas',
hidden: true,
children: [
{
path: 'canvas',
component: () => import('@/views/panel/canvas')
}
]
},
{ {
path: '/preview', path: '/preview',
component: () => import('@/views/panel/preview/index'), component: () => import('@/views/panel/preview/index'),
......
...@@ -10,14 +10,15 @@ import chart from './modules/chart' ...@@ -10,14 +10,15 @@ import chart from './modules/chart'
import request from './modules/request' import request from './modules/request'
import panel from './modules/panel' import panel from './modules/panel'
import application from './modules/application' import application from './modules/application'
import animation from './animation'
import compose from './compose' import animation from '@/components/canvas/store/animation'
import contextmenu from './contextmenu' import compose from '@/components/canvas/store/compose'
import copy from './copy' import contextmenu from '@/components/canvas/store/contextmenu'
import event from './event' import copy from '@/components/canvas/store/copy'
import layer from './layer' import event from '@/components/canvas/store/event'
import snapshot from './snapshot' import layer from '@/components/canvas/store/layer'
import lock from './lock' import snapshot from '@/components/canvas/store/snapshot'
import lock from '@/components/canvas/store/lock'
Vue.use(Vuex) Vue.use(Vuex)
......
...@@ -11,7 +11,7 @@ import { baseLineOption, stackLineOption } from '../chart/line/line' ...@@ -11,7 +11,7 @@ import { baseLineOption, stackLineOption } from '../chart/line/line'
import { basePieOption } from '../chart/pie/pie' import { basePieOption } from '../chart/pie/pie'
import { baseFunnelOption } from '../chart/funnel/funnel' import { baseFunnelOption } from '../chart/funnel/funnel'
import { baseRadarOption } from '../chart/radar/radar' import { baseRadarOption } from '../chart/radar/radar'
import eventBus from '@/utils/eventBus' import eventBus from '@/components/canvas/utils/eventBus'
export default { export default {
name: 'ChartComponent', name: 'ChartComponent',
......
<template>
<div class="home">
<Toolbar />
<main>
<!-- 左侧组件列表 -->
<section class="left">
<ComponentList />
</section>
<!-- 中间画布 -->
<section class="center">
<div
class="content"
@drop="handleDrop"
@dragover="handleDragOver"
@mousedown="handleMouseDown"
@mouseup="deselectCurComponent"
>
<Editor />
</div>
</section>
<!-- 右侧属性列表 -->
<section class="right">
<el-tabs v-model="activeName">
<el-tab-pane label="属性" name="attr">
<AttrList v-if="curComponent" />
<p v-else class="placeholder">请选择组件</p>
</el-tab-pane>
<el-tab-pane label="动画" name="animation">
<AnimationList v-if="curComponent" />
<p v-else class="placeholder">请选择组件</p>
</el-tab-pane>
<el-tab-pane label="事件" name="events">
<EventList v-if="curComponent" />
<p v-else class="placeholder">请选择组件</p>
</el-tab-pane>
</el-tabs>
</section>
</main>
</div>
</template>
<script>
import Editor from '@/components/Editor/index'
import ComponentList from '@/components/ComponentList' // 左侧列表组件
import AttrList from '@/components/AttrList' // 右侧属性列表
import AnimationList from '@/components/AnimationList' // 右侧动画列表
import EventList from '@/components/EventList' // 右侧事件列表
import componentList from '@/custom-component/component-list' // 左侧列表数据
import Toolbar from '@/components/Toolbar'
import { deepCopy } from '@/utils/utils'
import { mapState } from 'vuex'
import generateID from '@/utils/generateID'
import { listenGlobalKeyDown } from '@/utils/shortcutKey'
export default {
name: 'Canvas',
components: { Editor, ComponentList, AttrList, AnimationList, EventList, Toolbar },
data() {
return {
activeName: 'attr',
reSelectAnimateIndex: undefined
}
},
computed: mapState([
'componentData',
'curComponent',
'isClickComponent',
'canvasStyleData'
]),
created() {
this.restore()
// 全局监听按键事件
listenGlobalKeyDown()
},
methods: {
restore() {
// 用保存的数据恢复画布
if (localStorage.getItem('canvasData')) {
this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
}
if (localStorage.getItem('canvasStyle')) {
this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
}
},
resetID(data) {
data.forEach(item => {
item.id = generateID()
})
return data
},
handleDrop(e) {
debugger
e.preventDefault()
e.stopPropagation()
const component = deepCopy(componentList[e.dataTransfer.getData('index')])
component.style.top = e.offsetY
component.style.left = e.offsetX
component.id = generateID()
this.$store.commit('addComponent', { component })
this.$store.commit('recordSnapshot')
},
handleDragOver(e) {
debugger
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleMouseDown() {
debugger
this.$store.commit('setClickComponentStatus', false)
},
deselectCurComponent(e) {
if (!this.isClickComponent) {
this.$store.commit('setCurComponent', { component: null, index: null })
}
// 0 左击 1 滚轮 2 右击
if (e.button !== 2) {
this.$store.commit('hideContextMenu')
}
}
}
}
</script>
<style lang="scss">
.home {
height: 100vh;
background: #fff;
main {
height: calc(100% - 64px);
position: relative;
.left {
position: absolute;
height: 100%;
width: 200px;
left: 0;
top: 0;
padding-top: 10px;
}
.right {
position: absolute;
height: 100%;
width: 262px;
right: 0;
top: 0;
}
.center {
margin-left: 200px;
margin-right: 262px;
background: #f5f5f5;
height: 100%;
overflow: auto;
padding: 20px;
.content {
width: 100%;
height: 100%;
overflow: auto;
}
}
}
.placeholder {
text-align: center;
color: #333;
}
}
</style>
...@@ -78,20 +78,20 @@ import { addClass, removeClass } from '@/utils' ...@@ -78,20 +78,20 @@ import { addClass, removeClass } from '@/utils'
import FilterGroup from '../filter' import FilterGroup from '../filter'
import ViewSelect from '../ViewSelect' import ViewSelect from '../ViewSelect'
import bus from '@/utils/bus' import bus from '@/utils/bus'
import Editor from '@/components/Editor/index' import Editor from '@/components/canvas/components/Editor/index'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/components/canvas/utils/utils'
import componentList from '@/custom-component/component-list' // 左侧列表数据 import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import { listenGlobalKeyDown } from '@/utils/shortcutKey' import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { uuid } from 'vue-uuid' import { uuid } from 'vue-uuid'
import Toolbar from '@/components/Toolbar' import Toolbar from '@/components/canvas/components/Toolbar'
import { get } from '@/api/panel/panel' import { get } from '@/api/panel/panel'
// 引入样式 // 引入样式
import '@/assets/iconfont/iconfont.css' import '@/components/canvas/assets/iconfont/iconfont.css'
import '@/styles/animate.css' import '@/components/canvas/styles/animate.css'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import '@/styles/reset.css' import '@/components/canvas/styles/reset.css'
export default { export default {
components: { components: {
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</template> </template>
<script>import componentList from '@/custom-component/component-list' <script>import componentList from '@/components/canvas/custom-component/component-list'
import { ApplicationContext } from '@/utils/ApplicationContext' import { ApplicationContext } from '@/utils/ApplicationContext'
export default { export default {
name: 'FilterGroup', name: 'FilterGroup',
......
...@@ -147,7 +147,6 @@ ...@@ -147,7 +147,6 @@
<script> <script>
import GrantAuth from '../GrantAuth' import GrantAuth from '../GrantAuth'
import LinkGenerate from '@/views/link/generate' import LinkGenerate from '@/views/link/generate'
import generateID from '@/utils/generateID'
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel' import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel'
export default { export default {
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</template> </template>
<script> <script>
import bus from '@/utils/bus' import bus from '@/utils/bus'
import Preview from '@/components/Editor/Preview' import Preview from '@/components/canvas/components/Editor/Preview'
export default { export default {
name: 'PanelViewShow', name: 'PanelViewShow',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论