feat(page): support copy, delete page

ly525
1 parent abd9e622
Showing 7 changed files with 33 additions and 11 deletions
README.en.md
README.md
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/core/models/page.js
front-end/h5/src/store/modules/page.js
front-end/h5/src/store/modules/work.js
@@ -15,8 +15,11 @@ English | [简体中文](./README.md)
     - [x] Edit Element (Canvas)
     - [x] Copy Element (Canvas)
     - [x] Delete Element (Canvas)
-    - [ ] Page: add, copy, delete
-    - [x] Preview
+    - [x] Edit Page
+    - [x] Copy Page
+    - [x] Delete Page
+    - [x] Quick Preview
+    - [x] Undo、Redo
 2. Plugin System
@@ -19,7 +19,9 @@
     - [x] 元素: 复制（画布）
     - [x] 元素: 删除（画布）
     - [x] 元素: 编辑（画布）
-    - [ ] 页面：新增、复制、删除
+    - [x] 页面：新增
+    - [x] 页面：复制
+    - [x] 页面：删除
     - [x] 快速预览
     - [x] 撤销、重做
@@ -79,8 +79,8 @@ export default {
                   </a>
                   <a-menu slot="overlay" onClick={({ key }) => { this.pageManager({ type: key }) }}>
                     <a-menu-item key="add"><a-icon type="user" />新增页面</a-menu-item>
-                    {/* <a-menu-item key="copy"><a-icon type="user" />复制页面</a-menu-item> */}
-                    {/* <a-menu-item key="delete"><a-icon type="user" />删除页面</a-menu-item> */}
+                    <a-menu-item key="copy"><a-icon type="user" />复制页面</a-menu-item>
+                    <a-menu-item key="delete"><a-icon type="user" />删除页面</a-menu-item>
                   </a-menu>
                 </a-dropdown>
               </span>
+const clone = (value) => JSON.parse(JSON.stringify(value))
 const defaultProps = {
   top: 100,
@@ -16,14 +17,18 @@ class Element {
     this.name = ele.name
     this.uuid = +new Date()
     /**
+     * #!zh:
      * 之前版本代码：https://github.com/ly525/luban-h5/blob/a7875cbc73c0d18bc2459985ca3ce1d4dc44f141/front-end/h5/src/components/core/models/element.js#L21
      * 1.之前的版本为：this.pluginProps = {}, 改为下面的版本
      * 是因为要支持[复制画布上的元素]，所以需要先使用 ele.pluginProps 进行初始化（也就是拷贝之前的元素的值）
      *
      * 2. 移除 this.init() 原因是：如果是 复制元素，则 init 会把 copy 的值重新覆盖为初始值，copy 无效
+     *
+     * 3. 为何需要 clone，因为会有 element.clone() 以及 page.clone()，
+     *    element.pluginProps 和 elementcommonStyle 是引用类型，如果不做 deep_clone 可能会出现意外错误
      */
-    this.pluginProps = ele.pluginProps || this.getDefaultPluginProps(ele.editorConfig || {})
-    this.commonStyle = ele.commonStyle || this.getDefaultCommonStyle()
+    this.pluginProps = clone(ele.pluginProps) || this.getDefaultPluginProps(ele.editorConfig || {})
+    this.commonStyle = clone(ele.commonStyle) || this.getDefaultCommonStyle()
     this.events = []
   }
@@ -74,7 +79,7 @@ class Element {
   clone () {
     return new Element({
       name: this.name,
-      pluginProps: JSON.parse(JSON.stringify(this.pluginProps)),
+      pluginProps: this.pluginProps,
       commonStyle: {
         ...this.commonStyle,
         top: this.commonStyle.top + 20,
+import Element from '../models/element'
+
 class Page {
   constructor (page = {}) {
+    this.uuid = +new Date()
     this.elements = page.elements || []
   }
+
+  clone () {
+    const elements = this.elements.map(element => new Element(element))
+    return new Page({ elements })
+  }
 }
 export default Page
@@ -26,10 +26,12 @@ export const mutations = {
         state.work.pages.push(state.editingPage.clone())
         break
       case 'delete':
+        if (state.work.pages.length === 1) return // #!zh: 作品中至少需要保留一个页面，TODO 需要在页面中提示用户此信息
+
         const { work, editingPage } = state
-        let index = work.pages.findIndex(e => e.uuid === editingPage.uuid)
+        let index = work.pages.findIndex(page => page.uuid === editingPage.uuid)
         if (index !== -1) {
-          let newPages = work.slice()
+          let newPages = work.pages.slice()
           newPages.splice(index, 1)
           state.work.pages = newPages
         }
 // import Work from '../../components/core/models/work'
 import Element from '../../components/core/models/element'
 import strapi from '../../utils/strapi'
+import Page from '../../components/core/models/page'
 export const actions = {
   previewWork ({ commit }, payload = {}) {
@@ -32,8 +33,9 @@ export const actions = {
 // mutations
 export const mutations = {
   setWork (state, work) {
-    work.pages.forEach(page => {
+    work.pages = work.pages.map(page => {
       page.elements = page.elements.map(element => new Element(element))
+      return new Page(page)
     })
     state.work = work
   },