Add zoom in and out buttons on minimap

core/gui/src/app/workspace/component/menu/menu.component.html

@@ -138,22 +138,6 @@
               nz-icon
               nzType="border-outer"></i>
           </button>
-          <button
-            (click)="onClickZoomOut()"
-            nz-button
-            title="zoom out">
-            <i
-              nz-icon
-              nzType="zoom-out"></i>
-          </button>
-          <button
-            (click)="onClickZoomIn()"
-            nz-button
-            title="zoom in">
-            <i
-              nz-icon
-              nzType="zoom-in"></i>
-          </button>
           <button
             (click)="onClickRestoreZoomOffsetDefault()"
             nz-button

core/gui/src/app/workspace/component/menu/menu.component.ts

@@ -316,22 +316,6 @@ export class MenuComponent implements OnInit {
       });
   }
 
-  /**
-   * This method checks whether the zoom ratio reaches minimum. If it is minimum, this method
-   *  will disable the zoom out button on the menu bar.
-   */
-  public isZoomRatioMin(): boolean {
-    return this.workflowActionService.getJointGraphWrapper().isZoomRatioMin();
-  }
-
-  /**
-   * This method checks whether the zoom ratio reaches maximum. If it is maximum, this method
-   *  will disable the zoom in button on the menu bar.
-   */
-  public isZoomRatioMax(): boolean {
-    return this.workflowActionService.getJointGraphWrapper().isZoomRatioMax();
-  }
-
   /**
    * This method will flip the current status of whether to draw grids in jointPaper.
    * This option is only for the current session and will be cleared on refresh.
@@ -340,48 +324,6 @@ export class MenuComponent implements OnInit {
     this.workflowActionService.getJointGraphWrapper().toggleGrids();
   }
 
-  /**
-   * This method will decrease the zoom ratio and send the new zoom ratio value
-   *  to the joint graph wrapper to change overall zoom ratio that is used in
-   *  zoom buttons and mouse wheel zoom.
-   *
-   * If the zoom ratio already reaches minimum, this method will not do anything.
-   */
-  public onClickZoomOut(): void {
-    // if zoom is already at minimum, don't zoom out again.
-    if (this.isZoomRatioMin()) {
-      return;
-    }
-
-    // make the ratio small.
-    this.workflowActionService
-      .getJointGraphWrapper()
-      .setZoomProperty(
-        this.workflowActionService.getJointGraphWrapper().getZoomRatio() - JointGraphWrapper.ZOOM_CLICK_DIFF
-      );
-  }
-
-  /**
-   * This method will increase the zoom ratio and send the new zoom ratio value
-   *  to the joint graph wrapper to change overall zoom ratio that is used in
-   *  zoom buttons and mouse wheel zoom.
-   *
-   * If the zoom ratio already reaches maximum, this method will not do anything.
-   */
-  public onClickZoomIn(): void {
-    // if zoom is already reach maximum, don't zoom in again.
-    if (this.isZoomRatioMax()) {
-      return;
-    }
-
-    // make the ratio big.
-    this.workflowActionService
-      .getJointGraphWrapper()
-      .setZoomProperty(
-        this.workflowActionService.getJointGraphWrapper().getZoomRatio() + JointGraphWrapper.ZOOM_CLICK_DIFF
-      );
-  }
-
   /**
    * This method will run the autoLayout function
    *

core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html

@@ -1,19 +1,38 @@
-<button
-  nz-button
-  id="minimap-button"
-  (click)="hidden = !hidden">
-  <span
-    nz-icon
-    nzType="{{hidden ? 'global' : 'minus'}}"></span>
-</button>
-
-<div [hidden]="hidden">
-  <div id="mini-map"></div>
-  <div
-    id="mini-map-navigator"
-    cdkDrag
-    cdkDragBoundary="texera-mini-map"
-    (cdkDragMoved)="onDrag($event)"
-    (cdkDragStarted)="dragging=true"
-    (cdkDragEnded)="dragging=false"></div>
+<div>
+  <button
+    nz-button
+    id="minimap-button"
+    (click)="hidden = !hidden">
+    <span
+      nz-icon
+      nzType="{{hidden ? 'global' : 'minus'}}"></span>
+  </button>
+  <button
+    id="minimap-zoom-out-button"
+    (click)="onClickZoomOut()"
+    nz-button
+    title="zoom out">
+    <i
+      nz-icon
+      nzType="zoom-out"></i>
+  </button>
+  <button
+    id="minimap-zoom-in-button"
+    (click)="onClickZoomIn()"
+    nz-button
+    title="zoom in">
+    <i
+      nz-icon
+      nzType="zoom-in"></i>
+  </button>
+  <div [hidden]="hidden">
+    <div id="mini-map"></div>
+    <div
+      id="mini-map-navigator"
+      cdkDrag
+      cdkDragBoundary="texera-mini-map"
+      (cdkDragMoved)="onDrag($event)"
+      (cdkDragStarted)="dragging=true"
+      (cdkDragEnded)="dragging=false"></div>
+  </div>
 </div>

core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss

@@ -1,10 +1,24 @@
 #minimap-button {
-  position: fixed;
+  position: absolute;
   bottom: 0;
   right: 0;
   z-index: 4;
 }
 
+#minimap-zoom-out-button {
+  position: absolute;
+  bottom: 0;
+  right: 30px;
+  z-index: 4;
+}
+
+#minimap-zoom-in-button {
+  position: absolute;
+  bottom: 0;
+  right: 60px;
+  z-index: 4;
+}
+
 #mini-map {
   height: 200px;
   width: 300px;

core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts

@@ -3,6 +3,7 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { MAIN_CANVAS } from "../workflow-editor.component";
 import * as joint from "jointjs";
+import { JointGraphWrapper } from "../../../service/workflow-graph/model/joint-graph-wrapper";
 
 @UntilDestroy()
 @Component({
@@ -68,4 +69,39 @@ export class MiniMapComponent implements AfterViewInit, OnDestroy {
       navigator.style.height = (editor.offsetHeight / this.paper.scale().sy) * this.scale + "px";
     }
   }
+
+  public onClickZoomOut(): void {
+    // if zoom is already at minimum, don't zoom out again.
+    if (this.workflowActionService.getJointGraphWrapper().isZoomRatioMin()) {
+      return;
+    }
+
+    // make the ratio small.
+    this.workflowActionService
+      .getJointGraphWrapper()
+      .setZoomProperty(
+        this.workflowActionService.getJointGraphWrapper().getZoomRatio() - JointGraphWrapper.ZOOM_CLICK_DIFF
+      );
+  }
+
+  /**
+   * This method will increase the zoom ratio and send the new zoom ratio value
+   *  to the joint graph wrapper to change overall zoom ratio that is used in
+   *  zoom buttons and mouse wheel zoom.
+   *
+   * If the zoom ratio already reaches maximum, this method will not do anything.
+   */
+  public onClickZoomIn(): void {
+    // if zoom is already reach maximum, don't zoom in again.
+    if (this.workflowActionService.getJointGraphWrapper().isZoomRatioMax()) {
+      return;
+    }
+
+    // make the ratio big.
+    this.workflowActionService
+      .getJointGraphWrapper()
+      .setZoomProperty(
+        this.workflowActionService.getJointGraphWrapper().getZoomRatio() + JointGraphWrapper.ZOOM_CLICK_DIFF
+      );
+  }
 }