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

Migration to EE6 of web2d and mindplot

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2021-12-04 15:39:20 -08:00
parent a8a843353b
commit 17b22ca211
113 changed files with 4509 additions and 4829 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/mindplot/src/components/ActionIcon.js
View File

@ -17,48 +17,49 @@
*/ */
import Icon from './Icon'; import Icon from './Icon';
const ActionIcon = new Class({ class ActionIcon extends Icon {
Extends: Icon,
initialize(topic, url) { constructor(topic, url) {
this.parent(url); super(url);
this._node = topic; this._node = topic;
}, }
getNode() { getNode() {
return this._node; return this._node;
}, }
setPosition(x, y) { setPosition(x, y) {
const size = this.getSize(); const size = this.getSize();
this.getImage().setPosition(x - size.width / 2, y - size.height / 2); this.getImage().setPosition(x - size.width / 2, y - size.height / 2);
}, }
addEvent(event, fn) { addEvent(event, fn) {
this.getImage().addEvent(event, fn); this.getImage().addEvent(event, fn);
}, }
addToGroup(group) { addToGroup(group) {
group.append(this.getImage()); group.append(this.getImage());
}, }
setVisibility(visible) { setVisibility(visible) {
this.getImage().setVisibility(visible); this.getImage().setVisibility(visible);
}, }
isVisible() { isVisible() {
return this.getImage().isVisible(); return this.getImage().isVisible();
}, }
setCursor(cursor) { setCursor(cursor) {
return this.getImage().setCursor(cursor); return this.getImage().setCursor(cursor);
}, }
moveToBack(cursor) { moveToBack(cursor) {
return this.getImage().moveToBack(cursor); return this.getImage().moveToBack(cursor);
}, }
moveToFront(cursor) { moveToFront(cursor) {
return this.getImage().moveToFront(cursor); return this.getImage().moveToFront(cursor);
}, }
}); }
export default ActionIcon; export default ActionIcon;

40
packages/mindplot/src/components/CentralTopic.js
View File

