Jake
27d85a0b28
@tailwindcss/vite:generate:serve threw 'Invalid declaration: getCurrentWindow' on ResizeHandles.svelte?svelte&type=style&lang.css even after comment sanitisation. The style block is plain CSS with no Tailwind directives, but the per-component virtual CSS module route was hitting a parse bug in the Tailwind v4 + Svelte 5 combination. Workaround: move the CSS into app.css (class names are already component-specific, no scoping loss) and drop the component-local <style> block. This sidesteps the virtual-module route entirely. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
2.5 KiB
Svelte
57 lines
2.5 KiB
Svelte
<script>
|
|
// Invisible resize-handle overlays around each Kon window edge.
|
|
// Needed because Kon runs with decorations off, so the WM
|
|
// provides no resize affordance on KDE/GNOME Wayland.
|
|
//
|
|
// Architecture: eight fixed-position divs are the click target for
|
|
// resize. Because the divs themselves are the event target (not any
|
|
// ancestor), the delegated handler for data-tauri-drag-region walks
|
|
// the ancestors of the div, finds no drag-region, and does not start
|
|
// a window move. This gives us a clean separation: resize wins on
|
|
// the edges, drag wins on the titlebar.
|
|
//
|
|
// Hit zone sizes come from CSS custom properties so every Kon window
|
|
// across the app stays identical. See the kon-resize-edge and
|
|
// kon-resize-corner custom properties in app.css.
|
|
//
|
|
// Placement requirement: instances of this component MUST be mounted
|
|
// as a sibling of the animated/transformed layout root (not a child),
|
|
// or fixed positioning becomes relative to that transformed ancestor
|
|
// instead of the viewport.
|
|
|
|
import { getCurrentWindow } from "@tauri-apps/api/window";
|
|
import { hasTauriRuntime } from "$lib/utils/runtime.js";
|
|
|
|
const enabled = hasTauriRuntime();
|
|
|
|
async function startResize(e, direction) {
|
|
if (!enabled) return;
|
|
if (e.button !== 0) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
// Lock the pointer to this handle BEFORE asking Wayland to begin a
|
|
// resize. Without capture, KWin xdg_toplevel.resize grab arrives
|
|
// between mousedown synthesis and pointer movement, often losing the
|
|
// diagonal component and collapsing a corner drag to a single axis.
|
|
// pointerdown + setPointerCapture keeps the direction pinned.
|
|
try {
|
|
e.currentTarget?.setPointerCapture?.(e.pointerId);
|
|
} catch {}
|
|
try {
|
|
await getCurrentWindow().startResizeDragging(direction);
|
|
} catch {}
|
|
}
|
|
</script>
|
|
|
|
{#if enabled}
|
|
<div class="kon-rh kon-rh-n" onpointerdown={(e) => startResize(e,"North")}></div>
|
|
<div class="kon-rh kon-rh-s" onpointerdown={(e) => startResize(e,"South")}></div>
|
|
<div class="kon-rh kon-rh-w" onpointerdown={(e) => startResize(e,"West")}></div>
|
|
<div class="kon-rh kon-rh-e" onpointerdown={(e) => startResize(e,"East")}></div>
|
|
|
|
<div class="kon-rh kon-rh-nw" onpointerdown={(e) => startResize(e,"NorthWest")}></div>
|
|
<div class="kon-rh kon-rh-ne" onpointerdown={(e) => startResize(e,"NorthEast")}></div>
|
|
<div class="kon-rh kon-rh-sw" onpointerdown={(e) => startResize(e,"SouthWest")}></div>
|
|
<div class="kon-rh kon-rh-se" onpointerdown={(e) => startResize(e,"SouthEast")}></div>
|
|
{/if}
|