admin/figma-ai-plugin
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: show substituted values under each calc formula (gap/center with numbers)

Browse Source
This commit is contained in:
Hermes Agent committed 2026-09-09 18:08:43 +02:00
1 parent d29654b8d5
commit 153da94fde
1 file changed
+42 -8
Download Patch File Download Diff File Expand all files Collapse all files
src/ui.tsx
+42 -8
View File
@@ -22,8 +22,9 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 }
// большой max — реальный кламп делает main через clampWindowSize (bounds*zoom).
// Одна строка отладочного вывода: имя переменной из кода (как в main.ts),
// опционально — формула расчёта, и само значение (моноширинное, по правому краю).
function Field (props: { name: string; formula?: string; value: string | number }) {
// опционально — формула расчёта, опционально — подстановка значений в формулу,
// и само значение (моноширинное, по правому краю).
function Field (props: { name: string; formula?: string; subst?: string; value: string | number }) {
return (
<div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', columnGap: '10px', rowGap: '1px', alignItems: 'baseline' }}>
<span style={{ color: 'var(--figma-color-text-secondary)', fontSize: '11px' }}>{props.name}</span>
@@ -31,6 +32,9 @@ function Field (props: { name: string; formula?: string; value: string | number
{props.formula != null && (
<span style={{ gridColumn: '1 / -1', color: 'var(--figma-color-text-tertiary)', fontSize: '10px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' }}>{props.formula}</span>
)}
{props.subst != null && (
<span style={{ gridColumn: '1 / -1', color: 'var(--figma-color-text-tertiary)', fontSize: '10px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' }}>{props.subst}</span>
)}
</div>
)
}
@@ -283,12 +287,42 @@ function Plugin () {
</Section>
{/* Расчётные — посчитаны в main.ts из вышеперечисленных raw-значений */}
<Section title="РАСЧЁТ · в main.ts">
<Field name="gapL" formula="x − bounds.x" value={windowInfo.gapL} />
<Field name="gapR" formula="bounds.x + bounds.width − (x + w)" value={windowInfo.gapR} />
<Field name="gapT" formula="y − bounds.y" value={windowInfo.gapT} />
<Field name="gapB" formula="bounds.y + bounds.height − (y + h)" value={windowInfo.gapB} />
<Field name="center.x" formula="x + w / 2" value={windowInfo.center.x} />
<Field name="center.y" formula="y + h / 2" value={windowInfo.center.y} />
<Field
name="gapL"
formula="x − bounds.x"
subst={`${windowInfo.x} − ${windowInfo.viewport.x} = ${windowInfo.gapL}`}
value={windowInfo.gapL}
/>
<Field
name="gapR"
formula="bounds.x + bounds.width − (x + w)"
subst={`${windowInfo.viewport.x} + ${windowInfo.viewport.width} − (${windowInfo.x} + ${Math.round(windowInfo.width / windowInfo.zoom)}) = ${windowInfo.gapR}`}
value={windowInfo.gapR}
/>
<Field
name="gapT"
formula="y − bounds.y"
subst={`${windowInfo.y} − ${windowInfo.viewport.y} = ${windowInfo.gapT}`}
value={windowInfo.gapT}
/>
<Field
name="gapB"
formula="bounds.y + bounds.height − (y + h)"
subst={`${windowInfo.viewport.y} + ${windowInfo.viewport.height} − (${windowInfo.y} + ${Math.round(windowInfo.height / windowInfo.zoom)}) = ${windowInfo.gapB}`}
value={windowInfo.gapB}
/>
<Field
name="center.x"
formula="x + w / 2"
subst={`${windowInfo.x} + ${Math.round(windowInfo.width / windowInfo.zoom)} / 2 = ${windowInfo.center.x}`}
value={windowInfo.center.x}
/>
<Field
name="center.y"
formula="y + h / 2"
subst={`${windowInfo.y} + ${Math.round(windowInfo.height / windowInfo.zoom)} / 2 = ${windowInfo.center.y}`}
value={windowInfo.center.y}
/>
</Section>
</Fragment>
)}