feat(draw-route): add event for stencil instances to be selectable

See #10.

app/index.html

@@ -11,6 +11,7 @@
   <!-- bower:css -->
   <link rel="stylesheet" href="bower_components/jsplumb/dist/css/jsplumb.css" />
   <link rel="stylesheet" href="bower_components/jsplumb/dist/css/demo-all.css" />
+  <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
   <!-- endbower -->
   <!-- endbuild -->
   <!-- build:css(.tmp) styles/main.css -->
@@ -79,6 +80,7 @@
   <script src="bower_components/jsplumb/dist/js/jquery.jsPlumb-1.6.4.js"></script>
   <script src="bower_components/jquery-ui/jquery-ui.js"></script>
   <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+  <script src="bower_components/angular-ui-select/dist/select.js"></script>
   <!-- endbower -->
   <!-- endbuild -->
 

app/scripts/app.coffee

@@ -17,6 +17,7 @@ angular
     'ngSanitize',
     'ngTouch',
     'ui.bootstrap'
+    'ui.select'
   ])
   .config ($routeProvider) ->
     $routeProvider

app/scripts/controllers/draw.coffee

@@ -12,6 +12,24 @@ angular.module('seaspongeApp')
 
     $scope.stencils = window.stencils
 
+    $scope.menu = {
+      stencilsOpen: false
+      propertiesOpen: false
+    }
+
+    $scope.selectedStencil = false
+
+    # Get container
+    $scope.container = $('#flowchart-demo')
+
+    $scope.stencilTypes = (() ->
+      arr = []
+      arr.push(stencil.type) for name, stencil of $scope.stencils \
+      when arr.indexOf(stencil.type) is -1 and stencil.type isnt "Base"
+      console.log('types', arr, $scope.stencils)
+      return arr
+    )()
+
     jsPlumb.ready ->
       $scope.instance = instance = jsPlumb.getInstance(
         # default drag options
@@ -87,19 +105,37 @@ angular.module('seaspongeApp')
           console.log "contextmenu: ", component, originalEvent
           return
 
+        $scope.container.on "stencil-instance-click", (e1, inst, e2) ->
+            console.log "stencil-instance-click", arguments
+            $scope.$apply ->
+                # Remove selected class from all selected
+                $('.selected-stencil').removeClass('selected-stencil')
+                # Check if same or different stencil instance
+                if $scope.selectedStencil is inst
+                    # Same instance
+                    # Change selected in $scope
+                    $scope.selectedStencil = null
+                    $scope.menu.propertiesOpen = false
+                else
+                    # Add selected class
+                    inst.$element.addClass('selected-stencil')
+                    # Change selected in $scope
+                    $scope.selectedStencil = inst
+                    $scope.menu.stencilsOpen = false
+                    $scope.menu.propertiesOpen = true
+
+
         return
       jsPlumb.fire "jsPlumbDemoLoaded", instance
       return
 
     $scope.addStencil = (stencilClass) ->
       instance = $scope.instance
-      # Get container
-      $container = $('#flowchart-demo')
-      console.log($container)
+      console.log('container', $scope.container)
       # Generate UUID
       uuid = jsPlumbUtil.uuid()
       console.log('uuid: ', uuid)
       #
       # stencil = new stencils.BaseStencil(uuid, $container, instance)
-      stencil = new stencilClass(uuid, $container, instance)
+      stencil = new stencilClass(uuid, $scope.container, instance)
       console.log(stencil)

app/scripts/stencils/base.coffee

@@ -19,6 +19,9 @@ class @stencils.BaseStencil
     $element.addClass(cls)
     # Add to container
     @$container.append($element);
+    # Add events
+    @$element.click (event) =>
+        @$container.trigger "stencil-instance-click", [@, event]
     # suspend drawing and initialise.
     @plumbInstance.doWhileSuspended =>
       console.log(@plumbInstance)

app/styles/draw.scss

@@ -77,3 +77,19 @@
   color: white;
   border: 1px solid white;
 }
+
+.stencil.selected-stencil {
+    background-color: blue;
+}
+
+/* Prevent the text contents of draggable elements from being selectable. */
+[draggable] {
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  /* Required to make elements draggable in old WebKit */
+  -khtml-user-drag: element;
+  -webkit-user-drag: element;
+}
+

app/views/draw.html

@@ -30,72 +30,38 @@
 
     <div class="content-left">
 
+
       <accordion close-others="false">
 
