refactor(core): rename viewport and zoom-pane css classes

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

packages/core/src/container/Viewport/Viewport.vue

@@ -17,13 +17,13 @@ const transform = computed(() => `translate(${viewport.value.x}px,${viewport.val
 
 <script lang="ts">
 export default {
-  name: 'Transform',
+  name: 'Viewport',
   compatConfig: { MODE: 3 },
 }
 </script>
 
 <template>
-  <div class="vue-flow__transformationpane vue-flow__container" :style="{ transform, opacity: isHidden ? 0 : undefined }">
+  <div class="vue-flow__viewport vue-flow__container" :style="{ transform, opacity: isHidden ? 0 : undefined }">
     <slot />
   </div>
 </template>

packages/core/src/container/ZoomPane/ZoomPane.vue

@@ -138,11 +138,15 @@ export default {
 </script>
 
 <template>
-  <div ref="zoomPane" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container">
+  <div ref="zoomPane" :key="`viewport-${id}`" class="vue-flow__zoom-pane vue-flow__container">
     <Pane
       :is-selecting="isSelecting"
       :selection-key-pressed="selectionKeyPressed"
-      :class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
+      :class="{
+        connecting: !!connectionStartHandle,
+        dragging: paneDragging,
+        draggable: panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0)),
+      }"
     >
       <Viewport>
         <EdgeRenderer />

packages/core/src/style.css

@@ -31,13 +31,13 @@
    }
 }
 
-.vue-flow__transformationpane {
+.vue-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
 }
 
-.vue-flow__viewport {
+.vue-flow__zoom-pane {
   z-index: 4;
   overflow: clip;
 }