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'
|
} from '@create-figma-plugin/ui'
|
||||||
import { emit } from '@create-figma-plugin/utilities'
|
import { emit } from '@create-figma-plugin/utilities'
|
||||||
import { h, Fragment } from 'preact'
|
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 MIN_WINDOW_SIZE = { width: 320, height: 200 }
|
||||||
const MAX_WINDOW_SIZE = { width: 800, height: 800 }
|
const MAX_WINDOW_SIZE = { width: 800, height: 800 }
|
||||||
@@ -22,11 +22,10 @@ function Plugin () {
|
|||||||
// Нативный drag-ресайз окна Figma (тянуть за правый нижний угол).
|
// Нативный drag-ресайз окна Figma (тянуть за правый нижний угол).
|
||||||
// Опции min/max обязательны: без них хук берёт базу из window.innerWidth на момент
|
// Опции min/max обязательны: без них хук берёт базу из window.innerWidth на момент
|
||||||
// маунта (окно ещё не приняло размер от showUI) → первый drag не работает.
|
// маунта (окно ещё не приняло размер от showUI) → первый drag не работает.
|
||||||
// ВАЖНО: хук мутирует и отдаёт ОДИН объект по ссылке, поэтому делаем копию
|
// В колбэке шлём размер в main (figma.ui.resize), чтобы окно тянулось вживую.
|
||||||
// (иначе Preact не видит изменений и цифры размера не перерисовываются).
|
// State с цифрами НЕ трогаем здесь — обновляем только после отпускания (pointerup).
|
||||||
useWindowResize(function (windowSize: { width: number; height: number }) {
|
useWindowResize(function (windowSize: { width: number; height: number }) {
|
||||||
const size = { width: window.innerWidth, height: window.innerHeight }
|
const size = { width: windowSize.width, height: windowSize.height }
|
||||||
setCurrentWindowSize(size)
|
|
||||||
emit('RESIZE_WINDOW', size)
|
emit('RESIZE_WINDOW', size)
|
||||||
}, {
|
}, {
|
||||||
minWidth: 320,
|
minWidth: 320,
|
||||||
@@ -35,6 +34,21 @@ function Plugin () {
|
|||||||
maxHeight: 800
|
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 () {
|
function toggleWindowSize () {
|
||||||
const isMaximized =
|
const isMaximized =
|
||||||
currentWindowSize.width >= MAX_WINDOW_SIZE.width &&
|
currentWindowSize.width >= MAX_WINDOW_SIZE.width &&
|
||||||
|
|||||||
Reference in new issue
Block a user