@tmagic/editor 1.0.0-beta.13 → 1.0.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/coverage/clover.xml +703 -601
  2. package/coverage/coverage-final.json +35 -33
  3. package/coverage/lcov-report/index.html +56 -56
  4. package/coverage/lcov-report/src/Editor.vue.html +1 -1
  5. package/coverage/lcov-report/{layouts/sidebar/LayerMenu.vue.html → src/components/ContentMenu.vue.html} +137 -95
  6. package/coverage/lcov-report/src/components/Icon.vue.html +5 -5
  7. package/coverage/lcov-report/src/components/ScrollViewer.vue.html +1 -1
  8. package/coverage/lcov-report/src/components/ToolButton.vue.html +180 -63
  9. package/coverage/lcov-report/src/components/index.html +34 -19
  10. package/coverage/lcov-report/src/index.html +1 -1
  11. package/coverage/lcov-report/src/layouts/AddPageBox.vue.html +1 -1
  12. package/coverage/lcov-report/src/layouts/Framework.vue.html +13 -13
  13. package/coverage/lcov-report/src/layouts/NavMenu.vue.html +1 -1
  14. package/coverage/lcov-report/src/layouts/PropsPanel.vue.html +1 -1
  15. package/coverage/lcov-report/src/layouts/Resizer.vue.html +1 -1
  16. package/coverage/lcov-report/src/layouts/index.html +15 -15
  17. package/coverage/lcov-report/src/layouts/sidebar/ComponentListPanel.vue.html +78 -12
  18. package/coverage/lcov-report/src/layouts/sidebar/LayerMenu.vue.html +149 -92
  19. package/coverage/lcov-report/src/layouts/sidebar/LayerPanel.vue.html +43 -121
  20. package/coverage/lcov-report/src/layouts/sidebar/Sidebar.vue.html +23 -140
  21. package/coverage/lcov-report/{utils/undo-redo.ts.html → src/layouts/sidebar/TabPane.vue.html} +94 -118
  22. package/coverage/lcov-report/src/layouts/sidebar/index.html +64 -49
  23. package/coverage/lcov-report/src/layouts/workspace/PageBar.vue.html +99 -12
  24. package/coverage/lcov-report/src/layouts/workspace/Stage.vue.html +86 -95
  25. package/coverage/lcov-report/src/layouts/workspace/ViewerMenu.vue.html +208 -97
  26. package/coverage/lcov-report/src/layouts/workspace/Workspace.vue.html +3 -3
  27. package/coverage/lcov-report/src/layouts/workspace/index.html +35 -35
  28. package/coverage/lcov-report/src/services/BaseService.ts.html +11 -11
  29. package/coverage/lcov-report/src/services/componentList.ts.html +1 -1
  30. package/coverage/lcov-report/src/services/editor.ts.html +103 -10
  31. package/coverage/lcov-report/src/services/events.ts.html +1 -1
  32. package/coverage/lcov-report/src/services/history.ts.html +29 -8
  33. package/coverage/lcov-report/src/services/index.html +25 -25
  34. package/coverage/lcov-report/src/services/props.ts.html +4 -7
  35. package/coverage/lcov-report/src/services/ui.ts.html +1 -1
  36. package/coverage/lcov-report/src/type.ts.html +8 -14
  37. package/coverage/lcov-report/src/utils/compose.ts.html +4 -4
  38. package/coverage/lcov-report/src/utils/config.ts.html +1 -1
  39. package/coverage/lcov-report/src/utils/editor.ts.html +2 -2
  40. package/coverage/lcov-report/src/utils/index.html +1 -1
  41. package/coverage/lcov-report/src/utils/index.ts.html +1 -1
  42. package/coverage/lcov-report/src/utils/logger.ts.html +1 -1
  43. package/coverage/lcov-report/src/utils/props.ts.html +59 -2
  44. package/coverage/lcov-report/src/utils/scroll-viewer.ts.html +1 -1
  45. package/coverage/lcov-report/src/utils/undo-redo.ts.html +1 -1
  46. package/coverage/lcov.info +1679 -1402
  47. package/dist/style.css +47 -20
  48. package/dist/tmagic-editor.es.js +732 -485
  49. package/dist/tmagic-editor.es.js.map +1 -1
  50. package/dist/tmagic-editor.umd.js +733 -485
  51. package/dist/tmagic-editor.umd.js.map +1 -1
  52. package/dist/types/src/Editor.vue.d.ts +1 -1
  53. package/dist/types/src/components/ToolButton.vue.d.ts +12 -1
  54. package/dist/types/src/fields/UISelect.vue.d.ts +4 -1
  55. package/dist/types/src/index.d.ts +1 -0
  56. package/dist/types/src/layouts/CodeEditor.vue.d.ts +13 -4
  57. package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts +1 -0
  58. package/dist/types/src/layouts/sidebar/Sidebar.vue.d.ts +2 -3
  59. package/dist/types/src/layouts/sidebar/TabPane.vue.d.ts +14 -0
  60. package/dist/types/src/layouts/workspace/PageBar.vue.d.ts +2 -0
  61. package/dist/types/src/services/history.d.ts +1 -0
  62. package/dist/types/src/services/props.d.ts +2 -2
  63. package/dist/types/src/type.d.ts +6 -8
  64. package/dist/types/src/utils/polyfills.d.ts +0 -0
  65. package/package.json +15 -10
  66. package/src/components/ContentMenu.vue +107 -0
  67. package/src/components/ToolButton.vue +66 -27
  68. package/src/fields/UISelect.vue +14 -6
  69. package/src/index.ts +2 -0
  70. package/src/layouts/CodeEditor.vue +20 -10
  71. package/src/layouts/Framework.vue +6 -6
  72. package/src/layouts/sidebar/ComponentListPanel.vue +23 -1
  73. package/src/layouts/sidebar/LayerMenu.vue +91 -72
  74. package/src/layouts/sidebar/LayerPanel.vue +23 -49
  75. package/src/layouts/sidebar/Sidebar.vue +13 -52
  76. package/src/layouts/sidebar/TabPane.vue +68 -0
  77. package/src/layouts/workspace/PageBar.vue +35 -6
  78. package/src/layouts/workspace/Stage.vue +41 -44
  79. package/src/layouts/workspace/ViewerMenu.vue +104 -67
  80. package/src/layouts/workspace/Workspace.vue +2 -2
  81. package/src/services/editor.ts +33 -2
  82. package/src/services/history.ts +7 -0
  83. package/src/services/props.ts +2 -3
  84. package/src/theme/common/var.scss +1 -0
  85. package/src/theme/component-list-panel.scss +2 -0
  86. package/src/theme/content-menu.scss +33 -26
  87. package/src/theme/layer-panel.scss +1 -1
  88. package/src/theme/nav-menu.scss +6 -2
  89. package/src/theme/page-bar.scss +22 -1
  90. package/src/theme/props-panel.scss +4 -0
  91. package/src/type.ts +6 -8
  92. package/src/utils/editor.ts +1 -1
  93. package/src/utils/polyfills.ts +22 -0
  94. package/src/utils/props.ts +19 -0
  95. package/coverage/lcov-report/Icon.vue.html +0 -172
  96. package/coverage/lcov-report/ToolButton.vue.html +0 -655
  97. package/coverage/lcov-report/layouts/sidebar/index.html +0 -116
  98. package/coverage/lcov-report/utils/index.html +0 -116
  99. package/dist/types/src/layouts/sidebar/LayerPanel.vue.d.ts +0 -980
  100. package/dist/types/src/layouts/workspace/Stage.vue.d.ts +0 -188
  101. package/dist/types/src/layouts/workspace/ViewerMenu.vue.d.ts +0 -18
