verstak/build/dist/source/core/Sizes.js

Verstak - Front-End Library

import { ReactiveTreeVariable } from "reactronic";
export var Axis;
(function (Axis) {
    Axis[Axis["X"] = 0] = "X";
    Axis[Axis["Y"] = 1] = "Y";
})(Axis || (Axis = {}));
export class Dimension {
    constructor(num, unit) {
        this.num = num;
        this.unit = unit;
    }
    clone() {
        return new Dimension(this.num, this.unit);
    }
    equalsTo(another) {
        return this.num === another.num && this.unit === another.unit;
    }
    static parse(text) {
        text = text.trim();
        const splitPos = text.search(/[^0-9.]/);
        const num = Number.parseFloat(~splitPos ? text.substring(0, splitPos) : text);
        const unit = ~splitPos ? text.substring(splitPos, text.length).trim() : undefined;
        return dim(num, unit);
    }
    static emit(value) {
        var _a;
        return `${value.num}${(_a = value.unit) !== null && _a !== void 0 ? _a : ""}`;
    }
    static get lineSizePx() {
        return Dimension.gLineSizePx.value;
    }
    static set lineSizePx(value) {
        Dimension.gLineSizePx.value = value;
    }
    static getLineSizePx() {
        return Dimension.gLineSizePx;
    }
}
Dimension.gFontSizePx = new ReactiveTreeVariable("gFontSizePx");
Dimension.gLineSizePx = new ReactiveTreeVariable("gLineSizePx");
export function dim(num, unit) {
    return new Dimension(num, unit);
}
export const BodyFontSize = Number.parseFloat(getComputedStyle(document.body).fontSize);
export const BodySmallFontSize = Math.ceil(BodyFontSize * 0.75);
export function px(num) {
    return dim(num, "px");
}
export function ln(num) {
    return dim(num, "ln");
}
export function fromPx(value, ...args) {
    const isValueNumber = typeof value === "number";
    const { num, unit } = isValueNumber
        ? { num: value, unit: args[0] }
        : value;
    const options = isValueNumber ? args[1] : args[0];
    let result = 0;
    switch (unit) {
        case "px":
            result = num;
            break;
        case "ln":
            result = pxToEmOrN(num, options.lineSizePx);
            break;
        case "em":
            result = pxToEmOrN(num, options.fontSizePx);
            break;
        case "rem":
            result = pxToRem(num);
            break;
        case "vw":
            result = pxToPercent(num, options.containerSizeXpx);
            break;
        case "vh":
            result = pxToPercent(num, options.containerSizeYpx);
            break;
        case "%":
            result = pxToPercent(num, options.axis === Axis.X ? options.containerSizeXpx : options.containerSizeYpx);
            break;
        default:
            result = num;
            break;
    }
    return result;
}
export function toPx(value, ...args) {
    const isValueNumber = typeof value === "number";
    const { num, unit } = isValueNumber
        ? { num: value, unit: args[0] }
        : value;
    const options = isValueNumber ? args[1] : args[0];
    let result = 0;
    switch (unit) {
        case "px":
            result = num;
            break;
        case "ln":
            result = emOrNToPx(num, options.lineSizePx);
            break;
        case "em":
            result = emOrNToPx(num, options.fontSizePx);
            break;
        case "rem":
            result = remToPx(num);
            break;
        case "vw":
            result = percentToPx(num, options.containerSizeXpx);
            break;
        case "vh":
            result = percentToPx(num, options.containerSizeYpx);
            break;
        case "%":
            result = percentToPx(num, options.axis === Axis.X ? options.containerSizeXpx : options.containerSizeYpx);
            break;
        default:
            result = num;
            break;
    }
    return result;
}
function pxToPercent(px, containerSizePx) {
    return px * 100 / containerSizePx;
}
function pxToRem(px) {
    return px / BodyFontSize;
}
function pxToEmOrN(px, sizePx) {
    return px / sizePx;
}
function percentToPx(percent, containerSizePx) {
    return percent * containerSizePx / 100;
}
function remToPx(rem) {
    return Math.round(rem * BodyFontSize);
}
function emOrNToPx(em, sizePx) {
    return Math.round(em * sizePx);
}