Merge pull request #2008 from botpress/sp_flow-zoom

fix(studio): always see the entire flow
botpress · Jun 28, 2019 · 303ec7d · 303ec7d
2 parents 4008ba3 + 4d4de76
commit 303ec7d
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.jsx b/src/bp/ui-studio/src/web/views/FlowBuilder/diagram/index.jsx
@@ -120,15 +120,19 @@ export default class FlowBuilder extends Component {
 
     if (diagramContainer) {
       const diagramWidth = diagramContainer.offsetWidth
+      const diagramHeight = diagramContainer.offsetHeight
       const totalFlowWidth = _.max(nodes.map(({ x }) => x)) - _.min(nodes.map(({ x }) => x))
-      this.activeModel.setZoomLevel(Math.min(1, diagramWidth / (totalFlowWidth + 2 * PADDING)) * 100)
-      this.activeModel.setOffsetX(-_.min(nodes.map(({ x }) => x)) + PADDING)
-      this.activeModel.setOffsetY(-_.min(nodes.map(({ y }) => y)) + PADDING)
+      const totalFlowHeight = _.max(nodes.map(({ y }) => y)) - _.min(nodes.map(({ y }) => y))
+      const zoomLevelX = Math.min(1, diagramWidth / (totalFlowWidth + 2 * PADDING))
+      const zoomLevelY = Math.min(1, diagramHeight / (totalFlowHeight + 2 * PADDING))
+      const zoomLevel = Math.min(zoomLevelX, zoomLevelY)
 
-      // TODO: find the dark formula to center the selected element ...
-      if (centeredElement) {
-        this.activeModel.setOffset(0, 0)
-      }
+      const offsetX = PADDING - _.min(nodes.map(({ x }) => x))
+      const offsetY = PADDING - _.min(nodes.map(({ y }) => y))
+
+      this.activeModel.setZoomLevel(zoomLevel * 100)
+      this.activeModel.setOffsetX(offsetX * zoomLevel)
+      this.activeModel.setOffsetY(offsetY * zoomLevel)
 
       this.diagramWidget && this.diagramWidget.forceUpdate()
     }