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

package/coverage/lcov-report/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">62.31% </span>
+                <span class="strong">61.02% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>921/1478</span>
+                <span class='fraction'>969/1588</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">31.19% </span>
+                <span class="strong">28.25% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>335/1074</span>
+                <span class='fraction'>332/1175</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">59.05% </span>
+                <span class="strong">56.66% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>212/359</span>
+                <span class='fraction'>221/390</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">64.71% </span>
+                <span class="strong">63.43% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>853/1318</span>
+                <span class='fraction'>897/1414</span>
             </div>
         
             
@@ -95,77 +95,77 @@
 
 <tr>
 	<td class="file medium" data-value="src/components"><a href="src/components/index.html">src/components</a></td>
-	<td data-value="79.26" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
+	<td data-value="64.8" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 64%"></div><div class="cover-empty" style="width: 36%"></div></div>
 	</td>
-	<td data-value="79.26" class="pct medium">79.26%</td>
-	<td data-value="82" class="abs medium">65/82</td>
-	<td data-value="48.67" class="pct low">48.67%</td>
-	<td data-value="113" class="abs low">55/113</td>
-	<td data-value="74.07" class="pct medium">74.07%</td>
-	<td data-value="27" class="abs medium">20/27</td>
-	<td data-value="88.73" class="pct high">88.73%</td>
-	<td data-value="71" class="abs high">63/71</td>
+	<td data-value="64.8" class="pct medium">64.8%</td>
+	<td data-value="125" class="abs medium">81/125</td>
+	<td data-value="40.97" class="pct low">40.97%</td>
+	<td data-value="144" class="abs low">59/144</td>
+	<td data-value="60.52" class="pct medium">60.52%</td>
+	<td data-value="38" class="abs medium">23/38</td>
+	<td data-value="71.17" class="pct medium">71.17%</td>
+	<td data-value="111" class="abs medium">79/111</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="src/layouts"><a href="src/layouts/index.html">src/layouts</a></td>
-	<td data-value="63.21" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 63%"></div><div class="cover-empty" style="width: 37%"></div></div>
+	<td data-value="62.92" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 62%"></div><div class="cover-empty" style="width: 38%"></div></div>
 	</td>
-	<td data-value="63.21" class="pct medium">63.21%</td>
-	<td data-value="87" class="abs medium">55/87</td>
-	<td data-value="36.61" class="pct low">36.61%</td>
-	<td data-value="71" class="abs low">26/71</td>
-	<td data-value="66.66" class="pct medium">66.66%</td>
-	<td data-value="21" class="abs medium">14/21</td>
+	<td data-value="62.92" class="pct medium">62.92%</td>
+	<td data-value="89" class="abs medium">56/89</td>
+	<td data-value="30.43" class="pct low">30.43%</td>
+	<td data-value="69" class="abs low">21/69</td>
+	<td data-value="61.9" class="pct medium">61.9%</td>
+	<td data-value="21" class="abs medium">13/21</td>
 	<td data-value="67.1" class="pct medium">67.1%</td>
 	<td data-value="76" class="abs medium">51/76</td>
 	</tr>
 
 <tr>
 	<td class="file low" data-value="src/layouts/sidebar"><a href="src/layouts/sidebar/index.html">src/layouts/sidebar</a></td>
-	<td data-value="47.4" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 47%"></div><div class="cover-empty" style="width: 53%"></div></div>
+	<td data-value="48.33" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 48%"></div><div class="cover-empty" style="width: 52%"></div></div>
 	</td>
-	<td data-value="47.4" class="pct low">47.4%</td>
-	<td data-value="154" class="abs low">73/154</td>
-	<td data-value="23.62" class="pct low">23.62%</td>
-	<td data-value="182" class="abs low">43/182</td>
-	<td data-value="52.27" class="pct medium">52.27%</td>
-	<td data-value="44" class="abs medium">23/44</td>
-	<td data-value="49.63" class="pct low">49.63%</td>
-	<td data-value="137" class="abs low">68/137</td>
+	<td data-value="48.33" class="pct low">48.33%</td>
+	<td data-value="180" class="abs low">87/180</td>
+	<td data-value="17.09" class="pct low">17.09%</td>
+	<td data-value="234" class="abs low">40/234</td>
+	<td data-value="43.63" class="pct low">43.63%</td>
+	<td data-value="55" class="abs low">24/55</td>
+	<td data-value="51.28" class="pct medium">51.28%</td>
+	<td data-value="156" class="abs medium">80/156</td>
 	</tr>
 
 <tr>
 	<td class="file low" data-value="src/layouts/workspace"><a href="src/layouts/workspace/index.html">src/layouts/workspace</a></td>
