visualifyjs 2.5.3 → 3.0.0

package/src/core/modules/threejs/index.js

@@ -0,0 +1,155 @@
+/**
+ * Three.js Module for Visualify.js
+ * Provides foundation for custom 3D visualizations
+ * @version 0.1.0
+ */
+
+import * as THREE from 'three';
+
+// Core managers
+export { SceneManager, createSceneFromConfig } from './Scene';
+export { CameraManager, CameraType, createCameraFromConfig } from './Camera';
+export { LightingManager, LightType, createLightsFromConfig, createDefaultLighting } from './Lighting';
+export { RendererManager, createRendererFromConfig, handleResize } from './Renderer';
+
+// Re-export Three.js for convenience
+export { THREE };
+
+// Version information
+export const VERSION = '0.1.0';
+
+/**
+ * ThreeJSManager - Unified manager for Three.js scenes
+ * Combines scene, camera, lighting, and renderer management
+ */
+export class ThreeJSManager {
+	constructor(options = {}) {
+		// Managers are lazily initialized in init() to avoid top-level await
+		this.sceneManager = null;
+		this.cameraManager = null;
+		this.lightingManager = null;
+		this.rendererManager = null;
+
+		this.options = {
+			autoRender: true,
+			...options,
+		};
+
+		this.animationId = null;
+		this.isRendering = false;
+	}
+
+	/**
+	 * Initialize a complete Three.js setup
+	 * @param {string} id - Setup identifier
+	 * @param {HTMLCanvasElement} canvas
+	 * @param {Object} config
+	 * @returns {Object} Setup objects
+	 */
+	async init(id, canvas, config = {}) {
+		// Ensure managers are loaded
+		if (!this.sceneManager) {
+			const { SceneManager } = await import('./Scene');
+			this.sceneManager = new SceneManager();
+		}
+		if (!this.cameraManager) {
+			const { CameraManager } = await import('./Camera');
+			this.cameraManager = new CameraManager();
+		}
+		if (!this.lightingManager) {
+			const { LightingManager } = await import('./Lighting');
+			this.lightingManager = new LightingManager();
+		}
+		if (!this.rendererManager) {
+			const { RendererManager } = await import('./Renderer');
+			this.rendererManager = new RendererManager();
+		}
+
+		// Create scene
+		const scene = this.sceneManager.createScene(`${id}_scene`, config.scene);
+
+		// Create camera
+		const camera = this.cameraManager.createCamera(`${id}_camera`, config.camera);
+
+		// Create lights
+		if (config.lights) {
+			config.lights.forEach((lightConfig, index) => {
+				const light = this.lightingManager.createLight(`${id}_light_${index}`, lightConfig);
+				scene.add(light);
+			});
+		}
+
+		// Create renderer
+		const renderer = this.rendererManager.createRenderer(`${id}_renderer`, canvas, config.renderer);
+
+		return { scene, camera, renderer };
+	}
+
+	/**
+	 * Start render loop
+	 * @param {Function} callback - Optional callback for each frame
+	 */
+	startRenderLoop(callback) {
+		if (this.isRendering) return;
+
+		this.isRendering = true;
+
+		const render = () => {
+			if (!this.isRendering) return;
+
+			this.animationId = requestAnimationFrame(render);
+
+			// Call user callback
+			if (callback) {
+				callback();
+			}
+		};
+
+		render();
+	}
+
+	/**
+	 * Stop render loop
+	 */
+	stopRenderLoop() {
+		this.isRendering = false;
+		if (this.animationId) {
+			cancelAnimationFrame(this.animationId);
+			this.animationId = null;
+		}
+	}
+
+	/**
+	 * Render a single frame
+	 * @param {string} sceneId
+	 * @param {string} cameraId
+	 * @param {string} rendererId
+	 */
+	render(sceneId, cameraId, rendererId) {
+		const scene = this.sceneManager.getScene(sceneId);
+		const camera = this.cameraManager.getCamera(cameraId);
+
+		if (scene && camera) {
+			this.rendererManager.render(rendererId, scene, camera);
+		}
+	}
+
+	/**
+	 * Dispose all resources
+	 */
+	dispose() {
+		this.stopRenderLoop();
+
+		if (this.sceneManager) this.sceneManager.dispose();
+		if (this.cameraManager) this.cameraManager.dispose();
+		if (this.lightingManager) this.lightingManager.dispose();
+		if (this.rendererManager) this.rendererManager.dispose();
+	}
+}
+
+// Default export
+export default {
+	THREE,
+	VERSION,
+	ThreeJSManager,
+};

