Brunobkr/llama.cpp_AlgMor24_github

1import { executeCallbacks, getDocument, getWindow, } from "svelte-toolbelt";2import { on } from "svelte/events";3import { watch } from "runed";4import { boxAutoReset } from "./box-auto-reset.svelte.js";5import { isElement, isHTMLElement } from "./is.js";6export class GraceArea {7    #opts;8    #enabled;9    #isPointerInTransit;10    #pointerGraceArea = $state(null);11    constructor(opts) {12        this.#opts = opts;13        this.#enabled = $derived(this.#opts.enabled());14        this.#isPointerInTransit = boxAutoReset(false, {15            afterMs: opts.transitTimeout ?? 300,16            onChange: (value) => {17                if (!this.#enabled)18                    return;19                this.#opts.setIsPointerInTransit?.(value);20            },21            getWindow: () => getWindow(this.#opts.triggerNode()),22        });23        watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {24            if (!triggerNode || !contentNode || !enabled)25                return;26            const handleTriggerLeave = (e) => {27                this.#createGraceArea(e, contentNode);28            };29            const handleContentLeave = (e) => {30                this.#createGraceArea(e, triggerNode);31            };32            return executeCallbacks(on(triggerNode, "pointerleave", handleTriggerLeave), on(contentNode, "pointerleave", handleContentLeave));33        });34        watch(() => this.#pointerGraceArea, () => {35            const handleTrackPointerGrace = (e) => {36                if (!this.#pointerGraceArea)37                    return;38                const target = e.target;39                if (!isElement(target))40                    return;41                const pointerPosition = { x: e.clientX, y: e.clientY };42                const hasEnteredTarget = opts.triggerNode()?.contains(target) ||43                    opts.contentNode()?.contains(target);44                const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, this.#pointerGraceArea);45                if (hasEnteredTarget) {46                    this.#removeGraceArea();47                }48                else if (isPointerOutsideGraceArea) {49                    this.#removeGraceArea();50                    opts.onPointerExit();51                }52            };53            const doc = getDocument(opts.triggerNode() ?? opts.contentNode());54            if (!doc)55                return;56            return on(doc, "pointermove", handleTrackPointerGrace);57        });58    }59    #removeGraceArea() {60        this.#pointerGraceArea = null;61        this.#isPointerInTransit.current = false;62    }63    #createGraceArea(e, hoverTarget) {64        const currentTarget = e.currentTarget;65        if (!isHTMLElement(currentTarget))66            return;67        const exitPoint = { x: e.clientX, y: e.clientY };68        const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());69        const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);70        const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());71        const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);72        this.#pointerGraceArea = graceArea;73        this.#isPointerInTransit.current = true;74    }75}76function getExitSideFromRect(point, rect) {77    const top = Math.abs(rect.top - point.y);78    const bottom = Math.abs(rect.bottom - point.y);79    const right = Math.abs(rect.right - point.x);80    const left = Math.abs(rect.left - point.x);81    switch (Math.min(top, bottom, right, left)) {82        case left:83            return "left";84        case right:85            return "right";86        case top:87            return "top";88        case bottom:89            return "bottom";90        default:91            throw new Error("unreachable");92    }93}94function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {95    // we extend the tip of the exit point to make it easier to navigate without96    // a minor jitter triggering a pointer exit97    const tipPadding = padding * 1.5;98    switch (exitSide) {99        case "top":100            return [101                { x: exitPoint.x - padding, y: exitPoint.y + padding },102                { x: exitPoint.x, y: exitPoint.y - tipPadding },103                { x: exitPoint.x + padding, y: exitPoint.y + padding },104            ];105        case "bottom":106            return [107                { x: exitPoint.x - padding, y: exitPoint.y - padding },108                { x: exitPoint.x, y: exitPoint.y + tipPadding },109                { x: exitPoint.x + padding, y: exitPoint.y - padding },110            ];111        case "left":112            return [113                { x: exitPoint.x + padding, y: exitPoint.y - padding },114                { x: exitPoint.x - tipPadding, y: exitPoint.y },115                { x: exitPoint.x + padding, y: exitPoint.y + padding },116            ];117        case "right":118            return [119                { x: exitPoint.x - padding, y: exitPoint.y - padding },120                { x: exitPoint.x + tipPadding, y: exitPoint.y },121                { x: exitPoint.x - padding, y: exitPoint.y + padding },122            ];123    }124}125function getPointsFromRect(rect) {126    const { top, right, bottom, left } = rect;127    return [128        { x: left, y: top },129        { x: right, y: top },130        { x: right, y: bottom },131        { x: left, y: bottom },132    ];133}134// Determine if a point is inside of a polygon.135// Based on https://github.com/substack/point-in-polygon136function isPointInPolygon(point, polygon) {137    const { x, y } = point;138    let inside = false;139    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {140        const xi = polygon[i].x;141        const yi = polygon[i].y;142        const xj = polygon[j].x;143        const yj = polygon[j].y;144        // prettier-ignore145        const intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);146        if (intersect)147            inside = !inside;148    }149    return inside;150}151// Returns a new array of points representing the convex hull of the given set of points.152// https://www.nayuki.io/page/convex-hull-algorithm153function getHull(points) {154    const newPoints = points.slice();155    newPoints.sort((a, b) => {156        if (a.x < b.x)157            return -1;158        else if (a.x > b.x)159            return +1;160        else if (a.y < b.y)161            return -1;162        else if (a.y > b.y)163            return +1;164        else165            return 0;166    });167    return getHullPresorted(newPoints);168}169// Returns the convex hull, assuming that each points[i] <= points[i + 1]. Runs in O(n) time.170function getHullPresorted(points) {171    if (points.length <= 1)172        return points.slice();173    const upperHull = [];174    for (let i = 0; i < points.length; i++) {175        const p = points[i];176        while (upperHull.length >= 2) {177            const q = upperHull[upperHull.length - 1];178            const r = upperHull[upperHull.length - 2];179            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))180                upperHull.pop();181            else182                break;183        }184        upperHull.push(p);185    }186    upperHull.pop();187    const lowerHull = [];188    for (let i = points.length - 1; i >= 0; i--) {189        const p = points[i];190        while (lowerHull.length >= 2) {191            const q = lowerHull[lowerHull.length - 1];192            const r = lowerHull[lowerHull.length - 2];193            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))194                lowerHull.pop();195            else196                break;197        }198        lowerHull.push(p);199    }200    lowerHull.pop();201    if (upperHull.length === 1 &&202        lowerHull.length === 1 &&203        upperHull[0].x === lowerHull[0].x &&204        upperHull[0].y === lowerHull[0].y)205        return upperHull;206    else207        return upperHull.concat(lowerHull);208}209