package/coverage/lcov-report/src/layouts/workspace/ViewerMenu.vue.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">62.5% </span>
26
+ <span class="strong">69.23% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>25/40</span>
28
+ <span class='fraction'>36/52</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">25.88% </span>
33
+ <span class="strong">22.35% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>22/85</span>
35
+ <span class='fraction'>19/85</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">43.75% </span>
40
+ <span class="strong">60% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>7/16</span>
42
+ <span class='fraction'>15/25</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">61.11% </span>
47
+ <span class="strong">68.08% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>22/36</span>
49
+ <span class='fraction'>32/47</span>
50
50
  </div>
51
51
 
52
52
 
@@ -175,37 +175,57 @@
175
175
  <a name='L110'></a><a href='#L110'>110</a>
176
176
  <a name='L111'></a><a href='#L111'>111</a>
177
177
  <a name='L112'></a><a href='#L112'>112</a>
178
- <a name='L113'></a><a href='#L113'>113</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
179
- <span class="cline-any cline-neutral">&nbsp;</span>
180
- <span class="cline-any cline-neutral">&nbsp;</span>
181
- <span class="cline-any cline-neutral">&nbsp;</span>
182
- <span class="cline-any cline-neutral">&nbsp;</span>
183
- <span class="cline-any cline-neutral">&nbsp;</span>
184
- <span class="cline-any cline-neutral">&nbsp;</span>
185
- <span class="cline-any cline-neutral">&nbsp;</span>
186
- <span class="cline-any cline-neutral">&nbsp;</span>
187
- <span class="cline-any cline-neutral">&nbsp;</span>
188
- <span class="cline-any cline-neutral">&nbsp;</span>
189
- <span class="cline-any cline-neutral">&nbsp;</span>
190
- <span class="cline-any cline-neutral">&nbsp;</span>
191
- <span class="cline-any cline-neutral">&nbsp;</span>
192
- <span class="cline-any cline-neutral">&nbsp;</span>
193
- <span class="cline-any cline-neutral">&nbsp;</span>
194
- <span class="cline-any cline-neutral">&nbsp;</span>
195
- <span class="cline-any cline-neutral">&nbsp;</span>
196
- <span class="cline-any cline-neutral">&nbsp;</span>
197
- <span class="cline-any cline-neutral">&nbsp;</span>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a>
184
+ <a name='L119'></a><a href='#L119'>119</a>
185
+ <a name='L120'></a><a href='#L120'>120</a>
186
+ <a name='L121'></a><a href='#L121'>121</a>
187
+ <a name='L122'></a><a href='#L122'>122</a>
188
+ <a name='L123'></a><a href='#L123'>123</a>
189
+ <a name='L124'></a><a href='#L124'>124</a>
190
+ <a name='L125'></a><a href='#L125'>125</a>
191
+ <a name='L126'></a><a href='#L126'>126</a>
192
+ <a name='L127'></a><a href='#L127'>127</a>
193
+ <a name='L128'></a><a href='#L128'>128</a>
194
+ <a name='L129'></a><a href='#L129'>129</a>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
198
216
  <span class="cline-any cline-neutral">&nbsp;</span>
