From 7bd8e385f604cd7e26c32e5201004d0cd0f115ba Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Thu, 18 Apr 2024 21:26:28 -0400 Subject: [PATCH 01/19] Move styling to tab from page --- app/pages/PageEnigma/PageEditor.tsx | 13 +- app/pages/PageEnigma/PageEnigmaComponent.tsx | 16 +-- app/pages/PageEnigma/PageStyling.tsx | 100 ------------- .../comps/Controls3D/Controls3D.tsx | 22 +-- .../comps/SidePanelTabs/comps/TabTitle.tsx | 34 +++++ .../itemTabs/StylizeTab/ItemPicker.tsx | 56 ++++++++ .../itemTabs/StylizeTab/Prompts.tsx | 88 ++++++++++++ .../itemTabs/StylizeTab/StyleButtons.tsx | 47 +++++++ .../itemTabs/StylizeTab/StyleSelection.tsx | 133 ++++++++++++++++++ .../itemTabs/StylizeTab/StylizeTab.tsx | 21 +++ .../comps/SidePanelTabs/tabList.tsx | 8 +- app/pages/PageEnigma/constants/RandomTexts.ts | 86 +++++++++++ app/pages/PageEnigma/js/editor.ts | 57 ++++---- app/pages/PageEnigma/styleList.ts | 32 ++--- .../placeholders/style-placeholder.png | Bin 0 -> 1408 bytes 15 files changed, 529 insertions(+), 184 deletions(-) delete mode 100644 app/pages/PageEnigma/PageStyling.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleButtons.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StyleSelection.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/StylizeTab.tsx create mode 100644 app/pages/PageEnigma/constants/RandomTexts.ts create mode 100644 public/resources/placeholders/style-placeholder.png diff --git a/app/pages/PageEnigma/PageEditor.tsx b/app/pages/PageEnigma/PageEditor.tsx index de45827031..162c59965d 100644 --- a/app/pages/PageEnigma/PageEditor.tsx +++ b/app/pages/PageEnigma/PageEditor.tsx @@ -24,13 +24,8 @@ import { AppUiContext } from "~/contexts/AppUiContext"; import { pageHeight, pageWidth } from "~/store"; import { TopBar } from "~/modules/TopBar"; import { DialogueTTS } from "./comps/DialogueTTS/DialogueTTS"; -import { Pages } from "~/pages/PageEnigma/constants/page"; -interface Props { - setPage: (page: Pages) => void; -} - -export const PageEditor = ({ setPage }: Props) => { +export const PageEditor = () => { useSignals(); const [appUiState] = useContext(AppUiContext); @@ -45,8 +40,8 @@ export const PageEditor = ({ setPage }: Props) => { ? dndSidePanelWidth.value : sidePanelWidth.value; const width = sidePanelVisible.value - ? pageWidth.value - dndWidth - 66 - : pageWidth.value - 66; + ? pageWidth.value - dndWidth - 84 + : pageWidth.value - 84; const height = dndTimelineHeight.value > -1 ? pageHeight.value - dndTimelineHeight.value - 68 @@ -81,7 +76,7 @@ export const PageEditor = ({ setPage }: Props) => { onClick={handleOverlayClick}>
- +
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index a106f7bc20..2b7a176da7 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -1,16 +1,13 @@ -import { useContext, useEffect, useState } from "react"; +import { useContext, useEffect } from "react"; import { AppUiContext } from "~/contexts/AppUiContext"; import { EngineContext } from "~/contexts/EngineContext"; import { PageEditor } from "~/pages/PageEnigma/PageEditor"; -import { PageStyling } from "~/pages/PageEnigma/PageStyling"; import { useParams } from "@remix-run/react"; -import { Pages } from "~/pages/PageEnigma/constants/page"; export const PageEnigmaComponent = () => { const [, dispatchAppUiState] = useContext(AppUiContext); const editor = useContext(EngineContext); - const [page, setPage] = useState(Pages.EDIT); const params = useParams(); useEffect(() => { @@ -26,14 +23,5 @@ export const PageEnigmaComponent = () => { } }, [editor, dispatchAppUiState, params]); - return ( - <> -
- -
-
- -
- - ); + return ; }; diff --git a/app/pages/PageEnigma/PageStyling.tsx b/app/pages/PageEnigma/PageStyling.tsx deleted file mode 100644 index 136af34944..0000000000 --- a/app/pages/PageEnigma/PageStyling.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useSignals } from "@preact/signals-react/runtime"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faAngleLeft, - faArrowsRotate, - faFilm, -} from "@fortawesome/pro-solid-svg-icons"; -import { Button } from "~/components"; -import { StyleSelection } from "~/pages/PageEnigma/comps/StyleSelection"; -import { TimerGrid } from "~/pages/PageEnigma/comps/Timeline/TimerGrid"; -import { Scrubber } from "~/pages/PageEnigma/comps/Timeline/Scrubber"; -import { PreviewImages } from "~/pages/PageEnigma/comps/PreviewImages"; -import { TopBar } from "~/modules/TopBar"; -import { UIEvent, useCallback, useContext } from "react"; -import { EngineContext } from "~/contexts/EngineContext"; -import { filmLength, scale, stylizeScrollX } from "~/pages/PageEnigma/store"; -import { pageWidth } from "~/store"; -import useTimelineClick from "~/pages/PageEnigma/comps/Timeline/utils/useTimelineClick"; -import { Pages } from "~/pages/PageEnigma/constants/page"; - -interface Props { - setPage: (page: Pages) => 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(Pages.EDIT); - }; - - const onScroll = useCallback((event: UIEvent) => { - stylizeScrollX.value = event.currentTarget.scrollLeft; - }, []); - - const onTimelineClick = useTimelineClick(Pages.STYLE); - - return ( -
- -
-
- -
-
-
- -
- -
- - -
-
-
-
- -
-
-
-
- -
-
-
-
-
- ); -}; diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx index a81e8be050..2869a98b94 100644 --- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx +++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx @@ -1,20 +1,13 @@ import { - faAngleRight, faArrowsRotate, faArrowsUpDownLeftRight, faUpRightAndDownLeftFromCenter, } from "@fortawesome/pro-solid-svg-icons"; -import { Button, ButtonIconSelect } from "~/components"; +import { ButtonIconSelect } from "~/components"; import { EngineContext } from "~/contexts/EngineContext"; import { useContext } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Pages } from "~/pages/PageEnigma/constants/page"; -interface Props { - setPage: (page: Pages) => void; -} - -export const Controls3D = ({ setPage }: Props) => { +export const Controls3D = () => { const editorEngine = useContext(EngineContext); const handleMoveArrows = () => { @@ -52,11 +45,6 @@ export const Controls3D = ({ setPage }: Props) => { } }; - const changeStylize = () => { - editorEngine?.switchPreview(); - setPage(Pages.STYLE); - }; - const modes = [ { value: "move", icon: faArrowsUpDownLeftRight }, { value: "rotate", icon: faArrowsRotate }, @@ -72,12 +60,6 @@ export const Controls3D = ({ setPage }: Props) => { options={modes} onOptionChange={handleModeChange} /> - - - -
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle.tsx new file mode 100644 index 0000000000..eda5831cba --- /dev/null +++ b/app/pages/PageEnigma/comps/SidePanelTabs/comps/TabTitle.tsx @@ -0,0 +1,34 @@ +import { faAngleLeft, faClose } from "@fortawesome/pro-solid-svg-icons"; +import { ButtonIcon } from "~/components"; +import { + lastSelectedTab, + selectedTab, + sidePanelVisible, +} from "~/pages/PageEnigma/store"; + +interface Props { + title: string; + onBack?: () => void; +} + +export function TabTitle({ title, onBack }: Props) { + const onClose = () => { + lastSelectedTab.value = selectedTab.value; + selectedTab.value = null; + sidePanelVisible.value = false; + }; + + return ( +
+ {onBack ? ( +
+ +
{title}
+
+ ) : ( +
{title}
+ )} + +
+ ); +} diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx new file mode 100644 index 0000000000..b57b6f1b30 --- /dev/null +++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/ItemPicker.tsx @@ -0,0 +1,56 @@ +import { twMerge } from "tailwind-merge"; +import { ArtStyle } from "~/pages/PageEnigma/js/api_manager"; +import { H4 } from "~/components"; +import { ImgHTMLAttributes } from "react"; + +interface ItemPickerProps extends ImgHTMLAttributes { + label: string; + type: ArtStyle; + selected: boolean; + onSelected: (picked: ArtStyle) => void; +} + +export const ItemPicker = ({ + label, + type, + selected = false, + onSelected, + width, + height, + ...imgProps +}: ItemPickerProps) => { + const handleSelected = () => { + onSelected(type); + }; + + return ( + + ); +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx new file mode 100644 index 0000000000..9e43ed1681 --- /dev/null +++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx @@ -0,0 +1,88 @@ +import { ChangeEvent, useContext, useState } from "react"; + +import { Textarea } from "~/components"; + +import { EngineContext } from "~/contexts/EngineContext"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faRandom } from "@fortawesome/pro-solid-svg-icons"; +import { RandomTexts } from "~/pages/PageEnigma/constants/RandomTexts"; + +export const Prompts = () => { + const editorEngine = useContext(EngineContext); + const [textBufferPositive, setTextBufferPositive] = useState(""); + const [textBufferNegative, setTextBufferNegative] = useState(""); + + const onChangeHandlerNegative = (event: ChangeEvent) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.negative_prompt = event.target.value; + setTextBufferNegative(event.target.value); + }; + + const onChangeHandlerPositive = (event: ChangeEvent) => { + if (editorEngine == null) { + console.log("Editor is null"); + return; + } + editorEngine.positive_prompt = event.target.value; + setTextBufferPositive(event.target.value); + }; + + const generateRandomTextPositive = () => { + const randomIndex = Math.floor(Math.random() * RandomTexts.length); + const randomText = RandomTexts[randomIndex]; + setTextBufferPositive(randomText); + }; + + const generateRandomTextNegative = () => { + const randomIndex = Math.floor(Math.random() * RandomTexts.length); + const randomText = RandomTexts[randomIndex]; + setTextBufferNegative(randomText); + }; + + return ( +
+
+