@ -15,57 +15,48 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import Topic from './Topic'; import Topic from './Topic';
import Shape from './util/Shape'; import Shape from './util/Shape';
const CentralTopic = new Class( class CentralTopic extends Topic {
/** @lends CentralTopic */ { constructor(model, options) {
Extends: Topic, super(model, options);
/** }
* @extends mindplot.Topic
* @constructs
* @param model
* @param options
*/
initialize(model, options) {
this.parent(model, options);
},
_registerEvents() { _registerEvents() {
this.parent(); super._registerEvents();
// This disable the drag of the central topic. // This disable the drag of the central topic.
// But solves the problem of deselecting the nodes when the screen is clicked. // But solves the problem of deselecting the nodes when the screen is clicked.
this.addEvent('mousedown', (event) => { this.addEvent('mousedown', (event) => {
event.stopPropagation(); event.stopPropagation();
}); });
}, }
/** */ /** */
workoutIncomingConnectionPoint() { workoutIncomingConnectionPoint() {
return this.getPosition(); return this.getPosition();
}, }
/** */ /** */
setCursor(type) { setCursor(type) {
type = type == 'move' ? 'default' : type; super.setCursor(type === 'move' ? 'default' : type);
this.parent(type); }
},
/** */ /** */
updateTopicShape() {}, updateTopicShape() {}
_updatePositionOnChangeSize() { _updatePositionOnChangeSize() {
// Center main topic ... // Center main topic ...
const zeroPoint = new web2d.Point(0, 0); const zeroPoint = new web2d.Point(0, 0);
this.setPosition(zeroPoint); this.setPosition(zeroPoint);
}, }
/** */ /** */
getShrinkConnector() { getShrinkConnector() {
return null; return null;
}, }
/** */ /** */
workoutOutgoingConnectionPoint(targetPosition) { workoutOutgoingConnectionPoint(targetPosition) {
@ -74,8 +65,7 @@ const CentralTopic = new Class(
const isAtRight = Shape.isAtRight(targetPosition, pos); const isAtRight = Shape.isAtRight(targetPosition, pos);
const size = this.getSize(); const size = this.getSize();
return Shape.calculateRectConnectionPoint(pos, size, !isAtRight); return Shape.calculateRectConnectionPoint(pos, size, !isAtRight);
}, }
}, }
);
export default CentralTopic; export default CentralTopic;

14
packages/mindplot/src/components/Command.js
View File

@ -17,21 +17,21 @@
*/ */
import { $defined } from '@wisemapping/core-js'; 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 * @classdesc The command base class for handling do/undo mindmap operations
* @constructs * @constructs
*/ */
initialize() { constructor() {
this._id = Command._nextUUID(); this._id = Command._nextUUID();
}, }
/** /**
* @abstract * @abstract
*/ */
execute(commandContext) { execute(commandContext) {
throw 'execute must be implemented.'; throw 'execute must be implemented.';
}, }
/** /**
* Triggered by the undo button - reverses the executed command * Triggered by the undo button - reverses the executed command
@ -39,7 +39,7 @@ const Command = new Class(/** @lends mindplot.Command */{
*/ */
undoExecute(commandContext) { undoExecute(commandContext) {
throw 'undo must be implemented.'; throw 'undo must be implemented.';
}, }
/** /**
* Returns the unique id of this command * Returns the unique id of this command
@ -47,8 +47,8 @@ const Command = new Class(/** @lends mindplot.Command */{
*/ */
getId() { getId() {
return this._id; return this._id;
}, }
}); }
Command._nextUUID = function () { Command._nextUUID = function () {
if (!$defined(Command._uuid)) { if (!$defined(Command._uuid)) {

50
packages/mindplot/src/components/ConnectionLine.js
View File

@ -16,13 +16,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; 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 INodeModel, { TopicShape } from './model/INodeModel';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
const ConnectionLine = new Class({ class ConnectionLine {
initialize(sourceNode, targetNode, lineType) { constructor(sourceNode, targetNode, lineType) {
$assert(targetNode, 'parentNode node can not be null'); $assert(targetNode, 'parentNode node can not be null');
$assert(sourceNode, 'childNode node can not be null'); $assert(sourceNode, 'childNode node can not be null');
$assert(sourceNode !== targetNode, 'Circular connection'); $assert(sourceNode !== targetNode, 'Circular connection');
@ -47,14 +47,14 @@ const ConnectionLine = new Class({
line.setFill(strokeColor, 1); line.setFill(strokeColor, 1);
this._line2d = line; this._line2d = line;
}, }
_getCtrlPoints(sourceNode, targetNode) { _getCtrlPoints(sourceNode, targetNode) {
const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition()); const srcPos = sourceNode.workoutOutgoingConnectionPoint(targetNode.getPosition());
const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition()); const destPos = targetNode.workoutIncomingConnectionPoint(sourceNode.getPosition());
const deltaX = (srcPos.x - destPos.x) / 3; const deltaX = (srcPos.x - destPos.x) / 3;
return [new web2d.Point(deltaX, 0), new web2d.Point(-deltaX, 0)]; return [new web2d.Point(deltaX, 0), new web2d.Point(-deltaX, 0)];
}, }
_createLine(lineType, defaultStyle) { _createLine(lineType, defaultStyle) {
if (!$defined(lineType)) { if (!$defined(lineType)) {
@ -79,19 +79,19 @@ const ConnectionLine = new Class({
break; break;
} }
return line; return line;
}, }
setVisibility(value) { setVisibility(value) {
this._line2d.setVisibility(value); this._line2d.setVisibility(value);
}, }
isVisible() { isVisible() {
return this._line2d.isVisible(); return this._line2d.isVisible();
}, }
setOpacity(opacity) { setOpacity(opacity) {
this._line2d.setOpacity(opacity); this._line2d.setOpacity(opacity);
}, }
redraw() { redraw() {
const line2d = this._line2d; const line2d = this._line2d;
@ -117,7 +117,7 @@ const ConnectionLine = new Class({
// Add connector ... // Add connector ...
this._positionateConnector(targetTopic); this._positionateConnector(targetTopic);
}, }
_positionateConnector(targetTopic) { _positionateConnector(targetTopic) {
const targetPosition = targetTopic.getPosition(); const targetPosition = targetTopic.getPosition();
@ -142,61 +142,61 @@ const ConnectionLine = new Class({
} }
connector.setPosition(x, y); connector.setPosition(x, y);
} }
}, }
setStroke(color, style, opacity) { setStroke(color, style, opacity) {
this._line2d.setStroke(null, null, color, opacity); this._line2d.setStroke(null, null, color, opacity);
}, }
addToWorkspace(workspace) { addToWorkspace(workspace) {
workspace.append(this._line2d); workspace.append(this._line2d);
this._line2d.moveToBack(); this._line2d.moveToBack();
}, }
removeFromWorkspace(workspace) { removeFromWorkspace(workspace) {
workspace.removeChild(this._line2d); workspace.removeChild(this._line2d);
}, }
getTargetTopic() { getTargetTopic() {
return this._targetTopic; return this._targetTopic;
}, }
getSourceTopic() { getSourceTopic() {
return this._sourceTopic; return this._sourceTopic;
}, }
getLineType() { getLineType() {
return this._lineType; return this._lineType;
}, }
getLine() { getLine() {
return this._line2d; return this._line2d;
}, }
getModel() { getModel() {
return this._model; return this._model;
}, }
setModel(model) { setModel(model) {
this._model = model; this._model = model;
}, }
getType() { getType() {
return 'ConnectionLine'; return 'ConnectionLine';
}, }
getId() { getId() {
return this._model.getId(); return this._model.getId();
}, }
moveToBack() { moveToBack() {
this._line2d.moveToBack(); this._line2d.moveToBack();
}, }
moveToFront() { moveToFront() {
this._line2d.moveToFront(); this._line2d.moveToFront();
}, }
}); }
ConnectionLine.getStrokeColor = () => '#495879'; ConnectionLine.getStrokeColor = () => '#495879';

38
packages/mindplot/src/components/ControlPoint.js
View File

@ -15,14 +15,14 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import Shape from './util/Shape'; import Shape from './util/Shape';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
const ControlPoint = new Class({ class ControlPoint {
initialize() { constructor() {
const control1 = new web2d.Elipse({ const control1 = new web2d.Elipse({
width: 6, width: 6,
height: 6, height: 6,
@ -68,7 +68,7 @@ const ControlPoint = new Class({
this._controlPointsController[1].addEvent('dblclick', (event) => { this._controlPointsController[1].addEvent('dblclick', (event) => {
me._mouseClick(event); me._mouseClick(event);
}); });
}, }
setLine(line) { setLine(line) {
if ($defined(this._line)) { if ($defined(this._line)) {
@ -82,11 +82,11 @@ const ControlPoint = new Class({
this._orignalCtrlPoint[1] = this._controls[1].clone(); this._orignalCtrlPoint[1] = this._controls[1].clone();
this._endPoint[0] = this._line.getLine().getFrom().clone(); this._endPoint[0] = this._line.getLine().getFrom().clone();
this._endPoint[1] = this._line.getLine().getTo().clone(); this._endPoint[1] = this._line.getLine().getTo().clone();
}, }
redraw() { redraw() {
if ($defined(this._line)) this._createControlPoint(); if ($defined(this._line)) this._createControlPoint();
}, }
_createControlPoint() { _createControlPoint() {
this._controls = this._line.getLine().getControlPoints(); 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].x + pos.x,
this._controls[ControlPoint.TO].y + pos.y - 3, this._controls[ControlPoint.TO].y + pos.y - 3,
); );
}, }
_removeLine() {}, _removeLine() {}
_mouseDown(event, point, me) { _mouseDown(event, point, me) {
if (!this._isBinded) { if (!this._isBinded) {
@ -130,7 +130,7 @@ const ControlPoint = new Class({
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return false; return false;
}, }
_mouseMoveEvent(event, point) { _mouseMoveEvent(event, point) {
const screen = this._workspace.getScreenManager(); const screen = this._workspace.getScreenManager();
@ -153,7 +153,7 @@ const ControlPoint = new Class({
this._controlLines[point].setFrom(cords.x, cords.y); this._controlLines[point].setFrom(cords.x, cords.y);
this._controlLines[point].setTo(pos.x - 2, pos.y); this._controlLines[point].setTo(pos.x - 2, pos.y);
this._line.getLine().updateLine(point); this._line.getLine().updateLine(point);
}, }
_mouseUp(event, point) { _mouseUp(event, point) {
this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction); this._workspace.getScreenManager().removeEvent('mousemove', this._mouseMoveFunction);
@ -162,13 +162,13 @@ const ControlPoint = new Class({
const actionDispatcher = ActionDispatcher.getInstance(); const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.moveControlPoint(this, point); actionDispatcher.moveControlPoint(this, point);
this._isBinded = false; this._isBinded = false;
}, }
_mouseClick(event) { _mouseClick(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return false; return false;
}, }
setVisibility(visible) { setVisibility(visible) {
if (visible) { if (visible) {
@ -181,7 +181,7 @@ const ControlPoint = new Class({
this._controlPointsController[1].setVisibility(visible); this._controlPointsController[1].setVisibility(visible);
this._controlLines[0].setVisibility(visible); this._controlLines[0].setVisibility(visible);
this._controlLines[1].setVisibility(visible); this._controlLines[1].setVisibility(visible);
}, }
addToWorkspace(workspace) { addToWorkspace(workspace) {
this._workspace = workspace; this._workspace = workspace;
@ -189,7 +189,7 @@ const ControlPoint = new Class({
workspace.append(this._controlPointsController[1]); workspace.append(this._controlPointsController[1]);
workspace.append(this._controlLines[0]); workspace.append(this._controlLines[0]);
workspace.append(this._controlLines[1]); workspace.append(this._controlLines[1]);
}, }
removeFromWorkspace(workspace) { removeFromWorkspace(workspace) {
this._workspace = null; this._workspace = null;
@ -197,20 +197,20 @@ const ControlPoint = new Class({
workspace.removeChild(this._controlPointsController[1]); workspace.removeChild(this._controlPointsController[1]);
workspace.removeChild(this._controlLines[0]); workspace.removeChild(this._controlLines[0]);
workspace.removeChild(this._controlLines[1]); workspace.removeChild(this._controlLines[1]);
}, }
getControlPoint(index) { getControlPoint(index) {
return this._controls[index]; return this._controls[index];
}, }
getOriginalEndPoint(index) { getOriginalEndPoint(index) {
return this._endPoint[index]; return this._endPoint[index];
}, }
getOriginalCtrlPoint(index) { getOriginalCtrlPoint(index) {
return this._orignalCtrlPoint[index]; return this._orignalCtrlPoint[index];
}, }
}); }
ControlPoint.FROM = 0; ControlPoint.FROM = 0;
ControlPoint.TO = 1; ControlPoint.TO = 1;

34
packages/mindplot/src/components/DesignerKeyboard.js
View File

@ -18,13 +18,12 @@
import { $assert } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
import Keyboard from './Keyboard'; import Keyboard from './Keyboard';
const DesignerKeyboard = new Class({ class DesignerKeyboard extends Keyboard {
Extends: Keyboard, constructor(designer) {
super(designer);
initialize(designer) {
$assert(designer, 'designer can not be null'); $assert(designer, 'designer can not be null');
this._registerEvents(designer); this._registerEvents(designer);
}, }
_registerEvents(designer) { _registerEvents(designer) {
// Try with the keyboard .. // Try with the keyboard ..
@ -264,7 +263,7 @@ const DesignerKeyboard = new Class({
} }
} }
}); });
}, }
_goToBrother(designer, node, direction) { _goToBrother(designer, node, direction) {
const parent = node.getParent(); const parent = node.getParent();
@ -277,10 +276,10 @@ const DesignerKeyboard = new Class({
let dist = null; let dist = null;
for (let i = 0; i < brothers.length; i++) { for (let i = 0; i < brothers.length; i++) {
const sameSide = (x * brothers[i].getPosition().x) >= 0; const sameSide = (x * brothers[i].getPosition().x) >= 0;
if (brothers[i] != node && sameSide) { if (brothers[i] !== node && sameSide) {
const brother = brothers[i]; const brother = brothers[i];
const brotherY = brother.getPosition().y; const brotherY = brother.getPosition().y;
if (direction == 'DOWN' && brotherY > y) { if (direction === 'DOWN' && brotherY > y) {
let distancia = y - brotherY; let distancia = y - brotherY;
if (distancia < 0) { if (distancia < 0) {
distancia *= (-1); distancia *= (-1);
@ -289,7 +288,7 @@ const DesignerKeyboard = new Class({
dist = distancia; dist = distancia;
target = brothers[i]; target = brothers[i];
} }
} else if (direction == 'UP' && brotherY < y) { } else if (direction === 'UP' && brotherY < y) {
let distance = y - brotherY; let distance = y - brotherY;
if (distance < 0) { if (distance < 0) {
distance *= (-1); distance *= (-1);
@ -303,7 +302,7 @@ const DesignerKeyboard = new Class({
} }
this._goToNode(designer, target); this._goToNode(designer, target);
} }
}, }
_goToSideChild(designer, node, side) { _goToSideChild(designer, node, side) {
const children = node.getChildren(); const children = node.getChildren();
@ -313,13 +312,13 @@ const DesignerKeyboard = new Class({
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
const child = children[i]; const child = children[i];
const childY = child.getPosition().y; const childY = child.getPosition().y;
if (side == 'LEFT' && child.getPosition().x < 0) { if (side === 'LEFT' && child.getPosition().x < 0) {
if (top == null || childY < top) { if (top == null || childY < top) {
target = child; target = child;
top = childY; top = childY;
} }
} }
if (side == 'RIGHT' && child.getPosition().x > 0) { if (side === 'RIGHT' && child.getPosition().x > 0) {
if (top == null || childY < top) { if (top == null || childY < top) {
target = child; target = child;
top = childY; top = childY;
@ -329,14 +328,14 @@ const DesignerKeyboard = new Class({
this._goToNode(designer, target); this._goToNode(designer, target);
} }
}, }
_goToParent(designer, node) { _goToParent(designer, node) {
const parent = node.getParent(); const parent = node.getParent();
if (parent) { if (parent) {
this._goToNode(designer, parent); this._goToNode(designer, parent);
} }
}, }
_goToChild(designer, node) { _goToChild(designer, node) {
const children = node.getChildren(); const children = node.getChildren();
@ -352,7 +351,7 @@ const DesignerKeyboard = new Class({
} }
this._goToNode(designer, target); this._goToNode(designer, target);
} }
}, }
_goToNode(designer, node) { _goToNode(designer, node) {
// First deselect all the nodes ... // First deselect all the nodes ...
@ -360,9 +359,8 @@ const DesignerKeyboard = new Class({
// Give focus to the selected node.... // Give focus to the selected node....
node.setOnFocus(true); node.setOnFocus(true);
}, }
}
});
DesignerKeyboard.specialKeys = { DesignerKeyboard.specialKeys = {
8: 'backspace', 8: 'backspace',

20
packages/mindplot/src/components/DesignerUndoManager.js
View File

@ -17,12 +17,12 @@
*/ */
import { $assert } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
const DesignerUndoManager = new Class({ class DesignerUndoManager {
initialize(fireChange) { constructor() {
this._undoQueue = []; this._undoQueue = [];
this._redoQueue = []; this._redoQueue = [];
this._baseId = 0; this._baseId = 0;
}, }
enqueue(command) { enqueue(command) {
$assert(command, 'Command can not be null'); $assert(command, 'Command can not be null');
@ -37,7 +37,7 @@ const DesignerUndoManager = new Class({
this._undoQueue.push(command); this._undoQueue.push(command);
} }
this._redoQueue = []; this._redoQueue = [];
}, }
execUndo(commandContext) { execUndo(commandContext) {
if (this._undoQueue.length > 0) { if (this._undoQueue.length > 0) {
@ -46,7 +46,7 @@ const DesignerUndoManager = new Class({
command.undoExecute(commandContext); command.undoExecute(commandContext);
} }
}, }
execRedo(commandContext) { execRedo(commandContext) {
if (this._redoQueue.length > 0) { if (this._redoQueue.length > 0) {
@ -54,11 +54,11 @@ const DesignerUndoManager = new Class({
this._undoQueue.push(command); this._undoQueue.push(command);
command.execute(commandContext); command.execute(commandContext);
} }
}, }
buildEvent() { buildEvent() {
return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length }; return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length };
}, }
markAsChangeBase() { markAsChangeBase() {
const undoLength = this._undoQueue.length; const undoLength = this._undoQueue.length;
@ -68,7 +68,7 @@ const DesignerUndoManager = new Class({
} else { } else {
this._baseId = 0; this._baseId = 0;
} }
}, }
hasBeenChanged() { hasBeenChanged() {
let result = true; let result = true;
@ -80,7 +80,7 @@ const DesignerUndoManager = new Class({
result = (this._baseId != command.getId()); result = (this._baseId != command.getId());
} }
return result; return result;
}, }
}); }
export default DesignerUndoManager; export default DesignerUndoManager;

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

@ -16,15 +16,16 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert } from '@wisemapping/core-js'; 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(designerModel, 'designerModel can not be null');
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
// this._layoutManager = layoutManager; // this._layoutManager = layoutManager;
this._designerModel = designerModel; this._designerModel = designerModel;
this._workspace = workspace; this._workspace = workspace;
}, }
checkConnection(dragTopic) { checkConnection(dragTopic) {
const topics = this._designerModel.getTopics(); const topics = this._designerModel.getTopics();
@ -41,7 +42,7 @@ const DragConnector = new Class({
if (!dragTopic.isConnected() && candidates.length > 0) { if (!dragTopic.isConnected() && candidates.length > 0) {
dragTopic.connectTo(candidates[0]); dragTopic.connectTo(candidates[0]);
} }
}, }
_searchConnectionCandidates(dragTopic) { _searchConnectionCandidates(dragTopic) {
let topics = this._designerModel.getTopics(); 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 me._proximityWeight(av, a, sPos, currentConnection) - me._proximityWeight(bv, b, sPos, currentConnection);
}); });
return topics; return topics;
}, }
_proximityWeight(isAligned, target, sPos, currentConnection) { _proximityWeight(isAligned, target, sPos, currentConnection) {
const tPos = target.getPosition(); const tPos = target.getPosition();
return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x) + Math.abs(tPos.y - sPos.y) + (currentConnection == target ? 0 : 100); return (isAligned ? 0 : 200) + Math.abs(tPos.x - sPos.x) + Math.abs(tPos.y - sPos.y) + (currentConnection == target ? 0 : 100);
}, }
_isVerticallyAligned(targetSize, targetPosition, sourcePosition) { _isVerticallyAligned(targetSize, targetPosition, sourcePosition) {
return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2; return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
}, }
}); }
DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE = 80; DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE = 80;

20
packages/mindplot/src/components/DragManager.js
View File

@ -18,15 +18,15 @@
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import DragTopic from './DragTopic'; import DragTopic from './DragTopic';
const DragManager = new Class({ class DragManager {
initialize(workspace, eventDispatcher) { constructor(workspace, eventDispatcher) {
this._workspace = workspace; this._workspace = workspace;
this._designerModel = workspace; this._designerModel = workspace;
this._listeners = {}; this._listeners = {};
this._isDragInProcess = false; this._isDragInProcess = false;
this._eventDispatcher = eventDispatcher; this._eventDispatcher = eventDispatcher;
DragTopic.init(this._workspace); DragTopic.init(this._workspace);
}, }
add(node) { add(node) {
// Add behaviour ... // Add behaviour ...
@ -34,7 +34,7 @@ const DragManager = new Class({
const screen = workspace.getScreenManager(); const screen = workspace.getScreenManager();
const dragManager = this; const dragManager = this;
const me = this; const me = this;
const mouseDownListener = function (event) { const mouseDownListener = function mouseDownListener(event) {
if (workspace.isWorkspaceEventsEnabled()) { if (workspace.isWorkspaceEventsEnabled()) {
// Disable double drag... // Disable double drag...
workspace.enableWorkspaceEvents(false); workspace.enableWorkspaceEvents(false);
@ -56,7 +56,7 @@ const DragManager = new Class({
} }
}; };
node.addEvent('mousedown', mouseDownListener); node.addEvent('mousedown', mouseDownListener);
}, }
remove(node) { remove(node) {
const nodes = this._topics; const nodes = this._topics;
@ -68,7 +68,7 @@ const DragManager = new Class({
index = i; index = i;
} }
} }
}, }
_buildMouseMoveListener(workspace, dragNode, dragManager) { _buildMouseMoveListener(workspace, dragNode, dragManager) {
const screen = workspace.getScreenManager(); const screen = workspace.getScreenManager();
@ -98,7 +98,7 @@ const DragManager = new Class({
}; };
dragManager._mouseMoveListener = result; dragManager._mouseMoveListener = result;
return result; return result;
}, }
_buildMouseUpListener(workspace, node, dragNode, dragManager) { _buildMouseUpListener(workspace, node, dragNode, dragManager) {
const screen = workspace.getScreenManager(); const screen = workspace.getScreenManager();
@ -131,7 +131,7 @@ const DragManager = new Class({
}; };
dragManager._mouseUpListener = result; dragManager._mouseUpListener = result;
return result; return result;
}, }
/** /**
* type: * type:
@ -141,7 +141,7 @@ const DragManager = new Class({
*/ */
addEvent(type, listener) { addEvent(type, listener) {
this._listeners[type] = listener; this._listeners[type] = listener;
}, }
}); }
export default DragManager; export default DragManager;

42
packages/mindplot/src/components/DragPivot.js
View File

@ -16,14 +16,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import DragTopicConfig from './DragTopicConfig'; import DragTopicConfig from './DragTopicConfig';
import Shape from './util/Shape'; import Shape from './util/Shape';
import INodeModel from './model/INodeModel'; import INodeModel from './model/INodeModel';
const DragPivot = new Class({ class DragPivot {
initialize() { constructor() {
this._position = new web2d.Point(); this._position = new web2d.Point();
this._size = DragTopicConfig.PIVOT_SIZE; this._size = DragTopicConfig.PIVOT_SIZE;
@ -33,15 +33,15 @@ const DragPivot = new Class({
this._connectRect = this._buildRect(); this._connectRect = this._buildRect();
this._targetTopic = null; this._targetTopic = null;
this._isVisible = false; this._isVisible = false;
}, }
isVisible() { isVisible() {
return this._isVisible; return this._isVisible;
}, }
getTargetTopic() { getTargetTopic() {
return this._targetTopic; return this._targetTopic;
}, }
_buildStraightLine() { _buildStraightLine() {
const line = new web2d.CurvedLine(); const line = new web2d.CurvedLine();
@ -50,7 +50,7 @@ const DragPivot = new Class({
line.setOpacity(0.4); line.setOpacity(0.4);
line.setVisibility(false); line.setVisibility(false);
return line; return line;
}, }
_buildCurvedLine() { _buildCurvedLine() {
const line = new web2d.CurvedLine(); const line = new web2d.CurvedLine();
@ -59,7 +59,7 @@ const DragPivot = new Class({
line.setOpacity(0.4); line.setOpacity(0.4);
line.setVisibility(false); line.setVisibility(false);
return line; return line;
}, }
_redrawLine() { _redrawLine() {
// Update line position. // Update line position.
@ -90,16 +90,16 @@ const DragPivot = new Class({
// This solve several strange effects ;) // This solve several strange effects ;)
const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint); const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint);
line.setTo(targetPoint.x, targetPoint.y); line.setTo(targetPoint.x, targetPoint.y);
}, }
setPosition(point) { setPosition(point) {
this._position = point; this._position = point;
this._redrawLine(); this._redrawLine();
}, }
getPosition() { getPosition() {
return this._position; return this._position;
}, }
_buildRect() { _buildRect() {
const size = this._size; const size = this._size;
@ -113,16 +113,16 @@ const DragPivot = new Class({
const rect = new web2d.Rect(0, rectAttributes); const rect = new web2d.Rect(0, rectAttributes);
rect.setVisibility(false); rect.setVisibility(false);
return rect; return rect;
}, }
_getPivotRect() { _getPivotRect() {
return this._dragPivot; return this._dragPivot;
}, }
getSize() { getSize() {
const elem2d = this._getPivotRect(); const elem2d = this._getPivotRect();
return elem2d.getSize(); return elem2d.getSize();
}, }
setVisibility(value) { setVisibility(value) {
if (this.isVisible() != value) { if (this.isVisible() != value) {
@ -138,7 +138,7 @@ const DragPivot = new Class({
} }
this._isVisible = value; this._isVisible = value;
} }
}, }
// If the node is connected, validate that there is a line connecting both... // If the node is connected, validate that there is a line connecting both...
_getConnectionLine() { _getConnectionLine() {
@ -152,7 +152,7 @@ const DragPivot = new Class({
} }
} }
return result; return result;
}, }
addToWorkspace(workspace) { addToWorkspace(workspace) {
const pivotRect = this._getPivotRect(); const pivotRect = this._getPivotRect();
@ -178,7 +178,7 @@ const DragPivot = new Class({
connectRect.setVisibility(false); connectRect.setVisibility(false);
workspace.append(connectRect); workspace.append(connectRect);
connectRect.moveToBack(); connectRect.moveToBack();
}, }
removeFromWorkspace(workspace) { removeFromWorkspace(workspace) {
const shape = this._getPivotRect(); const shape = this._getPivotRect();
@ -194,7 +194,7 @@ const DragPivot = new Class({
if ($defined(this._curvedLine)) { if ($defined(this._curvedLine)) {
workspace.removeChild(this._curvedLine); workspace.removeChild(this._curvedLine);
} }
}, }
connectTo(targetTopic, position) { connectTo(targetTopic, position) {
$assert(!this._outgoingLine, 'Could not connect an already connected node'); $assert(!this._outgoingLine, 'Could not connect an already connected node');
@ -226,7 +226,7 @@ const DragPivot = new Class({
pivotRect.setPosition(position.x, position.y); pivotRect.setPosition(position.x, position.y);
this._redrawLine(); this._redrawLine();
}, }
disconnect(workspace) { disconnect(workspace) {
$assert(workspace, 'workspace can not be null.'); $assert(workspace, 'workspace can not be null.');
@ -234,7 +234,7 @@ const DragPivot = new Class({
this.setVisibility(false); this.setVisibility(false);
this._targetTopic = null; this._targetTopic = null;
}, }
}); }
export default DragPivot; export default DragPivot;

48
packages/mindplot/src/components/DragTopic.js
View File

@ -16,13 +16,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
import DragPivot from './DragPivot'; import DragPivot from './DragPivot';
const DragTopic = new Class({ class DragTopic {
initialize(dragShape, draggedNode, layoutManger) { constructor(dragShape, draggedNode, layoutManger) {
$assert(dragShape, 'Rect can not be null.'); $assert(dragShape, 'Rect can not be null.');
$assert(draggedNode, 'draggedNode can not be null.'); $assert(draggedNode, 'draggedNode can not be null.');
$assert(layoutManger, 'layoutManger 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._position = new web2d.Point();
this._isInWorkspace = false; this._isInWorkspace = false;
this._isFreeLayoutEnabled = false; this._isFreeLayoutEnabled = false;
}, }
setOrder(order) { setOrder(order) {
this._order = order; this._order = order;
}, }
setPosition(x, y) { setPosition(x, y) {
// Update drag shadow position .... // Update drag shadow position ....
@ -78,7 +78,7 @@ const DragTopic = new Class({
this.setOrder(predict.order); this.setOrder(predict.order);
} }
} }
}, }
updateFreeLayout(event) { updateFreeLayout(event) {
const isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac); const isFreeEnabled = (event.metaKey && Browser.Platform.mac) || (event.ctrlKey && !Browser.Platform.mac);
@ -87,27 +87,27 @@ const DragTopic = new Class({
dragPivot.setVisibility(!isFreeEnabled); dragPivot.setVisibility(!isFreeEnabled);
this._isFreeLayoutEnabled = isFreeEnabled; this._isFreeLayoutEnabled = isFreeEnabled;
} }
}, }
setVisibility(value) { setVisibility(value) {
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
dragPivot.setVisibility(value); dragPivot.setVisibility(value);
}, }
isVisible() { isVisible() {
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
return dragPivot.isVisible(); return dragPivot.isVisible();
}, }
getInnerShape() { getInnerShape() {
return this._elem2d; return this._elem2d;
}, }
disconnect(workspace) { disconnect(workspace) {
// Clear connection line ... // Clear connection line ...
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
dragPivot.disconnect(workspace); dragPivot.disconnect(workspace);
}, }
connectTo(parent) { connectTo(parent) {
$assert(parent, 'Parent connection node can not be null.'); $assert(parent, 'Parent connection node can not be null.');
@ -126,11 +126,11 @@ const DragTopic = new Class({
dragPivot.setVisibility(true); dragPivot.setVisibility(true);
this.setOrder(predict.order); this.setOrder(predict.order);
}, }
getDraggedTopic() { getDraggedTopic() {
return this._draggedNode; return this._draggedNode;
}, }
removeFromWorkspace(workspace) { removeFromWorkspace(workspace) {
if (this._isInWorkspace) { if (this._isInWorkspace) {
@ -143,11 +143,11 @@ const DragTopic = new Class({
this._isInWorkspace = false; this._isInWorkspace = false;
} }
}, }
isInWorkspace() { isInWorkspace() {
return this._isInWorkspace; return this._isInWorkspace;
}, }
addToWorkspace(workspace) { addToWorkspace(workspace) {
if (!this._isInWorkspace) { if (!this._isInWorkspace) {
@ -156,19 +156,19 @@ const DragTopic = new Class({
dragPivot.addToWorkspace(workspace); dragPivot.addToWorkspace(workspace);
this._isInWorkspace = true; this._isInWorkspace = true;
} }
}, }
_getDragPivot() { _getDragPivot() {
return DragTopic.__getDragPivot(); return DragTopic.__getDragPivot();
}, }
getPosition() { getPosition() {
return this._position; return this._position;
}, }
isDragTopic() { isDragTopic() {
return true; return true;
}, }
applyChanges(workspace) { applyChanges(workspace) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
@ -193,23 +193,23 @@ const DragTopic = new Class({
} else { } else {
actionDispatcher.moveTopic(topicId, position); actionDispatcher.moveTopic(topicId, position);
} }
}, }
getConnectedToTopic() { getConnectedToTopic() {
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
return dragPivot.getTargetTopic(); return dragPivot.getTargetTopic();
}, }
isConnected() { isConnected() {
return this.getConnectedToTopic() != null; return this.getConnectedToTopic() != null;
}, }
isFreeLayoutOn() { isFreeLayoutOn() {
// return this._isFreeLayoutEnabled; // return this._isFreeLayoutEnabled;
// Disable free layout ... // Disable free layout ...
return false; return false;
}, }
}); }
DragTopic.init = function (workspace) { DragTopic.init = function (workspace) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');

14
packages/mindplot/src/components/EditorProperties.js
View File

@ -16,23 +16,23 @@
* limitations under the License. * limitations under the License.
*/ */
const EditorProperties = new Class({ class EditorProperties {
initialize() { constructor() {
this._zoom = 0; this._zoom = 0;
this._position = 0; this._position = 0;
}, }
setZoom(zoom) { setZoom(zoom) {
this._zoom = zoom; this._zoom = zoom;
}, }
getZoom() { getZoom() {
return this._zoom; return this._zoom;
}, }
asProperties() { asProperties() {
return `zoom=${this._zoom}\n`; return `zoom=${this._zoom}\n`;
}, }
}); }
export default EditorProperties; export default EditorProperties;

25
packages/mindplot/src/components/Icon.js
View File

@ -16,44 +16,45 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert } from "@wisemapping/core-js"; import { $assert } from "@wisemapping/core-js";
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
const Icon = new Class({ class Icon {
initialize(url) { constructor(url) {
$assert(url, 'topic can not be null'); $assert(url, 'topic can not be null');
this._image = new web2d.Image(); this._image = new web2d.Image();
this._image.setHref(url); this._image.setHref(url);
this._image.setSize(Icon.SIZE, Icon.SIZE); this._image.setSize(Icon.SIZE, Icon.SIZE);
}, }
getImage() { getImage() {
return this._image; return this._image;
}, }
setGroup(group) { setGroup(group) {
this._group = group; this._group = group;
}, }
getGroup() { getGroup() {
return this._group; return this._group;
}, }
getSize() { getSize() {
return this._image.getSize(); return this._image.getSize();
}, }
getPosition() { getPosition() {
return this._image.getPosition(); return this._image.getPosition();
}, }
addEvent(type, fnc) { addEvent(type, fnc) {
this._image.addEvent(type, fnc); this._image.addEvent(type, fnc);
}, }
// eslint-disable-next-line class-methods-use-this
remove() { remove() {
throw new Error('Unsupported operation'); throw new Error('Unsupported operation');
}, }
}); }
Icon.SIZE = 90; Icon.SIZE = 90;

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

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import Icon from './Icon'; import Icon from './Icon';

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

@ -15,23 +15,22 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { $assert } from "@wisemapping/core-js"; import { $assert } from '@wisemapping/core-js';
import Icon from './Icon'; import Icon from './Icon';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
const ImageIcon = new Class({ class ImageIcon extends Icon {
Extends: Icon, constructor(topic, iconModel, readOnly) {
initialize(topic, iconModel, readOnly) {
$assert(iconModel, 'iconModel can not be null'); $assert(iconModel, 'iconModel can not be null');
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
this._topicId = topic.getId();
this._featureModel = iconModel;
// Build graph image representation ... // Build graph image representation ...
const iconType = iconModel.getIconType(); const iconType = iconModel.getIconType();
const imgUrl = this._getImageUrl(iconType); const imgUrl = ImageIcon._getImageUrl(iconType);
this.parent(imgUrl); super(imgUrl);
this._topicId = topic.getId();
this._featureModel = iconModel;
if (!readOnly) { if (!readOnly) {
// Icon // Icon
@ -39,33 +38,33 @@ const ImageIcon = new Class({
const me = this; const me = this;
image.addEvent('click', () => { image.addEvent('click', () => {
const iconType = iconModel.getIconType(); const iconType = iconModel.getIconType();
const newIconType = me._getNextFamilyIconId(iconType); const newIconType = ImageIcon._getNextFamilyIconId(iconType);
iconModel.setIconType(newIconType); iconModel.setIconType(newIconType);
const imgUrl = me._getImageUrl(newIconType); const imgUrl = ImageIcon._getImageUrl(newIconType);
me._image.setHref(imgUrl); me._image.setHref(imgUrl);
}); });
this._image.setCursor('pointer'); this._image.setCursor('pointer');
} }
}, }
_getImageUrl(iconId) { static _getImageUrl(iconId) {
return `icons/${iconId}.png`; return `icons/${iconId}.png`;
}, }
getModel() { getModel() {
return this._featureModel; return this._featureModel;
}, }
_getNextFamilyIconId(iconId) { static _getNextFamilyIconId(iconId) {
const familyIcons = this._getFamilyIcons(iconId); const familyIcons = ImageIcon._getFamilyIcons(iconId);
$assert(familyIcons != null, 'Family Icon not found!'); $assert(familyIcons != null, 'Family Icon not found!');
let result = null; let result = null;
for (let i = 0; i < familyIcons.length && result == null; i++) { for (let i = 0; i < familyIcons.length && result == null; i++) {
if (familyIcons[i] == iconId) { if (familyIcons[i] === iconId) {
// Is last one? // Is last one?
if (i == (familyIcons.length - 1)) { if (i === (familyIcons.length - 1)) {
result = familyIcons[0]; result = familyIcons[0];
} else { } else {
result = familyIcons[i + 1]; result = familyIcons[i + 1];
@ -75,32 +74,32 @@ const ImageIcon = new Class({
} }
return result; return result;
}, }
_getFamilyIcons(iconId) { static _getFamilyIcons(iconId) {
$assert(iconId != null, 'id must not be null'); $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; let result = null;
for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i++) { for (let i = 0; i < ImageIcon.prototype.ICON_FAMILIES.length; i++) {
const family = ImageIcon.prototype.ICON_FAMILIES[i]; const family = ImageIcon.prototype.ICON_FAMILIES[i];
const iconFamilyId = iconId.substr(0, iconId.indexOf('_')); const iconFamilyId = iconId.substr(0, iconId.indexOf('_'));
if (family.id == iconFamilyId) { if (family.id === iconFamilyId) {
result = family.icons; result = family.icons;
break; break;
} }
} }
return result; return result;
}, }
remove() { remove() {
const actionDispatcher = ActionDispatcher.getInstance(); const actionDispatcher = ActionDispatcher.getInstance();
const featureId = this._featureModel.getId(); const featureId = this._featureModel.getId();
const topicId = this._topicId; const topicId = this._topicId;
actionDispatcher.removeFeatureFromTopic(topicId, featureId); actionDispatcher.removeFeatureFromTopic(topicId, featureId);
}, }
}); }
ImageIcon.prototype.ICON_FAMILIES = [ ImageIcon.prototype.ICON_FAMILIES = [
{ id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] }, { id: 'face', icons: ['face_plain', 'face_sad', 'face_crying', 'face_smile', 'face_surprise', 'face_wink'] },

16
packages/mindplot/src/components/LinkIcon.js
View File

@ -20,20 +20,18 @@ import $ from '@libraries/jquery-2.1.0';
import Icon from './Icon'; import Icon from './Icon';
import LinkIconTooltip from './widget/LinkIconTooltip'; import LinkIconTooltip from './widget/LinkIconTooltip';
const LinkIcon = new Class({ class LinkIcon extends Icon {
constructor(topic, linkModel, readOnly) {
Extends: Icon,
initialize(topic, linkModel, readOnly) {
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
$assert(linkModel, 'linkModel can not be null'); $assert(linkModel, 'linkModel can not be null');
this.parent(LinkIcon.IMAGE_URL); super(LinkIcon.IMAGE_URL);
this._linksModel = linkModel; this._linksModel = linkModel;
this._topic = topic; this._topic = topic;
this._readOnly = readOnly; this._readOnly = readOnly;
this._registerEvents(); this._registerEvents();
}, }
_registerEvents() { _registerEvents() {
this._image.setCursor('pointer'); this._image.setCursor('pointer');
@ -61,12 +59,12 @@ const LinkIcon = new Class({
$(this.getImage().peer._native).mouseenter(() => { $(this.getImage().peer._native).mouseenter(() => {
me._tip.show(); me._tip.show();
}); });
}, }
getModel() { getModel() {
return this._linksModel; return this._linksModel;
}, }
}); }
LinkIcon.IMAGE_URL = 'images/links.png'; LinkIcon.IMAGE_URL = 'images/links.png';
export default LinkIcon; export default LinkIcon;

19
packages/mindplot/src/components/LocalStorageManager.js
View File

@ -18,21 +18,20 @@
import $ from '@libraries/jquery-2.1.0'; import $ from '@libraries/jquery-2.1.0';
import PersistenceManager from './PersistenceManager'; import PersistenceManager from './PersistenceManager';
const LocalStorageManager = new Class({ class LocalStorageManager extends PersistenceManager {
Extends: PersistenceManager, constructor(documentUrl, forceLoad) {
initialize(documentUrl, forceLoad) { super();
this.parent();
this.documentUrl = documentUrl; this.documentUrl = documentUrl;
this.forceLoad = forceLoad; this.forceLoad = forceLoad;
}, }
saveMapXml(mapId, mapXml, pref, saveHistory, events) { saveMapXml(mapId, mapXml, pref, saveHistory, events) {
localStorage.setItem(`${mapId}-xml`, mapXml); localStorage.setItem(`${mapId}-xml`, mapXml);
}, }
discardChanges(mapId) { discardChanges(mapId) {
localStorage.removeItem(`${mapId}-xml`); localStorage.removeItem(`${mapId}-xml`);
}, }
loadMapDom(mapId) { loadMapDom(mapId) {
let xml = localStorage.getItem(`${mapId}-xml`); let xml = localStorage.getItem(`${mapId}-xml`);
@ -54,11 +53,11 @@ const LocalStorageManager = new Class({
} }
return jQuery.parseXML(xml); return jQuery.parseXML(xml);
}, }
unlockMap(mindmap) { unlockMap(mindmap) {
// Ignore, no implementation required ... // Ignore, no implementation required ...
}, }
}); }
export default LocalStorageManager; export default LocalStorageManager;

30
packages/mindplot/src/components/MainTopic.js
View File

@ -16,26 +16,23 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import Topic from './Topic'; import Topic from './Topic';
import { TopicShape } from './model/INodeModel'; import { TopicShape } from './model/INodeModel';
import Shape from './util/Shape'; import Shape from './util/Shape';
const MainTopic = new Class( class MainTopic extends Topic {
/** @lends MainTopic */ {
Extends: Topic,
/** /**
* @extends mindplot.Topic * @extends mindplot.Topic
* @constructs * @constructs
* @param model * @param model
* @param options * @param options
*/ */
initialize(model, options) { constructor(model, options) {
this.parent(model, options); super(model, options);
}, this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
}
INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
_buildDragShape() { _buildDragShape() {
const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType()); const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
@ -71,7 +68,7 @@ const MainTopic = new Class(
group.append(textShape); group.append(textShape);
} }
return group; return group;
}, }
/** */ /** */
updateTopicShape(targetTopic, workspace) { updateTopicShape(targetTopic, workspace) {
@ -85,7 +82,7 @@ const MainTopic = new Class(
this._setShapeType(shapeType, false); this._setShapeType(shapeType, false);
} }
} }
}, }
/** */ /** */
disconnect(workspace) { disconnect(workspace) {
@ -101,7 +98,7 @@ const MainTopic = new Class(
} }
const innerShape = this.getInnerShape(); const innerShape = this.getInnerShape();
innerShape.setVisibility(true); innerShape.setVisibility(true);
}, }
_updatePositionOnChangeSize(oldSize, newSize) { _updatePositionOnChangeSize(oldSize, newSize) {
const xOffset = Math.round((newSize.width - oldSize.width) / 2); const xOffset = Math.round((newSize.width - oldSize.width) / 2);
@ -114,12 +111,12 @@ const MainTopic = new Class(
} }
this.setPosition(pos); this.setPosition(pos);
} }
}, }
/** */ /** */
workoutIncomingConnectionPoint(sourcePosition) { workoutIncomingConnectionPoint(sourcePosition) {
return Shape.workoutIncomingConnectionPoint(this, sourcePosition); return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
}, }
/** */ /** */
workoutOutgoingConnectionPoint(targetPosition) { workoutOutgoingConnectionPoint(targetPosition) {
@ -156,8 +153,7 @@ const MainTopic = new Class(
result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true); result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
} }
return result; return result;
}, }
}, }
);
export default MainTopic; export default MainTopic;

36
packages/mindplot/src/components/MultilineTextEditor.js
View File

@ -18,12 +18,12 @@
import Events from './Events'; import Events from './Events';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
const MultilineTextEditor = new Class({ class MultilineTextEditor extends Events {
Extends: Events, constructor() {
initialize() { super();
this._topic = null; this._topic = null;
this._timeoutId = -1; this._timeoutId = -1;
}, }
_buildEditor() { _buildEditor() {
const result = $('<div></div>') const result = $('<div></div>')
@ -46,7 +46,7 @@ const MultilineTextEditor = new Class({
result.append(textareaElem); result.append(textareaElem);
return result; return result;
}, }
_registerEvents(containerElem) { _registerEvents(containerElem) {
const textareaElem = this._getTextareaElem(); const textareaElem = this._getTextareaElem();
@ -120,7 +120,7 @@ const MultilineTextEditor = new Class({
containerElem.on('mousedown', (event) => { containerElem.on('mousedown', (event) => {
event.stopPropagation(); event.stopPropagation();
}); });
}, }
_adjustEditorSize() { _adjustEditorSize() {
if (this.isVisible()) { if (this.isVisible()) {
@ -140,11 +140,11 @@ const MultilineTextEditor = new Class({
height: textElem.height(), height: textElem.height(),
}); });
} }
}, }
isVisible() { isVisible() {
return $defined(this._containerElem) && this._containerElem.css('display') == 'block'; return $defined(this._containerElem) && this._containerElem.css('display') == 'block';
}, }
_updateModel() { _updateModel() {
if (this._topic.getText() != this._getText()) { if (this._topic.getText() != this._getText()) {
@ -154,7 +154,7 @@ const MultilineTextEditor = new Class({
const actionDispatcher = ActionDispatcher.getInstance(); const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.changeTextToTopic([topicId], text); actionDispatcher.changeTextToTopic([topicId], text);
} }
}, }
show(topic, text) { show(topic, text) {
// Close a previous node editor if it's opened ... // Close a previous node editor if it's opened ...
@ -172,7 +172,7 @@ const MultilineTextEditor = new Class({
this._registerEvents(containerElem); this._registerEvents(containerElem);
this._showEditor(text); this._showEditor(text);
} }
}, }
_showEditor(defaultText) { _showEditor(defaultText) {
const topic = this._topic; const topic = this._topic;
@ -208,7 +208,7 @@ const MultilineTextEditor = new Class({
}; };
this._timeoutId = displayFunc.delay(10); this._timeoutId = displayFunc.delay(10);
}, }
_setStyle(fontStyle) { _setStyle(fontStyle) {
const inputField = this._getTextareaElem(); const inputField = this._getTextareaElem();
@ -233,21 +233,21 @@ const MultilineTextEditor = new Class({
}; };
inputField.css(style); inputField.css(style);
this._containerElem.css(style); this._containerElem.css(style);
}, }
_setText(text) { _setText(text) {
const textareaElem = this._getTextareaElem(); const textareaElem = this._getTextareaElem();
textareaElem.val(text); textareaElem.val(text);
this._adjustEditorSize(); this._adjustEditorSize();
}, }
_getText() { _getText() {
return this._getTextareaElem().val(); return this._getTextareaElem().val();
}, }
_getTextareaElem() { _getTextareaElem() {
return this._containerElem.find('textarea'); return this._containerElem.find('textarea');
}, }
_positionCursor(textareaElem, selectText) { _positionCursor(textareaElem, selectText) {
textareaElem.focus(); textareaElem.focus();
@ -277,7 +277,7 @@ const MultilineTextEditor = new Class({
textareaElem.focus(); textareaElem.focus();
} }
} }
}, }
close(update) { close(update) {
if (this.isVisible() && this._topic) { if (this.isVisible() && this._topic) {
@ -297,7 +297,7 @@ const MultilineTextEditor = new Class({
this._timeoutId = -1; this._timeoutId = -1;
} }
this._topic = null; this._topic = null;
}, }
}); }
export default MultilineTextEditor; export default MultilineTextEditor;

54
packages/mindplot/src/components/NodeGraph.js
View File

@ -19,15 +19,14 @@ import { $assert } from '@wisemapping/core-js';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
import DragTopic from './DragTopic'; import DragTopic from './DragTopic';
const NodeGraph = new Class( class NodeGraph {
/** @lends NodeGraph */ {
/** /**
* @constructs * @constructs
* @param {mindplot.model.NodeModel} nodeModel * @param {mindplot.model.NodeModel} nodeModel
* @param {Object<Number, String, Boolean>} options * @param {Object<Number, String, Boolean>} options
* @throws will throw an error if nodeModel is null or undefined * @throws will throw an error if nodeModel is null or undefined
*/ */
initialize(nodeModel, options) { constructor(nodeModel, options) {
$assert(nodeModel, 'model can not be null'); $assert(nodeModel, 'model can not be null');
this._options = options; this._options = options;
@ -35,18 +34,18 @@ const NodeGraph = new Class(
this.setModel(nodeModel); this.setModel(nodeModel);
this._onFocus = false; this._onFocus = false;
this._size = { width: 50, height: 20 }; this._size = { width: 50, height: 20 };
}, }
/** @return true if option is set to read-only */ /** @return true if option is set to read-only */
isReadOnly() { isReadOnly() {
return this._options.readOnly; return this._options.readOnly;
}, }
/** @return model type */ /** @return model type */
getType() { getType() {
const model = this.getModel(); const model = this.getModel();
return model.getType(); return model.getType();
}, }
/** /**
* @param {String} id * @param {String} id
@ -55,11 +54,11 @@ const NodeGraph = new Class(
setId(id) { setId(id) {
$assert(typeof topic.getId() === 'number', `id is not a number:${id}`); $assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
this.getModel().setId(id); this.getModel().setId(id);
}, }
_set2DElement(elem2d) { _set2DElement(elem2d) {
this._elem2d = elem2d; this._elem2d = elem2d;
}, }
/** /**
* @return 2D element * @return 2D element
@ -68,51 +67,51 @@ const NodeGraph = new Class(
get2DElement() { get2DElement() {
$assert(this._elem2d, 'NodeGraph has not been initialized properly'); $assert(this._elem2d, 'NodeGraph has not been initialized properly');
return this._elem2d; return this._elem2d;
}, }
/** @abstract */ /** @abstract */
setPosition(point, fireEvent) { setPosition(point, fireEvent) {
throw new Error('Unsupported operation'); throw new Error('Unsupported operation');
}, }
/** */ /** */
addEvent(type, listener) { addEvent(type, listener) {
const elem = this.get2DElement(); const elem = this.get2DElement();
elem.addEvent(type, listener); elem.addEvent(type, listener);
}, }
/** */ /** */
removeEvent(type, listener) { removeEvent(type, listener) {
const elem = this.get2DElement(); const elem = this.get2DElement();
elem.removeEvent(type, listener); elem.removeEvent(type, listener);
}, }
/** */ /** */
fireEvent(type, event) { fireEvent(type, event) {
const elem = this.get2DElement(); const elem = this.get2DElement();
elem.trigger(type, event); elem.trigger(type, event);
}, }
/** */ /** */
setMouseEventsEnabled(isEnabled) { setMouseEventsEnabled(isEnabled) {
this._mouseEvents = isEnabled; this._mouseEvents = isEnabled;
}, }
/** */ /** */
isMouseEventsEnabled() { isMouseEventsEnabled() {
return this._mouseEvents; return this._mouseEvents;
}, }
/** @return {Object<Number>} size */ /** @return {Object<Number>} size */
getSize() { getSize() {
return this._size; return this._size;
}, }
/** @param {Object<Number>} size */ /** @param {Object<Number>} size */
setSize(size) { setSize(size) {
this._size.width = parseInt(size.width, 10); this._size.width = parseInt(size.width, 10);
this._size.height = parseInt(size.height, 10); this._size.height = parseInt(size.height, 10);
}, }
/** /**
* @return {mindplot.model.NodeModel} the node model * @return {mindplot.model.NodeModel} the node model
@ -120,7 +119,7 @@ const NodeGraph = new Class(
getModel() { getModel() {
$assert(this._model, 'Model has not been initialized yet'); $assert(this._model, 'Model has not been initialized yet');
return this._model; return this._model;
}, }
/** /**
* @param {mindplot.NodeModel} model the node model * @param {mindplot.NodeModel} model the node model
@ -129,12 +128,12 @@ const NodeGraph = new Class(
setModel(model) { setModel(model) {
$assert(model, 'Model can not be null'); $assert(model, 'Model can not be null');
this._model = model; this._model = model;
}, }
/** */ /** */
getId() { getId() {
return this._model.getId(); return this._model.getId();
}, }
/** */ /** */
setOnFocus(focus) { setOnFocus(focus) {
@ -156,35 +155,34 @@ const NodeGraph = new Class(
// Fire event ... // Fire event ...
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
} }
}, }
/** @return {Boolean} true if the node graph is on focus */ /** @return {Boolean} true if the node graph is on focus */
isOnFocus() { isOnFocus() {
return this._onFocus; return this._onFocus;
}, }
/** */ /** */
dispose(workspace) { dispose(workspace) {
this.setOnFocus(false); this.setOnFocus(false);
workspace.removeChild(this); workspace.removeChild(this);
}, }
/** */ /** */
createDragNode(layoutManager) { createDragNode(layoutManager) {
const dragShape = this._buildDragShape(); const dragShape = this._buildDragShape();
return new DragTopic(dragShape, this, layoutManager); return new DragTopic(dragShape, this, layoutManager);
}, }
_buildDragShape() { _buildDragShape() {
$assert(false, '_buildDragShape must be implemented by all nodes.'); $assert(false, '_buildDragShape must be implemented by all nodes.');
}, }
/** */ /** */
getPosition() { getPosition() {
const model = this.getModel(); const model = this.getModel();
return model.getPosition(); return model.getPosition();
}, }
}, }
);
export default NodeGraph; export default NodeGraph;

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

@ -20,18 +20,17 @@ import $ from '@libraries/jquery-2.1.0';
import Icon from './Icon'; import Icon from './Icon';
import FloatingTip from './widget/FloatingTip'; import FloatingTip from './widget/FloatingTip';
const NoteIcon = new Class({ class NoteIcon extends Icon {
Extends: Icon, constructor(topic, noteModel, readOnly) {
initialize(topic, noteModel, readOnly) {
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
this.parent(NoteIcon.IMAGE_URL); super(NoteIcon.IMAGE_URL);
this._linksModel = noteModel; this._linksModel = noteModel;
this._topic = topic; this._topic = topic;
this._readOnly = readOnly; this._readOnly = readOnly;
this._registerEvents(); this._registerEvents();
}, }
_registerEvents() { _registerEvents() {
this._image.setCursor('pointer'); this._image.setCursor('pointer');
@ -55,7 +54,7 @@ const NoteIcon = new Class({
placement: 'bottom', placement: 'bottom',
destroyOnExit: true, destroyOnExit: true,
}); });
}, }
_buildTooltipContent() { _buildTooltipContent() {
if ($('body').find('#textPopoverNote').length === 1) { if ($('body').find('#textPopoverNote').length === 1) {
@ -72,12 +71,12 @@ const NoteIcon = new Class({
result.append(text); result.append(text);
return result; return result;
} }
}, }
getModel() { getModel() {
return this._linksModel; return this._linksModel;
}, }
}); }
NoteIcon.IMAGE_URL = 'images/notes.png'; NoteIcon.IMAGE_URL = 'images/notes.png';

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

@ -1,4 +1,4 @@
const Options = new Class({ class Options {
setOptions() { setOptions() {
const options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments)); const options = this.options = Object.merge.apply(null, [{}, this.options].append(arguments));
@ -10,8 +10,8 @@ const Options = new Class({
} }
} }
return this; return this;
}, }
}); }
export default Options; export default Options;

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

@ -18,8 +18,7 @@
import { $assert, innerXML } from '@wisemapping/core-js'; import { $assert, innerXML } from '@wisemapping/core-js';
import XMLSerializerFactory from './persistence/XMLSerializerFactory'; import XMLSerializerFactory from './persistence/XMLSerializerFactory';
const PersistenceManager = new Class({ class PersistenceManager {
initialize() { },
save(mindmap, editorProperties, saveHistory, events, sync) { save(mindmap, editorProperties, saveHistory, events, sync) {
$assert(mindmap, 'mindmap can not be null'); $assert(mindmap, 'mindmap can not be null');
@ -39,30 +38,30 @@ const PersistenceManager = new Class({
console.log(e); console.log(e);
events.onError(this._buildError()); events.onError(this._buildError());
} }
}, }
load(mapId) { load(mapId) {
$assert(mapId, 'mapId can not be null'); $assert(mapId, 'mapId can not be null');
const domDocument = this.loadMapDom(mapId); const domDocument = this.loadMapDom(mapId);
return PersistenceManager.loadFromDom(mapId, domDocument); return PersistenceManager.loadFromDom(mapId, domDocument);
}, }
discardChanges(mapId) { discardChanges(mapId) {
throw new Error('Method must be implemented'); throw new Error('Method must be implemented');
}, }
loadMapDom(mapId) { loadMapDom(mapId) {
throw new Error('Method must be implemented'); throw new Error('Method must be implemented');
}, }
saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) { saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
throw new Error('Method must be implemented'); throw new Error('Method must be implemented');
}, }
unlockMap(mindmap) { unlockMap(mindmap) {
throw new Error('Method must be implemented'); throw new Error('Method must be implemented');
}, }
}); }
PersistenceManager.init = function (instance) { PersistenceManager.init = function (instance) {
PersistenceManager._instance = instance; PersistenceManager._instance = instance;

68
packages/mindplot/src/components/Relationship.js
View File

@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import ConnectionLine from './ConnectionLine'; import ConnectionLine from './ConnectionLine';
@ -25,14 +25,12 @@ import INodeModel from './model/INodeModel';
import Shape from './util/Shape'; import Shape from './util/Shape';
const Relationship = new Class({ class Relationship extends ConnectionLine {
Extends: ConnectionLine, constructor(sourceNode, targetNode, model) {
initialize(sourceNode, targetNode, model) {
$assert(sourceNode, 'sourceNode can not be null'); $assert(sourceNode, 'sourceNode can not be null');
$assert(targetNode, 'targetNode 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); this.setModel(model);
const strokeColor = Relationship.getStrokeColor(); const strokeColor = Relationship.getStrokeColor();
@ -74,12 +72,12 @@ const Relationship = new Class({
const destPoint = model.getDestCtrlPoint().clone(); const destPoint = model.getDestCtrlPoint().clone();
this.setDestControlPoint(destPoint); this.setDestControlPoint(destPoint);
} }
}, }
setStroke(color, style, opacity) { setStroke(color, style, opacity) {
this.parent(color, style, opacity); this.parent(color, style, opacity);
this._startArrow.setStrokeColor(color); this._startArrow.setStrokeColor(color);
}, }
redraw() { redraw() {
const line2d = this._line2d; const line2d = this._line2d;
@ -134,7 +132,7 @@ const Relationship = new Class({
} }
this._focusShape.moveToBack(); this._focusShape.moveToBack();
this._controlPointsController.redraw(); this._controlPointsController.redraw();
}, }
_positionArrows() { _positionArrows() {
const tpos = this._line2d.getTo(); const tpos = this._line2d.getTo();
@ -165,7 +163,7 @@ const Relationship = new Class({
this._endArrow.setVisibility(this.isVisible()); this._endArrow.setVisibility(this.isVisible());
} }
this._startArrow.setVisibility(this.isVisible() && this._showStartArrow); this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
}, }
addToWorkspace(workspace) { addToWorkspace(workspace) {
workspace.append(this._focusShape); workspace.append(this._focusShape);
@ -181,11 +179,11 @@ const Relationship = new Class({
this.parent(workspace); this.parent(workspace);
this._positionArrows(); this._positionArrows();
this.redraw(); this.redraw();
}, }
_initializeControlPointController() { _initializeControlPointController() {
this.setOnFocus(true); this.setOnFocus(true);
}, }
removeFromWorkspace(workspace) { removeFromWorkspace(workspace) {
workspace.removeChild(this._focusShape); workspace.removeChild(this._focusShape);
@ -196,11 +194,11 @@ const Relationship = new Class({
if (this._endArrow) workspace.removeChild(this._endArrow); if (this._endArrow) workspace.removeChild(this._endArrow);
this.parent(workspace); this.parent(workspace);
}, }
getType() { getType() {
return Relationship.type; return Relationship.type;
}, }
setOnFocus(focus) { setOnFocus(focus) {
// Change focus shape // Change focus shape
@ -215,7 +213,7 @@ const Relationship = new Class({
this._onFocus = focus; this._onFocus = focus;
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this); this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
} }
}, }
_refreshShape() { _refreshShape() {
const sPos = this._line2d.getFrom(); const sPos = this._line2d.getFrom();
@ -229,7 +227,7 @@ const Relationship = new Class({
shapeCtrlPoints[1].x = ctrlPoints[1].x; shapeCtrlPoints[1].x = ctrlPoints[1].x;
shapeCtrlPoints[1].y = ctrlPoints[1].y; shapeCtrlPoints[1].y = ctrlPoints[1].y;
this._focusShape.updateLine(); this._focusShape.updateLine();
}, }
addEvent(type, listener) { addEvent(type, listener) {
// Translate to web 2d events ... // Translate to web 2d events ...
@ -239,37 +237,37 @@ const Relationship = new Class({
const line = this._line2d; const line = this._line2d;
line.addEvent(type, listener); line.addEvent(type, listener);
}, }
isOnFocus() { isOnFocus() {
return this._onFocus; return this._onFocus;
}, }
isInWorkspace() { isInWorkspace() {
return this._isInWorkspace; return this._isInWorkspace;
}, }
setVisibility(value) { setVisibility(value) {
this.parent(value); this.parent(value);
if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow); if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
this._startArrow.setVisibility(this._showStartArrow && value); this._startArrow.setVisibility(this._showStartArrow && value);
}, }
setOpacity(opacity) { setOpacity(opacity) {
this.parent(opacity); this.parent(opacity);
if (this._showEndArrow) this._endArrow.setOpacity(opacity); if (this._showEndArrow) this._endArrow.setOpacity(opacity);
if (this._showStartArrow) this._startArrow.setOpacity(opacity); if (this._showStartArrow) this._startArrow.setOpacity(opacity);
}, }
setShowEndArrow(visible) { setShowEndArrow(visible) {
this._showEndArrow = visible; this._showEndArrow = visible;
if (this._isInWorkspace) this.redraw(); if (this._isInWorkspace) this.redraw();
}, }
setShowStartArrow(visible) { setShowStartArrow(visible) {
this._showStartArrow = visible; this._showStartArrow = visible;
if (this._isInWorkspace) this.redraw(); if (this._isInWorkspace) this.redraw();
}, }
setFrom(x, y) { setFrom(x, y) {
$assert($defined(x), 'x must be defined'); $assert($defined(x), 'x must be defined');
@ -277,7 +275,7 @@ const Relationship = new Class({
this._line2d.setFrom(x, y); this._line2d.setFrom(x, y);
this._startArrow.setFrom(x, y); this._startArrow.setFrom(x, y);
}, }
setTo(x, y) { setTo(x, y) {
$assert($defined(x), 'x must be defined'); $assert($defined(x), 'x must be defined');
@ -285,47 +283,47 @@ const Relationship = new Class({
this._line2d.setTo(x, y); this._line2d.setTo(x, y);
if (this._endArrow) this._endArrow.setFrom(x, y); if (this._endArrow) this._endArrow.setFrom(x, y);
}, }
setSrcControlPoint(control) { setSrcControlPoint(control) {
this._line2d.setSrcControlPoint(control); this._line2d.setSrcControlPoint(control);
this._startArrow.setControlPoint(control); this._startArrow.setControlPoint(control);
}, }
setDestControlPoint(control) { setDestControlPoint(control) {
this._line2d.setDestControlPoint(control); this._line2d.setDestControlPoint(control);
if (this._showEndArrow) this._endArrow.setControlPoint(control); if (this._showEndArrow) this._endArrow.setControlPoint(control);
}, }
getControlPoints() { getControlPoints() {
return this._line2d.getControlPoints(); return this._line2d.getControlPoints();
}, }
isSrcControlPointCustom() { isSrcControlPointCustom() {
return this._line2d.isSrcControlPointCustom(); return this._line2d.isSrcControlPointCustom();
}, }
isDestControlPointCustom() { isDestControlPointCustom() {
return this._line2d.isDestControlPointCustom(); return this._line2d.isDestControlPointCustom();
}, }
setIsSrcControlPointCustom(isCustom) { setIsSrcControlPointCustom(isCustom) {
this._line2d.setIsSrcControlPointCustom(isCustom); this._line2d.setIsSrcControlPointCustom(isCustom);
}, }
setIsDestControlPointCustom(isCustom) { setIsDestControlPointCustom(isCustom) {
this._line2d.setIsDestControlPointCustom(isCustom); this._line2d.setIsDestControlPointCustom(isCustom);
}, }
getId() { getId() {
return this._model.getId(); return this._model.getId();
}, }
fireEvent(type, event) { fireEvent(type, event) {
const elem = this._line2d; const elem = this._line2d;
elem.trigger(type, event); elem.trigger(type, event);
}, }
}); }
Relationship.getStrokeColor = function getStrokeColor() { Relationship.getStrokeColor = function getStrokeColor() {
return '#9b74e6'; return '#9b74e6';

24
packages/mindplot/src/components/RelationshipPivot.js
View File

@ -15,14 +15,14 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import { $assert } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
import Relationship from './Relationship'; import Relationship from './Relationship';
import INodeModel from './model/INodeModel'; import INodeModel from './model/INodeModel';
import Shape from './util/Shape'; import Shape from './util/Shape';
const RelationshipPivot = new Class({ class RelationshipPivot {
initialize(workspace, designer) { constructor(workspace, designer) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
$assert(designer, 'designer can not be null'); $assert(designer, 'designer can not be null');
this._workspace = workspace; this._workspace = workspace;
@ -32,7 +32,7 @@ const RelationshipPivot = new Class({
this._mouseMoveEvent = this._mouseMove.bind(this); this._mouseMoveEvent = this._mouseMove.bind(this);
this._onClickEvent = this._cleanOnMouseClick.bind(this); this._onClickEvent = this._cleanOnMouseClick.bind(this);
this._onTopicClick = this._connectOnFocus.bind(this); this._onTopicClick = this._connectOnFocus.bind(this);
}, }
start(sourceTopic, targetPos) { start(sourceTopic, targetPos) {
$assert(sourceTopic, 'sourceTopic can not be null'); $assert(sourceTopic, 'sourceTopic can not be null');
@ -74,7 +74,7 @@ const RelationshipPivot = new Class({
topic.addEvent('ontfocus', this._onTopicClick); topic.addEvent('ontfocus', this._onTopicClick);
}); });
} }
}, }
dispose() { dispose() {
const workspace = this._workspace; const workspace = this._workspace;
@ -98,7 +98,7 @@ const RelationshipPivot = new Class({
this._pivot = null; this._pivot = null;
this._startArrow = null; this._startArrow = null;
} }
}, }
_mouseMove(event) { _mouseMove(event) {
const screen = this._workspace.getScreenManager(); const screen = this._workspace.getScreenManager();
@ -120,13 +120,13 @@ const RelationshipPivot = new Class({
event.stopPropagation(); event.stopPropagation();
return false; return false;
}, }
_cleanOnMouseClick(event) { _cleanOnMouseClick(event) {
// The user clicks on a desktop on in other element that is not a node. // The user clicks on a desktop on in other element that is not a node.
this.dispose(); this.dispose();
event.stopPropagation(); event.stopPropagation();
}, }
_calculateFromPosition(toPosition) { _calculateFromPosition(toPosition) {
// Calculate origin position ... // Calculate origin position ...
@ -140,7 +140,7 @@ const RelationshipPivot = new Class({
spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10); spoint.x = parseInt(controlPoint[0].x, 10) + parseInt(sourcePosition.x, 10);
spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10); spoint.y = parseInt(controlPoint[0].y, 10) + parseInt(sourcePosition.y, 10);
return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint); return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, spoint);
}, }
_connectOnFocus(event, targetTopic) { _connectOnFocus(event, targetTopic) {
const sourceTopic = this._sourceTopic; const sourceTopic = this._sourceTopic;
@ -152,11 +152,11 @@ const RelationshipPivot = new Class({
this._designer._actionDispatcher.addRelationship(relModel); this._designer._actionDispatcher.addRelationship(relModel);
} }
this.dispose(); this.dispose();
}, }
_isActive() { _isActive() {
return this._pivot != null; return this._pivot != null;
}, }
}); }
export default RelationshipPivot; export default RelationshipPivot;

37
packages/mindplot/src/components/RestPersistenceManager.js
View File

@ -18,9 +18,8 @@
import { $assert } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
import PersistenceManager from './PersistenceManager'; import PersistenceManager from './PersistenceManager';
const RESTPersistenceManager = new Class({ class RESTPersistenceManager extends PersistenceManager{
Extends: PersistenceManager, constructor(options) {
initialize(options) {
this.parent(); this.parent();
$assert(options.documentUrl, 'documentUrl can not be null'); $assert(options.documentUrl, 'documentUrl can not be null');
$assert(options.revertUrl, 'revertUrl 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.lockUrl = options.lockUrl;
this.timestamp = options.timestamp; this.timestamp = options.timestamp;
this.session = options.session; this.session = options.session;
}, }
saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) { saveMapXml(mapId, mapXml, pref, saveHistory, events, sync) {
const data = { const data = {
@ -53,7 +52,7 @@ const RESTPersistenceManager = new Class({
persistence.clearTimeout = setTimeout(() => { persistence.clearTimeout = setTimeout(() => {
persistence.clearTimeout = null; persistence.clearTimeout = null;
persistence.onSave = false; persistence.onSave = false;
}, 10000); } 10000);
$.ajax({ $.ajax({
url: `${this.documentUrl.replace('{id}', mapId)}?${query}`, url: `${this.documentUrl.replace('{id}', mapId)}?${query}`,
@ -66,17 +65,17 @@ const RESTPersistenceManager = new Class({
success(data, textStatus, jqXHRresponseText) { success(data, textStatus, jqXHRresponseText) {
persistence.timestamp = data; persistence.timestamp = data;
events.onSuccess(); events.onSuccess();
}, }
error(jqXHR, textStatus, errorThrown) { error(jqXHR, textStatus, errorThrown) {
events.onError(persistence._buildError()); events.onError(persistence._buildError());
}, }
complete() { complete() {
// Clear event timeout ... // Clear event timeout ...
if (persistence.clearTimeout) { if (persistence.clearTimeout) {
clearTimeout(persistence.clearTimeout); clearTimeout(persistence.clearTimeout);
} }
persistence.onSave = false; persistence.onSave = false;
}, }
fail(xhr, textStatus) { fail(xhr, textStatus) {
const { responseText } = xhr; const { responseText } = xhr;
let userMsg = { severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED') }; let userMsg = { severity: 'SEVERE', message: $msg('SAVE_COULD_NOT_BE_COMPLETED') };
@ -96,19 +95,19 @@ const RESTPersistenceManager = new Class({
} }
events.onError(userMsg); events.onError(userMsg);
persistence.onSave = false; persistence.onSave = false;
}, }
}); });
} }
}, }
discardChanges(mapId) { discardChanges(mapId) {
$.ajax({ $.ajax({
url: this.revertUrl.replace('{id}', mapId), url: this.revertUrl.replace('{id}', mapId),
async: false, async: false,
method: 'post', 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) { unlockMap(mindmap) {
const mapId = mindmap.getId(); const mapId = mindmap.getId();
@ -116,10 +115,10 @@ const RESTPersistenceManager = new Class({
url: this.lockUrl.replace('{id}', mapId), url: this.lockUrl.replace('{id}', mapId),
async: false, async: false,
method: 'put', method: 'put',
headers: { 'Content-Type': 'text/plain' }, headers: { 'Content-Type': 'text/plain' }
data: 'false', data: 'false',
}); });
}, }
_buildError(jsonSeverResponse) { _buildError(jsonSeverResponse) {
let message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null; let message = jsonSeverResponse ? jsonSeverResponse.globalErrors[0] : null;
@ -133,7 +132,7 @@ const RESTPersistenceManager = new Class({
severity = 'INFO'; severity = 'INFO';
} }
return { severity, message }; return { severity, message };
}, }
loadMapDom(mapId) { loadMapDom(mapId) {
// Let's try to open one from the local directory ... // 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`, url: `${this.documentUrl.replace('{id}', mapId)}/xml`,
method: 'get', method: 'get',
async: false, async: false,
headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' }, headers: { 'Content-Type': 'text/plain', Accept: 'application/xml' }
success(responseText) { success(responseText) {
xml = responseText; xml = responseText;
}, }
}); });
// If I could not load it from a file, hard code one. // If I could not load it from a file, hard code one.
@ -154,7 +153,7 @@ const RESTPersistenceManager = new Class({
} }
return xml; return xml;
}, }
}); }
export default RESTPersistenceManager; export default RESTPersistenceManager;

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

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
class ScreenManager { class ScreenManager {
constructor(divElement) { constructor(divElement) {

28
packages/mindplot/src/components/ShrinkConnector.js
View File

@ -15,13 +15,13 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
const ShirinkConnector = new Class({ class ShirinkConnector {
initialize(topic) { constructor(topic) {
const ellipse = new web2d.Elipse(TopicConfig.INNER_RECT_ATTRIBUTES); const ellipse = new web2d.Elipse(TopicConfig.INNER_RECT_ATTRIBUTES);
this._ellipse = ellipse; this._ellipse = ellipse;
ellipse.setFill('rgb(62,118,179)'); ellipse.setFill('rgb(62,118,179)');
@ -61,7 +61,7 @@ const ShirinkConnector = new Class({
this._fillColor = '#f7f7f7'; this._fillColor = '#f7f7f7';
const model = topic.getModel(); const model = topic.getModel();
this.changeRender(model.areChildrenShrunken()); this.changeRender(model.areChildrenShrunken());
}, }
changeRender(isShrink) { changeRender(isShrink) {
const elipse = this._ellipse; const elipse = this._ellipse;
@ -70,40 +70,40 @@ const ShirinkConnector = new Class({
} else { } else {
elipse.setStroke('1', 'solid'); elipse.setStroke('1', 'solid');
} }
}, }
setVisibility(value) { setVisibility(value) {
this._ellipse.setVisibility(value); this._ellipse.setVisibility(value);
}, }
setOpacity(opacity) { setOpacity(opacity) {
this._ellipse.setOpacity(opacity); this._ellipse.setOpacity(opacity);
}, }
setFill(color) { setFill(color) {
this._fillColor = color; this._fillColor = color;
this._ellipse.setFill(color); this._ellipse.setFill(color);
}, }
setAttribute(name, value) { setAttribute(name, value) {
this._ellipse.setAttribute(name, value); this._ellipse.setAttribute(name, value);
}, }
addToWorkspace(group) { addToWorkspace(group) {
group.append(this._ellipse); group.append(this._ellipse);
}, }
setPosition(x, y) { setPosition(x, y) {
this._ellipse.setPosition(x, y); this._ellipse.setPosition(x, y);
}, }
moveToBack() { moveToBack() {
this._ellipse.moveToBack(); this._ellipse.moveToBack();
}, }
moveToFront() { moveToFront() {
this._ellipse.moveToFront(); this._ellipse.moveToFront();
}, }
}); }
export default ShirinkConnector; export default ShirinkConnector;

38
packages/mindplot/src/components/TextEditor.js
View File

@ -13,14 +13,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
// FIXME: Not used! // FIXME: Not used!
const TextEditor = new Class({ class TextEditor {
initialize(topic) { constructor(topic) {
this._topic = topic; this._topic = topic;
}, }
_buildEditor() { _buildEditor() {
this._size = { width: 500, height: 100 }; this._size = { width: 500, height: 100 };
@ -61,7 +61,7 @@ const TextEditor = new Class({
spanElem.inject(spanContainer); spanElem.inject(spanContainer);
return result; return result;
}, }
_registerEvents(divElem) { _registerEvents(divElem) {
const inputElem = this._getTextareaElem(); const inputElem = this._getTextareaElem();
@ -99,11 +99,11 @@ const TextEditor = new Class({
divElem.addEvent('mousedown', (event) => { divElem.addEvent('mousedown', (event) => {
event.stopPropagation(); event.stopPropagation();
}); });
}, }
isVisible() { isVisible() {
return $defined(this._containerElem) && this._containerElem.getStyle('display') === 'block'; return $defined(this._containerElem) && this._containerElem.getStyle('display') === 'block';
}, }
_updateModel() { _updateModel() {
if (this._topic.getText() !== this._getText()) { if (this._topic.getText() !== this._getText()) {
@ -113,7 +113,7 @@ const TextEditor = new Class({
const actionDispatcher = ActionDispatcher.getInstance(); const actionDispatcher = ActionDispatcher.getInstance();
actionDispatcher.changeTextToTopic([topicId], text); actionDispatcher.changeTextToTopic([topicId], text);
} }
}, }
show(text) { show(text) {
if (!this.isVisible()) { if (!this.isVisible()) {
@ -125,7 +125,7 @@ const TextEditor = new Class({
this._registerEvents(editorElem); this._registerEvents(editorElem);
this._showEditor(text); this._showEditor(text);
} }
}, }
_showEditor(defaultText) { _showEditor(defaultText) {
const topic = this._topic; const topic = this._topic;
@ -163,7 +163,7 @@ const TextEditor = new Class({
}; };
displayFunc.delay(10); displayFunc.delay(10);
}, }
_setStyle(fontStyle) { _setStyle(fontStyle) {
const inputField = this._getTextareaElem(); const inputField = this._getTextareaElem();
@ -189,7 +189,7 @@ const TextEditor = new Class({
spanField.style.fontStyle = fontStyle.style; spanField.style.fontStyle = fontStyle.style;
spanField.style.fontWeight = fontStyle.weight; spanField.style.fontWeight = fontStyle.weight;
spanField.style.fontSize = `${fontStyle.size}px`; spanField.style.fontSize = `${fontStyle.size}px`;
}, }
_setText(text) { _setText(text) {
const inputField = this._getTextareaElem(); const inputField = this._getTextareaElem();
@ -200,19 +200,19 @@ const TextEditor = new Class({
const spanField = this._getSpanElem(); const spanField = this._getSpanElem();
spanField.innerHTML = text; spanField.innerHTML = text;
inputField.value = text; inputField.value = text;
}, }
_getText() { _getText() {
return this._getTextareaElem().value; return this._getTextareaElem().value;
}, }
_getTextareaElem() { _getTextareaElem() {
return this._containerElem.getElement('input'); return this._containerElem.getElement('input');
}, }
_getSpanElem() { _getSpanElem() {
return this._containerElem.getElement('span'); return this._containerElem.getElement('span');
}, }
_setEditorSize(width, height) { _setEditorSize(width, height) {
const textShape = this._topic.getTextShape(); const textShape = this._topic.getTextShape();
@ -220,7 +220,7 @@ const TextEditor = new Class({
this._size = { width: width * scale.width, height: height * scale.height }; this._size = { width: width * scale.width, height: height * scale.height };
this._containerElem.style.width = `${this._size.width * 2}px`; this._containerElem.style.width = `${this._size.width * 2}px`;
this._containerElem.style.height = `${this._size.height}px`; this._containerElem.style.height = `${this._size.height}px`;
}, }
_positionCursor(inputElem, selectText) { _positionCursor(inputElem, selectText) {
// Select text if it's required ... // Select text if it's required ...
@ -238,7 +238,7 @@ const TextEditor = new Class({
} else if (!selectText) { } else if (!selectText) {
inputElem.setSelectionRange(0, inputElem.value.length); inputElem.setSelectionRange(0, inputElem.value.length);
} }
}, }
close(update) { close(update) {
if (this.isVisible()) { if (this.isVisible()) {
@ -254,7 +254,7 @@ const TextEditor = new Class({
this._containerElem.dispose(); this._containerElem.dispose();
this._containerElem = null; this._containerElem = null;
} }
}, }
}); }
export default TextEditor; export default TextEditor;

189
packages/mindplot/src/components/Topic.js
View File

@ -17,7 +17,7 @@
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import { _ } from '@libraries/underscore-min'; import { _ } from '@libraries/underscore-min';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import NodeGraph from './NodeGraph'; import NodeGraph from './NodeGraph';
import TopicConfig from './TopicConfig'; import TopicConfig from './TopicConfig';
@ -34,17 +34,15 @@ import LinkEditor from './widget/LinkEditor';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import INodeModel, { TopicShape } from './model/INodeModel'; import INodeModel, { TopicShape } from './model/INodeModel';
const Topic = new Class( class Topic extends NodeGraph {
/** @lends Topic */ {
Extends: NodeGraph,
/** /**
* @extends mindplot.NodeGraph * @extends mindplot.NodeGraph
* @constructs * @constructs
* @param model * @param model
* @param options * @param options
*/ */
initialize(model, options) { constructor(model, options) {
this.parent(model, options); super(model, options);
this._children = []; this._children = [];
this._parent = null; this._parent = null;
this._relationships = []; this._relationships = [];
@ -61,7 +59,7 @@ const Topic = new Class(
if (!this.isReadOnly()) { if (!this.isReadOnly()) {
this._registerEvents(); this._registerEvents();
} }
}, }
_registerEvents() { _registerEvents() {
this.setMouseEventsEnabled(true); this.setMouseEventsEnabled(true);
@ -75,7 +73,7 @@ const Topic = new Class(
me._getTopicEventDispatcher().show(me); me._getTopicEventDispatcher().show(me);
event.stopPropagation(); event.stopPropagation();
}); });
}, }
/** /**
* @param {String} type the topic shape type * @param {String} type the topic shape type
@ -83,12 +81,12 @@ const Topic = new Class(
*/ */
setShapeType(type) { setShapeType(type) {
this._setShapeType(type, true); this._setShapeType(type, true);
}, }
/** @return {mindplot.Topic} parent topic */ /** @return {mindplot.Topic} parent topic */
getParent() { getParent() {
return this._parent; return this._parent;
}, }
_setShapeType(type, updateModel) { _setShapeType(type, updateModel) {
// Remove inner shape figure ... // Remove inner shape figure ...
@ -127,7 +125,7 @@ const Topic = new Class(
connector.moveToFront(); connector.moveToFront();
} }
} }
}, }
/** @return {String} topic shape type */ /** @return {String} topic shape type */
getShapeType() { getShapeType() {
@ -137,7 +135,7 @@ const Topic = new Class(
result = TopicStyle.defaultShapeType(this); result = TopicStyle.defaultShapeType(this);
} }
return result; return result;
}, }
_removeInnerShape() { _removeInnerShape() {
const group = this.get2DElement(); const group = this.get2DElement();
@ -145,7 +143,7 @@ const Topic = new Class(
group.removeChild(innerShape); group.removeChild(innerShape);
this._innerShape = null; this._innerShape = null;
return innerShape; return innerShape;
}, }
/** @return {web2d.Line|web2d.Rect|web2d.Image} inner shape of the topic */ /** @return {web2d.Line|web2d.Rect|web2d.Image} inner shape of the topic */
getInnerShape() { getInnerShape() {
@ -172,7 +170,7 @@ const Topic = new Class(
} }
} }
return this._innerShape; return this._innerShape;
}, }
_buildShape(attributes, shapeType) { _buildShape(attributes, shapeType) {
$assert(attributes, 'attributes can not be null'); $assert(attributes, 'attributes can not be null');
@ -225,7 +223,7 @@ const Topic = new Class(
} }
result.setPosition(0, 0); result.setPosition(0, 0);
return result; return result;
}, }
/** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */ /** @param {String} type the cursor type, either 'pointer', 'default' or 'move' */
setCursor(type) { setCursor(type) {
@ -237,7 +235,7 @@ const Topic = new Class(
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setCursor(type); textShape.setCursor(type);
}, }
/** @return outer shape */ /** @return outer shape */
getOuterShape() { getOuterShape() {
@ -252,7 +250,7 @@ const Topic = new Class(
} }
return this._outerShape; return this._outerShape;
}, }
/** @return text shape */ /** @return text shape */
getTextShape() { getTextShape() {
@ -265,7 +263,7 @@ const Topic = new Class(
} }
return this._text; return this._text;
}, }
/** @return icon group */ /** @return icon group */
getOrBuildIconGroup() { getOrBuildIconGroup() {
@ -276,12 +274,12 @@ const Topic = new Class(
this._iconsGroup.moveToFront(); this._iconsGroup.moveToFront();
} }
return this._iconsGroup; return this._iconsGroup;
}, }
/** */ /** */
getIconGroup() { getIconGroup() {
return this._iconsGroup; return this._iconsGroup;
}, }
_buildIconGroup() { _buildIconGroup() {
const textHeight = this.getTextShape().getFontHeight(); const textHeight = this.getTextShape().getFontHeight();
@ -302,7 +300,7 @@ const Topic = new Class(
} }
return result; return result;
}, }
/** /**
* assigns the new feature model to the topic's node model and adds the respective icon * assigns the new feature model to the topic's node model and adds the respective icon
@ -325,13 +323,13 @@ const Topic = new Class(
this._adjustShapes(); this._adjustShapes();
return result; return result;
}, }
/** */ /** */
findFeatureById(id) { findFeatureById(id) {
const model = this.getModel(); const model = this.getModel();
return model.findFeatureById(id); return model.findFeatureById(id);
}, }
/** */ /** */
removeFeature(featureModel) { removeFeature(featureModel) {
@ -347,22 +345,22 @@ const Topic = new Class(
iconGroup.removeIconByModel(featureModel); iconGroup.removeIconByModel(featureModel);
} }
this._adjustShapes(); this._adjustShapes();
}, }
/** */ /** */
addRelationship(relationship) { addRelationship(relationship) {
this._relationships.push(relationship); this._relationships.push(relationship);
}, }
/** */ /** */
deleteRelationship(relationship) { deleteRelationship(relationship) {
this._relationships.erase(relationship); this._relationships.erase(relationship);
}, }
/** */ /** */
getRelationships() { getRelationships() {
return this._relationships; return this._relationships;
}, }
_buildTextShape(readOnly) { _buildTextShape(readOnly) {
const result = new web2d.Text(); const result = new web2d.Text();
@ -385,7 +383,7 @@ const Topic = new Class(
} }
return result; return result;
}, }
/** */ /** */
setFontFamily(value, updateModel) { setFontFamily(value, updateModel) {
@ -396,7 +394,7 @@ const Topic = new Class(
model.setFontFamily(value); model.setFontFamily(value);
} }
this._adjustShapes(updateModel); this._adjustShapes(updateModel);
}, }
/** */ /** */
setFontSize(value, updateModel) { setFontSize(value, updateModel) {
@ -408,7 +406,7 @@ const Topic = new Class(
model.setFontSize(value); model.setFontSize(value);
} }
this._adjustShapes(updateModel); this._adjustShapes(updateModel);
}, }
/** */ /** */
setFontStyle(value, updateModel) { setFontStyle(value, updateModel) {
@ -419,7 +417,7 @@ const Topic = new Class(
model.setFontStyle(value); model.setFontStyle(value);
} }
this._adjustShapes(updateModel); this._adjustShapes(updateModel);
}, }
/** */ /** */
setFontWeight(value, updateModel) { setFontWeight(value, updateModel) {
@ -430,7 +428,7 @@ const Topic = new Class(
model.setFontWeight(value); model.setFontWeight(value);
} }
this._adjustShapes(); this._adjustShapes();
}, }
/** */ /** */
getFontWeight() { getFontWeight() {
@ -441,7 +439,7 @@ const Topic = new Class(
result = font.weight; result = font.weight;
} }
return result; return result;
}, }
/** */ /** */
getFontFamily() { getFontFamily() {
@ -452,7 +450,7 @@ const Topic = new Class(
result = font.font; result = font.font;
} }
return result; return result;
}, }
/** */ /** */
getFontColor() { getFontColor() {
@ -463,7 +461,7 @@ const Topic = new Class(
result = font.color; result = font.color;
} }
return result; return result;
}, }
/** */ /** */
getFontStyle() { getFontStyle() {
@ -474,7 +472,7 @@ const Topic = new Class(
result = font.style; result = font.style;
} }
return result; return result;
}, }
/** */ /** */
getFontSize() { getFontSize() {
@ -485,7 +483,7 @@ const Topic = new Class(
result = font.size; result = font.size;
} }
return result; return result;
}, }
/** */ /** */
setFontColor(value, updateModel) { setFontColor(value, updateModel) {
@ -495,7 +493,7 @@ const Topic = new Class(
const model = this.getModel(); const model = this.getModel();
model.setFontColor(value); model.setFontColor(value);
} }
}, }
_setText(text, updateModel) { _setText(text, updateModel) {
const textShape = this.getTextShape(); const textShape = this.getTextShape();
@ -505,7 +503,7 @@ const Topic = new Class(
const model = this.getModel(); const model = this.getModel();
model.setText(text); model.setText(text);
} }
}, }
/** */ /** */
setText(text) { setText(text) {
@ -516,7 +514,7 @@ const Topic = new Class(
this._setText(text, true); this._setText(text, true);
this._adjustShapes(); this._adjustShapes();
}, }
/** */ /** */
getText() { getText() {
@ -526,12 +524,12 @@ const Topic = new Class(
result = TopicStyle.defaultText(this); result = TopicStyle.defaultText(this);
} }
return result; return result;
}, }
/** */ /** */
setBackgroundColor(color) { setBackgroundColor(color) {
this._setBackgroundColor(color, true); this._setBackgroundColor(color, true);
}, }
_setBackgroundColor(color, updateModel) { _setBackgroundColor(color, updateModel) {
const innerShape = this.getInnerShape(); const innerShape = this.getInnerShape();
@ -546,7 +544,7 @@ const Topic = new Class(
const model = this.getModel(); const model = this.getModel();
model.setBackgroundColor(color); model.setBackgroundColor(color);
} }
}, }
/** */ /** */
getBackgroundColor() { getBackgroundColor() {
@ -556,12 +554,12 @@ const Topic = new Class(
result = TopicStyle.defaultBackgroundColor(this); result = TopicStyle.defaultBackgroundColor(this);
} }
return result; return result;
}, }
/** */ /** */
setBorderColor(color) { setBorderColor(color) {
this._setBorderColor(color, true); this._setBorderColor(color, true);
}, }
_setBorderColor(color, updateModel) { _setBorderColor(color, updateModel) {
const innerShape = this.getInnerShape(); const innerShape = this.getInnerShape();
@ -576,7 +574,7 @@ const Topic = new Class(
const model = this.getModel(); const model = this.getModel();
model.setBorderColor(color); model.setBorderColor(color);
} }
}, }
/** */ /** */
getBorderColor() { getBorderColor() {
@ -586,7 +584,7 @@ const Topic = new Class(
result = TopicStyle.defaultBorderColor(this); result = TopicStyle.defaultBorderColor(this);
} }
return result; return result;
}, }
_buildTopicShape() { _buildTopicShape() {
const groupAttributes = { const groupAttributes = {
@ -621,7 +619,7 @@ const Topic = new Class(
// Register listeners ... // Register listeners ...
this._registerDefaultListenersToElement(group, this); this._registerDefaultListenersToElement(group, this);
}, }
_registerDefaultListenersToElement(elem, topic) { _registerDefaultListenersToElement(elem, topic) {
const mouseOver = function (event) { const mouseOver = function (event) {
@ -659,13 +657,13 @@ const Topic = new Class(
eventDispatcher.process(TopicEvent.CLICK, me); eventDispatcher.process(TopicEvent.CLICK, me);
event.stopPropagation(); event.stopPropagation();
}); });
}, }
/** */ /** */
areChildrenShrunken() { areChildrenShrunken() {
const model = this.getModel(); const model = this.getModel();
return model.areChildrenShrunken() && !this.isCentralTopic(); return model.areChildrenShrunken() && !this.isCentralTopic();
}, }
/** */ /** */
isCollapsed() { isCollapsed() {
@ -677,7 +675,7 @@ const Topic = new Class(
current = current.getParent(); current = current.getParent();
} }
return result; return result;
}, }
/** */ /** */
setChildrenShrunken(value) { setChildrenShrunken(value) {
@ -711,7 +709,7 @@ const Topic = new Class(
fade.start(); fade.start();
EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model); EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model);
}, }
/** */ /** */
getShrinkConnector() { getShrinkConnector() {
@ -722,13 +720,13 @@ const Topic = new Class(
result = this._connector; result = this._connector;
} }
return result; return result;
}, }
/** */ /** */
handleMouseOver() { handleMouseOver() {
const outerShape = this.getOuterShape(); const outerShape = this.getOuterShape();
outerShape.setOpacity(1); outerShape.setOpacity(1);
}, }
/** */ /** */
handleMouseOut() { handleMouseOut() {
@ -736,12 +734,12 @@ const Topic = new Class(
if (!this.isOnFocus()) { if (!this.isOnFocus()) {
outerShape.setOpacity(0); outerShape.setOpacity(0);
} }
}, }
/** */ /** */
showTextEditor(text) { showTextEditor(text) {
this._getTopicEventDispatcher().show(this, { text }); this._getTopicEventDispatcher().show(this, { text });
}, }
/** */ /** */
showNoteEditor() { showNoteEditor() {
@ -771,12 +769,12 @@ const Topic = new Class(
text: value, text: value,
}); });
} }
}, }
}; };
const editor = new NoteEditor(editorModel); const editor = new NoteEditor(editorModel);
this.closeEditors(); this.closeEditors();
editor.show(); editor.show();
}, }
/** opens a dialog where the user can enter or edit an existing link associated with this topic */ /** opens a dialog where the user can enter or edit an existing link associated with this topic */
showLinkEditor() { showLinkEditor() {
@ -807,22 +805,22 @@ const Topic = new Class(
url: value, url: value,
}); });
} }
}, }
}; };
this.closeEditors(); this.closeEditors();
const editor = new LinkEditor(editorModel); const editor = new LinkEditor(editorModel);
editor.show(); editor.show();
}, }
/** */ /** */
closeEditors() { closeEditors() {
this._getTopicEventDispatcher().close(true); this._getTopicEventDispatcher().close(true);
}, }
_getTopicEventDispatcher() { _getTopicEventDispatcher() {
return TopicEventDispatcher.getInstance(); return TopicEventDispatcher.getInstance();
}, }
/** /**
* Point: references the center of the rect shape.!!! * Point: references the center of the rect shape.!!!
@ -851,12 +849,12 @@ const Topic = new Class(
// Check object state. // Check object state.
this.invariant(); this.invariant();
}, }
/** */ /** */
getOutgoingLine() { getOutgoingLine() {
return this._outgoingLine; return this._outgoingLine;
}, }
/** */ /** */
getIncomingLines() { getIncomingLines() {
@ -870,7 +868,7 @@ const Topic = new Class(
} }
} }
return result; return result;
}, }
/** */ /** */
getOutgoingConnectedTopic() { getOutgoingConnectedTopic() {
@ -880,7 +878,7 @@ const Topic = new Class(
result = line.getTargetTopic(); result = line.getTargetTopic();
} }
return result; return result;
}, }
_updateConnectionLines() { _updateConnectionLines() {
// Update this to parent line ... // Update this to parent line ...
@ -899,7 +897,7 @@ const Topic = new Class(
for (let j = 0; j < this._relationships.length; j++) { for (let j = 0; j < this._relationships.length; j++) {
this._relationships[j].redraw(); this._relationships[j].redraw();
} }
}, }
/** */ /** */
setBranchVisibility(value) { setBranchVisibility(value) {
@ -910,7 +908,7 @@ const Topic = new Class(
parent = current.getParent(); parent = current.getParent();
} }
current.setVisibility(value); current.setVisibility(value);
}, }
/** */ /** */
setVisibility(value) { setVisibility(value) {
@ -927,7 +925,7 @@ const Topic = new Class(
if (outgoingLine) { if (outgoingLine) {
outgoingLine.setVisibility(value); outgoingLine.setVisibility(value);
} }
}, }
/** */ /** */
moveToBack() { moveToBack() {
@ -941,7 +939,7 @@ const Topic = new Class(
} }
this.get2DElement().moveToBack(); this.get2DElement().moveToBack();
}, }
/** */ /** */
moveToFront() { moveToFront() {
@ -954,13 +952,13 @@ const Topic = new Class(
for (let j = 0; j < this._relationships.length; j++) { for (let j = 0; j < this._relationships.length; j++) {
this._relationships[j].moveToFront(); this._relationships[j].moveToFront();
} }
}, }
/** */ /** */
isVisible() { isVisible() {
const elem = this.get2DElement(); const elem = this.get2DElement();
return elem.isVisible(); return elem.isVisible();
}, }
_setRelationshipLinesVisibility(value) { _setRelationshipLinesVisibility(value) {
_.each(this._relationships, (relationship) => { _.each(this._relationships, (relationship) => {
@ -975,7 +973,7 @@ const Topic = new Class(
&& (sourceParent == null || !sourceParent.areChildrenShrunken()), && (sourceParent == null || !sourceParent.areChildrenShrunken()),
); );
}); });
}, }
_setTopicVisibility(value) { _setTopicVisibility(value) {
const elem = this.get2DElement(); const elem = this.get2DElement();
@ -990,7 +988,7 @@ const Topic = new Class(
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setVisibility(this.getShapeType() != TopicShape.IMAGE ? value : false); textShape.setVisibility(this.getShapeType() != TopicShape.IMAGE ? value : false);
}, }
/** */ /** */
setOpacity(opacity) { setOpacity(opacity) {
@ -1003,7 +1001,7 @@ const Topic = new Class(
} }
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setOpacity(opacity); textShape.setOpacity(opacity);
}, }
_setChildrenVisibility(isVisible) { _setChildrenVisibility(isVisible) {
// Hide all children. // Hide all children.
@ -1018,7 +1016,7 @@ const Topic = new Class(
const outgoingLine = child.getOutgoingLine(); const outgoingLine = child.getOutgoingLine();
outgoingLine.setVisibility(isVisible); outgoingLine.setVisibility(isVisible);
} }
}, }
/** */ /** */
invariant() { invariant() {
@ -1030,7 +1028,7 @@ const Topic = new Class(
if ((isConnected && !line) || (!isConnected && line)) { if ((isConnected && !line) || (!isConnected && line)) {
// $assert(false,'Illegal state exception.'); // $assert(false,'Illegal state exception.');
} }
}, }
/** */ /** */
setSize(size, force) { setSize(size, force) {
@ -1059,11 +1057,11 @@ const Topic = new Class(
}); });
} }
} }
}, }
_updatePositionOnChangeSize() { _updatePositionOnChangeSize() {
$assert(false, 'this method must be overwrited.'); $assert(false, 'this method must be overwrited.');
}, }
/** */ /** */
disconnect(workspace) { disconnect(workspace) {
@ -1108,19 +1106,19 @@ const Topic = new Class(
} }
} }
} }
}, }
/** */ /** */
getOrder() { getOrder() {
const model = this.getModel(); const model = this.getModel();
return model.getOrder(); return model.getOrder();
}, }
/** */ /** */
setOrder(value) { setOrder(value) {
const model = this.getModel(); const model = this.getModel();
model.setOrder(value); model.setOrder(value);
}, }
/** */ /** */
connectTo(targetTopic, workspace) { connectTo(targetTopic, workspace) {
@ -1176,19 +1174,19 @@ const Topic = new Class(
childNode: this.getModel(), childNode: this.getModel(),
}); });
} }
}, }
/** */ /** */
append(child) { append(child) {
const children = this.getChildren(); const children = this.getChildren();
children.push(child); children.push(child);
}, }
/** */ /** */
removeChild(child) { removeChild(child) {
const children = this.getChildren(); const children = this.getChildren();
children.erase(child); children.erase(child);
}, }
/** */ /** */
getChildren() { getChildren() {
@ -1198,7 +1196,7 @@ const Topic = new Class(
result = this._children; result = this._children;
} }
return result; return result;
}, }
/** */ /** */
removeFromWorkspace(workspace) { removeFromWorkspace(workspace) {
@ -1210,7 +1208,7 @@ const Topic = new Class(
} }
this._isInWorkspace = false; this._isInWorkspace = false;
EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel()); EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
}, }
/** */ /** */
addToWorkspace(workspace) { addToWorkspace(workspace) {
@ -1230,12 +1228,12 @@ const Topic = new Class(
} }
this._isInWorkspace = true; this._isInWorkspace = true;
this._adjustShapes(); this._adjustShapes();
}, }
/** */ /** */
isInWorkspace() { isInWorkspace() {
return this._isInWorkspace; return this._isInWorkspace;
}, }
/** */ /** */
createDragNode(layoutManager) { createDragNode(layoutManager) {
@ -1252,7 +1250,7 @@ const Topic = new Class(
this._getTopicEventDispatcher().close(); this._getTopicEventDispatcher().close();
return result; return result;
}, }
_adjustShapes() { _adjustShapes() {
if (this._isInWorkspace) { if (this._isInWorkspace) {
@ -1290,7 +1288,7 @@ const Topic = new Class(
this.setSize(size); this.setSize(size);
} }
} }
}, }
_flatten2DElements(topic) { _flatten2DElements(topic) {
let result = []; let result = [];
@ -1310,7 +1308,7 @@ const Topic = new Class(
} }
} }
return result; return result;
}, }
/** /**
* @param childTopic * @param childTopic
@ -1329,13 +1327,12 @@ const Topic = new Class(
} }
} }
return result; return result;
}, }
/** @return {Boolean} true if the topic is the central topic of the map */ /** @return {Boolean} true if the topic is the central topic of the map */
isCentralTopic() { isCentralTopic() {
return this.getModel().getType() == INodeModel.CENTRAL_TOPIC_TYPE; return this.getModel().getType() == INodeModel.CENTRAL_TOPIC_TYPE;
}, }
}, }
);
export default Topic; export default Topic;

20
packages/mindplot/src/components/TopicEventDispatcher.js
View File

@ -25,25 +25,25 @@ const TopicEvent = {
CLICK: 'clicknode', CLICK: 'clicknode',
}; };
const TopicEventDispatcher = new Class({ class TopicEventDispatcher extends Events {
Extends: Events, constructor(readOnly)
{
initialize(readOnly) { super();
this._readOnly = readOnly; this._readOnly = readOnly;
this._activeEditor = null; this._activeEditor = null;
this._multilineEditor = new MultilineTextEditor(); this._multilineEditor = new MultilineTextEditor();
}, }
close(update) { close(update) {
if (this.isVisible()) { if (this.isVisible()) {
this._activeEditor.close(update); this._activeEditor.close(update);
this._activeEditor = null; this._activeEditor = null;
} }
}, }
show(topic, options) { show(topic, options) {
this.process(TopicEvent.EDIT, topic, options); this.process(TopicEvent.EDIT, topic, options);
}, }
process(eventType, topic, options) { process(eventType, topic, options) {
$assert(eventType, 'eventType can not be null'); $assert(eventType, 'eventType can not be null');
@ -65,12 +65,12 @@ const TopicEventDispatcher = new Class({
} else { } else {
this.fireEvent(eventType, { model, readOnly: this._readOnly }); this.fireEvent(eventType, { model, readOnly: this._readOnly });
} }
}, }
isVisible() { isVisible() {
return this._activeEditor != null && this._activeEditor.isVisible(); return this._activeEditor != null && this._activeEditor.isVisible();
}, }
}); }
TopicEventDispatcher._instance = null; TopicEventDispatcher._instance = null;

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

@ -18,9 +18,8 @@
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import { TopicShape } from './model/INodeModel'; import { TopicShape } from './model/INodeModel';
const TopicStyle = new Class({}); class TopicStyle {
static _getStyles(topic) {
TopicStyle._getStyles = function _getStyles(topic) {
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
let result; let result;
@ -39,32 +38,33 @@ TopicStyle._getStyles = function _getStyles(topic) {
} }
} }
return result; return result;
}; }
TopicStyle.defaultText = function defaultText(topic) { static defaultText(topic) {
const { msgKey } = this._getStyles(topic); const { msgKey } = this._getStyles(topic);
return $msg(msgKey); return $msg(msgKey);
}; }
TopicStyle.defaultFontStyle = function defaultFontStyle(topic) { static defaultFontStyle(topic) {
return this._getStyles(topic).fontStyle; return this._getStyles(topic).fontStyle;
}; }
TopicStyle.defaultBackgroundColor = function defaultBackgroundColor(topic) { static defaultBackgroundColor(topic) {
return this._getStyles(topic).backgroundColor; return this._getStyles(topic).backgroundColor;
}; }
TopicStyle.defaultBorderColor = function defaultBorderColor(topic) { static defaultBorderColor(topic) {
return this._getStyles(topic).borderColor; return this._getStyles(topic).borderColor;
}; }
TopicStyle.getInnerPadding = function getInnerPadding(topic) { static getInnerPadding(topic) {
return this._getStyles(topic).innerPadding; return this._getStyles(topic).innerPadding;
}; }
TopicStyle.defaultShapeType = function defaultShapeType(topic) { static defaultShapeType(topic) {
return this._getStyles(topic).shapeType; return this._getStyles(topic).shapeType;
}; }
}
TopicStyle.STYLES = { TopicStyle.STYLES = {
CENTRAL_TOPIC: { CENTRAL_TOPIC: {

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

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
class Workspace { class Workspace {
constructor(screenManager, zoom) { constructor(screenManager, zoom) {

17
packages/mindplot/src/components/commands/AddFeatureToTopicCommand.js
View File

@ -17,9 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const AddFeatureToTopicCommand = new Class( class AddFeatureToTopicCommand extends Command {
/** @lends AddFeatureToTopicCommand */ {
Extends: Command,
/* /*
* @classdesc This command class handles do/undo of adding features to topics, e.g. an * @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} * icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
@ -30,17 +28,17 @@ const AddFeatureToTopicCommand = new Class(
* @extends mindplot.Command * @extends mindplot.Command
* @see mindplot.model.FeatureModel and subclasses * @see mindplot.model.FeatureModel and subclasses
*/ */
initialize(topicId, featureType, attributes) { constructor(topicId, featureType, attributes) {
$assert($defined(topicId), 'topicId can not be null'); $assert($defined(topicId), 'topicId can not be null');
$assert(featureType, 'featureType can not be null'); $assert(featureType, 'featureType can not be null');
$assert(attributes, 'attributes can not be null'); $assert(attributes, 'attributes can not be null');
this.parent(); super();
this._topicId = topicId; this._topicId = topicId;
this._featureType = featureType; this._featureType = featureType;
this._attributes = attributes; this._attributes = attributes;
this._featureModel = null; this._featureModel = null;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -54,7 +52,7 @@ const AddFeatureToTopicCommand = new Class(
this._featureModel = model.createFeature(this._featureType, this._attributes); this._featureModel = model.createFeature(this._featureType, this._attributes);
} }
topic.addFeature(this._featureModel); topic.addFeature(this._featureModel);
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -63,8 +61,7 @@ const AddFeatureToTopicCommand = new Class(
undoExecute(commandContext) { undoExecute(commandContext) {
const topic = commandContext.findTopics(this._topicId)[0]; const topic = commandContext.findTopics(this._topicId)[0];
topic.removeFeature(this._featureModel); topic.removeFeature(this._featureModel);
}, }
}, }
);
export default AddFeatureToTopicCommand; export default AddFeatureToTopicCommand;

15
packages/mindplot/src/components/commands/AddRelationshipCommand.js
View File

@ -17,20 +17,19 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{ class AddRelationshipCommand extends Command {
Extends: Command,
/** /**
* @classdesc This command class handles do/undo of adding a relationship to a topic. * @classdesc This command class handles do/undo of adding a relationship to a topic.
* @constructs * @constructs
* @param {XMLDOM} model * @param {XMLDOM} model
* @extends mindplot.Command * @extends mindplot.Command
*/ */
initialize(model) { constructor(model) {
$assert(model, 'Relationship model can not be null'); $assert(model, 'Relationship model can not be null');
this.parent(); super();
this._model = model; this._model = model;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -38,7 +37,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
execute(commandContext) { execute(commandContext) {
const relationship = commandContext.addRelationship(this._model); const relationship = commandContext.addRelationship(this._model);
relationship.setOnFocus(true); relationship.setOnFocus(true);
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -47,7 +46,7 @@ const AddRelationshipCommand = new Class(/** @lends AddRelationshipCommand */{
undoExecute(commandContext) { undoExecute(commandContext) {
const rel = commandContext.findRelationships(this._model.getId()); const rel = commandContext.findRelationships(this._model.getId());
commandContext.deleteRelationship(rel[0]); commandContext.deleteRelationship(rel[0]);
}, }
}); }
export default AddRelationshipCommand; export default AddRelationshipCommand;

22
packages/mindplot/src/components/commands/AddTopicCommand.js
View File

@ -17,9 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const AddTopicCommand = new Class( class AddTopicCommand extends Command {
/** @lends AddTopicCommand */ {
Extends: Command,
/** /**
* @classdesc This command class handles do/undo of adding one or multiple topics to * @classdesc This command class handles do/undo of adding one or multiple topics to
* the mindmap. * the mindmap.
@ -29,17 +27,14 @@ const AddTopicCommand = new Class(
* when attaching a dragged node or a node/branch from clipboard * when attaching a dragged node or a node/branch from clipboard
* @extends mindplot.Command * @extends mindplot.Command
*/ */
initialize(models, parentTopicsId) { constructor(models, parentTopicsId) {
$assert(models, 'models can not be null'); $assert(models, 'models can not be null');
$assert( $assert(parentTopicsId == null || parentTopicsId.length == models.length, 'parents and models must have the same size');
parentTopicsId == null || parentTopicsId.length == models.length,
'parents and models must have the same size',
);
this.parent(); super();
this._models = models; this._models = models;
this._parentsIds = parentTopicsId; this._parentsIds = parentTopicsId;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -69,7 +64,7 @@ const AddTopicCommand = new Class(
// Render node ... // Render node ...
topic.setVisibility(true); topic.setVisibility(true);
}); });
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -90,8 +85,7 @@ const AddTopicCommand = new Class(
}); });
this._models = clonedModel; this._models = clonedModel;
}, }
}, }
);
export default AddTopicCommand; export default AddTopicCommand;

15
packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.js
View File

@ -17,8 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCommand */{ class ChangeFeatureToTopicCommand extends Command {
Extends: Command,
/** /**
* @extends mindplot.Command * @extends mindplot.Command
* @constructs * @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 featureId is null or undefined
* @throws will throw an error if attributes 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(topicId), 'topicId can not be null');
$assert($defined(featureId), 'featureId can not be null'); $assert($defined(featureId), 'featureId can not be null');
$assert($defined(attributes), 'attributes can not be null'); $assert($defined(attributes), 'attributes can not be null');
this.parent(); super();
this._topicId = topicId; this._topicId = topicId;
this._featureId = featureId; this._featureId = featureId;
this._attributes = attributes; this._attributes = attributes;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -50,7 +49,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
const oldAttributes = feature.getAttributes(); const oldAttributes = feature.getAttributes();
feature.setAttributes(this._attributes); feature.setAttributes(this._attributes);
this._attributes = oldAttributes; this._attributes = oldAttributes;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -58,7 +57,7 @@ const ChangeFeatureToTopicCommand = new Class(/** @lends ChangeFeatureToTopicCom
*/ */
undoExecute(commandContext) { undoExecute(commandContext) {
this.execute(commandContext); this.execute(commandContext);
}, }
}); }
export default ChangeFeatureToTopicCommand; export default ChangeFeatureToTopicCommand;

19
packages/mindplot/src/components/commands/DeleteCommand.js
View File

@ -17,8 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{ class DeleteCommand extends Command {
Extends: Command,
/** /**
* @classdesc This command class handles do/undo of deleting a topic. * @classdesc This command class handles do/undo of deleting a topic.
* @constructs * @constructs
@ -26,16 +25,16 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
* @param {Array<String>} relIds ids of the relationships connected to the topics * @param {Array<String>} relIds ids of the relationships connected to the topics
* @extends mindplot.Command * @extends mindplot.Command
*/ */
initialize(topicIds, relIds) { constructor(topicIds, relIds) {
$assert($defined(relIds), 'topicIds can not be null'); $assert($defined(relIds), 'topicIds can not be null');
this.parent(); super();
this._relIds = relIds; this._relIds = relIds;
this._topicIds = topicIds; this._topicIds = topicIds;
this._deletedTopicModels = []; this._deletedTopicModels = [];
this._deletedRelModel = []; this._deletedRelModel = [];
this._parentTopicIds = []; this._parentTopicIds = [];
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -81,7 +80,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
commandContext.deleteRelationship(rel); commandContext.deleteRelationship(rel);
}, this); }, this);
} }
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -125,7 +124,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
this._deletedTopicModels = []; this._deletedTopicModels = [];
this._parentTopicIds = []; this._parentTopicIds = [];
this._deletedRelModel = []; this._deletedRelModel = [];
}, }
_filterChildren(topicIds, commandContext) { _filterChildren(topicIds, commandContext) {
const topics = commandContext.findTopics(topicIds); const topics = commandContext.findTopics(topicIds);
@ -148,7 +147,7 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
}); });
return result; return result;
}, }
_collectInDepthRelationships(topic) { _collectInDepthRelationships(topic) {
let result = []; let result = [];
@ -172,8 +171,8 @@ const DeleteCommand = new Class(/** @lends mindplot.commands.DeleteCommand */{
result = ret; result = ret;
} }
return result; return result;
}, }
}); }
export default DeleteCommand; export default DeleteCommand;

13
packages/mindplot/src/components/commands/DragTopicCommand.js
View File

@ -17,8 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const DragTopicCommand = new Class(/** @lends DragTopicCommand */{ class DragTopicCommand extends Command {
Extends: Command,
/** /**
* @classdesc This command class handles do/undo of dragging a topic to a new position. * @classdesc This command class handles do/undo of dragging a topic to a new position.
* @constructs * @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 * @param {mindplot.Topic} parentTopic the topic to be made the dragged topic's new parent
* @extends mindplot.Command * @extends mindplot.Command
*/ */
initialize(topicId, position, order, parentTopic) { constructor(topicId, position, order, parentTopic) {
$assert(topicId, 'topicId must be defined'); $assert(topicId, 'topicId must be defined');
this._topicsId = topicId; this._topicsId = topicId;
@ -37,7 +36,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
this.parent(); this.parent();
this._position = position; this._position = position;
this._order = order; this._order = order;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -85,7 +84,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
// Store for undo ... // Store for undo ...
this._order = origOrder; this._order = origOrder;
this._position = origPosition; this._position = origPosition;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -93,7 +92,7 @@ const DragTopicCommand = new Class(/** @lends DragTopicCommand */{
*/ */
undoExecute(commandContext) { undoExecute(commandContext) {
this.execute(commandContext); this.execute(commandContext);
}, }
}); }
export default DragTopicCommand; export default DragTopicCommand;

15
packages/mindplot/src/components/commands/GenericFunctionCommand.js
View File

@ -19,8 +19,7 @@ import { $defined, $assert } from '@wisemapping/core-js';
import _ from '@libraries/underscore-min'; import _ from '@libraries/underscore-min';
import Command from '../Command'; import Command from '../Command';
const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{ class GenericFunctionCommand extends Command {
Extends: Command,
/** /**
* @classdesc This command handles do/undo of different actions, e.g. moving topics to * @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 * 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 * e.g. color, font family or text
* @extends mindplot.Command * @extends mindplot.Command
*/ */
initialize(commandFunc, topicsIds, value) { constructor(commandFunc, topicsIds, value) {
$assert(commandFunc, 'commandFunc must be defined'); $assert(commandFunc, 'commandFunc must be defined');
$assert($defined(topicsIds), 'topicsIds must be defined'); $assert($defined(topicsIds), 'topicsIds must be defined');
this.parent(); super();
this._value = value; this._value = value;
this._topicsId = topicsIds; this._topicsId = topicsIds;
this._commandFunc = commandFunc; this._commandFunc = commandFunc;
this._oldValues = []; this._oldValues = [];
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -72,7 +71,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
} else { } else {
throw 'Command can not be applied two times in a row.'; throw 'Command can not be applied two times in a row.';
} }
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -91,7 +90,7 @@ const GenericFunctionCommand = new Class(/** @lends GenericFunctionCommand */{
} else { } else {
throw new Error('undo can not be applied.'); throw new Error('undo can not be applied.');
} }
}, }
}); }
export default GenericFunctionCommand; export default GenericFunctionCommand;

17
packages/mindplot/src/components/commands/MoveControlPointCommand.js
View File

@ -17,9 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const MoveControlPointCommand = new Class( class MoveControlPointCommand extends Command {
/** @lends MoveControlPointCommand */ {
Extends: Command,
/** /**
* @classdesc This command handles do/undo of changing the control points of a relationship * @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 * arrow. These are the two points that appear when the relationship is on focus. They
@ -31,11 +29,11 @@ const MoveControlPointCommand = new Class(
* @param ctrlPointController {ControlPoint} * @param ctrlPointController {ControlPoint}
* @param point {Number} 0 for the destination control point, 1 for the source control point * @param point {Number} 0 for the destination control point, 1 for the source control point
*/ */
initialize(ctrlPointController, point) { constructor(ctrlPointController, point) {
$assert(ctrlPointController, 'line can not be null'); $assert(ctrlPointController, 'line can not be null');
$assert($defined(point), 'point can not be null'); $assert($defined(point), 'point can not be null');
this.parent(); super();
this._ctrlPointControler = ctrlPointController; this._ctrlPointControler = ctrlPointController;
this._line = ctrlPointController._line; this._line = ctrlPointController._line;
this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone(); this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
@ -54,7 +52,7 @@ const MoveControlPointCommand = new Class(
break; break;
} }
this._point = point; this._point = point;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -83,7 +81,7 @@ const MoveControlPointCommand = new Class(
this._ctrlPointControler.setLine(this._line); this._ctrlPointControler.setLine(this._line);
} }
this._line.getLine().updateLine(this._point); this._line.getLine().updateLine(this._point);
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -117,8 +115,7 @@ const MoveControlPointCommand = new Class(
this._ctrlPointControler.setLine(line); this._ctrlPointControler.setLine(line);
line._refreshShape(); line._refreshShape();
} }
}, }
}, }
);
export default MoveControlPointCommand; export default MoveControlPointCommand;

15
packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.js
View File

@ -17,8 +17,7 @@
*/ */
import Command from '../Command'; import Command from '../Command';
const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopicCommand */{ class RemoveFeatureFromTopicCommand extends Command {
Extends: Command,
/** /**
* @classdesc This command handles do/undo of removing a feature from a topic, e.g. an icon or * @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}. * 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 * @param {String} featureId id of the feature to remove
* @extends mindplot.Command * @extends mindplot.Command
*/ */
initialize(topicId, featureId) { constructor(topicId, featureId) {
$assert($defined(topicId), 'topicId can not be null'); $assert($defined(topicId), 'topicId can not be null');
$assert(featureId, 'iconModel can not be null'); $assert(featureId, 'iconModel can not be null');
this.parent(); super();
this._topicId = topicId; this._topicId = topicId;
this._featureId = featureId; this._featureId = featureId;
this._oldFeature = null; this._oldFeature = null;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -45,7 +44,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
const feature = topic.findFeatureById(this._featureId); const feature = topic.findFeatureById(this._featureId);
topic.removeFeature(feature); topic.removeFeature(feature);
this._oldFeature = feature; this._oldFeature = feature;
}, }
/** /**
* Overrides abstract parent method * Overrides abstract parent method
@ -55,7 +54,7 @@ const RemoveFeatureFromTopicCommand = new Class(/** @lends RemoveFeatureFromTopi
const topic = commandContext.findTopics(this._topicId)[0]; const topic = commandContext.findTopics(this._topicId)[0];
topic.addFeature(this._oldFeature); topic.addFeature(this._oldFeature);
this._oldFeature = null; this._oldFeature = null;
}, }
}); }
export default RemoveFeatureFromTopicCommand; export default RemoveFeatureFromTopicCommand;

21
packages/mindplot/src/components/commands/index.js
View File

@ -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,
};

29
packages/mindplot/src/components/layout/OriginalLayout.js
View File

@ -21,10 +21,10 @@ import Node from './Node';
import SymmetricSorter from './SymmetricSorter'; import SymmetricSorter from './SymmetricSorter';
import BalancedSorter from './BalancedSorter'; import BalancedSorter from './BalancedSorter';
const OriginalLayout = new Class({ class OriginalLayout {
initialize(treeSet) { constructor(treeSet) {
this._treeSet = treeSet; this._treeSet = treeSet;
}, }
/** */ /** */
createNode(id, size, position, type) { createNode(id, size, position, type) {
@ -35,7 +35,7 @@ const OriginalLayout = new Class({
const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER; const strategy = type === 'root' ? OriginalLayout.BALANCED_SORTER : OriginalLayout.SYMMETRIC_SORTER;
return new Node(id, size, position, strategy); return new Node(id, size, position, strategy);
}, }
/** */ /** */
connectNode(parentId, childId, order) { connectNode(parentId, childId, order) {
@ -51,7 +51,7 @@ const OriginalLayout = new Class({
// Fire a basic validation ... // Fire a basic validation ...
sorter.verify(this._treeSet, parent); sorter.verify(this._treeSet, parent);
}, }
/** */ /** */
disconnectNode(nodeId) { disconnectNode(nodeId) {
@ -72,7 +72,7 @@ const OriginalLayout = new Class({
// Fire a basic validation ... // Fire a basic validation ...
parent.getSorter().verify(this._treeSet, parent); parent.getSorter().verify(this._treeSet, parent);
}, }
/** */ /** */
layout() { layout() {
@ -91,7 +91,7 @@ const OriginalLayout = new Class({
}, },
this, this,
); );
}, }
_layoutChildren(node, heightById) { _layoutChildren(node, heightById) {
const nodeId = node.getId(); const nodeId = node.getId();
@ -154,7 +154,7 @@ const OriginalLayout = new Class({
}, },
this, this,
); );
}, }
_calculateAlignOffset(node, child, heightById) { _calculateAlignOffset(node, child, heightById) {
if (child.isFree()) { if (child.isFree()) {
@ -191,14 +191,14 @@ const OriginalLayout = new Class({
} }
return offset; return offset;
}, }
_branchIsTaller(node, heightById) { _branchIsTaller(node, heightById) {
return ( return (
heightById[node.getId()] heightById[node.getId()]
> node.getSize().height + node.getSorter()._getVerticalPadding() * 2 > node.getSize().height + node.getSorter()._getVerticalPadding() * 2
); );
}, }
_fixOverlapping(node, heightById) { _fixOverlapping(node, heightById) {
const children = this._treeSet.getChildren(node); const children = this._treeSet.getChildren(node);
@ -214,7 +214,7 @@ const OriginalLayout = new Class({
}, },
this, this,
); );
}, }
_shiftBranches(node, heightById) { _shiftBranches(node, heightById) {
const shiftedBranches = [node]; const shiftedBranches = [node];
@ -254,7 +254,7 @@ const OriginalLayout = new Class({
}, },
this, this,
); );
}, }
_branchesOverlap(branchA, branchB, heightById) { _branchesOverlap(branchA, branchB, heightById) {
// a branch doesn't really overlap with itself // 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; const bottomB = branchB.getPosition().y + heightById[branchB.getId()] / 2;
return !(topA >= bottomB || bottomA <= topB); return !(topA >= bottomB || bottomA <= topB);
}, }
}, }
);
/** /**
* @type {mindplot.layout.SymmetricSorter} * @type {mindplot.layout.SymmetricSorter}

39
packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js
View File

@ -1,23 +1,26 @@
import Options from '../../Options'; import Options from '../../Options';
const BootstrapDialog = new Class({ import $ from '@libraries/jquery-2.1.0';
Implements: Options,
options: { class BootstrapDialog extends Options {
constructor(title, options) {
super();
this.options = {
cancelButton: false, cancelButton: false,
closeButton: false, closeButton: false,
acceptButton: true, acceptButton: true,
removeButton: false, removeButton: false,
errorMessage: false, errorMessage: false,
onEventData: {}, onEventData: {},
}, };
initialize(title, options) {
this.setOptions(options); this.setOptions(options);
this.options.onEventData.dialog = this; this.options.onEventData.dialog = this;
this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>'); this._native = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
const content = $('<div class="modal-content"></div>'); const content = $('<div class="modal-content"></div>');
const header = this._buildHeader(title); const header = this._buildHeader(title);
if (header) { if (header) {
content.append(header); content.append(header);
} }
@ -37,7 +40,7 @@ const BootstrapDialog = new Class({
$(this).remove(); $(this).remove();
}); });
this._native.on('shown.bs.modal', this.onDialogShown); this._native.on('shown.bs.modal', this.onDialogShown);
}, }
_buildFooter() { _buildFooter() {
let footer = null; let footer = null;
@ -58,7 +61,7 @@ const BootstrapDialog = new Class({
footer.append(`<button type="button" class="btn btn-secondary" data-dismiss="modal">${$msg('CANCEL')}</button>`); footer.append(`<button type="button" class="btn btn-secondary" data-dismiss="modal">${$msg('CANCEL')}</button>`);
} }
return footer; return footer;
}, }
_buildHeader(title) { _buildHeader(title) {
let header = null; let header = null;
@ -74,42 +77,42 @@ const BootstrapDialog = new Class({
header.append(`<h2 class="modal-title">${title}</h2>`); header.append(`<h2 class="modal-title">${title}</h2>`);
} }
return header; return header;
}, }
onAcceptClick(event) { onAcceptClick(event) {
throw 'Unsupported operation'; throw 'Unsupported operation';
}, }
onDialogShown() {}, onDialogShown() {}
onRemoveClick(event) { onRemoveClick(event) {
throw 'Unsupported operation'; throw 'Unsupported operation';
}, }
show() { show() {
this._native.modal(); this._native.modal();
}, }
setContent(content) { setContent(content) {
const modalBody = this._native.find('.modal-body'); const modalBody = this._native.find('.modal-body');
modalBody.append(content); modalBody.append(content);
}, }
css(options) { css(options) {
this._native.find('.modal-dialog').css(options); this._native.find('.modal-dialog').css(options);
}, }
close() { close() {
this._native.modal('hide'); this._native.modal('hide');
}, }
alertError(message) { alertError(message) {
this._native.find('.alert-danger').text(message); this._native.find('.alert-danger').text(message);
this._native.find('.alert-danger').show(); this._native.find('.alert-danger').show();
}, }
cleanError() { cleanError() {
this._native.find('.alert-danger').hide(); this._native.find('.alert-danger').hide();
}, }
}); }
export default BootstrapDialog; export default BootstrapDialog;

16
packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.Request.js → packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js
View File

@ -1,11 +1,8 @@
import BootstrapDialog from './BootstrapDialog'; import BootstrapDialog from './BootstrapDialog';
BootstrapDialog.Request = new Class({ class BootstrapDialogRequest extends BootstrapDialog {
constructor(url, title, options) {
Extends: BootstrapDialog, super(title, options);
initialize(url, title, options) {
this.parent(title, options);
this.requestOptions = {}; this.requestOptions = {};
this.requestOptions.cache = false; this.requestOptions.cache = false;
const me = this; const me = this;
@ -39,12 +36,13 @@ BootstrapDialog.Request = new Class({
}); });
me.show(); me.show();
}); });
}, }
onDialogShown() { onDialogShown() {
if (typeof (onDialogShown) === 'function') { if (typeof (onDialogShown) === 'function') {
onDialogShown(); onDialogShown();
} }
}, }
}
}); export default BootstrapDialogRequest;

14
packages/mindplot/src/components/persistence/Beta2PelaMigrator.js
View File

@ -18,15 +18,15 @@
import ModelCodeName from './ModelCodeName'; import ModelCodeName from './ModelCodeName';
import XMLSerializer_Pela from './XMLSerializer_Pela'; import XMLSerializer_Pela from './XMLSerializer_Pela';
const Beta2PelaMigrator = new Class({ class Beta2PelaMigrator {
initialize(betaSerializer) { constructor(betaSerializer) {
this._betaSerializer = betaSerializer; this._betaSerializer = betaSerializer;
this._pelaSerializer = new XMLSerializer_Pela(); this._pelaSerializer = new XMLSerializer_Pela();
}, }
toXML(mindmap) { toXML(mindmap) {
return this._pelaSerializer.toXML(mindmap); return this._pelaSerializer.toXML(mindmap);
}, }
loadFromDom(dom, mapId) { loadFromDom(dom, mapId) {
$assert($defined(mapId), 'mapId can not be null'); $assert($defined(mapId), 'mapId can not be null');
@ -41,7 +41,7 @@ const Beta2PelaMigrator = new Class({
}); });
return mindmap; return mindmap;
}, }
_fixPosition(parentModel) { _fixPosition(parentModel) {
const parentPos = parentModel.getPosition(); const parentPos = parentModel.getPosition();
@ -53,7 +53,7 @@ const Beta2PelaMigrator = new Class({
} }
me._fixPosition(child); me._fixPosition(child);
}); });
}, }
}); }
export default Beta2PelaMigrator; export default Beta2PelaMigrator;

18
packages/mindplot/src/components/persistence/Pela2TangoMigrator.js
View File

@ -18,15 +18,15 @@
import XMLSerializer_Tango from './XMLSerializer_Tango'; import XMLSerializer_Tango from './XMLSerializer_Tango';
import ModelCodeName from './ModelCodeName'; import ModelCodeName from './ModelCodeName';
const Pela2TangoMigrator = new Class({ class Pela2TangoMigrator {
initialize(pelaSerializer) { constructor(pelaSerializer) {
this._pelaSerializer = pelaSerializer; this._pelaSerializer = pelaSerializer;
this._tangoSerializer = new XMLSerializer_Tango(); this._tangoSerializer = new XMLSerializer_Tango();
}, }
toXML(mindmap) { toXML(mindmap) {
return this._tangoSerializer.toXML(mindmap); return this._tangoSerializer.toXML(mindmap);
}, }
loadFromDom(dom, mapId) { loadFromDom(dom, mapId) {
$assert($defined(mapId), 'mapId can not be null'); $assert($defined(mapId), 'mapId can not be null');
@ -35,7 +35,7 @@ const Pela2TangoMigrator = new Class({
this._fixOrder(mindmap); this._fixOrder(mindmap);
this._fixPosition(mindmap); this._fixPosition(mindmap);
return mindmap; return mindmap;
}, }
_fixOrder(mindmap) { _fixOrder(mindmap) {
// First level node policies has been changed. // First level node policies has been changed.
@ -62,7 +62,7 @@ const Pela2TangoMigrator = new Class({
for (i = 0; i < leftNodes.length; i++) { for (i = 0; i < leftNodes.length; i++) {
leftNodes[i].setOrder(i * 2 + 1); leftNodes[i].setOrder(i * 2 + 1);
} }
}, }
_fixPosition(mindmap) { _fixPosition(mindmap) {
// Position was not required in previous versions. Try to synthesize one . // Position was not required in previous versions. Try to synthesize one .
@ -73,7 +73,7 @@ const Pela2TangoMigrator = new Class({
const position = child.getPosition(); const position = child.getPosition();
this._fixNodePosition(child, position); this._fixNodePosition(child, position);
} }
}, }
_fixNodePosition(node, parentPosition) { _fixNodePosition(node, parentPosition) {
// Position was not required in previous versions. Try to synthesize one . // Position was not required in previous versions. Try to synthesize one .
let position = node.getPosition(); let position = node.getPosition();
@ -86,7 +86,7 @@ const Pela2TangoMigrator = new Class({
const child = children[i]; const child = children[i];
this._fixNodePosition(child, position); this._fixNodePosition(child, position);
} }
}, }
}); }
export default Pela2TangoMigrator; export default Pela2TangoMigrator;

30
packages/mindplot/src/components/persistence/XMLSerializer_Beta.js
View File

@ -20,7 +20,7 @@ import Mindmap from '../model/Mindmap';
import INodeModel from '../model/INodeModel'; import INodeModel from '../model/INodeModel';
import TopicFeature from '../TopicFeature'; import TopicFeature from '../TopicFeature';
const XMLSerializer_Beta = new Class({ class XMLSerializer_Beta {
toXML(mindmap) { toXML(mindmap) {
$assert(mindmap, 'Can not save a null mindmap'); $assert(mindmap, 'Can not save a null mindmap');
@ -43,7 +43,7 @@ const XMLSerializer_Beta = new Class({
} }
return document; return document;
}, }
_topicToXML(document, topic) { _topicToXML(document, topic) {
const parentTopic = document.createElement('topic'); const parentTopic = document.createElement('topic');
@ -55,7 +55,7 @@ const XMLSerializer_Beta = new Class({
const parent = topic.getParent(); const parent = topic.getParent();
if (parent == null || parent.getType() === INodeModel.CENTRAL_TOPIC_TYPE) { if (parent == null || parent.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
const pos = topic.getPosition(); const pos = topic.getPosition();
parentTopic.setAttribute('position', `${pos.x},${pos.y}`); parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
} else { } else {
const order = topic.getOrder(); const order = topic.getOrder();
parentTopic.setAttribute('order', order); parentTopic.setAttribute('order', order);
@ -147,25 +147,25 @@ const XMLSerializer_Beta = new Class({
} }
return parentTopic; return parentTopic;
}, }
_iconToXML(document, icon) { _iconToXML(document, icon) {
const iconDom = document.createElement('icon'); const iconDom = document.createElement('icon');
iconDom.setAttribute('id', icon.getIconType()); iconDom.setAttribute('id', icon.getIconType());
return iconDom; return iconDom;
}, }
_linkToXML(document, link) { _linkToXML(document, link) {
const linkDom = document.createElement('link'); const linkDom = document.createElement('link');
linkDom.setAttribute('url', link.getUrl()); linkDom.setAttribute('url', link.getUrl());
return linkDom; return linkDom;
}, }
_noteToXML(document, note) { _noteToXML(document, note) {
const noteDom = document.createElement('note'); const noteDom = document.createElement('note');
noteDom.setAttribute('text', note.getText()); noteDom.setAttribute('text', note.getText());
return noteDom; return noteDom;
}, }
loadFromDom(dom, mapId) { loadFromDom(dom, mapId) {
$assert(dom, 'Dom can not be null'); $assert(dom, 'Dom can not be null');
@ -181,8 +181,8 @@ const XMLSerializer_Beta = new Class({
// Is a wisemap?. // Is a wisemap?.
$assert( $assert(
documentElement.tagName === XMLSerializer_Beta.MAP_ROOT_NODE, documentElement.tagName === XMLSerializer_Beta.MAP_ROOT_NODE,
`This seem not to be a map document. Root Tag: '${documentElement.tagName},',HTML:${dom.innerHTML `This seem not to be a map document. Root Tag: '${documentElement.tagName}',HTML:${dom.innerHTML
},XML:${innerXML(dom)}`, }XML:${innerXML(dom)}`,
); );
// Start the loading process ... // Start the loading process ...
@ -200,7 +200,7 @@ const XMLSerializer_Beta = new Class({
} }
mindmap.setId(mapId); mindmap.setId(mapId);
return mindmap; return mindmap;
}, }
_deserializeNode(domElem, mindmap) { _deserializeNode(domElem, mindmap) {
const type = domElem.getAttribute('central') != null const type = domElem.getAttribute('central') != null
@ -299,23 +299,23 @@ const XMLSerializer_Beta = new Class({
} }
return topic; return topic;
}, }
_deserializeIcon(domElem) { _deserializeIcon(domElem) {
let icon = domElem.getAttribute('id'); let icon = domElem.getAttribute('id');
icon = icon.replace('images/', 'icons/legacy/'); icon = icon.replace('images/', 'icons/legacy/');
return TopicFeature.createModel(TopicFeature.Icon.id, { id: icon }); return TopicFeature.createModel(TopicFeature.Icon.id, { id: icon });
}, }
_deserializeLink(domElem) { _deserializeLink(domElem) {
return TopicFeature.createModel(TopicFeature.Link.id, { url: domElem.getAttribute('url') }); return TopicFeature.createModel(TopicFeature.Link.id, { url: domElem.getAttribute('url') });
}, }
_deserializeNote(domElem) { _deserializeNote(domElem) {
const text = domElem.getAttribute('text'); const text = domElem.getAttribute('text');
return TopicFeature.createModel(TopicFeature.Note.id, { text: text == null ? ' ' : text }); return TopicFeature.createModel(TopicFeature.Note.id, { text: text == null ? ' ' : text });
}, }
}); }
XMLSerializer_Beta.MAP_ROOT_NODE = 'map'; XMLSerializer_Beta.MAP_ROOT_NODE = 'map';

41
packages/mindplot/src/components/persistence/XMLSerializer_Pela.js
View File

@ -16,7 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined, createDocument } from '@wisemapping/core-js'; 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 Mindmap from '../model/Mindmap';
import INodeModel, { TopicShape } from '../model/INodeModel'; import INodeModel, { TopicShape } from '../model/INodeModel';
import TopicFeature from '../TopicFeature'; import TopicFeature from '../TopicFeature';
@ -26,13 +26,7 @@ import ConnectionLine from '../ConnectionLine';
* @class * @class
*/ */
// eslint-disable-next-line camelcase // eslint-disable-next-line camelcase
const XMLSerializer_Pela = new Class( class XMLSerializer_Pela {
/** @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) { toXML(mindmap) {
$assert(mindmap, 'Can not save a null mindmap'); $assert(mindmap, 'Can not save a null mindmap');
@ -76,7 +70,7 @@ const XMLSerializer_Pela = new Class(
} }
return document; return document;
}, }
_topicToXML(document, topic) { _topicToXML(document, topic) {
const parentTopic = document.createElement('topic'); const parentTopic = document.createElement('topic');
@ -86,7 +80,7 @@ const XMLSerializer_Pela = new Class(
parentTopic.setAttribute('central', 'true'); parentTopic.setAttribute('central', 'true');
} else { } else {
const pos = topic.getPosition(); const pos = topic.getPosition();
parentTopic.setAttribute('position', `${pos.x},${pos.y}`); parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
const order = topic.getOrder(); const order = topic.getOrder();
if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); } if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
@ -104,7 +98,7 @@ const XMLSerializer_Pela = new Class(
if (shape === TopicShape.IMAGE) { if (shape === TopicShape.IMAGE) {
parentTopic.setAttribute( parentTopic.setAttribute(
'image', 'image',
`${topic.getImageSize().width},${topic.getImageSize().height `${topic.getImageSize().width}${topic.getImageSize().height
}:${topic.getImageUrl()}`, }:${topic.getImageUrl()}`,
); );
} }
@ -189,7 +183,7 @@ const XMLSerializer_Pela = new Class(
parentTopic.appendChild(childDom); parentTopic.appendChild(childDom);
} }
return parentTopic; return parentTopic;
}, }
_noteTextToXML(document, elem, text) { _noteTextToXML(document, elem, text) {
if (text.indexOf('\n') === -1) { if (text.indexOf('\n') === -1) {
@ -200,7 +194,7 @@ const XMLSerializer_Pela = new Class(
textDom.appendChild(cdata); textDom.appendChild(cdata);
elem.appendChild(textDom); elem.appendChild(textDom);
} }
}, }
_relationshipToXML(document, relationship) { _relationshipToXML(document, relationship) {
const result = document.createElement('relationship'); const result = document.createElement('relationship');
@ -214,21 +208,21 @@ const XMLSerializer_Pela = new Class(
const srcPoint = relationship.getSrcCtrlPoint(); const srcPoint = relationship.getSrcCtrlPoint();
result.setAttribute( result.setAttribute(
'srcCtrlPoint', 'srcCtrlPoint',
`${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`, `${Math.round(srcPoint.x)}${Math.round(srcPoint.y)}`,
); );
} }
if ($defined(relationship.getDestCtrlPoint())) { if ($defined(relationship.getDestCtrlPoint())) {
const destPoint = relationship.getDestCtrlPoint(); const destPoint = relationship.getDestCtrlPoint();
result.setAttribute( result.setAttribute(
'destCtrlPoint', 'destCtrlPoint',
`${Math.round(destPoint.x)},${Math.round(destPoint.y)}`, `${Math.round(destPoint.x)}${Math.round(destPoint.y)}`,
); );
} }
} }
result.setAttribute('endArrow', relationship.getEndArrow()); result.setAttribute('endArrow', relationship.getEndArrow());
result.setAttribute('startArrow', relationship.getStartArrow()); result.setAttribute('startArrow', relationship.getStartArrow());
return result; return result;
}, }
/** /**
* @param dom * @param dom
@ -280,7 +274,7 @@ const XMLSerializer_Pela = new Class(
this._idsMap = null; this._idsMap = null;
mindmap.setId(mapId); mindmap.setId(mapId);
return mindmap; return mindmap;
}, }
_deserializeNode(domElem, mindmap) { _deserializeNode(domElem, mindmap) {
const type = domElem.getAttribute('central') != null const type = domElem.getAttribute('central') != null
@ -414,7 +408,7 @@ const XMLSerializer_Pela = new Class(
} }
} }
return topic; return topic;
}, }
_deserializeTextAttr(domElem) { _deserializeTextAttr(domElem) {
let value = domElem.getAttribute('text'); let value = domElem.getAttribute('text');
@ -437,7 +431,7 @@ const XMLSerializer_Pela = new Class(
} }
return value; return value;
}, }
_deserializeNodeText(domElem) { _deserializeNodeText(domElem) {
const children = domElem.childNodes; const children = domElem.childNodes;
@ -449,7 +443,7 @@ const XMLSerializer_Pela = new Class(
} }
} }
return value; return value;
}, }
_deserializeRelationship(domElement, mindmap) { _deserializeRelationship(domElement, mindmap) {
const srcId = domElement.getAttribute('srcTopicId'); const srcId = domElement.getAttribute('srcTopicId');
@ -478,7 +472,7 @@ const XMLSerializer_Pela = new Class(
model.setEndArrow('false'); model.setEndArrow('false');
model.setStartArrow('true'); model.setStartArrow('true');
return model; return model;
}, }
/** /**
* This method ensures that the output String has only * This method ensures that the output String has only
@ -509,9 +503,8 @@ const XMLSerializer_Pela = new Class(
} }
} }
return result; return result;
}, }
}, }
);
/** /**
* a wisemap's root element tag name * a wisemap's root element tag name

5
packages/mindplot/src/components/persistence/XMLSerializer_Tango.js
View File

@ -23,8 +23,7 @@ import XMLSerializer_Pela from './XMLSerializer_Pela';
* @class * @class
* @extends mindplot.persistence.XMLSerializer_Pela * @extends mindplot.persistence.XMLSerializer_Pela
*/ */
const XMLSerializer_Tango = new Class({ class XMLSerializer_Tango extends XMLSerializer_Pela{
Extends: XMLSerializer_Pela, };
});
export default XMLSerializer_Tango; export default XMLSerializer_Tango;

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

@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import web2d from '@wisemapping/web2d'; import * as web2d from '@wisemapping/web2d';
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import { TopicShape } from '../model/INodeModel'; import { TopicShape } from '../model/INodeModel';
import TopicConfig from '../TopicConfig'; import TopicConfig from '../TopicConfig';

23
packages/mindplot/src/components/widget/IMenu.js
View File

@ -18,9 +18,9 @@
import { $assert } from "@wisemapping/core-js"; import { $assert } from "@wisemapping/core-js";
import PersistenceManager from '../PersistenceManager'; 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(designer, 'designer can not be null');
$assert(containerId, 'containerId can not be null'); $assert(containerId, 'containerId can not be null');
@ -34,13 +34,13 @@ const IMenu = new Class({
this._designer.addEvent('modelUpdate', () => { this._designer.addEvent('modelUpdate', () => {
me.setRequireChange(true); me.setRequireChange(true);
}); });
}, }
clear() { clear() {
_.each(this._toolbarElems, (item) => { _.each(this._toolbarElems, (item) => {
item.hide(); item.hide();
}); });
}, }
discardChanges(designer) { discardChanges(designer) {
// Avoid autosave before leaving the page .... // Avoid autosave before leaving the page ....
@ -56,13 +56,13 @@ const IMenu = new Class({
// Reload the page ... // Reload the page ...
window.location.reload(); window.location.reload();
}, }
unlockMap(designer) { unlockMap(designer) {
const mindmap = designer.getMindmap(); const mindmap = designer.getMindmap();
const persistenceManager = PersistenceManager.getInstance(); const persistenceManager = PersistenceManager.getInstance();
persistenceManager.unlockMap(mindmap); persistenceManager.unlockMap(mindmap);
}, }
save(saveElem, designer, saveHistory, sync) { save(saveElem, designer, saveHistory, sync) {
// Load map content ... // Load map content ...
@ -86,7 +86,6 @@ const IMenu = new Class({
} }
menu.setRequireChange(false); menu.setRequireChange(false);
}, },
onError(error) { onError(error) {
if (saveHistory) { if (saveHistory) {
saveElem.css('cursor', 'pointer'); saveElem.css('cursor', 'pointer');
@ -97,17 +96,17 @@ const IMenu = new Class({
$notifyModal(error.message); $notifyModal(error.message);
} }
} }
}, }
}, sync); }, sync);
}, }
isSaveRequired() { isSaveRequired() {
return this._mindmapUpdated; return this._mindmapUpdated;
}, }
setRequireChange(value) { setRequireChange(value) {
this._mindmapUpdated = value; this._mindmapUpdated = value;
}, }
}); }
export default IMenu; export default IMenu;

