diff --git a/libraries/jquery.hotkeys.js b/libraries/jquery.hotkeys.js new file mode 100644 index 00000000..5a174313 --- /dev/null +++ b/libraries/jquery.hotkeys.js @@ -0,0 +1,112 @@ +/* + * jQuery Hotkeys Plugin + * Copyright 2010, John Resig + * Dual licensed under the MIT or GPL Version 2 licenses. + * + * Based upon the plugin by Tzury Bar Yochay: + * http://github.com/tzuryby/hotkeys + * + * Original idea by: + * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/ +*/ + +/* + * One small change is: now keys are passed by object { keys: '...' } + * Might be useful, when you want to pass some other data to your handler + */ + +function initHotKeyPluggin(jQuery){ + + jQuery.hotkeys = { + version: "0.8", + + specialKeys: { + 8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause", + 20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home", + 37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del", + 96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7", + 104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/", + 112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8", + 120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/", + 220: "\\", 222: "'", 224: "meta" + }, + + shiftNums: { + "`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&", + "8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<", + ".": ">", "/": "?", "\\": "|" + } + }; + + function keyHandler( handleObj ) { + if ( typeof handleObj.data === "string" ) { + handleObj.data = { keys: handleObj.data }; + } + + // Only care when a possible input has been specified + if ( !handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string" ) { + return; + } + + var origHandler = handleObj.handler, + keys = handleObj.data.keys.toLowerCase().split(" "), + textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color", "tel"]; + + handleObj.handler = function( event ) { + // Don't fire in text-accepting inputs that we didn't directly bind to + if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) || + jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) { + return; + } + + var special = jQuery.hotkeys.specialKeys[ event.keyCode ], + character = String.fromCharCode( event.which ).toLowerCase(), + modif = "", possible = {}; + + // check combinations (alt|ctrl|shift+anything) + if ( event.altKey && special !== "alt" ) { + modif += "alt+"; + } + + if ( event.ctrlKey && special !== "ctrl" ) { + modif += "ctrl+"; + } + + // TODO: Need to make sure this works consistently across platforms + if ( event.metaKey && !event.ctrlKey && special !== "meta" ) { + modif += "meta+"; + } + + if ( event.shiftKey && special !== "shift" ) { + modif += "shift+"; + } + + if ( special ) { + possible[ modif + special ] = true; + } + + if ( character ) { + possible[ modif + character ] = true; + possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true; + + // "$" can be triggered as "Shift+4" or "Shift+$" or just "$" + if ( modif === "shift+" ) { + possible[ jQuery.hotkeys.shiftNums[ character ] ] = true; + } + } + + for ( var i = 0, l = keys.length; i < l; i++ ) { + if ( possible[ keys[i] ] ) { + return origHandler.apply( this, arguments ); + } + } + }; + } + + jQuery.each([ "keydown", "keyup", "keypress" ], function() { + jQuery.event.special[ this ] = { add: keyHandler }; + }); + +}; + +export default initHotKeyPluggin; \ No newline at end of file diff --git a/packages/mindplot/.eslintrc.json b/packages/mindplot/.eslintrc.json index 894ba395..1bc41a1f 100644 --- a/packages/mindplot/.eslintrc.json +++ b/packages/mindplot/.eslintrc.json @@ -13,7 +13,6 @@ "$assert": "readonly", "$defined": "readonly", "$msg": "readonly", - "$notify": "readonly", "_": "readonly" }, "plugins": ["only-warn"], diff --git a/packages/mindplot/cypress/integration/playground.test.js b/packages/mindplot/cypress/integration/playground.test.js index 35aad990..28f0c6a9 100644 --- a/packages/mindplot/cypress/integration/playground.test.js +++ b/packages/mindplot/cypress/integration/playground.test.js @@ -14,4 +14,15 @@ context('Playground', () => { cy.visit(`${BASE_URL}/viewmode.html`); cy.matchImageSnapshot('viewmode'); }); + it('the playground container.html page should match its snapshot', () => { + cy.visit(`${BASE_URL}/container.html`); + cy.matchImageSnapshot('container'); + }); + it('the playground editor.html page should match its snapshot', () => { + cy.visit(`${BASE_URL}/editor.html`); + // TODO: wait for #load modal to hide instead of arbitrary wait time + cy.wait(5000); + // TODO: why is the editor appearing twice in the snapshot? + cy.matchImageSnapshot('editor'); + }); }); diff --git a/packages/mindplot/cypress/snapshots/playground.test.js/container.snap.png b/packages/mindplot/cypress/snapshots/playground.test.js/container.snap.png new file mode 100644 index 00000000..5a93b744 Binary files /dev/null and b/packages/mindplot/cypress/snapshots/playground.test.js/container.snap.png differ diff --git a/packages/mindplot/cypress/snapshots/playground.test.js/editor.snap.png b/packages/mindplot/cypress/snapshots/playground.test.js/editor.snap.png new file mode 100644 index 00000000..96bbc624 Binary files /dev/null and b/packages/mindplot/cypress/snapshots/playground.test.js/editor.snap.png differ diff --git a/packages/mindplot/cypress/snapshots/playground.test.js/layout.snap.png b/packages/mindplot/cypress/snapshots/playground.test.js/layout.snap.png index 19b29fd8..e73bc6c7 100644 Binary files a/packages/mindplot/cypress/snapshots/playground.test.js/layout.snap.png and b/packages/mindplot/cypress/snapshots/playground.test.js/layout.snap.png differ diff --git a/packages/mindplot/src/components/Designer.js b/packages/mindplot/src/components/Designer.js index aa9229a3..1129c55a 100644 --- a/packages/mindplot/src/components/Designer.js +++ b/packages/mindplot/src/components/Designer.js @@ -46,6 +46,7 @@ import EventBusDispatcher from './layout/EventBusDispatcher'; import LayoutManager from './layout/LayoutManager'; import INodeModel, { TopicShape } from './model/INodeModel'; +import { $notify } from './widget/ToolbarNotifier'; class Designer extends Events { constructor(options, divElement) { @@ -101,6 +102,9 @@ class Designer extends Events { TopicEventDispatcher.configure(this.isReadOnly()); this._clipboard = []; + + // Hack: There are static reference to designer variable. Needs to be reviewed. + global.designer = this; } /** diff --git a/packages/mindplot/src/components/DesignerKeyboard.js b/packages/mindplot/src/components/DesignerKeyboard.js index 14433686..a6eadbe2 100644 --- a/packages/mindplot/src/components/DesignerKeyboard.js +++ b/packages/mindplot/src/components/DesignerKeyboard.js @@ -17,6 +17,7 @@ */ import { $assert } from '@wisemapping/core-js'; import Keyboard from './Keyboard'; +import $ from 'jquery'; class DesignerKeyboard extends Keyboard { constructor(designer) { diff --git a/packages/mindplot/src/components/DesignerModel.js b/packages/mindplot/src/components/DesignerModel.js index 04678dcd..d6a4d935 100644 --- a/packages/mindplot/src/components/DesignerModel.js +++ b/packages/mindplot/src/components/DesignerModel.js @@ -17,6 +17,7 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import Events from './Events'; +import { $notify } from './widget/ToolbarNotifier'; class DesignerModel extends Events { constructor(options) { diff --git a/packages/mindplot/src/components/DragTopic.js b/packages/mindplot/src/components/DragTopic.js index cca0d36d..b8c6f2ff 100644 --- a/packages/mindplot/src/components/DragTopic.js +++ b/packages/mindplot/src/components/DragTopic.js @@ -113,6 +113,8 @@ class DragTopic { $assert(parent, 'Parent connection node can not be null.'); // Where it should be connected ? + + // @todo: This is a hack for the access of the editor. It's required to review why this is needed forcing the declaration of a global variable. const predict = designer._eventBussDispatcher._layoutManager.predict( parent.getId(), this._draggedNode.getId(), diff --git a/packages/mindplot/src/components/Keyboard.js b/packages/mindplot/src/components/Keyboard.js index d360d83e..bafe7ca2 100644 --- a/packages/mindplot/src/components/Keyboard.js +++ b/packages/mindplot/src/components/Keyboard.js @@ -15,14 +15,15 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import $ from 'jquery'; class Keyboard { // eslint-disable-next-line class-methods-use-this addShortcut(shortcuts, callback) { - if (!$.isArray(shortcuts)) { + if (!Array.isArray(shortcuts)) { shortcuts = [shortcuts]; } - _.each(shortcuts, (shortcut) => { + shortcuts.forEach((shortcut) => { $(document).bind('keydown', shortcut, callback); }); } diff --git a/packages/mindplot/src/components/MainTopic.js b/packages/mindplot/src/components/MainTopic.js index 19e49215..c14d0d9d 100644 --- a/packages/mindplot/src/components/MainTopic.js +++ b/packages/mindplot/src/components/MainTopic.js @@ -86,7 +86,7 @@ class MainTopic extends Topic { /** */ disconnect(workspace) { - this.parent(workspace); + super.disconnect(workspace); const size = this.getSize(); const model = this.getModel(); diff --git a/packages/mindplot/src/components/MultilineTextEditor.js b/packages/mindplot/src/components/MultilineTextEditor.js index e748292f..db9b228c 100644 --- a/packages/mindplot/src/components/MultilineTextEditor.js +++ b/packages/mindplot/src/components/MultilineTextEditor.js @@ -15,8 +15,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $defined } from '@wisemapping/core-js'; import Events from './Events'; import ActionDispatcher from './ActionDispatcher'; +import $ from 'jquery'; +import initHotKeyPluggin from '@libraries/jquery.hotkeys'; + +initHotKeyPluggin($); class MultilineTextEditor extends Events { constructor() { @@ -25,7 +30,7 @@ class MultilineTextEditor extends Events { this._timeoutId = -1; } - _buildEditor() { + static _buildEditor() { const result = $('
') .attr('id', 'textContainer') .css({ @@ -51,7 +56,7 @@ class MultilineTextEditor extends Events { _registerEvents(containerElem) { const textareaElem = this._getTextareaElem(); const me = this; - textareaElem.on('keydown', function (event) { + textareaElem.on('keydown', function keydown (event) { switch (jQuery.hotkeys.specialKeys[event.keyCode]) { case 'esc': me.close(false); @@ -128,7 +133,7 @@ class MultilineTextEditor extends Events { const lines = textElem.val().split('\n'); let maxLineLength = 1; - _.each(lines, (line) => { + lines.forEach((line) => { if (maxLineLength < line.length) maxLineLength = line.length; }); @@ -143,7 +148,7 @@ class MultilineTextEditor extends Events { } isVisible() { - return $defined(this._containerElem) && this._containerElem.css('display') == 'block'; + return $defined(this._containerElem) && this._containerElem.css('display') === 'block'; } _updateModel() { @@ -165,7 +170,7 @@ class MultilineTextEditor extends Events { this._topic = topic; if (!this.isVisible()) { // Create editor ui - const containerElem = this._buildEditor(); + const containerElem = MultilineTextEditor._buildEditor(); $('body').append(containerElem); this._containerElem = containerElem; diff --git a/packages/mindplot/src/components/Relationship.js b/packages/mindplot/src/components/Relationship.js index ced9c7cf..3694f46f 100644 --- a/packages/mindplot/src/components/Relationship.js +++ b/packages/mindplot/src/components/Relationship.js @@ -75,7 +75,7 @@ class Relationship extends ConnectionLine { } setStroke(color, style, opacity) { - this.parent(color, style, opacity); + super.setStroke(color, style, opacity); this._startArrow.setStrokeColor(color); } @@ -176,7 +176,7 @@ class Relationship extends ConnectionLine { workspace.append(this._startArrow); if (this._endArrow) workspace.append(this._endArrow); - this.parent(workspace); + super.addToWorkspace(workspace); this._positionArrows(); this.redraw(); } @@ -193,9 +193,10 @@ class Relationship extends ConnectionLine { workspace.removeChild(this._startArrow); if (this._endArrow) workspace.removeChild(this._endArrow); - this.parent(workspace); + super.removeFromWorkspace(workspace); } + // eslint-disable-next-line class-methods-use-this getType() { return Relationship.type; } @@ -248,13 +249,13 @@ class Relationship extends ConnectionLine { } setVisibility(value) { - this.parent(value); + super.setVisibility(value); if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow); this._startArrow.setVisibility(this._showStartArrow && value); } setOpacity(opacity) { - this.parent(opacity); + super.setOpacity(opacity); if (this._showEndArrow) this._endArrow.setOpacity(opacity); if (this._showStartArrow) this._startArrow.setOpacity(opacity); } diff --git a/packages/mindplot/src/components/RestPersistenceManager.js b/packages/mindplot/src/components/RestPersistenceManager.js index af91b70b..810a479a 100644 --- a/packages/mindplot/src/components/RestPersistenceManager.js +++ b/packages/mindplot/src/components/RestPersistenceManager.js @@ -20,12 +20,12 @@ import PersistenceManager from './PersistenceManager'; class RESTPersistenceManager extends PersistenceManager{ constructor(options) { - this.parent(); $assert(options.documentUrl, 'documentUrl can not be null'); $assert(options.revertUrl, 'revertUrl can not be null'); $assert(options.lockUrl, 'lockUrl can not be null'); $assert(options.session, 'session can not be null'); $assert(options.timestamp, 'timestamp can not be null'); + super() this.documentUrl = options.documentUrl; this.revertUrl = options.revertUrl; diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js index e71d11db..5886d2b2 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.js @@ -17,6 +17,7 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import * as web2d from '@wisemapping/web2d'; +import $ from 'jquery'; import NodeGraph from './NodeGraph'; import TopicConfig from './TopicConfig'; @@ -1236,7 +1237,7 @@ class Topic extends NodeGraph { /** */ createDragNode(layoutManager) { - const result = this.parent(layoutManager); + const result = super.createDragNode(layoutManager); // Is the node already connected ? const targetTopic = this.getOutgoingConnectedTopic(); diff --git a/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js b/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js index 9bdb2997..2bc75758 100644 --- a/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js +++ b/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class AddFeatureToTopicCommand extends Command { diff --git a/packages/mindplot/src/components/commands/AddRelationshipCommand.js b/packages/mindplot/src/components/commands/AddRelationshipCommand.js index d02a6819..b1cc55ab 100644 --- a/packages/mindplot/src/components/commands/AddRelationshipCommand.js +++ b/packages/mindplot/src/components/commands/AddRelationshipCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class AddRelationshipCommand extends Command { diff --git a/packages/mindplot/src/components/commands/AddTopicCommand.js b/packages/mindplot/src/components/commands/AddTopicCommand.js index 8a576148..916d6d9c 100644 --- a/packages/mindplot/src/components/commands/AddTopicCommand.js +++ b/packages/mindplot/src/components/commands/AddTopicCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class AddTopicCommand extends Command { diff --git a/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js b/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js index d8cfa8cd..2ef6bbee 100644 --- a/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js +++ b/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class ChangeFeatureToTopicCommand extends Command { diff --git a/packages/mindplot/src/components/commands/DeleteCommand.js b/packages/mindplot/src/components/commands/DeleteCommand.js index 0f28d42b..a2175ce4 100644 --- a/packages/mindplot/src/components/commands/DeleteCommand.js +++ b/packages/mindplot/src/components/commands/DeleteCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class DeleteCommand extends Command { diff --git a/packages/mindplot/src/components/commands/DragTopicCommand.js b/packages/mindplot/src/components/commands/DragTopicCommand.js index 6cc39a4e..8e9a8607 100644 --- a/packages/mindplot/src/components/commands/DragTopicCommand.js +++ b/packages/mindplot/src/components/commands/DragTopicCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class DragTopicCommand extends Command { @@ -29,11 +30,13 @@ class DragTopicCommand extends Command { */ constructor(topicId, position, order, parentTopic) { $assert(topicId, 'topicId must be defined'); + super(); this._topicsId = topicId; - if ($defined(parentTopic)) this._parentId = parentTopic.getId(); + if ($defined(parentTopic)) { + this._parentId = parentTopic.getId(); + } - this.parent(); this._position = position; this._order = order; } diff --git a/packages/mindplot/src/components/commands/GenericFunctionCommand.js b/packages/mindplot/src/components/commands/GenericFunctionCommand.js index 29f7e5b4..0e03d0d7 100644 --- a/packages/mindplot/src/components/commands/GenericFunctionCommand.js +++ b/packages/mindplot/src/components/commands/GenericFunctionCommand.js @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $defined, $assert } from '@wisemapping/core-js'; +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class GenericFunctionCommand extends Command { diff --git a/packages/mindplot/src/components/commands/MoveControlPointCommand.js b/packages/mindplot/src/components/commands/MoveControlPointCommand.js index 1bd086c2..01e4b5a9 100644 --- a/packages/mindplot/src/components/commands/MoveControlPointCommand.js +++ b/packages/mindplot/src/components/commands/MoveControlPointCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class MoveControlPointCommand extends Command { diff --git a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js index 721b750a..bfec8ae2 100644 --- a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js +++ b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js @@ -15,6 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { $assert, $defined } from '@wisemapping/core-js'; import Command from '../Command'; class RemoveFeatureFromTopicCommand extends Command { diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js index 99ce8f33..ef6a4c18 100644 --- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js +++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js @@ -45,4 +45,4 @@ class BootstrapDialogRequest extends BootstrapDialog { } } -export default BootstrapDialogRequest; +export default BootstrapDialogRequest; \ No newline at end of file diff --git a/packages/mindplot/src/components/model/INodeModel.js b/packages/mindplot/src/components/model/INodeModel.js index e9f79c13..634c877c 100644 --- a/packages/mindplot/src/components/model/INodeModel.js +++ b/packages/mindplot/src/components/model/INodeModel.js @@ -17,6 +17,7 @@ * limitations under the License. */ import { $assert, $defined } from '@wisemapping/core-js'; +import $ from 'jquery'; class INodeModel { constructor(mindmap) { diff --git a/packages/mindplot/src/components/widget/IMenu.js b/packages/mindplot/src/components/widget/IMenu.js index c08c80a8..86475ac2 100644 --- a/packages/mindplot/src/components/widget/IMenu.js +++ b/packages/mindplot/src/components/widget/IMenu.js @@ -17,6 +17,7 @@ */ import { $assert } from "@wisemapping/core-js"; import PersistenceManager from '../PersistenceManager'; +import { $notify } from './ToolbarNotifier'; class IMenu { diff --git a/packages/mindplot/src/components/widget/ToolbarNotifier.js b/packages/mindplot/src/components/widget/ToolbarNotifier.js index cf3dee37..f6ffa0d8 100644 --- a/packages/mindplot/src/components/widget/ToolbarNotifier.js +++ b/packages/mindplot/src/components/widget/ToolbarNotifier.js @@ -16,6 +16,7 @@ * limitations under the License. */ +import { $assert } from '@wisemapping/core-js'; import $ from 'jquery'; class ToolbarNotifier { diff --git a/packages/mindplot/src/components/widget/ToolbarPaneItem.js b/packages/mindplot/src/components/widget/ToolbarPaneItem.js index c11f0879..cc64d825 100644 --- a/packages/mindplot/src/components/widget/ToolbarPaneItem.js +++ b/packages/mindplot/src/components/widget/ToolbarPaneItem.js @@ -72,7 +72,7 @@ class ToolbarPaneItem extends ToolbarItem { show() { if (!this.isVisible()) { - this.parent(); + super.show(); this._tip.show(); this.getButtonElem().className = 'buttonExtActive'; } @@ -80,7 +80,7 @@ class ToolbarPaneItem extends ToolbarItem { hide() { if (this.isVisible()) { - this.parent(); + super.hide(); this._tip.hide(); this.getButtonElem().className = 'buttonExtOn'; } diff --git a/packages/mindplot/test/playground/index.html b/packages/mindplot/test/playground/index.html index b5d1f591..fb0cbd6b 100644 --- a/packages/mindplot/test/playground/index.html +++ b/packages/mindplot/test/playground/index.html @@ -13,8 +13,8 @@