feat: 8 perimeter resize handles (static divs, no .map, typed callbacks)

src/ui.tsx

@@ -62,9 +62,8 @@ function Plugin () {
   } | null>(null)
   const [copied, setCopied] = useState(false)
 
-  // Кастомный ресайз по ВСЕМУ периметру (8 ручек: 4 края + 4 угла). Нативный useWindowResize
-  // давал только bottom-right; здесь handle'ы ловят pointerdown по всему периметру и шлют
-  // dir + dx/dy в main, который для left/top двигает окно через reposition.
+  // Кастомный ресайз по ВСЕМУ периметру (8 невидимых ручек: 4 края + 4 угла).
+  // Левый/верхний края двигают окно (main двигает через reposition), правый/нижний — только resize.
   // Live-обновление: RESIZE_WINDOW_DRAG во время drag'а, финальный RESIZE_WINDOW по pointerup.
   function startResize (e: PointerEvent, dir: string) {
     e.preventDefault()
@@ -84,14 +83,14 @@ function Plugin () {
     const dy = e.clientY - resizeRef.current.startY
     let w = resizeRef.current.startW
     let h = resizeRef.current.startH
-    if (dir.includes('right')) w = resizeRef.current.startW + dx
-    if (dir.includes('left')) w = resizeRef.current.startW - dx
-    if (dir.includes('bottom')) h = resizeRef.current.startH + dy
-    if (dir.includes('top')) h = resizeRef.current.startH - dy
+    if (dir.indexOf('right') !== -1) w = resizeRef.current.startW + dx
+    if (dir.indexOf('left') !== -1) w = resizeRef.current.startW - dx
+    if (dir.indexOf('bottom') !== -1) h = resizeRef.current.startH + dy
+    if (dir.indexOf('top') !== -1) h = resizeRef.current.startH - dy
     w = Math.max(320, w)
     h = Math.max(200, h)
     setCurrentWindowSize({ width: w, height: h })
-    emit('RESIZE_WINDOW_DRAG', { width: w, height: h, dx, dy, dir })
+    emit('RESIZE_WINDOW_DRAG', { width: w, height: h, dx: dx, dy: dy, dir: dir })
   }
 
   function onPointerUpResize () {
@@ -390,32 +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>
-      {/* Невидимые интерактивные области ресайза по всему периметру (8 ручек: 4 края + 4 угла).
-          Каждая ловит pointerdown и шлёт dir в main (через startResize). Сами div-ы прозрачные. */}
-      {[
-        { dir: 'top-left', style: { top: -3, left: -3, width: 12, height: 12, cursor: 'nwse-resize' } },
-        { dir: 'top', style: { top: -3, left: '50%', transform: 'translateX(-50%)', width: 32, height: 10, cursor: 'ns-resize' } },
-        { dir: 'top-right', style: { top: -3, right: -3, width: 12, height: 12, cursor: 'nesw-resize' } },
-        { dir: 'left', style: { top: '50%', left: -3, transform: 'translateY(-50%)', width: 10, height: 32, cursor: 'ew-resize' } },
-        { dir: 'right', style: { top: '50%', right: -3, transform: 'translateY(-50%)', width: 10, height: 32, cursor: 'ew-resize' } },
-        { dir: 'bottom-left', style: { bottom: -3, left: -3, width: 12, height: 12, cursor: 'nesw-resize' } },
-        { dir: 'bottom', style: { bottom: -3, left: '50%', transform: 'translateX(-50%)', width: 32, height: 10, cursor: 'ns-resize' } },
-        { dir: 'bottom-right', style: { bottom: -3, right: -3, width: 12, height: 12, cursor: 'nwse-resize' } }
-      ].map(function (h) {
-        return (
-          <div
-            key={h.dir}
-            onPointerDown={function (e: PointerEvent) { startResize(e, h.dir) }}
-            style={{
-              position: 'fixed',
-              zIndex: 3,
-              background: 'transparent',
-              ...h.style
-            }}
-            aria-hidden="true"
-          />
-        )
-      })}
+      {/* Невидимые интерактивные ручки ресайза по всему периметру (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" />
     </Fragment>
   )
 }