From 2132b421104d2bc94fd79efa3bf0c844dcf51ad1 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 19:08:20 -0400 Subject: [PATCH 01/10] Added modes for key-traversal --- html/js/structure.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/html/js/structure.js b/html/js/structure.js index 5c8f4e3..3774736 100644 --- a/html/js/structure.js +++ b/html/js/structure.js @@ -44,6 +44,12 @@ var GTE = (function () { MERGE: 3, DISSOLVE: 4 }; + GTE.KEYMODES = { + NO_TRAVERSAL: 0, + NODE_TRAVERSAL: 1, + MULTI_TRAVERSAL: 2 + }; + if (Object.freeze) { Object.freeze(GTE.MODES); } From 2b86df74e8e8fca23e79e8aaef8d42cbc063b062 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 02:06:51 -0400 Subject: [PATCH 02/10] Added KeyEvent constants --- html/js/thirdparty/KeyEvent.js | 120 +++++++++++++++++++++++++++++ html/js/thirdparty/KeyEvent.min.js | 1 + 2 files changed, 121 insertions(+) create mode 100644 html/js/thirdparty/KeyEvent.js create mode 100644 html/js/thirdparty/KeyEvent.min.js diff --git a/html/js/thirdparty/KeyEvent.js b/html/js/thirdparty/KeyEvent.js new file mode 100644 index 0000000..914f7a5 --- /dev/null +++ b/html/js/thirdparty/KeyEvent.js @@ -0,0 +1,120 @@ +// This file allows access to readable keycodes for key presses +if (typeof KeyEvent == "undefined") { + var KeyEvent = { + DOM_VK_CANCEL: 3, + DOM_VK_HELP: 6, + DOM_VK_BACK_SPACE: 8, + DOM_VK_TAB: 9, + DOM_VK_CLEAR: 12, + DOM_VK_RETURN: 13, + DOM_VK_ENTER: 14, + DOM_VK_SHIFT: 16, + DOM_VK_CONTROL: 17, + DOM_VK_ALT: 18, + DOM_VK_PAUSE: 19, + DOM_VK_CAPS_LOCK: 20, + DOM_VK_ESCAPE: 27, + DOM_VK_SPACE: 32, + DOM_VK_PAGE_UP: 33, + DOM_VK_PAGE_DOWN: 34, + DOM_VK_END: 35, + DOM_VK_HOME: 36, + DOM_VK_LEFT: 37, + DOM_VK_UP: 38, + DOM_VK_RIGHT: 39, + DOM_VK_DOWN: 40, + DOM_VK_PRINTSCREEN: 44, + DOM_VK_INSERT: 45, + DOM_VK_DELETE: 46, + DOM_VK_0: 48, + DOM_VK_1: 49, + DOM_VK_2: 50, + DOM_VK_3: 51, + DOM_VK_4: 52, + DOM_VK_5: 53, + DOM_VK_6: 54, + DOM_VK_7: 55, + DOM_VK_8: 56, + DOM_VK_9: 57, + DOM_VK_SEMICOLON: 59, + DOM_VK_EQUALS: 61, + DOM_VK_A: 65, + DOM_VK_B: 66, + DOM_VK_C: 67, + DOM_VK_D: 68, + DOM_VK_E: 69, + DOM_VK_F: 70, + DOM_VK_G: 71, + DOM_VK_H: 72, + DOM_VK_I: 73, + DOM_VK_J: 74, + DOM_VK_K: 75, + DOM_VK_L: 76, + DOM_VK_M: 77, + DOM_VK_N: 78, + DOM_VK_O: 79, + DOM_VK_P: 80, + DOM_VK_Q: 81, + DOM_VK_R: 82, + DOM_VK_S: 83, + DOM_VK_T: 84, + DOM_VK_U: 85, + DOM_VK_V: 86, + DOM_VK_W: 87, + DOM_VK_X: 88, + DOM_VK_Y: 89, + DOM_VK_Z: 90, + DOM_VK_CONTEXT_MENU: 93, + DOM_VK_NUMPAD0: 96, + DOM_VK_NUMPAD1: 97, + DOM_VK_NUMPAD2: 98, + DOM_VK_NUMPAD3: 99, + DOM_VK_NUMPAD4: 100, + DOM_VK_NUMPAD5: 101, + DOM_VK_NUMPAD6: 102, + DOM_VK_NUMPAD7: 103, + DOM_VK_NUMPAD8: 104, + DOM_VK_NUMPAD9: 105, + DOM_VK_MULTIPLY: 106, + DOM_VK_ADD: 107, + DOM_VK_SEPARATOR: 108, + DOM_VK_SUBTRACT: 109, + DOM_VK_DECIMAL: 110, + DOM_VK_DIVIDE: 111, + DOM_VK_F1: 112, + DOM_VK_F2: 113, + DOM_VK_F3: 114, + DOM_VK_F4: 115, + DOM_VK_F5: 116, + DOM_VK_F6: 117, + DOM_VK_F7: 118, + DOM_VK_F8: 119, + DOM_VK_F9: 120, + DOM_VK_F10: 121, + DOM_VK_F11: 122, + DOM_VK_F12: 123, + DOM_VK_F13: 124, + DOM_VK_F14: 125, + DOM_VK_F15: 126, + DOM_VK_F16: 127, + DOM_VK_F17: 128, + DOM_VK_F18: 129, + DOM_VK_F19: 130, + DOM_VK_F20: 131, + DOM_VK_F21: 132, + DOM_VK_F22: 133, + DOM_VK_F23: 134, + DOM_VK_F24: 135, + DOM_VK_NUM_LOCK: 144, + DOM_VK_SCROLL_LOCK: 145, + DOM_VK_COMMA: 188, + DOM_VK_PERIOD: 190, + DOM_VK_SLASH: 191, + DOM_VK_BACK_QUOTE: 192, + DOM_VK_OPEN_BRACKET: 219, + DOM_VK_BACK_SLASH: 220, + DOM_VK_CLOSE_BRACKET: 221, + DOM_VK_QUOTE: 222, + DOM_VK_META: 224 + }; +} \ No newline at end of file diff --git a/html/js/thirdparty/KeyEvent.min.js b/html/js/thirdparty/KeyEvent.min.js new file mode 100644 index 0000000..c841d41 --- /dev/null +++ b/html/js/thirdparty/KeyEvent.min.js @@ -0,0 +1 @@ +if("undefined"==typeof KeyEvent)var KeyEvent={DOM_VK_CANCEL:3,DOM_VK_HELP:6,DOM_VK_BACK_SPACE:8,DOM_VK_TAB:9,DOM_VK_CLEAR:12,DOM_VK_RETURN:13,DOM_VK_ENTER:14,DOM_VK_SHIFT:16,DOM_VK_CONTROL:17,DOM_VK_ALT:18,DOM_VK_PAUSE:19,DOM_VK_CAPS_LOCK:20,DOM_VK_ESCAPE:27,DOM_VK_SPACE:32,DOM_VK_PAGE_UP:33,DOM_VK_PAGE_DOWN:34,DOM_VK_END:35,DOM_VK_HOME:36,DOM_VK_LEFT:37,DOM_VK_UP:38,DOM_VK_RIGHT:39,DOM_VK_DOWN:40,DOM_VK_PRINTSCREEN:44,DOM_VK_INSERT:45,DOM_VK_DELETE:46,DOM_VK_0:48,DOM_VK_1:49,DOM_VK_2:50,DOM_VK_3:51,DOM_VK_4:52,DOM_VK_5:53,DOM_VK_6:54,DOM_VK_7:55,DOM_VK_8:56,DOM_VK_9:57,DOM_VK_SEMICOLON:59,DOM_VK_EQUALS:61,DOM_VK_A:65,DOM_VK_B:66,DOM_VK_C:67,DOM_VK_D:68,DOM_VK_E:69,DOM_VK_F:70,DOM_VK_G:71,DOM_VK_H:72,DOM_VK_I:73,DOM_VK_J:74,DOM_VK_K:75,DOM_VK_L:76,DOM_VK_M:77,DOM_VK_N:78,DOM_VK_O:79,DOM_VK_P:80,DOM_VK_Q:81,DOM_VK_R:82,DOM_VK_S:83,DOM_VK_T:84,DOM_VK_U:85,DOM_VK_V:86,DOM_VK_W:87,DOM_VK_X:88,DOM_VK_Y:89,DOM_VK_Z:90,DOM_VK_CONTEXT_MENU:93,DOM_VK_NUMPAD0:96,DOM_VK_NUMPAD1:97,DOM_VK_NUMPAD2:98,DOM_VK_NUMPAD3:99,DOM_VK_NUMPAD4:100,DOM_VK_NUMPAD5:101,DOM_VK_NUMPAD6:102,DOM_VK_NUMPAD7:103,DOM_VK_NUMPAD8:104,DOM_VK_NUMPAD9:105,DOM_VK_MULTIPLY:106,DOM_VK_ADD:107,DOM_VK_SEPARATOR:108,DOM_VK_SUBTRACT:109,DOM_VK_DECIMAL:110,DOM_VK_DIVIDE:111,DOM_VK_F1:112,DOM_VK_F2:113,DOM_VK_F3:114,DOM_VK_F4:115,DOM_VK_F5:116,DOM_VK_F6:117,DOM_VK_F7:118,DOM_VK_F8:119,DOM_VK_F9:120,DOM_VK_F10:121,DOM_VK_F11:122,DOM_VK_F12:123,DOM_VK_F13:124,DOM_VK_F14:125,DOM_VK_F15:126,DOM_VK_F16:127,DOM_VK_F17:128,DOM_VK_F18:129,DOM_VK_F19:130,DOM_VK_F20:131,DOM_VK_F21:132,DOM_VK_F22:133,DOM_VK_F23:134,DOM_VK_F24:135,DOM_VK_NUM_LOCK:144,DOM_VK_SCROLL_LOCK:145,DOM_VK_COMMA:188,DOM_VK_PERIOD:190,DOM_VK_SLASH:191,DOM_VK_BACK_QUOTE:192,DOM_VK_OPEN_BRACKET:219,DOM_VK_BACK_SLASH:220,DOM_VK_CLOSE_BRACKET:221,DOM_VK_QUOTE:222,DOM_VK_META:224}; \ No newline at end of file From a4d044b5b00e1ea82d4af0991a3587afd9165447 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 19:59:23 -0400 Subject: [PATCH 03/10] Added css for focus and hover --- html/css/main.css | 4 ++-- html/css/svg-styles.css | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/html/css/main.css b/html/css/main.css index 49dc47d..ce6a2c0 100644 --- a/html/css/main.css +++ b/html/css/main.css @@ -269,13 +269,13 @@ a { .button--sacnite:not(.disabled):hover { color: #37474f; } -.button--sacnite.button--inverted:not(.disabled):hover { +.button--sacnite.button--inverted:not(.disabled):hover i, .button--sacnite.button--inverted:not(.disabled):focus i { color: #fff; } .button--sacnite.button--inverted.active { color: #fff; } -.button--sacnite:not(.active):not(.disabled):hover::before { +.button--sacnite:not(.active):not(.disabled):hover::before, .button--sacnite:not(.active):not(.disabled):focus::before { box-shadow: inset 0 0 0 2px #37474f; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); diff --git a/html/css/svg-styles.css b/html/css/svg-styles.css index c60ac9b..a5dde9a 100644 --- a/html/css/svg-styles.css +++ b/html/css/svg-styles.css @@ -1,6 +1,10 @@ .node:hover { fill: #808080; } + +.node.hover { + fill: #808080; +} .node.selected { fill: #14A520; } From be623157442c3effa6dee7cacdaaba0f0a154381 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 20:03:10 -0400 Subject: [PATCH 04/10] Added js files to index.html --- html/index.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/html/index.html b/html/index.html index 0df2f02..1640f32 100644 --- a/html/index.html +++ b/html/index.html @@ -39,11 +39,11 @@
      • -
      • -
      • +
      • +
      -
      • +
    @@ -88,11 +88,13 @@

    Settings

    + + From c0f6d231f21b9389882788d0fbeabc854140ee97 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 20:16:35 -0400 Subject: [PATCH 05/10] Added a special css class for root node --- html/js/tree/Node.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/html/js/tree/Node.js b/html/js/tree/Node.js index e34bb34..9619d1a 100644 --- a/html/js/tree/Node.js +++ b/html/js/tree/Node.js @@ -71,6 +71,8 @@ GTE.TREE = (function (parentModule) { .click(function() { thisNode.onClick(); }); + if (!this.parent) + this.shape.addClass('root'); if (this.player) { this.shape.fill(this.player.colour); } else { From 54d1cd285310c51aadbbe7911492b217b244f7b1 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 20:17:31 -0400 Subject: [PATCH 06/10] Created functional KeyTraversal class --- html/js/guiutils/KeyTraversal.js | 213 +++++++++++++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 html/js/guiutils/KeyTraversal.js diff --git a/html/js/guiutils/KeyTraversal.js b/html/js/guiutils/KeyTraversal.js new file mode 100644 index 0000000..2ce06c1 --- /dev/null +++ b/html/js/guiutils/KeyTraversal.js @@ -0,0 +1,213 @@ +GTE.UI = (function (parentModule) { + + /** + * Creates a new KeyTraversal object. Currently implements + * "postorder" tree traversal. + * @class + */ + function KeyTraversal() { + this.keyMode = GTE.KEYMODES.NODE_TRAVERSAL; + this.activeNode = null; + this.activeMulti = null; + this.enabled = null; + } + + /** + * Function that switches the current mode key traversal mode + * Valid modes are declared in GTE.KEYMODES + * @param {Number} newMode Key mode to be switched to. + */ + KeyTraversal.prototype.switchMode = function(newMode) { + switch(newMode) { + case GTE.KEYMODES.NODE_TRAVERSAL: + case GTE.KEYMODES.MULTI_TRAVERSAL: + var buttonsToBlur = document.getElementsByTagName('button'); + for (var i = 0; i < buttonsToBlur.length; i++) + buttonsToBlur[i].blur(); + break; + case GTE.KEYMODES.NO_TRAVERSAL: + this.resetCanvasFocuses(); + break; + } + this.keyMode = newMode; + }; + + /** + * Function that adds listeners for KeyTraversal functionality + */ + KeyTraversal.prototype.addListeners = function() { + this.enabled = true; + document.addEventListener("keydown", this.keyHandler.bind(this)); + document.addEventListener("click", this.resetCanvasFocuses.bind(this)); + }; + + /** + * Function that removes listeners for KeyTraversal functionality + */ + KeyTraversal.prototype.removeListeners = function() { + this.enabled = false; + document.removeEventListener("keydown", this.keyHandler); + document.removeEventListener("click", this.resetCanvasFocuses); + } + + /** + * Function that resets the currently any currently focused canvas objects + */ + KeyTraversal.prototype.resetCanvasFocuses = function() { + if (this.activeNode != null){ + this.activeNode.classList.remove("hover"); + } + if (this.activeMulti != null) { + this.activeMulti.onmouseout(); + } + this.activeNode = null; + this.activeMulti = null; + } + + /** + * Function that traverses canvas objects via keypresses + * @param {Number} e KeyCode for key pressed + */ + KeyTraversal.prototype.keyHandler = function(e) { + //console.log(e.which); + + /** + * Function that traverses canvas tree until it finds an object of a + * specified type, else returns a default canvas object. + * + * @param {String} name The tag name of the target canvas object. + * @param {SVGAnimatedString} startNode Start object to traverse from + * @param {SVGAnimatedString} resetValue Default start object + * @param {Boolean} isReverse Determines if traversing backwards + * @return {SVGAnimatedString} Returns the next object after traversal. + */ + function findElement(name, startNode, loopValue, isReverse) { + var nextElement = startNode; + var check; + + while (true) { + + if (isReverse) + check = nextElement.previousElementSibling; + else + check = nextElement.nextElementSibling; + + if (check == null) { + nextElement = loopValue; + break; + } else { + nextElement = check; + if (nextElement.tagName == name) + break; + } + } + + return nextElement; + }; + + /** + * Function that changes the current mode, and delegates what the + * current hovered svg object should change to. + * + * @param {String} newMode The mode corresponding to the hovered object. + * @param {String} name The tag name of the SVG object. + * @param {SVGAnimatedString} currentValue The current hovered object. + * @param {SVGAnimatedString} rootValue The default object to hover on. + * @param {Boolean} isReverse Whether to traverse backwards if needed. + * @param {KeyTraversal} self Access to outer scope of this function. + * @return {SVGAnimatedString} Returns the new object to hover on. + */ + function assignActive(newMode, name, currentValue, rootValue, loopValue, isReverse, self) { + // If coming from a different mode, reset and change mode + if (self.keyMode != newMode) { + self.resetCanvasFocuses(); + self.switchMode(newMode); + } + + // If currently null, then hover on root + if (currentValue == null) + currentValue = rootValue; + else + currentValue = findElement(name, currentValue, loopValue, isReverse); + + return currentValue; + }; + + // Will hold the default loop-around value + var loopValue; + // Will hold the root value + var rootValue; + + switch(e.which) { + case KeyEvent.DOM_VK_UP: + + // Remove hover on current node + if (this.activeNode != null) + this.activeNode.classList.remove("hover"); + + rootValue = document.querySelector(".node.root"); + loopValue = document.querySelector(".node"); + + this.activeNode = assignActive(GTE.KEYMODES.NODE_TRAVERSAL, "ellipse", + this.activeNode, rootValue, loopValue, false, this); + + // Add hover to new current node + this.activeNode.classList.add("hover"); + break; + + case KeyEvent.DOM_VK_DOWN: + + // Remove hover on current node + if (this.activeNode != null) + this.activeNode.classList.remove("hover"); + + rootValue = document.querySelector(".node.root"); + loopValue = document.querySelector(".node.root"); + + this.activeNode = assignActive(GTE.KEYMODES.NODE_TRAVERSAL, "ellipse", + this.activeNode, rootValue, loopValue, true, this); + + // Add hover to new current node + this.activeNode.classList.add("hover"); + break; + + case KeyEvent.DOM_VK_X: + + // Remove hover on current multi + if (this.activeMulti != null) + this.activeMulti.onmouseout(); + + rootValue = document.querySelector(".multiaction-rect"); + loopValue = document.querySelector(".multiaction-rect"); + + this.activeMulti = assignActive(GTE.KEYMODES.MULTI_TRAVERSAL, "rect", + this.activeMulti, rootValue, loopValue, false, this); + + // Add hover to current multi + this.activeMulti.onmouseover(); + break; + + case KeyEvent.DOM_VK_SPACE: + + // Simulate click on object depending on mode + if (this.keyMode == GTE.KEYMODES.NODE_TRAVERSAL) { + if (this.activeNode != null) + this.activeNode.onclick(); + } else if (this.keyMode == GTE.KEYMODES.MULTI_TRAVERSAL) { + if (this.activeMulti != null) + this.activeMulti.onclick(); + } + break; + + case KeyEvent.DOM_VK_TAB: + + // Disable key traversal when tabbing; tabbing is for natural DOM ordering + this.switchMode(GTE.KEYMODES.NO_TRAVERSAL); + break; + } + }; + + parentModule.KeyTraversal = KeyTraversal; + return parentModule; + +}(GTE.UI)); From 8a9c4a95e6cfd0ba596849ce05bbed9dc6fdb0e4 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 20:18:22 -0400 Subject: [PATCH 07/10] Added creation of KeyTraversal object, and addListeners/removeListeners calls --- html/js/main.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/html/js/main.js b/html/js/main.js index a3d5464..7408833 100644 --- a/html/js/main.js +++ b/html/js/main.js @@ -4,6 +4,8 @@ // GTE is initialized by the library GTE.canvas = SVG('canvas').size("100%", "100%").attr({'style': 'background: #fff'}); GTE.tools = new GTE.UI.Tools(); + GTE.keyTraversal = new GTE.UI.KeyTraversal(); + // Initialize settings var setSettingsToDefaults = function() { GTE.STORAGE.settingsCircleSize = GTE.CONSTANTS.CIRCLE_SIZE; @@ -73,8 +75,13 @@ // Always start with root and two children GTE.tools.newTree(); + // Initiate key listening for canvas traversal + GTE.keyTraversal.addListeners(); document.getElementById("button-new").addEventListener("click", function(){ + // Add listeners whenever a new tree is created + if (!GTE.keyTraversal.enabled) + GTE.keyTraversal.addListeners(); GTE.tools.newTree(); return false; }); @@ -90,11 +97,17 @@ }); document.getElementById("button-merge").addEventListener("click", function(){ + // Remove listeners whenever isets are introduced + if (GTE.keyTraversal.enabled) + GTE.keyTraversal.removeListeners(); GTE.tools.switchMode(GTE.MODES.MERGE); return false; }); document.getElementById("button-dissolve").addEventListener("click", function(){ + // Add listeners whenever isets is dissolved + if (!GTE.keyTraversal.enabled) + GTE.keyTraversal.addListeners(); GTE.tools.switchMode(GTE.MODES.DISSOLVE); return false; }); @@ -161,6 +174,7 @@ return false; }); + document.getElementById("button-settings-reset").addEventListener("click", function() { // Clear localStorage and reset settings localStorage.clear(); From 13766fe8c5fbfa8bb18b2ec21380fe1826ffdae6 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sat, 19 Mar 2016 20:20:42 -0400 Subject: [PATCH 08/10] Added EOF newline --- html/js/thirdparty/KeyEvent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/js/thirdparty/KeyEvent.js b/html/js/thirdparty/KeyEvent.js index 914f7a5..6dc2d31 100644 --- a/html/js/thirdparty/KeyEvent.js +++ b/html/js/thirdparty/KeyEvent.js @@ -117,4 +117,4 @@ if (typeof KeyEvent == "undefined") { DOM_VK_QUOTE: 222, DOM_VK_META: 224 }; -} \ No newline at end of file +} From 7024d32cdb2f378f9edce3ddddaa136551c2b5de Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Sun, 20 Mar 2016 00:06:31 -0400 Subject: [PATCH 09/10] Updated documentation for the loop around value --- html/js/guiutils/KeyTraversal.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/html/js/guiutils/KeyTraversal.js b/html/js/guiutils/KeyTraversal.js index 2ce06c1..0f4ad17 100644 --- a/html/js/guiutils/KeyTraversal.js +++ b/html/js/guiutils/KeyTraversal.js @@ -13,7 +13,7 @@ GTE.UI = (function (parentModule) { } /** - * Function that switches the current mode key traversal mode + * Function that switches the current key traversal mode * Valid modes are declared in GTE.KEYMODES * @param {Number} newMode Key mode to be switched to. */ @@ -77,7 +77,7 @@ GTE.UI = (function (parentModule) { * * @param {String} name The tag name of the target canvas object. * @param {SVGAnimatedString} startNode Start object to traverse from - * @param {SVGAnimatedString} resetValue Default start object + * @param {SVGAnimatedString} loopValue Value to hover on after end traversal * @param {Boolean} isReverse Determines if traversing backwards * @return {SVGAnimatedString} Returns the next object after traversal. */ @@ -113,6 +113,7 @@ GTE.UI = (function (parentModule) { * @param {String} name The tag name of the SVG object. * @param {SVGAnimatedString} currentValue The current hovered object. * @param {SVGAnimatedString} rootValue The default object to hover on. + * @param {SVGAnimatedString} loopValue Value to hover on after end traversal * @param {Boolean} isReverse Whether to traverse backwards if needed. * @param {KeyTraversal} self Access to outer scope of this function. * @return {SVGAnimatedString} Returns the new object to hover on. @@ -135,7 +136,7 @@ GTE.UI = (function (parentModule) { // Will hold the default loop-around value var loopValue; - // Will hold the root value + // Will hold the root value to hover on initially var rootValue; switch(e.which) { From 287fc7adad5c513ae0263c533a20a3a22a12eb16 Mon Sep 17 00:00:00 2001 From: Kareem Golaub Date: Mon, 21 Mar 2016 04:04:56 -0400 Subject: [PATCH 10/10] Edited KeyTraversal to find only shown multiactions, and changed the way KeyTraversal is disabled --- html/js/guiutils/KeyTraversal.js | 24 +++++++++++++++++------- html/js/guiutils/MultiAction.js | 2 ++ html/js/main.js | 9 --------- html/js/structure.js | 7 ++++--- html/js/tree/Node.js | 1 + html/js/tree/Tree.js | 1 + 6 files changed, 25 insertions(+), 19 deletions(-) diff --git a/html/js/guiutils/KeyTraversal.js b/html/js/guiutils/KeyTraversal.js index 0f4ad17..3e9497b 100644 --- a/html/js/guiutils/KeyTraversal.js +++ b/html/js/guiutils/KeyTraversal.js @@ -19,6 +19,8 @@ GTE.UI = (function (parentModule) { */ KeyTraversal.prototype.switchMode = function(newMode) { switch(newMode) { + case GTE.KEYMODES.DISABLED: + break; case GTE.KEYMODES.NODE_TRAVERSAL: case GTE.KEYMODES.MULTI_TRAVERSAL: var buttonsToBlur = document.getElementsByTagName('button'); @@ -46,8 +48,8 @@ GTE.UI = (function (parentModule) { */ KeyTraversal.prototype.removeListeners = function() { this.enabled = false; - document.removeEventListener("keydown", this.keyHandler); - document.removeEventListener("click", this.resetCanvasFocuses); + document.removeEventListener("keydown", this.keyHandler.bind(this)); + document.removeEventListener("click", this.resetCanvasFocuses.bind(this)); } /** @@ -70,7 +72,8 @@ GTE.UI = (function (parentModule) { */ KeyTraversal.prototype.keyHandler = function(e) { //console.log(e.which); - + if (this.keyMode == GTE.KEYMODES.DISABLED) + return; /** * Function that traverses canvas tree until it finds an object of a * specified type, else returns a default canvas object. @@ -168,6 +171,8 @@ GTE.UI = (function (parentModule) { this.activeNode = assignActive(GTE.KEYMODES.NODE_TRAVERSAL, "ellipse", this.activeNode, rootValue, loopValue, true, this); + if (!this.activeNode) + return; // Add hover to new current node this.activeNode.classList.add("hover"); break; @@ -178,18 +183,23 @@ GTE.UI = (function (parentModule) { if (this.activeMulti != null) this.activeMulti.onmouseout(); - rootValue = document.querySelector(".multiaction-rect"); - loopValue = document.querySelector(".multiaction-rect"); - + rootValue = document.querySelector(".multiaction-rect.root"); + loopValue = document.querySelector(".multiaction-rect.root"); + + do { this.activeMulti = assignActive(GTE.KEYMODES.MULTI_TRAVERSAL, "rect", this.activeMulti, rootValue, loopValue, false, this); + } + while(this.activeMulti != null && this.activeMulti.classList.contains('show')); + if (!this.activeMulti) + return; // Add hover to current multi this.activeMulti.onmouseover(); break; case KeyEvent.DOM_VK_SPACE: - + // Simulate click on object depending on mode if (this.keyMode == GTE.KEYMODES.NODE_TRAVERSAL) { if (this.activeNode != null) diff --git a/html/js/guiutils/MultiAction.js b/html/js/guiutils/MultiAction.js index 8639ecc..e756c41 100644 --- a/html/js/guiutils/MultiAction.js +++ b/html/js/guiutils/MultiAction.js @@ -31,6 +31,8 @@ GTE.TREE = (function(parentModule) { color: '#9d9d9d' }) .addClass('multiaction-rect'); + if (this.nodesInLine[0].parent.parent == null) + this.shape.addClass('root'); this.shape.translate(this.x1, this.y - GTE.CONSTANTS.CIRCLE_SIZE / 2); var thisMultiAction = this; diff --git a/html/js/main.js b/html/js/main.js index 7408833..253c001 100644 --- a/html/js/main.js +++ b/html/js/main.js @@ -79,9 +79,6 @@ GTE.keyTraversal.addListeners(); document.getElementById("button-new").addEventListener("click", function(){ - // Add listeners whenever a new tree is created - if (!GTE.keyTraversal.enabled) - GTE.keyTraversal.addListeners(); GTE.tools.newTree(); return false; }); @@ -97,17 +94,11 @@ }); document.getElementById("button-merge").addEventListener("click", function(){ - // Remove listeners whenever isets are introduced - if (GTE.keyTraversal.enabled) - GTE.keyTraversal.removeListeners(); GTE.tools.switchMode(GTE.MODES.MERGE); return false; }); document.getElementById("button-dissolve").addEventListener("click", function(){ - // Add listeners whenever isets is dissolved - if (!GTE.keyTraversal.enabled) - GTE.keyTraversal.addListeners(); GTE.tools.switchMode(GTE.MODES.DISSOLVE); return false; }); diff --git a/html/js/structure.js b/html/js/structure.js index 3774736..c7387a6 100644 --- a/html/js/structure.js +++ b/html/js/structure.js @@ -45,9 +45,10 @@ var GTE = (function () { DISSOLVE: 4 }; GTE.KEYMODES = { - NO_TRAVERSAL: 0, - NODE_TRAVERSAL: 1, - MULTI_TRAVERSAL: 2 + DISABLED: 0, + NO_TRAVERSAL: 1, + NODE_TRAVERSAL: 2, + MULTI_TRAVERSAL: 3 }; if (Object.freeze) { diff --git a/html/js/tree/Node.js b/html/js/tree/Node.js index 9619d1a..44e4a2b 100644 --- a/html/js/tree/Node.js +++ b/html/js/tree/Node.js @@ -135,6 +135,7 @@ GTE.TREE = (function (parentModule) { * Function that defines the behaviour of the node on click */ Node.prototype.onClick = function () { + switch (GTE.MODE) { case GTE.MODES.ADD: // As talked in email "the phases of creating a game tree" diff --git a/html/js/tree/Tree.js b/html/js/tree/Tree.js index 024c596..d758de9 100644 --- a/html/js/tree/Tree.js +++ b/html/js/tree/Tree.js @@ -570,6 +570,7 @@ GTE.TREE = (function (parentModule) { * @return {Node} newNode Node that has been added */ Tree.prototype.addChildNodeTo = function (parentNode) { + var newNode = new GTE.TREE.Node(parentNode); this.positionsUpdated = false; return newNode;