pixifact 0.1.3 → 0.1.4

package/dist/builtin-scenes/FlexLayout.js

@@ -0,0 +1,358 @@
+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

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