jpc-like-websites/src/sizeSide/shapes.js

class Shape extends DirectionUnitDependentAttribute {
    constructor(defaultValue = 0, defaultUnit = SizeUnits.PIXEL) {
        super(defaultValue, defaultUnit);
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    topLeft(amount) {
        this._fFirst = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    topRight(amount) {
        this._fSecond = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    bottomLeft(amount) {
        this._fThird = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    bottomRight(amount) {
        this._fForth = amount;
        return this;
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    diagonalPositive(amount) {
        return this.bottomLeft(amount).topRight(amount);
    }
    /**
     * 
     * @param {*} amount 
     * @returns {Shape}
     */
    diagonalNegative(amount) {
        return this.topLeft(amount).bottomRight(amount);
    }

    left(amount) {
        return this.topLeft(amount).bottomLeft(amount);
    }

    right(amount) {
        return this.topRight(amount).bottomRight(amount);
    }

    /**
     * 
     * @param {*} amount 
     */
    getSidingRefValueMap() {
        return {
            [SidingRefCorners.TOPLEFT]: this.getBySidingRef(SidingRefCorners.TOPLEFT),
            [SidingRefCorners.TOPRIGHT]: this.getBySidingRef(SidingRefCorners.TOPRIGHT),
            [SidingRefCorners.BOTTOMLEFT]: this.getBySidingRef(SidingRefCorners.BOTTOMLEFT),
            [SidingRefCorners.BOTTOMRIGHT]: this.getBySidingRef(SidingRefCorners.BOTTOMRIGHT),
        }
    }
}

class ShapeChain extends Shape {
    _modifier;
    constructor(modifier) {
        super();
        this._modifier = modifier;
    }

    toModifier() {
        return this._modifier
            .clip(this);
    }

    ensureModifier() {
        return this.toModifier()
    }

}

class ChainableShape extends ShapeChain {
    toComponent() {
        return this._modifier
            .clip(this)
            .toComponent();
    }

    childContext(innerComponent) {
        return this._modifier
            .clip(this)
            .toComponent()
            .childContext(innerComponent);
    }
}

const Shapes = Object.freeze({
    Rectangle: new Shape(),
    RoundedCorner: new Shape(),
    Circle: new Shape(49, SizeUnits.PERCENT)
})