From b120c22174347a65c661ee72bb634aa8b3cfd6e7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 15 May 2022 19:35:00 +0200
Subject: [PATCH] feat: Add moveable to ResizeRotateNode.vue

---
 packages/resize-rotate-node/example/App.vue   |  4 +--
 .../src/node/ResizeRotateNode.vue             | 25 +++++++++++++++++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/resize-rotate-node/example/App.vue b/packages/resize-rotate-node/example/App.vue
index a773fee3..f2118f14 100644
--- a/packages/resize-rotate-node/example/App.vue
+++ b/packages/resize-rotate-node/example/App.vue
@@ -27,8 +27,8 @@ const onLoad = (flowInstance: FlowInstance) => {
 </template>
 
 <style>
-@import '../node_modules/@braks/vue-flow/dist/style.css';
-@import '../node_modules/@braks/vue-flow/dist/theme-default.css';
+@import '@braks/vue-flow/dist/style.css';
+@import '@braks/vue-flow/dist/theme-default.css';
 
 html,
 body,
diff --git a/packages/resize-rotate-node/src/node/ResizeRotateNode.vue b/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
index 1c772eda..f3643a03 100644
--- a/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
+++ b/packages/resize-rotate-node/src/node/ResizeRotateNode.vue
@@ -1,3 +1,24 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { MoveableEvents } from 'vue3-moveable'
+import Moveable from 'vue3-moveable'
+import type { Dimensions } from '@braks/vue-flow'
 
-<template></template>
+const props = defineProps<{
+  id: string
+  label: string
+  dimensions: Dimensions
+}>()
+
+const el = ref()
+
+const onScale = ({ scale, transform, target }: MoveableEvents['scale']) => {}
+
+const onRotate = () => {}
+</script>
+
+<template>
+  <div ref="el" class="vue-flow__node-default">
+    {{ label }}
+  </div>
+  <Moveable :target="[`[data-id='${id}']`]" :scalable="true" :rotatable="true" @scale="onScale" @rotate="onRotate" />
+</template>