package/src/core/pages/404.js

@@ -1,50 +1,50 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-30 21:58:47
- * @FilePath     : /visualifyjs/src/core/pages/404.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import '../../_css/404.css';
-
-const NotFoundPage = ({ page, config = {} }) => {
-	const {
-		heading = (
-			<span>
-				Oops! This Page <span style={{ color: 'red' }}>{page}</span>{' '}
-				Could Not Be Found
-			</span>
-		),
-		content = 'SORRY BUT THE PAGE YOU ARE LOOKING FOR DOES NOT EXIST, HAVE BEEN REMOVED, NAME CHANGED, OR IS TEMPORARILY UNAVAILABLE',
-		button_text = 'BACK TO HOME',
-	} = config;
-
-	return (
-		<div id='colorlib-notfound'>
-			<div className='colorlib-notfound'>
-				<div className='colorlib-notfound-404'>
-					<h1>404</h1>
-				</div>
-				<h2 id='colorlib_404_customizer_page_heading'>{heading}</h2>
-				<div id='colorlib_404_customizer_content'>{content}</div>
-				<a
-					href={window.location.origin}
-					id='colorlib_404_customizer_button_text'>
-					{button_text}
-				</a>
-			</div>
-			<p className='colorlib-copyrigh'>
-				<span>404 Page Template designed by </span>
-				<a
-					href='https://colorlib.com/'
-					target='_blank'
-					rel='noopener noreferrer'>
-					Colorlib.
-				</a>
-			</p>
-		</div>
-	);
-};
-
-export default NotFoundPage;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-30 21:58:47
+ * @FilePath     : /visualifyjs/src/core/pages/404.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import '../../_css/404.css';
+
+const NotFoundPage = ({ page, config = {} }) => {
+	const {
+		heading = (
+			<span>
+				Oops! This Page <span style={{ color: 'red' }}>{page}</span>{' '}
+				Could Not Be Found
+			</span>
+		),
+		content = 'SORRY BUT THE PAGE YOU ARE LOOKING FOR DOES NOT EXIST, HAVE BEEN REMOVED, NAME CHANGED, OR IS TEMPORARILY UNAVAILABLE',
+		button_text = 'BACK TO HOME',
+	} = config;
+
+	return (
+		<div id='colorlib-notfound'>
+			<div className='colorlib-notfound'>
+				<div className='colorlib-notfound-404'>
+					<h1>404</h1>
+				</div>
+				<h2 id='colorlib_404_customizer_page_heading'>{heading}</h2>
+				<div id='colorlib_404_customizer_content'>{content}</div>
+				<a
+					href={window.location.origin}
+					id='colorlib_404_customizer_button_text'>
+					{button_text}
+				</a>
+			</div>
+			<p className='colorlib-copyrigh'>
+				<span>404 Page Template designed by </span>
+				<a
+					href='https://colorlib.com/'
+					target='_blank'
+					rel='noopener noreferrer'>
+					Colorlib.
+				</a>
+			</p>
+		</div>
+	);
+};
+
+export default NotFoundPage;

package/src/core/pages/error.js

@@ -1,27 +1,27 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-23 13:22:50
- * @FilePath     : /visualifyjs/src/core/pages/error.js
- * @Description  : 
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-
-function Error({ message, style }) {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				height: '100%',
-				color: 'red',
-				...style,
-			}}>
-			{/* Display the error message */}
-			<p>{message}</p>
-		</div>
-	);
-}
-
-export default Error;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-23 13:22:50
+ * @FilePath     : /visualifyjs/src/core/pages/error.js
+ * @Description  : 
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+
+function Error({ message, style }) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				height: '100%',
+				color: 'red',
+				...style,
+			}}>
+			{/* Display the error message */}
+			<p>{message}</p>
+		</div>
+	);
+}
+
+export default Error;

package/src/core/pages/jsonPage.js

