move minmap to own pixi app and use html to overlay it

Author: carlos22

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/WorkflowCanvas.vue

@@ -44,8 +44,7 @@ const { activeWorkflow, isWorkflowEmpty, isWritable } = storeToRefs(
 const aiQuickActionsStore = useAiQuickActionsStore();
 const canvasStore = useWebGLCanvasStore();
 
-const { containerSize, shouldHideMiniMap, interactionsEnabled } =
-  storeToRefs(canvasStore);
+const { containerSize, interactionsEnabled } = storeToRefs(canvasStore);
 
 const skeletonAnnotationData = computed(
   () =>
@@ -114,7 +113,6 @@ onMounted(() => {
 
 const rootEl = useTemplateRef("rootEl");
 const initResizeObserver = () => {
-  let minimapVisibilityTimeout: number;
   if (!rootEl.value) {
     return;
   }
@@ -130,17 +128,6 @@ const initResizeObserver = () => {
       return;
     }
 
-    shouldHideMiniMap.value = true;
-
-    if (minimapVisibilityTimeout) {
-      clearTimeout(minimapVisibilityTimeout);
-    }
-
-    minimapVisibilityTimeout = window.setTimeout(() => {
-      shouldHideMiniMap.value = false;
-      // eslint-disable-next-line no-magic-numbers
-    }, 300);
-
     updateContainerSize();
   });
 

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/floatingToolbar/canvasTools/FloatingCanvasTools.vue

@@ -17,6 +17,9 @@ import { useLifecycleStore } from "@/store/application/lifecycle";
 import { useApplicationSettingsStore } from "@/store/application/settings";
 import { useSettingsStore } from "@/store/settings";
 import { useWorkflowStore } from "@/store/workflow/workflow";
+import { canvasMinimapAspectRatio } from "@/style/shapes";
+import { Application, type ApplicationInst } from "@/vue3-pixi";
+import Minimap from "../../kanvas/Minimap.vue";
 
 import ZoomMenu from "./ZoomMenu.vue";
 
@@ -42,9 +45,32 @@ const { hasPanModeEnabled: isPanModeActive } = storeToRefs(
 const applicationSettingsStore = useApplicationSettingsStore();
 const { devMode } = storeToRefs(applicationSettingsStore);
 const enableWorkflowActions = import.meta.env.MODE !== "e2e" && devMode;
+const minimapWidth = 200;
+const minimapHeight = minimapWidth / canvasMinimapAspectRatio;
 </script>
 
 <template>
+  <div v-show="isMinimapVisible" class="minimap-wrapper">
+    <Application
+      ref="minimapPixi"
+      :background-color="0x000000"
+      :background-alpha="0"
+      :width="minimapWidth"
+      :height="minimapHeight"
+      @contextmenu.prevent
+      @pointerdown.stop
+      @pointerenter.stop.capture
+      @pointerleave.stop.capture
+      @click.stop
+    >
+      <Minimap
+        v-if="isMinimapVisible"
+        :canvas="($refs.minimapPixi as ApplicationInst).app.canvas"
+        :width="minimapWidth"
+        :height="minimapHeight"
+      />
+    </Application>
+  </div>
   <div
     v-if="!isLoadingWorkflow && isBrowser() && enableWorkflowActions"
     class="workflow-actions toolbar"
@@ -115,6 +141,27 @@ const enableWorkflowActions = import.meta.env.MODE !== "e2e" && devMode;
   padding: var(--kds-spacing-container-0-25x);
 }
 
+.minimap-wrapper {
+  position: absolute;
+  bottom: calc(
+    v-bind("$shapes.floatingCanvasToolsBottomOffset") * 1px +
+      calc(v-bind("$shapes.floatingCanvasToolsSize") * 1px) +
+      var(--kds-spacing-container-0-37x)
+  );
+  width: 200px;
+  height: 150px;
+  right: calc(v-bind("$shapes.floatingCanvasToolsBottomOffset") * 1px);
+  display: flex;
+  place-items: center center;
+  background: var(--knime-white);
+  border: var(--kds-border-base-subtle);
+  border-radius: var(--kds-border-radius-container-0-50x);
+  box-shadow: var(--kds-elevation-level-1);
+  z-index: v-bind("$zIndices.layerCanvasDecorations");
+  padding: 0;
+  overflow: hidden;
+}
+
 .workflow-actions {
   left: calc(v-bind("$shapes.floatingCanvasToolsBottomOffset") * 1px);
 }

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/kanvas/Kanvas.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onUnmounted, ref, useTemplateRef, watch } from "vue";
+import { onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { useDevicePixelRatio } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import {
@@ -14,15 +14,13 @@ import { performanceTracker } from "@/services/performanceTracker";
 import { useCanvasModesStore } from "@/store/application/canvasModes";
 import { useApplicationSettingsStore } from "@/store/application/settings";
 import { useWebGLCanvasStore } from "@/store/canvas/canvas-webgl";
-import { useSettingsStore } from "@/store/settings";
 import { Application, type ApplicationInst } from "@/vue3-pixi";
 import Debug from "../Debug.vue";
 import { clearIconCache } from "../common/iconCache";
 import { pixiGlobals } from "../common/pixiGlobals";
 import { initE2ETestUtils } from "../util/e2eTest";
 import { isMarkedEvent } from "../util/interaction";
 
-import Minimap from "./Minimap.vue";
 import { useKanvasNodePortHint } from "./useKanvasNodePortHint";
 import { useMouseWheel } from "./useMouseWheel";
 import { useCanvasPanning } from "./usePanning";
@@ -33,7 +31,6 @@ const emit = defineEmits<{
 
 const canvasStore = useWebGLCanvasStore();
 const {
-  shouldHideMiniMap,
   containerSize,
   isDebugModeEnabled: isCanvasDebugEnabled,
   canvasLayers,
@@ -42,10 +39,6 @@ const {
   isHoldingDownSpace,
 } = storeToRefs(canvasStore);
 
-const isMinimapVisible = computed(
-  () => useSettingsStore().settings.isMinimapVisible,
-);
-
 const MAIN_CONTAINER_LABEL = "MainContainer";
 const { devMode } = storeToRefs(useApplicationSettingsStore());
 
@@ -189,8 +182,6 @@ watch(
       <Debug v-if="devMode" :visible="isCanvasDebugEnabled" />
       <slot />
     </Container>
-
-    <Minimap v-if="isMinimapVisible && !shouldHideMiniMap" />
   </Application>
 </template>
 

org.knime.ui.js/src/components/workflowEditor/WebGLKanvas/kanvas/Minimap.vue

@@ -2,22 +2,21 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
 import { storeToRefs } from "pinia";
-import { BlurFilter, type FederatedPointerEvent, type Graphics } from "pixi.js";
+import { type FederatedPointerEvent, type Graphics } from "pixi.js";
+import { Rectangle } from "pixi.js";
 
 import { clamp } from "@/lib/math";
 import { useWebGLCanvasStore } from "@/store/canvas/canvas-webgl";
-import * as $shapes from "@/style/shapes";
-import { pixiGlobals } from "../common/pixiGlobals";
-import { markPointerEventAsHandled } from "../util/interaction";
 
 import MiniPreview from "./MiniPreview.vue";
 
-const paddingBottom = 6;
-const rightOffset = $shapes.floatingCanvasToolsBottomOffset;
-const bottomOffset =
-  $shapes.floatingCanvasToolsBottomOffset +
-  $shapes.floatingCanvasToolsSize +
-  paddingBottom;
+type Props = {
+  canvas: HTMLCanvasElement;
+  width: number;
+  height: number;
+};
+
+const { canvas, width, height } = defineProps<Props>();
 
 const canvasStore = useWebGLCanvasStore();
 
@@ -26,19 +25,12 @@ const { containerSize, canvasOffset, zoomFactor, maxWorldContentBounds } =
 
 const worldBounds = computed(() => maxWorldContentBounds.value);
 
-const minimapWidth = 200;
-const minimapHeight = minimapWidth / $shapes.canvasMinimapAspectRatio;
-
 const minimapBounds = computed(() => {
-  const { width: containerWidth, height: containerHeight } =
-    containerSize.value;
-
   return {
-    x: containerWidth - minimapWidth - rightOffset,
-    y: containerHeight - minimapHeight - bottomOffset,
-
-    width: minimapWidth,
-    height: minimapHeight,
+    x: 0,
+    y: 0,
+    width,
+    height,
   };
 });
 
@@ -88,8 +80,6 @@ const minimapDeltaToCanvasDelta = (value: number, isXAxis = true) => {
 };
 
 const onCameraPointerdown = (pointerdown: FederatedPointerEvent) => {
-  markPointerEventAsHandled(pointerdown, { initiator: "minimap-pan" });
-
   const isOutOfBounds = (move: PointerEvent) => {
     return (
       move.offsetX < minimapBounds.value.x ||
@@ -99,7 +89,6 @@ const onCameraPointerdown = (pointerdown: FederatedPointerEvent) => {
     );
   };
 
-  const canvas = pixiGlobals.getCanvas();
   canvas.setPointerCapture(pointerdown.pointerId);
 
   let lastPan = {
@@ -157,8 +146,6 @@ const onMinimapPointerdown = (pointerdown: FederatedPointerEvent) => {
   // continue interaction into a camera pan
   onCameraPointerdown(pointerdown);
 };
-
-const blur = new BlurFilter({ strength: 4 });
 </script>
 
 <template>
@@ -167,33 +154,11 @@ const blur = new BlurFilter({ strength: 4 });
     label="Minimap"
     event-mode="static"
     :position="minimapBounds"
+    :hit-area="new Rectangle(0, 0, width, height)"
     @pointerdown.stop="onMinimapPointerdown"
+    @pointerenter.stop
+    @pointerleave.stop
   >
-    <Graphics
-      label="MinimapBackgroundBoxShadow"
-      :filters="[blur]"
-      @render="
-        (graphics) => {
-          graphics
-            .clear()
-            .roundRect(0, 1, minimapBounds.width, minimapBounds.height, 8)
-            .fill($colors.GrayDarkSemi);
-        }
-      "
-    />
-
-    <Graphics
-      label="MinimapBackground"
-      @render="
-        (graphics) => {
-          graphics
-            .clear()
-            .roundRect(0, 0, minimapBounds.width, minimapBounds.height, 8)
-            .fill($colors.White);
-        }
-      "
-    />
-
     <MiniPreview :minimap-transform="minimapTransform" />
 
     <Graphics

org.knime.ui.js/src/store/canvas/canvas-webgl.ts

@@ -73,7 +73,6 @@ export const useWebGLCanvasStore = defineStore("canvasWebGL", () => {
   const pixelRatio = ref(1);
   const isPanning = ref(false);
   const isHoldingDownSpace = ref(false);
-  const shouldHideMiniMap = ref(false);
 
   const pixelRatioWithLimits = computed(() => {
     // use lower bound to avoid blurry rendering (happen when having a ratio of 1)
@@ -816,7 +815,6 @@ export const useWebGLCanvasStore = defineStore("canvasWebGL", () => {
     contentBounds,
 
     // webgl only
-    shouldHideMiniMap,
     canvasAnchor,
     canvasLayers,
     isDebugModeEnabled,