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

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

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

Author: bcakmakoglu

packages/core/src/components/Handle/Handle.vue

@@ -23,7 +23,7 @@ const {
   connectionStartHandle,
   connectionClickStartHandle,
   connectionEndHandle,
-  vueFlowRef,
+  viewportRef,
   nodesConnectable,
   noDragClassName,
   noPanClassName,
@@ -106,21 +106,15 @@ onMounted(() => {
 
   const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
 
-  if (!vueFlowRef.value || existingBounds) {
-    return
-  }
-
-  const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
-
-  if (!nodeEl.value || !handle.value || !viewportNode || !handleId) {
+  if (!nodeEl.value || !handle.value || !viewportRef.value || !handleId || existingBounds) {
     return
   }
 
   const nodeBounds = nodeEl.value.getBoundingClientRect()
 
   const handleBounds = handle.value.getBoundingClientRect()
 
-  const style = window.getComputedStyle(viewportNode)
+  const style = window.getComputedStyle(viewportRef.value)
   const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
 
   const nextBounds = {

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/store/actions.ts

@@ -116,17 +116,11 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   }
 
   const updateNodeDimensions: Actions['updateNodeDimensions'] = (updates) => {
-    if (!state.vueFlowRef) {
+    if (!state.viewportRef) {
       return
     }
 
-    const viewportNode = state.vueFlowRef.querySelector('.vue-flow__transformationpane') as HTMLElement
-
-    if (!viewportNode) {
-      return
-    }
-
-    const style = window.getComputedStyle(viewportNode)
+    const style = window.getComputedStyle(state.viewportRef)
     const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
 
     const changes: NodeDimensionChange[] = []

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

tests/cypress/support/component.ts

@@ -25,12 +25,12 @@ function mountVueFlow(props?: FlowProps, attrs?: Record<string, any>, slots?: Re
   })
 }
 
-function useViewPort() {
-  return cy.get('.vue-flow__viewport')
+function useZoomPane() {
+  return cy.get('.vue-flow__zoom-pane')
 }
 
-function useTransformationPane() {
-  return cy.get('.vue-flow__transformationpane')
+function useViewport() {
+  return cy.get('.vue-flow__viewport')
 }
 
 function retry(assertion: Function, { interval = 20, timeout = 1000 } = {}) {
@@ -95,8 +95,8 @@ declare global {
     interface Chainable {
       mount: typeof mount
       vueFlow: typeof mountVueFlow
-      viewPort: typeof useViewPort
-      transformationPane: typeof useTransformationPane
+      viewPort: typeof useZoomPane
+      transformationPane: typeof useViewport
       tryAssertion: typeof retry
       connect: typeof connect
       dragConnection: typeof dragConnection
@@ -108,9 +108,9 @@ Cypress.Commands.add('mount', mount)
 
 Cypress.Commands.add('vueFlow', mountVueFlow)
 
-Cypress.Commands.add('viewPort', useViewPort)
+Cypress.Commands.add('viewPort', useZoomPane)
 
-Cypress.Commands.add('transformationPane', useTransformationPane)
+Cypress.Commands.add('transformationPane', useViewport)
 
 Cypress.Commands.add('tryAssertion', retry)