-	<td data-value="44.15" class="pic low">
+	<td data-value="44.32" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 44%"></div><div class="cover-empty" style="width: 56%"></div></div>
 	</td>
-	<td data-value="44.15" class="pct low">44.15%</td>
-	<td data-value="265" class="abs low">117/265</td>
-	<td data-value="16.99" class="pct low">16.99%</td>
-	<td data-value="406" class="abs low">69/406</td>
-	<td data-value="32.94" class="pct low">32.94%</td>
-	<td data-value="85" class="abs low">28/85</td>
-	<td data-value="45.53" class="pct low">45.53%</td>
-	<td data-value="235" class="abs low">107/235</td>
+	<td data-value="44.32" class="pct low">44.32%</td>
+	<td data-value="282" class="abs low">125/282</td>
+	<td data-value="16.11" class="pct low">16.11%</td>
+	<td data-value="422" class="abs low">68/422</td>
+	<td data-value="36.55" class="pct low">36.55%</td>
+	<td data-value="93" class="abs low">34/93</td>
+	<td data-value="45.6" class="pct low">45.6%</td>
+	<td data-value="250" class="abs low">114/250</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="src/services"><a href="src/services/index.html">src/services</a></td>
-	<td data-value="72.52" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 72%"></div><div class="cover-empty" style="width: 28%"></div></div>
+	<td data-value="71.14" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 71%"></div><div class="cover-empty" style="width: 29%"></div></div>
 	</td>
-	<td data-value="72.52" class="pct medium">72.52%</td>
-	<td data-value="484" class="abs medium">351/484</td>
-	<td data-value="46.96" class="pct low">46.96%</td>
-	<td data-value="181" class="abs low">85/181</td>
-	<td data-value="74.44" class="pct medium">74.44%</td>
-	<td data-value="90" class="abs medium">67/90</td>
-	<td data-value="76.47" class="pct medium">76.47%</td>
-	<td data-value="442" class="abs medium">338/442</td>
+	<td data-value="71.14" class="pct medium">71.14%</td>
+	<td data-value="506" class="abs medium">360/506</td>
+	<td data-value="47.02" class="pct low">47.02%</td>
+	<td data-value="185" class="abs low">87/185</td>
+	<td data-value="73.62" class="pct medium">73.62%</td>
+	<td data-value="91" class="abs medium">67/91</td>
+	<td data-value="74.78" class="pct medium">74.78%</td>
+	<td data-value="464" class="abs medium">347/464</td>
 	</tr>
 
 <tr>
@@ -191,7 +191,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="prettify.js"></script>
         <script>

package/coverage/lcov-report/src/Editor.vue.html

@@ -772,7 +772,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/{layouts/sidebar/LayerMenu.vue.html → src/components/ContentMenu.vue.html}

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for layouts/sidebar/LayerMenu.vue</title>
+    <title>Code coverage report for src/components/ContentMenu.vue</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">layouts/sidebar</a> LayerMenu.vue</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/components</a> ContentMenu.vue</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">91.66% </span>
+                <span class="strong">40% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>11/12</span>
+                <span class='fraction'>12/30</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">69.23% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>18/26</span>
+                <span class='fraction'>0/23</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">85.71% </span>
+                <span class="strong">25% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/7</span>
+                <span class='fraction'>2/8</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">90.9% </span>
+                <span class="strong">40% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>10/11</span>
+                <span class='fraction'>12/30</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -156,12 +156,21 @@
 <a name='L91'></a><a href='#L91'>91</a>
 <a name='L92'></a><a href='#L92'>92</a>
 <a name='L93'></a><a href='#L93'>93</a>
