qpid-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From eal...@apache.org
Subject qpid-dispatch git commit: DISPATCH-790 Fix context menu position. Allow info panel on topology page for stand-alone to expand/collapse
Date Fri, 23 Jun 2017 17:30:26 GMT
Repository: qpid-dispatch
Updated Branches:
  refs/heads/master 653628894 -> e78e29d81


DISPATCH-790 Fix context menu position. Allow info panel on topology page for stand-alone
to expand/collapse


Project: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/repo
Commit: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/commit/e78e29d8
Tree: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/tree/e78e29d8
Diff: http://git-wip-us.apache.org/repos/asf/qpid-dispatch/diff/e78e29d8

Branch: refs/heads/master
Commit: e78e29d8139893558ccb7d0a67e2dbfe06f617ec
Parents: 6536288
Author: Ernest Allen <eallen@redhat.com>
Authored: Fri Jun 23 13:30:10 2017 -0400
Committer: Ernest Allen <eallen@redhat.com>
Committed: Fri Jun 23 13:30:10 2017 -0400

----------------------------------------------------------------------
 .../src/main/webapp/plugin/js/qdrTopology.js    |  16 ++-
 console/stand-alone/plugin/css/dispatch.css     |   2 +-
 console/stand-alone/plugin/css/dispatchpf.css   |   7 +-
 .../stand-alone/plugin/html/qdrTopology.html    | 119 +++++++++----------
 console/stand-alone/plugin/js/qdrTopology.js    | 115 +++++++++---------
 5 files changed, 129 insertions(+), 130 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e78e29d8/console/hawtio/src/main/webapp/plugin/js/qdrTopology.js
----------------------------------------------------------------------
diff --git a/console/hawtio/src/main/webapp/plugin/js/qdrTopology.js b/console/hawtio/src/main/webapp/plugin/js/qdrTopology.js
index 762b212..80486a9 100644
--- a/console/hawtio/src/main/webapp/plugin/js/qdrTopology.js
+++ b/console/hawtio/src/main/webapp/plugin/js/qdrTopology.js
@@ -399,7 +399,7 @@ QDR.log.debug("attr.description " + attr.description)
           }
           QDRService.ensureAllEntities({entity: ".router"}, function () {
             NewRouterName = genNewName();
-            nodes.push(aNode(id, NewRouterName, "inter-router", '', undefined, nodes.length,
x, y, undefined, true));
+            nodes.push(aNode(id, NewRouterName, "inter-router", '', nodes.length, x, y, undefined,
undefined, true));
             force.nodes(nodes).links(links).start();
             restart(false);
           })
@@ -489,7 +489,7 @@ QDR.log.debug("attr.description " + attr.description)
       $scope.isFixed = function() {
         if (!$scope.contextNode)
           return false;
-        return ($scope.contextNode.fixed == 1);
+        return ($scope.contextNode.fixed & 1);
       }
 
       var mouseX, mouseY;
@@ -670,7 +670,7 @@ QDR.log.debug("attr.description " + attr.description)
           localStorage[d.name] = angular.toJson({
             x: Math.round(d.x),
             y: Math.round(d.y),
-            fixed: d.fixed ? 1 : 0,
+            fixed: (d.fixed & 1) ? 1 : 0,
           });
         })
       }
@@ -1508,7 +1508,7 @@ QDR.log.debug("attr.description " + attr.description)
             return (d === selected_node)
           })
           .classed('fixed', function(d) {
-            return d.fixed
+            return d.fixed & 1
           })
 
         // add new circle nodes. if nodes[] is longer than the existing paths, add a new
