diff --git a/app/components/ButtonLink.tsx b/app/components/ButtonLink.tsx index c213470375..5d96f64879 100644 --- a/app/components/ButtonLink.tsx +++ b/app/components/ButtonLink.tsx @@ -28,7 +28,7 @@ export const ButtonLink = ({ } } const baseClassName = - "text-sm font-medium rounded-lg px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150"; + "text-sm font-medium whitespace-nowrap rounded-lg px-3 py-2 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-all duration-150"; const variantClassNames = getVariantClassNames(variant); const className = twMerge(baseClassName, variantClassNames, propsClassName); // END TODO @@ -36,7 +36,7 @@ export const ButtonLink = ({ return ( diff --git a/app/pages/PageEnigma/contexts/AppUiContext.tsx b/app/contexts/AppUiContext.tsx similarity index 100% rename from app/pages/PageEnigma/contexts/AppUiContext.tsx rename to app/contexts/AppUiContext.tsx diff --git a/app/pages/PageEnigma/contexts/EngineContext.tsx b/app/contexts/EngineContext.tsx similarity index 100% rename from app/pages/PageEnigma/contexts/EngineContext.tsx rename to app/contexts/EngineContext.tsx diff --git a/app/contexts/EngineProvider.tsx b/app/contexts/EngineProvider.tsx new file mode 100644 index 0000000000..2394554bba --- /dev/null +++ b/app/contexts/EngineProvider.tsx @@ -0,0 +1,29 @@ +import { ReactNode, useEffect, useState } from "react"; + +import Editor from "~/pages/PageEnigma/js/editor"; + +import { EngineContext } from "./EngineContext"; + +interface Props { + children: ReactNode; +} + +export const EngineProvider = ({ children }: Props) => { + const [editor, setEditor] = useState(null); + + useEffect(() => { + setEditor((curr) => { + if (curr !== null) { + console.warn("Editor Engine already exist"); + return curr; + } else { + return new Editor(); + } + }); + // } + }, []); + + return ( + {children} + ); +}; diff --git a/app/pages/PageEnigma/contexts/ToasterContext.tsx b/app/contexts/ToasterContext.tsx similarity index 100% rename from app/pages/PageEnigma/contexts/ToasterContext.tsx rename to app/contexts/ToasterContext.tsx diff --git a/app/contexts/TopBarInner.tsx b/app/contexts/TopBarInner.tsx index 7e6653dba0..751ac6e4b7 100644 --- a/app/contexts/TopBarInner.tsx +++ b/app/contexts/TopBarInner.tsx @@ -9,4 +9,4 @@ export const TopBarInnerContext = createContext<{ location: string, node: React.ReactNode, } | null)=>void; -} | null>(null); \ No newline at end of file +} | null>(null); diff --git a/app/modules/LowerPanel/LowerPanel.tsx b/app/modules/LowerPanel/LowerPanel.tsx index f5bab28550..33b641b823 100644 --- a/app/modules/LowerPanel/LowerPanel.tsx +++ b/app/modules/LowerPanel/LowerPanel.tsx @@ -14,9 +14,10 @@ import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; interface LowerPanelPropsI { children: React.ReactNode; + onStyle?: boolean; } -export const LowerPanel = ({ children }: LowerPanelPropsI) => { +export const LowerPanel = ({ children, onStyle }: LowerPanelPropsI) => { const { onPointerDown } = useMouseEventsTimeline(); const displayHeight = @@ -50,18 +51,21 @@ export const LowerPanel = ({ children }: LowerPanelPropsI) => { return ( <> -
+ {!onStyle && ( +
+ )}
{ overTimeline.value = true; }} diff --git a/app/modules/TopBar/TopBar.tsx b/app/modules/TopBar/TopBar.tsx index 40632259ef..29e40a9657 100644 --- a/app/modules/TopBar/TopBar.tsx +++ b/app/modules/TopBar/TopBar.tsx @@ -1,14 +1,17 @@ -import { useContext, } from "react"; import { useLocation } from "@remix-run/react"; import { faChevronLeft } from "@fortawesome/pro-solid-svg-icons"; -import { TopBarInnerContext } from "~/contexts/TopBarInner"; import { ButtonLink } from "~/components"; import { AuthButtons } from "./AuthButtons"; +import { sceneTitle } from "~/store"; -export const TopBar = () => { +interface Props { + pageName: string; +} + +export const TopBar = ({ pageName }: Props) => { const currentLocation = useLocation().pathname; return ( @@ -30,15 +33,16 @@ export const TopBar = () => { alt="Logo FakeYou StoryTeller.ai" /> - {currentLocation !== "/" && + {currentLocation !== "/" && ( Back to Dashboard - } + )}
- + {pageName} /  + {sceneTitle.value}
@@ -49,12 +53,3 @@ export const TopBar = () => { ); }; - -const TopBarInner = ({currentLocation}:{currentLocation:string}) => { - const { TopBarInner } = useContext(TopBarInnerContext) || {}; - if(!TopBarInner || TopBarInner.location !== currentLocation){ - return null; - } - return TopBarInner.node; -}; - diff --git a/app/modules/TopBarHelmet/TopBarHelmet.tsx b/app/modules/TopBarHelmet/TopBarHelmet.tsx index b73b655f39..2bd01a41f5 100644 --- a/app/modules/TopBarHelmet/TopBarHelmet.tsx +++ b/app/modules/TopBarHelmet/TopBarHelmet.tsx @@ -1,17 +1,9 @@ import { useLocation } from "@remix-run/react"; -import { - useContext, - useEffect, - useLayoutEffect, - useState, -} from 'react'; +import { useContext, useEffect, useLayoutEffect, useState } from "react"; import { TopBarInnerContext } from "~/contexts/TopBarInner"; - -export const TopBarHelmet = (props:{ - children: React.ReactNode | null; -})=>{ +export const TopBarHelmet = (props: { children: React.ReactNode | null }) => { const [showChild, setShowChild] = useState(false); // Wait until after client-side hydration to show useEffect(() => { @@ -23,22 +15,22 @@ export const TopBarHelmet = (props:{ } return ; -} +}; -const LazyLoadTopBarInnerContent = (props:{ +const LazyLoadTopBarInnerContent = (props: { children: React.ReactNode | null; -})=>{ +}) => { const { setTopBarInner } = useContext(TopBarInnerContext) || {}; const location = useLocation().pathname; - useLayoutEffect(()=>{ - if(setTopBarInner){ + useLayoutEffect(() => { + if (setTopBarInner) { setTopBarInner({ location: location, - node: props.children + node: props.children, }); } - },[setTopBarInner]); + }, [setTopBarInner]); return null; -} +}; diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx new file mode 100644 index 0000000000..df2cf03f73 --- /dev/null +++ b/app/pages/PageEnigma/PageEditor.tsx @@ -0,0 +1,140 @@ +import React, { useContext } from "react"; + +import { LoadingBar, LoadingDots } from "~/components"; +import { SidePanel } from "~/modules/SidePanel"; + +import { Controls3D } from "./comps/Controls3D"; +import { ControlsTopButtons } from "./comps/ControlsTopButtons"; +import { ControlsVideo } from "./comps/ControlsVideo"; +import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject"; +import { PreviewEngineCamera } from "./comps/PreviewEngineCamera"; +import { ViewSideBySide } from "./comps/ViewSideBySide"; +import { Timeline } from "./comps/Timeline"; + +import { APPUI_VIEW_MODES } from "../../reducers"; +import { + timelineHeight, + sidePanelWidth, + sidePanelVisible, + dndSidePanelWidth, + dndTimelineHeight, +} from "~/pages/PageEnigma/store"; +import { useSignals } from "@preact/signals-react/runtime"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { pageHeight, pageWidth } from "~/store"; +import { TopBar } from "~/modules/TopBar"; +import { DialogueTTS } from "./comps/DialogueTTS/DialogueTTS"; + +interface Props { + setPage: (page: string) => void; +} + +export const PageEditor = ({ setPage }: Props) => { + useSignals(); + + const [appUiState] = useContext(AppUiContext); + + //To prevent the click event from propagating to the canvas: TODO: HANDLE THIS BETTER? + const handleOverlayClick = (event: React.MouseEvent) => { + event.stopPropagation(); + }; + + const dndWidth = + dndSidePanelWidth.value > -1 + ? dndSidePanelWidth.value + : sidePanelWidth.value; + const width = sidePanelVisible.value + ? pageWidth.value - dndWidth - 66 + : pageWidth.value - 66; + const height = + dndTimelineHeight.value > -1 + ? pageHeight.value - dndTimelineHeight.value - 68 + : pageHeight.value - timelineHeight.value - 68; + + return ( +
+ +
+ {/* Engine section/side panel */} +
+
+
+ + + {/* Top controls */} +
+
+ + +
+
+ + {/* Bottom controls */} +
+ + + + +
+
+ {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && ( + + )} + + +
+
+ {/* Side panel */} +
+ +
+
+ + {/* Timeline */} +
+ +
+
+ ); +}; diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 6b9038c970..08055ceb50 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -1,48 +1,16 @@ 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"; +import { EngineProvider } from "~/contexts/EngineProvider"; import { useInferenceJobManager } from "~/hooks"; - -import { useEffect } from "react"; -import { useSignals } from "@preact/signals-react/runtime"; -import { - pageHeight, - pageWidth, - sidePanelWidth, - timelineHeight, -} from "~/pages/PageEnigma/store"; - export const PageEnigma = () => { - useSignals(); useInferenceJobManager(); - useEffect(() => { - function setPage() { - // TODO address this issue with zooming - pageHeight.value = window.innerHeight; - pageWidth.value = window.innerWidth; - } - timelineHeight.value = window.innerHeight * 0.25; - sidePanelWidth.value = 443; - - setPage(); - - window.addEventListener("resize", setPage); - - return () => { - window.removeEventListener("resize", setPage); - }; - }, []); - return ( - - - - - - + + + + ); }; diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index ef57ce95cd..4ed8afb801 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,152 +1,35 @@ -import { useContext, useState } from "react"; -import { faSparkles } from "@fortawesome/pro-solid-svg-icons"; +import { useContext, useEffect, useState } from "react"; -import { Button, LoadingBar, LoadingDots } from "~/components"; -import { TopBarHelmet } from "~/modules/TopBarHelmet/TopBarHelmet"; -import { SidePanel } from "~/modules/SidePanel"; - -import { Controls3D } from "./comps/Controls3D"; -import { ControlsTopButtons } from "./comps/ControlsTopButtons"; -import { ControlsVideo } from "./comps/ControlsVideo"; -import { ControlPanelSceneObject } from "./comps/ControlPanelSceneObject"; -import { DialogueTTS } from "./comps/DialogueTTS/DialogueTTS"; -import { PreviewEngineCamera } from "./comps/PreviewEngineCamera"; -import { ViewSideBySide } from "./comps/ViewSideBySide"; -import { Timeline } from "./comps/Timeline"; - -import { APPUI_VIEW_MODES } from "./reducers"; -import { - timelineHeight, - sidePanelWidth, - pageWidth, - sidePanelVisible, - pageHeight, - dndSidePanelWidth, - dndTimelineHeight, -} from "~/pages/PageEnigma/store"; import { useSignals } from "@preact/signals-react/runtime"; -import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext"; -import { EngineContext } from "./contexts/EngineContext"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { EngineContext } from "~/contexts/EngineContext"; +import { PageEditor } from "~/pages/PageEnigma/PageEditor"; +import { PageStyling } from "~/pages/PageEnigma/PageStyling"; export const PageEnigmaComponent = () => { useSignals(); - const editorEngine = useContext(EngineContext); - const [appUiState] = useContext(AppUiContext); + const [, dispatchAppUiState] = useContext(AppUiContext); + const editor = useContext(EngineContext); + const [page, setPage] = useState("edit"); - //To prevent the click event from propagating to the canvas: TODO: HANDLE THIS BETTER? - const handleOverlayClick = (event: React.MouseEvent) => { - event.stopPropagation(); - }; - - const handleGenerateMovieClick = () => { - if (editorEngine != null) { - editorEngine?.generateVideo(); - } else { - console.log("Tried to generate movie but editor was null"); + useEffect(() => { + if (editor && editor.can_initialize && dispatchAppUiState !== null) { + console.log("initializing Editor"); + editor.initialize({ + dispatchAppUiState, + }); } - }; - - const dndWidth = - dndSidePanelWidth.value > -1 - ? dndSidePanelWidth.value - : sidePanelWidth.value; - const width = sidePanelVisible.value - ? pageWidth.value - dndWidth - 66 - : pageWidth.value - 66; - const height = - dndTimelineHeight.value > -1 - ? pageHeight.value - dndTimelineHeight.value - 68 - : pageHeight.value - timelineHeight.value - 68; + }, [editor, dispatchAppUiState]); return ( -
- - - -
- {/* Engine section/side panel */} -
-
-
- - - {/* Top controls */} -
-
- - -
-
- - {/* Bottom controls */} -
- - - - -
-
- {appUiState.viewMode === APPUI_VIEW_MODES.SIDE_BY_SIDE && ( - - )} - - -
-
- {/* Side panel */} -
- -
+ <> +
+
- - {/* Timeline */} -
- +
+
-
+ ); }; diff --git a/app/pages/PageEnigma/PageStyling.tsx b/app/pages/PageEnigma/PageStyling.tsx new file mode 100644 index 0000000000..d518650763 --- /dev/null +++ b/app/pages/PageEnigma/PageStyling.tsx @@ -0,0 +1,68 @@ +import { useSignals } from "@preact/signals-react/runtime"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAngleLeft } from "@fortawesome/pro-solid-svg-icons"; +import { Button, Link } from "~/components"; +import { StyleSelection } from "~/pages/PageEnigma/comps/StyleSelection"; +import { LowerPanel } from "~/modules/LowerPanel"; +import { TimerGrid } from "~/pages/PageEnigma/comps/TimerGrid/TimerGrid"; +import { Scrubber } from "~/pages/PageEnigma/comps/Timeline/Scrubber"; +import { PreviewImages } from "~/pages/PageEnigma/comps/PreviewImages"; +import { TopBar } from "~/modules/TopBar"; +import { useContext } from "react"; +import { EngineContext } from "~/contexts/EngineContext"; + +interface Props { + setPage: (page: string) => void; +} + +export const PageStyling = ({ setPage }: Props) => { + useSignals(); + const editorEngine = useContext(EngineContext); + + const generateFrame = async () => { + await editorEngine?.generateFrame(); + }; + + const generateMovie = async () => { + await editorEngine?.generateVideo(); + }; + + const switchEdit = () => { + editorEngine?.switchEdit(); + setPage("edit"); + } + + return ( +
+ +
+
+ +
+
+
+ + +
+
+
+
+ +
+
+ +
+
+
+ + + + +
+
+
+ ); +}; diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx index d736eb492b..8d0f0f8642 100644 --- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx +++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx @@ -7,12 +7,12 @@ import { } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { AppUiContext } from "../../contexts/AppUiContext"; -import { EngineContext } from "../../contexts/EngineContext"; +import { AppUiContext } from "../../../../contexts/AppUiContext"; +import { EngineContext } from "../../../../contexts/EngineContext"; import { Button, H5, InputVector } from "~/components"; import { XYZ } from "../../datastructures/common"; -import { ACTION_TYPES } from "../../reducers/appUiReducer/types"; +import { ACTION_TYPES } from "~/reducers/appUiReducer/types"; import { QueueNames } from "../../Queue/QueueNames"; import Queue from "~/pages/PageEnigma/Queue/Queue"; diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index fed4fa9829..66020a93e5 100644 --- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -1,4 +1,5 @@ import { + faAngleRight, faArrowsRotate, faArrowsUpDownLeftRight, faCube, @@ -10,16 +11,18 @@ import { fa3dTorus, fa3dSphere, } from "@awesome.me/kit-fde2be5eb0/icons/kit/custom"; -import { ButtonIcon, ButtonIconSelect } from "~/components"; -import { EngineContext } from "../../contexts/EngineContext"; +import { Button, ButtonIcon, ButtonIconSelect, Link } from "~/components"; +import { EngineContext } from "../../../../contexts/EngineContext"; import { useContext } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -export const Controls3D = () => { +interface Props { + setPage: (page: string) => void; +} + +export const Controls3D = ({ setPage }: Props) => { const editorEngine = useContext(EngineContext); - const handlePlus = () => { - console.log("Controls 3D: Plus button clicked"); - }; const handleMoveArrows = () => { if (!editorEngine) { return; @@ -55,6 +58,11 @@ export const Controls3D = () => { } }; + const changeStylize = () => { + editorEngine?.switchPreview(); + setPage("style"); + } + const modes = [ { value: "move", icon: faArrowsUpDownLeftRight }, { value: "rotate", icon: faArrowsRotate }, @@ -66,14 +74,16 @@ export const Controls3D = () => {
- - - - + + + +
diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx index dcc148adcb..07ab5dd9cd 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/ControlsTopButtons.tsx @@ -1,9 +1,9 @@ import { useContext, useState } from "react"; import { Input } from "~/components"; import { ButtonDialogue } from "~/modules/ButtonDialogue"; -import { EngineContext } from "../../contexts/EngineContext"; -import { ToasterContext } from "~/pages/PageEnigma/contexts/ToasterContext"; -// import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers"; +import { EngineContext } from "../../../../contexts/EngineContext"; +import { ToasterContext } from "~/contexts/ToasterContext"; +// import { APPUI_ACTION_TYPES } from "app/reducers"; import { TestFeaturesButtons } from "./TestFeaturesButtons"; @@ -20,7 +20,7 @@ export const ControlsTopButtons = () => { const handleButtonSave = async () => { console.log(`SceneName is ${sceneName}`); const sceneMediaToken = await editorEngine?.saveScene(sceneName); - if(sceneMediaToken){ + if (sceneMediaToken) { addToast("success", sceneMediaToken); } }; diff --git a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx index 763a6b662a..ae530bad9c 100644 --- a/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx +++ b/app/pages/PageEnigma/comps/ControlsTopButtons/TestFeaturesButtons.tsx @@ -1,9 +1,9 @@ import { useContext } from "react"; import { Button, } from "~/components"; import { ClipGroup } from "~/pages/PageEnigma/models/track"; -import { APPUI_ACTION_TYPES } from "../../reducers"; -import { AppUiContext } from "../../contexts/AppUiContext"; -import { EngineContext } from "../../contexts/EngineContext"; +import { APPUI_ACTION_TYPES } from "~/reducers"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { EngineContext } from "~/contexts/EngineContext"; export const TestFeaturesButtons = ({debug}:{debug:boolean})=>{ if (!debug) return null; diff --git a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx index dd3ce0c84a..86cc4d8fb2 100644 --- a/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx +++ b/app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx @@ -7,7 +7,7 @@ import { faPlay, } from "@fortawesome/pro-solid-svg-icons"; import { ButtonIcon } from "~/components"; -import { EngineContext } from "../../contexts/EngineContext"; +import { EngineContext } from "../../../../contexts/EngineContext"; export const ControlsVideo = () => { const editorEngine = useContext(EngineContext); diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx index 7d674e2882..061e1c02b4 100644 --- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx +++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx @@ -4,12 +4,12 @@ import { v4 as uuidv4 } from "uuid"; import { faVolume, faShuffle, - faPlay, + // faPlay, faBrainCircuit, } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { AppUiContext } from "../../contexts/AppUiContext"; -import { APPUI_ACTION_TYPES } from "../../reducers"; +import { AppUiContext } from "~/contexts/AppUiContext"; +import { APPUI_ACTION_TYPES } from "~/reducers"; import { Button, H2, diff --git a/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx index babadfe83f..a68523d513 100644 --- a/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx +++ b/app/pages/PageEnigma/comps/PreviewEngineCamera/index.tsx @@ -1,7 +1,6 @@ import { useContext, useEffect, useState } from "react"; -import { EngineContext } from "../../contexts/EngineContext"; -import { Button, Input } from "~/components"; -import { LoadingDotsTyping } from "~/components"; +import { EngineContext } from "../../../../contexts/EngineContext"; +import { Button, Input, LoadingDotsTyping } from "~/components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCameraViewfinder } from "@fortawesome/pro-solid-svg-icons"; diff --git a/app/pages/PageEnigma/comps/PreviewImages.tsx b/app/pages/PageEnigma/comps/PreviewImages.tsx new file mode 100644 index 0000000000..dbae3b5f65 --- /dev/null +++ b/app/pages/PageEnigma/comps/PreviewImages.tsx @@ -0,0 +1,52 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; +import { useSignals } from "@preact/signals-react/runtime"; +import { pageHeight, pageWidth } from "~/store"; + +export const PreviewImages = () => { + useSignals(); + + const imageWidth1 = pageWidth.value > 1340 ? 630 : (pageWidth.value - 80) / 2; + const imageHeight1 = imageWidth1 * 0.56; + const imageHeight2 = pageHeight.value > 1138 ? 354 : pageHeight.value - 620; + const imageWidth2 = imageHeight2 / 0.56; + + const imageWidth = imageHeight1 < imageHeight2 ? imageWidth1 : imageWidth2; + const imageHeight = imageHeight1 < imageHeight2 ? imageHeight1 : imageHeight2; + + const textClasses = [ + "flex items-center justify-center", + "w-full rounded-t-lg bg-ui-controls h-[34px]", + "text-sm font-semibold", + ].join(" "); + + return ( +
+
+
Raw Preview
+
+ +
+
+
+ +
+
+
Styled Preview
+
+ +
+
+
+ ); +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx index c685ebb909..26e292bc2a 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx @@ -3,9 +3,9 @@ import { twMerge } from "tailwind-merge"; import { useSignals, useSignalEffect } from "@preact/signals-react/runtime"; import { faCirclePlus, faArrowsRotate } from "@fortawesome/pro-solid-svg-icons"; -import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext"; +import { AppUiContext } from "~/contexts/AppUiContext"; import { AuthenticationContext } from "~/contexts/Authentication"; -import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers"; +import { APPUI_ACTION_TYPES } from "~/reducers"; import { audioFilter, audioItems } from "~/pages/PageEnigma/store"; import { AssetFilterOption } from "~/pages/PageEnigma/models"; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx index f2b61ed00d..816fc0dda9 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx @@ -2,11 +2,10 @@ import { useContext, useState } from "react"; import { Button, ItemPicker, Label, Textarea } from "~/components"; -import { AppUiContext } from "../../contexts/AppUiContext"; -import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers"; -import { EngineContext } from "../../contexts/EngineContext"; +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"; -import { ignoreDelete } from "~/pages/PageEnigma/store"; export const TabStylization = () => { const [appUiState, dispatchAppUiState] = useContext(AppUiContext); diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/tabList.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/tabList.tsx index 2042e7d6df..d5b0abfc03 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/tabList.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/tabList.tsx @@ -6,6 +6,12 @@ import { AudioTab } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/AudioT import { TabStylization } from "~/pages/PageEnigma/comps/SidePanelTabs/TabStylization"; import { CameraTab } from "./itemTabs/CameraTab"; export const tabList = [ + { + icon: "resources/icons/characters.png", + title: "Characters", + value: AssetType.CHARACTER, + component: , + }, { icon: "resources/icons/animations.png", title: "Animation", @@ -24,12 +30,6 @@ export const tabList = [ value: AssetType.SHAPE, component: , }, - { - icon: "resources/icons/characters.png", - title: "Characters", - value: AssetType.CHARACTER, - component: , - }, { icon: "resources/icons/camera.png", title: "Camera", @@ -42,10 +42,4 @@ export const tabList = [ value: AssetType.AUDIO, component: , }, - { - icon: "resources/icons/objects.png", - title: "Style (Temporary being moved)", - value: AssetType.STYLE, - component: , - }, ]; diff --git a/app/pages/PageEnigma/comps/StyleSelection.tsx b/app/pages/PageEnigma/comps/StyleSelection.tsx new file mode 100644 index 0000000000..2937074c9f --- /dev/null +++ b/app/pages/PageEnigma/comps/StyleSelection.tsx @@ -0,0 +1,123 @@ +import { useContext, useState } from "react"; + +import { ButtonIcon, ItemPicker, Label, Textarea } from "~/components"; + +import { EngineContext } from "~/contexts/EngineContext"; +import { ArtStyle } from "~/pages/PageEnigma/js/api_manager"; +import { faAngleLeft, faAngleRight } from "@fortawesome/pro-solid-svg-icons"; +import { styleList } from "~/pages/PageEnigma/styleList"; + +export const StyleSelection = () => { + const [selection, setSelection] = useState(styleList[0].type); + const [scrollPosition, setScrollPosition] = useState(0); + + const editorEngine = useContext(EngineContext); + + const handlePickingStylizer = (picked: ArtStyle) => { + console.log(`Picked style: ${picked}`); + setSelection(picked); + if (editorEngine === null) { + console.log("Editor is null"); + return; + } + editorEngine.art_style = 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 onChangeHandlerPositive = ( + e: React.ChangeEvent, + ) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.positive_prompt = e.target.value; + console.log(e.target.value); + }; + + return ( +
+
+ +
+
+ {styleList.map((style) => ( + + ))} +
+ {scrollPosition > 0 && ( +
+ + setScrollPosition(Math.max(scrollPosition - 6, 0)) + } + /> +
+ )} + {scrollPosition < styleList.length - 9 && ( +
+ + setScrollPosition( + Math.min(scrollPosition + 6, styleList.length - 9), + ) + } + fill + /> +
+ )} +
+
+ +
+