-<a name='L94'></a><a href='#L94'>94</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<a name='L107'></a><a href='#L107'>107</a>
+<a name='L108'></a><a href='#L108'>108</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -180,54 +189,70 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -235,108 +260,125 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">&lt;template&gt;
-  &lt;div v-if="node" class="magic-editor-content-menu"&gt;
-    &lt;div
-      v-if="node.items"
-      class="magic-editor-content-menu-item"
-      @mouseenter="setSubVisitable(true)"
-      @mouseleave="setSubVisitable(false)"
-    &gt;
-      新增
-    &lt;/div&gt;
-    &lt;div v-if="node.type !== 'app'" class="magic-editor-content-menu-item" @click="() =&gt; copy(node)"&gt;复制&lt;/div&gt;
-    &lt;div
-      v-if="node.type !== 'app' &amp;&amp; node.type !== 'page'"
-      class="magic-editor-content-menu-item"
-      @click="() =&gt; remove()"
-    &gt;
-      删除
-    &lt;/div&gt;
-    &lt;div class="subMenu" v-show="subVisible" @mouseenter="setSubVisitable(true)" @mouseleave="setSubVisitable(false)"&gt;
-      &lt;el-scrollbar&gt;
-        &lt;template v-if="node.type === 'tabs'"&gt;
-          &lt;div
-            class="magic-editor-content-menu-item"
-            @click="
-              () =&gt;
-                append({
-                  type: 'tab-pane',
-                })
-            "
-          &gt;
-            标签
-          &lt;/div&gt;
-        &lt;/template&gt;
-        &lt;template v-else-if="node.items"&gt;
-          &lt;div v-for="list in componentGroupList" :key="list.title"&gt;
-            &lt;template v-for="item in list.items"&gt;
-              &lt;div class="magic-editor-content-menu-item" v-if="item" :key="item.type" @click="() =&gt; append(item)"&gt;
-                {{ item.text }}
-              &lt;/div&gt;
-            &lt;/template&gt;
-            &lt;div class="separation"&gt;&lt;/div&gt;
-          &lt;/div&gt;
-        &lt;/template&gt;
-      &lt;/el-scrollbar&gt;
+  &lt;div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle"&gt;
+    &lt;div&gt;
+      &lt;tool-button
+        v-for="(item, index) in menuData"
+        event-type="mouseup"
+        :data="item"
+        :key="index"
+        @mouseup="hide"
+        @mouseenter="showSubMenu(item)"
+      &gt;&lt;/tool-button&gt;
     &lt;/div&gt;
+    &lt;teleport to="body"&gt;
+      &lt;content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"&gt;&lt;/content-menu&gt;
+    &lt;/teleport&gt;
   &lt;/div&gt;
 &lt;/template&gt;
 &nbsp;
 &lt;script lang="ts"&gt;