199
217
  <span class="cline-any cline-neutral">&nbsp;</span>
200
218
  <span class="cline-any cline-neutral">&nbsp;</span>
201
219
  <span class="cline-any cline-neutral">&nbsp;</span>
202
220
  <span class="cline-any cline-yes">2x</span>
221
+ <span class="cline-any cline-yes">2x</span>
203
222
  <span class="cline-any cline-neutral">&nbsp;</span>
204
223
  <span class="cline-any cline-yes">2x</span>
205
224
  <span class="cline-any cline-neutral">&nbsp;</span>
206
225
  <span class="cline-any cline-neutral">&nbsp;</span>
207
226
  <span class="cline-any cline-yes">2x</span>
208
227
  <span class="cline-any cline-yes">2x</span>
228
+ <span class="cline-any cline-yes">2x</span>
209
229
  <span class="cline-any cline-neutral">&nbsp;</span>
210
230
  <span class="cline-any cline-yes">2x</span>
211
231
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -219,6 +239,7 @@
219
239
  <span class="cline-any cline-neutral">&nbsp;</span>
220
240
  <span class="cline-any cline-yes">2x</span>
221
241
  <span class="cline-any cline-yes">2x</span>
242
+ <span class="cline-any cline-yes">2x</span>
222
243
  <span class="cline-any cline-neutral">&nbsp;</span>
223
244
  <span class="cline-any cline-yes">2x</span>
224
245
  <span class="cline-any cline-yes">2x</span>
@@ -241,46 +262,99 @@
241
262
  <span class="cline-any cline-neutral">&nbsp;</span>
242
263
  <span class="cline-any cline-neutral">&nbsp;</span>
243
264
  <span class="cline-any cline-neutral">&nbsp;</span>
244
- <span class="cline-any cline-yes">2x</span>
245
- <span class="cline-any cline-yes">2x</span>
246
265
  <span class="cline-any cline-neutral">&nbsp;</span>
247
266
  <span class="cline-any cline-neutral">&nbsp;</span>
267
+ <span class="cline-any cline-yes">2x</span>
248
268
  <span class="cline-any cline-neutral">&nbsp;</span>
249
269
  <span class="cline-any cline-no">&nbsp;</span>
250
270
  <span class="cline-any cline-neutral">&nbsp;</span>
251
271
  <span class="cline-any cline-neutral">&nbsp;</span>
252
272
  <span class="cline-any cline-neutral">&nbsp;</span>
273
+ <span class="cline-any cline-neutral">&nbsp;</span>
274
+ <span class="cline-any cline-neutral">&nbsp;</span>
275
+ <span class="cline-any cline-neutral">&nbsp;</span>
276
+ <span class="cline-any cline-neutral">&nbsp;</span>
253
277
  <span class="cline-any cline-no">&nbsp;</span>
