System.register(['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', 'utils'], function (_export, _context) {
  "use strict";

  var nodes, events, pt, HaloItem, Preferences, Snapping, Grid, getTempKeyFor, asDragImageFor;
  return {
    setters: [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 (_utils) {
      getTempKeyFor = _utils.getTempKeyFor;
      asDragImageFor = _utils.asDragImageFor;
    }],
    execute: function () {
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js = _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js || {};
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.nodes = nodes;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.events = events;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.pt = pt;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.HaloItem = HaloItem;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.Preferences = Preferences;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.Snapping = Snapping;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.Grid = Grid;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.asDragImageFor = asDragImageFor;
      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.getTempKeyFor = getTempKeyFor;
      class HaloVivideAddOutportItem extends _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.HaloItem {

        initialize() {
          this.style['user-select'] = 'none';
          this.setAttribute('draggable', "true");
          this.style['user-drag'] = 'element';
          this.addEventListener('dragstart', evt => this.startMyDrag(evt));
          this.addEventListener('drag', evt => {
            lively.warn('drag');
          });
          this.addEventListener('dragend', evt => {
            HaloService.hideHalos();
          });
        }

        startMyDrag(evt) {
          if (!this._view) {
            lively.warn('No view given to add a connection.');
            return;
          }
          evt.stopPropagation();
          // preventDefault is harmful here: it prevents drag data and images

          this._view.addDragInfoTo(evt);
          const { x, y } = _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.pt(evt.clientX, evt.clientY).subPt(lively.getGlobalPosition(this));
          _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.asDragImageFor.call(this, evt, x, y);
        }

        //   // Drag API
        //   start(evt) {
        //     return lively.warn('start')
        //     this.dragTarget = window.that;
        //     if (this.dragTarget) {
        //       this.dragStartNodePosition = lively.getPosition(this.dragTarget);
        //       this.dragStartEventPosition = events.globalPosition(evt);
        //       evt.preventDefault();

        //       this.snapping = new Snapping(this.dragTarget) 
        //       this.halo.info =  lively.showInfoBox(this.dragTarget)

        //       if (this.dragTarget.haloDragStart) {
        //         this.dragTarget.haloDragStart(this.dragStartEventPosition)
        //       }
        //     }
        //   }

        //   move(evt) {
        //     return lively.warn('move')
        //     if (this.dragTarget && !this.isDragging && 
        //       events.noticableDistanceTo(evt, this.dragStartEventPosition)) {
        //       // this.dragTarget.style.position = 'absolute';
        //       this.isDragging = true;
        //     }
        //     if (this.isDragging) {
        //       this.dragTo(evt);
        //     }
        //   }

        //   stop(evt) {
        //     return lively.warn('stop')
        //     this.halo.info.stop()
        //     //  STOP DRAGGING
        //     if (this.isDragging) {    
        //       this.isDragging = false;
        //       evt.preventDefault();
        //     }
        //     this.dragTarget = null;
        //     this.dragStartEventPosition = null;
        //     this.dragStartNodePosition = null;
        //     this.snapping.clearHelpers()
        //     this.snapping = null
        //   }

        //   dragTo(evt) {
        //     return lively.warn('dragTo')
        //     if (this.dragTarget.haloDragTo) {
        //       this.dragTarget.haloDragTo(events.globalPosition(evt), this.dragStartEventPosition)
        //     } else {
        //       var eventPos = events.globalPosition(evt);
        //       var newPosition = eventPos.subPt(this.dragStartEventPosition).
        //         addPt(this.dragStartNodePosition)

        //       newPosition = newPosition.rounded()
        //       if (this.dragTarget.style.position == "absolute") {
        //         lively.setPosition(this.dragTarget, Grid.optSnapPosition(newPosition, evt));
        //         if(!evt.altKey) {
        //           this.snapping.snap()
        //         }
        //       } else {
        //          lively.setPosition(this.dragTarget, newPosition, "relative");
        //       }
        //       this.halo.info.innerHTML = "drag " + lively.getPosition(this.dragTarget)
        //     }
        //     evt.preventDefault();
        //   }

        updateTarget(view) {
          this._view = view;
        }
      }

      _export('default', HaloVivideAddOutportItem);

      _recorder_._src_components_halo_lively_halo_vivide_add_outport_item_js.HaloVivideAddOutportItem = HaloVivideAddOutportItem;
    }
  };
});