Added a play button to the thang type edit view, made the canvas taller, and now have selected nodes show bounds for the display object being displayed.

app/styles/editor/thang/thang-type-edit-view.sass

@@ -58,7 +58,7 @@
     select
       margin-top: 10px
 
-    #marker-button, #end-button
+    #marker-button, #play-button, #stop-button
       margin: 10px 10px 10px 0
   
     .slider-cell

app/templates/editor/thang/thang-type-edit-view.jade

@@ -90,7 +90,7 @@ block outer_content
           div#thang-type-treema
           .clearfix
         div#display-col.well
-          canvas#canvas(width="400", height="400")
+          canvas#canvas(width="400", height="600")
           select#animations-select.form-control
             for animation in animations
               option #{animation}
@@ -98,7 +98,10 @@ block outer_content
             button.btn.btn-small.btn-primary#marker-button
               i.icon-map-marker
               span.spl Markers
-            button.btn.btn-small.btn-primary#end-button
+            button.btn.btn-small.btn-primary#play-button
+              i.icon-play
+              span.spl Play
+            button.btn.btn-small.btn-primary#stop-button
               i.icon-stop
               span.spl Stop
           div.slider-cell

app/views/editor/thang/ThangTypeEditView.coffee

@@ -36,7 +36,8 @@ module.exports = class ThangTypeEditView extends RootView
     'change #real-upload-button': 'animationFileChosen'
     'change #animations-select': 'showAnimation'
     'click #marker-button': 'toggleDots'
-    'click #end-button': 'endAnimation'
+    'click #stop-button': 'stopAnimation'
+    'click #play-button': 'playAnimation'
     'click #history-button': 'showVersionHistory'
     'click #fork-start-button': 'startForking'
     'click #save-button': 'openSaveModal'
@@ -157,9 +158,12 @@ module.exports = class ThangTypeEditView extends RootView
     @aboveHeadDot.y = aboveHead.y
     @topLayer.addChild(@groundDot, @torsoDot, @mouthDot, @aboveHeadDot)
 
-  endAnimation: ->
+  stopAnimation: ->
     @currentLank?.queueAction('idle')
 
+  playAnimation: ->
+    @currentLank?.queueAction(@$el.find('#animations-select').val())
+
   updateGrid: ->
     grid = new createjs.Container()
     line = new createjs.Shape()
@@ -258,7 +262,7 @@ module.exports = class ThangTypeEditView extends RootView
     @showAction(animationName)
     @updateRotation()
     @updateScale() # must happen after update rotation, because updateRotation calls the sprite update() method.
-
+    
   showMovieClip: (animationName) ->
     vectorParser = new SpriteBuilder(@thangType)
     movieClip = vectorParser.buildMovieClip(animationName)
@@ -416,6 +420,7 @@ module.exports = class ThangTypeEditView extends RootView
 
   onSelectNode: (e, selected) =>
     selected = selected[0]
+    @topLayer.removeChild(@boundsBox) if @boundsBox
     return @stopShowingSelectedNode() if not selected
     path = selected.getPath()
     parts = path.split('/')
@@ -426,13 +431,15 @@ module.exports = class ThangTypeEditView extends RootView
     obj = vectorParser.buildMovieClip(key) if type is 'animations'
     obj = vectorParser.buildContainerFromStore(key) if type is 'containers'
     obj = vectorParser.buildShapeFromStore(key) if type is 'shapes'
-    if obj?.bounds
+    
-      obj.regX = obj.bounds.x + obj.bounds.width / 2
+    bounds = obj?.bounds or obj?.nominalBounds
-      obj.regY = obj.bounds.y + obj.bounds.height / 2
+    if bounds
-    else if obj?.frameBounds?[0]
+      @boundsBox = new createjs.Shape()
-      bounds = obj.frameBounds[0]
+      @boundsBox.graphics.beginFill('#aaaaaa').beginStroke('black').drawRect(bounds.x, bounds.y, bounds.width, bounds.height)
-      obj.regX = bounds.x + bounds.width / 2
+      @topLayer.addChild(@boundsBox)
-      obj.regY = bounds.y + bounds.height / 2
+      obj.regX = @boundsBox.regX = bounds.x + bounds.width / 2
+      obj.regY = @boundsBox.regY = bounds.y + bounds.height / 2
+    
     @showSprite(obj) if obj
     @showingSelectedNode = true
     @currentLank?.destroy()