254
278
  <span class="cline-any cline-no">&nbsp;</span>
255
279
  <span class="cline-any cline-neutral">&nbsp;</span>
256
280
  <span class="cline-any cline-neutral">&nbsp;</span>
257
281
  <span class="cline-any cline-neutral">&nbsp;</span>
282
+ <span class="cline-any cline-neutral">&nbsp;</span>
283
+ <span class="cline-any cline-neutral">&nbsp;</span>
284
+ <span class="cline-any cline-yes">2x</span>
285
+ <span class="cline-any cline-neutral">&nbsp;</span>
258
286
  <span class="cline-any cline-no">&nbsp;</span>
259
287
  <span class="cline-any cline-no">&nbsp;</span>
260
288
  <span class="cline-any cline-no">&nbsp;</span>
261
289
  <span class="cline-any cline-neutral">&nbsp;</span>
262
290
  <span class="cline-any cline-neutral">&nbsp;</span>
263
291
  <span class="cline-any cline-neutral">&nbsp;</span>
292
+ <span class="cline-any cline-neutral">&nbsp;</span>
293
+ <span class="cline-any cline-neutral">&nbsp;</span>
294
+ <span class="cline-any cline-yes">2x</span>
295
+ <span class="cline-any cline-neutral">&nbsp;</span>
296
+ <span class="cline-any cline-neutral">&nbsp;</span>
297
+ <span class="cline-any cline-neutral">&nbsp;</span>
298
+ <span class="cline-any cline-neutral">&nbsp;</span>
299
+ <span class="cline-any cline-neutral">&nbsp;</span>
300
+ <span class="cline-any cline-yes">2x</span>
301
+ <span class="cline-any cline-neutral">&nbsp;</span>
302
+ <span class="cline-any cline-no">&nbsp;</span>
303
+ <span class="cline-any cline-neutral">&nbsp;</span>
304
+ <span class="cline-any cline-neutral">&nbsp;</span>
305
+ <span class="cline-any cline-neutral">&nbsp;</span>
306
+ <span class="cline-any cline-neutral">&nbsp;</span>
307
+ <span class="cline-any cline-neutral">&nbsp;</span>
308
+ <span class="cline-any cline-neutral">&nbsp;</span>
309
+ <span class="cline-any cline-yes">2x</span>
310
+ <span class="cline-any cline-neutral">&nbsp;</span>
264
311
  <span class="cline-any cline-no">&nbsp;</span>
265
312
  <span class="cline-any cline-neutral">&nbsp;</span>
266
313
  <span class="cline-any cline-neutral">&nbsp;</span>
267
314
  <span class="cline-any cline-neutral">&nbsp;</span>
315
+ <span class="cline-any cline-neutral">&nbsp;</span>
316
+ <span class="cline-any cline-neutral">&nbsp;</span>
317
+ <span class="cline-any cline-yes">2x</span>
318
+ <span class="cline-any cline-neutral">&nbsp;</span>
268
319
  <span class="cline-any cline-no">&nbsp;</span>
269
320
  <span class="cline-any cline-neutral">&nbsp;</span>
270
321
  <span class="cline-any cline-neutral">&nbsp;</span>
271
322
  <span class="cline-any cline-neutral">&nbsp;</span>
323
+ <span class="cline-any cline-neutral">&nbsp;</span>
324
+ <span class="cline-any cline-neutral">&nbsp;</span>
325
+ <span class="cline-any cline-yes">2x</span>
326
+ <span class="cline-any cline-neutral">&nbsp;</span>
272
327
  <span class="cline-any cline-no">&nbsp;</span>
273
328
  <span class="cline-any cline-neutral">&nbsp;</span>
274
329
  <span class="cline-any cline-neutral">&nbsp;</span>
275
330
  <span class="cline-any cline-neutral">&nbsp;</span>
331
+ <span class="cline-any cline-neutral">&nbsp;</span>
332
+ <span class="cline-any cline-neutral">&nbsp;</span>
333
+ <span class="cline-any cline-yes">2x</span>
334
+ <span class="cline-any cline-neutral">&nbsp;</span>
335
+ <span class="cline-any cline-neutral">&nbsp;</span>
336
+ <span class="cline-any cline-neutral">&nbsp;</span>
337
+ <span class="cline-any cline-neutral">&nbsp;</span>
338
+ <span class="cline-any cline-neutral">&nbsp;</span>
339
+ <span class="cline-any cline-yes">2x</span>
340
+ <span class="cline-any cline-neutral">&nbsp;</span>
276
341
  <span class="cline-any cline-no">&nbsp;</span>
