sync node position after resizing

Author: Congyuwang

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"
   />

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,
   }