feat(studio): diagram option to fit the current flow

packages/studio-ui/src/web/actions/index.ts

@@ -311,6 +311,7 @@ export const toggleBottomPanelExpand = createAction('UI/TOGGLE_BOTTOM_PANEL_EXPA
 export const zoomIn = createAction('UI/ZOOM_IN_DIAGRAM')
 export const zoomOut = createAction('UI/ZOOM_OUT_DIAGRAM')
 export const zoomToLevel = createAction('UI/ZOOM_TO_LEVEL_DIAGRAM')
+export const zoomToFit = createAction('UI/ZOOM_TO_FIT_DIAGRAM')
 export const setEmulatorOpen = createAction('EMULATOR_OPENED')
 
 // User

packages/studio-ui/src/web/reducers/ui.ts

@@ -13,6 +13,7 @@ import {
   viewModeChanged,
   zoomIn,
   zoomOut,
+  zoomToFit,
   zoomToLevel
 } from '~/actions'
 
@@ -92,6 +93,12 @@ const reducer = handleActions(
         zoomLevel: state.zoomLevel + 25
       }
     },
+    [zoomToFit]: (state, {}) => {
+      return {
+        ...state,
+        zoomLevel: -1
+      }
+    },
     [zoomToLevel]: (state, { payload }) => {
       return {
         ...state,

packages/studio-ui/src/web/views/FlowBuilder/diagram/ZoomToolbar/index.tsx

@@ -2,7 +2,7 @@ import { Button } from '@blueprintjs/core'
 import { lang, ToolTip } from 'botpress/shared'
 import React, { FC } from 'react'
 import { connect } from 'react-redux'
-import { zoomIn, zoomOut, zoomToLevel } from '~/actions'
+import { zoomIn, zoomOut, zoomToLevel, zoomToFit } from '~/actions'
 
 import { RootReducer } from '../../../../reducers'
 
@@ -13,7 +13,7 @@ type DispatchProps = typeof mapDispatchToProps
 
 type Props = DispatchProps & StateProps
 
-const ZoomToolbar: FC<Props> = ({ zoomLevel, zoomIn, zoomOut, zoomToLevel }) => (
+const ZoomToolbar: FC<Props> = ({ zoomLevel, zoomIn, zoomOut, zoomToLevel, zoomToFit }) => (
   <div className={style.zoomWrapper}>
     <ToolTip content={lang.tr('studio.zoomOut')}>
       <Button icon="zoom-out" disabled={zoomLevel <= 10} onClick={zoomOut} />
@@ -32,6 +32,9 @@ const ZoomToolbar: FC<Props> = ({ zoomLevel, zoomIn, zoomOut, zoomToLevel }) =>
     <ToolTip content={lang.tr('studio.zoomIn')}>
       <Button icon="zoom-in" onClick={zoomIn} />
     </ToolTip>
+    <ToolTip content={lang.tr('studio.zoomToFit')}>
+      <Button icon="zoom-to-fit" onClick={zoomToFit} />
+    </ToolTip>
   </div>
 )
 
@@ -42,6 +45,7 @@ const mapStateToProps = (state: RootReducer) => ({
 const mapDispatchToProps = {
   zoomIn,
   zoomOut,
+  zoomToFit,
   zoomToLevel
 }
 

packages/studio-ui/src/web/views/FlowBuilder/diagram/index.tsx

@@ -247,7 +247,11 @@ class Diagram extends Component<Props> {
     }
 
     if (prevProps.zoomLevel !== this.props.zoomLevel) {
-      this.diagramEngine.diagramModel.setZoomLevel(this.props.zoomLevel)
+      if (this.props.zoomLevel === -1) {
+        this.manager.updateZoomLevel()
+      } else {
+        this.diagramEngine.diagramModel.setZoomLevel(this.props.zoomLevel)
+      }
     }
 
     if (prevProps.debuggerEvent !== this.props.debuggerEvent) {

packages/studio-ui/src/web/views/FlowBuilder/diagram/manager.ts

@@ -76,16 +76,7 @@ export class DiagramManager {
       return
     }
 
-    const nodes = currentFlow.nodes.map((node: NodeView) => {
-      node.x = _.round(node.x)
-      node.y = _.round(node.y)
-
-      return createNodeModel(node, {
-        ...node,
-        isStartNode: currentFlow.startNode === node.name,
-        isHighlighted: this.shouldHighlightNode(node)
-      })
-    })
+    const nodes = this.getBlockModelFromFlow(currentFlow)
     this.activeModel.addListener({ zoomUpdated: e => this.storeDispatch.zoomToLevel?.(Math.floor(e.zoom)) })
 
     this.activeModel.addAll(...nodes)
@@ -99,6 +90,24 @@ export class DiagramManager {
     this.highlightLinkedNodes()
   }
 
+  updateZoomLevel() {
+    const nodes = this.getBlockModelFromFlow(this.currentFlow)
+    this._updateZoomLevel(nodes)
+  }
+
+  getBlockModelFromFlow(flow: FlowView) {
+    return flow.nodes.map((node: NodeView) => {
+      node.x = _.round(node.x)
+      node.y = _.round(node.y)
+
+      return createNodeModel(node, {
+        ...node,
+        isStartNode: flow.startNode === node.name,
+        isHighlighted: this.shouldHighlightNode(node)
+      })
+    })
+  }
+
   shouldHighlightNode(node: NodeView): boolean {
     const queryParams = new URLSearchParams(window.location.search)