This commit is contained in:
Brandon Thomas committed 2025-08-20 00:23:59 -04:00
1 parent 87d403fe6d
commit 8dde1ef004
9 files changed
+29 -29

No files matched your search

@@ -14,7 +14,7 @@ import { ContextMenuContainer } from "./components/ui/ContextMenu";
import { ModelInfo } from "@storyteller/model-list";
import {
CANVAS_2D_PAGE_MODEL_LIST,
ModelCategory,
ModelPage,
ModelSelector,
useModelSelectorStore,
} from "@storyteller/ui-model-selector";
@@ -55,7 +55,7 @@ const PageDraw = () => {
const store = useSceneStore();
const selectedModel =
selectedModels[ModelCategory.Canvas2D] ||
selectedModels[ModelPage.Canvas2D] ||
CANVAS_2D_PAGE_MODEL_LIST[0]?.label;
const selectedModelInfo: ModelInfo | undefined =
@@ -446,7 +446,7 @@ const PageDraw = () => {
<div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
<ModelSelector
items={CANVAS_2D_PAGE_MODEL_LIST}
category={ModelCategory.Canvas2D}
page={ModelPage.Canvas2D}
panelTitle="Select Model"
panelClassName="min-w-[280px]"
buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"
@@ -14,7 +14,7 @@ import { EditPaintSurface } from "./EditPaintSurface";
import { normalizeCanvas } from "../../Helpers/CanvasHelpers";
import { BaseImageSelector, BaseSelectorImage } from "./BaseImageSelector";
import DrawToolControlBar from "./DrawToolControlBar";
import { IMAGE_EDITOR_PAGE_MODEL_LIST, ModelCategory, ModelSelector, useModelSelectorStore } from "@storyteller/ui-model-selector";
import { IMAGE_EDITOR_PAGE_MODEL_LIST, ModelPage, ModelSelector, useModelSelectorStore } from "@storyteller/ui-model-selector";
import { ModelInfo } from "@storyteller/model-list";
const PageEdit = () => {
@@ -22,7 +22,7 @@ const PageEdit = () => {
const { selectedModels } = useModelSelectorStore();
const selectedModel =
selectedModels[ModelCategory.Canvas2D] ||
selectedModels[ModelPage.Canvas2D] ||
IMAGE_EDITOR_PAGE_MODEL_LIST[0]?.label;
const selectedModelInfo: ModelInfo | undefined =
@@ -314,7 +314,7 @@ const PageEdit = () => {
<div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
<ModelSelector
items={IMAGE_EDITOR_PAGE_MODEL_LIST}
category={ModelCategory.ImageEditor}
page={ModelPage.ImageEditor}
panelTitle="Select Model"
panelClassName="min-w-[280px]"
buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"
@@ -67,7 +67,7 @@ import {
} from "@storyteller/ui-gallery-modal";
import {
STAGE_3D_PAGE_MODEL_LIST,
ModelCategory,
ModelPage,
ModelSelector,
useModelSelectorStore,
} from "@storyteller/ui-model-selector";
@@ -109,7 +109,7 @@ export const PageEditor = () => {
}, []);
const selectedModel =
selectedModels[ModelCategory.Editor3D] ||
selectedModels[ModelPage.Stage3D] ||
STAGE_3D_PAGE_MODEL_LIST[0]?.label;
const selectedModelInfo: ModelInfo | undefined =
@@ -548,7 +548,7 @@ export const PageEditor = () => {
<div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
<ModelSelector
items={STAGE_3D_PAGE_MODEL_LIST}
category={ModelCategory.Editor3D}
page={ModelPage.Stage3D}
panelTitle="Select Model"
panelClassName="min-w-[280px]"
buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"
@@ -4,7 +4,7 @@ import { PromptBoxImage } from "@storyteller/ui-promptbox";
import BackgroundGallery from "./BackgroundGallery";
import {
TEXT_TO_IMAGE_PAGE_MODEL_LIST,
ModelCategory,
ModelPage,
ModelSelector,
useModelSelectorStore,
} from "@storyteller/ui-model-selector";
@@ -20,7 +20,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
const { selectedModels } = useModelSelectorStore();
const selectedModel =
selectedModels[ModelCategory.TextToImage] ||
selectedModels[ModelPage.TextToImage] ||
TEXT_TO_IMAGE_PAGE_MODEL_LIST[0]?.label;
const selectedModelInfo: ModelInfo | undefined = TEXT_TO_IMAGE_PAGE_MODEL_LIST.find(
@@ -67,7 +67,7 @@ const TextToImage = ({ imageMediaId, imageUrl }: TextToImageProps) => {
<div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
<ModelSelector
items={TEXT_TO_IMAGE_PAGE_MODEL_LIST}
category={ModelCategory.TextToImage}
page={ModelPage.TextToImage}
mode="hoverSelect"
panelTitle="Select Model"
panelClassName="min-w-[280px]"
@@ -3,7 +3,7 @@ import { JobContextType } from "@storyteller/common";
import { PromptBoxVideo } from "@storyteller/ui-promptbox";
import BackgroundGallery from "./BackgroundGallery";
import {
ModelCategory,
ModelPage,
ModelSelector,
useModelSelectorStore,
IMAGE_TO_VIDEO_PAGE_MODEL_LIST,
@@ -20,7 +20,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
const { selectedModels } = useModelSelectorStore();
const selectedModel =
selectedModels[ModelCategory.ImageToVideo] ||
selectedModels[ModelPage.ImageToVideo] ||
IMAGE_TO_VIDEO_PAGE_MODEL_LIST[0]?.label;
const selectedModelInfo: ModelInfo | undefined = IMAGE_TO_VIDEO_PAGE_MODEL_LIST.find(
@@ -68,7 +68,7 @@ const ImageToVideo = ({ imageMediaId, imageUrl }: ImageToVideoProps) => {
<div className="absolute bottom-6 left-6 z-20 flex items-center gap-2">
<ModelSelector
items={IMAGE_TO_VIDEO_PAGE_MODEL_LIST}
category={ModelCategory.ImageToVideo}
page={ModelPage.ImageToVideo}
panelTitle="Select Model"
panelClassName="min-w-[280px]"
buttonClassName="bg-transparent p-0 text-lg hover:bg-transparent text-white/80 hover:text-white"
@@ -1,4 +1,4 @@
export * from "./lib/model-selector";
export * from "./lib/model-selector-store";
export * from "./lib/model-lists";
export * from "./lib/model-categories";
export * from "./lib/model-pages";
@@ -1,8 +1,8 @@
export enum ModelCategory {
export enum ModelPage {
TextToImage = "text-to-image",
ImageToVideo = "image-to-video",
Canvas2D = "2d-canvas",
Editor3D = "3d-editor",
Canvas2D = "canvas-2d",
Stage3D = "stage-3d",
// The "inpainting + outpainting + text" image editor
ImageEditor = "image-editor",
@@ -1,18 +1,18 @@
import { create } from "zustand";
import { ModelCategory } from "./model-categories";
import { ModelPage } from "./model-pages";
interface ModelSelectorState {
selectedModels: { [category in ModelCategory]?: string };
setSelectedModel: (category: ModelCategory, modelLabel: string) => void;
selectedModels: { [page in ModelPage]?: string };
setSelectedModel: (page: ModelPage, modelLabel: string) => void;
}
export const useModelSelectorStore = create<ModelSelectorState>((set) => ({
selectedModels: {},
setSelectedModel: (category, modelLabel) =>
setSelectedModel: (page, modelLabel) =>
set((state) => ({
selectedModels: {
...state.selectedModels,
[category]: modelLabel,
[page]: modelLabel,
},
})),
}));
@@ -1,11 +1,11 @@
import { PopoverMenu, type PopoverItem } from "@storyteller/ui-popover";
import { useModelSelectorStore } from "./model-selector-store";
import { useMemo } from "react";
import { ModelCategory } from "./model-categories";
import { ModelPage } from "./model-pages";
interface ModelSelectorProps {
items: Omit<PopoverItem, "selected">[];
category: ModelCategory;
page: ModelPage;
mode?: "hoverSelect" | "default" | "toggle" | "button";
panelTitle?: string;
buttonClassName?: string;
@@ -16,14 +16,14 @@ interface ModelSelectorProps {
export function ModelSelector({
items,
category,
page,
...popoverProps
}: ModelSelectorProps) {
const { selectedModels, setSelectedModel } = useModelSelectorStore();
const selectedModel = selectedModels[category] || items[0]?.label;
const selectedModel = selectedModels[page] || items[0]?.label;
const handleModelSelect = (item: PopoverItem) => {
setSelectedModel(category, item.label);
setSelectedModel(page, item.label);
};
const modelList = useMemo(