code improve for 3d node (#6403)

## Summary

code improve for 3d node

## Changes

1. remove custom css
2. use tailwind instead
3. bug fix for right click context menu

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6403-code-improve-for-3d-node-29c6d73d3650819fab26feabdaa21821)
by [Unito](https://www.unito.io)

packages/design-system/src/css/style.css

@@ -1198,31 +1198,6 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
-/* Load3d styles */
-.comfy-load-3d,
-.comfy-load-3d-animation,
-.comfy-preview-3d,
-.comfy-preview-3d-animation {
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.comfy-load-3d canvas,
-.comfy-load-3d-animation canvas,
-.comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas,
-.comfy-load-3d-viewer canvas {
-  display: flex;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-/* End of Load3d styles */
-
 /* [Desktop] Electron window specific styles */
 .app-drag {
   app-region: drag;

src/components/load3d/Load3DScene.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="comfy-load-3d relative h-full w-full">
+  <div ref="container" class="relative h-full w-full">
     <LoadingOverlay ref="loadingOverlayRef" />
   </div>
 </template>

src/components/load3d/Load3dViewerContent.vue

@@ -9,7 +9,7 @@
     <div ref="mainContentRef" class="relative flex-1">
       <div
         ref="containerRef"
-        class="comfy-load-3d-viewer absolute h-full w-full"
+        class="absolute h-full w-full"
         @resize="viewer.handleResize"
       />
     </div>

src/extensions/core/load3d/Load3d.ts

@@ -84,6 +84,7 @@ class Load3d {
     this.renderer.setClearColor(0x282828)
     this.renderer.autoClear = false
     this.renderer.outputColorSpace = THREE.SRGBColorSpace
+    this.renderer.domElement.classList.add('flex', '!h-full', '!w-full')
     container.appendChild(this.renderer.domElement)
 
     this.eventManager = new EventManager()
@@ -212,7 +213,14 @@ class Load3d {
     }
 
     const contextmenuHandler = (e: MouseEvent) => {
-      const wasDragging = this.rightMouseMoved
+      if (this.isViewerMode) return
+
+      const dx = Math.abs(e.clientX - this.rightMouseDownX)
+      const dy = Math.abs(e.clientY - this.rightMouseDownY)
+      const wasDragging =
+        this.rightMouseMoved ||
+        dx > this.dragThreshold ||
+        dy > this.dragThreshold
 
       this.rightMouseMoved = false