map_view.js

define([
    'jquery',
    'canvas_renderer',
    'text_renderer',
    'reducer/selection'
  ],
function($, canvasRenderer, textRenderer, Selection) {

  /*
   * Generates toolbar buttons (which apply to both the text and HTML view).
   */
  var buildToolbar = function() {
    var toolbarHtml = '<div id="toolbar">' +
        '<button id="delete_selection">Delete</button>' +
        '<button id="add_room">Add Room</button>' +
      '</div>';
    return $(toolbarHtml);
  };

  /*
   * Adds event listeners for the toolbar buttons.
   *
   *@param $toolbar The toolbar div, as a jQuery object (hence the $).
   */
  var addToolbarListeners = function($toolbar, store) {
    $toolbar.find('#delete_selection').on(
      'click',
      dispatchDelete.bind(this, store)
    );

    $toolbar.find('#add_room').on(
      'click',
      store.dispatch.bind(store, {
        type: 'action.stage',
        payload: {
          type: 'map.rooms.add',
          payload: {
            x: 0,
            y: 0,
            width: 1,
            height: 1
          }
        }
      })
    );
  };

  // TODO: consider converting to a Redux thunk?
  var dispatchDelete = function(store) {
    var state = store.getState();
    var roomIdsToDelete = Selection.selectedIds(state.selection, 'room');
    store.dispatch({
      type: 'map.rooms.remove',
      payload: { roomIds: roomIdsToDelete }
    });

    var doorIdsToDelete = Selection.selectedIds(state.selection, 'door');
    store.dispatch({
      type: 'map.doors.remove',
      payload: { doorIds: doorIdsToDelete }
    });

    // Clear selection now we've deleted everything that was in it.
    store.dispatch({ type: 'selection.clear' });
  }

  // MVC implementation based on example from <https://alexatnet.com/articles/model-view-controller-mvc-javascript>

  var MapView = function(store, canvas) {
    var graphicsContext = canvas.getContext('2d');
    var toolbar = buildToolbar();
    var textContext = $('<div>');
    $(canvas).before(toolbar);
    $(canvas).after(textContext);

    addToolbarListeners(toolbar, store);
    textRenderer.addListeners(textContext, store);

    var render = function(store) {
      canvasRenderer.render(store, graphicsContext);
      textRenderer.render(store, textContext);
      canvasRenderer.addListeners(canvas, store);
    }

    store.subscribe(function() {
      render(store);
    });

    render(store);
  };

  return MapView;
});