<commit_before>/*globals define, _*/
/*jshint browser: true, camelcase: false*/

/**
 * @author brollb / https://github.com/brollb
 */

define([
    'decorators/EllipseDecorator/EasyDAG/EllipseDecorator.EasyDAGWidget',
    'css!./OperationDecorator.EasyDAGWidget.css'
], function (
    DecoratorBase
) {

    'use strict';

    var OperationDecorator,
        NAME_MARGIN = 25,
        DECORATOR_ID = 'OperationDecorator';

    // Operation nodes need to be able to...
    //     - show their ports
    //     - highlight ports
    //     - unhighlight ports
    //     - report the location of specific ports
    OperationDecorator = function (options) {
        options.color = options.color || '#78909c';
        DecoratorBase.call(this, options);

        this.id = this._node.id;
        this.$ports = this.$el.append('g')
            .attr('id', 'ports');
    };

    _.extend(OperationDecorator.prototype, DecoratorBase.prototype);

    OperationDecorator.prototype.DECORATOR_ID = DECORATOR_ID;
    OperationDecorator.prototype.PORT_COLOR = {
        OPEN: '#90caf9',
        OCCUPIED: '#e57373'
    };

    OperationDecorator.prototype.condense = function() {
        var path,
            width,
            rx,
            ry;

        width = Math.max(this.nameWidth + 2 * NAME_MARGIN, this.dense.width);
        rx = width/2;
        ry = this.dense.height/2;

        path = [
            `M${-rx},${-ry}`,
            `l ${width} 0`,
            `l 0 ${this.dense.height}`,
            `l -${width} 0`,
            `l 0 -${this.dense.height}`
        ].join(' ');


        this.$body
            .attr('d', path);

        // Clear the attributes
        this.$attributes.remove();
        this.$attributes = this.$el.append('g')
            .attr('fill', '#222222');

        this.height = this.dense.height;
        this.width = width;

        this.$name.attr('y', '0');

        this.$el
            .attr('transform', `translate(${this.width/2}, ${this.height/2})`);
        this.expanded = false;
        this.onResize();
    };

    OperationDecorator.prototype.showPorts = function(ids, areInputs) {
        var allPorts = areInputs ? this._node.inputs : this._node.outputs,
            ports = ids ? allPorts.filter(port => ids.indexOf(port.id) > -1) : allPorts,
            x = -this.width/2,
            dx = this.width/(ports.length+1),
            y = (this.height/2);

        if (areInputs) {
            y *= -1;
        }

        ports.forEach(port => {
            x += dx;
            this.renderPort(port, x, y, areInputs);
        });
    };

    OperationDecorator.prototype.renderPort = function(port, x, y, isInput) {
        var color = this.PORT_COLOR.OPEN,
            portIcon = this.$ports.append('g');

        // If the port is incoming and occupied, render it differently
        if (isInput && port.connection) {
            color = this.PORT_COLOR.OCCUPIED;
        }

        portIcon.append('circle')
            .attr('cx', x)
            .attr('cy', y)
            .attr('r', 10)
            .attr('fill', color);
            
        portIcon.append('text')
                .attr('x', x)
                .attr('y', y)
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')<commit_msg>Updated the condensed transform and port locations. Fixes #200 (#201)<commit_after>/*globals define, _*/
/*jshint browser: true, camelcase: false*/

/**
 * @author brollb / https://github.com/brollb
 */

define([
    'decorators/EllipseDecorator/EasyDAG/EllipseDecorator.EasyDAGWidget',
    'css!./OperationDecorator.EasyDAGWidget.css'
], function (
    DecoratorBase
) {

    'use strict';

    var OperationDecorator,
        NAME_MARGIN = 25,
        DECORATOR_ID = 'OperationDecorator';

    // Operation nodes need to be able to...
    //     - show their ports
    //     - highlight ports
    //     - unhighlight ports
    //     - report the location of specific ports
    OperationDecorator = function (options) {
        options.color = options.color || '#78909c';
        DecoratorBase.call(this, options);

        this.id = this._node.id;
        this.$ports = this.$el.append('g')
            .attr('id', 'ports');
    };

    _.extend(OperationDecorator.prototype, DecoratorBase.prototype);

    OperationDecorator.prototype.DECORATOR_ID = DECORATOR_ID;
    OperationDecorator.prototype.PORT_COLOR = {
        OPEN: '#90caf9',
        OCCUPIED: '#e57373'
    };

    OperationDecorator.prototype.condense = function() {
        var path,
            width,
            rx;

        width = Math.max(this.nameWidth + 2 * NAME_MARGIN, this.dense.width);
        rx = width/2;

        path = [
            `M${-rx},0`,
            `l ${width} 0`,
            `l 0 ${this.dense.height}`,
            `l -${width} 0`,
            `l 0 -${this.dense.height}`
        ].join(' ');


        this.$body
            .attr('d', path);

        // Clear the attributes
        this.$attributes.remove();
        this.$attributes = this.$el.append('g')
            .attr('fill', '#222222');

        this.height = this.dense.height;
        this.width = width;

        this.$name.attr('y', this.height/2);

        this.$el
            .attr('transform', `translate(${this.width/2}, 0)`);
        this.expanded = false;
        this.onResize();
    };

    OperationDecorator.prototype.showPorts = function(ids, areInputs) {
        var allPorts = areInputs ? this._node.inputs : this._node.outputs,
            ports = ids ? allPorts.filter(port => ids.indexOf(port.id) > -1) : allPorts,
            x = -this.width/2,
            dx = this.width/(ports.length+1),
            y = areInputs ? 0 : this.height;  // (this.height/2);

        ports.forEach(port => {
            x += dx;
            this.renderPort(port, x, y, areInputs);
        });
    };

    OperationDecorator.prototype.renderPort = function(port, x, y, isInput) {
        var color = this.PORT_COLOR.OPEN,
            portIcon = this.$ports.append('g');

        // If the port is incoming and occupied, render it differently
        if (isInput && port.connection) {
            color = this.PORT_COLOR.OCCUPIED;
        }

        portIcon.append('circle')
            .attr('cx', x)
            .attr('cy', y)
            .attr('r', 10)
            .attr('fill', color);
            
        portIcon.append('text')
                .attr('x', x)
                .attr('y', y)
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')
{'fraction_non_alphanumeric': 0.14862385321100918, 'fraction_numerical': 0.01253822629969419, 'mean_word_length': 1.7929120409906063, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 2, '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': '6348880', 'n_tokens_mistral': 2119, 'n_tokens_neox': 1997, 'n_words': 394}