fix: drag works again; size label updates only on pointerup
- ui.tsx: useWindowResize callback emits RESIZE_WINDOW with hook-computed size (not window.innerWidth) so figma.ui.resize grows correctly during drag - ui.tsx: add window 'pointerup' listener to refresh size readout AFTER drag ends (Figma already applied new size by then)
This commit is contained in:
1 parent
4aa82fbefa
commit
84ec81bf03
1 file changed
+19
-5
+19
-5
@@ -11,7 +11,7 @@ import {
|
||||
} from '@create-figma-plugin/ui'
|
||||
import { emit } from '@create-figma-plugin/utilities'
|
||||
import { h, Fragment } from 'preact'
|
||||
import { useState } from 'preact/hooks'
|
||||
import { useState, useEffect } from 'preact/hooks'
|
||||
|
||||
const MIN_WINDOW_SIZE = { width: 320, height: 200 }
|
||||
const MAX_WINDOW_SIZE = { width: 800, height: 800 }
|
||||
@@ -22,11 +22,10 @@ function Plugin () {
|
||||
// Нативный drag-ресайз окна Figma (тянуть за правый нижний угол).
|
||||
// Опции min/max обязательны: без них хук берёт базу из window.innerWidth на момент
|
||||
// маунта (окно ещё не приняло размер от showUI) → первый drag не работает.
|
||||
// ВАЖНО: хук мутирует и отдаёт ОДИН объект по ссылке, поэтому делаем копию
|
||||
// (иначе Preact не видит изменений и цифры размера не перерисовываются).
|
||||
// В колбэке шлём размер в main (figma.ui.resize), чтобы окно тянулось вживую.
|
||||
// State с цифрами НЕ трогаем здесь — обновляем только после отпускания (pointerup).
|
||||
useWindowResize(function (windowSize: { width: number; height: number }) {
|
||||
const size = { width: window.innerWidth, height: window.innerHeight }
|
||||
setCurrentWindowSize(size)
|
||||
const size = { width: windowSize.width, height: windowSize.height }
|
||||
emit('RESIZE_WINDOW', size)
|
||||
}, {
|
||||
minWidth: 320,
|
||||
@@ -35,6 +34,21 @@ function Plugin () {
|
||||
maxHeight: 800
|
||||
})
|
||||
|
||||
// Обновляем цифры размера ТОЛЬКО после окончания drag'а (отпускание кнопки).
|
||||
// К моменту pointerup Figma уже применила новый размер окна.
|
||||
useEffect(function () {
|
||||
const handlePointerUp = function () {
|
||||
setCurrentWindowSize({
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight
|
||||
})
|
||||
}
|
||||
window.addEventListener('pointerup', handlePointerUp)
|
||||
return function () {
|
||||
window.removeEventListener('pointerup', handlePointerUp)
|
||||
}
|
||||
}, [])
|
||||
|
||||
function toggleWindowSize () {
|
||||
const isMaximized =
|
||||
currentWindowSize.width >= MAX_WINDOW_SIZE.width &&
|
||||
|
||||
Reference in new issue
Block a user