feat: window docking buttons (left/center/right) via figma.ui.reposition
- main.ts: add DOCK_WINDOW handler using figma.viewport.bounds + figma.ui.resize/reposition - ui.tsx: add dock buttons (Left/Center/Right) + keep expand/collapse + drag handle
This commit is contained in:
1 parent
f3575e30ee
commit
bc9b2e60e9
2 files changed
+32
No files matched your search
+18
@@ -10,5 +10,23 @@ export default function () {
|
||||
figma.ui.resize(width, height)
|
||||
})
|
||||
|
||||
// Эмуляция докинга: прижать окно плагина к краям canvas (left/right/center).
|
||||
// reposition() принимает canvas-space координаты (как figma.viewport.center).
|
||||
// Ширину панелей Figma API не отдаёт, поэтому прижимаем к bounds видимой области.
|
||||
on('DOCK_WINDOW', function (payload: { position: 'left' | 'right' | 'center'; width: number; height: number }) {
|
||||
const { position, width, height } = payload
|
||||
figma.ui.resize(width, height)
|
||||
const b = figma.viewport.bounds
|
||||
let x = b.x
|
||||
let y = b.y
|
||||
if (position === 'right') {
|
||||
x = b.x + b.width - width
|
||||
} else if (position === 'center') {
|
||||
x = b.x + (b.width - width) / 2
|
||||
y = b.y + (b.height - height) / 2
|
||||
}
|
||||
figma.ui.reposition(x, y)
|
||||
})
|
||||
|
||||
showUI({ width: 320, height: 200, themeColors: true, title: 'AI assistant (MVP)' })
|
||||
}
|
||||
+14
@@ -4,6 +4,7 @@ import {
|
||||
Text,
|
||||
Muted,
|
||||
VerticalSpace,
|
||||
Button,
|
||||
IconButton,
|
||||
IconExpand24,
|
||||
IconCollapse24,
|
||||
@@ -58,6 +59,14 @@ function Plugin () {
|
||||
emit('RESIZE_WINDOW', next)
|
||||
}
|
||||
|
||||
function dockWindow (position: 'left' | 'right' | 'center') {
|
||||
emit('DOCK_WINDOW', {
|
||||
position,
|
||||
width: currentWindowSize.width,
|
||||
height: currentWindowSize.height
|
||||
})
|
||||
}
|
||||
|
||||
const isMaximized =
|
||||
currentWindowSize.width >= MAX_WINDOW_SIZE.width &&
|
||||
currentWindowSize.height >= MAX_WINDOW_SIZE.height
|
||||
@@ -74,6 +83,11 @@ function Plugin () {
|
||||
{isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
|
||||
</IconButton>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
|
||||
<Button onClick={function () { dockWindow('left') }}>◧ Лево</Button>
|
||||
<Button onClick={function () { dockWindow('center') }}>▣ Центр</Button>
|
||||
<Button onClick={function () { dockWindow('right') }}>Право ◨</Button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
|
||||
Reference in new issue
Block a user