diff --git a/packages/mindplot/src/components/ActionIcon.js b/packages/mindplot/src/components/ActionIcon.js
index 73bf33a9..98afbf42 100644
--- a/packages/mindplot/src/components/ActionIcon.js
+++ b/packages/mindplot/src/components/ActionIcon.js
@@ -17,48 +17,49 @@
*/
import Icon from './Icon';
-const ActionIcon = new Class({
- Extends: Icon,
- initialize(topic, url) {
- this.parent(url);
+class ActionIcon extends Icon {
+
+ constructor(topic, url) {
+ super(url);
this._node = topic;
- },
+ }
+
getNode() {
return this._node;
- },
+ }
setPosition(x, y) {
const size = this.getSize();
this.getImage().setPosition(x - size.width / 2, y - size.height / 2);
- },
+ }
addEvent(event, fn) {
this.getImage().addEvent(event, fn);
- },
+ }
addToGroup(group) {
group.append(this.getImage());
- },
+ }
setVisibility(visible) {
this.getImage().setVisibility(visible);
- },
+ }
isVisible() {
return this.getImage().isVisible();
- },
+ }
setCursor(cursor) {
return this.getImage().setCursor(cursor);
- },
+ }
moveToBack(cursor) {
return this.getImage().moveToBack(cursor);
- },
+ }
moveToFront(cursor) {
return this.getImage().moveToFront(cursor);
- },
-});
+ }
+}
export default ActionIcon;
diff --git a/packages/mindplot/src/components/CentralTopic.js b/packages/mindplot/src/components/CentralTopic.js
index 644b1a78..9916bdb5 100644
--- a/packages/mindplot/src/components/CentralTopic.js
+++ b/packages/mindplot/src/components/CentralTopic.js
@@ -15,67 +15,57 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import Topic from './Topic';
import Shape from './util/Shape';
-const CentralTopic = new Class(
- /** @lends CentralTopic */ {
- Extends: Topic,
- /**
- * @extends mindplot.Topic
- * @constructs
- * @param model
- * @param options
- */
- initialize(model, options) {
- this.parent(model, options);
- },
+class CentralTopic extends Topic {
+ constructor(model, options) {
+ super(model, options);
+ }
- _registerEvents() {
- this.parent();
+ _registerEvents() {
+ super._registerEvents();
- // This disable the drag of the central topic.
- // But solves the problem of deselecting the nodes when the screen is clicked.
- this.addEvent('mousedown', (event) => {
- event.stopPropagation();
- });
- },
+ // This disable the drag of the central topic.
+ // But solves the problem of deselecting the nodes when the screen is clicked.
+ this.addEvent('mousedown', (event) => {
+ event.stopPropagation();
+ });
+ }
- /** */
- workoutIncomingConnectionPoint() {
- return this.getPosition();
- },
+ /** */
+ workoutIncomingConnectionPoint() {
+ return this.getPosition();
+ }
- /** */
- setCursor(type) {
- type = type == 'move' ? 'default' : type;
- this.parent(type);
- },
+ /** */
+ setCursor(type) {
+ super.setCursor(type === 'move' ? 'default' : type);
+ }
- /** */
- updateTopicShape() {},
+ /** */
+ updateTopicShape() {}
- _updatePositionOnChangeSize() {
- // Center main topic ...
- const zeroPoint = new web2d.Point(0, 0);
- this.setPosition(zeroPoint);
- },
+ _updatePositionOnChangeSize() {
+ // Center main topic ...
+ const zeroPoint = new web2d.Point(0, 0);
+ this.setPosition(zeroPoint);
+ }
- /** */
- getShrinkConnector() {
- return null;
- },
+ /** */
+ getShrinkConnector() {
+ return null;
+ }
- /** */
- workoutOutgoingConnectionPoint(targetPosition) {
- $assert(targetPosition, 'targetPoint can not be null');
- const pos = this.getPosition();
- const isAtRight = Shape.isAtRight(targetPosition, pos);
- const size = this.getSize();
- return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
- },
- },
-);
+ /** */
+ workoutOutgoingConnectionPoint(targetPosition) {
+ $assert(targetPosition, 'targetPoint can not be null');
+ const pos = this.getPosition();
+ const isAtRight = Shape.isAtRight(targetPosition, pos);
+ const size = this.getSize();
+ return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
+ }
+}
export default CentralTopic;
diff --git a/packages/mindplot/src/components/Command.js b/packages/mindplot/src/components/Command.js
index 6496551a..8fa423e6 100644
--- a/packages/mindplot/src/components/Command.js
+++ b/packages/mindplot/src/components/Command.js
@@ -17,21 +17,21 @@
*/
import { $defined } from '@wisemapping/core-js';
-const Command = new Class(/** @lends mindplot.Command */{
+class Command {
/**
* @classdesc The command base class for handling do/undo mindmap operations
* @constructs
*/
- initialize() {
+ constructor() {
this._id = Command._nextUUID();
- },
+ }
/**
* @abstract
*/
execute(commandContext) {
throw 'execute must be implemented.';
- },
+ }
/**
* Triggered by the undo button - reverses the executed command
@@ -39,7 +39,7 @@ const Command = new Class(/** @lends mindplot.Command */{
*/
undoExecute(commandContext) {
throw 'undo must be implemented.';
- },
+ }
/**
* Returns the unique id of this command
@@ -47,13 +47,13 @@ const Command = new Class(/** @lends mindplot.Command */{
*/
getId() {
return this._id;
- },
-});
+ }
+}
Command._nextUUID = function () {
if (!$defined(Command._uuid)) {
Command._uuid = 1;
- }
+}
Command._uuid += 1;
return Command._uuid;
diff --git a/packages/mindplot/src/components/ConnectionLine.js b/packages/mindplot/src/components/ConnectionLine.js
index 40722cb6..f1deb86d 100644
--- a/packages/mindplot/src/components/ConnectionLine.js
+++ b/packages/mindplot/src/components/ConnectionLine.js
@@ -16,13 +16,13 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import INodeModel, { TopicShape } from './model/INodeModel';
import TopicConfig from './TopicConfig';
-const ConnectionLine = new Class({
- initialize(sourceNode, targetNode, lineType) {
+class ConnectionLine {
+ constructor(sourceNode, targetNode, lineType) {
$assert(targetNode, 'parentNode node can not be null');
$assert(sourceNode, 'childNode node can not be null');
$assert(sourceNode !== targetNode, 'Circular connection');
@@ -47,14 +47,14 @@ const ConnectionLine = new Class({
line.setFill(strokeColor, 1);
this._line2d = line;
- },
+ }
_getCtrlPoints(sourceNode, targetNode) {
const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
const deltaX = (srcPos.x - destPos.x) / 3;
return [new web2d.Point(deltaX, 0), new web2d.Point(-deltaX, 0)];
- },
+ }
_createLine(lineType, defaultStyle) {
if (!$defined(lineType)) {
@@ -79,19 +79,19 @@ const ConnectionLine = new Class({
break;
}
return line;
- },
+ }
setVisibility(value) {
this._line2d.setVisibility(value);
- },
+ }
isVisible() {
return this._line2d.isVisible();
- },
+ }
setOpacity(opacity) {
this._line2d.setOpacity(opacity);
- },
+ }
redraw() {
const line2d = this._line2d;
@@ -117,7 +117,7 @@ const ConnectionLine = new Class({
// Add connector ...
this._positionateConnector(targetTopic);
- },
+ }
_positionateConnector(targetTopic) {
const targetPosition = targetTopic.getPosition();
@@ -142,61 +142,61 @@ const ConnectionLine = new Class({
}
connector.setPosition(x, y);
}
- },
+ }
setStroke(color, style, opacity) {
this._line2d.setStroke(null, null, color, opacity);
- },
+ }
addToWorkspace(workspace) {
workspace.append(this._line2d);
this._line2d.moveToBack();
- },
+ }
removeFromWorkspace(workspace) {
workspace.removeChild(this._line2d);
- },
+ }
getTargetTopic() {
return this._targetTopic;
- },
+ }
getSourceTopic() {
return this._sourceTopic;
- },
+ }
getLineType() {
return this._lineType;
- },
+ }
getLine() {
return this._line2d;
- },
+ }
getModel() {
return this._model;
- },
+ }
setModel(model) {
this._model = model;
- },
+ }
getType() {
return 'ConnectionLine';
- },
+ }
getId() {
return this._model.getId();
- },
+ }
moveToBack() {
this._line2d.moveToBack();
- },
+ }
moveToFront() {
this._line2d.moveToFront();
- },
-});
+ }
+}
ConnectionLine.getStrokeColor = () => '#495879';
diff --git a/packages/mindplot/src/components/ControlPoint.js b/packages/mindplot/src/components/ControlPoint.js
index 34277ee4..c2839d0c 100644
--- a/packages/mindplot/src/components/ControlPoint.js
+++ b/packages/mindplot/src/components/ControlPoint.js
@@ -15,14 +15,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import { $defined } from '@wisemapping/core-js';
import Shape from './util/Shape';
import ActionDispatcher from './ActionDispatcher';
-const ControlPoint = new Class({
- initialize() {
+class ControlPoint {
+ constructor() {
const control1 = new web2d.Elipse({
width: 6,
height: 6,
@@ -68,7 +68,7 @@ const ControlPoint = new Class({
this._controlPointsController[1].addEvent('dblclick', (event) => {
me._mouseClick(event);
});
- },
+ }
setLine(line) {
if ($defined(this._line)) {
@@ -82,11 +82,11 @@ const ControlPoint = new Class({
this._orignalCtrlPoint[1] = this._controls[1].clone();
this._endPoint[0] = this._line.getLine().getFrom().clone();
this._endPoint[1] = this._line.getLine().getTo().clone();
- },
+ }
redraw() {
if ($defined(this._line)) this._createControlPoint();
- },
+ }
_createControlPoint() {
this._controls = this._line.getLine().getControlPoints();
@@ -110,9 +110,9 @@ const ControlPoint = new Class({
this._controls[ControlPoint.TO].x + pos.x,
this._controls[ControlPoint.TO].y + pos.y - 3,
);
- },
+ }
- _removeLine() {},
+ _removeLine() {}
_mouseDown(event, point, me) {
if (!this._isBinded) {
@@ -130,7 +130,7 @@ const ControlPoint = new Class({
event.preventDefault();
event.stopPropagation();
return false;
- },
+ }
_mouseMoveEvent(event, point) {
const screen = this._workspace.getScreenManager();
@@ -153,7 +153,7 @@ const ControlPoint = new Class({
this._controlLines[point].setFrom(cords.x, cords.y);
this._controlLines[point].setTo(pos.x - 2, pos.y);
this._line.getLine().updateLine(point);
- },
+ }
_mouseUp(event, point) {
this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction);
@@ -162,13 +162,13 @@ const ControlPoint = new Class({
const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.moveControlPoint(this, point);
this._isBinded = false;
- },
+ }
_mouseClick(event) {
event.preventDefault();
event.stopPropagation();
return false;
- },
+ }
setVisibility(visible) {
if (visible) {
@@ -181,7 +181,7 @@ const ControlPoint = new Class({
this._controlPointsController[1].setVisibility(visible);
this._controlLines[0].setVisibility(visible);
this._controlLines[1].setVisibility(visible);
- },
+ }
addToWorkspace(workspace) {
this._workspace = workspace;
@@ -189,7 +189,7 @@ const ControlPoint = new Class({
workspace.append(this._controlPointsController[1]);
workspace.append(this._controlLines[0]);
workspace.append(this._controlLines[1]);
- },
+ }
removeFromWorkspace(workspace) {
this._workspace = null;
@@ -197,20 +197,20 @@ const ControlPoint = new Class({
workspace.removeChild(this._controlPointsController[1]);
workspace.removeChild(this._controlLines[0]);
workspace.removeChild(this._controlLines[1]);
- },
+ }
getControlPoint(index) {
return this._controls[index];
- },
+ }
getOriginalEndPoint(index) {
return this._endPoint[index];
- },
+ }
getOriginalCtrlPoint(index) {
return this._orignalCtrlPoint[index];
- },
-});
+ }
+}
ControlPoint.FROM = 0;
ControlPoint.TO = 1;
diff --git a/packages/mindplot/src/components/DesignerKeyboard.js b/packages/mindplot/src/components/DesignerKeyboard.js
index 4089bdc3..14433686 100644
--- a/packages/mindplot/src/components/DesignerKeyboard.js
+++ b/packages/mindplot/src/components/DesignerKeyboard.js
@@ -18,13 +18,12 @@
import { $assert } from '@wisemapping/core-js';
import Keyboard from './Keyboard';
-const DesignerKeyboard = new Class({
- Extends: Keyboard,
-
- initialize(designer) {
+class DesignerKeyboard extends Keyboard {
+ constructor(designer) {
+ super(designer);
$assert(designer, 'designer can not be null');
this._registerEvents(designer);
- },
+ }
_registerEvents(designer) {
// Try with the keyboard ..
@@ -264,7 +263,7 @@ const DesignerKeyboard = new Class({
}
}
});
- },
+ }
_goToBrother(designer, node, direction) {
const parent = node.getParent();
@@ -277,10 +276,10 @@ const DesignerKeyboard = new Class({
let dist = null;
for (let i = 0; i < brothers.length; i++) {
const sameSide = (x * brothers[i].getPosition().x) >= 0;
- if (brothers[i] != node && sameSide) {
+ if (brothers[i] !== node && sameSide) {
const brother = brothers[i];
const brotherY = brother.getPosition().y;
- if (direction == 'DOWN' && brotherY > y) {
+ if (direction === 'DOWN' && brotherY > y) {
let distancia = y - brotherY;
if (distancia < 0) {
distancia *= (-1);
@@ -289,7 +288,7 @@ const DesignerKeyboard = new Class({
dist = distancia;
target = brothers[i];
}
- } else if (direction == 'UP' && brotherY < y) {
+ } else if (direction === 'UP' && brotherY < y) {
let distance = y - brotherY;
if (distance < 0) {
distance *= (-1);
@@ -303,7 +302,7 @@ const DesignerKeyboard = new Class({
}
this._goToNode(designer, target);
}
- },
+ }
_goToSideChild(designer, node, side) {
const children = node.getChildren();
@@ -313,13 +312,13 @@ const DesignerKeyboard = new Class({
for (let i = 0; i < children.length; i++) {
const child = children[i];
const childY = child.getPosition().y;
- if (side == 'LEFT' && child.getPosition().x < 0) {
+ if (side === 'LEFT' && child.getPosition().x < 0) {
if (top == null || childY < top) {
target = child;
top = childY;
}
}
- if (side == 'RIGHT' && child.getPosition().x > 0) {
+ if (side === 'RIGHT' && child.getPosition().x > 0) {
if (top == null || childY < top) {
target = child;
top = childY;
@@ -329,14 +328,14 @@ const DesignerKeyboard = new Class({
this._goToNode(designer, target);
}
- },
+ }
_goToParent(designer, node) {
const parent = node.getParent();
if (parent) {
this._goToNode(designer, parent);
}
- },
+ }
_goToChild(designer, node) {
const children = node.getChildren();
@@ -352,7 +351,7 @@ const DesignerKeyboard = new Class({
}
this._goToNode(designer, target);
}
- },
+ }
_goToNode(designer, node) {
// First deselect all the nodes ...
@@ -360,9 +359,8 @@ const DesignerKeyboard = new Class({
// Give focus to the selected node....
node.setOnFocus(true);
- },
-
-});
+ }
+}
DesignerKeyboard.specialKeys = {
8: 'backspace',
diff --git a/packages/mindplot/src/components/DesignerUndoManager.js b/packages/mindplot/src/components/DesignerUndoManager.js
index d6b425ff..fdc7388d 100644
--- a/packages/mindplot/src/components/DesignerUndoManager.js
+++ b/packages/mindplot/src/components/DesignerUndoManager.js
@@ -17,12 +17,12 @@
*/
import { $assert } from '@wisemapping/core-js';
-const DesignerUndoManager = new Class({
- initialize(fireChange) {
+class DesignerUndoManager {
+ constructor() {
this._undoQueue = [];
this._redoQueue = [];
this._baseId = 0;
- },
+ }
enqueue(command) {
$assert(command, 'Command can not be null');
@@ -37,7 +37,7 @@ const DesignerUndoManager = new Class({
this._undoQueue.push(command);
}
this._redoQueue = [];
- },
+ }
execUndo(commandContext) {
if (this._undoQueue.length > 0) {
@@ -46,7 +46,7 @@ const DesignerUndoManager = new Class({
command.undoExecute(commandContext);
}
- },
+ }
execRedo(commandContext) {
if (this._redoQueue.length > 0) {
@@ -54,11 +54,11 @@ const DesignerUndoManager = new Class({
this._undoQueue.push(command);
command.execute(commandContext);
}
- },
+ }
buildEvent() {
return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length };
- },
+ }
markAsChangeBase() {
const undoLength = this._undoQueue.length;
@@ -68,7 +68,7 @@ const DesignerUndoManager = new Class({
} else {
this._baseId = 0;
}
- },
+ }
hasBeenChanged() {
let result = true;
@@ -80,7 +80,7 @@ const DesignerUndoManager = new Class({
result = (this._baseId != command.getId());
}
return result;
- },
-});
+ }
+}
export default DesignerUndoManager;
diff --git a/packages/mindplot/src/components/DragConnector.js b/packages/mindplot/src/components/DragConnector.js
index e65402ab..d6ff028e 100644
--- a/packages/mindplot/src/components/DragConnector.js
+++ b/packages/mindplot/src/components/DragConnector.js
@@ -16,15 +16,16 @@
* limitations under the License.
*/
import { $assert } from '@wisemapping/core-js';
-const DragConnector = new Class({
- initialize(designerModel, workspace) {
+
+class DragConnector {
+ constructor(designerModel, workspace) {
$assert(designerModel, 'designerModel can not be null');
$assert(workspace, 'workspace can not be null');
// this._layoutManager = layoutManager;
this._designerModel = designerModel;
this._workspace = workspace;
- },
+ }
checkConnection(dragTopic) {
const topics = this._designerModel.getTopics();
@@ -41,7 +42,7 @@ const DragConnector = new Class({
if (!dragTopic.isConnected() && candidates.length > 0) {
dragTopic.connectTo(candidates[0]);
}
- },
+ }
_searchConnectionCandidates(dragTopic) {
let topics = this._designerModel.getTopics();
@@ -92,18 +93,18 @@ const DragConnector = new Class({
return me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection);
});
return topics;
- },
+ }
_proximityWeight(isAligned, target, sPos, currentConnection) {
const tPos = target.getPosition();
return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x) + Math.abs(tPos.y - sPos.y) + (currentConnection == target ? 0 : 100);
- },
+ }
_isVerticallyAligned(targetSize, targetPosition, sourcePosition) {
return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
- },
+ }
-});
+}
DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE = 80;
diff --git a/packages/mindplot/src/components/DragManager.js b/packages/mindplot/src/components/DragManager.js
index b4a587ae..c5942cda 100644
--- a/packages/mindplot/src/components/DragManager.js
+++ b/packages/mindplot/src/components/DragManager.js
@@ -18,15 +18,15 @@
import { $assert, $defined } from '@wisemapping/core-js';
import DragTopic from './DragTopic';
-const DragManager = new Class({
- initialize(workspace, eventDispatcher) {
+class DragManager {
+ constructor(workspace, eventDispatcher) {
this._workspace = workspace;
this._designerModel = workspace;
this._listeners = {};
this._isDragInProcess = false;
this._eventDispatcher = eventDispatcher;
DragTopic.init(this._workspace);
- },
+ }
add(node) {
// Add behaviour ...
@@ -34,7 +34,7 @@ const DragManager = new Class({
const screen = workspace.getScreenManager();
const dragManager = this;
const me = this;
- const mouseDownListener = function (event) {
+ const mouseDownListener = function mouseDownListener(event) {
if (workspace.isWorkspaceEventsEnabled()) {
// Disable double drag...
workspace.enableWorkspaceEvents(false);
@@ -56,7 +56,7 @@ const DragManager = new Class({
}
};
node.addEvent('mousedown', mouseDownListener);
- },
+ }
remove(node) {
const nodes = this._topics;
@@ -68,7 +68,7 @@ const DragManager = new Class({
index = i;
}
}
- },
+ }
_buildMouseMoveListener(workspace, dragNode, dragManager) {
const screen = workspace.getScreenManager();
@@ -98,7 +98,7 @@ const DragManager = new Class({
};
dragManager._mouseMoveListener = result;
return result;
- },
+ }
_buildMouseUpListener(workspace, node, dragNode, dragManager) {
const screen = workspace.getScreenManager();
@@ -131,7 +131,7 @@ const DragManager = new Class({
};
dragManager._mouseUpListener = result;
return result;
- },
+ }
/**
* type:
@@ -141,7 +141,7 @@ const DragManager = new Class({
*/
addEvent(type, listener) {
this._listeners[type] = listener;
- },
-});
+ }
+}
export default DragManager;
diff --git a/packages/mindplot/src/components/DragPivot.js b/packages/mindplot/src/components/DragPivot.js
index 215e5fae..24952b40 100644
--- a/packages/mindplot/src/components/DragPivot.js
+++ b/packages/mindplot/src/components/DragPivot.js
@@ -16,14 +16,14 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import DragTopicConfig from './DragTopicConfig';
import Shape from './util/Shape';
import INodeModel from './model/INodeModel';
-const DragPivot = new Class({
- initialize() {
+class DragPivot {
+ constructor() {
this._position = new web2d.Point();
this._size = DragTopicConfig.PIVOT_SIZE;
@@ -33,15 +33,15 @@ const DragPivot = new Class({
this._connectRect = this._buildRect();
this._targetTopic = null;
this._isVisible = false;
- },
+ }
isVisible() {
return this._isVisible;
- },
+ }
getTargetTopic() {
return this._targetTopic;
- },
+ }
_buildStraightLine() {
const line = new web2d.CurvedLine();
@@ -50,7 +50,7 @@ const DragPivot = new Class({
line.setOpacity(0.4);
line.setVisibility(false);
return line;
- },
+ }
_buildCurvedLine() {
const line = new web2d.CurvedLine();
@@ -59,7 +59,7 @@ const DragPivot = new Class({
line.setOpacity(0.4);
line.setVisibility(false);
return line;
- },
+ }
_redrawLine() {
// Update line position.
@@ -90,16 +90,16 @@ const DragPivot = new Class({
// This solve several strange effects ;)
const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint);
line.setTo(targetPoint.x, targetPoint.y);
- },
+ }
setPosition(point) {
this._position = point;
this._redrawLine();
- },
+ }
getPosition() {
return this._position;
- },
+ }
_buildRect() {
const size = this._size;
@@ -113,16 +113,16 @@ const DragPivot = new Class({
const rect = new web2d.Rect(0, rectAttributes);
rect.setVisibility(false);
return rect;
- },
+ }
_getPivotRect() {
return this._dragPivot;
- },
+ }
getSize() {
const elem2d = this._getPivotRect();
return elem2d.getSize();
- },
+ }
setVisibility(value) {
if (this.isVisible() != value) {
@@ -138,7 +138,7 @@ const DragPivot = new Class({
}
this._isVisible = value;
}
- },
+ }
// If the node is connected, validate that there is a line connecting both...
_getConnectionLine() {
@@ -152,7 +152,7 @@ const DragPivot = new Class({
}
}
return result;
- },
+ }
addToWorkspace(workspace) {
const pivotRect = this._getPivotRect();
@@ -178,7 +178,7 @@ const DragPivot = new Class({
connectRect.setVisibility(false);
workspace.append(connectRect);
connectRect.moveToBack();
- },
+ }
removeFromWorkspace(workspace) {
const shape = this._getPivotRect();
@@ -194,7 +194,7 @@ const DragPivot = new Class({
if ($defined(this._curvedLine)) {
workspace.removeChild(this._curvedLine);
}
- },
+ }
connectTo(targetTopic, position) {
$assert(!this._outgoingLine, 'Could not connect an already connected node');
@@ -226,7 +226,7 @@ const DragPivot = new Class({
pivotRect.setPosition(position.x, position.y);
this._redrawLine();
- },
+ }
disconnect(workspace) {
$assert(workspace, 'workspace can not be null.');
@@ -234,7 +234,7 @@ const DragPivot = new Class({
this.setVisibility(false);
this._targetTopic = null;
- },
-});
+ }
+}
export default DragPivot;
diff --git a/packages/mindplot/src/components/DragTopic.js b/packages/mindplot/src/components/DragTopic.js
index dc59a3aa..cca0d36d 100644
--- a/packages/mindplot/src/components/DragTopic.js
+++ b/packages/mindplot/src/components/DragTopic.js
@@ -16,13 +16,13 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import ActionDispatcher from './ActionDispatcher';
import DragPivot from './DragPivot';
-const DragTopic = new Class({
- initialize(dragShape, draggedNode, layoutManger) {
+class DragTopic {
+ constructor(dragShape, draggedNode, layoutManger) {
$assert(dragShape, 'Rect can not be null.');
$assert(draggedNode, 'draggedNode can not be null.');
$assert(layoutManger, 'layoutManger can not be null.');
@@ -34,11 +34,11 @@ const DragTopic = new Class({
this._position = new web2d.Point();
this._isInWorkspace = false;
this._isFreeLayoutEnabled = false;
- },
+ }
setOrder(order) {
this._order = order;
- },
+ }
setPosition(x, y) {
// Update drag shadow position ....
@@ -78,7 +78,7 @@ const DragTopic = new Class({
this.setOrder(predict.order);
}
}
- },
+ }
updateFreeLayout(event) {
const isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac);
@@ -87,27 +87,27 @@ const DragTopic = new Class({
dragPivot.setVisibility(!isFreeEnabled);
this._isFreeLayoutEnabled = isFreeEnabled;
}
- },
+ }
setVisibility(value) {
const dragPivot = this._getDragPivot();
dragPivot.setVisibility(value);
- },
+ }
isVisible() {
const dragPivot = this._getDragPivot();
return dragPivot.isVisible();
- },
+ }
getInnerShape() {
return this._elem2d;
- },
+ }
disconnect(workspace) {
// Clear connection line ...
const dragPivot = this._getDragPivot();
dragPivot.disconnect(workspace);
- },
+ }
connectTo(parent) {
$assert(parent, 'Parent connection node can not be null.');
@@ -126,11 +126,11 @@ const DragTopic = new Class({
dragPivot.setVisibility(true);
this.setOrder(predict.order);
- },
+ }
getDraggedTopic() {
return this._draggedNode;
- },
+ }
removeFromWorkspace(workspace) {
if (this._isInWorkspace) {
@@ -143,11 +143,11 @@ const DragTopic = new Class({
this._isInWorkspace = false;
}
- },
+ }
isInWorkspace() {
return this._isInWorkspace;
- },
+ }
addToWorkspace(workspace) {
if (!this._isInWorkspace) {
@@ -156,19 +156,19 @@ const DragTopic = new Class({
dragPivot.addToWorkspace(workspace);
this._isInWorkspace = true;
}
- },
+ }
_getDragPivot() {
return DragTopic.__getDragPivot();
- },
+ }
getPosition() {
return this._position;
- },
+ }
isDragTopic() {
return true;
- },
+ }
applyChanges(workspace) {
$assert(workspace, 'workspace can not be null');
@@ -193,23 +193,23 @@ const DragTopic = new Class({
} else {
actionDispatcher.moveTopic(topicId, position);
}
- },
+ }
getConnectedToTopic() {
const dragPivot = this._getDragPivot();
return dragPivot.getTargetTopic();
- },
+ }
isConnected() {
return this.getConnectedToTopic() != null;
- },
+ }
isFreeLayoutOn() {
// return this._isFreeLayoutEnabled;
// Disable free layout ...
return false;
- },
-});
+ }
+}
DragTopic.init = function (workspace) {
$assert(workspace, 'workspace can not be null');
diff --git a/packages/mindplot/src/components/EditorProperties.js b/packages/mindplot/src/components/EditorProperties.js
index 281710a2..a18749e5 100644
--- a/packages/mindplot/src/components/EditorProperties.js
+++ b/packages/mindplot/src/components/EditorProperties.js
@@ -16,23 +16,23 @@
* limitations under the License.
*/
-const EditorProperties = new Class({
- initialize() {
+class EditorProperties {
+ constructor() {
this._zoom = 0;
this._position = 0;
- },
+ }
setZoom(zoom) {
this._zoom = zoom;
- },
+ }
getZoom() {
return this._zoom;
- },
+ }
asProperties() {
return `zoom=${this._zoom}\n`;
- },
-});
+ }
+}
export default EditorProperties;
diff --git a/packages/mindplot/src/components/Icon.js b/packages/mindplot/src/components/Icon.js
index 820ff042..15ccf7a1 100644
--- a/packages/mindplot/src/components/Icon.js
+++ b/packages/mindplot/src/components/Icon.js
@@ -16,44 +16,45 @@
* limitations under the License.
*/
import { $assert } from "@wisemapping/core-js";
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
-const Icon = new Class({
- initialize(url) {
+class Icon {
+ constructor(url) {
$assert(url, 'topic can not be null');
this._image = new web2d.Image();
this._image.setHref(url);
this._image.setSize(Icon.SIZE, Icon.SIZE);
- },
+ }
getImage() {
return this._image;
- },
+ }
setGroup(group) {
this._group = group;
- },
+ }
getGroup() {
return this._group;
- },
+ }
getSize() {
return this._image.getSize();
- },
+ }
getPosition() {
return this._image.getPosition();
- },
+ }
addEvent(type, fnc) {
this._image.addEvent(type, fnc);
- },
+ }
+ // eslint-disable-next-line class-methods-use-this
remove() {
throw new Error('Unsupported operation');
- },
-});
+ }
+}
Icon.SIZE = 90;
diff --git a/packages/mindplot/src/components/IconGroup.js b/packages/mindplot/src/components/IconGroup.js
index 6c819dda..fef8037b 100644
--- a/packages/mindplot/src/components/IconGroup.js
+++ b/packages/mindplot/src/components/IconGroup.js
@@ -16,7 +16,7 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import Icon from './Icon';
diff --git a/packages/mindplot/src/components/ImageIcon.js b/packages/mindplot/src/components/ImageIcon.js
index 9604122f..e2379220 100644
--- a/packages/mindplot/src/components/ImageIcon.js
+++ b/packages/mindplot/src/components/ImageIcon.js
@@ -15,57 +15,56 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { $assert } from "@wisemapping/core-js";
+import { $assert } from '@wisemapping/core-js';
import Icon from './Icon';
import ActionDispatcher from './ActionDispatcher';
-const ImageIcon = new Class({
- Extends: Icon,
- initialize(topic, iconModel, readOnly) {
+class ImageIcon extends Icon {
+ constructor(topic, iconModel, readOnly) {
$assert(iconModel, 'iconModel can not be null');
$assert(topic, 'topic can not be null');
- this._topicId = topic.getId();
- this._featureModel = iconModel;
-
// Build graph image representation ...
const iconType = iconModel.getIconType();
- const imgUrl = this._getImageUrl(iconType);
- this.parent(imgUrl);
+ const imgUrl = ImageIcon._getImageUrl(iconType);
+ super(imgUrl);
+ this._topicId = topic.getId();
+ this._featureModel = iconModel;
+
if (!readOnly) {
// Icon
const image = this.getImage();
const me = this;
image.addEvent('click', () => {
const iconType = iconModel.getIconType();
- const newIconType = me._getNextFamilyIconId(iconType);
+ const newIconType = ImageIcon._getNextFamilyIconId(iconType);
iconModel.setIconType(newIconType);
- const imgUrl = me._getImageUrl(newIconType);
+ const imgUrl = ImageIcon._getImageUrl(newIconType);
me._image.setHref(imgUrl);
});
this._image.setCursor('pointer');
}
- },
+ }
- _getImageUrl(iconId) {
+ static _getImageUrl(iconId) {
return `icons/${iconId}.png`;
- },
+ }
getModel() {
return this._featureModel;
- },
+ }
- _getNextFamilyIconId(iconId) {
- const familyIcons = this._getFamilyIcons(iconId);
+ static _getNextFamilyIconId(iconId) {
+ const familyIcons = ImageIcon._getFamilyIcons(iconId);
$assert(familyIcons != null, 'Family Icon not found!');
let result = null;
for (let i = 0; i < familyIcons.length && result == null; i++) {
- if (familyIcons[i] == iconId) {
+ if (familyIcons[i] === iconId) {
// Is last one?
- if (i == (familyIcons.length - 1)) {
+ if (i === (familyIcons.length - 1)) {
result = familyIcons[0];
} else {
result = familyIcons[i + 1];
@@ -75,32 +74,32 @@ const ImageIcon = new Class({
}
return result;
- },
+ }
- _getFamilyIcons(iconId) {
+ static _getFamilyIcons(iconId) {
$assert(iconId != null, 'id must not be null');
- $assert(iconId.indexOf('_') != -1, "Invalid icon id (it must contain '_')");
+ $assert(iconId.indexOf('_') !== -1, "Invalid icon id (it must contain '_')");
let result = null;
for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i++) {
const family = ImageIcon.prototype.ICON_FAMILIES[i];
const iconFamilyId = iconId.substr(0, iconId.indexOf('_'));
- if (family.id == iconFamilyId) {
+ if (family.id === iconFamilyId) {
result = family.icons;
break;
}
}
return result;
- },
+ }
remove() {
const actionDispatcher = ActionDispatcher.getInstance();
const featureId = this._featureModel.getId();
const topicId = this._topicId;
actionDispatcher.removeFeatureFromTopic(topicId, featureId);
- },
-});
+ }
+}
ImageIcon.prototype.ICON_FAMILIES = [
{ id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },
diff --git a/packages/mindplot/src/components/LinkIcon.js b/packages/mindplot/src/components/LinkIcon.js
index 1e98b9c6..8c4d7780 100644
--- a/packages/mindplot/src/components/LinkIcon.js
+++ b/packages/mindplot/src/components/LinkIcon.js
@@ -20,20 +20,18 @@ import $ from '@libraries/jquery-2.1.0';
import Icon from './Icon';
import LinkIconTooltip from './widget/LinkIconTooltip';
-const LinkIcon = new Class({
-
- Extends: Icon,
- initialize(topic, linkModel, readOnly) {
+class LinkIcon extends Icon {
+ constructor(topic, linkModel, readOnly) {
$assert(topic, 'topic can not be null');
$assert(linkModel, 'linkModel can not be null');
- this.parent(LinkIcon.IMAGE_URL);
+ super(LinkIcon.IMAGE_URL);
this._linksModel = linkModel;
this._topic = topic;
this._readOnly = readOnly;
this._registerEvents();
- },
+ }
_registerEvents() {
this._image.setCursor('pointer');
@@ -61,12 +59,12 @@ const LinkIcon = new Class({
$(this.getImage().peer._native).mouseenter(() => {
me._tip.show();
});
- },
+ }
getModel() {
return this._linksModel;
- },
-});
+ }
+}
LinkIcon.IMAGE_URL = 'images/links.png';
export default LinkIcon;
diff --git a/packages/mindplot/src/components/LocalStorageManager.js b/packages/mindplot/src/components/LocalStorageManager.js
index 8b7f12a2..a1f4ef23 100644
--- a/packages/mindplot/src/components/LocalStorageManager.js
+++ b/packages/mindplot/src/components/LocalStorageManager.js
@@ -18,21 +18,20 @@
import $ from '@libraries/jquery-2.1.0';
import PersistenceManager from './PersistenceManager';
-const LocalStorageManager = new Class({
- Extends: PersistenceManager,
- initialize(documentUrl, forceLoad) {
- this.parent();
+class LocalStorageManager extends PersistenceManager {
+ constructor(documentUrl, forceLoad) {
+ super();
this.documentUrl = documentUrl;
this.forceLoad = forceLoad;
- },
+ }
saveMapXml(mapId, mapXml, pref, saveHistory, events) {
localStorage.setItem(`${mapId}-xml`, mapXml);
- },
+ }
discardChanges(mapId) {
localStorage.removeItem(`${mapId}-xml`);
- },
+ }
loadMapDom(mapId) {
let xml = localStorage.getItem(`${mapId}-xml`);
@@ -54,11 +53,11 @@ const LocalStorageManager = new Class({
}
return jQuery.parseXML(xml);
- },
+ }
unlockMap(mindmap) {
// Ignore, no implementation required ...
- },
-});
+ }
+}
export default LocalStorageManager;
diff --git a/packages/mindplot/src/components/MainTopic.js b/packages/mindplot/src/components/MainTopic.js
index 74a40c62..19e49215 100644
--- a/packages/mindplot/src/components/MainTopic.js
+++ b/packages/mindplot/src/components/MainTopic.js
@@ -16,148 +16,144 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import Topic from './Topic';
import { TopicShape } from './model/INodeModel';
import Shape from './util/Shape';
-const MainTopic = new Class(
- /** @lends MainTopic */ {
- Extends: Topic,
- /**
+class MainTopic extends Topic {
+ /**
* @extends mindplot.Topic
* @constructs
* @param model
* @param options
*/
- initialize(model, options) {
- this.parent(model, options);
- },
+ constructor(model, options) {
+ super(model, options);
+ this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
+ }
- INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
+ _buildDragShape() {
+ const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
+ const size = this.getSize();
+ innerShape.setSize(size.width, size.height);
+ innerShape.setPosition(0, 0);
+ innerShape.setOpacity(0.5);
+ innerShape.setCursor('default');
+ innerShape.setVisibility(true);
- _buildDragShape() {
- const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
- const size = this.getSize();
- innerShape.setSize(size.width, size.height);
- innerShape.setPosition(0, 0);
- innerShape.setOpacity(0.5);
- innerShape.setCursor('default');
- innerShape.setVisibility(true);
+ const brColor = this.getBorderColor();
+ innerShape.setAttribute('strokeColor', brColor);
- const brColor = this.getBorderColor();
- innerShape.setAttribute('strokeColor', brColor);
+ const bgColor = this.getBackgroundColor();
+ innerShape.setAttribute('fillColor', bgColor);
- const bgColor = this.getBackgroundColor();
- innerShape.setAttribute('fillColor', bgColor);
+ // Create group ...
+ const groupAttributes = {
+ width: 100,
+ height: 100,
+ coordSizeWidth: 100,
+ coordSizeHeight: 100,
+ };
+ const group = new web2d.Group(groupAttributes);
+ group.append(innerShape);
- // Create group ...
- const groupAttributes = {
- width: 100,
- height: 100,
- coordSizeWidth: 100,
- coordSizeHeight: 100,
- };
- const group = new web2d.Group(groupAttributes);
- group.append(innerShape);
+ // Add Text ...
+ if (this.getShapeType() !== TopicShape.IMAGE) {
+ const textShape = this._buildTextShape(true);
+ const text = this.getText();
+ textShape.setText(text);
+ textShape.setOpacity(0.5);
+ group.append(textShape);
+ }
+ return group;
+ }
- // Add Text ...
- if (this.getShapeType() !== TopicShape.IMAGE) {
- const textShape = this._buildTextShape(true);
- const text = this.getText();
- textShape.setText(text);
- textShape.setOpacity(0.5);
- group.append(textShape);
- }
- return group;
- },
-
- /** */
- updateTopicShape(targetTopic, workspace) {
- // Change figure based on the connected topic ...
- const model = this.getModel();
- let shapeType = model.getShapeType();
- if (!targetTopic.isCentralTopic()) {
- if (!$defined(shapeType)) {
- // Get the real shape type ...
- shapeType = this.getShapeType();
- this._setShapeType(shapeType, false);
- }
- }
- },
-
- /** */
- disconnect(workspace) {
- this.parent(workspace);
- const size = this.getSize();
-
- const model = this.getModel();
- let shapeType = model.getShapeType();
+ /** */
+ updateTopicShape(targetTopic, workspace) {
+ // Change figure based on the connected topic ...
+ const model = this.getModel();
+ let shapeType = model.getShapeType();
+ if (!targetTopic.isCentralTopic()) {
if (!$defined(shapeType)) {
- // Change figure ...
+ // Get the real shape type ...
shapeType = this.getShapeType();
- this._setShapeType(TopicShape.ROUNDED_RECT, false);
+ this._setShapeType(shapeType, false);
}
- const innerShape = this.getInnerShape();
- innerShape.setVisibility(true);
- },
+ }
+ }
- _updatePositionOnChangeSize(oldSize, newSize) {
- const xOffset = Math.round((newSize.width - oldSize.width) / 2);
- const pos = this.getPosition();
- if ($defined(pos)) {
- if (pos.x > 0) {
- pos.x += xOffset;
- } else {
- pos.x -= xOffset;
- }
- this.setPosition(pos);
- }
- },
+ /** */
+ disconnect(workspace) {
+ this.parent(workspace);
+ const size = this.getSize();
- /** */
- workoutIncomingConnectionPoint(sourcePosition) {
- return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
- },
+ const model = this.getModel();
+ let shapeType = model.getShapeType();
+ if (!$defined(shapeType)) {
+ // Change figure ...
+ shapeType = this.getShapeType();
+ this._setShapeType(TopicShape.ROUNDED_RECT, false);
+ }
+ const innerShape = this.getInnerShape();
+ innerShape.setVisibility(true);
+ }
- /** */
- workoutOutgoingConnectionPoint(targetPosition) {
- $assert(targetPosition, 'targetPoint can not be null');
- const pos = this.getPosition();
- const isAtRight = Shape.isAtRight(targetPosition, pos);
- const size = this.getSize();
-
- let result;
- if (this.getShapeType() === TopicShape.LINE) {
- result = new web2d.Point();
- const groupPosition = this._elem2d.getPosition();
- const innerShareSize = this.getInnerShape().getSize();
-
- if (innerShareSize) {
- const magicCorrectionNumber = 0.3;
- if (!isAtRight) {
- result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
- } else {
- result.x = groupPosition.x + magicCorrectionNumber;
- }
- result.y = groupPosition.y + innerShareSize.height;
- } else {
- // Hack: When the size has not being defined. This is because the node has not being added.
- // Try to do our best ...
- if (!isAtRight) {
- result.x = pos.x + size.width / 2;
- } else {
- result.x = pos.x - size.width / 2;
- }
- result.y = pos.y + size.height / 2;
- }
+ _updatePositionOnChangeSize(oldSize, newSize) {
+ const xOffset = Math.round((newSize.width - oldSize.width) / 2);
+ const pos = this.getPosition();
+ if ($defined(pos)) {
+ if (pos.x > 0) {
+ pos.x += xOffset;
} else {
- result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
+ pos.x -= xOffset;
}
- return result;
- },
- },
-);
+ this.setPosition(pos);
+ }
+ }
+
+ /** */
+ workoutIncomingConnectionPoint(sourcePosition) {
+ return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
+ }
+
+ /** */
+ workoutOutgoingConnectionPoint(targetPosition) {
+ $assert(targetPosition, 'targetPoint can not be null');
+ const pos = this.getPosition();
+ const isAtRight = Shape.isAtRight(targetPosition, pos);
+ const size = this.getSize();
+
+ let result;
+ if (this.getShapeType() === TopicShape.LINE) {
+ result = new web2d.Point();
+ const groupPosition = this._elem2d.getPosition();
+ const innerShareSize = this.getInnerShape().getSize();
+
+ if (innerShareSize) {
+ const magicCorrectionNumber = 0.3;
+ if (!isAtRight) {
+ result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
+ } else {
+ result.x = groupPosition.x + magicCorrectionNumber;
+ }
+ result.y = groupPosition.y + innerShareSize.height;
+ } else {
+ // Hack: When the size has not being defined. This is because the node has not being added.
+ // Try to do our best ...
+ if (!isAtRight) {
+ result.x = pos.x + size.width / 2;
+ } else {
+ result.x = pos.x - size.width / 2;
+ }
+ result.y = pos.y + size.height / 2;
+ }
+ } else {
+ result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
+ }
+ return result;
+ }
+}
export default MainTopic;
diff --git a/packages/mindplot/src/components/MultilineTextEditor.js b/packages/mindplot/src/components/MultilineTextEditor.js
index 080a597c..e748292f 100644
--- a/packages/mindplot/src/components/MultilineTextEditor.js
+++ b/packages/mindplot/src/components/MultilineTextEditor.js
@@ -18,12 +18,12 @@
import Events from './Events';
import ActionDispatcher from './ActionDispatcher';
-const MultilineTextEditor = new Class({
- Extends: Events,
- initialize() {
+class MultilineTextEditor extends Events {
+ constructor() {
+ super();
this._topic = null;
this._timeoutId = -1;
- },
+ }
_buildEditor() {
const result = $('
')
@@ -46,7 +46,7 @@ const MultilineTextEditor = new Class({
result.append(textareaElem);
return result;
- },
+ }
_registerEvents(containerElem) {
const textareaElem = this._getTextareaElem();
@@ -120,7 +120,7 @@ const MultilineTextEditor = new Class({
containerElem.on('mousedown', (event) => {
event.stopPropagation();
});
- },
+ }
_adjustEditorSize() {
if (this.isVisible()) {
@@ -140,11 +140,11 @@ const MultilineTextEditor = new Class({
height: textElem.height(),
});
}
- },
+ }
isVisible() {
return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
- },
+ }
_updateModel() {
if (this._topic.getText() != this._getText()) {
@@ -154,7 +154,7 @@ const MultilineTextEditor = new Class({
const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.changeTextToTopic([topicId], text);
}
- },
+ }
show(topic, text) {
// Close a previous node editor if it's opened ...
@@ -172,7 +172,7 @@ const MultilineTextEditor = new Class({
this._registerEvents(containerElem);
this._showEditor(text);
}
- },
+ }
_showEditor(defaultText) {
const topic = this._topic;
@@ -208,7 +208,7 @@ const MultilineTextEditor = new Class({
};
this._timeoutId = displayFunc.delay(10);
- },
+ }
_setStyle(fontStyle) {
const inputField = this._getTextareaElem();
@@ -233,21 +233,21 @@ const MultilineTextEditor = new Class({
};
inputField.css(style);
this._containerElem.css(style);
- },
+ }
_setText(text) {
const textareaElem = this._getTextareaElem();
textareaElem.val(text);
this._adjustEditorSize();
- },
+ }
_getText() {
return this._getTextareaElem().val();
- },
+ }
_getTextareaElem() {
return this._containerElem.find('textarea');
- },
+ }
_positionCursor(textareaElem, selectText) {
textareaElem.focus();
@@ -277,7 +277,7 @@ const MultilineTextEditor = new Class({
textareaElem.focus();
}
}
- },
+ }
close(update) {
if (this.isVisible() && this._topic) {
@@ -297,7 +297,7 @@ const MultilineTextEditor = new Class({
this._timeoutId = -1;
}
this._topic = null;
- },
-});
+ }
+}
export default MultilineTextEditor;
diff --git a/packages/mindplot/src/components/NodeGraph.js b/packages/mindplot/src/components/NodeGraph.js
index f38aa96a..abbbf9f1 100644
--- a/packages/mindplot/src/components/NodeGraph.js
+++ b/packages/mindplot/src/components/NodeGraph.js
@@ -19,172 +19,170 @@ import { $assert } from '@wisemapping/core-js';
import TopicConfig from './TopicConfig';
import DragTopic from './DragTopic';
-const NodeGraph = new Class(
- /** @lends NodeGraph */ {
- /**
- * @constructs
- * @param {mindplot.model.NodeModel} nodeModel
- * @param {Object} options
- * @throws will throw an error if nodeModel is null or undefined
- */
- initialize(nodeModel, options) {
- $assert(nodeModel, 'model can not be null');
+class NodeGraph {
+ /**
+ * @constructs
+ * @param {mindplot.model.NodeModel} nodeModel
+ * @param {Object} options
+ * @throws will throw an error if nodeModel is null or undefined
+ */
+ constructor(nodeModel, options) {
+ $assert(nodeModel, 'model can not be null');
- this._options = options;
- this._mouseEvents = true;
- this.setModel(nodeModel);
- this._onFocus = false;
- this._size = { width: 50, height: 20 };
- },
+ this._options = options;
+ this._mouseEvents = true;
+ this.setModel(nodeModel);
+ this._onFocus = false;
+ this._size = { width: 50, height: 20 };
+ }
- /** @return true if option is set to read-only */
- isReadOnly() {
- return this._options.readOnly;
- },
+ /** @return true if option is set to read-only */
+ isReadOnly() {
+ return this._options.readOnly;
+ }
- /** @return model type */
- getType() {
- const model = this.getModel();
- return model.getType();
- },
+ /** @return model type */
+ getType() {
+ const model = this.getModel();
+ return model.getType();
+ }
- /**
+ /**
* @param {String} id
* @throws will throw an error if the topic id is not a number
*/
- setId(id) {
- $assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
- this.getModel().setId(id);
- },
+ setId(id) {
+ $assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
+ this.getModel().setId(id);
+ }
- _set2DElement(elem2d) {
- this._elem2d = elem2d;
- },
+ _set2DElement(elem2d) {
+ this._elem2d = elem2d;
+ }
- /**
+ /**
* @return 2D element
* @throws will throw an error if the element is null or undefined within node graph
*/
- get2DElement() {
- $assert(this._elem2d, 'NodeGraph has not been initialized properly');
- return this._elem2d;
- },
+ get2DElement() {
+ $assert(this._elem2d, 'NodeGraph has not been initialized properly');
+ return this._elem2d;
+ }
- /** @abstract */
- setPosition(point, fireEvent) {
- throw new Error('Unsupported operation');
- },
+ /** @abstract */
+ setPosition(point, fireEvent) {
+ throw new Error('Unsupported operation');
+ }
- /** */
- addEvent(type, listener) {
- const elem = this.get2DElement();
- elem.addEvent(type, listener);
- },
+ /** */
+ addEvent(type, listener) {
+ const elem = this.get2DElement();
+ elem.addEvent(type, listener);
+ }
- /** */
- removeEvent(type, listener) {
- const elem = this.get2DElement();
- elem.removeEvent(type, listener);
- },
+ /** */
+ removeEvent(type, listener) {
+ const elem = this.get2DElement();
+ elem.removeEvent(type, listener);
+ }
- /** */
- fireEvent(type, event) {
- const elem = this.get2DElement();
- elem.trigger(type, event);
- },
+ /** */
+ fireEvent(type, event) {
+ const elem = this.get2DElement();
+ elem.trigger(type, event);
+ }
- /** */
- setMouseEventsEnabled(isEnabled) {
- this._mouseEvents = isEnabled;
- },
+ /** */
+ setMouseEventsEnabled(isEnabled) {
+ this._mouseEvents = isEnabled;
+ }
- /** */
- isMouseEventsEnabled() {
- return this._mouseEvents;
- },
+ /** */
+ isMouseEventsEnabled() {
+ return this._mouseEvents;
+ }
- /** @return {Object} size */
- getSize() {
- return this._size;
- },
+ /** @return {Object} size */
+ getSize() {
+ return this._size;
+ }
- /** @param {Object} size */
- setSize(size) {
- this._size.width = parseInt(size.width, 10);
- this._size.height = parseInt(size.height, 10);
- },
+ /** @param {Object} size */
+ setSize(size) {
+ this._size.width = parseInt(size.width, 10);
+ this._size.height = parseInt(size.height, 10);
+ }
- /**
+ /**
* @return {mindplot.model.NodeModel} the node model
*/
- getModel() {
- $assert(this._model, 'Model has not been initialized yet');
- return this._model;
- },
+ getModel() {
+ $assert(this._model, 'Model has not been initialized yet');
+ return this._model;
+ }
- /**
+ /**
* @param {mindplot.NodeModel} model the node model
* @throws will throw an error if model is null or undefined
*/
- setModel(model) {
- $assert(model, 'Model can not be null');
- this._model = model;
- },
+ setModel(model) {
+ $assert(model, 'Model can not be null');
+ this._model = model;
+ }
- /** */
- getId() {
- return this._model.getId();
- },
+ /** */
+ getId() {
+ return this._model.getId();
+ }
- /** */
- setOnFocus(focus) {
- if (this._onFocus !== focus) {
- this._onFocus = focus;
- const outerShape = this.getOuterShape();
- if (focus) {
- outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
- outerShape.setOpacity(1);
- } else {
- outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
- outerShape.setOpacity(0);
- }
- this.setCursor('move');
-
- // In any case, always try to hide the editor ...
- this.closeEditors();
-
- // Fire event ...
- this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
+ /** */
+ setOnFocus(focus) {
+ if (this._onFocus !== focus) {
+ this._onFocus = focus;
+ const outerShape = this.getOuterShape();
+ if (focus) {
+ outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
+ outerShape.setOpacity(1);
+ } else {
+ outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
+ outerShape.setOpacity(0);
}
- },
+ this.setCursor('move');
- /** @return {Boolean} true if the node graph is on focus */
- isOnFocus() {
- return this._onFocus;
- },
+ // In any case, always try to hide the editor ...
+ this.closeEditors();
- /** */
- dispose(workspace) {
- this.setOnFocus(false);
- workspace.removeChild(this);
- },
+ // Fire event ...
+ this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
+ }
+ }
- /** */
- createDragNode(layoutManager) {
- const dragShape = this._buildDragShape();
- return new DragTopic(dragShape, this, layoutManager);
- },
+ /** @return {Boolean} true if the node graph is on focus */
+ isOnFocus() {
+ return this._onFocus;
+ }
- _buildDragShape() {
- $assert(false, '_buildDragShape must be implemented by all nodes.');
- },
+ /** */
+ dispose(workspace) {
+ this.setOnFocus(false);
+ workspace.removeChild(this);
+ }
- /** */
- getPosition() {
- const model = this.getModel();
- return model.getPosition();
- },
- },
-);
+ /** */
+ createDragNode(layoutManager) {
+ const dragShape = this._buildDragShape();
+ return new DragTopic(dragShape, this, layoutManager);
+ }
+
+ _buildDragShape() {
+ $assert(false, '_buildDragShape must be implemented by all nodes.');
+ }
+
+ /** */
+ getPosition() {
+ const model = this.getModel();
+ return model.getPosition();
+ }
+}
export default NodeGraph;
diff --git a/packages/mindplot/src/components/NoteIcon.js b/packages/mindplot/src/components/NoteIcon.js
index 9723dae5..12059d96 100644
--- a/packages/mindplot/src/components/NoteIcon.js
+++ b/packages/mindplot/src/components/NoteIcon.js
@@ -20,18 +20,17 @@ import $ from '@libraries/jquery-2.1.0';
import Icon from './Icon';
import FloatingTip from './widget/FloatingTip';
-const NoteIcon = new Class({
- Extends: Icon,
- initialize(topic, noteModel, readOnly) {
+class NoteIcon extends Icon {
+ constructor(topic, noteModel, readOnly) {
$assert(topic, 'topic can not be null');
- this.parent(NoteIcon.IMAGE_URL);
+ super(NoteIcon.IMAGE_URL);
this._linksModel = noteModel;
this._topic = topic;
this._readOnly = readOnly;
this._registerEvents();
- },
+ }
_registerEvents() {
this._image.setCursor('pointer');
@@ -55,7 +54,7 @@ const NoteIcon = new Class({
placement: 'bottom',
destroyOnExit: true,
});
- },
+ }
_buildTooltipContent() {
if ($('body').find('#textPopoverNote').length === 1) {
@@ -72,12 +71,12 @@ const NoteIcon = new Class({
result.append(text);
return result;
}
- },
+ }
getModel() {
return this._linksModel;
- },
-});
+ }
+}
NoteIcon.IMAGE_URL = 'images/notes.png';
diff --git a/packages/mindplot/src/components/Options.js b/packages/mindplot/src/components/Options.js
index 1f41926d..923f49b9 100644
--- a/packages/mindplot/src/components/Options.js
+++ b/packages/mindplot/src/components/Options.js
@@ -1,4 +1,4 @@
-const Options = new Class({
+class Options {
setOptions() {
const options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
@@ -10,8 +10,8 @@ const Options = new Class({
}
}
return this;
- },
+ }
-});
+}
export default Options;
diff --git a/packages/mindplot/src/components/PersistenceManager.js b/packages/mindplot/src/components/PersistenceManager.js
index f61064bb..e4fddbdc 100644
--- a/packages/mindplot/src/components/PersistenceManager.js
+++ b/packages/mindplot/src/components/PersistenceManager.js
@@ -18,8 +18,7 @@
import { $assert, innerXML } from '@wisemapping/core-js';
import XMLSerializerFactory from './persistence/XMLSerializerFactory';
-const PersistenceManager = new Class({
- initialize() { },
+class PersistenceManager {
save(mindmap, editorProperties, saveHistory, events, sync) {
$assert(mindmap, 'mindmap can not be null');
@@ -39,30 +38,30 @@ const PersistenceManager = new Class({
console.log(e);
events.onError(this._buildError());
}
- },
+ }
load(mapId) {
$assert(mapId, 'mapId can not be null');
const domDocument = this.loadMapDom(mapId);
return PersistenceManager.loadFromDom(mapId, domDocument);
- },
+ }
discardChanges(mapId) {
throw new Error('Method must be implemented');
- },
+ }
loadMapDom(mapId) {
throw new Error('Method must be implemented');
- },
+ }
saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
throw new Error('Method must be implemented');
- },
+ }
unlockMap(mindmap) {
throw new Error('Method must be implemented');
- },
-});
+ }
+}
PersistenceManager.init = function (instance) {
PersistenceManager._instance = instance;
diff --git a/packages/mindplot/src/components/Relationship.js b/packages/mindplot/src/components/Relationship.js
index abb0ddd3..ced9c7cf 100644
--- a/packages/mindplot/src/components/Relationship.js
+++ b/packages/mindplot/src/components/Relationship.js
@@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import { $assert, $defined } from '@wisemapping/core-js';
import ConnectionLine from './ConnectionLine';
@@ -25,14 +25,12 @@ import INodeModel from './model/INodeModel';
import Shape from './util/Shape';
-const Relationship = new Class({
- Extends: ConnectionLine,
-
- initialize(sourceNode, targetNode, model) {
+class Relationship extends ConnectionLine {
+ constructor(sourceNode, targetNode, model) {
$assert(sourceNode, 'sourceNode can not be null');
$assert(targetNode, 'targetNode can not be null');
- this.parent(sourceNode, targetNode, model.getLineType());
+ super(sourceNode, targetNode, model.getLineType());
this.setModel(model);
const strokeColor = Relationship.getStrokeColor();
@@ -74,12 +72,12 @@ const Relationship = new Class({
const destPoint = model.getDestCtrlPoint().clone();
this.setDestControlPoint(destPoint);
}
- },
+ }
setStroke(color, style, opacity) {
this.parent(color, style, opacity);
this._startArrow.setStrokeColor(color);
- },
+ }
redraw() {
const line2d = this._line2d;
@@ -134,7 +132,7 @@ const Relationship = new Class({
}
this._focusShape.moveToBack();
this._controlPointsController.redraw();
- },
+ }
_positionArrows() {
const tpos = this._line2d.getTo();
@@ -165,7 +163,7 @@ const Relationship = new Class({
this._endArrow.setVisibility(this.isVisible());
}
this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
- },
+ }
addToWorkspace(workspace) {
workspace.append(this._focusShape);
@@ -181,11 +179,11 @@ const Relationship = new Class({
this.parent(workspace);
this._positionArrows();
this.redraw();
- },
+ }
_initializeControlPointController() {
this.setOnFocus(true);
- },
+ }
removeFromWorkspace(workspace) {
workspace.removeChild(this._focusShape);
@@ -196,11 +194,11 @@ const Relationship = new Class({
if (this._endArrow) workspace.removeChild(this._endArrow);
this.parent(workspace);
- },
+ }
getType() {
return Relationship.type;
- },
+ }
setOnFocus(focus) {
// Change focus shape
@@ -215,7 +213,7 @@ const Relationship = new Class({
this._onFocus = focus;
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
}
- },
+ }
_refreshShape() {
const sPos = this._line2d.getFrom();
@@ -229,7 +227,7 @@ const Relationship = new Class({
shapeCtrlPoints[1].x = ctrlPoints[1].x;
shapeCtrlPoints[1].y = ctrlPoints[1].y;
this._focusShape.updateLine();
- },
+ }
addEvent(type, listener) {
// Translate to web 2d events ...
@@ -239,37 +237,37 @@ const Relationship = new Class({
const line = this._line2d;
line.addEvent(type, listener);
- },
+ }
isOnFocus() {
return this._onFocus;
- },
+ }
isInWorkspace() {
return this._isInWorkspace;
- },
+ }
setVisibility(value) {
this.parent(value);
if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
this._startArrow.setVisibility(this._showStartArrow && value);
- },
+ }
setOpacity(opacity) {
this.parent(opacity);
if (this._showEndArrow) this._endArrow.setOpacity(opacity);
if (this._showStartArrow) this._startArrow.setOpacity(opacity);
- },
+ }
setShowEndArrow(visible) {
this._showEndArrow = visible;
if (this._isInWorkspace) this.redraw();
- },
+ }
setShowStartArrow(visible) {
this._showStartArrow = visible;
if (this._isInWorkspace) this.redraw();
- },
+ }
setFrom(x, y) {
$assert($defined(x), 'x must be defined');
@@ -277,7 +275,7 @@ const Relationship = new Class({
this._line2d.setFrom(x, y);
this._startArrow.setFrom(x, y);
- },
+ }
setTo(x, y) {
$assert($defined(x), 'x must be defined');
@@ -285,47 +283,47 @@ const Relationship = new Class({
this._line2d.setTo(x, y);
if (this._endArrow) this._endArrow.setFrom(x, y);
- },
+ }
setSrcControlPoint(control) {
this._line2d.setSrcControlPoint(control);
this._startArrow.setControlPoint(control);
- },
+ }
setDestControlPoint(control) {
this._line2d.setDestControlPoint(control);
if (this._showEndArrow) this._endArrow.setControlPoint(control);
- },
+ }
getControlPoints() {
return this._line2d.getControlPoints();
- },
+ }
isSrcControlPointCustom() {
return this._line2d.isSrcControlPointCustom();
- },
+ }
isDestControlPointCustom() {
return this._line2d.isDestControlPointCustom();
- },
+ }
setIsSrcControlPointCustom(isCustom) {
this._line2d.setIsSrcControlPointCustom(isCustom);
- },
+ }
setIsDestControlPointCustom(isCustom) {
this._line2d.setIsDestControlPointCustom(isCustom);
- },
+ }
getId() {
return this._model.getId();
- },
+ }
fireEvent(type, event) {
const elem = this._line2d;
elem.trigger(type, event);
- },
-});
+ }
+}
Relationship.getStrokeColor = function getStrokeColor() {
return '#9b74e6';
diff --git a/packages/mindplot/src/components/RelationshipPivot.js b/packages/mindplot/src/components/RelationshipPivot.js
index c32f0bc4..261a286c 100644
--- a/packages/mindplot/src/components/RelationshipPivot.js
+++ b/packages/mindplot/src/components/RelationshipPivot.js
@@ -15,14 +15,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import { $assert } from '@wisemapping/core-js';
import Relationship from './Relationship';
import INodeModel from './model/INodeModel';
import Shape from './util/Shape';
-const RelationshipPivot = new Class({
- initialize(workspace, designer) {
+class RelationshipPivot {
+ constructor(workspace, designer) {
$assert(workspace, 'workspace can not be null');
$assert(designer, 'designer can not be null');
this._workspace = workspace;
@@ -32,7 +32,7 @@ const RelationshipPivot = new Class({
this._mouseMoveEvent = this._mouseMove.bind(this);
this._onClickEvent = this._cleanOnMouseClick.bind(this);
this._onTopicClick = this._connectOnFocus.bind(this);
- },
+ }
start(sourceTopic, targetPos) {
$assert(sourceTopic, 'sourceTopic can not be null');
@@ -74,7 +74,7 @@ const RelationshipPivot = new Class({
topic.addEvent('ontfocus', this._onTopicClick);
});
}
- },
+ }
dispose() {
const workspace = this._workspace;
@@ -98,7 +98,7 @@ const RelationshipPivot = new Class({
this._pivot = null;
this._startArrow = null;
}
- },
+ }
_mouseMove(event) {
const screen = this._workspace.getScreenManager();
@@ -120,13 +120,13 @@ const RelationshipPivot = new Class({
event.stopPropagation();
return false;
- },
+ }
_cleanOnMouseClick(event) {
// The user clicks on a desktop on in other element that is not a node.
this.dispose();
event.stopPropagation();
- },
+ }
_calculateFromPosition(toPosition) {
// Calculate origin position ...
@@ -140,7 +140,7 @@ const RelationshipPivot = new Class({
spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10);
spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10);
return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
- },
+ }
_connectOnFocus(event, targetTopic) {
const sourceTopic = this._sourceTopic;
@@ -152,11 +152,11 @@ const RelationshipPivot = new Class({
this._designer._actionDispatcher.addRelationship(relModel);
}
this.dispose();
- },
+ }
_isActive() {
return this._pivot != null;
- },
-});
+ }
+}
export default RelationshipPivot;
diff --git a/packages/mindplot/src/components/RestPersistenceManager.js b/packages/mindplot/src/components/RestPersistenceManager.js
index e2ffc9f9..af91b70b 100644
--- a/packages/mindplot/src/components/RestPersistenceManager.js
+++ b/packages/mindplot/src/components/RestPersistenceManager.js
@@ -18,9 +18,8 @@
import { $assert } from '@wisemapping/core-js';
import PersistenceManager from './PersistenceManager';
-const RESTPersistenceManager = new Class({
- Extends: PersistenceManager,
- initialize(options) {
+class RESTPersistenceManager extends PersistenceManager{
+ constructor(options) {
this.parent();
$assert(options.documentUrl, 'documentUrl can not be null');
$assert(options.revertUrl, 'revertUrl can not be null');
@@ -33,7 +32,7 @@ const RESTPersistenceManager = new Class({
this.lockUrl = options.lockUrl;
this.timestamp = options.timestamp;
this.session = options.session;
- },
+ }
saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
const data = {
@@ -53,7 +52,7 @@ const RESTPersistenceManager = new Class({
persistence.clearTimeout = setTimeout(() => {
persistence.clearTimeout = null;
persistence.onSave = false;
- }, 10000);
+ } 10000);
$.ajax({
url: `${this.documentUrl.replace('{id}', mapId)}?${query}`,
@@ -66,17 +65,17 @@ const RESTPersistenceManager = new Class({
success(data, textStatus, jqXHRresponseText) {
persistence.timestamp = data;
events.onSuccess();
- },
+ }
error(jqXHR, textStatus, errorThrown) {
events.onError(persistence._buildError());
- },
+ }
complete() {
// Clear event timeout ...
if (persistence.clearTimeout) {
clearTimeout(persistence.clearTimeout);
}
persistence.onSave = false;
- },
+ }
fail(xhr, textStatus) {
const { responseText } = xhr;
let userMsg = { severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED') };
@@ -96,19 +95,19 @@ const RESTPersistenceManager = new Class({
}
events.onError(userMsg);
persistence.onSave = false;
- },
+ }
});
}
- },
+ }
discardChanges(mapId) {
$.ajax({
url: this.revertUrl.replace('{id}', mapId),
async: false,
method: 'post',
- headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' },
+ headers: { 'Content-Type': 'application/json; charset=utf-8', Accept: 'application/json' }
});
- },
+ }
unlockMap(mindmap) {
const mapId = mindmap.getId();
@@ -116,10 +115,10 @@ const RESTPersistenceManager = new Class({
url: this.lockUrl.replace('{id}', mapId),
async: false,
method: 'put',
- headers: { 'Content-Type': 'text/plain' },
+ headers: { 'Content-Type': 'text/plain' }
data: 'false',
});
- },
+ }
_buildError(jsonSeverResponse) {
let message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null;
@@ -133,7 +132,7 @@ const RESTPersistenceManager = new Class({
severity = 'INFO';
}
return { severity, message };
- },
+ }
loadMapDom(mapId) {
// Let's try to open one from the local directory ...
@@ -142,10 +141,10 @@ const RESTPersistenceManager = new Class({
url: `${this.documentUrl.replace('{id}', mapId)}/xml`,
method: 'get',
async: false,
- headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' },
+ headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' }
success(responseText) {
xml = responseText;
- },
+ }
});
// If I could not load it from a file, hard code one.
@@ -154,7 +153,7 @@ const RESTPersistenceManager = new Class({
}
return xml;
- },
-});
+ }
+}
export default RESTPersistenceManager;
diff --git a/packages/mindplot/src/components/ScreenManager.js b/packages/mindplot/src/components/ScreenManager.js
index 78414018..3d5dfcd1 100644
--- a/packages/mindplot/src/components/ScreenManager.js
+++ b/packages/mindplot/src/components/ScreenManager.js
@@ -16,7 +16,7 @@
* limitations under the License.
*/
import { $assert } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
class ScreenManager {
constructor(divElement) {
diff --git a/packages/mindplot/src/components/ShrinkConnector.js b/packages/mindplot/src/components/ShrinkConnector.js
index b93f5ef4..3edf8301 100644
--- a/packages/mindplot/src/components/ShrinkConnector.js
+++ b/packages/mindplot/src/components/ShrinkConnector.js
@@ -15,13 +15,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import TopicConfig from './TopicConfig';
import ActionDispatcher from './ActionDispatcher';
-const ShirinkConnector = new Class({
- initialize(topic) {
+class ShirinkConnector {
+ constructor(topic) {
const ellipse = new web2d.Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
this._ellipse = ellipse;
ellipse.setFill('rgb(62,118,179)');
@@ -61,7 +61,7 @@ const ShirinkConnector = new Class({
this._fillColor = '#f7f7f7';
const model = topic.getModel();
this.changeRender(model.areChildrenShrunken());
- },
+ }
changeRender(isShrink) {
const elipse = this._ellipse;
@@ -70,40 +70,40 @@ const ShirinkConnector = new Class({
} else {
elipse.setStroke('1', 'solid');
}
- },
+ }
setVisibility(value) {
this._ellipse.setVisibility(value);
- },
+ }
setOpacity(opacity) {
this._ellipse.setOpacity(opacity);
- },
+ }
setFill(color) {
this._fillColor = color;
this._ellipse.setFill(color);
- },
+ }
setAttribute(name, value) {
this._ellipse.setAttribute(name, value);
- },
+ }
addToWorkspace(group) {
group.append(this._ellipse);
- },
+ }
setPosition(x, y) {
this._ellipse.setPosition(x, y);
- },
+ }
moveToBack() {
this._ellipse.moveToBack();
- },
+ }
moveToFront() {
this._ellipse.moveToFront();
- },
-});
+ }
+}
export default ShirinkConnector;
diff --git a/packages/mindplot/src/components/TextEditor.js b/packages/mindplot/src/components/TextEditor.js
index 6b792554..07f7a2fb 100644
--- a/packages/mindplot/src/components/TextEditor.js
+++ b/packages/mindplot/src/components/TextEditor.js
@@ -13,14 +13,14 @@
* limitations under the License.
*/
import { $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import ActionDispatcher from './ActionDispatcher';
// FIXME: Not used!
-const TextEditor = new Class({
- initialize(topic) {
+class TextEditor {
+ constructor(topic) {
this._topic = topic;
- },
+ }
_buildEditor() {
this._size = { width: 500, height: 100 };
@@ -61,7 +61,7 @@ const TextEditor = new Class({
spanElem.inject(spanContainer);
return result;
- },
+ }
_registerEvents(divElem) {
const inputElem = this._getTextareaElem();
@@ -99,11 +99,11 @@ const TextEditor = new Class({
divElem.addEvent('mousedown', (event) => {
event.stopPropagation();
});
- },
+ }
isVisible() {
return $defined(this._containerElem) && this._containerElem.getStyle('display') === 'block';
- },
+ }
_updateModel() {
if (this._topic.getText() !== this._getText()) {
@@ -113,7 +113,7 @@ const TextEditor = new Class({
const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.changeTextToTopic([topicId], text);
}
- },
+ }
show(text) {
if (!this.isVisible()) {
@@ -125,7 +125,7 @@ const TextEditor = new Class({
this._registerEvents(editorElem);
this._showEditor(text);
}
- },
+ }
_showEditor(defaultText) {
const topic = this._topic;
@@ -163,7 +163,7 @@ const TextEditor = new Class({
};
displayFunc.delay(10);
- },
+ }
_setStyle(fontStyle) {
const inputField = this._getTextareaElem();
@@ -189,7 +189,7 @@ const TextEditor = new Class({
spanField.style.fontStyle = fontStyle.style;
spanField.style.fontWeight = fontStyle.weight;
spanField.style.fontSize = `${fontStyle.size}px`;
- },
+ }
_setText(text) {
const inputField = this._getTextareaElem();
@@ -200,19 +200,19 @@ const TextEditor = new Class({
const spanField = this._getSpanElem();
spanField.innerHTML = text;
inputField.value = text;
- },
+ }
_getText() {
return this._getTextareaElem().value;
- },
+ }
_getTextareaElem() {
return this._containerElem.getElement('input');
- },
+ }
_getSpanElem() {
return this._containerElem.getElement('span');
- },
+ }
_setEditorSize(width, height) {
const textShape = this._topic.getTextShape();
@@ -220,7 +220,7 @@ const TextEditor = new Class({
this._size = { width: width * scale.width, height: height * scale.height };
this._containerElem.style.width = `${this._size.width * 2}px`;
this._containerElem.style.height = `${this._size.height}px`;
- },
+ }
_positionCursor(inputElem, selectText) {
// Select text if it's required ...
@@ -238,7 +238,7 @@ const TextEditor = new Class({
} else if (!selectText) {
inputElem.setSelectionRange(0, inputElem.value.length);
}
- },
+ }
close(update) {
if (this.isVisible()) {
@@ -254,7 +254,7 @@ const TextEditor = new Class({
this._containerElem.dispose();
this._containerElem = null;
}
- },
-});
+ }
+}
export default TextEditor;
diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js
index 5c7b6074..9c55dbb3 100644
--- a/packages/mindplot/src/components/Topic.js
+++ b/packages/mindplot/src/components/Topic.js
@@ -17,7 +17,7 @@
*/
import { $assert, $defined } from '@wisemapping/core-js';
import { _ } from '@libraries/underscore-min';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import NodeGraph from './NodeGraph';
import TopicConfig from './TopicConfig';
@@ -34,1119 +34,1058 @@ import LinkEditor from './widget/LinkEditor';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import INodeModel, { TopicShape } from './model/INodeModel';
-const Topic = new Class(
- /** @lends Topic */ {
- Extends: NodeGraph,
- /**
- * @extends mindplot.NodeGraph
- * @constructs
- * @param model
- * @param options
- */
- initialize(model, options) {
- this.parent(model, options);
- this._children = [];
- this._parent = null;
- this._relationships = [];
- this._isInWorkspace = false;
- this._buildTopicShape();
+class Topic extends NodeGraph {
+ /**
+ * @extends mindplot.NodeGraph
+ * @constructs
+ * @param model
+ * @param options
+ */
+ constructor(model, options) {
+ super(model, options);
+ this._children = [];
+ this._parent = null;
+ this._relationships = [];
+ this._isInWorkspace = false;
+ this._buildTopicShape();
- // Position a topic ....
- const pos = model.getPosition();
- if (pos != null && this.isCentralTopic()) {
- this.setPosition(pos);
- }
+ // Position a topic ....
+ const pos = model.getPosition();
+ if (pos != null && this.isCentralTopic()) {
+ this.setPosition(pos);
+ }
- // Register events for the topic ...
- if (!this.isReadOnly()) {
- this._registerEvents();
- }
- },
+ // Register events for the topic ...
+ if (!this.isReadOnly()) {
+ this._registerEvents();
+ }
+ }
- _registerEvents() {
- this.setMouseEventsEnabled(true);
+ _registerEvents() {
+ this.setMouseEventsEnabled(true);
- // Prevent click on the topics being propagated ...
- this.addEvent('click', (event) => {
- event.stopPropagation();
- });
- const me = this;
- this.addEvent('dblclick', (event) => {
- me._getTopicEventDispatcher().show(me);
- event.stopPropagation();
- });
- },
+ // Prevent click on the topics being propagated ...
+ this.addEvent('click', (event) => {
+ event.stopPropagation();
+ });
+ const me = this;
+ this.addEvent('dblclick', (event) => {
+ me._getTopicEventDispatcher().show(me);
+ event.stopPropagation();
+ });
+ }
- /**
- * @param {String} type the topic shape type
- * @see {@link mindplot.model.INodeModel}
- */
- setShapeType(type) {
- this._setShapeType(type, true);
- },
+ /**
+ * @param {String} type the topic shape type
+ * @see {@link mindplot.model.INodeModel}
+ */
+ setShapeType(type) {
+ this._setShapeType(type, true);
+ }
- /** @return {mindplot.Topic} parent topic */
- getParent() {
- return this._parent;
- },
+ /** @return {mindplot.Topic} parent topic */
+ getParent() {
+ return this._parent;
+ }
- _setShapeType(type, updateModel) {
- // Remove inner shape figure ...
- const model = this.getModel();
- if ($defined(updateModel) && updateModel) {
- model.setShapeType(type);
- }
+ _setShapeType(type, updateModel) {
+ // Remove inner shape figure ...
+ const model = this.getModel();
+ if ($defined(updateModel) && updateModel) {
+ model.setShapeType(type);
+ }
- const oldInnerShape = this.getInnerShape();
- if (oldInnerShape != null) {
- this._removeInnerShape();
+ const oldInnerShape = this.getInnerShape();
+ if (oldInnerShape != null) {
+ this._removeInnerShape();
- // Create a new one ...
- const innerShape = this.getInnerShape();
-
- // Update figure size ...
- const size = this.getSize();
- this.setSize(size, true);
-
- const group = this.get2DElement();
- group.append(innerShape);
-
- // Move text to the front ...
- const text = this.getTextShape();
- text.moveToFront();
-
- // Move iconGroup to front ...
- const iconGroup = this.getIconGroup();
- if ($defined(iconGroup)) {
- iconGroup.moveToFront();
- }
-
- // Move connector to front
- const connector = this.getShrinkConnector();
- if ($defined(connector)) {
- connector.moveToFront();
- }
- }
- },
-
- /** @return {String} topic shape type */
- getShapeType() {
- const model = this.getModel();
- let result = model.getShapeType();
- if (!$defined(result)) {
- result = TopicStyle.defaultShapeType(this);
- }
- return result;
- },
-
- _removeInnerShape() {
- const group = this.get2DElement();
+ // Create a new one ...
const innerShape = this.getInnerShape();
- group.removeChild(innerShape);
- this._innerShape = null;
- return innerShape;
- },
-
- /** @return {web2d.Line|web2d.Rect|web2d.Image} inner shape of the topic */
- getInnerShape() {
- if (!$defined(this._innerShape)) {
- // Create inner box.
- this._innerShape = this._buildShape(
- TopicConfig.INNER_RECT_ATTRIBUTES,
- this.getShapeType(),
- );
-
- // Update bgcolor ...
- const bgColor = this.getBackgroundColor();
- this._setBackgroundColor(bgColor, false);
-
- // Update border color ...
- const brColor = this.getBorderColor();
- this._setBorderColor(brColor, false);
-
- // Define the pointer ...
- if (!this.isCentralTopic() && !this.isReadOnly()) {
- this._innerShape.setCursor('move');
- } else {
- this._innerShape.setCursor('default');
- }
- }
- return this._innerShape;
- },
-
- _buildShape(attributes, shapeType) {
- $assert(attributes, 'attributes can not be null');
- $assert(shapeType, 'shapeType can not be null');
-
- let result;
- if (shapeType === TopicShape.RECTANGLE) {
- result = new web2d.Rect(0, attributes);
- } else if (shapeType === TopicShape.IMAGE) {
- const model = this.getModel();
- const url = model.getImageUrl();
- const size = model.getImageSize();
-
- result = new web2d.Image();
- result.setHref(url);
- result.setSize(size.width, size.height);
-
- result.getSize = function () {
- return model.getImageSize();
- };
-
- result.setPosition = function () { };
- } else if (shapeType === TopicShape.ELLIPSE) {
- result = new web2d.Rect(0.9, attributes);
- } else if (shapeType === TopicShape.ROUNDED_RECT) {
- result = new web2d.Rect(0.3, attributes);
- } else if (shapeType === TopicShape.LINE) {
- result = new web2d.Line({ strokeColor: '#495879', strokeWidth: 1 });
- result.setSize = function (width, height) {
- this.size = { width, height };
- result.setFrom(0, height);
- result.setTo(width, height);
-
- // Lines will have the same color of the default connection lines...
- const stokeColor = ConnectionLine.getStrokeColor();
- result.setStroke(1, 'solid', stokeColor);
- };
-
- result.getSize = function () {
- return this.size;
- };
-
- result.setPosition = function () { };
-
- result.setFill = function () { };
-
- result.setStroke = function () { };
- } else {
- $assert(false, `Unsupported figure shapeType:${shapeType}`);
- }
- result.setPosition(0, 0);
- return result;
- },
-
- /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */
- setCursor(type) {
- const innerShape = this.getInnerShape();
- innerShape.setCursor(type);
-
- const outerShape = this.getOuterShape();
- outerShape.setCursor(type);
-
- const textShape = this.getTextShape();
- textShape.setCursor(type);
- },
-
- /** @return outer shape */
- getOuterShape() {
- if (!$defined(this._outerShape)) {
- const rect = this._buildShape(
- TopicConfig.OUTER_SHAPE_ATTRIBUTES,
- TopicShape.ROUNDED_RECT,
- );
- rect.setPosition(-2, -3);
- rect.setOpacity(0);
- this._outerShape = rect;
- }
-
- return this._outerShape;
- },
-
- /** @return text shape */
- getTextShape() {
- if (!$defined(this._text)) {
- this._text = this._buildTextShape(false);
-
- // Set Text ...
- const text = this.getText();
- this._setText(text, false);
- }
-
- return this._text;
- },
-
- /** @return icon group */
- getOrBuildIconGroup() {
- if (!$defined(this._iconsGroup)) {
- this._iconsGroup = this._buildIconGroup();
- const group = this.get2DElement();
- group.append(this._iconsGroup.getNativeElement());
- this._iconsGroup.moveToFront();
- }
- return this._iconsGroup;
- },
-
- /** */
- getIconGroup() {
- return this._iconsGroup;
- },
-
- _buildIconGroup() {
- const textHeight = this.getTextShape().getFontHeight();
- const result = new IconGroup(this.getId(), textHeight);
- const padding = TopicStyle.getInnerPadding(this);
- result.setPosition(padding, padding);
-
- // Load topic features ...
- const model = this.getModel();
- const featuresModel = model.getFeatures();
- for (let i = 0; i < featuresModel.length; i++) {
- const featureModel = featuresModel[i];
- const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
- result.addIcon(
- icon,
- featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
- );
- }
-
- return result;
- },
-
- /**
- * assigns the new feature model to the topic's node model and adds the respective icon
- * @param {mindplot.model.FeatureModel} featureModel
- * @return {mindplot.Icon} the icon corresponding to the feature model
- */
- addFeature(featureModel) {
- const iconGroup = this.getOrBuildIconGroup();
- this.closeEditors();
-
- // Update model ...
- const model = this.getModel();
- model.addFeature(featureModel);
-
- const result = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
- iconGroup.addIcon(
- result,
- featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
- );
-
- this._adjustShapes();
- return result;
- },
-
- /** */
- findFeatureById(id) {
- const model = this.getModel();
- return model.findFeatureById(id);
- },
-
- /** */
- removeFeature(featureModel) {
- $assert(featureModel, 'featureModel could not be null');
-
- // Removing the icon from MODEL
- const model = this.getModel();
- model.removeFeature(featureModel);
-
- // Removing the icon from UI
- const iconGroup = this.getIconGroup();
- if ($defined(iconGroup)) {
- iconGroup.removeIconByModel(featureModel);
- }
- this._adjustShapes();
- },
-
- /** */
- addRelationship(relationship) {
- this._relationships.push(relationship);
- },
-
- /** */
- deleteRelationship(relationship) {
- this._relationships.erase(relationship);
- },
-
- /** */
- getRelationships() {
- return this._relationships;
- },
-
- _buildTextShape(readOnly) {
- const result = new web2d.Text();
- const family = this.getFontFamily();
- const size = this.getFontSize();
- const weight = this.getFontWeight();
- const style = this.getFontStyle();
- result.setFont(family, size, style, weight);
-
- const color = this.getFontColor();
- result.setColor(color);
-
- if (!readOnly) {
- // Propagate mouse events ...
- if (!this.isCentralTopic()) {
- result.setCursor('move');
- } else {
- result.setCursor('default');
- }
- }
-
- return result;
- },
-
- /** */
- setFontFamily(value, updateModel) {
- const textShape = this.getTextShape();
- textShape.setFontFamily(value);
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setFontFamily(value);
- }
- this._adjustShapes(updateModel);
- },
-
- /** */
- setFontSize(value, updateModel) {
- const textShape = this.getTextShape();
- textShape.setSize(value);
-
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setFontSize(value);
- }
- this._adjustShapes(updateModel);
- },
-
- /** */
- setFontStyle(value, updateModel) {
- const textShape = this.getTextShape();
- textShape.setStyle(value);
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setFontStyle(value);
- }
- this._adjustShapes(updateModel);
- },
-
- /** */
- setFontWeight(value, updateModel) {
- const textShape = this.getTextShape();
- textShape.setWeight(value);
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setFontWeight(value);
- }
- this._adjustShapes();
- },
-
- /** */
- getFontWeight() {
- const model = this.getModel();
- let result = model.getFontWeight();
- if (!$defined(result)) {
- const font = TopicStyle.defaultFontStyle(this);
- result = font.weight;
- }
- return result;
- },
-
- /** */
- getFontFamily() {
- const model = this.getModel();
- let result = model.getFontFamily();
- if (!$defined(result)) {
- const font = TopicStyle.defaultFontStyle(this);
- result = font.font;
- }
- return result;
- },
-
- /** */
- getFontColor() {
- const model = this.getModel();
- let result = model.getFontColor();
- if (!$defined(result)) {
- const font = TopicStyle.defaultFontStyle(this);
- result = font.color;
- }
- return result;
- },
-
- /** */
- getFontStyle() {
- const model = this.getModel();
- let result = model.getFontStyle();
- if (!$defined(result)) {
- const font = TopicStyle.defaultFontStyle(this);
- result = font.style;
- }
- return result;
- },
-
- /** */
- getFontSize() {
- const model = this.getModel();
- let result = model.getFontSize();
- if (!$defined(result)) {
- const font = TopicStyle.defaultFontStyle(this);
- result = font.size;
- }
- return result;
- },
-
- /** */
- setFontColor(value, updateModel) {
- const textShape = this.getTextShape();
- textShape.setColor(value);
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setFontColor(value);
- }
- },
-
- _setText(text, updateModel) {
- const textShape = this.getTextShape();
- textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
-
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setText(text);
- }
- },
-
- /** */
- setText(text) {
- // Avoid empty nodes ...
- if (!text || $.trim(text).length === 0) {
- text = null;
- }
-
- this._setText(text, true);
- this._adjustShapes();
- },
-
- /** */
- getText() {
- const model = this.getModel();
- let result = model.getText();
- if (!$defined(result)) {
- result = TopicStyle.defaultText(this);
- }
- return result;
- },
-
- /** */
- setBackgroundColor(color) {
- this._setBackgroundColor(color, true);
- },
-
- _setBackgroundColor(color, updateModel) {
- const innerShape = this.getInnerShape();
- innerShape.setFill(color);
-
- const connector = this.getShrinkConnector();
- if (connector) {
- connector.setFill(color);
- }
-
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setBackgroundColor(color);
- }
- },
-
- /** */
- getBackgroundColor() {
- const model = this.getModel();
- let result = model.getBackgroundColor();
- if (!$defined(result)) {
- result = TopicStyle.defaultBackgroundColor(this);
- }
- return result;
- },
-
- /** */
- setBorderColor(color) {
- this._setBorderColor(color, true);
- },
-
- _setBorderColor(color, updateModel) {
- const innerShape = this.getInnerShape();
- innerShape.setAttribute('strokeColor', color);
-
- const connector = this.getShrinkConnector();
- if (connector) {
- connector.setAttribute('strokeColor', color);
- }
-
- if ($defined(updateModel) && updateModel) {
- const model = this.getModel();
- model.setBorderColor(color);
- }
- },
-
- /** */
- getBorderColor() {
- const model = this.getModel();
- let result = model.getBorderColor();
- if (!$defined(result)) {
- result = TopicStyle.defaultBorderColor(this);
- }
- return result;
- },
-
- _buildTopicShape() {
- const groupAttributes = {
- width: 100,
- height: 100,
- coordSizeWidth: 100,
- coordSizeHeight: 100,
- };
- const group = new web2d.Group(groupAttributes);
- this._set2DElement(group);
-
- // Shape must be build based on the model width ...
- const outerShape = this.getOuterShape();
- const innerShape = this.getInnerShape();
- const textShape = this.getTextShape();
-
- // Add to the group ...
- group.append(outerShape);
- group.append(innerShape);
- group.append(textShape);
// Update figure size ...
- const model = this.getModel();
- if (model.getFeatures().length !== 0) {
- this.getOrBuildIconGroup();
- }
-
- const shrinkConnector = this.getShrinkConnector();
- if ($defined(shrinkConnector)) {
- shrinkConnector.addToWorkspace(group);
- }
-
- // Register listeners ...
- this._registerDefaultListenersToElement(group, this);
- },
-
- _registerDefaultListenersToElement(elem, topic) {
- const mouseOver = function (event) {
- if (topic.isMouseEventsEnabled()) {
- topic.handleMouseOver(event);
- }
- };
- elem.addEvent('mouseover', mouseOver);
-
- const outout = function (event) {
- if (topic.isMouseEventsEnabled()) {
- topic.handleMouseOut(event);
- }
- };
- elem.addEvent('mouseout', outout);
-
- const me = this;
- // Focus events ...
- elem.addEvent('mousedown', (event) => {
- if (!me.isReadOnly()) {
- // Disable topic selection of readOnly mode ...
- let value = true;
- if (
- (event.metaKey && Browser.Platform.mac)
- || (event.ctrlKey && !Browser.Platform.mac)
- ) {
- value = !me.isOnFocus();
- event.stopPropagation();
- event.preventDefault();
- }
- topic.setOnFocus(value);
- }
-
- const eventDispatcher = me._getTopicEventDispatcher();
- eventDispatcher.process(TopicEvent.CLICK, me);
- event.stopPropagation();
- });
- },
-
- /** */
- areChildrenShrunken() {
- const model = this.getModel();
- return model.areChildrenShrunken() && !this.isCentralTopic();
- },
-
- /** */
- isCollapsed() {
- let result = false;
-
- let current = this.getParent();
- while (current && !result) {
- result = current.areChildrenShrunken();
- current = current.getParent();
- }
- return result;
- },
-
- /** */
- setChildrenShrunken(value) {
- // Update Model ...
- const model = this.getModel();
- model.setChildrenShrunken(value);
-
- // Change render base on the state.
- const shrinkConnector = this.getShrinkConnector();
- if ($defined(shrinkConnector)) {
- shrinkConnector.changeRender(value);
- }
-
- // Do some fancy animation ....
- const elements = this._flatten2DElements(this);
- const fade = new FadeEffect(elements, !value);
- const me = this;
- fade.addEvent('complete', () => {
- // Set focus on the parent node ...
- if (value) {
- me.setOnFocus(true);
- }
-
- // Set focus in false for all the children ...
- elements.forEach((elem) => {
- if (elem.setOnFocus) {
- elem.setOnFocus(false);
- }
- });
- });
- fade.start();
-
- EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model);
- },
-
- /** */
- getShrinkConnector() {
- let result = this._connector;
- if (this._connector == null) {
- this._connector = new ShirinkConnector(this);
- this._connector.setVisibility(false);
- result = this._connector;
- }
- return result;
- },
-
- /** */
- handleMouseOver() {
- const outerShape = this.getOuterShape();
- outerShape.setOpacity(1);
- },
-
- /** */
- handleMouseOut() {
- const outerShape = this.getOuterShape();
- if (!this.isOnFocus()) {
- outerShape.setOpacity(0);
- }
- },
-
- /** */
- showTextEditor(text) {
- this._getTopicEventDispatcher().show(this, { text });
- },
-
- /** */
- showNoteEditor() {
- const topicId = this.getId();
- const model = this.getModel();
- const editorModel = {
- getValue() {
- const notes = model.findFeatureByType(TopicFeature.Note.id);
- let result;
- if (notes.length > 0) result = notes[0].getText();
-
- return result;
- },
-
- setValue(value) {
- const dispatcher = ActionDispatcher.getInstance();
- const notes = model.findFeatureByType(TopicFeature.Note.id);
- if (!$defined(value)) {
- const featureId = notes[0].getId();
- dispatcher.removeFeatureFromTopic(topicId, featureId);
- } else if (notes.length > 0) {
- dispatcher.changeFeatureToTopic(topicId, notes[0].getId(), {
- text: value,
- });
- } else {
- dispatcher.addFeatureToTopic(topicId, TopicFeature.Note.id, {
- text: value,
- });
- }
- },
- };
- const editor = new NoteEditor(editorModel);
- this.closeEditors();
- editor.show();
- },
-
- /** opens a dialog where the user can enter or edit an existing link associated with this topic */
- showLinkEditor() {
- const topicId = this.getId();
- const model = this.getModel();
- const editorModel = {
- getValue() {
- // @param {mindplot.model.LinkModel[]} links
- const links = model.findFeatureByType(TopicFeature.Link.id);
- let result;
- if (links.length > 0) result = links[0].getUrl();
-
- return result;
- },
-
- setValue(value) {
- const dispatcher = ActionDispatcher.getInstance();
- const links = model.findFeatureByType(TopicFeature.Link.id);
- if (!$defined(value)) {
- const featureId = links[0].getId();
- dispatcher.removeFeatureFromTopic(topicId, featureId);
- } else if (links.length > 0) {
- dispatcher.changeFeatureToTopic(topicId, links[0].getId(), {
- url: value,
- });
- } else {
- dispatcher.addFeatureToTopic(topicId, TopicFeature.Link.id, {
- url: value,
- });
- }
- },
- };
-
- this.closeEditors();
- const editor = new LinkEditor(editorModel);
- editor.show();
- },
-
- /** */
- closeEditors() {
- this._getTopicEventDispatcher().close(true);
- },
-
- _getTopicEventDispatcher() {
- return TopicEventDispatcher.getInstance();
- },
-
- /**
- * Point: references the center of the rect shape.!!!
- */
- setPosition(point) {
- $assert(point, 'position can not be null');
- point.x = Math.ceil(point.x);
- point.y = Math.ceil(point.y);
-
- // Update model's position ...
- const model = this.getModel();
- model.setPosition(point.x, point.y);
-
- // Elements are positioned in the center.
- // All topic element must be positioned based on the innerShape.
const size = this.getSize();
+ this.setSize(size, true);
- const cx = point.x - size.width / 2;
- const cy = point.y - size.height / 2;
+ const group = this.get2DElement();
+ group.append(innerShape);
- // Update visual position.
- this._elem2d.setPosition(cx, cy);
+ // Move text to the front ...
+ const text = this.getTextShape();
+ text.moveToFront();
- // Update connection lines ...
- this._updateConnectionLines();
-
- // Check object state.
- this.invariant();
- },
-
- /** */
- getOutgoingLine() {
- return this._outgoingLine;
- },
-
- /** */
- getIncomingLines() {
- const result = [];
- const children = this.getChildren();
- for (let i = 0; i < children.length; i++) {
- const node = children[i];
- const line = node.getOutgoingLine();
- if ($defined(line)) {
- result.push(line);
- }
- }
- return result;
- },
-
- /** */
- getOutgoingConnectedTopic() {
- let result = null;
- const line = this.getOutgoingLine();
- if ($defined(line)) {
- result = line.getTargetTopic();
- }
- return result;
- },
-
- _updateConnectionLines() {
- // Update this to parent line ...
- const outgoingLine = this.getOutgoingLine();
- if ($defined(outgoingLine)) {
- outgoingLine.redraw();
+ // Move iconGroup to front ...
+ const iconGroup = this.getIconGroup();
+ if ($defined(iconGroup)) {
+ iconGroup.moveToFront();
}
- // Update all the incoming lines ...
- const incomingLines = this.getIncomingLines();
- for (let i = 0; i < incomingLines.length; i++) {
- incomingLines[i].redraw();
- }
-
- // Update relationship lines
- for (let j = 0; j < this._relationships.length; j++) {
- this._relationships[j].redraw();
- }
- },
-
- /** */
- setBranchVisibility(value) {
- let current = this;
- let parent = this;
- while (parent != null && !parent.isCentralTopic()) {
- current = parent;
- parent = current.getParent();
- }
- current.setVisibility(value);
- },
-
- /** */
- setVisibility(value) {
- this._setTopicVisibility(value);
-
- // Hide all children...
- this._setChildrenVisibility(value);
-
- // If there there are connection to the node, topic must be hidden.
- this._setRelationshipLinesVisibility(value);
-
- // If it's connected, the connection must be rendered.
- const outgoingLine = this.getOutgoingLine();
- if (outgoingLine) {
- outgoingLine.setVisibility(value);
- }
- },
-
- /** */
- moveToBack() {
- // Update relationship lines
- for (let j = 0; j < this._relationships.length; j++) {
- this._relationships[j].moveToBack();
- }
- const connector = this.getShrinkConnector();
- if ($defined(connector)) {
- connector.moveToBack();
- }
-
- this.get2DElement().moveToBack();
- },
-
- /** */
- moveToFront() {
- this.get2DElement().moveToFront();
+ // Move connector to front
const connector = this.getShrinkConnector();
if ($defined(connector)) {
connector.moveToFront();
}
- // Update relationship lines
- for (let j = 0; j < this._relationships.length; j++) {
- this._relationships[j].moveToFront();
+ }
+ }
+
+ /** @return {String} topic shape type */
+ getShapeType() {
+ const model = this.getModel();
+ let result = model.getShapeType();
+ if (!$defined(result)) {
+ result = TopicStyle.defaultShapeType(this);
+ }
+ return result;
+ }
+
+ _removeInnerShape() {
+ const group = this.get2DElement();
+ const innerShape = this.getInnerShape();
+ group.removeChild(innerShape);
+ this._innerShape = null;
+ return innerShape;
+ }
+
+ /** @return {web2d.Line|web2d.Rect|web2d.Image} inner shape of the topic */
+ getInnerShape() {
+ if (!$defined(this._innerShape)) {
+ // Create inner box.
+ this._innerShape = this._buildShape(
+ TopicConfig.INNER_RECT_ATTRIBUTES,
+ this.getShapeType(),
+ );
+
+ // Update bgcolor ...
+ const bgColor = this.getBackgroundColor();
+ this._setBackgroundColor(bgColor, false);
+
+ // Update border color ...
+ const brColor = this.getBorderColor();
+ this._setBorderColor(brColor, false);
+
+ // Define the pointer ...
+ if (!this.isCentralTopic() && !this.isReadOnly()) {
+ this._innerShape.setCursor('move');
+ } else {
+ this._innerShape.setCursor('default');
}
- },
+ }
+ return this._innerShape;
+ }
- /** */
- isVisible() {
- const elem = this.get2DElement();
- return elem.isVisible();
- },
+ _buildShape(attributes, shapeType) {
+ $assert(attributes, 'attributes can not be null');
+ $assert(shapeType, 'shapeType can not be null');
- _setRelationshipLinesVisibility(value) {
- _.each(this._relationships, (relationship) => {
- const sourceTopic = relationship.getSourceTopic();
- const targetTopic = relationship.getTargetTopic();
+ let result;
+ if (shapeType === TopicShape.RECTANGLE) {
+ result = new web2d.Rect(0, attributes);
+ } else if (shapeType === TopicShape.IMAGE) {
+ const model = this.getModel();
+ const url = model.getImageUrl();
+ const size = model.getImageSize();
- const targetParent = targetTopic.getModel().getParent();
- const sourceParent = sourceTopic.getModel().getParent();
- relationship.setVisibility(
- value
- && (targetParent == null || !targetParent.areChildrenShrunken())
- && (sourceParent == null || !sourceParent.areChildrenShrunken()),
- );
- });
- },
+ result = new web2d.Image();
+ result.setHref(url);
+ result.setSize(size.width, size.height);
- _setTopicVisibility(value) {
- const elem = this.get2DElement();
- elem.setVisibility(value);
+ result.getSize = function () {
+ return model.getImageSize();
+ };
- if (this.getIncomingLines().length > 0) {
- const connector = this.getShrinkConnector();
- if ($defined(connector)) {
- connector.setVisibility(value);
+ result.setPosition = function () { };
+ } else if (shapeType === TopicShape.ELLIPSE) {
+ result = new web2d.Rect(0.9, attributes);
+ } else if (shapeType === TopicShape.ROUNDED_RECT) {
+ result = new web2d.Rect(0.3, attributes);
+ } else if (shapeType === TopicShape.LINE) {
+ result = new web2d.Line({ strokeColor: '#495879', strokeWidth: 1 });
+ result.setSize = function (width, height) {
+ this.size = { width, height };
+ result.setFrom(0, height);
+ result.setTo(width, height);
+
+ // Lines will have the same color of the default connection lines...
+ const stokeColor = ConnectionLine.getStrokeColor();
+ result.setStroke(1, 'solid', stokeColor);
+ };
+
+ result.getSize = function () {
+ return this.size;
+ };
+
+ result.setPosition = function () { };
+
+ result.setFill = function () { };
+
+ result.setStroke = function () { };
+ } else {
+ $assert(false, `Unsupported figure shapeType:${shapeType}`);
+ }
+ result.setPosition(0, 0);
+ return result;
+ }
+
+ /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */
+ setCursor(type) {
+ const innerShape = this.getInnerShape();
+ innerShape.setCursor(type);
+
+ const outerShape = this.getOuterShape();
+ outerShape.setCursor(type);
+
+ const textShape = this.getTextShape();
+ textShape.setCursor(type);
+ }
+
+ /** @return outer shape */
+ getOuterShape() {
+ if (!$defined(this._outerShape)) {
+ const rect = this._buildShape(
+ TopicConfig.OUTER_SHAPE_ATTRIBUTES,
+ TopicShape.ROUNDED_RECT,
+ );
+ rect.setPosition(-2, -3);
+ rect.setOpacity(0);
+ this._outerShape = rect;
+ }
+
+ return this._outerShape;
+ }
+
+ /** @return text shape */
+ getTextShape() {
+ if (!$defined(this._text)) {
+ this._text = this._buildTextShape(false);
+
+ // Set Text ...
+ const text = this.getText();
+ this._setText(text, false);
+ }
+
+ return this._text;
+ }
+
+ /** @return icon group */
+ getOrBuildIconGroup() {
+ if (!$defined(this._iconsGroup)) {
+ this._iconsGroup = this._buildIconGroup();
+ const group = this.get2DElement();
+ group.append(this._iconsGroup.getNativeElement());
+ this._iconsGroup.moveToFront();
+ }
+ return this._iconsGroup;
+ }
+
+ /** */
+ getIconGroup() {
+ return this._iconsGroup;
+ }
+
+ _buildIconGroup() {
+ const textHeight = this.getTextShape().getFontHeight();
+ const result = new IconGroup(this.getId(), textHeight);
+ const padding = TopicStyle.getInnerPadding(this);
+ result.setPosition(padding, padding);
+
+ // Load topic features ...
+ const model = this.getModel();
+ const featuresModel = model.getFeatures();
+ for (let i = 0; i < featuresModel.length; i++) {
+ const featureModel = featuresModel[i];
+ const icon = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
+ result.addIcon(
+ icon,
+ featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
+ );
+ }
+
+ return result;
+ }
+
+ /**
+ * assigns the new feature model to the topic's node model and adds the respective icon
+ * @param {mindplot.model.FeatureModel} featureModel
+ * @return {mindplot.Icon} the icon corresponding to the feature model
+ */
+ addFeature(featureModel) {
+ const iconGroup = this.getOrBuildIconGroup();
+ this.closeEditors();
+
+ // Update model ...
+ const model = this.getModel();
+ model.addFeature(featureModel);
+
+ const result = TopicFeature.createIcon(this, featureModel, this.isReadOnly());
+ iconGroup.addIcon(
+ result,
+ featureModel.getType() === TopicFeature.Icon.id && !this.isReadOnly(),
+ );
+
+ this._adjustShapes();
+ return result;
+ }
+
+ /** */
+ findFeatureById(id) {
+ const model = this.getModel();
+ return model.findFeatureById(id);
+ }
+
+ /** */
+ removeFeature(featureModel) {
+ $assert(featureModel, 'featureModel could not be null');
+
+ // Removing the icon from MODEL
+ const model = this.getModel();
+ model.removeFeature(featureModel);
+
+ // Removing the icon from UI
+ const iconGroup = this.getIconGroup();
+ if ($defined(iconGroup)) {
+ iconGroup.removeIconByModel(featureModel);
+ }
+ this._adjustShapes();
+ }
+
+ /** */
+ addRelationship(relationship) {
+ this._relationships.push(relationship);
+ }
+
+ /** */
+ deleteRelationship(relationship) {
+ this._relationships.erase(relationship);
+ }
+
+ /** */
+ getRelationships() {
+ return this._relationships;
+ }
+
+ _buildTextShape(readOnly) {
+ const result = new web2d.Text();
+ const family = this.getFontFamily();
+ const size = this.getFontSize();
+ const weight = this.getFontWeight();
+ const style = this.getFontStyle();
+ result.setFont(family, size, style, weight);
+
+ const color = this.getFontColor();
+ result.setColor(color);
+
+ if (!readOnly) {
+ // Propagate mouse events ...
+ if (!this.isCentralTopic()) {
+ result.setCursor('move');
+ } else {
+ result.setCursor('default');
+ }
+ }
+
+ return result;
+ }
+
+ /** */
+ setFontFamily(value, updateModel) {
+ const textShape = this.getTextShape();
+ textShape.setFontFamily(value);
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setFontFamily(value);
+ }
+ this._adjustShapes(updateModel);
+ }
+
+ /** */
+ setFontSize(value, updateModel) {
+ const textShape = this.getTextShape();
+ textShape.setSize(value);
+
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setFontSize(value);
+ }
+ this._adjustShapes(updateModel);
+ }
+
+ /** */
+ setFontStyle(value, updateModel) {
+ const textShape = this.getTextShape();
+ textShape.setStyle(value);
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setFontStyle(value);
+ }
+ this._adjustShapes(updateModel);
+ }
+
+ /** */
+ setFontWeight(value, updateModel) {
+ const textShape = this.getTextShape();
+ textShape.setWeight(value);
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setFontWeight(value);
+ }
+ this._adjustShapes();
+ }
+
+ /** */
+ getFontWeight() {
+ const model = this.getModel();
+ let result = model.getFontWeight();
+ if (!$defined(result)) {
+ const font = TopicStyle.defaultFontStyle(this);
+ result = font.weight;
+ }
+ return result;
+ }
+
+ /** */
+ getFontFamily() {
+ const model = this.getModel();
+ let result = model.getFontFamily();
+ if (!$defined(result)) {
+ const font = TopicStyle.defaultFontStyle(this);
+ result = font.font;
+ }
+ return result;
+ }
+
+ /** */
+ getFontColor() {
+ const model = this.getModel();
+ let result = model.getFontColor();
+ if (!$defined(result)) {
+ const font = TopicStyle.defaultFontStyle(this);
+ result = font.color;
+ }
+ return result;
+ }
+
+ /** */
+ getFontStyle() {
+ const model = this.getModel();
+ let result = model.getFontStyle();
+ if (!$defined(result)) {
+ const font = TopicStyle.defaultFontStyle(this);
+ result = font.style;
+ }
+ return result;
+ }
+
+ /** */
+ getFontSize() {
+ const model = this.getModel();
+ let result = model.getFontSize();
+ if (!$defined(result)) {
+ const font = TopicStyle.defaultFontStyle(this);
+ result = font.size;
+ }
+ return result;
+ }
+
+ /** */
+ setFontColor(value, updateModel) {
+ const textShape = this.getTextShape();
+ textShape.setColor(value);
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setFontColor(value);
+ }
+ }
+
+ _setText(text, updateModel) {
+ const textShape = this.getTextShape();
+ textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
+
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setText(text);
+ }
+ }
+
+ /** */
+ setText(text) {
+ // Avoid empty nodes ...
+ if (!text || $.trim(text).length === 0) {
+ text = null;
+ }
+
+ this._setText(text, true);
+ this._adjustShapes();
+ }
+
+ /** */
+ getText() {
+ const model = this.getModel();
+ let result = model.getText();
+ if (!$defined(result)) {
+ result = TopicStyle.defaultText(this);
+ }
+ return result;
+ }
+
+ /** */
+ setBackgroundColor(color) {
+ this._setBackgroundColor(color, true);
+ }
+
+ _setBackgroundColor(color, updateModel) {
+ const innerShape = this.getInnerShape();
+ innerShape.setFill(color);
+
+ const connector = this.getShrinkConnector();
+ if (connector) {
+ connector.setFill(color);
+ }
+
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setBackgroundColor(color);
+ }
+ }
+
+ /** */
+ getBackgroundColor() {
+ const model = this.getModel();
+ let result = model.getBackgroundColor();
+ if (!$defined(result)) {
+ result = TopicStyle.defaultBackgroundColor(this);
+ }
+ return result;
+ }
+
+ /** */
+ setBorderColor(color) {
+ this._setBorderColor(color, true);
+ }
+
+ _setBorderColor(color, updateModel) {
+ const innerShape = this.getInnerShape();
+ innerShape.setAttribute('strokeColor', color);
+
+ const connector = this.getShrinkConnector();
+ if (connector) {
+ connector.setAttribute('strokeColor', color);
+ }
+
+ if ($defined(updateModel) && updateModel) {
+ const model = this.getModel();
+ model.setBorderColor(color);
+ }
+ }
+
+ /** */
+ getBorderColor() {
+ const model = this.getModel();
+ let result = model.getBorderColor();
+ if (!$defined(result)) {
+ result = TopicStyle.defaultBorderColor(this);
+ }
+ return result;
+ }
+
+ _buildTopicShape() {
+ const groupAttributes = {
+ width: 100,
+ height: 100,
+ coordSizeWidth: 100,
+ coordSizeHeight: 100,
+ };
+ const group = new web2d.Group(groupAttributes);
+ this._set2DElement(group);
+
+ // Shape must be build based on the model width ...
+ const outerShape = this.getOuterShape();
+ const innerShape = this.getInnerShape();
+ const textShape = this.getTextShape();
+
+ // Add to the group ...
+ group.append(outerShape);
+ group.append(innerShape);
+ group.append(textShape);
+
+ // Update figure size ...
+ const model = this.getModel();
+ if (model.getFeatures().length !== 0) {
+ this.getOrBuildIconGroup();
+ }
+
+ const shrinkConnector = this.getShrinkConnector();
+ if ($defined(shrinkConnector)) {
+ shrinkConnector.addToWorkspace(group);
+ }
+
+ // Register listeners ...
+ this._registerDefaultListenersToElement(group, this);
+ }
+
+ _registerDefaultListenersToElement(elem, topic) {
+ const mouseOver = function (event) {
+ if (topic.isMouseEventsEnabled()) {
+ topic.handleMouseOver(event);
+ }
+ };
+ elem.addEvent('mouseover', mouseOver);
+
+ const outout = function (event) {
+ if (topic.isMouseEventsEnabled()) {
+ topic.handleMouseOut(event);
+ }
+ };
+ elem.addEvent('mouseout', outout);
+
+ const me = this;
+ // Focus events ...
+ elem.addEvent('mousedown', (event) => {
+ if (!me.isReadOnly()) {
+ // Disable topic selection of readOnly mode ...
+ let value = true;
+ if (
+ (event.metaKey && Browser.Platform.mac)
+ || (event.ctrlKey && !Browser.Platform.mac)
+ ) {
+ value = !me.isOnFocus();
+ event.stopPropagation();
+ event.preventDefault();
}
+ topic.setOnFocus(value);
}
- const textShape = this.getTextShape();
- textShape.setVisibility(this.getShapeType() != TopicShape.IMAGE ? value : false);
- },
+ const eventDispatcher = me._getTopicEventDispatcher();
+ eventDispatcher.process(TopicEvent.CLICK, me);
+ event.stopPropagation();
+ });
+ }
- /** */
- setOpacity(opacity) {
- const elem = this.get2DElement();
- elem.setOpacity(opacity);
+ /** */
+ areChildrenShrunken() {
+ const model = this.getModel();
+ return model.areChildrenShrunken() && !this.isCentralTopic();
+ }
- const connector = this.getShrinkConnector();
- if ($defined(connector)) {
- connector.setOpacity(opacity);
+ /** */
+ isCollapsed() {
+ let result = false;
+
+ let current = this.getParent();
+ while (current && !result) {
+ result = current.areChildrenShrunken();
+ current = current.getParent();
+ }
+ return result;
+ }
+
+ /** */
+ setChildrenShrunken(value) {
+ // Update Model ...
+ const model = this.getModel();
+ model.setChildrenShrunken(value);
+
+ // Change render base on the state.
+ const shrinkConnector = this.getShrinkConnector();
+ if ($defined(shrinkConnector)) {
+ shrinkConnector.changeRender(value);
+ }
+
+ // Do some fancy animation ....
+ const elements = this._flatten2DElements(this);
+ const fade = new FadeEffect(elements, !value);
+ const me = this;
+ fade.addEvent('complete', () => {
+ // Set focus on the parent node ...
+ if (value) {
+ me.setOnFocus(true);
}
- const textShape = this.getTextShape();
- textShape.setOpacity(opacity);
- },
- _setChildrenVisibility(isVisible) {
- // Hide all children.
- const children = this.getChildren();
- const model = this.getModel();
+ // Set focus in false for all the children ...
+ elements.forEach((elem) => {
+ if (elem.setOnFocus) {
+ elem.setOnFocus(false);
+ }
+ });
+ });
+ fade.start();
- isVisible = isVisible ? !model.areChildrenShrunken() : isVisible;
- for (let i = 0; i < children.length; i++) {
- const child = children[i];
- child.setVisibility(isVisible);
+ EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model);
+ }
- const outgoingLine = child.getOutgoingLine();
- outgoingLine.setVisibility(isVisible);
- }
- },
+ /** */
+ getShrinkConnector() {
+ let result = this._connector;
+ if (this._connector == null) {
+ this._connector = new ShirinkConnector(this);
+ this._connector.setVisibility(false);
+ result = this._connector;
+ }
+ return result;
+ }
- /** */
- invariant() {
- const line = this._outgoingLine;
- const model = this.getModel();
- const isConnected = model.isConnected();
+ /** */
+ handleMouseOver() {
+ const outerShape = this.getOuterShape();
+ outerShape.setOpacity(1);
+ }
- // Check consistency...
- if ((isConnected && !line) || (!isConnected && line)) {
- // $assert(false,'Illegal state exception.');
- }
- },
+ /** */
+ handleMouseOut() {
+ const outerShape = this.getOuterShape();
+ if (!this.isOnFocus()) {
+ outerShape.setOpacity(0);
+ }
+ }
- /** */
- setSize(size, force) {
- $assert(size, 'size can not be null');
- $assert($defined(size.width), 'size seem not to be a valid element');
- size = { width: Math.ceil(size.width), height: Math.ceil(size.height) };
+ /** */
+ showTextEditor(text) {
+ this._getTopicEventDispatcher().show(this, { text });
+ }
- const oldSize = this.getSize();
- const hasSizeChanged = oldSize.width != size.width || oldSize.height != size.height;
- if (hasSizeChanged || force) {
- NodeGraph.prototype.setSize.call(this, size);
+ /** */
+ showNoteEditor() {
+ const topicId = this.getId();
+ const model = this.getModel();
+ const editorModel = {
+ getValue() {
+ const notes = model.findFeatureByType(TopicFeature.Note.id);
+ let result;
+ if (notes.length > 0) result = notes[0].getText();
- const outerShape = this.getOuterShape();
- const innerShape = this.getInnerShape();
+ return result;
+ },
- outerShape.setSize(size.width + 4, size.height + 6);
- innerShape.setSize(size.width, size.height);
-
- // Update the figure position(ej: central topic must be centered) and children position.
- this._updatePositionOnChangeSize(oldSize, size);
-
- if (hasSizeChanged) {
- EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, {
- node: this.getModel(),
- size,
+ setValue(value) {
+ const dispatcher = ActionDispatcher.getInstance();
+ const notes = model.findFeatureByType(TopicFeature.Note.id);
+ if (!$defined(value)) {
+ const featureId = notes[0].getId();
+ dispatcher.removeFeatureFromTopic(topicId, featureId);
+ } else if (notes.length > 0) {
+ dispatcher.changeFeatureToTopic(topicId, notes[0].getId(), {
+ text: value,
+ });
+ } else {
+ dispatcher.addFeatureToTopic(topicId, TopicFeature.Note.id, {
+ text: value,
});
}
}
- },
+ };
+ const editor = new NoteEditor(editorModel);
+ this.closeEditors();
+ editor.show();
+ }
- _updatePositionOnChangeSize() {
- $assert(false, 'this method must be overwrited.');
- },
+ /** opens a dialog where the user can enter or edit an existing link associated with this topic */
+ showLinkEditor() {
+ const topicId = this.getId();
+ const model = this.getModel();
+ const editorModel = {
+ getValue() {
+ // @param {mindplot.model.LinkModel[]} links
+ const links = model.findFeatureByType(TopicFeature.Link.id);
+ let result;
+ if (links.length > 0) result = links[0].getUrl();
- /** */
- disconnect(workspace) {
- const outgoingLine = this.getOutgoingLine();
- if ($defined(outgoingLine)) {
- $assert(workspace, 'workspace can not be null');
+ return result;
+ },
- this._outgoingLine = null;
-
- // Disconnect nodes ...
- const targetTopic = outgoingLine.getTargetTopic();
- targetTopic.removeChild(this);
-
- // Update model ...
- const childModel = this.getModel();
- childModel.disconnect();
-
- this._parent = null;
-
- // Remove graphical element from the workspace...
- outgoingLine.removeFromWorkspace(workspace);
-
- // Remove from workspace.
- EventBus.instance.fireEvent(EventBus.events.NodeDisconnectEvent, this.getModel());
-
- // Change text based on the current connection ...
- const model = this.getModel();
- if (!model.getText()) {
- const text = this.getText();
- this._setText(text, false);
- }
- if (!model.getFontSize()) {
- const size = this.getFontSize();
- this.setFontSize(size, false);
- }
-
- // Hide connection line?.
- if (targetTopic.getChildren().length == 0) {
- const connector = targetTopic.getShrinkConnector();
- if ($defined(connector)) {
- connector.setVisibility(false);
- }
+ setValue(value) {
+ const dispatcher = ActionDispatcher.getInstance();
+ const links = model.findFeatureByType(TopicFeature.Link.id);
+ if (!$defined(value)) {
+ const featureId = links[0].getId();
+ dispatcher.removeFeatureFromTopic(topicId, featureId);
+ } else if (links.length > 0) {
+ dispatcher.changeFeatureToTopic(topicId, links[0].getId(), {
+ url: value,
+ });
+ } else {
+ dispatcher.addFeatureToTopic(topicId, TopicFeature.Link.id, {
+ url: value,
+ });
}
}
- },
+ };
- /** */
- getOrder() {
- const model = this.getModel();
- return model.getOrder();
- },
+ this.closeEditors();
+ const editor = new LinkEditor(editorModel);
+ editor.show();
+ }
- /** */
- setOrder(value) {
- const model = this.getModel();
- model.setOrder(value);
- },
+ /** */
+ closeEditors() {
+ this._getTopicEventDispatcher().close(true);
+ }
- /** */
- connectTo(targetTopic, workspace) {
- $assert(!this._outgoingLine, 'Could not connect an already connected node');
- $assert(targetTopic != this, 'Circular connection are not allowed');
- $assert(targetTopic, 'Parent Graph can not be null');
- $assert(workspace, 'Workspace can not be null');
+ _getTopicEventDispatcher() {
+ return TopicEventDispatcher.getInstance();
+ }
- // Connect Graphical Nodes ...
- targetTopic.append(this);
- this._parent = targetTopic;
+ /**
+ * Point: references the center of the rect shape.!!!
+ */
+ setPosition(point) {
+ $assert(point, 'position can not be null');
+ point.x = Math.ceil(point.x);
+ point.y = Math.ceil(point.y);
+
+ // Update model's position ...
+ const model = this.getModel();
+ model.setPosition(point.x, point.y);
+
+ // Elements are positioned in the center.
+ // All topic element must be positioned based on the innerShape.
+ const size = this.getSize();
+
+ const cx = point.x - size.width / 2;
+ const cy = point.y - size.height / 2;
+
+ // Update visual position.
+ this._elem2d.setPosition(cx, cy);
+
+ // Update connection lines ...
+ this._updateConnectionLines();
+
+ // Check object state.
+ this.invariant();
+ }
+
+ /** */
+ getOutgoingLine() {
+ return this._outgoingLine;
+ }
+
+ /** */
+ getIncomingLines() {
+ const result = [];
+ const children = this.getChildren();
+ for (let i = 0; i < children.length; i++) {
+ const node = children[i];
+ const line = node.getOutgoingLine();
+ if ($defined(line)) {
+ result.push(line);
+ }
+ }
+ return result;
+ }
+
+ /** */
+ getOutgoingConnectedTopic() {
+ let result = null;
+ const line = this.getOutgoingLine();
+ if ($defined(line)) {
+ result = line.getTargetTopic();
+ }
+ return result;
+ }
+
+ _updateConnectionLines() {
+ // Update this to parent line ...
+ const outgoingLine = this.getOutgoingLine();
+ if ($defined(outgoingLine)) {
+ outgoingLine.redraw();
+ }
+
+ // Update all the incoming lines ...
+ const incomingLines = this.getIncomingLines();
+ for (let i = 0; i < incomingLines.length; i++) {
+ incomingLines[i].redraw();
+ }
+
+ // Update relationship lines
+ for (let j = 0; j < this._relationships.length; j++) {
+ this._relationships[j].redraw();
+ }
+ }
+
+ /** */
+ setBranchVisibility(value) {
+ let current = this;
+ let parent = this;
+ while (parent != null && !parent.isCentralTopic()) {
+ current = parent;
+ parent = current.getParent();
+ }
+ current.setVisibility(value);
+ }
+
+ /** */
+ setVisibility(value) {
+ this._setTopicVisibility(value);
+
+ // Hide all children...
+ this._setChildrenVisibility(value);
+
+ // If there there are connection to the node, topic must be hidden.
+ this._setRelationshipLinesVisibility(value);
+
+ // If it's connected, the connection must be rendered.
+ const outgoingLine = this.getOutgoingLine();
+ if (outgoingLine) {
+ outgoingLine.setVisibility(value);
+ }
+ }
+
+ /** */
+ moveToBack() {
+ // Update relationship lines
+ for (let j = 0; j < this._relationships.length; j++) {
+ this._relationships[j].moveToBack();
+ }
+ const connector = this.getShrinkConnector();
+ if ($defined(connector)) {
+ connector.moveToBack();
+ }
+
+ this.get2DElement().moveToBack();
+ }
+
+ /** */
+ moveToFront() {
+ this.get2DElement().moveToFront();
+ const connector = this.getShrinkConnector();
+ if ($defined(connector)) {
+ connector.moveToFront();
+ }
+ // Update relationship lines
+ for (let j = 0; j < this._relationships.length; j++) {
+ this._relationships[j].moveToFront();
+ }
+ }
+
+ /** */
+ isVisible() {
+ const elem = this.get2DElement();
+ return elem.isVisible();
+ }
+
+ _setRelationshipLinesVisibility(value) {
+ _.each(this._relationships, (relationship) => {
+ const sourceTopic = relationship.getSourceTopic();
+ const targetTopic = relationship.getTargetTopic();
+
+ const targetParent = targetTopic.getModel().getParent();
+ const sourceParent = sourceTopic.getModel().getParent();
+ relationship.setVisibility(
+ value
+ && (targetParent == null || !targetParent.areChildrenShrunken())
+ && (sourceParent == null || !sourceParent.areChildrenShrunken()),
+ );
+ });
+ }
+
+ _setTopicVisibility(value) {
+ const elem = this.get2DElement();
+ elem.setVisibility(value);
+
+ if (this.getIncomingLines().length > 0) {
+ const connector = this.getShrinkConnector();
+ if ($defined(connector)) {
+ connector.setVisibility(value);
+ }
+ }
+
+ const textShape = this.getTextShape();
+ textShape.setVisibility(this.getShapeType() != TopicShape.IMAGE ? value : false);
+ }
+
+ /** */
+ setOpacity(opacity) {
+ const elem = this.get2DElement();
+ elem.setOpacity(opacity);
+
+ const connector = this.getShrinkConnector();
+ if ($defined(connector)) {
+ connector.setOpacity(opacity);
+ }
+ const textShape = this.getTextShape();
+ textShape.setOpacity(opacity);
+ }
+
+ _setChildrenVisibility(isVisible) {
+ // Hide all children.
+ const children = this.getChildren();
+ const model = this.getModel();
+
+ isVisible = isVisible ? !model.areChildrenShrunken() : isVisible;
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i];
+ child.setVisibility(isVisible);
+
+ const outgoingLine = child.getOutgoingLine();
+ outgoingLine.setVisibility(isVisible);
+ }
+ }
+
+ /** */
+ invariant() {
+ const line = this._outgoingLine;
+ const model = this.getModel();
+ const isConnected = model.isConnected();
+
+ // Check consistency...
+ if ((isConnected && !line) || (!isConnected && line)) {
+ // $assert(false,'Illegal state exception.');
+ }
+ }
+
+ /** */
+ setSize(size, force) {
+ $assert(size, 'size can not be null');
+ $assert($defined(size.width), 'size seem not to be a valid element');
+ size = { width: Math.ceil(size.width), height: Math.ceil(size.height) };
+
+ const oldSize = this.getSize();
+ const hasSizeChanged = oldSize.width != size.width || oldSize.height != size.height;
+ if (hasSizeChanged || force) {
+ NodeGraph.prototype.setSize.call(this, size);
+
+ const outerShape = this.getOuterShape();
+ const innerShape = this.getInnerShape();
+
+ outerShape.setSize(size.width + 4, size.height + 6);
+ innerShape.setSize(size.width, size.height);
+
+ // Update the figure position(ej: central topic must be centered) and children position.
+ this._updatePositionOnChangeSize(oldSize, size);
+
+ if (hasSizeChanged) {
+ EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, {
+ node: this.getModel(),
+ size,
+ });
+ }
+ }
+ }
+
+ _updatePositionOnChangeSize() {
+ $assert(false, 'this method must be overwrited.');
+ }
+
+ /** */
+ disconnect(workspace) {
+ const outgoingLine = this.getOutgoingLine();
+ if ($defined(outgoingLine)) {
+ $assert(workspace, 'workspace can not be null');
+
+ this._outgoingLine = null;
+
+ // Disconnect nodes ...
+ const targetTopic = outgoingLine.getTargetTopic();
+ targetTopic.removeChild(this);
// Update model ...
- const targetModel = targetTopic.getModel();
const childModel = this.getModel();
- childModel.connectTo(targetModel);
+ childModel.disconnect();
- // Create a connection line ...
- const outgoingLine = new ConnectionLine(this, targetTopic);
- outgoingLine.setVisibility(false);
+ this._parent = null;
- this._outgoingLine = outgoingLine;
- workspace.append(outgoingLine);
+ // Remove graphical element from the workspace...
+ outgoingLine.removeFromWorkspace(workspace);
- // Update figure is necessary.
- this.updateTopicShape(targetTopic);
+ // Remove from workspace.
+ EventBus.instance.fireEvent(EventBus.events.NodeDisconnectEvent, this.getModel());
// Change text based on the current connection ...
const model = this.getModel();
@@ -1158,184 +1097,242 @@ const Topic = new Class(
const size = this.getFontSize();
this.setFontSize(size, false);
}
- this.getTextShape();
- // Display connection node...
- const connector = targetTopic.getShrinkConnector();
- if ($defined(connector)) {
- connector.setVisibility(true);
+ // Hide connection line?.
+ if (targetTopic.getChildren().length == 0) {
+ const connector = targetTopic.getShrinkConnector();
+ if ($defined(connector)) {
+ connector.setVisibility(false);
+ }
+ }
+ }
+ }
+
+ /** */
+ getOrder() {
+ const model = this.getModel();
+ return model.getOrder();
+ }
+
+ /** */
+ setOrder(value) {
+ const model = this.getModel();
+ model.setOrder(value);
+ }
+
+ /** */
+ connectTo(targetTopic, workspace) {
+ $assert(!this._outgoingLine, 'Could not connect an already connected node');
+ $assert(targetTopic != this, 'Circular connection are not allowed');
+ $assert(targetTopic, 'Parent Graph can not be null');
+ $assert(workspace, 'Workspace can not be null');
+
+ // Connect Graphical Nodes ...
+ targetTopic.append(this);
+ this._parent = targetTopic;
+
+ // Update model ...
+ const targetModel = targetTopic.getModel();
+ const childModel = this.getModel();
+ childModel.connectTo(targetModel);
+
+ // Create a connection line ...
+ const outgoingLine = new ConnectionLine(this, targetTopic);
+ outgoingLine.setVisibility(false);
+
+ this._outgoingLine = outgoingLine;
+ workspace.append(outgoingLine);
+
+ // Update figure is necessary.
+ this.updateTopicShape(targetTopic);
+
+ // Change text based on the current connection ...
+ const model = this.getModel();
+ if (!model.getText()) {
+ const text = this.getText();
+ this._setText(text, false);
+ }
+ if (!model.getFontSize()) {
+ const size = this.getFontSize();
+ this.setFontSize(size, false);
+ }
+ this.getTextShape();
+
+ // Display connection node...
+ const connector = targetTopic.getShrinkConnector();
+ if ($defined(connector)) {
+ connector.setVisibility(true);
+ }
+
+ // Redraw line ...
+ outgoingLine.redraw();
+
+ // Fire connection event ...
+ if (this.isInWorkspace()) {
+ EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
+ parentNode: targetTopic.getModel(),
+ childNode: this.getModel(),
+ });
+ }
+ }
+
+ /** */
+ append(child) {
+ const children = this.getChildren();
+ children.push(child);
+ }
+
+ /** */
+ removeChild(child) {
+ const children = this.getChildren();
+ children.erase(child);
+ }
+
+ /** */
+ getChildren() {
+ let result = this._children;
+ if (!$defined(result)) {
+ this._children = [];
+ result = this._children;
+ }
+ return result;
+ }
+
+ /** */
+ removeFromWorkspace(workspace) {
+ const elem2d = this.get2DElement();
+ workspace.removeChild(elem2d);
+ const line = this.getOutgoingLine();
+ if ($defined(line)) {
+ workspace.removeChild(line);
+ }
+ this._isInWorkspace = false;
+ EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
+ }
+
+ /** */
+ addToWorkspace(workspace) {
+ const elem = this.get2DElement();
+ workspace.append(elem);
+ if (!this.isInWorkspace()) {
+ if (!this.isCentralTopic()) {
+ EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel());
}
- // Redraw line ...
- outgoingLine.redraw();
-
- // Fire connection event ...
- if (this.isInWorkspace()) {
+ if (this.getModel().isConnected()) {
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
- parentNode: targetTopic.getModel(),
+ parentNode: this.getOutgoingConnectedTopic().getModel(),
childNode: this.getModel(),
});
}
- },
+ }
+ this._isInWorkspace = true;
+ this._adjustShapes();
+ }
- /** */
- append(child) {
+ /** */
+ isInWorkspace() {
+ return this._isInWorkspace;
+ }
+
+ /** */
+ createDragNode(layoutManager) {
+ const result = this.parent(layoutManager);
+
+ // Is the node already connected ?
+ const targetTopic = this.getOutgoingConnectedTopic();
+ if ($defined(targetTopic)) {
+ result.connectTo(targetTopic);
+ result.setVisibility(false);
+ }
+
+ // If a drag node is create for it, let's hide the editor.
+ this._getTopicEventDispatcher().close();
+
+ return result;
+ }
+
+ _adjustShapes() {
+ if (this._isInWorkspace) {
+ const textShape = this.getTextShape();
+ if (this.getShapeType() != TopicShape.IMAGE) {
+ const textWidth = textShape.getWidth();
+
+ let textHeight = textShape.getHeight();
+ textHeight = textHeight != 0 ? textHeight : 20;
+
+ const topicPadding = TopicStyle.getInnerPadding(this);
+
+ // Adjust the icon size to the size of the text ...
+ const iconGroup = this.getOrBuildIconGroup();
+ const fontHeight = this.getTextShape().getFontHeight();
+ iconGroup.setPosition(topicPadding, topicPadding);
+ iconGroup.seIconSize(fontHeight, fontHeight);
+
+ // Add a extra padding between the text and the icons
+ let iconsWidth = iconGroup.getSize().width;
+ if (iconsWidth != 0) {
+ iconsWidth += textHeight / 4;
+ }
+
+ const height = textHeight + topicPadding * 2;
+ const width = textWidth + iconsWidth + topicPadding * 2;
+
+ this.setSize({ width, height });
+
+ // Position node ...
+ textShape.setPosition(topicPadding + iconsWidth, topicPadding);
+ } else {
+ // In case of images, the size if fixed ...
+ const size = this.getModel().getImageSize();
+ this.setSize(size);
+ }
+ }
+ }
+
+ _flatten2DElements(topic) {
+ let result = [];
+
+ const children = topic.getChildren();
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i];
+ result.push(child);
+ result.push(child.getOutgoingLine());
+
+ const relationships = child.getRelationships();
+ result = result.concat(relationships);
+
+ if (!child.areChildrenShrunken()) {
+ const innerChilds = this._flatten2DElements(child);
+ result = result.concat(innerChilds);
+ }
+ }
+ return result;
+ }
+
+ /**
+ * @param childTopic
+ * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
+ */
+ isChildTopic(childTopic) {
+ let result = this.getId() == childTopic.getId();
+ if (!result) {
const children = this.getChildren();
- children.push(child);
- },
-
- /** */
- removeChild(child) {
- const children = this.getChildren();
- children.erase(child);
- },
-
- /** */
- getChildren() {
- let result = this._children;
- if (!$defined(result)) {
- this._children = [];
- result = this._children;
- }
- return result;
- },
-
- /** */
- removeFromWorkspace(workspace) {
- const elem2d = this.get2DElement();
- workspace.removeChild(elem2d);
- const line = this.getOutgoingLine();
- if ($defined(line)) {
- workspace.removeChild(line);
- }
- this._isInWorkspace = false;
- EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
- },
-
- /** */
- addToWorkspace(workspace) {
- const elem = this.get2DElement();
- workspace.append(elem);
- if (!this.isInWorkspace()) {
- if (!this.isCentralTopic()) {
- EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel());
- }
-
- if (this.getModel().isConnected()) {
- EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
- parentNode: this.getOutgoingConnectedTopic().getModel(),
- childNode: this.getModel(),
- });
- }
- }
- this._isInWorkspace = true;
- this._adjustShapes();
- },
-
- /** */
- isInWorkspace() {
- return this._isInWorkspace;
- },
-
- /** */
- createDragNode(layoutManager) {
- const result = this.parent(layoutManager);
-
- // Is the node already connected ?
- const targetTopic = this.getOutgoingConnectedTopic();
- if ($defined(targetTopic)) {
- result.connectTo(targetTopic);
- result.setVisibility(false);
- }
-
- // If a drag node is create for it, let's hide the editor.
- this._getTopicEventDispatcher().close();
-
- return result;
- },
-
- _adjustShapes() {
- if (this._isInWorkspace) {
- const textShape = this.getTextShape();
- if (this.getShapeType() != TopicShape.IMAGE) {
- const textWidth = textShape.getWidth();
-
- let textHeight = textShape.getHeight();
- textHeight = textHeight != 0 ? textHeight : 20;
-
- const topicPadding = TopicStyle.getInnerPadding(this);
-
- // Adjust the icon size to the size of the text ...
- const iconGroup = this.getOrBuildIconGroup();
- const fontHeight = this.getTextShape().getFontHeight();
- iconGroup.setPosition(topicPadding, topicPadding);
- iconGroup.seIconSize(fontHeight, fontHeight);
-
- // Add a extra padding between the text and the icons
- let iconsWidth = iconGroup.getSize().width;
- if (iconsWidth != 0) {
- iconsWidth += textHeight / 4;
- }
-
- const height = textHeight + topicPadding * 2;
- const width = textWidth + iconsWidth + topicPadding * 2;
-
- this.setSize({ width, height });
-
- // Position node ...
- textShape.setPosition(topicPadding + iconsWidth, topicPadding);
- } else {
- // In case of images, the size if fixed ...
- const size = this.getModel().getImageSize();
- this.setSize(size);
- }
- }
- },
-
- _flatten2DElements(topic) {
- let result = [];
-
- const children = topic.getChildren();
for (let i = 0; i < children.length; i++) {
- const child = children[i];
- result.push(child);
- result.push(child.getOutgoingLine());
-
- const relationships = child.getRelationships();
- result = result.concat(relationships);
-
- if (!child.areChildrenShrunken()) {
- const innerChilds = this._flatten2DElements(child);
- result = result.concat(innerChilds);
+ const parent = children[i];
+ result = parent.isChildTopic(childTopic);
+ if (result) {
+ break;
}
}
- return result;
- },
+ }
+ return result;
+ }
- /**
- * @param childTopic
- * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself
- */
- isChildTopic(childTopic) {
- let result = this.getId() == childTopic.getId();
- if (!result) {
- const children = this.getChildren();
- for (let i = 0; i < children.length; i++) {
- const parent = children[i];
- result = parent.isChildTopic(childTopic);
- if (result) {
- break;
- }
- }
- }
- return result;
- },
-
- /** @return {Boolean} true if the topic is the central topic of the map */
- isCentralTopic() {
- return this.getModel().getType() == INodeModel.CENTRAL_TOPIC_TYPE;
- },
- },
-);
+ /** @return {Boolean} true if the topic is the central topic of the map */
+ isCentralTopic() {
+ return this.getModel().getType() == INodeModel.CENTRAL_TOPIC_TYPE;
+ }
+}
export default Topic;
diff --git a/packages/mindplot/src/components/TopicEventDispatcher.js b/packages/mindplot/src/components/TopicEventDispatcher.js
index 1e0a1e72..05aea983 100644
--- a/packages/mindplot/src/components/TopicEventDispatcher.js
+++ b/packages/mindplot/src/components/TopicEventDispatcher.js
@@ -25,25 +25,25 @@ const TopicEvent = {
CLICK: 'clicknode',
};
-const TopicEventDispatcher = new Class({
- Extends: Events,
-
- initialize(readOnly) {
+class TopicEventDispatcher extends Events {
+ constructor(readOnly)
+ {
+ super();
this._readOnly = readOnly;
this._activeEditor = null;
this._multilineEditor = new MultilineTextEditor();
- },
+ }
close(update) {
if (this.isVisible()) {
this._activeEditor.close(update);
this._activeEditor = null;
}
- },
+ }
show(topic, options) {
this.process(TopicEvent.EDIT, topic, options);
- },
+ }
process(eventType, topic, options) {
$assert(eventType, 'eventType can not be null');
@@ -57,20 +57,20 @@ const TopicEventDispatcher = new Class({
const model = topic.getModel();
if (
model.getShapeType() !== TopicShape.IMAGE
- && !this._readOnly
- && eventType === TopicEvent.EDIT
+ && !this._readOnly
+ && eventType === TopicEvent.EDIT
) {
this._multilineEditor.show(topic, options ? options.text : null);
this._activeEditor = this._multilineEditor;
} else {
this.fireEvent(eventType, { model, readOnly: this._readOnly });
}
- },
+ }
isVisible() {
return this._activeEditor != null && this._activeEditor.isVisible();
- },
-});
+ }
+}
TopicEventDispatcher._instance = null;
diff --git a/packages/mindplot/src/components/TopicStyle.js b/packages/mindplot/src/components/TopicStyle.js
index 6a87b41b..05049773 100644
--- a/packages/mindplot/src/components/TopicStyle.js
+++ b/packages/mindplot/src/components/TopicStyle.js
@@ -18,53 +18,53 @@
import { $assert, $defined } from '@wisemapping/core-js';
import { TopicShape } from './model/INodeModel';
-const TopicStyle = new Class({});
+class TopicStyle {
+ static _getStyles(topic) {
+ $assert(topic, 'topic can not be null');
-TopicStyle._getStyles = function _getStyles(topic) {
- $assert(topic, 'topic can not be null');
-
- let result;
- if (topic.isCentralTopic()) {
- result = TopicStyle.STYLES.CENTRAL_TOPIC;
- } else {
- const targetTopic = topic.getOutgoingConnectedTopic();
- if ($defined(targetTopic)) {
- if (targetTopic.isCentralTopic()) {
- result = TopicStyle.STYLES.MAIN_TOPIC;
- } else {
- result = TopicStyle.STYLES.SUB_TOPIC;
- }
+ let result;
+ if (topic.isCentralTopic()) {
+ result = TopicStyle.STYLES.CENTRAL_TOPIC;
} else {
- result = TopicStyle.STYLES.ISOLATED_TOPIC;
+ const targetTopic = topic.getOutgoingConnectedTopic();
+ if ($defined(targetTopic)) {
+ if (targetTopic.isCentralTopic()) {
+ result = TopicStyle.STYLES.MAIN_TOPIC;
+ } else {
+ result = TopicStyle.STYLES.SUB_TOPIC;
+ }
+ } else {
+ result = TopicStyle.STYLES.ISOLATED_TOPIC;
+ }
}
+ return result;
}
- return result;
-};
-TopicStyle.defaultText = function defaultText(topic) {
- const { msgKey } = this._getStyles(topic);
- return $msg(msgKey);
-};
+ static defaultText(topic) {
+ const { msgKey } = this._getStyles(topic);
+ return $msg(msgKey);
+ }
-TopicStyle.defaultFontStyle = function defaultFontStyle(topic) {
- return this._getStyles(topic).fontStyle;
-};
+ static defaultFontStyle(topic) {
+ return this._getStyles(topic).fontStyle;
+ }
-TopicStyle.defaultBackgroundColor = function defaultBackgroundColor(topic) {
- return this._getStyles(topic).backgroundColor;
-};
+ static defaultBackgroundColor(topic) {
+ return this._getStyles(topic).backgroundColor;
+ }
-TopicStyle.defaultBorderColor = function defaultBorderColor(topic) {
- return this._getStyles(topic).borderColor;
-};
+ static defaultBorderColor(topic) {
+ return this._getStyles(topic).borderColor;
+ }
-TopicStyle.getInnerPadding = function getInnerPadding(topic) {
- return this._getStyles(topic).innerPadding;
-};
+ static getInnerPadding(topic) {
+ return this._getStyles(topic).innerPadding;
+ }
-TopicStyle.defaultShapeType = function defaultShapeType(topic) {
- return this._getStyles(topic).shapeType;
-};
+ static defaultShapeType(topic) {
+ return this._getStyles(topic).shapeType;
+ }
+}
TopicStyle.STYLES = {
CENTRAL_TOPIC: {
diff --git a/packages/mindplot/src/components/Workspace.js b/packages/mindplot/src/components/Workspace.js
index f73ea34d..bbc93303 100644
--- a/packages/mindplot/src/components/Workspace.js
+++ b/packages/mindplot/src/components/Workspace.js
@@ -16,7 +16,7 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
class Workspace {
constructor(screenManager, zoom) {
diff --git a/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js b/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js
index b013ffe9..9bdb2997 100644
--- a/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js
+++ b/packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js
@@ -17,10 +17,8 @@
*/
import Command from '../Command';
-const AddFeatureToTopicCommand = new Class(
- /** @lends AddFeatureToTopicCommand */ {
- Extends: Command,
- /*
+class AddFeatureToTopicCommand extends Command {
+ /*
* @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
@@ -30,41 +28,40 @@ const AddFeatureToTopicCommand = new Class(
* @extends mindplot.Command
* @see mindplot.model.FeatureModel and subclasses
*/
- initialize(topicId, featureType, attributes) {
- $assert($defined(topicId), 'topicId can not be null');
- $assert(featureType, 'featureType can not be null');
- $assert(attributes, 'attributes can not be null');
+ constructor(topicId, featureType, attributes) {
+ $assert($defined(topicId), 'topicId can not be null');
+ $assert(featureType, 'featureType can not be null');
+ $assert(attributes, 'attributes can not be null');
- this.parent();
- this._topicId = topicId;
- this._featureType = featureType;
- this._attributes = attributes;
- this._featureModel = null;
- },
+ super();
+ this._topicId = topicId;
+ this._featureType = featureType;
+ this._attributes = attributes;
+ this._featureModel = null;
+ }
- /**
+ /**
* Overrides abstract parent method
*/
- execute(commandContext) {
- const topic = commandContext.findTopics(this._topicId)[0];
+ execute(commandContext) {
+ const topic = commandContext.findTopics(this._topicId)[0];
- // Feature must be created only one time.
- if (!this._featureModel) {
- const model = topic.getModel();
- this._featureModel = model.createFeature(this._featureType, this._attributes);
- }
- topic.addFeature(this._featureModel);
- },
+ // Feature must be created only one time.
+ if (!this._featureModel) {
+ const model = topic.getModel();
+ this._featureModel = model.createFeature(this._featureType, this._attributes);
+ }
+ topic.addFeature(this._featureModel);
+ }
- /**
+ /**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
- undoExecute(commandContext) {
- const topic = commandContext.findTopics(this._topicId)[0];
- topic.removeFeature(this._featureModel);
- },
- },
-);
+ undoExecute(commandContext) {
+ const topic = commandContext.findTopics(this._topicId)[0];
+ topic.removeFeature(this._featureModel);
+ }
+}
export default AddFeatureToTopicCommand;
diff --git a/packages/mindplot/src/components/commands/AddRelationshipCommand.js b/packages/mindplot/src/components/commands/AddRelationshipCommand.js
index cbad2d3e..d02a6819 100644
--- a/packages/mindplot/src/components/commands/AddRelationshipCommand.js
+++ b/packages/mindplot/src/components/commands/AddRelationshipCommand.js
@@ -17,20 +17,19 @@
*/
import Command from '../Command';
-const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
- Extends: Command,
+class AddRelationshipCommand extends Command {
/**
* @classdesc This command class handles do/undo of adding a relationship to a topic.
* @constructs
* @param {XMLDOM} model
* @extends mindplot.Command
*/
- initialize(model) {
+ constructor(model) {
$assert(model, 'Relationship model can not be null');
- this.parent();
+ super();
this._model = model;
- },
+ }
/**
* Overrides abstract parent method
@@ -38,7 +37,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
execute(commandContext) {
const relationship = commandContext.addRelationship(this._model);
relationship.setOnFocus(true);
- },
+ }
/**
* Overrides abstract parent method
@@ -47,7 +46,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
undoExecute(commandContext) {
const rel = commandContext.findRelationships(this._model.getId());
commandContext.deleteRelationship(rel[0]);
- },
-});
+ }
+}
export default AddRelationshipCommand;
diff --git a/packages/mindplot/src/components/commands/AddTopicCommand.js b/packages/mindplot/src/components/commands/AddTopicCommand.js
index 471d60aa..45d090cd 100644
--- a/packages/mindplot/src/components/commands/AddTopicCommand.js
+++ b/packages/mindplot/src/components/commands/AddTopicCommand.js
@@ -17,81 +17,75 @@
*/
import Command from '../Command';
-const AddTopicCommand = new Class(
- /** @lends AddTopicCommand */ {
- Extends: Command,
- /**
- * @classdesc This command class handles do/undo of adding one or multiple topics to
- * the mindmap.
- * @constructs
- * @param {Array} models one or multiple models
- * @param {Array} parentTopicsId ids of the parent topics to add the children to, or null
- * when attaching a dragged node or a node/branch from clipboard
- * @extends mindplot.Command
- */
- initialize(models, parentTopicsId) {
- $assert(models, 'models can not be null');
- $assert(
- parentTopicsId == null || parentTopicsId.length == models.length,
- 'parents and models must have the same size',
- );
+class AddTopicCommand extends Command {
+ /**
+ * @classdesc This command class handles do/undo of adding one or multiple topics to
+ * the mindmap.
+ * @constructs
+ * @param {Array} models one or multiple models
+ * @param {Array} parentTopicsId ids of the parent topics to add the children to, or null
+ * when attaching a dragged node or a node/branch from clipboard
+ * @extends mindplot.Command
+ */
+ constructor(models, parentTopicsId) {
+ $assert(models, 'models can not be null');
+ $assert(parentTopicsId == null || parentTopicsId.length == models.length, 'parents and models must have the same size');
- this.parent();
- this._models = models;
- this._parentsIds = parentTopicsId;
- },
+ super();
+ this._models = models;
+ this._parentsIds = parentTopicsId;
+ }
- /**
- * Overrides abstract parent method
- */
- execute(commandContext) {
- const me = this;
- _.each(this._models, (model, index) => {
- // Add a new topic ...
- const topic = commandContext.createTopic(model);
+ /**
+ * Overrides abstract parent method
+ */
+ execute(commandContext) {
+ const me = this;
+ _.each(this._models, (model, index) => {
+ // Add a new topic ...
+ const topic = commandContext.createTopic(model);
- // Connect to topic ...
- if (me._parentsIds) {
- const parentId = me._parentsIds[index];
- if ($defined(parentId)) {
- const parentTopic = commandContext.findTopics(parentId)[0];
- commandContext.connect(topic, parentTopic);
- }
- } else {
- commandContext.addTopic(topic);
+ // Connect to topic ...
+ if (me._parentsIds) {
+ const parentId = me._parentsIds[index];
+ if ($defined(parentId)) {
+ const parentTopic = commandContext.findTopics(parentId)[0];
+ commandContext.connect(topic, parentTopic);
}
+ } else {
+ commandContext.addTopic(topic);
+ }
- // Select just created node ...
- const designer = commandContext._designer;
- designer.onObjectFocusEvent(topic);
- topic.setOnFocus(true);
+ // Select just created node ...
+ const designer = commandContext._designer;
+ designer.onObjectFocusEvent(topic);
+ topic.setOnFocus(true);
- // Render node ...
- topic.setVisibility(true);
- });
- },
+ // Render node ...
+ topic.setVisibility(true);
+ });
+ }
- /**
- * Overrides abstract parent method
- * @see {@link mindplot.Command.undoExecute}
- */
- undoExecute(commandContext) {
- // Delete disconnected the nodes. Create a copy of the topics ...
- const clonedModel = [];
- _.each(this._models, (model) => {
- clonedModel.push(model.clone());
- });
+ /**
+ * Overrides abstract parent method
+ * @see {@link mindplot.Command.undoExecute}
+ */
+ undoExecute(commandContext) {
+ // Delete disconnected the nodes. Create a copy of the topics ...
+ const clonedModel = [];
+ _.each(this._models, (model) => {
+ clonedModel.push(model.clone());
+ });
- // Finally, remove the nodes ...
- _.each(this._models, (model) => {
- const topicId = model.getId();
- const topic = commandContext.findTopics(topicId)[0];
- commandContext.deleteTopic(topic);
- });
+ // Finally, remove the nodes ...
+ _.each(this._models, (model) => {
+ const topicId = model.getId();
+ const topic = commandContext.findTopics(topicId)[0];
+ commandContext.deleteTopic(topic);
+ });
- this._models = clonedModel;
- },
- },
-);
+ this._models = clonedModel;
+ }
+}
export default AddTopicCommand;
diff --git a/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js b/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js
index 3babdd1a..d8cfa8cd 100644
--- a/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js
+++ b/packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js
@@ -17,8 +17,7 @@
*/
import Command from '../Command';
-const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCommand */{
- Extends: Command,
+class ChangeFeatureToTopicCommand extends Command {
/**
* @extends mindplot.Command
* @constructs
@@ -29,16 +28,16 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
* @throws will throw an error if featureId is null or undefined
* @throws will throw an error if attributes is null or undefined
*/
- initialize(topicId, featureId, attributes) {
+ constructor(topicId, featureId, attributes) {
$assert($defined(topicId), 'topicId can not be null');
$assert($defined(featureId), 'featureId can not be null');
$assert($defined(attributes), 'attributes can not be null');
- this.parent();
+ super();
this._topicId = topicId;
this._featureId = featureId;
this._attributes = attributes;
- },
+ }
/**
* Overrides abstract parent method
@@ -50,7 +49,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
const oldAttributes = feature.getAttributes();
feature.setAttributes(this._attributes);
this._attributes = oldAttributes;
- },
+ }
/**
* Overrides abstract parent method
@@ -58,7 +57,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
*/
undoExecute(commandContext) {
this.execute(commandContext);
- },
-});
+ }
+}
export default ChangeFeatureToTopicCommand;
diff --git a/packages/mindplot/src/components/commands/DeleteCommand.js b/packages/mindplot/src/components/commands/DeleteCommand.js
index 39ab3c10..b84d069f 100644
--- a/packages/mindplot/src/components/commands/DeleteCommand.js
+++ b/packages/mindplot/src/components/commands/DeleteCommand.js
@@ -17,8 +17,7 @@
*/
import Command from '../Command';
-const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
- Extends: Command,
+class DeleteCommand extends Command {
/**
* @classdesc This command class handles do/undo of deleting a topic.
* @constructs
@@ -26,16 +25,16 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
* @param {Array} relIds ids of the relationships connected to the topics
* @extends mindplot.Command
*/
- initialize(topicIds, relIds) {
+ constructor(topicIds, relIds) {
$assert($defined(relIds), 'topicIds can not be null');
- this.parent();
+ super();
this._relIds = relIds;
this._topicIds = topicIds;
this._deletedTopicModels = [];
this._deletedRelModel = [];
this._parentTopicIds = [];
- },
+ }
/**
* Overrides abstract parent method
@@ -81,7 +80,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
commandContext.deleteRelationship(rel);
}, this);
}
- },
+ }
/**
* Overrides abstract parent method
@@ -125,7 +124,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
this._deletedTopicModels = [];
this._parentTopicIds = [];
this._deletedRelModel = [];
- },
+ }
_filterChildren(topicIds, commandContext) {
const topics = commandContext.findTopics(topicIds);
@@ -148,7 +147,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
});
return result;
- },
+ }
_collectInDepthRelationships(topic) {
let result = [];
@@ -172,8 +171,8 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
result = ret;
}
return result;
- },
+ }
-});
+}
export default DeleteCommand;
diff --git a/packages/mindplot/src/components/commands/DragTopicCommand.js b/packages/mindplot/src/components/commands/DragTopicCommand.js
index 1536109b..6cc39a4e 100644
--- a/packages/mindplot/src/components/commands/DragTopicCommand.js
+++ b/packages/mindplot/src/components/commands/DragTopicCommand.js
@@ -17,8 +17,7 @@
*/
import Command from '../Command';
-const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
- Extends: Command,
+class DragTopicCommand extends Command {
/**
* @classdesc This command class handles do/undo of dragging a topic to a new position.
* @constructs
@@ -28,7 +27,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
* @param {mindplot.Topic} parentTopic the topic to be made the dragged topic's new parent
* @extends mindplot.Command
*/
- initialize(topicId, position, order, parentTopic) {
+ constructor(topicId, position, order, parentTopic) {
$assert(topicId, 'topicId must be defined');
this._topicsId = topicId;
@@ -37,7 +36,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
this.parent();
this._position = position;
this._order = order;
- },
+ }
/**
* Overrides abstract parent method
@@ -85,7 +84,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
// Store for undo ...
this._order = origOrder;
this._position = origPosition;
- },
+ }
/**
* Overrides abstract parent method
@@ -93,7 +92,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
*/
undoExecute(commandContext) {
this.execute(commandContext);
- },
-});
+ }
+}
export default DragTopicCommand;
diff --git a/packages/mindplot/src/components/commands/GenericFunctionCommand.js b/packages/mindplot/src/components/commands/GenericFunctionCommand.js
index ac81ddcc..bffe605d 100644
--- a/packages/mindplot/src/components/commands/GenericFunctionCommand.js
+++ b/packages/mindplot/src/components/commands/GenericFunctionCommand.js
@@ -19,8 +19,7 @@ import { $defined, $assert } from '@wisemapping/core-js';
import _ from '@libraries/underscore-min';
import Command from '../Command';
-const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
- Extends: Command,
+class GenericFunctionCommand extends Command {
/**
* @classdesc This command handles do/undo of different actions, e.g. moving topics to
* a different position, changing text or font,... (for full reference check the
@@ -32,16 +31,16 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
* e.g. color, font family or text
* @extends mindplot.Command
*/
- initialize(commandFunc, topicsIds, value) {
+ constructor(commandFunc, topicsIds, value) {
$assert(commandFunc, 'commandFunc must be defined');
$assert($defined(topicsIds), 'topicsIds must be defined');
- this.parent();
+ super();
this._value = value;
this._topicsId = topicsIds;
this._commandFunc = commandFunc;
this._oldValues = [];
- },
+ }
/**
* Overrides abstract parent method
@@ -72,7 +71,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
} else {
throw 'Command can not be applied two times in a row.';
}
- },
+ }
/**
* Overrides abstract parent method
@@ -91,7 +90,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
} else {
throw new Error('undo can not be applied.');
}
- },
-});
+ }
+}
export default GenericFunctionCommand;
diff --git a/packages/mindplot/src/components/commands/MoveControlPointCommand.js b/packages/mindplot/src/components/commands/MoveControlPointCommand.js
index c6fc7232..1bd086c2 100644
--- a/packages/mindplot/src/components/commands/MoveControlPointCommand.js
+++ b/packages/mindplot/src/components/commands/MoveControlPointCommand.js
@@ -17,10 +17,8 @@
*/
import Command from '../Command';
-const MoveControlPointCommand = new Class(
- /** @lends MoveControlPointCommand */ {
- Extends: Command,
- /**
+class MoveControlPointCommand extends Command {
+ /**
* @classdesc This command handles do/undo of changing the control points of a relationship
* arrow. These are the two points that appear when the relationship is on focus. They
* influence how the arrow is drawn (not the source or the destination topic nor the arrow
@@ -31,94 +29,93 @@ const MoveControlPointCommand = new Class(
* @param ctrlPointController {ControlPoint}
* @param point {Number} 0 for the destination control point, 1 for the source control point
*/
- initialize(ctrlPointController, point) {
- $assert(ctrlPointController, 'line can not be null');
- $assert($defined(point), 'point can not be null');
+ constructor(ctrlPointController, point) {
+ $assert(ctrlPointController, 'line can not be null');
+ $assert($defined(point), 'point can not be null');
- this.parent();
- this._ctrlPointControler = ctrlPointController;
- this._line = ctrlPointController._line;
- this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
- this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone();
- this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone();
- switch (point) {
- case 0:
- this._wasCustom = this._line.getLine().isSrcControlPointCustom();
- this._endPoint = this._line.getLine().getFrom().clone();
- break;
- case 1:
- this._wasCustom = this._line.getLine().isDestControlPointCustom();
- this._endPoint = this._line.getLine().getTo().clone();
- break;
- default:
- break;
- }
- this._point = point;
- },
+ super();
+ this._ctrlPointControler = ctrlPointController;
+ this._line = ctrlPointController._line;
+ this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
+ this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone();
+ this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone();
+ switch (point) {
+ case 0:
+ this._wasCustom = this._line.getLine().isSrcControlPointCustom();
+ this._endPoint = this._line.getLine().getFrom().clone();
+ break;
+ case 1:
+ this._wasCustom = this._line.getLine().isDestControlPointCustom();
+ this._endPoint = this._line.getLine().getTo().clone();
+ break;
+ default:
+ break;
+ }
+ this._point = point;
+ }
- /**
+ /**
* Overrides abstract parent method
*/
- execute() {
- const model = this._line.getModel();
- switch (this._point) {
- case 0:
- model.setSrcCtrlPoint(this._controlPoint.clone());
- this._line.setFrom(this._endPoint.x, this._endPoint.y);
- this._line.setIsSrcControlPointCustom(true);
- this._line.setSrcControlPoint(this._controlPoint.clone());
- break;
- case 1:
- model.setDestCtrlPoint(this._controlPoint.clone());
- this._wasCustom = this._line.getLine().isDestControlPointCustom();
- this._line.setTo(this._endPoint.x, this._endPoint.y);
- this._line.setIsDestControlPointCustom(true);
- this._line.setDestControlPoint(this._controlPoint.clone());
- break;
- default:
- break;
- }
- if (this._line.isOnFocus()) {
- this._line._refreshShape();
- this._ctrlPointControler.setLine(this._line);
- }
- this._line.getLine().updateLine(this._point);
- },
+ execute() {
+ const model = this._line.getModel();
+ switch (this._point) {
+ case 0:
+ model.setSrcCtrlPoint(this._controlPoint.clone());
+ this._line.setFrom(this._endPoint.x, this._endPoint.y);
+ this._line.setIsSrcControlPointCustom(true);
+ this._line.setSrcControlPoint(this._controlPoint.clone());
+ break;
+ case 1:
+ model.setDestCtrlPoint(this._controlPoint.clone());
+ this._wasCustom = this._line.getLine().isDestControlPointCustom();
+ this._line.setTo(this._endPoint.x, this._endPoint.y);
+ this._line.setIsDestControlPointCustom(true);
+ this._line.setDestControlPoint(this._controlPoint.clone());
+ break;
+ default:
+ break;
+ }
+ if (this._line.isOnFocus()) {
+ this._line._refreshShape();
+ this._ctrlPointControler.setLine(this._line);
+ }
+ this._line.getLine().updateLine(this._point);
+ }
- /**
+ /**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
- undoExecute() {
- const line = this._line;
- const model = line.getModel();
- switch (this._point) {
- case 0:
- if ($defined(this._oldControlPoint)) {
- line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
- model.setSrcCtrlPoint(this._oldControlPoint.clone());
- line.setSrcControlPoint(this._oldControlPoint.clone());
- line.setIsSrcControlPointCustom(this._wasCustom);
- }
- break;
- case 1:
- if ($defined(this._oldControlPoint)) {
- line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
- model.setDestCtrlPoint(this._oldControlPoint.clone());
- line.setDestControlPoint(this._oldControlPoint.clone());
- line.setIsDestControlPointCustom(this._wasCustom);
- }
- break;
- default:
- break;
- }
- this._line.getLine().updateLine(this._point);
- if (this._line.isOnFocus()) {
- this._ctrlPointControler.setLine(line);
- line._refreshShape();
- }
- },
- },
-);
+ undoExecute() {
+ const line = this._line;
+ const model = line.getModel();
+ switch (this._point) {
+ case 0:
+ if ($defined(this._oldControlPoint)) {
+ line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
+ model.setSrcCtrlPoint(this._oldControlPoint.clone());
+ line.setSrcControlPoint(this._oldControlPoint.clone());
+ line.setIsSrcControlPointCustom(this._wasCustom);
+ }
+ break;
+ case 1:
+ if ($defined(this._oldControlPoint)) {
+ line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
+ model.setDestCtrlPoint(this._oldControlPoint.clone());
+ line.setDestControlPoint(this._oldControlPoint.clone());
+ line.setIsDestControlPointCustom(this._wasCustom);
+ }
+ break;
+ default:
+ break;
+ }
+ this._line.getLine().updateLine(this._point);
+ if (this._line.isOnFocus()) {
+ this._ctrlPointControler.setLine(line);
+ line._refreshShape();
+ }
+ }
+}
export default MoveControlPointCommand;
diff --git a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js
index 7e0aa2f7..721b750a 100644
--- a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js
+++ b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js
@@ -17,8 +17,7 @@
*/
import Command from '../Command';
-const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopicCommand */{
- Extends: Command,
+class RemoveFeatureFromTopicCommand extends Command {
/**
* @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}.
@@ -27,15 +26,15 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
* @param {String} featureId id of the feature to remove
* @extends mindplot.Command
*/
- initialize(topicId, featureId) {
+ constructor(topicId, featureId) {
$assert($defined(topicId), 'topicId can not be null');
$assert(featureId, 'iconModel can not be null');
- this.parent();
+ super();
this._topicId = topicId;
this._featureId = featureId;
this._oldFeature = null;
- },
+ }
/**
* Overrides abstract parent method
@@ -45,7 +44,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
const feature = topic.findFeatureById(this._featureId);
topic.removeFeature(feature);
this._oldFeature = feature;
- },
+ }
/**
* Overrides abstract parent method
@@ -55,7 +54,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
const topic = commandContext.findTopics(this._topicId)[0];
topic.addFeature(this._oldFeature);
this._oldFeature = null;
- },
-});
+ }
+}
export default RemoveFeatureFromTopicCommand;
diff --git a/packages/mindplot/src/components/commands/index.js b/packages/mindplot/src/components/commands/index.js
deleted file mode 100644
index 20c113d5..00000000
--- a/packages/mindplot/src/components/commands/index.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import addFeatureToTopicCommand from './AddFeatureToTopicCommand';
-import addRelationshipCommand from './AddRelationshipCommand';
-import addTopicCommand from './AddTopicCommand';
-import changeFeatureToTopicCommand from './ChangeFeatureToTopicCommand';
-import deleteCommand from './DeleteCommand';
-import dragTopicCommand from './DragTopicCommand';
-import genericFunctionCommand from './GenericFunctionCommand';
-import moveControlPointCommand from './MoveControlPointCommand';
-import removeFeatureFromTopicCommand from './RemoveFeatureFromTopicCommand';
-
-export default {
- AddFeatureToTopicCommand: addFeatureToTopicCommand,
- AddRelationshipCommand: addRelationshipCommand,
- AddTopicCommand: addTopicCommand,
- ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
- DeleteCommand: deleteCommand,
- DragTopicCommand: dragTopicCommand,
- GenericFunctionCommand: genericFunctionCommand,
- MoveControlPointCommand: moveControlPointCommand,
- RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
-};
diff --git a/packages/mindplot/src/components/layout/OriginalLayout.js b/packages/mindplot/src/components/layout/OriginalLayout.js
index 2bdb1e17..451aed0a 100644
--- a/packages/mindplot/src/components/layout/OriginalLayout.js
+++ b/packages/mindplot/src/components/layout/OriginalLayout.js
@@ -21,10 +21,10 @@ import Node from './Node';
import SymmetricSorter from './SymmetricSorter';
import BalancedSorter from './BalancedSorter';
-const OriginalLayout = new Class({
- initialize(treeSet) {
+class OriginalLayout {
+ constructor(treeSet) {
this._treeSet = treeSet;
- },
+ }
/** */
createNode(id, size, position, type) {
@@ -35,7 +35,7 @@ const OriginalLayout = new Class({
const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
return new Node(id, size, position, strategy);
- },
+ }
/** */
connectNode(parentId, childId, order) {
@@ -51,7 +51,7 @@ const OriginalLayout = new Class({
// Fire a basic validation ...
sorter.verify(this._treeSet, parent);
- },
+ }
/** */
disconnectNode(nodeId) {
@@ -72,7 +72,7 @@ const OriginalLayout = new Class({
// Fire a basic validation ...
parent.getSorter().verify(this._treeSet, parent);
- },
+ }
/** */
layout() {
@@ -91,7 +91,7 @@ const OriginalLayout = new Class({
},
this,
);
- },
+ }
_layoutChildren(node, heightById) {
const nodeId = node.getId();
@@ -154,7 +154,7 @@ const OriginalLayout = new Class({
},
this,
);
- },
+ }
_calculateAlignOffset(node, child, heightById) {
if (child.isFree()) {
@@ -191,14 +191,14 @@ const OriginalLayout = new Class({
}
return offset;
- },
+ }
_branchIsTaller(node, heightById) {
return (
heightById[node.getId()]
> node.getSize().height + node.getSorter()._getVerticalPadding() * 2
);
- },
+ }
_fixOverlapping(node, heightById) {
const children = this._treeSet.getChildren(node);
@@ -214,7 +214,7 @@ const OriginalLayout = new Class({
},
this,
);
- },
+ }
_shiftBranches(node, heightById) {
const shiftedBranches = [node];
@@ -254,7 +254,7 @@ const OriginalLayout = new Class({
},
this,
);
- },
+ }
_branchesOverlap(branchA, branchB, heightById) {
// a branch doesn't really overlap with itself
@@ -268,9 +268,8 @@ const OriginalLayout = new Class({
const bottomB = branchB.getPosition().y + heightById[branchB.getId()] / 2;
return !(topA >= bottomB || bottomA <= topB);
- },
-},
-);
+ }
+}
/**
* @type {mindplot.layout.SymmetricSorter}
diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js
index 9098942c..54bbb429 100644
--- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js
+++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js
@@ -1,23 +1,26 @@
import Options from '../../Options';
-const BootstrapDialog = new Class({
- Implements: Options,
+import $ from '@libraries/jquery-2.1.0';
- options: {
- cancelButton: false,
- closeButton: false,
- acceptButton: true,
- removeButton: false,
- errorMessage: false,
- onEventData: {},
- },
-
- initialize(title, options) {
+class BootstrapDialog extends Options {
+
+ constructor(title, options) {
+ super();
+ this.options = {
+ cancelButton: false,
+ closeButton: false,
+ acceptButton: true,
+ removeButton: false,
+ errorMessage: false,
+ onEventData: {},
+ };
+
this.setOptions(options);
this.options.onEventData.dialog = this;
this._native = $('').append('');
const content = $('');
const header = this._buildHeader(title);
+
if (header) {
content.append(header);
}
@@ -37,7 +40,7 @@ const BootstrapDialog = new Class({
$(this).remove();
});
this._native.on('shown.bs.modal', this.onDialogShown);
- },
+ }
_buildFooter() {
let footer = null;
@@ -58,7 +61,7 @@ const BootstrapDialog = new Class({
footer.append(``);
}
return footer;
- },
+ }
_buildHeader(title) {
let header = null;
@@ -74,42 +77,42 @@ const BootstrapDialog = new Class({
header.append(`${title}
`);
}
return header;
- },
+ }
onAcceptClick(event) {
throw 'Unsupported operation';
- },
+ }
- onDialogShown() {},
+ onDialogShown() {}
onRemoveClick(event) {
throw 'Unsupported operation';
- },
+ }
show() {
this._native.modal();
- },
+ }
setContent(content) {
const modalBody = this._native.find('.modal-body');
modalBody.append(content);
- },
+ }
css(options) {
this._native.find('.modal-dialog').css(options);
- },
+ }
close() {
this._native.modal('hide');
- },
+ }
alertError(message) {
this._native.find('.alert-danger').text(message);
this._native.find('.alert-danger').show();
- },
+ }
cleanError() {
this._native.find('.alert-danger').hide();
- },
-});
+ }
+}
export default BootstrapDialog;
diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js
similarity index 87%
rename from packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js
rename to packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js
index 2f92cf29..bfd9d2a6 100644
--- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js
+++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js
@@ -1,11 +1,8 @@
import BootstrapDialog from './BootstrapDialog';
-BootstrapDialog.Request = new Class({
-
- Extends: BootstrapDialog,
-
- initialize(url, title, options) {
- this.parent(title, options);
+class BootstrapDialogRequest extends BootstrapDialog {
+ constructor(url, title, options) {
+ super(title, options);
this.requestOptions = {};
this.requestOptions.cache = false;
const me = this;
@@ -39,12 +36,13 @@ BootstrapDialog.Request = new Class({
});
me.show();
});
- },
+ }
onDialogShown() {
if (typeof (onDialogShown) === 'function') {
onDialogShown();
}
- },
+ }
+}
-});
+export default BootstrapDialogRequest;
diff --git a/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js b/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js
index db6fe335..c35f1bff 100644
--- a/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js
+++ b/packages/mindplot/src/components/persistence/Beta2PelaMigrator.js
@@ -18,15 +18,15 @@
import ModelCodeName from './ModelCodeName';
import XMLSerializer_Pela from './XMLSerializer_Pela';
-const Beta2PelaMigrator = new Class({
- initialize(betaSerializer) {
+class Beta2PelaMigrator {
+ constructor(betaSerializer) {
this._betaSerializer = betaSerializer;
this._pelaSerializer = new XMLSerializer_Pela();
- },
+ }
toXML(mindmap) {
return this._pelaSerializer.toXML(mindmap);
- },
+ }
loadFromDom(dom, mapId) {
$assert($defined(mapId), 'mapId can not be null');
@@ -41,7 +41,7 @@ const Beta2PelaMigrator = new Class({
});
return mindmap;
- },
+ }
_fixPosition(parentModel) {
const parentPos = parentModel.getPosition();
@@ -53,7 +53,7 @@ const Beta2PelaMigrator = new Class({
}
me._fixPosition(child);
});
- },
-});
+ }
+}
export default Beta2PelaMigrator;
diff --git a/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js b/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js
index 0240c7f1..8d8afe8b 100644
--- a/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js
+++ b/packages/mindplot/src/components/persistence/Pela2TangoMigrator.js
@@ -18,15 +18,15 @@
import XMLSerializer_Tango from './XMLSerializer_Tango';
import ModelCodeName from './ModelCodeName';
-const Pela2TangoMigrator = new Class({
- initialize(pelaSerializer) {
+class Pela2TangoMigrator {
+ constructor(pelaSerializer) {
this._pelaSerializer = pelaSerializer;
this._tangoSerializer = new XMLSerializer_Tango();
- },
+ }
toXML(mindmap) {
return this._tangoSerializer.toXML(mindmap);
- },
+ }
loadFromDom(dom, mapId) {
$assert($defined(mapId), 'mapId can not be null');
@@ -35,7 +35,7 @@ const Pela2TangoMigrator = new Class({
this._fixOrder(mindmap);
this._fixPosition(mindmap);
return mindmap;
- },
+ }
_fixOrder(mindmap) {
// First level node policies has been changed.
@@ -62,7 +62,7 @@ const Pela2TangoMigrator = new Class({
for (i = 0; i < leftNodes.length; i++) {
leftNodes[i].setOrder(i * 2 + 1);
}
- },
+ }
_fixPosition(mindmap) {
// Position was not required in previous versions. Try to synthesize one .
@@ -73,7 +73,7 @@ const Pela2TangoMigrator = new Class({
const position = child.getPosition();
this._fixNodePosition(child, position);
}
- },
+ }
_fixNodePosition(node, parentPosition) {
// Position was not required in previous versions. Try to synthesize one .
let position = node.getPosition();
@@ -86,7 +86,7 @@ const Pela2TangoMigrator = new Class({
const child = children[i];
this._fixNodePosition(child, position);
}
- },
-});
+ }
+}
export default Pela2TangoMigrator;
diff --git a/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js b/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js
index a4cf467e..9cb27293 100644
--- a/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js
+++ b/packages/mindplot/src/components/persistence/XMLSerializer_Beta.js
@@ -20,7 +20,7 @@ import Mindmap from '../model/Mindmap';
import INodeModel from '../model/INodeModel';
import TopicFeature from '../TopicFeature';
-const XMLSerializer_Beta = new Class({
+class XMLSerializer_Beta {
toXML(mindmap) {
$assert(mindmap, 'Can not save a null mindmap');
@@ -43,7 +43,7 @@ const XMLSerializer_Beta = new Class({
}
return document;
- },
+ }
_topicToXML(document, topic) {
const parentTopic = document.createElement('topic');
@@ -55,7 +55,7 @@ const XMLSerializer_Beta = new Class({
const parent = topic.getParent();
if (parent == null || parent.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
const pos = topic.getPosition();
- parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
+ parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
} else {
const order = topic.getOrder();
parentTopic.setAttribute('order', order);
@@ -147,25 +147,25 @@ const XMLSerializer_Beta = new Class({
}
return parentTopic;
- },
+ }
_iconToXML(document, icon) {
const iconDom = document.createElement('icon');
iconDom.setAttribute('id', icon.getIconType());
return iconDom;
- },
+ }
_linkToXML(document, link) {
const linkDom = document.createElement('link');
linkDom.setAttribute('url', link.getUrl());
return linkDom;
- },
+ }
_noteToXML(document, note) {
const noteDom = document.createElement('note');
noteDom.setAttribute('text', note.getText());
return noteDom;
- },
+ }
loadFromDom(dom, mapId) {
$assert(dom, 'Dom can not be null');
@@ -181,8 +181,8 @@ const XMLSerializer_Beta = new Class({
// Is a wisemap?.
$assert(
documentElement.tagName === XMLSerializer_Beta.MAP_ROOT_NODE,
- `This seem not to be a map document. Root Tag: '${documentElement.tagName},',HTML:${dom.innerHTML
- },XML:${innerXML(dom)}`,
+ `This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML
+ }XML:${innerXML(dom)}`,
);
// Start the loading process ...
@@ -200,7 +200,7 @@ const XMLSerializer_Beta = new Class({
}
mindmap.setId(mapId);
return mindmap;
- },
+ }
_deserializeNode(domElem, mindmap) {
const type = domElem.getAttribute('central') != null
@@ -299,23 +299,23 @@ const XMLSerializer_Beta = new Class({
}
return topic;
- },
+ }
_deserializeIcon(domElem) {
let icon = domElem.getAttribute('id');
icon = icon.replace('images/', 'icons/legacy/');
return TopicFeature.createModel(TopicFeature.Icon.id, { id: icon });
- },
+ }
_deserializeLink(domElem) {
return TopicFeature.createModel(TopicFeature.Link.id, { url: domElem.getAttribute('url') });
- },
+ }
_deserializeNote(domElem) {
const text = domElem.getAttribute('text');
return TopicFeature.createModel(TopicFeature.Note.id, { text: text == null ? ' ' : text });
- },
-});
+ }
+}
XMLSerializer_Beta.MAP_ROOT_NODE = 'map';
diff --git a/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js b/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js
index aa3fd177..1b115467 100644
--- a/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js
+++ b/packages/mindplot/src/components/persistence/XMLSerializer_Pela.js
@@ -16,7 +16,7 @@
* limitations under the License.
*/
import { $assert, $defined, createDocument } from '@wisemapping/core-js';
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import Mindmap from '../model/Mindmap';
import INodeModel, { TopicShape } from '../model/INodeModel';
import TopicFeature from '../TopicFeature';
@@ -26,492 +26,485 @@ import ConnectionLine from '../ConnectionLine';
* @class
*/
// eslint-disable-next-line camelcase
-const XMLSerializer_Pela = new Class(
- /** @lends XMLSerializer_Pela */ {
- /**
- * @param mindmap
- * @throws will throw an error if mindmap is null or undefined
- * @return the created XML document (using the cross-browser implementation in core)
- */
- toXML(mindmap) {
- $assert(mindmap, 'Can not save a null mindmap');
+class XMLSerializer_Pela {
+ toXML(mindmap) {
+ $assert(mindmap, 'Can not save a null mindmap');
- const document = createDocument();
+ const document = createDocument();
- // Store map attributes ...
- const mapElem = document.createElement('map');
- const name = mindmap.getId();
- if ($defined(name)) {
- mapElem.setAttribute('name', this.rmXmlInv(name));
+ // Store map attributes ...
+ const mapElem = document.createElement('map');
+ const name = mindmap.getId();
+ if ($defined(name)) {
+ mapElem.setAttribute('name', this.rmXmlInv(name));
+ }
+ const version = mindmap.getVersion();
+ if ($defined(version)) {
+ mapElem.setAttribute('version', version);
+ }
+
+ document.appendChild(mapElem);
+
+ // Create branches ...
+ const topics = mindmap.getBranches();
+ for (let i = 0; i < topics.length; i++) {
+ const topic = topics[i];
+ const topicDom = this._topicToXML(document, topic);
+ mapElem.appendChild(topicDom);
+ }
+
+ // Create Relationships
+ const relationships = mindmap.getRelationships();
+ if (relationships.length > 0) {
+ for (let j = 0; j < relationships.length; j++) {
+ const relationship = relationships[j];
+ if (
+ mindmap.findNodeById(relationship.getFromNode()) !== null
+ && mindmap.findNodeById(relationship.getToNode()) !== null
+ ) {
+ // Isolated relationships are not persisted ....
+ const relationDom = this._relationshipToXML(document, relationship);
+ mapElem.appendChild(relationDom);
+ }
}
- const version = mindmap.getVersion();
- if ($defined(version)) {
- mapElem.setAttribute('version', version);
+ }
+
+ return document;
+ }
+
+ _topicToXML(document, topic) {
+ const parentTopic = document.createElement('topic');
+
+ // Set topic attributes...
+ if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
+ parentTopic.setAttribute('central', 'true');
+ } else {
+ const pos = topic.getPosition();
+ parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
+
+ const order = topic.getOrder();
+ if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
+ }
+
+ const text = topic.getText();
+ if ($defined(text)) {
+ this._noteTextToXML(document, parentTopic, text);
+ }
+
+ const shape = topic.getShapeType();
+ if ($defined(shape)) {
+ parentTopic.setAttribute('shape', shape);
+
+ if (shape === TopicShape.IMAGE) {
+ parentTopic.setAttribute(
+ 'image',
+ `${topic.getImageSize().width}${topic.getImageSize().height
+ }:${topic.getImageUrl()}`,
+ );
}
+ }
- document.appendChild(mapElem);
+ if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) {
+ parentTopic.setAttribute('shrink', 'true');
+ }
- // Create branches ...
- const topics = mindmap.getBranches();
- for (let i = 0; i < topics.length; i++) {
- const topic = topics[i];
- const topicDom = this._topicToXML(document, topic);
- mapElem.appendChild(topicDom);
+ // Font properties ...
+ const id = topic.getId();
+ parentTopic.setAttribute('id', id);
+
+ let font = '';
+
+ const fontFamily = topic.getFontFamily();
+ font += `${fontFamily || ''};`;
+
+ const fontSize = topic.getFontSize();
+ font += `${fontSize || ''};`;
+
+ const fontColor = topic.getFontColor();
+ font += `${fontColor || ''};`;
+
+ const fontWeight = topic.getFontWeight();
+ font += `${fontWeight || ''};`;
+
+ const fontStyle = topic.getFontStyle();
+ font += `${fontStyle || ''};`;
+
+ if (
+ $defined(fontFamily)
+ || $defined(fontSize)
+ || $defined(fontColor)
+ || $defined(fontWeight)
+ || $defined(fontStyle)
+ ) {
+ parentTopic.setAttribute('fontStyle', font);
+ }
+
+ const bgColor = topic.getBackgroundColor();
+ if ($defined(bgColor)) {
+ parentTopic.setAttribute('bgColor', bgColor);
+ }
+
+ const brColor = topic.getBorderColor();
+ if ($defined(brColor)) {
+ parentTopic.setAttribute('brColor', brColor);
+ }
+
+ const metadata = topic.getMetadata();
+ if ($defined(metadata)) {
+ parentTopic.setAttribute('metadata', metadata);
+ }
+
+ // Serialize features ...
+ const features = topic.getFeatures();
+ for (let i = 0; i < features.length; i++) {
+ const feature = features[i];
+
+ const featureType = feature.getType();
+ const featureDom = document.createElement(featureType);
+ const attributes = feature.getAttributes();
+
+ for (const key in attributes) {
+ const value = attributes[key];
+ if (key === 'text') {
+ const cdata = document.createCDATASection(this.rmXmlInv(value));
+ featureDom.appendChild(cdata);
+ } else {
+ featureDom.setAttribute(key, this.rmXmlInv(value));
+ }
}
+ parentTopic.appendChild(featureDom);
+ }
- // Create Relationships
- const relationships = mindmap.getRelationships();
- if (relationships.length > 0) {
- for (let j = 0; j < relationships.length; j++) {
- const relationship = relationships[j];
- if (
- mindmap.findNodeById(relationship.getFromNode()) !== null
- && mindmap.findNodeById(relationship.getToNode()) !== null
- ) {
- // Isolated relationships are not persisted ....
- const relationDom = this._relationshipToXML(document, relationship);
- mapElem.appendChild(relationDom);
+ // CHILDREN TOPICS
+ const childTopics = topic.getChildren();
+ for (let j = 0; j < childTopics.length; j++) {
+ const childTopic = childTopics[j];
+ const childDom = this._topicToXML(document, childTopic);
+ parentTopic.appendChild(childDom);
+ }
+ return parentTopic;
+ }
+
+ _noteTextToXML(document, elem, text) {
+ if (text.indexOf('\n') === -1) {
+ elem.setAttribute('text', this.rmXmlInv(text));
+ } else {
+ const textDom = document.createElement('text');
+ const cdata = document.createCDATASection(this.rmXmlInv(text));
+ textDom.appendChild(cdata);
+ elem.appendChild(textDom);
+ }
+ }
+
+ _relationshipToXML(document, relationship) {
+ const result = document.createElement('relationship');
+ result.setAttribute('srcTopicId', relationship.getFromNode());
+ result.setAttribute('destTopicId', relationship.getToNode());
+
+ const lineType = relationship.getLineType();
+ result.setAttribute('lineType', lineType);
+ 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)}`,
+ );
+ }
+ if ($defined(relationship.getDestCtrlPoint())) {
+ const destPoint = relationship.getDestCtrlPoint();
+ result.setAttribute(
+ 'destCtrlPoint',
+ `${Math.round(destPoint.x)}${Math.round(destPoint.y)}`,
+ );
+ }
+ }
+ result.setAttribute('endArrow', relationship.getEndArrow());
+ result.setAttribute('startArrow', relationship.getStartArrow());
+ return result;
+ }
+
+ /**
+ * @param dom
+ * @param mapId
+ * @throws will throw an error if dom is null or undefined
+ * @throws will throw an error if mapId is null or undefined
+ * @throws will throw an error if the document element is not consistent with a wisemap's root
+ * element
+ */
+ loadFromDom(dom, mapId) {
+ $assert(dom, 'dom can not be null');
+ $assert(mapId, 'mapId can not be null');
+
+ const rootElem = dom.documentElement;
+
+ // Is a wisemap?.
+ $assert(
+ rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE,
+ 'This seem not to be a map document.',
+ );
+
+ this._idsMap = {};
+ // Start the loading process ...
+ const version = rootElem.getAttribute('version');
+
+ const mindmap = new Mindmap(mapId, version);
+ const children = rootElem.childNodes;
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i];
+ if (child.nodeType === 1) {
+ switch (child.tagName) {
+ case 'topic': {
+ const topic = this._deserializeNode(child, mindmap);
+ mindmap.addBranch(topic);
+ break;
}
- }
- }
-
- return document;
- },
-
- _topicToXML(document, topic) {
- const parentTopic = document.createElement('topic');
-
- // Set topic attributes...
- if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
- parentTopic.setAttribute('central', 'true');
- } else {
- const pos = topic.getPosition();
- parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
-
- const order = topic.getOrder();
- if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
- }
-
- const text = topic.getText();
- if ($defined(text)) {
- this._noteTextToXML(document, parentTopic, text);
- }
-
- const shape = topic.getShapeType();
- if ($defined(shape)) {
- parentTopic.setAttribute('shape', shape);
-
- if (shape === TopicShape.IMAGE) {
- parentTopic.setAttribute(
- 'image',
- `${topic.getImageSize().width},${topic.getImageSize().height
- }:${topic.getImageUrl()}`,
- );
- }
- }
-
- if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) {
- parentTopic.setAttribute('shrink', 'true');
- }
-
- // Font properties ...
- const id = topic.getId();
- parentTopic.setAttribute('id', id);
-
- let font = '';
-
- const fontFamily = topic.getFontFamily();
- font += `${fontFamily || ''};`;
-
- const fontSize = topic.getFontSize();
- font += `${fontSize || ''};`;
-
- const fontColor = topic.getFontColor();
- font += `${fontColor || ''};`;
-
- const fontWeight = topic.getFontWeight();
- font += `${fontWeight || ''};`;
-
- const fontStyle = topic.getFontStyle();
- font += `${fontStyle || ''};`;
-
- if (
- $defined(fontFamily)
- || $defined(fontSize)
- || $defined(fontColor)
- || $defined(fontWeight)
- || $defined(fontStyle)
- ) {
- parentTopic.setAttribute('fontStyle', font);
- }
-
- const bgColor = topic.getBackgroundColor();
- if ($defined(bgColor)) {
- parentTopic.setAttribute('bgColor', bgColor);
- }
-
- const brColor = topic.getBorderColor();
- if ($defined(brColor)) {
- parentTopic.setAttribute('brColor', brColor);
- }
-
- const metadata = topic.getMetadata();
- if ($defined(metadata)) {
- parentTopic.setAttribute('metadata', metadata);
- }
-
- // Serialize features ...
- const features = topic.getFeatures();
- for (let i = 0; i < features.length; i++) {
- const feature = features[i];
-
- const featureType = feature.getType();
- const featureDom = document.createElement(featureType);
- const attributes = feature.getAttributes();
-
- for (const key in attributes) {
- const value = attributes[key];
- if (key === 'text') {
- const cdata = document.createCDATASection(this.rmXmlInv(value));
- featureDom.appendChild(cdata);
- } else {
- featureDom.setAttribute(key, this.rmXmlInv(value));
- }
- }
- parentTopic.appendChild(featureDom);
- }
-
- // CHILDREN TOPICS
- const childTopics = topic.getChildren();
- for (let j = 0; j < childTopics.length; j++) {
- const childTopic = childTopics[j];
- const childDom = this._topicToXML(document, childTopic);
- parentTopic.appendChild(childDom);
- }
- return parentTopic;
- },
-
- _noteTextToXML(document, elem, text) {
- if (text.indexOf('\n') === -1) {
- elem.setAttribute('text', this.rmXmlInv(text));
- } else {
- const textDom = document.createElement('text');
- const cdata = document.createCDATASection(this.rmXmlInv(text));
- textDom.appendChild(cdata);
- elem.appendChild(textDom);
- }
- },
-
- _relationshipToXML(document, relationship) {
- const result = document.createElement('relationship');
- result.setAttribute('srcTopicId', relationship.getFromNode());
- result.setAttribute('destTopicId', relationship.getToNode());
-
- const lineType = relationship.getLineType();
- result.setAttribute('lineType', lineType);
- 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)}`,
- );
- }
- if ($defined(relationship.getDestCtrlPoint())) {
- const destPoint = relationship.getDestCtrlPoint();
- result.setAttribute(
- 'destCtrlPoint',
- `${Math.round(destPoint.x)},${Math.round(destPoint.y)}`,
- );
- }
- }
- result.setAttribute('endArrow', relationship.getEndArrow());
- result.setAttribute('startArrow', relationship.getStartArrow());
- return result;
- },
-
- /**
- * @param dom
- * @param mapId
- * @throws will throw an error if dom is null or undefined
- * @throws will throw an error if mapId is null or undefined
- * @throws will throw an error if the document element is not consistent with a wisemap's root
- * element
- */
- loadFromDom(dom, mapId) {
- $assert(dom, 'dom can not be null');
- $assert(mapId, 'mapId can not be null');
-
- const rootElem = dom.documentElement;
-
- // Is a wisemap?.
- $assert(
- rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE,
- 'This seem not to be a map document.',
- );
-
- this._idsMap = {};
- // Start the loading process ...
- const version = rootElem.getAttribute('version');
-
- const mindmap = new Mindmap(mapId, version);
- const children = rootElem.childNodes;
- for (let i = 0; i < children.length; i++) {
- const child = children[i];
- if (child.nodeType === 1) {
- switch (child.tagName) {
- case 'topic': {
- const topic = this._deserializeNode(child, mindmap);
- mindmap.addBranch(topic);
- break;
+ case 'relationship': {
+ const relationship = this._deserializeRelationship(child, mindmap);
+ if (relationship != null) {
+ mindmap.addRelationship(relationship);
}
- case 'relationship': {
- const relationship = this._deserializeRelationship(child, mindmap);
- if (relationship != null) {
- mindmap.addRelationship(relationship);
- }
- break;
- }
- default:
- break;
+ break;
}
+ default:
+ break;
}
}
- this._idsMap = null;
- mindmap.setId(mapId);
- return mindmap;
- },
+ }
+ this._idsMap = null;
+ mindmap.setId(mapId);
+ return mindmap;
+ }
- _deserializeNode(domElem, mindmap) {
- const type = domElem.getAttribute('central') != null
- ? INodeModel.CENTRAL_TOPIC_TYPE
- : INodeModel.MAIN_TOPIC_TYPE;
+ _deserializeNode(domElem, mindmap) {
+ const type = domElem.getAttribute('central') != null
+ ? INodeModel.CENTRAL_TOPIC_TYPE
+ : INodeModel.MAIN_TOPIC_TYPE;
- // Load attributes...
- let id = domElem.getAttribute('id');
- if ($defined(id)) {
- id = parseInt(id, 10);
+ // Load attributes...
+ let id = domElem.getAttribute('id');
+ if ($defined(id)) {
+ id = parseInt(id, 10);
+ }
+
+ if (this._idsMap[id]) {
+ id = null;
+ } else {
+ this._idsMap[id] = domElem;
+ }
+
+ const topic = mindmap.createNode(type, id);
+
+ // Set text property is it;s defined...
+ const text = domElem.getAttribute('text');
+ if ($defined(text) && text) {
+ topic.setText(text);
+ }
+
+ const fontStyle = domElem.getAttribute('fontStyle');
+ if ($defined(fontStyle) && fontStyle) {
+ const font = fontStyle.split(';');
+
+ if (font[0]) {
+ topic.setFontFamily(font[0]);
}
- if (this._idsMap[id]) {
- id = null;
- } else {
- this._idsMap[id] = domElem;
+ if (font[1]) {
+ topic.setFontSize(font[1]);
}
- const topic = mindmap.createNode(type, id);
-
- // Set text property is it;s defined...
- const text = domElem.getAttribute('text');
- if ($defined(text) && text) {
- topic.setText(text);
+ if (font[2]) {
+ topic.setFontColor(font[2]);
}
- const fontStyle = domElem.getAttribute('fontStyle');
- if ($defined(fontStyle) && fontStyle) {
- const font = fontStyle.split(';');
+ if (font[3]) {
+ topic.setFontWeight(font[3]);
+ }
- if (font[0]) {
- topic.setFontFamily(font[0]);
- }
+ if (font[4]) {
+ topic.setFontStyle(font[4]);
+ }
+ }
- if (font[1]) {
- topic.setFontSize(font[1]);
- }
+ const shape = domElem.getAttribute('shape');
+ if ($defined(shape)) {
+ topic.setShapeType(shape);
- if (font[2]) {
- topic.setFontColor(font[2]);
- }
+ if (shape === TopicShape.IMAGE) {
+ const image = domElem.getAttribute('image');
+ const size = image.substring(0, image.indexOf(':'));
+ const url = image.substring(image.indexOf(':') + 1, image.length);
+ topic.setImageUrl(url);
- if (font[3]) {
- topic.setFontWeight(font[3]);
- }
+ const split = size.split(',');
+ topic.setImageSize(split[0], split[1]);
+ }
+ }
- if (font[4]) {
- topic.setFontStyle(font[4]);
+ const bgColor = domElem.getAttribute('bgColor');
+ if ($defined(bgColor)) {
+ topic.setBackgroundColor(bgColor);
+ }
+
+ const borderColor = domElem.getAttribute('brColor');
+ if ($defined(borderColor)) {
+ topic.setBorderColor(borderColor);
+ }
+
+ const order = domElem.getAttribute('order');
+ if ($defined(order) && order !== 'NaN') {
+ // Hack for broken maps ...
+ topic.setOrder(parseInt(order, 10));
+ }
+
+ const isShrink = domElem.getAttribute('shrink');
+ // Hack: Some production maps has been stored with the central topic collapsed. This is a bug.
+ if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) {
+ topic.setChildrenShrunken(isShrink);
+ }
+
+ const position = domElem.getAttribute('position');
+ if ($defined(position)) {
+ const pos = position.split(',');
+ topic.setPosition(pos[0], pos[1]);
+ }
+
+ const metadata = domElem.getAttribute('metadata');
+ if ($defined(metadata)) {
+ topic.setMetadata(metadata);
+ }
+
+ // Creating icons and children nodes
+ const children = domElem.childNodes;
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i];
+ if (child.nodeType === Node.ELEMENT_NODE) {
+ if (child.tagName === 'topic') {
+ const childTopic = this._deserializeNode(child, mindmap);
+ childTopic.connectTo(topic);
+ } else if (TopicFeature.isSupported(child.tagName)) {
+ // Load attributes ...
+ const namedNodeMap = child.attributes;
+ const attributes = {};
+ for (let j = 0; j < namedNodeMap.length; j++) {
+ const attribute = namedNodeMap.item(j);
+ attributes[attribute.name] = attribute.value;
+ }
+
+ // Has text node ?.
+ const textAttr = this._deserializeTextAttr(child);
+ if (textAttr) {
+ attributes.text = textAttr;
+ }
+
+ // Create a new element ....
+ const featureType = child.tagName;
+ const feature = TopicFeature.createModel(featureType, attributes);
+ topic.addFeature(feature);
+ } else if (child.tagName === 'text') {
+ const nodeText = this._deserializeNodeText(child);
+ topic.setText(nodeText);
}
}
+ }
+ return topic;
+ }
- const shape = domElem.getAttribute('shape');
- if ($defined(shape)) {
- topic.setShapeType(shape);
-
- if (shape === TopicShape.IMAGE) {
- const image = domElem.getAttribute('image');
- const size = image.substring(0, image.indexOf(':'));
- const url = image.substring(image.indexOf(':') + 1, image.length);
- topic.setImageUrl(url);
-
- const split = size.split(',');
- topic.setImageSize(split[0], split[1]);
- }
- }
-
- const bgColor = domElem.getAttribute('bgColor');
- if ($defined(bgColor)) {
- topic.setBackgroundColor(bgColor);
- }
-
- const borderColor = domElem.getAttribute('brColor');
- if ($defined(borderColor)) {
- topic.setBorderColor(borderColor);
- }
-
- const order = domElem.getAttribute('order');
- if ($defined(order) && order !== 'NaN') {
- // Hack for broken maps ...
- topic.setOrder(parseInt(order, 10));
- }
-
- const isShrink = domElem.getAttribute('shrink');
- // Hack: Some production maps has been stored with the central topic collapsed. This is a bug.
- if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) {
- topic.setChildrenShrunken(isShrink);
- }
-
- const position = domElem.getAttribute('position');
- if ($defined(position)) {
- const pos = position.split(',');
- topic.setPosition(pos[0], pos[1]);
- }
-
- const metadata = domElem.getAttribute('metadata');
- if ($defined(metadata)) {
- topic.setMetadata(metadata);
- }
-
- // Creating icons and children nodes
+ _deserializeTextAttr(domElem) {
+ let value = domElem.getAttribute('text');
+ if (!$defined(value)) {
const children = domElem.childNodes;
- for (let i = 0; i < children.length; i++) {
- const child = children[i];
- if (child.nodeType === Node.ELEMENT_NODE) {
- if (child.tagName === 'topic') {
- const childTopic = this._deserializeNode(child, mindmap);
- childTopic.connectTo(topic);
- } else if (TopicFeature.isSupported(child.tagName)) {
- // Load attributes ...
- const namedNodeMap = child.attributes;
- const attributes = {};
- for (let j = 0; j < namedNodeMap.length; j++) {
- const attribute = namedNodeMap.item(j);
- attributes[attribute.name] = attribute.value;
- }
-
- // Has text node ?.
- const textAttr = this._deserializeTextAttr(child);
- if (textAttr) {
- attributes.text = textAttr;
- }
-
- // Create a new element ....
- const featureType = child.tagName;
- const feature = TopicFeature.createModel(featureType, attributes);
- topic.addFeature(feature);
- } else if (child.tagName === 'text') {
- const nodeText = this._deserializeNodeText(child);
- topic.setText(nodeText);
- }
- }
- }
- return topic;
- },
-
- _deserializeTextAttr(domElem) {
- let value = domElem.getAttribute('text');
- if (!$defined(value)) {
- const children = domElem.childNodes;
- for (let i = 0; i < children.length; i++) {
- const child = children[i];
- if (child.nodeType === Node.CDATA_SECTION_NODE) {
- value = child.nodeValue;
- }
- }
- } else {
- // Notes must be decoded ...
- value = unescape(value);
-
- // Hack for empty nodes ...
- if (value === '') {
- value = ' ';
- }
- }
-
- return value;
- },
-
- _deserializeNodeText(domElem) {
- const children = domElem.childNodes;
- let value = null;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === Node.CDATA_SECTION_NODE) {
value = child.nodeValue;
}
}
- return value;
- },
+ } else {
+ // Notes must be decoded ...
+ value = unescape(value);
- _deserializeRelationship(domElement, mindmap) {
- const srcId = domElement.getAttribute('srcTopicId');
- const destId = domElement.getAttribute('destTopicId');
- const lineType = domElement.getAttribute('lineType');
- const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint');
- const destCtrlPoint = domElement.getAttribute('destCtrlPoint');
+ // Hack for empty nodes ...
+ if (value === '') {
+ value = ' ';
+ }
+ }
- // If for some reason a relationship lines has source and dest nodes the same, don't import it.
- if (srcId === destId) {
- return null;
- }
- // Is the connections points valid ?. If it's not, do not load the relationship ...
- if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) {
- return null;
- }
+ return value;
+ }
- const model = mindmap.createRelationship(srcId, destId);
- model.setLineType(lineType);
- if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') {
- model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint));
+ _deserializeNodeText(domElem) {
+ const children = domElem.childNodes;
+ let value = null;
+ for (let i = 0; i < children.length; i++) {
+ const child = children[i];
+ if (child.nodeType === Node.CDATA_SECTION_NODE) {
+ value = child.nodeValue;
}
- if ($defined(destCtrlPoint) && destCtrlPoint !== '') {
- model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint));
- }
- model.setEndArrow('false');
- model.setStartArrow('true');
- return model;
- },
+ }
+ return value;
+ }
- /**
- * 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
- * the
- * standard. 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.
- */
- rmXmlInv(str) {
- if (str == null || str === undefined) return null;
+ _deserializeRelationship(domElement, mindmap) {
+ const srcId = domElement.getAttribute('srcTopicId');
+ const destId = domElement.getAttribute('destTopicId');
+ const lineType = domElement.getAttribute('lineType');
+ const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint');
+ const destCtrlPoint = domElement.getAttribute('destCtrlPoint');
- let result = '';
- 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)
- ) {
- result += str.charAt(i);
- }
+ // If for some reason a relationship lines has source and dest nodes the same, don't import it.
+ if (srcId === destId) {
+ return null;
+ }
+ // Is the connections points valid ?. If it's not, do not load the relationship ...
+ if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) {
+ return null;
+ }
+
+ const model = mindmap.createRelationship(srcId, destId);
+ model.setLineType(lineType);
+ if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') {
+ model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint));
+ }
+ if ($defined(destCtrlPoint) && destCtrlPoint !== '') {
+ model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint));
+ }
+ model.setEndArrow('false');
+ model.setStartArrow('true');
+ return model;
+ }
+
+ /**
+ * 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
+ * the
+ * standard. 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.
+ */
+ rmXmlInv(str) {
+ if (str == null || str === undefined) return null;
+
+ let result = '';
+ 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)
+ ) {
+ result += str.charAt(i);
}
- return result;
- },
- },
-);
+ }
+ return result;
+ }
+}
/**
* a wisemap's root element tag name
diff --git a/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js b/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js
index 543b9cf6..957f3744 100644
--- a/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js
+++ b/packages/mindplot/src/components/persistence/XMLSerializer_Tango.js
@@ -23,8 +23,7 @@ import XMLSerializer_Pela from './XMLSerializer_Pela';
* @class
* @extends mindplot.persistence.XMLSerializer_Pela
*/
-const XMLSerializer_Tango = new Class({
- Extends: XMLSerializer_Pela,
-});
+class XMLSerializer_Tango extends XMLSerializer_Pela{
+};
export default XMLSerializer_Tango;
diff --git a/packages/mindplot/src/components/util/Shape.js b/packages/mindplot/src/components/util/Shape.js
index 1949d5ce..2eb15a23 100644
--- a/packages/mindplot/src/components/util/Shape.js
+++ b/packages/mindplot/src/components/util/Shape.js
@@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import web2d from '@wisemapping/web2d';
+import * as web2d from '@wisemapping/web2d';
import { $assert, $defined } from '@wisemapping/core-js';
import { TopicShape } from '../model/INodeModel';
import TopicConfig from '../TopicConfig';
diff --git a/packages/mindplot/src/components/widget/IMenu.js b/packages/mindplot/src/components/widget/IMenu.js
index 4d30d595..7a58db40 100644
--- a/packages/mindplot/src/components/widget/IMenu.js
+++ b/packages/mindplot/src/components/widget/IMenu.js
@@ -18,9 +18,9 @@
import { $assert } from "@wisemapping/core-js";
import PersistenceManager from '../PersistenceManager';
-const IMenu = new Class({
+class IMenu {
- initialize(designer, containerId, mapId) {
+ constructor(designer, containerId, mapId) {
$assert(designer, 'designer can not be null');
$assert(containerId, 'containerId can not be null');
@@ -34,13 +34,13 @@ const IMenu = new Class({
this._designer.addEvent('modelUpdate', () => {
me.setRequireChange(true);
});
- },
+ }
clear() {
_.each(this._toolbarElems, (item) => {
item.hide();
});
- },
+ }
discardChanges(designer) {
// Avoid autosave before leaving the page ....
@@ -56,13 +56,13 @@ const IMenu = new Class({
// Reload the page ...
window.location.reload();
- },
+ }
unlockMap(designer) {
const mindmap = designer.getMindmap();
const persistenceManager = PersistenceManager.getInstance();
persistenceManager.unlockMap(mindmap);
- },
+ }
save(saveElem, designer, saveHistory, sync) {
// Load map content ...
@@ -86,7 +86,6 @@ const IMenu = new Class({
}
menu.setRequireChange(false);
},
-
onError(error) {
if (saveHistory) {
saveElem.css('cursor', 'pointer');
@@ -97,17 +96,17 @@ const IMenu = new Class({
$notifyModal(error.message);
}
}
- },
+ }
}, sync);
- },
+ }
isSaveRequired() {
return this._mindmapUpdated;
- },
+ }
setRequireChange(value) {
this._mindmapUpdated = value;
- },
-});
+ }
+}
export default IMenu;
diff --git a/packages/mindplot/src/components/widget/IconPanel.js b/packages/mindplot/src/components/widget/IconPanel.js
index 6e72f5c0..3878644e 100644
--- a/packages/mindplot/src/components/widget/IconPanel.js
+++ b/packages/mindplot/src/components/widget/IconPanel.js
@@ -44,7 +44,7 @@ class IconPanel extends ToolbarPaneItem {
const iconId = familyIcons[j];
const img = $('')
.attr('id', iconId)
- .attr('src', ImageIcon.prototype._getImageUrl(iconId))
+ .attr('src', ImageIcon._getImageUrl(iconId))
.attr('class', 'panelIcon');
familyContent.append(img);
diff --git a/packages/mindplot/src/components/widget/Menu.js b/packages/mindplot/src/components/widget/Menu.js
index 587da226..c452b69f 100644
--- a/packages/mindplot/src/components/widget/Menu.js
+++ b/packages/mindplot/src/components/widget/Menu.js
@@ -19,7 +19,7 @@ import $ from '@libraries/jquery-2.1.0';
import _ from '@libraries/underscore-min';
import { $defined } from '@wisemapping/core-js';
-import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
+import BootstrapDialogRequest from "../libraries/bootstrap/BootstrapDialogRequest";
import IMenu from './IMenu';
import FontFamilyPanel from './FontFamilyPanel';
import FontSizePanel from './FontSizePanel';
@@ -215,7 +215,7 @@ class Menu extends IMenu {
}
this._addButton('export', false, false, () => {
- BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/exportf`, $msg('EXPORT'), {
+ BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/exportf`, $msg('EXPORT'), {
cancelButton: true,
closeButton: true,
});
@@ -347,7 +347,7 @@ class Menu extends IMenu {
const shareElem = $('#shareIt');
if (shareElem) {
this._addButton('shareIt', false, false, () => {
- BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), {
+ BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), {
closeButton: true,
cancelButton: true,
});
@@ -359,7 +359,7 @@ class Menu extends IMenu {
const publishElem = $('#publishIt');
if (publishElem) {
this._addButton('publishIt', false, false, () => {
- BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), {
+ BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), {
closeButton: true,
cancelButton: true,
});
@@ -371,7 +371,7 @@ class Menu extends IMenu {
const historyElem = $('#history');
if (historyElem) {
this._addButton('history', false, false, () => {
- BootstrapDialog.Request.active = new BootstrapDialog.Request(`c/maps/${mapId}/historyf`, $msg('HISTORY'), {
+ BootstrapDialogRequest.active = new BootstrapDialogRequest(`c/maps/${mapId}/historyf`, $msg('HISTORY'), {
closeButton: true,
cancelButton: true,
});
@@ -386,7 +386,7 @@ class Menu extends IMenu {
const keyboardShortcut = $('#keyboardShortcuts');
if (keyboardShortcut) {
keyboardShortcut.bind('click', (event) => {
- BootstrapDialog.Request.active = new BootstrapDialog.Request('c/keyboard', $msg('SHORTCUTS'), {
+ BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), {
closeButton: true,
cancelButton: true,
});
diff --git a/packages/mindplot/src/components/widget/ModalDialogNotifier.js b/packages/mindplot/src/components/widget/ModalDialogNotifier.js
index 1824411c..008ffddf 100644
--- a/packages/mindplot/src/components/widget/ModalDialogNotifier.js
+++ b/packages/mindplot/src/components/widget/ModalDialogNotifier.js
@@ -15,9 +15,7 @@
* limitations under the License.
*/
-const ModalDialogNotifier = new Class({
- initialize() {},
-
+class ModalDialogNotifier {
// FIXME: replace by alert()
show(message, title) {
$assert(message, 'message can not be null');
diff --git a/packages/mindplot/src/components/widget/NoteEditor.js b/packages/mindplot/src/components/widget/NoteEditor.js
index 3376ed52..daf8628a 100644
--- a/packages/mindplot/src/components/widget/NoteEditor.js
+++ b/packages/mindplot/src/components/widget/NoteEditor.js
@@ -18,23 +18,21 @@
import jQuery from '@libraries/jquery-2.1.0';
import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
-const NoteEditor = new Class({
- Extends: BootstrapDialog,
-
- initialize(model) {
+class NoteEditor extends BootstrapDialog{
+ constructor(model) {
$assert(model, 'model can not be null');
this._model = model;
- this.parent($msg('Note'), {
+ super($msg('Note'), {
cancelButton: true,
closeButton: true,
acceptButton: true,
removeButton: typeof model.getValue() !== 'undefined',
- onEventData: { model: this._model },
+ onEventData: { model: this._model }
});
this.css({ margin: '150px auto' });
const panel = this._buildPanel(model);
this.setContent(panel);
- },
+ }
_buildPanel(model) {
const result = $('').css('padding-top', '5px');
@@ -66,11 +64,11 @@ const NoteEditor = new Class({
result.append(form);
return result;
- },
+ }
onAcceptClick(event) {
event.data.dialog._submitForm(event.data.model);
- },
+ }
_submitForm(model) {
const textarea = this._native.find('textarea');
@@ -78,16 +76,16 @@ const NoteEditor = new Class({
model.setValue(textarea.val());
}
this.close();
- },
+ }
onDialogShown() {
$(this).find('textarea').focus();
- },
+ }
onRemoveClick(event) {
event.data.model.setValue(null);
event.data.dialog.close();
- },
-});
+ }
+}
export default NoteEditor;
diff --git a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js b/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js
deleted file mode 100644
index 2de28a17..00000000
--- a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js
+++ /dev/null
@@ -1,47 +0,0 @@
-BootstrapDialog.Request = new Class({
- Extends: BootstrapDialog,
- initialize: function (url, title, options) {
- this.parent(title, options);
- this.requestOptions = {};
- this.requestOptions.cache = false;
- var me = this;
- this.requestOptions.fail = function (xhr) {
- // Intercept form requests ...
- console.log("Failure:");
- console.log(xhr);
- };
-
- this.requestOptions.success = function () {
- // Intercept form requests ...
- var forms = me._native.find('form');
- _.each(forms, function (form) {
- $(form).on('submit', function (event) {
- // Intercept form ...
- me.requestOptions.url = form.action;
- me.requestOptions.method = form.method ? form.method : 'post';
- $.ajax(me.requestOptions);
- event.stopPropagation();
- return false;
- });
- });
- };
-
- this._native.find('.modal-body').load(url, function () {
- me.acceptButton.unbind('click').click(function () {
- submitDialogForm();
- });
- me._native.on('hidden.bs.modal', function () {
- $(this).remove();
- });
- me.show();
- });
- },
-
- onDialogShown: function () {
- if (typeof (onDialogShown) == "function") {
- onDialogShown();
- }
- }
-
-
-});
diff --git a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js b/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js
deleted file mode 100644
index 83f37aef..00000000
--- a/packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js
+++ /dev/null
@@ -1,111 +0,0 @@
-var BootstrapDialog = new Class({
- Implements: Options,
-
- options: {
- cancelButton: false,
- closeButton: false,
- acceptButton: true,
- removeButton:false,
- errorMessage: false,
- onEventData:{}
- },
-
- initialize: function (title, options) {
- this.setOptions(options);
- this.options.onEventData.dialog = this;
- this._native = $('').append('');
- var content = $('');
- var header = this._buildHeader(title);
- if (header) {
- content.append(header);
- }
- var body = $('');
- if(this.options.errorMessage){
- var error = $('');
- error.hide();
- body.append(error);
- }
- content.append(body);
- var footer = this._buildFooter();
- if (footer) {
- content.append(footer);
- }
- this._native.find(".modal-dialog").append(content);
- this._native.on('hidden.bs.modal', function() {
- $(this).remove();
- });
- this._native.on('shown.bs.modal', this.onDialogShown);
- },
-
- _buildFooter: function() {
- var footer = null;
- if (this.options.acceptButton || this.options.removeButton || this.options.cancelButton) {
- footer = $('