@@ -1,62 +1,62 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 21:20:55
- * @FilePath     : /visualifyjs/src/core/pages/jsonPage.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import NotFoundPage from './404';
-import fetchJson from '../fetch/json';
-import LayoutParser from '../widgets/layout';
-import Vcontroller from '../widgets/controller';
-
-const JsonPage = () => {
-	const [jsonData, setJsonData] = useState(null);
-	const [loading, setLoading] = useState(true);
-	const [error, setError] = useState(null);
-	const location = useLocation();
-
-	useEffect(() => {
-		const routerpath = location.pathname.replace(/^\/|\.json$/g, '');
-		const jsonurl =
-			routerpath === ''
-				? 'home'
-				: routerpath.endsWith('/')
-				? routerpath + 'home'
-				: routerpath;
-		//console.log('JsonPage jsonurl:', jsonurl);
-		if (jsonurl) {
-			setLoading(true);
-			setError(null);
-
-			fetchJson(jsonurl)
-				.then((data) => {
-					setJsonData(data);
-					setLoading(false);
-				})
-				.catch((err) => {
-					setError(err);
-					setLoading(false);
-				});
-		}
-	}, [location.pathname]); // React to changes in pathname
-
-	if (loading) {
-		return <div>Loading...</div>;
-	}
-	if (error || !jsonData) {
-		return <NotFoundPage page={location.pathname} />;
-	}
-
-	return (
-		<>
-			<LayoutParser config={jsonData.layout}>
-				<Vcontroller components={jsonData.components} />
-			</LayoutParser>
-		</>
-	);
-};
-
-export default JsonPage;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 21:20:55
+ * @FilePath     : /visualifyjs/src/core/pages/jsonPage.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import NotFoundPage from './404';
+import fetchJson from '../fetch/json';
+import LayoutParser from '../widgets/layout';
+import Vcontroller from '../widgets/controller';
+
+const JsonPage = () => {
+	const [jsonData, setJsonData] = useState(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const location = useLocation();
+
+	useEffect(() => {
+		const routerpath = location.pathname.replace(/^\/|\.json$/g, '');
+		const jsonurl =
+			routerpath === ''
+				? 'home'
+				: routerpath.endsWith('/')
+				? routerpath + 'home'
+				: routerpath;
+		//console.log('JsonPage jsonurl:', jsonurl);
+		if (jsonurl) {
+			setLoading(true);
+			setError(null);
+
+			fetchJson(jsonurl)
+				.then((data) => {
+					setJsonData(data);
+					setLoading(false);
+				})
+				.catch((err) => {
+					setError(err);
+					setLoading(false);
+				});
+		}
+	}, [location.pathname]); // React to changes in pathname
+
+	if (loading) {
+		return <div>Loading...</div>;
+	}
+	if (error || !jsonData) {
+		return <NotFoundPage page={location.pathname} />;
+	}
+
+	return (
+		<>
+			<LayoutParser config={jsonData.layout}>
+				<Vcontroller components={jsonData.components} />
+			</LayoutParser>
+		</>
+	);
+};
+
+export default JsonPage;

package/src/core/pages/loading.js

@@ -1,44 +1,44 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-12-23 13:22:33
- * @FilePath     : /visualifyjs/src/core/pages/Loading.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import React from 'react';
-import Error from './error';
-import CircularProgress from '../widgets/circularProgress';
-
-function Loading({
-	message,
-	style,
-	msgStyle,
-	ProgressColor = 'primary',
-	error = false,
-}) {
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column', // Added to stack elements vertically
-				alignItems: 'center',
-				justifyContent: 'center',
-				height: '100%',
-				...style,
-			}}>
-			<CircularProgress color={ProgressColor} />
-			<div style={{ marginTop: '10px', ...msgStyle }}>
-				{error ? (
-					<Error
-						message={message}
-						style={msgStyle}
-					/>
-				) : (
-					<p>{message}</p>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default Loading;
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-12-23 13:22:33
+ * @FilePath     : /visualifyjs/src/core/pages/Loading.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import React from 'react';
+import Error from './error';
+import CircularProgress from '../widgets/circularProgress';
+
+function Loading({
+	message,
+	style,
+	msgStyle,
+	ProgressColor = 'primary',
+	error = false,
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column', // Added to stack elements vertically
+				alignItems: 'center',
+				justifyContent: 'center',
+				height: '100%',
+				...style,
+			}}>
+			<CircularProgress color={ProgressColor} />
+			<div style={{ marginTop: '10px', ...msgStyle }}>
+				{error ? (
+					<Error
+						message={message}
+						style={msgStyle}
+					/>
+				) : (
+					<p>{message}</p>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default Loading;