diff --git a/app/components/ItemPicker.tsx b/app/components/ItemPicker.tsx index 8e80dd2742..6831e1ef0e 100644 --- a/app/components/ItemPicker.tsx +++ b/app/components/ItemPicker.tsx @@ -1,11 +1,11 @@ import { twMerge } from "tailwind-merge"; import { H4 } from "."; - +import { ArtStyle } from "~/pages/PageEnigma/js/api_manager"; interface ItemPickerProps extends React.ImgHTMLAttributes { - label: string + label: ArtStyle; selected: boolean; - onSelected : (val:string)=>void; + onSelected: (picked: ArtStyle) => void; } export const ItemPicker = ({ @@ -13,20 +13,22 @@ export const ItemPicker = ({ selected = false, onSelected, ...imgProps -}:ItemPickerProps) => { - - const handleSelected = ()=>{ +}: ItemPickerProps) => { + const handleSelected = () => { onSelected(label); }; return (
-
+

{label}

- ) -} \ No newline at end of file + ); +}; diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 6507fd86fe..da3f729918 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -1,10 +1,18 @@ import { PageEnigmaComponent } from "./PageEnigmaComponent"; import { TrackProvider } from "~/pages/PageEnigma/contexts/TrackContext/TrackProvider"; +import { AppUIProvider } from "~/pages/PageEnigma/contexts/AppUiContext"; +import { EngineProvider } from "~/pages/PageEnigma/contexts/EngineProvider"; +import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent"; export const PageEnigma = () => { return ( - + + + + + + ); }; diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index b1a36217e6..b8416749c1 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,4 +1,4 @@ -import { useReducer } from "react"; +import { useContext } from "react"; import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; @@ -15,23 +15,14 @@ import { ViewSideBySide } from "./comps/ViewSideBySide"; import { SidePanelTabs } from "./comps/SidePanelTabs"; import { Timeline } from "./comps/Timeline"; -import { EngineProvider } from "./contexts/EngineProvider"; -import { AppUIProvider } from "./contexts/AppUiContext"; -import { - appUiReducer, - appUiInitialStateValues, - APPUI_VIEW_MODES, -} from "./reducers"; +import { APPUI_VIEW_MODES } from "./reducers"; import { timelineHeight } from "~/pages/PageEnigma/store"; import { useSignals } from "@preact/signals-react/runtime"; -import { DragComponent } from "~/pages/PageEnigma/comps/DragComponent/DragComponent"; +import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext"; export const PageEnigmaComponent = () => { useSignals(); - const [appUiState, dispatchAppUiState] = useReducer( - appUiReducer, - appUiInitialStateValues, - ); + const [appUiState] = useContext(AppUiContext); //To prevent the click event from propagating to the canvas: TODO: HANDLE THIS BETTER? const handleOverlayClick = (event: React.MouseEvent) => { @@ -45,82 +36,77 @@ export const PageEnigmaComponent = () => { - - -
- {/* Engine section/side panel */} +
+ {/* Engine section/side panel */} +
+
-
-
- + - {/* Top controls */} -
-
- - -
-
- - {/* Bottom controls */} -
- - - -
+ {/* Top controls */} +
+
+ +
- {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && ( - - )} - -
- {/* Side panel */} -
- - - + {/* Bottom controls */} +
+ + +
- - {/* Timeline */} -
- -
+ {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && ( + + )} + +
- - - + + {/* Side panel */} +
+ + + +
+
+ + {/* Timeline */} +
+ +
+
); }; diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx index 3b8f4a764d..7d9e3d17e0 100644 --- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx +++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx @@ -20,36 +20,30 @@ import { QueueKeyframe } from "~/pages/PageEnigma/models/track"; export const ControlPanelSceneObject = () => { const [appUiState, dispatchAppUiState] = useContext(AppUiContext); - const position = appUiState?.currentSceneObject.objectVectors.position; - const rotation = appUiState?.currentSceneObject.objectVectors.rotation; - const scale = appUiState?.currentSceneObject.objectVectors.scale; - const currentSceneObject = appUiState?.currentSceneObject; - const handlePositionChange = (xyz: XYZ) => { - if (appUiState) { - if (currentSceneObject == null) { - console.log("Missing Scene Object Position"); - return; - } - - dispatchAppUiState({ - type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT, - payload: { - currentSceneObject: { - group: currentSceneObject.group, - object_uuid: currentSceneObject.object_uuid, - object_name: currentSceneObject.object_name, - version: currentSceneObject.version, - objectVectors: { - position: { ...xyz }, - rotation: appUiState.currentSceneObject.objectVectors.rotation, - scale: appUiState.currentSceneObject.objectVectors.scale, - }, - }, - }, - }); + if (!currentSceneObject) { + console.log("Missing Scene Object Position"); + return; } + + dispatchAppUiState({ + type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT, + payload: { + group: currentSceneObject.group, + object_uuid: currentSceneObject.object_uuid, + object_name: currentSceneObject.object_name, + version: currentSceneObject.version, + objectVectors: { + position: { ...xyz }, + rotation: appUiState?.controlPanel.currentSceneObject?.objectVectors + ?.rotation ?? { x: 0, y: 0, z: 0 }, + scale: appUiState?.controlPanel.currentSceneObject?.objectVectors + ?.scale ?? { x: 0, y: 0, z: 0 }, + }, + }, + }); }; + const handleRotationChange = (xyz: XYZ) => { if (appUiState) { if (currentSceneObject == null) { @@ -60,21 +54,22 @@ export const ControlPanelSceneObject = () => { dispatchAppUiState({ type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT, payload: { - currentSceneObject: { - group: currentSceneObject.group, - object_uuid: currentSceneObject.object_uuid, - object_name: currentSceneObject.object_name, - version: currentSceneObject.version, - objectVectors: { - position: appUiState.currentSceneObject.objectVectors.position, - rotation: { ...xyz }, - scale: appUiState.currentSceneObject.objectVectors.scale, - }, + group: currentSceneObject.group, + object_uuid: currentSceneObject.object_uuid, + object_name: currentSceneObject.object_name, + version: currentSceneObject.version, + objectVectors: { + position: + appUiState.controlPanel.currentSceneObject.objectVectors.position, + rotation: { ...xyz }, + scale: + appUiState.controlPanel.currentSceneObject.objectVectors.scale, }, }, }); } }; + const handleScaleChange = (xyz: XYZ) => { if (appUiState) { if (currentSceneObject == null) { @@ -84,16 +79,16 @@ export const ControlPanelSceneObject = () => { dispatchAppUiState({ type: ACTION_TYPES.UPDATE_CONTROLPANELS_SCENEOBJECT, payload: { - currentSceneObject: { - group: currentSceneObject.group, - object_uuid: currentSceneObject.object_uuid, - object_name: currentSceneObject.object_name, - version: currentSceneObject.version, - objectVectors: { - position: appUiState.currentSceneObject.objectVectors.position, - rotation: appUiState.currentSceneObject.objectVectors.rotation, - scale: { ...xyz }, - }, + group: currentSceneObject.group, + object_uuid: currentSceneObject.object_uuid, + object_name: currentSceneObject.object_name, + version: currentSceneObject.version, + objectVectors: { + position: + appUiState.controlPanel.currentSceneObject.objectVectors.position, + rotation: + appUiState.controlPanel.currentSceneObject.objectVectors.rotation, + scale: { ...xyz }, }, }, }); @@ -145,9 +140,19 @@ export const ControlPanelSceneObject = () => { } }; + if (!appUiState.controlPanel.currentSceneObject) { + return null; + } + const position = + appUiState.controlPanel.currentSceneObject.objectVectors.position; + const rotation = + appUiState.controlPanel.currentSceneObject.objectVectors.rotation; + const scale = appUiState.controlPanel.currentSceneObject.objectVectors.scale; + const currentSceneObject = appUiState.controlPanel.currentSceneObject; + return ( { const editorEngine = useContext(EngineContext); - const [ appUiState, dispatchAppUiState ] = useContext(AppUiContext); + const [appUiState, dispatchAppUiState] = useContext(AppUiContext); const [sceneName, setSceneName] = useState(""); const [sceneToken, setSceneToken] = useState(""); @@ -22,8 +23,8 @@ export const ControlsTopButtons = () => { }; const handleButtonTest = () => { - editorEngine?.testStylizeRequest() - + editorEngine?.testStylizeRequest(); + // if(appUiState?.showEditorLoadingBar.isShowing){ //TO GO TO A HUNDRED AND DISAPPER // dispatchAppUiState({ @@ -41,15 +42,15 @@ export const ControlsTopButtons = () => { // }, 1000); //END :TO GO TO A HUNDRED AND DISAPPER - //EAMPLE OF CHANING LOADING MESSAGE - // dispatchAppUiState({ - // type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, - // payload:{ - // showEditorLoadingBar: { - // message: "new message", - // } - // } - // }); + //EAMPLE OF CHANING LOADING MESSAGE + // dispatchAppUiState({ + // type: APPUI_ACTION_TYPES.UPDATE_EDITOR_LOADINGBAR, + // payload:{ + // showEditorLoadingBar: { + // message: "new message", + // } + // } + // }); // }else{ // dispatchAppUiState({ // type: APPUI_ACTION_TYPES.SHOW_EDITOR_LOADINGBAR, @@ -59,31 +60,33 @@ export const ControlsTopButtons = () => { // progress: 10, // } // } - + // }); //} }; const handleObjectPanelTest = () => { - if (appUiState?.currentSceneObject.isShowing) { + if (appUiState?.controlPanel.isShowing) { dispatchAppUiState({ - type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT + type: APPUI_ACTION_TYPES.HIDE_CONTROLPANELS_SCENEOBJECT, }); - }else{ + } else { dispatchAppUiState({ - type:APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT, - payload:{ - currentSceneObject:{ - objectVectors: { - position: {x:1,y:2,z:3}, - rotation: {x:4,y:5,z:6}, - scale: {x:7,y:8,z:9}, - } - } - } + type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT, + payload: { + group: ClipGroup.OBJECT, + object_name: "", + object_uuid: "", + version: "1", + objectVectors: { + position: { x: 1, y: 2, z: 3 }, + rotation: { x: 4, y: 5, z: 6 }, + scale: { x: 7, y: 8, z: 9 }, + }, + }, }); } - } + }; const handleButtonCameraView = () => { editorEngine?.switchCameraView(); @@ -111,40 +114,44 @@ export const ControlsTopButtons = () => {
+ buttonProps={{ + variant: "secondary", + label: "Load Scene", + }} + title="Load Scene" + confirmButtonProps={{ + label: "Load", + disabled: sceneToken === "", + onClick: handleButtonLoadScene, + }} + > {setSceneToken(e.target.value)}} + onChange={(e) => { + setSceneToken(e.target.value); + }} /> - - {setSceneName(e.target.value)}} - /> - + + { + setSceneName(e.target.value); + }} + /> + {
- @@ -181,7 +187,7 @@ export const ControlsTopButtons = () => { diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx index d4ee6b842d..d04ce64519 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx @@ -1,105 +1,114 @@ -import { useContext, useState } from 'react'; +import { useContext, useState } from "react"; -import { - Button, - H4, - ItemPicker, - Textarea -} from "~/components" +import { Button, H4, ItemPicker, Textarea } from "~/components"; -import { AppUiContext } from '../../contexts/AppUiContext'; -import { APPUI_ACTION_TYPES } from '../../reducers'; -import { APPUI_VIEW_MODES } from '../../reducers'; -import { EngineContext } from '../../contexts/EngineContext'; -import { ArtStyle } from '../../js/api_manager'; -export const TabStylization = ()=>{ +import { AppUiContext } from "../../contexts/AppUiContext"; +import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers"; +import { EngineContext } from "../../contexts/EngineContext"; +import { ArtStyle } from "../../js/api_manager"; + +export const TabStylization = () => { const [appUiState, dispatchAppUiState] = useContext(AppUiContext); - const [ selection, setSelection ] = useState("Anime"); + const [selection, setSelection] = useState("Anime"); const editorEngine = useContext(EngineContext); - const handlePickingStylizer = (picked:ArtStyle)=>{ + const handlePickingStylizer = (picked: ArtStyle) => { console.log(`Picked style: ${picked}`); - if (editorEngine == null) { console.log("Editor is null"); return;} - editorEngine.art_style = picked + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.art_style = picked; setSelection(picked); - } + }; - const onChangeHandlerNegative = (e:React.ChangeEvent) => { - if (editorEngine == null) { console.log("Editor is null"); return;} - editorEngine.negative_prompt = e.target.value - console.log(e.target.value) - } + const onChangeHandlerNegative = ( + e: React.ChangeEvent, + ) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.negative_prompt = e.target.value; + console.log(e.target.value); + }; - const onChangeHandlerPositive = (e:React.ChangeEvent) => { - if (editorEngine == null) { console.log("Editor is null"); return;} - editorEngine.positive_prompt = e.target.value - console.log(e.target.value) - } - const handleChangeViewMode = ()=>{ - if(dispatchAppUiState!==null){ + const onChangeHandlerPositive = ( + e: React.ChangeEvent, + ) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.positive_prompt = e.target.value; + console.log(e.target.value); + }; + const handleChangeViewMode = () => { + if (dispatchAppUiState !== null) { dispatchAppUiState({ type: APPUI_ACTION_TYPES.ON_CHANGE_VIEW_MODE, payload: { - viewMode: appUiState?.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE - ? APPUI_VIEW_MODES.EDITOR : APPUI_VIEW_MODES.SIDE_BY_SIDE, - } - }) + viewMode: + appUiState?.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE + ? APPUI_VIEW_MODES.EDITOR + : APPUI_VIEW_MODES.SIDE_BY_SIDE, + }, + }); } - } - return( -
+ }; + return ( +

Select Base Stylizer

-
+

Enter a Prompt

-
+