From c382d881e4273746e3a0c646f557222091101ea3 Mon Sep 17 00:00:00 2001
From: Congyu Wang <116020237@link.cuhk.edu.cn>
Date: Mon, 5 Dec 2022 11:35:18 +0800
Subject: [PATCH] sync node position after resizing

---
 .../resize-rotate-node/src/node/ResizeRotateNode.vue   |  3 ++-
 packages/resize-rotate-node/src/node/utils.ts          | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/resize-rotate-node/src/node/ResizeRotateNode.vue b/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
index 7aa4a9c1..20b0e867 100644
--- a/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
+++ b/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
@@ -25,7 +25,7 @@ const el = ref()
 
 const visible = ref(false)
 
-const { onRotateStart, onRotate, onResizeStart, onResize } = useMoveable(props.id, emits)
+const { onRotateStart, onRotate, onResizeStart, onResize, onResizeEnd } = useMoveable(props.id, emits)
 
 const toggleVisibility = (val?: boolean) => {
   visible.value = val ?? !visible.value
@@ -110,6 +110,7 @@ export default {
     :zoom="1"
     @resize-start="onResizeStart"
     @resize="onResize"
+    @resize-end="onResizeEnd"
     @rotate-start="onRotateStart"
     @rotate="onRotate"
   />
diff --git a/packages/resize-rotate-node/src/node/utils.ts b/packages/resize-rotate-node/src/node/utils.ts
index 00d1f16f..0d1043d6 100644
--- a/packages/resize-rotate-node/src/node/utils.ts
+++ b/packages/resize-rotate-node/src/node/utils.ts
@@ -40,6 +40,15 @@ export function useMoveable(id: string, emits: ResizeRotateNodeEmits) {
     emits('resize', { width: e.width, height: e.height })
   }
 
+  const onResizeEnd = (e: MoveableEvents['resizeEnd']) => {
+    const oldPosition = node.computedPosition
+    e.target.style.transform = `rotate(${node.data!.rotate}deg)`
+    node.position = { x: oldPosition.x + node.data!.translate[0]!, y: oldPosition.y + node.data!.translate[1]! }
+    node.data!.translate = [0, 0]
+
+    emits('updateNodeInternals')
+  }
+
   const onRotateStart = (e: MoveableEvents['rotateStart']) => {
     e.set(node.data!.rotate)
   }
@@ -57,6 +66,7 @@ export function useMoveable(id: string, emits: ResizeRotateNodeEmits) {
   return {
     onResizeStart,
     onResize,
+    onResizeEnd,
     onRotateStart,
     onRotate,
   }