feat(draw-route): add ability to change Element Title

Closes #50

app/scripts/stencils/base.coffee

@@ -1,5 +1,5 @@
 angular.module('seaspongeApp')
-.factory('BaseStencil', ->
+.factory('BaseStencil', [ ->
 
     return class BaseStencil
 
@@ -13,6 +13,7 @@ angular.module('seaspongeApp')
 
       # Instance variables
       uuid: null
+      title: null
       $element: null
       location: null
       tags: null
@@ -29,6 +30,7 @@ angular.module('seaspongeApp')
       constructor: () ->
         # Instance variables
         @uuid = jsPlumbUtil.uuid()
+        @title = @constructor.title
         @tags = []
         @dataClassifications = []
         @securityControls = []
@@ -52,7 +54,19 @@ angular.module('seaspongeApp')
         # Create new element
         @$element = $element = $('<div />', {
           id: @uuid
-        } ).append($('<p/>').text("#{@constructor.title} <#{@constructor.category}>"))
+        })
+        @$elementTitle = $('<span/>', {
+            class: "element-title"
+        }).text("#{@title}")
+        $category = $('<span/>', {
+            class: "element-category"
+        }).text("<#{@constructor.category}>")
+        $p = $('<p/>')
+            .append(@$elementTitle)
+            .append("<br/>")
+            .append($category)
+        $element.append($p)
+
         # Data
         @$element.data('stencil', @)
         # Add class names
@@ -135,6 +149,10 @@ angular.module('seaspongeApp')
         @$element.css(position)
         return @getPosition()
 
+      refreshTitle: ->
+        @$elementTitle.text(@title)
+        return @
+
       addDataClassification: ->
           @dataClassifications.push({
             "title": "Untitled Data Classification"
@@ -164,7 +182,7 @@ angular.module('seaspongeApp')
       serialize: =>
         serialized = {
           id: @uuid
-          name: @constructor.title
+          title: @title
           category: @constructor.category
           class: @constructor.name
           location: @getPosition()
@@ -190,6 +208,7 @@ angular.module('seaspongeApp')
         attr = serialized.attributes
         # Local
         @uuid = serialized.id
+        @title = serialized.title
         @tags = serialized.tags
         @codeType = attr.codeType
         @runningAs = attr.runningAs
@@ -203,6 +222,7 @@ angular.module('seaspongeApp')
         # Update
         @$element.attr('id', @uuid)
         @setPosition(serialized.location)
+        @refreshTitle()
         return @
 
       sourceEndpoint:
@@ -285,4 +305,5 @@ angular.module('seaspongeApp')
       endpointHoverStyle:
         fillStyle: "#216477"
         strokeStyle: "#216477"
+    ]
 )

app/views/draw.html

@@ -243,7 +243,7 @@
         <!-- Threats -->
             <!-- New -->
         <accordion-group is-open="menu.newThreatOpen">
-          
+
           <accordion-heading>
             New Threat <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.newThreatOpen, 'glyphicon-chevron-right': !menu.newThreatOpen}"></i>
           </accordion-heading>
@@ -253,7 +253,7 @@
             <div class="form-group">
               <label for="threat-name" class="">Threat Name</label>
               <input type="text"
-              class="form-control" placeholder="Threat Name" 
+              class="form-control" placeholder="Threat Name"
               id="threat-name" name="threatName"
               ng-model="newThreat.name" required ng-required=true
               ng-minlength=2>
@@ -270,7 +270,7 @@
 
             <div class="form-group">
               <label for="newThreat-severity" class="">Severity</label>
-              <select class="form-control" id="newThreat-severity" 
+              <select class="form-control" id="newThreat-severity"
               ng-options="severity for severity in severityOptions"
               ng-model="newThreat.severity">
               </select>
@@ -278,7 +278,7 @@
 
             <div class="form-group">
               <label for="newThreat-description" class="">Description</label>
-              <textarea 
+              <textarea
               class="form-control" id="newThreat-description" placeholder="Describe the threat" ng-model="newThreat.description"></textarea>
             </div>
 
@@ -302,7 +302,7 @@
 
           <div class="panel panel-default" ng-repeat-start="item in model.threats">
             <div class="panel-heading">
-              <span class="label label-danger">{{item.severity}}</span> {{item.name}} 
+              <span class="label label-danger">{{item.severity}}</span> {{item.name}}
               <button class="btn btn-danger btn-xs pull-right" ng-click="model.removeThreat(item)"><span class="glyphicon glyphicon-trash"></span></button>
             </div>
             <div class="panel-body">
@@ -359,9 +359,11 @@
             </div>
 
             <div class="form-group">
-              <label for="properties-name" class="">Name</label>
+              <label for="properties-title" class="">Title</label>
               <br/>
-              {{selectedStencil.constructor.title}}
+              <input type="text"
+              class="form-control" id="properties-title" placeholder="Element instance title"
+              ng-model="selectedStencil.title" ng-change="selectedStencil.refreshTitle()">
             </div>
 
             <div class="form-group">