277
342
  <span class="cline-any cline-neutral">&nbsp;</span>
278
343
  <span class="cline-any cline-neutral">&nbsp;</span>
279
344
  <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-neutral">&nbsp;</span>
348
+ <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-neutral">&nbsp;</span>
350
+ <span class="cline-any cline-neutral">&nbsp;</span>
351
+ <span class="cline-any cline-neutral">&nbsp;</span>
280
352
  <span class="cline-any cline-no">&nbsp;</span>
281
353
  <span class="cline-any cline-neutral">&nbsp;</span>
282
354
  <span class="cline-any cline-neutral">&nbsp;</span>
283
355
  <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-neutral">&nbsp;</span>
284
358
  <span class="cline-any cline-no">&nbsp;</span>
285
359
  <span class="cline-any cline-neutral">&nbsp;</span>
286
360
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -288,49 +362,33 @@
288
362
  <span class="cline-any cline-neutral">&nbsp;</span>
289
363
  <span class="cline-any cline-neutral">&nbsp;</span>
290
364
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
291
- &lt;div class="magic-editor-content-menu" ref="menu"&gt;
292
- &lt;div&gt;
293
- &lt;div class="magic-editor-content-menu-item" @click="() =&gt; center()" v-if="canCenter"&gt;水平居中&lt;/div&gt;
294
- &lt;div class="magic-editor-content-menu-item" @click="() =&gt; copy()"&gt;复制&lt;/div&gt;
295
- &lt;div class="magic-editor-content-menu-item" @click="paste" v-if="canPaste"&gt;粘贴&lt;/div&gt;
296
- &lt;template v-if="canMoveZPos"&gt;
297
- &lt;div class="separation"&gt;&lt;/div&gt;
298
- &lt;div class="magic-editor-content-menu-item" @click="topItem"&gt;上移一层&lt;/div&gt;
299
- &lt;div class="magic-editor-content-menu-item" @click="bottomItem"&gt;下移一层&lt;/div&gt;
300
- &lt;div class="magic-editor-content-menu-item" @click="top"&gt;置顶&lt;/div&gt;
301
- &lt;div class="magic-editor-content-menu-item" @click="bottom"&gt;置底&lt;/div&gt;
302
- &lt;/template&gt;
303
- &lt;template v-if="canDelete"&gt;
304
- &lt;div class="separation"&gt;&lt;/div&gt;
305
- &lt;div class="magic-editor-content-menu-item" @click="() =&gt; remove()"&gt;删除&lt;/div&gt;
306
- &lt;/template&gt;
307
- &lt;div class="separation"&gt;&lt;/div&gt;
308
- &lt;div class="magic-editor-content-menu-item" @click="clearGuides"&gt;清空参考线&lt;/div&gt;
309
- &lt;/div&gt;
310
- &lt;/div&gt;
365
+ &lt;content-menu :menu-data="menuData" ref="menu"&gt;&lt;/content-menu&gt;
311
366
  &lt;/template&gt;
312
367
  &nbsp;
313
368
  &lt;script lang="ts"&gt;
314
- import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue';
369
+ import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
370
+ import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons';
315
371
  &nbsp;
316
372
  import { NodeType } from '@tmagic/schema';
317
373
  import type StageCore from '@tmagic/stage';
318
374
  &nbsp;
319
- import { LayerOffset, Layout, Services } from '@editor/type';
375
+ import ContentMenu from '@editor/components/ContentMenu.vue';
376
+ import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
320
377
  import { COPY_STORAGE_KEY } from '@editor/utils/editor';
321
378
  &nbsp;
