semantyk · danielbakas · Mar 15, 2025 · Mar 13, 2025 · Mar 13, 2025 · Mar 14, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/public/404.svg b/public/404.svg
diff --git a/public/bimi.svg b/public/bimi.svg
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
@@ -26,11 +26,11 @@ import Head from "@semantyk/frontend/ui/components/atoms/Head";
 import Body from "@semantyk/frontend/ui/components/molecules/Body";
 import { getLang } from "@semantyk/frontend/logic/services/getLang";
 import Content from "@semantyk/frontend/ui/components/molecules/Content";
-import Model from "@semantyk/frontend/ui/models/atoms/Model";
+import Model from "@semantyk/frontend/ui/components/molecules/Model/Model";
 
 
 //* Main
-export async function generateMetadata() {return await getMetadata();}
+export async function generateMetadata() { return await getMetadata(); }
 
 export default function RootLayout({ children }) {
     // Logic
@@ -39,13 +39,13 @@ export default function RootLayout({ children }) {
     return (
         // TODO: Add logic for dynamic language
         <html lang={lang}>
-        <Head/>
-        <Body>
-            <Content>
-                <Model/>
-                {children}
-            </Content>
-        </Body>
+            <Head />
+            <Body>
+                <Content>
+                    <Model />
+                    {children}
+                </Content>
+            </Body>
         </html>
     );
 }
diff --git a/src/frontend/ui/components/atoms/Head.jsx b/src/frontend/ui/components/atoms/Head.jsx
@@ -22,7 +22,5 @@ import Analytics from "@semantyk/frontend/logic/analytics/Analytics";
 //* Main
 export default function Head() {
     // Return
-    return (<>
-        <Analytics/>
-    </>);
+    return <Analytics />;
 }
diff --git a/...frontend/ui/models/atoms/Canvas/index.css → .../ui/components/molecules/Canvas/index.css b/...frontend/ui/models/atoms/Canvas/index.css → .../ui/components/molecules/Canvas/index.css
diff --git a/...frontend/ui/models/atoms/Canvas/index.jsx → .../ui/components/molecules/Canvas/index.jsx b/...frontend/ui/models/atoms/Canvas/index.jsx → .../ui/components/molecules/Canvas/index.jsx
@@ -19,7 +19,7 @@
 //* Imports
 import React from "react";
 //* Local Imports
-import CanvasLayout from "@semantyk/frontend/ui/models/atoms/Canvas/layout";
+import CanvasLayout from "@semantyk/frontend/ui/components/molecules/Canvas/layout";
 
 //* Main
 export default function Canvas({ children }) {

diff --git a/...rontend/ui/models/atoms/Canvas/layout.jsx → ...ui/components/molecules/Canvas/layout.jsx b/...rontend/ui/models/atoms/Canvas/layout.jsx → ...ui/components/molecules/Canvas/layout.jsx
@@ -18,7 +18,7 @@
 import React from "react";
 import { Canvas } from "@react-three/fiber";
 //* Local Imports
-import "@semantyk/frontend/ui/models/atoms/Canvas/index.css";
+import "@semantyk/frontend/ui/components/molecules/Canvas/index.css";
 
 //* Main
 export default function CanvasLayout(props) {

diff --git a/src/frontend/ui/components/molecules/Model/Model.jsx b/src/frontend/ui/components/molecules/Model/Model.jsx
@@ -0,0 +1,49 @@
+/**
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ * # `index.jsx`
+ * @organization: Semantyk
+ * @project: Client
+ *
+ * @file: This file contains the logic for a generic Three.js model component.
+ *
+ * @created: Jul 17, 2024
+ * @modified: Mar 12, 2025
+ *
+ * @author: Semantyk Team
+ * @maintainer: Daniel Bakas <https://id.danielbakas.com>
+ *
+ * @copyright: Semantyk © 2025. All rights reserved.
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ */
+
+"use client";
+
+//* Imports
+import React from "react";
+import Canvas from "@semantyk/frontend/ui/components/molecules/Canvas";
+import GraphModel from "@semantyk/frontend/ui/models/Graph";
+import { usePathname, useRouter } from "next/navigation";
+import Particles from "@semantyk/frontend/ui/models/Particles/Particles";
+
+//* Main
+export default function Model() {
+    // Hooks
+    const pathname = usePathname();
+    // Logic
+    const model = () => {
+        switch (pathname) {
+            case "/":
+                return <Particles path={"/favicon.svg"} />;
+            case "/knowledge":
+                return <GraphModel />;
+            default:
+                return <Particles path={"/404.svg"} />;
+        }
+    };
+    // Return
+    return (
+        <Canvas>
+            {model()}
+        </Canvas>
+    );
+}
diff --git a/src/frontend/ui/components/molecules/Model/logic/manager.js b/src/frontend/ui/components/molecules/Model/logic/manager.js
@@ -0,0 +1,27 @@
+/**
+ * Base manager class for models using the Strategy pattern
+ */
+export class ModelManager {
+    constructor() {
+        if (this.constructor === ModelManager) {
+            throw new Error('Abstract class ModelManager cannot be instantiated directly');
+        }
+    }
+
+    static call(object, member, ...args) {
+        if (!object) return;
+        else object[member](...args);
+    }
+
+    static execute(collection, item, member, ...args) {
+        const object = collection[item];
+        if (!object) return;
+        else this.call(object, member, ...args);
+    }
+
+    static executeAll(collection, member, ...args) {
+        Object.values(collection).forEach(object => {
+            this.call(object, member, ...args);
+        });
+    }
+}
diff --git a/src/frontend/ui/components/molecules/Model/logic/strategy.js b/src/frontend/ui/components/molecules/Model/logic/strategy.js
@@ -0,0 +1,40 @@
+/**
+ * Base class for model strategies following the Strategy Pattern
+ */
+export class ModelStrategy {
+    /**
+     * Add the event listener
+     * @param {Object} args - Event arguments
+     * @throws {Error} Must be implemented by child classes
+     */
+    static add(args) {
+        throw new Error('Strategy must implement add method');
+    }
+
+    /**
+     * Handle the event
+     * @param {Object} args - Event arguments
+     * @throws {Error} Must be implemented by child classes
+     */
+    static handle(args) {
+        throw new Error('Strategy must implement handle method');
+    }
+
+    /**
+     * Execute the strategy
+     * @param {Object} args - Strategy arguments
+     * @throws {Error} Must be implemented by child classes
+     */
+    static execute(args) {
+        throw new Error('Strategy must implement execute method');
+    }
+
+    /**
+     * Remove the event listener
+     * @param {Object} args - Event arguments
+     * @throws {Error} Must be implemented by child classes
+     */
+    static remove(args) {
+        throw new Error('Strategy must implement remove method');
+    }
+}
diff --git a/src/frontend/ui/models/atoms/Model/index.jsx → src/frontend/ui/models/Graph/index.jsx b/src/frontend/ui/models/atoms/Model/index.jsx → src/frontend/ui/models/Graph/index.jsx
@@ -1,13 +1,13 @@
 /**
  * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
- * # `index.jsx`
+ * # `index.jsx` | `GraphModel`
  * @organization: Semantyk
  * @project: Client
  *
- * @file: This file contains the logic for a generic Three.js model component.
+ * @file: This file contains the logic for the Graph model.
  *
- * @created: Jul 17, 2024
- * @modified: Mar 7, 2025
+ * @created: Mar 13, 2025
+ * @modified: Mar 13, 2025
  *
  * @author: Semantyk Team
  * @maintainer: Daniel Bakas <https://id.danielbakas.com>
@@ -16,19 +16,6 @@
  * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  */
 
-"use client";
-
-//* Imports
-import React from "react";
-import Canvas from "@semantyk/frontend/ui/models/atoms/Canvas";
-import ParticlesModel from "@semantyk/frontend/ui/models/molecule/Particles";
-
 //* Main
-export default function Model() {
-    // Return
-    return (
-        <Canvas>
-            <ParticlesModel/>
-        </Canvas>
-    );
+export default function GraphModel() {
 };
diff --git a/src/frontend/ui/models/Particles/Particles.jsx b/src/frontend/ui/models/Particles/Particles.jsx
@@ -0,0 +1,34 @@
+/**
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ * # `ParticlesScene.jsx`
+ * @organization: Semantyk
+ * @project: Client
+ *
+ * @file: This file contains the logic for the ParticlesScene component.
+ *
+ * @created: Mar 13, 2025
+ * @modified: Mar 13, 2025
+ *
+ * @author: Semantyk Team
+ * @maintainer: Daniel Bakas <https://id.danielbakas.com>
+ *
+ * @copyright: Semantyk © 2025. All rights reserved.
+ * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+ */
+
+//* Imports
+import { useArgs } from "@semantyk/frontend/ui/models/Particles/hooks/useArgs";
+import { Controls } from "./components/molecules";
+import { System } from "./components/organisms";
+
+
+//* Main
+export default function Particles({ path }) {
+    // Hooks
+    const args = useArgs({ path });
+    // Return
+    return (<>
+        <Controls {...args} />
+        <System {...args} />
+    </>);
+}
diff --git a/src/frontend/ui/models/Particles/Particles.logic.js b/src/frontend/ui/models/Particles/Particles.logic.js
@@ -0,0 +1,50 @@
+import { ModelManager } from '@semantyk/frontend/ui/components/molecules/Model/logic/manager';
+import { Camera, Circle, Mouse, Plane, Raycaster, RayLine } from './components/atoms';
+import ParticlesLogic from './components/molecules/Particles/Particles.logic';
+/**
+ * Manager class for particle strategies using the Strategy pattern
+ */
+export class ParticlesManager extends ModelManager {
+    static logic = {
+        camera: Camera.logic,
+        circle: Circle.logic,
+        mouse: Mouse.logic,
+        plane: Plane.logic,
+        particles: ParticlesLogic, // TODO: Improve this fix
+        raycaster: Raycaster.logic,
+        rayLine: RayLine.logic
+    }
+
+    static handlers = {
+        mouseMove: Mouse.logic
+    };
+
+    static listeners = {
+        mouse: Mouse.logic
+    };
+
+    static handle(item, ...args) {
+        const collection = this.handlers;
+        return super.execute(collection, item, 'handle', ...args);
+    }
+
+    static setup(item, ...args) {
+        const collection = this.logic;
+        return super.execute(collection, item, 'setup', ...args);
+    }
+
+    static update(item, ...args) {
+        const collection = this.logic;
+        return super.execute(collection, item, 'update', ...args);
+    }
+
+    static addAll(...args) {
+        const collection = this.listeners;
+        return super.executeAll(collection, "add", ...args);
+    }
+
+    static removeAll(...args) {
+        const collection = this.listeners;
+        return super.executeAll(collection, "remove", ...args);
+    }
+}
diff --git a/src/frontend/ui/models/Particles/components/atoms/Box/Box.jsx b/src/frontend/ui/models/Particles/components/atoms/Box/Box.jsx
@@ -0,0 +1,22 @@
+/**
+ * Box.jsx
+ * Atom component for the box in the Particles model
+ */
+
+//* Main
+export default function Box({ config, data, refs }) {
+    // Props
+    const { general: { showControls } } = config;
+    // Return
+    return (
+        <mesh ref={refs.box} visible={showControls}>
+            <boxGeometry args={[data.unit, data.unit, data.unit]} />
+            <meshBasicMaterial
+                color={-data.color.r}
+                opacity={0.1}
+                transparent
+                wireframe
+            />
+        </mesh>
+    );
+}
diff --git a/src/frontend/ui/models/Particles/components/atoms/Box/index.js b/src/frontend/ui/models/Particles/components/atoms/Box/index.js
@@ -0,0 +1,2 @@
+export { default } from './Box';
+export { default as Box } from './Box';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './Box';
		export { default as Box } from './Box';