{"size": 2054, "ext": "js", "max_stars_repo_path": "src/Oro/Bundle/WorkflowBundle/Resources/public/js/app/views/flowchart/jsplumb/box-view.js", "max_stars_repo_name": "elliott-cs/platform", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Oro/Bundle/WorkflowBundle/Resources/public/js/app/views/flowchart/jsplumb/box-view.js", "max_issues_repo_name": "elliott-cs/platform", "max_issues_repo_issues_event_min_datetime": "2020-02-17T08:43:09.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-02T10:23:27.000Z", "max_forks_repo_path": "src/Oro/Bundle/WorkflowBundle/Resources/public/js/app/views/flowchart/jsplumb/box-view.js", "max_forks_repo_name": "elliott-cs/platform", "max_forks_repo_forks_event_min_datetime": "2020-04-01T12:03:57.000Z", "max_forks_repo_forks_event_max_datetime": "2020-04-01T12:03:57.000Z"}
{"max_stars_count": null, "max_issues_count": 9, "max_forks_count": 1, "avg_line_length": 29.768115942, "max_line_length": 94, "alphanum_fraction": 0.5506329114}
define(function(require) {
    'use strict';

    const FlowchartJsPlumbBaseView = require('./base-view');
    const FlowchartJsPlumbAreaView = require('./area-view');

    const FlowchartJsPlumbBoxView = FlowchartJsPlumbBaseView.extend({
        areaView: null,

        className: function() {
            return 'jsplumb-box';
        },

        isConnected: false,

        listen: {
            'change model': 'render',
            'change:position model': 'refreshPosition'
        },

        /**
         * @inheritDoc
         */
        constructor: function FlowchartJsPlumbBoxView(options) {
            FlowchartJsPlumbBoxView.__super__.constructor.call(this, options);
        },

        /**
         * @inheritDoc
         */
        initialize: function(options) {
            if (!(options.areaView instanceof FlowchartJsPlumbAreaView)) {
                throw new Error('areaView options is required and must be a JsplumbAreaView');
            }
            this.areaView = options.areaView;
            FlowchartJsPlumbBoxView.__super__.initialize.call(this, options);

            // append $el to the area view
            this.areaView.$el.append(this.$el);
        },

        connect: function() {
            // set position once, right after render
            // all other changes should be done by jsPlumb
            // or jsPlumb.redraw must be called
            if (this.model.get('position')) {
                this.refreshPosition();
            } else {
                this.model.set('position', this.areaView.jsPlumbManager.getPositionForNew());
            }
        },

        refreshPosition: function() {
            this.$el.css({
                top: this.model.get('position')[1],
                left: this.model.get('position')[0]
            });
            this.areaView.debouncedRepaintEverything();
        },

        cleanup: function() {
            const instance = this.areaView.jsPlumbInstance;
            instance.detach(this.$el);
        }
    });

    return FlowchartJsPlumbBoxView;
});
