debug: make resize handles visible (rgba fill) for debugging

This commit is contained in:
Hermes Agent committed 2026-09-09 19:31:45 +02:00
1 parent be419351b2
commit 3c0ab7a67c
1 file changed
+10 -10
+10 -10
View File
@@ -389,16 +389,16 @@ function Plugin () {
<path d="M10 1C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3C9.44772 3 9 2.55228 9 2C9 1.44772 9.44772 1 10 1Z" fill="currentColor" />
</svg>
</div>
{/* Невидимые интерактивные ручки ресайза по всему периметру (4 края + 4 угла).
Каждая ловит pointerdown и шлёт dir в startResize. Сами div-ы прозрачные. */}
<div onPointerDown={function (e) { startResize(e, 'top-left') }} style={{ position: 'fixed', top: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'transparent', cursor: 'nwse-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'top') }} style={{ position: 'fixed', top: -3, left: '50%', transform: 'translateX(-50%)', width: 32, height: 10, zIndex: 3, background: 'transparent', cursor: 'ns-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'top-right') }} style={{ position: 'fixed', top: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'transparent', cursor: 'nesw-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'left') }} style={{ position: 'fixed', top: '50%', left: -3, transform: 'translateY(-50%)', width: 10, height: 32, zIndex: 3, background: 'transparent', cursor: 'ew-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'right') }} style={{ position: 'fixed', top: '50%', right: -3, transform: 'translateY(-50%)', width: 10, height: 32, zIndex: 3, background: 'transparent', cursor: 'ew-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'bottom-left') }} style={{ position: 'fixed', bottom: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'transparent', cursor: 'nesw-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'bottom') }} style={{ position: 'fixed', bottom: -3, left: '50%', transform: 'translateX(-50%)', width: 32, height: 10, zIndex: 3, background: 'transparent', cursor: 'ns-resize' }} aria-hidden="true" />
<div onPointerDown={function (e) { startResize(e, 'bottom-right') }} style={{ position: 'fixed', bottom: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'transparent', cursor: 'nwse-resize' }} aria-hidden="true" />
{/* Ручки ресайза по периметру (4 края + 4 угла) — ВИДИМЫЕ для отладки.
Каждая ловит pointerdown и шлёт dir в startResize. */}
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'top-left') }} style={{ position: 'fixed', top: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nwse-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'top') }} style={{ position: 'fixed', top: -3, left: '50%', transform: 'translateX(-50%)', width: 32, height: 10, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'ns-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'top-right') }} style={{ position: 'fixed', top: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nesw-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'left') }} style={{ position: 'fixed', top: '50%', left: -3, transform: 'translateY(-50%)', width: 10, height: 32, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'ew-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'right') }} style={{ position: 'fixed', top: '50%', right: -3, transform: 'translateY(-50%)', width: 10, height: 32, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'ew-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'bottom-left') }} style={{ position: 'fixed', bottom: -3, left: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nesw-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'bottom') }} style={{ position: 'fixed', bottom: -3, left: '50%', transform: 'translateX(-50%)', width: 32, height: 10, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'ns-resize' }} aria-hidden="true" />
<div onPointerDown={function (e: PointerEvent) { startResize(e, 'bottom-right') }} style={{ position: 'fixed', bottom: -3, right: -3, width: 12, height: 12, zIndex: 3, background: 'rgba(211,168,255,0.6)', cursor: 'nwse-resize' }} aria-hidden="true" />
</Fragment>
)
}