feat:将画布整合在组件中

frontend/src/components/canvas/components/AnimationList.vue

@@ -39,9 +39,9 @@
 </template>
 
 <script>
-import Modal from '@/components/Modal'
-import eventBus from '@/utils/eventBus'
-import animationClassData from '@/utils/animationClassData'
+import Modal from '@/components/canvas/components/Modal'
+import eventBus from '@/components/canvas/utils/eventBus'
+import animationClassData from '@/components/canvas/utils/animationClassData'
 import { mapState } from 'vuex'
 
 export default {
@@ -115,4 +115,4 @@ export default {
         }
     }
 }
-</style>
+</style>

frontend/src/components/canvas/components/ComponentList.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import componentList from '@/custom-component/component-list'
+import componentList from '@/components/canvas/custom-component/component-list'
 
 export default {
   data() {

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script>
-import { getStyle } from '@/utils/style'
-import runAnimation from '@/utils/runAnimation'
-import { mixins } from '@/utils/events'
+import { getStyle } from '@/components/canvas/utils/style'
+import runAnimation from '@/components/canvas/utils/runAnimation'
+import { mixins } from '@/components/canvas/utils/events'
 
 export default {
     props: {
@@ -43,4 +43,4 @@ export default {
 .component {
     position: absolute;
 }
-</style>
+</style>

frontend/src/components/canvas/components/Editor/MarkLine.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import eventBus from '@/utils/eventBus'
+import eventBus from '@/components/canvas/utils/eventBus'
 import { mapState } from 'vuex'
-import { getComponentRotatedStyle } from '@/utils/style'
+import { getComponentRotatedStyle } from '@/components/canvas/utils/style'
 
 export default {
     data() {

frontend/src/components/canvas/components/Editor/Preview-back.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import { getStyle } from '@/utils/style'
+import { getStyle } from '@/components/canvas/utils/style'
 import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
-import { changeStyleWithScale } from '@/utils/translate'
+import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 
 export default {
     model: {

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -20,10 +20,10 @@
 </template>
 
 <script>
-import { getStyle } from '@/utils/style'
+import { getStyle } from '@/components/canvas/utils/style'
 import { mapState } from 'vuex'
 import ComponentWrapper from './ComponentWrapper'
-import { changeStyleWithScale } from '@/utils/translate'
+import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 
 export default {
   components: { ComponentWrapper },

frontend/src/components/canvas/components/Editor/Shape.vue

@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import eventBus from '@/utils/eventBus'
-import runAnimation from '@/utils/runAnimation'
+import eventBus from '@/components/canvas/utils/eventBus'
+import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mapState } from 'vuex'
-import calculateComponentPositonAndSize from '@/utils/calculateComponentPositonAndSize'
-import { mod360 } from '@/utils/translate'
+import calculateComponentPositonAndSize from '@/components/canvas/utils/calculateComponentPositonAndSize'
+import { mod360 } from '@/components/canvas/utils/translate'
 
 export default {
   props: {

frontend/src/components/canvas/components/Editor/index.vue

@@ -57,14 +57,14 @@
 <script>
 import { mapState } from 'vuex'
 import Shape from './Shape'
-import { getStyle, getComponentRotatedStyle } from '@/utils/style'
-import { $ } from '@/utils/utils'
+import { getStyle, getComponentRotatedStyle } from '@/components/canvas/utils/style'
+import { $ } from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
 import Area from './Area'
-import eventBus from '@/utils/eventBus'
+import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
-import { changeStyleWithScale } from '@/utils/translate'
+import { changeStyleWithScale } from '@/components/canvas/utils/translate'
 
 export default {
   components: { Shape, ContextMenu, MarkLine, Area, Grid },

frontend/src/components/canvas/components/EventList.vue

@@ -29,8 +29,8 @@
 
 <script>
 import { mapState } from 'vuex'
-import Modal from '@/components/Modal'
-import { eventList } from '@/utils/events'
+import Modal from '@/components/canvas/components/Modal'
+import { eventList } from '@/components/canvas/utils/events'
 
 export default {
     components: { Modal },
@@ -63,7 +63,7 @@ export default {
     .div-events {
         text-align: center;
         padding: 0 20px;
-        
+
         .el-button {
             display: inline-block;
             margin-bottom: 10px;
@@ -77,4 +77,4 @@ export default {
         }
     }
 }
-</style>
+</style>

frontend/src/components/canvas/components/Toolbar.vue

@@ -39,13 +39,13 @@
 </template>
 
 <script>
-import generateID from '@/utils/generateID'
-import toast from '@/utils/toast'
+import generateID from '@/components/canvas/utils/generateID'
+import toast from '@/components/canvas/utils/toast'
 import { mapState } from 'vuex'
-import Preview from '@/components/Editor/Preview'
-import { commonStyle, commonAttr } from '@/custom-component/component-list'
-import eventBus from '@/utils/eventBus'
-import { deepCopy } from '@/utils/utils'
+import Preview from '@/components/canvas/components/Editor/Preview'
+import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
+import eventBus from '@/components/canvas/utils/eventBus'
+import { deepCopy } from '@/components/canvas/utils/utils'
 import { post } from '@/api/panel/panel'
 
 export default {

frontend/src/components/canvas/custom-component/Group.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { getStyle } from '@/utils/style'
+import { getStyle } from '@/components/canvas/utils/style'
 
 export default {
     props: {
@@ -64,4 +64,4 @@ export default {
         }
     }
 }
-</style>
+</style>

frontend/src/components/canvas/custom-component/VText.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import { keycodes } from '@/utils/shortcutKey.js'
+import { keycodes } from '@/components/canvas/utils/shortcutKey.js'
 
 export default {
     props: {
@@ -115,4 +115,4 @@ export default {
         height: 100%;
     }
 }
-</style>
+</style>

frontend/src/components/canvas/custom-component/component-list.js

@@ -59,7 +59,7 @@ const list = [
     label: '图片',
     icon: 'tupian',
     type: 'other',
-    propValue: require('@/assets/title.jpg'),
+    propValue: require('@/components/canvas/assets/title.jpg'),
     style: {
       width: 300,
       height: 200,
@@ -72,7 +72,7 @@ const list = [
     label: '背景-科技1',
     icon: 'tupian',
     type: 'other',
-    propValue: require('@/assets/bg-kj-1.jpg'),
+    propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
     style: {
       width: 600,
       height: 300,

frontend/src/components/canvas/custom-component/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+
+import Picture from '@/components/canvas/custom-component/Picture'
+import VText from '@/components/canvas/custom-component/VText'
+import VButton from '@/components/canvas/custom-component/VButton'
+import Group from '@/components/canvas/custom-component/Group'
+import RectShape from '@/components/canvas/custom-component/RectShape'
+import UserView from '@/components/canvas/custom-component/UserView'
+
+Vue.component('Picture', Picture)
+Vue.component('VText', VText)
+Vue.component('VButton', VButton)
+Vue.component('Group', Group)
+Vue.component('RectShape', RectShape)
+Vue.component('UserView', UserView)
+

frontend/src/components/canvas/store/compose.js

@@ -1,9 +1,9 @@
-import store from './index'
-import generateID from '@/utils/generateID'
-import eventBus from '@/utils/eventBus'
-import decomposeComponent from '@/utils/decomposeComponent'
-import { $ } from '@/utils/utils'
-import { commonStyle, commonAttr } from '@/custom-component/component-list'
+import store from '@/store/index'
+import generateID from '@/components/canvas/utils/generateID'
+import eventBus from '@/components/canvas/utils/eventBus'
+import decomposeComponent from '@/components/canvas/utils/decomposeComponent'
+import { $ } from '@/components/canvas/utils/utils'
+import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 
 export default {
     state: {
@@ -61,11 +61,11 @@ export default {
                     propValue: components,
                 },
             })
-            
+
             eventBus.$emit('hideArea')
 
             store.commit('batchDeleteComponent', areaData.components)
-            store.commit('setCurComponent', { 
+            store.commit('setCurComponent', {
                 component: componentData[componentData.length - 1],
                 index: componentData.length - 1,
             })
@@ -97,4 +97,4 @@ export default {
             })
         },
     },
-}
+}

frontend/src/components/canvas/store/copy.js

@@ -1,7 +1,7 @@
-import store from './index'
-import toast from '@/utils/toast'
-import generateID from '@/utils/generateID'
-import { deepCopy } from '@/utils/utils'
+import store from '@/store/index'
+import toast from '@/components/canvas/utils/toast'
+import generateID from '@/components/canvas/utils/generateID'
+import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
     state: {
@@ -26,7 +26,7 @@ export default {
             }
 
             const data = state.copyData.data
-            
+
             if (isMouse) {
                 data.style.top = state.menuTop
                 data.style.left = state.menuLeft
@@ -34,7 +34,7 @@ export default {
                 data.style.top += 10
                 data.style.left += 10
             }
-            
+
             data.id = generateID()
             store.commit('addComponent', { component: deepCopy(data) })
             if (state.isCut) {
@@ -47,7 +47,7 @@ export default {
                 toast('请选择组件')
                 return
             }
-            
+
             if (state.copyData) {
                 const data = deepCopy(state.copyData.data)
                 const index = state.copyData.index
@@ -64,4 +64,4 @@ export default {
             state.isCut = true
         },
     },
-}
+}

frontend/src/components/canvas/store/layer.js

@@ -1,5 +1,5 @@
-import { swap } from '@/utils/utils'
-import toast from '@/utils/toast'
+import { swap } from '@/components/canvas/utils/utils'
+import toast from '@/components/canvas/utils/toast'
 
 export default {
     mutations: {
@@ -39,4 +39,4 @@ export default {
             }
         },
     },
-}
+}

frontend/src/components/canvas/store/snapshot.js

@@ -1,5 +1,5 @@
-import store from './index'
-import { deepCopy } from '@/utils/utils'
+import store from '@/store/index'
+import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
     state: {
@@ -30,4 +30,4 @@ export default {
             }
         },
     },
-}
+}

frontend/src/components/canvas/utils/shortcutKey.js

@@ -1,7 +1,7 @@
 import store from '@/store'
-import eventBus from '@/utils/eventBus'
+import eventBus from '@/components/canvas/utils/eventBus'
 
-const ctrlKey = 17, 
+const ctrlKey = 17,
     vKey = 86, // 粘贴
     cKey = 67, // 复制
     xKey = 88, // 剪切

frontend/src/components/canvas/utils/style.js

@@ -1,4 +1,4 @@
-import { sin, cos } from '@/utils/translate'
+import { sin, cos } from '@/components/canvas/utils/translate'
 
 export function getStyle(style, filter = []) {
     const needUnit = [
@@ -52,4 +52,4 @@ export function getComponentRotatedStyle(style) {
     }
 
     return style
-}
+}

frontend/src/components/canvas/utils/translate.js

@@ -95,7 +95,7 @@ export function getRotatedPointCoordinate(style, center, name) {
                 x: style.left + style.width,
                 y: style.top+ style.height,
             }
-            
+
             break
     }
 
@@ -113,7 +113,7 @@ export function getCenterPoint(p1, p2) {
 export function sin(rotate) {
     return Math.abs(Math.sin(angleToRadian(rotate)))
 }
-  
+
 export function cos(rotate) {
     return Math.abs(Math.cos(angleToRadian(rotate)))
 }
@@ -124,4 +124,4 @@ export function mod360(deg) {
 
 export function changeStyleWithScale(value) {
     return value * parseInt(store.state.canvasStyleData.scale) / 100
-}
+}

frontend/src/custom-component/index.js

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-
-import Picture from '@/custom-component/Picture'
-import VText from '@/custom-component/VText'
-import VButton from '@/custom-component/VButton'
-import Group from '@/custom-component/Group'
-import RectShape from '@/custom-component/RectShape'
-import UserView from '@/custom-component/UserView'
-
-Vue.component('Picture', Picture)
-Vue.component('VText', VText)
-Vue.component('VButton', VButton)
-Vue.component('Group', Group)
-Vue.component('RectShape', RectShape)
-Vue.component('UserView', UserView)
-

frontend/src/main.js

@@ -17,7 +17,7 @@ import directives from './directive'
 import VueClipboard from 'vue-clipboard2'
 import widgets from '@/components/widget'
 
-import '@/custom-component' // 注册自定义组件
+import '@/components/canvas/custom-component' // 注册自定义组件
 Vue.config.productionTip = false
 Vue.use(VueClipboard)
 Vue.use(widgets)

frontend/src/router/index.js

@@ -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',
     component: () => import('@/views/panel/preview/index'),

frontend/src/store/index.js

@@ -10,14 +10,15 @@ import chart from './modules/chart'
 import request from './modules/request'
 import panel from './modules/panel'
 import application from './modules/application'
-import animation from './animation'
-import compose from './compose'
-import contextmenu from './contextmenu'
-import copy from './copy'
-import event from './event'
-import layer from './layer'
-import snapshot from './snapshot'
-import lock from './lock'
+
+import animation from '@/components/canvas/store/animation'
+import compose from '@/components/canvas/store/compose'
+import contextmenu from '@/components/canvas/store/contextmenu'
+import copy from '@/components/canvas/store/copy'
+import event from '@/components/canvas/store/event'
+import layer from '@/components/canvas/store/layer'
+import snapshot from '@/components/canvas/store/snapshot'
+import lock from '@/components/canvas/store/lock'
 
 Vue.use(Vuex)
 

frontend/src/views/chart/components/ChartComponent.vue

@@ -11,7 +11,7 @@ import { baseLineOption, stackLineOption } from '../chart/line/line'
 import { basePieOption } from '../chart/pie/pie'
 import { baseFunnelOption } from '../chart/funnel/funnel'
 import { baseRadarOption } from '../chart/radar/radar'
-import eventBus from '@/utils/eventBus'
+import eventBus from '@/components/canvas/utils/eventBus'
 
 export default {
   name: 'ChartComponent',

frontend/src/views/panel/canvas/index.vue

@@ -1,180 +0,0 @@
-<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>

frontend/src/views/panel/edit/index.vue

@@ -78,20 +78,20 @@ import { addClass, removeClass } from '@/utils'
 import FilterGroup from '../filter'
 import ViewSelect from '../ViewSelect'
 import bus from '@/utils/bus'
-import Editor from '@/components/Editor/index'
-import { deepCopy } from '@/utils/utils'
-import componentList from '@/custom-component/component-list' // 左侧列表数据
-import { listenGlobalKeyDown } from '@/utils/shortcutKey'
+import Editor from '@/components/canvas/components/Editor/index'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import componentList from '@/components/canvas/custom-component/component-list' // 左侧列表数据
+import { listenGlobalKeyDown } from '@/components/canvas/utils/shortcutKey'
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
-import Toolbar from '@/components/Toolbar'
+import Toolbar from '@/components/canvas/components/Toolbar'
 import { get } from '@/api/panel/panel'
 
 // 引入样式
-import '@/assets/iconfont/iconfont.css'
-import '@/styles/animate.css'
+import '@/components/canvas/assets/iconfont/iconfont.css'
+import '@/components/canvas/styles/animate.css'
 import 'element-ui/lib/theme-chalk/index.css'
-import '@/styles/reset.css'
+import '@/components/canvas/styles/reset.css'
 
 export default {
   components: {

frontend/src/views/panel/filter/index.vue

@@ -23,7 +23,7 @@
 
 </template>
 
-<script>import componentList from '@/custom-component/component-list'
+<script>import componentList from '@/components/canvas/custom-component/component-list'
 import { ApplicationContext } from '@/utils/ApplicationContext'
 export default {
   name: 'FilterGroup',

frontend/src/views/panel/list/PanelList.vue

@@ -147,7 +147,6 @@
 <script>
 import GrantAuth from '../GrantAuth'
 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'
 
 export default {

frontend/src/views/panel/list/PanelViewShow.vue

@@ -22,7 +22,7 @@
 </template>
 <script>
 import bus from '@/utils/bus'
-import Preview from '@/components/Editor/Preview'
+import Preview from '@/components/canvas/components/Editor/Preview'
 
 export default {
   name: 'PanelViewShow',