Cleans up network UI code for 3.3

This removes features that were not selected for 3.3.

* Removes breadcrumb
* Removes "Jump To" panel and some of the hotkey panel items
* Removes Buttons in favor of Action Dropdown
* Removes chevrons
* Removes ActionIcon model
* Removes the Rename button on the context menu
* Makes details panel readonly
* Adds expand modal for extra vars
* Adds inventory copy function back to inventory list
* Sets cursor to visible
* Adds hide_menus
* Adds fix for mice that return large mousewheel deltas
This commit is contained in:
Jared Tabor
2018-02-22 13:24:01 -08:00
committed by Ben Thomasson
parent 766bee3753
commit 66c351c60c
35 changed files with 582 additions and 1424 deletions

View File

@@ -2,7 +2,6 @@
var fsm = require('./fsm.js');
var button = require('./button.fsm.js');
var util = require('./util.js');
var inherits = require('inherits');
var animation_fsm = require('./animation.fsm.js');
function Device(id, name, x, y, type, host_id) {
@@ -60,29 +59,6 @@ Device.prototype.is_selected = function (x, y) {
Device.prototype.describeArc = util.describeArc;
Device.prototype.compile_variables = function () {
var variables = JSON.parse(JSON.stringify(this.variables));
var awx_variables = {};
variables.awx = awx_variables;
awx_variables.name = this.name;
awx_variables.type = this.type;
awx_variables.interfaces = [];
var i = 0;
var intf = null;
for (i = 0; i < this.interfaces.length; i++) {
intf = {name: this.interfaces[i].name,
id: this.interfaces[i].id};
if (this.interfaces[i].link !== null) {
intf.link_id = this.interfaces[i].link.id;
intf.link_name = this.interfaces[i].link.name;
intf.remote_interface_name = this.interfaces[i].remote_interface().name;
intf.remote_device_name = this.interfaces[i].remote_interface().device.name;
}
awx_variables.interfaces.push(intf);
}
return variables;
};
function Interface(id, name) {
this.id = id;
this.name = name;
@@ -321,82 +297,6 @@ Link.prototype.plength = function (x, y) {
return util.pDistance(x, y, x1, y1, x2, y2);
};
function ActionIcon(name, x, y, r, callback, enabled, tracer) {
this.name = name;
this.x = x;
this.y = y;
this.r = r;
this.callback = callback;
this.is_pressed = false;
this.mouse_over = false;
this.enabled = enabled;
this.fsm = new fsm.FSMController(this, "button_fsm", enabled ? button.Start : button.Disabled, tracer);
}
exports.ActionIcon = ActionIcon;
ActionIcon.prototype.is_selected = function (x, y) {
return (x > this.x - this.r &&
x < this.x + this.r &&
y > this.y - this.r &&
y < this.y + this.r);
};
function Button(name, x, y, width, height, callback, tracer) {
this.name = name;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.callback = callback;
this.is_pressed = false;
this.mouse_over = false;
this.enabled = true;
this.fsm = new fsm.FSMController(this, "button_fsm", button.Start, tracer);
}
exports.Button = Button;
Button.prototype.is_selected = function (x, y) {
return (x > this.x &&
x < this.x + this.width &&
y > this.y &&
y < this.y + this.height);
};
function ToggleButton(name, x, y, width, height, toggle_callback, untoggle_callback, default_toggled, tracer) {
this.name = name;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.callback = this.toggle;
this.is_pressed = default_toggled;
this.toggled = default_toggled;
this.toggle_callback = toggle_callback;
this.untoggle_callback = untoggle_callback;
this.mouse_over = false;
this.enabled = true;
this.fsm = new fsm.FSMController(this, "button_fsm", button.Start, tracer);
}
inherits(ToggleButton, Button);
exports.ToggleButton = ToggleButton;
ToggleButton.prototype.toggle = function () {
this.toggled = !this.toggled;
this.is_pressed = this.toggled;
if (this.toggled) {
this.toggle_callback();
} else {
this.untoggle_callback();
}
};
function ContextMenu(name, x, y, width, height, callback, enabled, buttons, tracer) {
this.name = name;
this.x = x;
@@ -447,7 +347,6 @@ ContextMenuButton.prototype.is_selected = function (x, y) {
};
function ToolBox(id, name, type, x, y, width, height) {
this.id = id;
this.name = name;
@@ -464,222 +363,6 @@ function ToolBox(id, name, type, x, y, width, height) {
}
exports.ToolBox = ToolBox;
function Process(id, name, type, x, y) {
this.id = id;
this.name = name;
this.type = type;
this.x = x;
this.y = y;
this.height = 50;
this.width = 50;
this.size = 50;
this.selected = null;
this.enabled = true;
this.icon = false;
this.device = null;
}
exports.Process = Process;
Process.prototype.toJSON = function () {
return {id: this.id,
name: this.name};
};
function Stream(id, from_device, to_device, label) {
this.id = id;
this.from_device = from_device;
this.to_device = to_device;
this.selected = false;
this.remote_selected = false;
this.label = label;
this.offset = 0;
}
exports.Stream = Stream;
Stream.prototype.toJSON = function () {
return {to_device: this.to_device.id,
from_device: this.from_device.id};
};
Stream.prototype.slope_rad = function () {
//Return the slope in radians for this transition.
var x1 = this.from_device.x;
var y1 = this.from_device.y;
var x2 = this.to_device.x;
var y2 = this.to_device.y;
return Math.atan2(y2 - y1, x2 - x1) + Math.PI;
};
Stream.prototype.slope = function () {
//Return the slope in degrees for this transition.
var x1 = this.from_device.x;
var y1 = this.from_device.y;
var x2 = this.to_device.x;
var y2 = this.to_device.y;
return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI + 180;
};
Stream.prototype.flip_text_rotate = function () {
var slope = this.slope();
if (slope > 90 && slope < 270) {
return 180;
} else {
return 0;
}
};
Stream.prototype.flip_text_offset = function () {
var slope = this.slope();
if (slope > 90 && slope < 270) {
return 10;
} else {
return 0;
}
};
Stream.prototype.pslope = function () {
//Return the slope of a perpendicular line to this
//transition
var x1 = this.from_device.x;
var y1 = this.from_device.y;
var x2 = this.to_device.x;
var y2 = this.to_device.y;
var slope = (y2 - y1)/(x2 - x1);
//var intercept = - slope * x1;
var pslope = 1/slope;
return Math.atan(pslope) * 180 / Math.PI + 180;
};
Stream.prototype.perpendicular = function (x, y) {
//Find the perpendicular line through x, y to this transition.
var x1 = this.from_device.x;
var y1 = this.from_device.y;
var x2 = this.to_device.x;
var y2 = this.to_device.y;
var slope = (y2 - y1)/(x2 - x1);
var intercept = y1 - slope * x1;
var pslope = -1/slope;
var pintercept = y - pslope * x;
var xi = (pintercept - intercept) / (slope - pslope);
var yi = pslope * xi + pintercept;
return {x1:x, y1:y, x2: xi, y2: yi};
};
Stream.prototype.is_selected = function (x, y) {
// Is the distance to the mouse location less than 25 if on the label side
// or 5 on the other from the shortest line to the transition?
console.log("is_selected");
var phi = this.slope_rad();
console.log({"phi": phi});
console.log({'x': this.from_device.x, 'y': this.from_device.y});
console.log({'x': this.to_device.x, 'y': this.to_device.y});
console.log({'x': x, 'y': y});
var p1 = util.cartesianToPolar(this.from_device.x, this.from_device.y);
var p2 = util.cartesianToPolar(this.to_device.x, this.to_device.y);
var p3 = util.cartesianToPolar(x, y);
console.log(p1);
p1.theta -= phi;
console.log(p1);
console.log(p2);
p2.theta -= phi;
console.log(p2);
p3.theta -= phi;
p1 = util.polarToCartesian_rad(0, 0, p1.r, p1.theta);
p2 = util.polarToCartesian_rad(0, 0, p2.r, p2.theta);
p3 = util.polarToCartesian_rad(0, 0, p3.r, p3.theta);
p2.y -= this.arc_offset2();
console.log(p1);
console.log(p2);
console.log(p3);
var max_x = Math.max(p1.x, p2.x);
var min_x = Math.min(p1.x, p2.x);
var max_y = Math.max(p1.y, p2.y) + 5;
var min_y = Math.min(p1.y, p2.y) - 25 ;
return p3.x > min_x && p3.x < max_x && p3.y > min_y && p3.y < max_y;
};
Stream.prototype.length = function () {
//Return the length of this transition.
var x1 = this.from_device.x;
var y1 = this.from_device.y;
var x2 = this.to_device.x;
var y2 = this.to_device.y;
return Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2));
};
Stream.prototype.inter_length = function () {
//Return the length of this transition between states.
return this.length() - this.from_device.size - this.to_device.size;
};
Stream.prototype.arc_r = function () {
return this.inter_length();
};
Stream.prototype.arc_r2 = function () {
var offset_to_r = [2, 1, 0.75, 0.6, 0.55, 0.53, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
return this.length() * offset_to_r[this.offset];
};
Stream.prototype.arc_offset = function () {
var r = this.arc_r();
var offset = r - (Math.sin(this.arc_angle_rad()) * r);
return offset;
};
Stream.prototype.arc_offset2 = function () {
var r = this.arc_r2();
var theta = Math.acos((this.length() / 2) / r);
var offset = r * (1 - Math.sin(theta));
return offset;
};
Stream.prototype.arc_angle_rad = function () {
return Math.acos((this.inter_length() / 2) / this.arc_r());
};
Stream.prototype.arc_angle_tan_rad = function () {
return Math.PI/2 - Math.acos((this.inter_length() / 2) / this.arc_r());
};
Stream.prototype.arc_angle_tan = function () {
return this.arc_angle_tan_rad() * 180 / Math.PI;
};
Stream.prototype.arc_angle_tan_rad2 = function () {
var r = this.arc_r2();
var l = this.length();
var phi = this.end_arc_angle_rad();
return Math.PI/2 - Math.acos((l/2 - Math.cos(phi) * this.to_device.size) / r);
};
Stream.prototype.arc_angle_tan2 = function () {
return this.arc_angle_tan_rad2() * 180 / Math.PI;
};
Stream.prototype.end_arc_angle_rad = function () {
var r = this.arc_r2();
var l = this.length();
return Math.acos((this.to_device.size / 2) / r) - Math.acos((l/2)/r);
};
Stream.prototype.end_arc_angle = function () {
return this.end_arc_angle_rad() * 180 / Math.PI;
};
Stream.prototype.start_arc_angle_rad = function () {
return Math.acos((this.from_device.size / 2) / this.arc_r2()) - Math.acos((this.length()/2)/this.arc_r2());
};
Stream.prototype.start_arc_angle = function () {
return this.start_arc_angle_rad() * 180 / Math.PI;
};
function Test(name, event_trace, fsm_trace, pre_test_snapshot, post_test_snapshot) {
this.name = name;
this.event_trace = event_trace;
@@ -710,6 +393,7 @@ function Animation(id, steps, data, scope, tracer, callback) {
this.callback = callback;
this.scope = scope;
this.interval = null;
this.frame_delay = 17;
this.fsm = new fsm.FSMController(this, "animation_fsm", animation_fsm.Start, tracer);
}
exports.Animation = Animation;