feat: add plugin-based file rendering system with 3D file preview support

Author: kerwin612

package.json

@@ -39,6 +39,7 @@
     "minimatch": "10.0.2",
     "monaco-editor": "0.52.2",
     "monaco-editor-webpack-plugin": "7.1.0",
+    "online-3d-viewer": "0.16.0",
     "pdfobject": "2.3.1",
     "perfect-debounce": "1.0.0",
     "postcss": "8.5.5",

templates/repo/view_file.tmpl

@@ -110,7 +110,7 @@
 					{{else if .IsPDFFile}}
 						<div class="pdf-content is-loading" data-global-init="initPdfViewer" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
 					{{else}}
-						<a href="{{$.RawFileLink}}" rel="nofollow" class="tw-p-4">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
+						<div class="file-view-container" data-global-init="initFileView" data-filename="{{.TreePath}}" data-url="{{$.RawFileLink}}" data-fallback-text="{{ctx.Locale.Tr "repo.file_view_raw"}}"></div>
 					{{end}}
 				</div>
 			{{else if .FileSize}}

web_src/css/file-view.css

@@ -0,0 +1,71 @@
+/**
+ * File View & Render Plugin Styles
+ */
+
+/* file view container */
+.file-view-container {
+  position: relative;
+  width: 100%;
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.file-view-container.is-loading {
+  position: relative;
+}
+
+.file-view-container.is-loading::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  border: 5px solid var(--color-secondary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.view-raw-fallback {
+  padding: 16px;
+  text-align: center;
+}
+
+/* 3D model viewer */
+.model3d-content {
+  width: 100% !important;
+  min-height: 400px !important;
+  border: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* error message */
+.file-view-container .ui.error.message {
+  margin: 1em 0;
+  width: 100%;
+}
+
+.file-view-container .ui.error.message pre {
+  margin-top: 0.5em;
+  font-size: 12px;
+  max-height: 150px;
+  overflow: auto;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.5em;
+}

web_src/css/index.css

@@ -85,4 +85,6 @@
 
 @import "./helpers.css";
 
+@import "./file-view.css";
+
 @tailwind utilities;

web_src/js/features/file-view.ts

@@ -0,0 +1,59 @@
+import {applyRenderPlugin} from '../modules/file-render-plugin.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+
+/**
+ * init file view renderer
+ *
+ * detect renderable files and apply appropriate plugins
+ */
+export function initFileView(): void {
+  // register file view renderer init function
+  registerGlobalInitFunc('initFileView', async (container: HTMLElement) => {
+    // get file info
+    const filename = container.getAttribute('data-filename');
+    const fileUrl = container.getAttribute('data-url');
+
+    // mark loading state
+    container.classList.add('is-loading');
+
+    try {
+      // check if filename and url exist
+      if (!filename || !fileUrl) {
+        console.error(`missing filename(${filename}) or file url(${fileUrl}) for rendering`);
+        throw new Error('missing necessary file info');
+      }
+
+      // try to apply render plugin
+      const success = await applyRenderPlugin(container);
+
+      // if no suitable plugin is found, show default view
+      if (!success) {
+        // show default view raw file link
+        const fallbackText = container.getAttribute('data-fallback-text') || 'View Raw File';
+
+        container.innerHTML = `
+          <div class="view-raw-fallback">
+            <a href="${fileUrl}" class="ui basic button" target="_blank">${fallbackText}</a>
+          </div>
+        `;
+      }
+    } catch (error) {
+      console.error('file view init error:', error);
+
+      // show error message
+      const fallbackText = container.getAttribute('data-fallback-text') || 'View Raw File';
+
+      container.innerHTML = `
+        <div class="ui error message">
+          <div class="header">Failed to render file</div>
+          <p>Error: ${String(error)}</p>
+          <pre>${JSON.stringify({filename, fileUrl}, null, 2)}</pre>
+          <a class="ui basic button" href="${fileUrl || '#'}" target="_blank">${fallbackText}</a>
+        </div>
+      `;
+    } finally {
+      // remove loading state
+      container.classList.remove('is-loading');
+    }
+  });
+}

web_src/js/index.ts

@@ -20,6 +20,8 @@ import {initStopwatch} from './features/stopwatch.ts';
 import {initFindFileInRepo} from './features/repo-findfile.ts';
 import {initMarkupContent} from './markup/content.ts';
 import {initPdfViewer} from './render/pdf.ts';
+import {initFileView} from './features/file-view.ts';
+import {register3DViewerPlugin} from './render/plugins/3d-viewer.ts';
 import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts';
 import {initRepoPullRequestAllowMaintainerEdit, initRepoPullRequestReview, initRepoIssueSidebarDependency, initRepoIssueFilterItemLabel} from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
@@ -163,6 +165,9 @@ onDomReady(() => {
     initColorPickers,
 
     initOAuth2SettingsDisableCheckbox,
+
+    initFileView,
+    register3DViewerPlugin,
   ]);
 
   // it must be the last one, then the "querySelectorAll" only needs to be executed once for global init functions.

web_src/js/modules/file-render-plugin.ts

@@ -0,0 +1,69 @@
+/**
+ * File Render Plugin System
+ *
+ * This module provides a plugin architecture for rendering different file types
+ * in the browser without requiring backend support for identifying file types.
+ */
+
+/**
+ * Interface for file render plugins
+ */
+export type FileRenderPlugin = {
+  // unique plugin name
+  name: string;
+
+  // test if plugin can handle specified file
+  canHandle: (filename: string, mimeType: string) => boolean;
+
+  // render file content
+  render: (container: HTMLElement, fileUrl: string, options?: any) => Promise<void>;
+}
+
+// store registered render plugins
+const plugins: FileRenderPlugin[] = [];
+
+/**
+ * register a file render plugin
+ */
+export function registerFileRenderPlugin(plugin: FileRenderPlugin): void {
+  plugins.push(plugin);
+}
+
+/**
+ * find suitable render plugin by filename and mime type
+ */
+function findPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
+  return plugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
+}
+
+/**
+ * apply render plugin to specified container
+ */
+export async function applyRenderPlugin(container: HTMLElement): Promise<boolean> {
+  try {
+    // get file info from container element
+    const filename = container.getAttribute('data-filename') || '';
+    const fileUrl = container.getAttribute('data-url') || '';
+
+    if (!filename || !fileUrl) {
+      console.warn('Missing filename or file URL for renderer');
+      return false;
+    }
+
+    // get mime type (optional)
+    const mimeType = container.getAttribute('data-mime-type') || '';
+
+    // find plugin that can handle this file
+    const plugin = findPlugin(filename, mimeType);
+    if (!plugin) {
+      return false;
+    }
+
+    // apply plugin to render file
+    await plugin.render(container, fileUrl);
+    return true;
+  } catch (error) {
+    console.error('Error applying render plugin:', error);
+    return false;
+  }
+}

web_src/js/render/plugins/3d-viewer.ts

@@ -0,0 +1,72 @@
+import type {FileRenderPlugin} from '../../modules/file-render-plugin.ts';
+import {registerFileRenderPlugin} from '../../modules/file-render-plugin.ts';
+
+/**
+ * 3D model file render plugin
+ *
+ * support common 3D model file formats, use online-3d-viewer library for rendering
+ */
+export function register3DViewerPlugin(): void {
+  // supported 3D file extensions
+  const SUPPORTED_EXTENSIONS = [
+    '.3dm', '.3ds', '.3mf', '.amf', '.bim', '.brep',
+    '.dae', '.fbx', '.fcstd', '.glb', '.gltf',
+    '.ifc', '.igs', '.iges', '.stp', '.step',
+    '.stl', '.obj', '.off', '.ply', '.wrl',
+  ];
+
+  // create and register plugin
+  const plugin: FileRenderPlugin = {
+    name: '3d-model-viewer',
+
+    // check if file extension is supported 3D file
+    canHandle(filename: string, _mimeType: string): boolean {
+      const ext = filename.substring(filename.lastIndexOf('.')).toLowerCase();
+      const canHandle = SUPPORTED_EXTENSIONS.includes(ext);
+      return canHandle;
+    },
+
+    // render 3D model
+    async render(container: HTMLElement, fileUrl: string): Promise<void> {
+      // add loading indicator
+      container.classList.add('is-loading');
+
+      try {
+        // dynamically load 3D rendering library
+        const OV = await import(/* webpackChunkName: "online-3d-viewer" */'online-3d-viewer');
+
+        // configure container style
+        container.classList.add('model3d-content');
+
+        // initialize 3D viewer
+        const viewer = new OV.EmbeddedViewer(container, {
+          backgroundColor: new OV.RGBAColor(59, 68, 76, 0), // transparent
+          defaultColor: new OV.RGBColor(65, 131, 196),
+          edgeSettings: new OV.EdgeSettings(false, new OV.RGBColor(0, 0, 0), 1),
+        });
+
+        // load model from url
+        viewer.LoadModelFromUrlList([fileUrl]);
+      } catch (error) {
+        // handle render error
+        console.error('error rendering 3D model:', error);
+
+        // add error message and download button
+        const fallbackText = container.getAttribute('data-fallback-text') || 'View Raw File';
+        container.innerHTML = `
+          <div class="ui error message">
+            <div class="header">Failed to render 3D model</div>
+            <p>The 3D model could not be displayed in the browser.</p>
+            <a class="ui basic button" href="${fileUrl}" target="_blank">${fallbackText}</a>
+          </div>
+        `;
+      } finally {
+        // remove loading state
+        container.classList.remove('is-loading');
+      }
+    },
+  };
+
+  // register plugin
+  registerFileRenderPlugin(plugin);
+}