ui: hide variable debug panel, size readout, and copy button
This commit is contained in:
Hermes Agent committed
1 parent
eefdff9620
commit
e65db88011
1 file changed
+1
-163
+1
-163
@@ -7,8 +7,6 @@ import {
|
||||
IconButton,
|
||||
IconExpand24,
|
||||
IconCollapse24,
|
||||
IconCheck24,
|
||||
IconCopySmall24,
|
||||
IconDockToSide24
|
||||
} from '@create-figma-plugin/ui'
|
||||
import { emit, on } from '@create-figma-plugin/utilities'
|
||||
@@ -20,34 +18,6 @@ const MIN_WINDOW_SIZE = { width: 320, height: 200 }
|
||||
// and the upper bound of drag-resize also comes from there. useWindowResize max is set
|
||||
// very high — actual clamp is done by main via clampWindowSize (bounds*zoom).
|
||||
|
||||
// One debug output row: variable name from code (as in main.ts),
|
||||
// optional — calculation formula, optional — value substitution into the formula,
|
||||
// and the value itself (monospace, right-aligned).
|
||||
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>
|
||||
<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>
|
||||
)}
|
||||
{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>
|
||||
)
|
||||
}
|
||||
|
||||
// Section card: title + list of Fields.
|
||||
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 resizeRef = useRef({ active: false, dir: '', startX: 0, startY: 0, startW: 0, startH: 0, fixedAxis: 'none' as 'none' | 'x' | 'y' })
|
||||
@@ -65,7 +35,6 @@ function Plugin () {
|
||||
relX: number; relY: number
|
||||
center: { x: number; y: number }
|
||||
} | null>(null)
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
// Custom resize over the WHOLE perimeter (8 handles: 4 edges + 4 corners).
|
||||
// Left/top edges move the window (main moves via reposition), right/bottom — resize only.
|
||||
@@ -205,75 +174,6 @@ function Plugin () {
|
||||
})
|
||||
}
|
||||
|
||||
// Copies all debug values (RAW + calc) to the clipboard as text.
|
||||
// Important: in the Figma plugin iframe navigator.clipboard is often unavailable (or its
|
||||
// promise silently rejects), so a fallback via document.execCommand('copy') is mandatory.
|
||||
function copyInfo () {
|
||||
if (windowInfo == null) return
|
||||
const i = windowInfo
|
||||
const lines = [
|
||||
'== RAW · Figma API ==',
|
||||
`figma.ui.getPosition().canvasSpace.x = ${i.x}`,
|
||||
`figma.ui.getPosition().canvasSpace.y = ${i.y}`,
|
||||
`figma.viewport.zoom = ${i.zoom}`,
|
||||
`figma.viewport.bounds = ${i.viewport.x},${i.viewport.y} · ${i.viewport.width}×${i.viewport.height}`,
|
||||
`lastSize.width = ${i.width}`,
|
||||
`lastSize.height = ${i.height}`,
|
||||
`relX = ${i.relX} (x − bounds.x)`,
|
||||
`relY = ${i.relY} (y − bounds.y)`,
|
||||
'',
|
||||
'== CALC · in main.ts ==',
|
||||
`gapL = ${i.gapL} (x − bounds.x)`,
|
||||
`gapR = ${i.gapR} (bounds.x + bounds.width − (x + w))`,
|
||||
`gapT = ${i.gapT} (y − bounds.y)`,
|
||||
`gapB = ${i.gapB} (bounds.y + bounds.height − (y + h))`,
|
||||
`center.x = ${i.center.x} (x + w / 2)`,
|
||||
`center.y = ${i.center.y} (y + h / 2)`
|
||||
]
|
||||
const text = lines.join('\n')
|
||||
|
||||
function markCopied () {
|
||||
setCopied(true)
|
||||
setTimeout(function () { setCopied(false) }, 1200)
|
||||
}
|
||||
|
||||
// Path 1: modern async Clipboard API (if available and worked)
|
||||
if (navigator.clipboard != null && navigator.clipboard.writeText != null) {
|
||||
const apiResult = navigator.clipboard.writeText(text)
|
||||
if (apiResult != null && typeof apiResult.then === 'function') {
|
||||
apiResult.then(function () { markCopied() }).catch(function () {
|
||||
// silent — fall back
|
||||
fallbackCopy(text, markCopied)
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
// Path 2: synchronous fallback for iframe/non-secure contexts
|
||||
fallbackCopy(text, markCopied)
|
||||
}
|
||||
|
||||
// Fallback copy via a temp <textarea> + document.execCommand('copy').
|
||||
// Works where navigator.clipboard is unavailable (Figma iframe, file://, non-HTTPS).
|
||||
function fallbackCopy (text: string, onDone: () => void) {
|
||||
try {
|
||||
const ta = document.createElement('textarea')
|
||||
ta.value = text
|
||||
ta.style.position = 'fixed'
|
||||
ta.style.top = '-9999px'
|
||||
ta.style.opacity = '0'
|
||||
document.body.appendChild(ta)
|
||||
ta.focus()
|
||||
ta.select()
|
||||
const ok = document.execCommand('copy')
|
||||
document.body.removeChild(ta)
|
||||
if (ok) {
|
||||
onDone()
|
||||
}
|
||||
} catch (e) {
|
||||
// both paths failed — do nothing (no indication)
|
||||
}
|
||||
}
|
||||
|
||||
// Update size numbers and info ONLY after the drag ends (button release).
|
||||
// By pointerup Figma has already applied the new window size.
|
||||
useEffect(function () {
|
||||
@@ -357,15 +257,8 @@ function Plugin () {
|
||||
return (
|
||||
<Fragment>
|
||||
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Muted>{currentWindowSize.width} × {currentWindowSize.height}</Muted>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
|
||||
<IconButton
|
||||
title="Copy variable values"
|
||||
onClick={copyInfo}
|
||||
>
|
||||
{copied ? <IconCheck24 /> : <IconCopySmall24 />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
title="Center window (50% viewport)"
|
||||
onClick={function () { dockWindow('center') }}
|
||||
@@ -392,61 +285,6 @@ function Plugin () {
|
||||
<Text style={{ fontSize: '13px', fontWeight: 600 }}>Hello, Figma ✦</Text>
|
||||
<VerticalSpace space="small" />
|
||||
<Muted>AI assistant (MVP) — bootstrap</Muted>
|
||||
{windowInfo != null && (
|
||||
<Fragment>
|
||||
{/* RAW — values actually returned by the Figma API (no transformation) */}
|
||||
<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} />
|
||||
<Field name="maxViewport (bounds·zoom)" formula="bounds.width*zoom, bounds.height*zoom" value={`${windowInfo.maxViewport.width}×${windowInfo.maxViewport.height}`} />
|
||||
<Field name="relX (x − bounds.x)" formula="normalized X of window in viewport" value={windowInfo.relX} />
|
||||
<Field name="relY (y − bounds.y)" formula="normalized Y of window in viewport" value={windowInfo.relY} />
|
||||
</Section>
|
||||
{/* Computed values — calculated in main.ts from the raw values above */}
|
||||
<Section title="CALC · in main.ts">
|
||||
<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 + header + h)"
|
||||
subst={`${windowInfo.viewport.y} + ${windowInfo.viewport.height} − (${windowInfo.y} + 38 + ${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 + (header + h) / 2"
|
||||
subst={`${windowInfo.y} + (38 + ${Math.round(windowInfo.height / windowInfo.zoom)}) / 2 = ${windowInfo.center.y}`}
|
||||
value={windowInfo.center.y}
|
||||
/>
|
||||
</Section>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
{/* Decorative drag-handle icon in the bottom-right corner (as in the old plugin).
|
||||
|
||||
Reference in new issue
Block a user