path for each new element
@@ -1531,7 +1531,7 @@ QDR.log.debug("attr.description " + attr.description)
               return null;
             })
             .classed('fixed', function(d) {
-              return d.fixed
+              return d.fixed & 1
             })
             .classed('temp', function(d) {
               return QDRService.nameFromId(d.key) == '__internal__';
@@ -1677,7 +1677,7 @@ QDR.log.debug("attr.description " + attr.description)
           .on("dblclick", function(d) { // circle
             if (d.fixed) {
               d.fixed = false
-              setNodesFixed(d.name, false)
+              setNodes``(d.name, false)
               restart() // redraw the node without a dashed line
               force.start(); // let the nodes move to a new position
             }
@@ -1689,13 +1689,11 @@ QDR.log.debug("attr.description " + attr.description)
           .on("contextmenu", function(d) {  // circle
             $(document).click();
             d3.event.preventDefault();
-            $scope.contextNode = d;
-            if (!$scope.$$phase) $scope.$apply() // we just changed a scope valiable during
an async event
+            $timeout(function () {$scope.contextNode = d})
             d3.select('#node_context_menu')
               .style('left', (mouseX + $(document).scrollLeft()) + "px")
               .style('top', (mouseY + $(document).scrollTop()) + "px")
               .style('display', 'block');
-
           })
           .on("click", function(d) {  // circle
             if (!mouseup_node)

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e78e29d8/console/stand-alone/plugin/css/dispatch.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/dispatch.css b/console/stand-alone/plugin/css/dispatch.css
index 667e40f..259816e 100644
--- a/console/stand-alone/plugin/css/dispatch.css
+++ b/console/stand-alone/plugin/css/dispatch.css
@@ -479,7 +479,7 @@ div.boolean {
 .contextMenu ul {
 	width:300px;
 	margin:0;
-	/* padding:10px; */
+	padding-left:0;
 	list-style:none;
 	background:#fff;
 	color:#333;

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e78e29d8/console/stand-alone/plugin/css/dispatchpf.css
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/css/dispatchpf.css b/console/stand-alone/plugin/css/dispatchpf.css
index eee5ff4..aa1583d 100644
--- a/console/stand-alone/plugin/css/dispatchpf.css
+++ b/console/stand-alone/plugin/css/dispatchpf.css
@@ -179,4 +179,9 @@ div.chartContainer {
 
 .fa-edit:before, .fa-trash-o:before {
   font-family: FontAwesome;
-}
\ No newline at end of file
+}
+
+div.qdr-topology.pane.left {
+  width: 400px;
+  top: 0;
+}

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e78e29d8/console/stand-alone/plugin/html/qdrTopology.html
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/html/qdrTopology.html b/console/stand-alone/plugin/html/qdrTopology.html
index 6c5d694..1b83084 100644
--- a/console/stand-alone/plugin/html/qdrTopology.html
+++ b/console/stand-alone/plugin/html/qdrTopology.html
@@ -16,76 +16,73 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
-<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2 qdr-topology-svg" ng-controller="QDR.TopologyController"
style="min-height: 990px;">
-    <!--
-            <ul class="nav nav-tabs ng-scope qdrTopoModes">
-                <li ng-repeat="mode in modes" ng-class="{active : isModeActive(mode.name),
'pull-right' : isRight(mode)}" ng-click="selectMode('{{mode.name}}')" >
-                    <a data-placement="bottom" class="ng-binding"> {{mode.name}} </a></li>
-            </ul>
-    -->
-    <div id="topology" ng-show="mode == 'Diagram'"><!-- d3 toplogy here --></div>
-    <div id="geology" ng-show="mode == 'Globe'"><!-- d3 globe here --></div>
-    <div id="crosssection"><!-- d3 pack here --></div>
-    <!-- <div id="addRouter" ng-show="mode == 'Add Node'"></div> -->
-    <div id="node_context_menu" class="contextMenu">
-        <ul>
-            <li class="na" ng-class="{new: contextNode.cls == 'temp'}" ng-click="addingNode.trigger
= 'editNode'">Edit...</li>
-            <li class="na" ng-class="{adding: addingNode.step > 0}" ng-click="addingNode.step
= 0">Cancel add</li>
-            <li class="context-separator"></li>
-            <li class="na" ng-class="{'force-display': !isFixed()}" ng-click="setFixed(true)">Freeze
in place</li>
-            <li class="na" ng-class="{'force-display': isFixed()}" ng-click="setFixed(false)">Unfreeze</li>
-        </ul>
-    </div>
-    <div id="svg_context_menu" class="contextMenu">
-        <ul>
-            <li ng-click="addingNode.step = 2">Add a new router</li>
-        </ul>
-    </div>
-    <div id="link_context_menu" class="contextMenu">
-        <ul>
-            <li ng-click="reverseLink()">Reverse connection direction</li>
-            <li ng-click="removeLink()">Remove connection</li>
-        </ul>
-    </div>
-    <div id="svg_legend"></div>
-    <div id="multiple_details">
-        <h4 class="grid-title">Connections</h4>
-        <div class="gridStyle" ng-grid="multiDetails"></div>
-    </div>
-    <div id="link_details">
-        <h4 class="grid-title">Links</h4>
-        <div class="gridStyle" ng-grid="linkDetails"></div>
+<div class="qdrTopology row-fluid" ng-controller="QDR.TopologyController">
+    <div class="qdr-topology pane left" ng-controller="QDR.TopologyFormController">
+        <div id="topologyForm" ng-class="{selected : isSelected()}">
+            <div ng-if="form == 'router'">
+                <h4>Router Info</h4>
+                <div class="gridStyle" ng-grid="topoGridOptions"></div>
+            </div>
+            <div ng-if="form == 'connection'">
+                <h4>Connection Info</h4>
+                <div class="gridStyle" ng-grid="topoGridOptions"></div>
+            </div>
+            <div id="addNodeForm" ng-if="form == 'add'">
+                <h4>Add a new router</h4>
+                <ul>
+                    <li>Click on an existing router to create a connection to the new
router</li>
+                    <li>Double-click on the new router to <button ng-click="editNewRouter()">edit</button>
its properties</li>
+                    <li ng-show="addingNode.hasLink" >Right-click on a new connection
to edit its properties</li>
+                </ul>
+                <button ng-click="cancel()">Cancel</button>
+            </div>
+        </div>
+        <button ng-if="panelVisible" ng-click="hideLeftPane()" class="hideLeft" title="Hide"><i
class="icon-step-backward"></i></button>
+        <button ng-if="!panelVisible" ng-click="showLeftPane()" class="hideLeft" title="Show"><i
class="icon-step-forward"></i></button>
     </div>
-</div>
-
-<div class="col-sm-3 col-md-2 col-sm-pull-9 col-md-pull-10 sidebar-pf sidebar-pf-left
qdr-topology-form" ng-controller="QDR.TopologyFormController" style="min-height: 990px;">
-    <div id="topologyForm" ng-class="{selected : isSelected()}">
-        <div ng-if="form == 'router'">
-            <h4>Router Info</h4>
-            <div class="gridStyle" ng-grid="topoGridOptions"></div>
+    <div class="panel-adjacent">
+        <!--
+                <ul class="nav nav-tabs ng-scope qdrTopoModes">
+                    <li ng-repeat="mode in modes" ng-class="{active : isModeActive(mode.name),
'pull-right' : isRight(mode)}" ng-click="selectMode('{{mode.name}}')" >
+                        <a data-placement="bottom" class="ng-binding"> {{mode.name}}
</a></li>
+                </ul>
+        -->
+        <div id="topology" ng-show="mode == 'Diagram'"><!-- d3 toplogy here --></div>
+        <div id="geology" ng-show="mode == 'Globe'"><!-- d3 globe here --></div>
+        <div id="crosssection"><!-- d3 pack here --></div>
+        <!-- <div id="addRouter" ng-show="mode == 'Add Node'"></div> -->
+        <div id="node_context_menu" class="contextMenu">
+            <ul>
+                <li class="na" ng-class="{new: contextNode.cls == 'temp'}" ng-click="addingNode.trigger
= 'editNode'">Edit...</li>
+                <li class="na" ng-class="{adding: addingNode.step > 0}" ng-click="addingNode.step
= 0">Cancel add</li>
+                <li class="context-separator"></li>
+                <li class="na" ng-class="{'force-display': !isFixed()}" ng-click="setFixed(true)">Freeze
in place</li>
+                <li class="na" ng-class="{'force-display': isFixed()}" ng-click="setFixed(false)">Unfreeze</li>
+            </ul>
         </div>
-        <div ng-if="form == 'connection'">
-            <h4>Connection Info</h4>
-            <div class="gridStyle" ng-grid="topoGridOptions"></div>
+        <div id="svg_context_menu" class="contextMenu">
+            <ul>
+                <li ng-click="addingNode.step = 2">Add a new router</li>
+            </ul>
         </div>
-        <div id="addNodeForm" ng-if="form == 'add'">
-            <h4>Add a new router</h4>
+        <div id="link_context_menu" class="contextMenu">
             <ul>
-                <li>Click on an existing router to create a connection to the new router</li>
-                <li>Double-click on the new router to <button ng-click="editNewRouter()">edit</button>
its properties</li>
-                <li ng-show="addingNode.hasLink" >Right-click on a new connection to
edit its properties</li>
+                <li ng-click="reverseLink()">Reverse connection direction</li>
+                <li ng-click="removeLink()">Remove connection</li>
             </ul>
-            <button ng-click="cancel()">Cancel</button>
+        </div>
+        <div id="svg_legend"></div>
+        <div id="multiple_details">
+            <h4 class="grid-title">Connections</h4>
+            <div class="gridStyle" ng-grid="multiDetails"></div>
+        </div>
+        <div id="link_details">
+            <h4 class="grid-title">Links</h4>
+            <div class="gridStyle" ng-grid="linkDetails"></div>
         </div>
     </div>
-<!--
-    <button ng-if="panelVisible" ng-click="hideLeftPane()" class="hideLeft" title="Hide"><i
class="icon-step-backward"></i></button>
-    <button ng-if="!panelVisible" ng-click="showLeftPane()" class="hideLeft" title="Show"><i
class="icon-step-forward"></i></button>
--->
 </div>
 
-
 <script type="text/ng-template" id="titleHeaderCellTemplate.html">
     <div title="{{col.displayName}}" class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor':
col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }">
         <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>

http://git-wip-us.apache.org/repos/asf/qpid-dispatch/blob/e78e29d8/console/stand-alone/plugin/js/qdrTopology.js
----------------------------------------------------------------------
diff --git a/console/stand-alone/plugin/js/qdrTopology.js b/console/stand-alone/plugin/js/qdrTopology.js
index 2fc657a..f95755f 100644
--- a/console/stand-alone/plugin/js/qdrTopology.js
+++ b/console/stand-alone/plugin/js/qdrTopology.js
@@ -23,7 +23,6 @@ var QDR = (function(QDR) {
 
   QDR.module.controller('QDR.TopologyFormController', function($scope, $rootScope, $timeout,
QDRService) {
 
-    $scope.panelVisible = true  // show/hide the panel on the left
     $scope.attributes = []
     var nameTemplate = '<div title="{{row.entity.description}}" class="ngCellText {{row.entity.cls}}"><span>{{row.entity.attributeName}}</span></div>';
     var valueTemplate = '<div title="{{row.entity.attributeValue}}" class="ngCellText
{{row.entity.cls}}"><span>{{row.entity.attributeValue}}</span></div>';
@@ -60,43 +59,7 @@ var QDR = (function(QDR) {
     $scope.$on('showAddForm', function(event) {
       $scope.form = 'add';
     })
-
-    $scope.hideLeftPane = function () {
-      d3.select(".qdr-topology-form")
-        .transition().duration(300).ease("sin-in")
-        .style("left" , "-309px")
-        .each("end", function () {
-          $timeout(function () {
-            QDR.log.debug("done with transition. setting scope ");
-            $scope.panelVisible = false
-            $rootScope.$broadcast('panel-resized')
-        })
-/*
-      d3.select(".qdr-topology-svg")
-        .transition().duration(300).ease("sin-in")
-        .style("margin-left", "30px")
-        .each("end", function () {
-          resize()
-          $timeout(function () {QDR.log.debug("done with transition. setting scope ");$scope.panelVisible
= false})
-        })
-*/
-    })}
-
-    $scope.showLeftPane = function () {
-      d3.select(".qdr-topology-form")
-        .transition().duration(300).ease("sin-out")
-        .style("left" , "0px")
-
-      d3.select(".qdr-topology-svg")
-        .transition().duration(300).ease("sin-out")
-        .style("margin-left", "430px")
-        .each("end", function () {
-          resize()
-          $timeout(function () {QDR.log.debug("done with transition. setting scope ");$scope.panelVisible
= true})
-        })
-    }
   })
-
   /**
    * @method TopologyController
    *
@@ -110,6 +73,34 @@ var QDR = (function(QDR) {
       $scope.quiesceState = {}
       var dontHide = false;
 
+      $scope.panelVisible = true  // show/hide the panel on the left
+      $scope.hideLeftPane = function () {
+        d3.select(".qdr-topology.pane.left")
+          .transition().duration(300).ease("sin-in")
+          .style("left" , "-380px")
+
+        d3.select(".panel-adjacent")
+          .transition().duration(300).ease("sin-in")
+          .style("margin-left", "30px")
+          .each("end", function () {
+            resize()
+            $timeout(function () {QDR.log.info("done with transition. setting scope ");$scope.panelVisible
= false})
+          })
+      }
+      $scope.showLeftPane = function () {
+        d3.select(".qdr-topology.pane.left")
+          .transition().duration(300).ease("sin-out")
+          .style("left" , "0px")
+
+        d3.select(".panel-adjacent")
+          .transition().duration(300).ease("sin-out")
+          .style("margin-left", "430px")
+          .each("end", function () {
+            resize()
+            $timeout(function () {QDR.log.info("done with transition. setting scope ");$scope.panelVisible
= true})
+          })
+      }
+
       $scope.quiesceConnection = function(row) {
         var entity = row.entity;
         var state = $scope.quiesceState[entity.connectionId].state;
@@ -402,13 +393,13 @@ var QDR = (function(QDR) {
           var x = radiusNormal * 4;
           var y = x;;
           if (newValue > 1) { // add at current mouse position
-            var offset = jQuery('#topology').offset();
-            x = mouseX - offset.left + $(document).scrollLeft();
-            y = mouseY - offset.top + $(document).scrollTop();;
+            var rm = relativeMouse()
+            x = rm.left - rm.offset.left;
+            y = rm.top - rm.offset.top;
           }
           QDRService.ensureAllEntities({entity: ".router"}, function () {
             NewRouterName = genNewName();
-            nodes.push(aNode(id, NewRouterName, "inter-router", '', undefined, nodes.length,
x, y, undefined, true));
+            nodes.push(aNode(id, NewRouterName, "inter-router", '', nodes.length, x, y, undefined,
undefined, true));
             force.nodes(nodes).links(links).start();
             restart(false);
           })
@@ -498,10 +489,17 @@ var QDR = (function(QDR) {
       $scope.isFixed = function() {
         if (!$scope.contextNode)
           return false;
-        return ($scope.contextNode.fixed == 1);
+        return ($scope.contextNode.fixed & 1);
       }
 
       var mouseX, mouseY;
+      var relativeMouse = function () {
+        var offset = jQuery('#topology').offset();
+        return {left: (mouseX + $(document).scrollLeft()) - 1,
+                top: (mouseY  + $(document).scrollTop()) - 1,
+                offset: offset
+                }
+      }
       // event handlers for popup context menu
       $(document).mousemove(function(e) {
         mouseX = e.clientX;
@@ -683,7 +681,7 @@ var QDR = (function(QDR) {
           localStorage[d.name] = angular.toJson({
             x: Math.round(d.x),
             y: Math.round(d.y),
-            fixed: d.fixed ? 1 : 0,
+            fixed: (d.fixed & 1) ? 1 : 0,
           });
         })
       }
@@ -837,7 +835,6 @@ var QDR = (function(QDR) {
       var gravity = function (d, nodeCount) {
         return forceScale(nodeCount, 0.0001, 0.1)
       }
-
       // initialize the nodes and links array from the QDRService.topology._nodeInfo object
       var initForceGraph = function() {
         nodes = [];
@@ -867,9 +864,10 @@ var QDR = (function(QDR) {
               return;
             if (d3.select('#svg_context_menu').style('display') !== 'block')
               $(document).click();
+            var rm = relativeMouse()
             d3.select('#svg_context_menu')
-              .style('left', (mouseX + $(document).scrollLeft()) + "px")
-              .style('top', (mouseY + $(document).scrollTop()) + "px")
+              .style('left', rm.left + "px")
+              .style('top', (rm.top - rm.offset.top) + "px")
               .style('display', 'block');
           })
           .on('click', function(d) {
@@ -1393,9 +1391,10 @@ var QDR = (function(QDR) {
               return;
 
             mousedown_link = d;
+            var rm = relativeMouse()
             d3.select('#link_context_menu')
-              .style('left', (mouseX + $(document).scrollLeft()) + "px")
-              .style('top', (mouseY + $(document).scrollTop()) + "px")
+              .style('left', rm.left + "px")
+              .style('top', (rm.top - rm.offset.top) + "px")
               .style('display', 'block');
           })
           // left click a path
@@ -1521,7 +1520,7 @@ var QDR = (function(QDR) {
             return (d === selected_node)
           })
           .classed('fixed', function(d) {
-            return d.fixed
+            return d.fixed & 1
           })
 
         // add new circle nodes. if nodes[] is longer than the existing paths, add a new
path for each new element
@@ -1544,7 +1543,7 @@ var QDR = (function(QDR) {
               return null;
             })
             .classed('fixed', function(d) {
-              return d.fixed
+              return d.fixed & 1
             })
             .classed('temp', function(d) {
               return QDRService.nameFromId(d.key) == '__internal__';
@@ -1703,13 +1702,13 @@ var QDR = (function(QDR) {
           .on("contextmenu", function(d) {  // circle
             $(document).click();
             d3.event.preventDefault();
-            $scope.contextNode = d;
-            if (!$scope.$$phase) $scope.$apply() // we just changed a scope valiable during
an async event
+            $scope.contextNode = d
+            var rm = relativeMouse()
             d3.select('#node_context_menu')
-              .style('left', (mouseX + $(document).scrollLeft()) + "px")
-              .style('top', (mouseY + $(document).scrollTop()) + "px")
+              .style('left', rm.left + "px")
+              .style('top', (rm.top - rm.offset.top) + "px")
               .style('display', 'block');
-
+            if (!$scope.$$phase) $scope.$apply()
           })
           .on("click", function(d) {  // circle
             if (!mouseup_node)
@@ -2018,13 +2017,13 @@ var QDR = (function(QDR) {
           left = left - 30;
           mouseY = mouseY - 20
         }
-        var offset = jQuery('#topology').offset();
+        var rm = relativeMouse()
         d3.select('#multiple_details')
           .style({
             display: display,
             opacity: 1,
-            left: (mouseX - offset.left + $(document).scrollLeft()) + "px",
-            top: (mouseY - offset.top + $(document).scrollTop()) + "px"
+            left: rm.left + "px",
+            top: rm.top + "px"
           })
         if (d.normals.length === 1) {
           // simulate a click on the connection to popup the link details


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@qpid.apache.org
For additional commands, e-mail: commits-help@qpid.apache.org


Mime
View raw message