System.register(['src/client/lively.js', 'src/client/morphic/node-helpers.js', 'src/client/morphic/event-helpers.js', 'src/client/graphics.js', 'src/components/halo/lively-halo-item.js', 'src/client/preferences.js', 'src/client/morphic/snapping.js', 'src/client/vivide/components/vivide-view.js', 'src/client/svg.js', 'utils'], function (_export, _context) {
  "use strict";

  var lively, nodes, events, pt, HaloItem, Preferences, Snapping, Grid, VivideView, svg, cancelEvent;
  return {
    setters: [function (_srcClientLivelyJs) {
      lively = _srcClientLivelyJs.default;
    }, function (_srcClientMorphicNodeHelpersJs) {
      nodes = _srcClientMorphicNodeHelpersJs;
    }, function (_srcClientMorphicEventHelpersJs) {
      events = _srcClientMorphicEventHelpersJs;
    }, function (_srcClientGraphicsJs) {
      pt = _srcClientGraphicsJs.pt;
    }, function (_srcComponentsHaloLivelyHaloItemJs) {
      HaloItem = _srcComponentsHaloLivelyHaloItemJs.default;
    }, function (_srcClientPreferencesJs) {
      Preferences = _srcClientPreferencesJs.default;
    }, function (_srcClientMorphicSnappingJs) {
      Snapping = _srcClientMorphicSnappingJs.default;
      Grid = _srcClientMorphicSnappingJs.Grid;
    }, function (_srcClientVivideComponentsVivideViewJs) {
      VivideView = _srcClientVivideComponentsVivideViewJs.default;
    }, function (_srcClientSvgJs) {
      svg = _srcClientSvgJs.default;
    }, function (_utils) {
      cancelEvent = _utils.cancelEvent;
    }],
    execute: function () {
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js = _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js || {};
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively = lively;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.nodes = nodes;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.events = events;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.pt = pt;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.HaloItem = HaloItem;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.Preferences = Preferences;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.Snapping = Snapping;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.Grid = Grid;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.VivideView = VivideView;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.svg = svg;
      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.cancelEvent = cancelEvent;
      class HaloVivideOutportConnectionItem extends _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.HaloItem {

        get path() {
          return this.get('#path-to-target');
        }
        get overlay() {
          return this.get('#overlay-target');
        }

        initialize() {
          this.addEventListener('click', evt => this.removeConnection(evt));
          this.path.addEventListener('click', _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.cancelEvent);
          this.overlay.addEventListener('click', _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.cancelEvent);
        }

        setTarget(target) {
          this._target = target;
        }

        updateTarget(view) {
          this._view = view;
          if (!this._target) {
            this.classList.add('broken');
            return;
          }

          let offset = _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.getGlobalPosition(this.get('svg'));
          let startPoint = _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.getGlobalBounds(this).rightCenter().subPt(offset);
          let startOffsetPoint = startPoint.addPt(_recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.pt(20, 0));
          let targetCenterPoint = _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.getGlobalCenter(this._target).subPt(offset);

          _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.svg.setPathVertices(this.path, [{ c: 'M', x1: startPoint.x, y1: startPoint.y }, { c: 'L', x1: startOffsetPoint.x, y1: startOffsetPoint.y }, { c: 'L', x1: startOffsetPoint.x, y1: targetCenterPoint.y }, { c: 'L', x1: targetCenterPoint.x, y1: targetCenterPoint.y }]);

          _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.setGlobalPosition(this.overlay, _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.getGlobalPosition(this._target));
          _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.setExtent(this.overlay, _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.lively.getGlobalBounds(this._target).extent());
        }

        removeConnection(evt) {
          if (this._view && this._target) {
            this._view.removeConnectionTo(this._target);
            HaloService.showHalos(window.that);
            _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.cancelEvent(evt);
          }
        }
      }

      _export('default', HaloVivideOutportConnectionItem);

      _recorder_._src_components_halo_lively_halo_vivide_outport_connection_item_js.HaloVivideOutportConnectionItem = HaloVivideOutportConnectionItem;
    }
  };
});