GenarrativeAI/Genarrative
11
0
Fork 0
Code Issues 14 Pull Requests 3 Actions Packages Projects 3 Releases Wiki Activity

优化 SpriteBorder 编辑器样式

Browse Source 
新增边框dragger
This commit is contained in:
王德宇
2026-08-13 15:53:58 +08:00
parent 09eb9ee202
commit 66881c8e9f
2 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderEditor.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export function SpriteBorderEditor({
const preset111 = spriteBorderRatioPreset(pixelSize, 1);
return (
<section className="overflow-hidden rounded-xl border border-(--platform-subpanel-border) bg-white/35">
<section className="overflow-visible rounded-xl border border-(--platform-subpanel-border) bg-white/35">
<button
type="button"
className="flex h-10 w-full items-center justify-between px-3 text-left text-xs font-semibold"
apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/SpriteBorder/SpriteBorderGuideEditor.tsx
+26 -2
View File
@@ -96,10 +96,10 @@ export function SpriteBorderGuideEditor({
}
return (
<div className="grid max-h-[220px] place-items-center overflow-hidden rounded-lg bg-[linear-gradient(45deg,#eee_25%,transparent_25%),linear-gradient(-45deg,#eee_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eee_75%),linear-gradient(-45deg,transparent_75%,#eee_75%)] bg-[length:14px_14px] p-2">
<div className="grid max-h-[220px] place-items-center overflow-visible rounded-lg bg-[linear-gradient(45deg,#eee_25%,transparent_25%),linear-gradient(-45deg,#eee_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#eee_75%),linear-gradient(-45deg,transparent_75%,#eee_75%)] bg-[length:14px_14px] p-2">
<div
ref={previewRef}
className="relative inline-flex max-h-[204px] max-w-full touch-none select-none overflow-hidden"
className="relative inline-flex max-h-[204px] max-w-full touch-none select-none overflow-visible"
>
<img
src={previewUrl}
@@ -202,6 +202,30 @@ function GuideHandle({
style={style}
{...events}
>
<span
aria-hidden="true"
className={`absolute z-10 flex items-center justify-center rounded border border-orange-500/45 bg-white/95 text-[11px] font-semibold leading-none text-orange-600 shadow-sm ${
vertical
? 'top-1/2 h-4 w-4 -translate-y-1/2'
: 'left-1/2 h-4 w-5 -translate-x-1/2'
} ${
side === 'left'
? 'right-full mr-1'
: side === 'right'
? 'left-full ml-1'
: side === 'top'
? 'bottom-full mb-1'
: 'top-full mt-1'
}`}
>
{side === 'left'
? '→'
: side === 'right'
? '←'
: side === 'top'
? '↓'
: '↑'}
</span>
{active ? (
<span className="pointer-events-none absolute top-1 left-1 rounded bg-orange-600 px-1 py-0.5 text-[9px] whitespace-nowrap text-white">
{side.slice(0, 1).toUpperCase()} {value}