From 2210c59bf8394539308191bb2990f001c776cec7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 11 Dec 2021 23:59:19 +0100
Subject: [PATCH] feat: add transformation pane

* instead of using transform on each child node, wrap them in a transformed div

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../TransformationPane/TransformationPane.vue | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/container/TransformationPane/TransformationPane.vue

diff --git a/src/container/TransformationPane/TransformationPane.vue b/src/container/TransformationPane/TransformationPane.vue
new file mode 100644
index 00000000..f074c0ca
--- /dev/null
+++ b/src/container/TransformationPane/TransformationPane.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
+import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
+import { useStore } from '../../composables'
+
+const store = useStore()
+</script>
+<template>
+  <div
+    class="vue-flow__transformation-pane vue-flow__container"
+    :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
+  >
+    <NodeRenderer :key="`node-renderer-${store.id}`">
+      <template
+        v-for="nodeName of Object.keys(store.getNodeTypes)"
+        #[`node-${nodeName}`]="nodeProps"
+        :key="`node-${nodeName}-${store.id}`"
+      >
+        <slot :name="`node-${nodeName}`" v-bind="nodeProps" />
+      </template>
+    </NodeRenderer>
+    <EdgeRenderer :key="`edge-renderer-${store.id}`">
+      <template
+        v-for="edgeName of Object.keys(store.getEdgeTypes)"
+        #[`edge-${edgeName}`]="edgeProps"
+        :key="`edge-${edgeName}-${store.id}`"
+      >
+        <slot :name="`edge-${edgeName}`" v-bind="edgeProps" />
+      </template>
+      <template #custom-connection-line="customConnectionLineProps">
+        <slot name="custom-connection-line" v-bind="customConnectionLineProps" />
+      </template>
+    </EdgeRenderer>
+  </div>
+</template>