feat: added default css, update worker imports to support vite module…

… worker bundling

app/app.css

@@ -1,5 +1,55 @@
+/* Base CSS Reset */
 html,
 body {
   margin: 0;
   padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  font-size: 100%; /* Adjust this if needed */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit; /* Use the same font as the rest of the app */
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+:root {
+  --border-radius: 4px; /* Example base radius for customization */
+  --transition-duration: 0.3s; /* Example transition duration */
 }

app/features/bananagl/picking/triangles/build.ts

@@ -1,19 +1,15 @@
 import { Attribute } from "@bananagl/bananagl";
 
 import { BVHNode } from "../bvh";
-import {
-  BuilderOutput,
-  fromTransferable,
-  getTrasferables,
-  reconstructBBoxes,
-  toTransferable,
-} from "./transform";
+import { BuilderOutput, fromTransferable, getTrasferables, reconstructBBoxes, toTransferable } from "./transform";
 
 export async function buildBVHInWorker(position: Attribute, attr: Attribute[]) {
   const data = toTransferable(position, attr);
   const transferables = getTrasferables(data);
   return new Promise<BVHNode>((resolve) => {
-    const worker = new Worker(new URL("./build.worker.ts", import.meta.url));
+    const worker = new Worker(new URL("./build.worker.ts", import.meta.url), {
+      type: "module",
+    });
     worker.onmessage = (e) => {
       const data = e.data as BuilderOutput;
       fromTransferable(position, attr, data.data);

app/features/bananagl/picking/triangles/build.worker.ts

@@ -1,42 +1,34 @@
-import { Attribute } from '@bananagl/models/attribute';
-import { Buffer } from '@bananagl/models/buffer';
+import { Attribute } from "@bananagl/models/attribute";
+import { Buffer } from "@bananagl/models/buffer";
 
-import { TriangleBVHBuilder } from './builder';
-import { BuilderOutput, TriangleBuildInput, getTrasferables, toTransferable } from './transform';
+import { TriangleBVHBuilder } from "./builder";
+import { BuilderOutput, TriangleBuildInput, getTrasferables, toTransferable } from "./transform";
 
 self.onmessage = (e) => {
-    const data = e.data as TriangleBuildInput;
-    const { position, attrs } = toAttributes(data);
-    const builder = new TriangleBVHBuilder(position, attrs);
-    const returnedAttrs = toTransferable(position, attrs);
-    const transferables = getTrasferables(returnedAttrs);
-    const result: BuilderOutput = {
-        data: returnedAttrs,
-        rootNode: builder.root,
-    };
-    (self as any).postMessage(result, transferables);
+  const data = e.data as TriangleBuildInput;
+  const { position, attrs } = toAttributes(data);
+  const builder = new TriangleBVHBuilder(position, attrs);
+  const returnedAttrs = toTransferable(position, attrs);
+  const transferables = getTrasferables(returnedAttrs);
+  const result: BuilderOutput = {
+    data: returnedAttrs,
+    rootNode: builder.root,
+  };
+  (self as any).postMessage(result, transferables);
 };
 
 function toAttributes(data: TriangleBuildInput) {
-    return {
-        position: new Attribute(
-            data.position.name,
-            new Buffer(data.position.buffer.data),
-            data.position.size,
-            data.position.normalized,
-            data.position.stride,
-            data.position.offset
-        ),
-        attrs: data.attrs.map(
-            (a) =>
-                new Attribute(
-                    a.name,
-                    new Buffer(a.buffer.data),
-                    a.size,
-                    a.normalized,
-                    a.stride,
-                    a.offset
-                )
-        ),
-    };
+  return {
+    position: new Attribute(
+      data.position.name,
+      new Buffer(data.position.buffer.data),
+      data.position.size,
+      data.position.normalized,
+      data.position.stride,
+      data.position.offset
+    ),
+    attrs: data.attrs.map(
+      (a) => new Attribute(a.name, new Buffer(a.buffer.data), a.size, a.normalized, a.stride, a.offset)
+    ),
+  };
 }

app/features/editor/utils/formats/loader.ts

@@ -103,15 +103,21 @@ async function getFile(files: Map<string, Blob>, name: string) {
 const pool = new WorkerPool<UserInputModel, EditorData | ModelData | ModelData[]>(10);
 
 function spawnGLTFWorker() {
-  return new Worker(new URL("./gltf.worker.ts", import.meta.url));
+  return new Worker(new URL("./gltf.worker.ts", import.meta.url), {
+    type: "module",
+  });
 }
 
 function spawnMetacityWorker() {
-  return new Worker(new URL("./metacity.worker.ts", import.meta.url));
+  return new Worker(new URL("./metacity.worker.ts", import.meta.url), {
+    type: "module",
+  });
 }
 
 function spawnShapefileWorker() {
-  return new Worker(new URL("./shapefile.worker.ts", import.meta.url));
+  return new Worker(new URL("./shapefile.worker.ts", import.meta.url), {
+    type: "module",
+  });
 }
 
 export async function loadModels(models: UserInputModel[], updateStatus?: (status: string) => void) {

app/features/editor/utils/formats/pool.ts

@@ -46,11 +46,7 @@ export class WorkerPool<InputType, ResultType> {
     this.queue = new Queue<InputType, ResultType>();
   }
 
-  process(
-    data: InputType,
-    callback: (output: ResultType | undefined) => void,
-    worker: () => Worker,
-  ) {
+  process(data: InputType, callback: (output: ResultType | undefined) => void, worker: () => Worker) {
     this.queue.enqueue({
       data: data,
       worker: worker,