<commit_before>define([
    "DragHandler", 
    "Component", 
    "Components",
    "Toolbar",
    "utils/getMatrix"
], function (DragHandler, Component, Components, Toolbar, getMatrix) {

    // TODO: perhaps abstracting this queue and step function to a singleton
    // class would make sense for use in other projects...
    const RENDER_QUEUE = [];
    const LAYOUT = {
        margin: 10, 
        marginWide: 20, 
        marginTall: 20
    };

    if ( !window.requestAnimationFrame ) {
        alert ("Error: you're missing window.requestAnimationFrame");
    } else { window.requestAnimationFrame(step); }

    /**
     * @private
     * @callback
     * callback for requestAnimationFrame.
     * Objects in the RENDER_QUEUE must have a `render` method. 
     */
    function step ( time ) {
        for (var i=0; i<RENDER_QUEUE.length; i++) {
            if ( RENDER_QUEUE[i].sleep ) {
                // sleep
            } else {
                RENDER_QUEUE[i].render();
            }
        }
        window.requestAnimationFrame(step);
    }

    /**
     * @constructor
     */
    function App () {
        initializeApp.call(this);
        postInitialize.call(this);
        return this;
    }

    /**
     * @private
     * Initializer function for App constructor. Context (this) is an instance of App.
     * Extends the App context.
     */
    function initializeApp () {
        this.tools = new Toolbar();
        this.sleep = true;
        this.el = document.getElementById("app"); 
        this.canvas = document.createElement("canvas");
        this.ctx = this.canvas.getContext("2d");
        this.components = new Components();
        /**
         * @public
         * Main rendering function for the App. This is executed in a `requestAnimationFrame`.
         */
        this.render = function () {
            var _cList = this.components.list;
            var i = 0, j=0;
            var len = _cList.length;
            var _tolen = _cList.length;
            var c1Matrix = null;
            var c2Matrix = null;
            var _style = null;
            this.canvas.width = this.canvas.width;
            this.components.computeStyles();
            for (; i<len; i++) {
                // we only need to handle the `to` connections
                c1Matrix = getMatrix(_cList[i]._style);
                _tolen = _cList[i].connections.to.length 
                if ( _tolen ) {
                    for (j=0; j<_tolen; j++) {
                        _style = _cList[i].connections.to[j]._style;
                        c2Matrix = getMatrix(_style);
                        this.drawLine(c1Matrix[4]+50, c1Matrix[5]+25, c2Matrix[4], c2Matrix[5]+25);
                    }
                }
            }
        }.bind( this );
    }

    /**
     * @private
     * Does not extend the App context
     */
    function postInitialize () {
        /**
         * @private 
         * @callback 
         * Callback for window's resize event. 
         */
        var renderApp = function (event) {
            var appStyle = window.getComputedStyle(this.el);
            this.el.style.width=(window.innerWidth - LAYOUT.marginWide) + "px";
            this.el.style.height=(window.innerHeight - LAYOUT.marginTall) + "px";
            this.canvas.width = parseInt(appStyle.width);
            this.canvas.height = parseInt(appStyle.height);
        }.bind( this );
        // resize the app frame on resize
        window.addEventListener("resize", renderApp);
        RENDER_QUEUE.push(this);

        // ON RENDER START
        RENDER_QUEUE.push({
            render: function() { this.sleep=false; RENDER_QUEUE.pop(); }.bind(this)
        });
        this.el.appendChild(this.canvas);
        this.el.appendChild(this.tools.el);
        renderApp(); // render immediately
    }

    /**
     * @private
     * Add Component instances to the app and bind associated listeners.
     */
    function _addComponent (component) {
        this.components.add(component);
        bindComponentEvents.call(this, component.el);
        this.el.appendChild(component.el);
    }

    App.prototype.select = function (hash) {
        this.components.select(hash);
        var component = this.components.selected;
        this.tools.setToolName(component.type);
        this.tools.clearControls();
        for (var ctrl in component.controls) {
            this.tools.addControl(component.controls[ctrl]);
        }
    };

    /**
     * @private
     * Handle the component's handles (in/out) DOM elements, and the 
     * component itself.
     * @param {Element} el reference to the DOM element of the component object.
     */
    function bindComponentEvents (el) {
        var that = this;
        var _in = el.querySelector(".in");
        var _out = el.querySelector(".out");
        var dragFromOutput = null; // shall represent user's selection of either .in or .out elements.
        var index = null;
        _in.addEventListener("mousedown", select);
        _in.addEventListener("touchstart", select);
        _out.addEventListener("mousedown", select);
        _out.addEventListener("touchstart", select);
        new DragHandler(_in, drag, start, stop);
        new DragHandler(_out, drag, start, stop);
        el.addEventListener("mousedown", wakeup);
        el.addEventListener("mouseup", sleep);
        el.addEventListener("touchstart", wakeup);
        el.addEventListener("touchend", sleep);

        function select (event) {
            that.select(this.parentElement.dataset.hash);<commit_msg>select parent element<commit_after>define([
    "DragHandler", 
    "Component", 
    "Components",
    "Toolbar",
    "utils/getMatrix"
], function (DragHandler, Component, Components, Toolbar, getMatrix) {

    // TODO: perhaps abstracting this queue and step function to a singleton
    // class would make sense for use in other projects...
    const RENDER_QUEUE = [];
    const LAYOUT = {
        margin: 10, 
        marginWide: 20, 
        marginTall: 20
    };

    if ( !window.requestAnimationFrame ) {
        alert ("Error: you're missing window.requestAnimationFrame");
    } else { window.requestAnimationFrame(step); }

    /**
     * @private
     * @callback
     * callback for requestAnimationFrame.
     * Objects in the RENDER_QUEUE must have a `render` method. 
     */
    function step ( time ) {
        for (var i=0; i<RENDER_QUEUE.length; i++) {
            if ( RENDER_QUEUE[i].sleep ) {
                // sleep
            } else {
                RENDER_QUEUE[i].render();
            }
        }
        window.requestAnimationFrame(step);
    }

    /**
     * @constructor
     */
    function App () {
        initializeApp.call(this);
        postInitialize.call(this);
        return this;
    }

    /**
     * @private
     * Initializer function for App constructor. Context (this) is an instance of App.
     * Extends the App context.
     */
    function initializeApp () {
        this.tools = new Toolbar();
        this.sleep = true;
        this.el = document.getElementById("app"); 
        this.canvas = document.createElement("canvas");
        this.ctx = this.canvas.getContext("2d");
        this.components = new Components();
        /**
         * @public
         * Main rendering function for the App. This is executed in a `requestAnimationFrame`.
         */
        this.render = function () {
            var _cList = this.components.list;
            var i = 0, j=0;
            var len = _cList.length;
            var _tolen = _cList.length;
            var c1Matrix = null;
            var c2Matrix = null;
            var _style = null;
            this.canvas.width = this.canvas.width;
            this.components.computeStyles();
            for (; i<len; i++) {
                // we only need to handle the `to` connections
                c1Matrix = getMatrix(_cList[i]._style);
                _tolen = _cList[i].connections.to.length 
                if ( _tolen ) {
                    for (j=0; j<_tolen; j++) {
                        _style = _cList[i].connections.to[j]._style;
                        c2Matrix = getMatrix(_style);
                        this.drawLine(c1Matrix[4]+50, c1Matrix[5]+25, c2Matrix[4], c2Matrix[5]+25);
                    }
                }
            }
        }.bind( this );
    }

    /**
     * @private
     * Does not extend the App context
     */
    function postInitialize () {
        /**
         * @private 
         * @callback 
         * Callback for window's resize event. 
         */
        var renderApp = function (event) {
            var appStyle = window.getComputedStyle(this.el);
            this.el.style.width=(window.innerWidth - LAYOUT.marginWide) + "px";
            this.el.style.height=(window.innerHeight - LAYOUT.marginTall) + "px";
            this.canvas.width = parseInt(appStyle.width);
            this.canvas.height = parseInt(appStyle.height);
        }.bind( this );
        // resize the app frame on resize
        window.addEventListener("resize", renderApp);
        RENDER_QUEUE.push(this);

        // ON RENDER START
        RENDER_QUEUE.push({
            render: function() { this.sleep=false; RENDER_QUEUE.pop(); }.bind(this)
        });
        this.el.appendChild(this.canvas);
        this.el.appendChild(this.tools.el);
        renderApp(); // render immediately
    }

    /**
     * @private
     * Add Component instances to the app and bind associated listeners.
     */
    function _addComponent (component) {
        this.components.add(component);
        bindComponentEvents.call(this, component.el);
        this.el.appendChild(component.el);
    }

    App.prototype.select = function (hash) {
        this.components.select(hash);
        var component = this.components.selected;
        this.tools.setToolName(component.type);
        this.tools.clearControls();
        for (var ctrl in component.controls) {
            this.tools.addControl(component.controls[ctrl]);
        }
    };

    /**
     * @private
     * Handle the component's handles (in/out) DOM elements, and the 
     * component itself.
     * @param {Element} el reference to the DOM element of the component object.
     */
    function bindComponentEvents (el) {
        var that = this;
        var _in = el.querySelector(".in");
        var _out = el.querySelector(".out");
        var dragFromOutput = null; // shall represent user's selection of either .in or .out elements.
        var index = null;
        _in.addEventListener("mousedown", selectParent);
        _in.addEventListener("touchstart", selectParent);
        _out.addEventListener("mousedown", selectParent);
        _out.addEventListener("touchstart", selectParent);
        new DragHandler(_in, drag, start, stop);
        new DragHandler(_out, drag, start, stop);
        el.addEventListener("click", function() {
            that.select(this.dataset.hash);
        });
        el.addEventListener("mousedown", wakeup);
        el.addEventListener("mouseup", sleep);
        el.addEventListener("touchstart", wakeup);
        el.addEventListener("touchend", sleep);

        function selectParent (event) {
            that.select(this.parentElement.dataset.hash);
{'fraction_non_alphanumeric': 0.11779871977240398, 'fraction_numerical': 0.005156472261735419, 'mean_word_length': 1.9052169421487604, 'pattern_counts': {'":': 0, '<': 9, '<?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': '5763353', 'n_tokens_mistral': 3162, 'n_tokens_neox': 3053, 'n_words': 730}