ui: split raw Figma API values vs calculated; show code var names + formulas
This commit is contained in:
Hermes Agent committed
1 parent
9f9349efb6
commit
63a762d002
1 file changed
+44
-20
+44
-20
@@ -17,6 +17,30 @@ import { useState, useEffect } from 'preact/hooks'
|
||||
const MIN_WINDOW_SIZE = { width: 320, height: 200 }
|
||||
const MAX_WINDOW_SIZE = { width: 800, height: 800 }
|
||||
|
||||
// Одна строка отладочного вывода: имя переменной из кода (как в main.ts),
|
||||
// опционально — формула расчёта, и само значение (моноширинное, по правому краю).
|
||||
function Field (props: { name: string; formula?: 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>
|
||||
<span style={{ textAlign: 'right', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontVariantNumeric: 'tabular-nums', fontSize: '11px' }}>{props.value}</span>
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Секция-карточка: заголовок + список Field.
|
||||
function Section (props: { title: string; children: preact.ComponentChildren }) {
|
||||
return (
|
||||
<div style={{ marginTop: '8px', padding: '8px 10px', border: '1px solid var(--figma-color-border)', borderRadius: '4px', background: 'var(--figma-color-bg-secondary)' }}>
|
||||
<Text style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--figma-color-text-secondary)' }}>{props.title}</Text>
|
||||
<div style={{ marginTop: '4px', display: 'flex', flexDirection: 'column', rowGap: '1px' }}>{props.children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Plugin () {
|
||||
const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE)
|
||||
const [windowInfo, setWindowInfo] = useState<{
|
||||
@@ -135,26 +159,26 @@ function Plugin () {
|
||||
<VerticalSpace space="small" />
|
||||
<Muted>AI assistant (MVP) — bootstrap</Muted>
|
||||
{windowInfo != null && (
|
||||
<div style={{ width: '100%', marginTop: '8px', padding: '8px 10px', border: '1px solid var(--figma-color-border)', borderRadius: '4px', background: 'var(--figma-color-bg-secondary)' }}>
|
||||
<Text style={{ fontSize: '11px', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--figma-color-text-secondary)' }}>
|
||||
Окно плагина
|
||||
</Text>
|
||||
<div style={{ marginTop: '4px', display: 'grid', gridTemplateColumns: 'auto 1fr', rowGap: '2px', columnGap: '12px', fontSize: '11px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontVariantNumeric: 'tabular-nums' }}>
|
||||
<span>x</span><span style={{ textAlign: 'right' }}>{windowInfo.x}</span>
|
||||
<span>y</span><span style={{ textAlign: 'right' }}>{windowInfo.y}</span>
|
||||
<span>w</span><span style={{ textAlign: 'right' }}>{windowInfo.width}</span>
|
||||
<span>h</span><span style={{ textAlign: 'right' }}>{windowInfo.height}</span>
|
||||
</div>
|
||||
<Text style={{ marginTop: '8px', fontSize: '11px', fontWeight: 600, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--figma-color-text-secondary)' }}>
|
||||
Canvas / viewport
|
||||
</Text>
|
||||
<div style={{ marginTop: '4px', display: 'grid', gridTemplateColumns: 'auto 1fr', rowGap: '2px', columnGap: '12px', fontSize: '11px', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace', fontVariantNumeric: 'tabular-nums' }}>
|
||||
<span>zoom</span><span style={{ textAlign: 'right' }}>{windowInfo.zoom}</span>
|
||||
<span>viewport</span><span style={{ textAlign: 'right' }}>{windowInfo.viewport.x},{windowInfo.viewport.y} · {windowInfo.viewport.width}×{windowInfo.viewport.height}</span>
|
||||
<span>gaps L/R/T/B</span><span style={{ textAlign: 'right' }}>{windowInfo.gapL} / {windowInfo.gapR} / {windowInfo.gapT} / {windowInfo.gapB}</span>
|
||||
<span>center</span><span style={{ textAlign: 'right' }}>{windowInfo.center.x},{windowInfo.center.y}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Fragment>
|
||||
{/* RAW — значения, которые реально возвращает Figma API (без преобразований) */}
|
||||
<Section title="RAW · Figma API">
|
||||
<Field name="figma.ui.getPosition().canvasSpace.x" value={windowInfo.x} />
|
||||
<Field name="figma.ui.getPosition().canvasSpace.y" value={windowInfo.y} />
|
||||
<Field name="figma.viewport.zoom" value={windowInfo.zoom} />
|
||||
<Field name="figma.viewport.bounds" value={`${windowInfo.viewport.x},${windowInfo.viewport.y} · ${windowInfo.viewport.width}×${windowInfo.viewport.height}`} />
|
||||
<Field name="lastSize.width" value={windowInfo.width} />
|
||||
<Field name="lastSize.height" value={windowInfo.height} />
|
||||
</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} />
|
||||
</Section>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
Reference in new issue
Block a user