pixifact 0.1.4 → 0.2.0

package/dist/builtin-scenes/FlexLayout.js

@@ -1,358 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { prop, scene, slot } from 'pixifact/compiler';
-import { Control } from './Control.js';
-let FlexLayout = class FlexLayout extends Control {
-    #direction = 'row';
-    #align = 'start';
-    #justify = 'start';
-    #gap = 0;
-    #paddingX = 0;
-    #paddingY = 0;
-    #paddingLeft;
-    #paddingRight;
-    #paddingTop;
-    #paddingBottom;
-    #baseSizes = new WeakMap();
-    get direction() {
-        return this.#direction;
-    }
-    set direction(value) {
-        this.#direction = value === 'column' ? 'column' : 'row';
-        this.refreshControlLayout();
-    }
-    get align() {
-        return this.#align;
-    }
-    set align(value) {
-        this.#align = parseAlign(value);
-        this.layout();
-    }
-    get justify() {
-        return this.#justify;
-    }
-    set justify(value) {
-        this.#justify = parseJustify(value);
-        this.layout();
-    }
-    get gap() {
-        return this.#gap;
-    }
-    set gap(value) {
-        this.#gap = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    get paddingX() {
-        return this.#paddingX;
-    }
-    set paddingX(value) {
-        this.#paddingX = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    get paddingY() {
-        return this.#paddingY;
-    }
-    set paddingY(value) {
-        this.#paddingY = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    get paddingLeft() {
-        return this.#paddingLeft ?? this.#paddingX;
-    }
-    set paddingLeft(value) {
-        this.#paddingLeft = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    get paddingRight() {
-        return this.#paddingRight ?? this.#paddingX;
-    }
-    set paddingRight(value) {
-        this.#paddingRight = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    get paddingTop() {
-        return this.#paddingTop ?? this.#paddingY;
-    }
-    set paddingTop(value) {
-        this.#paddingTop = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    get paddingBottom() {
-        return this.#paddingBottom ?? this.#paddingY;
-    }
-    set paddingBottom(value) {
-        this.#paddingBottom = Math.max(0, finiteNumber(value, 0));
-        this.refreshControlLayout();
-    }
-    layout() {
-        const children = this.default?.children;
-        if (!children || children.length === 0) {
-            this.syncControlBoxSize();
-            return;
-        }
-        for (const child of children) {
-            this.#rememberBaseSize(child);
-        }
-        const horizontal = this.#direction === 'row';
-        const mainAxis = horizontal ? 'row' : 'column';
-        const crossAxis = horizontal ? 'column' : 'row';
-        const paddingMainStart = horizontal ? this.paddingLeft : this.paddingTop;
-        const paddingMainEnd = horizontal ? this.paddingRight : this.paddingBottom;
-        const paddingCrossStart = horizontal ? this.paddingTop : this.paddingLeft;
-        const paddingCrossEnd = horizontal ? this.paddingBottom : this.paddingRight;
-        const items = children.map((child) => this.#createLayoutItem(child, mainAxis, crossAxis));
-        const gapTotal = this.#gap * Math.max(0, items.length - 1);
-        const naturalMain = items.reduce((sum, item) => sum + item.baseMain + marginMain(item.props, horizontal), 0);
-        const naturalCross = items.reduce((max, item) => Math.max(max, item.baseCross + marginCross(item.props, horizontal)), 0);
-        const naturalWidth = horizontal
-            ? naturalMain + gapTotal + paddingMainStart + paddingMainEnd
-            : naturalCross + paddingCrossStart + paddingCrossEnd;
-        const naturalHeight = horizontal
-            ? naturalCross + paddingCrossStart + paddingCrossEnd
-            : naturalMain + gapTotal + paddingMainStart + paddingMainEnd;
-        const assigned = this.getAssignedControlBoxSize();
-        const containerWidth = assigned.width ?? naturalWidth;
-        const containerHeight = assigned.height ?? naturalHeight;
-        const containerMain = horizontal ? containerWidth : containerHeight;
-        const containerCross = horizontal ? containerHeight : containerWidth;
-        const innerMain = Math.max(0, containerMain - paddingMainStart - paddingMainEnd - gapTotal);
-        const innerCross = Math.max(0, containerCross - paddingCrossStart - paddingCrossEnd);
-        const freeMain = innerMain - naturalMain;
-        this.#resolveMainSizes(items, freeMain, horizontal);
-        this.#resolveCrossSizes(items, innerCross, horizontal);
-        this.#placeItems(items, containerMain, paddingMainStart, paddingMainEnd, paddingCrossStart, innerCross, horizontal);
-        this.syncControlBoxSize();
-    }
-    measureControlNaturalSize() {
-        const children = this.default?.children;
-        if (!children || children.length === 0) {
-            return { width: 0, height: 0 };
-        }
-        const gapTotal = this.#gap * Math.max(0, children.length - 1);
-        const sizes = children.map((child) => this.#naturalSize(child));
-        if (this.#direction === 'row') {
-            return {
-                width: this.paddingLeft + this.paddingRight + gapTotal + sizes.reduce((sum, size) => sum + size.width, 0),
-                height: this.paddingTop + this.paddingBottom + sizes.reduce((max, size) => Math.max(max, size.height), 0),
-            };
-        }
-        return {
-            width: this.paddingLeft + this.paddingRight + sizes.reduce((max, size) => Math.max(max, size.width), 0),
-            height: this.paddingTop + this.paddingBottom + gapTotal + sizes.reduce((sum, size) => sum + size.height, 0),
-        };
-    }
-    #createLayoutItem(child, mainAxis, crossAxis) {
-        const props = child.getFlexItemLayoutProps?.() ?? defaultItemProps;
-        const natural = this.#naturalSize(child);
-        const naturalMain = mainAxis === 'row' ? natural.width : natural.height;
-        const naturalCross = crossAxis === 'row' ? natural.width : natural.height;
-        const minMain = mainAxis === 'row' ? props.minWidth : props.minHeight;
-        const maxMain = maxSize(mainAxis === 'row' ? props.maxWidth : props.maxHeight);
-        const minCross = crossAxis === 'row' ? props.minWidth : props.minHeight;
-        const maxCross = maxSize(crossAxis === 'row' ? props.maxWidth : props.maxHeight);
-        const basis = basisSize(props.basis, naturalMain);
-        const baseMain = clamp(basis, minMain, maxMain);
-        const baseCross = clamp(naturalCross, minCross, maxCross);
-        return {
-            child,
-            props,
-            baseMain,
-            baseCross,
-            mainSize: baseMain,
-            crossSize: baseCross,
-        };
-    }
-    #resolveMainSizes(items, freeMain, horizontal) {
-        if (freeMain > 0) {
-            const totalGrow = items.reduce((sum, item) => sum + item.props.grow, 0);
-            if (totalGrow > 0) {
-                for (const item of items) {
-                    item.mainSize = clampMain(item.baseMain + freeMain * (item.props.grow / totalGrow), item.props, horizontal);
-                }
-            }
-            return;
-        }
-        if (freeMain < 0) {
-            const totalShrink = items.reduce((sum, item) => sum + item.props.shrink * item.baseMain, 0);
-            if (totalShrink > 0) {
-                for (const item of items) {
-                    const weighted = item.props.shrink * item.baseMain;
-                    item.mainSize = clampMain(item.baseMain + freeMain * (weighted / totalShrink), item.props, horizontal);
-                }
-            }
-        }
-    }
-    #resolveCrossSizes(items, innerCross, horizontal) {
-        for (const item of items) {
-            const alignSelf = item.props.alignSelf === 'auto' ? this.#align : item.props.alignSelf;
-            if (alignSelf === 'stretch') {
-                item.crossSize = clampCross(innerCross - marginCross(item.props, horizontal), item.props, horizontal);
-            }
-        }
-    }
-    #placeItems(items, containerMain, paddingMainStart, paddingMainEnd, paddingCrossStart, innerCross, horizontal) {
-        const usedMain = items.reduce((sum, item) => sum + item.mainSize + marginMain(item.props, horizontal), 0);
-        const remaining = Math.max(0, containerMain - paddingMainStart - paddingMainEnd - usedMain - this.#gap * Math.max(0, items.length - 1));
-        const actualGap = this.#justify === 'space-between' && items.length > 1
-            ? this.#gap + remaining / (items.length - 1)
-            : this.#gap;
-        let cursor = paddingMainStart + justifyOffset(this.#justify, remaining);
-        for (const item of items) {
-            const mainStartMargin = horizontal ? item.props.marginLeft : item.props.marginTop;
-            const mainEndMargin = horizontal ? item.props.marginRight : item.props.marginBottom;
-            const crossStartMargin = horizontal ? item.props.marginTop : item.props.marginLeft;
-            const crossEndMargin = horizontal ? item.props.marginBottom : item.props.marginRight;
-            const alignSelf = item.props.alignSelf === 'auto' ? this.#align : item.props.alignSelf;
-            const crossFree = Math.max(0, innerCross - item.crossSize - crossStartMargin - crossEndMargin);
-            const main = cursor + mainStartMargin;
-            const cross = paddingCrossStart + crossStartMargin + alignOffset(alignSelf, crossFree);
-            const x = horizontal ? main : cross;
-            const y = horizontal ? cross : main;
-            const width = horizontal ? item.mainSize : item.crossSize;
-            const height = horizontal ? item.crossSize : item.mainSize;
-            setChildBox(item.child, x, y, width, height);
-            cursor = main + item.mainSize + mainEndMargin + actualGap;
-        }
-    }
-    #rememberBaseSize(child) {
-        if (!this.#baseSizes.has(child)) {
-            this.#baseSizes.set(child, {
-                width: child.width,
-                height: child.height,
-            });
-        }
-    }
-    #naturalSize(child) {
-        const measured = child.measureControlNaturalSize?.();
-        if (measured) {
-            return measured;
-        }
-        return this.#baseSizes.get(child) ?? { width: child.width, height: child.height };
-    }
-};
-__decorate([
-    slot()
-], FlexLayout.prototype, "default", void 0);
-__decorate([
-    prop({ type: String, default: 'row' })
-], FlexLayout.prototype, "direction", null);
-__decorate([
-    prop({ type: String, default: 'start' })
-], FlexLayout.prototype, "align", null);
-__decorate([
-    prop({ type: String, default: 'start' })
-], FlexLayout.prototype, "justify", null);
-__decorate([
-    prop({ type: Number, default: 0 })
-], FlexLayout.prototype, "gap", null);
-__decorate([
-    prop({ type: Number, default: 0 })
-], FlexLayout.prototype, "paddingX", null);
-__decorate([
-    prop({ type: Number, default: 0 })
-], FlexLayout.prototype, "paddingY", null);
-__decorate([
-    prop({ type: Number })
-], FlexLayout.prototype, "paddingLeft", null);
-__decorate([
-    prop({ type: Number })
-], FlexLayout.prototype, "paddingRight", null);
-__decorate([
-    prop({ type: Number })
-], FlexLayout.prototype, "paddingTop", null);
-__decorate([
-    prop({ type: Number })
-], FlexLayout.prototype, "paddingBottom", null);
-FlexLayout = __decorate([
-    scene()
-], FlexLayout);
-export { FlexLayout };
-const defaultItemProps = {
-    grow: 0,
-    shrink: 1,
-    basis: 'auto',
-    minWidth: 0,
-    minHeight: 0,
-    maxWidth: -1,
-    maxHeight: -1,
-    marginLeft: 0,
-    marginRight: 0,
-    marginTop: 0,
-    marginBottom: 0,
-    alignSelf: 'auto',
-};
-function setChildBox(child, x, y, width, height) {
-    if (child.setControlLayoutBox) {
-        child.setControlLayoutBox(x, y, width, height);
-        return;
-    }
-    child.position.set(x, y);
-    child.width = width;
-    child.height = height;
-}
-function marginMain(props, horizontal) {
-    return horizontal
-        ? props.marginLeft + props.marginRight
-        : props.marginTop + props.marginBottom;
-}
-function marginCross(props, horizontal) {
-    return horizontal
-        ? props.marginTop + props.marginBottom
-        : props.marginLeft + props.marginRight;
-}
-function clampMain(value, props, horizontal) {
-    return horizontal
-        ? clamp(value, props.minWidth, maxSize(props.maxWidth))
-        : clamp(value, props.minHeight, maxSize(props.maxHeight));
-}
-function clampCross(value, props, horizontal) {
-    return horizontal
-        ? clamp(value, props.minHeight, maxSize(props.maxHeight))
-        : clamp(value, props.minWidth, maxSize(props.maxWidth));
-}
-function basisSize(basis, naturalSize) {
-    return basis === 'auto' ? naturalSize : basis;
-}
-function maxSize(value) {
-    return value >= 0 ? value : Number.POSITIVE_INFINITY;
-}
-function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
-function justifyOffset(justify, remaining) {
-    if (justify === 'center') {
-        return remaining / 2;
-    }
-    if (justify === 'end') {
-        return remaining;
-    }
-    return 0;
-}
-function alignOffset(align, remaining) {
-    if (align === 'center') {
-        return remaining / 2;
-    }
-    if (align === 'end') {
-        return remaining;
-    }
-    return 0;
-}
-function parseAlign(value) {
-    if (value === 'center' || value === 'end' || value === 'stretch') {
-        return value;
-    }
-    return 'start';
-}
-function parseJustify(value) {
-    if (value === 'center' || value === 'end' || value === 'space-between') {
-        return value;
-    }
-    return 'start';
-}
-function finiteNumber(value, fallback) {
-    return Number.isFinite(value) ? value : fallback;
-}

package/dist/builtin-scenes/FlexLayout.scene

@@ -1,3 +0,0 @@
-<Scene name="FlexLayout">
-    <slot name="default" />
-</Scene>