322
379
  export default defineComponent({
323
- name: 'magic-editor-ui-viewer-menu',
380
+ components: { ContentMenu },
324
381
  &nbsp;
325
382
  setup() {
326
383
  const services = inject&lt;Services&gt;('services');
327
384
  const editorService = services?.editorService;
328
- const menu = ref&lt;HTMLDivElement&gt;();
385
+ const menu = ref&lt;InstanceType&lt;typeof ContentMenu&gt;&gt;();
329
386
  const canPaste = ref(false);
330
387
  const canCenter = ref(false);
331
388
  &nbsp;
332
389
  const node = computed(() =&gt; editorService?.get('node'));
333
390
  const parent = computed(() =&gt; editorService?.get('parent'));
391
+ const isPage = computed(() =&gt; node.value<span class="branch-1 cbranch-no" title="branch not covered" >?.type === N</span>odeType.PAGE);
334
392
  &nbsp;
335
393
  onMounted(() =&gt; {
336
394
  const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
@@ -351,49 +409,102 @@ export default defineComponent({
351
409
  &nbsp;
352
410
  return {
353
411
  menu,
354
- canPaste,
355
- &nbsp;
356
- canDelete: computed(() =&gt; node.value<span class="branch-1 cbranch-no" title="branch not covered" >?.type !== N</span>odeType.PAGE),
357
- canMoveZPos: computed(() =&gt; node.value<span class="branch-1 cbranch-no" title="branch not covered" >?.type !== N</span>odeType.PAGE),
358
- canCenter,
359
- &nbsp;
360
- center<span class="fstat-no" title="function not covered" >() {</span>
361
- <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; editorService?.alignCenter(node.value);
362
- },
363
- &nbsp;
364
- copy<span class="fstat-no" title="function not covered" >() {</span>
365
- <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; editorService?.copy(node.value);
366
- <span class="cstat-no" title="statement not covered" > canPaste.</span>value = true;
367
- },
368
- &nbsp;
369
- paste<span class="fstat-no" title="function not covered" >() {</span>
370
- const top = <span class="cstat-no" title="statement not covered" >menu.value?.offsetTop || 0;</span>
371
- const left = <span class="cstat-no" title="statement not covered" >menu.value?.offsetLeft || 0;</span>
372
- <span class="cstat-no" title="statement not covered" > editorService?</span>.paste({ left, top });
373
- },
374
- &nbsp;
375
- remove<span class="fstat-no" title="function not covered" >() {</span>
376
- <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; editorService?.remove(node.value);
377
- },
378
- &nbsp;
379
- top<span class="fstat-no" title="function not covered" >() {</span>
380
- <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(LayerOffset.TOP);
381
- },
382
- &nbsp;
383
- bottom<span class="fstat-no" title="function not covered" >() {</span>
384
- <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(LayerOffset.BOTTOM);
385
- },
386
- &nbsp;
387
- topItem<span class="fstat-no" title="function not covered" >() {</span>
388
- <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(1);
389
- },
390
- &nbsp;
391
- bottomItem<span class="fstat-no" title="function not covered" >() {</span>
392
- <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(-1);
393
- },
412
+ menuData: reactive&lt;MenuItem[]&gt;([
413
+ {
414
+ type: 'button',
415
+ text: '水平居中',
416
+ display: () =&gt; canCenter.value,
417
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
418
+ <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; editorService?.alignCenter(node.value);
419
+ },
420
+ },
421
+ {
422
+ type: 'button',
423
+ text: '复制',
424
+ icon: markRaw(DocumentCopy),
425
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
426
+ <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; editorService?.copy(node.value);
427
+ <span class="cstat-no" title="statement not covered" > canPaste.</span>value = true;
428
+ },
429
+ },
430
+ {
431
+ type: 'button',
432
+ text: '粘贴',
433
+ display: () =&gt; canPaste.value,
434
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
435
+ const top = <span class="cstat-no" title="statement not covered" >menu.value?.$el.offsetTop || 0;</span>
436
+ const left = <span class="cstat-no" title="statement not covered" >menu.value?.$el.offsetLeft || 0;</span>
437
+ <span class="cstat-no" title="statement not covered" > editorService?</span>.paste({ left, top });
438
+ },
439
+ },
440
+ {
441
+ type: 'divider',
442
+ direction: 'horizontal',
443
+ display: () =&gt; !isPage.value,
444
+ },
445
+ {
446
+ type: 'button',
447
+ text: '上移一层',
448
+ icon: markRaw(Top),
449
+ display: () =&gt; !isPage.value,
450
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
451
+ <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(1);
452
+ },
453
+ },
454
+ {
455
+ type: 'button',
456
+ text: '下移一层',
457
+ icon: markRaw(Bottom),
458
+ display: () =&gt; !isPage.value,
459
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
460
+ <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(-1);
461
+ },
462
+ },
463
+ {
464
+ type: 'button',
465
+ text: '置顶',
466
+ display: () =&gt; !isPage.value,
467
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
468
+ <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(LayerOffset.TOP);
469
+ },
470
+ },
471
+ {
472
+ type: 'button',
473
+ text: '置底',
474
+ display: () =&gt; !isPage.value,
475
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
476
+ <span class="cstat-no" title="statement not covered" > editorService?</span>.moveLayer(LayerOffset.BOTTOM);
477
+ },
478
+ },
479
+ {
480
+ type: 'divider',
481
+ direction: 'horizontal',
482
+ display: () =&gt; !isPage.value,
483
+ },
484
+ {
485
+ type: 'button',
486
+ text: '删除',
487
+ icon: Delete,
488
+ display: () =&gt; !isPage.value,
489
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
490
+ <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; editorService?.remove(node.value);
491
+ },
492
+ },
493
+ {
494
+ type: 'divider',
495
+ direction: 'horizontal',
496
+ },
497
+ {
498
+ type: 'button',
499
+ text: '清空参考线',
500
+ handler: <span class="fstat-no" title="function not covered" >() =&gt; {</span>
501
+ <span class="cstat-no" title="statement not covered" > editorService?</span>.get&lt;StageCore&gt;('stage').clearGuides();
502
+ },
503
+ },
504
+ ]),
394
505
  &nbsp;
