KFEditor adds objects to 3D scene

app/views/editors/KeyframeView.html

@@ -10,12 +10,18 @@
     }
     .kf-editor > article, .kf-editor > article header{ border-color: #473; }
     .kf-editor article.agent-preview header { padding:0; }
-    .kf-editor article.agent-preview canvas{ width:100%; aspect-ratio: 1 / 1;} 
+    .kf-editor canvas[data-output="agentSampleCanvas"]{ width:100%; aspect-ratio: 1 / 1;} 
+    .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } 
     .kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
         display: grid;
         grid-template-rows: auto 2em;
         height: 100%;
-    }    
+    }
+    .kf-editor article.kfArena section{
+        padding: 0;
+        height: 100%;
+        
+    }
     .kf-editor article.agent-preview section div.actions button{
         color: #DDD;
         padding: 0 0 0 0;
@@ -25,11 +31,11 @@
     .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
     .kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
     .kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
-
+    
 </style>
 <div class="kf-editor cols-3">
     <article eiccard class="agent-preview">
-         <header><canvas data-output="agentSampleCanvas"></canvas></header>
+        <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
             <div>
                 <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
@@ -37,9 +43,9 @@
             <div></div>
         </section>
     </article>
-    <article eiccard>
+    <article eiccard class="kfArena">
         <section>
-            Arena 
+            <canvas data-output="kfArenaCanvas"></canvas> 
         </section>
     </article>
     <article eiccard class="agent-properties">
@@ -52,7 +58,7 @@
             </div>
         </section>
     </article>
-
-</div>    
     
+</div>    
+