feat: add Layer.resize()

update website appearence
SeiyaCooper · Mar 2, 2024 · 3f76eab · 3f76eab
1 parent 2a12ba0
commit 3f76eab
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     },
     "homepage": "https://github.com/SeiyaCooper/Mraph.js#readme",
     "devDependencies": {
+        "@fontsource/poppins": "^5.0.8",
         "astro": "^4.3.2",
         "eslint": "^8.56.0",
         "eslint-plugin-prettier": "^5.1.2",

diff --git a/site/components/Link.astro b/site/components/Link.astro
@@ -40,8 +40,7 @@ const { title = "", src = "" } = Astro.props;
         align-items: center;
         color: aliceblue;
         text-decoration: none;
-        font-family: Helvetica;
+        font-family: var(--font-family);
         font-size: 80%;
-        font-weight: bolder;
     }
 </style>
diff --git a/site/components/NavBar.astro b/site/components/NavBar.astro
@@ -38,8 +38,10 @@ const { list = [""], focus = "" } = Astro.props;
 
 <style>
     button {
-        width: 10vh;
-        height: 10vh;
+        width: 7vh;
+        height: 7vh;
+        min-width: 35px;
+        min-height: 35px;
         position: absolute;
         top: 0;
         left: 0;
@@ -49,6 +51,7 @@ const { list = [""], focus = "" } = Astro.props;
         background-position: center;
         background-repeat: no-repeat;
         border: none;
+        outline: none;
         transition: rotate 0.3s;
     }
 
@@ -61,7 +64,7 @@ const { list = [""], focus = "" } = Astro.props;
         padding-left: 10px;
         padding-top: 10px;
         padding-right: 10px;
-        top: calc(10vh + 1px);
+        top: calc(max(35px, 7vh) + 1px);
         left: -100%;
         list-style: none;
         transition: left ease-in-out 0.3s;
@@ -78,15 +81,15 @@ const { list = [""], focus = "" } = Astro.props;
         position: relative;
         left: 0;
         color: aliceblue;
-        font-family: Helvetica;
+        font-family: var(--font-family);
         font-weight: bold;
         font-size: large;
     }
 
     ul p {
         color: aliceblue;
         padding: 0;
-        font-family: Helvetica;
+        font-family: var(--font-family);
         font-size: small;
     }
 </style>
diff --git a/site/components/TopBar.astro b/site/components/TopBar.astro
@@ -23,7 +23,8 @@ const examples = [
 <style>
     div {
         width: calc(100% - 2px);
-        height: 10%;
+        height: 7%;
+        min-height: 35px;
         position: fixed;
         background-color: rgba(15, 15, 25, 0.5);
         border: 1px solid rgba(220, 220, 255, 0.3);
@@ -35,7 +36,7 @@ const examples = [
 
     div h1 {
         color: aliceblue;
-        font-family: Helvetica;
+        font-family: var(--font-family);
         font-size: 120%;
     }
 </style>
diff --git a/site/layouts/Example.astro b/site/layouts/Example.astro
@@ -1,5 +1,6 @@
 ---
 import TopBar from "../components/TopBar.astro";
+import "@fontsource/poppins";
 
 interface Props {
     title?: string;
@@ -26,4 +27,8 @@ const { title = "" } = Astro.props;
         padding: 0;
         margin: 0;
     }
+
+    :root {
+        --font-family: "poppins";
+    }
 </style>
diff --git a/src/core/Layer.js b/src/core/Layer.js
@@ -13,30 +13,49 @@ export default class Layer {
     defaultMaterial = new MobjectMaterial();
 
     constructor({
-        fillScreen = true,
+        fullScreen = true,
         appendTo = undefined,
         rendererClass = WebGLRenderer,
         contextConfig = {},
     } = {}) {
         this.canvas = document.createElement("canvas");
 
-        if (fillScreen) {
-            this.canvas.width = 1.5 * window.innerWidth;
-            this.canvas.height = 1.5 * window.innerHeight;
-            this.canvas.style.width = "100%";
-            this.canvas.style.height = "100%";
-            this.canvas.style.display = "block";
+        if (fullScreen) {
+            this.fillScreen();
+            window.addEventListener("resize", () => {
+                this.fillScreen();
+            });
         }
 
         if (appendTo) {
             this.appendTo(appendTo);
         }
+        this.renderer = new rendererClass(this.canvas, contextConfig);
+        this.clear(COLORS.GRAY_E);
+    }
 
+    /**
+     * Adjust the canvas to the new width and height
+     * @param {number} width
+     * @param {number} height
+     */
+    resize(width, height) {
+        this.canvas.width = width;
+        this.canvas.height = height;
         this.camera.perspective({
             aspect: this.canvas.width / this.canvas.height,
         });
-        this.renderer = new rendererClass(this.canvas, contextConfig);
-        this.clear(COLORS.GRAY_E);
+        this.renderer?.resize(width, height);
+    }
+
+    /**
+     * Adjust the canvas to full screen
+     */
+    fillScreen() {
+        this.resize(1.5 * window.innerWidth, 1.5 * window.innerHeight);
+        this.canvas.style.width = "100%";
+        this.canvas.style.height = "100%";
+        this.canvas.style.display = "block";
     }
 
     /**

diff --git a/src/core/WebGL/WebGLRenderer.js b/src/core/WebGL/WebGLRenderer.js
@@ -75,4 +75,8 @@ export default class WebGLRenderer {
         gl.clearColor(r, g, b, a);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     }
+
+    resize(width, height) {
+        this.gl.viewport(0, 0, width, height);
+    }
 }
diff --git a/types.d.ts b/types.d.ts
@@ -495,6 +495,7 @@ declare module "core/WebGL/WebGLRenderer" {
         usage: any;
         render(mesh: any, camera: any, material: any): void;
         clear(r: any, g: any, b: any, a: any): void;
+        resize(width: any, height: any): void;
     }
 }
 declare module "core/Camera" {
@@ -653,8 +654,8 @@ declare module "material/MobjectMaterial" {
 }
 declare module "core/Layer" {
     export default class Layer {
-        constructor({ fillScreen, appendTo, rendererClass, contextConfig, }?: {
-            fillScreen?: boolean;
+        constructor({ fullScreen, appendTo, rendererClass, contextConfig, }?: {
+            fullScreen?: boolean;
             appendTo?: any;
             rendererClass?: typeof WebGLRenderer;
             contextConfig?: {};
@@ -665,6 +666,16 @@ declare module "core/Layer" {
         defaultMaterial: MobjectMaterial;
         canvas: HTMLCanvasElement;
         renderer: WebGLRenderer;
+        /**
+         * Adjust the canvas to the new width and height
+         * @param {number} width
+         * @param {number} height
+         */
+        resize(width: number, height: number): void;
+        /**
+         * Adjust the canvas to full screen
+         */
+        fillScreen(): void;
         /**
          * append this.canvas to a HTMLElement
          * @param {HTMLElement} el