395
- <span class="fstat-no" title="function not covered" > clearGuides(</span>) {
396
- <span class="cstat-no" title="statement not covered" > editorService?</span>.get&lt;StageCore&gt;('stage').clearGuides();
506
+ <span class="fstat-no" title="function not covered" > show(</span>e: MouseEvent) {
507
+ <span class="cstat-no" title="statement not covered" > menu.</span>value?.show(e);
397
508
  },
398
509
  };
399
510
  },
@@ -406,7 +517,7 @@ export default defineComponent({
406
517
  <div class='footer quiet pad2 space-top1 center small'>
407
518
  Code coverage generated by
408
519
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
409
- at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
520
+ at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
410
521
  </div>
411
522
  <script src="../../../prettify.js"></script>
412
523
  <script>
package/coverage/lcov-report/src/layouts/workspace/Workspace.vue.html CHANGED
@@ -483,11 +483,11 @@ export default defineComponent({
483
483
  <span class="cstat-no" title="statement not covered" > e.</span>inputEvent.preventDefault();
484
484
  <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; services?.editorService.copy(node.value);
485
485
  })
486
- .keyup([ctrl, 'v'], <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
486
+ .keydown([ctrl, 'v'], <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
487
487
  <span class="cstat-no" title="statement not covered" > e.</span>inputEvent.preventDefault();
488
488
  <span class="cstat-no" title="statement not covered" > node.</span>value &amp;&amp; services?.editorService.paste();
489
489
  })
490
- .keyup([ctrl, 'x'], <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
490
+ .keydown([ctrl, 'x'], <span class="fstat-no" title="function not covered" >(e</span>) =&gt; {
491
491
  <span class="cstat-no" title="statement not covered" > e.</span>inputEvent.preventDefault();
492
492
  <span class="cstat-no" title="statement not covered" > <span class="missing-if-branch" title="if path not taken" >I</span>if (!node.value || isPage(node.value)) <span class="cstat-no" title="statement not covered" >return;</span></span>
493
493
  <span class="cstat-no" title="statement not covered" > services?</span>.editorService.copy(node.value);
@@ -571,7 +571,7 @@ export default defineComponent({
571
571
  <div class='footer quiet pad2 space-top1 center small'>
572
572
  Code coverage generated by
573
573
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
574
- at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
574
+ at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
575
575
  </div>
576
576
  <script src="../../../prettify.js"></script>
577
577
  <script>
package/coverage/lcov-report/src/layouts/workspace/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">44.15% </span>
26
+ <span class="strong">44.32% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>117/265</span>
28
+ <span class='fraction'>125/282</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">16.99% </span>
33
+ <span class="strong">16.11% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>69/406</span>
35
+ <span class='fraction'>68/422</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">32.94% </span>
40
+ <span class="strong">36.55% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>28/85</span>
42
+ <span class='fraction'>34/93</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">45.53% </span>
47
+ <span class="strong">45.6% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>107/235</span>
49
+ <span class='fraction'>114/250</span>
50
50
  </div>
51
51
 
52
52
 
@@ -80,47 +80,47 @@
80
80
  </thead>
81
81
  <tbody><tr>
82
82
  <td class="file low" data-value="PageBar.vue"><a href="PageBar.vue.html">PageBar.vue</a></td>
83
- <td data-value="45.71" class="pic low">
84
- <div class="chart"><div class="cover-fill" style="width: 45%"></div><div class="cover-empty" style="width: 55%"></div></div>
83
+ <td data-value="46.47" class="pic low">
84
+ <div class="chart"><div class="cover-fill" style="width: 46%"></div><div class="cover-empty" style="width: 54%"></div></div>
85
85
  </td>
86
- <td data-value="45.71" class="pct low">45.71%</td>
87
- <td data-value="70" class="abs low">32/70</td>
86
+ <td data-value="46.47" class="pct low">46.47%</td>
87
+ <td data-value="71" class="abs low">33/71</td>
88
88
  <td data-value="31.48" class="pct low">31.48%</td>
89
89
  <td data-value="54" class="abs low">17/54</td>
90
90
  <td data-value="52.94" class="pct medium">52.94%</td>
91
91
  <td data-value="17" class="abs medium">9/17</td>
92
- <td data-value="49.18" class="pct low">49.18%</td>
93
- <td data-value="61" class="abs low">30/61</td>
92
+ <td data-value="50" class="pct medium">50%</td>
93
+ <td data-value="62" class="abs medium">31/62</td>
94
94
  </tr>
95
95
 
96
96
  <tr>
97
97
  <td class="file low" data-value="Stage.vue"><a href="Stage.vue.html">Stage.vue</a></td>
98
- <td data-value="45.05" class="pic low">
99
- <div class="chart"><div class="cover-fill" style="width: 45%"></div><div class="cover-empty" style="width: 55%"></div></div>
98
+ <td data-value="38.94" class="pic low">
99
+ <div class="chart"><div class="cover-fill" style="width: 38%"></div><div class="cover-empty" style="width: 62%"></div></div>
100
100
  </td>
101
- <td data-value="45.05" class="pct low">45.05%</td>
102
- <td data-value="91" class="abs low">41/91</td>
103
- <td data-value="14.46" class="pct low">14.46%</td>
104
- <td data-value="159" class="abs low">23/159</td>
105
- <td data-value="32.14" class="pct low">32.14%</td>
106
- <td data-value="28" class="abs low">9/28</td>
107
- <td data-value="46.75" class="pct low">46.75%</td>
108
- <td data-value="77" class="abs low">36/77</td>
101
+ <td data-value="38.94" class="pct low">38.94%</td>
102
+ <td data-value="95" class="abs low">37/95</td>
103
+ <td data-value="14.28" class="pct low">14.28%</td>
104
+ <td data-value="175" class="abs low">25/175</td>
105
+ <td data-value="25.92" class="pct low">25.92%</td>
106
+ <td data-value="27" class="abs low">7/27</td>
107
+ <td data-value="40" class="pct low">40%</td>
108
+ <td data-value="80" class="abs low">32/80</td>
109
109
  </tr>
110
110
 
111
111
  <tr>
112
112
  <td class="file medium" data-value="ViewerMenu.vue"><a href="ViewerMenu.vue.html">ViewerMenu.vue</a></td>
113
- <td data-value="62.5" class="pic medium">
114
- <div class="chart"><div class="cover-fill" style="width: 62%"></div><div class="cover-empty" style="width: 38%"></div></div>
113
+ <td data-value="69.23" class="pic medium">
114
+ <div class="chart"><div class="cover-fill" style="width: 69%"></div><div class="cover-empty" style="width: 31%"></div></div>
115
115
  </td>
116
- <td data-value="62.5" class="pct medium">62.5%</td>
117
- <td data-value="40" class="abs medium">25/40</td>
118
- <td data-value="25.88" class="pct low">25.88%</td>
119
- <td data-value="85" class="abs low">22/85</td>
120
- <td data-value="43.75" class="pct low">43.75%</td>
121
- <td data-value="16" class="abs low">7/16</td>
122
- <td data-value="61.11" class="pct medium">61.11%</td>
123
- <td data-value="36" class="abs medium">22/36</td>
116
+ <td data-value="69.23" class="pct medium">69.23%</td>
117
+ <td data-value="52" class="abs medium">36/52</td>
118
+ <td data-value="22.35" class="pct low">22.35%</td>
119
+ <td data-value="85" class="abs low">19/85</td>
120
+ <td data-value="60" class="pct medium">60%</td>
121
+ <td data-value="25" class="abs medium">15/25</td>
122
+ <td data-value="68.08" class="pct medium">68.08%</td>
123
+ <td data-value="47" class="abs medium">32/47</td>
124
124
  </tr>
125
125
 
126
126
  <tr>
@@ -146,7 +146,7 @@
146
146
  <div class='footer quiet pad2 space-top1 center small'>
147
147
  Code coverage generated by
148
148
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
149
- at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
149
+ at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
150
150
  </div>
151
151
  <script src="../../../prettify.js"></script>
152
152
  <script>