徐烜 / bsth-ebus-h5_editor · Commits

Commit b6e679861b8c80ccd42a5dcc1e315afea7c4a694

Authored by ly525
2 parents 04dccc84 1c25160b

Merge branch 'feat/adjust-canvas-width' into master

Inline Side-by-side
Showing 13 changed files with 280 additions and 96 deletions
back-end/h5-api/api/work/controllers/Work.js
  View file @b6e6798
... ... @@ -31,6 +31,7 @@ module.exports = {
31 31 // 非预览模式, 查看不到内容
32 32 const canRender = view_mode === VIEW_MODE.PREVIEW || work.is_publish;
33 33 if (!canRender) work.pages = [];
  34 + work.width = work.width || 320;
34 35 return ctx.render('engine', { work });
35 36 },
36 37 renderCoreEditor: async (ctx) => {
... ...
back-end/h5-api/api/work/documentation/1.0.0/work.json
  View file @b6e6798
... ... @@ -1072,6 +1072,10 @@
1072 1072 "height": {
1073 1073 "type": "integer",
1074 1074 "default": 568
  1075 + },
  1076 + "width": {
  1077 + "type": "integer",
  1078 + "default": 320
1075 1079 }
1076 1080 }
1077 1081 },
... ... @@ -1107,6 +1111,10 @@
1107 1111 "height": {
1108 1112 "type": "integer",
1109 1113 "default": 568
  1114 + },
  1115 + "width": {
  1116 + "type": "integer",
  1117 + "default": 320
1110 1118 }
1111 1119 }
1112 1120 }
... ...
back-end/h5-api/api/work/models/Work.settings.json
  View file @b6e6798
... ... @@ -44,6 +44,10 @@
44 44 "height": {
45 45 "type": "integer",
46 46 "default": 568
  47 + },
  48 + "width": {
  49 + "type": "integer",
  50 + "default": 320
47 51 }
48 52 }
49 53 }
... ...
back-end/h5-api/api/workform/documentation/1.0.0/workform.json
  View file @b6e6798
... ... @@ -556,6 +556,9 @@
556 556 },
557 557 "height": {
558 558 "type": "integer"
  559 + },
  560 + "width": {
  561 + "type": "integer"
559 562 }
560 563 }
561 564 }
... ...
back-end/h5-api/extensions/documentation/documentation/1.0.0/full_documentation.json
  View file @b6e6798
... ... @@ -14,7 +14,7 @@
14 14 "name": "Apache 2.0",
15 15 "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
16 16 },
17   - "x-generation-date": "05/10/2020 10:31:59 PM"
  17 + "x-generation-date": "02/13/2021 1:32:47 PM"
18 18 },
19 19 "x-strapi-config": {
20 20 "path": "/documentation",
... ... @@ -158,6 +158,63 @@
158 158 "parameters": []
159 159 }
160 160 },
  161 + "/works/editor": {
  162 + "get": {
  163 + "deprecated": false,
  164 + "description": "",
  165 + "responses": {
  166 + "200": {
  167 + "description": "response",
  168 + "content": {
  169 + "application/json": {
  170 + "schema": {
  171 + "properties": {
  172 + "foo": {
  173 + "type": "string"
  174 + }
  175 + }
  176 + }
  177 + }
  178 + }
  179 + },
  180 + "403": {
  181 + "description": "Forbidden",
  182 + "content": {
  183 + "application/json": {
  184 + "schema": {
  185 + "$ref": "#/components/schemas/Error"
  186 + }
  187 + }
  188 + }
  189 + },
  190 + "404": {
  191 + "description": "Not found",
  192 + "content": {
  193 + "application/json": {
  194 + "schema": {
  195 + "$ref": "#/components/schemas/Error"
  196 + }
  197 + }
  198 + }
  199 + },
  200 + "default": {
  201 + "description": "unexpected error",
  202 + "content": {
  203 + "application/json": {
  204 + "schema": {
  205 + "$ref": "#/components/schemas/Error"
  206 + }
  207 + }
  208 + }
  209 + }
  210 + },
  211 + "summary": "",
  212 + "tags": [
  213 + "Work"
  214 + ],
  215 + "parameters": []
  216 + }
  217 + },
