From 76d413a2ecfa98c36c8396a43164a5173c0a72e9 Mon Sep 17 00:00:00 2001
From: sixsage <sixsage02@gmail.com>
Date: Sat, 21 Sep 2024 05:01:11 -0700
Subject: [PATCH 1/5] add zoom in and zoom out buttons on mini map

---
 .../mini-map/mini-map.component.html          | 50 +++++++++++++------
 .../mini-map/mini-map.component.scss          | 16 +++++-
 .../mini-map/mini-map.component.ts            | 36 +++++++++++++
 3 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html
index 08168a34367..e2e78df8077 100644
--- a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html
+++ b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html
@@ -1,19 +1,39 @@
-<button
-  nz-button
-  id="minimap-button"
-  (click)="hidden = !hidden">
+<div>
+  <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>
+  </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>
diff --git a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss
index 5a9b0b26458..d5f536ec9d2 100644
--- a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss
+++ b/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;
diff --git a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
index 8de83d9b254..5e33530d0c8 100644
--- a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
+++ b/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
+      );
+  }
 }

From 818fc7167c485c2267b771233dfcf1f862ce7f95 Mon Sep 17 00:00:00 2001
From: sixsage <sixsage02@gmail.com>
Date: Mon, 23 Sep 2024 23:13:19 -0700
Subject: [PATCH 2/5] remove zoom in and out buttons from menu

---
 .../component/menu/menu.component.html        | 16 -----
 .../component/menu/menu.component.ts          | 58 -------------------
 2 files changed, 74 deletions(-)

diff --git a/core/gui/src/app/workspace/component/menu/menu.component.html b/core/gui/src/app/workspace/component/menu/menu.component.html
index 861f3c909f5..52a3fb739c2 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.html
+++ b/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
diff --git a/core/gui/src/app/workspace/component/menu/menu.component.ts b/core/gui/src/app/workspace/component/menu/menu.component.ts
index 6afe1e0e380..c4d22565274 100644
--- a/core/gui/src/app/workspace/component/menu/menu.component.ts
+++ b/core/gui/src/app/workspace/component/menu/menu.component.ts
@@ -298,22 +298,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.
@@ -322,48 +306,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
    *

From 5a11a1e4af5c6ef6e13d013d0bcd065f028d67c0 Mon Sep 17 00:00:00 2001
From: sixsage <sixsage02@gmail.com>
Date: Mon, 23 Sep 2024 23:14:36 -0700
Subject: [PATCH 3/5] format fix

---
 .../workflow-editor/mini-map/mini-map.component.html     | 9 ++++-----
 .../workflow-editor/mini-map/mini-map.component.scss     | 4 ++--
 .../workflow-editor/mini-map/mini-map.component.ts       | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html
index e2e78df8077..deb418a2800 100644
--- a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html
+++ b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.html
@@ -3,9 +3,9 @@
     nz-button
     id="minimap-button"
     (click)="hidden = !hidden">
-  <span
-    nz-icon
-    nzType="{{hidden ? 'global' : 'minus'}}"></span>
+    <span
+      nz-icon
+      nzType="{{hidden ? 'global' : 'minus'}}"></span>
   </button>
   <button
     id="minimap-zoom-out-button"
@@ -33,7 +33,6 @@
       cdkDragBoundary="texera-mini-map"
       (cdkDragMoved)="onDrag($event)"
       (cdkDragStarted)="dragging=true"
-      (cdkDragEnded)="dragging=false">
-    </div>
+      (cdkDragEnded)="dragging=false"></div>
   </div>
 </div>
diff --git a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss
index d5f536ec9d2..4e69c504d02 100644
--- a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss
+++ b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.scss
@@ -5,14 +5,14 @@
   z-index: 4;
 }
 
-#minimap-zoom-out-button{
+#minimap-zoom-out-button {
   position: absolute;
   bottom: 0;
   right: 30px;
   z-index: 4;
 }
 
-#minimap-zoom-in-button{
+#minimap-zoom-in-button {
   position: absolute;
   bottom: 0;
   right: 60px;
diff --git a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
index 5e33530d0c8..88118e82b6f 100644
--- a/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
+++ b/core/gui/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
@@ -3,7 +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";
+import { JointGraphWrapper } from "../../../service/workflow-graph/model/joint-graph-wrapper";
 
 @UntilDestroy()
 @Component({

From 28cd0287369c71a90f14b81b8696523fffb7fad3 Mon Sep 17 00:00:00 2001
From: sixsage <sixsage02@gmail.com>
Date: Mon, 23 Sep 2024 23:20:43 -0700
Subject: [PATCH 4/5] remove overflow hidden

---
 core/gui/src/styles.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/core/gui/src/styles.scss b/core/gui/src/styles.scss
index 8f1e3f9e7eb..d413e250da0 100644
--- a/core/gui/src/styles.scss
+++ b/core/gui/src/styles.scss
@@ -72,7 +72,3 @@ hr {
 .ant-tabs-tabpane {
   padding-right: 24px;
 }
-
-body {
-  overflow: hidden;
-}

From 36f034e71069c0f7f4542c83febde96bc560f6bd Mon Sep 17 00:00:00 2001
From: sixsage <sixsage02@gmail.com>
Date: Mon, 23 Sep 2024 23:25:05 -0700
Subject: [PATCH 5/5] revoke removal

---
 core/gui/src/styles.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/core/gui/src/styles.scss b/core/gui/src/styles.scss
index d413e250da0..8f1e3f9e7eb 100644
--- a/core/gui/src/styles.scss
+++ b/core/gui/src/styles.scss
@@ -72,3 +72,7 @@ hr {
 .ant-tabs-tabpane {
   padding-right: 24px;
 }
+
+body {
+  overflow: hidden;
+}