Get containment working and style up the canvas a bit

hawtio · Oct 14, 2013 · 330aff0 · 330aff0
1 parent 4e1e194
commit 330aff0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/hawtio-web/src/main/webapp/app/wiki/html/camelCanvas.html b/hawtio-web/src/main/webapp/app/wiki/html/camelCanvas.html
@@ -165,12 +165,14 @@
     </div>
 
     <div class="row-fluid">
-      <div class="canvas"></div>
-
       <form class="form-inline pull-right">
         <label>Route: </label>
         <select ng-model="selectedRouteId" ng-options="routeId for routeId in routeIds"></select>
       </form>
     </div>
+
+    <div class="row-fluid">
+      <div class="camel-canvas canvas gridStyle"></div>
+    </div>
   </div>
 </div>
diff --git a/hawtio-web/src/main/webapp/app/wiki/js/camelCanvas.ts b/hawtio-web/src/main/webapp/app/wiki/js/camelCanvas.ts
@@ -393,14 +393,9 @@ module Wiki {
         });
       });
 
-      jsPlumb.draggable(nodes);
-      /*
-       TODO containment within the canvas div doesn't seem to work?
-
-       jsPlumb.draggable(nodes, {
-       containment: containerElement
-       });
-       */
+      jsPlumb.draggable(nodes, {
+        containment: '.camel-canvas'
+      });
 
       // double click on any connection
       jsPlumb.bind("dblclick", function (connection, originalEvent) {
@@ -526,4 +521,4 @@ module Wiki {
      }
      */
   }
-}
+}
diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2579,6 +2579,14 @@ i.expandable-indicator.folder {
   display: none;
 }
 
+.camel-canvas {
+  border: 1px solid #d4d4d4;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
+  background-image: url('../img/img-noise-600x600.png')
+}
+
+
 @media(max-width: 1400px) {
   .profile-details > [class^="span"] {
     width: 100%;
@@ -2590,7 +2598,6 @@ i.expandable-indicator.folder {
 }
 
 /* Start 800x600 Optimzations */
-
 @media(max-width: 849px) {
 
   .page-padded {

diff --git a/hawtio-web/src/main/webapp/img/img-noise-600x600.png b/hawtio-web/src/main/webapp/img/img-noise-600x600.png