mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-06 10:11:31 +00:00
refactor
This commit is contained in:
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";
|
||||
+3
-3
@@ -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(
|
||||
|
||||
Reference in new issue
Block a user