vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-24 15:37:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Format JS files.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-07-12 18:58:11 -07:00
parent cf29f4f953
commit 5ee7448d3c
70 changed files with 7930 additions and 1420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

553
libraries/bootstrap/js/bootstrap.js vendored
View File

File diff suppressed because it is too large Load Diff

1213
libraries/bootstrap/js/bootstrap.min.js vendored
View File

File diff suppressed because one or more lines are too long

237
libraries/jquery.hotkeys.js
View File

@ -8,105 +8,186 @@
* *
* Original idea by: * Original idea by:
* Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/ * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
*/ */
/* /*
* One small change is: now keys are passed by object { keys: '...' } * One small change is: now keys are passed by object { keys: '...' }
* Might be useful, when you want to pass some other data to your handler * Might be useful, when you want to pass some other data to your handler
*/ */
function initHotKeyPluggin(jQuery){ function initHotKeyPluggin(jQuery) {
jQuery.hotkeys = {
version: '0.8',
jQuery.hotkeys = { specialKeys: {
version: "0.8", 8: 'backspace',
9: 'tab',
10: 'return',
13: 'enter',
16: 'shift',
17: 'ctrl',
18: 'alt',
19: 'pause',
20: 'capslock',
27: 'esc',
32: 'space',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
45: 'insert',
46: 'del',
96: '0',
97: '1',
98: '2',
99: '3',
100: '4',
101: '5',
102: '6',
103: '7',
104: '8',
105: '9',
106: '*',
107: '+',
109: '-',
110: '.',
111: '/',
112: 'f1',
113: 'f2',
114: 'f3',
115: 'f4',
116: 'f5',
117: 'f6',
118: 'f7',
119: 'f8',
120: 'f9',
121: 'f10',
122: 'f11',
123: 'f12',
144: 'numlock',
145: 'scroll',
186: ';',
191: '/',
220: '\\',
222: "'",
224: 'meta',
},
specialKeys: { shiftNums: {
8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause", '`': '~',
20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home", 1: '!',
37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del", 2: '@',
96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7", 3: '#',
104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/", 4: '$',
112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8", 5: '%',
120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/", 6: '^',
220: "\\", 222: "'", 224: "meta" 7: '&',
}, 8: '*',
9: '(',
0: ')',
'-': '_',
'=': '+',
';': ': ',
"'": '"',
',': '<',
'.': '>',
'/': '?',
'\\': '|',
},
};
shiftNums: { function keyHandler(handleObj) {
"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&", if (typeof handleObj.data === 'string') {
"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<", handleObj.data = { keys: handleObj.data };
".": ">", "/": "?", "\\": "|" }
}
};
function keyHandler( handleObj ) { // Only care when a possible input has been specified
if ( typeof handleObj.data === "string" ) { if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== 'string') {
handleObj.data = { keys: handleObj.data }; return;
} }
// Only care when a possible input has been specified var origHandler = handleObj.handler,
if ( !handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string" ) { keys = handleObj.data.keys.toLowerCase().split(' '),
return; textAcceptingInputTypes = [
} 'text',
'password',
'number',
'email',
'url',
'range',
'date',
'month',
'week',
'time',
'datetime',
'datetime-local',
'search',
'color',
'tel',
];
var origHandler = handleObj.handler, handleObj.handler = function (event) {
keys = handleObj.data.keys.toLowerCase().split(" "), // Don't fire in text-accepting inputs that we didn't directly bind to
textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color", "tel"]; if (
this !== event.target &&
(/textarea|select/i.test(event.target.nodeName) ||
jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1)
) {
return;
}
handleObj.handler = function( event ) { var special = jQuery.hotkeys.specialKeys[event.keyCode],
// Don't fire in text-accepting inputs that we didn't directly bind to character = String.fromCharCode(event.which).toLowerCase(),
if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) || modif = '',
jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) { possible = {};
return;
}
var special = jQuery.hotkeys.specialKeys[ event.keyCode ], // check combinations (alt|ctrl|shift+anything)
character = String.fromCharCode( event.which ).toLowerCase(), if (event.altKey && special !== 'alt') {
modif = "", possible = {}; modif += 'alt+';
}
// check combinations (alt|ctrl|shift+anything) if (event.ctrlKey && special !== 'ctrl') {
if ( event.altKey && special !== "alt" ) { modif += 'ctrl+';
modif += "alt+"; }
}
if ( event.ctrlKey && special !== "ctrl" ) { // TODO: Need to make sure this works consistently across platforms
modif += "ctrl+"; if (event.metaKey && !event.ctrlKey && special !== 'meta') {
} modif += 'meta+';
}
// TODO: Need to make sure this works consistently across platforms if (event.shiftKey && special !== 'shift') {
if ( event.metaKey && !event.ctrlKey && special !== "meta" ) { modif += 'shift+';
modif += "meta+"; }
}
if ( event.shiftKey && special !== "shift" ) { if (special) {
modif += "shift+"; possible[modif + special] = true;
} }
if ( special ) { if (character) {
possible[ modif + special ] = true; possible[modif + character] = true;
} possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
if ( character ) { // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
possible[ modif + character ] = true; if (modif === 'shift+') {
possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true; possible[jQuery.hotkeys.shiftNums[character]] = true;
}
}
// "$" can be triggered as "Shift+4" or "Shift+$" or just "$" for (var i = 0, l = keys.length; i < l; i++) {
if ( modif === "shift+" ) { if (possible[keys[i]]) {
possible[ jQuery.hotkeys.shiftNums[ character ] ] = true; return origHandler.apply(this, arguments);
} }
} }
};
}
for ( var i = 0, l = keys.length; i < l; i++ ) { jQuery.each(['keydown', 'keyup', 'keypress'], function () {
if ( possible[ keys[i] ] ) { jQuery.event.special[this] = { add: keyHandler };
return origHandler.apply( this, arguments ); });
} }
}
};
}
jQuery.each([ "keydown", "keyup", "keypress" ], function() {
jQuery.event.special[ this ] = { add: keyHandler };
});
};
export default initHotKeyPluggin; export default initHotKeyPluggin;

2
packages/core-js/__tests__/core.test.js
View File

@ -3,5 +3,5 @@
import coreJs from '..'; import coreJs from '..';
describe('core-js', () => { describe('core-js', () => {
it('needs tests'); it('needs tests');
}); });

90
packages/core-js/src/index.js
View File

@ -20,22 +20,22 @@
* Cross-browser implementation of creating an XML document object. * Cross-browser implementation of creating an XML document object.
*/ */
export const createDocument = function () { export const createDocument = function () {
var doc = null; var doc = null;
if ($defined(window.ActiveXObject)) { if ($defined(window.ActiveXObject)) {
//http://blogs.msdn.com/b/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx //http://blogs.msdn.com/b/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
var progIDs = ['Msxml2.DOMDocument.6.0', 'Msxml2.DOMDocument.3.0']; var progIDs = ['Msxml2.DOMDocument.6.0', 'Msxml2.DOMDocument.3.0'];
for (var i = 0; i < progIDs.length; i++) { for (var i = 0; i < progIDs.length; i++) {
try { try {
doc = new ActiveXObject(progIDs[i]); doc = new ActiveXObject(progIDs[i]);
break; break;
} catch (ex) {} } catch (ex) {}
}
} else if (window.document.implementation && window.document.implementation.createDocument) {
doc = window.document.implementation.createDocument('', '', null);
} }
$assert(doc, 'Parser could not be instantiated'); } else if (window.document.implementation && window.document.implementation.createDocument) {
doc = window.document.implementation.createDocument('', '', null);
}
$assert(doc, 'Parser could not be instantiated');
return doc; return doc;
}; };
/* /*
@ -47,47 +47,47 @@ export const createDocument = function () {
*/ */
export const $defined = function (obj) { export const $defined = function (obj) {
return obj != undefined; return obj != undefined;
}; };
export const $assert = function (assert, message) { export const $assert = function (assert, message) {
if (!$defined(assert) || !assert) { if (!$defined(assert) || !assert) {
logStackTrace(); logStackTrace();
console.log(message); console.log(message);
throw new Error(message); throw new Error(message);
} }
}; };
export const sign = function (value) { export const sign = function (value) {
return value >= 0 ? 1 : -1; return value >= 0 ? 1 : -1;
}; };
export function logStackTrace(exception) { export function logStackTrace(exception) {
if (!$defined(exception)) { if (!$defined(exception)) {
try { try {
throw Error('Unexpected Exception'); throw Error('Unexpected Exception');
} catch (e) { } catch (e) {
exception = e; exception = e;
}
} }
var result = ''; }
if (exception.stack) { var result = '';
//Firefox and Chrome... if (exception.stack) {
result = exception.stack; //Firefox and Chrome...
} else if (window.opera && exception.message) { result = exception.stack;
//Opera } else if (window.opera && exception.message) {
result = exception.message; //Opera
} else { result = exception.message;
//IE and Safari } else {
result = exception.sourceURL + ': ' + exception.line + '\n\n'; //IE and Safari
result = exception.sourceURL + ': ' + exception.line + '\n\n';
var currentFunction = arguments.callee.caller; var currentFunction = arguments.callee.caller;
while (currentFunction) { while (currentFunction) {
var fn = currentFunction.toString(); var fn = currentFunction.toString();
result = result + '\n' + fn; result = result + '\n' + fn;
currentFunction = currentFunction.caller; currentFunction = currentFunction.caller;
}
} }
window.errorStack = result; }
return result; window.errorStack = result;
return result;
} }

58
packages/core-js/webpack.common.js
View File

@ -2,34 +2,34 @@ const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { module.exports = {
output: { output: {
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
filename: 'core.js', filename: 'core.js',
publicPath: '', publicPath: '',
library: { library: {
type: 'umd', type: 'umd',
}
}, },
target: 'web', },
optimization: { target: 'web',
usedExports: true, optimization: {
}, usedExports: true,
module: { },
rules: [ module: {
{ rules: [
use: 'babel-loader', {
test: /.js$/, use: 'babel-loader',
exclude: [ test: /.js$/,
/node_modules/, exclude: [/node_modules/],
] },
}, ],
], },
}, resolve: {
resolve: { extensions: ['.js'],
extensions: ['.js'], },
}, plugins: [
plugins: [new CleanWebpackPlugin({ new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true, dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false, dry: false,
})], }),
],
}; };

6
packages/core-js/webpack.dev.js
View File

@ -3,9 +3,9 @@ const { merge } = require('webpack-merge');
const common = require('./webpack.common'); const common = require('./webpack.common');
const devConfig = { const devConfig = {
mode: 'development', mode: 'development',
plugins: [new HotModuleReplacementPlugin()], plugins: [new HotModuleReplacementPlugin()],
devtool: 'eval-source-map' devtool: 'eval-source-map',
}; };
module.exports = merge(common, devConfig); module.exports = merge(common, devConfig);

12
packages/core-js/webpack.prod.js
View File

@ -2,13 +2,13 @@ const { merge } = require('webpack-merge');
const common = require('./webpack.common'); const common = require('./webpack.common');
const prodConfig = { const prodConfig = {
mode: 'production', mode: 'production',
devtool: 'source-map', devtool: 'source-map',
optimization: { optimization: {
splitChunks: { splitChunks: {
chunks: 'all', chunks: 'all',
},
}, },
},
}; };
module.exports = merge(common, prodConfig); module.exports = merge(common, prodConfig);

17
packages/editor/cypress/integration/playground.test.js
View File