-import { computed, defineComponent, inject, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
 &nbsp;
-import type { MNode } from '@tmagic/schema';
+import { MenuButton, MenuItem } from '@editor/type';
 &nbsp;
-import type { AddMNode, Services } from '@editor/type';
+import ToolButton from './ToolButton.vue';
 &nbsp;
 export default defineComponent({
-  name: 'magic-editor-content-menu',
+  components: { ToolButton },
+&nbsp;
+  props: {
+    menuData: {
+      type: Array as PropType&lt;MenuItem[]&gt;,
+      default: <span class="fstat-no" title="function not covered" >() =&gt; <span class="cstat-no" title="statement not covered" >[</span>],</span>
+    },
+  },
 &nbsp;
   setup() {
-    const services = inject&lt;Services&gt;('services');
-    const subVisible = ref(false);
-    const node = computed(() =&gt; services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.get('node'));
+    const menu = ref&lt;HTMLDivElement&gt;();
+    const subMenu = ref&lt;any&gt;();
+    const visible = ref(false);
+    const subMenuData = ref&lt;MenuItem[]&gt;([]);
+    const menuStyle = ref({
+      left: '0',
+      top: '0',
+    });
+&nbsp;
+    const hide = <span class="fstat-no" title="function not covered" >() =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >      visible.</span>value = false;
+    };
+&nbsp;
+    onMounted(() =&gt; {
+      globalThis.addEventListener(
+        'mousedown',
+<span class="fstat-no" title="function not covered" >        (e</span>: MouseEvent) =&gt; {
+<span class="cstat-no" title="statement not covered" >          <span class="missing-if-branch" title="if path not taken" >I</span>if (!visible.value || (e.target &amp;&amp; menu.value?.contains(e.target as HTMLElement))) {</span>
+<span class="cstat-no" title="statement not covered" >            return;</span>
+          }
+<span class="cstat-no" title="statement not covered" >          hide();</span>
+        },
+        true,
+      );
+    });
 &nbsp;
     return {
-      subVisible,
+      menu,
+      subMenu,
+      visible,
+      menuStyle,
+      subMenuData,
 &nbsp;
-      node,
+      hide,
 &nbsp;
-      componentGroupList: computed(<span class="fstat-no" title="function not covered" >() =&gt; <span class="cstat-no" title="statement not covered" >s</span>ervices?</span>.componentListService.getList()),
+<span class="fstat-no" title="function not covered" >      show(</span>e: MouseEvent) {
+<span class="cstat-no" title="statement not covered" >        visible.</span>value = true;
 &nbsp;
-      append(config: AddMNode) {
-        services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.add({
-          name: config.text,
-          type: config.type,
-          ...(config.data || {}),
-        });
-      },
+<span class="cstat-no" title="statement not covered" >        nextTick(<span class="fstat-no" title="function not covered" >(</span>) =&gt; {</span>
+          const menuHeight = <span class="cstat-no" title="statement not covered" >menu.value?.clientHeight || 0;</span>
 &nbsp;
-      remove() {
-        node.value &amp;&amp; services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.remove(node.value);
-      },
+          let top = <span class="cstat-no" title="statement not covered" >e.clientY;</span>
+<span class="cstat-no" title="statement not covered" >          <span class="missing-if-branch" title="if path not taken" >I</span>if (menuHeight + e.clientY &gt; document.body.clientHeight) {</span>
+<span class="cstat-no" title="statement not covered" >            top </span>= document.body.clientHeight - menuHeight;
+          }
 &nbsp;
-      copy(node?: MNode) {
-        node &amp;&amp; services<span class="branch-0 cbranch-no" title="branch not covered" >?.e</span>ditorService.copy(node);
+<span class="cstat-no" title="statement not covered" >          menuStyle.</span>value = {
+            top: `${top}px`,
+            left: `${e.clientX}px`,
+          };
+        });
       },
 &nbsp;
-      setSubVisitable(v: boolean) {
-        subVisible.value = v;
+<span class="fstat-no" title="function not covered" >      showSubMenu(</span>item: MenuItem) {
+        const menuItem = <span class="cstat-no" title="statement not covered" >item as MenuButton;</span>
+<span class="cstat-no" title="statement not covered" >        <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof item !== 'object' || !menuItem.items?.length) {</span>
+<span class="cstat-no" title="statement not covered" >          return;</span>
+        }
+&nbsp;
+<span class="cstat-no" title="statement not covered" >        subMenuData.</span>value = menuItem.items;
+<span class="cstat-no" title="statement not covered" >        <span class="missing-if-branch" title="if path not taken" >I</span>if (menu.value) {</span>
+<span class="cstat-no" title="statement not covered" >          subMenu.</span>value.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: menu.value.offsetTop,
+          });
+        }
       },
     };
   },
@@ -349,7 +391,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Thu Apr 14 2022 14:28:05 GMT+0800 (China Standard Time)
+                at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/Icon.vue.html

@@ -100,10 +100,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">4x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -115,7 +115,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-yes">22x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -157,7 +157,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/components/ScrollViewer.vue.html

@@ -268,7 +268,7 @@ export default defineComponent({
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Fri Apr 22 2022 12:15:01 GMT+0800 (China Standard Time)
+                at Fri May 13 2022 20:42:37 GMT+0800 (China Standard Time)
             </div>
         <script src="../../prettify.js"></script>
         <script>