161 218 "/works": {
162 219 "get": {
163 220 "deprecated": false,
... ... @@ -3713,8 +3770,9 @@
3713 3770 "is_template": {
3714 3771 "type": "boolean"
3715 3772 },
3716   - "mode": {
  3773 + "page_mode": {
3717 3774 "type": "string",
  3775 + "default": "h5_swipper",
3718 3776 "enum": [
3719 3777 "h5_swipper",
3720 3778 "h5_long_page",
... ... @@ -3724,6 +3782,10 @@
3724 3782 "height": {
3725 3783 "type": "integer",
3726 3784 "default": 568
  3785 + },
  3786 + "width": {
  3787 + "type": "integer",
  3788 + "default": 320
3727 3789 }
3728 3790 }
3729 3791 },
... ... @@ -3747,8 +3809,9 @@
3747 3809 "is_template": {
3748 3810 "type": "boolean"
3749 3811 },
3750   - "mode": {
  3812 + "page_mode": {
3751 3813 "type": "string",
  3814 + "default": "h5_swipper",
3752 3815 "enum": [
3753 3816 "h5_swipper",
3754 3817 "h5_long_page",
... ... @@ -3758,6 +3821,10 @@
3758 3821 "height": {
3759 3822 "type": "integer",
3760 3823 "default": 568
  3824 + },
  3825 + "width": {
  3826 + "type": "integer",
  3827 + "default": 320
3761 3828 }
3762 3829 }
3763 3830 },
... ... @@ -3798,11 +3865,14 @@
3798 3865 "is_template": {
3799 3866 "type": "boolean"
3800 3867 },
3801   - "mode": {
  3868 + "page_mode": {
3802 3869 "type": "string"
3803 3870 },
3804 3871 "height": {
3805 3872 "type": "integer"
  3873 + },
  3874 + "width": {
  3875 + "type": "integer"
3806 3876 }
3807 3877 }
3808 3878 }
... ...
back-end/h5-api/views/engine.ejs
  View file @b6e6798
... ... @@ -45,7 +45,7 @@
45 45 position: relative;
46 46 display: flex;
47 47 flex-wrap: nowrap;
48   - width: 320px;
  48 + width: <%= work.width %>px;
49 49 height: 568px;
50 50  
51 51 position: absolute;
... ... @@ -55,7 +55,7 @@
55 55  
56 56 .phone-wrapper {
57 57 position: absolute;
58   - width: 320px;
  58 + width: <%= work.width %>px;
59 59 height: 568px;
60 60 display: inline-block;
61 61 background: #fff;
... ... @@ -125,7 +125,7 @@
125 125 position: relative;
126 126 display: flex;
127 127 flex-wrap: nowrap;
128   - width: 320px;
  128 + width: <%= work.width %>px;
129 129 height: 568px;
130 130 /* position: absolute;
131 131 left: 0;
... ... @@ -140,7 +140,7 @@
140 140 }
141 141 .preview-wrapper .phone-wrapper {
142 142 position: absolute;
143   - width: 320px;
  143 + width: <%= work.width %>px;
144 144 height: 568px;
145 145 display: inline-block;
146 146 background: #fff;
... ... @@ -211,11 +211,11 @@
211 211  
212 212 function updateViewport() {
213 213 var scale = 1;
214   - var w = document.documentElement.clientWidth || 320;
  214 + var w = document.documentElement.clientWidth || <%= work.width %>;
215 215 // var h = document.documentElement.clientHeight || 568;
216   - // scale = w/h >= 320/568 ? h/568 : w/320;
217   - scale = w/320;
218   - var viewport = "width=320, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
  216 + // scale = w/h >= <%= work.width %>/568 ? h/568 : w/<%= work.width %>;
  217 + scale = w/<%= work.width %>;
  218 + var viewport = "width=<%= work.width %>, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
219 219 document.getElementById("viewport").setAttribute("content", viewport)
220 220 }
221 221  
... ...
front-end/h5/public/index.html
  View file @b6e6798
... ... @@ -24,7 +24,7 @@
24 24 }
25 25 </style>
26 26 <!-- <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> -->
27   - <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
  27 + <script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js" async></script>
28 28 <script>
29 29 // Note: 增加html userAgent标记，
30 30 // windows启用下仿mac的滚动条样式。
... ...
front-end/h5/src/components/core/editor/canvas/edit.js
  View file @b6e6798
... ... @@ -301,7 +301,13 @@ export default {
301 301 <div class="adjust-line adjust-line-h"></div>
302 302 <div class="adjust-button" onMousedown={this.mousedownForAdjustLine}><div class="indicator"></div></div>
303 303 <div class="adjust-tip">
304   - <span>320 x</span>
  304 + <a-input-number
  305 + size="small"
  306 + style="margin: 0 4px; width:60px;"
  307 + value={this.work.width}
  308 + onChange={width => { this.updateWork({ width }) }}
  309 + />
  310 + <span>x</span>
305 311 <a-input-number
306 312 size="small"
307 313 style="margin: 0 4px; width:60px;"
... ...
front-end/h5/src/components/core/editor/canvas/index.js
  View file @b6e6798
... ... @@ -58,9 +58,13 @@ export default {
58 58 <a-radio-button label={true} value={true}>{this.$t('editor.centerPanel.mode.preview')}</a-radio-button>
59 59 </a-radio-group>
60 60 <a-layout-content style={{ transform: `scale(${this.scaleRate})`, 'transform-origin': 'center top' }}>
61   - <div class='canvas-wrapper' style={{
62   - height: `${this.work.height}px`
63   - }}>
  61 + <div
  62 + class='canvas-wrapper'
  63 + style={{
  64 + height: `${this.work.height}px`,
  65 + width: `${this.work.width}px`
  66 + }}
  67 + >
64 68 { this.isPreviewMode
65 69 ? <RenderPreviewCanvas elements={this.elements}/>
66 70 : <RenderEditCanvas
... ...
front-end/h5/src/components/core/index.js
  View file @b6e6798
... ... @@ -21,6 +21,45 @@ import router from &#39;core/router/index&#39;
21 21 import i18n from '@/locales'
22 22 import '@/plugins/index'
23 23  
  24 +function AdjustHoc (WrappedComponent) {
  25 + return {
  26 + props: WrappedComponent.props,
  27 + data: () => ({
  28 + show: true
  29 + }),
  30 + computed: {
  31 + displayStyle () {
  32 + return {
  33 + display: this.show ? 'block' : 'none'
  34 + }
  35 + },
  36 + iconType () {
  37 + return `vertical-${this.show ? 'right' : 'left'}`
  38 + }
  39 + },
  40 + render (h) {
  41 + return (
  42 + <div class="collapse-indicator-wrapper">
  43 + <WrappedComponent
  44 + attrs={this.$attrs}
  45 + props={this.$props}
  46 + on={this.$listeners}
  47 + scopedSlots={this.$scopedSlots}
  48 + class="component-wrapper"
  49 + style={this.displayStyle} />
  50 + <div class="indicator-wrapper">
  51 + <span class="indicator" onClick={() => { this.show = !this.show }}>
  52 + <a-icon type={this.iconType} />
  53 + </span>
  54 + </div>
  55 + </div>
  56 + )
  57 + }
  58 + }
  59 +}
  60 +
  61 +const AdjustLeftPanel = AdjustHoc(EditorLeftPanel)
  62 +
24 63 window.EditorApp = new Vue() // event bus
25 64 const CoreEditor = {
26 65 name: 'CoreEditor',
... ... @@ -52,7 +91,8 @@ const CoreEditor = {
52 91 <EditorActionMenu slot="action-menu" onPreview={this.handlePreview} />
53 92 </Header>
54 93 <a-layout>
55   - <EditorLeftPanel />
  94 + {/* <EditorLeftPanel /> */}
  95 + <AdjustLeftPanel />
56 96 <EditorCanvas />
57 97 <AdjustLineV onLineMove={(offset) => { this.propsPanelWidth += offset }} />
58 98 <FixedTools />
... ...
front-end/h5/src/components/core/models/work.js
  View file @b6e6798
... ... @@ -32,6 +32,7 @@ class Work {
32 32  
33 33 this.is_publish = !!work.is_publish
34 34 this.is_template = false
  35 + this.width = work.width || 320
35 36 this.height = work.height || 568
36 37 this.page_mode = work.page_mode || PAGE_MODE.SWIPPER_PAGE
37 38 }
... ...
front-end/h5/src/components/core/styles/adjust.scss 0 → 100644
  View file @b6e6798
  1 +$activeHoverColor: #1593ff;
  2 +.collapse-indicator-wrapper {
  3 + position: relative;
  4 + display: flex;
  5 + height: calc(100vh - 64px);
  6 +
  7 + .component-wrapper {
  8 + order: 0;
  9 + flex: 0 1 auto;
  10 + height: 100%;
  11 + // transition: width 0.3s ease-in-out 0s, min-width 0.3s ease-in-out 0s;
  12 + }
  13 +
  14 + .indicator-wrapper {
  15 + position: relative;
  16 + order: 1;
  17 + flex: 0 1 auto;
  18 + height: 100%;
  19 + width: 1px;
  20 +
  21 + &:hover {
  22 + background: $activeHoverColor;
  23 + .indicator{
  24 + color: white;
  25 + background: $activeHoverColor;
  26 + }
  27 + }
  28 +
  29 + .indicator {
  30 + position: absolute;
  31 + height: 64px;
  32 + top: calc(50% - 32px);
  33 + z-index: 9;
  34 + display: flex;
  35 + flex-direction: column;
  36 + justify-content: center;
  37 + align-items: center;
  38 + background-color: #fff;
  39 + border-radius: 0 4px 4px 0;
  40 + border: 1px solid #e5e5e5;
  41 + border-left-color: transparent;
  42 + cursor: pointer;
  43 + }
  44 + }
  45 +}
  46 +
  47 +
  48 +.adjust-line-wrapper {
  49 + .adjust-line {
  50 + border: 1px solid #eee;
  51 + }
  52 +
  53 + .adjust-line-h {
  54 + width: 100%;
  55 + }
  56 +
  57 + .adjust-line-v {
  58 + height: 100%;
  59 + }
  60 +
  61 + .adjust-button {
  62 + display: flex;
  63 + align-items: center;
  64 + justify-content: center;
  65 + margin: 0 auto;
  66 + width: 30px;
  67 + height: 10px;
  68 + background-color: #fff;
  69 +
  70 + .indicator {
  71 + margin: 0 auto;
  72 + width: 10px;
  73 + height: 1px;
  74 + background-color: #ccd5db;
  75 + }
  76 + }
  77 +
  78 + &:hover {
  79 + .adjust-button {
  80 + background-color: $activeHoverColor;
  81 + }
  82 +
  83 + .adjust-line {
  84 + border-color: $activeHoverColor;
  85 + }
  86 + }
  87 +}
  88 +
  89 +.adjust-line-wrapper-h {
  90 + cursor: ns-resize;
  91 +
  92 + .adjust-tip {
  93 + letter-spacing: 1px;
  94 + padding: 0;
  95 + height: 24px;
  96 + margin: 2px auto 0;
  97 + text-align: center;
  98 + line-height: 24px;
  99 + font-size: 12px;
  100 + color: #868484;
  101 + vertical-align: middle;
  102 + }
  103 +}
  104 +
  105 +.adjust-line-wrapper-v {
  106 + position: relative;
  107 + height: calc(100vh - 64px);
  108 + cursor: ew-resize;
  109 +
  110 + .adjust-button {
  111 + position: absolute;
  112 + right: -10px;
  113 + top: 50%;
  114 + transform: rotate(90deg);
  115 + }
  116 +}
0 117 \ No newline at end of file
... ...
front-end/h5/src/components/core/styles/index.scss
  View file @b6e6798
1   -@import url('./helpers.scss');
2   -@import url('./spacing-helpers.scss');
3   -@import url('./shape.scss');
4   -@import url('./align-guides.scss');
5   -@import url('./shortcut-btn.scss');
6   -@import url('./page-manager.scss');
7   -@import url('./canvas-wrapper.scss');
  1 +@import url("./helpers.scss");
  2 +@import url("./spacing-helpers.scss");
  3 +@import url("./shape.scss");
  4 +@import url("./align-guides.scss");
  5 +@import url("./shortcut-btn.scss");
  6 +@import url("./page-manager.scss");
  7 +@import url("./canvas-wrapper.scss");
  8 +@import url("./adjust.scss");
8 9  
9 10 .hidden {
10 11 display: none !important;
... ... @@ -42,7 +43,7 @@
42 43 padding: 6px 0 6px 40px;
43 44 }
44 45  
45   - .collapse-wrapper {
  46 + .adjust-line-wrapper {
46 47 margin-top: 12px;
47 48  
48 49 .ant-form-item {
... ... @@ -72,73 +73,3 @@
72 73 // 防止拖动延迟
73 74 transition: none !important;
74 75 }
75   -
76   -$activeHoverColor: #1593ff;
77   -.adjust-line-wrapper {
78   - .adjust-line {
79   - border: 1px solid #eee;
80   - }
81   -
82   - .adjust-line-h {
83   - width: 100%;
84   - }
85   -
86   - .adjust-line-v {
87   - height: 100%;
88   - }
89   -
90   - .adjust-button {
91   - display: flex;
92   - align-items: center;
93   - justify-content: center;
94   - margin: 0 auto;
95   - width: 30px;
96   - height: 10px;
97   - background-color: #fff;
98   -
99   - .indicator {
100   - margin: 0 auto;
101   - width: 10px;
102   - height: 1px;
103   - background-color: #ccd5db;
104   - }
105   - }
106   -
107   - &:hover {
108   - .adjust-button {
109   - background-color: $activeHoverColor;
110   - }
111   -
112   - .adjust-line {
113   - border-color: $activeHoverColor;
114   - }
115   - }
116   -}
117   -
118   -.adjust-line-wrapper-h {
119   - cursor: ns-resize;
120   -
121   - .adjust-tip {
122   - letter-spacing: 1px;
123   - padding: 0;
124   - height: 24px;
125   - margin: 2px auto 0;
126   - text-align: center;
127   - line-height: 24px;
128   - font-size: 12px;
129   - color: #868484;
130   - vertical-align: middle;
131   - }
132   -}
133   -
134   -.adjust-line-wrapper-v {
135   - position: relative;
136   - cursor: ew-resize;
137   -
138   - .adjust-button {
139   - position: absolute;
140   - right: -10px;
141   - top: 50%;
142   - transform: rotate(90deg);
143   - }
144   -}
... ...