feat(canvas): adjust canvas width; #!zh: 支持调整画布宽度

ly525
1 parent 18f9081a
Showing 12 changed files with 272 additions and 90 deletions
back-end/h5-api/api/work/documentation/1.0.0/work.json
back-end/h5-api/api/work/models/Work.settings.json
back-end/h5-api/api/workform/documentation/1.0.0/workform.json
back-end/h5-api/extensions/documentation/documentation/1.0.0/full_documentation.json
back-end/h5-api/views/engine.ejs
front-end/h5/public/index.html
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/canvas/index.js
front-end/h5/src/components/core/index.js
front-end/h5/src/components/core/models/work.js
front-end/h5/src/components/core/styles/adjust.scss
front-end/h5/src/components/core/styles/index.scss
@@ -1072,6 +1072,10 @@
           "height": {
             "type": "integer",
             "default": 568
+          },
+          "width": {
+            "type": "integer",
+            "default": 320
           }
         }
       },
@@ -1107,6 +1111,10 @@
           "height": {
             "type": "integer",
             "default": 568
+          },
+          "width": {
+            "type": "integer",
+            "default": 320
           }
         }
       }
@@ -44,6 +44,10 @@
     "height": {
       "type": "integer",
       "default": 568
+    },
+    "width": {
+      "type": "integer",
+      "default": 320
     }
   }
 }
@@ -556,6 +556,9 @@
               },
               "height": {
                 "type": "integer"
+              },
+              "width": {
+                "type": "integer"
               }
             }
           }
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "05/10/2020 10:31:59 PM"
+    "x-generation-date": "02/13/2021 1:32:47 PM"
   },
   "x-strapi-config": {
     "path": "/documentation",
@@ -158,6 +158,63 @@
         "parameters": []
       }
     },
