react-three-game 0.0.6 → 0.0.8

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+import { MapControls, TransformControls } from "@react-three/drei";
+import { useState, useRef, useEffect, forwardRef, useMemo, useCallback } from "react";
+import { Vector3, Euler, Quaternion, ClampToEdgeWrapping, DoubleSide, Group, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, Matrix4 } from "three";
+import { Prefab, GameObject as GameObjectType } from "./types";
+import { getComponent } from "./components/ComponentRegistry";
+import { ThreeEvent } from "@react-three/fiber";
+import { loadModel } from "../dragdrop/modelLoader";
+import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
+
+// register all components
+import { registerComponent } from './components/ComponentRegistry';
+import components from './components/';
+components.forEach(registerComponent);
+
+function updatePrefabNode(root: GameObjectType, id: string, update: (node: GameObjectType) => GameObjectType): GameObjectType {
+    if (root.id === id) {
+        return update(root);
+    }
+    if (root.children) {
+        return {
+            ...root,
+            children: root.children.map(child => updatePrefabNode(child, id, update))
+        };
+    }
+    return root;
+}
+
+export const PrefabRoot = forwardRef<Group, {
+    editMode?: boolean;
+    data: Prefab;
+    onPrefabChange?: (data: Prefab) => void;
+    selectedId?: string | null;
+    onSelect?: (id: string | null) => void;
+    transformMode?: "translate" | "rotate" | "scale";
+    setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
+}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
+    const [loadedModels, setLoadedModels] = useState<Record<string, Object3D>>({});
+    const [loadedTextures, setLoadedTextures] = useState<Record<string, Texture>>({});
+    // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
+    const loadingRefs = useRef<Set<string>>(new Set());
+    const objectRefs = useRef<Record<string, Object3D | null>>({});
+    const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
+
+    const registerRef = useCallback((id: string, obj: Object3D | null) => {
+        objectRefs.current[id] = obj;
+        if (id === selectedId) {
+            setSelectedObject(obj);
+        }
+    }, [selectedId]);
+
+    useEffect(() => {
+        if (selectedId) {
+            setSelectedObject(objectRefs.current[selectedId] || null);
+        } else {
+            setSelectedObject(null);
+        }
+    }, [selectedId]);
+
+
+    // const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate"); // Removed local state
+
+    const updateNode = (updater: (node: GameObjectType) => GameObjectType) => {
+        if (!selectedId || !onPrefabChange) return;
+        const newRoot = updatePrefabNode(data.root, selectedId, updater);
+        onPrefabChange({ ...data, root: newRoot });
+    };
+
+    const onTransformChange = () => {
+        if (!selectedId || !onPrefabChange) return;
+        const obj = objectRefs.current[selectedId];
+        if (!obj) return;
+
+        // 1. Get world matrix from the actual Three object
+        const worldMatrix = obj.matrixWorld.clone();
+
+        // 2. Compute parent world matrix from the prefab tree
+        const parentWorld = computeParentWorldMatrix(data.root, selectedId);
+        const parentInv = parentWorld.clone().invert();
+
+        // 3. Convert world -> local
+        const localMatrix = new Matrix4().multiplyMatrices(parentInv, worldMatrix);
+
+        const lp = new Vector3();
+        const lq = new Quaternion();
+        const ls = new Vector3();
+        localMatrix.decompose(lp, lq, ls);
+
+        const le = new Euler().setFromQuaternion(lq);
+
+        // 4. Write back LOCAL transform into the prefab node
+        const newRoot = updatePrefabNode(data.root, selectedId, (node) => ({
+            ...node,
+            components: {
+                ...node?.components,
+                transform: {
+                    type: "Transform",
+                    properties: {
+                        position: [lp.x, lp.y, lp.z] as [number, number, number],
+                        rotation: [le.x, le.y, le.z] as [number, number, number],
+                        scale: [ls.x, ls.y, ls.z] as [number, number, number],
+                    },
+                },
+                geometry: node.components?.geometry,
+                material: node.components?.material,
+                model: node.components?.model,
+            },
+        }));
+
+        onPrefabChange({ ...data, root: newRoot });
+    };
+
+
+    useEffect(() => {
+        const loadAssets = async () => {
+            const modelsToLoad = new Set<string>();
+            const texturesToLoad = new Set<string>();
+
+            const traverse = (node?: GameObjectType | null) => {
+                if (!node) return;
+                if (node.components?.model?.properties?.filename) {
+                    modelsToLoad.add(node.components.model.properties.filename);
+                }
+                if (node.components?.material?.properties?.texture) {
+                    texturesToLoad.add(node.components.material.properties.texture);
+                }
+                node.children?.forEach(traverse);
+            };
+            traverse(data.root);
+
+            for (const filename of modelsToLoad) {
+                if (!loadedModels[filename] && !loadingRefs.current.has(filename)) {
+                    loadingRefs.current.add(filename);
+                    const result = await loadModel(filename, basePath);
+                    if (result.success && result.model) {
+                        setLoadedModels(prev => ({ ...prev, [filename]: result.model }));
+                    }
+                }
+            }
+
+            const textureLoader = new TextureLoader();
+            for (const filename of texturesToLoad) {
+                if (!loadedTextures[filename] && !loadingRefs.current.has(filename)) {
+                    loadingRefs.current.add(filename);
+                    const texturePath = basePath ? `${basePath}/${filename}` : filename;
+                    textureLoader.load(texturePath, (texture) => {
+                        texture.colorSpace = SRGBColorSpace;
+                        setLoadedTextures(prev => ({ ...prev, [filename]: texture }));
+                    });
+                }
+            }
+        };
+        loadAssets();
+    }, [data, loadedModels, loadedTextures]);
+
+
+
+    return <group ref={ref}>
+        <GameInstanceProvider models={loadedModels} onSelect={editMode ? onSelect : undefined} registerRef={registerRef}>
+            <GameObjectRenderer
+                gameObject={data.root}
+                selectedId={selectedId}
+                onSelect={editMode ? onSelect : undefined}
+                registerRef={registerRef}
+                loadedModels={loadedModels}
+                loadedTextures={loadedTextures}
+                editMode={editMode}
+                parentMatrix={new Matrix4()}   // 👈 identity = world root
+            />
+        </GameInstanceProvider>
+
+
+        {editMode && <>
+            <MapControls makeDefault />
+
+            {selectedId && selectedObject && (
+                <TransformControls
+                    object={selectedObject}
+                    mode={transformMode}
+                    space="local"
+                    onObjectChange={onTransformChange}
+                />
+            )}
+        </>}
+    </group>;
+});
+
+interface GameObjectRendererProps {
+    gameObject?: GameObjectType | null;
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    registerRef: (id: string, obj: Object3D | null) => void;
+    loadedModels: Record<string, Object3D>;
+    loadedTextures: Record<string, Texture>;
+    editMode?: boolean;
+    parentMatrix?: Matrix4;          // 👈 new
+}
+
+
+function GameObjectRenderer({
+    gameObject,
+    selectedId,
+    onSelect,
+    registerRef,
+    loadedModels,
+    loadedTextures,
+    editMode,
+    parentMatrix = new Matrix4(),
+}: GameObjectRendererProps) {
+
+    // Early return if gameObject is null or undefined
+    if (!gameObject) return null;
+
+    // Build a small context object to avoid long param lists
+    const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
+
+    // --- 1. Transform (local + world) ---
+    const transformProps = getNodeTransformProps(gameObject);
+    const localMatrix = new Matrix4().compose(
+        new Vector3(...transformProps.position),
+        new Quaternion().setFromEuler(new Euler(...transformProps.rotation)),
+        new Vector3(...transformProps.scale)
+    );
+    const worldMatrix = parentMatrix.clone().multiply(localMatrix);
+
+    // preserve click/drag detection from previous implementation
+    const clickValid = useRef(false);
+    const handlePointerDown = (e: ThreeEvent<PointerEvent>) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+    const handlePointerMove = () => {
+        if (clickValid.current) clickValid.current = false;
+    };
+    const handlePointerUp = (e: ThreeEvent<PointerEvent>) => {
+        if (clickValid.current) {
+            e.stopPropagation();
+            onSelect?.(gameObject.id);
+        }
+        clickValid.current = false;
+    };
+
+    if (!gameObject.enabled || !gameObject.visible) return null;
+
+    // --- 2. If instanced, short-circuit to a tiny clean branch ---
+    const isInstanced = !!gameObject.components?.model?.properties?.instanced;
+    if (isInstanced) {
+        return renderInstancedNode(gameObject, worldMatrix, ctx);
+    }
+
+    // --- 3. Core content decided by component registry ---
+    const core = renderCoreNode(gameObject, ctx, parentMatrix);
+
+    // --- 5. Render children (always relative transforms) ---
+    const children = (gameObject.children ?? []).map((child) => (
+        <GameObjectRenderer
+            key={child.id}
+            gameObject={child}
+            selectedId={selectedId}
+            onSelect={onSelect}
+            registerRef={registerRef}
+            loadedModels={loadedModels}
+            loadedTextures={loadedTextures}
+            editMode={editMode}
+            parentMatrix={worldMatrix}
+        />
+    ));
+
+    // --- 4. Wrap with physics if needed ---
+    // Combine core and children so they both get wrapped by physics (if present)
+    const content = (
+        <>
+            {core}
+            {children}
+        </>
+    );
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, content, ctx);
+
+    // --- 6. Final group wrapper ---
+    return (
+        <group
+            ref={(el) => registerRef(gameObject.id, el)}
+            position={transformProps.position}
+            rotation={transformProps.rotation}
+            scale={transformProps.scale}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+        >
+            {physicsWrapped}
+        </group>
+    );
+}
+
+// Helper: render an instanced GameInstance (terminal node)
+function renderInstancedNode(gameObject: GameObjectType, worldMatrix: Matrix4, ctx: any) {
+    const physics = gameObject.components?.physics;
+    const wp = new Vector3();
+    const wq = new Quaternion();
+    const ws = new Vector3();
+    worldMatrix.decompose(wp, wq, ws);
+    const we = new Euler().setFromQuaternion(wq);
+    const modelUrl = gameObject.components?.model?.properties?.filename;
+    return (
+        <GameInstance
+            id={gameObject.id}
+            modelUrl={modelUrl}
+            position={[wp.x, wp.y, wp.z]}
+            rotation={[we.x, we.y, we.z]}
+            scale={[ws.x, ws.y, ws.z]}
+            physics={ctx.editMode ? undefined : (physics?.properties as any)}
+        />
+    );
+}
+
+// Helper: render main model/geometry content for a non-instanced node
+function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matrix4 | undefined) {
+    const geometry = gameObject.components?.geometry;
+    const material = gameObject.components?.material;
+    const modelComp = gameObject.components?.model;
+
+    const geometryDef = geometry ? getComponent('Geometry') : undefined;
+    const materialDef = material ? getComponent('Material') : undefined;
+
+    const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
+
+    // Generic component views (exclude geometry/material/model)
+    const contextProps = {
+        loadedModels: ctx.loadedModels,
+        loadedTextures: ctx.loadedTextures,
+        isSelected: ctx.selectedId === gameObject.id,
+        editMode: ctx.editMode,
+        parentMatrix,
+        registerRef: ctx.registerRef,
+    };
+    const allComponentViews = gameObject.components
+        ? Object.entries(gameObject.components)
+            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model')
+            .map(([key, comp]) => {
+                const def = getComponent(key);
+                if (!def || !def.View || !comp) return null;
+                return <def.View key={key} properties={comp.properties} {...contextProps} />;
+            })
+        : null;
+
+    // If we have a model (non-instanced) render it as a primitive with material override
+    if (isModelAvailable) {
+        const modelObj = ctx.loadedModels[modelComp.properties.filename].clone();
+        return (
+            <primitive object={modelObj}>
+                {material && materialDef && materialDef.View && (
+                    <materialDef.View
+                        key="material"
+                        properties={material.properties}
+                        loadedTextures={ctx.loadedTextures}
+                        isSelected={ctx.selectedId === gameObject.id}
+                        editMode={ctx.editMode}
+                        parentMatrix={parentMatrix}
+                        registerRef={ctx.registerRef}
+                    />
+                )}
+                {allComponentViews}
+            </primitive>
+        );
+    }
+
+    // Otherwise, if geometry present, render a mesh
+    if (geometry && geometryDef && geometryDef.View) {
+        return (
+            <mesh>
+                <geometryDef.View key="geometry" properties={geometry.properties} {...contextProps} />
+                {material && materialDef && materialDef.View && (
+                    <materialDef.View
+                        key="material"
+                        properties={material.properties}
+                        loadedTextures={ctx.loadedTextures}
+                        isSelected={ctx.selectedId === gameObject.id}
+                        editMode={ctx.editMode}
+                        parentMatrix={parentMatrix}
+                        registerRef={ctx.registerRef}
+                    />
+                )}
+                {allComponentViews}
+            </mesh>
+        );
+    }
+
+    // Default: render other component views (no geometry/model)
+    return <>{allComponentViews}</>;
+}
+
+// Helper: wrap core content with physics component when necessary
+function wrapPhysicsIfNeeded(gameObject: GameObjectType, content: React.ReactNode, ctx: any) {
+    const physics = gameObject.components?.physics;
+    if (!physics) return content;
+    const physicsDef = getComponent('Physics');
+    if (!physicsDef || !physicsDef.View) return content;
+    return (
+        <physicsDef.View
+            properties={{ ...physics.properties, id: gameObject.id }}
+            registerRef={ctx.registerRef}
+            editMode={ctx.editMode}
+        >
+            {content}
+        </physicsDef.View>
+    );
+}
+
+
+
+
+
+export default PrefabRoot;
+
+function getNodeTransformProps(node?: GameObjectType | null) {
+    const t = node?.components?.transform?.properties;
+    return {
+        position: t?.position ?? [0, 0, 0],
+        rotation: t?.rotation ?? [0, 0, 0],
+        scale: t?.scale ?? [1, 1, 1],
+    };
+}
+
+function computeParentWorldMatrix(root: GameObjectType, targetId: string): Matrix4 {
+    const identity = new Matrix4();
+
+    function traverse(node: GameObjectType, parentWorld: Matrix4): Matrix4 | null {
+        if (node.id === targetId) {
+            // parentWorld is what we want
+            return parentWorld.clone();
+        }
+
+        const { position, rotation, scale } = getNodeTransformProps(node);
+
+        const localPos = new Vector3(...position);
+        const localRot = new Euler(...rotation);
+        const localScale = new Vector3(...scale);
+
+        const localMat = new Matrix4().compose(
+            localPos,
+            new Quaternion().setFromEuler(localRot),
+            localScale
+        );
+
+        const worldMat = parentWorld.clone().multiply(localMat);
+
+        if (node.children) {
+            for (const child of node.children) {
+                const res = traverse(child, worldMat);
+                if (res) return res;
+            }
+        }
+
+        return null;
+    }
+
+    return traverse(root, identity) ?? identity;
+}

