<commit_before>pc.extend(pc, function () {
    var ElementComponent = function ElementComponent (system, entity) {

        this._anchor = new pc.Vec4();
        this._worldAnchor = new pc.Vec4();

        this._pivot = new pc.Vec2();

        this._width = 32;
        this._height = 32;

        // the world transform in the 2D space
        this._worldTransform = new pc.Mat4();
        // the model transform used to render
        this._modelTransform = new pc.Mat4();
        // transform that updates local position according to anchor values
        this._anchorTransform = new pc.Mat4();

        this._anchorDirty = true;

        this.entity.on('insert', this._onInsert, this);

        this.screen = null;

        this._findScreen();
        entity.sync = this._sync;
    };
    ElementComponent = pc.inherits(ElementComponent, pc.Component);


    pc.extend(ElementComponent.prototype, {
        _onInsert: function (parent) {
            // when the entity is reparented find a possible new screen
            this._findScreen();

            // update all child screens
            var children = this.entity.getChildren();
            for (var i = 0, l = children.length; i < l; i++) {
                if (children[i].element) children[i].element._findScreen();
            }

            if (this.screen) {
                this.entity.sync = this._sync;

                // calculate draw order
                this.screen.screen.syncDrawOrder();
            }
        },

        _findScreen: function () {
            var screen = this.entity._parent;
            while(screen && !screen.screen) {
                screen = screen._parent;
            }

            if (this.screen && this.screen !== screen) {
                this.screen.screen.off('set:resolution', this._onScreenResize, this);
                this.screen.screen.off('set:screenspace', this._onScreenSpaceChange, this);
            }

            this.screen = screen;
            if (this.screen) {
                this.screen.screen.on('set:resolution', this._onScreenResize, this);
                this.screen.screen.on('set:screenspace', this._onScreenSpaceChange, this);

                this._setAnchors();
                this.fire('set:screen', this.screen);
            }
        },

        _onScreenResize: function (res) {
            this._anchorDirty = true;
            this.entity.dirtyWorld = true;

            var minx = this._worldAnchor.x;
            var miny = this._worldAnchor.y;
            var maxx = this._worldAnchor.z;
            var maxy = this._worldAnchor.w;
            var oldWidth = this.width;
            var oldHeight = this.height;
            var px = this.pivot.x;
            var py = this.pivot.y;

            this._setAnchors();

            // calculate new width
            var l = minx + this.left;
            var r = minx + this.right;
            var ldist = l - minx;
            var rdist = r - maxx;
            var newl = this._worldAnchor.x + ldist;
            var newr = this._worldAnchor.z + rdist;
            var newleft = newl - this._worldAnchor.x;
            var newright = newr - this._worldAnchor.x;
            this.width = newright - newleft;

            // calculate new height
            var b = miny + this.bottom;
            var t = miny + this.top;
            var bdist = b - miny;
            var tdist = t - maxy;
            var newb = this._worldAnchor.y + bdist;
            var newt = this._worldAnchor.w + tdist;
            var newbottom = newb - this._worldAnchor.y;
            var newtop = newt - this._worldAnchor.y;
            this.height = newtop - newbottom;

            // shift position based on pivot
            var p = this.entity.getLocalPosition();
            p.x = p.x - px*oldWidth + px*this.width;
            p.y = p.y - py*oldHeight + py*this.height;
            this.entity.setLocalPosition(p);

            this.fire('screen:set:resolution', res);
        },

        _onScreenSpaceChange: function () {
            this.entity.dirtyWorld = true;
            this.fire('screen:set:screenspace', this.screen.screen.screenSpace);
        },

        _sync: function () {
            if (this.dirtyLocal) {
                this.localTransform.setTRS(this.localPosition, this.localRotation, this.localScale);

                this.dirtyLocal = false;
                this.dirtyWorld = true;
                this._aabbVer++;
            }

            var resx = 0;
            var resy = 0;
            var screen = this.element.screen;

            if (this.element._anchorDirty) {
                var px = 0;
                var py = 0;
                if (this._parent && this._parent.element) {
                    // use parent rect
                    resx = this._parent.element.width;
                    resy = this._parent.element.height;
                    px = this._parent.element.pivot.x;// - 0.5;
                    py = this._parent.element.pivot.y;// - 0.5;
                } else if (screen) {
                    // use screen rect
                    var resolution = screen.screen.resolution;
                    resx = resolution.x;
                    resy = resolution.y;
                }
                // this.element._anchorTransform.copy(pc.Mat4.IDENTITY);
                this.element._anchorTransform.setTranslate((resx*(this.element.anchor.x - px)), -(resy * (this.element.anchor.y - py)), 0);
                this.element._anchorDirty = false;
            }

            if (this.dirtyWorld) {
                if (this._parent === null) {
                    this.worldTransform.copy(this.localTransform);
                } else {
                    // transform element hierarchy
                    if (this._parent.element) {
                        this.element._worldTransform.mul2(this.element._anchorTransform, this.localTransform);
                        // this.element._worldTransform.copy(this.localTransform);
                        this.element._worldTransform.mul2(this._parent.element._worldTransform, this.element._worldTransform);
                    } else {
                        this.element._worldTransform.mul2(this.element._anchorTransform, this.localTransform);
                        // this.element._worldTransform.copy(this.localTransform);
                    }

                    if (screen) {
                        this.element._modelTransform.mul2(screen.screen._screenMatrix, this.element._worldTransform);

                        if (!screen.screen.screenSpace) {
                            this.worldTransform.mul2(screen.worldTransform, this.element._modelTransform);
                        } else {
                            this.worldTransform.copy(this.element._modelTransform);
                        }
                    } else {
                        this.worldTransform.copy(this.element._worldTransform);
                    }
                }

                this.dirtyWorld = false;
                var child;

                for (var i = 0, len = this._children.length; i < len; i++) {
                    child = this._children[i];
                    child.dirtyWorld = true;
                    child._aabbVer++;

                }
            }
        },

        // store pixel positions of anchor relative to current parent resolution
        _setAnchors: function () {
            var resx = 0;
            var resy = 0;
            if (this._parent && this._parent.element) {
                resx = this._parent.element.width;
                resy = this._parent.element.height;
            } else if (this.screen) {
                var res = this.screen.screen.resolution
                resx = res.x;
                resy = res.y;
            }

            this._worldAnchor.set(
                this._anchor.x*resx,
                this._anchor.y*resy,
                this._anchor.z*resx,
                this._anchor.w*resy
            );
        }
    });

    Object.defineProperty(ElementComponent.prototype, "drawOrder", {
        get: function () {
            return this._drawOrder;
        },

        set: function (value) {
            this._drawOrder = value;
            this.fire('set:draworder', this._drawOrder);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "left", {
        get: function () {
            var p = this.entity.getLocalPosition();
            return p.x - this.pivot.x * this.width;
        },

        set: function (value) {
            var change = value - this.left;
            this.width = this.right - value;
            this.entity.translateLocal(change/2,0,0);

            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "right", {
        get: function () {
            var p = this.entity.getLocalPosition();

            return p.x + (1 - this.pivot.x) * this.width;
        },

        set: function (value) {
            var change = value - this.right;
            this.width = value - this.left;
            this.entity.translateLocal(change/2, 0, 0);
            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "top", {
        get: function () {
            var p = this.entity.getLocalPosition();
            return p.y + this.pivot.y*this.height;
        },

        set: function (value) {
            var change = value - this.top;
            this.height = value - this.bottom;
            this.entity.translateLocal(0, change/2, 0);
            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "bottom", {
        get: function () {
            var p = this.entity.getLocalPosition();
            return p.y - (1 - this.pivot.y) * this.height;
        },

        set: function (value) {
            var change = value - this.bottom;
            this.height = this.top - value;
            this.entity.translateLocal(0, change/2, 0);
            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "width", {
        get: function () {
            return this._width;
        },

        set: function (value) {
            this._width = value;
            this.fire('set:width', this._width);
            this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "height", {
        get: function () {
            return this._height;
        },

        set: function (value) {
            this._height = value;
            this.fire('set:height', this._height);
            this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "pivot", {
        get: function () {
            return this._pivot;
        },

        set: function (value) {
            if (value instanceof pc.Vec2) {
                this._pivot.set(value.x, value.y);
            } else {
                this._pivot.set(value[0], value[1]);
            }
            this.fire('set:pivot', this._pivot);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "anchor", {
        get: function () {
            return this._anchor;
        },

        set: function (value) {
            if (value instanceof pc.Vec4) {
                this._anchor.set(value.x, value.y, value.z, value.w);
            } else {
                this._anchor.set(value[0], value[1], value[2], value[3]);
            }

            this._setAnchors();

            this._anchorDirty = true;
            this.fire('set:anchor', this._anchor);
        }
    });

    return {
        ElementComponent: ElementComponent
    };
}());

<commit_msg>change y anchor so that 0,0 is bottom left 1,1 is top right<commit_after>pc.extend(pc, function () {
    var ElementComponent = function ElementComponent (system, entity) {

        this._anchor = new pc.Vec4();
        this._worldAnchor = new pc.Vec4();

        this._pivot = new pc.Vec2();

        this._width = 32;
        this._height = 32;

        // the world transform in the 2D space
        this._worldTransform = new pc.Mat4();
        // the model transform used to render
        this._modelTransform = new pc.Mat4();
        // transform that updates local position according to anchor values
        this._anchorTransform = new pc.Mat4();

        this._anchorDirty = true;

        this.entity.on('insert', this._onInsert, this);

        this.screen = null;

        this._findScreen();
        entity.sync = this._sync;
    };
    ElementComponent = pc.inherits(ElementComponent, pc.Component);


    pc.extend(ElementComponent.prototype, {
        _onInsert: function (parent) {
            // when the entity is reparented find a possible new screen
            this._findScreen();

            // update all child screens
            var children = this.entity.getChildren();
            for (var i = 0, l = children.length; i < l; i++) {
                if (children[i].element) children[i].element._findScreen();
            }

            if (this.screen) {
                this.entity.sync = this._sync;

                // calculate draw order
                this.screen.screen.syncDrawOrder();
            }
        },

        _findScreen: function () {
            var screen = this.entity._parent;
            while(screen && !screen.screen) {
                screen = screen._parent;
            }

            if (this.screen && this.screen !== screen) {
                this.screen.screen.off('set:resolution', this._onScreenResize, this);
                this.screen.screen.off('set:screenspace', this._onScreenSpaceChange, this);
            }

            this.screen = screen;
            if (this.screen) {
                this.screen.screen.on('set:resolution', this._onScreenResize, this);
                this.screen.screen.on('set:screenspace', this._onScreenSpaceChange, this);

                this._setAnchors();
                this.fire('set:screen', this.screen);
            }
        },

        _onScreenResize: function (res) {
            this._anchorDirty = true;
            this.entity.dirtyWorld = true;

            var minx = this._worldAnchor.x;
            var miny = this._worldAnchor.y;
            var maxx = this._worldAnchor.z;
            var maxy = this._worldAnchor.w;
            var oldWidth = this.width;
            var oldHeight = this.height;
            var px = this.pivot.x;
            var py = this.pivot.y;

            this._setAnchors();

            // calculate new width
            var l = minx + this.left;
            var r = minx + this.right;
            var ldist = l - minx;
            var rdist = r - maxx;
            var newl = this._worldAnchor.x + ldist;
            var newr = this._worldAnchor.z + rdist;
            var newleft = newl - this._worldAnchor.x;
            var newright = newr - this._worldAnchor.x;
            this.width = newright - newleft;

            // calculate new height
            var b = miny + this.bottom;
            var t = miny + this.top;
            var bdist = b - miny;
            var tdist = t - maxy;
            var newb = this._worldAnchor.y + bdist;
            var newt = this._worldAnchor.w + tdist;
            var newbottom = newb - this._worldAnchor.y;
            var newtop = newt - this._worldAnchor.y;
            this.height = newtop - newbottom;

            // shift position based on pivot
            var p = this.entity.getLocalPosition();
            p.x = p.x - px*oldWidth + px*this.width;
            p.y = p.y - py*oldHeight + py*this.height;
            this.entity.setLocalPosition(p);

            this.fire('screen:set:resolution', res);
        },

        _onScreenSpaceChange: function () {
            this.entity.dirtyWorld = true;
            this.fire('screen:set:screenspace', this.screen.screen.screenSpace);
        },

        _sync: function () {
            if (this.dirtyLocal) {
                this.localTransform.setTRS(this.localPosition, this.localRotation, this.localScale);

                this.dirtyLocal = false;
                this.dirtyWorld = true;
                this._aabbVer++;
            }

            var resx = 0;
            var resy = 0;
            var screen = this.element.screen;

            if (this.element._anchorDirty) {
                var px = 0;
                var py = 0;
                if (this._parent && this._parent.element) {
                    // use parent rect
                    resx = this._parent.element.width;
                    resy = this._parent.element.height;
                    px = this._parent.element.pivot.x;// - 0.5;
                    py = this._parent.element.pivot.y;// - 0.5;
                } else if (screen) {
                    // use screen rect
                    var resolution = screen.screen.resolution;
                    resx = resolution.x;
                    resy = resolution.y;
                }
                // this.element._anchorTransform.copy(pc.Mat4.IDENTITY);
                this.element._anchorTransform.setTranslate((resx*(this.element.anchor.x - px)), -(resy * ((1-this.element.anchor.y) - py)), 0);
                this.element._anchorDirty = false;
            }

            if (this.dirtyWorld) {
                if (this._parent === null) {
                    this.worldTransform.copy(this.localTransform);
                } else {
                    // transform element hierarchy
                    if (this._parent.element) {
                        this.element._worldTransform.mul2(this.element._anchorTransform, this.localTransform);
                        // this.element._worldTransform.copy(this.localTransform);
                        this.element._worldTransform.mul2(this._parent.element._worldTransform, this.element._worldTransform);
                    } else {
                        this.element._worldTransform.mul2(this.element._anchorTransform, this.localTransform);
                        // this.element._worldTransform.copy(this.localTransform);
                    }

                    if (screen) {
                        this.element._modelTransform.mul2(screen.screen._screenMatrix, this.element._worldTransform);

                        if (!screen.screen.screenSpace) {
                            this.worldTransform.mul2(screen.worldTransform, this.element._modelTransform);
                        } else {
                            this.worldTransform.copy(this.element._modelTransform);
                        }
                    } else {
                        this.worldTransform.copy(this.element._worldTransform);
                    }
                }

                this.dirtyWorld = false;
                var child;

                for (var i = 0, len = this._children.length; i < len; i++) {
                    child = this._children[i];
                    child.dirtyWorld = true;
                    child._aabbVer++;

                }
            }
        },

        // store pixel positions of anchor relative to current parent resolution
        _setAnchors: function () {
            var resx = 0;
            var resy = 0;
            if (this._parent && this._parent.element) {
                resx = this._parent.element.width;
                resy = this._parent.element.height;
            } else if (this.screen) {
                var res = this.screen.screen.resolution
                resx = res.x;
                resy = res.y;
            }

            this._worldAnchor.set(
                this._anchor.x*resx,
                this._anchor.y*resy,
                this._anchor.z*resx,
                this._anchor.w*resy
            );
        }
    });

    Object.defineProperty(ElementComponent.prototype, "drawOrder", {
        get: function () {
            return this._drawOrder;
        },

        set: function (value) {
            this._drawOrder = value;
            this.fire('set:draworder', this._drawOrder);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "left", {
        get: function () {
            var p = this.entity.getLocalPosition();
            return p.x - this.pivot.x * this.width;
        },

        set: function (value) {
            var change = value - this.left;
            this.width = this.right - value;
            this.entity.translateLocal(change/2,0,0);

            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "right", {
        get: function () {
            var p = this.entity.getLocalPosition();

            return p.x + (1 - this.pivot.x) * this.width;
        },

        set: function (value) {
            var change = value - this.right;
            this.width = value - this.left;
            this.entity.translateLocal(change/2, 0, 0);
            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "top", {
        get: function () {
            var p = this.entity.getLocalPosition();
            return p.y + this.pivot.y*this.height;
        },

        set: function (value) {
            var change = value - this.top;
            this.height = value - this.bottom;
            this.entity.translateLocal(0, change/2, 0);
            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "bottom", {
        get: function () {
            var p = this.entity.getLocalPosition();
            return p.y - (1 - this.pivot.y) * this.height;
        },

        set: function (value) {
            var change = value - this.bottom;
            this.height = this.top - value;
            this.entity.translateLocal(0, change/2, 0);
            // this.fire('set:left', this._width);
            // this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "width", {
        get: function () {
            return this._width;
        },

        set: function (value) {
            this._width = value;
            this.fire('set:width', this._width);
            this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "height", {
        get: function () {
            return this._height;
        },

        set: function (value) {
            this._height = value;
            this.fire('set:height', this._height);
            this.fire('resize', this._width, this._height);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "pivot", {
        get: function () {
            return this._pivot;
        },

        set: function (value) {
            if (value instanceof pc.Vec2) {
                this._pivot.set(value.x, value.y);
            } else {
                this._pivot.set(value[0], value[1]);
            }
            this.fire('set:pivot', this._pivot);
        }
    });

    Object.defineProperty(ElementComponent.prototype, "anchor", {
        get: function () {
            return this._anchor;
        },

        set: function (value) {
            if (value instanceof pc.Vec4) {
                this._anchor.set(value.x, value.y, value.z, value.w);
            } else {
                this._anchor.set(value[0], value[1], value[2], value[3]);
            }

            this._setAnchors();

            this._anchorDirty = true;
            this.fire('set:anchor', this._anchor);
        }
    });

    return {
        ElementComponent: ElementComponent
    };
}());


{'fraction_non_alphanumeric': 0.1166652861757641, 'fraction_numerical': 0.004514205251387393, 'mean_word_length': 1.4302536231884058, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '816219', 'n_tokens_mistral': 6606, 'n_tokens_neox': 6298, 'n_words': 1292}