@ -1,6 +1,17 @@
context('Playground', () => { context('Playground', () => {
it('viewmode page should match its snapshot', () => { it('viewmode page should match its snapshot', () => {
['welcome', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'complex', 'img-support', 'icon-sample'].forEach((mapId) => { [
'welcome',
'sample1',
'sample2',
'sample3',
'sample4',
'sample5',
'sample6',
'complex',
'img-support',
'icon-sample',
].forEach((mapId) => {
cy.visit(`/viewmode.html?id=${mapId}`); cy.visit(`/viewmode.html?id=${mapId}`);
cy.get('#mindplot.ready').should('exist'); cy.get('#mindplot.ready').should('exist');
cy.matchImageSnapshot(`viewmode-${mapId}`); cy.matchImageSnapshot(`viewmode-${mapId}`);
@ -8,9 +19,7 @@ context('Playground', () => {
}); });
it('the playground container.html page should match its snapshot', () => { it('the playground container.html page should match its snapshot', () => {
cy.visit('/container.html'); cy.visit('/container.html');
cy.getIframeBody() cy.getIframeBody().find('#mindplot.ready').should('exist');
.find('#mindplot.ready')
.should('exist');
cy.matchImageSnapshot('container'); cy.matchImageSnapshot('container');
}); });
it('the playground editor.html page should match its snapshot', () => { it('the playground editor.html page should match its snapshot', () => {

24
packages/editor/cypress/integration/relationship.test.js
View File

@ -1,16 +1,16 @@
context('Relationship Topics', () => { context('Relationship Topics', () => {
beforeEach(() => { beforeEach(() => {
cy.visit('/editor.html'); cy.visit('/editor.html');
cy.reload(); cy.reload();
cy.get('[test-id="30-11-relationship"]').click({ force: true }); cy.get('[test-id="30-11-relationship"]').click({ force: true });
}); });
it('Change shape relationship', () => { it('Change shape relationship', () => {
cy.get('[test-id="control-56"]').trigger('mousedown', { force: true }); cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 }); cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
cy.get('body').trigger('mouseup'); cy.get('body').trigger('mouseup');
cy.matchImageSnapshot('changeShapeRealtionship'); cy.matchImageSnapshot('changeShapeRealtionship');
cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75'); cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75');
}); });
}); });

7
packages/editor/cypress/support/commands.js
View File

@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
} }
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/ // https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
Cypress.Commands.add('getIframeBody', () => cy Cypress.Commands.add('getIframeBody', () =>
.get('iframe') cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
.its('0.contentDocument.body').should('not.be.empty') );
.then(cy.wrap));

4
packages/editor/src/classes/bootstrap/BootstrapDialog.js
View File

@ -75,9 +75,7 @@ class BootstrapDialog extends Options {
)}</button>`, )}</button>`,
); );
footer.append(this.acceptButton); footer.append(this.acceptButton);
this.acceptButton this.acceptButton.unbind('click').on('click', this.options.onEventData, this.onAcceptClick);
.unbind('click')
.on('click', this.options.onEventData, this.onAcceptClick);
} }
if (this.options.removeButton) { if (this.options.removeButton) {
this.removeButton = $( this.removeButton = $(

5
packages/editor/src/classes/bootstrap/BootstrapDialogRequest.js
View File

@ -49,10 +49,7 @@ class BootstrapDialogRequest extends BootstrapDialog {
this._native.find('.modal-body').load(url, () => { this._native.find('.modal-body').load(url, () => {
me.acceptButton.unbind('click').click(() => { me.acceptButton.unbind('click').click(() => {
if ( if ($defined(global.submitDialogForm) && typeof global.submitDialogForm === 'function') {
$defined(global.submitDialogForm)
&& typeof global.submitDialogForm === 'function'
) {
global.submitDialogForm(); global.submitDialogForm();
} }
}); });

105
packages/editor/src/classes/menu/ColorPaletteHtml.js
View File

@ -96,26 +96,113 @@ export const buildHtml = () => {
const palettes = [ const palettes = [
{ {
id: ':3p', id: ':3p',
colors: [['(0, 0, 0)', '(68, 68, 68)', '(102, 102, 102)', '(153, 153, 153)', '(204, 204, 204)', '(238, 238, 238)', '(243, 243, 243)', '(254, 255, 255)']], colors: [
[
'(0, 0, 0)',
'(68, 68, 68)',
'(102, 102, 102)',
'(153, 153, 153)',
'(204, 204, 204)',
'(238, 238, 238)',
'(243, 243, 243)',
'(254, 255, 255)',
],
],
}, },
{ {
id: '3q', id: '3q',
colors: [['(255, 0, 0)', '(255, 153, 0)', '(255, 255, 0)', '(0, 255, 0)', '(0, 255, 255)', '(0, 0, 255)', '(153, 0, 255)', '(255, 0, 255)']], colors: [
[
'(255, 0, 0)',
'(255, 153, 0)',
'(255, 255, 0)',
'(0, 255, 0)',
'(0, 255, 255)',
'(0, 0, 255)',
'(153, 0, 255)',
'(255, 0, 255)',
],
],
}, },
{ {
id: '3r', id: '3r',
colors: [ colors: [
['(244, 204, 204)', '(252, 229, 205)', '(255, 242, 204)', '(217, 234, 211)', '(208, 224, 227)', '(207, 226, 243)', '(217, 210, 233)', '(234, 209, 220)'], [
['(234, 153, 153)', '(249, 203, 156)', '(255, 229, 153)', '(182, 215, 168)', '(162, 196, 201)', '(159, 197, 232)', '(180, 167, 214)', '(213, 166, 189)'], '(244, 204, 204)',
['(224, 102, 102)', '(246, 178, 107)', '(255, 217, 102)', '(147, 196, 125)', '(118, 165, 175)', '(111, 168, 220)', '(142, 124, 195)', '(194, 123, 160)'], '(252, 229, 205)',
['(204, 0, 0)', '(230, 145, 56)', '(241, 194, 50)', '(106, 168, 79)', '(69, 129, 142)', '(61, 133, 198)', '(103, 78, 167)', '(166, 77, 121)'], '(255, 242, 204)',
['(153, 0, 0)', '(180, 95, 6)', '(191, 144, 0)', '(56, 118, 29)', '(19, 79, 92)', '(11, 83, 148)', '(53, 28, 117)', '(116, 27, 71)'], '(217, 234, 211)',
['(102, 0, 0)', '(120, 63, 4)', '(127, 96, 0)', '(39, 78, 19)', '(12, 52, 61)', '(7, 55, 99)', '(32, 18, 77)', '(76, 17, 48)'], '(208, 224, 227)',
'(207, 226, 243)',
'(217, 210, 233)',
'(234, 209, 220)',
],
[
'(234, 153, 153)',
'(249, 203, 156)',
'(255, 229, 153)',
'(182, 215, 168)',
'(162, 196, 201)',
'(159, 197, 232)',
'(180, 167, 214)',
'(213, 166, 189)',
],
[
'(224, 102, 102)',
'(246, 178, 107)',
'(255, 217, 102)',
'(147, 196, 125)',
'(118, 165, 175)',
'(111, 168, 220)',
'(142, 124, 195)',
'(194, 123, 160)',
],
[
'(204, 0, 0)',
'(230, 145, 56)',
'(241, 194, 50)',
'(106, 168, 79)',
'(69, 129, 142)',
'(61, 133, 198)',
'(103, 78, 167)',
'(166, 77, 121)',
],
[
'(153, 0, 0)',
'(180, 95, 6)',
'(191, 144, 0)',
'(56, 118, 29)',
'(19, 79, 92)',
'(11, 83, 148)',
'(53, 28, 117)',
'(116, 27, 71)',
],
[
'(102, 0, 0)',
'(120, 63, 4)',
'(127, 96, 0)',
'(39, 78, 19)',
'(12, 52, 61)',
'(7, 55, 99)',
'(32, 18, 77)',
'(76, 17, 48)',
],
], ],
}, },
{ {
id: '2p', id: '2p',
colors: [['(255, 255, 255)', '(224, 229, 239)', '(80, 157, 192)', '(57, 113, 177)', '(2, 59, 185)', '(244, 184, 45)', '(241, 163, 39)', '(82, 92, 97)']], colors: [
[
'(255, 255, 255)',
'(224, 229, 239)',
'(80, 157, 192)',
'(57, 113, 177)',
'(2, 59, 185)',
'(244, 184, 45)',
'(241, 163, 39)',
'(82, 92, 97)',
],
],
}, },
]; ];

15
packages/editor/src/classes/menu/ColorPalettePanel.js
View File

@ -21,11 +21,12 @@ import ToolbarPaneItem from './ToolbarPaneItem';
import { buildHtml, css } from './ColorPaletteHtml'; import { buildHtml, css } from './ColorPaletteHtml';
// rgbToHex implementation from https://stackoverflow.com/a/3627747/58128 // rgbToHex implementation from https://stackoverflow.com/a/3627747/58128
export const rgb2hex = (rgb) => `#${rgb export const rgb2hex = (rgb) =>
.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) `#${rgb
.slice(1) .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
.map((n) => parseInt(n, 10).toString(16).padStart(2, '0')) .slice(1)
.join('')}`; .map((n) => parseInt(n, 10).toString(16).padStart(2, '0'))
.join('')}`;
class ColorPalettePanel extends ToolbarPaneItem { class ColorPalettePanel extends ToolbarPaneItem {
constructor(buttonId, model, baseUrl) { constructor(buttonId, model, baseUrl) {
@ -71,9 +72,7 @@ class ColorPalettePanel extends ToolbarPaneItem {
const panelElem = this.getPanelElem(); const panelElem = this.getPanelElem();
// Clear selected cell based on the color ... // Clear selected cell based on the color ...
panelElem panelElem.find("td[class='palette-cell palette-cell-selected']").attr('class', 'palette-cell');
.find("td[class='palette-cell palette-cell-selected']")
.attr('class', 'palette-cell');
// Mark the cell as selected ... // Mark the cell as selected ...
const colorCells = panelElem.find('div[class=palette-colorswatch]'); const colorCells = panelElem.find('div[class=palette-colorswatch]');

15
packages/editor/src/classes/menu/FontFamilyPanel.js
View File

@ -22,7 +22,20 @@ class FontFamilyPanel extends ListToolbarPanel {
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
buildPanel() { buildPanel() {
const content = $("<div class='toolbarPanel' id='fontFamilyPanel'></div>"); const content = $("<div class='toolbarPanel' id='fontFamilyPanel'></div>");
const list = ['Arial', 'Baskerville', 'Tahoma', 'Limunari', 'Brush Script MT', 'Verdana', 'Times', 'Cursive', 'Fantasy', 'Perpetua', 'Brush Script', 'Copperplate'] const list = [
'Arial',
'Baskerville',
'Tahoma',
'Limunari',
'Brush Script MT',
'Verdana',
'Times',
'Cursive',
'Fantasy',
'Perpetua',
'Brush Script',
'Copperplate',
]
.sort() .sort()
.map((f) => `<div model="${f}" class="toolbarPanelLink" style="font-family:${f};">${f}</div>`) .map((f) => `<div model="${f}" class="toolbarPanelLink" style="font-family:${f};">${f}</div>`)
.join('\n'); .join('\n');

11
packages/editor/src/classes/menu/FontSizePanel.js
View File

@ -22,11 +22,12 @@ class FontSizePanel extends ListToolbarPanel {
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
buildPanel() { buildPanel() {
const content = $("<div class='toolbarPanel' id='fontSizePanel'></div>"); const content = $("<div class='toolbarPanel' id='fontSizePanel'></div>");
content[0].innerHTML = '' content[0].innerHTML =
+ '<div id="small" model="6" style="font-size:8px">Small</div>' '' +
+ '<div id="normal" model="8" style="font-size:12px">Normal</div>' '<div id="small" model="6" style="font-size:8px">Small</div>' +
+ '<div id="large" model="10" style="font-size:15px">Large</div>' '<div id="normal" model="8" style="font-size:12px">Normal</div>' +
+ '<div id="huge" model="15" style="font-size:24px">Huge</div>'; '<div id="large" model="10" style="font-size:15px">Large</div>' +
'<div id="huge" model="15" style="font-size:24px">Huge</div>';
return content; return content;
} }

13
packages/editor/src/classes/menu/IconPanel.js
View File

@ -19,15 +19,16 @@ import $ from 'jquery';
import ToolbarPaneItem from './ToolbarPaneItem'; import ToolbarPaneItem from './ToolbarPaneItem';
import { ImageIcon } from '@wisemapping/mindplot'; import { ImageIcon } from '@wisemapping/mindplot';
class IconPanel extends ToolbarPaneItem { class IconPanel extends ToolbarPaneItem {
_updateSelectedItem() { _updateSelectedItem() {
return this.getPanelElem(); return this.getPanelElem();
} }
buildPanel() { buildPanel() {
const content = $('<div class="toolbarPanel" id="IconsPanel"></div>') const content = $('<div class="toolbarPanel" id="IconsPanel"></div>').css({
.css({ width: 295, height: 305 }); width: 295,
height: 305,
});
content.on('click', (event) => { content.on('click', (event) => {
event.stopPropagation(); event.stopPropagation();
}); });
@ -37,7 +38,7 @@ class IconPanel extends ToolbarPaneItem {
for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i += 1) { for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i += 1) {
const familyIcons = ImageIcon.prototype.ICON_FAMILIES[i].icons; const familyIcons = ImageIcon.prototype.ICON_FAMILIES[i].icons;
for (let j = 0; j < familyIcons.length; j += 1) { for (let j = 0; j < familyIcons.length; j += 1) {
if ((count % 12) === 0) { if (count % 12 === 0) {
familyContent = $('<div></div>'); familyContent = $('<div></div>');
content.append(familyContent); content.append(familyContent);
} }
@ -52,10 +53,10 @@ class IconPanel extends ToolbarPaneItem {
const panel = this; const panel = this;
const model = this.getModel(); const model = this.getModel();
img.on('click', ((event) => { img.on('click', (event) => {
model.setValue($(event.target).attr('id')); model.setValue($(event.target).attr('id'));
panel.hide(); panel.hide();
})); });
count += 1; count += 1;
} }

17
packages/editor/src/classes/menu/KeyboardShortcutDialog.js
View File

@ -18,14 +18,13 @@
import BootstrapDialog from '../bootstrap/BootstrapDialog'; import BootstrapDialog from '../bootstrap/BootstrapDialog';
import { $msg } from '@wisemapping/mindplot'; import { $msg } from '@wisemapping/mindplot';
class KeyboardShortcutDialog extends BootstrapDialog { class KeyboardShortcutDialog extends BootstrapDialog {
constructor() { constructor() {
super($msg('SHORTCUTS'), { super($msg('SHORTCUTS'), {
closeButton: true, closeButton: true,
acceptButton: false, acceptButton: false,
}); });
this.setContent(`<div id="keyboardTable"> this.setContent(`<div id="keyboardTable">
<table> <table>
<colgroup> <colgroup>
<col width="40%"/> <col width="40%"/>
@ -139,8 +138,8 @@ class KeyboardShortcutDialog extends BootstrapDialog {
</tbody> </tbody>
</table> </table>
</div>`); </div>`);
this.show(); this.show();
} }
} }
export default KeyboardShortcutDialog; export default KeyboardShortcutDialog;

3
packages/editor/src/classes/menu/KeyboardShortcutTooltip.js
View File

@ -36,7 +36,8 @@ class KeyboardShortcutTooltip extends FloatingTip {
html: true, html: true,
placement: 'bottom', placement: 'bottom',
className: 'keyboardShortcutTip', className: 'keyboardShortcutTip',
template: '<div class="popover popoverBlack" role="tooltip"><div class="arrow arrowBlack"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', template:
'<div class="popover popoverBlack" role="tooltip"><div class="arrow arrowBlack"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
}); });
tipDiv.on('click', (e) => { tipDiv.on('click', (e) => {
tipDiv.trigger('mouseleave', e); tipDiv.trigger('mouseleave', e);

4
packages/editor/src/classes/menu/ListToolbarPanel.js
View File

@ -43,7 +43,9 @@ class ListToolbarPanel extends ToolbarPaneItem {
const menuElems = panelElem.find('div'); const menuElems = panelElem.find('div');
const value = this.getModel().getValue(); const value = this.getModel().getValue();
menuElems.each((index, elem) => { menuElems.each((index, elem) => {
const elemValue = $defined($(elem).attr('model')) ? $(elem).attr('model') : $(elem).attr('id'); const elemValue = $defined($(elem).attr('model'))
? $(elem).attr('model')
: $(elem).attr('id');
$assert(elemValue, 'elemValue can not be null'); $assert(elemValue, 'elemValue can not be null');
if (elemValue === value) $(elem).attr('class', 'toolbarPanelLinkSelectedLink'); if (elemValue === value) $(elem).attr('class', 'toolbarPanelLinkSelectedLink');
else $(elem).attr('class', 'toolbarPanelLink'); else $(elem).attr('class', 'toolbarPanelLink');

15
packages/editor/webpack.common.js
View File

@ -10,23 +10,23 @@ module.exports = {
}, },
}, },
stats: { stats: {
errorDetails: true errorDetails: true,
}, },
entry: { entry: {
"editor.bundle": path.join(__dirname, 'src', 'index.tsx') 'editor.bundle': path.join(__dirname, 'src', 'index.tsx'),
}, },
mode: 'development', mode: 'development',
devtool: 'source-map', devtool: 'source-map',
target: 'web', target: 'web',
resolve: { resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'] extensions: ['.ts', '.tsx', '.js', '.jsx'],
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: 'ts-loader',
exclude: '/node_modules/' exclude: '/node_modules/',
}, },
{ {
test: /\.(png|jpe?g|gif|svg)$/, test: /\.(png|jpe?g|gif|svg)$/,
@ -36,14 +36,15 @@ module.exports = {
test: /\.(js|jsx)$/, test: /\.(js|jsx)$/,
exclude: /node_modules/, exclude: /node_modules/,
use: ['babel-loader'], use: ['babel-loader'],
}, { },
{
test: /\.css$/i, test: /\.css$/i,
loader: 'style-loader' loader: 'style-loader',
}, },
{ {
test: /\.css$/, test: /\.css$/,
loader: 'css-loader', loader: 'css-loader',
} },
], ],
}, },
}; };

20
packages/editor/webpack.playground.js
View File

@ -44,16 +44,16 @@ const playgroundConfig = {
template: 'test/playground/map-render/html/viewmode.html', template: 'test/playground/map-render/html/viewmode.html',
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
chunks: ['editor'], chunks: ['editor'],
filename: 'editor.html', filename: 'editor.html',
template: 'test/playground/map-render/html/editor.html', template: 'test/playground/map-render/html/editor.html',
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
chunks: ['showcase'], chunks: ['showcase'],
filename: 'showcase.html', filename: 'showcase.html',
template: 'test/playground/map-render/html/showcase.html', template: 'test/playground/map-render/html/showcase.html',
}), }),
], ],
}; };
module.exports = merge(common, playgroundConfig); module.exports = merge(common, playgroundConfig);

8
packages/editor/webpack.prod.js
View File

@ -9,12 +9,10 @@ const prodConfig = {
}, },
externals: { externals: {
react: 'react', react: 'react',
"react-dom": 'react-dom', 'react-dom': 'react-dom',
"react-intl": 'react-intl', 'react-intl': 'react-intl',
}, },
plugins: [ plugins: [new CleanWebpackPlugin()],
new CleanWebpackPlugin(),
]
}; };
module.exports = merge(common, prodConfig); module.exports = merge(common, prodConfig);

7
packages/mindplot/cypress/support/commands.js
View File

@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
} }
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/ // https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
Cypress.Commands.add('getIframeBody', () => cy Cypress.Commands.add('getIframeBody', () =>
.get('iframe') cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
.its('0.contentDocument.body').should('not.be.empty') );
.then(cy.wrap));

26
packages/mindplot/src/components/IconGroupRemoveTip.js
View File

@ -4,20 +4,20 @@ import { Group, Rect, Line } from '@wisemapping/web2d';
export default class RemoveTip { export default class RemoveTip {
/** @lends IconGroup.RemoveTip */ /** @lends IconGroup.RemoveTip */
/** /**
* @classdesc inner class of IconGroup * @classdesc inner class of IconGroup
* @constructs * @constructs
* @param container * @param container
*/ */
constructor(container) { constructor(container) {
$assert(container, 'group can not be null'); $assert(container, 'group can not be null');
this._fadeElem = container; this._fadeElem = container;
} }
/** /**
* @param topicId * @param topicId
* @param icon * @param icon
* @throws will throw an error if icon is null or undefined * @throws will throw an error if icon is null or undefined
*/ */
show(topicId, icon) { show(topicId, icon) {
$assert(icon, 'icon can not be null'); $assert(icon, 'icon can not be null');
@ -64,8 +64,8 @@ export default class RemoveTip {
} }
/** /**
* @param delay * @param delay
*/ */
close(delay) { close(delay) {
// This is not ok, trying to close the same dialog twice ? // This is not ok, trying to close the same dialog twice ?
if (this._closeTimeoutId) { if (this._closeTimeoutId) {
@ -145,9 +145,9 @@ export default class RemoveTip {
} }
/** /**
* @param topicId * @param topicId
* @param icon * @param icon
*/ */
decorate(topicId, icon) { decorate(topicId, icon) {
const me = this; const me = this;

329
packages/mindplot/src/components/ImageIcon.js
View File

@ -15,9 +15,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { import { $assert } from '@wisemapping/core-js';
$assert,
} from '@wisemapping/core-js';
import Icon from './Icon'; import Icon from './Icon';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
@ -85,7 +83,7 @@ class ImageIcon extends Icon {
for (let i = 0; i < familyIcons.length && result == null; i++) { for (let i = 0; i < familyIcons.length && result == null; i++) {
if (familyIcons[i] === iconId) { if (familyIcons[i] === iconId) {
// Is last one? // Is last one?
if (i === (familyIcons.length - 1)) { if (i === familyIcons.length - 1) {
[result] = familyIcons; [result] = familyIcons;
} else { } else {
result = familyIcons[i + 1]; result = familyIcons[i + 1];
@ -122,116 +120,219 @@ class ImageIcon extends Icon {
} }
} }
ImageIcon.prototype.ICON_FAMILIES = [{ ImageIcon.prototype.ICON_FAMILIES = [
id: 'face', {
icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'], id: 'face',
}, icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'],
{ },
id: 'funy', {
icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'], id: 'funy',
}, icons: ['funy_angel', 'funy_devilish', 'funy_glasses', 'funy_grin', 'funy_kiss', 'funy_monkey'],
{ },
id: 'sport', {
icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'], id: 'sport',
}, icons: [
{ 'sport_basketball',
id: 'bulb', 'sport_football',
icons: ['bulb_light_on', 'bulb_light_off'], 'sport_golf',
}, 'sport_raquet',
{ 'sport_shuttlecock',
id: 'thumb', 'sport_soccer',
icons: ['thumb_thumb_up', 'thumb_thumb_down'], 'sport_tennis',
}, ],
{ },
id: 'tick', {
icons: ['tick_tick', 'tick_cross'], id: 'bulb',
}, icons: ['bulb_light_on', 'bulb_light_off'],
{ },
id: 'onoff', {
icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'], id: 'thumb',
}, icons: ['thumb_thumb_up', 'thumb_thumb_down'],
{ },
id: 'money', {
icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'], id: 'tick',
}, icons: ['tick_tick', 'tick_cross'],
{ },
id: 'time', {
icons: ['time_calendar', 'time_clock', 'time_hourglass'], id: 'onoff',
}, icons: [
{ 'onoff_clock',
id: 'number', 'onoff_clock_red',
icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'], 'onoff_add',
}, 'onoff_delete',
{ 'onoff_status_offline',
id: 'chart', 'onoff_status_online',
icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'], ],
}, },
{ {
id: 'sign', id: 'money',
icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'], icons: [
}, 'money_money',
{ 'money_dollar',
id: 'hard', 'money_euro',
icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer', 'hard_webcam', 'hard_microphone'], 'money_pound',
}, 'money_yen',
{ 'money_coins',
id: 'things', 'money_ruby',
icons: ['things_address_book', 'things_wrench', 'things_pin', 'things_window-layout', 'things_bubbles'], ],
}, },
{ {
id: 'soft', id: 'time',
icons: ['soft_bug', 'soft_cursor', 'soft_database_table', 'soft_database', 'soft_feed', 'soft_folder_explore', 'soft_rss', 'soft_penguin'], icons: ['time_calendar', 'time_clock', 'time_hourglass'],
}, },
{ {
id: 'arrow', id: 'number',
icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'], icons: [
}, 'number_1',
{ 'number_2',
id: 'arrowc', 'number_3',
icons: ['arrowc_rotate_anticlockwise', 'arrowc_rotate_clockwise', 'arrowc_turn_left', 'arrowc_turn_right'], 'number_4',
}, 'number_5',
{ 'number_6',
id: 'people', 'number_7',
icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'], 'number_8',
}, 'number_9',
{ ],
id: 'mail', },
icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'], {
}, id: 'chart',
{ icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
id: 'flag', },
icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'], {
}, id: 'sign',
{ icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
id: 'social', },
icons: ['social_facebook', 'social_twitter', 'social_redit', 'social_instagram', 'social_google-plus'], {
}, id: 'hard',
{ icons: [
id: 'meetapps', 'hard_cd',
icons: ['meetapps_slack', 'meetapps_google-meet', 'meetapps_whatapp', 'meetapps_ms-teams', 'meetapps_zoom', 'meetapps_facebook-messenger'], 'hard_computer',
}, 'hard_controller',
{ 'hard_driver_disk',
id: 'appsgoogle', 'hard_ipod',
icons: ['appsgoogle_youtube', 'appsgoogle_gmail', 'appsgoogle_maps'], 'hard_keyboard',
}, 'hard_mouse',
{ 'hard_printer',
id: 'tag', 'hard_webcam',
icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'], 'hard_microphone',
}, ],
{ },
id: 'object', {
icons: ['object_bell', 'object_clanbomber', 'object_key', 'object_pencil', 'object_phone', 'object_magnifier', 'object_clip', id: 'things',
'object_music', 'object_star', 'object_wizard', 'object_house', 'object_cake', 'object_camera', 'object_palette', 'object_rainbow', icons: [
], 'things_address_book',
}, 'things_wrench',
{ 'things_pin',
id: 'weather', 'things_window-layout',
icons: ['weather_clear-night', 'weather_clear', 'weather_few-clouds-night', 'weather_few-clouds', 'weather_overcast', 'weather_severe-alert', 'weather_showers-scattered', 'weather_showers', 'weather_snow', 'weather_storm'], 'things_bubbles',
}, ],
{ },
id: 'task', {
icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'], id: 'soft',
}, icons: [
'soft_bug',
'soft_cursor',
'soft_database_table',
'soft_database',
'soft_feed',
'soft_folder_explore',
'soft_rss',
'soft_penguin',
],
},
{
id: 'arrow',
icons: ['arrow_up', 'arrow_down', 'arrow_left', 'arrow_right'],
},
{
id: 'arrowc',
icons: [
'arrowc_rotate_anticlockwise',
'arrowc_rotate_clockwise',
'arrowc_turn_left',
'arrowc_turn_right',
],
},
{
id: 'people',
icons: ['people_group', 'people_male1', 'people_male2', 'people_female1', 'people_female2'],
},
{
id: 'mail',
icons: ['mail_envelop', 'mail_mailbox', 'mail_edit', 'mail_list'],
},
{
id: 'flag',
icons: ['flag_blue', 'flag_green', 'flag_orange', 'flag_pink', 'flag_purple', 'flag_yellow'],
},
{
id: 'social',
icons: [
'social_facebook',
'social_twitter',
'social_redit',
'social_instagram',
'social_google-plus',
],
},
{
id: 'meetapps',
icons: [
'meetapps_slack',
'meetapps_google-meet',
'meetapps_whatapp',
'meetapps_ms-teams',
'meetapps_zoom',
'meetapps_facebook-messenger',
],
},
{
id: 'appsgoogle',
icons: ['appsgoogle_youtube', 'appsgoogle_gmail', 'appsgoogle_maps'],
},
{
id: 'tag',
icons: ['tag_blue', 'tag_green', 'tag_orange', 'tag_red', 'tag_pink', 'tag_yellow'],
},
{
id: 'object',
icons: [
'object_bell',
'object_clanbomber',
'object_key',
'object_pencil',
'object_phone',
'object_magnifier',
'object_clip',
'object_music',
'object_star',
'object_wizard',
'object_house',
'object_cake',
'object_camera',
'object_palette',
'object_rainbow',
],
},
{
id: 'weather',
icons: [
'weather_clear-night',
'weather_clear',
'weather_few-clouds-night',
'weather_few-clouds',
'weather_overcast',
'weather_severe-alert',
'weather_showers-scattered',
'weather_showers',
'weather_snow',
'weather_storm',
],
},
{
id: 'task',
icons: ['task_0', 'task_25', 'task_50', 'task_75', 'task_100'],
},
]; ];
export default ImageIcon; export default ImageIcon;

2
packages/mindplot/src/components/Options.js
View File

@ -9,7 +9,7 @@ class Options {
const optionsKeys = Object.keys(options); const optionsKeys = Object.keys(options);
for (let index = 0; index < optionsKeys.length; index++) { for (let index = 0; index < optionsKeys.length; index++) {
const option = optionsKeys[index]; const option = optionsKeys[index];
if (typeof (options[option]) === 'function' && (/^on[A-Z]/).test(option)) { if (typeof options[option] === 'function' && /^on[A-Z]/.test(option)) {
this.addEvent(option, options[option]); this.addEvent(option, options[option]);
delete options[option]; delete options[option];
} }

11
packages/mindplot/src/components/TopicFeature.js
View File

@ -44,12 +44,17 @@ const TopicFeatureFactory = {
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
$assert(model, 'model can not be null'); $assert(model, 'model can not be null');
const { icon: Icon } = TopicFeatureFactory._featuresMetadataById const { icon: Icon } = TopicFeatureFactory._featuresMetadataById.filter(
.filter((elem) => elem.id === model.getType())[0]; (elem) => elem.id === model.getType(),
)[0];
return new Icon(topic, model, readOnly); return new Icon(topic, model, readOnly);
}, },
}; };
TopicFeatureFactory._featuresMetadataById = [TopicFeatureFactory.Icon, TopicFeatureFactory.Link, TopicFeatureFactory.Note]; TopicFeatureFactory._featuresMetadataById = [
TopicFeatureFactory.Icon,
TopicFeatureFactory.Link,
TopicFeatureFactory.Note,
];
export default TopicFeatureFactory; export default TopicFeatureFactory;

17
packages/mindplot/src/components/TopicStyle.js
View File

@ -15,16 +15,9 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { import { $assert, $defined } from '@wisemapping/core-js';
$assert, import { $msg } from './Messages';
$defined, import { TopicShape } from './model/INodeModel';
} from '@wisemapping/core-js';
import {
$msg,
} from './Messages';
import {
TopicShape,
} from './model/INodeModel';
class TopicStyle { class TopicStyle {
static _getStyles(topic) { static _getStyles(topic) {
@ -49,9 +42,7 @@ class TopicStyle {
} }
static defaultText(topic) { static defaultText(topic) {
const { const { msgKey } = this._getStyles(topic);
msgKey,
} = this._getStyles(topic);
return $msg(msgKey); return $msg(msgKey);
} }

14
packages/mindplot/src/components/layout/ChangeEvent.js
View File

@ -41,17 +41,17 @@ class ChangeEvent {
} }
/** /**
* @param {} value the order to set * @param {} value the order to set
* @throws will throw an error if the given parameter is not/cannot be converted to a numerical * @throws will throw an error if the given parameter is not/cannot be converted to a numerical
* value * value
*/ */
setOrder(value) { setOrder(value) {
$assert(!Number.isNaN(value), 'value can not be null'); $assert(!Number.isNaN(value), 'value can not be null');
this._order = value; this._order = value;
} }
/** @param {} value /** @param {} value
* @throws will throw an error if the value is null or undefined */ * @throws will throw an error if the value is null or undefined */
setPosition(value) { setPosition(value) {
$assert(value, 'value can not be null'); $assert(value, 'value can not be null');
this._position = value; this._position = value;
@ -59,7 +59,9 @@ class ChangeEvent {
/** @return {String} order and position */ /** @return {String} order and position */
toString() { toString() {
return `[order:${this.getOrder()}, position: {${this.getPosition().x},${this.getPosition().y}}]`; return `[order:${this.getOrder()}, position: {${this.getPosition().x},${
this.getPosition().y
}}]`;
} }
} }

8
packages/mindplot/src/components/layout/GridSorter.js
View File

@ -42,12 +42,12 @@ class GridSorter extends AbstractBasicSorter {
for (let i = 0; i < heights.length; i++) { for (let i = 0; i < heights.length; i++) {
const even = i % 2 === 0 ? 1 : -1; const even = i % 2 === 0 ? 1 : -1;
const zeroHeight = i === 0 ? 0 : ((heights[0].height / 2) * even); const zeroHeight = i === 0 ? 0 : (heights[0].height / 2) * even;
let middleHeight = 0; let middleHeight = 0;
for (let j = i - 2; j > 0; j -= 2) { for (let j = i - 2; j > 0; j -= 2) {
middleHeight += heights[j].height * even; middleHeight += heights[j].height * even;
} }
const finalHeight = i === 0 ? 0 : ((heights[i].height / 2) * even); const finalHeight = i === 0 ? 0 : (heights[i].height / 2) * even;
const yOffset = zeroHeight + middleHeight + finalHeight; const yOffset = zeroHeight + middleHeight + finalHeight;
const xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE; const xOffset = node.getSize().width + GridSorter.GRID_HORIZONTAR_SIZE;
@ -61,8 +61,8 @@ class GridSorter extends AbstractBasicSorter {
} }
/** /**
* @return {String} the print name of this class * @return {String} the print name of this class
*/ */
toString() { toString() {
return 'Grid Sorter'; return 'Grid Sorter';
} }

141
packages/mindplot/src/components/layout/SymmetricSorter.js
View File

@ -20,44 +20,37 @@ import AbstractBasicSorter from './AbstractBasicSorter';
class SymmetricSorter extends AbstractBasicSorter { class SymmetricSorter extends AbstractBasicSorter {
/** /**
* Predict the order and position of a dragged node. * Predict the order and position of a dragged node.
* *
* @param graph The tree set * @param graph The tree set
* @param parent The parent of the node * @param parent The parent of the node
* @param node The node * @param node The node
* @param position The position of the drag * @param position The position of the drag
* @param free Free drag or not * @param free Free drag or not
* @return {*} * @return {*}
*/ */
predict(graph, parent, node, position, free) { predict(graph, parent, node, position, free) {
const self = this; const self = this;
const rootNode = graph.getRootNode(parent); const rootNode = graph.getRootNode(parent);
// If its a free node... // If its a free node...
if (free) { if (free) {
$assert($defined(position), $assert($defined(position), 'position cannot be null for predict in free positioning');
'position cannot be null for predict in free positioning');
$assert($defined(node), 'node cannot be null for predict in free positioning'); $assert($defined(node), 'node cannot be null for predict in free positioning');
const direction = this._getRelativeDirection( const direction = this._getRelativeDirection(rootNode.getPosition(), parent.getPosition());
rootNode.getPosition(), const limitXPos =
parent.getPosition(), parent.getPosition().x +
); direction *
const limitXPos = parent.getPosition().x (parent.getSize().width / 2 +
+ direction node.getSize().width / 2 +
* (parent.getSize().width / 2 SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
+ node.getSize().width / 2
+ SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
let xPos; let xPos;
if (direction > 0) { if (direction > 0) {
xPos = position.x >= limitXPos xPos = position.x >= limitXPos ? position.x : limitXPos;
? position.x
: limitXPos;
} else { } else {
xPos = position.x <= limitXPos xPos = position.x <= limitXPos ? position.x : limitXPos;
? position.x
: limitXPos;
} }
return [0, { x: xPos, y: position.y }]; return [0, { x: xPos, y: position.y }];
} }
@ -71,9 +64,8 @@ class SymmetricSorter extends AbstractBasicSorter {
const result = { const result = {
x: x:
parent.getPosition().x parent.getPosition().x +
+ parentDirection parentDirection * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
* (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
y: parent.getPosition().y, y: parent.getPosition().y,
}; };
return [graph.getChildren(parent).length, result]; return [graph.getChildren(parent).length, result];
@ -81,10 +73,7 @@ class SymmetricSorter extends AbstractBasicSorter {
// If it is a dragged node... // If it is a dragged node...
$assert($defined(position), 'position cannot be null for predict in dragging'); $assert($defined(position), 'position cannot be null for predict in dragging');
const nodeDirection = this._getRelativeDirection( const nodeDirection = this._getRelativeDirection(rootNode.getPosition(), node.getPosition());
rootNode.getPosition(),
node.getPosition(),
);
const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position); const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
const siblings = graph.getSiblings(node); const siblings = graph.getSiblings(node);
@ -98,9 +87,10 @@ class SymmetricSorter extends AbstractBasicSorter {
if (parentChildren.length === 0) { if (parentChildren.length === 0) {
// Fit as a child of the parent node... // Fit as a child of the parent node...
const result = { const result = {
x: parent.getPosition().x x:
+ positionDirection parent.getPosition().x +
* (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING), positionDirection *
(parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
y: parent.getPosition().y, y: parent.getPosition().y,
}; };
@ -115,41 +105,38 @@ class SymmetricSorter extends AbstractBasicSorter {
// Fit at the bottom // Fit at the bottom
if (!nodeAfter && position.y > parentChild.getPosition().y) { if (!nodeAfter && position.y > parentChild.getPosition().y) {
const order = graph.getParent(node) && graph.getParent(node).getId() === parent.getId() const order =
? last.getOrder() graph.getParent(node) && graph.getParent(node).getId() === parent.getId()
: last.getOrder() + 1; ? last.getOrder()
: last.getOrder() + 1;
const result = { const result = {
x: parentChild.getPosition().x, x: parentChild.getPosition().x,
y: y:
parentChild.getPosition().y parentChild.getPosition().y +
+ parentChild.getSize().height parentChild.getSize().height +
+ SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2, SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
}; };
return [order, result]; return [order, result];
} }
// Fit after this node // Fit after this node
if ( if (
nodeAfter nodeAfter &&
&& position.y > parentChild.getPosition().y position.y > parentChild.getPosition().y &&
&& position.y < nodeAfter.getPosition().y position.y < nodeAfter.getPosition().y
) { ) {
if ( if (nodeAfter.getId() === node.getId() || parentChild.getId() === node.getId()) {
nodeAfter.getId() === node.getId()
|| parentChild.getId() === node.getId()
) {
return [node.getOrder(), node.getPosition()]; return [node.getOrder(), node.getPosition()];
} }
const orderResult = position.y > node.getPosition().y const orderResult =
? nodeAfter.getOrder() - 1 position.y > node.getPosition().y ? nodeAfter.getOrder() - 1 : parentChild.getOrder() + 1;
: parentChild.getOrder() + 1;
const positionResult = { const positionResult = {
x: parentChild.getPosition().x, x: parentChild.getPosition().x,
y: y:
parentChild.getPosition().y parentChild.getPosition().y +
+ (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2, (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
}; };
return [orderResult, positionResult]; return [orderResult, positionResult];
@ -161,20 +148,20 @@ class SymmetricSorter extends AbstractBasicSorter {
const resultPosition = { const resultPosition = {
x: first.getPosition().x, x: first.getPosition().x,
y: y:
first.getPosition().y first.getPosition().y -
- first.getSize().height first.getSize().height -
- SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2, SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
}; };
return [0, resultPosition]; return [0, resultPosition];
} }
/** /**
* @param treeSet * @param treeSet
* @param parent * @param parent
* @param child * @param child
* @param order * @param order
* @throws will throw an error if the order is not strictly continuous * @throws will throw an error if the order is not strictly continuous
*/ */
insert(treeSet, parent, child, order) { insert(treeSet, parent, child, order) {
const children = this._getSortedChildren(treeSet, parent); const children = this._getSortedChildren(treeSet, parent);
$assert( $assert(
@ -191,9 +178,9 @@ class SymmetricSorter extends AbstractBasicSorter {
} }
/** /**
* @param treeSet * @param treeSet
* @param node * @param node
* @throws will throw an error if the node is in the wrong position */ * @throws will throw an error if the node is in the wrong position */
detach(treeSet, node) { detach(treeSet, node) {
const parent = treeSet.getParent(node); const parent = treeSet.getParent(node);
const children = this._getSortedChildren(treeSet, parent); const children = this._getSortedChildren(treeSet, parent);
@ -227,13 +214,14 @@ class SymmetricSorter extends AbstractBasicSorter {
// Compute heights ... // Compute heights ...
const heights = children const heights = children
.map(((child) => ({ .map((child) => ({
id: child.getId(), id: child.getId(),
order: child.getOrder(), order: child.getOrder(),
position: child.getPosition(), position: child.getPosition(),
width: child.getSize().width, width: child.getSize().width,
height: this._computeChildrenHeight(treeSet, child), height: this._computeChildrenHeight(treeSet, child),
}))).reverse(); }))
.reverse();
// Compute the center of the branch ... // Compute the center of the branch ...
let totalHeight = 0; let totalHeight = 0;
@ -250,10 +238,11 @@ class SymmetricSorter extends AbstractBasicSorter {
const direction = this.getChildDirection(treeSet, childNode); const direction = this.getChildDirection(treeSet, childNode);
const yOffset = ysum + heights[i].height / 2; const yOffset = ysum + heights[i].height / 2;
const xOffset = direction const xOffset =
* (heights[i].width / 2 direction *
+ node.getSize().width / 2 (heights[i].width / 2 +
+ SymmetricSorter.INTERNODE_HORIZONTAL_PADDING); node.getSize().width / 2 +
SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
$assert(!Number.isNaN(xOffset), 'xOffset can not be null'); $assert(!Number.isNaN(xOffset), 'xOffset can not be null');
$assert(!Number.isNaN(yOffset), 'yOffset can not be null'); $assert(!Number.isNaN(yOffset), 'yOffset can not be null');
@ -264,10 +253,10 @@ class SymmetricSorter extends AbstractBasicSorter {
} }
/** /**
* @param treeSet * @param treeSet
* @param node * @param node
* @throws will throw an error if order elements are missing * @throws will throw an error if order elements are missing
*/ */
verify(treeSet, node) { verify(treeSet, node) {
// Check that all is consistent ... // Check that all is consistent ...
const children = this._getSortedChildren(treeSet, node); const children = this._getSortedChildren(treeSet, node);

5
packages/mindplot/src/components/util/Shape.js
View File

@ -106,10 +106,7 @@ const Shape = {
const x2 = tarPos.x + Math.sqrt((l * l) / (1 + m * m)) * fix * -1; const x2 = tarPos.x + Math.sqrt((l * l) / (1 + m * m)) * fix * -1;
const y2 = m * (x2 - tarPos.x) + tarPos.y; const y2 = m * (x2 - tarPos.x) + tarPos.y;
return [ return [new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-tarPos.x + x2, -tarPos.y + y2)];
new Point(-srcPos.x + x1, -srcPos.y + y1),
new Point(-tarPos.x + x2, -tarPos.y + y2),
];
}, },
workoutIncomingConnectionPoint(targetNode, sourcePosition) { workoutIncomingConnectionPoint(targetNode, sourcePosition) {

107
packages/mindplot/test/playground/layout/BalancedTestSuite.js
View File

@ -215,8 +215,8 @@ class BalancedTestSuite extends TestSuite {
const prediction1a = manager.predict(0, null, { x: 165, y: -70 }); const prediction1a = manager.predict(0, null, { x: 165, y: -70 });
this._plotPrediction(graph1, prediction1a); this._plotPrediction(graph1, prediction1a);
$assert( $assert(
prediction1a.position.y < manager.find(1).getPosition().y prediction1a.position.y < manager.find(1).getPosition().y &&
&& prediction1a.position.x == manager.find(1).getPosition().x, prediction1a.position.x == manager.find(1).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1a.order == 0, 'Prediction order should be 0'); $assert(prediction1a.order == 0, 'Prediction order should be 0');
@ -225,9 +225,9 @@ class BalancedTestSuite extends TestSuite {
const prediction1b = manager.predict(0, null, { x: 165, y: -10 }); const prediction1b = manager.predict(0, null, { x: 165, y: -10 });
this._plotPrediction(graph1, prediction1b); this._plotPrediction(graph1, prediction1b);
$assert( $assert(
prediction1b.position.y > manager.find(1).getPosition().y prediction1b.position.y > manager.find(1).getPosition().y &&
&& prediction1b.position.y < manager.find(3).getPosition().y prediction1b.position.y < manager.find(3).getPosition().y &&
&& prediction1b.position.x == manager.find(1).getPosition().x, prediction1b.position.x == manager.find(1).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1b.order == 2, 'Prediction order should be 2'); $assert(prediction1b.order == 2, 'Prediction order should be 2');
@ -236,9 +236,9 @@ class BalancedTestSuite extends TestSuite {
const prediction1c = manager.predict(0, null, { x: 145, y: 15 }); const prediction1c = manager.predict(0, null, { x: 145, y: 15 });
this._plotPrediction(graph1, prediction1c); this._plotPrediction(graph1, prediction1c);
$assert( $assert(
prediction1c.position.y > manager.find(3).getPosition().y prediction1c.position.y > manager.find(3).getPosition().y &&
&& prediction1c.position.y < manager.find(5).getPosition().y prediction1c.position.y < manager.find(5).getPosition().y &&
&& prediction1c.position.x == manager.find(3).getPosition().x, prediction1c.position.x == manager.find(3).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1c.order == 4, 'Prediction order should be 4'); $assert(prediction1c.order == 4, 'Prediction order should be 4');
@ -247,8 +247,8 @@ class BalancedTestSuite extends TestSuite {
const prediction1d = manager.predict(0, null, { x: 145, y: 70 }); const prediction1d = manager.predict(0, null, { x: 145, y: 70 });
this._plotPrediction(graph1, prediction1d); this._plotPrediction(graph1, prediction1d);
$assert( $assert(
prediction1d.position.y > manager.find(5).getPosition().y prediction1d.position.y > manager.find(5).getPosition().y &&
&& prediction1d.position.x == manager.find(5).getPosition().x, prediction1d.position.x == manager.find(5).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1d.order == 6, 'Prediction order should be 6'); $assert(prediction1d.order == 6, 'Prediction order should be 6');
@ -260,8 +260,8 @@ class BalancedTestSuite extends TestSuite {
const prediction2a = manager.predict(0, null, { x: -145, y: -50 }); const prediction2a = manager.predict(0, null, { x: -145, y: -50 });
this._plotPrediction(graph2, prediction2a); this._plotPrediction(graph2, prediction2a);
$assert( $assert(
prediction2a.position.y < manager.find(2).getPosition().y prediction2a.position.y < manager.find(2).getPosition().y &&
&& prediction2a.position.x == manager.find(2).getPosition().x, prediction2a.position.x == manager.find(2).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2a.order == 1, 'Prediction order should be 1'); $assert(prediction2a.order == 1, 'Prediction order should be 1');
@ -270,9 +270,9 @@ class BalancedTestSuite extends TestSuite {
const prediction2b = manager.predict(0, null, { x: -145, y: -10 }); const prediction2b = manager.predict(0, null, { x: -145, y: -10 });
this._plotPrediction(graph2, prediction2b); this._plotPrediction(graph2, prediction2b);
$assert( $assert(
prediction2b.position.y > manager.find(2).getPosition().y prediction2b.position.y > manager.find(2).getPosition().y &&
&& prediction2b.position.y < manager.find(4).getPosition().y prediction2b.position.y < manager.find(4).getPosition().y &&
&& prediction2b.position.x == manager.find(2).getPosition().x, prediction2b.position.x == manager.find(2).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2b.order == 3, 'Prediction order should be 3'); $assert(prediction2b.order == 3, 'Prediction order should be 3');
@ -281,8 +281,8 @@ class BalancedTestSuite extends TestSuite {
const prediction2c = manager.predict(0, null, { x: -145, y: 400 }); const prediction2c = manager.predict(0, null, { x: -145, y: 400 });
this._plotPrediction(graph2, prediction2c); this._plotPrediction(graph2, prediction2c);
$assert( $assert(
prediction2c.position.y > manager.find(4).getPosition().y prediction2c.position.y > manager.find(4).getPosition().y &&
&& prediction2c.position.x == manager.find(4).getPosition().x, prediction2c.position.x == manager.find(4).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2c.order == 5, 'Prediction order should be 5'); $assert(prediction2c.order == 5, 'Prediction order should be 5');
@ -293,8 +293,8 @@ class BalancedTestSuite extends TestSuite {
const prediction3 = manager.predict(0, null, null); const prediction3 = manager.predict(0, null, null);
this._plotPrediction(graph3, prediction3); this._plotPrediction(graph3, prediction3);
$assert( $assert(
prediction3.position.y > manager.find(4).getPosition().y prediction3.position.y > manager.find(4).getPosition().y &&
&& prediction3.position.x == manager.find(4).getPosition().x, prediction3.position.x == manager.find(4).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction3.order == 5, 'Prediction order should be 5'); $assert(prediction3.order == 5, 'Prediction order should be 5');
@ -307,15 +307,14 @@ class BalancedTestSuite extends TestSuite {
const prediction4 = manager.predict(0, null, null); const prediction4 = manager.predict(0, null, null);
this._plotPrediction(graph4, prediction4); this._plotPrediction(graph4, prediction4);
$assert( $assert(
prediction4.position.y > manager.find(5).getPosition().y prediction4.position.y > manager.find(5).getPosition().y &&
&& prediction4.position.x == manager.find(5).getPosition().x, prediction4.position.x == manager.find(5).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction4.order == 6, 'Prediction order should be 6'); $assert(prediction4.order == 6, 'Prediction order should be 6');
console.log('\tPredict nodes added only a root node:'); console.log('\tPredict nodes added only a root node:');
manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4) manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4).removeNode(5);
.removeNode(5);
manager.layout(); manager.layout();
const graph5 = manager.plot('testBalancedPredict5', { width: 1000, height: 400 }); const graph5 = manager.plot('testBalancedPredict5', { width: 1000, height: 400 });
const prediction5a = manager.predict(0, null, null); const prediction5a = manager.predict(0, null, null);
@ -323,14 +322,14 @@ class BalancedTestSuite extends TestSuite {
this._plotPrediction(graph5, prediction5a); this._plotPrediction(graph5, prediction5a);
this._plotPrediction(graph5, prediction5b); this._plotPrediction(graph5, prediction5b);
$assert( $assert(
prediction5a.position.x > manager.find(0).getPosition().x prediction5a.position.x > manager.find(0).getPosition().x &&
&& prediction5a.position.y == manager.find(0).getPosition().y, prediction5a.position.y == manager.find(0).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction5a.order == 0, 'Prediction order should be 0'); $assert(prediction5a.order == 0, 'Prediction order should be 0');
$assert( $assert(
prediction5a.position.x == prediction5b.position.x prediction5a.position.x == prediction5b.position.x &&
&& prediction5a.position.y == prediction5b.position.y, prediction5a.position.y == prediction5b.position.y,
'Both predictions should be the same', 'Both predictions should be the same',
); );
$assert(prediction5a.order == prediction5b.order, 'Both predictions should be the same'); $assert(prediction5a.order == prediction5b.order, 'Both predictions should be the same');
@ -351,8 +350,8 @@ class BalancedTestSuite extends TestSuite {
const prediction1a = manager.predict(0, 1, { x: 50, y: 50 }); const prediction1a = manager.predict(0, 1, { x: 50, y: 50 });
this._plotPrediction(graph1, prediction1a); this._plotPrediction(graph1, prediction1a);
$assert( $assert(
prediction1a.position.x == manager.find(1).getPosition().x prediction1a.position.x == manager.find(1).getPosition().x &&
&& prediction1a.position.y == manager.find(1).getPosition().y, prediction1a.position.y == manager.find(1).getPosition().y,
'Prediction position should be the same as node 1', 'Prediction position should be the same as node 1',
); );
$assert( $assert(
@ -363,8 +362,8 @@ class BalancedTestSuite extends TestSuite {
const prediction1b = manager.predict(0, 1, { x: 50, y: -50 }); const prediction1b = manager.predict(0, 1, { x: 50, y: -50 });
this._plotPrediction(graph1, prediction1b); this._plotPrediction(graph1, prediction1b);
$assert( $assert(
prediction1b.position.x == manager.find(1).getPosition().x prediction1b.position.x == manager.find(1).getPosition().x &&
&& prediction1b.position.y == manager.find(1).getPosition().y, prediction1b.position.y == manager.find(1).getPosition().y,
'Prediction position should be the same as node 1', 'Prediction position should be the same as node 1',
); );
$assert( $assert(
@ -375,8 +374,8 @@ class BalancedTestSuite extends TestSuite {
const prediction1c = manager.predict(0, 1, { x: -50, y: 50 }); const prediction1c = manager.predict(0, 1, { x: -50, y: 50 });
this._plotPrediction(graph1, prediction1c); this._plotPrediction(graph1, prediction1c);
$assert( $assert(
prediction1c.position.x < manager.find(0).getPosition().x prediction1c.position.x < manager.find(0).getPosition().x &&
&& prediction1c.position.y == manager.find(0).getPosition().y, prediction1c.position.y == manager.find(0).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1c.order == 1, 'Prediction order should be the same as node 1'); $assert(prediction1c.order == 1, 'Prediction order should be the same as node 1');
@ -384,8 +383,8 @@ class BalancedTestSuite extends TestSuite {
const prediction1d = manager.predict(0, 1, { x: -50, y: -50 }); const prediction1d = manager.predict(0, 1, { x: -50, y: -50 });
this._plotPrediction(graph1, prediction1d); this._plotPrediction(graph1, prediction1d);
$assert( $assert(
prediction1d.position.x < manager.find(0).getPosition().x prediction1d.position.x < manager.find(0).getPosition().x &&
&& prediction1d.position.y == manager.find(0).getPosition().y, prediction1d.position.y == manager.find(0).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1d.order == 1, 'Prediction order should be the same as node 1'); $assert(prediction1d.order == 1, 'Prediction order should be the same as node 1');
@ -399,8 +398,8 @@ class BalancedTestSuite extends TestSuite {
const prediction2a = manager.predict(0, 1, { x: 50, y: 50 }); const prediction2a = manager.predict(0, 1, { x: 50, y: 50 });
this._plotPrediction(graph2, prediction2a); this._plotPrediction(graph2, prediction2a);
$assert( $assert(
prediction2a.position.x > manager.find(0).getPosition().x prediction2a.position.x > manager.find(0).getPosition().x &&
&& prediction2a.position.y == manager.find(0).getPosition().y, prediction2a.position.y == manager.find(0).getPosition().y,
'Prediction is positioned incorrectly', 'Prediction is positioned incorrectly',
); );
$assert(prediction2a.order == 0, 'Prediction order should be 0'); $assert(prediction2a.order == 0, 'Prediction order should be 0');
@ -408,8 +407,8 @@ class BalancedTestSuite extends TestSuite {
const prediction2b = manager.predict(0, 1, { x: 50, y: -50 }); const prediction2b = manager.predict(0, 1, { x: 50, y: -50 });
this._plotPrediction(graph2, prediction2b); this._plotPrediction(graph2, prediction2b);
$assert( $assert(
prediction2b.position.x > manager.find(0).getPosition().x prediction2b.position.x > manager.find(0).getPosition().x &&
&& prediction2b.position.y == manager.find(0).getPosition().y, prediction2b.position.y == manager.find(0).getPosition().y,
'Prediction is positioned incorrectly', 'Prediction is positioned incorrectly',
); );
$assert(prediction2b.order == 0, 'Prediction order should be 0'); $assert(prediction2b.order == 0, 'Prediction order should be 0');
@ -417,8 +416,8 @@ class BalancedTestSuite extends TestSuite {
const prediction2c = manager.predict(0, 1, { x: -50, y: 50 }); const prediction2c = manager.predict(0, 1, { x: -50, y: 50 });
this._plotPrediction(graph2, prediction2c); this._plotPrediction(graph2, prediction2c);
$assert( $assert(
prediction2c.position.x == manager.find(1).getPosition().x prediction2c.position.x == manager.find(1).getPosition().x &&
&& prediction2c.position.y == manager.find(1).getPosition().y, prediction2c.position.y == manager.find(1).getPosition().y,
'Prediction position should be the same as node 1', 'Prediction position should be the same as node 1',
); );
$assert( $assert(
@ -429,8 +428,8 @@ class BalancedTestSuite extends TestSuite {
const prediction2d = manager.predict(0, 1, { x: -50, y: -50 }); const prediction2d = manager.predict(0, 1, { x: -50, y: -50 });
this._plotPrediction(graph2, prediction2d); this._plotPrediction(graph2, prediction2d);
$assert( $assert(
prediction2d.position.x == manager.find(1).getPosition().x prediction2d.position.x == manager.find(1).getPosition().x &&
&& prediction2d.position.y == manager.find(1).getPosition().y, prediction2d.position.y == manager.find(1).getPosition().y,
'Prediction position should be the same as node 1', 'Prediction position should be the same as node 1',
); );
$assert( $assert(
@ -448,8 +447,8 @@ class BalancedTestSuite extends TestSuite {
const prediction3a = manager.predict(0, 1, { x: 50, y: 50 }); const prediction3a = manager.predict(0, 1, { x: 50, y: 50 });
this._plotPrediction(graph3, prediction3a); this._plotPrediction(graph3, prediction3a);
$assert( $assert(
prediction3a.position.x == manager.find(2).getPosition().x prediction3a.position.x == manager.find(2).getPosition().x &&
&& prediction3a.position.y > manager.find(2).getPosition().y, prediction3a.position.y > manager.find(2).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction3a.order == 4, 'Prediction order should be 4'); $assert(prediction3a.order == 4, 'Prediction order should be 4');
@ -457,17 +456,17 @@ class BalancedTestSuite extends TestSuite {
const prediction3b = manager.predict(0, 1, { x: 50, y: -50 }); const prediction3b = manager.predict(0, 1, { x: 50, y: -50 });
this._plotPrediction(graph3, prediction3b); this._plotPrediction(graph3, prediction3b);
$assert( $assert(
prediction3b.position.x == manager.find(1).getPosition().x prediction3b.position.x == manager.find(1).getPosition().x &&
&& prediction3b.position.y == manager.find(1).getPosition().y prediction3b.position.y == manager.find(1).getPosition().y &&
&& prediction3b.order == manager.find(1).getOrder(), prediction3b.order == manager.find(1).getOrder(),
'Prediction should be the exact same as dragged node', 'Prediction should be the exact same as dragged node',
); );
const prediction3c = manager.predict(0, 1, { x: -50, y: 50 }); const prediction3c = manager.predict(0, 1, { x: -50, y: 50 });
this._plotPrediction(graph3, prediction3c); this._plotPrediction(graph3, prediction3c);
$assert( $assert(
prediction3c.position.x < manager.find(0).getPosition().x prediction3c.position.x < manager.find(0).getPosition().x &&
&& prediction3c.position.y == manager.find(0).getPosition().y, prediction3c.position.y == manager.find(0).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction3c.order == 1, 'Prediction order should be 1'); $assert(prediction3c.order == 1, 'Prediction order should be 1');
@ -475,8 +474,8 @@ class BalancedTestSuite extends TestSuite {
const prediction3d = manager.predict(0, 1, { x: -50, y: -50 }); const prediction3d = manager.predict(0, 1, { x: -50, y: -50 });
this._plotPrediction(graph3, prediction3d); this._plotPrediction(graph3, prediction3d);
$assert( $assert(
prediction3d.position.x < manager.find(0).getPosition().x prediction3d.position.x < manager.find(0).getPosition().x &&
&& prediction3d.position.y == manager.find(0).getPosition().y, prediction3d.position.y == manager.find(0).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction3d.order == 1, 'Prediction order should be 1'); $assert(prediction3d.order == 1, 'Prediction order should be 1');
@ -484,8 +483,8 @@ class BalancedTestSuite extends TestSuite {
const prediction3e = manager.predict(0, 1, { x: 50, y: 0 }); const prediction3e = manager.predict(0, 1, { x: 50, y: 0 });
this._plotPrediction(graph3, prediction3e); this._plotPrediction(graph3, prediction3e);
$assert( $assert(
prediction3e.position.x == manager.find(1).getPosition().x prediction3e.position.x == manager.find(1).getPosition().x &&
&& prediction3e.position.y == manager.find(1).getPosition().y, prediction3e.position.y == manager.find(1).getPosition().y,
'Prediction position should be the same as node 1', 'Prediction position should be the same as node 1',
); );
$assert( $assert(

96
packages/mindplot/test/playground/layout/SymmetricTestSuite.js
View File

@ -78,18 +78,18 @@ class SymmetricTestSuite extends TestSuite {
'Symmetry is not respected', 'Symmetry is not respected',
); );
$assert( $assert(
manager.find(11).getPosition().y - manager.find(6).getPosition().y manager.find(11).getPosition().y - manager.find(6).getPosition().y ===
=== -(manager.find(12).getPosition().y - manager.find(6).getPosition().y), -(manager.find(12).getPosition().y - manager.find(6).getPosition().y),
'Symmetry is not respected', 'Symmetry is not respected',
); );
$assert( $assert(
manager.find(8).getPosition().y - manager.find(1).getPosition().y manager.find(8).getPosition().y - manager.find(1).getPosition().y ==
== -(manager.find(11).getPosition().y - manager.find(1).getPosition().y), -(manager.find(11).getPosition().y - manager.find(1).getPosition().y),
'Symmetry is not respected', 'Symmetry is not respected',
); );
$assert( $assert(
manager.find(9).getPosition().y - manager.find(1).getPosition().y manager.find(9).getPosition().y - manager.find(1).getPosition().y ==
== -(manager.find(11).getPosition().y - manager.find(1).getPosition().y), -(manager.find(11).getPosition().y - manager.find(1).getPosition().y),
'Symmetry is not respected', 'Symmetry is not respected',
); );
@ -135,8 +135,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1a = manager.predict(9, null, { x: -280, y: 45 }); const prediction1a = manager.predict(9, null, { x: -280, y: 45 });
this._plotPrediction(graph1, prediction1a); this._plotPrediction(graph1, prediction1a);
$assert( $assert(
prediction1a.position.x < manager.find(9).getPosition().x prediction1a.position.x < manager.find(9).getPosition().x &&
&& prediction1a.position.y == manager.find(9).getPosition().y, prediction1a.position.y == manager.find(9).getPosition().y,
'Prediction incorrectly positioned', 'Prediction incorrectly positioned',
); );
$assert(prediction1a.order == 0, 'Prediction order should be 0'); $assert(prediction1a.order == 0, 'Prediction order should be 0');
@ -145,8 +145,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1b = manager.predict(1, null, { x: -155, y: -90 }); const prediction1b = manager.predict(1, null, { x: -155, y: -90 });
this._plotPrediction(graph1, prediction1b); this._plotPrediction(graph1, prediction1b);
$assert( $assert(
prediction1b.position.x > manager.find(1).getPosition().x prediction1b.position.x > manager.find(1).getPosition().x &&
&& prediction1b.position.y == manager.find(1).getPosition().y, prediction1b.position.y == manager.find(1).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1b.order == 0, 'Prediction order should be 0'); $assert(prediction1b.order == 0, 'Prediction order should be 0');
@ -160,8 +160,8 @@ class SymmetricTestSuite extends TestSuite {
// Prediction calculator error // Prediction calculator error
$assert( $assert(
prediction2d.position.y < manager.find(7).getPosition().y prediction2d.position.y < manager.find(7).getPosition().y &&
&& prediction2d.position.x == manager.find(7).getPosition().x, prediction2d.position.x == manager.find(7).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2d.order == 0, 'Prediction order should be 0'); $assert(prediction2d.order == 0, 'Prediction order should be 0');
@ -171,9 +171,9 @@ class SymmetricTestSuite extends TestSuite {
this._plotPrediction(graph2, prediction2a); this._plotPrediction(graph2, prediction2a);
$assert( $assert(
prediction2a.position.y > manager.find(7).getPosition().y prediction2a.position.y > manager.find(7).getPosition().y &&
&& prediction2a.position.y < manager.find(8).getPosition().y prediction2a.position.y < manager.find(8).getPosition().y &&
&& prediction2a.position.x == manager.find(7).getPosition().x, prediction2a.position.x == manager.find(7).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2a.order == 1, 'Prediction order should be 1'); $assert(prediction2a.order == 1, 'Prediction order should be 1');
@ -182,9 +182,9 @@ class SymmetricTestSuite extends TestSuite {
const prediction2b = manager.predict(5, null, { x: 375, y: 45 }); const prediction2b = manager.predict(5, null, { x: 375, y: 45 });
this._plotPrediction(graph2, prediction2b); this._plotPrediction(graph2, prediction2b);
$assert( $assert(
prediction2b.position.y > manager.find(8).getPosition().y prediction2b.position.y > manager.find(8).getPosition().y &&
&& prediction2b.position.y < manager.find(11).getPosition().y prediction2b.position.y < manager.find(11).getPosition().y &&
&& prediction2b.position.x == manager.find(7).getPosition().x, prediction2b.position.x == manager.find(7).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2b.order == 2, 'Prediction order should be 2'); $assert(prediction2b.order == 2, 'Prediction order should be 2');
@ -193,8 +193,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction2c = manager.predict(5, null, { x: 375, y: 65 }); const prediction2c = manager.predict(5, null, { x: 375, y: 65 });
this._plotPrediction(graph2, prediction2c); this._plotPrediction(graph2, prediction2c);
$assert( $assert(
prediction2c.position.y > manager.find(11).getPosition().y prediction2c.position.y > manager.find(11).getPosition().y &&
&& prediction2c.position.x == manager.find(11).getPosition().x, prediction2c.position.x == manager.find(11).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction2c.order == 3, 'Prediction order should be 3'); $assert(prediction2c.order == 3, 'Prediction order should be 3');
@ -206,9 +206,9 @@ class SymmetricTestSuite extends TestSuite {
const prediction3a = manager.predict(3, null, { x: 280, y: 45 }); const prediction3a = manager.predict(3, null, { x: 280, y: 45 });
this._plotPrediction(graph3, prediction3a); this._plotPrediction(graph3, prediction3a);
$assert( $assert(
prediction3a.position.y > manager.find(5).getPosition().y prediction3a.position.y > manager.find(5).getPosition().y &&
&& prediction3a.position.y < manager.find(6).getPosition().y prediction3a.position.y < manager.find(6).getPosition().y &&
&& prediction3a.position.x == manager.find(5).getPosition().x, prediction3a.position.x == manager.find(5).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction3a.order == 2, 'Prediction order should be 2'); $assert(prediction3a.order == 2, 'Prediction order should be 2');
@ -217,8 +217,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction3b = manager.predict(3, null, { x: 255, y: 110 }); const prediction3b = manager.predict(3, null, { x: 255, y: 110 });
this._plotPrediction(graph3, prediction3b); this._plotPrediction(graph3, prediction3b);
$assert( $assert(
prediction3b.position.y > manager.find(6).getPosition().y prediction3b.position.y > manager.find(6).getPosition().y &&
&& prediction3b.position.x == manager.find(6).getPosition().x, prediction3b.position.x == manager.find(6).getPosition().x,
'Prediction incorrectly positioned', 'Prediction incorrectly positioned',
); );
$assert(prediction3b.order == 3, 'Prediction order should be 3'); $assert(prediction3b.order == 3, 'Prediction order should be 3');
@ -229,9 +229,9 @@ class SymmetricTestSuite extends TestSuite {
const prediction4 = manager.predict(2, null, { x: -260, y: 0 }); const prediction4 = manager.predict(2, null, { x: -260, y: 0 });
this._plotPrediction(graph4, prediction4); this._plotPrediction(graph4, prediction4);
$assert( $assert(
prediction4.position.y > manager.find(9).getPosition().y prediction4.position.y > manager.find(9).getPosition().y &&
&& prediction4.position.y < manager.find(10).getPosition().y prediction4.position.y < manager.find(10).getPosition().y &&
&& prediction4.position.x == manager.find(9).getPosition().x, prediction4.position.x == manager.find(9).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction4.order == 1, 'Prediction order should be 1'); $assert(prediction4.order == 1, 'Prediction order should be 1');
@ -242,8 +242,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction5a = manager.predict(1, null, null); const prediction5a = manager.predict(1, null, null);
this._plotPrediction(graph5, prediction5a); this._plotPrediction(graph5, prediction5a);
$assert( $assert(
prediction5a.position.y == manager.find(1).getPosition().y prediction5a.position.y == manager.find(1).getPosition().y &&
&& prediction5a.position.x > manager.find(1).getPosition().x, prediction5a.position.x > manager.find(1).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction5a.order == 0, 'Prediction order should be 0'); $assert(prediction5a.order == 0, 'Prediction order should be 0');
@ -251,9 +251,9 @@ class SymmetricTestSuite extends TestSuite {
const prediction5b = manager.predict(2, null, null); const prediction5b = manager.predict(2, null, null);
this._plotPrediction(graph5, prediction5b); this._plotPrediction(graph5, prediction5b);
$assert( $assert(
prediction5b.position.y > manager.find(10).getPosition().y prediction5b.position.y > manager.find(10).getPosition().y &&
&& prediction5b.position.x < manager.find(2).getPosition().x prediction5b.position.x < manager.find(2).getPosition().x &&
&& prediction5b.position.x == manager.find(10).getPosition().x, prediction5b.position.x == manager.find(10).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction5b.order == 2, 'Prediction order should be 2'); $assert(prediction5b.order == 2, 'Prediction order should be 2');
@ -261,9 +261,9 @@ class SymmetricTestSuite extends TestSuite {
const prediction5c = manager.predict(3, null, null); const prediction5c = manager.predict(3, null, null);
this._plotPrediction(graph5, prediction5c); this._plotPrediction(graph5, prediction5c);
$assert( $assert(
prediction5c.position.y > manager.find(6).getPosition().y prediction5c.position.y > manager.find(6).getPosition().y &&
&& prediction5c.position.x > manager.find(3).getPosition().x prediction5c.position.x > manager.find(3).getPosition().x &&
&& prediction5c.position.x == manager.find(6).getPosition().x, prediction5c.position.x == manager.find(6).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction5c.order == 3, 'Prediction order should be 3'); $assert(prediction5c.order == 3, 'Prediction order should be 3');
@ -271,8 +271,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction5d = manager.predict(10, null, null); const prediction5d = manager.predict(10, null, null);
this._plotPrediction(graph5, prediction5d); this._plotPrediction(graph5, prediction5d);
$assert( $assert(
prediction5d.position.y == manager.find(10).getPosition().y prediction5d.position.y == manager.find(10).getPosition().y &&
&& prediction5d.position.x < manager.find(10).getPosition().x, prediction5d.position.x < manager.find(10).getPosition().x,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction5d.order == 0, 'Prediction order should be 0'); $assert(prediction5d.order == 0, 'Prediction order should be 0');
@ -295,8 +295,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1a = manager.predict(1, 2, { x: -250, y: -20 }); const prediction1a = manager.predict(1, 2, { x: -250, y: -20 });
this._plotPrediction(graph1, prediction1a); this._plotPrediction(graph1, prediction1a);
$assert( $assert(
prediction1a.position.x == manager.find(2).getPosition().x prediction1a.position.x == manager.find(2).getPosition().x &&
&& prediction1a.position.y == manager.find(2).getPosition().y, prediction1a.position.y == manager.find(2).getPosition().y,
'Prediction position should be the same as node 2', 'Prediction position should be the same as node 2',
); );
$assert( $assert(
@ -307,8 +307,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1b = manager.predict(1, 2, { x: -250, y: 20 }); const prediction1b = manager.predict(1, 2, { x: -250, y: 20 });
this._plotPrediction(graph1, prediction1b); this._plotPrediction(graph1, prediction1b);
$assert( $assert(
prediction1b.position.x == manager.find(2).getPosition().x prediction1b.position.x == manager.find(2).getPosition().x &&
&& prediction1b.position.y == manager.find(2).getPosition().y, prediction1b.position.y == manager.find(2).getPosition().y,
'Prediction position should be the same as node 2', 'Prediction position should be the same as node 2',
); );
$assert( $assert(
@ -319,8 +319,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1c = manager.predict(0, 2, { x: -100, y: -20 }); const prediction1c = manager.predict(0, 2, { x: -100, y: -20 });
this._plotPrediction(graph1, prediction1c); this._plotPrediction(graph1, prediction1c);
$assert( $assert(
prediction1c.position.x == manager.find(1).getPosition().x prediction1c.position.x == manager.find(1).getPosition().x &&
&& prediction1c.position.y < manager.find(1).getPosition().y, prediction1c.position.y < manager.find(1).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1c.order == 1, 'Prediction order should be 1'); $assert(prediction1c.order == 1, 'Prediction order should be 1');
@ -328,8 +328,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1d = manager.predict(0, 2, { x: -100, y: 20 }); const prediction1d = manager.predict(0, 2, { x: -100, y: 20 });
this._plotPrediction(graph1, prediction1d); this._plotPrediction(graph1, prediction1d);
$assert( $assert(
prediction1d.position.x == manager.find(1).getPosition().x prediction1d.position.x == manager.find(1).getPosition().x &&
&& prediction1d.position.y > manager.find(1).getPosition().y, prediction1d.position.y > manager.find(1).getPosition().y,
'Prediction is incorrectly positioned', 'Prediction is incorrectly positioned',
); );
$assert(prediction1d.order == 3, 'Prediction order should be 3'); $assert(prediction1d.order == 3, 'Prediction order should be 3');
@ -337,8 +337,8 @@ class SymmetricTestSuite extends TestSuite {
const prediction1e = manager.predict(1, 2, { x: -250, y: 0 }); const prediction1e = manager.predict(1, 2, { x: -250, y: 0 });
this._plotPrediction(graph1, prediction1e); this._plotPrediction(graph1, prediction1e);
$assert( $assert(
prediction1e.position.x == manager.find(2).getPosition().x prediction1e.position.x == manager.find(2).getPosition().x &&
&& prediction1e.position.y == manager.find(2).getPosition().y, prediction1e.position.y == manager.find(2).getPosition().y,
'Prediction position should be the same as node 2', 'Prediction position should be the same as node 2',
); );
$assert( $assert(

38
packages/mindplot/test/playground/layout/TestSuite.js
View File

@ -164,11 +164,9 @@ class TestSuite extends ChildrenSorterStrategy {
let events = []; let events = [];
manager.addEvent('change', (event) => { manager.addEvent('change', (event) => {
console.log( console.log(
`\tUpdated nodes: {id:${event.getId() `\tUpdated nodes: {id:${event.getId()} order: ${event.getOrder()}position: {${
} order: ${event.getOrder() event.getPosition().x
}position: {${event.getPosition().x }${event.getPosition().y}}`,
}${event.getPosition().y
}}`,
); );
events.push(event); events.push(event);
}); });
@ -206,11 +204,9 @@ class TestSuite extends ChildrenSorterStrategy {
let events = []; let events = [];
manager.addEvent('change', (event) => { manager.addEvent('change', (event) => {
console.log( console.log(
`\tUpdated nodes: {id:${event.getId() `\tUpdated nodes: {id:${event.getId()} order: ${event.getOrder()}position: {${
} order: ${event.getOrder() event.getPosition().x
}position: {${event.getPosition().x }${event.getPosition().y}}`,
}${event.getPosition().y
}}`,
); );
events.push(event); events.push(event);
}); });
@ -259,12 +255,7 @@ class TestSuite extends ChildrenSorterStrategy {
const pos = event.getPosition(); const pos = event.getPosition();
const posStr = pos ? `,position: {${pos.x}${pos.y}` : ''; const posStr = pos ? `,position: {${pos.x}${pos.y}` : '';
const node = manager.find(event.getId()); const node = manager.find(event.getId());
console.log( console.log(`\tUpdated nodes: {id:${event.getId()} order: ${event.getOrder()}${posStr}}`);
`\tUpdated nodes: {id:${event.getId()
} order: ${event.getOrder()
}${posStr
}}`,
);
events.push(event); events.push(event);
}); });
manager.layout(true); manager.layout(true);
@ -349,8 +340,8 @@ class TestSuite extends ChildrenSorterStrategy {
'Node 6 and their children should be to the left of node 4', 'Node 6 and their children should be to the left of node 4',
); );
$assert( $assert(
manager.find(6).getPosition().x > manager.find(11).getPosition().x manager.find(6).getPosition().x > manager.find(11).getPosition().x &&
&& manager.find(11).getPosition().x == manager.find(12).getPosition().x, manager.find(11).getPosition().x == manager.find(12).getPosition().x,
'Nodes 11 and 12 should be to the left of node 6 and horizontally aligned', 'Nodes 11 and 12 should be to the left of node 6 and horizontally aligned',
); );
@ -471,8 +462,8 @@ class TestSuite extends ChildrenSorterStrategy {
// Check that all enlarged nodes shift children accordingly // Check that all enlarged nodes shift children accordingly
$assert( $assert(
manager.find(10).getPosition().x > manager.find(3).getPosition().x manager.find(10).getPosition().x > manager.find(3).getPosition().x &&
&& manager.find(10).getPosition().x == manager.find(11).getPosition().x, manager.find(10).getPosition().x == manager.find(11).getPosition().x,
'Nodes 10 and 11 should be horizontally algined and to the right of enlarged node 3', 'Nodes 10 and 11 should be horizontally algined and to the right of enlarged node 3',
); );
const xPosNode7 = manager.find(7).getPosition().x; const xPosNode7 = manager.find(7).getPosition().x;
@ -564,12 +555,7 @@ class TestSuite extends ChildrenSorterStrategy {
} }
const { position } = prediction; const { position } = prediction;
const { order } = prediction; const { order } = prediction;
console.log( console.log(`\t\tprediction {order:${order} position: (${position.x}${position.y})}`);
`\t\tprediction {order:${order
} position: (${position.x
}${position.y
})}`,
);
const cx = position.x + canvas.width / 2 - TestSuite.NODE_SIZE.width / 2; const cx = position.x + canvas.width / 2 - TestSuite.NODE_SIZE.width / 2;
const cy = position.y + canvas.height / 2 - TestSuite.NODE_SIZE.height / 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); canvas.rect(cx, cy, TestSuite.NODE_SIZE.width, TestSuite.NODE_SIZE.height);

5518
packages/mindplot/test/playground/layout/lib/raphael-min.js vendored
View File

File diff suppressed because one or more lines are too long

3
packages/mindplot/test/playground/layout/utils.js
View File

@ -54,6 +54,7 @@ Grid.prototype._createContainer = function () {
result.style.borderCollapse = 'collapse'; result.style.borderCollapse = 'collapse';
result.style.emptyCells = 'show'; result.style.emptyCells = 'show';
result.style.position = 'absolute'; result.style.position = 'absolute';
result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>'; result.innerHTML =
'<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
return result; return result;
}; };

6
packages/mindplot/test/unit/layout/BalancedTestSuite.test.js
View File

@ -6,7 +6,8 @@ describe('Balanced Test Suite', () => {
const position = { x: 0, y: 0 }; const position = { x: 0, y: 0 };
const manager = new LayoutManager(0, Constants.ROOT_NODE_SIZE); const manager = new LayoutManager(0, Constants.ROOT_NODE_SIZE);
manager.addNode(1, Constants.NODE_SIZE, position); manager.addNode(1, Constants.NODE_SIZE, position);
manager.connectNode(0, 1, 0); manager.layout(); manager.connectNode(0, 1, 0);
manager.layout();
manager.addNode(2, Constants.NODE_SIZE, position); manager.addNode(2, Constants.NODE_SIZE, position);
manager.connectNode(0, 2, 1); manager.connectNode(0, 2, 1);
@ -194,8 +195,7 @@ describe('Balanced Test Suite', () => {
}); });
test('Predict nodes added only a root node', () => { test('Predict nodes added only a root node', () => {
manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4) manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4).removeNode(5);
.removeNode(5);
manager.layout(); manager.layout();
const prediction5a = manager.predict(0, null, null); const prediction5a = manager.predict(0, null, null);
const prediction5b = manager.predict(0, null, { x: 40, y: 100 }); const prediction5b = manager.predict(0, null, { x: 40, y: 100 });

15
packages/mindplot/test/unit/layout/SymmetricTestSuite.test.js
View File

@ -40,12 +40,15 @@ describe('Symmetric Test Suite', () => {
test('All nodes should be positioned symmetrically with respect to their common ancestors', () => { test('All nodes should be positioned symmetrically with respect to their common ancestors', () => {
expect(manager.find(14).getPosition().y).toEqual(manager.find(13).getPosition().y); expect(manager.find(14).getPosition().y).toEqual(manager.find(13).getPosition().y);
expect(manager.find(5).getPosition().y).toEqual(manager.find(10).getPosition().y); expect(manager.find(5).getPosition().y).toEqual(manager.find(10).getPosition().y);
expect(manager.find(11).getPosition().y - manager.find(6).getPosition().y) expect(manager.find(11).getPosition().y - manager.find(6).getPosition().y).toEqual(
.toEqual(-(manager.find(12).getPosition().y - manager.find(6).getPosition().y)); -(manager.find(12).getPosition().y - manager.find(6).getPosition().y),
expect(manager.find(8).getPosition().y - manager.find(1).getPosition().y) );
.toEqual(-(manager.find(11).getPosition().y - manager.find(1).getPosition().y)); expect(manager.find(8).getPosition().y - manager.find(1).getPosition().y).toEqual(
expect(manager.find(9).getPosition().y - manager.find(1).getPosition().y) -(manager.find(11).getPosition().y - manager.find(1).getPosition().y),
.toEqual(-(manager.find(11).getPosition().y - manager.find(1).getPosition().y)); );
expect(manager.find(9).getPosition().y - manager.find(1).getPosition().y).toEqual(
-(manager.find(11).getPosition().y - manager.find(1).getPosition().y),
);
}); });
}); });

26
packages/web2d/src/components/Group.js
View File

@ -44,8 +44,8 @@ class Group extends ElementClass {
} }
/** /**
* Remove an element as a child to the object. * Remove an element as a child to the object.
*/ */
removeChild(element) { removeChild(element) {
if (!$defined(element)) { if (!$defined(element)) {
throw new Error('Child element can not be null'); throw new Error('Child element can not be null');
@ -64,8 +64,8 @@ class Group extends ElementClass {
} }
/** /**
* Appends an element as a child to the object. * Appends an element as a child to the object.
*/ */
append(element) { append(element) {
if (!$defined(element)) { if (!$defined(element)) {
throw Error('Child element can not be null'); throw Error('Child element can not be null');
@ -92,15 +92,15 @@ class Group extends ElementClass {
} }
/** /**
* The group element is a containing blocks for this content * The group element is a containing blocks for this content
* - they define a CSS2 "block level box". * - they define a CSS2 "block level box".
* Inside the containing block a local coordinate system is * Inside the containing block a local coordinate system is
* defined for any sub-elements using the coordsize and coordorigin attributes. * defined for any sub-elements using the coordsize and coordorigin attributes.
* All CSS2 positioning information is expressed in terms of this local coordinate space. * All CSS2 positioning information is expressed in terms of this local coordinate space.
* Consequently CSS2 position attributes (left, top, width, height and so on) * Consequently CSS2 position attributes (left, top, width, height and so on)
* have no unit specifier - * have no unit specifier -
* they are simple numbers, not CSS length quantities. * they are simple numbers, not CSS length quantities.
*/ */
setCoordSize(width, height) { setCoordSize(width, height) {
this.peer.setCoordSize(width, height); this.peer.setCoordSize(width, height);
} }

6
packages/web2d/src/components/Line.js
View File

@ -53,9 +53,9 @@ class Line extends ElementClass {
} }
/** /**
* Defines the start and the end line arrow style. * Defines the start and the end line arrow style.
* Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron" * Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron"
* */ * */
setArrowStyle(startStyle, endStyle) { setArrowStyle(startStyle, endStyle) {
this.peer.setArrowStyle(startStyle, endStyle); this.peer.setArrowStyle(startStyle, endStyle);
} }

14
packages/web2d/src/components/Point.js
View File

@ -18,19 +18,19 @@
class Point { class Point {
/** /**
* @constructs * @constructs
* @param {Number} x coordinate * @param {Number} x coordinate
* @param {Number} y coordinate * @param {Number} y coordinate
*/ */
constructor(x, y) { constructor(x, y) {
this.x = x; this.x = x;
this.y = y; this.y = y;
} }
/** /**
* @param {Number} x coordinate * @param {Number} x coordinate
* @param {Number} y coordinate * @param {Number} y coordinate
*/ */
setValue(x, y) { setValue(x, y) {
this.x = x; this.x = x;
this.y = y; this.y = y;

30
packages/web2d/src/components/Toolkit.js
View File

@ -1,19 +1,19 @@
/* /*
* Copyright [2021] [wisemapping] * Copyright [2021] [wisemapping]
* *
* Licensed under WiseMapping Public License, Version 1.0 (the "License"). * Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the * It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page; * "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
* You may obtain a copy of the license at * You may obtain a copy of the license at
* *
* http://www.wisemapping.org/license * http://www.wisemapping.org/license
* *
* Unless required by applicable law or agreed to in writing, software * Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import FontPeer from './peer/svg/FontPeer'; import FontPeer from './peer/svg/FontPeer';
import WorkspacePeer from './peer/svg/WorkspacePeer'; import WorkspacePeer from './peer/svg/WorkspacePeer';

56
packages/web2d/src/components/Workspace.js
View File

@ -48,8 +48,8 @@ class Workspace extends ElementClass {
} }
/** /**
* Appends an element as a child to the object. * Appends an element as a child to the object.
*/ */
append(element) { append(element) {
if (!$defined(element)) { if (!$defined(element)) {
throw new Error('Child element can not be null'); throw new Error('Child element can not be null');
@ -74,8 +74,8 @@ class Workspace extends ElementClass {
} }
/** /**
* Create a new div element that will be responsible for containing the workspace elements. * Create a new div element that will be responsible for containing the workspace elements.
*/ */
static _createDivContainer() { static _createDivContainer() {
const container = window.document.createElement('div'); const container = window.document.createElement('div');
container.style.position = 'relative'; container.style.position = 'relative';
@ -88,13 +88,13 @@ class Workspace extends ElementClass {
} }
/** /**
* Set the workspace area size. It can be defined using different units: * Set the workspace area size. It can be defined using different units:
* in (inches; 1in=2.54cm) * in (inches; 1in=2.54cm)
* cm (centimeters; 1cm=10mm) * cm (centimeters; 1cm=10mm)
* mm (millimeters) * mm (millimeters)
* pt (points; 1pt=1/72in) * pt (points; 1pt=1/72in)
* pc (picas; 1pc=12pt) * pc (picas; 1pc=12pt)
*/ */
setSize(width, height) { setSize(width, height) {
// HTML container must have the size of the group element. // HTML container must have the size of the group element.
if ($defined(width)) { if ($defined(width)) {
@ -108,37 +108,37 @@ class Workspace extends ElementClass {
} }
/** /**
* The workspace element is a containing blocks for this content * The workspace element is a containing blocks for this content
* - they define a CSS2 "block level box". * - they define a CSS2 "block level box".
* Inside the containing block a local coordinate system is * Inside the containing block a local coordinate system is
* defined for any sub-elements using the coordsize and coordorigin attributes. * defined for any sub-elements using the coordsize and coordorigin attributes.
* All CSS2 positioning information is expressed in terms of this local coordinate space. * All CSS2 positioning information is expressed in terms of this local coordinate space.
* Consequently CSS2 position attributes (left, top, width, height * Consequently CSS2 position attributes (left, top, width, height
* and so on) have no unit specifier - * and so on) have no unit specifier -
* they are simple numbers, not CSS length quantities. * they are simple numbers, not CSS length quantities.
*/ */
setCoordSize(width, height) { setCoordSize(width, height) {
this.peer.setCoordSize(parseInt(width, 10), parseInt(height, 10)); this.peer.setCoordSize(parseInt(width, 10), parseInt(height, 10));
} }
/** /**
* @Todo: Complete Doc * @Todo: Complete Doc
*/ */
setCoordOrigin(x, y) { setCoordOrigin(x, y) {
this.peer.setCoordOrigin(x, y); this.peer.setCoordOrigin(x, y);
} }
/** /**
* @Todo: Complete Doc * @Todo: Complete Doc
*/ */
getCoordOrigin() { getCoordOrigin() {
return this.peer.getCoordOrigin(); return this.peer.getCoordOrigin();
} }
// Private method declaration area // Private method declaration area
/** /**
* All the SVG elements will be children of this HTML element. * All the SVG elements will be children of this HTML element.
*/ */
_getHtmlContainer() { _getHtmlContainer() {
return this._htmlContainer; return this._htmlContainer;
} }
@ -176,8 +176,8 @@ class Workspace extends ElementClass {
} }
/** /**
* Remove an element as a child to the object. * Remove an element as a child to the object.
*/ */
removeChild(element) { removeChild(element) {
if (!$defined(element)) { if (!$defined(element)) {
throw new Error('Child element can not be null'); throw new Error('Child element can not be null');

19
packages/web2d/src/components/peer/svg/ElementPeer.js
View File

@ -83,19 +83,16 @@ class ElementPeer {
children = children.filter((c) => c !== elementPeer); children = children.filter((c) => c !== elementPeer);
this.setChildren(children); this.setChildren(children);
$assert( $assert(children.length < oldLength, `element could not be removed:${elementPeer}`);
children.length < oldLength,
`element could not be removed:${elementPeer}`,
);
// Append element as a child. // Append element as a child.
this._native.removeChild(elementPeer._native); this._native.removeChild(elementPeer._native);
} }
/** /**
* http://www.w3.org/TR/DOM-Level-3-Events/events.html * http://www.w3.org/TR/DOM-Level-3-Events/events.html
* http://developer.mozilla.org/en/docs/addEvent * http://developer.mozilla.org/en/docs/addEvent
*/ */
addEvent(type, listener) { addEvent(type, listener) {
// wrap it so it can be ~backward compatible with jQuery.trigger // wrap it so it can be ~backward compatible with jQuery.trigger
const wrappedListener = (e) => listener(e, e.detail); const wrappedListener = (e) => listener(e, e.detail);
@ -223,15 +220,15 @@ class ElementPeer {
} }
/** /**
* Move element to the front * Move element to the front
*/ */
moveToFront() { moveToFront() {
this._native.parentNode.appendChild(this._native); this._native.parentNode.appendChild(this._native);
} }
/** /**
* Move element to the back * Move element to the back
*/ */
moveToBack() { moveToBack() {
this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild); this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
} }

4
packages/web2d/src/components/peer/svg/ElipsePeer.js
View File

@ -43,8 +43,8 @@ class ElipsePeer extends ElementPeer {
setPosition(pcx, pcy) { setPosition(pcx, pcy) {
const size = this.getSize(); const size = this.getSize();
const cx = (size.width / 2) + pcx; const cx = size.width / 2 + pcx;
const cy = (size.height / 2) + pcy; const cy = size.height / 2 + pcy;
if ($defined(cx)) { if ($defined(cx)) {
this._native.setAttribute('cx', cx); this._native.setAttribute('cx', cx);

4
packages/web2d/src/components/peer/svg/LinePeer.js
View File

@ -49,8 +49,8 @@ class LinePeer extends ElementPeer {
} }
/* /*
* http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end
*/ */
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
setArrowStyle(startStyle, endStyle) { setArrowStyle(startStyle, endStyle) {
if ($defined(startStyle)) { if ($defined(startStyle)) {

21
packages/web2d/src/components/peer/svg/PolyLinePeer.js
View File

@ -67,12 +67,7 @@ class PolyLinePeer extends ElementPeer {
} }
_updateStraightPath() { _updateStraightPath() {
if ( if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
$defined(this._x1)
&& $defined(this._x2)
&& $defined(this._y1)
&& $defined(this._y2)
) {
const path = PolyLineUtils.buildStraightPath.call( const path = PolyLineUtils.buildStraightPath.call(
this, this,
this.breakDistance, this.breakDistance,
@ -90,12 +85,7 @@ class PolyLinePeer extends ElementPeer {
const y1 = this._y1; const y1 = this._y1;
const x2 = this._x2; const x2 = this._x2;
const y2 = this._y2; const y2 = this._y2;
if ( if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
$defined(x1)
&& $defined(x2)
&& $defined(y1)
&& $defined(y2)
) {
const diff = x2 - x1; const diff = x2 - x1;
const middlex = diff / 2 + x1; const middlex = diff / 2 + x1;
let signx = 1; let signx = 1;
@ -114,12 +104,7 @@ class PolyLinePeer extends ElementPeer {
} }
_updateCurvePath() { _updateCurvePath() {
if ( if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
$defined(this._x1)
&& $defined(this._x2)
&& $defined(this._y1)
&& $defined(this._y2)
) {
const path = PolyLineUtils.buildCurvedPath.call( const path = PolyLineUtils.buildCurvedPath.call(
this, this,
this.breakDistance, this.breakDistance,

36
packages/web2d/src/components/peer/svg/WorkspacePeer.js
View File

@ -30,24 +30,24 @@ class WorkspacePeer extends ElementPeer {
} }
/** /**
* http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox attribute * http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox attribute
* It is often desirable to specify that a given set of graphics * It is often desirable to specify that a given set of graphics
* stretch to fit a particular container element. The viewBox attribute * stretch to fit a particular container element. The viewBox attribute
* provides this capability. * provides this capability.
* *
* All elements that establish a new viewport (see elements that establish viewports), * All elements that establish a new viewport (see elements that establish viewports),
* plus the 'marker', 'pattern' and 'view' elements have attribute viewBox. * plus the 'marker', 'pattern' and 'view' elements have attribute viewBox.
* The value of the viewBox attribute is a list of four numbers <min-x>, <min-y>, * The value of the viewBox attribute is a list of four numbers <min-x>, <min-y>,
* <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle * <width> and <height>, separated by whitespace and/or a comma, which specify a rectangle
* in user space which should be mapped to the bounds of the viewport established by * in user space which should be mapped to the bounds of the viewport established by
* the given element, taking into account attribute preserveAspectRatio. If specified, * the given element, taking into account attribute preserveAspectRatio. If specified,
* an additional transformation is applied to all descendants of the given element to * an additional transformation is applied to all descendants of the given element to
* achieve the specified effect. * achieve the specified effect.
* *
* A negative value for <width> or <height> is an error (see Error processing). * A negative value for <width> or <height> is an error (see Error processing).
* A value of zero disables rendering of the element. * A value of zero disables rendering of the element.
* *
*/ */
setCoordSize(width, height) { setCoordSize(width, height) {
const viewBox = this._native.getAttribute('viewBox'); const viewBox = this._native.getAttribute('viewBox');

7
packages/web2d/src/components/peer/utils/PolyLineUtils.js
View File

@ -30,10 +30,9 @@ export const buildCurvedPath = (dist, x1, y1, x2, y2) => {
const middlex = x1 + (x2 - x1 > 0 ? dist : -dist); const middlex = x1 + (x2 - x1 > 0 ? dist : -dist);
path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${middlex.toFixed(1)}, ${y1.toFixed( path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${middlex.toFixed(1)}, ${y1.toFixed(
1, 1,
)} ${middlex.toFixed(1)}, ${(y2 - 5 * signy).toFixed(1)} ${( )} ${middlex.toFixed(1)}, ${(y2 - 5 * signy).toFixed(1)} ${(middlex + 5 * signx).toFixed(
middlex 1,
+ 5 * signx )}, ${y2.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
).toFixed(1)}, ${y2.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
} else { } else {
path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`; path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
} }

5
packages/web2d/test/playground/Grid.js
View File

@ -55,9 +55,10 @@ class Grid {
result.style.borderCollapse = 'collapse'; result.style.borderCollapse = 'collapse';
result.style.emptyCells = 'show'; result.style.emptyCells = 'show';
result.style.position = 'absolute'; result.style.position = 'absolute';
result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>'; result.innerHTML =
'<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
return result; return result;
} }
} }
export default Grid ; export default Grid;

4
packages/web2d/test/playground/arrow.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Arrow, Point } from '../../src';
Workspace, Arrow, Point,
} from '../../src';
const workspace = new Workspace({ fillColor: 'green' }); const workspace = new Workspace({ fillColor: 'green' });
workspace.setSize('200px', '200px'); workspace.setSize('200px', '200px');

4
packages/web2d/test/playground/curvedLine.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, CurvedLine, Point } from '../../src';
Workspace, CurvedLine, Point,
} from '../../src';
const workspace = new Workspace({ fillColor: 'green' }); const workspace = new Workspace({ fillColor: 'green' });
workspace.setSize('400px', '400px'); workspace.setSize('400px', '400px');

5
packages/web2d/test/playground/events.js
View File

@ -1,8 +1,6 @@
/* eslint-disable no-alert */ /* eslint-disable no-alert */
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Elipse } from '../../src';
Workspace, Elipse,
} from '../../src';
global.$ = $; global.$ = $;
@ -55,7 +53,6 @@ MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneLis
} }
}; };
// Workspace with CoordOrigin(100,100); // Workspace with CoordOrigin(100,100);
const workspace = new Workspace(); const workspace = new Workspace();
workspace.setSize('150px', '150px'); workspace.setSize('150px', '150px');

10
packages/web2d/test/playground/font.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Text } from '../../src';
Workspace, Text,
} from '../../src';
global.$ = $; global.$ = $;
@ -51,5 +49,9 @@ function alignments(text, family, elemId) {
// Multine tests and alingments .. ... // Multine tests and alingments .. ...
['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => { ['Arial', 'Tahoma', 'Verdana', 'Times', 'Brush Script MT'].forEach((fontName, i) => {
alignments('This multine text.\nThis is the long line just because :)\nShort line', fontName, `amulti${i}`); alignments(
'This multine text.\nThis is the long line just because :)\nShort line',
fontName,
`amulti${i}`,
);
}); });

17
packages/web2d/test/playground/group.js
View File

@ -1,8 +1,6 @@
/* eslint-disable no-alert */ /* eslint-disable no-alert */
import $ from 'jquery'; import $ from 'jquery';
import { import { Toolkit, Workspace, Line, Group, Elipse } from '../../src';
Toolkit, Workspace, Line, Group, Elipse,
} from '../../src';
global.$ = $; global.$ = $;
@ -58,7 +56,7 @@ const basicTest = () => {
// Logger.logMsg("Moving group x,y:"+ x + "," + y); // Logger.logMsg("Moving group x,y:"+ x + "," + y);
group.setPosition(x, y); group.setPosition(x, y);
}; };
// executer.periodical(100); // executer.periodical(100);
}; };
basicTest(); basicTest();
@ -68,7 +66,12 @@ const eventTest = () => {
workspace.setCoordSize(100, 100); workspace.setCoordSize(100, 100);
const groupAttributes = { const groupAttributes = {
width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0', width: 50,
height: 50,
x: 25,
y: 50,
coordSize: '200 200',
coordOrigin: '0 0',
}; };
const group = new Group(groupAttributes); const group = new Group(groupAttributes);
workspace.append(group); workspace.append(group);
@ -262,7 +265,7 @@ const groupVisibilitySample = () => {
isVisible = !isVisible; isVisible = !isVisible;
group.setVisibility(isVisible); group.setVisibility(isVisible);
}; };
// executer.periodical(100); // executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample')); workspace.addItAsChildTo($('#visibilityExample'));
}; };
groupVisibilitySample(); groupVisibilitySample();
@ -296,7 +299,7 @@ const groupVisibilitySample2 = () => {
height = (height + 10) % 100; height = (height + 10) % 100;
group.setCoordSize(width, height); group.setCoordSize(width, height);
}; };
// executer.periodical(100); // executer.periodical(100);
workspace.addItAsChildTo($('#scaleStrokeExample')); workspace.addItAsChildTo($('#scaleStrokeExample'));
}; };
groupVisibilitySample2(); groupVisibilitySample2();

4
packages/web2d/test/playground/image.js
View File

@ -2,9 +2,7 @@ import $ from 'jquery';
import svgResource from './resources/logo-icon.svg'; import svgResource from './resources/logo-icon.svg';
import pngResource from './resources/logo-icon.png'; import pngResource from './resources/logo-icon.png';
import { import { Workspace, Image } from '../../src';
Workspace, Image,
} from '../../src';
// URL Based image test ... // URL Based image test ...
const workspace = new Workspace({ fillColor: 'light-gray' }); const workspace = new Workspace({ fillColor: 'light-gray' });

36
packages/web2d/test/playground/line.js
View File

@ -1,12 +1,13 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Line, Rect } from '../../src';
Workspace, Line, Rect,
} from '../../src';
global.$ = $; global.$ = $;
const workspaceAttributes = { const workspaceAttributes = {
width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc', width: '700px',
height: '100px',
coordSize: '350 50',
fillColor: '#ffffcc',
}; };
const strokeWidthWorkspace = new Workspace(workspaceAttributes); const strokeWidthWorkspace = new Workspace(workspaceAttributes);
@ -18,8 +19,8 @@ strokeWidthWorkspace.append(rect);
for (let i = 0; i <= 10; i++) { for (let i = 0; i <= 10; i++) {
const line = new Line(); const line = new Line();
line.setFrom(5 + (i * 25), 5); line.setFrom(5 + i * 25, 5);
line.setTo(5 + (i * 25), 45); line.setTo(5 + i * 25, 45);
line.setAttribute('strokeWidth', i + 1); line.setAttribute('strokeWidth', i + 1);
strokeWidthWorkspace.append(line); strokeWidthWorkspace.append(line);
} }
@ -30,8 +31,8 @@ strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
const strokeOpacityWorkspace = new Workspace(workspaceAttributes); const strokeOpacityWorkspace = new Workspace(workspaceAttributes);
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const line = new Line(); const line = new Line();
line.setFrom(15 + (i * 25), 5); line.setFrom(15 + i * 25, 5);
line.setTo(3 + (i * 25), 45); line.setTo(3 + i * 25, 45);
line.setAttribute('strokeWidth', 2); line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeOpacity', 1 / (i + 1)); line.setAttribute('strokeOpacity', 1 / (i + 1));
line.setAttribute('strokeColor', 'red'); line.setAttribute('strokeColor', 'red');
@ -43,8 +44,8 @@ const strokeStyleWorkspace = new Workspace(workspaceAttributes);
const styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash']; const styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
for (let i = 0; i < styles.length; i++) { for (let i = 0; i < styles.length; i++) {
const line = new Line(); const line = new Line();
line.setFrom(25 + (i * 30), 5); line.setFrom(25 + i * 30, 5);
line.setTo(13 + (i * 30), 45); line.setTo(13 + i * 30, 45);
line.setAttribute('strokeWidth', 2); line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red'); line.setAttribute('strokeColor', 'red');
line.setAttribute('strokeStyle', styles[i]); line.setAttribute('strokeStyle', styles[i]);
@ -53,11 +54,20 @@ for (let i = 0; i < styles.length; i++) {
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample')); strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
const strokeArrowWorkspace = new Workspace(workspaceAttributes); const strokeArrowWorkspace = new Workspace(workspaceAttributes);
const styles2 = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron']; const styles2 = [
'none ',
'block ',
'classic',
'diamond ',
'oval',
'open',
'chevron',
'doublechevron',
];
for (let i = 0; i < styles.length; i++) { for (let i = 0; i < styles.length; i++) {
const line = new Line(); const line = new Line();
line.setFrom(25 + (i * 30), 5); line.setFrom(25 + i * 30, 5);
line.setTo(13 + (i * 30), 45); line.setTo(13 + i * 30, 45);
line.setAttribute('strokeWidth', 2); line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red'); line.setAttribute('strokeColor', 'red');
line.setArrowStyle(styles2[i]); line.setArrowStyle(styles2[i]);

4
packages/web2d/test/playground/polyLine.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, PolyLine } from '../../src';
Workspace, PolyLine,
} from '../../src';
global.$ = $; global.$ = $;

6
packages/web2d/test/playground/prototype.js vendored
View File

@ -100,10 +100,8 @@ global.createShape = function createShape() {
posx = e.pageX; posx = e.pageX;
posy = e.pageY; posy = e.pageY;
} else if (event.clientX || event.clientY) { } else if (event.clientX || event.clientY) {
posx = event.clientX + document.body.scrollLeft posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+ document.documentElement.scrollLeft; posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
posy = event.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
} }
shadowGroup.setPosition(posx - 50, posy - 150); shadowGroup.setPosition(posx - 50, posy - 150);

7
packages/web2d/test/playground/rect.js
View File

@ -1,11 +1,8 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Rect } from '../../src';
Workspace, Rect,
} from '../../src';
global.$ = $; global.$ = $;
const rectExampleTest = () => { const rectExampleTest = () => {
const workspace = new Workspace(); const workspace = new Workspace();
workspace.setSize('100px', '100px'); workspace.setSize('100px', '100px');
@ -24,7 +21,7 @@ const roundrectExampleTest = () => {
function builder(container, x, width, height) { function builder(container, x, width, height) {
for (let i = 1; i <= 10; i++) { for (let i = 1; i <= 10; i++) {
const rect = new Rect(i / 10); const rect = new Rect(i / 10);
rect.setPosition(x, ((i - 1) * (50 + 5))); rect.setPosition(x, (i - 1) * (50 + 5));
rect.setSize(width, height); rect.setSize(width, height);
container.append(rect); container.append(rect);
} }

32
packages/web2d/test/playground/shapes.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Rect } from '../../src';
Workspace, Rect,
} from '../../src';
global.$ = $; global.$ = $;
@ -96,7 +94,12 @@ const strokeOpacityTest = () => {
workspace.append(rect); workspace.append(rect);
const rectAttributes = { const rectAttributes = {
width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, width: 60,
height: 60,
fillColor: 'yellow',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 10,
}; };
rect = new Rect(0, rectAttributes); rect = new Rect(0, rectAttributes);
rect.setPosition(20, 20); rect.setPosition(20, 20);
@ -141,7 +144,12 @@ const fillOpacityTest = () => {
workspace.append(rect); workspace.append(rect);
const rectAttributes = { const rectAttributes = {
width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, width: 60,
height: 60,
fillColor: 'yellow',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 10,
}; };
rect = new Rect(0, rectAttributes); rect = new Rect(0, rectAttributes);
rect.setPosition(20, 20); rect.setPosition(20, 20);
@ -186,7 +194,12 @@ const opacityTest = () => {
workspace.append(rect); workspace.append(rect);
const rectAttributes = { const rectAttributes = {
width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, width: 60,
height: 60,
fillColor: 'yellow',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 10,
}; };
rect = new Rect(0, rectAttributes); rect = new Rect(0, rectAttributes);
rect.setPosition(20, 20); rect.setPosition(20, 20);
@ -219,7 +232,12 @@ const visibilityTest = () => {
workspace.setCoordOrigin(0, 0); workspace.setCoordOrigin(0, 0);
const rectAttributes = { const rectAttributes = {
width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10, width: 60,
height: 60,
fillColor: 'green',
strokeColor: 'black',
strokeStyle: 'solid',
strokeWidth: 10,
}; };
const rect = new Rect(0, rectAttributes); const rect = new Rect(0, rectAttributes);
rect.setPosition(120, 20); rect.setPosition(120, 20);

21
packages/web2d/test/playground/text.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Text } from '../../src';
Workspace, Text,
} from '../../src';
import TransformUtils from '../../src/components/peer/utils/TransformUtils'; import TransformUtils from '../../src/components/peer/utils/TransformUtils';
const workspaces = []; const workspaces = [];
@ -14,7 +12,17 @@ global.zoomIn = function zoomIn() {
} }
}; };
const textTestHelper = function textTestHelper(coordSize, textval, font, fontSizeval, style, modifier, fontColor, htmlElemId, iesimo) { const textTestHelper = function textTestHelper(
coordSize,
textval,
font,
fontSizeval,
style,
modifier,
fontColor,
htmlElemId,
iesimo,
) {
const workspace = new Workspace(); const workspace = new Workspace();
workspace.setSize('300px', '100px'); workspace.setSize('300px', '100px');
@ -38,7 +46,10 @@ const textTestHelper = function textTestHelper(coordSize, textval, font, fontSiz
const textHtml = document.createTextNode(textsize); const textHtml = document.createTextNode(textsize);
const fontSize = text.getHtmlFontSize(textsize); const fontSize = text.getHtmlFontSize(textsize);
span.append(textHtml); span.append(textHtml);
span.setAttribute('style', `font-weight:${modifier};font-style: ${style}; font-size:${fontSize}pt; font-family: ${font};width:30;height:30;`); span.setAttribute(
'style',
`font-weight:${modifier};font-style: ${style}; font-size:${fontSize}pt; font-family: ${font};width:30;height:30;`,
);
parent.append(span); parent.append(span);
workspaces[iesimo] = workspace; workspaces[iesimo] = workspace;

9
packages/web2d/test/playground/workspace.js
View File

@ -1,7 +1,5 @@
import $ from 'jquery'; import $ from 'jquery';
import { import { Workspace, Elipse } from '../../src';
Workspace, Elipse,
} from '../../src';
import Grid from './Grid'; import Grid from './Grid';
global.$ = $; global.$ = $;
@ -16,7 +14,10 @@ overflowWorkspace.addItAsChildTo($('#overflowExample'));
const workspacePosition = () => { const workspacePosition = () => {
const elipseAttr = { const elipseAttr = {
width: 100, height: 100, x: 100, y: 100, width: 100,
height: 100,
x: 100,
y: 100,
}; };
const divElem = $('#positionExample'); const divElem = $('#positionExample');

4
packages/web2d/webpack.common.js
View File

@ -18,9 +18,7 @@ module.exports = {
{ {
use: ['babel-loader'], use: ['babel-loader'],
test: /.(js)$/, test: /.(js)$/,
exclude: [ exclude: [/node_modules/],
/node_modules/,
],
}, },
], ],
}, },

112
packages/webapp/webpack.common.js
View File

@ -8,61 +8,61 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
webpack; webpack;
module.exports = { module.exports = {
entry: { entry: {
app: path.join(__dirname, 'src', 'index.tsx'), app: path.join(__dirname, 'src', 'index.tsx'),
}, },
target: 'web', target: 'web',
resolve: { resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'], extensions: ['.ts', '.tsx', '.js', '.jsx'],
}, },
output: { output: {
filename: '[name].bundle.js', filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: 'ts-loader',
exclude: '/node_modules/', exclude: '/node_modules/',
}, },
{ {
test: /\.(png|jpe?g|gif|svg)$/, test: /\.(png|jpe?g|gif|svg)$/,
type: 'asset/inline', type: 'asset/inline',
}, },
{ {
test: /\.wxml$/i, test: /\.wxml$/i,
type: 'asset/source', type: 'asset/source',
}, },
],
},
optimization: {
usedExports: true,
splitChunks: {
cacheGroups: {
vendors: {
test: /node_modules\/.*/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false,
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'public/*',
to: '[name].[ext]',
globOptions: {
ignore: ['**/index.html'],
},
},
],
}),
], ],
},
optimization: {
usedExports: true,
splitChunks: {
cacheGroups: {
vendors: {
test: /node_modules\/.*/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new CleanWebpackPlugin({
dangerouslyAllowCleanPatternsOutsideProject: true,
dry: false,
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'public/*',
to: '[name].[ext]',
globOptions: {
ignore: ['**/index.html'],
},
},
],
}),
],
}; };

14
packages/webapp/webpack.dev.js
View File

@ -13,18 +13,16 @@ module.exports = merge(common, {
port: 3000, port: 3000,
hot: true, hot: true,
historyApiFallback: { historyApiFallback: {
rewrites: [ rewrites: [{ from: /^\/c\//, to: '/index.html' }],
{ from: /^\/c\//, to: '/index.html' } },
]
}
}, },
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.join(__dirname, 'public/index.html'), template: path.join(__dirname, 'public/index.html'),
templateParameters: { templateParameters: {
PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000' PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000',
}, },
base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000' base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:3000',
}) }),
] ],
}); });

30
packages/webapp/webpack.prod.js
View File

@ -4,20 +4,18 @@ const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, { module.exports = merge(common, {
mode: 'production', mode: 'production',
devtool: 'source-map', devtool: 'source-map',
optimization: { optimization: {
minimize: true, minimize: true,
}, },
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: path.join(__dirname, 'public/index.html'), template: path.join(__dirname, 'public/index.html'),
templateParameters: { templateParameters: {
PUBLIC_URL: process.env.PUBLIC_URL PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com',
? process.env.PUBLIC_URL },
: 'https://www.wisemapping.com', base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com',
}, }),
base: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'https://www.wisemapping.com', ],
}),
],
}); });