mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Format all files with prettier
This commit is contained in:
parent
ae02780a1a
commit
cf29f4f953
4
packages/editor/src/@types/index.d.ts
vendored
4
packages/editor/src/@types/index.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
declare module "*.svg" {
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
}
|
||||
|
@ -5,26 +5,25 @@ import DE from './../../compiled-lang/de.json';
|
||||
import RU from './../../compiled-lang/ru.json';
|
||||
import ZH from './../../compiled-lang/zh.json';
|
||||
|
||||
|
||||
class I18nMsg {
|
||||
static loadLocaleData(locale: string) {
|
||||
switch (locale) {
|
||||
case 'fr':
|
||||
return FR;
|
||||
case 'en':
|
||||
return EN;
|
||||
case 'es':
|
||||
return ES;
|
||||
case 'de':
|
||||
return DE;
|
||||
case 'ru':
|
||||
return RU;
|
||||
case 'zh':
|
||||
return ZH;
|
||||
default:
|
||||
return EN;
|
||||
}
|
||||
static loadLocaleData(locale: string) {
|
||||
switch (locale) {
|
||||
case 'fr':
|
||||
return FR;
|
||||
case 'en':
|
||||
return EN;
|
||||
case 'es':
|
||||
return ES;
|
||||
case 'de':
|
||||
return DE;
|
||||
case 'ru':
|
||||
return RU;
|
||||
case 'zh':
|
||||
return ZH;
|
||||
default:
|
||||
return EN;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default I18nMsg;
|
||||
|
@ -48,9 +48,9 @@ class Events {
|
||||
if (!events) return this;
|
||||
|
||||
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
|
||||
events.forEach(((fn) => {
|
||||
events.forEach((fn) => {
|
||||
fn.apply(this, args);
|
||||
}));
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
|
@ -1,25 +1,27 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const ActionButton = styled.div`
|
||||
cursor: pointer;
|
||||
margin: 0px 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding: 10px 25px;
|
||||
font-size: 15px;
|
||||
min-width: 64px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
border-radius: 9px;
|
||||
color: white;
|
||||
background-color: #ffa800;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
}
|
||||
cursor: pointer;
|
||||
margin: 0px 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding: 10px 25px;
|
||||
font-size: 15px;
|
||||
min-width: 64px;
|
||||
box-sizing: border-box;
|
||||
font-weight: 600;
|
||||
border-radius: 9px;
|
||||
color: white;
|
||||
background-color: #ffa800;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
||||
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
|
||||
border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
||||
}
|
||||
`;
|
||||
|
||||
export default ActionButton;
|
||||
export default ActionButton;
|
||||
|
@ -3,29 +3,29 @@ import { times } from '../../size';
|
||||
import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
|
||||
|
||||
export const StyledFooter = styled.div`
|
||||
height: ${times(10)};
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
height: ${times(10)};
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
`;
|
||||
|
||||
export const StyledLogo = styled.div`
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
bottom: 10px;
|
||||
background: url(${LogoTextBlackSvg}) no-repeat;
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
bottom: 10px;
|
||||
background: url(${LogoTextBlackSvg}) no-repeat;
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
`;
|
||||
|
||||
export const Notifier = styled.div`
|
||||
border: 1px solid rgb(241, 163, 39);
|
||||
background-color: rgb(252, 235, 192);
|
||||
border-radius: 3px;
|
||||
position: fixed;
|
||||
padding: 5px 9px;
|
||||
color: back;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
bottom: 10px;
|
||||
border: 1px solid rgb(241, 163, 39);
|
||||
background-color: rgb(252, 235, 192);
|
||||
border-radius: 3px;
|
||||
position: fixed;
|
||||
padding: 5px 9px;
|
||||
color: back;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
bottom: 10px;
|
||||
`;
|
||||
|
@ -1,50 +1,50 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const HeaderContainer = styled.div`
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
background: #202020;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 0px;
|
||||
background: #202020;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const ToolbarContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
export const ToolbarButton = styled.div`
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
margin-top: 3px;
|
||||
padding-top: 2px;
|
||||
padding-left: 2px;
|
||||
margin-left: 3px;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
margin-top: 3px;
|
||||
padding-top: 2px;
|
||||
padding-left: 2px;
|
||||
margin-left: 3px;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
export const ToolbarButtonExt = styled(ToolbarButton)`
|
||||
width: 40px;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
width: 40px;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
`;
|
||||
|
||||
export const AccountButton = styled.div`
|
||||
display: inline-block;
|
||||
margin-top: 3px;
|
||||
display: inline-block;
|
||||
margin-top: 3px;
|
||||
`;
|
||||
|
||||
export const ToolbarRightContainer = styled.div`
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
@ -33,10 +33,12 @@
|
||||
"?": "ignore",
|
||||
">": "ignore",
|
||||
"||": "ignore",
|
||||
"&&": "ignore"
|
||||
"&&": "ignore",
|
||||
"(": "ignore"
|
||||
}
|
||||
}
|
||||
],
|
||||
"object-curly-newline": "off",
|
||||
"no-underscore-dangle": "off",
|
||||
"no-plusplus": "off",
|
||||
"no-param-reassign": "off",
|
||||
|
@ -1,20 +1,20 @@
|
||||
/*
|
||||
* 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 { $defined } from '@wisemapping/core-js';
|
||||
import CommandContext from './CommandContext';
|
||||
|
||||
|
@ -47,9 +47,9 @@ class CommandContext {
|
||||
|
||||
if (result.length !== topicsIds.length) {
|
||||
const ids = designerTopics.map((topic) => topic.getId());
|
||||
throw new Error(`Could not find topic. Result:${result
|
||||
} Filter Criteria:${topicsIds
|
||||
} Current Topics: [${ids}])`);
|
||||
throw new Error(
|
||||
`Could not find topic. Result:${result} Filter Criteria:${topicsIds} Current Topics: [${ids}])`,
|
||||
);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
@ -17,9 +17,7 @@
|
||||
*/
|
||||
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import {
|
||||
Point, CurvedLine, PolyLine, Line,
|
||||
} from '@wisemapping/web2d';
|
||||
import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d';
|
||||
import { TopicShape } from './model/INodeModel';
|
||||
import RelationshipModel from './model/RelationshipModel';
|
||||
import Topic from './Topic';
|
||||
|
@ -33,7 +33,22 @@ class DesignerKeyboard extends Keyboard {
|
||||
|
||||
private static _disabled: boolean;
|
||||
|
||||
private static excludeFromEditor = ['Enter', 'CapsLock', 'Escape', 'F1', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'];
|
||||
private static excludeFromEditor = [
|
||||
'Enter',
|
||||
'CapsLock',
|
||||
'Escape',
|
||||
'F1',
|
||||
'F3',
|
||||
'F4',
|
||||
'F5',
|
||||
'F6',
|
||||
'F7',
|
||||
'F8',
|
||||
'F9',
|
||||
'F10',
|
||||
'F11',
|
||||
'F12',
|
||||
];
|
||||
|
||||
constructor(designer: Designer) {
|
||||
super();
|
||||
@ -53,9 +68,13 @@ class DesignerKeyboard extends Keyboard {
|
||||
private _registerEvents(designer: Designer) {
|
||||
// Try with the keyboard ..
|
||||
const model = designer.getModel();
|
||||
this.addShortcut(['backspace', 'del'], () => { designer.deleteSelectedEntities(); });
|
||||
this.addShortcut(['backspace', 'del'], () => {
|
||||
designer.deleteSelectedEntities();
|
||||
});
|
||||
|
||||
this.addShortcut('space', () => { designer.shrinkSelectedBranch(); });
|
||||
this.addShortcut('space', () => {
|
||||
designer.shrinkSelectedBranch();
|
||||
});
|
||||
|
||||
this.addShortcut('f2', () => {
|
||||
const node = model.selectedTopic();
|
||||
@ -64,103 +83,128 @@ class DesignerKeyboard extends Keyboard {
|
||||
}
|
||||
});
|
||||
|
||||
this.addShortcut(['insert', 'tab', 'meta+enter'], () => { designer.createChildForSelectedNode(); });
|
||||
this.addShortcut(['insert', 'tab', 'meta+enter'], () => {
|
||||
designer.createChildForSelectedNode();
|
||||
});
|
||||
|
||||
this.addShortcut('enter', () => { designer.createSiblingForSelectedNode(); });
|
||||
this.addShortcut('enter', () => {
|
||||
designer.createSiblingForSelectedNode();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+z', 'meta+z'], () => { designer.undo(); });
|
||||
this.addShortcut(['ctrl+z', 'meta+z'], () => {
|
||||
designer.undo();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+shift+z', 'meta+shift+z'], () => { designer.redo(); });
|
||||
this.addShortcut(['ctrl+shift+z', 'meta+shift+z'], () => {
|
||||
designer.redo();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+c', 'meta+c'], () => { designer.copyToClipboard(); });
|
||||
this.addShortcut(['ctrl+c', 'meta+c'], () => {
|
||||
designer.copyToClipboard();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+l', 'meta+l'], () => { designer.addLink(); });
|
||||
this.addShortcut(['ctrl+l', 'meta+l'], () => {
|
||||
designer.addLink();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+k', 'meta+k'], () => { designer.addNote(); });
|
||||
this.addShortcut(['ctrl+k', 'meta+k'], () => {
|
||||
designer.addNote();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+v', 'meta+v'], () => { designer.pasteClipboard(); });
|
||||
this.addShortcut(['ctrl+v', 'meta+v'], () => {
|
||||
designer.pasteClipboard();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+a', 'meta+a'], () => { designer.selectAll(); });
|
||||
this.addShortcut(['ctrl+a', 'meta+a'], () => {
|
||||
designer.selectAll();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+b', 'meta+b'], () => { designer.changeFontWeight(); });
|
||||
this.addShortcut(['ctrl+b', 'meta+b'], () => {
|
||||
designer.changeFontWeight();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+s', 'meta+s'], () => { $(document).find('#save').trigger('click'); });
|
||||
this.addShortcut(['ctrl+s', 'meta+s'], () => {
|
||||
$(document).find('#save').trigger('click');
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+i', 'meta+i'], () => { designer.changeFontStyle(); });
|
||||
this.addShortcut(['ctrl+i', 'meta+i'], () => {
|
||||
designer.changeFontStyle();
|
||||
});
|
||||
|
||||
this.addShortcut(['ctrl+shift+a', 'meta+shift+a'], () => { designer.deselectAll(); });
|
||||
this.addShortcut(['ctrl+shift+a', 'meta+shift+a'], () => {
|
||||
designer.deselectAll();
|
||||
});
|
||||
|
||||
this.addShortcut(['meta+=', 'ctrl+='], () => { designer.zoomIn(); });
|
||||
this.addShortcut(['meta+=', 'ctrl+='], () => {
|
||||
designer.zoomIn();
|
||||
});
|
||||
|
||||
this.addShortcut(['meta+-', 'ctrl+-'], () => { designer.zoomOut(); });
|
||||
this.addShortcut(['meta+-', 'ctrl+-'], () => {
|
||||
designer.zoomOut();
|
||||
});
|
||||
|
||||
const me = this;
|
||||
this.addShortcut(
|
||||
'right', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (node.isCentralTopic()) {
|
||||
me._goToSideChild(designer, node, 'RIGHT');
|
||||
} else if (node.getPosition().x < 0) {
|
||||
me._goToParent(designer, node);
|
||||
} else if (!node.areChildrenShrunken()) {
|
||||
me._goToChild(designer, node);
|
||||
}
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
this.addShortcut('right', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (node.isCentralTopic()) {
|
||||
me._goToSideChild(designer, node, 'RIGHT');
|
||||
} else if (node.getPosition().x < 0) {
|
||||
me._goToParent(designer, node);
|
||||
} else if (!node.areChildrenShrunken()) {
|
||||
me._goToChild(designer, node);
|
||||
}
|
||||
},
|
||||
);
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
}
|
||||
});
|
||||
|
||||
this.addShortcut(
|
||||
'left', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (node.isCentralTopic()) {
|
||||
me._goToSideChild(designer, node, 'LEFT');
|
||||
} else if (node.getPosition().x > 0) {
|
||||
me._goToParent(designer, node);
|
||||
} else if (!node.areChildrenShrunken()) {
|
||||
me._goToChild(designer, node);
|
||||
}
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
this.addShortcut('left', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (node.isCentralTopic()) {
|
||||
me._goToSideChild(designer, node, 'LEFT');
|
||||
} else if (node.getPosition().x > 0) {
|
||||
me._goToParent(designer, node);
|
||||
} else if (!node.areChildrenShrunken()) {
|
||||
me._goToChild(designer, node);
|
||||
}
|
||||
},
|
||||
);
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
}
|
||||
});
|
||||
|
||||
this.addShortcut(
|
||||
'up', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (!node.isCentralTopic()) {
|
||||
me._goToBrother(designer, node, 'UP');
|
||||
}
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
this.addShortcut('up', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (!node.isCentralTopic()) {
|
||||
me._goToBrother(designer, node, 'UP');
|
||||
}
|
||||
},
|
||||
);
|
||||
this.addShortcut(
|
||||
'down', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (!node.isCentralTopic()) {
|
||||
me._goToBrother(designer, node, 'DOWN');
|
||||
}
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
}
|
||||
});
|
||||
this.addShortcut('down', () => {
|
||||
const node = model.selectedTopic();
|
||||
if (node) {
|
||||
if (!node.isCentralTopic()) {
|
||||
me._goToBrother(designer, node, 'DOWN');
|
||||
}
|
||||
},
|
||||
);
|
||||
} else {
|
||||
const centralTopic = model.getCentralTopic();
|
||||
me._goToNode(designer, centralTopic);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('keypress', (event) => {
|
||||
// Needs to be ignored ?
|
||||
if (DesignerKeyboard.isDisabled() || DesignerKeyboard.excludeFromEditor.includes(event.code)) {
|
||||
if (
|
||||
DesignerKeyboard.isDisabled() ||
|
||||
DesignerKeyboard.excludeFromEditor.includes(event.code)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -189,14 +233,14 @@ class DesignerKeyboard extends Keyboard {
|
||||
const { x } = node.getPosition();
|
||||
let dist = null;
|
||||
for (let i = 0; i < brothers.length; i++) {
|
||||
const sameSide = (x * brothers[i].getPosition().x) >= 0;
|
||||
const sameSide = x * brothers[i].getPosition().x >= 0;
|
||||
if (brothers[i] !== node && sameSide) {
|
||||
const brother = brothers[i];
|
||||
const brotherY = brother.getPosition().y;
|
||||
if (direction === 'DOWN' && brotherY > y) {
|
||||
let distancia = y - brotherY;
|
||||
if (distancia < 0) {
|
||||
distancia *= (-1);
|
||||
distancia *= -1;
|
||||
}
|
||||
if (dist == null || dist > distancia) {
|
||||
dist = distancia;
|
||||
@ -205,7 +249,7 @@ class DesignerKeyboard extends Keyboard {
|
||||
} else if (direction === 'UP' && brotherY < y) {
|
||||
let distance = y - brotherY;
|
||||
if (distance < 0) {
|
||||
distance *= (-1);
|
||||
distance *= -1;
|
||||
}
|
||||
if (dist == null || dist > distance) {
|
||||
dist = distance;
|
||||
|
@ -117,7 +117,7 @@ class DesignerModel extends Events {
|
||||
|
||||
selectedTopic(): Topic | undefined {
|
||||
const topics = this.filterSelectedTopics();
|
||||
return (topics.length > 0) ? topics[0] : undefined;
|
||||
return topics.length > 0 ? topics[0] : undefined;
|
||||
}
|
||||
|
||||
findTopicById(id: number): Topic | undefined {
|
||||
|
@ -85,7 +85,7 @@ class DesignerUndoManager {
|
||||
result = false;
|
||||
} else if (undoLength > 0) {
|
||||
const command = this._undoQueue[undoLength - 1];
|
||||
result = (this._baseId !== command.getId());
|
||||
result = this._baseId !== command.getId();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
@ -83,7 +83,7 @@ class DragConnector {
|
||||
// That's why i need to divide it by two...
|
||||
const txborder = tpos.x + (topic.getSize().width / 2) * Math.sign(sPos.x);
|
||||
const distance = (sPos.x - txborder) * Math.sign(sPos.x);
|
||||
return distance > 0 && (distance < DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE);
|
||||
return distance > 0 && distance < DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE;
|
||||
});
|
||||
|
||||
// Assign a priority based on the distance:
|
||||
@ -99,19 +99,34 @@ class DragConnector {
|
||||
|
||||
const av = me._isVerticallyAligned(a.getSize(), aPos, sPos);
|
||||
const bv = me._isVerticallyAligned(b.getSize(), bPos, sPos);
|
||||
return me._proximityWeight(av, a, sPos, currentConnection)
|
||||
- me._proximityWeight(bv, b, sPos, currentConnection);
|
||||
return (
|
||||
me._proximityWeight(av, a, sPos, currentConnection) -
|
||||
me._proximityWeight(bv, b, sPos, currentConnection)
|
||||
);
|
||||
});
|
||||
return topics;
|
||||
}
|
||||
|
||||
private _proximityWeight(isAligned: boolean, target: Topic, sPos: Point, currentConnection: Topic): number {
|
||||
private _proximityWeight(
|
||||
isAligned: boolean,
|
||||
target: Topic,
|
||||
sPos: Point,
|
||||
currentConnection: Topic,
|
||||
): number {
|
||||
const tPos = target.getPosition();
|
||||
return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x)
|
||||
+ Math.abs(tPos.y - sPos.y) + (currentConnection === target ? 0 : 100);
|
||||
return (
|
||||
(isAligned ? 0 : 200) +
|
||||
Math.abs(tPos.x - sPos.x) +
|
||||
Math.abs(tPos.y - sPos.y) +
|
||||
(currentConnection === target ? 0 : 100)
|
||||
);
|
||||
}
|
||||
|
||||
private _isVerticallyAligned(targetSize: SizeType, targetPosition: Point, sourcePosition: Point): boolean {
|
||||
private _isVerticallyAligned(
|
||||
targetSize: SizeType,
|
||||
targetPosition: Point,
|
||||
sourcePosition: Point,
|
||||
): boolean {
|
||||
return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
|
||||
}
|
||||
|
||||
|
@ -59,14 +59,14 @@ class DragManager {
|
||||
|
||||
// Register mouse move listener ...
|
||||
const mouseMoveListener = dragManager._buildMouseMoveListener(
|
||||
workspace, dragNode, dragManager,
|
||||
workspace,
|
||||
dragNode,
|
||||
dragManager,
|
||||
);
|
||||
screen.addEvent('mousemove', mouseMoveListener);
|
||||
|
||||
// Register mouse up listeners ...
|
||||
const mouseUpListener = dragManager._buildMouseUpListener(
|
||||
workspace, dragNode, dragManager,
|
||||
);
|
||||
const mouseUpListener = dragManager._buildMouseUpListener(workspace, dragNode, dragManager);
|
||||
screen.addEvent('mouseup', mouseUpListener);
|
||||
|
||||
// Change cursor.
|
||||
|
@ -1,2 +1,7 @@
|
||||
type EditorRenderMode = 'viewonly' | 'edition-owner' | 'edition-editor' | 'edition-viewer' | 'showcase';
|
||||
type EditorRenderMode =
|
||||
| 'viewonly'
|
||||
| 'edition-owner'
|
||||
| 'edition-editor'
|
||||
| 'edition-viewer'
|
||||
| 'showcase';
|
||||
export default EditorRenderMode;
|
||||
|
@ -48,9 +48,9 @@ class Events {
|
||||
if (!events) return this;
|
||||
|
||||
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
|
||||
events.forEach(((fn) => {
|
||||
events.forEach((fn) => {
|
||||
fn.apply(this, args);
|
||||
}));
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
|
@ -25,12 +25,11 @@ class Keyboard {
|
||||
addShortcut(shortcuts: string[] | string, callback: () => void) {
|
||||
const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
|
||||
shortcutsArray.forEach((shortcut) => {
|
||||
$(document).bind('keydown', shortcut,
|
||||
(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
callback();
|
||||
});
|
||||
$(document).bind('keydown', shortcut, (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
callback();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -55,7 +55,11 @@ class LocalStorageManager extends PersistenceManager {
|
||||
if (xml == null || this.forceLoad) {
|
||||
$.ajax({
|
||||
url: this.documentUrl.replace('{id}', mapId),
|
||||
headers: { 'Content-Type': 'text/plain', Accept: 'application/xml', 'X-CSRF-Token': this.getCSRFToken() },
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
Accept: 'application/xml',
|
||||
'X-CSRF-Token': this.getCSRFToken(),
|
||||
},
|
||||
type: 'get',
|
||||
dataType: 'text',
|
||||
async: false,
|
||||
|
@ -26,7 +26,7 @@ import Workspace from './Workspace';
|
||||
import SizeType from './SizeType';
|
||||
|
||||
class MainTopic extends Topic {
|
||||
private INNER_RECT_ATTRIBUTES: { stroke: string; };
|
||||
private INNER_RECT_ATTRIBUTES: { stroke: string };
|
||||
|
||||
constructor(model: NodeModel, options) {
|
||||
super(model, options);
|
||||
|
@ -33,23 +33,20 @@ class MultilineTextEditor extends Events {
|
||||
}
|
||||
|
||||
private static _buildEditor() {
|
||||
const result = $('<div></div>')
|
||||
.attr('id', 'textContainer')
|
||||
.css({
|
||||
display: 'none',
|
||||
zIndex: '8',
|
||||
border: '0 none',
|
||||
});
|
||||
const result = $('<div></div>').attr('id', 'textContainer').css({
|
||||
display: 'none',
|
||||
zIndex: '8',
|
||||
border: '0 none',
|
||||
});
|
||||
|
||||
const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>')
|
||||
.css({
|
||||
border: '1px gray dashed',
|
||||
background: 'rgba(98, 135, 167, .4)',
|
||||
outline: '0 none',
|
||||
resize: 'none',
|
||||
overflow: 'hidden',
|
||||
padding: '2px 0px 2px 4px',
|
||||
});
|
||||
const textareaElem = $('<textarea tabindex="-1" value="" wrap="off" ></textarea>').css({
|
||||
border: '1px gray dashed',
|
||||
background: 'rgba(98, 135, 167, .4)',
|
||||
outline: '0 none',
|
||||
resize: 'none',
|
||||
overflow: 'hidden',
|
||||
padding: '2px 0px 2px 4px',
|
||||
});
|
||||
|
||||
result.append(textareaElem);
|
||||
return result;
|
||||
|
@ -77,11 +77,10 @@ class NoteIcon extends Icon {
|
||||
}
|
||||
const result = $('<div id="textPopoverNote"></div>').css({ padding: '5px' });
|
||||
|
||||
const text = $('<div></div>').text(this._linksModel.getText())
|
||||
.css({
|
||||
'white-space': 'pre-wrap',
|
||||
'word-wrap': 'break-word',
|
||||
});
|
||||
const text = $('<div></div>').text(this._linksModel.getText()).css({
|
||||
'white-space': 'pre-wrap',
|
||||
'word-wrap': 'break-word',
|
||||
});
|
||||
result.append(text);
|
||||
return result;
|
||||
}
|
||||
|
@ -15,6 +15,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
type PositionType = { x: number, y: number };
|
||||
type PositionType = { x: number; y: number };
|
||||
|
||||
export default PositionType;
|
||||
|
@ -118,10 +118,7 @@ class Relationship extends ConnectionLine {
|
||||
this._line2d.setStroke(2);
|
||||
const ctrlPoints = this._line2d.getControlPoints();
|
||||
if (!this._line2d.isDestControlPointCustom() && !this._line2d.isSrcControlPointCustom()) {
|
||||
const defaultPoints = Shape.calculateDefaultControlPoints(
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
);
|
||||
const defaultPoints = Shape.calculateDefaultControlPoints(sourcePosition, targetPosition);
|
||||
ctrlPoints[0].x = defaultPoints[0].x;
|
||||
ctrlPoints[0].y = defaultPoints[0].y;
|
||||
|
||||
|
@ -31,7 +31,7 @@ class RESTPersistenceManager extends PersistenceManager {
|
||||
|
||||
private clearTimeout;
|
||||
|
||||
constructor(options: { documentUrl: string, revertUrl: string, lockUrl: string }) {
|
||||
constructor(options: { documentUrl: string; revertUrl: string; lockUrl: string }) {
|
||||
$assert(options.documentUrl, 'documentUrl can not be null');
|
||||
$assert(options.revertUrl, 'revertUrl can not be null');
|
||||
$assert(options.lockUrl, 'lockUrl can not be null');
|
||||
@ -60,78 +60,87 @@ class RESTPersistenceManager extends PersistenceManager {
|
||||
}, 10000);
|
||||
|
||||
const persistence = this;
|
||||
fetch(
|
||||
`${this.documentUrl.replace('{id}', mapId)}?${query}`,
|
||||
{
|
||||
method: 'PUT',
|
||||
// Blob helps to resuce the memory on large payload.
|
||||
body: new Blob([JSON.stringify(data)], { type: 'text/plain' }),
|
||||
headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json', 'X-CSRF-Token': this.getCSRFToken() },
|
||||
fetch(`${this.documentUrl.replace('{id}', mapId)}?${query}`, {
|
||||
method: 'PUT',
|
||||
// Blob helps to resuce the memory on large payload.
|
||||
body: new Blob([JSON.stringify(data)], { type: 'text/plain' }),
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
Accept: 'application/json',
|
||||
'X-CSRF-Token': this.getCSRFToken(),
|
||||
},
|
||||
).then(async (response: Response) => {
|
||||
if (response.ok) {
|
||||
events.onSuccess();
|
||||
} else {
|
||||
console.log(`Saving error: ${response.status}`);
|
||||
let userMsg;
|
||||
if (response.status === 405) {
|
||||
userMsg = { severity: 'SEVERE', message: $msg('SESSION_EXPIRED'), errorType: 'session-expired' };
|
||||
})
|
||||
.then(async (response: Response) => {
|
||||
if (response.ok) {
|
||||
events.onSuccess();
|
||||
} else {
|
||||
const responseText = await response.text();
|
||||
const contentType = response.headers['Content-Type'];
|
||||
if (contentType != null && contentType.indexOf('application/json') !== -1) {
|
||||
let serverMsg = null;
|
||||
try {
|
||||
serverMsg = JSON.parse(responseText);
|
||||
serverMsg = serverMsg.globalSeverity ? serverMsg : null;
|
||||
} catch (e) {
|
||||
// Message could not be decoded ...
|
||||
console.log(`Saving error: ${response.status}`);
|
||||
let userMsg;
|
||||
if (response.status === 405) {
|
||||
userMsg = {
|
||||
severity: 'SEVERE',
|
||||
message: $msg('SESSION_EXPIRED'),
|
||||
errorType: 'session-expired',
|
||||
};
|
||||
} else {
|
||||
const responseText = await response.text();
|
||||
const contentType = response.headers['Content-Type'];
|
||||
if (contentType != null && contentType.indexOf('application/json') !== -1) {
|
||||
let serverMsg = null;
|
||||
try {
|
||||
serverMsg = JSON.parse(responseText);
|
||||
serverMsg = serverMsg.globalSeverity ? serverMsg : null;
|
||||
} catch (e) {
|
||||
// Message could not be decoded ...
|
||||
}
|
||||
userMsg = persistence._buildError(serverMsg);
|
||||
}
|
||||
userMsg = persistence._buildError(serverMsg);
|
||||
}
|
||||
this.triggerError(userMsg);
|
||||
events.onError(userMsg);
|
||||
}
|
||||
|
||||
// Clear event timeout ...
|
||||
if (persistence.clearTimeout) {
|
||||
clearTimeout(persistence.clearTimeout);
|
||||
}
|
||||
persistence.onSave = false;
|
||||
})
|
||||
.catch(() => {
|
||||
const userMsg: PersistenceError = {
|
||||
severity: 'SEVERE',
|
||||
message: $msg('SAVE_COULD_NOT_BE_COMPLETED'),
|
||||
errorType: 'generic',
|
||||
};
|
||||
this.triggerError(userMsg);
|
||||
events.onError(userMsg);
|
||||
}
|
||||
|
||||
// Clear event timeout ...
|
||||
if (persistence.clearTimeout) {
|
||||
clearTimeout(persistence.clearTimeout);
|
||||
}
|
||||
persistence.onSave = false;
|
||||
}).catch(() => {
|
||||
const userMsg: PersistenceError = {
|
||||
severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED'), errorType: 'generic',
|
||||
};
|
||||
this.triggerError(userMsg);
|
||||
events.onError(userMsg);
|
||||
|
||||
// Clear event timeout ...
|
||||
if (persistence.clearTimeout) {
|
||||
clearTimeout(persistence.clearTimeout);
|
||||
}
|
||||
persistence.onSave = false;
|
||||
});
|
||||
// Clear event timeout ...
|
||||
if (persistence.clearTimeout) {
|
||||
clearTimeout(persistence.clearTimeout);
|
||||
}
|
||||
persistence.onSave = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
discardChanges(mapId: string) {
|
||||
fetch(this.revertUrl.replace('{id}', mapId),
|
||||
{
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json', 'X-CSRF-Token': this.getCSRFToken() },
|
||||
});
|
||||
fetch(this.revertUrl.replace('{id}', mapId), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
Accept: 'application/json',
|
||||
'X-CSRF-Token': this.getCSRFToken(),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
unlockMap(mapId: string): void {
|
||||
fetch(
|
||||
this.lockUrl.replace('{id}', mapId),
|
||||
{
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'text/plain', 'X-CSRF-Token': this.getCSRFToken() },
|
||||
body: 'false',
|
||||
},
|
||||
);
|
||||
fetch(this.lockUrl.replace('{id}', mapId), {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'text/plain', 'X-CSRF-Token': this.getCSRFToken() },
|
||||
body: 'false',
|
||||
});
|
||||
}
|
||||
|
||||
private _buildError(jsonSeverResponse) {
|
||||
@ -154,7 +163,11 @@ class RESTPersistenceManager extends PersistenceManager {
|
||||
url: `${this.documentUrl.replace('{id}', mapId)}/xml`,
|
||||
method: 'get',
|
||||
async: false,
|
||||
headers: { 'Content-Type': 'text/plain', Accept: 'application/xml', 'X-CSRF-Token': this.getCSRFToken() },
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
Accept: 'application/xml',
|
||||
'X-CSRF-Token': this.getCSRFToken(),
|
||||
},
|
||||
success(responseText) {
|
||||
xml = responseText;
|
||||
},
|
||||
|
@ -18,9 +18,7 @@
|
||||
import $ from 'jquery';
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
|
||||
import {
|
||||
Rect, Image, Line, Text, Group, ElementClass, Point,
|
||||
} from '@wisemapping/web2d';
|
||||
import { Rect, Image, Line, Text, Group, ElementClass, Point } from '@wisemapping/web2d';
|
||||
|
||||
import NodeGraph from './NodeGraph';
|
||||
import TopicConfig from './TopicConfig';
|
||||
@ -177,10 +175,7 @@ abstract class Topic extends NodeGraph {
|
||||
getInnerShape(): ElementClass {
|
||||
if (!$defined(this._innerShape)) {
|
||||
// Create inner box.
|
||||
this._innerShape = this._buildShape(
|
||||
TopicConfig.INNER_RECT_ATTRIBUTES,
|
||||
this.getShapeType(),
|
||||
);
|
||||
this._innerShape = this._buildShape(TopicConfig.INNER_RECT_ATTRIBUTES, this.getShapeType());
|
||||
|
||||
// Update bgcolor ...
|
||||
const bgColor = this.getBackgroundColor();
|
||||
@ -246,7 +241,9 @@ abstract class Topic extends NodeGraph {
|
||||
result.setStroke(1, 'solid', stokeColor);
|
||||
};
|
||||
|
||||
result.getSize = function getSize() { return this.size; };
|
||||
result.getSize = function getSize() {
|
||||
return this.size;
|
||||
};
|
||||
|
||||
result.setPosition = () => {
|
||||
// Overwrite behaviour ...
|
||||
@ -279,10 +276,7 @@ abstract class Topic extends NodeGraph {
|
||||
|
||||
getOuterShape(): ElementClass {
|
||||
if (!$defined(this._outerShape)) {
|
||||
const rect = this._buildShape(
|
||||
TopicConfig.OUTER_SHAPE_ATTRIBUTES,
|
||||
TopicShape.ROUNDED_RECT,
|
||||
);
|
||||
const rect = this._buildShape(TopicConfig.OUTER_SHAPE_ATTRIBUTES, TopicShape.ROUNDED_RECT);
|
||||
rect.setPosition(-2, -3);
|
||||
rect.setOpacity(0);
|
||||
this._outerShape = rect;
|
||||
@ -822,8 +816,8 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
|
||||
/**
|
||||
* Point: references the center of the rect shape.!!!
|
||||
*/
|
||||
* Point: references the center of the rect shape.!!!
|
||||
*/
|
||||
setPosition(point: Point) {
|
||||
$assert(point, 'position can not be null');
|
||||
// allowed param reassign to avoid risks of existing code relying in this side-effect
|
||||
@ -953,9 +947,9 @@ abstract class Topic extends NodeGraph {
|
||||
const targetParent = targetTopic.getModel().getParent();
|
||||
const sourceParent = sourceTopic.getModel().getParent();
|
||||
relationship.setVisibility(
|
||||
value
|
||||
&& (targetParent == null || !targetParent.areChildrenShrunken())
|
||||
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
|
||||
value &&
|
||||
(targetParent == null || !targetParent.areChildrenShrunken()) &&
|
||||
(sourceParent == null || !sourceParent.areChildrenShrunken()),
|
||||
fade,
|
||||
);
|
||||
});
|
||||
@ -1027,7 +1021,8 @@ abstract class Topic extends NodeGraph {
|
||||
};
|
||||
|
||||
const oldSize = this.getSize();
|
||||
const hasSizeChanged = oldSize.width !== roundedSize.width || oldSize.height !== roundedSize.height;
|
||||
const hasSizeChanged =
|
||||
oldSize.width !== roundedSize.width || oldSize.height !== roundedSize.height;
|
||||
if (hasSizeChanged || force) {
|
||||
NodeGraph.prototype.setSize.call(this, roundedSize);
|
||||
|
||||
@ -1259,10 +1254,13 @@ abstract class Topic extends NodeGraph {
|
||||
const iconGroupWith = iconGroup.getSize().width;
|
||||
const topicWith = iconGroupWith + 2 * textIconSpacing + textWidth + padding * 2;
|
||||
|
||||
this.setSize({
|
||||
width: topicWith,
|
||||
height: topicHeight,
|
||||
}, false);
|
||||
this.setSize(
|
||||
{
|
||||
width: topicWith,
|
||||
height: topicHeight,
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
// Adjust all topic elements positions ...
|
||||
const yPosition = Math.round((topicHeight - textHeight) / 2);
|
||||
|
@ -65,9 +65,9 @@ class TopicEventDispatcher extends Events {
|
||||
// Open the new editor ...
|
||||
const model = topic.getModel();
|
||||
if (
|
||||
model.getShapeType() !== TopicShape.IMAGE
|
||||
&& !this._readOnly
|
||||
&& eventType === TopicEvent.EDIT
|
||||
model.getShapeType() !== TopicShape.IMAGE &&
|
||||
!this._readOnly &&
|
||||
eventType === TopicEvent.EDIT
|
||||
) {
|
||||
this._multilineEditor.show(topic, options ? options.text : null);
|
||||
this._activeEditor = this._multilineEditor;
|
||||
|
@ -31,15 +31,15 @@ class AddFeatureToTopicCommand extends Command {
|
||||
private _featureModel: FeatureModel;
|
||||
|
||||
/*
|
||||
* @classdesc This command class handles do/undo of adding features to topics, e.g. an
|
||||
* icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
|
||||
* @constructs
|
||||
* @param {String} topicId the id of the topic
|
||||
* @param {String} featureType the id of the feature type to add, e.g. "icon"
|
||||
* @param {Object} attributes the attribute(s) of the respective feature model
|
||||
* @extends mindplot.Command
|
||||
* @see mindplot.model.FeatureModel and subclasses
|
||||
*/
|
||||
* @classdesc This command class handles do/undo of adding features to topics, e.g. an
|
||||
* icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
|
||||
* @constructs
|
||||
* @param {String} topicId the id of the topic
|
||||
* @param {String} featureType the id of the feature type to add, e.g. "icon"
|
||||
* @param {Object} attributes the attribute(s) of the respective feature model
|
||||
* @extends mindplot.Command
|
||||
* @see mindplot.model.FeatureModel and subclasses
|
||||
*/
|
||||
constructor(topicId: number, featureType: FeatureType, attributes: object) {
|
||||
$assert($defined(topicId), 'topicId can not be null');
|
||||
$assert(featureType, 'featureType can not be null');
|
||||
|
@ -24,8 +24,8 @@ class AddRelationshipCommand extends Command {
|
||||
private _model: RelationshipModel;
|
||||
|
||||
/**
|
||||
* @classdesc This command class handles do/undo of adding a relationship to a topic.
|
||||
*/
|
||||
* @classdesc This command class handles do/undo of adding a relationship to a topic.
|
||||
*/
|
||||
constructor(model: RelationshipModel) {
|
||||
$assert(model, 'Relationship model can not be null');
|
||||
|
||||
|
@ -31,7 +31,10 @@ class AddTopicCommand extends Command {
|
||||
*/
|
||||
constructor(models: NodeModel[], parentTopicsId: number[]) {
|
||||
$assert(models, 'models can not be null');
|
||||
$assert(parentTopicsId == null || parentTopicsId.length === models.length, 'parents and models must have the same size');
|
||||
$assert(
|
||||
parentTopicsId == null || parentTopicsId.length === models.length,
|
||||
'parents and models must have the same size',
|
||||
);
|
||||
|
||||
super();
|
||||
this._models = models;
|
||||
|
@ -46,14 +46,14 @@ class DeleteCommand extends Command {
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
execute(commandContext: CommandContext) {
|
||||
// If a parent has been selected for deletion, the children must be excluded from the delete ...
|
||||
const topics = this._filterChildren(this._topicIds, commandContext);
|
||||
|
||||
if (topics.length > 0) {
|
||||
topics.forEach(((topic) => {
|
||||
topics.forEach((topic) => {
|
||||
// In case that it's editing text node, force close without update ...
|
||||
topic.closeEditors();
|
||||
|
||||
@ -81,22 +81,22 @@ class DeleteCommand extends Command {
|
||||
|
||||
// Finally, delete the topic from the workspace...
|
||||
commandContext.deleteTopic(topic);
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
const rels = commandContext.findRelationships(this._relIds);
|
||||
if (rels.length > 0) {
|
||||
rels.forEach(((rel) => {
|
||||
rels.forEach((rel) => {
|
||||
this._deletedRelModel.push(rel.getModel().clone());
|
||||
commandContext.deleteRelationship(rel);
|
||||
}));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
* @see {@link mindplot.Command.undoExecute}
|
||||
*/
|
||||
* Overrides abstract parent method
|
||||
* @see {@link mindplot.Command.undoExecute}
|
||||
*/
|
||||
undoExecute(commandContext: CommandContext) {
|
||||
// Add all the topics ...
|
||||
this._deletedTopicModels.forEach((model) => {
|
||||
@ -104,7 +104,7 @@ class DeleteCommand extends Command {
|
||||
});
|
||||
|
||||
// Do they need to be connected ?
|
||||
this._deletedTopicModels.forEach(((topicModel, index) => {
|
||||
this._deletedTopicModels.forEach((topicModel, index) => {
|
||||
const topics = commandContext.findTopics([topicModel.getId()]);
|
||||
|
||||
const parentId = this._parentTopicIds[index];
|
||||
@ -112,7 +112,7 @@ class DeleteCommand extends Command {
|
||||
const parentTopics = commandContext.findTopics([parentId]);
|
||||
commandContext.connect(topics[0], parentTopics[0]);
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
// Add rebuild relationships ...
|
||||
this._deletedRelModel.forEach((model) => {
|
||||
@ -165,11 +165,10 @@ class DeleteCommand extends Command {
|
||||
result = result.concat(topic.getRelationships());
|
||||
|
||||
const children = topic.getChildren();
|
||||
const rels: (Relationship[])[] = children
|
||||
.map(((t: Topic) => this._collectInDepthRelationships(t)));
|
||||
const rels: Relationship[][] = children.map((t: Topic) => this._collectInDepthRelationships(t));
|
||||
|
||||
// flatten and concact
|
||||
result = result.concat(([].concat(...rels)));
|
||||
result = result.concat([].concat(...rels));
|
||||
|
||||
if (result.length > 0) {
|
||||
// Filter for unique ...
|
||||
|
@ -31,9 +31,9 @@ class DragTopicCommand extends Command {
|
||||
private _order: number;
|
||||
|
||||
/**
|
||||
* @classdesc This command class handles do/undo of dragging a topic to a new position.
|
||||
* @constructs
|
||||
*/
|
||||
* @classdesc This command class handles do/undo of dragging a topic to a new position.
|
||||
* @constructs
|
||||
*/
|
||||
constructor(topicId: number, position: Point, order: number, parentTopic: Topic) {
|
||||
$assert(topicId, 'topicId must be defined');
|
||||
super();
|
||||
|
@ -29,11 +29,15 @@ class GenericFunctionCommand extends Command {
|
||||
|
||||
private _commandFunc: (topic: Topic, value: CommandTypes) => CommandTypes;
|
||||
|
||||
private _oldValues: (CommandTypes)[];
|
||||
private _oldValues: CommandTypes[];
|
||||
|
||||
private _applied: boolean;
|
||||
|
||||
constructor(commandFunc: (topic: Topic, value: CommandTypes) => CommandTypes, topicsIds: number[], value: CommandTypes = undefined) {
|
||||
constructor(
|
||||
commandFunc: (topic: Topic, value: CommandTypes) => CommandTypes,
|
||||
topicsIds: number[],
|
||||
value: CommandTypes = undefined,
|
||||
) {
|
||||
$assert(commandFunc, 'commandFunc must be defined');
|
||||
$assert($defined(topicsIds), 'topicsIds must be defined');
|
||||
|
||||
@ -45,8 +49,8 @@ class GenericFunctionCommand extends Command {
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
execute(commandContext: CommandContext) {
|
||||
if (!this._applied) {
|
||||
const topics = commandContext.findTopics(this._topicsIds);
|
||||
@ -68,9 +72,9 @@ class GenericFunctionCommand extends Command {
|
||||
if (this._applied) {
|
||||
const topics = commandContext.findTopics(this._topicsIds);
|
||||
|
||||
topics.forEach(((topic: Topic, index: number) => {
|
||||
topics.forEach((topic: Topic, index: number) => {
|
||||
this._commandFunc(topic, this._oldValues[index]);
|
||||
}));
|
||||
});
|
||||
|
||||
this._applied = false;
|
||||
this._oldValues = [];
|
||||
|
@ -28,9 +28,9 @@ class RemoveFeatureFromTopicCommand extends Command {
|
||||
private _oldFeature: FeatureModel;
|
||||
|
||||
/**
|
||||
* @classdesc This command handles do/undo of removing a feature from a topic, e.g. an icon or
|
||||
* a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}.
|
||||
*/
|
||||
* @classdesc This command handles do/undo of removing a feature from a topic, e.g. an icon or
|
||||
* a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}.
|
||||
*/
|
||||
constructor(topicId: number, featureId: number) {
|
||||
$assert($defined(topicId), 'topicId can not be null');
|
||||
$assert(featureId, 'iconModel can not be null');
|
||||
@ -42,8 +42,8 @@ class RemoveFeatureFromTopicCommand extends Command {
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
execute(commandContext: CommandContext): void {
|
||||
const topic = commandContext.findTopics([this._topicId])[0];
|
||||
const feature = topic.findFeatureById(this._featureId);
|
||||
@ -52,9 +52,9 @@ class RemoveFeatureFromTopicCommand extends Command {
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
* @see {@link mindplot.Command.undoExecute}
|
||||
*/
|
||||
* Overrides abstract parent method
|
||||
* @see {@link mindplot.Command.undoExecute}
|
||||
*/
|
||||
undoExecute(commandContext: CommandContext) {
|
||||
const topic = commandContext.findTopics([this._topicId])[0];
|
||||
topic.addFeature(this._oldFeature);
|
||||
|
@ -29,7 +29,13 @@ class BinaryImageExporter extends Exporter {
|
||||
|
||||
private adjustToFit: boolean;
|
||||
|
||||
constructor(svgElement: Element, width: number, height: number, imgFormat: 'image/png' | 'image/jpeg', adjustToFit = true) {
|
||||
constructor(
|
||||
svgElement: Element,
|
||||
width: number,
|
||||
height: number,
|
||||
imgFormat: 'image/png' | 'image/jpeg',
|
||||
adjustToFit = true,
|
||||
) {
|
||||
super(imgFormat.split('/')[0], imgFormat);
|
||||
this.svgElement = svgElement;
|
||||
this.adjustToFit = adjustToFit;
|
||||
@ -55,12 +61,12 @@ class BinaryImageExporter extends Exporter {
|
||||
if (this.adjustToFit) {
|
||||
// Size must match with SVG image size ...
|
||||
const size = svgExporter.getImgSize();
|
||||
width = (size.width * dpr);
|
||||
height = (size.height * dpr);
|
||||
width = size.width * dpr;
|
||||
height = size.height * dpr;
|
||||
} else {
|
||||
// Use screensize as size ..
|
||||
width = (this.width * dpr);
|
||||
height = (this.height * dpr);
|
||||
width = this.width * dpr;
|
||||
height = this.height * dpr;
|
||||
}
|
||||
|
||||
console.log(`Export size: ${width}:${height}`);
|
||||
|
@ -77,7 +77,11 @@ class FreemindExporter extends Exporter {
|
||||
|
||||
if (centralTopic) {
|
||||
this.nodeMap.set(centralTopic.getId(), main);
|
||||
this.setTopicPropertiesToNode({ freemindNode: main, mindmapTopic: centralTopic, isRoot: true });
|
||||
this.setTopicPropertiesToNode({
|
||||
freemindNode: main,
|
||||
mindmapTopic: centralTopic,
|
||||
isRoot: true,
|
||||
});
|
||||
this.addNodeFromTopic(centralTopic, main);
|
||||
}
|
||||
|
||||
@ -91,9 +95,13 @@ class FreemindExporter extends Exporter {
|
||||
|
||||
arrowlink.setDestination(destNode.getId());
|
||||
|
||||
if (relationship.getEndArrow() && relationship.getEndArrow()) arrowlink.setEndarrow('Default');
|
||||
if (relationship.getEndArrow() && relationship.getEndArrow()) {
|
||||
arrowlink.setEndarrow('Default');
|
||||
}
|
||||
|
||||
if (relationship.getStartArrow() && relationship.getStartArrow()) arrowlink.setStartarrow('Default');
|
||||
if (relationship.getStartArrow() && relationship.getStartArrow()) {
|
||||
arrowlink.setStartarrow('Default');
|
||||
}
|
||||
|
||||
srcNode.setArrowlinkOrCloudOrEdge(arrowlink);
|
||||
}
|
||||
@ -110,7 +118,15 @@ class FreemindExporter extends Exporter {
|
||||
return Promise.resolve(formatXml);
|
||||
}
|
||||
|
||||
private setTopicPropertiesToNode({ freemindNode, mindmapTopic, isRoot }: { freemindNode: FreeminNode; mindmapTopic: INodeModel; isRoot: boolean; }): void {
|
||||
private setTopicPropertiesToNode({
|
||||
freemindNode,
|
||||
mindmapTopic,
|
||||
isRoot,
|
||||
}: {
|
||||
freemindNode: FreeminNode;
|
||||
mindmapTopic: INodeModel;
|
||||
isRoot: boolean;
|
||||
}): void {
|
||||
freemindNode.setId(`ID_${mindmapTopic.getId()}`);
|
||||
|
||||
const text = mindmapTopic.getText();
|
||||
@ -154,7 +170,11 @@ class FreemindExporter extends Exporter {
|
||||
const newNode: FreeminNode = this.objectFactory.createNode();
|
||||
this.nodeMap.set(currentTopic.getId(), newNode);
|
||||
|
||||
this.setTopicPropertiesToNode({ freemindNode: newNode, mindmapTopic: currentTopic, isRoot: false });
|
||||
this.setTopicPropertiesToNode({
|
||||
freemindNode: newNode,
|
||||
mindmapTopic: currentTopic,
|
||||
isRoot: false,
|
||||
});
|
||||
|
||||
destNode.setArrowlinkOrCloudOrEdge(newNode);
|
||||
|
||||
@ -163,7 +183,7 @@ class FreemindExporter extends Exporter {
|
||||
const position: PositionNodeType = currentTopic.getPosition();
|
||||
if (position) {
|
||||
const xPos: number = position.x;
|
||||
newNode.setPosition((xPos < 0 ? 'left' : 'right'));
|
||||
newNode.setPosition(xPos < 0 ? 'left' : 'right');
|
||||
} else newNode.setPosition('left');
|
||||
});
|
||||
}
|
||||
@ -193,28 +213,27 @@ class FreemindExporter extends Exporter {
|
||||
private addFeautreNode(freemindNode: FreeminNode, mindmapTopic: INodeModel): void {
|
||||
const branches: Array<FeatureModel> = mindmapTopic.getFeatures();
|
||||
|
||||
branches
|
||||
.forEach((feature: FeatureModel) => {
|
||||
const type = feature.getType();
|
||||
branches.forEach((feature: FeatureModel) => {
|
||||
const type = feature.getType();
|
||||
|
||||
if (type === 'link') {
|
||||
const link = feature as LinkModel;
|
||||
freemindNode.setLink(link.getUrl());
|
||||
}
|
||||
if (type === 'link') {
|
||||
const link = feature as LinkModel;
|
||||
freemindNode.setLink(link.getUrl());
|
||||
}
|
||||
|
||||
if (type === 'note') {
|
||||
const note = feature as NoteModel;
|
||||
const richcontent: Richcontent = this.buildRichcontent(note.getText(), 'NOTE');
|
||||
freemindNode.setArrowlinkOrCloudOrEdge(richcontent);
|
||||
}
|
||||
if (type === 'note') {
|
||||
const note = feature as NoteModel;
|
||||
const richcontent: Richcontent = this.buildRichcontent(note.getText(), 'NOTE');
|
||||
freemindNode.setArrowlinkOrCloudOrEdge(richcontent);
|
||||
}
|
||||
|
||||
if (type === 'icon') {
|
||||
const icon = feature as IconModel;
|
||||
const freemindIcon: Icon = new Icon();
|
||||
freemindIcon.setBuiltin(icon.getIconType());
|
||||
freemindNode.setArrowlinkOrCloudOrEdge(freemindIcon);
|
||||
}
|
||||
});
|
||||
if (type === 'icon') {
|
||||
const icon = feature as IconModel;
|
||||
const freemindIcon: Icon = new Icon();
|
||||
freemindIcon.setBuiltin(icon.getIconType());
|
||||
freemindNode.setArrowlinkOrCloudOrEdge(freemindIcon);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private addEdgeNode(freemainMap: FreeminNode, mindmapTopic: INodeModel): void {
|
||||
@ -286,7 +305,9 @@ class FreemindExporter extends Exporter {
|
||||
const g: string = rgb[1].trim();
|
||||
const b: string = rgb[2].trim();
|
||||
|
||||
result = `#${r.length === 1 ? `0${r}` : r}${g.length === 1 ? `0${g}` : g}${b.length === 1 ? `0${b}` : b}`;
|
||||
result = `#${r.length === 1 ? `0${r}` : r}${g.length === 1 ? `0${g}` : g}${
|
||||
b.length === 1 ? `0${b}` : b
|
||||
}`;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
@ -21,7 +21,13 @@ import SVGExporter from './SVGExporter';
|
||||
|
||||
type imageType = 'svg' | 'png' | 'jpg';
|
||||
class ImageExpoterFactory {
|
||||
static create(type: imageType, svgElement: Element, width: number, height: number, adjustToFit = true): Exporter {
|
||||
static create(
|
||||
type: imageType,
|
||||
svgElement: Element,
|
||||
width: number,
|
||||
height: number,
|
||||
adjustToFit = true,
|
||||
): Exporter {
|
||||
let result: Exporter;
|
||||
switch (type) {
|
||||
case 'svg': {
|
||||
|
@ -39,8 +39,7 @@ class SVGExporter extends Exporter {
|
||||
|
||||
export(): Promise<string> {
|
||||
// Replace all images for in-line images ...
|
||||
let svgTxt: string = new XMLSerializer()
|
||||
.serializeToString(this.svgElement);
|
||||
let svgTxt: string = new XMLSerializer().serializeToString(this.svgElement);
|
||||
svgTxt = SVGExporter.prolog + svgTxt;
|
||||
|
||||
// Are namespace declared ?. Otherwise, force the declaration ...
|
||||
@ -59,39 +58,37 @@ class SVGExporter extends Exporter {
|
||||
svgDoc = this._normalizeToFit(svgDoc);
|
||||
}
|
||||
|
||||
const result = new XMLSerializer()
|
||||
.serializeToString(svgDoc);
|
||||
const result = new XMLSerializer().serializeToString(svgDoc);
|
||||
|
||||
return Promise.resolve(result);
|
||||
}
|
||||
|
||||
private _calcualteDimensions(): { minX: number, maxX: number, minY: number, maxY: number } {
|
||||
private _calcualteDimensions(): { minX: number; maxX: number; minY: number; maxY: number } {
|
||||
// Collect all group elements ...
|
||||
const rectElems = Array.from(document.querySelectorAll('g>rect'));
|
||||
const translates: SizeType[] = rectElems
|
||||
.map((rect: Element) => {
|
||||
const g = rect.parentElement;
|
||||
const transformStr = g.getAttribute('transform');
|
||||
const translates: SizeType[] = rectElems.map((rect: Element) => {
|
||||
const g = rect.parentElement;
|
||||
const transformStr = g.getAttribute('transform');
|
||||
|
||||
// Looking to parse translate(220.00000,279.00000) scale(1.00000,1.00000)
|
||||
const match = transformStr.match(SVGExporter.regexpTranslate);
|
||||
let result: SizeType = { width: 0, height: 0 };
|
||||
if (match !== null) {
|
||||
result = { width: Number.parseFloat(match[1]), height: Number.parseFloat(match[2]) };
|
||||
// Looking to parse translate(220.00000,279.00000) scale(1.00000,1.00000)
|
||||
const match = transformStr.match(SVGExporter.regexpTranslate);
|
||||
let result: SizeType = { width: 0, height: 0 };
|
||||
if (match !== null) {
|
||||
result = { width: Number.parseFloat(match[1]), height: Number.parseFloat(match[2]) };
|
||||
|
||||
// Add rect size ...
|
||||
if (result.width > 0) {
|
||||
const rectWidth = Number.parseFloat(rect.getAttribute('width'));
|
||||
result.width += rectWidth;
|
||||
}
|
||||
|
||||
if (result.height > 0) {
|
||||
const rectHeight = Number.parseFloat(rect.getAttribute('height'));
|
||||
result.height += rectHeight;
|
||||
}
|
||||
// Add rect size ...
|
||||
if (result.width > 0) {
|
||||
const rectWidth = Number.parseFloat(rect.getAttribute('width'));
|
||||
result.width += rectWidth;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
if (result.height > 0) {
|
||||
const rectHeight = Number.parseFloat(rect.getAttribute('height'));
|
||||
result.height += rectHeight;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
// Find max and mins ...
|
||||
const widths = translates.map((t) => t.width).sort((a, b) => a - b);
|
||||
@ -104,14 +101,15 @@ class SVGExporter extends Exporter {
|
||||
const maxY = heights[heights.length - 1] + SVGExporter.padding;
|
||||
|
||||
return {
|
||||
minX, maxX, minY, maxY,
|
||||
minX,
|
||||
maxX,
|
||||
minY,
|
||||
maxY,
|
||||
};
|
||||
}
|
||||
|
||||
getImgSize(): SizeType {
|
||||
const {
|
||||
minX, maxX, minY, maxY,
|
||||
} = this._calcualteDimensions();
|
||||
const { minX, maxX, minY, maxY } = this._calcualteDimensions();
|
||||
|
||||
let width: number = maxX + Math.abs(minX);
|
||||
let height: number = maxY + Math.abs(minY);
|
||||
@ -127,9 +125,7 @@ class SVGExporter extends Exporter {
|
||||
}
|
||||
|
||||
private _normalizeToFit(document: Document): Document {
|
||||
const {
|
||||
minX, maxX, minY, maxY,
|
||||
} = this._calcualteDimensions();
|
||||
const { minX, maxX, minY, maxY } = this._calcualteDimensions();
|
||||
const svgElem = document.firstChild as Element;
|
||||
|
||||
const width = maxX + Math.abs(minX);
|
||||
|
@ -39,22 +39,23 @@ class TxtExporter extends Exporter {
|
||||
|
||||
private traverseBranch(indent: string, prefix: string, branches: INodeModel[]) {
|
||||
let result = '';
|
||||
branches
|
||||
.forEach((node, index) => {
|
||||
result = `${result}${indent}${prefix}${index + 1} ${node.getText() !== undefined ? node.getText() : ''}`;
|
||||
node.getFeatures().forEach((f) => {
|
||||
const type = f.getType();
|
||||
if (type === 'link') {
|
||||
result = `${result}\n ${indent} [Link: ${(f as LinkModel).getUrl()}]`;
|
||||
}
|
||||
if (type === 'note') {
|
||||
result = `${result}\n${indent} [Note: ${(f as NoteModel).getText()}]`;
|
||||
}
|
||||
});
|
||||
result = `${result}\n`;
|
||||
|
||||
result += this.traverseBranch(`\t${indent}`, `${prefix}${index + 1}.`, node.getChildren());
|
||||
branches.forEach((node, index) => {
|
||||
result = `${result}${indent}${prefix}${index + 1} ${
|
||||
node.getText() !== undefined ? node.getText() : ''
|
||||
}`;
|
||||
node.getFeatures().forEach((f) => {
|
||||
const type = f.getType();
|
||||
if (type === 'link') {
|
||||
result = `${result}\n ${indent} [Link: ${(f as LinkModel).getUrl()}]`;
|
||||
}
|
||||
if (type === 'note') {
|
||||
result = `${result}\n${indent} [Note: ${(f as NoteModel).getText()}]`;
|
||||
}
|
||||
});
|
||||
result = `${result}\n`;
|
||||
|
||||
result += this.traverseBranch(`\t${indent}`, `${prefix}${index + 1}.`, node.getChildren());
|
||||
});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
@ -29,12 +29,10 @@ class WiseXMLExporter extends Exporter {
|
||||
|
||||
export(): Promise<string> {
|
||||
const { mindmap } = this;
|
||||
const serializer = XMLSerializerFactory
|
||||
.createInstanceFromMindmap(mindmap);
|
||||
const serializer = XMLSerializerFactory.createInstanceFromMindmap(mindmap);
|
||||
const document: Document = serializer.toXML(mindmap);
|
||||
|
||||
const xmlStr: string = new XMLSerializer()
|
||||
.serializeToString(document);
|
||||
const xmlStr: string = new XMLSerializer().serializeToString(document);
|
||||
return Promise.resolve(xmlStr);
|
||||
}
|
||||
}
|
||||
|
@ -75,11 +75,21 @@ export default class Arrowlink {
|
||||
arrowlinkElem.setAttribute('DESTINATION', this.DESTINATION);
|
||||
arrowlinkElem.setAttribute('STARTARROW', this.STARTARROW);
|
||||
|
||||
if (this.COLOR) arrowlinkElem.setAttribute('COLOR', this.COLOR);
|
||||
if (this.ENDINCLINATION) arrowlinkElem.setAttribute('ENDINCLINATION', this.ENDINCLINATION);
|
||||
if (this.ENDARROW) arrowlinkElem.setAttribute('ENDARROW', this.ENDARROW);
|
||||
if (this.ID) arrowlinkElem.setAttribute('ID', this.ID);
|
||||
if (this.STARTINCLINATION) arrowlinkElem.setAttribute('STARTINCLINATION', this.STARTINCLINATION);
|
||||
if (this.COLOR) {
|
||||
arrowlinkElem.setAttribute('COLOR', this.COLOR);
|
||||
}
|
||||
if (this.ENDINCLINATION) {
|
||||
arrowlinkElem.setAttribute('ENDINCLINATION', this.ENDINCLINATION);
|
||||
}
|
||||
if (this.ENDARROW) {
|
||||
arrowlinkElem.setAttribute('ENDARROW', this.ENDARROW);
|
||||
}
|
||||
if (this.ID) {
|
||||
arrowlinkElem.setAttribute('ID', this.ID);
|
||||
}
|
||||
if (this.STARTINCLINATION) {
|
||||
arrowlinkElem.setAttribute('STARTINCLINATION', this.STARTINCLINATION);
|
||||
}
|
||||
|
||||
return arrowlinkElem;
|
||||
}
|
||||
|
@ -65,10 +65,7 @@ export default class Freemap {
|
||||
|
||||
// Verify that the version attribute exists
|
||||
console.log(rootElem.getAttribute('version'));
|
||||
$assert(
|
||||
rootElem.getAttribute('version') !== null,
|
||||
'Freemind version not found',
|
||||
);
|
||||
$assert(rootElem.getAttribute('version') !== null, 'Freemind version not found');
|
||||
|
||||
// Start the loading process...
|
||||
const version = rootElem.getAttribute('version') || '1.0.1';
|
||||
@ -81,9 +78,7 @@ export default class Freemap {
|
||||
|
||||
const childNodes = Array.from(mainTopicElement.childNodes);
|
||||
const childsNodes = childNodes
|
||||
.filter(
|
||||
(child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'node',
|
||||
)
|
||||
.filter((child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'node')
|
||||
.map((c) => c as Element);
|
||||
|
||||
childsNodes.forEach((child: Element) => {
|
||||
@ -98,14 +93,16 @@ export default class Freemap {
|
||||
let element: Element;
|
||||
if (child.nodeType === 1) {
|
||||
if (
|
||||
(child as Element).tagName === 'node'
|
||||
|| (child as Element).tagName === 'richcontent'
|
||||
|| (child as Element).tagName === 'font'
|
||||
|| (child as Element).tagName === 'edge'
|
||||
|| (child as Element).tagName === 'arrowlink'
|
||||
|| (child as Element).tagName === 'clud'
|
||||
|| (child as Element).tagName === 'icon'
|
||||
) element = child as Element;
|
||||
(child as Element).tagName === 'node' ||
|
||||
(child as Element).tagName === 'richcontent' ||
|
||||
(child as Element).tagName === 'font' ||
|
||||
(child as Element).tagName === 'edge' ||
|
||||
(child as Element).tagName === 'arrowlink' ||
|
||||
(child as Element).tagName === 'clud' ||
|
||||
(child as Element).tagName === 'icon'
|
||||
) {
|
||||
element = child as Element;
|
||||
}
|
||||
}
|
||||
|
||||
return element;
|
||||
@ -132,44 +129,78 @@ export default class Freemap {
|
||||
|
||||
if (nodeElem.tagName === 'font') {
|
||||
node = new Font();
|
||||
if (nodeElem.getAttribute('NAME')) node.setName(nodeElem.getAttribute('NAME'));
|
||||
if (nodeElem.getAttribute('BOLD')) node.setBold(nodeElem.getAttribute('BOLD'));
|
||||
if (nodeElem.getAttribute('ITALIC')) node.setItalic(nodeElem.getAttribute('ITALIC'));
|
||||
if (nodeElem.getAttribute('SIZE')) node.setSize(nodeElem.getAttribute('SIZE'));
|
||||
if (nodeElem.getAttribute('NAME')) {
|
||||
node.setName(nodeElem.getAttribute('NAME'));
|
||||
}
|
||||
if (nodeElem.getAttribute('BOLD')) {
|
||||
node.setBold(nodeElem.getAttribute('BOLD'));
|
||||
}
|
||||
if (nodeElem.getAttribute('ITALIC')) {
|
||||
node.setItalic(nodeElem.getAttribute('ITALIC'));
|
||||
}
|
||||
if (nodeElem.getAttribute('SIZE')) {
|
||||
node.setSize(nodeElem.getAttribute('SIZE'));
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeElem.tagName === 'edge') {
|
||||
node = new Edge();
|
||||
if (nodeElem.getAttribute('COLOR')) node.setColor(nodeElem.getAttribute('COLOR'));
|
||||
if (nodeElem.getAttribute('STYLE')) node.setStyle(nodeElem.getAttribute('STYLE'));
|
||||
if (nodeElem.getAttribute('WIDTH')) node.setWidth(nodeElem.getAttribute('WIDTH'));
|
||||
if (nodeElem.getAttribute('COLOR')) {
|
||||
node.setColor(nodeElem.getAttribute('COLOR'));
|
||||
}
|
||||
if (nodeElem.getAttribute('STYLE')) {
|
||||
node.setStyle(nodeElem.getAttribute('STYLE'));
|
||||
}
|
||||
if (nodeElem.getAttribute('WIDTH')) {
|
||||
node.setWidth(nodeElem.getAttribute('WIDTH'));
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeElem.tagName === 'arrowlink') {
|
||||
node = new Arrowlink();
|
||||
if (nodeElem.getAttribute('COLOR')) node.setColor(nodeElem.getAttribute('COLOR'));
|
||||
if (nodeElem.getAttribute('DESTINATION')) node.setDestination(nodeElem.getAttribute('DESTINATION'));
|
||||
if (nodeElem.getAttribute('ENDARROW')) node.setEndarrow(nodeElem.getAttribute('ENDARROW'));
|
||||
if (nodeElem.getAttribute('ENDINCLINATION')) node.setEndinclination(nodeElem.getAttribute('ENDINCLINATION'));
|
||||
if (nodeElem.getAttribute('ID')) node.setId(nodeElem.getAttribute('ID'));
|
||||
if (nodeElem.getAttribute('STARTARROW')) node.setStartarrow(nodeElem.getAttribute('STARTARROW'));
|
||||
if (nodeElem.getAttribute('STARTINCLINATION')) node.setStartinclination(nodeElem.getAttribute('STARTINCLINATION'));
|
||||
if (nodeElem.getAttribute('COLOR')) {
|
||||
node.setColor(nodeElem.getAttribute('COLOR'));
|
||||
}
|
||||
if (nodeElem.getAttribute('DESTINATION')) {
|
||||
node.setDestination(nodeElem.getAttribute('DESTINATION'));
|
||||
}
|
||||
if (nodeElem.getAttribute('ENDARROW')) {
|
||||
node.setEndarrow(nodeElem.getAttribute('ENDARROW'));
|
||||
}
|
||||
if (nodeElem.getAttribute('ENDINCLINATION')) {
|
||||
node.setEndinclination(nodeElem.getAttribute('ENDINCLINATION'));
|
||||
}
|
||||
if (nodeElem.getAttribute('ID')) {
|
||||
node.setId(nodeElem.getAttribute('ID'));
|
||||
}
|
||||
if (nodeElem.getAttribute('STARTARROW')) {
|
||||
node.setStartarrow(nodeElem.getAttribute('STARTARROW'));
|
||||
}
|
||||
if (nodeElem.getAttribute('STARTINCLINATION')) {
|
||||
node.setStartinclination(nodeElem.getAttribute('STARTINCLINATION'));
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeElem.tagName === 'cloud') {
|
||||
node = new Cloud();
|
||||
if (nodeElem.getAttribute('COLOR')) node.setColor(nodeElem.getAttribute('COLOR'));
|
||||
if (nodeElem.getAttribute('COLOR')) {
|
||||
node.setColor(nodeElem.getAttribute('COLOR'));
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeElem.tagName === 'icon') {
|
||||
node = new Icon();
|
||||
if (nodeElem.getAttribute('BUILTIN')) node.setBuiltin(nodeElem.getAttribute('BUILTIN'));
|
||||
if (nodeElem.getAttribute('BUILTIN')) {
|
||||
node.setBuiltin(nodeElem.getAttribute('BUILTIN'));
|
||||
}
|
||||
}
|
||||
|
||||
if (nodeElem.tagName === 'richcontent') {
|
||||
node = new Richcontent();
|
||||
|
||||
if (nodeElem.getAttribute('TYPE')) node.setType(nodeElem.getAttribute('TYPE'));
|
||||
if (nodeElem.getAttribute('TYPE')) {
|
||||
node.setType(nodeElem.getAttribute('TYPE'));
|
||||
}
|
||||
if (nodeElem.firstChild && nodeElem.getElementsByTagName('html')) {
|
||||
const content = nodeElem.getElementsByTagName('html');
|
||||
const html = content[0] ? content[0].outerHTML : '';
|
||||
|
@ -7,7 +7,9 @@ import Icon from './Icon';
|
||||
import Richcontent from './Richcontent';
|
||||
|
||||
class Node {
|
||||
protected arrowlinkOrCloudOrEdge: Array<Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this>;
|
||||
protected arrowlinkOrCloudOrEdge: Array<
|
||||
Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this
|
||||
>;
|
||||
|
||||
protected BACKGROUND_COLOR: string;
|
||||
|
||||
@ -43,9 +45,14 @@ class Node {
|
||||
|
||||
private centralTopic: boolean;
|
||||
|
||||
getArrowlinkOrCloudOrEdge(): Array<Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node> {
|
||||
getArrowlinkOrCloudOrEdge(): Array<
|
||||
/* eslint-disable */
|
||||
Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node
|
||||
> {
|
||||
if (!this.arrowlinkOrCloudOrEdge) {
|
||||
this.arrowlinkOrCloudOrEdge = new Array<Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this>();
|
||||
this.arrowlinkOrCloudOrEdge = new Array<
|
||||
Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this
|
||||
>();
|
||||
}
|
||||
return this.arrowlinkOrCloudOrEdge;
|
||||
}
|
||||
@ -118,7 +125,9 @@ class Node {
|
||||
return this.centralTopic;
|
||||
}
|
||||
|
||||
setArrowlinkOrCloudOrEdge(value: Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this): void {
|
||||
setArrowlinkOrCloudOrEdge(
|
||||
value: Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | this,
|
||||
): void {
|
||||
this.getArrowlinkOrCloudOrEdge().push(value);
|
||||
}
|
||||
|
||||
@ -268,6 +277,6 @@ class Node {
|
||||
}
|
||||
}
|
||||
|
||||
export type Choise = Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node
|
||||
export type Choise = Arrowlink | Cloud | Edge | Font | Hook | Icon | Richcontent | Node;
|
||||
|
||||
export default Node;
|
||||
|
@ -26,7 +26,9 @@ export default class Richcontent {
|
||||
richcontentElem.setAttribute('TYPE', this.type);
|
||||
|
||||
if (this.html) {
|
||||
const htmlElement: DocumentFragment = document.createRange().createContextualFragment(this.html);
|
||||
const htmlElement: DocumentFragment = document
|
||||
.createRange()
|
||||
.createContextualFragment(this.html);
|
||||
richcontentElem.appendChild(htmlElement);
|
||||
}
|
||||
|
||||
|
@ -50,7 +50,9 @@ export default class FreemindImporter extends Importer {
|
||||
const version: string = this.freemindMap.getVersion();
|
||||
|
||||
if (!version || version.startsWith('freeplane')) {
|
||||
throw new Error('You seems to be be trying to import a Freeplane map. FreePlane is not supported format.');
|
||||
throw new Error(
|
||||
'You seems to be be trying to import a Freeplane map. FreePlane is not supported format.',
|
||||
);
|
||||
} else {
|
||||
const mapVersion: VersionNumber = new VersionNumber(version);
|
||||
if (mapVersion.isGreaterThan(FreemindConstant.SUPPORTED_FREEMIND_VERSION)) {
|
||||
@ -144,7 +146,11 @@ export default class FreemindImporter extends Importer {
|
||||
}
|
||||
}
|
||||
|
||||
private convertNodeProperties(freeNode: FreemindNode, wiseTopic: NodeModel, centralTopic: boolean): void {
|
||||
private convertNodeProperties(
|
||||
freeNode: FreemindNode,
|
||||
wiseTopic: NodeModel,
|
||||
centralTopic: boolean,
|
||||
): void {
|
||||
const text: string = freeNode.getText();
|
||||
if (text) {
|
||||
if (!centralTopic && text.length > 100) {
|
||||
@ -177,7 +183,12 @@ export default class FreemindImporter extends Importer {
|
||||
if (folded) wiseTopic.setChildrenShrunken(folded);
|
||||
}
|
||||
|
||||
private convertChildNodes(freeParent: FreemindNode, wiseParent: NodeModel, mindmap: Mindmap, depth: number): void {
|
||||
private convertChildNodes(
|
||||
freeParent: FreemindNode,
|
||||
wiseParent: NodeModel,
|
||||
mindmap: Mindmap,
|
||||
depth: number,
|
||||
): void {
|
||||
const freeChilden = freeParent.getArrowlinkOrCloudOrEdge();
|
||||
let currentWiseTopic: NodeModel = wiseParent;
|
||||
let order = 0;
|
||||
@ -206,7 +217,13 @@ export default class FreemindImporter extends Importer {
|
||||
|
||||
// Convert node position...
|
||||
const childrenCountSameSide = this.getChildrenCountSameSide(freeChilden, child);
|
||||
const position: {x: number, y: number} = this.convertPosition(wiseParent, child, depth, norder, childrenCountSameSide);
|
||||
const position: { x: number; y: number } = this.convertPosition(
|
||||
wiseParent,
|
||||
child,
|
||||
depth,
|
||||
norder,
|
||||
childrenCountSameSide,
|
||||
);
|
||||
wiseChild.setPosition(position.x, position.y);
|
||||
|
||||
// Convert the rest of the node properties...
|
||||
@ -239,7 +256,9 @@ export default class FreemindImporter extends Importer {
|
||||
const iconId: string = freeIcon.getBuiltin();
|
||||
const wiseIconId = FreemindIconConverter.toWiseId(iconId);
|
||||
if (wiseIconId) {
|
||||
const mindmapIcon: FeatureModel = FeatureModelFactory.createModel('icon', { id: wiseIconId });
|
||||
const mindmapIcon: FeatureModel = FeatureModelFactory.createModel('icon', {
|
||||
id: wiseIconId,
|
||||
});
|
||||
currentWiseTopic.addFeature(mindmapIcon);
|
||||
}
|
||||
}
|
||||
@ -263,7 +282,9 @@ export default class FreemindImporter extends Importer {
|
||||
|
||||
switch (type) {
|
||||
case 'NOTE': {
|
||||
const noteModel: FeatureModel = FeatureModelFactory.createModel('note', { text: text || FreemindConstant.EMPTY_NOTE });
|
||||
const noteModel: FeatureModel = FeatureModelFactory.createModel('note', {
|
||||
text: text || FreemindConstant.EMPTY_NOTE,
|
||||
});
|
||||
currentWiseTopic.addFeature(noteModel);
|
||||
break;
|
||||
}
|
||||
@ -274,7 +295,9 @@ export default class FreemindImporter extends Importer {
|
||||
}
|
||||
|
||||
default: {
|
||||
const noteModel: FeatureModel = FeatureModelFactory.createModel('note', { text: text || FreemindConstant.EMPTY_NOTE });
|
||||
const noteModel: FeatureModel = FeatureModelFactory.createModel('note', {
|
||||
text: text || FreemindConstant.EMPTY_NOTE,
|
||||
});
|
||||
currentWiseTopic.addFeature(noteModel);
|
||||
}
|
||||
}
|
||||
@ -381,7 +404,10 @@ export default class FreemindImporter extends Importer {
|
||||
|
||||
// Font Size
|
||||
if (font) {
|
||||
const fontSize: number = ((!font.getSize() || parseInt(font.getSize(), 10) < 8) ? FreemindConstant.FONT_SIZE_NORMAL : parseInt(font.getSize(), 10));
|
||||
const fontSize: number =
|
||||
!font.getSize() || parseInt(font.getSize(), 10) < 8
|
||||
? FreemindConstant.FONT_SIZE_NORMAL
|
||||
: parseInt(font.getSize(), 10);
|
||||
let wiseFontSize: number = FreemindConstant.FONT_SIZE_SMALL;
|
||||
if (fontSize >= 24) {
|
||||
wiseFontSize = FreemindConstant.FONT_SIZE_HUGE;
|
||||
@ -414,11 +440,19 @@ export default class FreemindImporter extends Importer {
|
||||
return result;
|
||||
}
|
||||
|
||||
private convertPosition(wiseParent: NodeModel, freeChild: FreemindNode, depth: number, order: number, childrenCount: number): {x: number, y: number} {
|
||||
let x: number = FreemindConstant.CENTRAL_TO_TOPIC_DISTANCE + ((depth - 1) * FreemindConstant.TOPIC_TO_TOPIC_DISTANCE);
|
||||
private convertPosition(
|
||||
wiseParent: NodeModel,
|
||||
freeChild: FreemindNode,
|
||||
depth: number,
|
||||
order: number,
|
||||
childrenCount: number,
|
||||
): { x: number; y: number } {
|
||||
let x: number =
|
||||
FreemindConstant.CENTRAL_TO_TOPIC_DISTANCE +
|
||||
(depth - 1) * FreemindConstant.TOPIC_TO_TOPIC_DISTANCE;
|
||||
if (depth === 1) {
|
||||
const side: string = freeChild.getPosition();
|
||||
x *= (side && FreemindConstant.POSITION_LEFT === side ? -1 : 1);
|
||||
x *= side && FreemindConstant.POSITION_LEFT === side ? -1 : 1;
|
||||
} else {
|
||||
const position = wiseParent.getPosition();
|
||||
x *= position.x < 0 ? 1 : -1;
|
||||
@ -427,7 +461,7 @@ export default class FreemindImporter extends Importer {
|
||||
let y: number;
|
||||
if (depth === 1) {
|
||||
if (order % 2 === 0) {
|
||||
const multiplier = ((order + 1) - childrenCount) * 2;
|
||||
const multiplier = (order + 1 - childrenCount) * 2;
|
||||
y = multiplier * FreemindConstant.ROOT_LEVEL_TOPIC_HEIGHT;
|
||||
} else {
|
||||
const multiplier = (order - childrenCount) * 2;
|
||||
@ -435,7 +469,11 @@ export default class FreemindImporter extends Importer {
|
||||
}
|
||||
} else {
|
||||
const position = wiseParent.getPosition();
|
||||
y = Math.round(position.y - ((childrenCount / 2) * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT - (order * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT)));
|
||||
y = Math.round(
|
||||
position.y -
|
||||
((childrenCount / 2) * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT -
|
||||
order * FreemindConstant.SECOND_LEVEL_TOPIC_HEIGHT),
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -1,3 +1,3 @@
|
||||
export default abstract class Importer {
|
||||
abstract import(nameMap: string, description: string): Promise<string>;
|
||||
abstract import(nameMap: string, description: string): Promise<string>;
|
||||
}
|
||||
|
@ -17,7 +17,15 @@
|
||||
*/
|
||||
import Events from '../Events';
|
||||
|
||||
export type EventType = 'topicResize' | 'topicMoved' | 'childShrinked' | 'topicConnected' | 'topicAdded' | 'topicRemoved' | 'forceLayout' | 'topicDisconect';
|
||||
export type EventType =
|
||||
| 'topicResize'
|
||||
| 'topicMoved'
|
||||
| 'childShrinked'
|
||||
| 'topicConnected'
|
||||
| 'topicAdded'
|
||||
| 'topicRemoved'
|
||||
| 'forceLayout'
|
||||
| 'topicDisconect';
|
||||
class EventBus extends Events {
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
static _instance: EventBus = new EventBus();
|
||||
|
@ -43,11 +43,11 @@ class EventBusDispatcher {
|
||||
EventBus.instance.addEvent('forceLayout', this._forceLayout.bind(this));
|
||||
}
|
||||
|
||||
private _topicResizeEvent(args: { node: Topic, size: SizeType }) {
|
||||
private _topicResizeEvent(args: { node: Topic; size: SizeType }) {
|
||||
this._layoutManager.updateNodeSize(args.node.getId(), args.size);
|
||||
}
|
||||
|
||||
private _topicMoved(args: { node: Topic, position: PositionType }) {
|
||||
private _topicMoved(args: { node: Topic; position: PositionType }) {
|
||||
this._layoutManager.moveNode(args.node.getId(), args.position);
|
||||
}
|
||||
|
||||
@ -55,9 +55,11 @@ class EventBusDispatcher {
|
||||
this._layoutManager.disconnectNode(node.getId());
|
||||
}
|
||||
|
||||
private _topicConnected(args: { parentNode: Topic, childNode: Topic }) {
|
||||
private _topicConnected(args: { parentNode: Topic; childNode: Topic }) {
|
||||
this._layoutManager.connectNode(
|
||||
args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder(),
|
||||
args.parentNode.getId(),
|
||||
args.childNode.getId(),
|
||||
args.childNode.getOrder(),
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -64,13 +64,13 @@ class LayoutManager extends Events {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @param position
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if position is null or undefined
|
||||
* @throws will throw an error if the position's x property is null or undefined
|
||||
* @throws will throw an error if the position's y property is null or undefined
|
||||
*/
|
||||
* @param id
|
||||
* @param position
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if position is null or undefined
|
||||
* @throws will throw an error if the position's x property is null or undefined
|
||||
* @throws will throw an error if the position's y property is null or undefined
|
||||
*/
|
||||
moveNode(id: number, position: PositionType) {
|
||||
$assert($defined(id), 'id cannot be null');
|
||||
$assert($defined(position), 'position cannot be null');
|
||||
@ -97,12 +97,12 @@ class LayoutManager extends Events {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @param size
|
||||
* @param position
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
* @param id
|
||||
* @param size
|
||||
* @param position
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @return this
|
||||
*/
|
||||
addNode(id: number, size: SizeType, position: PositionType) {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
const result = this._layout.createNode(id, size, position, 'topic');
|
||||
@ -126,7 +126,11 @@ class LayoutManager extends Events {
|
||||
return this;
|
||||
}
|
||||
|
||||
predict(parentId: number, nodeId: number, position: PositionType): { order: number, position: PositionType } {
|
||||
predict(
|
||||
parentId: number,
|
||||
nodeId: number,
|
||||
position: PositionType,
|
||||
): { order: number; position: PositionType } {
|
||||
$assert($defined(parentId), 'parentId can not be null');
|
||||
|
||||
const parent = this._treeSet.find(parentId);
|
||||
@ -179,14 +183,14 @@ class LayoutManager extends Events {
|
||||
}
|
||||
|
||||
private _flushEvents() {
|
||||
this._events.forEach(((event) => {
|
||||
this._events.forEach((event) => {
|
||||
this.fireEvent('change', event);
|
||||
}));
|
||||
});
|
||||
this._events = [];
|
||||
}
|
||||
|
||||
private _collectChanges(nodes: Node[]) {
|
||||
nodes.forEach(((node) => {
|
||||
nodes.forEach((node) => {
|
||||
if (node.hasOrderChanged() || node.hasPositionChanged()) {
|
||||
// Find or create a event ...
|
||||
const id = node.getId();
|
||||
@ -205,7 +209,7 @@ class LayoutManager extends Events {
|
||||
this._events.push(event);
|
||||
}
|
||||
this._collectChanges(this._treeSet.getChildren(node));
|
||||
}));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -186,10 +186,12 @@ class Node {
|
||||
// This is a performance improvement to avoid movements that really could be avoided.
|
||||
const currentPos = this.getPosition();
|
||||
if (
|
||||
currentPos == null
|
||||
|| Math.abs(currentPos.x - position.x) > 2
|
||||
|| Math.abs(currentPos.y - position.y) > 2
|
||||
) this._setProperty('position', position);
|
||||
currentPos == null ||
|
||||
Math.abs(currentPos.x - position.x) > 2 ||
|
||||
Math.abs(currentPos.y - position.y) > 2
|
||||
) {
|
||||
this._setProperty('position', position);
|
||||
}
|
||||
}
|
||||
|
||||
_setProperty(key: string, value) {
|
||||
@ -228,16 +230,11 @@ class Node {
|
||||
|
||||
/** @return {String} returns id, order, position, size and shrink information */
|
||||
toString() {
|
||||
return (
|
||||
`[id:${this.getId()
|
||||
}, order:${this.getOrder()
|
||||
}, position: {${this.getPosition().x
|
||||
},${this.getPosition().y
|
||||
}}, size: {${this.getSize().width
|
||||
},${this.getSize().height
|
||||
}}, shrink:${this.areChildrenShrunken()
|
||||
}]`
|
||||
);
|
||||
return `[id:${this.getId()}, order:${this.getOrder()}, position: {${this.getPosition().x},${
|
||||
this.getPosition().y
|
||||
}}, size: {${this.getSize().width},${
|
||||
this.getSize().height
|
||||
}}, shrink:${this.areChildrenShrunken()}]`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -62,12 +62,12 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param parentId
|
||||
* @param childId
|
||||
* @throws will throw an error if parentId is null or undefined
|
||||
* @throws will throw an error if childId is null or undefined
|
||||
* @throws will throw an error if node with id childId is already a child of parent
|
||||
*/
|
||||
* @param parentId
|
||||
* @param childId
|
||||
* @throws will throw an error if parentId is null or undefined
|
||||
* @throws will throw an error if childId is null or undefined
|
||||
* @throws will throw an error if node with id childId is already a child of parent
|
||||
*/
|
||||
connect(parentId: number, childId: number) {
|
||||
$assert($defined(parentId), 'parent can not be null');
|
||||
$assert($defined(childId), 'child can not be null');
|
||||
@ -85,10 +85,10 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param nodeId
|
||||
* @throws will throw an error if nodeId is null or undefined
|
||||
* @throws will throw an error if node is not connected
|
||||
*/
|
||||
* @param nodeId
|
||||
* @throws will throw an error if nodeId is null or undefined
|
||||
* @throws will throw an error if node is not connected
|
||||
*/
|
||||
disconnect(nodeId: number) {
|
||||
$assert($defined(nodeId), 'nodeId can not be null');
|
||||
const node = this.find(nodeId);
|
||||
@ -100,12 +100,12 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id
|
||||
* @param validate
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if node cannot be found
|
||||
* @return node
|
||||
*/
|
||||
* @param id
|
||||
* @param validate
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if node cannot be found
|
||||
* @return node
|
||||
*/
|
||||
find(id: number, validate = true): Node {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
|
||||
@ -143,20 +143,20 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if nodeId is null or undefined
|
||||
* @return children
|
||||
*/
|
||||
* @param node
|
||||
* @throws will throw an error if nodeId is null or undefined
|
||||
* @return children
|
||||
*/
|
||||
getChildren(node: Node): Node[] {
|
||||
$assert(node, 'node cannot be null');
|
||||
return node._children;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return root node or the provided node, if it has no parent
|
||||
*/
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return root node or the provided node, if it has no parent
|
||||
*/
|
||||
getRootNode(node: Node) {
|
||||
$assert(node, 'node cannot be null');
|
||||
const parent = this.getParent(node);
|
||||
@ -168,9 +168,9 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Array} ancestors */
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Array} ancestors */
|
||||
getAncestors(node: Node): Node[] {
|
||||
$assert(node, 'node cannot be null');
|
||||
return this._getAncestors(this.getParent(node), []);
|
||||
@ -186,10 +186,10 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Array} siblings
|
||||
*/
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Array} siblings
|
||||
*/
|
||||
getSiblings(node: Node): Node[] {
|
||||
$assert(node, 'node cannot be null');
|
||||
if (!$defined(node._parent)) {
|
||||
@ -200,10 +200,10 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Boolean} whether the node has a single path to a single leaf (no branching)
|
||||
*/
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Boolean} whether the node has a single path to a single leaf (no branching)
|
||||
*/
|
||||
hasSinglePathToSingleLeaf(node: Node): boolean {
|
||||
$assert(node, 'node cannot be null');
|
||||
return this._hasSinglePathToSingleLeaf(node);
|
||||
@ -220,27 +220,27 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @return {Boolean} whether the node is the start of a subbranch */
|
||||
* @param node
|
||||
* @return {Boolean} whether the node is the start of a subbranch */
|
||||
isStartOfSubBranch(node: Node): boolean {
|
||||
return this.getSiblings(node).length > 0 && this.getChildren(node).length === 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Boolean} whether the node is a leaf
|
||||
*/
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return {Boolean} whether the node is a leaf
|
||||
*/
|
||||
isLeaf(node: Node): boolean {
|
||||
$assert(node, 'node cannot be null');
|
||||
return this.getChildren(node).length === 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return parent
|
||||
*/
|
||||
* @param node
|
||||
* @throws will throw an error if node is null or undefined
|
||||
* @return parent
|
||||
*/
|
||||
getParent(node: Node): Node {
|
||||
$assert(node, 'node cannot be null');
|
||||
return node._parent;
|
||||
@ -271,8 +271,8 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param canvas
|
||||
*/
|
||||
* @param canvas
|
||||
*/
|
||||
plot(canvas) {
|
||||
const branches = this._rootNodes;
|
||||
for (let i = 0; i < branches.length; i++) {
|
||||
@ -297,9 +297,7 @@ class RootedTreeSet {
|
||||
if (this._rootNodes.includes(node)) {
|
||||
fillColor = '#000';
|
||||
} else {
|
||||
fillColor = node.isFree()
|
||||
? '#abc'
|
||||
: '#c00';
|
||||
fillColor = node.isFree() ? '#abc' : '#c00';
|
||||
}
|
||||
rect.attr('fill', fillColor);
|
||||
|
||||
@ -310,28 +308,20 @@ class RootedTreeSet {
|
||||
const rectSize = { width: rect.attr('width'), height: rect.attr('height') };
|
||||
rect.click(() => {
|
||||
console.log(
|
||||
`[id:${node.getId()
|
||||
}, order:${node.getOrder()
|
||||
}, position:(${rectPosition.x
|
||||
}, ${rectPosition.y
|
||||
}), size:${rectSize.width
|
||||
},${rectSize.height
|
||||
}, freeDisplacement:(${node.getFreeDisplacement().x
|
||||
},${node.getFreeDisplacement().y
|
||||
})]`,
|
||||
`[id:${node.getId()}, order:${node.getOrder()}, position:(${rectPosition.x}, ${
|
||||
rectPosition.y
|
||||
}), size:${rectSize.width},${rectSize.height}, freeDisplacement:(${
|
||||
node.getFreeDisplacement().x
|
||||
},${node.getFreeDisplacement().y})]`,
|
||||
);
|
||||
});
|
||||
text.click(() => {
|
||||
console.log(
|
||||
`[id:${node.getId()
|
||||
}, order:${node.getOrder()
|
||||
}, position:(${rectPosition.x
|
||||
},${rectPosition.y
|
||||
}), size:${rectSize.width
|
||||
}x${rectSize.height
|
||||
}, freeDisplacement:(${node.getFreeDisplacement().x
|
||||
},${node.getFreeDisplacement().y
|
||||
})]`,
|
||||
`[id:${node.getId()}, order:${node.getOrder()}, position:(${rectPosition.x},${
|
||||
rectPosition.y
|
||||
}), size:${rectSize.width}x${rectSize.height}, freeDisplacement:(${
|
||||
node.getFreeDisplacement().x
|
||||
},${node.getFreeDisplacement().y})]`,
|
||||
);
|
||||
});
|
||||
|
||||
@ -342,9 +332,9 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @param position
|
||||
*/
|
||||
* @param node
|
||||
* @param position
|
||||
*/
|
||||
updateBranchPosition(node: Node, position: PositionType): void {
|
||||
const oldPos = node.getPosition();
|
||||
node.setPosition(position);
|
||||
@ -360,10 +350,10 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @param xOffset
|
||||
* @param yOffset
|
||||
*/
|
||||
* @param node
|
||||
* @param xOffset
|
||||
* @param yOffset
|
||||
*/
|
||||
shiftBranchPosition(node: Node, xOffset: number, yOffset: number): void {
|
||||
const position = node.getPosition();
|
||||
node.setPosition({ x: position.x + xOffset, y: position.y + yOffset });
|
||||
@ -376,21 +366,21 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @param yOffset
|
||||
* @return siblings in the offset (vertical) direction, i.e. with lower or higher order
|
||||
*/
|
||||
* @param node
|
||||
* @param yOffset
|
||||
* @return siblings in the offset (vertical) direction, i.e. with lower or higher order
|
||||
*/
|
||||
getSiblingsInVerticalDirection(node: Node, yOffset: number): Node[] {
|
||||
// siblings with lower or higher order
|
||||
// (depending on the direction of the offset and on the same side as their parent)
|
||||
const parent = this.getParent(node);
|
||||
const siblings = this.getSiblings(node).filter((sibling) => {
|
||||
const sameSide = node.getPosition().x > parent.getPosition().x
|
||||
? sibling.getPosition().x > parent.getPosition().x
|
||||
: sibling.getPosition().x < parent.getPosition().x;
|
||||
const orderOK = yOffset < 0
|
||||
? sibling.getOrder() < node.getOrder()
|
||||
: sibling.getOrder() > node.getOrder();
|
||||
const sameSide =
|
||||
node.getPosition().x > parent.getPosition().x
|
||||
? sibling.getPosition().x > parent.getPosition().x
|
||||
: sibling.getPosition().x < parent.getPosition().x;
|
||||
const orderOK =
|
||||
yOffset < 0 ? sibling.getOrder() < node.getOrder() : sibling.getOrder() > node.getOrder();
|
||||
return orderOK && sameSide;
|
||||
});
|
||||
|
||||
@ -402,26 +392,27 @@ class RootedTreeSet {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node
|
||||
* @param yOffset
|
||||
* @return branches of the root node on the same side as the given node's, in the given
|
||||
* vertical direction
|
||||
*/
|
||||
* @param node
|
||||
* @param yOffset
|
||||
* @return branches of the root node on the same side as the given node's, in the given
|
||||
* vertical direction
|
||||
*/
|
||||
getBranchesInVerticalDirection(node: Node, yOffset: number): Node[] {
|
||||
// direct descendants of the root that do not contain the node and are on the same side
|
||||
// and on the direction of the offset
|
||||
const rootNode = this.getRootNode(node);
|
||||
const branches = this.getChildren(rootNode)
|
||||
.filter(((child) => this._find(node.getId(), child)));
|
||||
const branches = this.getChildren(rootNode).filter((child) => this._find(node.getId(), child));
|
||||
|
||||
const branch = branches[0];
|
||||
const result = this.getSiblings(branch).filter((sibling) => {
|
||||
const sameSide = node.getPosition().x > rootNode.getPosition().x
|
||||
? sibling.getPosition().x > rootNode.getPosition().x
|
||||
: sibling.getPosition().x < rootNode.getPosition().x;
|
||||
const sameDirection = yOffset < 0
|
||||
? sibling.getOrder() < branch.getOrder()
|
||||
: sibling.getOrder() > branch.getOrder();
|
||||
const sameSide =
|
||||
node.getPosition().x > rootNode.getPosition().x
|
||||
? sibling.getPosition().x > rootNode.getPosition().x
|
||||
: sibling.getPosition().x < rootNode.getPosition().x;
|
||||
const sameDirection =
|
||||
yOffset < 0
|
||||
? sibling.getOrder() < branch.getOrder()
|
||||
: sibling.getOrder() > branch.getOrder();
|
||||
return sameSide && sameDirection;
|
||||
}, this);
|
||||
|
||||
|
@ -28,11 +28,11 @@ class FeatureModel {
|
||||
private _attributes;
|
||||
|
||||
/**
|
||||
* @constructs
|
||||
* @param type
|
||||
* @throws will throw an exception if type is null or undefined
|
||||
* assigns a unique id and the given type to the new model
|
||||
*/
|
||||
* @constructs
|
||||
* @param type
|
||||
* @throws will throw an exception if type is null or undefined
|
||||
* assigns a unique id and the given type to the new model
|
||||
*/
|
||||
constructor(type: FeatureType) {
|
||||
$assert(type, 'type can not be null');
|
||||
this._id = FeatureModel._nextUUID();
|
||||
|
@ -6,35 +6,38 @@ import FeatureModel from './FeatureModel';
|
||||
import FeatureType from './FeatureType';
|
||||
|
||||
interface NodeById {
|
||||
id: FeatureType,
|
||||
id: FeatureType;
|
||||
model: typeof FeatureModel;
|
||||
}
|
||||
|
||||
class FeatureModelFactory {
|
||||
static modelById: Array<NodeById> = [{
|
||||
id: 'icon',
|
||||
model: IconModel,
|
||||
}, {
|
||||
id: 'link',
|
||||
model: LinkModel,
|
||||
}, {
|
||||
id: 'note',
|
||||
model: NoteModel,
|
||||
}];
|
||||
static modelById: Array<NodeById> = [
|
||||
{
|
||||
id: 'icon',
|
||||
model: IconModel,
|
||||
},
|
||||
{
|
||||
id: 'link',
|
||||
model: LinkModel,
|
||||
},
|
||||
{
|
||||
id: 'note',
|
||||
model: NoteModel,
|
||||
},
|
||||
];
|
||||
|
||||
static createModel(type: FeatureType, attributes): FeatureModel {
|
||||
$assert(type, 'type can not be null');
|
||||
$assert(attributes, 'attributes can not be null');
|
||||
|
||||
const { model: Model } = FeatureModelFactory.modelById
|
||||
.filter((elem) => elem.id === type)[0];
|
||||
const { model: Model } = FeatureModelFactory.modelById.filter((elem) => elem.id === type)[0];
|
||||
return new Model(attributes);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param id the feature metadata id
|
||||
* @return {Boolean} returns true if the given id is contained in the metadata array
|
||||
*/
|
||||
* @param id the feature metadata id
|
||||
* @return {Boolean} returns true if the given id is contained in the metadata array
|
||||
*/
|
||||
static isSupported(type: string): boolean {
|
||||
return FeatureModelFactory.modelById.some((elem) => elem.id === type);
|
||||
}
|
||||
|
@ -30,7 +30,7 @@ abstract class IMindmap {
|
||||
|
||||
abstract setDescription(value: string): void;
|
||||
|
||||
abstract getId(): string
|
||||
abstract getId(): string;
|
||||
|
||||
abstract setId(id: string): void;
|
||||
|
||||
@ -58,10 +58,10 @@ abstract class IMindmap {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param child
|
||||
* @throws will throw an error if child is null or undefined
|
||||
* @throws will throw an error if child's parent cannot be found
|
||||
*/
|
||||
* @param child
|
||||
* @throws will throw an error if child is null or undefined
|
||||
* @throws will throw an error if child's parent cannot be found
|
||||
*/
|
||||
disconnect(child: INodeModel): void {
|
||||
const parent = child.getParent();
|
||||
$assert(child, 'Child can not be null.');
|
||||
@ -73,7 +73,7 @@ abstract class IMindmap {
|
||||
|
||||
abstract hasAlreadyAdded(node): boolean;
|
||||
|
||||
abstract createNode(type: NodeType, id: number)
|
||||
abstract createNode(type: NodeType, id: number);
|
||||
|
||||
abstract createRelationship(fromNodeId: number, toNodeId: number): void;
|
||||
|
||||
@ -81,7 +81,7 @@ abstract class IMindmap {
|
||||
|
||||
abstract deleteRelationship(relationship: RelationshipModel): void;
|
||||
|
||||
inspect():string {
|
||||
inspect(): string {
|
||||
let result = '';
|
||||
result = '{ ';
|
||||
|
||||
@ -102,7 +102,7 @@ abstract class IMindmap {
|
||||
return result;
|
||||
}
|
||||
|
||||
copyTo(target:IMindmap) {
|
||||
copyTo(target: IMindmap) {
|
||||
const version = this.getVersion();
|
||||
target.setVersion(version);
|
||||
|
||||
|
@ -24,7 +24,8 @@ import Mindmap from './Mindmap';
|
||||
export type NodeModelType = 'CentralTopic' | 'MainTopic';
|
||||
|
||||
// regex taken from https://stackoverflow.com/a/34763398/58128
|
||||
const parseJsObject = (str: string) => JSON.parse(str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '));
|
||||
const parseJsObject = (str: string) =>
|
||||
JSON.parse(str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '));
|
||||
|
||||
abstract class INodeModel {
|
||||
static MAIN_TOPIC_TO_MAIN_TOPIC_DISTANCE = 220;
|
||||
@ -90,7 +91,7 @@ abstract class INodeModel {
|
||||
this.putProperty('imageSize', `{width:${width},height:${height}}`);
|
||||
}
|
||||
|
||||
getImageSize(): { width: number, height: number } {
|
||||
getImageSize(): { width: number; height: number } {
|
||||
const value = this.getProperty('imageSize') as string;
|
||||
let result;
|
||||
if (value != null) {
|
||||
@ -120,9 +121,9 @@ abstract class INodeModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* lets the mindmap handle the disconnect node operation
|
||||
* @see mindplot.model.IMindmap.disconnect
|
||||
*/
|
||||
* lets the mindmap handle the disconnect node operation
|
||||
* @see mindplot.model.IMindmap.disconnect
|
||||
*/
|
||||
disconnect(): void {
|
||||
const mindmap = this.getMindmap();
|
||||
mindmap.disconnect(this);
|
||||
@ -233,10 +234,10 @@ abstract class INodeModel {
|
||||
abstract append(node): void;
|
||||
|
||||
/**
|
||||
* lets the mindmap handle the connect node operation
|
||||
* @throws will throw an error if parent is null or undefined
|
||||
* @see mindplot.model.IMindmap.connect
|
||||
*/
|
||||
* lets the mindmap handle the connect node operation
|
||||
* @throws will throw an error if parent is null or undefined
|
||||
* @see mindplot.model.IMindmap.connect
|
||||
*/
|
||||
connectTo(parent: INodeModel) {
|
||||
$assert(parent, 'parent can not be null');
|
||||
const mindmap = this.getMindmap();
|
||||
@ -244,9 +245,9 @@ abstract class INodeModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param target
|
||||
* @return target
|
||||
*/
|
||||
* @param target
|
||||
* @return target
|
||||
*/
|
||||
copyTo(target: INodeModel): INodeModel {
|
||||
const source = this;
|
||||
// Copy properties ...
|
||||
@ -270,9 +271,9 @@ abstract class INodeModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* lets parent handle the delete node operation, or, if none defined, calls the mindmap to
|
||||
* remove the respective branch
|
||||
*/
|
||||
* lets parent handle the delete node operation, or, if none defined, calls the mindmap to
|
||||
* remove the respective branch
|
||||
*/
|
||||
deleteNode(): void {
|
||||
const mindmap = this.getMindmap();
|
||||
|
||||
|
@ -28,7 +28,7 @@ class IconModel extends FeatureModel {
|
||||
return this.getAttribute('id') as string;
|
||||
}
|
||||
|
||||
setIconType(iconType: string):void {
|
||||
setIconType(iconType: string): void {
|
||||
$assert(iconType, 'iconType id can not be null');
|
||||
this.setAttribute('id', iconType);
|
||||
}
|
||||
|
@ -41,16 +41,20 @@ class LinkModel extends FeatureModel {
|
||||
// url format is already checked in LinkEditor.checkUrl
|
||||
static _fixUrl(url: string): string {
|
||||
let result = url;
|
||||
if (!result.includes('http://') && !result.includes('https://') && !result.includes('mailto://')) {
|
||||
if (
|
||||
!result.includes('http://') &&
|
||||
!result.includes('https://') &&
|
||||
!result.includes('mailto://')
|
||||
) {
|
||||
result = `http://${result}`;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} urlType the url type, either 'mail' or 'url'
|
||||
* @throws will throw an error if urlType is null or undefined
|
||||
*/
|
||||
* @param {String} urlType the url type, either 'mail' or 'url'
|
||||
* @throws will throw an error if urlType is null or undefined
|
||||
*/
|
||||
setUrlType(urlType) {
|
||||
$assert(urlType, 'urlType can not be null');
|
||||
this.setAttribute('urlType', urlType);
|
||||
|
@ -75,10 +75,10 @@ class Mindmap extends IMindmap {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {mindplot.model.NodeModel} nodeModel
|
||||
* @throws will throw an error if nodeModel is null, undefined or not a node model object
|
||||
* @throws will throw an error if
|
||||
*/
|
||||
* @param {mindplot.model.NodeModel} nodeModel
|
||||
* @throws will throw an error if nodeModel is null, undefined or not a node model object
|
||||
* @throws will throw an error if
|
||||
*/
|
||||
addBranch(nodeModel: INodeModel): void {
|
||||
$assert(nodeModel && nodeModel.isNodeModel(), 'Add node must be invoked with model objects');
|
||||
const branches = this.getBranches();
|
||||
@ -93,14 +93,14 @@ class Mindmap extends IMindmap {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param nodeModel
|
||||
*/
|
||||
* @param nodeModel
|
||||
*/
|
||||
removeBranch(nodeModel: INodeModel): void {
|
||||
$assert(nodeModel && nodeModel.isNodeModel(), 'Remove node must be invoked with model objects');
|
||||
this._branches = this._branches.filter((b) => b !== nodeModel);
|
||||
}
|
||||
|
||||
getBranches():NodeModel[] {
|
||||
getBranches(): NodeModel[] {
|
||||
return this._branches;
|
||||
}
|
||||
|
||||
@ -122,7 +122,7 @@ class Mindmap extends IMindmap {
|
||||
return result;
|
||||
}
|
||||
|
||||
createNode(type: NodeModelType = 'MainTopic', id?: number):NodeModel {
|
||||
createNode(type: NodeModelType = 'MainTopic', id?: number): NodeModel {
|
||||
return new NodeModel(type, this, id);
|
||||
}
|
||||
|
||||
@ -141,8 +141,8 @@ class Mindmap extends IMindmap {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param relationship
|
||||
*/
|
||||
* @param relationship
|
||||
*/
|
||||
deleteRelationship(relationship: RelationshipModel) {
|
||||
this._relationships = this._relationships.filter((r) => r !== relationship);
|
||||
}
|
||||
|
@ -49,18 +49,18 @@ class NodeModel extends INodeModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param type
|
||||
* @param attributes
|
||||
* @return {mindplot.model.FeatureModel} the created feature model
|
||||
*/
|
||||
* @param type
|
||||
* @param attributes
|
||||
* @return {mindplot.model.FeatureModel} the created feature model
|
||||
*/
|
||||
createFeature(type: FeatureType, attributes): FeatureModel {
|
||||
return FeatureModelFactory.createModel(type, attributes);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param feature
|
||||
* @throws will throw an error if feature is null or undefined
|
||||
*/
|
||||
* @param feature
|
||||
* @throws will throw an error if feature is null or undefined
|
||||
*/
|
||||
addFeature(feature: FeatureModel) {
|
||||
$assert(feature, 'feature can not be null');
|
||||
this._features.push(feature);
|
||||
@ -78,20 +78,20 @@ class NodeModel extends INodeModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} type the feature type, e.g. icon or link
|
||||
* @throws will throw an error if type is null or undefined
|
||||
*/
|
||||
* @param {String} type the feature type, e.g. icon or link
|
||||
* @throws will throw an error if type is null or undefined
|
||||
*/
|
||||
findFeatureByType(type: string): FeatureModel[] {
|
||||
$assert(type, 'type can not be null');
|
||||
return this._features.filter((feature) => feature.getType() === type);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} id
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if feature could not be found
|
||||
* @return the feature with the given id
|
||||
*/
|
||||
* @param {String} id
|
||||
* @throws will throw an error if id is null or undefined
|
||||
* @throws will throw an error if feature could not be found
|
||||
* @return the feature with the given id
|
||||
*/
|
||||
findFeatureById(id: number): FeatureModel {
|
||||
$assert($defined(id), 'id can not be null');
|
||||
const result = this._features.filter((feature) => feature.getId() === id);
|
||||
@ -104,10 +104,10 @@ class NodeModel extends INodeModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* @param key
|
||||
* @param value
|
||||
* @throws will throw an error if key is null or undefined
|
||||
*/
|
||||
* @param key
|
||||
* @param value
|
||||
* @throws will throw an error if key is null or undefined
|
||||
*/
|
||||
putProperty(key: string, value: string | number | boolean) {
|
||||
$defined(key, 'key can not be null');
|
||||
this._properties[key] = value;
|
||||
|
@ -108,8 +108,8 @@ class RelationshipModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* @return a clone of the relationship model
|
||||
*/
|
||||
* @return a clone of the relationship model
|
||||
*/
|
||||
clone() {
|
||||
const result = new RelationshipModel(this._sourceTargetId, this._targetTopicId);
|
||||
result._id = this._id;
|
||||
@ -122,14 +122,10 @@ class RelationshipModel {
|
||||
}
|
||||
|
||||
/**
|
||||
* @return {String} textual information about the relationship's source and target node
|
||||
*/
|
||||
* @return {String} textual information about the relationship's source and target node
|
||||
*/
|
||||
inspect(): string {
|
||||
return (
|
||||
`(fromNode:${this.getFromNode()
|
||||
} , toNode: ${this.getToNode()
|
||||
})`
|
||||
);
|
||||
return `(fromNode:${this.getFromNode()} , toNode: ${this.getToNode()})`;
|
||||
}
|
||||
|
||||
static _nextUUID() {
|
||||
|
@ -83,7 +83,7 @@ class Pela2TangoMigrator implements XMLMindmapSerializer {
|
||||
}
|
||||
}
|
||||
|
||||
private _fixNodePosition(node: NodeModel, parentPosition: { x: number, y: number }): void {
|
||||
private _fixNodePosition(node: NodeModel, parentPosition: { x: number; y: number }): void {
|
||||
// Position was not required in previous versions. Try to synthesize one .
|
||||
let position = node.getPosition();
|
||||
if (!position) {
|
||||
|
@ -19,7 +19,7 @@
|
||||
import Mindmap from '../model/Mindmap';
|
||||
|
||||
interface XMLMindmapSerializer {
|
||||
toXML(mindmap: Mindmap): Document;
|
||||
loadFromDom(dom: Document, mapId: string): Mindmap;
|
||||
toXML(mindmap: Mindmap): Document;
|
||||
loadFromDom(dom: Document, mapId: string): Mindmap;
|
||||
}
|
||||
export default XMLMindmapSerializer;
|
||||
|
@ -14,9 +14,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
$defined, $assert, createDocument,
|
||||
} from '@wisemapping/core-js';
|
||||
import { $defined, $assert, createDocument } from '@wisemapping/core-js';
|
||||
import ModelCodeName from './ModelCodeName';
|
||||
import Mindmap from '../model/Mindmap';
|
||||
import FeatureModelFactory from '../model/FeatureModelFactory';
|
||||
@ -99,11 +97,11 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
|
||||
font += `${fontStyle || ''};`;
|
||||
|
||||
if (
|
||||
$defined(fontFamily)
|
||||
|| $defined(fontSize)
|
||||
|| $defined(fontColor)
|
||||
|| $defined(fontWeight)
|
||||
|| $defined(fontStyle)
|
||||
$defined(fontFamily) ||
|
||||
$defined(fontSize) ||
|
||||
$defined(fontColor) ||
|
||||
$defined(fontWeight) ||
|
||||
$defined(fontStyle)
|
||||
) {
|
||||
parentTopic.setAttribute('fontStyle', font);
|
||||
}
|
||||
@ -180,7 +178,8 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
|
||||
// Is a wisemap?.
|
||||
$assert(
|
||||
documentElement.tagName === XMLSerializerBeta.MAP_ROOT_NODE,
|
||||
`This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML
|
||||
`This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${
|
||||
dom.innerHTML
|
||||
}, XML:,${new XMLSerializer().serializeToString(dom)}`,
|
||||
);
|
||||
|
||||
@ -202,9 +201,7 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
|
||||
}
|
||||
|
||||
_deserializeNode(domElem, mindmap) {
|
||||
const type = domElem.getAttribute('central') != null
|
||||
? 'CentralTopic'
|
||||
: 'MainTopic';
|
||||
const type = domElem.getAttribute('central') != null ? 'CentralTopic' : 'MainTopic';
|
||||
const topic = mindmap.createNode(type);
|
||||
|
||||
// Load attributes...
|
||||
@ -275,10 +272,10 @@ class XMLSerializerBeta implements XMLMindmapSerializer {
|
||||
const child = children[i];
|
||||
if (child.nodeType === 1) {
|
||||
$assert(
|
||||
child.tagName === 'topic'
|
||||
|| child.tagName === 'icon'
|
||||
|| child.tagName === 'link'
|
||||
|| child.tagName === 'note',
|
||||
child.tagName === 'topic' ||
|
||||
child.tagName === 'icon' ||
|
||||
child.tagName === 'link' ||
|
||||
child.tagName === 'note',
|
||||
`Illegal node type:${child.tagName}`,
|
||||
);
|
||||
if (child.tagName === 'topic') {
|
||||
|
@ -24,7 +24,7 @@ import XMLSerializerTango from './XMLSerializerTango';
|
||||
import Mindmap from '../model/Mindmap';
|
||||
import XMLMindmapSerializer from './XMLMindmapSerializer';
|
||||
|
||||
const codeToSerializer: { codeName: string, serializer, migrator }[] = [
|
||||
const codeToSerializer: { codeName: string; serializer; migrator }[] = [
|
||||
{
|
||||
codeName: ModelCodeName.BETA,
|
||||
serializer: XMLSerializerBeta,
|
||||
@ -51,8 +51,7 @@ class XMLSerializerFactory {
|
||||
* mindplot.persistence.XMLSerializer_Tango} serializer corresponding to the mindmap's version
|
||||
*/
|
||||
static createInstanceFromMindmap(mindmap: Mindmap) {
|
||||
return XMLSerializerFactory
|
||||
.getSerializer(mindmap.getVersion());
|
||||
return XMLSerializerFactory.getSerializer(mindmap.getVersion());
|
||||
}
|
||||
|
||||
/**
|
||||
@ -83,7 +82,7 @@ class XMLSerializerFactory {
|
||||
if (!found) {
|
||||
found = codeToSerializer[i].codeName === version;
|
||||
// eslint-disable-next-line new-cap
|
||||
if (found) result = new (codeToSerializer[i].serializer)();
|
||||
if (found) result = new codeToSerializer[i].serializer();
|
||||
} else {
|
||||
const { migrator } = codeToSerializer[i];
|
||||
// eslint-disable-next-line new-cap
|
||||
|
@ -60,8 +60,8 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
const relationships = mindmap.getRelationships();
|
||||
relationships.forEach((relationship) => {
|
||||
if (
|
||||
mindmap.findNodeById(relationship.getFromNode()) !== null
|
||||
&& mindmap.findNodeById(relationship.getToNode()) !== null
|
||||
mindmap.findNodeById(relationship.getFromNode()) !== null &&
|
||||
mindmap.findNodeById(relationship.getToNode()) !== null
|
||||
) {
|
||||
// Isolated relationships are not persisted ....
|
||||
const relationDom = XMLSerializerTango._relationshipToXML(document, relationship);
|
||||
@ -99,14 +99,15 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
|
||||
if (shape === TopicShape.IMAGE) {
|
||||
const size = topic.getImageSize();
|
||||
parentTopic.setAttribute(
|
||||
'image',
|
||||
`${size.width},${size.height}:${topic.getImageUrl()}`,
|
||||
);
|
||||
parentTopic.setAttribute('image', `${size.width},${size.height}:${topic.getImageUrl()}`);
|
||||
}
|
||||
}
|
||||
|
||||
if ((topic.areChildrenShrunken() && topic.getChildren().length > 0) && topic.getType() !== 'CentralTopic') {
|
||||
if (
|
||||
topic.areChildrenShrunken() &&
|
||||
topic.getChildren().length > 0 &&
|
||||
topic.getType() !== 'CentralTopic'
|
||||
) {
|
||||
parentTopic.setAttribute('shrink', 'true');
|
||||
}
|
||||
|
||||
@ -132,11 +133,11 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
font += `${fontStyle || ''};`;
|
||||
|
||||
if (
|
||||
$defined(fontFamily)
|
||||
|| $defined(fontSize)
|
||||
|| $defined(fontColor)
|
||||
|| $defined(fontWeight)
|
||||
|| $defined(fontStyle)
|
||||
$defined(fontFamily) ||
|
||||
$defined(fontSize) ||
|
||||
$defined(fontColor) ||
|
||||
$defined(fontWeight) ||
|
||||
$defined(fontStyle)
|
||||
) {
|
||||
parentTopic.setAttribute('fontStyle', font);
|
||||
}
|
||||
@ -208,10 +209,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) {
|
||||
if ($defined(relationship.getSrcCtrlPoint())) {
|
||||
const srcPoint = relationship.getSrcCtrlPoint();
|
||||
result.setAttribute(
|
||||
'srcCtrlPoint',
|
||||
`${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`,
|
||||
);
|
||||
result.setAttribute('srcCtrlPoint', `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`);
|
||||
}
|
||||
if ($defined(relationship.getDestCtrlPoint())) {
|
||||
const destPoint = relationship.getDestCtrlPoint();
|
||||
@ -246,9 +244,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
// Add all the topics nodes ...
|
||||
const childNodes = Array.from(rootElem.childNodes);
|
||||
const topicsNodes = childNodes
|
||||
.filter(
|
||||
(child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic',
|
||||
)
|
||||
.filter((child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic')
|
||||
.map((c) => c as Element);
|
||||
topicsNodes.forEach((child) => {
|
||||
const topic = this._deserializeNode(child, mindmap);
|
||||
@ -488,16 +484,16 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
}
|
||||
|
||||
/**
|
||||
* This method ensures that the output String has only
|
||||
* valid XML unicode characters as specified by the
|
||||
* XML 1.0 standard. For reference, please see
|
||||
* <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
|
||||
* standard</a>. This method will return an empty
|
||||
* String if the input is null or empty.
|
||||
*
|
||||
* @param in The String whose non-valid characters we want to remove.
|
||||
* @return The in String, stripped of non-valid characters.
|
||||
*/
|
||||
* This method ensures that the output String has only
|
||||
* valid XML unicode characters as specified by the
|
||||
* XML 1.0 standard. For reference, please see
|
||||
* <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
|
||||
* standard</a>. This method will return an empty
|
||||
* String if the input is null or empty.
|
||||
*
|
||||
* @param in The String whose non-valid characters we want to remove.
|
||||
* @return The in String, stripped of non-valid characters.
|
||||
*/
|
||||
protected _rmXmlInv(str: string) {
|
||||
if (str == null || str === undefined) return null;
|
||||
|
||||
@ -505,12 +501,12 @@ class XMLSerializerTango implements XMLMindmapSerializer {
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const c = str.charCodeAt(i);
|
||||
if (
|
||||
c === 0x9
|
||||
|| c === 0xa
|
||||
|| c === 0xd
|
||||
|| (c >= 0x20 && c <= 0xd7ff)
|
||||
|| (c >= 0xe000 && c <= 0xfffd)
|
||||
|| (c >= 0x10000 && c <= 0x10ffff)
|
||||
c === 0x9 ||
|
||||
c === 0xa ||
|
||||
c === 0xd ||
|
||||
(c >= 0x20 && c <= 0xd7ff) ||
|
||||
(c >= 0xe000 && c <= 0xfffd) ||
|
||||
(c >= 0x10000 && c <= 0x10ffff)
|
||||
) {
|
||||
result += str.charAt(i);
|
||||
}
|
||||
|
@ -73,7 +73,7 @@ class FloatingTip extends Events {
|
||||
|
||||
if (this.addEvent) {
|
||||
Object.keys(options).forEach((option) => {
|
||||
if (options[option] instanceof Function && (/^on[A-Z]/).test(option)) {
|
||||
if (options[option] instanceof Function && /^on[A-Z]/.test(option)) {
|
||||
this.addEvent(option, options[option]);
|
||||
delete options[option];
|
||||
}
|
||||
|
@ -49,7 +49,10 @@ export const parseXMLString = (xmlStr: string, mimeType: DOMParserSupportedType)
|
||||
return xmlDoc;
|
||||
};
|
||||
|
||||
export const parseXMLFile = (filePath: fs.PathOrFileDescriptor, mimeType: DOMParserSupportedType) => {
|
||||
export const parseXMLFile = (
|
||||
filePath: fs.PathOrFileDescriptor,
|
||||
mimeType: DOMParserSupportedType,
|
||||
) => {
|
||||
const stream = fs.readFileSync(filePath, { encoding: 'utf-8' });
|
||||
|
||||
let content = stream.toString();
|
||||
|
@ -7,9 +7,12 @@ import { parseXMLFile, setupBlob, exporterAssert } from './Helper';
|
||||
setupBlob();
|
||||
|
||||
describe('SVG export test execution', () => {
|
||||
test.each(fs.readdirSync(path.resolve(__dirname, './input/'))
|
||||
.filter((f) => f.endsWith('.wxml'))
|
||||
.map((filename: string) => filename.split('.')[0]))('Exporting %p suite', async (testName: string) => {
|
||||
test.each(
|
||||
fs
|
||||
.readdirSync(path.resolve(__dirname, './input/'))
|
||||
.filter((f) => f.endsWith('.wxml'))
|
||||
.map((filename: string) => filename.split('.')[0]),
|
||||
)('Exporting %p suite', async (testName: string) => {
|
||||
// Load SVG ...
|
||||
const svgPath = path.resolve(__dirname, `./input/${testName}.svg`);
|
||||
expect(fs.existsSync(svgPath)).toEqual(true);
|
||||
|
@ -15,7 +15,10 @@ export const parseXMLString = (xmlStr: string, mimeType: DOMParserSupportedType)
|
||||
return xmlDoc;
|
||||
};
|
||||
|
||||
export const parseXMLFile = (filePath: fs.PathOrFileDescriptor, mimeType: DOMParserSupportedType) => {
|
||||
export const parseXMLFile = (
|
||||
filePath: fs.PathOrFileDescriptor,
|
||||
mimeType: DOMParserSupportedType,
|
||||
) => {
|
||||
const stream = fs.readFileSync(filePath, { encoding: 'utf-8' });
|
||||
|
||||
const content = stream.toString();
|
||||
|
@ -1,21 +1,21 @@
|
||||
import MapsPage from '../pageObject/MapsPage';
|
||||
|
||||
context('Maps Page', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/c/maps');
|
||||
});
|
||||
beforeEach(() => {
|
||||
cy.visit('/c/maps');
|
||||
});
|
||||
|
||||
it('should load the maps page', () => {
|
||||
MapsPage.isLoaded();
|
||||
});
|
||||
it('should load the maps page', () => {
|
||||
MapsPage.isLoaded();
|
||||
});
|
||||
|
||||
it('should open the create dialog', () => {
|
||||
MapsPage.create();
|
||||
MapsPage.isCreateDialogVisible();
|
||||
cy.matchImageSnapshot('maps-create');
|
||||
});
|
||||
it('should open the create dialog', () => {
|
||||
MapsPage.create();
|
||||
MapsPage.isCreateDialogVisible();
|
||||
cy.matchImageSnapshot('maps-create');
|
||||
});
|
||||
|
||||
it('should match the snapshot', () => {
|
||||
cy.matchImageSnapshot('maps');
|
||||
});
|
||||
it('should match the snapshot', () => {
|
||||
cy.matchImageSnapshot('maps');
|
||||
});
|
||||
});
|
||||
|
@ -1,14 +1,14 @@
|
||||
export default class MapsPage {
|
||||
static isLoaded() {
|
||||
return cy.findByTestId('create');
|
||||
}
|
||||
static isLoaded() {
|
||||
return cy.findByTestId('create');
|
||||
}
|
||||
|
||||
static create() {
|
||||
return cy.findByTestId('create').click();
|
||||
}
|
||||
static create() {
|
||||
return cy.findByTestId('create').click();
|
||||
}
|
||||
|
||||
static isCreateDialogVisible() {
|
||||
//TODO move to findByText when the double create dialog issue is solved
|
||||
return cy.findAllByText('Create a new mindmap');
|
||||
}
|
||||
static isCreateDialogVisible() {
|
||||
//TODO move to findByText when the double create dialog issue is solved
|
||||
return cy.findAllByText('Create a new mindmap');
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
addMatchImageSnapshotPlugin(on, config);
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
addMatchImageSnapshotPlugin(on, config);
|
||||
};
|
||||
|
@ -4,16 +4,16 @@ import '@testing-library/cypress/add-commands';
|
||||
// make matchImageSnapshot() call the real implementation only if CYPRESS_imageSnaphots is set
|
||||
// otherwise it calls a noop
|
||||
if (Cypress.env('imageSnaphots')) {
|
||||
addMatchImageSnapshotCommand({
|
||||
failureThreshold: 0.001,
|
||||
failureThresholdType: 'percent',
|
||||
});
|
||||
addMatchImageSnapshotCommand({
|
||||
failureThreshold: 0.001,
|
||||
failureThresholdType: 'percent',
|
||||
});
|
||||
} else {
|
||||
Cypress.Commands.add(
|
||||
'matchImageSnapshot',
|
||||
{
|
||||
prevSubject: ['optional', 'element', 'window', 'document'],
|
||||
},
|
||||
() => Promise.resolve()
|
||||
);
|
||||
Cypress.Commands.add(
|
||||
'matchImageSnapshot',
|
||||
{
|
||||
prevSubject: ['optional', 'element', 'window', 'document'],
|
||||
},
|
||||
() => Promise.resolve(),
|
||||
);
|
||||
}
|
||||
|
12
packages/webapp/src/@types/index.d.ts
vendored
12
packages/webapp/src/@types/index.d.ts
vendored
@ -2,10 +2,10 @@ declare module '*.png';
|
||||
declare module '*.svg';
|
||||
declare module '*.wxml';
|
||||
declare global {
|
||||
const isAuth: boolean;
|
||||
const mapId: number;
|
||||
const userOptions: { zoom: string | number } | null;
|
||||
const mindmapLocked: boolean;
|
||||
const mindmapLockedMsg: string;
|
||||
const mapTitle: string;
|
||||
const isAuth: boolean;
|
||||
const mapId: number;
|
||||
const userOptions: { zoom: string | number } | null;
|
||||
const mindmapLocked: boolean;
|
||||
const mindmapLockedMsg: string;
|
||||
const mapTitle: string;
|
||||
}
|
||||
|
12
packages/webapp/src/@types/typings.d.ts
vendored
12
packages/webapp/src/@types/typings.d.ts
vendored
@ -10,10 +10,10 @@ type DateType = string | number | Date | Dayjs;
|
||||
|
||||
// @Todo: review if there is a better support for this.
|
||||
declare module 'dayjs' {
|
||||
interface Dayjs {
|
||||
fromNow(withoutSuffix?: boolean): string;
|
||||
from(compared: DateType, withoutSuffix?: boolean): string;
|
||||
toNow(withoutSuffix?: boolean): string;
|
||||
to(compared: DateType, withoutSuffix?: boolean): string;
|
||||
}
|
||||
interface Dayjs {
|
||||
fromNow(withoutSuffix?: boolean): string;
|
||||
from(compared: DateType, withoutSuffix?: boolean): string;
|
||||
toNow(withoutSuffix?: boolean): string;
|
||||
to(compared: DateType, withoutSuffix?: boolean): string;
|
||||
}
|
||||
}
|
||||
|
@ -1,78 +1,75 @@
|
||||
import Client from "../client";
|
||||
import CacheDecoratorClient from "../client/cache-decorator-client";
|
||||
import MockClient from "../client/mock-client";
|
||||
import RestClient from "../client/rest-client";
|
||||
|
||||
import Client from '../client';
|
||||
import CacheDecoratorClient from '../client/cache-decorator-client';
|
||||
import MockClient from '../client/mock-client';
|
||||
import RestClient from '../client/rest-client';
|
||||
|
||||
interface Config {
|
||||
apiBaseUrl: string;
|
||||
analyticsAccount?: string;
|
||||
recaptcha2Enabled: boolean;
|
||||
recaptcha2SiteKey?: string;
|
||||
clientType: 'mock' | 'rest';
|
||||
apiBaseUrl: string;
|
||||
analyticsAccount?: string;
|
||||
recaptcha2Enabled: boolean;
|
||||
recaptcha2SiteKey?: string;
|
||||
clientType: 'mock' | 'rest';
|
||||
}
|
||||
|
||||
class _AppConfig {
|
||||
private defaultInstance: Config = {
|
||||
apiBaseUrl: `${window.location.protocol}//${window.location.hostname}:${window.location.port}`,
|
||||
clientType: 'mock',
|
||||
recaptcha2Enabled: true,
|
||||
recaptcha2SiteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
|
||||
};
|
||||
|
||||
private defaultInstance: Config = {
|
||||
apiBaseUrl: `${window.location.protocol}//${window.location.hostname}:${window.location.port}`,
|
||||
clientType: 'mock',
|
||||
recaptcha2Enabled: true,
|
||||
recaptcha2SiteKey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
|
||||
isDevelopEnv(): boolean {
|
||||
const config = this.getInstance();
|
||||
return config.clientType === 'mock';
|
||||
}
|
||||
|
||||
private getInstance(): Config {
|
||||
// Config can be inserted in the html page to define the global properties ...
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let result = (window as any).serverconfig;
|
||||
if (!result) {
|
||||
result = this.defaultInstance;
|
||||
}
|
||||
|
||||
isDevelopEnv(): boolean {
|
||||
const config = this.getInstance();
|
||||
return config.clientType === 'mock';
|
||||
return result;
|
||||
}
|
||||
|
||||
isRecaptcha2Enabled(): boolean {
|
||||
const config = this.getInstance();
|
||||
return config.recaptcha2Enabled;
|
||||
}
|
||||
|
||||
getRecaptcha2SiteKey(): string | undefined {
|
||||
const config = this.getInstance();
|
||||
return config.recaptcha2SiteKey;
|
||||
}
|
||||
|
||||
getGoogleAnalyticsAccount(): string | undefined {
|
||||
const config = this.getInstance();
|
||||
return config.analyticsAccount;
|
||||
}
|
||||
|
||||
buildClient(): Client {
|
||||
const config = this.getInstance();
|
||||
let result: Client;
|
||||
if (config.clientType == 'rest') {
|
||||
result = new RestClient(this.getBaseUrl());
|
||||
console.log('Service using rest client. ' + JSON.stringify(config));
|
||||
} else {
|
||||
console.log('Warning:Service using mockservice client');
|
||||
result = new MockClient();
|
||||
}
|
||||
|
||||
private getInstance(): Config {
|
||||
// Config can be inserted in the html page to define the global properties ...
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let result = (window as any).serverconfig;
|
||||
if (!result) {
|
||||
result = this.defaultInstance;
|
||||
}
|
||||
// Wrap with a cache decorator ...
|
||||
return new CacheDecoratorClient(result);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
isRecaptcha2Enabled(): boolean {
|
||||
const config = this.getInstance();
|
||||
return config.recaptcha2Enabled;
|
||||
}
|
||||
|
||||
getRecaptcha2SiteKey(): string | undefined {
|
||||
const config = this.getInstance();
|
||||
return config.recaptcha2SiteKey;
|
||||
}
|
||||
|
||||
getGoogleAnalyticsAccount(): string | undefined {
|
||||
const config = this.getInstance();
|
||||
return config.analyticsAccount;
|
||||
}
|
||||
|
||||
buildClient(): Client {
|
||||
|
||||
const config = this.getInstance();
|
||||
let result: Client;
|
||||
if (config.clientType == 'rest') {
|
||||
result = new RestClient(this.getBaseUrl());
|
||||
console.log('Service using rest client. ' + JSON.stringify(config));
|
||||
} else {
|
||||
console.log('Warning:Service using mockservice client');
|
||||
result = new MockClient();
|
||||
}
|
||||
|
||||
// Wrap with a cache decorator ...
|
||||
return new CacheDecoratorClient(result);
|
||||
}
|
||||
|
||||
getBaseUrl(): string {
|
||||
const config = this.getInstance();
|
||||
return config.apiBaseUrl;
|
||||
}
|
||||
getBaseUrl(): string {
|
||||
const config = this.getInstance();
|
||||
return config.apiBaseUrl;
|
||||
}
|
||||
}
|
||||
const AppConfig = new _AppConfig();
|
||||
|
||||
export default AppConfig;
|
||||
export default AppConfig;
|
||||
|
@ -7,91 +7,89 @@ import 'dayjs/locale/ru';
|
||||
import 'dayjs/locale/zh';
|
||||
|
||||
export class Locale {
|
||||
code: LocaleCode;
|
||||
label: string;
|
||||
message: Record<string, string>;
|
||||
code: LocaleCode;
|
||||
label: string;
|
||||
message: Record<string, string>;
|
||||
|
||||
constructor(code: LocaleCode, label: string, message: unknown) {
|
||||
this.code = code;
|
||||
this.label = label;
|
||||
this.message = message as Record<string, string>;
|
||||
}
|
||||
constructor(code: LocaleCode, label: string, message: unknown) {
|
||||
this.code = code;
|
||||
this.label = label;
|
||||
this.message = message as Record<string, string>;
|
||||
}
|
||||
}
|
||||
|
||||
export default abstract class AppI18n {
|
||||
private static LOCAL_STORAGE_KEY = 'user.locale';
|
||||
private static LOCAL_STORAGE_KEY = 'user.locale';
|
||||
|
||||
public static getUserLocale(): Locale {
|
||||
// @Todo Hack: Try page must not account info. Add this to avoid 403 errors.
|
||||
const isTryPage = window.location.href.endsWith('/try');
|
||||
let result: Locale;
|
||||
if (!isTryPage) {
|
||||
const account = fetchAccount();
|
||||
result = account?.locale ? account.locale : this.getDefaultLocale();
|
||||
public static getUserLocale(): Locale {
|
||||
// @Todo Hack: Try page must not account info. Add this to avoid 403 errors.
|
||||
const isTryPage = window.location.href.endsWith('/try');
|
||||
let result: Locale;
|
||||
if (!isTryPage) {
|
||||
const account = fetchAccount();
|
||||
result = account?.locale ? account.locale : this.getDefaultLocale();
|
||||
|
||||
// If the local storage value is different, update ...
|
||||
if (account?.locale && result.code !== localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY)) {
|
||||
localStorage.setItem(AppI18n.LOCAL_STORAGE_KEY, result.code);
|
||||
}
|
||||
// If the local storage value is different, update ...
|
||||
if (account?.locale && result.code !== localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY)) {
|
||||
localStorage.setItem(AppI18n.LOCAL_STORAGE_KEY, result.code);
|
||||
}
|
||||
} else {
|
||||
result = this.getDefaultLocale();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
} else {
|
||||
result = this.getDefaultLocale();
|
||||
}
|
||||
return result;
|
||||
public static getBrowserLocale(): Locale {
|
||||
let localeCode = (navigator.languages && navigator.languages[0]) || navigator.language;
|
||||
|
||||
// Just remove the variant ...
|
||||
localeCode = localeCode.split('-')[0];
|
||||
|
||||
let result = Locales.EN;
|
||||
try {
|
||||
result = localeFromStr(localeCode);
|
||||
} catch {
|
||||
console.warn(`Unsupported languange code ${localeCode}`);
|
||||
}
|
||||
|
||||
public static getBrowserLocale(): Locale {
|
||||
let localeCode = (navigator.languages && navigator.languages[0]) || navigator.language;
|
||||
return result;
|
||||
}
|
||||
|
||||
// Just remove the variant ...
|
||||
localeCode = localeCode.split('-')[0];
|
||||
|
||||
let result = Locales.EN;
|
||||
try {
|
||||
result = localeFromStr(localeCode);
|
||||
} catch {
|
||||
console.warn(`Unsupported languange code ${localeCode}`);
|
||||
}
|
||||
|
||||
return result;
|
||||
public static getDefaultLocale(): Locale {
|
||||
// Fetch local from local storage ...
|
||||
let result: Locale;
|
||||
const userLocaleCode: string = localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY);
|
||||
if (userLocaleCode) {
|
||||
result = localeFromStr(userLocaleCode);
|
||||
}
|
||||
|
||||
public static getDefaultLocale(): Locale {
|
||||
// Fetch local from local storage ...
|
||||
let result: Locale;
|
||||
const userLocaleCode: string = localStorage.getItem(AppI18n.LOCAL_STORAGE_KEY);
|
||||
if (userLocaleCode) {
|
||||
result = localeFromStr(userLocaleCode);
|
||||
}
|
||||
|
||||
// Ok, use browser default ...
|
||||
if (!result) {
|
||||
result = this.getBrowserLocale();
|
||||
}
|
||||
return result;
|
||||
// Ok, use browser default ...
|
||||
if (!result) {
|
||||
result = this.getBrowserLocale();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export type LocaleCode = 'en' | 'es' | 'fr' | 'de' | 'ru' | 'zh';
|
||||
|
||||
export const Locales = {
|
||||
EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')), // eslint-disable-line
|
||||
ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')), // eslint-disable-line
|
||||
DE: new Locale('fr', 'Français', require('./../../compiled-lang/fr.json')), // eslint-disable-line
|
||||
FR: new Locale('de', 'Deutsch', require('./../../compiled-lang/de.json')), // eslint-disable-line
|
||||
RU: new Locale('ru', 'Pусский', require('./../../compiled-lang/ru.json')), // eslint-disable-line
|
||||
ZH: new Locale('zh', '中文 (简体)', require('./../../compiled-lang/zh.json')), // eslint-disable-line
|
||||
|
||||
EN: new Locale('en', 'English', require('./../../compiled-lang/en.json')), // eslint-disable-line
|
||||
ES: new Locale('es', 'Español', require('./../../compiled-lang/es.json')), // eslint-disable-line
|
||||
DE: new Locale('fr', 'Français', require('./../../compiled-lang/fr.json')), // eslint-disable-line
|
||||
FR: new Locale('de', 'Deutsch', require('./../../compiled-lang/de.json')), // eslint-disable-line
|
||||
RU: new Locale('ru', 'Pусский', require('./../../compiled-lang/ru.json')), // eslint-disable-line
|
||||
ZH: new Locale('zh', '中文 (简体)', require('./../../compiled-lang/zh.json')), // eslint-disable-line
|
||||
};
|
||||
|
||||
export const localeFromStr = (code: string): Locale => {
|
||||
const locales: Locale[] = Object.values(Locales);
|
||||
const locales: Locale[] = Object.values(Locales);
|
||||
|
||||
const result = locales.find((l) => l.code == code);
|
||||
const result = locales.find((l) => l.code == code);
|
||||
|
||||
if (!result) {
|
||||
throw `Language code could not be found in list of default supported: + ${code}`;
|
||||
}
|
||||
if (!result) {
|
||||
throw `Language code could not be found in list of default supported: + ${code}`;
|
||||
}
|
||||
|
||||
return result;
|
||||
return result;
|
||||
};
|
||||
|
@ -1,143 +1,142 @@
|
||||
import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/mindplot';
|
||||
import Client, {
|
||||
AccountInfo,
|
||||
BasicMapInfo,
|
||||
ChangeHistory,
|
||||
ImportMapInfo,
|
||||
Label,
|
||||
MapInfo,
|
||||
NewUser,
|
||||
Permission,
|
||||
AccountInfo,
|
||||
BasicMapInfo,
|
||||
ChangeHistory,
|
||||
ImportMapInfo,
|
||||
Label,
|
||||
MapInfo,
|
||||
NewUser,
|
||||
Permission,
|
||||
} from '..';
|
||||
import { LocaleCode } from '../../app-i18n';
|
||||
|
||||
class CacheDecoratorClient implements Client {
|
||||
private client: Client;
|
||||
private client: Client;
|
||||
|
||||
constructor(client: Client) {
|
||||
this.client = client;
|
||||
}
|
||||
constructor(client: Client) {
|
||||
this.client = client;
|
||||
}
|
||||
|
||||
onSessionExpired(callback?: () => void): () => void {
|
||||
return this.client.onSessionExpired(callback);
|
||||
}
|
||||
onSessionExpired(callback?: () => void): () => void {
|
||||
return this.client.onSessionExpired(callback);
|
||||
}
|
||||
|
||||
fetchMindmap(id: number): Mindmap {
|
||||
return this.client.fetchMindmap(id);
|
||||
}
|
||||
fetchMindmap(id: number): Mindmap {
|
||||
return this.client.fetchMindmap(id);
|
||||
}
|
||||
|
||||
deleteAccount(): Promise<void> {
|
||||
return this.client.deleteAccount();
|
||||
}
|
||||
deleteAccount(): Promise<void> {
|
||||
return this.client.deleteAccount();
|
||||
}
|
||||
|
||||
importMap(model: ImportMapInfo): Promise<number> {
|
||||
return this.client.importMap(model);
|
||||
}
|
||||
importMap(model: ImportMapInfo): Promise<number> {
|
||||
return this.client.importMap(model);
|
||||
}
|
||||
|
||||
createMap(map: BasicMapInfo): Promise<number> {
|
||||
return this.client.createMap(map);
|
||||
}
|
||||
createMap(map: BasicMapInfo): Promise<number> {
|
||||
return this.client.createMap(map);
|
||||
}
|
||||
|
||||
deleteMaps(ids: number[]): Promise<void> {
|
||||
return this.client.deleteMaps(ids);
|
||||
}
|
||||
deleteMaps(ids: number[]): Promise<void> {
|
||||
return this.client.deleteMaps(ids);
|
||||
}
|
||||
|
||||
deleteMap(id: number): Promise<void> {
|
||||
return this.client.deleteMap(id);
|
||||
}
|
||||
deleteMap(id: number): Promise<void> {
|
||||
return this.client.deleteMap(id);
|
||||
}
|
||||
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
return this.client.renameMap(id, basicInfo);
|
||||
}
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
return this.client.renameMap(id, basicInfo);
|
||||
}
|
||||
|
||||
fetchAllMaps(): Promise<MapInfo[]> {
|
||||
return this.client.fetchAllMaps();
|
||||
}
|
||||
fetchAllMaps(): Promise<MapInfo[]> {
|
||||
return this.client.fetchAllMaps();
|
||||
}
|
||||
|
||||
fetchMapPermissions(id: number): Promise<Permission[]> {
|
||||
return this.client.fetchMapPermissions(id);
|
||||
}
|
||||
fetchMapPermissions(id: number): Promise<Permission[]> {
|
||||
return this.client.fetchMapPermissions(id);
|
||||
}
|
||||
|
||||
addMapPermissions(id: number, message: string, permissions: Permission[]): Promise<void> {
|
||||
return this.client.addMapPermissions(id, message, permissions);
|
||||
}
|
||||
addMapPermissions(id: number, message: string, permissions: Permission[]): Promise<void> {
|
||||
return this.client.addMapPermissions(id, message, permissions);
|
||||
}
|
||||
|
||||
deleteMapPermission(id: number, email: string): Promise<void> {
|
||||
return this.client.deleteMapPermission(id, email);
|
||||
}
|
||||
deleteMapPermission(id: number, email: string): Promise<void> {
|
||||
return this.client.deleteMapPermission(id, email);
|
||||
}
|
||||
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number> {
|
||||
return this.client.duplicateMap(id, basicInfo);
|
||||
}
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number> {
|
||||
return this.client.duplicateMap(id, basicInfo);
|
||||
}
|
||||
|
||||
updateAccountLanguage(locale: LocaleCode): Promise<void> {
|
||||
return this.client.updateAccountLanguage(locale);
|
||||
}
|
||||
updateAccountLanguage(locale: LocaleCode): Promise<void> {
|
||||
return this.client.updateAccountLanguage(locale);
|
||||
}
|
||||
|
||||
updateAccountPassword(pasword: string): Promise<void> {
|
||||
return this.client.updateAccountPassword(pasword);
|
||||
}
|
||||
updateAccountPassword(pasword: string): Promise<void> {
|
||||
return this.client.updateAccountPassword(pasword);
|
||||
}
|
||||
|
||||
updateAccountInfo(firstname: string, lastname: string): Promise<void> {
|
||||
return this.client.updateAccountInfo(firstname, lastname);
|
||||
}
|
||||
updateAccountInfo(firstname: string, lastname: string): Promise<void> {
|
||||
return this.client.updateAccountInfo(firstname, lastname);
|
||||
}
|
||||
|
||||
updateStarred(id: number, starred: boolean): Promise<void> {
|
||||
return this.client.updateStarred(id, starred);
|
||||
}
|
||||
updateStarred(id: number, starred: boolean): Promise<void> {
|
||||
return this.client.updateStarred(id, starred);
|
||||
}
|
||||
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void> {
|
||||
return this.client.updateMapToPublic(id, isPublic);
|
||||
}
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void> {
|
||||
return this.client.updateMapToPublic(id, isPublic);
|
||||
}
|
||||
|
||||
fetchLabels(): Promise<Label[]> {
|
||||
return this.client.fetchLabels();
|
||||
}
|
||||
fetchLabels(): Promise<Label[]> {
|
||||
return this.client.fetchLabels();
|
||||
}
|
||||
|
||||
createLabel(title: string, color: string): Promise<number> {
|
||||
return this.client.createLabel(title, color);
|
||||
}
|
||||
createLabel(title: string, color: string): Promise<number> {
|
||||
return this.client.createLabel(title, color);
|
||||
}
|
||||
|
||||
deleteLabel(id: number): Promise<void> {
|
||||
return this.client.deleteLabel(id);
|
||||
}
|
||||
deleteLabel(id: number): Promise<void> {
|
||||
return this.client.deleteLabel(id);
|
||||
}
|
||||
|
||||
addLabelToMap(labelId: number, mapId: number): Promise<void> {
|
||||
return this.client.addLabelToMap(labelId, mapId);
|
||||
}
|
||||
addLabelToMap(labelId: number, mapId: number): Promise<void> {
|
||||
return this.client.addLabelToMap(labelId, mapId);
|
||||
}
|
||||
|
||||
deleteLabelFromMap(labelId: number, mapId: number): Promise<void> {
|
||||
return this.client.deleteLabelFromMap(labelId, mapId);
|
||||
}
|
||||
deleteLabelFromMap(labelId: number, mapId: number): Promise<void> {
|
||||
return this.client.deleteLabelFromMap(labelId, mapId);
|
||||
}
|
||||
|
||||
fetchAccountInfo(): Promise<AccountInfo> {
|
||||
return this.client.fetchAccountInfo();
|
||||
}
|
||||
fetchAccountInfo(): Promise<AccountInfo> {
|
||||
return this.client.fetchAccountInfo();
|
||||
}
|
||||
|
||||
registerNewUser(user: NewUser): Promise<void> {
|
||||
return this.client.registerNewUser(user);
|
||||
}
|
||||
registerNewUser(user: NewUser): Promise<void> {
|
||||
return this.client.registerNewUser(user);
|
||||
}
|
||||
|
||||
resetPassword(email: string): Promise<void> {
|
||||
return this.client.resetPassword(email);
|
||||
}
|
||||
resetPassword(email: string): Promise<void> {
|
||||
return this.client.resetPassword(email);
|
||||
}
|
||||
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]> {
|
||||
return this.client.fetchHistory(id);
|
||||
}
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]> {
|
||||
return this.client.fetchHistory(id);
|
||||
}
|
||||
|
||||
revertHistory(id: number, cid: number): Promise<void> {
|
||||
return this.client.revertHistory(id, cid);
|
||||
}
|
||||
revertHistory(id: number, cid: number): Promise<void> {
|
||||
return this.client.revertHistory(id, cid);
|
||||
}
|
||||
|
||||
buildPersistenceManager(mode: EditorRenderMode): PersistenceManager {
|
||||
return this.client.buildPersistenceManager(mode);
|
||||
}
|
||||
|
||||
removePersistenceManager(): void {
|
||||
return this.client.removePersistenceManager();
|
||||
}
|
||||
buildPersistenceManager(mode: EditorRenderMode): PersistenceManager {
|
||||
return this.client.buildPersistenceManager(mode);
|
||||
}
|
||||
|
||||
removePersistenceManager(): void {
|
||||
return this.client.removePersistenceManager();
|
||||
}
|
||||
}
|
||||
|
||||
export default CacheDecoratorClient;
|
||||
export default CacheDecoratorClient;
|
||||
|
@ -2,117 +2,117 @@ import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/mind
|
||||
import { Locale, LocaleCode } from '../app-i18n';
|
||||
|
||||
export type NewUser = {
|
||||
email: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
password: string;
|
||||
recaptcha: string | null;
|
||||
email: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
password: string;
|
||||
recaptcha: string | null;
|
||||
};
|
||||
|
||||
export type ImportMapInfo = {
|
||||
title: string;
|
||||
description?: string;
|
||||
contentType?: string;
|
||||
content?: ArrayBuffer | null | string;
|
||||
title: string;
|
||||
description?: string;
|
||||
contentType?: string;
|
||||
content?: ArrayBuffer | null | string;
|
||||
};
|
||||
|
||||
export type Label = {
|
||||
id: number;
|
||||
title: string;
|
||||
color: string;
|
||||
id: number;
|
||||
title: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
export type Role = 'owner' | 'editor' | 'viewer';
|
||||
|
||||
export type MapInfo = {
|
||||
id: number;
|
||||
starred: boolean;
|
||||
title: string;
|
||||
labels: Label[];
|
||||
createdBy: string;
|
||||
creationTime: string;
|
||||
lastModificationBy: string;
|
||||
lastModificationTime: string;
|
||||
description: string;
|
||||
isPublic: boolean;
|
||||
role: Role;
|
||||
id: number;
|
||||
starred: boolean;
|
||||
title: string;
|
||||
labels: Label[];
|
||||
createdBy: string;
|
||||
creationTime: string;
|
||||
lastModificationBy: string;
|
||||
lastModificationTime: string;
|
||||
description: string;
|
||||
isPublic: boolean;
|
||||
role: Role;
|
||||
};
|
||||
|
||||
export type ChangeHistory = {
|
||||
id: number;
|
||||
lastModificationBy: string;
|
||||
lastModificationTime: string;
|
||||
id: number;
|
||||
lastModificationBy: string;
|
||||
lastModificationTime: string;
|
||||
};
|
||||
|
||||
export type BasicMapInfo = {
|
||||
title: string;
|
||||
description?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
export type FieldError = {
|
||||
id: string;
|
||||
msg: string;
|
||||
id: string;
|
||||
msg: string;
|
||||
};
|
||||
|
||||
export type ErrorInfo = {
|
||||
msg?: string;
|
||||
fields?: Map<string, string>;
|
||||
msg?: string;
|
||||
fields?: Map<string, string>;
|
||||
};
|
||||
|
||||
export type AccountInfo = {
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
email: string;
|
||||
locale?: Locale;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
email: string;
|
||||
locale?: Locale;
|
||||
};
|
||||
|
||||
export type Permission = {
|
||||
name?: string;
|
||||
email: string;
|
||||
role: Role;
|
||||
name?: string;
|
||||
email: string;
|
||||
role: Role;
|
||||
};
|
||||
|
||||
interface Client {
|
||||
deleteAccount(): Promise<void>;
|
||||
importMap(model: ImportMapInfo): Promise<number>;
|
||||
createMap(map: BasicMapInfo): Promise<number>;
|
||||
deleteMaps(ids: number[]): Promise<void>;
|
||||
deleteMap(id: number): Promise<void>;
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
||||
fetchAllMaps(): Promise<MapInfo[]>;
|
||||
deleteAccount(): Promise<void>;
|
||||
importMap(model: ImportMapInfo): Promise<number>;
|
||||
createMap(map: BasicMapInfo): Promise<number>;
|
||||
deleteMaps(ids: number[]): Promise<void>;
|
||||
deleteMap(id: number): Promise<void>;
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
|
||||
fetchAllMaps(): Promise<MapInfo[]>;
|
||||
|
||||
fetchMapPermissions(id: number): Promise<Permission[]>;
|
||||
addMapPermissions(id: number, message: string, permissions: Permission[]): Promise<void>;
|
||||
deleteMapPermission(id: number, email: string): Promise<void>;
|
||||
fetchMapPermissions(id: number): Promise<Permission[]>;
|
||||
addMapPermissions(id: number, message: string, permissions: Permission[]): Promise<void>;
|
||||
deleteMapPermission(id: number, email: string): Promise<void>;
|
||||
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number>;
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number>;
|
||||
|
||||
updateAccountLanguage(locale: LocaleCode): Promise<void>;
|
||||
updateAccountPassword(pasword: string): Promise<void>;
|
||||
updateAccountInfo(firstname: string, lastname: string): Promise<void>;
|
||||
updateAccountLanguage(locale: LocaleCode): Promise<void>;
|
||||
updateAccountPassword(pasword: string): Promise<void>;
|
||||
updateAccountInfo(firstname: string, lastname: string): Promise<void>;
|
||||
|
||||
updateStarred(id: number, starred: boolean): Promise<void>;
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void>;
|
||||
updateStarred(id: number, starred: boolean): Promise<void>;
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void>;
|
||||
|
||||
createLabel(title: string, color: string): Promise<number>;
|
||||
fetchLabels(): Promise<Label[]>;
|
||||
deleteLabel(id: number): Promise<void>;
|
||||
addLabelToMap(labelId: number, mapId: number): Promise<void>;
|
||||
deleteLabelFromMap(labelId: number, mapId: number): Promise<void>;
|
||||
fetchAccountInfo(): Promise<AccountInfo>;
|
||||
createLabel(title: string, color: string): Promise<number>;
|
||||
fetchLabels(): Promise<Label[]>;
|
||||
deleteLabel(id: number): Promise<void>;
|
||||
addLabelToMap(labelId: number, mapId: number): Promise<void>;
|
||||
deleteLabelFromMap(labelId: number, mapId: number): Promise<void>;
|
||||
fetchAccountInfo(): Promise<AccountInfo>;
|
||||
|
||||
registerNewUser(user: NewUser): Promise<void>;
|
||||
resetPassword(email: string): Promise<void>;
|
||||
registerNewUser(user: NewUser): Promise<void>;
|
||||
resetPassword(email: string): Promise<void>;
|
||||
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]>;
|
||||
revertHistory(id: number, cid: number): Promise<void>;
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]>;
|
||||
revertHistory(id: number, cid: number): Promise<void>;
|
||||
|
||||
fetchMindmap(id: number): Mindmap;
|
||||
fetchMindmap(id: number): Mindmap;
|
||||
|
||||
buildPersistenceManager(mode: EditorRenderMode): PersistenceManager;
|
||||
removePersistenceManager(): void;
|
||||
buildPersistenceManager(mode: EditorRenderMode): PersistenceManager;
|
||||
removePersistenceManager(): void;
|
||||
|
||||
onSessionExpired(callback?: () => void): () => void;
|
||||
onSessionExpired(callback?: () => void): () => void;
|
||||
}
|
||||
|
||||
export default Client;
|
||||
|
@ -1,418 +1,425 @@
|
||||
import { Mindmap, MockPersistenceManager, PersistenceManager } from '@wisemapping/mindplot';
|
||||
import XMLSerializerTango from '@wisemapping/mindplot/src/components/persistence/XMLSerializerTango';
|
||||
import Client, {
|
||||
AccountInfo,
|
||||
BasicMapInfo,
|
||||
ChangeHistory,
|
||||
ImportMapInfo,
|
||||
Label,
|
||||
MapInfo,
|
||||
NewUser,
|
||||
Permission,
|
||||
AccountInfo,
|
||||
BasicMapInfo,
|
||||
ChangeHistory,
|
||||
ImportMapInfo,
|
||||
Label,
|
||||
MapInfo,
|
||||
NewUser,
|
||||
Permission,
|
||||
} from '..';
|
||||
import { LocaleCode, localeFromStr } from '../../app-i18n';
|
||||
import exampleMap from './example-map.wxml';
|
||||
|
||||
const label1: Label = {
|
||||
id: 1,
|
||||
title: 'label 1',
|
||||
color: 'black',
|
||||
}
|
||||
id: 1,
|
||||
title: 'label 1',
|
||||
color: 'black',
|
||||
};
|
||||
|
||||
const label2: Label = {
|
||||
id: 2,
|
||||
title: 'label 2',
|
||||
color: 'green',
|
||||
}
|
||||
id: 2,
|
||||
title: 'label 2',
|
||||
color: 'green',
|
||||
};
|
||||
|
||||
const label3: Label = {
|
||||
id: 3,
|
||||
title: 'label 3',
|
||||
color: 'red',
|
||||
}
|
||||
id: 3,
|
||||
title: 'label 3',
|
||||
color: 'red',
|
||||
};
|
||||
|
||||
class MockClient implements Client {
|
||||
private maps: MapInfo[] = [];
|
||||
private labels: Label[] = [];
|
||||
private permissionsByMap: Map<number, Permission[]> = new Map();
|
||||
private persistenceManager: PersistenceManager;
|
||||
private maps: MapInfo[] = [];
|
||||
private labels: Label[] = [];
|
||||
private permissionsByMap: Map<number, Permission[]> = new Map();
|
||||
private persistenceManager: PersistenceManager;
|
||||
|
||||
constructor() {
|
||||
// Remove, just for develop ....
|
||||
function createMapInfo(
|
||||
id: number,
|
||||
starred: boolean,
|
||||
title: string,
|
||||
labels: Label[],
|
||||
creator: string,
|
||||
creationTime: string,
|
||||
modifiedByUser: string,
|
||||
modifiedTime: string,
|
||||
description: string,
|
||||
isPublic: boolean,
|
||||
role: 'owner' | 'viewer' | 'editor'
|
||||
): MapInfo {
|
||||
return {
|
||||
id,
|
||||
title,
|
||||
labels,
|
||||
createdBy: creator,
|
||||
creationTime,
|
||||
lastModificationBy: modifiedByUser,
|
||||
lastModificationTime: modifiedTime,
|
||||
starred,
|
||||
description,
|
||||
isPublic,
|
||||
role,
|
||||
};
|
||||
}
|
||||
|
||||
this.maps = [
|
||||
createMapInfo(
|
||||
1,
|
||||
true,
|
||||
'El Mapa',
|
||||
[],
|
||||
'Paulo',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'Berna',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'',
|
||||
true,
|
||||
'owner'
|
||||
),
|
||||
createMapInfo(
|
||||
11,
|
||||
false,
|
||||
'El Mapa3',
|
||||
[label1, label2],
|
||||
'Paulo3',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'Berna',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'',
|
||||
false,
|
||||
'editor'
|
||||
),
|
||||
createMapInfo(
|
||||
12,
|
||||
false,
|
||||
'El Mapa3',
|
||||
[label2, label3],
|
||||
'Paulo3',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'Berna',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'',
|
||||
false,
|
||||
'editor'
|
||||
),
|
||||
];
|
||||
|
||||
this.labels = [label1, label2, label3];
|
||||
constructor() {
|
||||
// Remove, just for develop ....
|
||||
function createMapInfo(
|
||||
id: number,
|
||||
starred: boolean,
|
||||
title: string,
|
||||
labels: Label[],
|
||||
creator: string,
|
||||
creationTime: string,
|
||||
modifiedByUser: string,
|
||||
modifiedTime: string,
|
||||
description: string,
|
||||
isPublic: boolean,
|
||||
role: 'owner' | 'viewer' | 'editor',
|
||||
): MapInfo {
|
||||
return {
|
||||
id,
|
||||
title,
|
||||
labels,
|
||||
createdBy: creator,
|
||||
creationTime,
|
||||
lastModificationBy: modifiedByUser,
|
||||
lastModificationTime: modifiedTime,
|
||||
starred,
|
||||
description,
|
||||
isPublic,
|
||||
role,
|
||||
};
|
||||
}
|
||||
|
||||
onSessionExpired(callback?: () => void): () => void {
|
||||
return callback;
|
||||
}
|
||||
this.maps = [
|
||||
createMapInfo(
|
||||
1,
|
||||
true,
|
||||
'El Mapa',
|
||||
[],
|
||||
'Paulo',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'Berna',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'',
|
||||
true,
|
||||
'owner',
|
||||
),
|
||||
createMapInfo(
|
||||
11,
|
||||
false,
|
||||
'El Mapa3',
|
||||
[label1, label2],
|
||||
'Paulo3',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'Berna',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'',
|
||||
false,
|
||||
'editor',
|
||||
),
|
||||
createMapInfo(
|
||||
12,
|
||||
false,
|
||||
'El Mapa3',
|
||||
[label2, label3],
|
||||
'Paulo3',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'Berna',
|
||||
'2008-06-02T00:00:00Z',
|
||||
'',
|
||||
false,
|
||||
'editor',
|
||||
),
|
||||
];
|
||||
|
||||
fetchMindmap(id: number): Mindmap {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(`
|
||||
this.labels = [label1, label2, label3];
|
||||
}
|
||||
|
||||
onSessionExpired(callback?: () => void): () => void {
|
||||
return callback;
|
||||
}
|
||||
|
||||
fetchMindmap(id: number): Mindmap {
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(
|
||||
`
|
||||
<map name="${id}" version="tango">
|
||||
<topic central="true" text="This is the map ${id}" id="1" fontStyle=";;#ffffff;;;"></topic>
|
||||
</map>
|
||||
`, 'text/xml');
|
||||
`,
|
||||
'text/xml',
|
||||
);
|
||||
|
||||
const serializer = new XMLSerializerTango();
|
||||
return serializer.loadFromDom(xmlDoc, String(id));
|
||||
const serializer = new XMLSerializerTango();
|
||||
return serializer.loadFromDom(xmlDoc, String(id));
|
||||
}
|
||||
deleteMapPermission(id: number, email: string): Promise<void> {
|
||||
let perm = this.permissionsByMap.get(id) || [];
|
||||
perm = perm.filter((p) => p.email != email);
|
||||
this.permissionsByMap.set(id, perm);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
addMapPermissions(id: number, message: string, permissions: Permission[]): Promise<void> {
|
||||
let perm = this.permissionsByMap.get(id) || [];
|
||||
perm = perm.concat(permissions);
|
||||
this.permissionsByMap.set(id, perm);
|
||||
|
||||
console.debug(`Message ${message}`);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
fetchMapPermissions(id: number): Promise<Permission[]> {
|
||||
let perm = this.permissionsByMap.get(id);
|
||||
if (!perm) {
|
||||
perm = [
|
||||
{
|
||||
name: 'Cosme Editor',
|
||||
email: 'pepe@example.com',
|
||||
role: 'editor',
|
||||
},
|
||||
{
|
||||
name: 'Cosme Owner',
|
||||
email: 'pepe2@example.com',
|
||||
role: 'owner',
|
||||
},
|
||||
{
|
||||
name: 'Cosme Viewer',
|
||||
email: 'pepe3@example.com',
|
||||
role: 'viewer',
|
||||
},
|
||||
];
|
||||
this.permissionsByMap.set(id, perm);
|
||||
}
|
||||
deleteMapPermission(id: number, email: string): Promise<void> {
|
||||
let perm = this.permissionsByMap.get(id) || [];
|
||||
perm = perm.filter((p) => p.email != email);
|
||||
this.permissionsByMap.set(id, perm);
|
||||
return Promise.resolve();
|
||||
return Promise.resolve(perm);
|
||||
}
|
||||
|
||||
deleteAccount(): Promise<void> {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
updateAccountInfo(firstname: string, lastname: string): Promise<void> {
|
||||
console.log('firstname:' + firstname, +lastname);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
updateAccountPassword(pasword: string): Promise<void> {
|
||||
console.log('password:' + pasword);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
updateAccountLanguage(locale: LocaleCode): Promise<void> {
|
||||
localStorage.setItem('locale', locale);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
importMap(model: ImportMapInfo): Promise<number> {
|
||||
console.log('model:' + model);
|
||||
return Promise.resolve(10);
|
||||
}
|
||||
|
||||
fetchAccountInfo(): Promise<AccountInfo> {
|
||||
console.log('Fetch account info ...');
|
||||
const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode;
|
||||
return Promise.resolve({
|
||||
firstname: 'Costme',
|
||||
lastname: 'Fulanito',
|
||||
email: 'test@example.com',
|
||||
locale: localeFromStr(locale),
|
||||
});
|
||||
}
|
||||
|
||||
deleteMaps(ids: number[]): Promise<void> {
|
||||
ids.forEach((id) => this.deleteMap(id));
|
||||
return Promise.resolve();
|
||||
}
|
||||
revertHistory(id: number, cid: number): Promise<void> {
|
||||
console.log('model:' + id + cid);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
createMap(map: BasicMapInfo): Promise<number> {
|
||||
throw new Error('Method not implemented.' + map);
|
||||
}
|
||||
|
||||
fetchLabels(): Promise<Label[]> {
|
||||
console.log('Fetching labels from server');
|
||||
return Promise.resolve(this.labels);
|
||||
}
|
||||
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void> {
|
||||
const mapInfo = this.maps.find((m) => m.id == id);
|
||||
if (mapInfo) {
|
||||
mapInfo.isPublic = isPublic;
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
addMapPermissions(id: number, message: string, permissions: Permission[]): Promise<void> {
|
||||
let perm = this.permissionsByMap.get(id) || [];
|
||||
perm = perm.concat(permissions);
|
||||
this.permissionsByMap.set(id, perm);
|
||||
|
||||
console.debug(`Message ${message}`);
|
||||
return Promise.resolve();
|
||||
updateStarred(id: number, starred: boolean): Promise<void> {
|
||||
const mapInfo = this.maps.find((m) => m.id == id);
|
||||
if (!mapInfo) {
|
||||
console.log(`Could not find the map iwth id ${id}`);
|
||||
return Promise.reject();
|
||||
}
|
||||
mapInfo.starred = starred;
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
fetchMapPermissions(id: number): Promise<Permission[]> {
|
||||
let perm = this.permissionsByMap.get(id);
|
||||
if (!perm) {
|
||||
perm = [
|
||||
{
|
||||
name: 'Cosme Editor',
|
||||
email: 'pepe@example.com',
|
||||
role: 'editor',
|
||||
},
|
||||
{
|
||||
name: 'Cosme Owner',
|
||||
email: 'pepe2@example.com',
|
||||
role: 'owner',
|
||||
},
|
||||
{
|
||||
name: 'Cosme Viewer',
|
||||
email: 'pepe3@example.com',
|
||||
role: 'viewer',
|
||||
},
|
||||
];
|
||||
this.permissionsByMap.set(id, perm);
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
|
||||
if (!exists) {
|
||||
this.maps = this.maps.map((m) => {
|
||||
const result = m;
|
||||
if (m.id == id) {
|
||||
result.description = basicInfo.description ? basicInfo.description : '';
|
||||
result.title = basicInfo.title;
|
||||
}
|
||||
return Promise.resolve(perm);
|
||||
}
|
||||
return result;
|
||||
});
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
const fieldErrors: Map<string, string> = new Map<string, string>();
|
||||
fieldErrors.set('name', 'name already exists ');
|
||||
|
||||
deleteAccount(): Promise<void> {
|
||||
return Promise.resolve();
|
||||
return Promise.reject({
|
||||
msg: 'Map already exists ...' + basicInfo.title,
|
||||
fields: fieldErrors,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateAccountInfo(firstname: string, lastname: string): Promise<void> {
|
||||
console.log('firstname:' + firstname, +lastname);
|
||||
return Promise.resolve();
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]> {
|
||||
console.log(`Fetching history for ${id}`);
|
||||
const result = [
|
||||
{
|
||||
id: 1,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
];
|
||||
return Promise.resolve(result);
|
||||
}
|
||||
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number> {
|
||||
const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
|
||||
if (!exists) {
|
||||
const newMap: MapInfo = {
|
||||
id: Math.random() * 1000,
|
||||
description: String(basicInfo.description),
|
||||
title: basicInfo.title,
|
||||
starred: false,
|
||||
createdBy: 'current user',
|
||||
labels: [],
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
lastModificationBy: 'Berna',
|
||||
creationTime: '2008-06-02T00:00:00Z',
|
||||
isPublic: false,
|
||||
role: 'owner',
|
||||
};
|
||||
this.maps.push(newMap);
|
||||
return Promise.resolve(newMap.id);
|
||||
} else {
|
||||
const fieldErrors: Map<string, string> = new Map<string, string>();
|
||||
fieldErrors.set('name', 'name already exists ');
|
||||
|
||||
return Promise.reject({
|
||||
msg: 'Maps name must be unique:' + basicInfo.title,
|
||||
fields: fieldErrors,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateAccountPassword(pasword: string): Promise<void> {
|
||||
console.log('password:' + pasword);
|
||||
return Promise.resolve();
|
||||
createLabel(title: string, color: string): Promise<number> {
|
||||
const newId =
|
||||
Math.max.apply(
|
||||
Number,
|
||||
this.labels.map((l) => l.id),
|
||||
) + 1;
|
||||
this.labels.push({
|
||||
id: newId,
|
||||
title,
|
||||
color,
|
||||
});
|
||||
return newId;
|
||||
}
|
||||
|
||||
deleteLabel(id: number): Promise<void> {
|
||||
this.labels = this.labels.filter((l) => l.id != id);
|
||||
this.maps = this.maps.map((m) => {
|
||||
return {
|
||||
...m,
|
||||
labels: m.labels.filter((l) => l.id != id),
|
||||
};
|
||||
});
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
addLabelToMap(labelId: number, mapId: number): Promise<void> {
|
||||
const labelToAdd = this.labels.find((l) => l.id === labelId);
|
||||
if (!labelToAdd) {
|
||||
return Promise.reject({ msg: `unable to find label with id ${labelId}` });
|
||||
}
|
||||
|
||||
updateAccountLanguage(locale: LocaleCode): Promise<void> {
|
||||
localStorage.setItem('locale', locale);
|
||||
return Promise.resolve();
|
||||
const map = this.maps.find((m) => m.id === mapId);
|
||||
if (!map) {
|
||||
return Promise.reject({ msg: `unable to find map with id ${mapId}` });
|
||||
}
|
||||
map.labels.push(labelToAdd);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
importMap(model: ImportMapInfo): Promise<number> {
|
||||
console.log('model:' + model);
|
||||
return Promise.resolve(10);
|
||||
deleteLabelFromMap(labelId: number, mapId: number): Promise<void> {
|
||||
const map = this.maps.find((m) => m.id === mapId);
|
||||
if (!map) {
|
||||
return Promise.reject({ msg: `unable to find map with id ${mapId}` });
|
||||
}
|
||||
map.labels = map.labels.filter((l) => l.id !== labelId);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
fetchAccountInfo(): Promise<AccountInfo> {
|
||||
console.log('Fetch account info ...');
|
||||
const locale: LocaleCode | null = localStorage.getItem('locale') as LocaleCode;
|
||||
return Promise.resolve({
|
||||
firstname: 'Costme',
|
||||
lastname: 'Fulanito',
|
||||
email: 'test@example.com',
|
||||
locale: localeFromStr(locale),
|
||||
});
|
||||
deleteMap(id: number): Promise<void> {
|
||||
this.maps = this.maps.filter((m) => m.id != id);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
registerNewUser(user: NewUser): Promise<void> {
|
||||
console.log('user:' + user);
|
||||
if (user.email == 'error@example.com') {
|
||||
return Promise.reject({ msg: 'Unexpected error' });
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
deleteMaps(ids: number[]): Promise<void> {
|
||||
ids.forEach((id) => this.deleteMap(id));
|
||||
return Promise.resolve();
|
||||
fetchAllMaps(): Promise<MapInfo[]> {
|
||||
console.log('Fetching maps from server');
|
||||
return Promise.resolve(this.maps);
|
||||
}
|
||||
|
||||
resetPassword(email: string): Promise<void> {
|
||||
console.log('email:' + email);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
buildPersistenceManager(): PersistenceManager {
|
||||
if (this.persistenceManager) {
|
||||
return this.persistenceManager;
|
||||
}
|
||||
revertHistory(id: number, cid: number): Promise<void> {
|
||||
console.log('model:' + id + cid);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
createMap(map: BasicMapInfo): Promise<number> {
|
||||
throw new Error('Method not implemented.' + map);
|
||||
}
|
||||
|
||||
fetchLabels(): Promise<Label[]> {
|
||||
console.log('Fetching labels from server');
|
||||
return Promise.resolve(this.labels);
|
||||
}
|
||||
|
||||
updateMapToPublic(id: number, isPublic: boolean): Promise<void> {
|
||||
const mapInfo = this.maps.find((m) => m.id == id);
|
||||
if (mapInfo) {
|
||||
mapInfo.isPublic = isPublic;
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
updateStarred(id: number, starred: boolean): Promise<void> {
|
||||
const mapInfo = this.maps.find((m) => m.id == id);
|
||||
if (!mapInfo) {
|
||||
console.log(`Could not find the map iwth id ${id}`);
|
||||
return Promise.reject();
|
||||
}
|
||||
mapInfo.starred = starred;
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
renameMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
|
||||
const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
|
||||
if (!exists) {
|
||||
this.maps = this.maps.map((m) => {
|
||||
const result = m;
|
||||
if (m.id == id) {
|
||||
result.description = basicInfo.description ? basicInfo.description : '';
|
||||
result.title = basicInfo.title;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
const fieldErrors: Map<string, string> = new Map<string, string>();
|
||||
fieldErrors.set('name', 'name already exists ');
|
||||
|
||||
return Promise.reject({
|
||||
msg: 'Map already exists ...' + basicInfo.title,
|
||||
fields: fieldErrors,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
fetchHistory(id: number): Promise<ChangeHistory[]> {
|
||||
console.log(`Fetching history for ${id}`);
|
||||
const result = [
|
||||
{
|
||||
id: 1,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
lastModificationBy: 'Paulo',
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
},
|
||||
];
|
||||
return Promise.resolve(result);
|
||||
}
|
||||
|
||||
duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<number> {
|
||||
const exists = this.maps.find((m) => m.title == basicInfo.title) != undefined;
|
||||
if (!exists) {
|
||||
const newMap: MapInfo = {
|
||||
id: Math.random() * 1000,
|
||||
description: String(basicInfo.description),
|
||||
title: basicInfo.title,
|
||||
starred: false,
|
||||
createdBy: 'current user',
|
||||
labels: [],
|
||||
lastModificationTime: '2008-06-02T00:00:00Z',
|
||||
lastModificationBy: 'Berna',
|
||||
creationTime: '2008-06-02T00:00:00Z',
|
||||
isPublic: false,
|
||||
role: 'owner',
|
||||
};
|
||||
this.maps.push(newMap);
|
||||
return Promise.resolve(newMap.id);
|
||||
} else {
|
||||
const fieldErrors: Map<string, string> = new Map<string, string>();
|
||||
fieldErrors.set('name', 'name already exists ');
|
||||
|
||||
return Promise.reject({
|
||||
msg: 'Maps name must be unique:' + basicInfo.title,
|
||||
fields: fieldErrors,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
createLabel(title: string, color: string): Promise<number> {
|
||||
const newId = Math.max.apply(Number, this.labels.map(l => l.id)) + 1;
|
||||
this.labels.push({
|
||||
id: newId,
|
||||
title,
|
||||
color,
|
||||
});
|
||||
return newId;
|
||||
}
|
||||
|
||||
deleteLabel(id: number): Promise<void> {
|
||||
this.labels = this.labels.filter((l) => l.id != id);
|
||||
this.maps = this.maps.map(m => {
|
||||
return {
|
||||
...m,
|
||||
labels: m.labels.filter((l) => l.id != id)
|
||||
};
|
||||
});
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
addLabelToMap(labelId: number, mapId: number): Promise<void> {
|
||||
const labelToAdd = this.labels.find((l) => l.id === labelId);
|
||||
if (!labelToAdd) {
|
||||
return Promise.reject({ msg: `unable to find label with id ${labelId}` });
|
||||
}
|
||||
const map = this.maps.find((m) => m.id === mapId);
|
||||
if (!map) {
|
||||
return Promise.reject({ msg: `unable to find map with id ${mapId}` });
|
||||
}
|
||||
map.labels.push(labelToAdd);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
deleteLabelFromMap(labelId: number, mapId: number): Promise<void> {
|
||||
const map = this.maps.find((m) => m.id === mapId);
|
||||
if (!map) {
|
||||
return Promise.reject({ msg: `unable to find map with id ${mapId}` });
|
||||
}
|
||||
map.labels = map.labels.filter((l) => l.id !== labelId);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
deleteMap(id: number): Promise<void> {
|
||||
this.maps = this.maps.filter((m) => m.id != id);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
registerNewUser(user: NewUser): Promise<void> {
|
||||
console.log('user:' + user);
|
||||
if (user.email == "error@example.com") {
|
||||
return Promise.reject({ msg: "Unexpected error" });
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
fetchAllMaps(): Promise<MapInfo[]> {
|
||||
console.log('Fetching maps from server');
|
||||
return Promise.resolve(this.maps);
|
||||
}
|
||||
|
||||
resetPassword(email: string): Promise<void> {
|
||||
console.log('email:' + email);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
buildPersistenceManager(): PersistenceManager {
|
||||
if (this.persistenceManager) {
|
||||
return this.persistenceManager;
|
||||
}
|
||||
const persistence: PersistenceManager = new MockPersistenceManager(exampleMap);
|
||||
this.persistenceManager = persistence;
|
||||
return persistence;
|
||||
}
|
||||
|
||||
removePersistenceManager(): void {
|
||||
if (this.persistenceManager) {
|
||||
delete this.persistenceManager;
|
||||
}
|
||||
const persistence: PersistenceManager = new MockPersistenceManager(exampleMap);
|
||||
this.persistenceManager = persistence;
|
||||
return persistence;
|
||||
}
|
||||
|
||||
removePersistenceManager(): void {
|
||||
if (this.persistenceManager) {
|
||||
delete this.persistenceManager;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default MockClient;
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -3,43 +3,45 @@ import { EditorRenderMode } from '@wisemapping/mindplot';
|
||||
import AppConfig from '../../classes/app-config';
|
||||
|
||||
class EditorOptionsBuilder {
|
||||
static build(locale: string, mode: EditorRenderMode, hotkeys: boolean): EditorOptions {
|
||||
static build(locale: string, mode: EditorRenderMode, hotkeys: boolean): EditorOptions {
|
||||
let options: EditorOptions = {
|
||||
enableKeyboardEvents: hotkeys,
|
||||
locale: locale,
|
||||
mode: mode,
|
||||
};
|
||||
|
||||
let options: EditorOptions = {
|
||||
enableKeyboardEvents: hotkeys,
|
||||
locale: locale,
|
||||
mode: mode,
|
||||
};
|
||||
|
||||
if (!AppConfig.isDevelopEnv()) {
|
||||
options = {
|
||||
zoom: (global.userOptions?.zoom != undefined
|
||||
? Number.parseFloat(global?.userOptions?.zoom as string)
|
||||
: 0.8),
|
||||
locked: global.mindmapLocked,
|
||||
lockedMsg: global.mindmapLockedMsg,
|
||||
mapTitle: global.mapTitle,
|
||||
...options
|
||||
}
|
||||
} else {
|
||||
// Running in a development mode.
|
||||
console.log('Running editor in development mode');
|
||||
options = {
|
||||
zoom: 0.8,
|
||||
locked: false,
|
||||
mapTitle: "Develop Mindnap",
|
||||
...options
|
||||
}
|
||||
}
|
||||
return options;
|
||||
if (!AppConfig.isDevelopEnv()) {
|
||||
options = {
|
||||
zoom:
|
||||
global.userOptions?.zoom != undefined
|
||||
? Number.parseFloat(global?.userOptions?.zoom as string)
|
||||
: 0.8,
|
||||
locked: global.mindmapLocked,
|
||||
lockedMsg: global.mindmapLockedMsg,
|
||||
mapTitle: global.mapTitle,
|
||||
...options,
|
||||
};
|
||||
} else {
|
||||
// Running in a development mode.
|
||||
console.log('Running editor in development mode');
|
||||
options = {
|
||||
zoom: 0.8,
|
||||
locked: false,
|
||||
mapTitle: 'Develop Mindnap',
|
||||
...options,
|
||||
};
|
||||
}
|
||||
return options;
|
||||
}
|
||||
|
||||
static loadMapId(): number {
|
||||
const result = !AppConfig.isDevelopEnv() ? global.mapId : 11;
|
||||
if (result === undefined) {
|
||||
throw Error(`Could not resolve mapId. Map Id: global.mapId: ${result} , global.mapTitle: ${global.mapTitle}, global.lockSession: ${global.lockSession}`);
|
||||
}
|
||||
return result;
|
||||
static loadMapId(): number {
|
||||
const result = !AppConfig.isDevelopEnv() ? global.mapId : 11;
|
||||
if (result === undefined) {
|
||||
throw Error(
|
||||
`Could not resolve mapId. Map Id: global.mapId: ${result} , global.mapTitle: ${global.mapTitle}, global.lockSession: ${global.lockSession}`,
|
||||
);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
export default EditorOptionsBuilder;
|
||||
|
@ -2,10 +2,10 @@ import withStyles from '@mui/styles/withStyles';
|
||||
import Alert from '@mui/material/Alert';
|
||||
|
||||
export const StyledAlert = withStyles({
|
||||
root: {
|
||||
padding: '10px 15px',
|
||||
margin: '5px 0px ',
|
||||
},
|
||||
root: {
|
||||
padding: '10px 15px',
|
||||
margin: '5px 0px ',
|
||||
},
|
||||
})(Alert);
|
||||
|
||||
export default StyledAlert;
|
||||
|
@ -2,46 +2,46 @@ import styled from 'styled-components';
|
||||
/* Footer */
|
||||
|
||||
export const StyledFooter = styled.footer`
|
||||
height: 250px;
|
||||
margin-top: 80px;
|
||||
padding: 30px 40px 10px 50px;
|
||||
background-color: #f9a826;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr 1fr 1fr 3fr;
|
||||
height: 250px;
|
||||
margin-top: 80px;
|
||||
padding: 30px 40px 10px 50px;
|
||||
background-color: #f9a826;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr 1fr 1fr 3fr;
|
||||
|
||||
& a {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
word-wrap: nowrap;
|
||||
}
|
||||
& a {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
word-wrap: nowrap;
|
||||
}
|
||||
|
||||
& h4 {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
word-wrap: nowrap;
|
||||
font-weight: 500px;
|
||||
margin: 0px;
|
||||
}
|
||||
& h4 {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
word-wrap: nowrap;
|
||||
font-weight: 500px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
& > svg {
|
||||
grid-column: 1;
|
||||
}
|
||||
& > svg {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
& div:nth-child(2) {
|
||||
grid-column: 2;
|
||||
}
|
||||
& div:nth-child(2) {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
& div:nth-child(3) {
|
||||
grid-column: 3;
|
||||
}
|
||||
& div:nth-child(4) {
|
||||
grid-column: 4;
|
||||
}
|
||||
& div:nth-child(3) {
|
||||
grid-column: 3;
|
||||
}
|
||||
& div:nth-child(4) {
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
& div:nth-child(5) {
|
||||
grid-column: 5;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
}
|
||||
& div:nth-child(5) {
|
||||
grid-column: 5;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
}
|
||||
`;
|
||||
|
@ -1,83 +1,81 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledNav = styled.nav`
|
||||
height: 90px;
|
||||
height: 90px;
|
||||
position: sticky;
|
||||
top: -16px;
|
||||
z-index: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 16px;
|
||||
position: sticky;
|
||||
top: -16px;
|
||||
z-index: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 16px;
|
||||
position: sticky;
|
||||
}
|
||||
&::before {
|
||||
top: 58px;
|
||||
box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 58px;
|
||||
box-shadow: 0 4px 10px 0 rgba(202, 34, 34, 0.05), 0 5px 30px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
&::after {
|
||||
background: linear-gradient(white, rgba(255, 255, 255, 0.3));
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(white, rgba(255, 255, 255, 0.3));
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.header-area-right2 {
|
||||
grid-column-start: 3;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.header-area-right2 {
|
||||
grid-column-start: 3;
|
||||
text-align: right;
|
||||
}
|
||||
.header-area-right1 span,
|
||||
.header-area-right2 span {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.header-area-right1 span,
|
||||
.header-area-right2 span {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
.header-area-content-span {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.header-area-content-span {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
display: none;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.header-area-content-span {
|
||||
display: none;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 3;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledDiv = styled.nav`
|
||||
background: white;
|
||||
height: 74px;
|
||||
padding: 10px;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
margin-top: -16px;
|
||||
z-index: 3;
|
||||
background: white;
|
||||
height: 74px;
|
||||
padding: 10px;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
margin-top: -16px;
|
||||
z-index: 3;
|
||||
|
||||
display: grid;
|
||||
white-space: nowrap;
|
||||
grid-template-columns: 150px 1fr 160px 20px;
|
||||
display: grid;
|
||||
white-space: nowrap;
|
||||
grid-template-columns: 150px 1fr 160px 20px;
|
||||
`;
|
||||
|
||||
export const Logo = styled.span`
|
||||
grid-column-start: 1;
|
||||
margin-left: 20px;
|
||||
margin-top: 0px;
|
||||
grid-column-start: 1;
|
||||
margin-left: 20px;
|
||||
margin-top: 0px;
|
||||
|
||||
.header-logo a {
|
||||
padding: 0px;
|
||||
}
|
||||
.header-logo a {
|
||||
padding: 0px;
|
||||
}
|
||||
`;
|
||||
|
@ -2,7 +2,7 @@ import MenuItem from '@mui/material/MenuItem';
|
||||
import withStyles from '@mui/styles/withStyles';
|
||||
|
||||
export const StyledMenuItem = withStyles({
|
||||
root: {
|
||||
width: '300px',
|
||||
},
|
||||
root: {
|
||||
width: '300px',
|
||||
},
|
||||
})(MenuItem);
|
||||
|
@ -3,23 +3,23 @@ import IconButton from '@mui/material/IconButton';
|
||||
import LabelTwoTone from '@mui/icons-material/LabelTwoTone';
|
||||
|
||||
export const StyledButton = styled(IconButton)`
|
||||
margin: 4px;
|
||||
margin: 4px;
|
||||
`;
|
||||
|
||||
export const NewLabelContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const NewLabelColor = styled(LabelTwoTone)`
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
export const CreateLabel = styled.div`
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
@ -5,25 +5,25 @@ import DialogTitle from '@mui/material/DialogTitle';
|
||||
import withStyles from '@mui/styles/withStyles';
|
||||
|
||||
export const StyledDialogContent = withStyles({
|
||||
root: {
|
||||
padding: '0px 39px',
|
||||
},
|
||||
root: {
|
||||
padding: '0px 39px',
|
||||
},
|
||||
})(DialogContent);
|
||||
|
||||
export const StyledDialogTitle = withStyles({
|
||||
root: {
|
||||
padding: '39px 39px 10px 39px',
|
||||
},
|
||||
root: {
|
||||
padding: '39px 39px 10px 39px',
|
||||
},
|
||||
})(DialogTitle);
|
||||
|
||||
export const StyledDialogActions = withStyles({
|
||||
root: {
|
||||
padding: '39px 39px 39px 39px',
|
||||
},
|
||||
root: {
|
||||
padding: '39px 39px 39px 39px',
|
||||
},
|
||||
})(DialogActions);
|
||||
|
||||
export const StyledDialog = withStyles({
|
||||
root: {
|
||||
borderRadius: '9px',
|
||||
},
|
||||
root: {
|
||||
borderRadius: '9px',
|
||||
},
|
||||
})(Dialog);
|
||||
|
@ -2,19 +2,19 @@ import createStyles from '@mui/styles/createStyles';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
select: {
|
||||
height: '40px',
|
||||
borderRadius: '9px',
|
||||
width: '300px',
|
||||
fontSize: '14px',
|
||||
margin: '0px 40px',
|
||||
},
|
||||
menu: {
|
||||
fontSize: '14px',
|
||||
},
|
||||
label: {
|
||||
margin: '5px 0px',
|
||||
},
|
||||
})
|
||||
createStyles({
|
||||
select: {
|
||||
height: '40px',
|
||||
borderRadius: '9px',
|
||||
width: '300px',
|
||||
fontSize: '14px',
|
||||
margin: '0px 40px',
|
||||
},
|
||||
menu: {
|
||||
fontSize: '14px',
|
||||
},
|
||||
label: {
|
||||
margin: '5px 0px',
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -2,14 +2,14 @@ import createStyles from '@mui/styles/createStyles';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
textarea: {
|
||||
width: '100%',
|
||||
padding: '15px 15px',
|
||||
marging: '0px 10px',
|
||||
},
|
||||
textDesc: {
|
||||
width: '150px',
|
||||
},
|
||||
})
|
||||
createStyles({
|
||||
textarea: {
|
||||
width: '100%',
|
||||
padding: '15px 15px',
|
||||
marging: '0px 10px',
|
||||
},
|
||||
textDesc: {
|
||||
width: '150px',
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -2,9 +2,9 @@ import createStyles from '@mui/styles/createStyles';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
paper: {
|
||||
maxWidth: '420px',
|
||||
},
|
||||
})
|
||||
createStyles({
|
||||
paper: {
|
||||
maxWidth: '420px',
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -2,11 +2,11 @@ import createStyles from '@mui/styles/createStyles';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
textarea: {
|
||||
width: '100%',
|
||||
padding: '15px 15px',
|
||||
marging: '0px 10px',
|
||||
},
|
||||
})
|
||||
createStyles({
|
||||
textarea: {
|
||||
width: '100%',
|
||||
padding: '15px 15px',
|
||||
marging: '0px 10px',
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -2,25 +2,25 @@ import createStyles from '@mui/styles/createStyles';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles(() =>
|
||||
createStyles({
|
||||
actionContainer: {
|
||||
padding: '10px 0px',
|
||||
border: '1px solid rgba(0, 0, 0, 0.12)',
|
||||
borderRadius: '8px 8px 0px 0px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
textArea: {
|
||||
width: '730px',
|
||||
margin: '5px 0px',
|
||||
padding: '10px',
|
||||
},
|
||||
listPaper: {
|
||||
maxHeight: 200,
|
||||
overflowY: 'scroll',
|
||||
},
|
||||
paper: {
|
||||
width: '850px',
|
||||
minWidth: '850px',
|
||||
},
|
||||
})
|
||||
createStyles({
|
||||
actionContainer: {
|
||||
padding: '10px 0px',
|
||||
border: '1px solid rgba(0, 0, 0, 0.12)',
|
||||
borderRadius: '8px 8px 0px 0px',
|
||||
textAlign: 'center',
|
||||
},
|
||||
textArea: {
|
||||
width: '730px',
|
||||
margin: '5px 0px',
|
||||
padding: '10px',
|
||||
},
|
||||
listPaper: {
|
||||
maxHeight: 200,
|
||||
overflowY: 'scroll',
|
||||
},
|
||||
paper: {
|
||||
width: '850px',
|
||||
minWidth: '850px',
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -2,7 +2,7 @@ import FormGroup from '@mui/material/FormGroup';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const LabelListContainer = styled(FormGroup)`
|
||||
max-height: 400px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: scroll;
|
||||
`;
|
||||
max-height: 400px;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: scroll;
|
||||
`;
|
||||
|
@ -8,8 +8,8 @@ export const LabelContainer = styled.div`
|
||||
align-items: center;
|
||||
font-size: smaller;
|
||||
`;
|
||||
|
||||
|
||||
export const LabelText = styled.span`
|
||||
margin-left: 4px;
|
||||
margin-right: 2px;
|
||||
`;
|
||||
`;
|
||||
|
@ -8,8 +8,8 @@ export const LabelContainer = styled.div`
|
||||
align-items: center;
|
||||
font-size: smaller;
|
||||
`;
|
||||
|
||||
|
||||
export const LabelText = styled.span`
|
||||
margin-left: 4px;
|
||||
margin-right: 2px;
|
||||
`;
|
||||
`;
|
||||
|
@ -4,108 +4,108 @@ import createStyles from '@mui/styles/createStyles';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
width: '100%',
|
||||
createStyles({
|
||||
root: {
|
||||
width: '100%',
|
||||
},
|
||||
paper: {
|
||||
width: '100%',
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
table: {
|
||||
minWidth: 750,
|
||||
'& tr:nth-child(even)': {
|
||||
background: 'white',
|
||||
},
|
||||
'& tr:nth-child(odd)': {
|
||||
background: 'rgba(221, 221, 221, 0.35)',
|
||||
},
|
||||
// '&:hover tr': {
|
||||
// backgroundColor: 'rgba(150, 150, 150, 0.7)',
|
||||
// }
|
||||
},
|
||||
headerCell: {
|
||||
background: 'white',
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(0, 0, 0, 0.44)',
|
||||
border: 0,
|
||||
},
|
||||
bodyCell: {
|
||||
border: '0px',
|
||||
},
|
||||
labelsCell: {
|
||||
maxWidth: '300px',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'right',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
visuallyHidden: {
|
||||
border: 0,
|
||||
clip: 'rect(0 0 0 0)',
|
||||
height: 1,
|
||||
margin: -1,
|
||||
overflow: 'hidden',
|
||||
padding: 0,
|
||||
position: 'absolute',
|
||||
top: 20,
|
||||
width: 1,
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid #cccccc',
|
||||
padding: '0',
|
||||
marging: '0',
|
||||
},
|
||||
toolbarActions: {
|
||||
flexGrow: 1,
|
||||
paddingLeft: '23px;',
|
||||
},
|
||||
toolbarListActions: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
search: {
|
||||
borderRadius: 9,
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
||||
},
|
||||
margin: '10px 0px',
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
marginLeft: theme.spacing(1),
|
||||
width: 'auto',
|
||||
},
|
||||
float: 'right',
|
||||
},
|
||||
searchIcon: {
|
||||
padding: '6px 0 0 5px',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
searchInputRoot: {
|
||||
color: 'inherit',
|
||||
},
|
||||
toolbalLeft: {
|
||||
float: 'right',
|
||||
},
|
||||
searchInputInput: {
|
||||
// padding: theme.spacing(1, 1, 1, 0),
|
||||
// vertical padding + font size from searchIcon
|
||||
border: '1px solid #ffa800',
|
||||
borderRadius: 4,
|
||||
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
||||
transition: theme.transitions.create('width'),
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: '12ch',
|
||||
'&:focus': {
|
||||
width: '20ch',
|
||||
},
|
||||
paper: {
|
||||
width: '100%',
|
||||
marginBottom: theme.spacing(2),
|
||||
},
|
||||
table: {
|
||||
minWidth: 750,
|
||||
'& tr:nth-child(even)': {
|
||||
background: 'white',
|
||||
},
|
||||
'& tr:nth-child(odd)': {
|
||||
background: 'rgba(221, 221, 221, 0.35)',
|
||||
},
|
||||
// '&:hover tr': {
|
||||
// backgroundColor: 'rgba(150, 150, 150, 0.7)',
|
||||
// }
|
||||
},
|
||||
headerCell: {
|
||||
background: 'white',
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(0, 0, 0, 0.44)',
|
||||
border: 0,
|
||||
},
|
||||
bodyCell: {
|
||||
border: '0px',
|
||||
},
|
||||
labelsCell: {
|
||||
maxWidth: '300px',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'right',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
},
|
||||
visuallyHidden: {
|
||||
border: 0,
|
||||
clip: 'rect(0 0 0 0)',
|
||||
height: 1,
|
||||
margin: -1,
|
||||
overflow: 'hidden',
|
||||
padding: 0,
|
||||
position: 'absolute',
|
||||
top: 20,
|
||||
width: 1,
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
borderBottom: '1px solid #cccccc',
|
||||
padding: '0',
|
||||
marging: '0',
|
||||
},
|
||||
toolbarActions: {
|
||||
flexGrow: 1,
|
||||
paddingLeft: '23px;'
|
||||
},
|
||||
toolbarListActions: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
search: {
|
||||
borderRadius: 9,
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
||||
'&:hover': {
|
||||
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
||||
},
|
||||
margin: '10px 0px',
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
marginLeft: theme.spacing(1),
|
||||
width: 'auto',
|
||||
},
|
||||
float: 'right',
|
||||
},
|
||||
searchIcon: {
|
||||
padding: '6px 0 0 5px',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
pointerEvents: 'none',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
searchInputRoot: {
|
||||
color: 'inherit',
|
||||
},
|
||||
toolbalLeft: {
|
||||
float: 'right',
|
||||
},
|
||||
searchInputInput: {
|
||||
// padding: theme.spacing(1, 1, 1, 0),
|
||||
// vertical padding + font size from searchIcon
|
||||
border: '1px solid #ffa800',
|
||||
borderRadius: 4,
|
||||
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
||||
transition: theme.transitions.create('width'),
|
||||
width: '100%',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: '12ch',
|
||||
'&:focus': {
|
||||
width: '20ch',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -6,61 +6,61 @@ import makeStyles from '@mui/styles/makeStyles';
|
||||
const drawerWidth = 300;
|
||||
|
||||
export const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
appBar: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
background: '#ffffff',
|
||||
},
|
||||
appBarShift: {
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
newMapButton: {
|
||||
marginRight: 10,
|
||||
minWidth: '130px',
|
||||
},
|
||||
importButton: {
|
||||
marginRight: 10,
|
||||
minWidth: '130px',
|
||||
},
|
||||
rightButtonGroup: {
|
||||
marginRight: 10,
|
||||
flexGrow: 10,
|
||||
textAlign: 'right',
|
||||
minWidth: '280px',
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
drawerOpen: {
|
||||
background: '#ffa800',
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
minHeight: '44px',
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: '24px 0px',
|
||||
},
|
||||
})
|
||||
createStyles({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
appBar: {
|
||||
zIndex: theme.zIndex.drawer + 1,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
background: '#ffffff',
|
||||
},
|
||||
appBarShift: {
|
||||
marginLeft: drawerWidth,
|
||||
width: `calc(100% - ${drawerWidth}px)`,
|
||||
transition: theme.transitions.create(['width', 'margin'], {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
newMapButton: {
|
||||
marginRight: 10,
|
||||
minWidth: '130px',
|
||||
},
|
||||
importButton: {
|
||||
marginRight: 10,
|
||||
minWidth: '130px',
|
||||
},
|
||||
rightButtonGroup: {
|
||||
marginRight: 10,
|
||||
flexGrow: 10,
|
||||
textAlign: 'right',
|
||||
minWidth: '280px',
|
||||
},
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
drawerOpen: {
|
||||
background: '#ffa800',
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create('width', {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
minHeight: '44px',
|
||||
},
|
||||
content: {
|
||||
flexGrow: 1,
|
||||
padding: '24px 0px',
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
@ -6,79 +6,82 @@ import { useSelector } from 'react-redux';
|
||||
import AppConfig from '../classes/app-config';
|
||||
import { RootState } from './rootReducer';
|
||||
|
||||
|
||||
export interface ClientStatus {
|
||||
state: 'healthy' | 'session-expired';
|
||||
msg?: string;
|
||||
state: 'healthy' | 'session-expired';
|
||||
msg?: string;
|
||||
}
|
||||
|
||||
export interface ClientState {
|
||||
instance: Client;
|
||||
status: ClientStatus;
|
||||
instance: Client;
|
||||
status: ClientStatus;
|
||||
}
|
||||
|
||||
const initialState: ClientState = {
|
||||
instance: AppConfig.buildClient(),
|
||||
status: { state: 'healthy' },
|
||||
instance: AppConfig.buildClient(),
|
||||
status: { state: 'healthy' },
|
||||
};
|
||||
|
||||
export const clientSlice = createSlice({
|
||||
name: 'client',
|
||||
initialState: initialState,
|
||||
reducers: {
|
||||
sessionExpired(state) {
|
||||
state.status = {
|
||||
state: 'session-expired',
|
||||
msg: 'Sessions has expired. You need to login again',
|
||||
};
|
||||
},
|
||||
name: 'client',
|
||||
initialState: initialState,
|
||||
reducers: {
|
||||
sessionExpired(state) {
|
||||
state.status = {
|
||||
state: 'session-expired',
|
||||
msg: 'Sessions has expired. You need to login again',
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
type MapLoadResult = {
|
||||
isLoading: boolean;
|
||||
error: ErrorInfo | null;
|
||||
map: MapInfo | null;
|
||||
isLoading: boolean;
|
||||
error: ErrorInfo | null;
|
||||
map: MapInfo | null;
|
||||
};
|
||||
|
||||
export const fetchMapById = (id: number): MapLoadResult => {
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>(`maps-${id}`, () => {
|
||||
return client.fetchAllMaps();
|
||||
});
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>(`maps-${id}`, () => {
|
||||
return client.fetchAllMaps();
|
||||
});
|
||||
|
||||
// If the map can not be loaded, create an error object.
|
||||
let map: MapInfo;
|
||||
let errorMsg: ErrorInfo = error;
|
||||
if (!isLoading) {
|
||||
// Sanitize error structure ...
|
||||
if (errorMsg) {
|
||||
errorMsg = Object.keys(error).length !== 0 ? error : null;
|
||||
}
|
||||
// Seach for object...
|
||||
map = data?.find((m) => m.id == id);
|
||||
if (!map && !errorMsg) {
|
||||
errorMsg = { msg: `Map with id ${id} could not be found. Please, reflesh the page. Map: ${JSON.stringify(data)}` }
|
||||
}
|
||||
// If the map can not be loaded, create an error object.
|
||||
let map: MapInfo;
|
||||
let errorMsg: ErrorInfo = error;
|
||||
if (!isLoading) {
|
||||
// Sanitize error structure ...
|
||||
if (errorMsg) {
|
||||
errorMsg = Object.keys(error).length !== 0 ? error : null;
|
||||
}
|
||||
return { isLoading: isLoading, error: errorMsg, map: map };
|
||||
// Seach for object...
|
||||
map = data?.find((m) => m.id == id);
|
||||
if (!map && !errorMsg) {
|
||||
errorMsg = {
|
||||
msg: `Map with id ${id} could not be found. Please, reflesh the page. Map: ${JSON.stringify(
|
||||
data,
|
||||
)}`,
|
||||
};
|
||||
}
|
||||
}
|
||||
return { isLoading: isLoading, error: errorMsg, map: map };
|
||||
};
|
||||
|
||||
export const fetchAccount = (): AccountInfo | undefined => {
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const { data } = useQuery<unknown, ErrorInfo, AccountInfo>('account', () => {
|
||||
return client.fetchAccountInfo();
|
||||
});
|
||||
return data;
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const { data } = useQuery<unknown, ErrorInfo, AccountInfo>('account', () => {
|
||||
return client.fetchAccountInfo();
|
||||
});
|
||||
return data;
|
||||
};
|
||||
|
||||
export const activeInstance = (state: RootState): Client => {
|
||||
return state.client.instance;
|
||||
return state.client.instance;
|
||||
};
|
||||
|
||||
export const activeInstanceStatus = (state: RootState): ClientStatus => {
|
||||
return state.client.status;
|
||||
return state.client.status;
|
||||
};
|
||||
|
||||
export const { sessionExpired } = clientSlice.actions;
|
||||
export default clientSlice.reducer;
|
||||
export default clientSlice.reducer;
|
||||
|
@ -1,30 +1,30 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { RootState } from "./rootReducer";
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import { RootState } from './rootReducer';
|
||||
|
||||
export interface EditorState {
|
||||
hotkeysEnabled: boolean;
|
||||
hotkeysEnabled: boolean;
|
||||
}
|
||||
|
||||
const initialState: EditorState = {
|
||||
hotkeysEnabled: true,
|
||||
hotkeysEnabled: true,
|
||||
};
|
||||
|
||||
export const editorSlice = createSlice({
|
||||
name: 'editor',
|
||||
initialState: initialState,
|
||||
reducers: {
|
||||
disableHotkeys(state) {
|
||||
state.hotkeysEnabled = false;
|
||||
},
|
||||
enableHotkeys(state) {
|
||||
state.hotkeysEnabled = true;
|
||||
},
|
||||
name: 'editor',
|
||||
initialState: initialState,
|
||||
reducers: {
|
||||
disableHotkeys(state) {
|
||||
state.hotkeysEnabled = false;
|
||||
},
|
||||
enableHotkeys(state) {
|
||||
state.hotkeysEnabled = true;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const hotkeysEnabled = (state: RootState): boolean => {
|
||||
return state.editor.hotkeysEnabled;
|
||||
return state.editor.hotkeysEnabled;
|
||||
};
|
||||
|
||||
export const { disableHotkeys, enableHotkeys } = editorSlice.actions;
|
||||
export default editorSlice.reducer;
|
||||
export default editorSlice.reducer;
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user