weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ui修改

feature/handleReconstruction
Luckyu_js 1 day ago
parent
27354e9848
commit
c774bc0f6d
3 changed files with 20 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      src/components/media/MediaAnnotationToolbar.tsx
  2. 17
      src/components/media/MediaInpaintingToolbar.tsx
  3. 6
      src/components/nodes/NodeActionCapsule.tsx

15
src/components/media/MediaAnnotationToolbar.tsx
View File

@ -81,11 +81,12 @@ export function MediaAnnotationToolbar({
left: centerX,
top: frameRect.top,
transform: "translate(-50%, calc(-100% - 10px))",
maxWidth: `min(${Math.max(frameRect.width, 360)}px, calc(100vw - 32px))`,
width: "max-content",
maxWidth: "calc(100vw - 32px)",
} as CSSProperties;
const toolButtonClass = (active: boolean) =>
`!h-9 !w-9 !rounded-md ${active ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`;
`!h-9 !w-9 !shrink-0 !rounded-md ${active ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`;
const colorPopover = (
<div className="flex w-[168px] flex-wrap gap-2 p-1">
@ -124,7 +125,7 @@ export function MediaAnnotationToolbar({
return (
<div
className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-1.5 overflow-visible rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-1.5 overflow-x-auto overflow-y-visible whitespace-nowrap rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
style={topToolbarStyle}
>
<button
@ -178,16 +179,16 @@ export function MediaAnnotationToolbar({
<div className="mx-1 h-6 w-px shrink-0 bg-[var(--border-subtle)]" />
<Tooltip title="删除选中">
<Button type="text" icon={<DeleteOutlined />} disabled={busy || !hasSelection} onClick={onDeleteSelected} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<DeleteOutlined />} disabled={busy || !hasSelection} onClick={onDeleteSelected} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
<Tooltip title="撤销">
<Button type="text" icon={<UndoOutlined />} disabled={busy || !canUndo} onClick={onUndo} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<UndoOutlined />} disabled={busy || !canUndo} onClick={onUndo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
<Tooltip title="重做">
<Button type="text" icon={<RedoOutlined />} disabled={busy || !canRedo} onClick={onRedo} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<RedoOutlined />} disabled={busy || !canRedo} onClick={onRedo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
<Tooltip title="清空">
<Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
<div className="mx-1 h-6 w-px shrink-0 bg-[var(--border-subtle)]" />

17
src/components/media/MediaInpaintingToolbar.tsx
View File

@ -70,7 +70,8 @@ export function MediaInpaintingToolbar({
left: centerX,
top: frameRect.top,
transform: "translate(-50%, calc(-100% - 10px))",
maxWidth: `min(${Math.max(frameRect.width, 320)}px, calc(100vw - 32px))`,
width: "max-content",
maxWidth: "calc(100vw - 32px)",
} as CSSProperties;
const bottomToolbarStyle = {
left: centerX,
@ -82,7 +83,7 @@ export function MediaInpaintingToolbar({
return (
<>
<div
className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-2 overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
className="nodrag nopan nowheel absolute z-[10005] flex items-center gap-2 overflow-x-auto overflow-y-visible whitespace-nowrap rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-2)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-[var(--shadow-panel)]"
style={topToolbarStyle}
>
<button
@ -106,7 +107,7 @@ export function MediaInpaintingToolbar({
}}
aria-label="画笔"
title="画笔"
className={`!h-9 !w-9 !rounded-md ${!eraseMode && drawTool === "brush" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
className={`!h-9 !w-9 !shrink-0 !rounded-md ${!eraseMode && drawTool === "brush" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
/>
<Button
type="text"
@ -118,7 +119,7 @@ export function MediaInpaintingToolbar({
}}
aria-label="矩形选区"
title="矩形选区"
className={`!h-9 !w-9 !rounded-md ${!eraseMode && drawTool === "rectangle" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
className={`!h-9 !w-9 !shrink-0 !rounded-md ${!eraseMode && drawTool === "rectangle" ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
/>
<Button
type="text"
@ -126,7 +127,7 @@ export function MediaInpaintingToolbar({
onClick={() => onEraseModeChange(true)}
aria-label="橡皮"
title="橡皮"
className={`!h-9 !w-9 !rounded-md ${eraseMode ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
className={`!h-9 !w-9 !shrink-0 !rounded-md ${eraseMode ? "!bg-[var(--surface-hover)] !text-[var(--text-primary)]" : "!text-[var(--text-secondary)]"}`}
>
<span className="inline-block h-3.5 w-3.5 rotate-45 rounded-[2px] border border-current" />
</Button>
@ -146,13 +147,13 @@ export function MediaInpaintingToolbar({
/>
</div>
<Tooltip title="撤销">
<Button type="text" icon={<UndoOutlined />} disabled={busy} onClick={onUndo} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<UndoOutlined />} disabled={busy} onClick={onUndo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
<Tooltip title="重做">
<Button type="text" icon={<RedoOutlined />} disabled={busy} onClick={onRedo} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<RedoOutlined />} disabled={busy} onClick={onRedo} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
<Tooltip title="清空">
<Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !rounded-md" />
<Button type="text" icon={<ClearOutlined />} disabled={busy} onClick={onClear} className="!h-9 !w-9 !shrink-0 !rounded-md" />
</Tooltip>
</div>
<div

6
src/components/nodes/NodeActionCapsule.tsx
View File

@ -94,7 +94,7 @@ export function NodeActionCapsule({
const isDisabled = action.disabled;
const buttonClassName = [
"flex h-10 items-center justify-center rounded-md transition-colors",
"flex h-10 shrink-0 items-center justify-center rounded-md transition-colors",
action.text ? "gap-1.5 whitespace-nowrap px-3 text-sm" : "px-2",
isOpen ? "bg-[var(--surface-hover)] text-[var(--text-primary)]" : "",
isDisabled ? "cursor-not-allowed opacity-60" : "",
@ -127,7 +127,7 @@ export function NodeActionCapsule({
);
return (
<div key={action.key} className="relative">
<div key={action.key} className="relative shrink-0">
{action.dropdown ? (
<Dropdown
trigger={["hover"]}
@ -159,7 +159,7 @@ export function NodeActionCapsule({
return (
<NodeActionCapsuleShell ref={capsuleRef} topClassName={topClassName} onMouseDown={onMouseDown}>
{sections.map((section, sectionIndex) => (
<div key={sectionIndex} className="flex items-center gap-2">
<div key={sectionIndex} className="flex shrink-0 items-center gap-2">
{sectionIndex > 0 ? (
<div
className="mx-1 h-7 w-px bg-[var(--border-subtle)]"

Write Preview
Loading…
Cancel
Save