title: Nested MVC communication patterns
body: <p>This is entirely a best practices type question, so the language is irrelevant.  I understand the basic principles of MVC, and that there are different, subtle flavors of it (i.e. views having a direct reference to models vs. a data delegate off the controller).</p>
  
  <p>My question is around cross MVC communication, when those MVCs are nested.  An example of this would be a drawing program (like Paint or something).  The Canvas itself could be an MVC, but so could each drawn entity (e.g. Shapes, Text).  From a model perspective, it makes sense for the <code>CanvasModel</code> to have a collection of entities, but should the <code>CanvasView</code> and <code>CanvasController</code> have corresponding collections of entity views and controllers respectively?</p>
  
  <p>Also, what's the best/cleanest way to add a new drawn entity?  Say the user has the CircleTool active, they click in the Canvas view and start drawing the shape.  The <code>CanvasView</code> could fire relevant mouse down/move/up events that the <code>CanvasController</code> could listen to.  The controller could then basically proxy those events to the CircleTool (state pattern).  On mouse down, the CircleTool would want to create a new Circle.  Should the Tool create a new <code>CircleEntityController</code> outright and call something like <code>canvasController.addEntity(circleController)</code>?  Where should the responsibility of creating the Circle's model and view then lie?</p>
  
  <p>Sorry if these questions are somewhat nebulous :)</p>
  
  <p>--<strong>EDIT</strong>--</p>
  
  <p>Here's a pseudo-codish example of what I'm talking about:</p>
  
  <pre><code>CircleTool {
      ...
      onCanvasMouseDown: function(x, y) {
          // should this tool/service create the new entity's model, view, and controller?
          var model = new CircleModel(x, y);
          var view = new CircleView(model);
          var controller = new CircleController(model, view);
  
          // should the canvasController's add method take in all 3 components
          // and then add them to their respective endpoints?
          this.canvasController.addEntity(model, view, controller);
      }
      ...
  }
  
  
  CanvasController {
      ...
      addEntity: function(model, view, controller) {
          // this doesn't really feel right...
          this.entityControllers.add(controller);
          this.model.addEntityModel(model);
          this.view.addEntityView(view);
      }
      ...
  }
  </code></pre>