geometry

Minified8.00 KBMinzipped2.00 KB

Functional geometry utilities.

Example

import { Rect } from "@monstermann/geometry";

const anchorElement = document.querySelector(".anchor");
const popoverElement = document.querySelector(".popover");

const boundaryRect = pipe(Rect.fromWindow(), Rect.shrink(20));

const anchorRect = Rect.fromElement(anchorElement);

const popoverRect = pipe(
    Rect.fromElement(popoverElement),
    Rect.alignTop(anchorRect),
    Rect.placeRightOf(anchorRect, 10),
    Rect.clamp(boundaryRect),
);

Object.assign(popoverElement.style, {
    position: "absolute",
    translate: `transform(${popoverRect.left}px, ${popoverRect.top}px)`,
    maxHeight: `${boundaryRect.height}px`,
    maxWidth: `${boundaryRect.width}px`,
});

Installation

npm

npm install @monstermann/geometry

pnpm

pnpm add @monstermann/geometry

yarn

yarn add @monstermann/geometry

bun

bun add @monstermann/geometry

Tree-shaking

Installation

npm

npm install -D @monstermann/unplugin-geometry

pnpm

pnpm -D add @monstermann/unplugin-geometry

yarn

yarn -D add @monstermann/unplugin-geometry

bun

bun -D add @monstermann/unplugin-geometry

Usage

Vite

// vite.config.ts
import geometry from "@monstermann/unplugin-geometry/vite";

export default defineConfig({
    plugins: [geometry()],
});

Rollup

// rollup.config.js
import geometry from "@monstermann/unplugin-geometry/rollup";

export default {
    plugins: [geometry()],
};

Rolldown

// rolldown.config.js
import geometry from "@monstermann/unplugin-geometry/rolldown";

export default {
    plugins: [geometry()],
};

Webpack

// webpack.config.js
const geometry = require("@monstermann/unplugin-geometry/webpack");

module.exports = {
    plugins: [geometry()],
};

Rspack

// rspack.config.js
const geometry = require("@monstermann/unplugin-geometry/rspack");

module.exports = {
    plugins: [geometry()],
};

ESBuild

// esbuild.config.js
import { build } from "esbuild";
import geometry from "@monstermann/unplugin-geometry/esbuild";

build({
    plugins: [geometry()],
});