-        <accordion-group is-open="status.stencilsOpen">
+        <accordion-group is-open="menu.stencilsOpen">
 
           <accordion-heading>
             Stencils <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.stencilsOpen, 'glyphicon-chevron-right': !status.stencilsOpen}"></i>
           </accordion-heading>
 
-          <ul class="nav nav-tabs" role="tablist">
-            <li class="active"><a href="#home" role="tab" data-toggle="tab">OS Process</a>
-            </li>
-            <li><a href="#profile" role="tab" data-toggle="tab">Diagram 2</a>
-            </li>
-            <li><a href="#messages" role="tab" data-toggle="tab">Diagram 3</a>
-            </li>
-            <li><a href="#settings" role="tab" data-toggle="tab">Diagram 4</a>
-            </li>
-          </ul>
-
-          <div class="tab-content">
-            <div class="tab-pane active" id="home">
-
-              <div class="row">
-
-                <div class="col-xs-6 col-md-3" ng-repeat="stencil in stencils | filter:{ title:'!Base' }">
-                  <a href="" class="thumbnail" ng-click="addStencil(stencil)">
-                    <img ng-src="{{stencil.icon}}" ng-alt="{{stencil.title}}">
-                    <span class="stencil-title">{{stencil.title}}</span>
-                    <span class="stencil-type label label-info">{{stencil.type}}</span>
-                  </a>
-                </div>
-
-
-                <div class="col-xs-6 col-md-3">
-                  <a href="" class="thumbnail" ng-click="addStencil()">
-                    <img src="http://upload.wikimedia.org/wikipedia/de/2/2e/Mozilla_Firefox_Logo.png" alt="...">
-                    Stencil 2
-                  </a>
-                </div>
-                <div class="col-xs-6 col-md-3">
-                  <a href="" class="thumbnail" ng-click="addStencil()">
-                    <img src="http://upload.wikimedia.org/wikipedia/de/2/2e/Mozilla_Firefox_Logo.png" alt="...">
-                    Stencil 3
-                  </a>
-                </div>
-                <div class="col-xs-6 col-md-3">
-                  <a href="" class="thumbnail" ng-click="addStencil()">
-                    <img src="http://upload.wikimedia.org/wikipedia/de/2/2e/Mozilla_Firefox_Logo.png" alt="...">
-                    Stencil 4
-                  </a>
-                </div>
-
-              </div>
+          <div class="row">
 
+            <div class="stencil col-xs-6 col-md-4" ng-repeat="stencil in stencils | filter:{ title:'!Base' }">
+              <a href="" class="thumbnail" ng-click="addStencil(stencil)">
+                <img ng-src="{{stencil.icon}}" ng-alt="{{stencil.title}}">
+                <span class="stencil-title">{{stencil.title}}</span>
+                <span class="stencil-type label label-info">{{stencil.type}}</span>
+              </a>
             </div>
-            <div class="tab-pane" id="profile">...</div>
-            <div class="tab-pane" id="messages">...</div>
-            <div class="tab-pane" id="settings">...</div>
+
           </div>
 
         </accordion-group>
 
-
-        <accordion-group is-open="status.propertiesOpen">
+        <accordion-group is-open="menu.propertiesOpen" is-disabled="!selectedStencil">
+            
           <accordion-heading>
-            Properties <small>- OS Process</small>  <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.propertiesOpen, 'glyphicon-chevron-right': !status.propertiesOpen}"></i>
+            Properties 
+            <small>- {{selectedStencil.constructor.title}} 
+            <span class="label label-info">{{selectedStencil.constructor.type}}</span>
+            </small>  
+            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.propertiesOpen, 'glyphicon-chevron-right': !menu.propertiesOpen}"></i>
+            <!-- Select an element to view its properties -->
           </accordion-heading>
 
           <form class="form" role="form">

bower.json

@@ -15,7 +15,8 @@
     "angular-route": "1.2.16",
     "jsplumb": "~1.6.2",
     "jquery-ui": "~1.11.1",
-    "angular-bootstrap": "~0.11.2"
+    "angular-bootstrap": "~0.11.2",
+    "angular-ui-select": "~0.8.3"
   },
   "devDependencies": {
     "angular-mocks": "1.2.16",
@@ -29,5 +30,9 @@
         "dist/js/jquery.jsPlumb-1.6.4.js"
       ]
     }
+  },
+  "resolutions": {
+    "angular": ">=1.2.18",
+    "angular-ui-select": "~0.8.3"
   }
 }