From b7c81aae64ce5a640ecfac33dc16f57a3759cc67 Mon Sep 17 00:00:00 2001
From: Steve Belovarich <steve@mediahound.com>
Date: Wed, 20 Aug 2014 15:48:36 -0700
Subject: [PATCH] fix: Updated canvas and video surfaces to support new 
 methods

---
 src/scripts/directives/fa-canvas-surface.js | 13 +++++++++++--
 src/scripts/directives/fa-video-surface.js  | 10 +++++++++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/scripts/directives/fa-canvas-surface.js b/src/scripts/directives/fa-canvas-surface.js
index ec26d325..bab266c0 100644
--- a/src/scripts/directives/fa-canvas-surface.js
+++ b/src/scripts/directives/fa-canvas-surface.js
@@ -23,7 +23,7 @@
  * `Fa-canvas-surface` accepts classes and faSize, the only two attributes HTML5 canvas requires is width and height.
  */
 angular.module('famous.angular')
-  .directive('faCanvasSurface', ['$famous', '$famousDecorator', function ($famous, $famousDecorator) {
+  .directive('faCanvasSurface', ['$famous', '$famousDecorator', '$interpolate', '$controller', '$compile', function ($famous, $famousDecorator, $interpolate, $controller, $compile) {
     return {
       scope: true,
       transclude: true,
@@ -41,10 +41,19 @@ angular.module('famous.angular')
             isolate.renderNode = new CanvasSurface({
               size: scope.$eval(attrs.faSize)
             });
-
+            
+            $famousDecorator.addRole('renderable',isolate);
+            isolate.show();
+            
             if (attrs.class) {
               isolate.renderNode.setClasses(attrs['class'].split(' '));
             }
+            
+            // Throw an exception if anyother famous scene graph element is added on fa-surface.            
+            $famousDecorator.sequenceWith(scope, function(data) {
+              throw new Error('Surfaces are leaf nodes of the Famo.us render tree and cannot accept rendernode children.  To include additional Famo.us content inside of a fa-surface, that content must be enclosed in an additional fa-app.');
+            });
+                        
           },
           post: function(scope, element, attrs){
             var isolate = $famousDecorator.ensureIsolate(scope);
diff --git a/src/scripts/directives/fa-video-surface.js b/src/scripts/directives/fa-video-surface.js
index 98ae9a80..abc8774e 100644
--- a/src/scripts/directives/fa-video-surface.js
+++ b/src/scripts/directives/fa-video-surface.js
@@ -62,10 +62,18 @@ angular.module('famous.angular')
                 isolate.renderNode = new VideoSurface({
                   class: scope.$eval(attrs.class)
                 });
-      
+                
+                $famousDecorator.addRole('renderable',isolate);
+                isolate.show();
+                      
                 if (attrs.class) {
                   isolate.renderNode.setClasses(attrs['class'].split(' '));
                 }
+                // Throw an exception if anyother famous scene graph element is added on fa-surface.            
+                $famousDecorator.sequenceWith(scope, function(data) {
+                  throw new Error('Surfaces are leaf nodes of the Famo.us render tree and cannot accept rendernode children.  To include additional Famo.us content inside of a fa-surface, that content must be enclosed in an additional fa-app.');
+                });                
+                
               },
               post: function (scope, element, attrs) {