mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-24 07:37:55 +01:00
Format JS files.
This commit is contained in:
Paulo Gustavo Veiga
parent
cf29f4f953
commit
5ee7448d3c
553
libraries/bootstrap/js/bootstrap.js
vendored
553
libraries/bootstrap/js/bootstrap.js
vendored
File diff suppressed because it is too large
Load Diff
1213
libraries/bootstrap/js/bootstrap.min.js
vendored
1213
libraries/bootstrap/js/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -8,105 +8,186 @@
|
||||
*
|
||||
* Original idea by:
|
||||
* Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
|
||||
*/
|
||||
*/
|
||||
|
||||
/*
|
||||
* One small change is: now keys are passed by object { keys: '...' }
|
||||
* Might be useful, when you want to pass some other data to your handler
|
||||
*/
|
||||
|
||||
function initHotKeyPluggin(jQuery){
|
||||
|
||||
jQuery.hotkeys = {
|
||||
version: "0.8",
|
||||
function initHotKeyPluggin(jQuery) {
|
||||
jQuery.hotkeys = {
|
||||
version: '0.8',
|
||||
|
||||
specialKeys: {
|
||||
8: "backspace", 9: "tab", 10: "return", 13: "enter", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
|
||||
20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
|
||||
37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
|
||||
96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
|
||||
104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
|
||||
112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
|
||||
120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
|
||||
220: "\\", 222: "'", 224: "meta"
|
||||
},
|
||||
|
||||
shiftNums: {
|
||||
"`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
|
||||
"8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
|
||||
".": ">", "/": "?", "\\": "|"
|
||||
}
|
||||
};
|
||||
specialKeys: {
|
||||
8: 'backspace',
|
||||
9: 'tab',
|
||||
10: 'return',
|
||||
13: 'enter',
|
||||
16: 'shift',
|
||||
17: 'ctrl',
|
||||
18: 'alt',
|
||||
19: 'pause',
|
||||
20: 'capslock',
|
||||
27: 'esc',
|
||||
32: 'space',
|
||||
33: 'pageup',
|
||||
34: 'pagedown',
|
||||
35: 'end',
|
||||
36: 'home',
|
||||
37: 'left',
|
||||
38: 'up',
|
||||
39: 'right',
|
||||
40: 'down',
|
||||
45: 'insert',
|
||||
46: 'del',
|
||||
96: '0',
|
||||
97: '1',
|
||||
98: '2',
|
||||
99: '3',
|
||||
100: '4',
|
||||
101: '5',
|
||||
102: '6',
|
||||
103: '7',
|
||||
104: '8',
|
||||
105: '9',
|
||||
106: '*',
|
||||
107: '+',
|
||||
109: '-',
|
||||
110: '.',
|
||||
111: '/',
|
||||
112: 'f1',
|
||||
113: 'f2',
|
||||
114: 'f3',
|
||||
115: 'f4',
|
||||
116: 'f5',
|
||||
117: 'f6',
|
||||
118: 'f7',
|
||||
119: 'f8',
|
||||
120: 'f9',
|
||||
121: 'f10',
|
||||
122: 'f11',
|
||||
123: 'f12',
|
||||
144: 'numlock',
|
||||
145: 'scroll',
|
||||
186: ';',
|
||||
191: '/',
|
||||
220: '\\',
|
||||
222: "'",
|
||||
224: 'meta',
|
||||
},
|
||||
|
||||
function keyHandler( handleObj ) {
|
||||
if ( typeof handleObj.data === "string" ) {
|
||||
handleObj.data = { keys: handleObj.data };
|
||||
}
|
||||
shiftNums: {
|
||||
'`': '~',
|
||||
1: '!',
|
||||
2: '@',
|
||||
3: '#',
|
||||
4: '$',
|
||||
5: '%',
|
||||
6: '^',
|
||||
7: '&',
|
||||
8: '*',
|
||||
9: '(',
|
||||
0: ')',
|
||||
'-': '_',
|
||||
'=': '+',
|
||||
';': ': ',
|
||||
"'": '"',
|
||||
',': '<',
|
||||
'.': '>',
|
||||
'/': '?',
|
||||
'\\': '|',
|
||||
},
|
||||
};
|
||||
|
||||
// Only care when a possible input has been specified
|
||||
if ( !handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string" ) {
|
||||
return;
|
||||
}
|
||||
function keyHandler(handleObj) {
|
||||
if (typeof handleObj.data === 'string') {
|
||||
handleObj.data = { keys: handleObj.data };
|
||||
}
|
||||
|
||||
var origHandler = handleObj.handler,
|
||||
keys = handleObj.data.keys.toLowerCase().split(" "),
|
||||
textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color", "tel"];
|
||||
|
||||
handleObj.handler = function( event ) {
|
||||
// Don't fire in text-accepting inputs that we didn't directly bind to
|
||||
if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
|
||||
jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
|
||||
return;
|
||||
}
|
||||
// Only care when a possible input has been specified
|
||||
if (!handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
var special = jQuery.hotkeys.specialKeys[ event.keyCode ],
|
||||
character = String.fromCharCode( event.which ).toLowerCase(),
|
||||
modif = "", possible = {};
|
||||
var origHandler = handleObj.handler,
|
||||
keys = handleObj.data.keys.toLowerCase().split(' '),
|
||||
textAcceptingInputTypes = [
|
||||
'text',
|
||||
'password',
|
||||
'number',
|
||||
'email',
|
||||
'url',
|
||||
'range',
|
||||
'date',
|
||||
'month',
|
||||
'week',
|
||||
'time',
|
||||
'datetime',
|
||||
'datetime-local',
|
||||
'search',
|
||||
'color',
|
||||
'tel',
|
||||
];
|
||||
|
||||
// check combinations (alt|ctrl|shift+anything)
|
||||
if ( event.altKey && special !== "alt" ) {
|
||||
modif += "alt+";
|
||||
}
|
||||
handleObj.handler = function (event) {
|
||||
// Don't fire in text-accepting inputs that we didn't directly bind to
|
||||
if (
|
||||
this !== event.target &&
|
||||
(/textarea|select/i.test(event.target.nodeName) ||
|
||||
jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( event.ctrlKey && special !== "ctrl" ) {
|
||||
modif += "ctrl+";
|
||||
}
|
||||
|
||||
// TODO: Need to make sure this works consistently across platforms
|
||||
if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
|
||||
modif += "meta+";
|
||||
}
|
||||
var special = jQuery.hotkeys.specialKeys[event.keyCode],
|
||||
character = String.fromCharCode(event.which).toLowerCase(),
|
||||
modif = '',
|
||||
possible = {};
|
||||
|
||||
if ( event.shiftKey && special !== "shift" ) {
|
||||
modif += "shift+";
|
||||
}
|
||||
// check combinations (alt|ctrl|shift+anything)
|
||||
if (event.altKey && special !== 'alt') {
|
||||
modif += 'alt+';
|
||||
}
|
||||
|
||||
if ( special ) {
|
||||
possible[ modif + special ] = true;
|
||||
}
|
||||
if (event.ctrlKey && special !== 'ctrl') {
|
||||
modif += 'ctrl+';
|
||||
}
|
||||
|
||||
if ( character ) {
|
||||
possible[ modif + character ] = true;
|
||||
possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
|
||||
// TODO: Need to make sure this works consistently across platforms
|
||||
if (event.metaKey && !event.ctrlKey && special !== 'meta') {
|
||||
modif += 'meta+';
|
||||
}
|
||||
|
||||
// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
|
||||
if ( modif === "shift+" ) {
|
||||
possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
|
||||
}
|
||||
}
|
||||
if (event.shiftKey && special !== 'shift') {
|
||||
modif += 'shift+';
|
||||
}
|
||||
|
||||
for ( var i = 0, l = keys.length; i < l; i++ ) {
|
||||
if ( possible[ keys[i] ] ) {
|
||||
return origHandler.apply( this, arguments );
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
if (special) {
|
||||
possible[modif + special] = true;
|
||||
}
|
||||
|
||||
jQuery.each([ "keydown", "keyup", "keypress" ], function() {
|
||||
jQuery.event.special[ this ] = { add: keyHandler };
|
||||
});
|
||||
if (character) {
|
||||
possible[modif + character] = true;
|
||||
possible[modif + jQuery.hotkeys.shiftNums[character]] = true;
|
||||
|
||||
};
|
||||
// "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
|
||||
if (modif === 'shift+') {
|
||||
possible[jQuery.hotkeys.shiftNums[character]] = true;
|
||||
}
|
||||
}
|
||||
|
||||
export default initHotKeyPluggin;
|
||||
for (var i = 0, l = keys.length; i < l; i++) {
|
||||
if (possible[keys[i]]) {
|
||||
return origHandler.apply(this, arguments);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
jQuery.each(['keydown', 'keyup', 'keypress'], function () {
|
||||
jQuery.event.special[this] = { add: keyHandler };
|
||||
});
|
||||
}
|
||||
|
||||
export default initHotKeyPluggin;
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
import coreJs from '..';
|
||||
|
||||
describe('core-js', () => {
|
||||
it('needs tests');
|
||||
it('needs tests');
|
||||
});
|
||||
|
||||
@ -20,22 +20,22 @@
|
||||
* Cross-browser implementation of creating an XML document object.
|
||||
*/
|
||||
export const createDocument = function () {
|
||||
var doc = null;
|
||||
if ($defined(window.ActiveXObject)) {
|
||||
//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'];
|
||||
for (var i = 0; i < progIDs.length; i++) {
|
||||
try {
|
||||
doc = new ActiveXObject(progIDs[i]);
|
||||
break;
|
||||
} catch (ex) {}
|
||||
}
|
||||
} else if (window.document.implementation && window.document.implementation.createDocument) {
|
||||
doc = window.document.implementation.createDocument('', '', null);
|
||||
var doc = null;
|
||||
if ($defined(window.ActiveXObject)) {
|
||||
//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'];
|
||||
for (var i = 0; i < progIDs.length; i++) {
|
||||
try {
|
||||
doc = new ActiveXObject(progIDs[i]);
|
||||
break;
|
||||
} catch (ex) {}
|
||||
}
|
||||
$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) {
|
||||
return obj != undefined;
|
||||
return obj != undefined;
|
||||
};
|
||||
|
||||
export const $assert = function (assert, message) {
|
||||
if (!$defined(assert) || !assert) {
|
||||
logStackTrace();
|
||||
console.log(message);
|
||||
throw new Error(message);
|
||||
}
|
||||
if (!$defined(assert) || !assert) {
|
||||
logStackTrace();
|
||||
console.log(message);
|
||||
throw new Error(message);
|
||||
}
|
||||
};
|
||||
|
||||
export const sign = function (value) {
|
||||
return value >= 0 ? 1 : -1;
|
||||
return value >= 0 ? 1 : -1;
|
||||
};
|
||||
|
||||
export function logStackTrace(exception) {
|
||||
if (!$defined(exception)) {
|
||||
try {
|
||||
throw Error('Unexpected Exception');
|
||||
} catch (e) {
|
||||
exception = e;
|
||||
}
|
||||
if (!$defined(exception)) {
|
||||
try {
|
||||
throw Error('Unexpected Exception');
|
||||
} catch (e) {
|
||||
exception = e;
|
||||
}
|
||||
var result = '';
|
||||
if (exception.stack) {
|
||||
//Firefox and Chrome...
|
||||
result = exception.stack;
|
||||
} else if (window.opera && exception.message) {
|
||||
//Opera
|
||||
result = exception.message;
|
||||
} else {
|
||||
//IE and Safari
|
||||
result = exception.sourceURL + ': ' + exception.line + '\n\n';
|
||||
}
|
||||
var result = '';
|
||||
if (exception.stack) {
|
||||
//Firefox and Chrome...
|
||||
result = exception.stack;
|
||||
} else if (window.opera && exception.message) {
|
||||
//Opera
|
||||
result = exception.message;
|
||||
} else {
|
||||
//IE and Safari
|
||||
result = exception.sourceURL + ': ' + exception.line + '\n\n';
|
||||
|
||||
var currentFunction = arguments.callee.caller;
|
||||
while (currentFunction) {
|
||||
var fn = currentFunction.toString();
|
||||
result = result + '\n' + fn;
|
||||
currentFunction = currentFunction.caller;
|
||||
}
|
||||
var currentFunction = arguments.callee.caller;
|
||||
while (currentFunction) {
|
||||
var fn = currentFunction.toString();
|
||||
result = result + '\n' + fn;
|
||||
currentFunction = currentFunction.caller;
|
||||
}
|
||||
window.errorStack = result;
|
||||
return result;
|
||||
}
|
||||
window.errorStack = result;
|
||||
return result;
|
||||
}
|
||||
|
||||
@ -2,34 +2,34 @@ const path = require('path');
|
||||
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'core.js',
|
||||
publicPath: '',
|
||||
library: {
|
||||
type: 'umd',
|
||||
}
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'core.js',
|
||||
publicPath: '',
|
||||
library: {
|
||||
type: 'umd',
|
||||
},
|
||||
target: 'web',
|
||||
optimization: {
|
||||
usedExports: true,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
use: 'babel-loader',
|
||||
test: /.js$/,
|
||||
exclude: [
|
||||
/node_modules/,
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js'],
|
||||
},
|
||||
plugins: [new CleanWebpackPlugin({
|
||||
dangerouslyAllowCleanPatternsOutsideProject: true,
|
||||
dry: false,
|
||||
})],
|
||||
},
|
||||
target: 'web',
|
||||
optimization: {
|
||||
usedExports: true,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
use: 'babel-loader',
|
||||
test: /.js$/,
|
||||
exclude: [/node_modules/],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js'],
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin({
|
||||
dangerouslyAllowCleanPatternsOutsideProject: true,
|
||||
dry: false,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -3,9 +3,9 @@ const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common');
|
||||
|
||||
const devConfig = {
|
||||
mode: 'development',
|
||||
plugins: [new HotModuleReplacementPlugin()],
|
||||
devtool: 'eval-source-map'
|
||||
mode: 'development',
|
||||
plugins: [new HotModuleReplacementPlugin()],
|
||||
devtool: 'eval-source-map',
|
||||
};
|
||||
|
||||
module.exports = merge(common, devConfig);
|
||||
|
||||
@ -2,13 +2,13 @@ const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.common');
|
||||
|
||||
const prodConfig = {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
},
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = merge(common, prodConfig);
|
||||
|
||||
@ -1,6 +1,17 @@
|
||||
context('Playground', () => {
|
||||
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.get('#mindplot.ready').should('exist');
|
||||
cy.matchImageSnapshot(`viewmode-${mapId}`);
|
||||
@ -8,9 +19,7 @@ context('Playground', () => {
|
||||
});
|
||||
it('the playground container.html page should match its snapshot', () => {
|
||||
cy.visit('/container.html');
|
||||
cy.getIframeBody()
|
||||
.find('#mindplot.ready')
|
||||
.should('exist');
|
||||
cy.getIframeBody().find('#mindplot.ready').should('exist');
|
||||
cy.matchImageSnapshot('container');
|
||||
});
|
||||
it('the playground editor.html page should match its snapshot', () => {
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
context('Relationship Topics', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/editor.html');
|
||||
cy.reload();
|
||||
cy.get('[test-id="30-11-relationship"]').click({ force: true });
|
||||
});
|
||||
beforeEach(() => {
|
||||
cy.visit('/editor.html');
|
||||
cy.reload();
|
||||
cy.get('[test-id="30-11-relationship"]').click({ force: true });
|
||||
});
|
||||
|
||||
it('Change shape relationship', () => {
|
||||
cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
|
||||
cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
|
||||
cy.get('body').trigger('mouseup');
|
||||
cy.matchImageSnapshot('changeShapeRealtionship');
|
||||
it('Change shape relationship', () => {
|
||||
cy.get('[test-id="control-56"]').trigger('mousedown', { force: true });
|
||||
cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 });
|
||||
cy.get('body').trigger('mouseup');
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
|
||||
}
|
||||
|
||||
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
|
||||
Cypress.Commands.add('getIframeBody', () => cy
|
||||
.get('iframe')
|
||||
.its('0.contentDocument.body').should('not.be.empty')
|
||||
.then(cy.wrap));
|
||||
Cypress.Commands.add('getIframeBody', () =>
|
||||
cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
|
||||
);
|
||||
|
||||
@ -75,9 +75,7 @@ class BootstrapDialog extends Options {
|
||||
)}</button>`,
|
||||
);
|
||||
footer.append(this.acceptButton);
|
||||
this.acceptButton
|
||||
.unbind('click')
|
||||
.on('click', this.options.onEventData, this.onAcceptClick);
|
||||
this.acceptButton.unbind('click').on('click', this.options.onEventData, this.onAcceptClick);
|
||||
}
|
||||
if (this.options.removeButton) {
|
||||
this.removeButton = $(
|
||||
|
||||
@ -49,10 +49,7 @@ class BootstrapDialogRequest extends BootstrapDialog {
|
||||
|
||||
this._native.find('.modal-body').load(url, () => {
|
||||
me.acceptButton.unbind('click').click(() => {
|
||||
if (
|
||||
$defined(global.submitDialogForm)
|
||||
&& typeof global.submitDialogForm === 'function'
|
||||
) {
|
||||
if ($defined(global.submitDialogForm) && typeof global.submitDialogForm === 'function') {
|
||||
global.submitDialogForm();
|
||||
}
|
||||
});
|
||||
|
||||
@ -96,26 +96,113 @@ export const buildHtml = () => {
|
||||
const palettes = [
|
||||
{
|
||||
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',
|
||||
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',
|
||||
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)'],
|
||||
['(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)'],
|
||||
[
|
||||
'(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)',
|
||||
],
|
||||
[
|
||||
'(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',
|
||||
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)',
|
||||
],
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -21,11 +21,12 @@ import ToolbarPaneItem from './ToolbarPaneItem';
|
||||
import { buildHtml, css } from './ColorPaletteHtml';
|
||||
|
||||
// rgbToHex implementation from https://stackoverflow.com/a/3627747/58128
|
||||
export const rgb2hex = (rgb) => `#${rgb
|
||||
.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
|
||||
.slice(1)
|
||||
.map((n) => parseInt(n, 10).toString(16).padStart(2, '0'))
|
||||
.join('')}`;
|
||||
export const rgb2hex = (rgb) =>
|
||||
`#${rgb
|
||||
.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
|
||||
.slice(1)
|
||||
.map((n) => parseInt(n, 10).toString(16).padStart(2, '0'))
|
||||
.join('')}`;
|
||||
|
||||
class ColorPalettePanel extends ToolbarPaneItem {
|
||||
constructor(buttonId, model, baseUrl) {
|
||||
@ -71,9 +72,7 @@ class ColorPalettePanel extends ToolbarPaneItem {
|
||||
const panelElem = this.getPanelElem();
|
||||
|
||||
// Clear selected cell based on the color ...
|
||||
panelElem
|
||||
.find("td[class='palette-cell palette-cell-selected']")
|
||||
.attr('class', 'palette-cell');
|
||||
panelElem.find("td[class='palette-cell palette-cell-selected']").attr('class', 'palette-cell');
|
||||
|
||||
// Mark the cell as selected ...
|
||||
const colorCells = panelElem.find('div[class=palette-colorswatch]');
|
||||
|
||||
@ -22,7 +22,20 @@ class FontFamilyPanel extends ListToolbarPanel {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
buildPanel() {
|
||||
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()
|
||||
.map((f) => `<div model="${f}" class="toolbarPanelLink" style="font-family:${f};">${f}</div>`)
|
||||
.join('\n');
|
||||
|
||||
@ -22,11 +22,12 @@ class FontSizePanel extends ListToolbarPanel {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
buildPanel() {
|
||||
const content = $("<div class='toolbarPanel' id='fontSizePanel'></div>");
|
||||
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="large" model="10" style="font-size:15px">Large</div>'
|
||||
+ '<div id="huge" model="15" style="font-size:24px">Huge</div>';
|
||||
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="large" model="10" style="font-size:15px">Large</div>' +
|
||||
'<div id="huge" model="15" style="font-size:24px">Huge</div>';
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
@ -19,15 +19,16 @@ import $ from 'jquery';
|
||||
import ToolbarPaneItem from './ToolbarPaneItem';
|
||||
import { ImageIcon } from '@wisemapping/mindplot';
|
||||
|
||||
|
||||
class IconPanel extends ToolbarPaneItem {
|
||||
_updateSelectedItem() {
|
||||
return this.getPanelElem();
|
||||
}
|
||||
|
||||
buildPanel() {
|
||||
const content = $('<div class="toolbarPanel" id="IconsPanel"></div>')
|
||||
.css({ width: 295, height: 305 });
|
||||
const content = $('<div class="toolbarPanel" id="IconsPanel"></div>').css({
|
||||
width: 295,
|
||||
height: 305,
|
||||
});
|
||||
content.on('click', (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
@ -37,7 +38,7 @@ class IconPanel extends ToolbarPaneItem {
|
||||
for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i += 1) {
|
||||
const familyIcons = ImageIcon.prototype.ICON_FAMILIES[i].icons;
|
||||
for (let j = 0; j < familyIcons.length; j += 1) {
|
||||
if ((count % 12) === 0) {
|
||||
if (count % 12 === 0) {
|
||||
familyContent = $('<div></div>');
|
||||
content.append(familyContent);
|
||||
}
|
||||
@ -52,10 +53,10 @@ class IconPanel extends ToolbarPaneItem {
|
||||
|
||||
const panel = this;
|
||||
const model = this.getModel();
|
||||
img.on('click', ((event) => {
|
||||
img.on('click', (event) => {
|
||||
model.setValue($(event.target).attr('id'));
|
||||
panel.hide();
|
||||
}));
|
||||
});
|
||||
|
||||
count += 1;
|
||||
}
|
||||
|
||||
@ -18,14 +18,13 @@
|
||||
import BootstrapDialog from '../bootstrap/BootstrapDialog';
|
||||
import { $msg } from '@wisemapping/mindplot';
|
||||
|
||||
|
||||
class KeyboardShortcutDialog extends BootstrapDialog {
|
||||
constructor() {
|
||||
super($msg('SHORTCUTS'), {
|
||||
closeButton: true,
|
||||
acceptButton: false,
|
||||
});
|
||||
this.setContent(`<div id="keyboardTable">
|
||||
constructor() {
|
||||
super($msg('SHORTCUTS'), {
|
||||
closeButton: true,
|
||||
acceptButton: false,
|
||||
});
|
||||
this.setContent(`<div id="keyboardTable">
|
||||
<table>
|
||||
<colgroup>
|
||||
<col width="40%"/>
|
||||
@ -139,8 +138,8 @@ class KeyboardShortcutDialog extends BootstrapDialog {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`);
|
||||
this.show();
|
||||
}
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
export default KeyboardShortcutDialog;
|
||||
|
||||
@ -36,7 +36,8 @@ class KeyboardShortcutTooltip extends FloatingTip {
|
||||
html: true,
|
||||
placement: 'bottom',
|
||||
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.trigger('mouseleave', e);
|
||||
|
||||
@ -43,7 +43,9 @@ class ListToolbarPanel extends ToolbarPaneItem {
|
||||
const menuElems = panelElem.find('div');
|
||||
const value = this.getModel().getValue();
|
||||
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');
|
||||
if (elemValue === value) $(elem).attr('class', 'toolbarPanelLinkSelectedLink');
|
||||
else $(elem).attr('class', 'toolbarPanelLink');
|
||||
|
||||
@ -10,23 +10,23 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
stats: {
|
||||
errorDetails: true
|
||||
errorDetails: true,
|
||||
},
|
||||
entry: {
|
||||
"editor.bundle": path.join(__dirname, 'src', 'index.tsx')
|
||||
'editor.bundle': path.join(__dirname, 'src', 'index.tsx'),
|
||||
},
|
||||
mode: 'development',
|
||||
devtool: 'source-map',
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx']
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/'
|
||||
exclude: '/node_modules/',
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)$/,
|
||||
@ -36,14 +36,15 @@ module.exports = {
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: ['babel-loader'],
|
||||
}, {
|
||||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
loader: 'style-loader'
|
||||
loader: 'style-loader',
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'css-loader',
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@ -44,16 +44,16 @@ const playgroundConfig = {
|
||||
template: 'test/playground/map-render/html/viewmode.html',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['editor'],
|
||||
filename: 'editor.html',
|
||||
template: 'test/playground/map-render/html/editor.html',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['showcase'],
|
||||
filename: 'showcase.html',
|
||||
template: 'test/playground/map-render/html/showcase.html',
|
||||
}),
|
||||
],
|
||||
chunks: ['editor'],
|
||||
filename: 'editor.html',
|
||||
template: 'test/playground/map-render/html/editor.html',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['showcase'],
|
||||
filename: 'showcase.html',
|
||||
template: 'test/playground/map-render/html/showcase.html',
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = merge(common, playgroundConfig);
|
||||
|
||||
@ -9,12 +9,10 @@ const prodConfig = {
|
||||
},
|
||||
externals: {
|
||||
react: 'react',
|
||||
"react-dom": 'react-dom',
|
||||
"react-intl": 'react-intl',
|
||||
'react-dom': 'react-dom',
|
||||
'react-intl': 'react-intl',
|
||||
},
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
]
|
||||
plugins: [new CleanWebpackPlugin()],
|
||||
};
|
||||
|
||||
module.exports = merge(common, prodConfig);
|
||||
|
||||
@ -18,7 +18,6 @@ if (Cypress.env('imageSnaphots')) {
|
||||
}
|
||||
|
||||
// https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
|
||||
Cypress.Commands.add('getIframeBody', () => cy
|
||||
.get('iframe')
|
||||
.its('0.contentDocument.body').should('not.be.empty')
|
||||
.then(cy.wrap));
|
||||
Cypress.Commands.add('getIframeBody', () =>
|
||||
cy.get('iframe').its('0.contentDocument.body').should('not.be.empty').then(cy.wrap),
|
||||
);
|
||||
|
||||
@ -4,20 +4,20 @@ import { Group, Rect, Line } from '@wisemapping/web2d';
|
||||
export default class RemoveTip {
|
||||
/** @lends IconGroup.RemoveTip */
|
||||
/**
|
||||
* @classdesc inner class of IconGroup
|
||||
* @constructs
|
||||
* @param container
|
||||
*/
|
||||
* @classdesc inner class of IconGroup
|
||||
* @constructs
|
||||
* @param container
|
||||
*/
|
||||
constructor(container) {
|
||||
$assert(container, 'group can not be null');
|
||||
this._fadeElem = container;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param topicId
|
||||
* @param icon
|
||||
* @throws will throw an error if icon is null or undefined
|
||||
*/
|
||||
* @param topicId
|
||||
* @param icon
|
||||
* @throws will throw an error if icon is null or undefined
|
||||
*/
|
||||
show(topicId, icon) {
|
||||
$assert(icon, 'icon can not be null');
|
||||
|
||||
@ -64,8 +64,8 @@ export default class RemoveTip {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param delay
|
||||
*/
|
||||
* @param delay
|
||||
*/
|
||||
close(delay) {
|
||||
// This is not ok, trying to close the same dialog twice ?
|
||||
if (this._closeTimeoutId) {
|
||||
@ -145,9 +145,9 @@ export default class RemoveTip {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param topicId
|
||||
* @param icon
|
||||
*/
|
||||
* @param topicId
|
||||
* @param icon
|
||||
*/
|
||||
decorate(topicId, icon) {
|
||||
const me = this;
|
||||
|
||||
|
||||
@ -15,9 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
$assert,
|
||||
} from '@wisemapping/core-js';
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import Icon from './Icon';
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
|
||||
@ -85,7 +83,7 @@ class ImageIcon extends Icon {
|
||||
for (let i = 0; i < familyIcons.length && result == null; i++) {
|
||||
if (familyIcons[i] === iconId) {
|
||||
// Is last one?
|
||||
if (i === (familyIcons.length - 1)) {
|
||||
if (i === familyIcons.length - 1) {
|
||||
[result] = familyIcons;
|
||||
} else {
|
||||
result = familyIcons[i + 1];
|
||||
@ -122,116 +120,219 @@ class ImageIcon extends Icon {
|
||||
}
|
||||
}
|
||||
|
||||
ImageIcon.prototype.ICON_FAMILIES = [{
|
||||
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: 'sport',
|
||||
icons: ['sport_basketball', 'sport_football', 'sport_golf', 'sport_raquet', 'sport_shuttlecock', 'sport_soccer', 'sport_tennis'],
|
||||
},
|
||||
{
|
||||
id: 'bulb',
|
||||
icons: ['bulb_light_on', 'bulb_light_off'],
|
||||
},
|
||||
{
|
||||
id: 'thumb',
|
||||
icons: ['thumb_thumb_up', 'thumb_thumb_down'],
|
||||
},
|
||||
{
|
||||
id: 'tick',
|
||||
icons: ['tick_tick', 'tick_cross'],
|
||||
},
|
||||
{
|
||||
id: 'onoff',
|
||||
icons: ['onoff_clock', 'onoff_clock_red', 'onoff_add', 'onoff_delete', 'onoff_status_offline', 'onoff_status_online'],
|
||||
},
|
||||
{
|
||||
id: 'money',
|
||||
icons: ['money_money', 'money_dollar', 'money_euro', 'money_pound', 'money_yen', 'money_coins', 'money_ruby'],
|
||||
},
|
||||
{
|
||||
id: 'time',
|
||||
icons: ['time_calendar', 'time_clock', 'time_hourglass'],
|
||||
},
|
||||
{
|
||||
id: 'number',
|
||||
icons: ['number_1', 'number_2', 'number_3', 'number_4', 'number_5', 'number_6', 'number_7', 'number_8', 'number_9'],
|
||||
},
|
||||
{
|
||||
id: 'chart',
|
||||
icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
|
||||
},
|
||||
{
|
||||
id: 'sign',
|
||||
icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
|
||||
},
|
||||
{
|
||||
id: 'hard',
|
||||
icons: ['hard_cd', 'hard_computer', 'hard_controller', 'hard_driver_disk', 'hard_ipod', 'hard_keyboard', 'hard_mouse', 'hard_printer', 'hard_webcam', 'hard_microphone'],
|
||||
},
|
||||
{
|
||||
id: 'things',
|
||||
icons: ['things_address_book', 'things_wrench', 'things_pin', 'things_window-layout', 'things_bubbles'],
|
||||
},
|
||||
{
|
||||
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'],
|
||||
},
|
||||
ImageIcon.prototype.ICON_FAMILIES = [
|
||||
{
|
||||
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: 'sport',
|
||||
icons: [
|
||||
'sport_basketball',
|
||||
'sport_football',
|
||||
'sport_golf',
|
||||
'sport_raquet',
|
||||
'sport_shuttlecock',
|
||||
'sport_soccer',
|
||||
'sport_tennis',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'bulb',
|
||||
icons: ['bulb_light_on', 'bulb_light_off'],
|
||||
},
|
||||
{
|
||||
id: 'thumb',
|
||||
icons: ['thumb_thumb_up', 'thumb_thumb_down'],
|
||||
},
|
||||
{
|
||||
id: 'tick',
|
||||
icons: ['tick_tick', 'tick_cross'],
|
||||
},
|
||||
{
|
||||
id: 'onoff',
|
||||
icons: [
|
||||
'onoff_clock',
|
||||
'onoff_clock_red',
|
||||
'onoff_add',
|
||||
'onoff_delete',
|
||||
'onoff_status_offline',
|
||||
'onoff_status_online',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'money',
|
||||
icons: [
|
||||
'money_money',
|
||||
'money_dollar',
|
||||
'money_euro',
|
||||
'money_pound',
|
||||
'money_yen',
|
||||
'money_coins',
|
||||
'money_ruby',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'time',
|
||||
icons: ['time_calendar', 'time_clock', 'time_hourglass'],
|
||||
},
|
||||
{
|
||||
id: 'number',
|
||||
icons: [
|
||||
'number_1',
|
||||
'number_2',
|
||||
'number_3',
|
||||
'number_4',
|
||||
'number_5',
|
||||
'number_6',
|
||||
'number_7',
|
||||
'number_8',
|
||||
'number_9',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'chart',
|
||||
icons: ['chart_bar', 'chart_line', 'chart_curve', 'chart_pie', 'chart_organisation'],
|
||||
},
|
||||
{
|
||||
id: 'sign',
|
||||
icons: ['sign_warning', 'sign_info', 'sign_stop', 'sign_help', 'sign_cancel'],
|
||||
},
|
||||
{
|
||||
id: 'hard',
|
||||
icons: [
|
||||
'hard_cd',
|
||||
'hard_computer',
|
||||
'hard_controller',
|
||||
'hard_driver_disk',
|
||||
'hard_ipod',
|
||||
'hard_keyboard',
|
||||
'hard_mouse',
|
||||
'hard_printer',
|
||||
'hard_webcam',
|
||||
'hard_microphone',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'things',
|
||||
icons: [
|
||||
'things_address_book',
|
||||
'things_wrench',
|
||||
'things_pin',
|
||||
'things_window-layout',
|
||||
'things_bubbles',
|
||||
],
|
||||
},
|
||||
{
|
||||
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;
|
||||
|
||||
@ -9,7 +9,7 @@ class Options {
|
||||
const optionsKeys = Object.keys(options);
|
||||
for (let index = 0; index < optionsKeys.length; 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]);
|
||||
delete options[option];
|
||||
}
|
||||
|
||||
@ -44,12 +44,17 @@ const TopicFeatureFactory = {
|
||||
$assert(topic, 'topic can not be null');
|
||||
$assert(model, 'model can not be null');
|
||||
|
||||
const { icon: Icon } = TopicFeatureFactory._featuresMetadataById
|
||||
.filter((elem) => elem.id === model.getType())[0];
|
||||
const { icon: Icon } = TopicFeatureFactory._featuresMetadataById.filter(
|
||||
(elem) => elem.id === model.getType(),
|
||||
)[0];
|
||||
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;
|
||||
|
||||
@ -15,16 +15,9 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
$assert,
|
||||
$defined,
|
||||
} from '@wisemapping/core-js';
|
||||
import {
|
||||
$msg,
|
||||
} from './Messages';
|
||||
import {
|
||||
TopicShape,
|
||||
} from './model/INodeModel';
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { $msg } from './Messages';
|
||||
import { TopicShape } from './model/INodeModel';
|
||||
|
||||
class TopicStyle {
|
||||
static _getStyles(topic) {
|
||||
@ -49,9 +42,7 @@ class TopicStyle {
|
||||
}
|
||||
|
||||
static defaultText(topic) {
|
||||
const {
|
||||
msgKey,
|
||||
} = this._getStyles(topic);
|
||||
const { msgKey } = this._getStyles(topic);
|
||||
return $msg(msgKey);
|
||||
}
|
||||
|
||||
|
||||
@ -41,17 +41,17 @@ class ChangeEvent {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {} value the order to set
|
||||
* @throws will throw an error if the given parameter is not/cannot be converted to a numerical
|
||||
* value
|
||||
*/
|
||||
* @param {} value the order to set
|
||||
* @throws will throw an error if the given parameter is not/cannot be converted to a numerical
|
||||
* value
|
||||
*/
|
||||
setOrder(value) {
|
||||
$assert(!Number.isNaN(value), 'value can not be null');
|
||||
this._order = 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) {
|
||||
$assert(value, 'value can not be null');
|
||||
this._position = value;
|
||||
@ -59,7 +59,9 @@ class ChangeEvent {
|
||||
|
||||
/** @return {String} order and position */
|
||||
toString() {
|
||||
return `[order:${this.getOrder()}, position: {${this.getPosition().x},${this.getPosition().y}}]`;
|
||||
return `[order:${this.getOrder()}, position: {${this.getPosition().x},${
|
||||
this.getPosition().y
|
||||
}}]`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -42,12 +42,12 @@ class GridSorter extends AbstractBasicSorter {
|
||||
for (let i = 0; i < heights.length; i++) {
|
||||
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;
|
||||
for (let j = i - 2; j > 0; j -= 2) {
|
||||
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 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() {
|
||||
return 'Grid Sorter';
|
||||
}
|
||||
|
||||
@ -20,44 +20,37 @@ import AbstractBasicSorter from './AbstractBasicSorter';
|
||||
|
||||
class SymmetricSorter extends AbstractBasicSorter {
|
||||
/**
|
||||
* Predict the order and position of a dragged node.
|
||||
*
|
||||
* @param graph The tree set
|
||||
* @param parent The parent of the node
|
||||
* @param node The node
|
||||
* @param position The position of the drag
|
||||
* @param free Free drag or not
|
||||
* @return {*}
|
||||
*/
|
||||
* Predict the order and position of a dragged node.
|
||||
*
|
||||
* @param graph The tree set
|
||||
* @param parent The parent of the node
|
||||
* @param node The node
|
||||
* @param position The position of the drag
|
||||
* @param free Free drag or not
|
||||
* @return {*}
|
||||
*/
|
||||
predict(graph, parent, node, position, free) {
|
||||
const self = this;
|
||||
const rootNode = graph.getRootNode(parent);
|
||||
|
||||
// If its a free node...
|
||||
if (free) {
|
||||
$assert($defined(position),
|
||||
'position cannot be null for predict in free positioning');
|
||||
$assert($defined(position), 'position cannot be null for predict in free positioning');
|
||||
$assert($defined(node), 'node cannot be null for predict in free positioning');
|
||||
|
||||
const direction = this._getRelativeDirection(
|
||||
rootNode.getPosition(),
|
||||
parent.getPosition(),
|
||||
);
|
||||
const limitXPos = parent.getPosition().x
|
||||
+ direction
|
||||
* (parent.getSize().width / 2
|
||||
+ node.getSize().width / 2
|
||||
+ SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
|
||||
const direction = this._getRelativeDirection(rootNode.getPosition(), parent.getPosition());
|
||||
const limitXPos =
|
||||
parent.getPosition().x +
|
||||
direction *
|
||||
(parent.getSize().width / 2 +
|
||||
node.getSize().width / 2 +
|
||||
SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
|
||||
|
||||
let xPos;
|
||||
if (direction > 0) {
|
||||
xPos = position.x >= limitXPos
|
||||
? position.x
|
||||
: limitXPos;
|
||||
xPos = position.x >= limitXPos ? position.x : limitXPos;
|
||||
} else {
|
||||
xPos = position.x <= limitXPos
|
||||
? position.x
|
||||
: limitXPos;
|
||||
xPos = position.x <= limitXPos ? position.x : limitXPos;
|
||||
}
|
||||
return [0, { x: xPos, y: position.y }];
|
||||
}
|
||||
@ -71,9 +64,8 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
|
||||
const result = {
|
||||
x:
|
||||
parent.getPosition().x
|
||||
+ parentDirection
|
||||
* (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
|
||||
parent.getPosition().x +
|
||||
parentDirection * (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
|
||||
y: parent.getPosition().y,
|
||||
};
|
||||
return [graph.getChildren(parent).length, result];
|
||||
@ -81,10 +73,7 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
|
||||
// If it is a dragged node...
|
||||
$assert($defined(position), 'position cannot be null for predict in dragging');
|
||||
const nodeDirection = this._getRelativeDirection(
|
||||
rootNode.getPosition(),
|
||||
node.getPosition(),
|
||||
);
|
||||
const nodeDirection = this._getRelativeDirection(rootNode.getPosition(), node.getPosition());
|
||||
const positionDirection = this._getRelativeDirection(rootNode.getPosition(), position);
|
||||
const siblings = graph.getSiblings(node);
|
||||
|
||||
@ -98,9 +87,10 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
if (parentChildren.length === 0) {
|
||||
// Fit as a child of the parent node...
|
||||
const result = {
|
||||
x: parent.getPosition().x
|
||||
+ positionDirection
|
||||
* (parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
|
||||
x:
|
||||
parent.getPosition().x +
|
||||
positionDirection *
|
||||
(parent.getSize().width + SymmetricSorter.INTERNODE_HORIZONTAL_PADDING),
|
||||
y: parent.getPosition().y,
|
||||
};
|
||||
|
||||
@ -115,41 +105,38 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
|
||||
// Fit at the bottom
|
||||
if (!nodeAfter && position.y > parentChild.getPosition().y) {
|
||||
const order = graph.getParent(node) && graph.getParent(node).getId() === parent.getId()
|
||||
? last.getOrder()
|
||||
: last.getOrder() + 1;
|
||||
const order =
|
||||
graph.getParent(node) && graph.getParent(node).getId() === parent.getId()
|
||||
? last.getOrder()
|
||||
: last.getOrder() + 1;
|
||||
|
||||
const result = {
|
||||
x: parentChild.getPosition().x,
|
||||
y:
|
||||
parentChild.getPosition().y
|
||||
+ parentChild.getSize().height
|
||||
+ SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
|
||||
parentChild.getPosition().y +
|
||||
parentChild.getSize().height +
|
||||
SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
|
||||
};
|
||||
return [order, result];
|
||||
}
|
||||
|
||||
// Fit after this node
|
||||
if (
|
||||
nodeAfter
|
||||
&& position.y > parentChild.getPosition().y
|
||||
&& position.y < nodeAfter.getPosition().y
|
||||
nodeAfter &&
|
||||
position.y > parentChild.getPosition().y &&
|
||||
position.y < nodeAfter.getPosition().y
|
||||
) {
|
||||
if (
|
||||
nodeAfter.getId() === node.getId()
|
||||
|| parentChild.getId() === node.getId()
|
||||
) {
|
||||
if (nodeAfter.getId() === node.getId() || parentChild.getId() === node.getId()) {
|
||||
return [node.getOrder(), node.getPosition()];
|
||||
}
|
||||
const orderResult = position.y > node.getPosition().y
|
||||
? nodeAfter.getOrder() - 1
|
||||
: parentChild.getOrder() + 1;
|
||||
const orderResult =
|
||||
position.y > node.getPosition().y ? nodeAfter.getOrder() - 1 : parentChild.getOrder() + 1;
|
||||
|
||||
const positionResult = {
|
||||
x: parentChild.getPosition().x,
|
||||
y:
|
||||
parentChild.getPosition().y
|
||||
+ (nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
|
||||
parentChild.getPosition().y +
|
||||
(nodeAfter.getPosition().y - parentChild.getPosition().y) / 2,
|
||||
};
|
||||
|
||||
return [orderResult, positionResult];
|
||||
@ -161,20 +148,20 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
const resultPosition = {
|
||||
x: first.getPosition().x,
|
||||
y:
|
||||
first.getPosition().y
|
||||
- first.getSize().height
|
||||
- SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
|
||||
first.getPosition().y -
|
||||
first.getSize().height -
|
||||
SymmetricSorter.INTERNODE_VERTICAL_PADDING * 2,
|
||||
};
|
||||
return [0, resultPosition];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param treeSet
|
||||
* @param parent
|
||||
* @param child
|
||||
* @param order
|
||||
* @throws will throw an error if the order is not strictly continuous
|
||||
*/
|
||||
* @param treeSet
|
||||
* @param parent
|
||||
* @param child
|
||||
* @param order
|
||||
* @throws will throw an error if the order is not strictly continuous
|
||||
*/
|
||||
insert(treeSet, parent, child, order) {
|
||||
const children = this._getSortedChildren(treeSet, parent);
|
||||
$assert(
|
||||
@ -191,9 +178,9 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param treeSet
|
||||
* @param node
|
||||
* @throws will throw an error if the node is in the wrong position */
|
||||
* @param treeSet
|
||||
* @param node
|
||||
* @throws will throw an error if the node is in the wrong position */
|
||||
detach(treeSet, node) {
|
||||
const parent = treeSet.getParent(node);
|
||||
const children = this._getSortedChildren(treeSet, parent);
|
||||
@ -227,13 +214,14 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
|
||||
// Compute heights ...
|
||||
const heights = children
|
||||
.map(((child) => ({
|
||||
.map((child) => ({
|
||||
id: child.getId(),
|
||||
order: child.getOrder(),
|
||||
position: child.getPosition(),
|
||||
width: child.getSize().width,
|
||||
height: this._computeChildrenHeight(treeSet, child),
|
||||
}))).reverse();
|
||||
}))
|
||||
.reverse();
|
||||
|
||||
// Compute the center of the branch ...
|
||||
let totalHeight = 0;
|
||||
@ -250,10 +238,11 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
const direction = this.getChildDirection(treeSet, childNode);
|
||||
|
||||
const yOffset = ysum + heights[i].height / 2;
|
||||
const xOffset = direction
|
||||
* (heights[i].width / 2
|
||||
+ node.getSize().width / 2
|
||||
+ SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
|
||||
const xOffset =
|
||||
direction *
|
||||
(heights[i].width / 2 +
|
||||
node.getSize().width / 2 +
|
||||
SymmetricSorter.INTERNODE_HORIZONTAL_PADDING);
|
||||
|
||||
$assert(!Number.isNaN(xOffset), 'xOffset can not be null');
|
||||
$assert(!Number.isNaN(yOffset), 'yOffset can not be null');
|
||||
@ -264,10 +253,10 @@ class SymmetricSorter extends AbstractBasicSorter {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param treeSet
|
||||
* @param node
|
||||
* @throws will throw an error if order elements are missing
|
||||
*/
|
||||
* @param treeSet
|
||||
* @param node
|
||||
* @throws will throw an error if order elements are missing
|
||||
*/
|
||||
verify(treeSet, node) {
|
||||
// Check that all is consistent ...
|
||||
const children = this._getSortedChildren(treeSet, node);
|
||||
|
||||
@ -106,10 +106,7 @@ const Shape = {
|
||||
const x2 = tarPos.x + Math.sqrt((l * l) / (1 + m * m)) * fix * -1;
|
||||
const y2 = m * (x2 - tarPos.x) + tarPos.y;
|
||||
|
||||
return [
|
||||
new Point(-srcPos.x + x1, -srcPos.y + y1),
|
||||
new Point(-tarPos.x + x2, -tarPos.y + y2),
|
||||
];
|
||||
return [new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-tarPos.x + x2, -tarPos.y + y2)];
|
||||
},
|
||||
|
||||
workoutIncomingConnectionPoint(targetNode, sourcePosition) {
|
||||
|
||||
@ -215,8 +215,8 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction1a = manager.predict(0, null, { x: 165, y: -70 });
|
||||
this._plotPrediction(graph1, prediction1a);
|
||||
$assert(
|
||||
prediction1a.position.y < manager.find(1).getPosition().y
|
||||
&& prediction1a.position.x == manager.find(1).getPosition().x,
|
||||
prediction1a.position.y < manager.find(1).getPosition().y &&
|
||||
prediction1a.position.x == manager.find(1).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1b);
|
||||
$assert(
|
||||
prediction1b.position.y > manager.find(1).getPosition().y
|
||||
&& prediction1b.position.y < manager.find(3).getPosition().y
|
||||
&& prediction1b.position.x == manager.find(1).getPosition().x,
|
||||
prediction1b.position.y > manager.find(1).getPosition().y &&
|
||||
prediction1b.position.y < manager.find(3).getPosition().y &&
|
||||
prediction1b.position.x == manager.find(1).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1c);
|
||||
$assert(
|
||||
prediction1c.position.y > manager.find(3).getPosition().y
|
||||
&& prediction1c.position.y < manager.find(5).getPosition().y
|
||||
&& prediction1c.position.x == manager.find(3).getPosition().x,
|
||||
prediction1c.position.y > manager.find(3).getPosition().y &&
|
||||
prediction1c.position.y < manager.find(5).getPosition().y &&
|
||||
prediction1c.position.x == manager.find(3).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1d);
|
||||
$assert(
|
||||
prediction1d.position.y > manager.find(5).getPosition().y
|
||||
&& prediction1d.position.x == manager.find(5).getPosition().x,
|
||||
prediction1d.position.y > manager.find(5).getPosition().y &&
|
||||
prediction1d.position.x == manager.find(5).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2a);
|
||||
$assert(
|
||||
prediction2a.position.y < manager.find(2).getPosition().y
|
||||
&& prediction2a.position.x == manager.find(2).getPosition().x,
|
||||
prediction2a.position.y < manager.find(2).getPosition().y &&
|
||||
prediction2a.position.x == manager.find(2).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2b);
|
||||
$assert(
|
||||
prediction2b.position.y > manager.find(2).getPosition().y
|
||||
&& prediction2b.position.y < manager.find(4).getPosition().y
|
||||
&& prediction2b.position.x == manager.find(2).getPosition().x,
|
||||
prediction2b.position.y > manager.find(2).getPosition().y &&
|
||||
prediction2b.position.y < manager.find(4).getPosition().y &&
|
||||
prediction2b.position.x == manager.find(2).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2c);
|
||||
$assert(
|
||||
prediction2c.position.y > manager.find(4).getPosition().y
|
||||
&& prediction2c.position.x == manager.find(4).getPosition().x,
|
||||
prediction2c.position.y > manager.find(4).getPosition().y &&
|
||||
prediction2c.position.x == manager.find(4).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction2c.order == 5, 'Prediction order should be 5');
|
||||
@ -293,8 +293,8 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction3 = manager.predict(0, null, null);
|
||||
this._plotPrediction(graph3, prediction3);
|
||||
$assert(
|
||||
prediction3.position.y > manager.find(4).getPosition().y
|
||||
&& prediction3.position.x == manager.find(4).getPosition().x,
|
||||
prediction3.position.y > manager.find(4).getPosition().y &&
|
||||
prediction3.position.x == manager.find(4).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction3.order == 5, 'Prediction order should be 5');
|
||||
@ -307,15 +307,14 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction4 = manager.predict(0, null, null);
|
||||
this._plotPrediction(graph4, prediction4);
|
||||
$assert(
|
||||
prediction4.position.y > manager.find(5).getPosition().y
|
||||
&& prediction4.position.x == manager.find(5).getPosition().x,
|
||||
prediction4.position.y > manager.find(5).getPosition().y &&
|
||||
prediction4.position.x == manager.find(5).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction4.order == 6, 'Prediction order should be 6');
|
||||
|
||||
console.log('\tPredict nodes added only a root node:');
|
||||
manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4)
|
||||
.removeNode(5);
|
||||
manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4).removeNode(5);
|
||||
manager.layout();
|
||||
const graph5 = manager.plot('testBalancedPredict5', { width: 1000, height: 400 });
|
||||
const prediction5a = manager.predict(0, null, null);
|
||||
@ -323,14 +322,14 @@ class BalancedTestSuite extends TestSuite {
|
||||
this._plotPrediction(graph5, prediction5a);
|
||||
this._plotPrediction(graph5, prediction5b);
|
||||
$assert(
|
||||
prediction5a.position.x > manager.find(0).getPosition().x
|
||||
&& prediction5a.position.y == manager.find(0).getPosition().y,
|
||||
prediction5a.position.x > manager.find(0).getPosition().x &&
|
||||
prediction5a.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction5a.order == 0, 'Prediction order should be 0');
|
||||
$assert(
|
||||
prediction5a.position.x == prediction5b.position.x
|
||||
&& prediction5a.position.y == prediction5b.position.y,
|
||||
prediction5a.position.x == prediction5b.position.x &&
|
||||
prediction5a.position.y == prediction5b.position.y,
|
||||
'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 });
|
||||
this._plotPrediction(graph1, prediction1a);
|
||||
$assert(
|
||||
prediction1a.position.x == manager.find(1).getPosition().x
|
||||
&& prediction1a.position.y == manager.find(1).getPosition().y,
|
||||
prediction1a.position.x == manager.find(1).getPosition().x &&
|
||||
prediction1a.position.y == manager.find(1).getPosition().y,
|
||||
'Prediction position should be the same as node 1',
|
||||
);
|
||||
$assert(
|
||||
@ -363,8 +362,8 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction1b = manager.predict(0, 1, { x: 50, y: -50 });
|
||||
this._plotPrediction(graph1, prediction1b);
|
||||
$assert(
|
||||
prediction1b.position.x == manager.find(1).getPosition().x
|
||||
&& prediction1b.position.y == manager.find(1).getPosition().y,
|
||||
prediction1b.position.x == manager.find(1).getPosition().x &&
|
||||
prediction1b.position.y == manager.find(1).getPosition().y,
|
||||
'Prediction position should be the same as node 1',
|
||||
);
|
||||
$assert(
|
||||
@ -375,8 +374,8 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction1c = manager.predict(0, 1, { x: -50, y: 50 });
|
||||
this._plotPrediction(graph1, prediction1c);
|
||||
$assert(
|
||||
prediction1c.position.x < manager.find(0).getPosition().x
|
||||
&& prediction1c.position.y == manager.find(0).getPosition().y,
|
||||
prediction1c.position.x < manager.find(0).getPosition().x &&
|
||||
prediction1c.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1d);
|
||||
$assert(
|
||||
prediction1d.position.x < manager.find(0).getPosition().x
|
||||
&& prediction1d.position.y == manager.find(0).getPosition().y,
|
||||
prediction1d.position.x < manager.find(0).getPosition().x &&
|
||||
prediction1d.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2a);
|
||||
$assert(
|
||||
prediction2a.position.x > manager.find(0).getPosition().x
|
||||
&& prediction2a.position.y == manager.find(0).getPosition().y,
|
||||
prediction2a.position.x > manager.find(0).getPosition().x &&
|
||||
prediction2a.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is positioned incorrectly',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2b);
|
||||
$assert(
|
||||
prediction2b.position.x > manager.find(0).getPosition().x
|
||||
&& prediction2b.position.y == manager.find(0).getPosition().y,
|
||||
prediction2b.position.x > manager.find(0).getPosition().x &&
|
||||
prediction2b.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is positioned incorrectly',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2c);
|
||||
$assert(
|
||||
prediction2c.position.x == manager.find(1).getPosition().x
|
||||
&& prediction2c.position.y == manager.find(1).getPosition().y,
|
||||
prediction2c.position.x == manager.find(1).getPosition().x &&
|
||||
prediction2c.position.y == manager.find(1).getPosition().y,
|
||||
'Prediction position should be the same as node 1',
|
||||
);
|
||||
$assert(
|
||||
@ -429,8 +428,8 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction2d = manager.predict(0, 1, { x: -50, y: -50 });
|
||||
this._plotPrediction(graph2, prediction2d);
|
||||
$assert(
|
||||
prediction2d.position.x == manager.find(1).getPosition().x
|
||||
&& prediction2d.position.y == manager.find(1).getPosition().y,
|
||||
prediction2d.position.x == manager.find(1).getPosition().x &&
|
||||
prediction2d.position.y == manager.find(1).getPosition().y,
|
||||
'Prediction position should be the same as node 1',
|
||||
);
|
||||
$assert(
|
||||
@ -448,8 +447,8 @@ class BalancedTestSuite extends TestSuite {
|
||||
const prediction3a = manager.predict(0, 1, { x: 50, y: 50 });
|
||||
this._plotPrediction(graph3, prediction3a);
|
||||
$assert(
|
||||
prediction3a.position.x == manager.find(2).getPosition().x
|
||||
&& prediction3a.position.y > manager.find(2).getPosition().y,
|
||||
prediction3a.position.x == manager.find(2).getPosition().x &&
|
||||
prediction3a.position.y > manager.find(2).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph3, prediction3b);
|
||||
$assert(
|
||||
prediction3b.position.x == manager.find(1).getPosition().x
|
||||
&& prediction3b.position.y == manager.find(1).getPosition().y
|
||||
&& prediction3b.order == manager.find(1).getOrder(),
|
||||
prediction3b.position.x == manager.find(1).getPosition().x &&
|
||||
prediction3b.position.y == manager.find(1).getPosition().y &&
|
||||
prediction3b.order == manager.find(1).getOrder(),
|
||||
'Prediction should be the exact same as dragged node',
|
||||
);
|
||||
|
||||
const prediction3c = manager.predict(0, 1, { x: -50, y: 50 });
|
||||
this._plotPrediction(graph3, prediction3c);
|
||||
$assert(
|
||||
prediction3c.position.x < manager.find(0).getPosition().x
|
||||
&& prediction3c.position.y == manager.find(0).getPosition().y,
|
||||
prediction3c.position.x < manager.find(0).getPosition().x &&
|
||||
prediction3c.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph3, prediction3d);
|
||||
$assert(
|
||||
prediction3d.position.x < manager.find(0).getPosition().x
|
||||
&& prediction3d.position.y == manager.find(0).getPosition().y,
|
||||
prediction3d.position.x < manager.find(0).getPosition().x &&
|
||||
prediction3d.position.y == manager.find(0).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph3, prediction3e);
|
||||
$assert(
|
||||
prediction3e.position.x == manager.find(1).getPosition().x
|
||||
&& prediction3e.position.y == manager.find(1).getPosition().y,
|
||||
prediction3e.position.x == manager.find(1).getPosition().x &&
|
||||
prediction3e.position.y == manager.find(1).getPosition().y,
|
||||
'Prediction position should be the same as node 1',
|
||||
);
|
||||
$assert(
|
||||
|
||||
@ -78,18 +78,18 @@ class SymmetricTestSuite extends TestSuite {
|
||||
'Symmetry is not respected',
|
||||
);
|
||||
$assert(
|
||||
manager.find(11).getPosition().y - manager.find(6).getPosition().y
|
||||
=== -(manager.find(12).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),
|
||||
'Symmetry is not respected',
|
||||
);
|
||||
$assert(
|
||||
manager.find(8).getPosition().y - manager.find(1).getPosition().y
|
||||
== -(manager.find(11).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),
|
||||
'Symmetry is not respected',
|
||||
);
|
||||
$assert(
|
||||
manager.find(9).getPosition().y - manager.find(1).getPosition().y
|
||||
== -(manager.find(11).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),
|
||||
'Symmetry is not respected',
|
||||
);
|
||||
|
||||
@ -135,8 +135,8 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction1a = manager.predict(9, null, { x: -280, y: 45 });
|
||||
this._plotPrediction(graph1, prediction1a);
|
||||
$assert(
|
||||
prediction1a.position.x < manager.find(9).getPosition().x
|
||||
&& prediction1a.position.y == manager.find(9).getPosition().y,
|
||||
prediction1a.position.x < manager.find(9).getPosition().x &&
|
||||
prediction1a.position.y == manager.find(9).getPosition().y,
|
||||
'Prediction incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1b);
|
||||
$assert(
|
||||
prediction1b.position.x > manager.find(1).getPosition().x
|
||||
&& prediction1b.position.y == manager.find(1).getPosition().y,
|
||||
prediction1b.position.x > manager.find(1).getPosition().x &&
|
||||
prediction1b.position.y == manager.find(1).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction1b.order == 0, 'Prediction order should be 0');
|
||||
@ -160,8 +160,8 @@ class SymmetricTestSuite extends TestSuite {
|
||||
|
||||
// Prediction calculator error
|
||||
$assert(
|
||||
prediction2d.position.y < manager.find(7).getPosition().y
|
||||
&& prediction2d.position.x == manager.find(7).getPosition().x,
|
||||
prediction2d.position.y < manager.find(7).getPosition().y &&
|
||||
prediction2d.position.x == manager.find(7).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction2d.order == 0, 'Prediction order should be 0');
|
||||
@ -171,9 +171,9 @@ class SymmetricTestSuite extends TestSuite {
|
||||
this._plotPrediction(graph2, prediction2a);
|
||||
|
||||
$assert(
|
||||
prediction2a.position.y > manager.find(7).getPosition().y
|
||||
&& prediction2a.position.y < manager.find(8).getPosition().y
|
||||
&& prediction2a.position.x == manager.find(7).getPosition().x,
|
||||
prediction2a.position.y > manager.find(7).getPosition().y &&
|
||||
prediction2a.position.y < manager.find(8).getPosition().y &&
|
||||
prediction2a.position.x == manager.find(7).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2b);
|
||||
$assert(
|
||||
prediction2b.position.y > manager.find(8).getPosition().y
|
||||
&& prediction2b.position.y < manager.find(11).getPosition().y
|
||||
&& prediction2b.position.x == manager.find(7).getPosition().x,
|
||||
prediction2b.position.y > manager.find(8).getPosition().y &&
|
||||
prediction2b.position.y < manager.find(11).getPosition().y &&
|
||||
prediction2b.position.x == manager.find(7).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph2, prediction2c);
|
||||
$assert(
|
||||
prediction2c.position.y > manager.find(11).getPosition().y
|
||||
&& prediction2c.position.x == manager.find(11).getPosition().x,
|
||||
prediction2c.position.y > manager.find(11).getPosition().y &&
|
||||
prediction2c.position.x == manager.find(11).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph3, prediction3a);
|
||||
$assert(
|
||||
prediction3a.position.y > manager.find(5).getPosition().y
|
||||
&& prediction3a.position.y < manager.find(6).getPosition().y
|
||||
&& prediction3a.position.x == manager.find(5).getPosition().x,
|
||||
prediction3a.position.y > manager.find(5).getPosition().y &&
|
||||
prediction3a.position.y < manager.find(6).getPosition().y &&
|
||||
prediction3a.position.x == manager.find(5).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph3, prediction3b);
|
||||
$assert(
|
||||
prediction3b.position.y > manager.find(6).getPosition().y
|
||||
&& prediction3b.position.x == manager.find(6).getPosition().x,
|
||||
prediction3b.position.y > manager.find(6).getPosition().y &&
|
||||
prediction3b.position.x == manager.find(6).getPosition().x,
|
||||
'Prediction incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph4, prediction4);
|
||||
$assert(
|
||||
prediction4.position.y > manager.find(9).getPosition().y
|
||||
&& prediction4.position.y < manager.find(10).getPosition().y
|
||||
&& prediction4.position.x == manager.find(9).getPosition().x,
|
||||
prediction4.position.y > manager.find(9).getPosition().y &&
|
||||
prediction4.position.y < manager.find(10).getPosition().y &&
|
||||
prediction4.position.x == manager.find(9).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction4.order == 1, 'Prediction order should be 1');
|
||||
@ -242,8 +242,8 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction5a = manager.predict(1, null, null);
|
||||
this._plotPrediction(graph5, prediction5a);
|
||||
$assert(
|
||||
prediction5a.position.y == manager.find(1).getPosition().y
|
||||
&& prediction5a.position.x > manager.find(1).getPosition().x,
|
||||
prediction5a.position.y == manager.find(1).getPosition().y &&
|
||||
prediction5a.position.x > manager.find(1).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction5a.order == 0, 'Prediction order should be 0');
|
||||
@ -251,9 +251,9 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction5b = manager.predict(2, null, null);
|
||||
this._plotPrediction(graph5, prediction5b);
|
||||
$assert(
|
||||
prediction5b.position.y > manager.find(10).getPosition().y
|
||||
&& prediction5b.position.x < manager.find(2).getPosition().x
|
||||
&& prediction5b.position.x == manager.find(10).getPosition().x,
|
||||
prediction5b.position.y > manager.find(10).getPosition().y &&
|
||||
prediction5b.position.x < manager.find(2).getPosition().x &&
|
||||
prediction5b.position.x == manager.find(10).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction5b.order == 2, 'Prediction order should be 2');
|
||||
@ -261,9 +261,9 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction5c = manager.predict(3, null, null);
|
||||
this._plotPrediction(graph5, prediction5c);
|
||||
$assert(
|
||||
prediction5c.position.y > manager.find(6).getPosition().y
|
||||
&& prediction5c.position.x > manager.find(3).getPosition().x
|
||||
&& prediction5c.position.x == manager.find(6).getPosition().x,
|
||||
prediction5c.position.y > manager.find(6).getPosition().y &&
|
||||
prediction5c.position.x > manager.find(3).getPosition().x &&
|
||||
prediction5c.position.x == manager.find(6).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$assert(prediction5c.order == 3, 'Prediction order should be 3');
|
||||
@ -271,8 +271,8 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction5d = manager.predict(10, null, null);
|
||||
this._plotPrediction(graph5, prediction5d);
|
||||
$assert(
|
||||
prediction5d.position.y == manager.find(10).getPosition().y
|
||||
&& prediction5d.position.x < manager.find(10).getPosition().x,
|
||||
prediction5d.position.y == manager.find(10).getPosition().y &&
|
||||
prediction5d.position.x < manager.find(10).getPosition().x,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1a);
|
||||
$assert(
|
||||
prediction1a.position.x == manager.find(2).getPosition().x
|
||||
&& prediction1a.position.y == manager.find(2).getPosition().y,
|
||||
prediction1a.position.x == manager.find(2).getPosition().x &&
|
||||
prediction1a.position.y == manager.find(2).getPosition().y,
|
||||
'Prediction position should be the same as node 2',
|
||||
);
|
||||
$assert(
|
||||
@ -307,8 +307,8 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction1b = manager.predict(1, 2, { x: -250, y: 20 });
|
||||
this._plotPrediction(graph1, prediction1b);
|
||||
$assert(
|
||||
prediction1b.position.x == manager.find(2).getPosition().x
|
||||
&& prediction1b.position.y == manager.find(2).getPosition().y,
|
||||
prediction1b.position.x == manager.find(2).getPosition().x &&
|
||||
prediction1b.position.y == manager.find(2).getPosition().y,
|
||||
'Prediction position should be the same as node 2',
|
||||
);
|
||||
$assert(
|
||||
@ -319,8 +319,8 @@ class SymmetricTestSuite extends TestSuite {
|
||||
const prediction1c = manager.predict(0, 2, { x: -100, y: -20 });
|
||||
this._plotPrediction(graph1, prediction1c);
|
||||
$assert(
|
||||
prediction1c.position.x == manager.find(1).getPosition().x
|
||||
&& prediction1c.position.y < manager.find(1).getPosition().y,
|
||||
prediction1c.position.x == manager.find(1).getPosition().x &&
|
||||
prediction1c.position.y < manager.find(1).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1d);
|
||||
$assert(
|
||||
prediction1d.position.x == manager.find(1).getPosition().x
|
||||
&& prediction1d.position.y > manager.find(1).getPosition().y,
|
||||
prediction1d.position.x == manager.find(1).getPosition().x &&
|
||||
prediction1d.position.y > manager.find(1).getPosition().y,
|
||||
'Prediction is incorrectly positioned',
|
||||
);
|
||||
$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 });
|
||||
this._plotPrediction(graph1, prediction1e);
|
||||
$assert(
|
||||
prediction1e.position.x == manager.find(2).getPosition().x
|
||||
&& prediction1e.position.y == manager.find(2).getPosition().y,
|
||||
prediction1e.position.x == manager.find(2).getPosition().x &&
|
||||
prediction1e.position.y == manager.find(2).getPosition().y,
|
||||
'Prediction position should be the same as node 2',
|
||||
);
|
||||
$assert(
|
||||
|
||||
@ -164,11 +164,9 @@ class TestSuite extends ChildrenSorterStrategy {
|
||||
let events = [];
|
||||
manager.addEvent('change', (event) => {
|
||||
console.log(
|
||||
`\tUpdated nodes: {id:${event.getId()
|
||||
} order: ${event.getOrder()
|
||||
}position: {${event.getPosition().x
|
||||
}${event.getPosition().y
|
||||
}}`,
|
||||
`\tUpdated nodes: {id:${event.getId()} order: ${event.getOrder()}position: {${
|
||||
event.getPosition().x
|
||||
}${event.getPosition().y}}`,
|
||||
);
|
||||
events.push(event);
|
||||
});
|
||||
@ -206,11 +204,9 @@ class TestSuite extends ChildrenSorterStrategy {
|
||||
let events = [];
|
||||
manager.addEvent('change', (event) => {
|
||||
console.log(
|
||||
`\tUpdated nodes: {id:${event.getId()
|
||||
} order: ${event.getOrder()
|
||||
}position: {${event.getPosition().x
|
||||
}${event.getPosition().y
|
||||
}}`,
|
||||
`\tUpdated nodes: {id:${event.getId()} order: ${event.getOrder()}position: {${
|
||||
event.getPosition().x
|
||||
}${event.getPosition().y}}`,
|
||||
);
|
||||
events.push(event);
|
||||
});
|
||||
@ -259,12 +255,7 @@ class TestSuite extends ChildrenSorterStrategy {
|
||||
const pos = event.getPosition();
|
||||
const posStr = pos ? `,position: {${pos.x}${pos.y}` : '';
|
||||
const node = manager.find(event.getId());
|
||||
console.log(
|
||||
`\tUpdated nodes: {id:${event.getId()
|
||||
} order: ${event.getOrder()
|
||||
}${posStr
|
||||
}}`,
|
||||
);
|
||||
console.log(`\tUpdated nodes: {id:${event.getId()} order: ${event.getOrder()}${posStr}}`);
|
||||
events.push(event);
|
||||
});
|
||||
manager.layout(true);
|
||||
@ -349,8 +340,8 @@ class TestSuite extends ChildrenSorterStrategy {
|
||||
'Node 6 and their children should be to the left of node 4',
|
||||
);
|
||||
$assert(
|
||||
manager.find(6).getPosition().x > manager.find(11).getPosition().x
|
||||
&& manager.find(11).getPosition().x == manager.find(12).getPosition().x,
|
||||
manager.find(6).getPosition().x > manager.find(11).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',
|
||||
);
|
||||
|
||||
@ -471,8 +462,8 @@ class TestSuite extends ChildrenSorterStrategy {
|
||||
|
||||
// Check that all enlarged nodes shift children accordingly
|
||||
$assert(
|
||||
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(3).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',
|
||||
);
|
||||
const xPosNode7 = manager.find(7).getPosition().x;
|
||||
@ -564,12 +555,7 @@ class TestSuite extends ChildrenSorterStrategy {
|
||||
}
|
||||
const { position } = prediction;
|
||||
const { order } = prediction;
|
||||
console.log(
|
||||
`\t\tprediction {order:${order
|
||||
} position: (${position.x
|
||||
}${position.y
|
||||
})}`,
|
||||
);
|
||||
console.log(`\t\tprediction {order:${order} position: (${position.x}${position.y})}`);
|
||||
const cx = position.x + canvas.width / 2 - TestSuite.NODE_SIZE.width / 2;
|
||||
const cy = position.y + canvas.height / 2 - TestSuite.NODE_SIZE.height / 2;
|
||||
canvas.rect(cx, cy, TestSuite.NODE_SIZE.width, TestSuite.NODE_SIZE.height);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -54,6 +54,7 @@ Grid.prototype._createContainer = function () {
|
||||
result.style.borderCollapse = 'collapse';
|
||||
result.style.emptyCells = 'show';
|
||||
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;
|
||||
};
|
||||
|
||||
@ -6,7 +6,8 @@ describe('Balanced Test Suite', () => {
|
||||
const position = { x: 0, y: 0 };
|
||||
const manager = new LayoutManager(0, Constants.ROOT_NODE_SIZE);
|
||||
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.connectNode(0, 2, 1);
|
||||
@ -194,8 +195,7 @@ describe('Balanced Test Suite', () => {
|
||||
});
|
||||
|
||||
test('Predict nodes added only a root node', () => {
|
||||
manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4)
|
||||
.removeNode(5);
|
||||
manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4).removeNode(5);
|
||||
manager.layout();
|
||||
const prediction5a = manager.predict(0, null, null);
|
||||
const prediction5b = manager.predict(0, null, { x: 40, y: 100 });
|
||||
|
||||
@ -40,12 +40,15 @@ describe('Symmetric Test Suite', () => {
|
||||
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(5).getPosition().y).toEqual(manager.find(10).getPosition().y);
|
||||
expect(manager.find(11).getPosition().y - manager.find(6).getPosition().y)
|
||||
.toEqual(-(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(9).getPosition().y - manager.find(1).getPosition().y)
|
||||
.toEqual(-(manager.find(11).getPosition().y - manager.find(1).getPosition().y));
|
||||
expect(manager.find(11).getPosition().y - manager.find(6).getPosition().y).toEqual(
|
||||
-(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(9).getPosition().y - manager.find(1).getPosition().y).toEqual(
|
||||
-(manager.find(11).getPosition().y - manager.find(1).getPosition().y),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -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) {
|
||||
if (!$defined(element)) {
|
||||
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) {
|
||||
if (!$defined(element)) {
|
||||
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
|
||||
* - they define a CSS2 "block level box".
|
||||
* Inside the containing block a local coordinate system is
|
||||
* defined for any sub-elements using the coordsize and coordorigin attributes.
|
||||
* All CSS2 positioning information is expressed in terms of this local coordinate space.
|
||||
* Consequently CSS2 position attributes (left, top, width, height and so on)
|
||||
* have no unit specifier -
|
||||
* they are simple numbers, not CSS length quantities.
|
||||
*/
|
||||
* The group element is a containing blocks for this content
|
||||
* - they define a CSS2 "block level box".
|
||||
* Inside the containing block a local coordinate system is
|
||||
* defined for any sub-elements using the coordsize and coordorigin attributes.
|
||||
* All CSS2 positioning information is expressed in terms of this local coordinate space.
|
||||
* Consequently CSS2 position attributes (left, top, width, height and so on)
|
||||
* have no unit specifier -
|
||||
* they are simple numbers, not CSS length quantities.
|
||||
*/
|
||||
setCoordSize(width, height) {
|
||||
this.peer.setCoordSize(width, height);
|
||||
}
|
||||
|
||||
@ -53,9 +53,9 @@ class Line extends ElementClass {
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines the start and the end line arrow style.
|
||||
* Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron"
|
||||
* */
|
||||
* Defines the start and the end line arrow style.
|
||||
* Can have values "none | block | classic | diamond | oval | open | chevron | doublechevron"
|
||||
* */
|
||||
setArrowStyle(startStyle, endStyle) {
|
||||
this.peer.setArrowStyle(startStyle, endStyle);
|
||||
}
|
||||
|
||||
@ -18,19 +18,19 @@
|
||||
|
||||
class Point {
|
||||
/**
|
||||
* @constructs
|
||||
* @param {Number} x coordinate
|
||||
* @param {Number} y coordinate
|
||||
*/
|
||||
* @constructs
|
||||
* @param {Number} x coordinate
|
||||
* @param {Number} y coordinate
|
||||
*/
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Number} x coordinate
|
||||
* @param {Number} y coordinate
|
||||
*/
|
||||
* @param {Number} x coordinate
|
||||
* @param {Number} y coordinate
|
||||
*/
|
||||
setValue(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
/*
|
||||
* Copyright [2021] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
||||
* "powered by wisemapping" text requirement on every single page;
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the license at
|
||||
*
|
||||
* http://www.wisemapping.org/license
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* Copyright [2021] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
||||
* "powered by wisemapping" text requirement on every single page;
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the license at
|
||||
*
|
||||
* http://www.wisemapping.org/license
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import FontPeer from './peer/svg/FontPeer';
|
||||
import WorkspacePeer from './peer/svg/WorkspacePeer';
|
||||
|
||||
@ -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) {
|
||||
if (!$defined(element)) {
|
||||
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() {
|
||||
const container = window.document.createElement('div');
|
||||
container.style.position = 'relative';
|
||||
@ -88,13 +88,13 @@ class Workspace extends ElementClass {
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the workspace area size. It can be defined using different units:
|
||||
* in (inches; 1in=2.54cm)
|
||||
* cm (centimeters; 1cm=10mm)
|
||||
* mm (millimeters)
|
||||
* pt (points; 1pt=1/72in)
|
||||
* pc (picas; 1pc=12pt)
|
||||
*/
|
||||
* Set the workspace area size. It can be defined using different units:
|
||||
* in (inches; 1in=2.54cm)
|
||||
* cm (centimeters; 1cm=10mm)
|
||||
* mm (millimeters)
|
||||
* pt (points; 1pt=1/72in)
|
||||
* pc (picas; 1pc=12pt)
|
||||
*/
|
||||
setSize(width, height) {
|
||||
// HTML container must have the size of the group element.
|
||||
if ($defined(width)) {
|
||||
@ -108,37 +108,37 @@ class Workspace extends ElementClass {
|
||||
}
|
||||
|
||||
/**
|
||||
* The workspace element is a containing blocks for this content
|
||||
* - they define a CSS2 "block level box".
|
||||
* Inside the containing block a local coordinate system is
|
||||
* defined for any sub-elements using the coordsize and coordorigin attributes.
|
||||
* All CSS2 positioning information is expressed in terms of this local coordinate space.
|
||||
* Consequently CSS2 position attributes (left, top, width, height
|
||||
* and so on) have no unit specifier -
|
||||
* they are simple numbers, not CSS length quantities.
|
||||
*/
|
||||
* The workspace element is a containing blocks for this content
|
||||
* - they define a CSS2 "block level box".
|
||||
* Inside the containing block a local coordinate system is
|
||||
* defined for any sub-elements using the coordsize and coordorigin attributes.
|
||||
* All CSS2 positioning information is expressed in terms of this local coordinate space.
|
||||
* Consequently CSS2 position attributes (left, top, width, height
|
||||
* and so on) have no unit specifier -
|
||||
* they are simple numbers, not CSS length quantities.
|
||||
*/
|
||||
setCoordSize(width, height) {
|
||||
this.peer.setCoordSize(parseInt(width, 10), parseInt(height, 10));
|
||||
}
|
||||
|
||||
/**
|
||||
* @Todo: Complete Doc
|
||||
*/
|
||||
* @Todo: Complete Doc
|
||||
*/
|
||||
setCoordOrigin(x, y) {
|
||||
this.peer.setCoordOrigin(x, y);
|
||||
}
|
||||
|
||||
/**
|
||||
* @Todo: Complete Doc
|
||||
*/
|
||||
* @Todo: Complete Doc
|
||||
*/
|
||||
getCoordOrigin() {
|
||||
return this.peer.getCoordOrigin();
|
||||
}
|
||||
|
||||
// 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() {
|
||||
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) {
|
||||
if (!$defined(element)) {
|
||||
throw new Error('Child element can not be null');
|
||||
|
||||
@ -83,19 +83,16 @@ class ElementPeer {
|
||||
children = children.filter((c) => c !== elementPeer);
|
||||
this.setChildren(children);
|
||||
|
||||
$assert(
|
||||
children.length < oldLength,
|
||||
`element could not be removed:${elementPeer}`,
|
||||
);
|
||||
$assert(children.length < oldLength, `element could not be removed:${elementPeer}`);
|
||||
|
||||
// Append element as a child.
|
||||
this._native.removeChild(elementPeer._native);
|
||||
}
|
||||
|
||||
/**
|
||||
* http://www.w3.org/TR/DOM-Level-3-Events/events.html
|
||||
* http://developer.mozilla.org/en/docs/addEvent
|
||||
*/
|
||||
* http://www.w3.org/TR/DOM-Level-3-Events/events.html
|
||||
* http://developer.mozilla.org/en/docs/addEvent
|
||||
*/
|
||||
addEvent(type, listener) {
|
||||
// wrap it so it can be ~backward compatible with jQuery.trigger
|
||||
const wrappedListener = (e) => listener(e, e.detail);
|
||||
@ -223,15 +220,15 @@ class ElementPeer {
|
||||
}
|
||||
|
||||
/**
|
||||
* Move element to the front
|
||||
*/
|
||||
* Move element to the front
|
||||
*/
|
||||
moveToFront() {
|
||||
this._native.parentNode.appendChild(this._native);
|
||||
}
|
||||
|
||||
/**
|
||||
* Move element to the back
|
||||
*/
|
||||
* Move element to the back
|
||||
*/
|
||||
moveToBack() {
|
||||
this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
|
||||
}
|
||||
|
||||
@ -43,8 +43,8 @@ class ElipsePeer extends ElementPeer {
|
||||
setPosition(pcx, pcy) {
|
||||
const size = this.getSize();
|
||||
|
||||
const cx = (size.width / 2) + pcx;
|
||||
const cy = (size.height / 2) + pcy;
|
||||
const cx = size.width / 2 + pcx;
|
||||
const cy = size.height / 2 + pcy;
|
||||
|
||||
if ($defined(cx)) {
|
||||
this._native.setAttribute('cx', cx);
|
||||
|
||||
@ -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
|
||||
setArrowStyle(startStyle, endStyle) {
|
||||
if ($defined(startStyle)) {
|
||||
|
||||
@ -67,12 +67,7 @@ class PolyLinePeer extends ElementPeer {
|
||||
}
|
||||
|
||||
_updateStraightPath() {
|
||||
if (
|
||||
$defined(this._x1)
|
||||
&& $defined(this._x2)
|
||||
&& $defined(this._y1)
|
||||
&& $defined(this._y2)
|
||||
) {
|
||||
if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
|
||||
const path = PolyLineUtils.buildStraightPath.call(
|
||||
this,
|
||||
this.breakDistance,
|
||||
@ -90,12 +85,7 @@ class PolyLinePeer extends ElementPeer {
|
||||
const y1 = this._y1;
|
||||
const x2 = this._x2;
|
||||
const y2 = this._y2;
|
||||
if (
|
||||
$defined(x1)
|
||||
&& $defined(x2)
|
||||
&& $defined(y1)
|
||||
&& $defined(y2)
|
||||
) {
|
||||
if ($defined(x1) && $defined(x2) && $defined(y1) && $defined(y2)) {
|
||||
const diff = x2 - x1;
|
||||
const middlex = diff / 2 + x1;
|
||||
let signx = 1;
|
||||
@ -114,12 +104,7 @@ class PolyLinePeer extends ElementPeer {
|
||||
}
|
||||
|
||||
_updateCurvePath() {
|
||||
if (
|
||||
$defined(this._x1)
|
||||
&& $defined(this._x2)
|
||||
&& $defined(this._y1)
|
||||
&& $defined(this._y2)
|
||||
) {
|
||||
if ($defined(this._x1) && $defined(this._x2) && $defined(this._y1) && $defined(this._y2)) {
|
||||
const path = PolyLineUtils.buildCurvedPath.call(
|
||||
this,
|
||||
this.breakDistance,
|
||||
|
||||
@ -30,24 +30,24 @@ class WorkspacePeer extends ElementPeer {
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
* stretch to fit a particular container element. The viewBox attribute
|
||||
* provides this capability.
|
||||
*
|
||||
* All elements that establish a new viewport (see elements that establish viewports),
|
||||
* 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>,
|
||||
* <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
|
||||
* the given element, taking into account attribute preserveAspectRatio. If specified,
|
||||
* an additional transformation is applied to all descendants of the given element to
|
||||
* achieve the specified effect.
|
||||
*
|
||||
* A negative value for <width> or <height> is an error (see Error processing).
|
||||
* A value of zero disables rendering of the element.
|
||||
*
|
||||
*/
|
||||
* 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
|
||||
* stretch to fit a particular container element. The viewBox attribute
|
||||
* provides this capability.
|
||||
*
|
||||
* All elements that establish a new viewport (see elements that establish viewports),
|
||||
* 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>,
|
||||
* <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
|
||||
* the given element, taking into account attribute preserveAspectRatio. If specified,
|
||||
* an additional transformation is applied to all descendants of the given element to
|
||||
* achieve the specified effect.
|
||||
*
|
||||
* A negative value for <width> or <height> is an error (see Error processing).
|
||||
* A value of zero disables rendering of the element.
|
||||
*
|
||||
*/
|
||||
|
||||
setCoordSize(width, height) {
|
||||
const viewBox = this._native.getAttribute('viewBox');
|
||||
|
||||
@ -30,10 +30,9 @@ export const buildCurvedPath = (dist, x1, y1, x2, y2) => {
|
||||
const middlex = x1 + (x2 - x1 > 0 ? dist : -dist);
|
||||
path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${middlex.toFixed(1)}, ${y1.toFixed(
|
||||
1,
|
||||
)} ${middlex.toFixed(1)}, ${(y2 - 5 * signy).toFixed(1)} ${(
|
||||
middlex
|
||||
+ 5 * signx
|
||||
).toFixed(1)}, ${y2.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
|
||||
)} ${middlex.toFixed(1)}, ${(y2 - 5 * signy).toFixed(1)} ${(middlex + 5 * signx).toFixed(
|
||||
1,
|
||||
)}, ${y2.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
|
||||
} else {
|
||||
path = `${x1.toFixed(1)}, ${y1.toFixed(1)} ${x2.toFixed(1)}, ${y2.toFixed(1)}`;
|
||||
}
|
||||
|
||||
@ -55,9 +55,10 @@ class Grid {
|
||||
result.style.borderCollapse = 'collapse';
|
||||
result.style.emptyCells = 'show';
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
export default Grid ;
|
||||
export default Grid;
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Arrow, Point,
|
||||
} from '../../src';
|
||||
import { Workspace, Arrow, Point } from '../../src';
|
||||
|
||||
const workspace = new Workspace({ fillColor: 'green' });
|
||||
workspace.setSize('200px', '200px');
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, CurvedLine, Point,
|
||||
} from '../../src';
|
||||
import { Workspace, CurvedLine, Point } from '../../src';
|
||||
|
||||
const workspace = new Workspace({ fillColor: 'green' });
|
||||
workspace.setSize('400px', '400px');
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
/* eslint-disable no-alert */
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Elipse,
|
||||
} from '../../src';
|
||||
import { Workspace, Elipse } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
@ -55,7 +53,6 @@ MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneLis
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Workspace with CoordOrigin(100,100);
|
||||
const workspace = new Workspace();
|
||||
workspace.setSize('150px', '150px');
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Text,
|
||||
} from '../../src';
|
||||
import { Workspace, Text } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
@ -51,5 +49,9 @@ function alignments(text, family, elemId) {
|
||||
|
||||
// Multine tests and alingments .. ...
|
||||
['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}`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
/* eslint-disable no-alert */
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Toolkit, Workspace, Line, Group, Elipse,
|
||||
} from '../../src';
|
||||
import { Toolkit, Workspace, Line, Group, Elipse } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
@ -58,7 +56,7 @@ const basicTest = () => {
|
||||
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
|
||||
group.setPosition(x, y);
|
||||
};
|
||||
// executer.periodical(100);
|
||||
// executer.periodical(100);
|
||||
};
|
||||
basicTest();
|
||||
|
||||
@ -68,7 +66,12 @@ const eventTest = () => {
|
||||
workspace.setCoordSize(100, 100);
|
||||
|
||||
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);
|
||||
workspace.append(group);
|
||||
@ -262,7 +265,7 @@ const groupVisibilitySample = () => {
|
||||
isVisible = !isVisible;
|
||||
group.setVisibility(isVisible);
|
||||
};
|
||||
// executer.periodical(100);
|
||||
// executer.periodical(100);
|
||||
workspace.addItAsChildTo($('#visibilityExample'));
|
||||
};
|
||||
groupVisibilitySample();
|
||||
@ -296,7 +299,7 @@ const groupVisibilitySample2 = () => {
|
||||
height = (height + 10) % 100;
|
||||
group.setCoordSize(width, height);
|
||||
};
|
||||
// executer.periodical(100);
|
||||
// executer.periodical(100);
|
||||
workspace.addItAsChildTo($('#scaleStrokeExample'));
|
||||
};
|
||||
groupVisibilitySample2();
|
||||
|
||||
@ -2,9 +2,7 @@ import $ from 'jquery';
|
||||
import svgResource from './resources/logo-icon.svg';
|
||||
import pngResource from './resources/logo-icon.png';
|
||||
|
||||
import {
|
||||
Workspace, Image,
|
||||
} from '../../src';
|
||||
import { Workspace, Image } from '../../src';
|
||||
|
||||
// URL Based image test ...
|
||||
const workspace = new Workspace({ fillColor: 'light-gray' });
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Line, Rect,
|
||||
} from '../../src';
|
||||
import { Workspace, Line, Rect } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
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);
|
||||
|
||||
@ -18,8 +19,8 @@ strokeWidthWorkspace.append(rect);
|
||||
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
const line = new Line();
|
||||
line.setFrom(5 + (i * 25), 5);
|
||||
line.setTo(5 + (i * 25), 45);
|
||||
line.setFrom(5 + i * 25, 5);
|
||||
line.setTo(5 + i * 25, 45);
|
||||
line.setAttribute('strokeWidth', i + 1);
|
||||
strokeWidthWorkspace.append(line);
|
||||
}
|
||||
@ -30,8 +31,8 @@ strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
|
||||
const strokeOpacityWorkspace = new Workspace(workspaceAttributes);
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const line = new Line();
|
||||
line.setFrom(15 + (i * 25), 5);
|
||||
line.setTo(3 + (i * 25), 45);
|
||||
line.setFrom(15 + i * 25, 5);
|
||||
line.setTo(3 + i * 25, 45);
|
||||
line.setAttribute('strokeWidth', 2);
|
||||
line.setAttribute('strokeOpacity', 1 / (i + 1));
|
||||
line.setAttribute('strokeColor', 'red');
|
||||
@ -43,8 +44,8 @@ const strokeStyleWorkspace = new Workspace(workspaceAttributes);
|
||||
const styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
|
||||
for (let i = 0; i < styles.length; i++) {
|
||||
const line = new Line();
|
||||
line.setFrom(25 + (i * 30), 5);
|
||||
line.setTo(13 + (i * 30), 45);
|
||||
line.setFrom(25 + i * 30, 5);
|
||||
line.setTo(13 + i * 30, 45);
|
||||
line.setAttribute('strokeWidth', 2);
|
||||
line.setAttribute('strokeColor', 'red');
|
||||
line.setAttribute('strokeStyle', styles[i]);
|
||||
@ -53,11 +54,20 @@ for (let i = 0; i < styles.length; i++) {
|
||||
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
|
||||
|
||||
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++) {
|
||||
const line = new Line();
|
||||
line.setFrom(25 + (i * 30), 5);
|
||||
line.setTo(13 + (i * 30), 45);
|
||||
line.setFrom(25 + i * 30, 5);
|
||||
line.setTo(13 + i * 30, 45);
|
||||
line.setAttribute('strokeWidth', 2);
|
||||
line.setAttribute('strokeColor', 'red');
|
||||
line.setArrowStyle(styles2[i]);
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, PolyLine,
|
||||
} from '../../src';
|
||||
import { Workspace, PolyLine } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
|
||||
6
packages/web2d/test/playground/prototype.js
vendored
6
packages/web2d/test/playground/prototype.js
vendored
@ -100,10 +100,8 @@ global.createShape = function createShape() {
|
||||
posx = e.pageX;
|
||||
posy = e.pageY;
|
||||
} else if (event.clientX || event.clientY) {
|
||||
posx = event.clientX + document.body.scrollLeft
|
||||
+ document.documentElement.scrollLeft;
|
||||
posy = event.clientY + document.body.scrollTop
|
||||
+ document.documentElement.scrollTop;
|
||||
posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
||||
posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
||||
}
|
||||
|
||||
shadowGroup.setPosition(posx - 50, posy - 150);
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Rect,
|
||||
} from '../../src';
|
||||
import { Workspace, Rect } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
|
||||
const rectExampleTest = () => {
|
||||
const workspace = new Workspace();
|
||||
workspace.setSize('100px', '100px');
|
||||
@ -24,7 +21,7 @@ const roundrectExampleTest = () => {
|
||||
function builder(container, x, width, height) {
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
const rect = new Rect(i / 10);
|
||||
rect.setPosition(x, ((i - 1) * (50 + 5)));
|
||||
rect.setPosition(x, (i - 1) * (50 + 5));
|
||||
rect.setSize(width, height);
|
||||
container.append(rect);
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Rect,
|
||||
} from '../../src';
|
||||
import { Workspace, Rect } from '../../src';
|
||||
|
||||
global.$ = $;
|
||||
|
||||
@ -96,7 +94,12 @@ const strokeOpacityTest = () => {
|
||||
workspace.append(rect);
|
||||
|
||||
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.setPosition(20, 20);
|
||||
@ -141,7 +144,12 @@ const fillOpacityTest = () => {
|
||||
workspace.append(rect);
|
||||
|
||||
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.setPosition(20, 20);
|
||||
@ -186,7 +194,12 @@ const opacityTest = () => {
|
||||
workspace.append(rect);
|
||||
|
||||
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.setPosition(20, 20);
|
||||
@ -219,7 +232,12 @@ const visibilityTest = () => {
|
||||
workspace.setCoordOrigin(0, 0);
|
||||
|
||||
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);
|
||||
rect.setPosition(120, 20);
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Text,
|
||||
} from '../../src';
|
||||
import { Workspace, Text } from '../../src';
|
||||
import TransformUtils from '../../src/components/peer/utils/TransformUtils';
|
||||
|
||||
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();
|
||||
|
||||
workspace.setSize('300px', '100px');
|
||||
@ -38,7 +46,10 @@ const textTestHelper = function textTestHelper(coordSize, textval, font, fontSiz
|
||||
const textHtml = document.createTextNode(textsize);
|
||||
const fontSize = text.getHtmlFontSize(textsize);
|
||||
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);
|
||||
workspaces[iesimo] = workspace;
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Workspace, Elipse,
|
||||
} from '../../src';
|
||||
import { Workspace, Elipse } from '../../src';
|
||||
import Grid from './Grid';
|
||||
|
||||
global.$ = $;
|
||||
@ -16,7 +14,10 @@ overflowWorkspace.addItAsChildTo($('#overflowExample'));
|
||||
|
||||
const workspacePosition = () => {
|
||||
const elipseAttr = {
|
||||
width: 100, height: 100, x: 100, y: 100,
|
||||
width: 100,
|
||||
height: 100,
|
||||
x: 100,
|
||||
y: 100,
|
||||
};
|
||||
|
||||
const divElem = $('#positionExample');
|
||||
|
||||
@ -18,9 +18,7 @@ module.exports = {
|
||||
{
|
||||
use: ['babel-loader'],
|
||||
test: /.(js)$/,
|
||||
exclude: [
|
||||
/node_modules/,
|
||||
],
|
||||
exclude: [/node_modules/],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -8,61 +8,61 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
webpack;
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: path.join(__dirname, 'src', 'index.tsx'),
|
||||
},
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/',
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)$/,
|
||||
type: 'asset/inline',
|
||||
},
|
||||
{
|
||||
test: /\.wxml$/i,
|
||||
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'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
entry: {
|
||||
app: path.join(__dirname, 'src', 'index.tsx'),
|
||||
},
|
||||
target: 'web',
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||
},
|
||||
output: {
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
use: 'ts-loader',
|
||||
exclude: '/node_modules/',
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)$/,
|
||||
type: 'asset/inline',
|
||||
},
|
||||
{
|
||||
test: /\.wxml$/i,
|
||||
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'],
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -13,18 +13,16 @@ module.exports = merge(common, {
|
||||
port: 3000,
|
||||
hot: true,
|
||||
historyApiFallback: {
|
||||
rewrites: [
|
||||
{ from: /^\/c\//, to: '/index.html' }
|
||||
]
|
||||
}
|
||||
rewrites: [{ from: /^\/c\//, to: '/index.html' }],
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'public/index.html'),
|
||||
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',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@ -4,20 +4,18 @@ const path = require('path');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
optimization: {
|
||||
minimize: true,
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'public/index.html'),
|
||||
templateParameters: {
|
||||
PUBLIC_URL: 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',
|
||||
}),
|
||||
],
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
optimization: {
|
||||
minimize: true,
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'public/index.html'),
|
||||
templateParameters: {
|
||||
PUBLIC_URL: 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',
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user