From dcfb235d0644b87f2707f711357fa18947f89bf6 Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Wed, 9 Sep 2026 13:18:32 +0200 Subject: [PATCH] feat: show derived window data (zoom, viewport, gaps, center) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - main.ts GET_WINDOW_INFO: add zoom, viewport bounds, gaps L/R/T/B, center computed from figma.viewport + plugin window geometry - ui.tsx: render additional readout lines under 🔍 Инфо --- src/main.ts | 34 +++++++++++++++++++++++++++++++--- src/ui.tsx | 12 +++++++++++- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/main.ts b/src/main.ts index 1bac326..4a5ac25 100644 --- a/src/main.ts +++ b/src/main.ts @@ -34,7 +34,8 @@ export default function () { figma.ui.reposition(x, y) }) - // UI запрашивает текущие x/y (canvas-space) и размеры окна для отладочного вывода. + // UI запрашивает текущие x/y (canvas-space) и размеры окна для отладочного вывода, + // а также производные данные, вычислимые из figma.viewport. on('GET_WINDOW_INFO', function () { let x = 0 let y = 0 @@ -46,11 +47,38 @@ export default function () { } catch (e) { // getPosition может быть недоступен в некоторых версиях — оставляем 0 } + + const zoom = figma.viewport.zoom + const b = figma.viewport.bounds + const w = lastSize.width + const h = lastSize.height + + // Геометрия окна плагина относительно видимой области canvas (bounds). + // gapL/gapR/gapT/gapB — отступы окна от левого/правого/верхнего/нижнего края canvas. + const gapL = Math.round(x - b.x) + const gapT = Math.round(y - b.y) + const gapR = Math.round(b.x + b.width - (x + w)) + const gapB = Math.round(b.y + b.height - (y + h)) + const cx = Math.round(x + w / 2) + const cy = Math.round(y + h / 2) + emit('WINDOW_INFO', { x, y, - width: lastSize.width, - height: lastSize.height + width: w, + height: h, + zoom: Math.round(zoom * 100) / 100, + viewport: { + x: Math.round(b.x), + y: Math.round(b.y), + width: Math.round(b.width), + height: Math.round(b.height) + }, + gapL, + gapR, + gapT, + gapB, + center: { x: cx, y: cy } }) }) diff --git a/src/ui.tsx b/src/ui.tsx index 855497b..0561391 100644 --- a/src/ui.tsx +++ b/src/ui.tsx @@ -19,7 +19,13 @@ const MAX_WINDOW_SIZE = { width: 800, height: 800 } function Plugin () { const [currentWindowSize, setCurrentWindowSize] = useState(MIN_WINDOW_SIZE) - const [windowInfo, setWindowInfo] = useState<{ x: number; y: number; width: number; height: number } | null>(null) + const [windowInfo, setWindowInfo] = useState<{ + x: number; y: number; width: number; height: number + zoom: number + viewport: { x: number; y: number; width: number; height: number } + gapL: number; gapR: number; gapT: number; gapB: number + center: { x: number; y: number } + } | null>(null) // Нативный drag-ресайз окна Figma (тянуть за правый нижний угол). // Опции min/max обязательны: без них хук берёт базу из window.innerWidth на момент @@ -119,6 +125,10 @@ function Plugin () { x: {windowInfo.x} y: {windowInfo.y} w: {windowInfo.width} h: {windowInfo.height} + zoom: {windowInfo.zoom} + viewport: {windowInfo.viewport.x},{windowInfo.viewport.y} {windowInfo.viewport.width}×{windowInfo.viewport.height} + gaps L/R/T/B: {windowInfo.gapL}/{windowInfo.gapR}/{windowInfo.gapT}/{windowInfo.gapB} + center: {windowInfo.center.x},{windowInfo.center.y} )}