package/src/tools/prefabeditor/components/ComponentRegistry.ts

@@ -0,0 +1,26 @@
+import { FC } from "react";
+
+export interface Component {
+    name: string;
+    Editor: FC<{ component: any; onUpdate: (newComp: any) => void; basePath?: string }>;
+    defaultProperties: any;
+    // Allow View to accept extra props for special cases (like material)
+    View?: FC<any>;
+}
+
+const REGISTRY: Record<string, Component> = {};
+
+export function registerComponent(component: Component) {
+    if (REGISTRY[component.name]) {
+        throw new Error(`Component with name ${component.name} already registered.`);
+    }
+    REGISTRY[component.name] = component;
+}
+
+export function getComponent(name: string): Component | undefined {
+    return REGISTRY[name];
+}
+
+export function getAllComponents(): Record<string, Component> {
+    return { ...REGISTRY };
+}

package/src/tools/prefabeditor/components/GeometryComponent.tsx

@@ -0,0 +1,43 @@
+import { Component } from "./ComponentRegistry";
+
+function GeometryComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return <div>
+        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Type</label>
+        <select
+            className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+            value={component.properties.geometryType}
+            onChange={e => onUpdate({ geometryType: e.target.value })}
+        >
+            <option value="box">Box</option>
+            <option value="sphere">Sphere</option>
+            <option value="plane">Plane</option>
+        </select>
+    </div>;
+}
+
+// View for Geometry component
+function GeometryComponentView({ properties, children }: { properties: any, children?: React.ReactNode }) {
+    const { geometryType, args = [] } = properties;
+    // Only return the geometry node, do not wrap in mesh or group
+    switch (geometryType) {
+        case "box":
+            return <boxGeometry args={args as [number, number, number]} />;
+        case "sphere":
+            return <sphereGeometry args={args as [number, number?, number?]} />;
+        case "plane":
+            return <planeGeometry args={args as [number, number]} />;
+        default:
+            return <boxGeometry args={[1, 1, 1]} />;
+    }
+}
+
+const GeometryComponent: Component = {
+    name: 'Geometry',
+    Editor: GeometryComponentEditor,
+    View: GeometryComponentView,
+    defaultProperties: {
+        geometryType: 'box'
+    }
+};
+
+export default GeometryComponent;

