From a10b41ee4da5879766d6e2649d2e3d7980b92d18 Mon Sep 17 00:00:00 2001 From: Matias Arriola Date: Mon, 13 Dec 2021 21:30:37 +0000 Subject: [PATCH] Add more tests on mindplot/playground and fix. --- packages/mindplot/.eslintrc.json | 3 +- packages/mindplot/package.json | 5 +- packages/mindplot/src/components/IconGroup.js | 394 ++++------- .../src/components/IconGroupRemoveTip.js | 165 +++++ .../src/components/MultilineTextEditor.js | 6 +- .../components/layout/AbstractBasicSorter.js | 81 ++- .../src/components/layout/BalancedSorter.js | 429 ++++++------ .../layout/ChildrenSorterStrategy.js | 42 +- .../components/layout/EventBusDispatcher.js | 31 +- .../src/components/layout/GridSorter.js | 15 +- .../mindplot/src/components/layout/Node.js | 368 +++++------ .../src/components/layout/RootedTreeSet.js | 619 +++++++++--------- .../src/components/layout/SymmetricSorter.js | 424 ++++++------ .../src/components/util/FadeEffect.js | 9 +- .../components/widget/ColorPalettePanel.js | 2 +- .../src/components/widget/LinkEditor.js | 26 +- .../playground/layout/BalancedTestSuite.js | 22 +- .../test/playground/layout/FreeTestSuite.js | 2 + .../playground/layout/SymmetricTestSuite.js | 20 +- .../test/playground/layout/TestSuite.js | 42 +- .../test/playground/layout/context-loader.js | 1 + .../playground/map-render/html/container.json | 3 +- .../playground/map-render/html/editor.html | 207 +++--- .../playground/map-render/html/embedded.html | 202 +++--- .../test/playground/map-render/js/editor.js | 195 +----- .../test/playground/map-render/js/embedded.js | 25 + .../map-render/js/less-1.6.2.min.js | 421 ------------ .../test/playground/map-render/js/loader.js | 167 +++++ .../test/playground/map-render/js/viewmode.js | 24 + packages/mindplot/webpack.playground.js | 18 +- yarn.lock | 73 ++- 31 files changed, 1846 insertions(+), 2195 deletions(-) create mode 100644 packages/mindplot/src/components/IconGroupRemoveTip.js create mode 100644 packages/mindplot/test/playground/map-render/js/embedded.js delete mode 100644 packages/mindplot/test/playground/map-render/js/less-1.6.2.min.js create mode 100644 packages/mindplot/test/playground/map-render/js/loader.js create mode 100644 packages/mindplot/test/playground/map-render/js/viewmode.js diff --git a/packages/mindplot/.eslintrc.json b/packages/mindplot/.eslintrc.json index 1bc41a1f..25ad6994 100644 --- a/packages/mindplot/.eslintrc.json +++ b/packages/mindplot/.eslintrc.json @@ -10,8 +10,6 @@ "globals":{ "Class": "readonly", "$": "readonly", - "$assert": "readonly", - "$defined": "readonly", "$msg": "readonly", "_": "readonly" }, @@ -19,6 +17,7 @@ "rules": { "no-underscore-dangle": "off", "no-plusplus": "off", + "class-methods-use-this": "off", "import/no-extraneous-dependencies": ["error", {"devDependencies": ["!cypress/**/*.js"]}] }, "settings": { diff --git a/packages/mindplot/package.json b/packages/mindplot/package.json index 9387f50a..a5321e17 100644 --- a/packages/mindplot/package.json +++ b/packages/mindplot/package.json @@ -33,7 +33,8 @@ "@wisemapping/core-js": "^0.0.1", "@wisemapping/web2d": "^0.0.1", "jquery": "^3.6.0", - "mootools": "1.4.5" + "mootools": "1.4.5", + "underscore": "^1.13.1" }, "devDependencies": { "@babel/core": "^7.14.6", @@ -53,6 +54,8 @@ "eslint-plugin-import": "^2.24.2", "eslint-plugin-only-warn": "^1.0.3", "html-webpack-plugin": "^5.3.2", + "less": "^4.1.2", + "less-loader": "^10.2.0", "nodemon": "^2.0.12", "start-server-and-test": "^1.14.0", "webpack": "^5.44.0", diff --git a/packages/mindplot/src/components/IconGroup.js b/packages/mindplot/src/components/IconGroup.js index 70427774..151c13bd 100644 --- a/packages/mindplot/src/components/IconGroup.js +++ b/packages/mindplot/src/components/IconGroup.js @@ -17,161 +17,162 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import * as web2d from '@wisemapping/web2d'; +import IconGroupRemoveTip from './IconGroupRemoveTip'; import Icon from './Icon'; -const IconGroup = new Class( - /** @lends IconGroup */ { - /** +class IconGroup { + /** @lends IconGroup */ + /** * @constructs * @param topicId * @param iconSize * @throws will throw an error if topicId is null or undefined * @throws will throw an error if iconSize is null or undefined */ - initialize(topicId, iconSize) { - $assert($defined(topicId), 'topicId can not be null'); - $assert($defined(iconSize), 'iconSize can not be null'); + constructor(topicId, iconSize) { + $assert($defined(topicId), 'topicId can not be null'); + $assert($defined(iconSize), 'iconSize can not be null'); - this._icons = []; - this._group = new web2d.Group({ - width: 0, - height: iconSize, - x: 0, - y: 0, - coordSizeWidth: 0, - coordSizeHeight: 100, - }); - this._removeTip = new IconGroup.RemoveTip(this._group, topicId); - this.seIconSize(iconSize, iconSize); + this._icons = []; + this._group = new web2d.Group({ + width: 0, + height: iconSize, + x: 0, + y: 0, + coordSizeWidth: 0, + coordSizeHeight: 100, + }); + this._removeTip = new IconGroup.RemoveTip(this._group, topicId); + this.seIconSize(iconSize, iconSize); - this._registerListeners(); - }, + this._registerListeners(); + } - /** */ - setPosition(x, y) { - this._group.setPosition(x, y); - }, + /** */ + setPosition(x, y) { + this._group.setPosition(x, y); + } - /** */ - getPosition() { - return this._group.getPosition(); - }, + /** */ + getPosition() { + return this._group.getPosition(); + } - /** */ - getNativeElement() { - return this._group; - }, + /** */ + getNativeElement() { + return this._group; + } - /** */ - getSize() { - return this._group.getSize(); - }, + /** */ + getSize() { + return this._group.getSize(); + } - /** */ - seIconSize(width, height) { - this._iconSize = { width, height }; - this._resize(this._icons.length); - }, + /** */ + seIconSize(width, height) { + this._iconSize = { width, height }; + this._resize(this._icons.length); + } - /** + /** * @param icon the icon to be added to the icon group * @param {Boolean} remove * @throws will throw an error if icon is not defined */ - addIcon(icon, remove) { - $defined(icon, 'icon is not defined'); + addIcon(icon, remove) { + $defined(icon, 'icon is not defined'); - icon.setGroup(this); - this._icons.push(icon); + icon.setGroup(this); + this._icons.push(icon); - // Adjust group and position ... - this._resize(this._icons.length); - this._positionIcon(icon, this._icons.length - 1); + // Adjust group and position ... + this._resize(this._icons.length); + this._positionIcon(icon, this._icons.length - 1); - const imageShape = icon.getImage(); - this._group.append(imageShape); + const imageShape = icon.getImage(); + this._group.append(imageShape); - // Register event for the group .. - if (remove) { - this._removeTip.decorate(this._topicId, icon); + // Register event for the group .. + if (remove) { + this._removeTip.decorate(this._topicId, icon); + } + } + + _findIconFromModel(iconModel) { + let result = null; + + this._icons.forEach((icon) => { + const elModel = icon.getModel(); + + if (elModel.getId() === iconModel.getId()) { + result = icon; } - }, + }); - _findIconFromModel(iconModel) { - let result = null; + if (result == null) { + throw new Error(`Icon can no be found:${iconModel.getId()}, Icons:${this._icons}`); + } - this._icons.forEach((icon) => { - const elModel = icon.getModel(); + return result; + } - if (elModel.getId() === iconModel.getId()) { - result = icon; - } - }); + /** */ + removeIconByModel(featureModel) { + $assert(featureModel, 'featureModel can not be null'); - if (result == null) { - throw new Error(`Icon can no be found:${iconModel.getId()}, Icons:${this._icons}`); - } + const icon = this._findIconFromModel(featureModel); + this._removeIcon(icon); + } - return result; - }, + _removeIcon(icon) { + $assert(icon, 'icon can not be null'); - /** */ - removeIconByModel(featureModel) { - $assert(featureModel, 'featureModel can not be null'); + this._removeTip.close(0); + this._group.removeChild(icon.getImage()); - const icon = this._findIconFromModel(featureModel); - this._removeIcon(icon); - }, + this._icons.erase(icon); + this._resize(this._icons.length); + const me = this; - _removeIcon(icon) { - $assert(icon, 'icon can not be null'); + // Add all again ... + this._icons.forEach((elem, i) => { + me._positionIcon(elem, i); + }); + } - this._removeTip.close(0); - this._group.removeChild(icon.getImage()); + /** */ + moveToFront() { + this._group.moveToFront(); + } - this._icons.erase(icon); - this._resize(this._icons.length); - const me = this; + _registerListeners() { + this._group.addEvent('click', (event) => { + // Avoid node creation ... + event.stopPropagation(); + }); - // Add all again ... - this._icons.forEach((elem, i) => { - me._positionIcon(elem, i); - }); - }, + this._group.addEvent('dblclick', (event) => { + event.stopPropagation(); + }); + } - /** */ - moveToFront() { - this._group.moveToFront(); - }, + _resize(iconsLength) { + this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height); - _registerListeners() { - this._group.addEvent('click', (event) => { - // Avoid node creation ... - event.stopPropagation(); - }); + const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2; + this._group.setCoordSize(iconsLength * iconSize, iconSize); + } - this._group.addEvent('dblclick', (event) => { - event.stopPropagation(); - }); - }, - - _resize(iconsLength) { - this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height); - - const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2; - this._group.setCoordSize(iconsLength * iconSize, iconSize); - }, - - _positionIcon(icon, order) { - const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2; - icon.getImage().setPosition( - iconSize * order + IconGroup.ICON_PADDING, - IconGroup.ICON_PADDING, - ); - }, - }, -); + // eslint-disable-next-line class-methods-use-this + _positionIcon(icon, order) { + const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2; + icon.getImage().setPosition( + iconSize * order + IconGroup.ICON_PADDING, + IconGroup.ICON_PADDING, + ); + } +} /** * @constant @@ -180,167 +181,6 @@ const IconGroup = new Class( */ IconGroup.ICON_PADDING = 5; -IconGroup.RemoveTip = new Class( - /** @lends IconGroup.RemoveTip */ { - /** - * @classdesc inner class of IconGroup - * @constructs - * @param container - */ - initialize(container) { - $assert(container, 'group can not be null'); - this._fadeElem = container; - }, - - /** - * @param topicId - * @param icon - * @throws will throw an error if icon is null or undefined - */ - show(topicId, icon) { - $assert(icon, 'icon can not be null'); - - // Nothing to do ... - if (this._activeIcon != icon) { - // If there is an active icon, close it first ... - if (this._activeIcon) { - this.close(0); - } - - // Now, let move the position the icon... - const pos = icon.getPosition(); - - // Register events ... - const widget = this._buildWeb2d(); - widget.addEvent('click', () => { - icon.remove(); - }); - - const me = this; - - widget.addEvent('mouseover', () => { - me.show(topicId, icon); - }); - - widget.addEvent('mouseout', () => { - me.hide(); - }); - - widget.setPosition(pos.x + 80, pos.y - 50); - this._fadeElem.append(widget); - - // Setup current element ... - this._activeIcon = icon; - this._widget = widget; - } else { - clearTimeout(this._closeTimeoutId); - } - }, - - /** */ - hide() { - this.close(200); - }, - - /** - * @param delay - */ - close(delay) { - // This is not ok, trying to close the same dialog twice ? - if (this._closeTimeoutId) { - clearTimeout(this._closeTimeoutId); - } - - const me = this; - if (this._activeIcon) { - const widget = this._widget; - const close = function () { - me._activeIcon = null; - me._fadeElem.removeChild(widget); - me._widget = null; - me._closeTimeoutId = null; - }; - - if (!$defined(delay) || delay == 0) { - close(); - } else { - this._closeTimeoutId = close.delay(delay); - } - } - }, - - _buildWeb2d() { - const result = new web2d.Group({ - width: 10, - height: 10, - x: 0, - y: 0, - coordSizeWidth: 10, - coordSizeHeight: 10, - }); - - const outerRect = new web2d.Rect(0, { - x: 0, - y: 0, - width: 10, - height: 10, - stroke: '0', - fillColor: 'black', - }); - result.append(outerRect); - outerRect.setCursor('pointer'); - - const innerRect = new web2d.Rect(0, { - x: 1, - y: 1, - width: 8, - height: 8, - stroke: '1 solid white', - fillColor: 'gray', - }); - result.append(innerRect); - - const line = new web2d.Line({ stroke: '1 solid white' }); - line.setFrom(1, 1); - line.setTo(9, 9); - result.append(line); - - const line2 = new web2d.Line({ stroke: '1 solid white' }); - line2.setFrom(1, 9); - line2.setTo(9, 1); - result.append(line2); - - // Some events ... - result.addEvent('mouseover', () => { - innerRect.setFill('#CC0033'); - }); - result.addEvent('mouseout', () => { - innerRect.setFill('gray'); - }); - - result.setSize(50, 50); - return result; - }, - - /** - * @param topicId - * @param icon - */ - decorate(topicId, icon) { - const me = this; - - if (!icon.__remove) { - icon.addEvent('mouseover', () => { - me.show(topicId, icon); - }); - - icon.addEvent('mouseout', () => { - me.hide(); - }); - icon.__remove = true; - } - }, - }, -); +IconGroup.RemoveTip = IconGroupRemoveTip; export default IconGroup; diff --git a/packages/mindplot/src/components/IconGroupRemoveTip.js b/packages/mindplot/src/components/IconGroupRemoveTip.js new file mode 100644 index 00000000..454f2ec8 --- /dev/null +++ b/packages/mindplot/src/components/IconGroupRemoveTip.js @@ -0,0 +1,165 @@ +import * as web2d from '@wisemapping/web2d'; +import { $assert, $defined } from '@wisemapping/core-js'; + +export default class RemoveTip { + /** @lends IconGroup.RemoveTip */ + /** + * @classdesc inner class of IconGroup + * @constructs + * @param container + */ + constructor(container) { + $assert(container, 'group can not be null'); + this._fadeElem = container; + } + + /** + * @param topicId + * @param icon + * @throws will throw an error if icon is null or undefined + */ + show(topicId, icon) { + $assert(icon, 'icon can not be null'); + + // Nothing to do ... + if (this._activeIcon != icon) { + // If there is an active icon, close it first ... + if (this._activeIcon) { + this.close(0); + } + + // Now, let move the position the icon... + const pos = icon.getPosition(); + + // Register events ... + const widget = this._buildWeb2d(); + widget.addEvent('click', () => { + icon.remove(); + }); + + const me = this; + + widget.addEvent('mouseover', () => { + me.show(topicId, icon); + }); + + widget.addEvent('mouseout', () => { + me.hide(); + }); + + widget.setPosition(pos.x + 80, pos.y - 50); + this._fadeElem.append(widget); + + // Setup current element ... + this._activeIcon = icon; + this._widget = widget; + } else { + clearTimeout(this._closeTimeoutId); + } + } + + /** */ + hide() { + this.close(200); + } + + /** + * @param delay + */ + close(delay) { + // This is not ok, trying to close the same dialog twice ? + if (this._closeTimeoutId) { + clearTimeout(this._closeTimeoutId); + } + + const me = this; + if (this._activeIcon) { + const widget = this._widget; + const close = function close() { + me._activeIcon = null; + me._fadeElem.removeChild(widget); + me._widget = null; + me._closeTimeoutId = null; + }; + + if (!$defined(delay) || delay == 0) { + close(); + } else { + this._closeTimeoutId = close.delay(delay); + } + } + } + + // eslint-disable-next-line class-methods-use-this + _buildWeb2d() { + const result = new web2d.Group({ + width: 10, + height: 10, + x: 0, + y: 0, + coordSizeWidth: 10, + coordSizeHeight: 10, + }); + + const outerRect = new web2d.Rect(0, { + x: 0, + y: 0, + width: 10, + height: 10, + stroke: '0', + fillColor: 'black', + }); + result.append(outerRect); + outerRect.setCursor('pointer'); + + const innerRect = new web2d.Rect(0, { + x: 1, + y: 1, + width: 8, + height: 8, + stroke: '1 solid white', + fillColor: 'gray', + }); + result.append(innerRect); + + const line = new web2d.Line({ stroke: '1 solid white' }); + line.setFrom(1, 1); + line.setTo(9, 9); + result.append(line); + + const line2 = new web2d.Line({ stroke: '1 solid white' }); + line2.setFrom(1, 9); + line2.setTo(9, 1); + result.append(line2); + + // Some events ... + result.addEvent('mouseover', () => { + innerRect.setFill('#CC0033'); + }); + result.addEvent('mouseout', () => { + innerRect.setFill('gray'); + }); + + result.setSize(50, 50); + return result; + } + + /** + * @param topicId + * @param icon + */ + decorate(topicId, icon) { + const me = this; + + if (!icon.__remove) { + icon.addEvent('mouseover', () => { + me.show(topicId, icon); + }); + + icon.addEvent('mouseout', () => { + me.hide(); + }); + icon.__remove = true; + } + } +} diff --git a/packages/mindplot/src/components/MultilineTextEditor.js b/packages/mindplot/src/components/MultilineTextEditor.js index db9b228c..8ac52db5 100644 --- a/packages/mindplot/src/components/MultilineTextEditor.js +++ b/packages/mindplot/src/components/MultilineTextEditor.js @@ -16,10 +16,10 @@ * 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'; +import Events from './Events'; +import ActionDispatcher from './ActionDispatcher'; initHotKeyPluggin($); @@ -56,7 +56,7 @@ class MultilineTextEditor extends Events { _registerEvents(containerElem) { const textareaElem = this._getTextareaElem(); const me = this; - textareaElem.on('keydown', function keydown (event) { + textareaElem.on('keydown', function keydown(event) { switch (jQuery.hotkeys.specialKeys[event.keyCode]) { case 'esc': me.close(false); diff --git a/packages/mindplot/src/components/layout/AbstractBasicSorter.js b/packages/mindplot/src/components/layout/AbstractBasicSorter.js index 39bba238..2b48109e 100644 --- a/packages/mindplot/src/components/layout/AbstractBasicSorter.js +++ b/packages/mindplot/src/components/layout/AbstractBasicSorter.js @@ -1,3 +1,4 @@ +/* eslint-disable class-methods-use-this */ /* * Copyright [2015] [wisemapping] * @@ -21,61 +22,59 @@ import ChildrenSorterStrategy from './ChildrenSorterStrategy'; * @class * @extends mindplot.layout.ChildrenSorterStrategy */ -const AbstractBasicSorter = new Class( - /** @lends AbstractBasicSorter */ { - Extends: ChildrenSorterStrategy, +class AbstractBasicSorter extends ChildrenSorterStrategy { + /** @lends AbstractBasicSorter */ - /** + /** * @param {} treeSet * @param {} node * @return the height of a node and its children if existing and not shrunken */ - computeChildrenIdByHeights(treeSet, node) { - const result = {}; - this._computeChildrenHeight(treeSet, node, result); - return result; - }, + computeChildrenIdByHeights(treeSet, node) { + const result = {}; + this._computeChildrenHeight(treeSet, node, result); + return result; + } - _getVerticalPadding() { - return AbstractBasicSorter.INTERNODE_VERTICAL_PADDING; - }, + _getVerticalPadding() { + return AbstractBasicSorter.INTERNODE_VERTICAL_PADDING; + } - _computeChildrenHeight(treeSet, node, heightCache) { - const height = node.getSize().height + this._getVerticalPadding() * 2; // 2* Top and down padding; + _computeChildrenHeight(treeSet, node, heightCache) { + const height = node.getSize().height + this._getVerticalPadding() * 2; // 2* Top and down padding; - let result; - const children = treeSet.getChildren(node); - if (children.length === 0 || node.areChildrenShrunken()) { - result = height; - } else { - let childrenHeight = 0; + let result; + const children = treeSet.getChildren(node); + if (children.length === 0 || node.areChildrenShrunken()) { + result = height; + } else { + let childrenHeight = 0; - children.forEach(((child) => { - childrenHeight += this._computeChildrenHeight(treeSet, child, heightCache); - })); + children.forEach(((child) => { + childrenHeight += this._computeChildrenHeight(treeSet, child, heightCache); + })); - result = Math.max(height, childrenHeight); - } + result = Math.max(height, childrenHeight); + } - if (heightCache) { - heightCache[node.getId()] = result; - } + if (heightCache) { + heightCache[node.getId()] = result; + } - return result; - }, + return result; + } - _getSortedChildren(treeSet, node) { - const result = treeSet.getChildren(node); - result.sort((a, b) => a.getOrder() - b.getOrder()); - return result; - }, + _getSortedChildren(treeSet, node) { + const result = treeSet.getChildren(node); + result.sort((a, b) => a.getOrder() - b.getOrder()); + return result; + } - _getRelativeDirection(reference, position) { - const offset = position.x - reference.x; - return offset >= 0 ? 1 : -1; - }, - }, -); + _getRelativeDirection(reference, position) { + const offset = position.x - reference.x; + return offset >= 0 ? 1 : -1; + } +} /** * @constant diff --git a/packages/mindplot/src/components/layout/BalancedSorter.js b/packages/mindplot/src/components/layout/BalancedSorter.js index 3b3e9ff0..99da2fa2 100644 --- a/packages/mindplot/src/components/layout/BalancedSorter.js +++ b/packages/mindplot/src/components/layout/BalancedSorter.js @@ -1,3 +1,4 @@ +/* eslint-disable class-methods-use-this */ /* * Copyright [2015] [wisemapping] * @@ -18,16 +19,13 @@ import { $assert, $defined } from '@wisemapping/core-js'; import AbstractBasicSorter from './AbstractBasicSorter'; -const BalancedSorter = new Class( - /** @lends BalancedSorter */ { - Extends: AbstractBasicSorter, - /** +class BalancedSorter extends AbstractBasicSorter { + /** @lends BalancedSorter */ + /** * @constructs * @extends mindplot.layout.AbstractBasicSorter */ - initialize() { }, - - /** + /** * @param {} graph * @param {} parent * @param {} node @@ -35,284 +33,283 @@ const BalancedSorter = new Class( * @param {Boolean} free * @return an array with order and position */ - predict(graph, parent, node, position, free) { - // If its a free node... - if (free) { - $assert( - $defined(position), - 'position cannot be null for predict in free positioning', - ); - $assert($defined(node), 'node cannot be null for predict in free positioning'); + predict(graph, parent, node, position, free) { + // If its a free node... + if (free) { + $assert( + $defined(position), + 'position cannot be null for predict in free positioning', + ); + $assert($defined(node), 'node cannot be null for predict in free positioning'); - var rootNode = graph.getRootNode(parent); - var direction = this._getRelativeDirection( - rootNode.getPosition(), - node.getPosition(), - ); + var rootNode = graph.getRootNode(parent); + var direction = this._getRelativeDirection( + rootNode.getPosition(), + node.getPosition(), + ); - const limitXPos = parent.getPosition().x + const limitXPos = parent.getPosition().x + direction * (parent.getSize().width / 2 + node.getSize().width / 2 + BalancedSorter.INTERNODE_HORIZONTAL_PADDING); - const xPos = direction > 0 - ? position.x >= limitXPos - ? position.x - : limitXPos - : position.x <= limitXPos - ? position.x - : limitXPos; + const xPos = direction > 0 + ? position.x >= limitXPos + ? position.x + : limitXPos + : position.x <= limitXPos + ? position.x + : limitXPos; - return [0, { x: xPos, y: position.y }]; + return [0, { x: xPos, y: position.y }]; + } + + var rootNode = graph.getRootNode(parent); + + // If it is a dragged node... + if (node) { + $assert($defined(position), 'position cannot be null for predict in dragging'); + const nodeDirection = this._getRelativeDirection( + rootNode.getPosition(), + node.getPosition(), + ); + const positionDirection = this._getRelativeDirection( + rootNode.getPosition(), + position, + ); + const siblings = graph.getSiblings(node); + + const sameParent = parent == graph.getParent(node); + if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) { + return [node.getOrder(), node.getPosition()]; } + } - var rootNode = graph.getRootNode(parent); + if (!position) { + var right = this._getChildrenForOrder(parent, graph, 0); + var left = this._getChildrenForOrder(parent, graph, 1); + } + // Filter nodes on one side.. + const order = position + ? position.x > rootNode.getPosition().x + ? 0 + : 1 + : right.length - left.length > 0 + ? 1 + : 0; + var direction = order % 2 == 0 ? 1 : -1; - // If it is a dragged node... - if (node) { - $assert($defined(position), 'position cannot be null for predict in dragging'); - const nodeDirection = this._getRelativeDirection( - rootNode.getPosition(), - node.getPosition(), - ); - const positionDirection = this._getRelativeDirection( - rootNode.getPosition(), - position, - ); - const siblings = graph.getSiblings(node); + // Exclude the dragged node (if set) + const children = this._getChildrenForOrder(parent, graph, order).filter((child) => child != node); - const sameParent = parent == graph.getParent(node); - if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) { - return [node.getOrder(), node.getPosition()]; - } - } - - if (!position) { - var right = this._getChildrenForOrder(parent, graph, 0); - var left = this._getChildrenForOrder(parent, graph, 1); - } - // Filter nodes on one side.. - const order = position - ? position.x > rootNode.getPosition().x - ? 0 - : 1 - : right.length - left.length > 0 - ? 1 - : 0; - var direction = order % 2 == 0 ? 1 : -1; - - // Exclude the dragged node (if set) - const children = this._getChildrenForOrder(parent, graph, order).filter((child) => child != node); - - // No children? - if (children.length == 0) { - return [ - order, - { - x: + // No children? + if (children.length == 0) { + return [ + order, + { + x: parent.getPosition().x + direction * (parent.getSize().width / 2 + BalancedSorter.INTERNODE_HORIZONTAL_PADDING * 2), - y: parent.getPosition().y, - }, - ]; + y: parent.getPosition().y, + }, + ]; + } + + // Try to fit within ... + let result = null; + const last = children.getLast(); + position = position || { x: last.getPosition().x, y: last.getPosition().y + 1 }; + children.forEach((child, index) => { + const cpos = child.getPosition(); + if (position.y > cpos.y) { + const yOffset = child == last + ? child.getSize().height + BalancedSorter.INTERNODE_VERTICAL_PADDING * 2 + : (children[index + 1].getPosition().y - child.getPosition().y) / 2; + result = [child.getOrder() + 2, { x: cpos.x, y: cpos.y + yOffset }]; } + }); - // Try to fit within ... - let result = null; - const last = children.getLast(); - position = position || { x: last.getPosition().x, y: last.getPosition().y + 1 }; - children.forEach((child, index) => { - const cpos = child.getPosition(); - if (position.y > cpos.y) { - const yOffset = child == last - ? child.getSize().height + BalancedSorter.INTERNODE_VERTICAL_PADDING * 2 - : (children[index + 1].getPosition().y - child.getPosition().y) / 2; - result = [child.getOrder() + 2, { x: cpos.x, y: cpos.y + yOffset }]; - } - }); - - // Position wasn't below any node, so it must be inserted above - if (!result) { - const first = children[0]; - result = [ - position.x > 0 ? 0 : 1, - { - x: first.getPosition().x, - y: + // Position wasn't below any node, so it must be inserted above + if (!result) { + const first = children[0]; + result = [ + position.x > 0 ? 0 : 1, + { + x: first.getPosition().x, + y: first.getPosition().y - first.getSize().height - BalancedSorter.INTERNODE_VERTICAL_PADDING * 2, - }, - ]; - } + }, + ]; + } - return result; - }, + return result; + } - /** + /** * @param {} treeSet * @param {} parent * @param {} child * @param {} order */ - insert(treeSet, parent, child, order) { - const children = this._getChildrenForOrder(parent, treeSet, order); + insert(treeSet, parent, child, order) { + const children = this._getChildrenForOrder(parent, treeSet, order); - // If no children, return 0 or 1 depending on the side - if (children.length == 0) { - child.setOrder(order % 2); - return; + // If no children, return 0 or 1 depending on the side + if (children.length == 0) { + child.setOrder(order % 2); + return; + } + + // Shift all the elements by two, so side is the same. + // In case of balanced sorter, order don't need to be continuous... + let max = 0; + for (let i = 0; i < children.length; i++) { + const node = children[i]; + max = Math.max(max, node.getOrder()); + if (node.getOrder() >= order) { + max = Math.max(max, node.getOrder() + 2); + node.setOrder(node.getOrder() + 2); } + } - // Shift all the elements by two, so side is the same. - // In case of balanced sorter, order don't need to be continuous... - let max = 0; - for (let i = 0; i < children.length; i++) { - const node = children[i]; - max = Math.max(max, node.getOrder()); - if (node.getOrder() >= order) { - max = Math.max(max, node.getOrder() + 2); - node.setOrder(node.getOrder() + 2); - } - } + const newOrder = order > max + 1 ? max + 2 : order; + child.setOrder(newOrder); + } - const newOrder = order > max + 1 ? max + 2 : order; - child.setOrder(newOrder); - }, - - /** + /** * @param {} treeSet * @param {} node */ - detach(treeSet, node) { - const parent = treeSet.getParent(node); - // Filter nodes on one side.. - const children = this._getChildrenForOrder(parent, treeSet, node.getOrder()); + detach(treeSet, node) { + const parent = treeSet.getParent(node); + // Filter nodes on one side.. + const children = this._getChildrenForOrder(parent, treeSet, node.getOrder()); - children.forEach((child) => { - if (child.getOrder() > node.getOrder()) { - child.setOrder(child.getOrder() - 2); - } - }); - node.setOrder(node.getOrder() % 2 == 0 ? 0 : 1); - }, + children.forEach((child) => { + if (child.getOrder() > node.getOrder()) { + child.setOrder(child.getOrder() - 2); + } + }); + node.setOrder(node.getOrder() % 2 == 0 ? 0 : 1); + } - /** + /** * @param {} treeSet * @param {} node * @return offsets */ - computeOffsets(treeSet, node) { - $assert(treeSet, 'treeSet can no be null.'); - $assert(node, 'node can no be null.'); + computeOffsets(treeSet, node) { + $assert(treeSet, 'treeSet can no be null.'); + $assert(node, 'node can no be null.'); - const children = this._getSortedChildren(treeSet, node); + const children = this._getSortedChildren(treeSet, node); - // Compute heights ... - const heights = children - .map(function (child) { - return { - id: child.getId(), - order: child.getOrder(), - width: child.getSize().width, - height: this._computeChildrenHeight(treeSet, child), - }; - }, this) - .reverse(); + // Compute heights ... + const heights = children + .map(function (child) { + return { + id: child.getId(), + order: child.getOrder(), + width: child.getSize().width, + height: this._computeChildrenHeight(treeSet, child), + }; + }, this) + .reverse(); - // Compute the center of the branch ... - let totalPHeight = 0; - let totalNHeight = 0; + // Compute the center of the branch ... + let totalPHeight = 0; + let totalNHeight = 0; - heights.forEach((elem) => { - if (elem.order % 2 === 0) { - totalPHeight += elem.height; - } else { - totalNHeight += elem.height; - } - }); - let psum = totalPHeight / 2; - let nsum = totalNHeight / 2; - let ysum = 0; + heights.forEach((elem) => { + if (elem.order % 2 === 0) { + totalPHeight += elem.height; + } else { + totalNHeight += elem.height; + } + }); + let psum = totalPHeight / 2; + let nsum = totalNHeight / 2; + let ysum = 0; - // Calculate the offsets ... - const result = {}; - for (let i = 0; i < heights.length; i++) { - const direction = heights[i].order % 2 ? -1 : 1; + // Calculate the offsets ... + const result = {}; + for (let i = 0; i < heights.length; i++) { + const direction = heights[i].order % 2 ? -1 : 1; - if (direction > 0) { - psum -= heights[i].height; - ysum = psum; - } else { - nsum -= heights[i].height; - ysum = nsum; - } + if (direction > 0) { + psum -= heights[i].height; + ysum = psum; + } else { + nsum -= heights[i].height; + ysum = nsum; + } - const yOffset = ysum + heights[i].height / 2; - const xOffset = direction + const yOffset = ysum + heights[i].height / 2; + const xOffset = direction * (node.getSize().width / 2 + heights[i].width / 2 + +BalancedSorter.INTERNODE_HORIZONTAL_PADDING); - $assert(!isNaN(xOffset), 'xOffset can not be null'); - $assert(!isNaN(yOffset), 'yOffset can not be null'); + $assert(!isNaN(xOffset), 'xOffset can not be null'); + $assert(!isNaN(yOffset), 'yOffset can not be null'); - result[heights[i].id] = { x: xOffset, y: yOffset }; - } - return result; - }, + result[heights[i].id] = { x: xOffset, y: yOffset }; + } + return result; + } - /** + /** * @param {} treeSet * @param {} node * @throw will throw an error if order elements are missing */ - verify(treeSet, node) { - // Check that all is consistent ... - const children = this._getChildrenForOrder(node, treeSet, node.getOrder()); + verify(treeSet, node) { + // Check that all is consistent ... + const children = this._getChildrenForOrder(node, treeSet, node.getOrder()); - // All odd ordered nodes should be "continuous" by themselves - // All even numbered nodes should be "continuous" by themselves - const factor = node.getOrder() % 2 == 0 ? 2 : 1; - for (let i = 0; i < children.length; i++) { - const order = i == 0 && factor == 1 ? 1 : factor * i; - $assert( - children[i].getOrder() == order, - `Missing order elements. Missing order: ${i * factor - }. Parent:${node.getId() - },Node:${children[i].getId()}`, - ); - } - }, + // All odd ordered nodes should be "continuous" by themselves + // All even numbered nodes should be "continuous" by themselves + const factor = node.getOrder() % 2 == 0 ? 2 : 1; + for (let i = 0; i < children.length; i++) { + const order = i == 0 && factor == 1 ? 1 : factor * i; + $assert( + children[i].getOrder() == order, + `Missing order elements. Missing order: ${i * factor + }. Parent:${node.getId() + },Node:${children[i].getId()}`, + ); + } + } - /** + /** * @param {} treeSet * @param {} child * @return the direction of the child within the treeSet */ - getChildDirection(treeSet, child) { - return child.getOrder() % 2 == 0 ? 1 : -1; - }, + getChildDirection(treeSet, child) { + return child.getOrder() % 2 == 0 ? 1 : -1; + } - /** + /** * @return {String} the print name of this class */ - toString() { - return 'Balanced Sorter'; - }, + toString() { + return 'Balanced Sorter'; + } - _getChildrenForOrder(parent, graph, order) { - return this._getSortedChildren(graph, parent).filter((child) => child.getOrder() % 2 == order % 2); - }, + _getChildrenForOrder(parent, graph, order) { + return this._getSortedChildren(graph, parent).filter((child) => child.getOrder() % 2 == order % 2); + } - _getVerticalPadding() { - return BalancedSorter.INTERNODE_VERTICAL_PADDING; - }, - }, -); + _getVerticalPadding() { + return BalancedSorter.INTERNODE_VERTICAL_PADDING; + } +} /** * @constant diff --git a/packages/mindplot/src/components/layout/ChildrenSorterStrategy.js b/packages/mindplot/src/components/layout/ChildrenSorterStrategy.js index 10c16dcd..0efb690a 100644 --- a/packages/mindplot/src/components/layout/ChildrenSorterStrategy.js +++ b/packages/mindplot/src/components/layout/ChildrenSorterStrategy.js @@ -1,3 +1,4 @@ +/* eslint-disable class-methods-use-this */ /* * Copyright [2015] [wisemapping] * @@ -16,54 +17,49 @@ * limitations under the License. */ -const ChildrenSorterStrategy = new Class(/** @lends ChildrenSorterStrategy */{ +class ChildrenSorterStrategy {/** @lends ChildrenSorterStrategy */ /** * @constructs */ - initialize() { - - }, - /** @abstract */ computeChildrenIdByHeights(treeSet, node) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ computeOffsets(treeSet, node) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ insert(treeSet, parent, child, order) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ detach(treeSet, node) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ predict(treeSet, parent, node, position, free) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ verify(treeSet, node) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ getChildDirection(treeSet, node) { - throw 'Method must be implemented'; - }, + throw new Error('Method must be implemented'); + } /** @abstract */ toString() { - throw 'Method must be implemented: print name'; - }, - -}); + throw new Error('Method must be implemented: print name'); + } +} export default ChildrenSorterStrategy; diff --git a/packages/mindplot/src/components/layout/EventBusDispatcher.js b/packages/mindplot/src/components/layout/EventBusDispatcher.js index e634e1d3..9e3e2a38 100644 --- a/packages/mindplot/src/components/layout/EventBusDispatcher.js +++ b/packages/mindplot/src/components/layout/EventBusDispatcher.js @@ -17,20 +17,20 @@ */ import EventBus from './EventBus'; -const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{ +class EventBusDispatcher {/** @lends EventBusDispatcher */ /** * @constructs */ - initialize() { + constructor() { this.registerBusEvents(); - }, + } /** * @param {mindplot.layout.LayoutManager} layoutManager */ setLayoutManager(layoutManager) { this._layoutManager = layoutManager; - }, + } /** * register bus events @@ -44,27 +44,27 @@ const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{ EventBus.instance.addEvent(EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this)); EventBus.instance.addEvent(EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this)); EventBus.instance.addEvent(EventBus.events.DoLayout, this._doLayout.bind(this)); - }, + } _nodeResizeEvent(args) { this._layoutManager.updateNodeSize(args.node.getId(), args.size); - }, + } _nodeMoveEvent(args) { this._layoutManager.moveNode(args.node.getId(), args.position); - }, + } _nodeDisconnectEvent(node) { this._layoutManager.disconnectNode(node.getId()); - }, + } _nodeConnectEvent(args) { this._layoutManager.connectNode(args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder()); - }, + } _nodeShrinkEvent(node) { this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken()); - }, + } _nodeAdded(node) { // Central topic must not be added twice ... @@ -72,11 +72,11 @@ const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{ this._layoutManager.addNode(node.getId(), { width: 10, height: 10 }, node.getPosition()); this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken()); } - }, + } _nodeRemoved(node) { this._layoutManager.removeNode(node.getId()); - }, + } _doLayout() { // (function() { @@ -86,13 +86,12 @@ const EventBusDispatcher = new Class(/** @lends EventBusDispatcher */{ // console.log("---------"); // console.log("---------"); // }).delay(0, this); - }, + } /** @return layout manager */ getLayoutManager() { return this._layoutManager; - }, - -}); + } +} export default EventBusDispatcher; diff --git a/packages/mindplot/src/components/layout/GridSorter.js b/packages/mindplot/src/components/layout/GridSorter.js index 657de416..8c260600 100644 --- a/packages/mindplot/src/components/layout/GridSorter.js +++ b/packages/mindplot/src/components/layout/GridSorter.js @@ -22,9 +22,7 @@ import AbstractBasicSorter from './AbstractBasicSorter'; * @class * @extends mindplot.layout.AbstractBasicSorter */ -const GridSorter = new Class(/** @lends GridSorter */{ - Extends: AbstractBasicSorter, - +class GridSorter extends AbstractBasicSorter {/** @lends GridSorter */ /** * @param {} treeSet * @param {} node @@ -59,22 +57,21 @@ const GridSorter = new Class(/** @lends GridSorter */{ const yOffset = zeroHeight + middleHeight + finalHeight; const xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE; - $assert(!isNaN(xOffset), 'xOffset can not be null'); - $assert(!isNaN(yOffset), 'yOffset can not be null'); + $assert(!Number.isNaN(xOffset), 'xOffset can not be null'); + $assert(!Number.isNaN(yOffset), 'yOffset can not be null'); result[heights[i].id] = { x: xOffset, y: yOffset }; } return result; - }, + } /** * @return {String} the print name of this class */ toString() { return 'Grid Sorter'; - }, - -}); + } +} /** * @constant diff --git a/packages/mindplot/src/components/layout/Node.js b/packages/mindplot/src/components/layout/Node.js index 3fba43cb..289f90ac 100644 --- a/packages/mindplot/src/components/layout/Node.js +++ b/packages/mindplot/src/components/layout/Node.js @@ -17,9 +17,9 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; -const Node = new Class( - /** @lends Node */ { - /** +class Node { + /** @lends Node */ + /** * @constructs * @param id * @param size @@ -30,220 +30,220 @@ const Node = new Class( * @throws will throw an error if position is null or undefined * @throws will throw an error if sorter is null or undefined */ - initialize(id, size, position, sorter) { - $assert(typeof id === 'number' && Number.isFinite(id), 'id can not be null'); - $assert(size, 'size can not be null'); - $assert(position, 'position can not be null'); - $assert(sorter, 'sorter can not be null'); + constructor(id, size, position, sorter) { + $assert(typeof id === 'number' && Number.isFinite(id), 'id can not be null'); + $assert(size, 'size can not be null'); + $assert(position, 'position can not be null'); + $assert(sorter, 'sorter can not be null'); - this._id = id; - this._sorter = sorter; - this._properties = {}; + this._id = id; + this._sorter = sorter; + this._properties = {}; - this.setSize(size); - this.setPosition(position); - this.setShrunken(false); - }, + this.setSize(size); + this.setPosition(position); + this.setShrunken(false); + } - /** */ - getId() { - return this._id; - }, + /** */ + getId() { + return this._id; + } - /** */ - setFree(value) { - this._setProperty('free', value); - }, + /** */ + setFree(value) { + this._setProperty('free', value); + } - /** */ - isFree() { - return this._getProperty('free'); - }, + /** */ + isFree() { + return this._getProperty('free'); + } - /** */ - hasFreeChanged() { - return this._isPropertyChanged('free'); - }, + /** */ + hasFreeChanged() { + return this._isPropertyChanged('free'); + } - /** */ - hasFreeDisplacementChanged() { - return this._isPropertyChanged('freeDisplacement'); - }, + /** */ + hasFreeDisplacementChanged() { + return this._isPropertyChanged('freeDisplacement'); + } - /** */ - setShrunken(value) { - this._setProperty('shrink', value); - }, + /** */ + setShrunken(value) { + this._setProperty('shrink', value); + } - /** */ - areChildrenShrunken() { - return this._getProperty('shrink'); - }, + /** */ + areChildrenShrunken() { + return this._getProperty('shrink'); + } - /** */ - setOrder(order) { - $assert( - typeof order === 'number' && Number.isFinite(order), - `Order can not be null. Value:${order}`, - ); - this._setProperty('order', order); - }, + /** */ + setOrder(order) { + $assert( + typeof order === 'number' && Number.isFinite(order), + `Order can not be null. Value:${order}`, + ); + this._setProperty('order', order); + } - /** */ - resetPositionState() { - const prop = this._properties.position; - if (prop) { - prop.hasChanged = false; - } - }, + /** */ + resetPositionState() { + const prop = this._properties.position; + if (prop) { + prop.hasChanged = false; + } + } - /** */ - resetOrderState() { - const prop = this._properties.order; - if (prop) { - prop.hasChanged = false; - } - }, + /** */ + resetOrderState() { + const prop = this._properties.order; + if (prop) { + prop.hasChanged = false; + } + } - /** */ - resetFreeState() { - const prop = this._properties.freeDisplacement; - if (prop) { - prop.hasChanged = false; - } - }, + /** */ + resetFreeState() { + const prop = this._properties.freeDisplacement; + if (prop) { + prop.hasChanged = false; + } + } - /** */ - getOrder() { - return this._getProperty('order'); - }, + /** */ + getOrder() { + return this._getProperty('order'); + } - /** */ - hasOrderChanged() { - return this._isPropertyChanged('order'); - }, + /** */ + hasOrderChanged() { + return this._isPropertyChanged('order'); + } - /** */ - hasPositionChanged() { - return this._isPropertyChanged('position'); - }, + /** */ + hasPositionChanged() { + return this._isPropertyChanged('position'); + } - /** */ - hasSizeChanged() { - return this._isPropertyChanged('size'); - }, + /** */ + hasSizeChanged() { + return this._isPropertyChanged('size'); + } - /** */ - getPosition() { - return this._getProperty('position'); - }, + /** */ + getPosition() { + return this._getProperty('position'); + } - /** */ - setSize(size) { - $assert($defined(size), 'Size can not be null'); - this._setProperty('size', Object.clone(size)); - }, + /** */ + setSize(size) { + $assert($defined(size), 'Size can not be null'); + this._setProperty('size', Object.clone(size)); + } - /** */ - getSize() { - return this._getProperty('size'); - }, + /** */ + getSize() { + return this._getProperty('size'); + } - /** */ - setFreeDisplacement(displacement) { - $assert($defined(displacement), 'Position can not be null'); - $assert($defined(displacement.x), 'x can not be null'); - $assert($defined(displacement.y), 'y can not be null'); - const oldDisplacement = this.getFreeDisplacement(); - const newDisplacement = { - x: oldDisplacement.x + displacement.x, - y: oldDisplacement.y + displacement.y, - }; + /** */ + setFreeDisplacement(displacement) { + $assert($defined(displacement), 'Position can not be null'); + $assert($defined(displacement.x), 'x can not be null'); + $assert($defined(displacement.y), 'y can not be null'); + const oldDisplacement = this.getFreeDisplacement(); + const newDisplacement = { + x: oldDisplacement.x + displacement.x, + y: oldDisplacement.y + displacement.y, + }; - this._setProperty('freeDisplacement', Object.clone(newDisplacement)); - }, + this._setProperty('freeDisplacement', Object.clone(newDisplacement)); + } - /** */ - resetFreeDisplacement() { - this._setProperty('freeDisplacement', { x: 0, y: 0 }); - }, + /** */ + resetFreeDisplacement() { + this._setProperty('freeDisplacement', { x: 0, y: 0 }); + } - /** */ - getFreeDisplacement() { - const freeDisplacement = this._getProperty('freeDisplacement'); - return freeDisplacement || { x: 0, y: 0 }; - }, + /** */ + getFreeDisplacement() { + const freeDisplacement = this._getProperty('freeDisplacement'); + return freeDisplacement || { x: 0, y: 0 }; + } - /** */ - setPosition(position) { - $assert($defined(position), 'Position can not be null'); - $assert($defined(position.x), 'x can not be null'); - $assert($defined(position.y), 'y can not be null'); + /** */ + setPosition(position) { + $assert($defined(position), 'Position can not be null'); + $assert($defined(position.x), 'x can not be null'); + $assert($defined(position.y), 'y can not be null'); - // This is a performance improvement to avoid movements that really could be avoided. - const currentPos = this.getPosition(); - if ( - currentPos == null + // This is a performance improvement to avoid movements that really could be avoided. + const currentPos = this.getPosition(); + if ( + currentPos == null || Math.abs(currentPos.x - position.x) > 2 || Math.abs(currentPos.y - position.y) > 2 - ) this._setProperty('position', position); - }, + ) this._setProperty('position', position); + } - _setProperty(key, value) { - let prop = this._properties[key]; - if (!prop) { - prop = { - hasChanged: false, - value: null, - oldValue: null, - }; - } + _setProperty(key, value) { + let prop = this._properties[key]; + if (!prop) { + prop = { + hasChanged: false, + value: null, + oldValue: null, + }; + } - // Only update if the property has changed ... - if (JSON.stringify(prop.value) !== JSON.stringify(value)) { - prop.oldValue = prop.value; - prop.value = value; - prop.hasChanged = true; - } - this._properties[key] = prop; - }, + // Only update if the property has changed ... + if (JSON.stringify(prop.value) !== JSON.stringify(value)) { + prop.oldValue = prop.value; + prop.value = value; + prop.hasChanged = true; + } + this._properties[key] = prop; + } - _getProperty(key) { - const prop = this._properties[key]; - return $defined(prop) ? prop.value : null; - }, + _getProperty(key) { + const prop = this._properties[key]; + return $defined(prop) ? prop.value : null; + } - _isPropertyChanged(key) { - const prop = this._properties[key]; - return prop ? prop.hasChanged : false; - }, + _isPropertyChanged(key) { + const prop = this._properties[key]; + return prop ? prop.hasChanged : false; + } - /** */ - getSorter() { - return this._sorter; - }, + /** */ + getSorter() { + return this._sorter; + } + + /** @return {String} returns id, order, position, size and shrink information */ + toString() { + return ( + `[id:${ + this.getId() + }, order:${ + this.getOrder() + }, position: {${ + this.getPosition().x + },${ + this.getPosition().y + }}, size: {${ + this.getSize().width + },${ + this.getSize().height + }}, shrink:${ + this.areChildrenShrunken() + }]` + ); + } +} - /** @return {String} returns id, order, position, size and shrink information */ - toString() { - return ( - `[id:${ - this.getId() - }, order:${ - this.getOrder() - }, position: {${ - this.getPosition().x - },${ - this.getPosition().y - }}, size: {${ - this.getSize().width - },${ - this.getSize().height - }}, shrink:${ - this.areChildrenShrunken() - }]` - ); - }, - }, -); export default Node; diff --git a/packages/mindplot/src/components/layout/RootedTreeSet.js b/packages/mindplot/src/components/layout/RootedTreeSet.js index 7b29d893..438f9793 100644 --- a/packages/mindplot/src/components/layout/RootedTreeSet.js +++ b/packages/mindplot/src/components/layout/RootedTreeSet.js @@ -17,438 +17,437 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; -const RootedTreeSet = new Class( - /** @lends RootedTreeSet */ { - /** @constructs */ - initialize() { - this._rootNodes = []; - }, +class RootedTreeSet { + /** @lends RootedTreeSet */ + /** @constructs */ + constructor() { + this._rootNodes = []; + } - /** + /** * @param root * @throws will throw an error if root is null or undefined */ - setRoot(root) { - $assert(root, 'root can not be null'); - this._rootNodes.push(this._decodate(root)); - }, + setRoot(root) { + $assert(root, 'root can not be null'); + this._rootNodes.push(this._decodate(root)); + } - /** getter */ - getTreeRoots() { - return this._rootNodes; - }, + /** getter */ + getTreeRoots() { + return this._rootNodes; + } - _decodate(node) { - node._children = []; - return node; - }, + _decodate(node) { + node._children = []; + return node; + } - /** + /** * @param {mindplot.model.NodeModel} node * @throws will throw an error if node is null or undefined * @throws will throw an error if node with id already exists * @throws will throw an error if node has been added already */ - add(node) { - $assert(node, 'node can not be null'); - $assert( - !this.find(node.getId(), false), - `node already exits with this id. Id:${node.getId()}`, - ); - $assert(!node._children, 'node already added'); - this._rootNodes.push(this._decodate(node)); - }, + add(node) { + $assert(node, 'node can not be null'); + $assert( + !this.find(node.getId(), false), + `node already exits with this id. Id:${node.getId()}`, + ); + $assert(!node._children, 'node already added'); + this._rootNodes.push(this._decodate(node)); + } - /** + /** * @param nodeId * @throws will throw an error if nodeId is null or undefined */ - remove(nodeId) { - $assert($defined(nodeId), 'nodeId can not be null'); - const node = this.find(nodeId); - this._rootNodes.erase(node); - }, + remove(nodeId) { + $assert($defined(nodeId), 'nodeId can not be null'); + const node = this.find(nodeId); + this._rootNodes.erase(node); + } - /** + /** * @param parentId * @param childId * @throws will throw an error if parentId is null or undefined * @throws will throw an error if childId is null or undefined * @throws will throw an error if node with id childId is already a child of parent */ - connect(parentId, childId) { - $assert($defined(parentId), 'parent can not be null'); - $assert($defined(childId), 'child can not be null'); + connect(parentId, childId) { + $assert($defined(parentId), 'parent can not be null'); + $assert($defined(childId), 'child can not be null'); - const parent = this.find(parentId); - const child = this.find(childId, true); - $assert( - !child._parent, - `node already connected. Id:${child.getId()},previous:${child._parent}`, - ); + const parent = this.find(parentId); + const child = this.find(childId, true); + $assert( + !child._parent, + `node already connected. Id:${child.getId()},previous:${child._parent}`, + ); - parent._children.push(child); - child._parent = parent; - this._rootNodes.erase(child); - }, + parent._children.push(child); + child._parent = parent; + this._rootNodes.erase(child); + } - /** + /** * @param nodeId * @throws will throw an error if nodeId is null or undefined * @throws will throw an error if node is not connected */ - disconnect(nodeId) { - $assert($defined(nodeId), 'nodeId can not be null'); - const node = this.find(nodeId); - $assert(node._parent, 'Node is not connected'); + disconnect(nodeId) { + $assert($defined(nodeId), 'nodeId can not be null'); + const node = this.find(nodeId); + $assert(node._parent, 'Node is not connected'); - node._parent._children.erase(node); - this._rootNodes.push(node); - node._parent = null; - }, + node._parent._children.erase(node); + this._rootNodes.push(node); + node._parent = null; + } - /** + /** * @param id * @param validate * @throws will throw an error if id is null or undefined * @throws will throw an error if node cannot be found * @return node */ - find(id, validate) { - $assert($defined(id), 'id can not be null'); + find(id, validate) { + $assert($defined(id), 'id can not be null'); - const graphs = this._rootNodes; - let result = null; - for (let i = 0; i < graphs.length; i++) { - const node = graphs[i]; - result = this._find(id, node); - if (result) { - break; - } + const graphs = this._rootNodes; + let result = null; + for (let i = 0; i < graphs.length; i++) { + const node = graphs[i]; + result = this._find(id, node); + if (result) { + break; } - validate = !$defined(validate) ? true : validate; - $assert( - validate ? result : true, - `node could not be found id:${id}\n,RootedTreeSet${this.dump()}`, - ); - return result; - }, + } + validate = !$defined(validate) ? true : validate; + $assert( + validate ? result : true, + `node could not be found id:${id}\n,RootedTreeSet${this.dump()}`, + ); + return result; + } - _find(id, parent) { - if (parent.getId() === id) { - return parent; - } + _find(id, parent) { + if (parent.getId() === id) { + return parent; + } - let result = null; - const children = parent._children; - for (let i = 0; i < children.length; i++) { - const child = children[i]; - result = this._find(id, child); - if (result) break; - } + let result = null; + const children = parent._children; + for (let i = 0; i < children.length; i++) { + const child = children[i]; + result = this._find(id, child); + if (result) break; + } - return result; - }, + return result; + } - /** + /** * @param node * @throws will throw an error if nodeId is null or undefined * @return children */ - getChildren(node) { - $assert(node, 'node cannot be null'); - return node._children; - }, + getChildren(node) { + $assert(node, 'node cannot be null'); + return node._children; + } - /** + /** * @param node * @throws will throw an error if node is null or undefined * @return root node or the provided node, if it has no parent */ - getRootNode(node) { - $assert(node, 'node cannot be null'); - const parent = this.getParent(node); - if ($defined(parent)) { - return this.getRootNode(parent); - } + getRootNode(node) { + $assert(node, 'node cannot be null'); + const parent = this.getParent(node); + if ($defined(parent)) { + return this.getRootNode(parent); + } - return node; - }, + return node; + } - /** + /** * @param node * @throws will throw an error if node is null or undefined * @return {Array} ancestors */ - getAncestors(node) { - $assert(node, 'node cannot be null'); - return this._getAncestors(this.getParent(node), []); - }, + getAncestors(node) { + $assert(node, 'node cannot be null'); + return this._getAncestors(this.getParent(node), []); + } - _getAncestors(node, ancestors) { - const result = ancestors; - if (node) { - result.push(node); - this._getAncestors(this.getParent(node), result); - } - return result; - }, + _getAncestors(node, ancestors) { + const result = ancestors; + if (node) { + result.push(node); + this._getAncestors(this.getParent(node), result); + } + return result; + } - /** + /** * @param node * @throws will throw an error if node is null or undefined * @return {Array} siblings */ - getSiblings(node) { - $assert(node, 'node cannot be null'); - if (!$defined(node._parent)) { - return []; - } - const siblings = node._parent._children.filter((child) => child !== node); - return siblings; - }, + getSiblings(node) { + $assert(node, 'node cannot be null'); + if (!$defined(node._parent)) { + return []; + } + const siblings = node._parent._children.filter((child) => child !== node); + return siblings; + } - /** + /** * @param node * @throws will throw an error if node is null or undefined * @return {Boolean} whether the node has a single path to a single leaf (no branching) */ - hasSinglePathToSingleLeaf(node) { - $assert(node, 'node cannot be null'); - return this._hasSinglePathToSingleLeaf(node); - }, + hasSinglePathToSingleLeaf(node) { + $assert(node, 'node cannot be null'); + return this._hasSinglePathToSingleLeaf(node); + } - _hasSinglePathToSingleLeaf(node) { - const children = this.getChildren(node); + _hasSinglePathToSingleLeaf(node) { + const children = this.getChildren(node); - if (children.length === 1) { - return this._hasSinglePathToSingleLeaf(children[0]); - } + if (children.length === 1) { + return this._hasSinglePathToSingleLeaf(children[0]); + } - return children.length === 0; - }, + return children.length === 0; + } - /** + /** * @param node * @return {Boolean} whether the node is the start of a subbranch */ - isStartOfSubBranch(node) { - return this.getSiblings(node).length > 0 && this.getChildren(node).length === 1; - }, + isStartOfSubBranch(node) { + return this.getSiblings(node).length > 0 && this.getChildren(node).length === 1; + } - /** + /** * @param node * @throws will throw an error if node is null or undefined * @return {Boolean} whether the node is a leaf */ - isLeaf(node) { - $assert(node, 'node cannot be null'); - return this.getChildren(node).length === 0; - }, + isLeaf(node) { + $assert(node, 'node cannot be null'); + return this.getChildren(node).length === 0; + } - /** + /** * @param node * @throws will throw an error if node is null or undefined * @return parent */ - getParent(node) { - $assert(node, 'node cannot be null'); - return node._parent; - }, + getParent(node) { + $assert(node, 'node cannot be null'); + return node._parent; + } - /** + /** * @return result */ - dump() { - const branches = this._rootNodes; - let result = ''; - for (let i = 0; i < branches.length; i++) { - const branch = branches[i]; - result += this._dump(branch, ''); - } - return result; - }, + dump() { + const branches = this._rootNodes; + let result = ''; + for (let i = 0; i < branches.length; i++) { + const branch = branches[i]; + result += this._dump(branch, ''); + } + return result; + } - _dump(node, indent) { - let result = `${indent + node}\n`; - const children = this.getChildren(node); - for (let i = 0; i < children.length; i++) { - const child = children[i]; - result += this._dump(child, `${indent} `); - } + _dump(node, indent) { + let result = `${indent + node}\n`; + const children = this.getChildren(node); + for (let i = 0; i < children.length; i++) { + const child = children[i]; + result += this._dump(child, `${indent} `); + } - return result; - }, + return result; + } - /** + /** * @param canvas */ - plot(canvas) { - const branches = this._rootNodes; - for (let i = 0; i < branches.length; i++) { - const branch = branches[i]; - this._plot(canvas, branch); - } - }, + plot(canvas) { + const branches = this._rootNodes; + for (let i = 0; i < branches.length; i++) { + const branch = branches[i]; + this._plot(canvas, branch); + } + } - _plot(canvas, node, root) { - const children = this.getChildren(node); - const cx = node.getPosition().x + canvas.width / 2 - node.getSize().width / 2; - const cy = node.getPosition().y + canvas.height / 2 - node.getSize().height / 2; - const rect = canvas.rect(cx, cy, node.getSize().width, node.getSize().height); - const order = node.getOrder() == null ? 'r' : node.getOrder(); - const text = canvas.text( - node.getPosition().x + canvas.width / 2, - node.getPosition().y + canvas.height / 2, - `${node.getId()}[${order}]`, + _plot(canvas, node, root) { + const children = this.getChildren(node); + const cx = node.getPosition().x + canvas.width / 2 - node.getSize().width / 2; + const cy = node.getPosition().y + canvas.height / 2 - node.getSize().height / 2; + const rect = canvas.rect(cx, cy, node.getSize().width, node.getSize().height); + const order = node.getOrder() == null ? 'r' : node.getOrder(); + const text = canvas.text( + node.getPosition().x + canvas.width / 2, + node.getPosition().y + canvas.height / 2, + `${node.getId()}[${order}]`, + ); + text.attr('fill', '#FFF'); + const fillColor = this._rootNodes.contains(node) + ? '#000' + : node.isFree() + ? '#abc' + : '#c00'; + rect.attr('fill', fillColor); + + const rectPosition = { + x: rect.attr('x') - canvas.width / 2 + rect.attr('width') / 2, + y: rect.attr('y') - canvas.height / 2 + rect.attr('height') / 2, + }; + const rectSize = { width: rect.attr('width'), height: rect.attr('height') }; + rect.click(() => { + console.log( + `[id:${ + node.getId() + }, order:${ + node.getOrder() + }, position:(${ + rectPosition.x + },${ + rectPosition.y + }), size:${ + rectSize.width + }x${ + rectSize.height + }, freeDisplacement:(${ + node.getFreeDisplacement().x + },${ + node.getFreeDisplacement().y + })]`, ); - text.attr('fill', '#FFF'); - const fillColor = this._rootNodes.contains(node) - ? '#000' - : node.isFree() - ? '#abc' - : '#c00'; - rect.attr('fill', fillColor); + }); + text.click(() => { + console.log( + `[id:${ + node.getId() + }, order:${ + node.getOrder() + }, position:(${ + rectPosition.x + },${ + rectPosition.y + }), size:${ + rectSize.width + }x${ + rectSize.height + }, freeDisplacement:(${ + node.getFreeDisplacement().x + },${ + node.getFreeDisplacement().y + })]`, + ); + }); - const rectPosition = { - x: rect.attr('x') - canvas.width / 2 + rect.attr('width') / 2, - y: rect.attr('y') - canvas.height / 2 + rect.attr('height') / 2, - }; - const rectSize = { width: rect.attr('width'), height: rect.attr('height') }; - rect.click(() => { - console.log( - `[id:${ - node.getId() - }, order:${ - node.getOrder() - }, position:(${ - rectPosition.x - },${ - rectPosition.y - }), size:${ - rectSize.width - }x${ - rectSize.height - }, freeDisplacement:(${ - node.getFreeDisplacement().x - },${ - node.getFreeDisplacement().y - })]`, - ); - }); - text.click(() => { - console.log( - `[id:${ - node.getId() - }, order:${ - node.getOrder() - }, position:(${ - rectPosition.x - },${ - rectPosition.y - }), size:${ - rectSize.width - }x${ - rectSize.height - }, freeDisplacement:(${ - node.getFreeDisplacement().x - },${ - node.getFreeDisplacement().y - })]`, - ); - }); + for (let i = 0; i < children.length; i++) { + const child = children[i]; + this._plot(canvas, child); + } + } - for (let i = 0; i < children.length; i++) { - const child = children[i]; - this._plot(canvas, child); - } - }, - - /** + /** * @param node * @param position */ - updateBranchPosition(node, position) { - const oldPos = node.getPosition(); - node.setPosition(position); + updateBranchPosition(node, position) { + const oldPos = node.getPosition(); + node.setPosition(position); - const xOffset = oldPos.x - position.x; - const yOffset = oldPos.y - position.y; + const xOffset = oldPos.x - position.x; + const yOffset = oldPos.y - position.y; - const children = this.getChildren(node); - const me = this; - children.forEach((child) => { - me.shiftBranchPosition(child, xOffset, yOffset); - }); - }, + const children = this.getChildren(node); + const me = this; + children.forEach((child) => { + me.shiftBranchPosition(child, xOffset, yOffset); + }); + } - /** + /** * @param node * @param xOffset * @param yOffset */ - shiftBranchPosition(node, xOffset, yOffset) { - const position = node.getPosition(); - node.setPosition({ x: position.x + xOffset, y: position.y + yOffset }); + shiftBranchPosition(node, xOffset, yOffset) { + const position = node.getPosition(); + node.setPosition({ x: position.x + xOffset, y: position.y + yOffset }); - const children = this.getChildren(node); - const me = this; - children.forEach((child) => { - me.shiftBranchPosition(child, xOffset, yOffset); - }); - }, + const children = this.getChildren(node); + const me = this; + children.forEach((child) => { + me.shiftBranchPosition(child, xOffset, yOffset); + }); + } - /** + /** * @param node * @param yOffset * @return siblings in the offset (vertical) direction, i.e. with lower or higher order, respectively */ - getSiblingsInVerticalDirection(node, yOffset) { - // siblings with lower or higher order, depending on the direction of the offset and on the same side as their parent - const parent = this.getParent(node); - const siblings = this.getSiblings(node).filter((sibling) => { - const sameSide = node.getPosition().x > parent.getPosition().x - ? sibling.getPosition().x > parent.getPosition().x - : sibling.getPosition().x < parent.getPosition().x; - const orderOK = yOffset < 0 - ? sibling.getOrder() < node.getOrder() - : sibling.getOrder() > node.getOrder(); - return orderOK && sameSide; - }); + getSiblingsInVerticalDirection(node, yOffset) { + // siblings with lower or higher order, depending on the direction of the offset and on the same side as their parent + const parent = this.getParent(node); + const siblings = this.getSiblings(node).filter((sibling) => { + const sameSide = node.getPosition().x > parent.getPosition().x + ? sibling.getPosition().x > parent.getPosition().x + : sibling.getPosition().x < parent.getPosition().x; + const orderOK = yOffset < 0 + ? sibling.getOrder() < node.getOrder() + : sibling.getOrder() > node.getOrder(); + return orderOK && sameSide; + }); - if (yOffset < 0) { - siblings.reverse(); - } + if (yOffset < 0) { + siblings.reverse(); + } - return siblings; - }, + return siblings; + } - /** + /** * @param node * @param yOffset * @return branches of the root node on the same side as the given node's, in the given * vertical direction */ - getBranchesInVerticalDirection(node, yOffset) { - // direct descendants of the root that do not contain the node and are on the same side - // and on the direction of the offset - const rootNode = this.getRootNode(node); - const branches = this.getChildren(rootNode).filter(((child) => { - return this._find(node.getId(), child); - }).bind(this)); + getBranchesInVerticalDirection(node, yOffset) { + // direct descendants of the root that do not contain the node and are on the same side + // and on the direction of the offset + const rootNode = this.getRootNode(node); + const branches = this.getChildren(rootNode).filter(((child) => { + return this._find(node.getId(), child); + }).bind(this)); - const branch = branches[0]; - const rootDescendants = this.getSiblings(branch).filter((sibling) => { - const sameSide = node.getPosition().x > rootNode.getPosition().x - ? sibling.getPosition().x > rootNode.getPosition().x - : sibling.getPosition().x < rootNode.getPosition().x; - const sameDirection = yOffset < 0 - ? sibling.getOrder() < branch.getOrder() - : sibling.getOrder() > branch.getOrder(); - return sameSide && sameDirection; - }, this); + const branch = branches[0]; + const rootDescendants = this.getSiblings(branch).filter((sibling) => { + const sameSide = node.getPosition().x > rootNode.getPosition().x + ? sibling.getPosition().x > rootNode.getPosition().x + : sibling.getPosition().x < rootNode.getPosition().x; + const sameDirection = yOffset < 0 + ? sibling.getOrder() < branch.getOrder() + : sibling.getOrder() > branch.getOrder(); + return sameSide && sameDirection; + }, this); - return rootDescendants; - }, - }, -); + return rootDescendants; + } +} export default RootedTreeSet; diff --git a/packages/mindplot/src/components/layout/SymmetricSorter.js b/packages/mindplot/src/components/layout/SymmetricSorter.js index 52d6e829..221bfa58 100644 --- a/packages/mindplot/src/components/layout/SymmetricSorter.js +++ b/packages/mindplot/src/components/layout/SymmetricSorter.js @@ -18,17 +18,10 @@ import { $assert, $defined } from '@wisemapping/core-js'; import AbstractBasicSorter from './AbstractBasicSorter'; +class SymmetricSorter extends AbstractBasicSorter { + /** @lends SymmetricSorter */ -const SymmetricSorter = new Class( - /** @lends SymmetricSorter */ { - Extends: AbstractBasicSorter, - /** - * @constructs - * @extends mindplot.layout.AbstractBasicSorter - */ - initialize() {}, - - /** + /** * Predict the order and position of a dragged node. * * @param graph The tree set @@ -38,184 +31,184 @@ const SymmetricSorter = new Class( * @param free Free drag or not * @return {*} */ - predict(graph, parent, node, position, free) { - const self = this; - const rootNode = graph.getRootNode(parent); + predict(graph, parent, node, position, free) { + const self = this; + const rootNode = graph.getRootNode(parent); - // If its a free node... - if (free) { - $assert( - $defined(position), - 'position cannot be null for predict in free positioning', - ); - $assert($defined(node), 'node cannot be null for predict in free positioning'); + // If its a free node... + if (free) { + $assert( + $defined(position), + 'position cannot be null for predict in free positioning', + ); + $assert($defined(node), 'node cannot be null for predict in free positioning'); - const direction = this._getRelativeDirection( - rootNode.getPosition(), - parent.getPosition(), - ); - const limitXPos = parent.getPosition().x + const direction = this._getRelativeDirection( + rootNode.getPosition(), + parent.getPosition(), + ); + const limitXPos = parent.getPosition().x + direction * (parent.getSize().width / 2 + node.getSize().width / 2 + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING); - const xPos = direction > 0 - ? position.x >= limitXPos - ? position.x - : limitXPos - : position.x <= limitXPos - ? position.x - : limitXPos; + const xPos = direction > 0 + ? position.x >= limitXPos + ? position.x + : limitXPos + : position.x <= limitXPos + ? position.x + : limitXPos; - return [0, { x: xPos, y: position.y }]; - } + return [0, { x: xPos, y: position.y }]; + } - // Its not a dragged node (it is being added) - if (!node) { - const parentDirection = self._getRelativeDirection( - rootNode.getPosition(), - parent.getPosition(), - ); + // Its not a dragged node (it is being added) + if (!node) { + const parentDirection = self._getRelativeDirection( + rootNode.getPosition(), + parent.getPosition(), + ); - var position = { - x: + var position = { + x: parent.getPosition().x + parentDirection * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING), - y: parent.getPosition().y, - }; - return [graph.getChildren(parent).length, position]; - } + y: parent.getPosition().y, + }; + return [graph.getChildren(parent).length, position]; + } - // If it is a dragged node... - $assert($defined(position), 'position cannot be null for predict in dragging'); - const nodeDirection = this._getRelativeDirection( - rootNode.getPosition(), - node.getPosition(), - ); - const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position); - const siblings = graph.getSiblings(node); + // If it is a dragged node... + $assert($defined(position), 'position cannot be null for predict in dragging'); + const nodeDirection = this._getRelativeDirection( + rootNode.getPosition(), + node.getPosition(), + ); + const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position); + const siblings = graph.getSiblings(node); - // node has no siblings and its trying to reconnect to its own parent - const sameParent = parent == graph.getParent(node); - if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) { - return [node.getOrder(), node.getPosition()]; - } + // node has no siblings and its trying to reconnect to its own parent + const sameParent = parent == graph.getParent(node); + if (siblings.length == 0 && nodeDirection == positionDirection && sameParent) { + return [node.getOrder(), node.getPosition()]; + } - const parentChildren = graph.getChildren(parent); + const parentChildren = graph.getChildren(parent); - if (parentChildren.length == 0) { - // Fit as a child of the parent node... - var position = { - x: + if (parentChildren.length == 0) { + // Fit as a child of the parent node... + var position = { + x: parent.getPosition().x + positionDirection * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING), - y: parent.getPosition().y, - }; - return [0, position]; - } - // Try to fit within ... - const result = null; - const last = parentChildren.getLast(); - for (let i = 0; i < parentChildren.length; i++) { - const parentChild = parentChildren[i]; - const nodeAfter = i + 1 == parentChild.length ? null : parentChildren[i + 1]; + y: parent.getPosition().y, + }; + return [0, position]; + } + // Try to fit within ... + const result = null; + const last = parentChildren.getLast(); + for (let i = 0; i < parentChildren.length; i++) { + const parentChild = parentChildren[i]; + const nodeAfter = i + 1 == parentChild.length ? null : parentChildren[i + 1]; - // Fit at the bottom - if (!nodeAfter && position.y > parentChild.getPosition().y) { - var order = graph.getParent(node) && graph.getParent(node).getId() == parent.getId() - ? last.getOrder() - : last.getOrder() + 1; - var position = { - x: parentChild.getPosition().x, - y: + // Fit at the bottom + if (!nodeAfter && position.y > parentChild.getPosition().y) { + var order = graph.getParent(node) && graph.getParent(node).getId() == parent.getId() + ? last.getOrder() + : last.getOrder() + 1; + var position = { + x: parentChild.getPosition().x, + y: parentChild.getPosition().y + parentChild.getSize().height + SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2, - }; - return [order, position]; - } - - // Fit after this node - if ( - nodeAfter - && position.y > parentChild.getPosition().y - && position.y < nodeAfter.getPosition().y - ) { - if ( - nodeAfter.getId() == node.getId() - || parentChild.getId() == node.getId() - ) { - return [node.getOrder(), node.getPosition()]; - } - var order = position.y > node.getPosition().y - ? nodeAfter.getOrder() - 1 - : parentChild.getOrder() + 1; - var position = { - x: parentChild.getPosition().x, - y: - parentChild.getPosition().y - + (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2, - }; - return [order, position]; - } + }; + return [order, position]; } - // Position wasn't below any node, so it must be fitted above the first - const first = parentChildren[0]; - var position = { - x: first.getPosition().x, - y: + // Fit after this node + if ( + nodeAfter + && position.y > parentChild.getPosition().y + && position.y < nodeAfter.getPosition().y + ) { + if ( + nodeAfter.getId() == node.getId() + || parentChild.getId() == node.getId() + ) { + return [node.getOrder(), node.getPosition()]; + } + var order = position.y > node.getPosition().y + ? nodeAfter.getOrder() - 1 + : parentChild.getOrder() + 1; + var position = { + x: parentChild.getPosition().x, + y: + parentChild.getPosition().y + + (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2, + }; + return [order, position]; + } + } + + // Position wasn't below any node, so it must be fitted above the first + const first = parentChildren[0]; + var position = { + x: first.getPosition().x, + y: first.getPosition().y - first.getSize().height - SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2, - }; - return [0, position]; - }, + }; + return [0, position]; + } - /** + /** * @param treeSet * @param parent * @param child * @param order * @throws will throw an error if the order is not strictly continuous */ - insert(treeSet, parent, child, order) { - const children = this._getSortedChildren(treeSet, parent); - $assert( - order <= children.length, - `Order must be continues and can not have holes. Order:${order}`, - ); + insert(treeSet, parent, child, order) { + const children = this._getSortedChildren(treeSet, parent); + $assert( + order <= children.length, + `Order must be continues and can not have holes. Order:${order}`, + ); - // Shift all the elements in one . - for (let i = order; i < children.length; i++) { - const node = children[i]; - node.setOrder(i + 1); - } - child.setOrder(order); - }, + // Shift all the elements in one . + for (let i = order; i < children.length; i++) { + const node = children[i]; + node.setOrder(i + 1); + } + child.setOrder(order); + } - /** + /** * @param treeSet * @param node * @throws will throw an error if the node is in the wrong position */ - detach(treeSet, node) { - const parent = treeSet.getParent(node); - const children = this._getSortedChildren(treeSet, parent); - const order = node.getOrder(); - $assert(children[order] === node, 'Node seems not to be in the right position'); + detach(treeSet, node) { + const parent = treeSet.getParent(node); + const children = this._getSortedChildren(treeSet, parent); + const order = node.getOrder(); + $assert(children[order] === node, 'Node seems not to be in the right position'); - // Shift all the nodes ... - for (let i = node.getOrder() + 1; i < children.length; i++) { - const child = children[i]; - child.setOrder(child.getOrder() - 1); - } - node.setOrder(0); - }, + // Shift all the nodes ... + for (let i = node.getOrder() + 1; i < children.length; i++) { + const child = children[i]; + child.setOrder(child.getOrder() - 1); + } + node.setOrder(0); + } - /** + /** * @param treeSet * @param node * @throws will throw an error if treeSet is null or undefined @@ -226,100 +219,99 @@ const SymmetricSorter = new Class( * value, is null or undefined * @return offsets */ - computeOffsets(treeSet, node) { - $assert(treeSet, 'treeSet can no be null.'); - $assert(node, 'node can no be null.'); + computeOffsets(treeSet, node) { + $assert(treeSet, 'treeSet can no be null.'); + $assert(node, 'node can no be null.'); - const children = this._getSortedChildren(treeSet, node); + const children = this._getSortedChildren(treeSet, node); - // Compute heights ... - const heights = children - .map(function (child) { - return { - id: child.getId(), - order: child.getOrder(), - position: child.getPosition(), - width: child.getSize().width, - height: this._computeChildrenHeight(treeSet, child), - }; - }, this) - .reverse(); + // Compute heights ... + const heights = children + .map(function (child) { + return { + id: child.getId(), + order: child.getOrder(), + position: child.getPosition(), + width: child.getSize().width, + height: this._computeChildrenHeight(treeSet, child), + }; + }, this) + .reverse(); - // Compute the center of the branch ... - let totalHeight = 0; - heights.forEach((elem) => { - totalHeight += elem.height; - }); - let ysum = totalHeight / 2; + // Compute the center of the branch ... + let totalHeight = 0; + heights.forEach((elem) => { + totalHeight += elem.height; + }); + let ysum = totalHeight / 2; - // Calculate the offsets ... - const result = {}; - for (let i = 0; i < heights.length; i++) { - ysum -= heights[i].height; - const childNode = treeSet.find(heights[i].id); - const direction = this.getChildDirection(treeSet, childNode); + // Calculate the offsets ... + const result = {}; + for (let i = 0; i < heights.length; i++) { + ysum -= heights[i].height; + const childNode = treeSet.find(heights[i].id); + const direction = this.getChildDirection(treeSet, childNode); - const yOffset = ysum + heights[i].height / 2; - const xOffset = direction + const yOffset = ysum + heights[i].height / 2; + const xOffset = direction * (heights[i].width / 2 + node.getSize().width / 2 + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING); - $assert(!isNaN(xOffset), 'xOffset can not be null'); - $assert(!isNaN(yOffset), 'yOffset can not be null'); + $assert(!Number.isNaN(xOffset), 'xOffset can not be null'); + $assert(!Number.isNaN(yOffset), 'yOffset can not be null'); - result[heights[i].id] = { x: xOffset, y: yOffset }; - } - return result; - }, + result[heights[i].id] = { x: xOffset, y: yOffset }; + } + return result; + } - /** + /** * @param treeSet * @param node * @throws will throw an error if order elements are missing */ - verify(treeSet, node) { - // Check that all is consistent ... - const children = this._getSortedChildren(treeSet, node); + verify(treeSet, node) { + // Check that all is consistent ... + const children = this._getSortedChildren(treeSet, node); - for (let i = 0; i < children.length; i++) { - $assert(children[i].getOrder() == i, 'missing order elements'); - } - }, + for (let i = 0; i < children.length; i++) { + $assert(children[i].getOrder() == i, 'missing order elements'); + } + } - /** + /** * @param treeSet * @param child * @return direction of the given child from its parent or from the root node, if isolated */ - getChildDirection(treeSet, child) { - $assert(treeSet, 'treeSet can no be null.'); - $assert(treeSet.getParent(child), 'This should not happen'); + getChildDirection(treeSet, child) { + $assert(treeSet, 'treeSet can no be null.'); + $assert(treeSet.getParent(child), 'This should not happen'); - let result; - const rootNode = treeSet.getRootNode(child); - if (treeSet.getParent(child) == rootNode) { - // This is the case of a isolated child ... In this case, the directions is based on the root. - result = Math.sign(rootNode.getPosition().x); - } else { - // if this is not the case, honor the direction of the parent ... - const parent = treeSet.getParent(child); - const grandParent = treeSet.getParent(parent); - const sorter = grandParent.getSorter(); - result = sorter.getChildDirection(treeSet, parent); - } - return result; - }, + let result; + const rootNode = treeSet.getRootNode(child); + if (treeSet.getParent(child) == rootNode) { + // This is the case of a isolated child ... In this case, the directions is based on the root. + result = Math.sign(rootNode.getPosition().x); + } else { + // if this is not the case, honor the direction of the parent ... + const parent = treeSet.getParent(child); + const grandParent = treeSet.getParent(parent); + const sorter = grandParent.getSorter(); + result = sorter.getChildDirection(treeSet, parent); + } + return result; + } - /** @return {String} the print name of this class */ - toString() { - return 'Symmetric Sorter'; - }, + /** @return {String} the print name of this class */ + toString() { + return 'Symmetric Sorter'; + } - _getVerticalPadding() { - return SymmetricSorter.INTERNODE_VERTICAL_PADDING; - }, - }, -); + _getVerticalPadding() { + return SymmetricSorter.INTERNODE_VERTICAL_PADDING; + } +} /** * @constant diff --git a/packages/mindplot/src/components/util/FadeEffect.js b/packages/mindplot/src/components/util/FadeEffect.js index d5fc642e..b0e5d930 100644 --- a/packages/mindplot/src/components/util/FadeEffect.js +++ b/packages/mindplot/src/components/util/FadeEffect.js @@ -19,8 +19,7 @@ // FIXME: this Class should be reimplemented import Events from '../Events'; -const FadeEffect = new Class(/** @lends FadeEffect */{ - Extends: Events, +class FadeEffect extends Events {/** @lends FadeEffect */ /** * @extends mindplot.Events * @constructs @@ -30,7 +29,7 @@ const FadeEffect = new Class(/** @lends FadeEffect */{ initialize(elements, isVisible) { this._isVisible = isVisible; this._element = elements; - }, + } /** */ start() { @@ -42,7 +41,7 @@ const FadeEffect = new Class(/** @lends FadeEffect */{ }); this._isVisible = !visible; this.fireEvent('complete'); - }, -}); + } +} export default FadeEffect; diff --git a/packages/mindplot/src/components/widget/ColorPalettePanel.js b/packages/mindplot/src/components/widget/ColorPalettePanel.js index 0aa99c59..1eed0f47 100644 --- a/packages/mindplot/src/components/widget/ColorPalettePanel.js +++ b/packages/mindplot/src/components/widget/ColorPalettePanel.js @@ -65,7 +65,7 @@ class ColorPalettePanel extends ToolbarPaneItem { const colorCells = content.find('div[class=palette-colorswatch]'); const model = this.getModel(); const me = this; - colorCells.each((elem) => { + colorCells.each((index, elem) => { $(elem).on('click', () => { const color = $(elem).css('background-color'); model.setValue(color); diff --git a/packages/mindplot/src/components/widget/LinkEditor.js b/packages/mindplot/src/components/widget/LinkEditor.js index 0459787e..c155cf76 100644 --- a/packages/mindplot/src/components/widget/LinkEditor.js +++ b/packages/mindplot/src/components/widget/LinkEditor.js @@ -17,30 +17,28 @@ */ import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog'; -const LinkEditor = new Class(/** @lends LinkEditor */{ - Extends: BootstrapDialog, - +class LinkEditor extends BootstrapDialog {/** @lends LinkEditor */ /** * @constructs * @param model * @throws will throw an error if model is null or undefined * @extends BootstrapDialog */ - initialize(model) { + constructor(model) { $assert(model, 'model can not be null'); - this._model = model; - this.parent($msg('LINK'), { + super($msg('LINK'), { cancelButton: true, closeButton: true, acceptButton: true, removeButton: typeof model.getValue() !== 'undefined', errorMessage: true, - onEventData: { model: this._model }, + onEventData: { model }, }); + this._model = model; this.css({ margin: '150px auto' }); const panel = this._buildPanel(model); this.setContent(panel); - }, + } _buildPanel(model) { const result = $('
').css('padding-top', '5px'); @@ -109,7 +107,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{ result.append(this.form); return result; - }, + } /** * checks whether the input is a valid url @@ -118,7 +116,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{ checkURL(url) { const regex = /^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i; return (regex.test(url)); - }, + } /** * overrides abstract parent method @@ -131,7 +129,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{ if (!this.formSubmitted) { event.stopPropagation(); } - }, + } /** * overrides parent method @@ -139,7 +137,7 @@ const LinkEditor = new Class(/** @lends LinkEditor */{ */ onDialogShown() { $(this).find('#inputUrl').focus(); - }, + } /** * overrides abstract parent method @@ -148,8 +146,8 @@ const LinkEditor = new Class(/** @lends LinkEditor */{ onRemoveClick(event) { event.data.model.setValue(null); event.data.dialog.close(); - }, + } -}); +} export default LinkEditor; diff --git a/packages/mindplot/test/playground/layout/BalancedTestSuite.js b/packages/mindplot/test/playground/layout/BalancedTestSuite.js index a5fff029..06d73814 100644 --- a/packages/mindplot/test/playground/layout/BalancedTestSuite.js +++ b/packages/mindplot/test/playground/layout/BalancedTestSuite.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* * Copyright [2015] [wisemapping] * @@ -15,19 +16,18 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import $ from 'jquery'; +import { $assert } from '@wisemapping/core-js'; import TestSuite from './TestSuite'; import LayoutManager from '../../../src/components/layout/LayoutManager'; - -const BalancedTestSuite = new Class({ - Extends: TestSuite, - - initialize() { +class BalancedTestSuite extends TestSuite { + constructor() { $('#balancedTest').css('display', 'block'); - + super(); this.testBalanced(); this.testBalancedPredict(); this.testBalancedNodeDragPredict(); - }, + } testBalanced() { console.log('testBalanced:'); @@ -176,7 +176,7 @@ const BalancedTestSuite = new Class({ ); console.log('OK!\n\n'); - }, + } testBalancedPredict() { console.log('testBalancedPredict:'); @@ -335,7 +335,7 @@ const BalancedTestSuite = new Class({ $assert(prediction5a.order == prediction5b.order, 'Both predictions should be the same'); console.log('OK!\n\n'); - }, + } testBalancedNodeDragPredict() { console.log('testBalancedNodeDragPredict:'); @@ -493,7 +493,7 @@ const BalancedTestSuite = new Class({ ); console.log('OK!\n\n'); - }, -}); + } +} export default BalancedTestSuite; diff --git a/packages/mindplot/test/playground/layout/FreeTestSuite.js b/packages/mindplot/test/playground/layout/FreeTestSuite.js index 2f048f8f..13a9d330 100644 --- a/packages/mindplot/test/playground/layout/FreeTestSuite.js +++ b/packages/mindplot/test/playground/layout/FreeTestSuite.js @@ -15,6 +15,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import $ from 'jquery'; +import { $assert } from '@wisemapping/core-js'; import TestSuite from './TestSuite'; import LayoutManager from '../../../src/components/layout/LayoutManager'; import OriginalLayout from '../../../src/components/layout/OriginalLayout'; diff --git a/packages/mindplot/test/playground/layout/SymmetricTestSuite.js b/packages/mindplot/test/playground/layout/SymmetricTestSuite.js index c602c12b..d8331cf5 100644 --- a/packages/mindplot/test/playground/layout/SymmetricTestSuite.js +++ b/packages/mindplot/test/playground/layout/SymmetricTestSuite.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* * Copyright [2015] [wisemapping] * @@ -15,19 +16,20 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import $ from 'jquery'; +import { $assert } from '@wisemapping/core-js'; import TestSuite from './TestSuite'; import LayoutManager from '../../../src/components/layout/LayoutManager'; -const SymmetricTestSuite = new Class({ - Extends: TestSuite, - - initialize() { +class SymmetricTestSuite extends TestSuite { + constructor() { $('#symmetricTest').css('display', 'block'); + super(); this.testSymmetry(); this.testSymmetricPredict(); this.testSymmetricDragPredict(); - }, + } testSymmetry() { console.log('testSymmetry:'); @@ -92,7 +94,7 @@ const SymmetricTestSuite = new Class({ ); console.log('OK!\n\n'); - }, + } testSymmetricPredict() { console.log('testSymmetricPredict:'); @@ -276,7 +278,7 @@ const SymmetricTestSuite = new Class({ $assert(prediction5d.order == 0, 'Prediction order should be 0'); console.log('OK!\n\n'); - }, + } testSymmetricDragPredict() { console.log('testSymmetricDragPredict:'); @@ -345,7 +347,7 @@ const SymmetricTestSuite = new Class({ ); console.log('OK!\n\n'); - }, -}); + } +} export default SymmetricTestSuite; diff --git a/packages/mindplot/test/playground/layout/TestSuite.js b/packages/mindplot/test/playground/layout/TestSuite.js index ce157ab4..7a2bfb2d 100644 --- a/packages/mindplot/test/playground/layout/TestSuite.js +++ b/packages/mindplot/test/playground/layout/TestSuite.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ /* * Copyright [2015] [wisemapping] * @@ -15,12 +16,13 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import $ from 'jquery'; +import { $assert } from '@wisemapping/core-js'; import LayoutManager from '../../../src/components/layout/LayoutManager'; - -const TestSuite = new Class({ - Extends: ChildrenSorterStrategy, - - initialize() { +import ChildrenSorterStrategy from '../../../src/components/layout/ChildrenSorterStrategy'; +class TestSuite extends ChildrenSorterStrategy { + constructor() { + super(); $('#basicTest').css('display', 'block'); // this.testAligned(); this.testBaselineAligned1(); @@ -32,7 +34,7 @@ const TestSuite = new Class({ this.testRemoveNode(); this.testSize(); this.testReconnectSingleNode(); - }, + } testAligned() { console.log('testAligned:'); @@ -79,7 +81,7 @@ const TestSuite = new Class({ ); console.log('OK!\n\n'); - }, + } testBaselineAligned1() { console.log('testBaselineAligned1:'); @@ -125,7 +127,7 @@ const TestSuite = new Class({ // manager.plot("testBaselineAligned1", {width:1600,height:800}); console.log('OK!\n\n'); - }, + } testBaselineAligned2() { console.log('testBaselineAligned2:'); @@ -143,7 +145,7 @@ const TestSuite = new Class({ manager.plot('testBaselineAligned2', { width: 1600, height: 800 }); console.log('OK!\n\n'); - }, + } testEvents() { console.log('testEvents:'); @@ -181,7 +183,7 @@ const TestSuite = new Class({ $assert(events.length == 0, 'Unnecessary tree updated.'); console.log('OK!\n\n'); - }, + } testEventsComplex() { console.log('testEventsComplex:'); @@ -229,7 +231,7 @@ const TestSuite = new Class({ $assert(events.length == 4, 'Only 4 nodes should be repositioned.'); console.log('OK!\n\n'); - }, + } testDisconnect() { console.log('testDisconnect:'); @@ -290,7 +292,7 @@ const TestSuite = new Class({ ); console.log('OK!\n\n'); - }, + } testReconnect() { console.log('testReconnect:'); @@ -352,7 +354,7 @@ const TestSuite = new Class({ ); console.log('OK!\n\n'); - }, + } testRemoveNode() { console.log('testRemoveNode:'); @@ -422,7 +424,7 @@ const TestSuite = new Class({ $assert(manager.find(9).getOrder() == 3, 'Node 9 should have order 3'); console.log('OK!\n\n'); - }, + } testSize() { console.log('testSize:'); @@ -519,7 +521,7 @@ const TestSuite = new Class({ ); console.log('OK!\n\n'); - }, + } testReconnectSingleNode() { console.log('testReconnectSingleNode:'); @@ -552,7 +554,7 @@ const TestSuite = new Class({ 'Node 1 should now be to the left of the root node', ); $assert(manager.find(1).getOrder() == 1, 'Node 1 should now have order 0'); - }, + } _plotPrediction(canvas, prediction) { if (!canvas) { @@ -570,10 +572,10 @@ const TestSuite = new Class({ const cx = position.x + canvas.width / 2 - TestSuite.NODE_SIZE.width / 2; const cy = position.y + canvas.height / 2 - TestSuite.NODE_SIZE.height / 2; canvas.rect(cx, cy, TestSuite.NODE_SIZE.width, TestSuite.NODE_SIZE.height); - }, -}); + } +} -(TestSuite.NODE_SIZE = { width: 80, height: 30 }), - (TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 }); +TestSuite.NODE_SIZE = { width: 80, height: 30 }; +TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 }; export default TestSuite; diff --git a/packages/mindplot/test/playground/layout/context-loader.js b/packages/mindplot/test/playground/layout/context-loader.js index 8438ea8a..0ee10b7f 100644 --- a/packages/mindplot/test/playground/layout/context-loader.js +++ b/packages/mindplot/test/playground/layout/context-loader.js @@ -4,6 +4,7 @@ import SymmetricTestSuite from './SymmetricTestSuite'; import FreeTestSuite from './FreeTestSuite'; import Raphael from './lib/raphael-min'; import { drawGrid } from './lib/raphael-plugins'; +import '../../../src'; // TODO: remove this when removing mootools (hack used to load it as a side effect) global.Raphael = Raphael; global.Raphael.fn.drawGrid = drawGrid; diff --git a/packages/mindplot/test/playground/map-render/html/container.json b/packages/mindplot/test/playground/map-render/html/container.json index 950d6485..fdcf6105 100644 --- a/packages/mindplot/test/playground/map-render/html/container.json +++ b/packages/mindplot/test/playground/map-render/html/container.json @@ -12,5 +12,6 @@ }, "persistenceManager": "mindplot.LocalStorageManager", "mapId": "welcome", - "container":"mindplot" + "container":"mindplot", + "locale": "en" } \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html index b3f46b04..32f32d07 100644 --- a/packages/mindplot/test/playground/map-render/html/editor.html +++ b/packages/mindplot/test/playground/map-render/html/editor.html @@ -1,122 +1,115 @@ + WiseMapping - Editor - - - - - - - - - + + - - -