v1.0.0-beta.6

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "npmClient": "npm",
   "packages": [
     "packages/*",

package-lock.json

@@ -1575,12 +1575,12 @@
 		},
 		"@egjs/agent": {
 			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.3.0.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/@egjs%2fagent/-/agent-2.3.0.tgz",
 			"integrity": "sha512-ENhwkOW6rnYW8IuXJwvECIAzj7nMxq+ctB8uCJ+mKnoKK8tGiv3YXtN6nuaOov2YmXdRdwafSz9rhgRNXswX/A=="
 		},
 		"@egjs/children-differ": {
 			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/@egjs%2fchildren-differ/-/children-differ-1.0.1.tgz",
 			"integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
 			"requires": {
 				"@egjs/list-differ": "^1.0.0"
@@ -5226,9 +5226,9 @@
 			}
 		},
 		"@scena/dragscroll": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.0.3.tgz",
-			"integrity": "sha512-jkQ6i9+a4mNBQRQUPtagyV5/P2NauHKp5on4pcnHIRLFG25sPFy3h/VwwgNXwtQFRS1S6taBpnA5Nk87zwg42w==",
+			"version": "1.1.1",
+			"resolved": "https://mirrors.tencent.com/npm/@scena%2fdragscroll/-/dragscroll-1.1.1.tgz",
+			"integrity": "sha512-RnoGpQC0aJ5Z+glLzQAAAf1jmRac1yRuil4zi4HQ8GhzoxTqlgplAOGkFF/IRnUMK1uc5S6R/MEEybfyDGlEcQ==",
 			"requires": {
 				"@daybrush/utils": "1.6.0",
 				"@scena/event-emitter": "^1.0.2"
@@ -15669,12 +15669,13 @@
 			}
 		},
 		"moveable": {
-			"version": "0.25.3",
-			"resolved": "https://registry.npmjs.org/moveable/-/moveable-0.25.3.tgz",
-			"integrity": "sha512-NsEcKzZWMy2uQeloevu5ioAFM8pmtocCZE/ZsdXizMQWUXRTas7VOUaH+ODy493NSFSqky5EDISIibuiUq0i2g==",
+			"version": "0.28.0",
+			"resolved": "https://mirrors.tencent.com/npm/moveable/-/moveable-0.28.0.tgz",
+			"integrity": "sha512-2+lUt6DTt40iSjclwXeI1TWtFTmbSGCV8XSWxhObQXV7JVnxJpqyC9u5M3GzbjltwkLqxDMd64OT1V9Je1LeCA==",
 			"requires": {
 				"@scena/event-emitter": "^1.0.3",
-				"react-compat-moveable": "~0.13.3"
+				"react-compat-moveable": "~0.16.0",
+				"react-simple-compat": "^1.2.1"
 			}
 		},
 		"ms": {
@@ -16449,7 +16450,7 @@
 		},
 		"overlap-area": {
 			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.0.0.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/overlap-area/-/overlap-area-1.0.0.tgz",
 			"integrity": "sha512-Oi3hxRf6Flvv1upldnjOtV7euFkc75G/wsxYfS/ssNKEZ3Z+HbIoPHkFfLH3hgwqLJKpq9wdFo7I6xcdS6k8yg==",
 			"requires": {
 				"@daybrush/utils": "^1.3.1"
@@ -17236,15 +17237,33 @@
 			}
 		},
 		"react-compat-moveable": {
-			"version": "0.13.3",
-			"resolved": "https://registry.npmjs.org/react-compat-moveable/-/react-compat-moveable-0.13.3.tgz",
-			"integrity": "sha512-LUd7BQcgZf2joxoDBd3n5G0BEkke/l6j4yT+DSYEA99OlwWI14yba6HAcxWoMGz7xLTs/dQC1/lFqGzWGKxnnQ==",
+			"version": "0.16.0",
+			"resolved": "https://mirrors.tencent.com/npm/react-compat-moveable/-/react-compat-moveable-0.16.0.tgz",
+			"integrity": "sha512-h12eQ4v3lNX1zjoglatprIYOZ2DL7c7LPGkoGJwGE7alvCRyQvlDL7zUWUmXf/K1SG5fKakaIA+58bcAlL9Dfg==",
 			"requires": {
-				"@daybrush/utils": "^1.4.0",
-				"@scena/dragscroll": "^1.0.1",
-				"react-compat-css-styled": "^1.0.5",
-				"react-moveable": "~0.28.3",
-				"react-simple-compat": "^1.2.0"
+				"@daybrush/utils": "^1.6.0",
+				"@egjs/agent": "^2.2.1",
+				"@egjs/children-differ": "^1.0.1",
+				"@scena/dragscroll": "^1.1.1",
+				"@scena/matrix": "^1.1.1",
+				"css-to-mat": "^1.0.3",
+				"framework-utils": "^1.1.0",
+				"gesto": "^1.7.0",
+				"overlap-area": "^1.0.0",
+				"react-compat-css-styled": "^1.0.8",
+				"react-css-styled": "^1.0.3",
+				"react-moveable": "~0.31.0"
+			},
+			"dependencies": {
+				"gesto": {
+					"version": "1.7.0",
+					"resolved": "https://mirrors.tencent.com/npm/gesto/-/gesto-1.7.0.tgz",
+					"integrity": "sha512-gPwWUYVPlYATOL59Gl1g2pPtCvbYJIU2kaj85lGvGCde1jgWAh5QI/rwlLgTWpH+Nl53pmPGFmp/oGqJ9d7grw==",
+					"requires": {
+						"@daybrush/utils": "^1.0.0",
+						"@scena/event-emitter": "^1.0.2"
+					}
+				}
 			}
 		},
 		"react-compat-ruler": {
@@ -17272,20 +17291,31 @@
 			"dev": true
 		},
 		"react-moveable": {
-			"version": "0.28.3",
-			"resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.28.3.tgz",
-			"integrity": "sha512-gFxpjkJK7xiV+xRo90MZTTkIZVa5LdWVYAExNWmQt2vEnfaZArdiAD+OJ7qQ4EPpuNAP75waJfk8uKtdnemy2w==",
+			"version": "0.31.1",
+			"resolved": "https://mirrors.tencent.com/npm/react-moveable/-/react-moveable-0.31.1.tgz",
+			"integrity": "sha512-inqkYxv95mK5yILEY1sLYG483RTmhj/vfw+Mq3TX/LPuPGEOFyvGAagtBPncrDVhDb6ypeK6HYqMVmf/Psro+Q==",
 			"requires": {
-				"@daybrush/utils": "^1.4.0",
+				"@daybrush/utils": "^1.6.0",
 				"@egjs/agent": "^2.2.1",
 				"@egjs/children-differ": "^1.0.1",
-				"@scena/dragscroll": "^1.0.1",
+				"@scena/dragscroll": "^1.1.1",
 				"@scena/matrix": "^1.1.1",
 				"css-to-mat": "^1.0.3",
 				"framework-utils": "^1.1.0",
-				"gesto": "^1.2.1",
+				"gesto": "^1.7.0",
 				"overlap-area": "^1.0.0",
-				"react-css-styled": "^1.0.1"
+				"react-css-styled": "^1.0.3"
+			},
+			"dependencies": {
+				"gesto": {
+					"version": "1.7.0",
+					"resolved": "https://mirrors.tencent.com/npm/gesto/-/gesto-1.7.0.tgz",
+					"integrity": "sha512-gPwWUYVPlYATOL59Gl1g2pPtCvbYJIU2kaj85lGvGCde1jgWAh5QI/rwlLgTWpH+Nl53pmPGFmp/oGqJ9d7grw==",
+					"requires": {
+						"@daybrush/utils": "^1.0.0",
+						"@scena/event-emitter": "^1.0.2"
+					}
+				}
 			}
 		},
 		"react-refresh": {

packages/core/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/core",
   "sideEffects": false,
   "main": "dist/tmagic-core.umd.js",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "^1.0.0-beta.4",
+    "@tmagic/schema": "^1.0.0-beta.6",
     "events": "^3.3.0"
   },
   "devDependencies": {

packages/editor/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/editor",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/editor/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/editor",
   "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.4",
-    "@tmagic/form": "^1.0.0-beta.4",
-    "@tmagic/schema": "^1.0.0-beta.4",
-    "@tmagic/stage": "^1.0.0-beta.4",
-    "@tmagic/utils": "^1.0.0-beta.4",
+    "@tmagic/core": "^1.0.0-beta.6",
+    "@tmagic/form": "^1.0.0-beta.6",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/stage": "^1.0.0-beta.6",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",

packages/editor/src/components/ScrollViewer.vue

@@ -57,6 +57,7 @@ export default defineComponent({
         width: ${props.width}px;
         height: ${props.height}px;
         position: absolute;
+        margin-top: 30px;
       `,
       ),
     };

packages/editor/src/layouts/NavMenu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { MenuBarData } from '@editor/type';
+import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'nav-menu',
@@ -29,8 +29,12 @@ export default defineComponent({
   },
 
   setup(props) {
+    const services = inject<Services>('services');
+
     return {
       keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
     };
   },
 });

packages/editor/src/layouts/PropsPanel.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
@@ -30,21 +30,16 @@ export default defineComponent({
     // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
     const curFormConfig = ref<any>([]);
     const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode | null>('node'));
 
     const init = async () => {
-      const node = services?.editorService.get<MNode | null>('node');
-
-      if (!node) {
+      if (!node.value) {
         curFormConfig.value = [];
         return;
       }
 
-      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
-        node.devconfig.ratio = node.style.height / node.style.width || 1;
-      }
-
-      values.value = node;
-      const type = node.type || (node.items ? 'container' : 'text');
+      values.value = node.value;
+      const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
     };
 

packages/editor/src/services/editor.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -31,7 +31,6 @@ import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
-  defaults,
   Fixed2Other,
   getNodeIndex,
   initPosition,
@@ -185,6 +184,10 @@ class Editor extends BaseService {
     const { node, parent, page } = this.getNodeInfo(id);
     if (!node) throw new Error('获取不到组件信息');
 
+    if (node.id === this.state.root?.id) {
+      throw new Error('不能选根节点');
+    }
+
     this.set('node', node);
     this.set('page', page || null);
     this.set('parent', parent || null);
@@ -292,7 +295,11 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    defaults(newConfig, node);
+    newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 

packages/editor/src/theme/nav-menu.scss

@@ -21,12 +21,12 @@
     align-items: center;
   }
 
-  .menu-left {
-    padding-left: 16px;
+  .menu-center {
+    justify-content: center;
   }
 
   .menu-right {
-    padding-right: 16px;
+    justify-content: flex-end;
   }
 
   .menu-item {

packages/editor/src/theme/stage.scss

@@ -15,6 +15,7 @@
   position: relative;
   border: 1px solid $--border-color;
   transition: transform 0.3s;
+  box-sizing: content-box;
 
   &::-webkit-scrollbar {
     width: 0 !important;

packages/editor/src/utils/editor.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cloneDeep, random } from 'lodash-es';
+import { random } from 'lodash-es';
 
 import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { getNodePath, isPop } from '@tmagic/utils';
@@ -223,22 +223,3 @@ export const Fixed2Other = async (node: MNode, root: MApp, getLayout: (node: MNo
 
   return toRelative(node);
 };
-
-export const defaults = (object: any, source: any) => {
-  let o = source;
-  if (Array.isArray(object)) {
-    o = object;
-  }
-
-  Object.entries(o).forEach(([key, value]: [string, any]) => {
-    if (typeof object[key] === 'undefined') {
-      object[key] = value;
-      return;
-    }
-
-    if (value && typeof value !== 'string' && Object.keys(value).length) {
-      object[key] = defaults(cloneDeep(object[key]), value);
-    }
-  });
-  return object;
-};

packages/editor/src/utils/scroll-viewer.ts

@@ -25,7 +25,8 @@ export class ScrollViewer {
       const { width, height } = contentRect;
       const targetRect = this.target.getBoundingClientRect();
       const targetWidth = targetRect.width * this.zoom;
-      const targetHeight = targetRect.height * this.zoom;
+      const targetMarginTop = Number(this.target.style.marginTop) || 0;
+      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
 
       if (targetWidth < width) {
         (this.target as any)._left = 0;
@@ -154,12 +155,14 @@ export class ScrollViewer {
       event.preventDefault();
       event.stopImmediatePropagation();
       event.stopPropagation();
-    } else if (this.keydown) return;
+    }
+
+    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
+      return;
+    }
 
     this.keydown = true;
 
-    event.preventDefault();
-
     this.target.style.cursor = 'grab';
     this.container.addEventListener('mousedown', this.mousedownHandler);
   };

packages/form/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/form",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/form/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/form",
   "sideEffects": false,
   "main": "dist/tmagic-form.umd.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.4",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "element-plus": "^2.0.2",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.1",

packages/schema/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/schema",
   "sideEffects": false,
   "main": "src/index.ts",

packages/stage/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/stage",
   "sideEffects": false,
   "main": "dist/tmagic-stage.umd.js",
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@scena/guides": "^0.17.0",
-    "@tmagic/schema": "^1.0.0-beta.4",
-    "@tmagic/utils": "^1.0.0-beta.4",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
-    "moveable": "^0.25.3"
+    "moveable": "^0.28.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",

packages/stage/src/StageCore.ts

@@ -52,9 +52,8 @@ export default class StageCore extends EventEmitter {
     this.renderer.on('runtime-ready', (runtime: Runtime) => this.emit('runtime-ready', runtime));
     this.renderer.on('page-el-update', (el: HTMLElement) => this.mask?.observe(el));
 
-    this.mask.on('select', async (el: Element, event: MouseEvent) => {
+    this.mask.on('select', async (el: Element) => {
       await this.dr?.select(el as HTMLElement);
-      setTimeout(() => this.dr?.moveable?.dragStart(event));
     });
     this.mask.on('selected', (el: Element) => {
       this.select(el as HTMLElement);

packages/stage/src/StageDragResize.ts

@@ -41,12 +41,12 @@ export default class StageDragResize extends EventEmitter {
   public container: HTMLElement;
   public target?: HTMLElement;
   public moveable?: Moveable;
+  public horizontalGuidelines: number[] = [];
+  public verticalGuidelines: number[] = [];
 
   private dragStatus: ActionStatus = ActionStatus.END;
   private elObserver?: ResizeObserver;
   private ghostEl: HTMLElement | undefined;
-  private horizontalGuidelines: number[] = [];
-  private verticalGuidelines: number[] = [];
   private mode: Mode = Mode.ABSOLUTE;
 
   constructor(config: StageDragResizeConfig) {
@@ -246,12 +246,10 @@ export default class StageDragResize extends EventEmitter {
       (await renderer.getRuntime())?.getSnapElements ||
       (() => {
         const doc = renderer.contentWindow?.document;
-        const elementGuidelines = (doc ? Array.from(doc.querySelectorAll('[id]')) : [])
-          // 排除掉当前组件本身
-          .filter((element) => element !== this.target && !this.target?.contains(element));
-        return elementGuidelines as HTMLElement[];
+        return (doc ? Array.from(doc.querySelectorAll('[id]')) : []) as HTMLElement[];
       });
-    return getSnapElements(el);
+    // 排除掉当前组件本身
+    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element));
   }
 
   private sort(): void {
@@ -341,11 +339,8 @@ export default class StageDragResize extends EventEmitter {
       resizable: true,
       snappable: !isSortable,
       snapGap: !isSortable,
-      snapElement: !isSortable,
-      snapVertical: !isSortable,
-      snapHorizontal: !isSortable,
-      snapCenter: !isSortable,
-      container: renderer.contentWindow?.document.body,
+      snapDirections: { center: !isSortable, middle: !isSortable },
+      elementSnapDirections: { center: !isSortable, middle: !isSortable },
 
       elementGuidelines: isSortable ? [] : await this.getSnapElements(this.target),
       horizontalGuidelines: this.horizontalGuidelines,

packages/stage/src/StageMask.ts

@@ -91,8 +91,8 @@ export default class StageMask extends EventEmitter {
     const { config: coreConfig } = config.core;
 
     this.canSelect = coreConfig.canSelect || ((el: HTMLElement) => !!el.id);
-    this.content.addEventListener('mousedown', this.mouseDownHandler, true);
-    this.content.addEventListener('contextmenu', this.contextmenuHandler, true);
+    this.content.addEventListener('mousedown', this.mouseDownHandler);
+    this.content.addEventListener('contextmenu', this.contextmenuHandler);
     this.wrapper.appendChild(this.content);
 
     this.hGuides = this.createGuides('horizontal');
@@ -189,17 +189,26 @@ export default class StageMask extends EventEmitter {
    * @param show 是否显示
    */
   public showRule(show = true) {
-    this.hGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+    // 当尺子隐藏时发现大小变化，显示后会变形，所以这里做重新初始化处理
+    if (show) {
+      this.hGuides.destroy();
+      this.hGuides = this.createGuides('horizontal', this.core.dr.horizontalGuidelines);
 
-    this.vGuides.setState({
-      rulerStyle: {
-        visibility: show ? '' : 'hidden',
-      },
-    });
+      this.vGuides.destroy();
+      this.vGuides = this.createGuides('vertical', this.core.dr.verticalGuidelines);
+    } else {
+      this.hGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
+
+      this.vGuides.setState({
+        rulerStyle: {
+          visibility: 'hidden',
+        },
+      });
+    }
   }
 
   /**
@@ -242,15 +251,26 @@ export default class StageMask extends EventEmitter {
       return;
     }
 
+    this.content.addEventListener('mousemove', this.mouseMoveHandler);
+
     this.select(event);
   };
 
   private mouseUpHandler = (): void => {
-    this.content?.removeEventListener('mouseup', this.mouseUpHandler, true);
+    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+    this.content.removeEventListener('mouseup', this.mouseUpHandler);
     this.emit('selected', this.target);
     this.target = null;
   };
 
+  private mouseMoveHandler = (event: MouseEvent): void => {
+    // 避免触摸板轻触移动拖动组件
+    if (event.buttons) {
+      this.core.dr.moveable?.dragStart(event);
+    }
+    this.content.removeEventListener('mousemove', this.mouseMoveHandler);
+  };
+
   private contextmenuHandler = async (event: MouseEvent): Promise<void> => {
     await this.select(event);
     this.mouseUpHandler();
@@ -282,7 +302,7 @@ export default class StageMask extends EventEmitter {
         this.emit('select', el, event);
         this.target = el;
         // 如果是右键点击，这里的mouseup事件监听没有效果
-        this.content?.addEventListener('mouseup', this.mouseUpHandler, true);
+        this.content.addEventListener('mouseup', this.mouseUpHandler);
         break;
       }
     }
@@ -296,9 +316,10 @@ export default class StageMask extends EventEmitter {
     height: type === 'horizontal' ? '30px' : '100%',
   });
 
-  private createGuides = (type: 'horizontal' | 'vertical'): Guides =>
+  private createGuides = (type: 'horizontal' | 'vertical', defaultGuides: number[] = []): Guides =>
     new Guides(this.wrapper, {
       type,
+      defaultGuides,
       displayDragPos: true,
       backgroundColor: '#fff',
       lineColor: '#000',

packages/table/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/table",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/table",
   "sideEffects": false,
   "main": "dist/tmagic-table.umd.js",
@@ -26,7 +26,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/form": "^1.0.0-beta.4",
+    "@tmagic/form": "^1.0.0-beta.6",
     "element-plus": "^2.0.2",
     "lodash-es": "^4.17.21",
     "vue": "^3.2.0"

packages/ui-react/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/ui-react",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/ui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmagic/ui-react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "main": "src/index.ts",
   "engines": {
     "node": ">=14"
@@ -13,7 +13,7 @@
     "react:build": "tsc && vite build"
   },
   "dependencies": {
-    "@tmagic/schema": "^1.0.0-beta.4",
+    "@tmagic/schema": "^1.0.0-beta.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

packages/ui-vue2/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/ui-vue2",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/ui-vue2/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/ui-vue2",
   "main": "src/index.ts",
   "scripts": {

packages/ui/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tmagic/ui",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

packages/ui/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/ui",
   "main": "src/index.ts",
   "engines": {
@@ -10,7 +10,7 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "dependencies": {
-    "@tmagic/schema": "^1.0.0-beta.4",
+    "@tmagic/schema": "^1.0.0-beta.6",
     "delegate": "^3.2.0",
     "tiny-emitter": "^2.1.0",
     "vue": "^3.2.0"

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "name": "@tmagic/utils",
   "main": "dist/tmagic-utils.umd.js",
   "module": "dist/tmagic-utils.es.js",

playground/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "tmagic-playground",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tmagic-playground",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/editor": "^1.0.0-beta.4",
-    "@tmagic/form": "^1.0.0-beta.4",
-    "@tmagic/schema": "^1.0.0-beta.4",
-    "@tmagic/stage": "^1.0.0-beta.4",
-    "@tmagic/utils": "^1.0.0-beta.4",
+    "@tmagic/editor": "^1.0.0-beta.6",
+    "@tmagic/form": "^1.0.0-beta.6",
+    "@tmagic/schema": "^1.0.0-beta.6",
+    "@tmagic/stage": "^1.0.0-beta.6",
+    "@tmagic/utils": "^1.0.0-beta.6",
     "element-plus": "^2.0.2",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0",

runtime/react/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "runtime-react",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

runtime/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",

runtime/vue2/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "runtime-vue2",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

runtime/vue2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue2",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",

runtime/vue3/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "runtime-vue3",
-	"version": "1.0.0-beta.4",
+	"version": "1.0.0-beta.6",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {

runtime/vue3/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runtime-vue3",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "private": true,
   "scripts": {
     "dev": "npm run build && npm run serve",