Increase max auto zoom and add more constants

packages/builder/src/components/backend/RoleEditor/Controls.svelte

@@ -3,7 +3,7 @@
   import { useSvelteFlow, Position } from "@xyflow/svelte"
   import { getContext, tick } from "svelte"
   import { autoLayout, roleToNode } from "./layout"
-  import { ZoomDuration } from "./constants"
+  import { MaxAutoZoom, ZoomDuration } from "./constants"
   import { getSequentialName } from "helpers/duplicate"
   import { roles } from "stores/builder"
   import { Roles } from "constants/backend"
@@ -33,7 +33,7 @@
     edges.set(layout.edges)
     await tick()
     flow.fitView({
-      maxZoom: 1,
+      maxZoom: MaxAutoZoom,
       duration: ZoomDuration,
     })
   }
@@ -54,7 +54,8 @@
   </div>
   <Button
     secondary
-    on:click={() => flow.fitView({ maxZoom: 1, duration: ZoomDuration })}
+    on:click={() =>
+      flow.fitView({ maxZoom: MaxAutoZoom, duration: ZoomDuration })}
   >
     Zoom to fit
   </Button>

packages/builder/src/components/backend/RoleEditor/RoleNode.svelte

@@ -10,7 +10,7 @@
     FieldLabel,
   } from "@budibase/bbui"
   import { Roles } from "constants/backend"
-  import { NodeWidth, NodeHeight } from "./constants"
+  import { NodeWidth, NodeHeight, MaxAutoZoom, ZoomDuration } from "./constants"
   import { getContext, tick } from "svelte"
   import { autoLayout, nodeToRole } from "./layout"
   import { roles } from "stores/builder"
@@ -79,7 +79,7 @@
     const layout = autoLayout({ nodes: $nodes, edges: $edges })
     nodes.set(layout.nodes)
     edges.set(layout.edges)
-    flow.fitView({ maxZoom: 1, duration: 300 })
+    flow.fitView({ maxZoom: MaxAutoZoom, duration: ZoomDuration })
   }
 </script>
 

packages/builder/src/components/backend/RoleEditor/constants.js

@@ -1,3 +1,4 @@
 export const NodeWidth = 220
 export const NodeHeight = 66
 export const ZoomDuration = 300
+export const MaxAutoZoom = 1.2