static 폴더 및 하위 파일 업로드

static/js/modules/graph/events/viewport.js

@@ -0,0 +1,80 @@
+import { state } from '../../state.js';
+
+let isRightDragging = false;
+let startX = 0;
+let startY = 0;
+const threshold = 5;
+
+/**
+ * Handle mousedown on the graph to initialize right-click panning.
+ */
+const handleGraphMouseDown = ({ e }) => {
+    if (e.button === 2) { // Right Click
+        isRightDragging = false;
+        startX = e.clientX;
+        startY = e.clientY;
+        state.isRightDragging = false;
+    }
+};
+
+/**
+ * Global event handler for mousemove to support panning.
+ * Registered only once on document level.
+ */
+const onMouseMove = (e) => {
+    if (e.buttons === 2 && state.graph) {
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        // Detect dragging start (beyond threshold)
+        if (!isRightDragging && (Math.abs(dx) > threshold || Math.abs(dy) > threshold)) {
+            isRightDragging = true;
+            state.isRightDragging = true;
+            // Sync start positions to current mouse position to avoid the initial jump
+            startX = e.clientX;
+            startY = e.clientY;
+            return;
+        }
+
+        if (isRightDragging) {
+            state.graph.translateBy(dx, dy);
+            startX = e.clientX;
+            startY = e.clientY;
+        }
+    }
+};
+
+/**
+ * Global event handler for mouseup to finish panning.
+ * Registered only once on document level.
+ */
+const onMouseUp = () => {
+    if (isRightDragging) {
+        // Reset after a short delay to allow contextmenu event to check the flag
+        setTimeout(() => {
+            state.isRightDragging = false;
+            isRightDragging = false;
+        }, 100);
+    }
+};
+
+/**
+ * Initializes viewport-related events for the current graph instance.
+ * Should be called whenever a new graph is created.
+ */
+export function initViewportEvents() {
+    if (!state.graph) return;
+
+    // Attach to the specific graph instance, ensuring no duplicates
+    state.graph.off('blank:mousedown', handleGraphMouseDown);
+    state.graph.on('blank:mousedown', handleGraphMouseDown);
+    state.graph.off('cell:mousedown', handleGraphMouseDown);
+    state.graph.on('cell:mousedown', handleGraphMouseDown);
+
+    // Register document-level listeners only once per page session
+    if (!window._drawNetViewportEventsInitialized) {
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        window._drawNetViewportEventsInitialized = true;
+    }
+}