Adds search field and jump-to a device UI.

Adds a search field in the network UI and a jump-to level menu. This
allows users to quickly find a device on the canvas or jump to a
certain mode/zoom-level.

Adds animation to smooth out the transition from the current viewport
to a viewport centered on the searched for device or zoom-level.

* Adds animation FSM and changes the 0 hot key to use it
* Adds jump to animation
* Adds search bar type ahead
* Adds jump animation to search and jump-to menus
* Adds keybinding FSM
* Updates the dropdown when devices are added/edit/removed
* Highlights the searched for host
This commit is contained in:
Ben Thomasson
2018-02-06 11:43:04 -05:00
parent 00a9283e32
commit 6f3bf4fd1b
27 changed files with 661 additions and 170 deletions

View File

@@ -1,8 +1,9 @@
/* Copyright (c) 2017 Red Hat, Inc. */
/* Copyright (c) 2017-2018 Red Hat, Inc. */
var fsm = require('./fsm.js');
var button = require('./button.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) {
this.id = id;
@@ -908,3 +909,18 @@ function TestResult(id, name, result, date, code_under_test) {
this.code_under_test = code_under_test;
}
exports.TestResult = TestResult;
function Animation(id, steps, data, scope, tracer, callback) {
this.id = id;
this.steps = steps;
this.active = true;
this.frame_number_seq = util.natural_numbers(-1);
this.frame_number = 0;
this.data = data;
this.callback = callback;
this.scope = scope;
this.interval = null;
this.fsm = new fsm.FSMController(this, "animation_fsm", animation_fsm.Start, tracer);
}
exports.Animation = Animation;