mlt131220/AstralView
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inspector: editable x/y/w/h

Browse Source
This commit is contained in:
clawdbot 2026-01-29 03:49:41 +08:00
parent efeb626efb
commit e4cca026a0
2 changed files with 86 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/editor/src/editor/EditorApp.tsx
View File

@ -502,14 +502,60 @@ export function EditorApp() {
<Typography.Text style={{ color: '#94a3b8', fontSize: 12 }}>尺寸</Typography.Text>
<Space size={8}>
<InputNumber size="small" value={selected?.rect.w ?? 0} controls={false} readOnly style={{ width: 120 }} />
<InputNumber size="small" value={selected?.rect.h ?? 0} controls={false} readOnly style={{ width: 120 }} />
<InputNumber
size="small"
value={selected?.rect.w ?? 0}
controls={false}
min={1}
disabled={!selected || selected.locked}
onChange={(v) => {
if (!selected) return;
if (typeof v !== 'number') return;
dispatch({ type: 'updateWidgetRect', id: selected.id, rect: { w: v } });
}}
style={{ width: 120 }}
/>
<InputNumber
size="small"
value={selected?.rect.h ?? 0}
controls={false}
min={1}
disabled={!selected || selected.locked}
onChange={(v) => {
if (!selected) return;
if (typeof v !== 'number') return;
dispatch({ type: 'updateWidgetRect', id: selected.id, rect: { h: v } });
}}
style={{ width: 120 }}
/>
</Space>
<Typography.Text style={{ color: '#94a3b8', fontSize: 12 }}>位置</Typography.Text>
<Space size={8}>
<InputNumber size="small" value={selected?.rect.x ?? 0} controls={false} readOnly style={{ width: 120 }} />
<InputNumber size="small" value={selected?.rect.y ?? 0} controls={false} readOnly style={{ width: 120 }} />
<InputNumber
size="small"
value={selected?.rect.x ?? 0}
controls={false}
disabled={!selected || selected.locked}
onChange={(v) => {
if (!selected) return;
if (typeof v !== 'number') return;
dispatch({ type: 'updateWidgetRect', id: selected.id, rect: { x: v } });
}}
style={{ width: 120 }}
/>
<InputNumber
size="small"
value={selected?.rect.y ?? 0}
controls={false}
disabled={!selected || selected.locked}
onChange={(v) => {
if (!selected) return;
if (typeof v !== 'number') return;
dispatch({ type: 'updateWidgetRect', id: selected.id, rect: { y: v } });
}}
style={{ width: 120 }}
/>
</Space>
</div>

36
packages/editor/src/editor/store.ts
View File

@ -67,6 +67,7 @@ export type EditorAction =
| { type: 'bringForwardSelected' }
| { type: 'sendBackwardSelected' }
| { type: 'sendToBackSelected' }
| { type: 'updateWidgetRect'; id: string; rect: Partial<Rect> }
| UpdateWidgetPropsAction;
interface DragSession {
@ -336,6 +337,41 @@ export function editorReducer(state: EditorRuntimeState, action: EditorAction):
};
}
case 'updateWidgetRect': {
const target = state.doc.screen.nodes.find((n) => n.id === action.id);
if (!target) return state;
if (target.locked) return state;
const next: Rect = {
x: typeof action.rect.x === 'number' ? action.rect.x : target.rect.x,
y: typeof action.rect.y === 'number' ? action.rect.y : target.rect.y,
w: typeof action.rect.w === 'number' ? action.rect.w : target.rect.w,
h: typeof action.rect.h === 'number' ? action.rect.h : target.rect.h,
};
const bounds = { w: state.doc.screen.width, h: state.doc.screen.height };
const rect = clampRectToBounds(
{
x: Math.round(next.x),
y: Math.round(next.y),
w: Math.round(next.w),
h: Math.round(next.h),
},
bounds,
50,
);
return {
...historyPush(state),
doc: {
screen: {
...state.doc.screen,
nodes: state.doc.screen.nodes.map((n) => (n.id === action.id ? { ...n, rect } : n)),
},
},
};
}
case 'updateWidgetProps': {
return updateWidgetProps(state, action);
}