Re: [Freeipa-devel] [PATCH] 0048-50: webui: extend topology graph functionality

[Petr Vobornik]

On 06/13/2016 10:48 AM, Pavel Vomacka wrote:
> Hello,
> 
> please review attached patches which extend topology graph
> functionality. First two add possibility to create agreement using mouse
> and the third one adds 'Autogenerated' placeholder.
> 
> 0047,48: https://fedorahosted.org/freeipa/ticket/5648
> 
> 0050: https://fedorahosted.org/freeipa/ticket/5867
> 
> -- 
> 
> Pavel^3 Vomacka
> 


ACK

master:
* be235cedf88ee69430abea44ad1eca4bc5817d7b Add creating a segment using
mouse
* ab52b33c71d62524b9d46a66a22ec0440d23ff38 Add listener which opens add
segment dialog
* f85c347f4d2f50d49e77373a56c55f3e2b4bc473 Add placeholder to add
segment dialog
-- 
Petr Vobornik

-- 
Manage your subscription for the Freeipa-devel mailing list:
https://www.redhat.com/mailman/listinfo/freeipa-devel
Contribute to FreeIPA: http://www.freeipa.org/page/Contribute/Code

Re: [Freeipa-devel] [PATCH] 0048-50: webui: extend topology graph functionality

[Pavel Vomacka]

On 06/13/2016 10:48 AM, Pavel Vomacka wrote:

Hello,

please review attached patches which extend topology graph 
functionality. First two add possibility to create agreement using 
mouse and the third one adds 'Autogenerated' placeholder.


0047,48: https://fedorahosted.org/freeipa/ticket/5648

0050: https://fedorahosted.org/freeipa/ticket/5867

--

Pavel^3 Vomacka



Updated patch 48 attached. Added FontAwesome to css style of plus icon 
and set lower stabilization timeout.


--
Pavel^3 Vomacka
From 31c22e520df96a357cec56d2d809889f18cefe6f Mon Sep 17 00:00:00 2001
From: Pavel Vomacka 
Date: Mon, 13 Jun 2016 10:21:25 +0200
Subject: [PATCH 1/3] Add creating a segment using mouse

Create new semicircles around the node after mouseover. These work as buttons
to create arrow and after clicking on another node the Add topology segment dialog
is opened. Also selecting segment works, if the segment already exists then
the segment is selected instead of opening the dialog.

https://fedorahosted.org/freeipa/ticket/5648
---
 install/ui/less/widgets.less |  59 --
 install/ui/src/freeipa/topology_graph.js | 347 ++-
 2 files changed, 382 insertions(+), 24 deletions(-)

diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less
index 0f9bc8c171d5c35d955c6b55d2e95ee105c35159..686131d3222da556dffb91870f179f8270ff1419 100644
--- a/install/ui/less/widgets.less
+++ b/install/ui/less/widgets.less
@@ -150,41 +150,60 @@ tbody:empty { display: none; }
 
 .topology-view {
 svg {
-  background-color: #FFF;
-  cursor: default;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
+background-color: #FFF;
+cursor: default;
+-webkit-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+-o-user-select: none;
+user-select: none;
 }
 
+
 path.link {
-  fill: none;
-  stroke-width: 4px;
-  cursor: pointer;
+fill: none;
+stroke: #000;
+stroke-width: 4px;
+cursor: pointer;
+.dragline {
+pointer-events: none;
+}
+}
+
+.plus {
+font-size: .9em;
+font-family: FontAwesome;
+fill: #fff;
+}
+
+.adder_label {
+font-weight: bold;
+}
+
+path.adder {
+cursor: pointer;
+}
+
+.selected {
+stroke-dasharray: 10,2;
 }
 
 .marker {
 stroke: rgba(0, 0, 0);
 }
 
-path.link.selected {
-  stroke-dasharray: 10,2;
-}
-
 circle.node {
-  stroke-width: 1.5px;
-  cursor: pointer;
+stroke-width: 1.5px;
+cursor: pointer;
 }
 
 text {
-  font: 16px sans-serif;
-  pointer-events: none;
+font: 16px sans-serif;
+pointer-events: none;
 }
 
 text.id {
-  text-anchor: middle;
-  font-weight: bold;
+text-anchor: middle;
+font-weight: bold;
 }
 }
diff --git a/install/ui/src/freeipa/topology_graph.js b/install/ui/src/freeipa/topology_graph.js
index 332411f943770a8e1833b698ee28026e2382bb76..ce2ebeaff611987ae27f2655b5da80bdcd1b4f8a 100644
--- a/install/ui/src/freeipa/topology_graph.js
+++ b/install/ui/src/freeipa/topology_graph.js
@@ -29,13 +29,21 @@ var topology_graph = {
 topology_graph.TopoGraph = declare([Evented], {
 width: 960,
 height: 500,
+_adder_anim_duration: 200,
+_adder_inner_radius: 15,
+_adder_outer_radius: 30,
 _colors: d3.scale.category10(),
 _svg : null,
 _path: null,
 _circle: null,
 
+_create_agreement: null,
 _selected_link: null,
 _mousedown_link: null,
+_source_node: null,
+_source_node_html: null,
+_target_node: null,
+_drag_line: null,
 
 /**
  * Nodes - IPA servers
@@ -115,31 +123,89 @@ topology_graph.TopoGraph = declare([Evented], {
 node.x = Number(this._get_local_storage_attr(node.id, 'x'));
 node.y = Number(this._get_local_storage_attr(node.id, 'y'));
 }
+node.ca_adder = d3.svg.arc()
+.innerRadius(this._adder_inner_radius)
+.outerRadius(this._adder_inner_radius)
+.startAngle(2 * (Math.PI/180))
+.endAngle(178 * (Math.PI/180));
+
+node.domain_adder = d3.svg.arc()
+.innerRadius(this._adder_inner_radius)
+.outerRadius(this._adder_inner_radius)
+.startAngle(182 * (Math.PI/180))
+.endAngle(358 * (Math.PI/180));
+
+node.drag_mode = false;
 }
 
 this._init_layout();
 this._define_shapes();
 
 // handles to link and node element groups
+// the order of adding shapes is important because of order of showing
+// them
 this._path = this._svg.append('svg:g')