constructor(parseTreeNode, options) {
    super(parseTreeNode, options);

    // create shortcuts for services and frequently used vars
    this.getAttr = this.getAttribute;
    this.isDebug = utils.isTrue($tm.config.sys.debug, false);

    // force early binding of functions to this context
    utils.bindTo(this, [
      'constructTooltip',
      'handleResizeEvent',
      'handleClickEvent',
      'handleCanvasKeyup',
      'handleCanvasKeydown',
      'handleCanvasScroll',
      'handleExtraCanvasScroll',
      'handleCanvasMouseMove',
      'handleWidgetKeyup',
      'handleWidgetKeydown',
      'handleTriggeredRefresh',
      'handleContextMenu'
    ]);

    // instanciate managers
    this.callbackManager = new CallbackManager();

    // make the html attributes available to this widget
    this.computeAttributes();
    this.editorMode = this.getAttr('editor');
    this.clickToUse = utils.isTrue(this.getAttr('click-to-use'), false);

    // who am I? the id is used for debugging and special cases
    this.id = this.getAttr('object-id') || this.getStateQualifier();

    this.widgetPopupsPath = $tm.path.tempPopups + '/' + this.id;

    // register listeners that are available in editor mode
    if (this.editorMode) {
      utils.addTWlisteners({
        'tmap:tm-create-view': this.handleCreateView,
        'tmap:tm-rename-view': this.handleRenameView,
        'tmap:tm-delete-view': this.handleDeleteView,
        'tmap:tm-delete-element': this.handleDeleteElement,
        'tmap:tm-edit-view': this.handleEditView,
        'tmap:tm-generate-widget': this.handleGenerateWidget,
        'tmap:tm-toggle-central-topic': this.handleSetCentralTopic,
        'tmap:tm-save-canvas': this.handleSaveCanvas
      }, this, this);
    }

    // register listeners that are available in any case
    utils.addTWlisteners({
      'tmap:tm-focus-node': this.handleFocusNode,
      'tmap:tm-reset-focus': this.repaintGraph,
      'tmap:tm-neighbourhood-reset-trace': () => { this.initAndRenderGraph(this.graphDomNode); }
    }, this, this);

    // Visjs handlers
    this.visListeners = {
      'click': this.handleVisSingleClickEvent,
      'doubleClick': this.handleVisDoubleClickEvent,
      'stabilized': this.handleVisStabilizedEvent,
      'selectNode': this.handleVisSelectNode,
      'deselectNode': this.handleVisDeselectNode,
      'dragStart': this.handleVisDragStart,
      'dragEnd': this.handleVisDragEnd,
      'hoverNode': this.handleVisHoverElement,
      'hoverEdge': this.handleVisHoverElement,
      'blurNode': this.handleVisBlurElement,
      'blurEdge': this.handleVisBlurElement,
      'beforeDrawing': this.handleVisBeforeDrawing,
      'afterDrawing': this.handleVisAfterDrawing,
      'stabilizationProgress': this.handleVisLoading,
      'stabilizationIterationsDone': this.handleVisLoadingDone
    };

    this.windowDomListeners = {
      'resize': [ this.handleResizeEvent, false ],
      'click': [ this.handleClickEvent, false ],
      'mousemove': [ this.handleCanvasMouseMove, true ],
    };

    this.canvasDomListeners = {
      'keyup': [ this.handleCanvasKeyup, true ],
      'keydown': [ this.handleCanvasKeydown, true ],
      'mousewheel': [ this.handleCanvasScroll, true ],
      'DOMMouseScroll': [ this.handleCanvasScroll, true ],
      'contextmenu': [ this.handleContextMenu, true ],
      // Solves: https://github.com/felixhayashi/TW5-TiddlyMap/issues/306
      'MozMousePixelScroll': [ this.handleExtraCanvasScroll, true ],
    };

    this.widgetDomListeners = {
      'keyup': [ this.handleWidgetKeyup, true ],
      'keydown': [ this.handleWidgetKeydown, true ],
    };

    this.conVector = { from: null, to: null };
  }
The map widget is responsible for drawing the actual network
diagrams.

@constructor