Fix LibTV composer overlay scale
This commit is contained in:
Your Name
parent
0c12132bb4
commit
d8517449ac
@ -328,6 +328,11 @@ const CANVAS_EXTENT = 20000;
|
||||
const OFFICIAL_NODE_GAP = 100;
|
||||
const OFFICIAL_TEXT_RESOURCE_HEIGHT = 232;
|
||||
const OFFICIAL_TEXT_RESOURCE_WIDTH = 350;
|
||||
const OFFICIAL_IMAGE_TOOLBAR_SCALE = 0.7;
|
||||
const OFFICIAL_COMPOSER_SCALE = 0.47;
|
||||
const PROMPT_COMPOSER_BASE_WIDTH = 895;
|
||||
const PROMPT_COMPOSER_BASE_HEIGHT = 286;
|
||||
const PRESET_COMPOSER_BASE_HEIGHT = 238;
|
||||
|
||||
const TARGET_AVATAR =
|
||||
"https://liblibai-online.liblib.cloud/web/1656e2f1b3c74f1ba823b610f1b2cbdf/0c3eb5e2-1dc0-405c-a823-07b2570237f8.jpg?x-oss-process=image/resize,w_100,m_lfit/format,webp";
|
||||
@ -3154,15 +3159,24 @@ function CharacterPresetToolbar({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-auto absolute flex h-[58px] items-center gap-5 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]",
|
||||
anchor
|
||||
? "origin-bottom -translate-x-1/2 -translate-y-full scale-[0.7]"
|
||||
: "left-1/2 top-[168px] origin-top -translate-x-1/2 scale-[0.7]"
|
||||
)}
|
||||
style={anchor ? { left: anchor.centerX, top: anchor.topY - (24 * anchor.zoom + 10) } : undefined}
|
||||
>
|
||||
<div
|
||||
className="pointer-events-auto absolute flex h-[58px] items-center gap-5 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
|
||||
style={
|
||||
anchor
|
||||
? {
|
||||
left: anchor.centerX,
|
||||
top: anchor.topY - (24 * anchor.zoom + 10),
|
||||
transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
|
||||
transformOrigin: "bottom center",
|
||||
}
|
||||
: {
|
||||
left: "50%",
|
||||
top: 168,
|
||||
transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
|
||||
transformOrigin: "top center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<SceneTool active={toolbarMenu === "panorama"} kind="panorama" label="全景" badge="NEW" onClick={() => setToolbarMenu((current) => current === "panorama" ? null : "panorama")} />
|
||||
<SceneTool active={toolbarMenu === "orbit"} kind="orbit" label="多角度" onClick={() => setToolbarMenu((current) => current === "orbit" ? null : "orbit")} />
|
||||
<SceneTool active={toolbarMenu === "lighting"} kind="lighting" label="打光" onClick={() => setToolbarMenu((current) => current === "lighting" ? null : "lighting")} />
|
||||
@ -3287,16 +3301,20 @@ function PresetFloatingToolbar({
|
||||
anchor?: PresetControlAnchor;
|
||||
items: Array<[string, string]>;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-auto absolute flex h-[58px] items-center gap-2 rounded-[16px] border border-white/8 bg-[#262626]/96 px-4 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]",
|
||||
anchor
|
||||
? "origin-bottom -translate-x-1/2 -translate-y-full scale-[0.7]"
|
||||
: "left-1/2 top-[94px] -translate-x-1/2"
|
||||
)}
|
||||
style={anchor ? { left: anchor.centerX, top: anchor.topY - 14 } : undefined}
|
||||
>
|
||||
return (
|
||||
<div
|
||||
className="pointer-events-auto absolute flex h-[58px] items-center gap-2 rounded-[16px] border border-white/8 bg-[#262626]/96 px-4 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
|
||||
style={
|
||||
anchor
|
||||
? {
|
||||
left: anchor.centerX,
|
||||
top: anchor.topY - (24 * anchor.zoom + 10),
|
||||
transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
|
||||
transformOrigin: "bottom center",
|
||||
}
|
||||
: { left: "50%", top: 94, transform: "translateX(-50%)" }
|
||||
}
|
||||
>
|
||||
{items.map(([label, message]) => (
|
||||
<button
|
||||
className="flex h-10 items-center gap-2 rounded-[10px] px-3 text-[15px] hover:bg-white/8 hover:text-white"
|
||||
@ -3510,48 +3528,64 @@ function PresetComposerPanel({
|
||||
setDraftPrompt(prompt);
|
||||
}, [prompt]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-auto absolute h-[238px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]",
|
||||
anchor
|
||||
? "origin-top -translate-x-1/2 scale-[0.47]"
|
||||
: "bottom-[64px] left-1/2 origin-bottom -translate-x-1/2 scale-[0.47]"
|
||||
)}
|
||||
style={anchor ? { left: anchor.centerX, top: anchor.bottomY + 10 } : undefined}
|
||||
>
|
||||
<button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
|
||||
<div className="mb-5 flex items-center gap-3">
|
||||
<span className="rounded-[10px] border border-white/10 bg-[#292929] px-3 py-2 text-[14px] text-white/62">{title}</span>
|
||||
{thumbnailUrl ? (
|
||||
<div className="h-[54px] w-[54px] overflow-hidden rounded-[10px]">
|
||||
<img alt="" className="h-full w-full object-cover" src={thumbnailUrl} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<textarea
|
||||
className="h-[78px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/38"
|
||||
onChange={(event) => setDraftPrompt(event.target.value)}
|
||||
placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
|
||||
value={draftPrompt}
|
||||
/>
|
||||
<div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[17px] text-white/78">
|
||||
<ComposerControl label="Lib Nano Pro" icon="◉" dropdown onClick={() => toast.info("模型选择接口待接入。")} />
|
||||
<ComposerControl label="16:9" icon="▭" dropdown onClick={() => toast.info("比例选择接口待接入。")} />
|
||||
<ComposerControl label="2K" dropdown onClick={() => toast.info("清晰度选择接口待接入。")} />
|
||||
<ComposerControl label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
|
||||
<ComposerControl label="1张" dropdown onClick={() => toast.info("生成数量接口待接入。")} />
|
||||
<ComposerControl label={credit} icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
|
||||
<button
|
||||
className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
|
||||
onClick={() => toast.info(submitMessage)}
|
||||
type="button"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className="pointer-events-auto absolute overflow-visible"
|
||||
style={
|
||||
anchor
|
||||
? {
|
||||
height: PRESET_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
|
||||
left: anchor.centerX,
|
||||
top: anchor.bottomY + 10,
|
||||
transform: "translateX(-50%)",
|
||||
width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
|
||||
}
|
||||
: {
|
||||
bottom: 64,
|
||||
height: PRESET_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="relative h-[238px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]"
|
||||
style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
|
||||
>
|
||||
<button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
|
||||
<div className="mb-5 flex items-center gap-3">
|
||||
<span className="rounded-[10px] border border-white/10 bg-[#292929] px-3 py-2 text-[14px] text-white/62">{title}</span>
|
||||
{thumbnailUrl ? (
|
||||
<div className="h-[54px] w-[54px] overflow-hidden rounded-[10px]">
|
||||
<img alt="" className="h-full w-full object-cover" src={thumbnailUrl} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<textarea
|
||||
className="h-[78px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/38"
|
||||
onChange={(event) => setDraftPrompt(event.target.value)}
|
||||
placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
|
||||
value={draftPrompt}
|
||||
/>
|
||||
<div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[17px] text-white/78">
|
||||
<ComposerControl label="Lib Nano Pro" icon="◉" dropdown onClick={() => toast.info("模型选择接口待接入。")} />
|
||||
<ComposerControl label="16:9" icon="▭" dropdown onClick={() => toast.info("比例选择接口待接入。")} />
|
||||
<ComposerControl label="2K" dropdown onClick={() => toast.info("清晰度选择接口待接入。")} />
|
||||
<ComposerControl label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
|
||||
<ComposerControl label="1张" dropdown onClick={() => toast.info("生成数量接口待接入。")} />
|
||||
<ComposerControl label={credit} icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
|
||||
<button
|
||||
className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
|
||||
onClick={() => toast.info(submitMessage)}
|
||||
type="button"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CharacterThreeViewScene() {
|
||||
@ -3848,14 +3882,29 @@ function PromptComposer({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"pointer-events-auto absolute h-[286px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]",
|
||||
className="pointer-events-auto absolute overflow-visible"
|
||||
style={
|
||||
anchor
|
||||
? "origin-top -translate-x-1/2 scale-[0.47]"
|
||||
: "bottom-[64px] left-1/2 origin-bottom -translate-x-1/2 scale-[0.47]"
|
||||
)}
|
||||
style={anchor ? { left: anchor.centerX, top: anchor.bottomY + 10 } : undefined}
|
||||
? {
|
||||
height: PROMPT_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
|
||||
left: anchor.centerX,
|
||||
top: anchor.bottomY + 10,
|
||||
transform: "translateX(-50%)",
|
||||
width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
|
||||
}
|
||||
: {
|
||||
bottom: 64,
|
||||
height: PROMPT_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="relative h-[286px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]"
|
||||
style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
|
||||
>
|
||||
<button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
|
||||
<div className="flex items-center gap-3">
|
||||
{[
|
||||
@ -3926,32 +3975,33 @@ function PromptComposer({
|
||||
value={prompt}
|
||||
/>
|
||||
|
||||
<div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[18px] text-white/78">
|
||||
<ComposerControl active={menu === "model"} label={settings.model} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
|
||||
<ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
|
||||
<ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
|
||||
<ComposerControl active={menu === "camera"} label={settings.camera} icon="▣" onClick={() => setMenu((current) => current === "camera" ? null : "camera")} />
|
||||
<ComposerControl active={menu === "panorama"} label={settings.panorama} icon="♫" onClick={() => setMenu((current) => current === "panorama" ? null : "panorama")} />
|
||||
<ComposerControl active={menu === "translate"} label="文" onClick={() => setMenu((current) => current === "translate" ? null : "translate")} />
|
||||
<ComposerControl active={menu === "settings"} label="" icon="⌘" onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
|
||||
<ComposerControl active={menu === "count"} label={settings.count} dropdown onClick={() => setMenu((current) => current === "count" ? null : "count")} />
|
||||
<ComposerControl label="14" icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
|
||||
<button
|
||||
className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
|
||||
onClick={() =>
|
||||
onSubmit
|
||||
? onSubmit({
|
||||
prompt,
|
||||
references,
|
||||
settings,
|
||||
slashScene,
|
||||
})
|
||||
: toast.info("角色三视图生成接口待接入。")
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<div className="absolute bottom-5 left-5 right-5 flex items-center gap-6 text-[18px] text-white/78">
|
||||
<ComposerControl active={menu === "model"} label={settings.model} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
|
||||
<ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
|
||||
<ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
|
||||
<ComposerControl active={menu === "camera"} label={settings.camera} icon="▣" onClick={() => setMenu((current) => current === "camera" ? null : "camera")} />
|
||||
<ComposerControl active={menu === "panorama"} label={settings.panorama} icon="♫" onClick={() => setMenu((current) => current === "panorama" ? null : "panorama")} />
|
||||
<ComposerControl active={menu === "translate"} label="文" onClick={() => setMenu((current) => current === "translate" ? null : "translate")} />
|
||||
<ComposerControl active={menu === "settings"} label="" icon="⌘" onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
|
||||
<ComposerControl active={menu === "count"} label={settings.count} dropdown onClick={() => setMenu((current) => current === "count" ? null : "count")} />
|
||||
<ComposerControl label="14" icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
|
||||
<button
|
||||
className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
|
||||
onClick={() =>
|
||||
onSubmit
|
||||
? onSubmit({
|
||||
prompt,
|
||||
references,
|
||||
settings,
|
||||
slashScene,
|
||||
})
|
||||
: toast.info("角色三视图生成接口待接入。")
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user