Open File Viewer integration and API guide

npm install @open-file-viewer/core
npm install @open-file-viewer/react
npm install @open-file-viewer/vue
npm install @open-file-viewer/svelte

npm install pdfjs-dist
npm install @mlightcad/cad-simple-viewer@1.5.9 @mlightcad/data-model@1.12.3 lodash-es@4.17.21
npm install @mlightcad/libredwg-web@0.7.4
npm install mpegts.js

import { copyFile, cp, mkdir } from "node:fs/promises";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const moduleEntry = fileURLToPath(import.meta.resolve("@mlightcad/libredwg-web"));
const packageRoot = dirname(dirname(moduleEntry));
const targetRoot = fileURLToPath(
  new URL("../public/vendor/libredwg-web/", import.meta.url)
);
const viewerEntry = fileURLToPath(import.meta.resolve("@mlightcad/cad-simple-viewer"));
const viewerRoot = dirname(dirname(viewerEntry));
const viewerTarget = fileURLToPath(
  new URL("../public/vendor/cad-engine/", import.meta.url)
);

await Promise.all([
  mkdir(targetRoot, { recursive: true }),
  mkdir(viewerTarget, { recursive: true })
]);
await Promise.all([
  cp(join(packageRoot, "dist"), join(targetRoot, "dist"), {
    recursive: true,
    force: true
  }),
  cp(join(packageRoot, "wasm"), join(targetRoot, "wasm"), {
    recursive: true,
    force: true
  }),
  copyFile(
    join(viewerRoot, "dist/libredwg-parser-worker.js"),
    join(viewerTarget, "libredwg-parser-worker.js")
  ),
  copyFile(
    join(viewerRoot, "dist/mtext-renderer-worker.js"),
    join(viewerTarget, "mtext-renderer-worker.js")
  )
]);

{
  "scripts": {
    "assets:dwg": "node scripts/copy-libredwg-assets.mjs",
    "predev": "npm run assets:dwg",
    "prebuild": "npm run assets:dwg"
  }
}

cadPlugin({
  webglDwg: {
    workerBaseUrl: "/vendor/cad-engine"
  },
  libreDwg: {
    wasmBaseUrl: "/vendor/libredwg-web/wasm",
    workerModuleUrl: "/vendor/libredwg-web/dist/libredwg-web.js",
    workerTimeoutMs: 120_000
  }
});

{
  "pnpm": {
    "overrides": {
      "webworkify-webpack": "2.1.5"
    }
  }
}

pdfPlugin({
  workerSrc,
  useFetchData: true
});

createViewer({
  container: "#viewer",
  file,
  toolbar: {
    labels: {
      download: "Download",
      fullscreen: "Fullscreen",
      search: "Search"
    },
    order: ["search", "download", "favorite", "approve", "share", "fullscreen"],
    actions: [
      { id: "favorite", label: "Favorite", onClick: (ctx) => favoriteFile(ctx.file) },
      { id: "approve", label: "Approve", onClick: (ctx) => openApproval(ctx.file) },
      { id: "share", label: "Share", onClick: (ctx) => shareFile(ctx.file) }
    ]
  },
  plugins
});

import type { PreviewPlugin } from "@open-file-viewer/core";

export function customReportPlugin(): PreviewPlugin {
  return {
    name: "custom-report",
    match(file) {
      return file.extension === "report" || file.mimeType === "application/x-report";
    },
    render(ctx) {
      const element = document.createElement("div");
      element.className = "report-preview";
      element.textContent = ctx.file.name;
      ctx.viewport.append(element);

      return {
        resize(size) {
          element.style.setProperty("--viewer-width", `${size.width}px`);
        },
        command(command) {
          if (command === "zoom-in") {
            element.classList.add("zoomed");
            return true;
          }
          return false;
        },
        destroy() {
          element.remove();
        }
      };
    }
  };
}