docs: add resize/positioning reference baseline (zoom=1 visible UI)
This commit is contained in:
1 parent
47cad7968d
commit
c799c22889
1 file changed
+44
@@ -56,6 +56,50 @@
|
||||
- **Решение:** remote как `http://<TOKEN>:@<host>/admin/figma-ai-plugin.git`. Токен должен иметь scope `write:repository` (без `write:user` создать репо нельзя — создавать через basic auth admin-ом).
|
||||
- **Ссылка:** IDEA.md, Gitea http://x1qnvk08zec2u5cx6yh5iexh.155.212.186.39.sslip.io/admin/figma-ai-plugin
|
||||
|
||||
## ЭТАЛОН — ресайз и позиционирование (подтверждено пользователем)
|
||||
|
||||
> Зафиксировано после коммита `47cad79`. Любые правки в `ui.tsx`/`main.ts` сверять с этим.
|
||||
> Среда замера: zoom=1, Figma UI виден (лимит окна ≈ 454×783 при full HD viewport).
|
||||
|
||||
### Модель координат
|
||||
- `reposition(x,y)` / `getPosition().canvasSpace` — В canvas-space, отсчёт от **верха шапки** окна плагина (38px).
|
||||
- `resize(w,h)` — в ЭКРАННЫХ px. Figma КЛАМПИТ до своего лимита при видимом UI (≈454×783), при спрятанном UI (Ctrl+\) — до всего viewport.
|
||||
- Перевод: `wCanvas = w/zoom`, `hCanvasFull = (38+h)/zoom`.
|
||||
|
||||
### Периметральные ручки (8 фиолетовых div)
|
||||
- **Drag** (>4px) = ресайз (single-/dual-axis). Якорь фиксируется в `RESIZE_START`, размер считается от якоря.
|
||||
- **Чистый клик** (без движения):
|
||||
- Угол **не в доке** → телепорт в угол (`dockWindow`).
|
||||
- Угол **в доке** (край) → свободная ось = 50% viewport (`DOCK_HALF`), прижим в угол, выход из дока.
|
||||
- Край → телепорт в край (`dockWindow`).
|
||||
- Центр — ТОЛЬКО кнопкой в шапке (в периметр не входит).
|
||||
|
||||
### Что есть «док»
|
||||
- **Док = окно растянуто у КРАЯ** (одна ось = 320, другая = max viewport). Углы и центр доком НЕ считаются.
|
||||
- Краевые кнопки (▬▭▏▕) пишут `dockedPosRef`; углы/центр — нет.
|
||||
|
||||
### Ожидаемые значения (zoom=1, bounds 3513,-1774 · 908×872, видимый UI)
|
||||
Реальный лимит: maxW≈454, maxH≈783. Растяжение срабатывает ТОЛЬКО по «своей» оси (другая клампится):
|
||||
|
||||
| Кнопка | Реал. W×H | x | y | relX | relY |
|
||||
|---|---|---|---|---|---|
|
||||
| ◤ top-left | 454×417 | 3513 | -1774 | 0 | 0 |
|
||||
| ▬ top-center | 454×320 | 3740 | -1774 | 227 | 0 |
|
||||
| ◥ top-right | 454×417 | 3867 | -1774 | 354 | 0 |
|
||||
| ▏ center-left | 320×783 | 3513 | -1748 | 0 | 26 |
|
||||
| ⊕ center | 454×417 | 3740 | -1565 | 227 | 209 |
|
||||
| ▕ center-right | 320×783 | 4101 | -1748 | 588 | 26 |
|
||||
| ◣ bottom-left | 454×417 | 3513 | -1357 | 0 | 417 |
|
||||
| ▭ bottom-center | 454×320 | 3740 | -1260 | 227 | 514 |
|
||||
| ◢ bottom-right | 454×417 | 3867 | -1357 | 354 | 417 |
|
||||
|
||||
- `▬ top-center`: relX=227 (окно ПО ЦЕНТРУ по X), relY=0 (прижат к верху).
|
||||
- `▏ center-left`: relY=26, gapT=gapB=25 (вертикально ОТЦЕНТРИРОВАНО).
|
||||
- Баг детектора: если видишь relX=0 на `▬` — окно прижалось к левому краю вместо центра (позиция считается от канона, а не реального размера). Фикс: `DOCK_REFINE` считает от реального `window.innerWidth/Height`.
|
||||
|
||||
### Кнопки в шапке
|
||||
`[размер] [copy] [центр=IconDockToSide24] [развернуть/свернуть]`. Сетка 3×3 из тела УДАЛЕНА.
|
||||
|
||||
## Ресурсы (не терять)
|
||||
- UI Storybook: https://yuanqing.github.io/create-figma-plugin/ui/
|
||||
- Figma Plugin API docs: https://www.figma.com/plugin-docs/
|
||||
|
||||
Reference in new issue
Block a user