+    "/works/editor": {
+      "get": {
+        "deprecated": false,
+        "description": "",
+        "responses": {
+          "200": {
+            "description": "response",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "properties": {
+                    "foo": {
+                      "type": "string"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "403": {
+            "description": "Forbidden",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          },
+          "404": {
+            "description": "Not found",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          },
+          "default": {
+            "description": "unexpected error",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Error"
+                }
+              }
+            }
+          }
+        },
+        "summary": "",
+        "tags": [
+          "Work"
+        ],
+        "parameters": []
+      }
+    },
     "/works": {
       "get": {
         "deprecated": false,
@@ -3713,8 +3770,9 @@
           "is_template": {
             "type": "boolean"
           },
-          "mode": {
+          "page_mode": {
             "type": "string",
+            "default": "h5_swipper",
             "enum": [
               "h5_swipper",
               "h5_long_page",
@@ -3724,6 +3782,10 @@
           "height": {
             "type": "integer",
             "default": 568
+          },
+          "width": {
+            "type": "integer",
+            "default": 320
           }
         }
       },
@@ -3747,8 +3809,9 @@
           "is_template": {
             "type": "boolean"
           },
-          "mode": {
+          "page_mode": {
             "type": "string",
+            "default": "h5_swipper",
             "enum": [
               "h5_swipper",
               "h5_long_page",
@@ -3758,6 +3821,10 @@
           "height": {
             "type": "integer",
             "default": 568
+          },
+          "width": {
+            "type": "integer",
+            "default": 320
           }
         }
       },
@@ -3798,11 +3865,14 @@
               "is_template": {
                 "type": "boolean"
               },
-              "mode": {
+              "page_mode": {
                 "type": "string"
               },
               "height": {
                 "type": "integer"
+              },
+              "width": {
+                "type": "integer"
               }
             }
           }
@@ -45,7 +45,7 @@
       position: relative;
       display: flex;
       flex-wrap: nowrap;
-      width: 320px;
+      width: <%= work.width %>px;
       height: 568px;
       position: absolute;
@@ -55,7 +55,7 @@
       .phone-wrapper {
         position: absolute;
-        width: 320px;
+        width: <%= work.width %>px;
         height: 568px;
         display: inline-block;
         background: #fff;
@@ -125,7 +125,7 @@
       position: relative;
       display: flex;
       flex-wrap: nowrap;
-      width: 320px;
+      width: <%= work.width %>px;
       height: 568px;
       /* position: absolute;
       left: 0;
@@ -140,7 +140,7 @@
     }
     .preview-wrapper .phone-wrapper {
       position: absolute;
-      width: 320px;
+      width: <%= work.width %>px;
       height: 568px;
       display: inline-block;
       background: #fff;
@@ -211,11 +211,11 @@
       function updateViewport() {
         var scale = 1;
-        var w = document.documentElement.clientWidth || 320;
+        var w = document.documentElement.clientWidth || <%= work.width %>;
         // var h = document.documentElement.clientHeight || 568;
-        // scale = w/h >= 320/568 ? h/568 : w/320;
-        scale = w/320;
-        var viewport = "width=320, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
+        // scale = w/h >= <%= work.width %>/568 ? h/568 : w/<%= work.width %>;
+        scale = w/<%= work.width %>;
+        var viewport = "width=<%= work.width %>, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
         document.getElementById("viewport").setAttribute("content", viewport)
       }
@@ -24,7 +24,7 @@
       }
     </style>
     <!-- <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> -->
-    <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js" async></script>
   </head>
   <body>
     <noscript>
@@ -301,7 +301,13 @@ export default {
               <div class="adjust-line adjust-line-h"></div>
               <div class="adjust-button" onMousedown={this.mousedownForAdjustLine}><div class="indicator"></div></div>
               <div class="adjust-tip">
-                <span>320 x</span>
+                <a-input-number
+                  size="small"
+                  style="margin: 0 4px; width:60px;"
+                  value={this.work.width}
+                  onChange={width => { this.updateWork({ width }) }}
+                  />
+                <span>x</span>
                 <a-input-number
                   size="small"
                   style="margin: 0 4px; width:60px;"
@@ -58,9 +58,13 @@ export default {
           <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
         </a-radio-group>
         <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
-          <div class='canvas-wrapper' style={{
-            height: `${this.work.height}px`
-          }}>
+          <div
+            class='canvas-wrapper'
+            style={{
+              height: `${this.work.height}px`,
+              width: `${this.work.width}px`
+            }}
+          >
             { this.isPreviewMode
               ? <RenderPreviewCanvas elements={this.elements}/>
               : <RenderEditCanvas
@@ -20,6 +20,45 @@ import router from &#39;core/router/index&#39;
 import i18n from '@/locales'
 import '@/plugins/index'
+function AdjustHoc (WrappedComponent) {
+  return {
+    props: WrappedComponent.props,
+    data: () => ({
+      show: true
+    }),
+    computed: {
+      displayStyle () {
+        return {
+          display: this.show ? 'block' : 'none'
+        }
+      },
+      iconType () {
+        return `vertical-${this.show ? 'right' : 'left'}`
+      }
+    },
+    render (h) {
+      return (
+        <div class="collapse-indicator-wrapper">
+          <WrappedComponent
+            attrs={this.$attrs}
+            props={this.$props}
+            on={this.$listeners}
+            scopedSlots={this.$scopedSlots}
+            class="component-wrapper"
+            style={this.displayStyle} />
+          <div class="indicator-wrapper">
+            <span class="indicator" onClick={() => { this.show = !this.show }}>
+              <a-icon type={this.iconType} />
+            </span>
+          </div>
+        </div>
+      )
+    }
+  }
+}
+
+const AdjustLeftPanel = AdjustHoc(EditorLeftPanel)
+
 window.EditorApp = new Vue() // event bus
 const CoreEditor = {
   name: 'CoreEditor',
@@ -51,7 +90,8 @@ const CoreEditor = {
           <EditorActionMenu slot="action-menu" onPreview={this.handlePreview} />
         </Header>
         <a-layout>
-          <EditorLeftPanel />
+          {/* <EditorLeftPanel /> */}
+          <AdjustLeftPanel />
           <EditorCanvas />
           <AdjustLineV onLineMove={(offset) => { this.propsPanelWidth += offset }} />
           <FixedTools />
@@ -32,6 +32,7 @@ class Work {
     this.is_publish = !!work.is_publish
     this.is_template = false
+    this.width = work.width || 320
     this.height = work.height || 568
     this.page_mode = work.page_mode || PAGE_MODE.SWIPPER_PAGE
   }
+$activeHoverColor: #1593ff;
+.collapse-indicator-wrapper {
+  position: relative;
+  display: flex;
+  height: calc(100vh - 64px);
+
+  .component-wrapper {
+    order: 0;
+    flex: 0 1 auto;
+    height: 100%;
+    // transition: width 0.3s ease-in-out 0s, min-width 0.3s ease-in-out 0s;
+  }
+
+  .indicator-wrapper {
+    position: relative;
+    order: 1;
+    flex: 0 1 auto;
+    height: 100%;
+    width: 1px;
+
+    &:hover {
+      background: $activeHoverColor;
+      .indicator{
+        color: white;
+        background: $activeHoverColor;
+      }
+    }
+
+    .indicator {
+      position: absolute;
+      height: 64px;
+      top: calc(50% - 32px);
+      z-index: 9;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      border-radius: 0 4px 4px 0;
+      border: 1px solid #e5e5e5;
+      border-left-color: transparent;
+      cursor: pointer;
+    }
+  }
+}
+
+
+.adjust-line-wrapper {
+  .adjust-line {
+    border: 1px solid #eee;
+  }
+
+  .adjust-line-h {
+    width: 100%;
+  }
+
+  .adjust-line-v {
+    height: 100%;
+  }
+
+  .adjust-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    width: 30px;
+    height: 10px;
+    background-color: #fff;
+
+    .indicator {
+      margin: 0 auto;
+      width: 10px;
+      height: 1px;
+      background-color: #ccd5db;
+    }
+  }
+
+  &:hover {
+    .adjust-button {
+      background-color: $activeHoverColor;
+    }
+
+    .adjust-line {
+      border-color: $activeHoverColor;
+    }
+  }
+}
+
+.adjust-line-wrapper-h {
+  cursor: ns-resize;
+
+  .adjust-tip {
+    letter-spacing: 1px;
+    padding: 0;
+    height: 24px;
+    margin: 2px auto 0;
+    text-align: center;
+    line-height: 24px;
+    font-size: 12px;
+    color: #868484;
+    vertical-align: middle;
+  }
+}
+
+.adjust-line-wrapper-v {
+  position: relative;
+  height: calc(100vh - 64px);
+  cursor: ew-resize;
+
+  .adjust-button {
+    position: absolute;
+    right: -10px;
+    top: 50%;
+    transform: rotate(90deg);
+  }
+}
 \ No newline at end of file
@@ -5,6 +5,7 @@
 @import url("./shortcut-btn.scss");
 @import url("./page-manager.scss");
 @import url("./canvas-wrapper.scss");
+@import url("./adjust.scss");
 .hidden {
   display: none !important;
@@ -43,7 +44,7 @@
     padding: 6px 0 6px 40px;
   }
-  .collapse-wrapper {
+  .adjust-line-wrapper {
     margin-top: 12px;
     .ant-form-item {
@@ -73,74 +74,3 @@
   // 防止拖动延迟
   transition: none !important;
 }
-
-$activeHoverColor: #1593ff;
-.adjust-line-wrapper {
-  .adjust-line {
-    border: 1px solid #eee;
-  }
-
-  .adjust-line-h {
-    width: 100%;
-  }
-
-  .adjust-line-v {
-    height: 100%;
-  }
-
-  .adjust-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-    width: 30px;
-    height: 10px;
-    background-color: #fff;
-
-    .indicator {
-      margin: 0 auto;
-      width: 10px;
-      height: 1px;
-      background-color: #ccd5db;
-    }
-  }
-
-  &:hover {
-    .adjust-button {
-      background-color: $activeHoverColor;
-    }
-
-    .adjust-line {
-      border-color: $activeHoverColor;
-    }
-  }
-}
-
-.adjust-line-wrapper-h {
-  cursor: ns-resize;
-
-  .adjust-tip {
-    letter-spacing: 1px;
-    padding: 0;
-    height: 24px;
-    margin: 2px auto 0;
-    text-align: center;
-    line-height: 24px;
-    font-size: 12px;
-    color: #868484;
-    vertical-align: middle;
-  }
-}
-
-.adjust-line-wrapper-v {
-  position: relative;
-  height: 100vh;
-  cursor: ew-resize;
-
-  .adjust-button {
-    position: absolute;
-    right: -10px;
-    top: 50%;
-    transform: rotate(90deg);
-  }
-}
 \ No newline at end of file