feat:增加背景图片

2021-03-26 11:37:32 +08:00 · 2021-03-26 11:37:32 +08:00 · fcb579d439
commit fcb579d439
parent 2ce81bba8c
8 changed files with 76 additions and 30 deletions
--- a/frontend/src/assets/bg-kj-1.jpg
+++ b/frontend/src/assets/bg-kj-1.jpg
--- a/frontend/src/components/Editor/MarkLine.vue
+++ b/frontend/src/components/Editor/MarkLine.vue
@ -1,6 +1,6 @@
 <template>
    <div class="mark-line">
-        <div 
+        <div
            v-for="line in lines"
            :key="line"
            class="line"
@ -145,7 +145,7 @@ export default {
                        },
                    ],
                }
-                
+
                const needToShow = []
                const { rotate } = this.curComponent.style
                Object.keys(conditions).forEach(key => {
@ -153,9 +153,9 @@ export default {
                    conditions[key].forEach((condition) => {
                        if (!condition.isNearly) return
                        // 修改当前组件位移
-                        this.$store.commit('setShapeSingleStyle', { 
+                        this.$store.commit('setShapeSingleStyle', {
                            key,
-                            value: rotate != 0? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift,
+                            value: rotate !== 0? this.translatecurComponentShift(key, condition, curComponentStyle) : condition.dragShift,
                        })

                        condition.lineNode.style[key] = `${condition.lineShift}px`
@ -165,7 +165,7 @@ export default {

                // 同一方向上同时显示三条线可能不太美观，因此才有了这个解决方案
                // 同一方向上的线只显示一条，例如多条横条只显示一条横线
-                if (needToShow.length) { 
+                if (needToShow.length) {
                    this.chooseTheTureLine(needToShow, isDownward, isRightward)
                }
            })
@ -173,7 +173,7 @@ export default {

        translatecurComponentShift(key, condition, curComponentStyle) {
            const { width, height } = this.curComponent.style
-            if (key == 'top') {
+            if (key === 'top') {
                return Math.round(condition.dragShift - (height - curComponentStyle.height) / 2)
            }

@ -246,4 +246,4 @@ export default {
    width: 1px;
    height: 100%;
 }
-</style>
+</style>
--- a/frontend/src/components/Editor/Shape.vue
+++ b/frontend/src/components/Editor/Shape.vue
@ -199,7 +199,7 @@ export default {

    handleMouseDownOnShape(e) {
      this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component != 'v-text' && this.element.component != 'rect-shape') {
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape') {
        e.preventDefault()
      }

@ -329,7 +329,7 @@ export default {
    },

    isNeedLockProportion() {
-      if (this.element.component != 'Group') return false
+      if (this.element.component !== 'Group') return false
      const ratates = [0, 90, 180, 360]
      for (const component of this.element.propValue) {
        if (!ratates.includes(mod360(parseInt(component.style.rotate)))) {
--- a/frontend/src/components/Editor/index.vue
+++ b/frontend/src/components/Editor/index.vue
@ -26,7 +26,7 @@
    >
      <component
        :is="item.component"
-        v-if="item.component != 'v-text'"
+        v-if="item.component !== 'v-text'"
        :id="'component' + item.id"
        class="component"
        :style="getComponentStyle(item.style)"
@ -106,7 +106,7 @@ export default {

    handleMouseDown(e) {
      // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
-      if (!this.curComponent || (this.curComponent.component != 'v-text' && this.curComponent.component != 'rect-shape')) {
+      if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
        e.preventDefault()
      }

@ -141,7 +141,7 @@ export default {
        document.removeEventListener('mousemove', move)
        document.removeEventListener('mouseup', up)

-        if (e.clientX == startX && e.clientY == startY) {
+        if (e.clientX === startX && e.clientY === startY) {
          this.hideArea()
          return
        }
@ -173,7 +173,7 @@ export default {
      let right = -Infinity; let bottom = -Infinity
      areaData.forEach(component => {
        let style = {}
-        if (component.component == 'Group') {
+        if (component.component === 'Group') {
          component.propValue.forEach(item => {
            const rectInfo = $(`#component${item.id}`).getBoundingClientRect()
            style.left = rectInfo.left - this.editorX
@ -255,7 +255,7 @@ export default {
    getShapeStyle(style) {
      const result = {};
      ['width', 'height', 'top', 'left', 'rotate'].forEach(attr => {
-        if (attr != 'rotate') {
+        if (attr !== 'rotate') {
          result[attr] = style[attr] + 'px'
        } else {
          result.transform = 'rotate(' + style[attr] + 'deg)'
--- a/frontend/src/custom-component/component-list.js
+++ b/frontend/src/custom-component/component-list.js
@ -14,10 +14,12 @@ export const commonAttr = {
 // 编辑器左侧组件列表
 const list = [
  {
+    id: '10001',
    component: 'v-text',
    label: '文字',
    propValue: '双击编辑文字',
    icon: 'wenben',
+    type: 'other',
    style: {
      width: 200,
      height: 22,
@ -30,10 +32,12 @@ const list = [
    }
  },
  {
+    id: '10002',
    component: 'v-button',
    label: '按钮',
    propValue: '按钮',
    icon: 'button',
+    type: 'other',
    style: {
      width: 100,
      height: 34,
@ -50,9 +54,11 @@ const list = [
    }
  },
  {
+    id: '10003',
    component: 'Picture',
    label: '图片',
    icon: 'tupian',
+    type: 'other',
    propValue: require('@/assets/title.jpg'),
    style: {
      width: 300,
@ -61,10 +67,25 @@ const list = [
    }
  },
  {
+    id: '10003-1',
+    component: 'Picture',
+    label: '背景-科技1',
+    icon: 'tupian',
+    type: 'other',
+    propValue: require('@/assets/bg-kj-1.jpg'),
+    style: {
+      width: 600,
+      height: 300,
+      borderRadius: ''
+    }
+  },
+  {
+    id: '10004',
    component: 'rect-shape',
    label: '矩形',
    propValue: '&nbsp;',
    icon: 'juxing',
+    type: 'other',
    style: {
      width: 200,
      height: 200,
@ -82,6 +103,7 @@ const list = [
    }
  },
  {
+    id: '10005',
    component: 'user-view',
    label: '用户视图',
    propValue: '',
--- a/frontend/src/views/panel/canvas/index.vue
+++ b/frontend/src/views/panel/canvas/index.vue
@ -122,7 +122,7 @@ export default {
      }

      // 0 左击 1 滚轮 2 右击
-      if (e.button != 2) {
+      if (e.button !== 2) {
        this.$store.commit('hideContextMenu')
      }
    }
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -110,12 +110,10 @@ import bus from '@/utils/bus'
 import Editor from '@/components/Editor/index'
 import { deepCopy } from '@/utils/utils'
 import componentList from '@/custom-component/component-list' // 左侧列表数据
-import generateID from '@/utils/generateID'
 import { listenGlobalKeyDown } from '@/utils/shortcutKey'
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'

-
 export default {
  components: {
    DeMainContainer,
@ -225,24 +223,38 @@ export default {
      return data
    },
    handleDrop(e) {
+      e.preventDefault()
+      e.stopPropagation()
      let component
+      const newComponentId = uuid.v1()
      console.log('handleDrop123')
      const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
+
+      // 用户视图设置 复制一个模板
      if (componentInfo.type === 'view') {
        componentList.forEach(componentTemp => {
          if (componentTemp.type === 'view') {
            component = deepCopy(componentTemp)
-            component.style.top = e.offsetY
-            component.style.left = e.offsetX
-            component.id = uuid.v1()
            const propValue = {
-              id: component.id,
+              id: newComponentId,
              viewId: componentInfo.id
            }
            component.propValue = propValue
          }
        })
      }
+
+      debugger
+      // 其他组件设置
+      componentList.forEach(componentTemp => {
+        if (componentInfo.id === componentTemp.id) {
+          component = deepCopy(componentTemp)
+        }
+      })
+
+      component.style.top = e.offsetY
+      component.style.left = e.offsetX
+      component.id = newComponentId
      this.$store.commit('addComponent', { component })
      this.$store.commit('recordSnapshot')
    },
@ -267,7 +279,7 @@ export default {
      }

      // 0 左击 1 滚轮 2 右击
-      if (e.button != 2) {
+      if (e.button !== 2) {
        this.$store.commit('hideContextMenu')
      }
    }
--- a/frontend/src/views/panel/filter/index.vue
+++ b/frontend/src/views/panel/filter/index.vue
@ -5,11 +5,16 @@
      <div slot="header">
        <span>卡片名称</span>
      </div>
-      <div style="position: relative;margin-left: 5px;">
-        <div v-for="o in 4" :key="o" class="item">
-          <div draggable>
-            <el-button style="width: 90px;" size="mini" type="primary" icon="el-icon-edit" plain> {{ '条件 ' + o }}</el-button>
-          </div>
+      <div style="position: relative;margin-left: 5px;" @dragstart="handleDragStart">
+        <div
+          v-for="(item, index) in componentList"
+          :key="index"
+          :data-id="item.id"
+          draggable
+          :data-index="index"
+        >
+          <span class="iconfont" :class="'icon-' + item.icon" />
+          <span>{{ item.label }}</span>
        </div>
      </div>

@ -18,16 +23,23 @@

 </template>

-<script>
+<script>import componentList from '@/custom-component/component-list'
 export default {
  name: 'FilterGroup',
  data() {
    return {
-
+      componentList
    }
  },
  methods: {
-
+    handleDragStart(ev) {
+      ev.dataTransfer.effectAllowed = 'copy'
+      const dataTrans = {
+        type: 'other',
+        id: ev.target.dataset.id
+      }
+      ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
+    }
  }
 }
 </script>