package/src/tools/prefabeditor/components/MaterialComponent.tsx

@@ -0,0 +1,153 @@
+import { TextureListViewer } from '../../assetviewer/page';
+import { useEffect, useState } from 'react';
+import { Component } from './ComponentRegistry';
+
+function MaterialComponentEditor({ component, onUpdate, basePath = "" }: { component: any; onUpdate: (newComp: any) => void; basePath?: string }) {
+    const [textureFiles, setTextureFiles] = useState<string[]>([]);
+
+    useEffect(() => {
+        const base = basePath ? `${basePath}/` : '';
+        fetch(`/${base}textures/manifest.json`)
+            .then(r => r.json())
+            .then(data => setTextureFiles(Array.isArray(data) ? data : data.files || []))
+            .catch(console.error);
+    }, [basePath]);
+
+    return (
+        <div className="flex flex-col">
+            <div className="mb-1">
+                <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Color</label>
+                <div className="flex gap-0.5">
+                    <input
+                        type="color"
+                        className="h-5 w-5 bg-transparent border-none cursor-pointer"
+                        value={component.properties.color}
+                        onChange={e => onUpdate({ 'color': e.target.value })}
+                    />
+                    <input
+                        type="text"
+                        className="flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                        value={component.properties.color}
+                        onChange={e => onUpdate({ 'color': e.target.value })}
+                    />
+                </div>
+            </div>
+            <div className="flex items-center gap-1 mb-1">
+                <input
+                    type="checkbox"
+                    className="w-3 h-3"
+                    checked={component.properties.wireframe || false}
+                    onChange={e => onUpdate({ 'wireframe': e.target.checked })}
+                />
+                <label className="text-[9px] text-cyan-400/60">Wireframe</label>
+            </div>
+
+            <div>
+                <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Texture</label>
+                <div className="max-h-32 overflow-y-auto">
+                    <TextureListViewer
+                        files={textureFiles}
+                        selected={component.properties.texture || undefined}
+                        onSelect={(file) => onUpdate({ 'texture': file })}
+                        basePath={basePath}
+                    />
+                </div>
+            </div>
+
+            {component.properties.texture && (
+                <div className="border-t border-cyan-500/20 pt-1 mt-1">
+                    <div className="flex items-center gap-1 mb-1">
+                        <input
+                            type="checkbox"
+                            className="w-3 h-3"
+                            checked={component.properties.repeat || false}
+                            onChange={e => onUpdate({ 'repeat': e.target.checked })}
+                        />
+                        <label className="text-[9px] text-cyan-400/60">Repeat Texture</label>
+                    </div>
+
+                    {component.properties.repeat && (
+                        <div>
+                            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Repeat (X, Y)</label>
+                            <div className="flex gap-0.5">
+                                <input
+                                    type="number"
+                                    className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                                    value={component.properties.repeatCount?.[0] ?? 1}
+                                    onChange={e => {
+                                        const y = component.properties.repeatCount?.[1] ?? 1;
+                                        onUpdate({ 'repeatCount': [parseFloat(e.target.value), y] });
+                                    }}
+                                />
+                                <input
+                                    type="number"
+                                    className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                                    value={component.properties.repeatCount?.[1] ?? 1}
+                                    onChange={e => {
+                                        const x = component.properties.repeatCount?.[0] ?? 1;
+                                        onUpdate({ 'repeatCount': [x, parseFloat(e.target.value)] });
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+
+import { useMemo } from 'react';
+import { DoubleSide, RepeatWrapping, ClampToEdgeWrapping, SRGBColorSpace, Texture } from 'three';
+
+// View for Material component
+function MaterialComponentView({ properties, loadedTextures, isSelected }: { properties: any, loadedTextures?: Record<string, Texture>, isSelected?: boolean }) {
+    const textureName = properties?.texture;
+    const repeat = properties?.repeat;
+    const repeatCount = properties?.repeatCount;
+    const texture = textureName && loadedTextures ? loadedTextures[textureName] : undefined;
+
+    const finalTexture = useMemo(() => {
+        if (!texture) return undefined;
+        const t = texture.clone();
+        if (repeat) {
+            t.wrapS = t.wrapT = RepeatWrapping;
+            if (repeatCount) t.repeat.set(repeatCount[0], repeatCount[1]);
+        } else {
+            t.wrapS = t.wrapT = ClampToEdgeWrapping;
+            t.repeat.set(1, 1);
+        }
+        t.colorSpace = SRGBColorSpace;
+        t.needsUpdate = true;
+        return t;
+    }, [texture, repeat, repeatCount?.[0], repeatCount?.[1]]);
+
+    if (!properties) {
+        return <meshStandardMaterial color="red" wireframe />;
+    }
+
+    const { color, wireframe = false } = properties;
+    const displayColor = isSelected ? "cyan" : color;
+
+    return <meshStandardMaterial
+        key={finalTexture?.uuid ?? 'no-texture'}
+        color={displayColor}
+        wireframe={wireframe}
+        map={finalTexture}
+        transparent={!!finalTexture}
+        side={DoubleSide}
+    />;
+}
+
+const MaterialComponent: Component = {
+    name: 'Material',
+    Editor: MaterialComponentEditor,
+    View: MaterialComponentView,
+    defaultProperties: {
+        color: '#ffffff',
+        wireframe: false
+    }
+};
+
+export default MaterialComponent;