2
packages/mindplot/src/components/widget/IconPanel.js
View File

@ -44,7 +44,7 @@ class IconPanel extends ToolbarPaneItem {
const iconId = familyIcons[j]; const iconId = familyIcons[j];
const img = $('<img>') const img = $('<img>')
.attr('id', iconId) .attr('id', iconId)
.attr('src', ImageIcon.prototype._getImageUrl(iconId)) .attr('src', ImageIcon._getImageUrl(iconId))
.attr('class', 'panelIcon'); .attr('class', 'panelIcon');
familyContent.append(img); familyContent.append(img);

12
packages/mindplot/src/components/widget/Menu.js
View File

@ -19,7 +19,7 @@ import $ from '@libraries/jquery-2.1.0';
import _ from '@libraries/underscore-min'; import _ from '@libraries/underscore-min';
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog'; import BootstrapDialogRequest from "../libraries/bootstrap/BootstrapDialogRequest";
import IMenu from './IMenu'; import IMenu from './IMenu';
import FontFamilyPanel from './FontFamilyPanel'; import FontFamilyPanel from './FontFamilyPanel';
import FontSizePanel from './FontSizePanel'; import FontSizePanel from './FontSizePanel';
@ -215,7 +215,7 @@ class Menu extends IMenu {
} }
this._addButton('export', false, false, () => { 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, cancelButton: true,
closeButton: true, closeButton: true,
}); });
@ -347,7 +347,7 @@ class Menu extends IMenu {
const shareElem = $('#shareIt'); const shareElem = $('#shareIt');
if (shareElem) { if (shareElem) {
this._addButton('shareIt', false, false, () => { 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, closeButton: true,
cancelButton: true, cancelButton: true,
}); });
@ -359,7 +359,7 @@ class Menu extends IMenu {
const publishElem = $('#publishIt'); const publishElem = $('#publishIt');
if (publishElem) { if (publishElem) {
this._addButton('publishIt', false, false, () => { 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, closeButton: true,
cancelButton: true, cancelButton: true,
}); });
@ -371,7 +371,7 @@ class Menu extends IMenu {
const historyElem = $('#history'); const historyElem = $('#history');
if (historyElem) { if (historyElem) {
this._addButton('history', false, false, () => { 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, closeButton: true,
cancelButton: true, cancelButton: true,
}); });
@ -386,7 +386,7 @@ class Menu extends IMenu {
const keyboardShortcut = $('#keyboardShortcuts'); const keyboardShortcut = $('#keyboardShortcuts');
if (keyboardShortcut) { if (keyboardShortcut) {
keyboardShortcut.bind('click', (event) => { keyboardShortcut.bind('click', (event) => {
BootstrapDialog.Request.active = new BootstrapDialog.Request('c/keyboard', $msg('SHORTCUTS'), { BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), {
closeButton: true, closeButton: true,
cancelButton: true, cancelButton: true,
}); });

4
packages/mindplot/src/components/widget/ModalDialogNotifier.js
View File

@ -15,9 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
const ModalDialogNotifier = new Class({ class ModalDialogNotifier {
initialize() {},
// FIXME: replace by alert() // FIXME: replace by alert()
show(message, title) { show(message, title) {
$assert(message, 'message can not be null'); $assert(message, 'message can not be null');

24
packages/mindplot/src/components/widget/NoteEditor.js
View File

@ -18,23 +18,21 @@
import jQuery from '@libraries/jquery-2.1.0'; import jQuery from '@libraries/jquery-2.1.0';
import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog'; import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
const NoteEditor = new Class({ class NoteEditor extends BootstrapDialog{
Extends: BootstrapDialog, constructor(model) {
initialize(model) {
$assert(model, 'model can not be null'); $assert(model, 'model can not be null');
this._model = model; this._model = model;
this.parent($msg('Note'), { super($msg('Note'), {
cancelButton: true, cancelButton: true,
closeButton: true, closeButton: true,
acceptButton: true, acceptButton: true,
removeButton: typeof model.getValue() !== 'undefined', removeButton: typeof model.getValue() !== 'undefined',
onEventData: { model: this._model }, onEventData: { model: this._model }
}); });
this.css({ margin: '150px auto' }); this.css({ margin: '150px auto' });
const panel = this._buildPanel(model); const panel = this._buildPanel(model);
this.setContent(panel); this.setContent(panel);
}, }
_buildPanel(model) { _buildPanel(model) {
const result = $('<div></div>').css('padding-top', '5px'); const result = $('<div></div>').css('padding-top', '5px');
@ -66,11 +64,11 @@ const NoteEditor = new Class({
result.append(form); result.append(form);
return result; return result;
}, }
onAcceptClick(event) { onAcceptClick(event) {
event.data.dialog._submitForm(event.data.model); event.data.dialog._submitForm(event.data.model);
}, }
_submitForm(model) { _submitForm(model) {
const textarea = this._native.find('textarea'); const textarea = this._native.find('textarea');
@ -78,16 +76,16 @@ const NoteEditor = new Class({
model.setValue(textarea.val()); model.setValue(textarea.val());
} }
this.close(); this.close();
}, }
onDialogShown() { onDialogShown() {
$(this).find('textarea').focus(); $(this).find('textarea').focus();
}, }
onRemoveClick(event) { onRemoveClick(event) {
event.data.model.setValue(null); event.data.model.setValue(null);
event.data.dialog.close(); event.data.dialog.close();
}, }
}); }
export default NoteEditor; export default NoteEditor;

47
packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.Request.js
View File

@ -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();
}
}
});

111
packages/mindplot/test/playground/map-render/bootstrap/BootstrapDialog.js
View File

@ -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 = $('<div class="modal fade" tabindex="-1"></div>').append('<div class="modal-dialog"></div>');
var content = $('<div class="modal-content"></div>');
var header = this._buildHeader(title);
if (header) {
content.append(header);
}
var body = $('<div class="modal-body"></div>');
if(this.options.errorMessage){
var error = $('<div class="alert alert-danger"></div>');
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 = $('<div class="modal-footer" style="paddingTop:5;textAlign:center">');
}
if (this.options.acceptButton) {
this.acceptButton = $('<button type="button" class="btn btn-primary" id="acceptBtn" data-dismiss="modal">'+ $msg('ACCEPT') + '</button>');
footer.append(this.acceptButton);
this.acceptButton.unbind('click').on("click",this.options.onEventData, this.onAcceptClick)
}
if (this.options.removeButton) {
this.removeButton = $('<button type="button" class="btn btn-secondary" id="removeBtn" data-dismiss="modal">'+ $msg('REMOVE') +'</button>');
footer.append(this.removeButton);
this.removeButton.on('click', this.options.onEventData, this.onRemoveClick);
}
if (this.options.cancelButton) {
footer.append('<button type="button" class="btn btn-secondary" data-dismiss="modal">'+ $msg('CANCEL') +'</button>');
}
return footer;
},
_buildHeader: function(title) {
var header = null;
if (this.options.closeButton || title) {
header = $('<div class="modal-header"></div>');
}
if (this.options.closeButton) {
header.append(
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
);
}
if (title) {
header.append('<h2 class="modal-title">' + title + '</h2>');
}
return header;
},
onAcceptClick: function(event) {
throw "Unsupported operation";
},
onDialogShown: function() {},
onRemoveClick: function(event) {
throw "Unsupported operation";
},
show: function () {
this._native.modal();
},
setContent: function(content) {
var modalBody = this._native.find('.modal-body');
modalBody.append(content);
},
css: function(options){
this._native.find('.modal-dialog').css(options);
},
close: function() {
this._native.modal('hide');
},
alertError: function(message){
this._native.find('.alert-danger').text(message);
this._native.find('.alert-danger').show();
},
cleanError: function(){
this._native.find('.alert-danger').hide();
}
});

10
packages/mindplot/test/unit/EventsTestSuite.js
View File

@ -1,14 +1,12 @@
const TestClass = new Class({ class TestClass extends Events{
Extends: mindplot.Events,
getEvents() { getEvents() {
return this.$events; return this.$events;
}, }
removeEvents() { removeEvents() {
this.$events = {}; this.$events = {};
}, }
}); }
// Test class and variables // Test class and variables
const expectedChangeFn1 = function () { return 'change1'; }; const expectedChangeFn1 = function () { return 'change1'; };

4
packages/mindplot/test/unit/TestSuite.js
View File

@ -1,6 +1,6 @@
TestSuite = new Class({ class TestSuite {
}); }
TestSuite.NODE_SIZE = { width: 80, height: 30 }; TestSuite.NODE_SIZE = { width: 80, height: 30 };
TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 }; TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 };

9
packages/mindplot/webpack.playground.js
View File

@ -43,14 +43,7 @@ module.exports = {
resolve: { resolve: {
alias: { alias: {
'@libraries': path.resolve(__dirname, '../../libraries/'), '@libraries': path.resolve(__dirname, '../../libraries/'),
'@commands': path.resolve(__dirname, './src/components/commands/'),
'@layout': path.resolve(__dirname, './src/components/layout/'),
'@libs': path.resolve(__dirname, './src/components/libraries/'),
'@model': path.resolve(__dirname, './src/components/model'),
'@persistence': path.resolve(__dirname, './src/components/persistence/'),
'@util': path.resolve(__dirname, './src/components/util/'),
'@widget': path.resolve(__dirname, './src/components/widget/'),
'@components': path.resolve(__dirname, './src/components/'),
}, },
extensions: ['.js', '.json'], extensions: ['.js', '.json'],
}, },

5
packages/web2d/jsconfig.json
View File

@ -3,10 +3,7 @@
"baseUrl": ".", "baseUrl": ".",
"module": "commonjs", "module": "commonjs",
"paths": { "paths": {
"@libraries/*": ["../../libraries/*"], "@libraries/*": ["../../libraries/*"]
"@svg/*": ["./src/components/peer/svg/*"],
"@utils/*": ["./src/components/peer/utils/*"],
"@components/*": ["./src/components/*"]
} }
}, },
"exclude": ["node_modules"] "exclude": ["node_modules"]

5
packages/web2d/src/components/ElementClass.js
View File

@ -19,17 +19,18 @@
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
class ElementClass { class ElementClass {
constructor(peer, attributes, htmlContainer) { constructor(peer, attributes, delayInit) {
this._htmlContainer = htmlContainer;
this.peer = peer; this.peer = peer;
if (peer == null) { if (peer == null) {
throw new Error('Element peer can not be null'); throw new Error('Element peer can not be null');
} }
if (!delayInit) {
if ($defined(attributes)) { if ($defined(attributes)) {
this._initialize(attributes); this._initialize(attributes);
} }
} }
}
_initialize(attributes) { _initialize(attributes) {
const batchExecute = {}; const batchExecute = {};

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

@ -16,14 +16,13 @@
* limitations under the License. * limitations under the License.
*/ */
import $ from '@libraries/jquery-2.1.0'; import $ from '@libraries/jquery-2.1.0';
import { $defined, $assert } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import ElementClass from '@components/ElementClass'; import ElementClass from './ElementClass';
import Toolkit from './Toolkit'; import Toolkit from './Toolkit';
class Workspace extends ElementClass { class Workspace extends ElementClass {
constructor(attributes) { constructor(attributes) {
const htmlContainer = Workspace._createDivContainer(); const htmlContainer = Workspace._createDivContainer();
const peer = Toolkit.createWorkspace(htmlContainer); const peer = Toolkit.createWorkspace(htmlContainer);
const defaultAttributes = { const defaultAttributes = {
width: '200px', width: '200px',
@ -38,7 +37,9 @@ class Workspace extends ElementClass {
defaultAttributes[key] = attributes[key]; defaultAttributes[key] = attributes[key];
} }
} }
super(peer, defaultAttributes, htmlContainer); super(peer, defaultAttributes, true);
this._htmlContainer = htmlContainer;
this._initialize(defaultAttributes);
htmlContainer.append(this.peer._native); htmlContainer.append(this.peer._native);
} }
@ -78,8 +79,8 @@ class Workspace extends ElementClass {
*/ */
static _createDivContainer() { static _createDivContainer() {
const container = window.document.createElement('div'); const container = window.document.createElement('div');
container.id = 'workspaceContainer'; // container.id = 'workspaceContainer';
// container.style.overflow = "hidden"; // container.style.overflow = 'hidden';
container.style.position = 'relative'; container.style.position = 'relative';
container.style.top = '0px'; container.style.top = '0px';
container.style.left = '0px'; container.style.left = '0px';

18
packages/web2d/src/components/peer/svg/ArialFont.js
View File

@ -17,20 +17,20 @@
*/ */
import Font from './Font'; import Font from './Font';
const ArialFont = new Class({ class ArialFont extends Font {
Extends: Font, constructor() {
initialize() { super();
this.parent(); this._fontFamily = 'arial';
this._fontFamily = 'Arial'; }
},
getFontFamily() { getFontFamily() {
return this._fontFamily; return this._fontFamily;
}, }
// eslint-disable-next-line class-methods-use-this
getFont() { getFont() {
return Font.ARIAL; return Font.ARIAL;
}, }
}); }
export default ArialFont; export default ArialFont;

29
packages/web2d/src/components/peer/svg/ArrowPeer.js
View File

@ -20,34 +20,33 @@ import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
import Point from '../../Point'; import Point from '../../Point';
const ArrowPeer = new Class({ class ArrowPeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path');
const svgElement = window.document.createElementNS(this.svgNamespace, 'path'); super(svgElement);
this.parent(svgElement);
this._style = {}; this._style = {};
this._controlPoint = new Point(); this._controlPoint = new Point();
this._fromPoint = new Point(); this._fromPoint = new Point();
}, }
setFrom(x, y) { setFrom(x, y) {
this._fromPoint.x = x; this._fromPoint.x = x;
this._fromPoint.y = y; this._fromPoint.y = y;
this._redraw(); this._redraw();
}, }
setControlPoint(point) { setControlPoint(point) {
this._controlPoint = point; this._controlPoint = point;
this._redraw(); this._redraw();
}, }
setStrokeColor(color) { setStrokeColor(color) {
this.setStroke(null, null, color, null); this.setStroke(null, null, color, null);
}, }
setStrokeWidth(width) { setStrokeWidth(width) {
this.setStroke(width); this.setStroke(width);
}, }
setDashed(isDashed, length, spacing) { setDashed(isDashed, length, spacing) {
if ( if (
@ -56,11 +55,11 @@ const ArrowPeer = new Class({
&& $defined(length) && $defined(length)
&& $defined(spacing) && $defined(spacing)
) { ) {
this._native.setAttribute('stroke-dasharray', `${length},${spacing}`); this._native.setAttribute('stroke-dasharray', `${length}${spacing}`);
} else { } else {
this._native.setAttribute('stroke-dasharray', ''); this._native.setAttribute('stroke-dasharray', '');
} }
}, }
_updateStyle() { _updateStyle() {
let style = ''; let style = '';
@ -70,7 +69,7 @@ const ArrowPeer = new Class({
} }
} }
this._native.setAttribute('style', style); this._native.setAttribute('style', style);
}, }
_redraw() { _redraw() {
let x; let x;
@ -110,7 +109,7 @@ const ArrowPeer = new Class({
+ `L${xp + this._fromPoint.x},${yp + this._fromPoint.y}`; + `L${xp + this._fromPoint.x},${yp + this._fromPoint.y}`;
this._native.setAttribute('d', path); this._native.setAttribute('d', path);
} }
}, }
}); }
export default ArrowPeer; export default ArrowPeer;

67
packages/web2d/src/components/peer/svg/CurvedLinePeer.js
View File

@ -19,11 +19,10 @@ import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
import Point from '../../Point'; import Point from '../../Point';
const CurvedLinePeer = new Class({ class CurvedLinePeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'path');
const svgElement = window.document.createElementNS(this.svgNamespace, 'path'); super(svgElement);
this.parent(svgElement);
this._style = { fill: '#495879' }; this._style = { fill: '#495879' };
this._updateStyle(); this._updateStyle();
this._customControlPoint_1 = false; this._customControlPoint_1 = false;
@ -31,7 +30,7 @@ const CurvedLinePeer = new Class({
this._control1 = new Point(); this._control1 = new Point();
this._control2 = new Point(); this._control2 = new Point();
this._lineStyle = true; this._lineStyle = true;
}, }
setSrcControlPoint(control) { setSrcControlPoint(control) {
this._customControlPoint_1 = true; this._customControlPoint_1 = true;
@ -42,7 +41,7 @@ const CurvedLinePeer = new Class({
this._control1.y = parseInt(this._control1.y, 10); this._control1.y = parseInt(this._control1.y, 10);
} }
if (change) this._updatePath(); if (change) this._updatePath();
}, }
setDestControlPoint(control) { setDestControlPoint(control) {
this._customControlPoint_2 = true; this._customControlPoint_2 = true;
@ -53,64 +52,64 @@ const CurvedLinePeer = new Class({
this._control2.y = parseInt(this._control2.y, 10); this._control2.y = parseInt(this._control2.y, 10);
} }
if (change) this._updatePath(); if (change) this._updatePath();
}, }
isSrcControlPointCustom() { isSrcControlPointCustom() {
return this._customControlPoint_1; return this._customControlPoint_1;
}, }
isDestControlPointCustom() { isDestControlPointCustom() {
return this._customControlPoint_2; return this._customControlPoint_2;
}, }
setIsSrcControlPointCustom(isCustom) { setIsSrcControlPointCustom(isCustom) {
this._customControlPoint_1 = isCustom; this._customControlPoint_1 = isCustom;
}, }
setIsDestControlPointCustom(isCustom) { setIsDestControlPointCustom(isCustom) {
this._customControlPoint_2 = isCustom; this._customControlPoint_2 = isCustom;
}, }
getControlPoints() { getControlPoints() {
return [this._control1, this._control2]; return [this._control1, this._control2];
}, }
setFrom(x1, y1) { setFrom(x1, y1) {
const change = this._x1 !== parseInt(x1, 10) || this._y1 !== parseInt(y1, 10); const change = this._x1 !== parseInt(x1, 10) || this._y1 !== parseInt(y1, 10);
this._x1 = parseInt(x1, 10); this._x1 = parseInt(x1, 10);
this._y1 = parseInt(y1, 10); this._y1 = parseInt(y1, 10);
if (change) this._updatePath(); if (change) this._updatePath();
}, }
setTo(x2, y2) { setTo(x2, y2) {
const change = this._x2 !== parseInt(x2, 10) || this._y2 !== parseInt(y2, 10); const change = this._x2 !== parseInt(x2, 10) || this._y2 !== parseInt(y2, 10);
this._x2 = parseInt(x2, 10); this._x2 = parseInt(x2, 10);
this._y2 = parseInt(y2, 10); this._y2 = parseInt(y2, 10);
if (change) this._updatePath(); if (change) this._updatePath();
}, }
getFrom() { getFrom() {
return new Point(this._x1, this._y1); return new Point(this._x1, this._y1);
}, }
getTo() { getTo() {
return new Point(this._x2, this._y2); return new Point(this._x2, this._y2);
}, }
setStrokeWidth(width) { setStrokeWidth(width) {
this._style['stroke-width'] = width; this._style['stroke-width'] = width;
this._updateStyle(); this._updateStyle();
}, }
setColor(color) { setColor(color) {
this._style.stroke = color; this._style.stroke = color;
this._style.fill = color; this._style.fill = color;
this._updateStyle(); this._updateStyle();
}, }
updateLine(avoidControlPointFix) { updateLine(avoidControlPointFix) {
this._updatePath(avoidControlPointFix); this._updatePath(avoidControlPointFix);
}, }
setLineStyle(style) { setLineStyle(style) {
this._lineStyle = style; this._lineStyle = style;
@ -122,29 +121,29 @@ const CurvedLinePeer = new Class({
} }
this._updateStyle(); this._updateStyle();
this.updateLine(); this.updateLine();
}, }
getLineStyle() { getLineStyle() {
return this._lineStyle; return this._lineStyle;
}, }
setShowEndArrow(visible) { setShowEndArrow(visible) {
this._showEndArrow = visible; this._showEndArrow = visible;
this.updateLine(); this.updateLine();
}, }
isShowEndArrow() { isShowEndArrow() {
return this._showEndArrow; return this._showEndArrow;
}, }
setShowStartArrow(visible) { setShowStartArrow(visible) {
this._showStartArrow = visible; this._showStartArrow = visible;
this.updateLine(); this.updateLine();
}, }
isShowStartArrow() { isShowStartArrow() {
return this._showStartArrow; return this._showStartArrow;
}, }
_updatePath(avoidControlPointFix) { _updatePath(avoidControlPointFix) {
if ( if (
@ -163,7 +162,7 @@ const CurvedLinePeer = new Class({
}`; }`;
this._native.setAttribute('d', path); this._native.setAttribute('d', path);
} }
}, }
_updateStyle() { _updateStyle() {
let style = ''; let style = '';
@ -173,10 +172,10 @@ const CurvedLinePeer = new Class({
} }
} }
this._native.setAttribute('style', style); this._native.setAttribute('style', style);
}, }
// TODO: deduplicate this method, extracted from mindplot/src/components/util/Shape.js to avoid circular ref // TODO: deduplicate this method, extracted from mindplot/src/components/util/Shape.js to avoid circular ref
_calculateDefaultControlPoints(srcPos, tarPos) { static _calculateDefaultControlPoints(srcPos, tarPos) {
const y = srcPos.y - tarPos.y; const y = srcPos.y - tarPos.y;
const x = srcPos.x - tarPos.x; const x = srcPos.x - tarPos.x;
const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0. const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0.
@ -197,11 +196,11 @@ const CurvedLinePeer = new Class({
new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-srcPos.x + x1, -srcPos.y + y1),
new Point(-tarPos.x + x2, -tarPos.y + y2), new Point(-tarPos.x + x2, -tarPos.y + y2),
]; ];
}, }
_calculateAutoControlPoints(avoidControlPointFix) { _calculateAutoControlPoints(avoidControlPointFix) {
// Both points available, calculate real points // Both points available, calculate real points
const defaultpoints = this._calculateDefaultControlPoints( const defaultpoints = CurvedLinePeer._calculateDefaultControlPoints(
new Point(this._x1, this._y1), new Point(this._x1, this._y1),
new Point(this._x2, this._y2), new Point(this._x2, this._y2),
); );
@ -219,7 +218,7 @@ const CurvedLinePeer = new Class({
this._control2.x = defaultpoints[1].x; this._control2.x = defaultpoints[1].x;
this._control2.y = defaultpoints[1].y; this._control2.y = defaultpoints[1].y;
} }
}, }
setDashed(length, spacing) { setDashed(length, spacing) {
if ($defined(length) && $defined(spacing)) { if ($defined(length) && $defined(spacing)) {
@ -227,7 +226,7 @@ const CurvedLinePeer = new Class({
} else { } else {
this._native.setAttribute('stroke-dasharray', ''); this._native.setAttribute('stroke-dasharray', '');
} }
}, }
}); }
export default CurvedLinePeer; export default CurvedLinePeer;

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

@ -20,8 +20,8 @@ import { $assert, $defined } from '@wisemapping/core-js';
import EventUtils from '../utils/EventUtils'; import EventUtils from '../utils/EventUtils';
import TransformUtil from '../utils/TransformUtils'; import TransformUtil from '../utils/TransformUtils';
const ElementPeer = new Class({ class ElementPeer {
initialize(svgElement) { constructor(svgElement) {
this._native = svgElement; this._native = svgElement;
if (!this._native.addEvent) { if (!this._native.addEvent) {
// Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811 // Hack bug: https://bugzilla.mozilla.org/show_bug.cgi?id=740811
@ -35,11 +35,11 @@ const ElementPeer = new Class({
this._size = { width: 1, height: 1 }; this._size = { width: 1, height: 1 };
this._changeListeners = {}; this._changeListeners = {};
// http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm // http://support.adobe.com/devsup/devsup.nsf/docs/50493.htm
}, }
setChildren(children) { setChildren(children) {
this._children = children; this._children = children;
}, }
getChildren() { getChildren() {
let result = this._children; let result = this._children;
@ -48,28 +48,28 @@ const ElementPeer = new Class({
this._children = result; this._children = result;
} }
return result; return result;
}, }
getParent() { getParent() {
return this._parent; return this._parent;
}, }
setParent(parent) { setParent(parent) {
this._parent = parent; this._parent = parent;
}, }
append(elementPeer) { append(elementPeer) {
// Store parent and child relationship. // Store parent and child relationship.
elementPeer.setParent(this); elementPeer.setParent(this);
const children = this.getChildren(); const children = this.getChildren();
children.include(elementPeer); children.push(elementPeer);
// Append element as a child. // Append element as a child.
this._native.appendChild(elementPeer._native); this._native.appendChild(elementPeer._native);
// Broadcast events ... // Broadcast events ...
EventUtils.broadcastChangeEvent(this, 'strokeStyle'); EventUtils.broadcastChangeEvent(this, 'strokeStyle');
}, }
removeChild(elementPeer) { removeChild(elementPeer) {
// Store parent and child relationship. // Store parent and child relationship.
@ -87,7 +87,7 @@ const ElementPeer = new Class({
// Append element as a child. // Append element as a child.
this._native.removeChild(elementPeer._native); this._native.removeChild(elementPeer._native);
}, }
/** /**
* http://www.w3.org/TR/DOM-Level-3-Events/events.html * http://www.w3.org/TR/DOM-Level-3-Events/events.html
@ -95,19 +95,19 @@ const ElementPeer = new Class({
*/ */
addEvent(type, listener) { addEvent(type, listener) {
$(this._native).bind(type, listener); $(this._native).bind(type, listener);
}, }
trigger(type, event) { trigger(type, event) {
$(this._native).trigger(type, event); $(this._native).trigger(type, event);
}, }
cloneEvents(from) { cloneEvents(from) {
this._native.cloneEvents(from); this._native.cloneEvents(from);
}, }
removeEvent(type, listener) { removeEvent(type, listener) {
$(this._native).unbind(type, listener); $(this._native).unbind(type, listener);
}, }
setSize(width, height) { setSize(width, height) {
if ($defined(width) && this._size.width !== parseInt(width, 10)) { if ($defined(width) && this._size.width !== parseInt(width, 10)) {
@ -121,11 +121,11 @@ const ElementPeer = new Class({
} }
EventUtils.broadcastChangeEvent(this, 'strokeStyle'); EventUtils.broadcastChangeEvent(this, 'strokeStyle');
}, }
getSize() { getSize() {
return { width: this._size.width, height: this._size.height }; return { width: this._size.width, height: this._size.height };
}, }
setFill(color, opacity) { setFill(color, opacity) {
if ($defined(color)) { if ($defined(color)) {
@ -134,13 +134,13 @@ const ElementPeer = new Class({
if ($defined(opacity)) { if ($defined(opacity)) {
this._native.setAttribute('fill-opacity', opacity); this._native.setAttribute('fill-opacity', opacity);
} }
}, }
getFill() { getFill() {
const color = this._native.getAttribute('fill'); const color = this._native.getAttribute('fill');
const opacity = this._native.getAttribute('fill-opacity'); const opacity = this._native.getAttribute('fill-opacity');
return { color, opacity: Number(opacity) }; return { color, opacity: Number(opacity) };
}, }
getStroke() { getStroke() {
const vmlStroke = this._native; const vmlStroke = this._native;
@ -154,7 +154,7 @@ const ElementPeer = new Class({
opacity, opacity,
width, width,
}; };
}, }
setStroke(width, style, color, opacity) { setStroke(width, style, color, opacity) {
if ($defined(width)) { if ($defined(width)) {
@ -165,7 +165,7 @@ const ElementPeer = new Class({
} }
if ($defined(style)) { if ($defined(style)) {
// Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale. // Scale the dash array in order to be equal to VML. In VML, stroke style doesn't scale.
const dashArrayPoints = this.__stokeStyleToStrokDasharray[style]; const dashArrayPoints = ElementPeer.stokeStyleToStrokDasharray()[style];
const scale = 1 / TransformUtil.workoutScale(this).width; const scale = 1 / TransformUtil.workoutScale(this).width;
let strokeWidth = this._native.getAttribute('stroke-width'); let strokeWidth = this._native.getAttribute('stroke-width');
@ -187,19 +187,19 @@ const ElementPeer = new Class({
if ($defined(opacity)) { if ($defined(opacity)) {
this._native.setAttribute('stroke-opacity', opacity); this._native.setAttribute('stroke-opacity', opacity);
} }
}, }
/* /*
* style='visibility: visible' * style='visibility: visible'
*/ */
setVisibility(isVisible) { setVisibility(isVisible) {
this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden'); this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden');
}, }
isVisible() { isVisible() {
const visibility = this._native.getAttribute('visibility'); const visibility = this._native.getAttribute('visibility');
return !(visibility === 'hidden'); return !(visibility === 'hidden');
}, }
updateStrokeStyle() { updateStrokeStyle() {
const strokeStyle = this._stokeStyle; const strokeStyle = this._stokeStyle;
@ -208,7 +208,7 @@ const ElementPeer = new Class({
this.setStroke(null, strokeStyle); this.setStroke(null, strokeStyle);
} }
} }
}, }
attachChangeEventListener(type, listener) { attachChangeEventListener(type, listener) {
const listeners = this.getChangeEventListeners(type); const listeners = this.getChangeEventListeners(type);
@ -216,7 +216,7 @@ const ElementPeer = new Class({
throw new Error('Listener can not be null'); throw new Error('Listener can not be null');
} }
listeners.push(listener); listeners.push(listener);
}, }
getChangeEventListeners(type) { getChangeEventListeners(type) {
let listeners = this._changeListeners[type]; let listeners = this._changeListeners[type];
@ -225,35 +225,38 @@ const ElementPeer = new Class({
this._changeListeners[type] = listeners; this._changeListeners[type] = listeners;
} }
return listeners; return listeners;
}, }
/** /**
* Move element to the front * Move element to the front
*/ */
moveToFront() { moveToFront() {
this._native.parentNode.appendChild(this._native); this._native.parentNode.appendChild(this._native);
}, }
/** /**
* Move element to the back * Move element to the back
*/ */
moveToBack() { moveToBack() {
this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild); this._native.parentNode.insertBefore(this._native, this._native.parentNode.firstChild);
}, }
setCursor(type) { setCursor(type) {
this._native.style.cursor = type; this._native.style.cursor = type;
}, }
});
ElementPeer.prototype.svgNamespace = 'http://www.w3.org/2000/svg'; static stokeStyleToStrokDasharray() {
ElementPeer.prototype.linkNamespace = 'http://www.w3.org/1999/xlink'; return {
ElementPeer.prototype.__stokeStyleToStrokDasharray = {
solid: [], solid: [],
dot: [1, 3], dot: [1, 3],
dash: [4, 3], dash: [4, 3],
longdash: [10, 2], longdash: [10, 2],
dashdot: [5, 3, 1, 3], dashdot: [5, 3, 1, 3],
}; };
}
}
ElementPeer.svgNamespace = 'http://www.w3.org/2000/svg';
ElementPeer.linkNamespace = 'http://www.w3.org/1999/xlink';
export default ElementPeer; export default ElementPeer;

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

@ -18,17 +18,16 @@
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
const ElipsePeer = new Class({ class ElipsePeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'ellipse');
const svgElement = window.document.createElementNS(this.svgNamespace, 'ellipse'); super(svgElement);
this.parent(svgElement);
this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
this._position = { x: 0, y: 0 }; this._position = { x: 0, y: 0 };
}, }
setSize(width, height) { setSize(width, height) {
this.parent(width, height); super.setSize(width, height);
if ($defined(width)) { if ($defined(width)) {
this._native.setAttribute('rx', width / 2); this._native.setAttribute('rx', width / 2);
} }
@ -39,7 +38,7 @@ const ElipsePeer = new Class({
const pos = this.getPosition(); const pos = this.getPosition();
this.setPosition(pos.x, pos.y); this.setPosition(pos.x, pos.y);
}, }
setPosition(pcx, pcy) { setPosition(pcx, pcy) {
const size = this.getSize(); const size = this.getSize();
@ -54,11 +53,11 @@ const ElipsePeer = new Class({
if ($defined(cy)) { if ($defined(cy)) {
this._native.setAttribute('cy', cy); this._native.setAttribute('cy', cy);
} }
}, }
getPosition() { getPosition() {
return this._position; return this._position;
}, }
}); }
export default ElipsePeer; export default ElipsePeer;

28
packages/web2d/src/components/peer/svg/Font.js
View File

@ -17,12 +17,12 @@
*/ */
import { $defined } from '@wisemapping/core-js'; import { $defined } from '@wisemapping/core-js';
const Font = new Class({ class Font {
initialize() { constructor() {
this._size = 10; this._size = 10;
this._style = 'normal'; this._style = 'normal';
this._weight = 'normal'; this._weight = 'normal';
}, }
init(args) { init(args) {
if ($defined(args.size)) { if ($defined(args.size)) {
@ -34,7 +34,7 @@ const Font = new Class({
if ($defined(args.weight)) { if ($defined(args.weight)) {
this._weight = args.weight; this._weight = args.weight;
} }
}, }
getHtmlSize(scale) { getHtmlSize(scale) {
let result = 0; let result = 0;
@ -50,35 +50,35 @@ const Font = new Class({
} }
return result; return result;
}, }
getGraphSize() { getGraphSize() {
return (this._size * 43) / 32; return (this._size * 43) / 32;
}, }
getSize() { getSize() {
return parseInt(this._size, 10); return parseInt(this._size, 10);
}, }
getStyle() { getStyle() {
return this._style; return this._style;
}, }
getWeight() { getWeight() {
return this._weight; return this._weight;
}, }
setSize(size) { setSize(size) {
this._size = size; this._size = size;
}, }
setStyle(style) { setStyle(style) {
this._style = style; this._style = style;
}, }
setWeight(weight) { setWeight(weight) {
this._weight = weight; this._weight = weight;
}, }
getWidthMargin() { getWidthMargin() {
let result = 0; let result = 0;
@ -86,7 +86,7 @@ const Font = new Class({
result = 4; result = 4;
} }
return result; return result;
}, }
}); }
export default Font; export default Font;

37
packages/web2d/src/components/peer/svg/GroupPeer.js
View File

@ -19,17 +19,16 @@ import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
import EventUtils from '../utils/EventUtils'; import EventUtils from '../utils/EventUtils';
const GroupPeer = new Class({ class GroupPeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'g');
const svgElement = window.document.createElementNS(this.svgNamespace, 'g'); super(svgElement);
this.parent(svgElement);
this._native.setAttribute('preserveAspectRatio', 'none'); this._native.setAttribute('preserveAspectRatio', 'none');
this._coordSize = { width: 1, height: 1 }; this._coordSize = { width: 1, height: 1 };
this._native.setAttribute('focusable', 'true'); this._native.setAttribute('focusable', 'true');
this._position = { x: 0, y: 0 }; this._position = { x: 0, y: 0 };
this._coordOrigin = { x: 0, y: 0 }; this._coordOrigin = { x: 0, y: 0 };
}, }
setCoordSize(width, height) { setCoordSize(width, height) {
const change = this._coordSize.width !== width || this._coordSize.height !== height; const change = this._coordSize.width !== width || this._coordSize.height !== height;
@ -40,11 +39,11 @@ const GroupPeer = new Class({
this.updateTransform(); this.updateTransform();
} }
EventUtils.broadcastChangeEvent(this, 'strokeStyle'); EventUtils.broadcastChangeEvent(this, 'strokeStyle');
}, }
getCoordSize() { getCoordSize() {
return { width: this._coordSize.width, height: this._coordSize.height }; return { width: this._coordSize.width, height: this._coordSize.height };
}, }
/** /**
* http://www.w3.org/TR/SVG/coords.html#TransformAttribute * http://www.w3.org/TR/SVG/coords.html#TransformAttribute
@ -93,11 +92,11 @@ const GroupPeer = new Class({
sy = Number.isNaN(sy) ? 0 : sy; sy = Number.isNaN(sy) ? 0 : sy;
this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`); this._native.setAttribute('transform', `translate(${cx},${cy}) scale(${sx},${sy})`);
}, }
setOpacity(value) { setOpacity(value) {
this._native.setAttribute('opacity', value); this._native.setAttribute('opacity', value);
}, }
setCoordOrigin(x, y) { setCoordOrigin(x, y) {
const change = x !== this._coordOrigin.x || y !== this._coordOrigin.y; const change = x !== this._coordOrigin.x || y !== this._coordOrigin.y;
@ -111,15 +110,15 @@ const GroupPeer = new Class({
if (change) { if (change) {
this.updateTransform(); this.updateTransform();
} }
}, }
setSize(width, height) { setSize(width, height) {
const change = width !== this._size.width || height !== this._size.height; const change = width !== this._size.width || height !== this._size.height;
this.parent(width, height); super.setSize(width, height);
if (change) { if (change) {
this.updateTransform(); this.updateTransform();
} }
}, }
setPosition(x, y) { setPosition(x, y) {
const change = x !== this._position.x || y !== this._position.y; const change = x !== this._position.x || y !== this._position.y;
@ -133,20 +132,20 @@ const GroupPeer = new Class({
if (change) { if (change) {
this.updateTransform(); this.updateTransform();
} }
}, }
getPosition() { getPosition() {
return { x: this._position.x, y: this._position.y }; return { x: this._position.x, y: this._position.y };
}, }
append(child) { append(child) {
this.parent(child); super.append(child);
EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize'); EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize');
}, }
getCoordOrigin() { getCoordOrigin() {
return { x: this._coordOrigin.x, y: this._coordOrigin.y }; return { x: this._coordOrigin.x, y: this._coordOrigin.y };
}, }
}); }
export default GroupPeer; export default GroupPeer;

23
packages/web2d/src/components/peer/svg/ImagePeer.js
View File

@ -17,34 +17,33 @@
*/ */
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
const ImagePeer = new Class({ class ImagePeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'image');
const svgElement = window.document.createElementNS(this.svgNamespace, 'image'); super(svgElement);
this.parent(svgElement);
this._position = { x: 0, y: 0 }; this._position = { x: 0, y: 0 };
this._href = ''; this._href = '';
this._native.setAttribute('preserveAspectRatio', 'none'); this._native.setAttribute('preserveAspectRatio', 'none');
}, }
setPosition(x, y) { setPosition(x, y) {
this._position = { x, y }; this._position = { x, y };
this._native.setAttribute('y', y); this._native.setAttribute('y', y);
this._native.setAttribute('x', x); this._native.setAttribute('x', x);
}, }
getPosition() { getPosition() {
return this._position; return this._position;
}, }
setHref(url) { setHref(url) {
this._native.setAttributeNS(this.linkNamespace, 'href', url); this._native.setAttributeNS(ElementPeer.linkNamespace, 'href', url);
this._href = url; this._href = url;
}, }
getHref() { getHref() {
return this._href; return this._href;
}, }
}); }
export default ImagePeer; export default ImagePeer;

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

@ -19,39 +19,39 @@ import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
import Point from '../../Point'; import Point from '../../Point';
const LinePeer = new Class({ class LinePeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'line');
const svgElement = window.document.createElementNS(this.svgNamespace, 'line'); super(svgElement);
this.parent(svgElement);
this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
}, }
setFrom(x1, y1) { setFrom(x1, y1) {
this._x1 = x1; this._x1 = x1;
this._y1 = y1; this._y1 = y1;
this._native.setAttribute('x1', x1); this._native.setAttribute('x1', x1);
this._native.setAttribute('y1', y1); this._native.setAttribute('y1', y1);
}, }
setTo(x2, y2) { setTo(x2, y2) {
this._x2 = x2; this._x2 = x2;
this._y2 = y2; this._y2 = y2;
this._native.setAttribute('x2', x2); this._native.setAttribute('x2', x2);
this._native.setAttribute('y2', y2); this._native.setAttribute('y2', y2);
}, }
getFrom() { getFrom() {
return new Point(this._x1, this._y1); return new Point(this._x1, this._y1);
}, }
getTo() { getTo() {
return new Point(this._x2, this._y2); return new Point(this._x2, this._y2);
}, }
/* /*
* http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end * http://www.zvon.org/HowTo/Output/howto_jj_svg_27.html?at=marker-end
*/ */
// eslint-disable-next-line class-methods-use-this
setArrowStyle(startStyle, endStyle) { setArrowStyle(startStyle, endStyle) {
if ($defined(startStyle)) { if ($defined(startStyle)) {
// Todo: This must be implemented ... // Todo: This must be implemented ...
@ -60,7 +60,7 @@ const LinePeer = new Class({
if ($defined(endStyle)) { if ($defined(endStyle)) {
// Todo: This must be implemented ... // Todo: This must be implemented ...
} }
}, }
}); }
export default LinePeer; export default LinePeer;

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

@ -19,43 +19,42 @@ import { $defined } from '@wisemapping/core-js';
import * as PolyLineUtils from '../utils/PolyLineUtils'; import * as PolyLineUtils from '../utils/PolyLineUtils';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
const PolyLinePeer = new Class({ class PolyLinePeer extends ElementPeer {
Extends: ElementPeer, constructor() {
initialize() { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'polyline');
const svgElement = window.document.createElementNS(this.svgNamespace, 'polyline'); super(svgElement);
this.parent(svgElement);
this.setFill('none'); this.setFill('none');
this.breakDistance = 10; this.breakDistance = 10;
}, }
setFrom(x1, y1) { setFrom(x1, y1) {
this._x1 = x1; this._x1 = x1;
this._y1 = y1; this._y1 = y1;
this._updatePath(); this._updatePath();
}, }
setTo(x2, y2) { setTo(x2, y2) {
this._x2 = x2; this._x2 = x2;
this._y2 = y2; this._y2 = y2;
this._updatePath(); this._updatePath();
}, }
setStrokeWidth(width) { setStrokeWidth(width) {
this._native.setAttribute('stroke-width', width); this._native.setAttribute('stroke-width', width);
}, }
setColor(color) { setColor(color) {
this._native.setAttribute('stroke', color); this._native.setAttribute('stroke', color);
}, }
setStyle(style) { setStyle(style) {
this._style = style; this._style = style;
this._updatePath(); this._updatePath();
}, }
getStyle() { getStyle() {
return this._style; return this._style;
}, }
_updatePath() { _updatePath() {
if (this._style === 'Curved') { if (this._style === 'Curved') {
@ -65,7 +64,7 @@ const PolyLinePeer = new Class({
} else { } else {
this._updateCurvePath(); this._updateCurvePath();
} }
}, }
_updateStraightPath() { _updateStraightPath() {
if ( if (
@ -84,7 +83,7 @@ const PolyLinePeer = new Class({
); );
this._native.setAttribute('points', path); this._native.setAttribute('points', path);
} }
}, }
_updateMiddleCurvePath() { _updateMiddleCurvePath() {
const x1 = this._x1; const x1 = this._x1;
@ -112,7 +111,7 @@ const PolyLinePeer = new Class({
} ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`; } ${middlex}, ${y2 - 10 * signy} ${middlex + 10 * signx}, ${y2} ${x2}, ${y2}`;
this._native.setAttribute('points', path); this._native.setAttribute('points', path);
} }
}, }
_updateCurvePath() { _updateCurvePath() {
if ( if (
@ -131,7 +130,7 @@ const PolyLinePeer = new Class({
); );
this._native.setAttribute('points', path); this._native.setAttribute('points', path);
} }
}, }
}); }
export default PolyLinePeer; export default PolyLinePeer;

22
packages/web2d/src/components/peer/svg/RectPeer.js
View File

@ -21,14 +21,13 @@ import ElementPeer from './ElementPeer';
/** /**
* http://www.w3.org/TR/SVG/shapes.html#RectElement * http://www.w3.org/TR/SVG/shapes.html#RectElement
*/ */
const RectPeer = new Class({ class RectPeer extends ElementPeer {
Extends: ElementPeer, constructor(arc) {
initialize(arc) { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'rect');
const svgElement = window.document.createElementNS(this.svgNamespace, 'rect'); super(svgElement);
this.parent(svgElement);
this._arc = arc; this._arc = arc;
this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle); this.attachChangeEventListener('strokeStyle', ElementPeer.prototype.updateStrokeStyle);
}, }
setPosition(x, y) { setPosition(x, y) {
if ($defined(x)) { if ($defined(x)) {
@ -37,17 +36,16 @@ const RectPeer = new Class({
if ($defined(y)) { if ($defined(y)) {
this._native.setAttribute('y', parseInt(y, 10)); this._native.setAttribute('y', parseInt(y, 10));
} }
}, }
getPosition() { getPosition() {
const x = this._native.getAttribute('x'); const x = this._native.getAttribute('x');
const y = this._native.getAttribute('y'); const y = this._native.getAttribute('y');
return { x: parseInt(x, 10), y: parseInt(y, 10) }; return { x: parseInt(x, 10), y: parseInt(y, 10) };
}, }
setSize(width, height) { setSize(width, height) {
this.parent(width, height); super.setSize(width, height);
const min = width < height ? width : height; const min = width < height ? width : height;
if ($defined(this._arc)) { if ($defined(this._arc)) {
// Transform percentages to SVG format. // Transform percentages to SVG format.
@ -55,7 +53,7 @@ const RectPeer = new Class({
this._native.setAttribute('rx', arc); this._native.setAttribute('rx', arc);
this._native.setAttribute('ry', arc); this._native.setAttribute('ry', arc);
} }
}, }
}); }
export default RectPeer; export default RectPeer;

16
packages/web2d/src/components/peer/svg/TahomaFont.js
View File

@ -17,20 +17,20 @@
*/ */
import Font from './Font'; import Font from './Font';
const TahomaFont = new Class({ class TahomaFont extends Font {
Extends: Font, constructor() {
initialize() { super();
this.parent();
this._fontFamily = 'tahoma'; this._fontFamily = 'tahoma';
}, }
getFontFamily() { getFontFamily() {
return this._fontFamily; return this._fontFamily;
}, }
// eslint-disable-next-line class-methods-use-this
getFont() { getFont() {
return Font.TAHOMA; return Font.TAHOMA;
}, }
}); }
export default TahomaFont; export default TahomaFont;

58
packages/web2d/src/components/peer/svg/TextPeer.js
View File

@ -19,27 +19,26 @@ import { $defined } from '@wisemapping/core-js';
import $ from '@libraries/jquery-2.1.0'; import $ from '@libraries/jquery-2.1.0';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
const TextPeer = new Class({ class TextPeer extends ElementPeer {
Extends: ElementPeer, constructor(Font) {
initialize(Font) { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'text');
super(svgElement);
this.Font = Font; this.Font = Font;
const svgElement = window.document.createElementNS(this.svgNamespace, 'text');
this.parent(svgElement);
this._position = { x: 0, y: 0 }; this._position = { x: 0, y: 0 };
this._font = new Font('Arial', this); this._font = new Font('Arial', this);
}, }
append(element) { append(element) {
this._native.appendChild(element._native); this._native.appendChild(element._native);
}, }
setTextAlignment(align) { setTextAlignment(align) {
this._textAlign = align; this._textAlign = align;
}, }
getTextAlignment() { getTextAlignment() {
return $defined(this._textAlign) ? this._textAlign : 'left'; return $defined(this._textAlign) ? this._textAlign : 'left';
}, }
setText(text) { setText(text) {
// Remove all previous nodes ... // Remove all previous nodes ...
@ -61,11 +60,11 @@ const TextPeer = new Class({
me._native.appendChild(tspan); me._native.appendChild(tspan);
}); });
} }
}, }
getText() { getText() {
return this._text; return this._text;
}, }
setPosition(x, y) { setPosition(x, y) {
this._position = { x, y }; this._position = { x, y };
@ -74,15 +73,15 @@ const TextPeer = new Class({
// tspan must be positioned manually. // tspan must be positioned manually.
$(this._native).children('tspan').attr('x', x); $(this._native).children('tspan').attr('x', x);
}, }
getPosition() { getPosition() {
return this._position; return this._position;
}, }
getNativePosition() { getNativePosition() {
return $(this._native).position(); return $(this._native).position();
}, }
setFont(font, size, style, weight) { setFont(font, size, style, weight) {
if ($defined(font)) { if ($defined(font)) {
@ -98,41 +97,41 @@ const TextPeer = new Class({
this._font.setSize(size); this._font.setSize(size);
} }
this._updateFontStyle(); this._updateFontStyle();
}, }
_updateFontStyle() { _updateFontStyle() {
this._native.setAttribute('font-family', this._font.getFontFamily()); this._native.setAttribute('font-family', this._font.getFontFamily());
this._native.setAttribute('font-size', this._font.getGraphSize()); this._native.setAttribute('font-size', this._font.getGraphSize());
this._native.setAttribute('font-style', this._font.getStyle()); this._native.setAttribute('font-style', this._font.getStyle());
this._native.setAttribute('font-weight', this._font.getWeight()); this._native.setAttribute('font-weight', this._font.getWeight());
}, }
setColor(color) { setColor(color) {
this._native.setAttribute('fill', color); this._native.setAttribute('fill', color);
}, }
getColor() { getColor() {
return this._native.getAttribute('fill'); return this._native.getAttribute('fill');
}, }
setTextSize(size) { setTextSize(size) {
this._font.setSize(size); this._font.setSize(size);
this._updateFontStyle(); this._updateFontStyle();
}, }
setContentSize(width, height) { setContentSize(width, height) {
this._native.xTextSize = `${width.toFixed(1)},${height.toFixed(1)}`; this._native.xTextSize = `${width.toFixed(1)},${height.toFixed(1)}`;
}, }
setStyle(style) { setStyle(style) {
this._font.setStyle(style); this._font.setStyle(style);
this._updateFontStyle(); this._updateFontStyle();
}, }
setWeight(weight) { setWeight(weight) {
this._font.setWeight(weight); this._font.setWeight(weight);
this._updateFontStyle(); this._updateFontStyle();
}, }
setFontFamily(family) { setFontFamily(family) {
const oldFont = this._font; const oldFont = this._font;
@ -141,7 +140,7 @@ const TextPeer = new Class({
this._font.setStyle(oldFont.getStyle()); this._font.setStyle(oldFont.getStyle());
this._font.setWeight(oldFont.getWeight()); this._font.setWeight(oldFont.getWeight());
this._updateFontStyle(); this._updateFontStyle();
}, }
getFont() { getFont() {
return { return {
@ -150,12 +149,12 @@ const TextPeer = new Class({
style: this._font.getStyle(), style: this._font.getStyle(),
weight: this._font.getWeight(), weight: this._font.getWeight(),
}; };
}, }
setSize(size) { setSize(size) {
this._font.setSize(size); this._font.setSize(size);
this._updateFontStyle(); this._updateFontStyle();
}, }
getWidth() { getWidth() {
let computedWidth; let computedWidth;
@ -170,13 +169,14 @@ const TextPeer = new Class({
computedWidth = bbox.width; computedWidth = bbox.width;
} }
} catch (e) { } catch (e) {
console.error(e);
computedWidth = 10; computedWidth = 10;
} }
let width = parseInt(computedWidth, 10); let width = parseInt(computedWidth, 10);
width += this._font.getWidthMargin(); width += this._font.getWidthMargin();
return width; return width;
}, }
getHeight() { getHeight() {
// Firefox hack for this // Firefox hack for this
@ -188,11 +188,11 @@ const TextPeer = new Class({
computedHeight = 10; computedHeight = 10;
} }
return parseInt(computedHeight, 10); return parseInt(computedHeight, 10);
}, }
getHtmlFontSize() { getHtmlFontSize() {
return this._font.getHtmlSize(); return this._font.getHtmlSize();
}, }
}); }
export default TextPeer; export default TextPeer;

16
packages/web2d/src/components/peer/svg/TimesFont.js
View File

@ -17,20 +17,20 @@
*/ */
import Font from './Font'; import Font from './Font';
const TimesFont = new Class({ class TimesFont extends Font {
Extends: Font, constructor() {
initialize() { super();
this.parent();
this._fontFamily = 'times'; this._fontFamily = 'times';
}, }
getFontFamily() { getFontFamily() {
return this._fontFamily; return this._fontFamily;
}, }
// eslint-disable-next-line class-methods-use-this
getFont() { getFont() {
return Font.TIMES; return Font.TIMES;
}, }
}); }
export default TimesFont; export default TimesFont;

16
packages/web2d/src/components/peer/svg/VerdanaFont.js
View File

@ -17,20 +17,20 @@
*/ */
import Font from './Font'; import Font from './Font';
const VerdanaFont = new Class({ class VerdanaFont extends Font {
Extends: Font, constructor() {
initialize() { super();
this.parent();
this._fontFamily = 'verdana'; this._fontFamily = 'verdana';
}, }
getFontFamily() { getFontFamily() {
return this._fontFamily; return this._fontFamily;
}, }
// eslint-disable-next-line class-methods-use-this
getFont() { getFont() {
return Font.VERDANA; return Font.VERDANA;
}, }
}); }
export default VerdanaFont; export default VerdanaFont;

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

@ -19,16 +19,15 @@ import { $defined } from '@wisemapping/core-js';
import ElementPeer from './ElementPeer'; import ElementPeer from './ElementPeer';
import EventUtils from '../utils/EventUtils'; import EventUtils from '../utils/EventUtils';
const WorkspacePeer = new Class({ class WorkspacePeer extends ElementPeer {
Extends: ElementPeer, constructor(element) {
initialize(element) { const svgElement = window.document.createElementNS(ElementPeer.svgNamespace, 'svg');
super(svgElement);
this._element = element; this._element = element;
const svgElement = window.document.createElementNS(this.svgNamespace, 'svg');
this.parent(svgElement);
this._native.setAttribute('focusable', 'true'); this._native.setAttribute('focusable', 'true');
this._native.setAttribute('id', 'workspace'); // this._native.setAttribute('id', 'workspace');
this._native.setAttribute('preserveAspectRatio', 'none'); this._native.setAttribute('preserveAspectRatio', 'none');
}, }
/** /**
* http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox attribute * http://www.w3.org/TR/SVG/coords.html 7.7 The viewBox attribute
@ -67,7 +66,7 @@ const WorkspacePeer = new Class({
this._native.setAttribute('viewBox', coords.join(' ')); this._native.setAttribute('viewBox', coords.join(' '));
this._native.setAttribute('preserveAspectRatio', 'none'); this._native.setAttribute('preserveAspectRatio', 'none');
EventUtils.broadcastChangeEvent(this, 'strokeStyle'); EventUtils.broadcastChangeEvent(this, 'strokeStyle');
}, }
getCoordSize() { getCoordSize() {
const viewBox = this._native.getAttribute('viewBox'); const viewBox = this._native.getAttribute('viewBox');
@ -76,7 +75,7 @@ const WorkspacePeer = new Class({
coords = viewBox.split(/ /); coords = viewBox.split(/ /);
} }
return { width: coords[2], height: coords[3] }; return { width: coords[2], height: coords[3] };
}, }
setCoordOrigin(x, y) { setCoordOrigin(x, y) {
const viewBox = this._native.getAttribute('viewBox'); const viewBox = this._native.getAttribute('viewBox');
@ -96,12 +95,12 @@ const WorkspacePeer = new Class({
} }
this._native.setAttribute('viewBox', coords.join(' ')); this._native.setAttribute('viewBox', coords.join(' '));
}, }
append(child) { append(child) {
this.parent(child); super.append(child);
EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize'); EventUtils.broadcastChangeEvent(child, 'onChangeCoordSize');
}, }
getCoordOrigin() { getCoordOrigin() {
const viewBox = this._native.getAttribute('viewBox'); const viewBox = this._native.getAttribute('viewBox');
@ -112,11 +111,12 @@ const WorkspacePeer = new Class({
const x = parseFloat(coords[0]); const x = parseFloat(coords[0]);
const y = parseFloat(coords[1]); const y = parseFloat(coords[1]);
return { x, y }; return { x, y };
}, }
// eslint-disable-next-line class-methods-use-this
getPosition() { getPosition() {
return { x: 0, y: 0 }; return { x: 0, y: 0 };
}, }
}); }
export default WorkspacePeer; export default WorkspacePeer;

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

@ -1,3 +1,20 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export const buildCurvedPath = (dist, x1, y1, x2, y2) => { export const buildCurvedPath = (dist, x1, y1, x2, y2) => {
let signx = 1; let signx = 1;
let signy = 1; let signy = 1;

47
packages/web2d/src/index.js Normal file
View File

@ -0,0 +1,47 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Workspace from './components/Workspace';
import Toolkit from './components/Toolkit';
import Elipse from './components/Elipse';
import Line from './components/Line';
import PolyLine from './components/PolyLine';
import CurvedLine from './components/CurvedLine';
import Arrow from './components/Arrow';
import Group from './components/Group';
import Rect from './components/Rect';
import Text from './components/Text';
import Font from './components/Font';
import Point from './components/Point';
import Image from './components/Image';
export {
Arrow,
CurvedLine,
Elipse,
Font,
Group,
Image,
Line,
Point,
PolyLine,
Rect,
Text,
Toolkit,
Workspace,
};

41
packages/web2d/src/web2d.js
View File

@ -1,41 +0,0 @@
import '@libraries/mootools-core-1.4.5';
// Utils
import eventUtils from '@utils/EventUtils';
import transformUtils from '@utils/TransformUtils';
// Import Components
import workspace from '@components/Workspace';
import toolkit from '@components/Toolkit';
import elipse from '@components/Elipse';
import line from '@components/Line';
import polyLine from '@components/PolyLine';
import curvedLine from '@components/CurvedLine';
import arrow from '@components/Arrow';
import group from '@components/Group';
import rect from '@components/Rect';
import text from '@components/Text';
import font from '@components/Font';
import point from '@components/Point';
import image from '@components/Image';
export default {
// Utils
EventUtils: eventUtils,
TransformUtils: transformUtils,
// Components
Arrow: arrow,
CurvedLine: curvedLine,
Elipse: elipse,
Font: font,
Group: group,
Image: image,
Line: line,
Point: point,
PolyLine: polyLine,
Rect: rect,
Text: text,
Toolkit: toolkit,
Workspace: workspace,
};

63
packages/web2d/test/playground/Grid.js Executable file
View File

@ -0,0 +1,63 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import $ from '@libraries/jquery-2.1.0';
class Grid {
constructor(parent, colums, rows) {
const cellSize = '10px';
this._parent = parent;
this._container = Grid._createContainer();
const tbody = $(this._container.firstChild.firstChild);
for (let i = 0; i < rows; i++) {
const trElement = $('<tr></tr>');
for (let j = 0; j < colums; j++) {
const tdElement = $('<td></td>');
tdElement.css({
width: cellSize,
height: cellSize,
borderWidth: '1px',
borderStyle: 'dashed',
borderColor: 'lightsteelblue',
});
trElement.append(tdElement);
}
tbody.append(trElement);
}
}
setPosition(x, y) {
this._container.style.left = x;
this._container.style.top = y;
}
render() {
$(this._parent).append(this._container);
}
static _createContainer() {
const result = window.document.createElement('div');
result.style.tableLayout = 'fixed';
result.style.borderCollapse = 'collapse';
result.style.emptyCells = 'show';
result.style.position = 'absolute';
result.innerHTML = '<table style="table-layout:fixed;border-collapse:collapse;empty-cells:show;"><tbody id="tableBody"></tbody></table>';
return result;
}
}
export default Grid ;

47
packages/web2d/test/playground/arrow.html
View File

@ -9,46 +9,10 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("200px", "200px");
var arrow = new web2d.Arrow();
arrow.setFrom(50, 50);
arrow.setControlPoint(new web2d.Point(-50, 0));
overflowWorkspace.append(arrow);
var arrow2 = new web2d.Arrow();
arrow2.setFrom(100, 50);
arrow2.setControlPoint(new web2d.Point(50, 50));
overflowWorkspace.append(arrow2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:30%" /> <col style="width:30%" />
@ -63,15 +27,6 @@
</td> </td>
</tr> </tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table> </table>
</body> </body>

22
packages/web2d/test/playground/arrow.js Normal file
View File

@ -0,0 +1,22 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Arrow, Point,
} from '../../src';
Toolkit.init();
const overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('200px', '200px');
const arrow = new Arrow();
arrow.setFrom(50, 50);
arrow.setControlPoint(new Point(-50, 0));
overflowWorkspace.append(arrow);
const arrow2 = new Arrow();
arrow2.setFrom(100, 50);
arrow2.setControlPoint(new Point(50, 50));
overflowWorkspace.append(arrow2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());

8
packages/web2d/test/playground/context-loader.js
View File

@ -1,8 +0,0 @@
import Grid from './utils';
import web2d from '../../src/web2d';
import $ from '@libraries/jquery-2.1.0';
global.Grid = Grid;
global.web2d = web2d;
global.$ = $;

49
packages/web2d/test/playground/curvedLine.html
View File

@ -9,47 +9,9 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("400px", "400px");
var line1 = new web2d.CurvedLine();
line1.setStyle(web2d.CurvedLine.SIMPLE_LINE);
line1.setFrom(200, 200);
line1.setTo(100, 100);
line1.setSrcControlPoint(new web2d.Point(-100, 0));
line1.setDestControlPoint(new web2d.Point(100, 0));
overflowWorkspace.append(line1);
var line2 = new web2d.CurvedLine();
line2.setStyle(web2d.CurvedLine.NICE_LINE);
line2.setFrom(0, 0);
line2.setTo(150, 90);
line2.setSrcControlPoint(new web2d.Point(100, 0));
line2.setDestControlPoint(new web2d.Point(-100, 0));
overflowWorkspace.append(line2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
@ -67,15 +29,6 @@
</td> </td>
</tr> </tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table> </table>
</body> </body>

26
packages/web2d/test/playground/curvedLine.js Normal file
View File

@ -0,0 +1,26 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, CurvedLine, Point,
} from '../../src';
Toolkit.init();
const overflowWorkspace = new Workspace({ fillColor: 'green' });
overflowWorkspace.setSize('400px', '400px');
const line1 = new CurvedLine();
line1.setStyle(CurvedLine.SIMPLE_LINE);
line1.setFrom(200, 200);
line1.setTo(100, 100);
line1.setSrcControlPoint(new Point(-100, 0));
line1.setDestControlPoint(new Point(100, 0));
overflowWorkspace.append(line1);
const line2 = new CurvedLine();
line2.setStyle(CurvedLine.NICE_LINE);
line2.setFrom(0, 0);
line2.setTo(150, 90);
line2.setSrcControlPoint(new Point(100, 0));
line2.setDestControlPoint(new Point(-100, 0));
overflowWorkspace.append(line2);
overflowWorkspace.addItAsChildTo($('#overflowExample').first());

125
packages/web2d/test/playground/events.html
View File

@ -1,5 +1,4 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
@ -8,136 +7,14 @@
td { td {
border: 1px solid black; border: 1px solid black;
} }
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<style type="text/css">
.eventForm { .eventForm {
float: left; float: left;
margin: 10px; margin: 10px;
} }
</style> </style>
<script type="text/javascript">
function EventLogger(type, element) {
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger(event) {
var oldColor = element.getAttribute('fillColor');
element.setFill("yellow");
alert("Event on:" + element.getType() + ", Type:" + type);
element.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function () {
this._enable = !this._enable;
if (this._enable) {
this._element.addEvent(this._type, this._listener);
} else {
this._element.removeEvent(this._type, this._listener);
}
return this._enable;
};
function MultipleEventHandler(type, element) {
this._listeners = [];
this._type = type;
this._element = element;
}
MultipleEventHandler.prototype.registerOneListener = function () {
var count = this._listeners.length;
var listener = function (event) {
alert("Listener #:" + count);
};
this._listeners.push(listener);
this._element.addEvent(this._type, listener);
}
MultipleEventHandler.prototype.listenerCount = function () {
return this._listeners.length;
}
MultipleEventHandler.prototype.unRegisterOneListener = function () {
if (this._listeners.length > 0) {
var listener = this._listeners.pop();
this._element.removeEvent(this._type, listener);
}
}
function initialize() {
web2d.Toolkit.init();
// Workspace with CoordOrigin(100,100);
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(150, 150);
var bigElipse = new web2d.Elipse();
bigElipse.setSize(100, 100);
bigElipse.setPosition(75, 75);
workspace.append(bigElipse);
var smallElipse = new web2d.Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red')
workspace.append(smallElipse);
wClickEventLogger = new EventLogger('click', workspace);
wMouseoverEventLogger = new EventLogger('mouseover', workspace);
wMouseoutEventLogger = new EventLogger('mouseout', workspace);
wMousemoveEventLogger = new EventLogger('mousemove', workspace);
wDblCickEventLogger = new EventLogger('dblclick', workspace);
esClickEventLogger = new EventLogger('click', smallElipse);
esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
ebClickEventLogger = new EventLogger('click', bigElipse);
ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
workspace.addItAsChildTo($('#workspaceContainer').first());
var mEventWorkspace = new web2d.Workspace();
mEventWorkspace.setSize("150px", "150px");
mEventWorkspace.setCoordSize(150, 150);
var elipse = new web2d.Elipse();
elipse.setSize(100, 100);
elipse.setPosition(75, 75);
elipse.setFill('blue')
mEventWorkspace.append(elipse);
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
multipleHandler = new MultipleEventHandler('click', elipse);
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>Elements Event Handling</h1> <h1>Elements Event Handling</h1>
<table> <table>

107
packages/web2d/test/playground/events.js Normal file
View File

@ -0,0 +1,107 @@
/* eslint-disable no-alert */
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Elipse,
} from '../../src';
global.$ = $;
function EventLogger(type, element) {
this._enable = false;
this._element = element;
this._type = type;
this._listener = function logger() {
const oldColor = element.getAttribute('fillColor');
element.setFill('yellow');
alert(`Event on:${element.getType()}, Type:${type}`);
element.setFill(oldColor);
};
}
EventLogger.prototype.changeState = function changeState() {
this._enable = !this._enable;
if (this._enable) {
this._element.addEvent(this._type, this._listener);
} else {
this._element.removeEvent(this._type, this._listener);
}
return this._enable;
};
function MultipleEventHandler(type, element) {
this._listeners = [];
this._type = type;
this._element = element;
}
MultipleEventHandler.prototype.registerOneListener = function registerOneListener() {
const count = this._listeners.length;
const listener = () => {
alert(`Listener #:${count}`);
};
this._listeners.push(listener);
this._element.addEvent(this._type, listener);
};
MultipleEventHandler.prototype.listenerCount = function listenerCount() {
return this._listeners.length;
};
MultipleEventHandler.prototype.unRegisterOneListener = function unRegisterOneListener() {
if (this._listeners.length > 0) {
const listener = this._listeners.pop();
this._element.removeEvent(this._type, listener);
}
};
Toolkit.init();
// Workspace with CoordOrigin(100,100);
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(150, 150);
const bigElipse = new Elipse();
bigElipse.setSize(100, 100);
bigElipse.setPosition(75, 75);
workspace.append(bigElipse);
const smallElipse = new Elipse();
smallElipse.setSize(50, 50);
smallElipse.setPosition(75, 75);
smallElipse.setFill('red');
workspace.append(smallElipse);
global.wClickEventLogger = new EventLogger('click', workspace);
global.wMouseoverEventLogger = new EventLogger('mouseover', workspace);
global.wMouseoutEventLogger = new EventLogger('mouseout', workspace);
global.wMousemoveEventLogger = new EventLogger('mousemove', workspace);
global.wDblCickEventLogger = new EventLogger('dblclick', workspace);
global.esClickEventLogger = new EventLogger('click', smallElipse);
global.esMouseoverEventLogger = new EventLogger('mouseover', smallElipse);
global.esMouseoutEventLogger = new EventLogger('mouseout', smallElipse);
global.esMousemoveEventLogger = new EventLogger('mousemove', smallElipse);
global.esDblCickEventLogger = new EventLogger('dblclick', smallElipse);
global.ebClickEventLogger = new EventLogger('click', bigElipse);
global.ebMouseoverEventLogger = new EventLogger('mouseover', bigElipse);
global.ebMouseoutEventLogger = new EventLogger('mouseout', bigElipse);
global.ebousemoveEventLogger = new EventLogger('mousemove', bigElipse);
global.ebblCickEventLogger = new EventLogger('dblclick', bigElipse);
workspace.addItAsChildTo($('#workspaceContainer').first());
const mEventWorkspace = new Workspace();
mEventWorkspace.setSize('150px', '150px');
mEventWorkspace.setCoordSize(150, 150);
const elipse = new Elipse();
elipse.setSize(100, 100);
elipse.setPosition(75, 75);
elipse.setFill('blue');
mEventWorkspace.append(elipse);
mEventWorkspace.addItAsChildTo($('#workspaceMultipleEvents').first());
global.multipleHandler = new MultipleEventHandler('click', elipse);

73
packages/web2d/test/playground/font.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<style> <style>
th, th,
@ -9,78 +7,9 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function multiline(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('200px', '240px');
overflowWorkspace.setCoordSize('200', '240');
overflowWorkspace.setCoordOrigin(0, 0);
[6, 8, 10, 15].forEach(function (size, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('red');
});
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function alignments(text, family, elemId) {
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center', 'left', 'right'].forEach(function (align, i) {
var wText = new web2d.Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('red');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($("#" + elemId));
}
function initialize() {
web2d.Toolkit.init();
// Multine tests ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
multiline('This multine text.\nLine 1 :)\nLine2', family, 'multi' + i);
});
// Multine tests and alingments .. ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach(function (family, i) {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, 'amulti' + i);
})
}
</script>
</head> </head>
<body>
<body onload="initialize();">
<h1>Web2d Fonts Tests</h1> <h1>Web2d Fonts Tests</h1>
<table> <table>
<colgroup> <colgroup>
<col style="width:30%" /> <col style="width:30%" />

57
packages/web2d/test/playground/font.js Normal file
View File

@ -0,0 +1,57 @@
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Text,
} from '../../src';
global.$ = $;
function multiline(text, family, elemId) {
const workspace = new Workspace();
workspace.setSize('200px', '240px');
workspace.setCoordSize('200', '240');
workspace.setCoordOrigin(0, 0);
[6, 8, 10, 15].forEach((size, i) => {
const wText = new Text();
workspace.append(wText);
wText.setText(text);
wText.setFont(family, size, 'bold');
wText.setPosition(30, 50 * i);
wText.setColor('blue');
});
workspace.addItAsChildTo($(`#${elemId}`));
}
function alignments(text, family, elemId) {
const overflowWorkspace = new Workspace();
overflowWorkspace.setSize('260px', '240px');
overflowWorkspace.setCoordSize('260', '240');
overflowWorkspace.setCoordOrigin(0, 0);
['center', 'left', 'right'].forEach((align, i) => {
const wText = new Text();
overflowWorkspace.append(wText);
wText.setText(text);
wText.setFont(family, 8, 'bold');
wText.setPosition(30, 80 * i);
wText.setColor('green');
wText.setTextAlignment(align);
});
overflowWorkspace.addItAsChildTo($(`#${elemId}`));
}
Toolkit.init();
// Multine tests ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
multiline('This multine text.\nLine 1 :)\nLine2', family, `multi${i}`);
});
// Multine tests and alingments .. ...
['Arial', 'Tahoma', 'Verdana', 'Times'].forEach((family, i) => {
alignments('This multine text.\nThis is the long line just because :)\nShort line', family, `amulti${i}`);
});

331
packages/web2d/test/playground/group.html
View File

@ -9,338 +9,11 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var basicTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(50, 50);
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.append(group);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
group.append(line);
line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
group.append(line);
workspace.addItAsChildTo($('#groupBasicContainer'));
var xDir = 1;
var yDir = 1;
var executer = function () {
var y = group.getPosition().y + yDir;
var x = group.getPosition().x + xDir;
if (x < 0) {
xDir = 1;
} else if (x > 50) {
xDir = -1;
}
if (y < 0) {
yDir = 1;
} else if (y > 50) {
yDir = -1;
}
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
group.setPosition(x, y);
};
//executer.periodical(100);
};
basicTest();
var eventTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(100, 100);
var groupAttributes = { width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0' };
var group = new web2d.Group(groupAttributes);
workspace.append(group);
var elipseLeft = new web2d.Elipse();
elipseLeft.setSize(200, 200)
elipseLeft.setPosition(200, 0)
group.append(elipseLeft);
var elipseRight = new web2d.Elipse();
elipseRight.setSize(200, 200)
elipseRight.setPosition(0, 0)
group.append(elipseRight);
var listener = function (e) {
alert("Click event on:" + this.getType())
};
group.addEvent("click", listener);
elipseLeft.addEvent("click", listener);
elipseRight.addEvent("click", listener);
workspace.addItAsChildTo($('#groupEventsContainer'));
}
eventTest();
var eventTest = function () {
var workspace = new web2d.Workspace();
workspace.setSize("150px", "150px");
workspace.setCoordSize(200, 200);
var groupOuter = new web2d.Group();
groupOuter.setSize(50, 50)
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0)
workspace.append(groupOuter);
var elipseOuter = new web2d.Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill("red");
groupOuter.append(elipseOuter);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("red");
groupOuter.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("red");
groupOuter.append(line);
var groupInner = new web2d.Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
var elipse = new web2d.Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
var line = new web2d.Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke("blue");
groupInner.append(line);
var line = new web2d.Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke("blue");
groupInner.append(line);
workspace.addItAsChildTo($('#groupNestedContainer'));
};
eventTest();
var workspaceCoordSizeSample = function () {
function groupSampleBuilder(width, height) {
// Group with CoordSize(50,50);
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
}
var sample100x100 = groupSampleBuilder(100, 100);
sample100x100.addItAsChildTo($("#coordsizeExample100x100"));
var sample100x200 = groupSampleBuilder(100, 200);
sample100x200.addItAsChildTo($("#coordsizeExample100x200"));
var sample200x100 = groupSampleBuilder(200, 100);
sample200x100.addItAsChildTo($("#coordsizeExample200x100"));
};
workspaceCoordSizeSample();
var workspaceCoordOriginSample = function () {
function groupSampleBuilder(x, y) {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
var group = new web2d.Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.append(group);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill("red");
group.append(elipseInner);
return workspace;
}
;
var sample0x0 = groupSampleBuilder(0, 0);
sample0x0.addItAsChildTo($("#coordOriginExample0x0"));
var sample100x200 = groupSampleBuilder(0, 50);
sample100x200.addItAsChildTo($("#coordOriginExample0x50"));
var sample200x100 = groupSampleBuilder(50, 0);
sample200x100.addItAsChildTo($("#coordOriginExample50x0"));
}
workspaceCoordOriginSample();
var groupVisibilitySample = function () {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
group.addEvent("mouseover", function () {
alert("Mouse Over Group");
});
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent("mouseover", function () {
alert("Mouse Over elipseOuter");
});
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var isVisible = true;
var executer = function () {
isVisible = !isVisible;
group.setVisibility(isVisible);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample'));
}
groupVisibilitySample();
var groupVisibilitySample = function () {
var workspace = new web2d.Workspace();
workspace.setSize("100px", "100px");
workspace.setCoordSize(100, 100);
var group = new web2d.Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.append(group);
elipseOuter = new web2d.Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
elipseInner = new web2d.Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill("red");
group.append(elipseInner);
var width = 10;
var height = 10;
var executer = function () {
width = (width + 10) % 100;
height = (height + 10) % 100;
group.setCoordSize(width, height);
};
//executer.periodical(100);
workspace.addItAsChildTo($('#scaleStrokeExample'));
}
groupVisibilitySample();
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>Group Render Tests</h1>
<h1>Group Render Tests.</h1>
<table> <table>
<colgroup style="width:80%;"> <colgroup style="width:80%;">
<col style="width:50%" /> <col style="width:50%" />

304
packages/web2d/test/playground/group.js Normal file
View File

@ -0,0 +1,304 @@
/* eslint-disable no-alert */
import $ from '@libraries/jquery-2.1.0';
import {
Toolkit, Workspace, Line, Group, Elipse,
} from '../../src';
global.$ = $;
Toolkit.init();
const basicTest = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(100, 100);
const group = new Group();
group.setSize(50, 50);
group.setPosition(25, 50);
group.setCoordSize(200, 200);
group.setCoordOrigin(0, 0);
workspace.append(group);
const elipse = new Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
group.append(elipse);
let line = new Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke('blue');
group.append(line);
line = new Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke('blue');
group.append(line);
workspace.addItAsChildTo($('#groupBasicContainer'));
let xDir = 1;
let yDir = 1;
const executer = function () {
const y = group.getPosition().y + yDir;
const x = group.getPosition().x + xDir;
if (x < 0) {
xDir = 1;
} else if (x > 50) {
xDir = -1;
}
if (y < 0) {
yDir = 1;
} else if (y > 50) {
yDir = -1;
}
// Logger.logMsg("Moving group x,y:"+ x + "," + y);
group.setPosition(x, y);
};
// executer.periodical(100);
};
basicTest();
const eventTest = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(100, 100);
const groupAttributes = {
width: 50, height: 50, x: 25, y: 50, coordSize: '200 200', coordOrigin: '0 0',
};
const group = new Group(groupAttributes);
workspace.append(group);
const elipseLeft = new Elipse();
elipseLeft.setSize(200, 200);
elipseLeft.setPosition(200, 0);
group.append(elipseLeft);
const elipseRight = new Elipse();
elipseRight.setSize(200, 200);
elipseRight.setPosition(0, 0);
group.append(elipseRight);
const listener = function listener() {
alert(`Click event on:${this.getType()}`);
};
group.addEvent('click', listener);
elipseLeft.addEvent('click', listener);
elipseRight.addEvent('click', listener);
workspace.addItAsChildTo($('#groupEventsContainer'));
};
eventTest();
const eventTest2 = () => {
const workspace = new Workspace();
workspace.setSize('150px', '150px');
workspace.setCoordSize(200, 200);
const groupOuter = new Group();
groupOuter.setSize(50, 50);
groupOuter.setPosition(25, 25);
groupOuter.setCoordSize(100, 100);
groupOuter.setCoordOrigin(0, 0);
workspace.append(groupOuter);
const elipseOuter = new Elipse();
elipseOuter.setSize(200, 200);
elipseOuter.setPosition(100, 100);
elipseOuter.setFill('red');
groupOuter.append(elipseOuter);
let line = new Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke('red');
groupOuter.append(line);
line = new Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke('red');
groupOuter.append(line);
const groupInner = new Group();
groupInner.setSize(50, 50);
groupInner.setPosition(25, 25);
groupInner.setCoordSize(100, 100);
groupInner.setCoordOrigin(0, 0);
groupOuter.append(groupInner);
const elipse = new Elipse();
elipse.setSize(200, 200);
elipse.setPosition(100, 100);
groupInner.append(elipse);
line = new Line();
line.setFrom(0, 0);
line.setTo(200, 200);
line.setStroke('blue');
groupInner.append(line);
line = new Line();
line.setFrom(200, 0);
line.setTo(0, 200);
line.setStroke('blue');
groupInner.append(line);
workspace.addItAsChildTo($('#groupNestedContainer'));
};
eventTest2();
const workspaceCoordSizeSample = () => {
function groupSampleBuilder(width, height) {
// Group with CoordSize(50,50);
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
const group = new Group();
group.setSize(50, 50);
group.setCoordSize(width, height);
group.setPosition(25, 25);
workspace.append(group);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill('red');
group.append(elipseInner);
return workspace;
}
const sample100x100 = groupSampleBuilder(100, 100);
sample100x100.addItAsChildTo($('#coordsizeExample100x100'));
const sample100x200 = groupSampleBuilder(100, 200);
sample100x200.addItAsChildTo($('#coordsizeExample100x200'));
const sample200x100 = groupSampleBuilder(200, 100);
sample200x100.addItAsChildTo($('#coordsizeExample200x100'));
};
workspaceCoordSizeSample();
const workspaceCoordOriginSample = () => {
function groupSampleBuilder(x, y) {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
workspace.append(elipseOuter);
const group = new Group();
group.setSize(50, 50);
group.setCoordSize(100, 100);
group.setCoordOrigin(x, y);
group.setPosition(25, 25);
workspace.append(group);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(50, 50);
elipseInner.setFill('red');
group.append(elipseInner);
return workspace;
}
const sample0x0 = groupSampleBuilder(0, 0);
sample0x0.addItAsChildTo($('#coordOriginExample0x0'));
const sample100x200 = groupSampleBuilder(0, 50);
sample100x200.addItAsChildTo($('#coordOriginExample0x50'));
const sample200x100 = groupSampleBuilder(50, 0);
sample200x100.addItAsChildTo($('#coordOriginExample50x0'));
};
workspaceCoordOriginSample();
const groupVisibilitySample = () => {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const group = new Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
group.addEvent('mouseover', () => {
alert('Mouse Over Group');
});
workspace.append(group);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.addEvent('mouseover', () => {
alert('Mouse Over elipseOuter');
});
group.append(elipseOuter);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill('red');
group.append(elipseInner);
let isVisible = true;
const executer = function () {
isVisible = !isVisible;
group.setVisibility(isVisible);
};
// executer.periodical(100);
workspace.addItAsChildTo($('#visibilityExample'));
};
groupVisibilitySample();
const groupVisibilitySample2 = () => {
const workspace = new Workspace();
workspace.setSize('100px', '100px');
workspace.setCoordSize(100, 100);
const group = new Group();
group.setSize(100, 100);
group.setPosition(0, 0);
group.setCoordSize(100, 100);
workspace.append(group);
const elipseOuter = new Elipse();
elipseOuter.setPosition(50, 50);
elipseOuter.setSize(50, 50);
group.append(elipseOuter);
const elipseInner = new Elipse();
elipseInner.setPosition(50, 50);
elipseInner.setSize(25, 25);
elipseInner.setFill('red');
group.append(elipseInner);
let width = 10;
let height = 10;
const executer = function () {
width = (width + 10) % 100;
height = (height + 10) % 100;
group.setCoordSize(width, height);
};
// executer.periodical(100);
workspace.addItAsChildTo($('#scaleStrokeExample'));
};
groupVisibilitySample2();

5
packages/web2d/test/playground/index.html
View File

@ -4,12 +4,13 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testing</title> <title>WiseMapping Web2D Playground</title>
</head> </head>
<body> <body>
<div> <div>
<h1>Testing</h1> <h1>WiseMapping Web2D Playground</h1>
<h2>This is a list of the different Web2D components supported:</h2>
<ul> <ul>
<li><a href="/arrow.html">Arrow</a></li> <li><a href="/arrow.html">Arrow</a></li>
<li><a href="/curvedLine.html">Curved Line</a></li> <li><a href="/curvedLine.html">Curved Line</a></li>

77
packages/web2d/test/playground/line.html
View File

@ -9,84 +9,9 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var workspaceAttributes = { width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc' };
var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);
var rect = new web2d.Rect();
rect.setSize(10, 10);
rect.setStroke(0);
rect.setPosition(250, 5);
strokeWidthWorkspace.append(rect);
for (var i = 0; i <= 10; i++) {
var line = new web2d.Line();
line.setFrom(5 + (i * 25), 5);
line.setTo(5 + (i * 25), 45);
line.setAttribute('strokeWidth', i + 1);
strokeWidthWorkspace.append(line);
}
strokeWidthWorkspace.append(rect);
strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));
var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
for (var i = 0; i < 10; i++) {
var line = new web2d.Line();
line.setFrom(15 + (i * 25), 5);
line.setTo(3 + (i * 25), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeOpacity', 1 / (i + 1));
line.setAttribute('strokeColor', 'red');
strokeOpacityWorkspace.append(line);
}
strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));
var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
for (var i = 0; i < styles.length; i++) {
var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setAttribute('strokeStyle', styles[i]);
strokeStyleWorkspace.append(line);
}
strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));
var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
var styles = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron'];
for (var i = 0; i < styles.length; i++) {
var line = new web2d.Line();
line.setFrom(25 + (i * 30), 5);
line.setTo(13 + (i * 30), 45);
line.setAttribute('strokeWidth', 2);
line.setAttribute('strokeColor', 'red');
line.setArrowStyle(styles[i]);
strokeArrowWorkspace.append(line);
}
strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>Lines Render Tests </h1> <h1>Lines Render Tests </h1>

67
packages/web2d/test/playground/line.js Normal file
View File

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

152
packages/web2d/test/playground/polyLine.html
View File

@ -9,159 +9,9 @@
border: 1px solid black; border: 1px solid black;
} }
</style> </style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<script type="text/javascript">
function initialize() {
web2d.Toolkit.init();
var overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
overflowWorkspace.setSize("100px", "100px");
var line = new web2d.PolyLine();
line.setTo(165, 165);
line.setFrom(95, 95);
line.setStyle("Straight");
line.setStroke('10');
overflowWorkspace.append(line);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setFrom(95, 95);
// line.setTo(165, -1653.0000000000000000000001);
// line.setFrom(95, 952);
// line.setTo(165, 1651);
//
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 90);
// line.setTo(160, 20);
// overflowWorkspace.append(line);
//
// var line = new web2d.PolyLine();
// line.setStyle("Straight");
// line.setFrom(90, -90);
// line.setTo(20, 20);
// overflowWorkspace.append(line);
//
// var line = new web2d.PolyLine();
// line.setFrom(95, 95);
// line.setTo(165, 165);
// line.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(line);
//
// // Reference ...
// var refLine = new web2d.Line();
// refLine.setFrom(95, 0);
// refLine.setTo(95, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(refLine);
//
// var refLine = new web2d.Line();
// refLine.setFrom(165, 0);
// refLine.setTo(165, 200);
// refLine.setStroke(1, 'solid', 'red');
// overflowWorkspace.append(refLine);
//
overflowWorkspace.addItAsChildTo($('#overflowExample'));
var overflowWorkspace = new web2d.Workspace();
overflowWorkspace.setSize("100px", "100px");
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 165);
line1.setStyle("Curved");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 95);
line1.setTo(165, 135);
line1.setStyle("Curved");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 20);
line1.setStyle("Straight");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(95, 90);
line1.setTo(160, 50);
line1.setStyle("Straight");
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 20);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 90);
line1.setTo(20, 50);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 165);
overflowWorkspace.append(line1);
var line1 = new web2d.PolyLine();
line1.setFrom(90, 95);
line1.setTo(20, 135);
overflowWorkspace.append(line1);
overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
}
</script>
</head> </head>
<body onload="initialize();"> <body>
<h1>PolyLines Render Tests </h1> <h1>PolyLines Render Tests </h1>
<table> <table>

Some files were not shown because too many files have changed in this diff Show More