refactor(stage): 升级moveable

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",
+			"version": "1.1.1",
-			"resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.0.3.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/@scena%2fdragscroll/-/dragscroll-1.1.1.tgz",
-			"integrity": "sha512-jkQ6i9+a4mNBQRQUPtagyV5/P2NauHKp5on4pcnHIRLFG25sPFy3h/VwwgNXwtQFRS1S6taBpnA5Nk87zwg42w==",
+			"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",
+			"version": "0.28.0",
-			"resolved": "https://registry.npmjs.org/moveable/-/moveable-0.25.3.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/moveable/-/moveable-0.28.0.tgz",
-			"integrity": "sha512-NsEcKzZWMy2uQeloevu5ioAFM8pmtocCZE/ZsdXizMQWUXRTas7VOUaH+ODy493NSFSqky5EDISIibuiUq0i2g==",
+			"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",
+			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/react-compat-moveable/-/react-compat-moveable-0.13.3.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/react-compat-moveable/-/react-compat-moveable-0.16.0.tgz",
-			"integrity": "sha512-LUd7BQcgZf2joxoDBd3n5G0BEkke/l6j4yT+DSYEA99OlwWI14yba6HAcxWoMGz7xLTs/dQC1/lFqGzWGKxnnQ==",
+			"integrity": "sha512-h12eQ4v3lNX1zjoglatprIYOZ2DL7c7LPGkoGJwGE7alvCRyQvlDL7zUWUmXf/K1SG5fKakaIA+58bcAlL9Dfg==",
 			"requires": {
-				"@daybrush/utils": "^1.4.0",
+				"@daybrush/utils": "^1.6.0",
-				"@scena/dragscroll": "^1.0.1",
+				"@egjs/agent": "^2.2.1",
-				"react-compat-css-styled": "^1.0.5",
+				"@egjs/children-differ": "^1.0.1",
-				"react-moveable": "~0.28.3",
+				"@scena/dragscroll": "^1.1.1",
-				"react-simple-compat": "^1.2.0"
+				"@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",
+			"version": "0.31.1",
-			"resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.28.3.tgz",
+			"resolved": "https://mirrors.tencent.com/npm/react-moveable/-/react-moveable-0.31.1.tgz",
-			"integrity": "sha512-gFxpjkJK7xiV+xRo90MZTTkIZVa5LdWVYAExNWmQt2vEnfaZArdiAD+OJ7qQ4EPpuNAP75waJfk8uKtdnemy2w==",
+			"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/stage/package.json

@@ -27,7 +27,7 @@
     "@tmagic/utils": "^1.0.0-beta.5",
     "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/StageDragResize.ts

@@ -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]')) : [])
+        return (doc ? Array.from(doc.querySelectorAll('[id]')) : []) as HTMLElement[];
-          // 排除掉当前组件本身
-          .filter((element) => element !== this.target && !this.target?.contains(element));
-        return elementGuidelines as HTMLElement[];
       });
-    return getSnapElements(el);
+    // 排除掉当前组件本身
+    return getSnapElements(el).filter((element) => element !== this.target && !this.target?.contains(element));
   }
 
   private sort(): void {
@@ -341,8 +339,8 @@ export default class StageDragResize extends EventEmitter {
       resizable: true,
       snappable: !isSortable,
       snapGap: !isSortable,
-      snapCenter: !isSortable,
+      snapDirections: { center: !isSortable, middle: !isSortable },
-      container: renderer.contentWindow?.document.body,
+      elementSnapDirections: { center: !isSortable, middle: !isSortable },
 
       elementGuidelines: isSortable ? [] : await this.getSnapElements(this.target),
       horizontalGuidelines: this.horizontalGuidelines,