addEdgeMode() {
    // when using the gui, enable edit mode if it wasnt already.
    if (this.editMode !== true) {
      this.enableEditMode();
    }

    // restore the state of any bound functions or events, remove control nodes, restore physics
    this._clean();

    this.inMode = "addEdge";
    if (this.guiEnabled === true) {
      const locale = this.options.locales[this.options.locale];
      this.manipulationDOM = {};
      this._createBackButton(locale);
      this._createSeperator();
      this._createDescription(
        locale["edgeDescription"] ||
          this.options.locales["en"]["edgeDescription"]
      );

      // bind the close button
      this._bindElementEvents(this.closeDiv, this.toggleEditMode.bind(this));
    }

    // temporarily overload functions
    this._temporaryBindUI("onTouch", this._handleConnect.bind(this));
    this._temporaryBindUI("onDragEnd", this._finishConnect.bind(this));
    this._temporaryBindUI("onDrag", this._dragControlNode.bind(this));
    this._temporaryBindUI("onRelease", this._finishConnect.bind(this));
    this._temporaryBindUI("onDragStart", this._dragStartEdge.bind(this));
    this._temporaryBindUI("onHold", () => {});
  }
create the toolbar to connect nodes