refactor

Author: wxiaoguang

web_src/js/features/file-view.ts

@@ -1,20 +1,25 @@
-import {findFileRenderPlugin} from '../modules/file-render-plugin.ts';
+import type {FileRenderPlugin} from '../render/plugin.ts';
+import {newRenderPlugin3DViewer} from '../render/plugins/3d-viewer.ts';
+import {newRenderPluginPdfViewer} from '../render/plugins/pdf-viewer.ts';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
-import {register3DViewerPlugin} from '../render/plugins/3d-viewer.ts';
-import {registerPdfViewerPlugin} from '../render/plugins/pdf-viewer.ts';
 import {htmlEscape} from 'escape-goat';
 import {basename} from '../utils.ts';
 
-export function initFileViewRender(): void {
-  let pluginRegistered = false;
+const plugins: FileRenderPlugin[] = [];
+
+function initPluginsOnce(): void {
+  if (plugins.length) return;
+  plugins.push(newRenderPlugin3DViewer(), newRenderPluginPdfViewer());
+}
 
+function findFileRenderPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
+  return plugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
+}
+
+export function initFileViewRender(): void {
   registerGlobalInitFunc('initFileViewRender', async (container: HTMLElement) => {
-    if (!pluginRegistered) {
-      pluginRegistered = true;
-      register3DViewerPlugin();
-      registerPdfViewerPlugin();
-    }
+    initPluginsOnce();
 
     const rawFileLink = container.getAttribute('data-raw-file-link');
     const mimeType = container.getAttribute('data-mime-type') || ''; // not used yet

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

@@ -0,0 +1,10 @@
+export type FileRenderPlugin = {
+  // unique plugin name
+  name: string;
+
+  // test if plugin can handle a specified file
+  canHandle: (filename: string, mimeType: string) => boolean;
+
+  // render file content
+  render: (container: HTMLElement, fileUrl: string, options?: any) => Promise<void>;
+}

web_src/js/render/plugin.ts

@@ -1,31 +1,31 @@
-import type {FileRenderPlugin} from '../../modules/file-render-plugin.ts';
-import {registerFileRenderPlugin} from '../../modules/file-render-plugin.ts';
+import type {FileRenderPlugin} from '../plugin.ts';
+import {extname} from '../../utils.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
+// support common 3D model file formats, use online-3d-viewer library for rendering
+export function newRenderPlugin3DViewer(): FileRenderPlugin {
+  // Some extensions are text-based formats:
+  // .3mf .amf .brep: XML
+  // .fbx: XML or BINARY
+  // .dae .gltf: JSON
+  // .ifc, .igs, .iges, .stp, .step are: TEXT
+  // .stl .ply: TEXT or BINARY
+  // .obj .off .wrl: TEXT
+  // TODO: So we need to be able to render when the file is recognized as plaintext file by backend
   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 = {
+  return {
     name: '3d-model-viewer',
 
-    // check if file extension is a supported 3D file
     canHandle(filename: string, _mimeType: string): boolean {
-      const ext = filename.substring(filename.lastIndexOf('.')).toLowerCase();
+      const ext = extname(filename).toLowerCase();
       return SUPPORTED_EXTENSIONS.includes(ext);
     },
 
-    // render 3D model
     async render(container: HTMLElement, fileUrl: string): Promise<void> {
       const OV = await import(/* webpackChunkName: "online-3d-viewer" */'online-3d-viewer');
       container.classList.add('model3d-content');
@@ -37,6 +37,4 @@ export function register3DViewerPlugin(): void {
       viewer.LoadModelFromUrlList([fileUrl]);
     },
   };
-
-  registerFileRenderPlugin(plugin);
 }

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

@@ -1,12 +1,13 @@
-import type {FileRenderPlugin} from '../../modules/file-render-plugin.ts';
-import {registerFileRenderPlugin} from '../../modules/file-render-plugin.ts';
+import type {FileRenderPlugin} from '../plugin.ts';
 
-export function registerPdfViewerPlugin(): void {
-  const plugin: FileRenderPlugin = {
+export function newRenderPluginPdfViewer(): FileRenderPlugin {
+  return {
     name: 'pdf-viewer',
+
     canHandle(filename: string, _mimeType: string): boolean {
       return filename.toLowerCase().endsWith('.pdf');
     },
+
     async render(container: HTMLElement, fileUrl: string): Promise<void> {
       const PDFObject = await import(/* webpackChunkName: "pdfobject" */'pdfobject');
       // TODO: the PDFObject library does not support dynamic height adjustment,
@@ -16,5 +17,4 @@ export function registerPdfViewerPlugin(): void {
       }
     },
   };
-  registerFileRenderPlugin(plugin);
 }