nextjs example + v0.17.3 update

Author: matas-bitbybit-dev

angular/laptop-holder/package-lock.json

@@ -10,7 +10,7 @@
     },
     "private": true,
     "dependencies": {
-        "@bitbybit-dev/core": "0.17.1",
+        "@bitbybit-dev/core": "0.17.3",
         "@angular/animations": "13.3.0",
         "@angular/common": "13.3.0",
         "@angular/compiler": "13.3.0",

angular/laptop-holder/package.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

nextjs/simple/.eslintrc.json

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

nextjs/simple/.gitignore

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

nextjs/simple/README.md

@@ -0,0 +1,101 @@
+'use client'
+import { BitByBitBase } from "@bitbybit-dev/core";
+import { OccStateEnum } from '@bitbybit-dev/occt-worker';
+import { Engine, Scene, Color4, ArcRotateCamera, Vector3, HemisphericLight, Light } from "@babylonjs/core";
+import { useEffect, useRef } from "react";
+
+export default function Bitbybit() {
+    const initialized = useRef(false)
+
+    useEffect(() => {
+        if (!initialized.current) {
+            const bitbybit = new BitByBitBase();
+            const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement;
+            canvas.onwheel = function (event) {
+                event.preventDefault();
+            };
+
+            const engine = new Engine(canvas);
+            const scene = new Scene(engine);
+            engine.setHardwareScalingLevel(0.5);
+            scene.clearColor = new Color4(26 / 255, 28 / 255, 31 / 255, 1);
+            const camera = new ArcRotateCamera('Camera', 0, 10, 10, new Vector3(0, 0, 0), scene);
+            camera.attachControl(canvas, true);
+
+            const light = new HemisphericLight('HemiLight', new Vector3(0, 1, 0), scene);
+            light.intensityMode = Light.INTENSITYMODE_ILLUMINANCE;
+            light.intensity = 1;
+            scene.metadata = { shadowGenerators: [] };
+
+            const occt = new Worker(new URL('./occ.worker', import.meta.url), { name: 'OCC', type: 'module' })
+            const jscad = new Worker(new URL('./jscad.worker', import.meta.url), { name: 'JSCAD', type: 'module' })
+
+            bitbybit.init(scene, occt, jscad);
+
+            engine.runRenderLoop(() => {
+                scene.render();
+            });
+
+            window.onresize = () => {
+                if (engine) {
+                    engine.resize();
+                }
+            }
+
+            bitbybit.occtWorkerManager.occWorkerState$.subscribe(s => {
+                if (s.state === OccStateEnum.initialised) {
+                    engine.resize();
+
+                    const start = async () => {
+                        const sphere = await bitbybit.occt.shapes.solid.createSphere({
+                            radius: 5,
+                            center: [0, 0, 0]
+                        });
+
+                        const circle = await bitbybit.occt.shapes.wire.createCircleWire({
+                            radius: 10,
+                            center: [0, 0, 0],
+                            direction: [0, 1, 0],
+                        });
+
+                        const points = await bitbybit.occt.shapes.wire.pointsOnWireAtPatternOfLengths({
+                            shape: circle,
+                            lengths: [0.1, 0.3, 0.4],
+                            includeFirst: true,
+                            includeLast: false,
+                            tryNext: false
+                        })
+
+                        bitbybit.draw.drawAnyAsync({
+                            entity: sphere
+                        });
+
+                        bitbybit.draw.drawAnyAsync({
+                            entity: circle
+                        });
+
+                        bitbybit.draw.drawAnyAsync({
+                            entity: points
+                        });
+                    }
+
+                    start();
+                    engine.runRenderLoop(() => {
+                        scene.render();
+                    });
+                } else if (s.state === OccStateEnum.computing) {
+                    // Show Spinner
+                } else if (s.state === OccStateEnum.loaded) {
+                    // Show Spinner
+                }
+            });
+        }
+    }, [])
+
+    return (
+        <>
+            <canvas id="renderCanvas"></canvas>
+            <div>HELLO</div>
+        </>
+    );
+}

nextjs/simple/app/bitbybit.tsx

@@ -0,0 +1,9 @@
+'use client'
+import dynamic from "next/dynamic"
+import { FunctionComponent, PropsWithChildren } from "react"
+
+const ClientOnly: FunctionComponent<PropsWithChildren> = ({ children }) => children
+
+export default dynamic(() => Promise.resolve(ClientOnly), {
+    ssr: false,
+})

nextjs/simple/app/client-only.tsx

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --background: #ffffff;
+    --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background: #0a0a0a;
+        --foreground: #ededed;
+    }
+}
+
+body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    outline: none;
+}

nextjs/simple/app/favicon.ico

@@ -0,0 +1,13 @@
+/// <reference lib="webworker" />
+/*eslint no-restricted-globals: 0*/
+
+import { Workers } from '@bitbybit-dev/core';
+
+import("@bitbybit-dev/core/jscad-generated")
+    .then((s) => {
+        Workers.initializationComplete(s.default());
+    });
+
+addEventListener('message', ({ data }) => {
+    Workers.onMessageInput(data, postMessage);
+});

nextjs/simple/app/fonts/GeistMonoVF.woff

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

nextjs/simple/app/fonts/GeistVF.woff

@@ -0,0 +1,13 @@
+/// <reference lib="webworker" />
+/*eslint no-restricted-globals: 0*/
+import initOpenCascade from "@bitbybit-dev/occt/bitbybit-dev-occt";
+import type { OpenCascadeInstance } from '@bitbybit-dev/occt/bitbybit-dev-occt/bitbybit-dev-occt.js';
+import { initializationComplete, onMessageInput } from '@bitbybit-dev/occt-worker';
+
+initOpenCascade().then((occ: OpenCascadeInstance) => {
+    initializationComplete(occ, undefined);
+});
+
+addEventListener('message', ({ data }) => {
+    onMessageInput(data, postMessage);
+});