Migration to EE6 of web2d and mindplot

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -16,148 +16,144 @@
* limitations under the License.
*/
import { $assert, $defined } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d';
import * as web2d from '@wisemapping/web2d';
import Topic from './Topic';
import { TopicShape } from './model/INodeModel';
import Shape from './util/Shape';
const MainTopic = new Class(
/** @lends MainTopic */ {
Extends: Topic,
/**
class MainTopic extends Topic {
/**
* @extends mindplot.Topic
* @constructs
* @param model
* @param options
*/
initialize(model, options) {
this.parent(model, options);
},
constructor(model, options) {
super(model, options);
this.INNER_RECT_ATTRIBUTES = { stroke: '0.5 solid #009900' };
}
INNER_RECT_ATTRIBUTES: { stroke: '0.5 solid #009900' },
_buildDragShape() {
const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
const size = this.getSize();
innerShape.setSize(size.width, size.height);
innerShape.setPosition(0, 0);
innerShape.setOpacity(0.5);
innerShape.setCursor('default');
innerShape.setVisibility(true);
_buildDragShape() {
const innerShape = this._buildShape(this.INNER_RECT_ATTRIBUTES, this.getShapeType());
const size = this.getSize();
innerShape.setSize(size.width, size.height);
innerShape.setPosition(0, 0);
innerShape.setOpacity(0.5);
innerShape.setCursor('default');
innerShape.setVisibility(true);
const brColor = this.getBorderColor();
innerShape.setAttribute('strokeColor', brColor);
const brColor = this.getBorderColor();
innerShape.setAttribute('strokeColor', brColor);
const bgColor = this.getBackgroundColor();
innerShape.setAttribute('fillColor', bgColor);
const bgColor = this.getBackgroundColor();
innerShape.setAttribute('fillColor', bgColor);
// Create group ...
const groupAttributes = {
width: 100,
height: 100,
coordSizeWidth: 100,
coordSizeHeight: 100,
};
const group = new web2d.Group(groupAttributes);
group.append(innerShape);
// Create group ...
const groupAttributes = {
width: 100,
height: 100,
coordSizeWidth: 100,
coordSizeHeight: 100,
};
const group = new web2d.Group(groupAttributes);
group.append(innerShape);
// Add Text ...
if (this.getShapeType() !== TopicShape.IMAGE) {
const textShape = this._buildTextShape(true);
const text = this.getText();
textShape.setText(text);
textShape.setOpacity(0.5);
group.append(textShape);
}
return group;
}
// Add Text ...
if (this.getShapeType() !== TopicShape.IMAGE) {
const textShape = this._buildTextShape(true);
const text = this.getText();
textShape.setText(text);
textShape.setOpacity(0.5);
group.append(textShape);
}
return group;
},
/** */
updateTopicShape(targetTopic, workspace) {
// Change figure based on the connected topic ...
const model = this.getModel();
let shapeType = model.getShapeType();
if (!targetTopic.isCentralTopic()) {
if (!$defined(shapeType)) {
// Get the real shape type ...
shapeType = this.getShapeType();
this._setShapeType(shapeType, false);
}
}
},
/** */
disconnect(workspace) {
this.parent(workspace);
const size = this.getSize();
const model = this.getModel();
let shapeType = model.getShapeType();
/** */
updateTopicShape(targetTopic, workspace) {
// Change figure based on the connected topic ...
const model = this.getModel();
let shapeType = model.getShapeType();
if (!targetTopic.isCentralTopic()) {
if (!$defined(shapeType)) {
// Change figure ...
// Get the real shape type ...
shapeType = this.getShapeType();
this._setShapeType(TopicShape.ROUNDED_RECT, false);
this._setShapeType(shapeType, false);
}
const innerShape = this.getInnerShape();
innerShape.setVisibility(true);
},
}
}
_updatePositionOnChangeSize(oldSize, newSize) {
const xOffset = Math.round((newSize.width - oldSize.width) / 2);
const pos = this.getPosition();
if ($defined(pos)) {
if (pos.x > 0) {
pos.x += xOffset;
} else {
pos.x -= xOffset;
}
this.setPosition(pos);
}
},
/** */
disconnect(workspace) {
this.parent(workspace);
const size = this.getSize();
/** */
workoutIncomingConnectionPoint(sourcePosition) {
return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
},
const model = this.getModel();
let shapeType = model.getShapeType();
if (!$defined(shapeType)) {
// Change figure ...
shapeType = this.getShapeType();
this._setShapeType(TopicShape.ROUNDED_RECT, false);
}
const innerShape = this.getInnerShape();
innerShape.setVisibility(true);
}
/** */
workoutOutgoingConnectionPoint(targetPosition) {
$assert(targetPosition, 'targetPoint can not be null');
const pos = this.getPosition();
const isAtRight = Shape.isAtRight(targetPosition, pos);
const size = this.getSize();
let result;
if (this.getShapeType() === TopicShape.LINE) {
result = new web2d.Point();
const groupPosition = this._elem2d.getPosition();
const innerShareSize = this.getInnerShape().getSize();
if (innerShareSize) {
const magicCorrectionNumber = 0.3;
if (!isAtRight) {
result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
} else {
result.x = groupPosition.x + magicCorrectionNumber;
}
result.y = groupPosition.y + innerShareSize.height;
} else {
// Hack: When the size has not being defined. This is because the node has not being added.
// Try to do our best ...
if (!isAtRight) {
result.x = pos.x + size.width / 2;
} else {
result.x = pos.x - size.width / 2;
}
result.y = pos.y + size.height / 2;
}
_updatePositionOnChangeSize(oldSize, newSize) {
const xOffset = Math.round((newSize.width - oldSize.width) / 2);
const pos = this.getPosition();
if ($defined(pos)) {
if (pos.x > 0) {
pos.x += xOffset;
} else {
result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
pos.x -= xOffset;
}
return result;
},
},
);
this.setPosition(pos);
}
}
/** */
workoutIncomingConnectionPoint(sourcePosition) {
return Shape.workoutIncomingConnectionPoint(this, sourcePosition);
}
/** */
workoutOutgoingConnectionPoint(targetPosition) {
$assert(targetPosition, 'targetPoint can not be null');
const pos = this.getPosition();
const isAtRight = Shape.isAtRight(targetPosition, pos);
const size = this.getSize();
let result;
if (this.getShapeType() === TopicShape.LINE) {
result = new web2d.Point();
const groupPosition = this._elem2d.getPosition();
const innerShareSize = this.getInnerShape().getSize();
if (innerShareSize) {
const magicCorrectionNumber = 0.3;
if (!isAtRight) {
result.x = groupPosition.x + innerShareSize.width - magicCorrectionNumber;
} else {
result.x = groupPosition.x + magicCorrectionNumber;
}
result.y = groupPosition.y + innerShareSize.height;
} else {
// Hack: When the size has not being defined. This is because the node has not being added.
// Try to do our best ...
if (!isAtRight) {
result.x = pos.x + size.width / 2;
} else {
result.x = pos.x - size.width / 2;
}
result.y = pos.y + size.height / 2;
}
} else {
result = Shape.calculateRectConnectionPoint(pos, size, isAtRight, true);
}
return result;
}
}
export default MainTopic;

View File

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

View File

@ -19,172 +19,170 @@ import { $assert } from '@wisemapping/core-js';
import TopicConfig from './TopicConfig';
import DragTopic from './DragTopic';
const NodeGraph = new Class(
/** @lends NodeGraph */ {
/**
* @constructs
* @param {mindplot.model.NodeModel} nodeModel
* @param {Object<Number, String, Boolean>} options
* @throws will throw an error if nodeModel is null or undefined
*/
initialize(nodeModel, options) {
$assert(nodeModel, 'model can not be null');
class NodeGraph {
/**
* @constructs
* @param {mindplot.model.NodeModel} nodeModel
* @param {Object<Number, String, Boolean>} options
* @throws will throw an error if nodeModel is null or undefined
*/
constructor(nodeModel, options) {
$assert(nodeModel, 'model can not be null');
this._options = options;
this._mouseEvents = true;
this.setModel(nodeModel);
this._onFocus = false;
this._size = { width: 50, height: 20 };
},
this._options = options;
this._mouseEvents = true;
this.setModel(nodeModel);
this._onFocus = false;
this._size = { width: 50, height: 20 };
}
/** @return true if option is set to read-only */
isReadOnly() {
return this._options.readOnly;
},
/** @return true if option is set to read-only */
isReadOnly() {
return this._options.readOnly;
}
/** @return model type */
getType() {
const model = this.getModel();
return model.getType();
},
/** @return model type */
getType() {
const model = this.getModel();
return model.getType();
}
/**
/**
* @param {String} id
* @throws will throw an error if the topic id is not a number
*/
setId(id) {
$assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
this.getModel().setId(id);
},
setId(id) {
$assert(typeof topic.getId() === 'number', `id is not a number:${id}`);
this.getModel().setId(id);
}
_set2DElement(elem2d) {
this._elem2d = elem2d;
},
_set2DElement(elem2d) {
this._elem2d = elem2d;
}
/**
/**
* @return 2D element
* @throws will throw an error if the element is null or undefined within node graph
*/
get2DElement() {
$assert(this._elem2d, 'NodeGraph has not been initialized properly');
return this._elem2d;
},
get2DElement() {
$assert(this._elem2d, 'NodeGraph has not been initialized properly');
return this._elem2d;
}
/** @abstract */
setPosition(point, fireEvent) {
throw new Error('Unsupported operation');
},
/** @abstract */
setPosition(point, fireEvent) {
throw new Error('Unsupported operation');
}
/** */
addEvent(type, listener) {
const elem = this.get2DElement();
elem.addEvent(type, listener);
},
/** */
addEvent(type, listener) {
const elem = this.get2DElement();
elem.addEvent(type, listener);
}
/** */
removeEvent(type, listener) {
const elem = this.get2DElement();
elem.removeEvent(type, listener);
},
/** */
removeEvent(type, listener) {
const elem = this.get2DElement();
elem.removeEvent(type, listener);
}
/** */
fireEvent(type, event) {
const elem = this.get2DElement();
elem.trigger(type, event);
},
/** */
fireEvent(type, event) {
const elem = this.get2DElement();
elem.trigger(type, event);
}
/** */
setMouseEventsEnabled(isEnabled) {
this._mouseEvents = isEnabled;
},
/** */
setMouseEventsEnabled(isEnabled) {
this._mouseEvents = isEnabled;
}
/** */
isMouseEventsEnabled() {
return this._mouseEvents;
},
/** */
isMouseEventsEnabled() {
return this._mouseEvents;
}
/** @return {Object<Number>} size */
getSize() {
return this._size;
},
/** @return {Object<Number>} size */
getSize() {
return this._size;
}
/** @param {Object<Number>} size */
setSize(size) {
this._size.width = parseInt(size.width, 10);
this._size.height = parseInt(size.height, 10);
},
/** @param {Object<Number>} size */
setSize(size) {
this._size.width = parseInt(size.width, 10);
this._size.height = parseInt(size.height, 10);
}
/**
/**
* @return {mindplot.model.NodeModel} the node model
*/
getModel() {
$assert(this._model, 'Model has not been initialized yet');
return this._model;
},
getModel() {
$assert(this._model, 'Model has not been initialized yet');
return this._model;
}
/**
/**
* @param {mindplot.NodeModel} model the node model
* @throws will throw an error if model is null or undefined
*/
setModel(model) {
$assert(model, 'Model can not be null');
this._model = model;
},
setModel(model) {
$assert(model, 'Model can not be null');
this._model = model;
}
/** */
getId() {
return this._model.getId();
},
/** */
getId() {
return this._model.getId();
}
/** */
setOnFocus(focus) {
if (this._onFocus !== focus) {
this._onFocus = focus;
const outerShape = this.getOuterShape();
if (focus) {
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
outerShape.setOpacity(1);
} else {
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
outerShape.setOpacity(0);
}
this.setCursor('move');
// In any case, always try to hide the editor ...
this.closeEditors();
// Fire event ...
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
/** */
setOnFocus(focus) {
if (this._onFocus !== focus) {
this._onFocus = focus;
const outerShape = this.getOuterShape();
if (focus) {
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
outerShape.setOpacity(1);
} else {
outerShape.setFill(TopicConfig.OUTER_SHAPE_ATTRIBUTES.fillColor);
outerShape.setOpacity(0);
}
},
this.setCursor('move');
/** @return {Boolean} true if the node graph is on focus */
isOnFocus() {
return this._onFocus;
},
// In any case, always try to hide the editor ...
this.closeEditors();
/** */
dispose(workspace) {
this.setOnFocus(false);
workspace.removeChild(this);
},
// Fire event ...
this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
}
}
/** */
createDragNode(layoutManager) {
const dragShape = this._buildDragShape();
return new DragTopic(dragShape, this, layoutManager);
},
/** @return {Boolean} true if the node graph is on focus */
isOnFocus() {
return this._onFocus;
}
_buildDragShape() {
$assert(false, '_buildDragShape must be implemented by all nodes.');
},
/** */
dispose(workspace) {
this.setOnFocus(false);
workspace.removeChild(this);
}
/** */
getPosition() {
const model = this.getModel();
return model.getPosition();
},
},
);
/** */
createDragNode(layoutManager) {
const dragShape = this._buildDragShape();
return new DragTopic(dragShape, this, layoutManager);
}
_buildDragShape() {
$assert(false, '_buildDragShape must be implemented by all nodes.');
}
/** */
getPosition() {
const model = this.getModel();
return model.getPosition();
}
}
export default NodeGraph;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -18,53 +18,53 @@
import { $assert, $defined } from '@wisemapping/core-js';
import { TopicShape } from './model/INodeModel';
const TopicStyle = new Class({});
class TopicStyle {
static _getStyles(topic) {
$assert(topic, 'topic can not be null');
TopicStyle._getStyles = function _getStyles(topic) {
$assert(topic, 'topic can not be null');
let result;
if (topic.isCentralTopic()) {
result = TopicStyle.STYLES.CENTRAL_TOPIC;
} else {
const targetTopic = topic.getOutgoingConnectedTopic();
if ($defined(targetTopic)) {
if (targetTopic.isCentralTopic()) {
result = TopicStyle.STYLES.MAIN_TOPIC;
} else {
result = TopicStyle.STYLES.SUB_TOPIC;
}
let result;
if (topic.isCentralTopic()) {
result = TopicStyle.STYLES.CENTRAL_TOPIC;
} else {
result = TopicStyle.STYLES.ISOLATED_TOPIC;
const targetTopic = topic.getOutgoingConnectedTopic();
if ($defined(targetTopic)) {
if (targetTopic.isCentralTopic()) {
result = TopicStyle.STYLES.MAIN_TOPIC;
} else {
result = TopicStyle.STYLES.SUB_TOPIC;
}
} else {
result = TopicStyle.STYLES.ISOLATED_TOPIC;
}
}
return result;
}
return result;
};
TopicStyle.defaultText = function defaultText(topic) {
const { msgKey } = this._getStyles(topic);
return $msg(msgKey);
};
static defaultText(topic) {
const { msgKey } = this._getStyles(topic);
return $msg(msgKey);
}
TopicStyle.defaultFontStyle = function defaultFontStyle(topic) {
return this._getStyles(topic).fontStyle;
};
static defaultFontStyle(topic) {
return this._getStyles(topic).fontStyle;
}
TopicStyle.defaultBackgroundColor = function defaultBackgroundColor(topic) {
return this._getStyles(topic).backgroundColor;
};
static defaultBackgroundColor(topic) {
return this._getStyles(topic).backgroundColor;
}
TopicStyle.defaultBorderColor = function defaultBorderColor(topic) {
return this._getStyles(topic).borderColor;
};
static defaultBorderColor(topic) {
return this._getStyles(topic).borderColor;
}
TopicStyle.getInnerPadding = function getInnerPadding(topic) {
return this._getStyles(topic).innerPadding;
};
static getInnerPadding(topic) {
return this._getStyles(topic).innerPadding;
}
TopicStyle.defaultShapeType = function defaultShapeType(topic) {
return this._getStyles(topic).shapeType;
};
static defaultShapeType(topic) {
return this._getStyles(topic).shapeType;
}
}
TopicStyle.STYLES = {
CENTRAL_TOPIC: {

View File

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

View File

@ -17,10 +17,8 @@
*/
import Command from '../Command';
const AddFeatureToTopicCommand = new Class(
/** @lends AddFeatureToTopicCommand */ {
Extends: Command,
/*
class AddFeatureToTopicCommand extends Command {
/*
* @classdesc This command class handles do/undo of adding features to topics, e.g. an
* icon or a note. For a reference of existing features, refer to {@link mindplot.TopicFeature}
* @constructs
@ -30,41 +28,40 @@ const AddFeatureToTopicCommand = new Class(
* @extends mindplot.Command
* @see mindplot.model.FeatureModel and subclasses
*/
initialize(topicId, featureType, attributes) {
$assert($defined(topicId), 'topicId can not be null');
$assert(featureType, 'featureType can not be null');
$assert(attributes, 'attributes can not be null');
constructor(topicId, featureType, attributes) {
$assert($defined(topicId), 'topicId can not be null');
$assert(featureType, 'featureType can not be null');
$assert(attributes, 'attributes can not be null');
this.parent();
this._topicId = topicId;
this._featureType = featureType;
this._attributes = attributes;
this._featureModel = null;
},
super();
this._topicId = topicId;
this._featureType = featureType;
this._attributes = attributes;
this._featureModel = null;
}
/**
/**
* Overrides abstract parent method
*/
execute(commandContext) {
const topic = commandContext.findTopics(this._topicId)[0];
execute(commandContext) {
const topic = commandContext.findTopics(this._topicId)[0];
// Feature must be created only one time.
if (!this._featureModel) {
const model = topic.getModel();
this._featureModel = model.createFeature(this._featureType, this._attributes);
}
topic.addFeature(this._featureModel);
},
// Feature must be created only one time.
if (!this._featureModel) {
const model = topic.getModel();
this._featureModel = model.createFeature(this._featureType, this._attributes);
}
topic.addFeature(this._featureModel);
}
/**
/**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
undoExecute(commandContext) {
const topic = commandContext.findTopics(this._topicId)[0];
topic.removeFeature(this._featureModel);
},
},
);
undoExecute(commandContext) {
const topic = commandContext.findTopics(this._topicId)[0];
topic.removeFeature(this._featureModel);
}
}
export default AddFeatureToTopicCommand;

View File

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

View File

@ -17,81 +17,75 @@
*/
import Command from '../Command';
const AddTopicCommand = new Class(
/** @lends AddTopicCommand */ {
Extends: Command,
/**
* @classdesc This command class handles do/undo of adding one or multiple topics to
* the mindmap.
* @constructs
* @param {Array<mindplot.model.NodeModel>} models one or multiple models
* @param {Array<String>} parentTopicsId ids of the parent topics to add the children to, or null
* when attaching a dragged node or a node/branch from clipboard
* @extends mindplot.Command
*/
initialize(models, parentTopicsId) {
$assert(models, 'models can not be null');
$assert(
parentTopicsId == null || parentTopicsId.length == models.length,
'parents and models must have the same size',
);
class AddTopicCommand extends Command {
/**
* @classdesc This command class handles do/undo of adding one or multiple topics to
* the mindmap.
* @constructs
* @param {Array<mindplot.model.NodeModel>} models one or multiple models
* @param {Array<String>} parentTopicsId ids of the parent topics to add the children to, or null
* when attaching a dragged node or a node/branch from clipboard
* @extends mindplot.Command
*/
constructor(models, parentTopicsId) {
$assert(models, 'models can not be null');
$assert(parentTopicsId == null || parentTopicsId.length == models.length, 'parents and models must have the same size');
this.parent();
this._models = models;
this._parentsIds = parentTopicsId;
},
super();
this._models = models;
this._parentsIds = parentTopicsId;
}
/**
* Overrides abstract parent method
*/
execute(commandContext) {
const me = this;
_.each(this._models, (model, index) => {
// Add a new topic ...
const topic = commandContext.createTopic(model);
/**
* Overrides abstract parent method
*/
execute(commandContext) {
const me = this;
_.each(this._models, (model, index) => {
// Add a new topic ...
const topic = commandContext.createTopic(model);
// Connect to topic ...
if (me._parentsIds) {
const parentId = me._parentsIds[index];
if ($defined(parentId)) {
const parentTopic = commandContext.findTopics(parentId)[0];
commandContext.connect(topic, parentTopic);
}
} else {
commandContext.addTopic(topic);
// Connect to topic ...
if (me._parentsIds) {
const parentId = me._parentsIds[index];
if ($defined(parentId)) {
const parentTopic = commandContext.findTopics(parentId)[0];
commandContext.connect(topic, parentTopic);
}
} else {
commandContext.addTopic(topic);
}
// Select just created node ...
const designer = commandContext._designer;
designer.onObjectFocusEvent(topic);
topic.setOnFocus(true);
// Select just created node ...
const designer = commandContext._designer;
designer.onObjectFocusEvent(topic);
topic.setOnFocus(true);
// Render node ...
topic.setVisibility(true);
});
},
// Render node ...
topic.setVisibility(true);
});
}
/**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
undoExecute(commandContext) {
// Delete disconnected the nodes. Create a copy of the topics ...
const clonedModel = [];
_.each(this._models, (model) => {
clonedModel.push(model.clone());
});
/**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
undoExecute(commandContext) {
// Delete disconnected the nodes. Create a copy of the topics ...
const clonedModel = [];
_.each(this._models, (model) => {
clonedModel.push(model.clone());
});
// Finally, remove the nodes ...
_.each(this._models, (model) => {
const topicId = model.getId();
const topic = commandContext.findTopics(topicId)[0];
commandContext.deleteTopic(topic);
});
// Finally, remove the nodes ...
_.each(this._models, (model) => {
const topicId = model.getId();
const topic = commandContext.findTopics(topicId)[0];
commandContext.deleteTopic(topic);
});
this._models = clonedModel;
},
},
);
this._models = clonedModel;
}
}
export default AddTopicCommand;

View File

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

View File

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

View File

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

View File

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

View File

@ -17,10 +17,8 @@
*/
import Command from '../Command';
const MoveControlPointCommand = new Class(
/** @lends MoveControlPointCommand */ {
Extends: Command,
/**
class MoveControlPointCommand extends Command {
/**
* @classdesc This command handles do/undo of changing the control points of a relationship
* arrow. These are the two points that appear when the relationship is on focus. They
* influence how the arrow is drawn (not the source or the destination topic nor the arrow
@ -31,94 +29,93 @@ const MoveControlPointCommand = new Class(
* @param ctrlPointController {ControlPoint}
* @param point {Number} 0 for the destination control point, 1 for the source control point
*/
initialize(ctrlPointController, point) {
$assert(ctrlPointController, 'line can not be null');
$assert($defined(point), 'point can not be null');
constructor(ctrlPointController, point) {
$assert(ctrlPointController, 'line can not be null');
$assert($defined(point), 'point can not be null');
this.parent();
this._ctrlPointControler = ctrlPointController;
this._line = ctrlPointController._line;
this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone();
this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone();
switch (point) {
case 0:
this._wasCustom = this._line.getLine().isSrcControlPointCustom();
this._endPoint = this._line.getLine().getFrom().clone();
break;
case 1:
this._wasCustom = this._line.getLine().isDestControlPointCustom();
this._endPoint = this._line.getLine().getTo().clone();
break;
default:
break;
}
this._point = point;
},
super();
this._ctrlPointControler = ctrlPointController;
this._line = ctrlPointController._line;
this._controlPoint = this._ctrlPointControler.getControlPoint(point).clone();
this._oldControlPoint = this._ctrlPointControler.getOriginalCtrlPoint(point).clone();
this._originalEndPoint = this._ctrlPointControler.getOriginalEndPoint(point).clone();
switch (point) {
case 0:
this._wasCustom = this._line.getLine().isSrcControlPointCustom();
this._endPoint = this._line.getLine().getFrom().clone();
break;
case 1:
this._wasCustom = this._line.getLine().isDestControlPointCustom();
this._endPoint = this._line.getLine().getTo().clone();
break;
default:
break;
}
this._point = point;
}
/**
/**
* Overrides abstract parent method
*/
execute() {
const model = this._line.getModel();
switch (this._point) {
case 0:
model.setSrcCtrlPoint(this._controlPoint.clone());
this._line.setFrom(this._endPoint.x, this._endPoint.y);
this._line.setIsSrcControlPointCustom(true);
this._line.setSrcControlPoint(this._controlPoint.clone());
break;
case 1:
model.setDestCtrlPoint(this._controlPoint.clone());
this._wasCustom = this._line.getLine().isDestControlPointCustom();
this._line.setTo(this._endPoint.x, this._endPoint.y);
this._line.setIsDestControlPointCustom(true);
this._line.setDestControlPoint(this._controlPoint.clone());
break;
default:
break;
}
if (this._line.isOnFocus()) {
this._line._refreshShape();
this._ctrlPointControler.setLine(this._line);
}
this._line.getLine().updateLine(this._point);
},
execute() {
const model = this._line.getModel();
switch (this._point) {
case 0:
model.setSrcCtrlPoint(this._controlPoint.clone());
this._line.setFrom(this._endPoint.x, this._endPoint.y);
this._line.setIsSrcControlPointCustom(true);
this._line.setSrcControlPoint(this._controlPoint.clone());
break;
case 1:
model.setDestCtrlPoint(this._controlPoint.clone());
this._wasCustom = this._line.getLine().isDestControlPointCustom();
this._line.setTo(this._endPoint.x, this._endPoint.y);
this._line.setIsDestControlPointCustom(true);
this._line.setDestControlPoint(this._controlPoint.clone());
break;
default:
break;
}
if (this._line.isOnFocus()) {
this._line._refreshShape();
this._ctrlPointControler.setLine(this._line);
}
this._line.getLine().updateLine(this._point);
}
/**
/**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
undoExecute() {
const line = this._line;
const model = line.getModel();
switch (this._point) {
case 0:
if ($defined(this._oldControlPoint)) {
line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
model.setSrcCtrlPoint(this._oldControlPoint.clone());
line.setSrcControlPoint(this._oldControlPoint.clone());
line.setIsSrcControlPointCustom(this._wasCustom);
}
break;
case 1:
if ($defined(this._oldControlPoint)) {
line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
model.setDestCtrlPoint(this._oldControlPoint.clone());
line.setDestControlPoint(this._oldControlPoint.clone());
line.setIsDestControlPointCustom(this._wasCustom);
}
break;
default:
break;
}
this._line.getLine().updateLine(this._point);
if (this._line.isOnFocus()) {
this._ctrlPointControler.setLine(line);
line._refreshShape();
}
},
},
);
undoExecute() {
const line = this._line;
const model = line.getModel();
switch (this._point) {
case 0:
if ($defined(this._oldControlPoint)) {
line.setFrom(this._originalEndPoint.x, this._originalEndPoint.y);
model.setSrcCtrlPoint(this._oldControlPoint.clone());
line.setSrcControlPoint(this._oldControlPoint.clone());
line.setIsSrcControlPointCustom(this._wasCustom);
}
break;
case 1:
if ($defined(this._oldControlPoint)) {
line.setTo(this._originalEndPoint.x, this._originalEndPoint.y);
model.setDestCtrlPoint(this._oldControlPoint.clone());
line.setDestControlPoint(this._oldControlPoint.clone());
line.setIsDestControlPointCustom(this._wasCustom);
}
break;
default:
break;
}
this._line.getLine().updateLine(this._point);
if (this._line.isOnFocus()) {
this._ctrlPointControler.setLine(line);
line._refreshShape();
}
}
}
export default MoveControlPointCommand;

View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -16,7 +16,7 @@
* limitations under the License.
*/
import { $assert, $defined, createDocument } from '@wisemapping/core-js';
import web2d from '@wisemapping/web2d';
import * as web2d from '@wisemapping/web2d';
import Mindmap from '../model/Mindmap';
import INodeModel, { TopicShape } from '../model/INodeModel';
import TopicFeature from '../TopicFeature';
@ -26,492 +26,485 @@ import ConnectionLine from '../ConnectionLine';
* @class
*/
// eslint-disable-next-line camelcase
const XMLSerializer_Pela = new Class(
/** @lends XMLSerializer_Pela */ {
/**
* @param mindmap
* @throws will throw an error if mindmap is null or undefined
* @return the created XML document (using the cross-browser implementation in core)
*/
toXML(mindmap) {
$assert(mindmap, 'Can not save a null mindmap');
class XMLSerializer_Pela {
toXML(mindmap) {
$assert(mindmap, 'Can not save a null mindmap');
const document = createDocument();
const document = createDocument();
// Store map attributes ...
const mapElem = document.createElement('map');
const name = mindmap.getId();
if ($defined(name)) {
mapElem.setAttribute('name', this.rmXmlInv(name));
// Store map attributes ...
const mapElem = document.createElement('map');
const name = mindmap.getId();
if ($defined(name)) {
mapElem.setAttribute('name', this.rmXmlInv(name));
}
const version = mindmap.getVersion();
if ($defined(version)) {
mapElem.setAttribute('version', version);
}
document.appendChild(mapElem);
// Create branches ...
const topics = mindmap.getBranches();
for (let i = 0; i < topics.length; i++) {
const topic = topics[i];
const topicDom = this._topicToXML(document, topic);
mapElem.appendChild(topicDom);
}
// Create Relationships
const relationships = mindmap.getRelationships();
if (relationships.length > 0) {
for (let j = 0; j < relationships.length; j++) {
const relationship = relationships[j];
if (
mindmap.findNodeById(relationship.getFromNode()) !== null
&& mindmap.findNodeById(relationship.getToNode()) !== null
) {
// Isolated relationships are not persisted ....
const relationDom = this._relationshipToXML(document, relationship);
mapElem.appendChild(relationDom);
}
}
const version = mindmap.getVersion();
if ($defined(version)) {
mapElem.setAttribute('version', version);
}
return document;
}
_topicToXML(document, topic) {
const parentTopic = document.createElement('topic');
// Set topic attributes...
if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
parentTopic.setAttribute('central', 'true');
} else {
const pos = topic.getPosition();
parentTopic.setAttribute('position', `${pos.x}${pos.y}`);
const order = topic.getOrder();
if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
}
const text = topic.getText();
if ($defined(text)) {
this._noteTextToXML(document, parentTopic, text);
}
const shape = topic.getShapeType();
if ($defined(shape)) {
parentTopic.setAttribute('shape', shape);
if (shape === TopicShape.IMAGE) {
parentTopic.setAttribute(
'image',
`${topic.getImageSize().width}${topic.getImageSize().height
}:${topic.getImageUrl()}`,
);
}
}
document.appendChild(mapElem);
if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) {
parentTopic.setAttribute('shrink', 'true');
}
// Create branches ...
const topics = mindmap.getBranches();
for (let i = 0; i < topics.length; i++) {
const topic = topics[i];
const topicDom = this._topicToXML(document, topic);
mapElem.appendChild(topicDom);
// Font properties ...
const id = topic.getId();
parentTopic.setAttribute('id', id);
let font = '';
const fontFamily = topic.getFontFamily();
font += `${fontFamily || ''};`;
const fontSize = topic.getFontSize();
font += `${fontSize || ''};`;
const fontColor = topic.getFontColor();
font += `${fontColor || ''};`;
const fontWeight = topic.getFontWeight();
font += `${fontWeight || ''};`;
const fontStyle = topic.getFontStyle();
font += `${fontStyle || ''};`;
if (
$defined(fontFamily)
|| $defined(fontSize)
|| $defined(fontColor)
|| $defined(fontWeight)
|| $defined(fontStyle)
) {
parentTopic.setAttribute('fontStyle', font);
}
const bgColor = topic.getBackgroundColor();
if ($defined(bgColor)) {
parentTopic.setAttribute('bgColor', bgColor);
}
const brColor = topic.getBorderColor();
if ($defined(brColor)) {
parentTopic.setAttribute('brColor', brColor);
}
const metadata = topic.getMetadata();
if ($defined(metadata)) {
parentTopic.setAttribute('metadata', metadata);
}
// Serialize features ...
const features = topic.getFeatures();
for (let i = 0; i < features.length; i++) {
const feature = features[i];
const featureType = feature.getType();
const featureDom = document.createElement(featureType);
const attributes = feature.getAttributes();
for (const key in attributes) {
const value = attributes[key];
if (key === 'text') {
const cdata = document.createCDATASection(this.rmXmlInv(value));
featureDom.appendChild(cdata);
} else {
featureDom.setAttribute(key, this.rmXmlInv(value));
}
}
parentTopic.appendChild(featureDom);
}
// Create Relationships
const relationships = mindmap.getRelationships();
if (relationships.length > 0) {
for (let j = 0; j < relationships.length; j++) {
const relationship = relationships[j];
if (
mindmap.findNodeById(relationship.getFromNode()) !== null
&& mindmap.findNodeById(relationship.getToNode()) !== null
) {
// Isolated relationships are not persisted ....
const relationDom = this._relationshipToXML(document, relationship);
mapElem.appendChild(relationDom);
// CHILDREN TOPICS
const childTopics = topic.getChildren();
for (let j = 0; j < childTopics.length; j++) {
const childTopic = childTopics[j];
const childDom = this._topicToXML(document, childTopic);
parentTopic.appendChild(childDom);
}
return parentTopic;
}
_noteTextToXML(document, elem, text) {
if (text.indexOf('\n') === -1) {
elem.setAttribute('text', this.rmXmlInv(text));
} else {
const textDom = document.createElement('text');
const cdata = document.createCDATASection(this.rmXmlInv(text));
textDom.appendChild(cdata);
elem.appendChild(textDom);
}
}
_relationshipToXML(document, relationship) {
const result = document.createElement('relationship');
result.setAttribute('srcTopicId', relationship.getFromNode());
result.setAttribute('destTopicId', relationship.getToNode());
const lineType = relationship.getLineType();
result.setAttribute('lineType', lineType);
if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) {
if ($defined(relationship.getSrcCtrlPoint())) {
const srcPoint = relationship.getSrcCtrlPoint();
result.setAttribute(
'srcCtrlPoint',
`${Math.round(srcPoint.x)}${Math.round(srcPoint.y)}`,
);
}
if ($defined(relationship.getDestCtrlPoint())) {
const destPoint = relationship.getDestCtrlPoint();
result.setAttribute(
'destCtrlPoint',
`${Math.round(destPoint.x)}${Math.round(destPoint.y)}`,
);
}
}
result.setAttribute('endArrow', relationship.getEndArrow());
result.setAttribute('startArrow', relationship.getStartArrow());
return result;
}
/**
* @param dom
* @param mapId
* @throws will throw an error if dom is null or undefined
* @throws will throw an error if mapId is null or undefined
* @throws will throw an error if the document element is not consistent with a wisemap's root
* element
*/
loadFromDom(dom, mapId) {
$assert(dom, 'dom can not be null');
$assert(mapId, 'mapId can not be null');
const rootElem = dom.documentElement;
// Is a wisemap?.
$assert(
rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE,
'This seem not to be a map document.',
);
this._idsMap = {};
// Start the loading process ...
const version = rootElem.getAttribute('version');
const mindmap = new Mindmap(mapId, version);
const children = rootElem.childNodes;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === 1) {
switch (child.tagName) {
case 'topic': {
const topic = this._deserializeNode(child, mindmap);
mindmap.addBranch(topic);
break;
}
}
}
return document;
},
_topicToXML(document, topic) {
const parentTopic = document.createElement('topic');
// Set topic attributes...
if (topic.getType() === INodeModel.CENTRAL_TOPIC_TYPE) {
parentTopic.setAttribute('central', 'true');
} else {
const pos = topic.getPosition();
parentTopic.setAttribute('position', `${pos.x},${pos.y}`);
const order = topic.getOrder();
if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order); }
}
const text = topic.getText();
if ($defined(text)) {
this._noteTextToXML(document, parentTopic, text);
}
const shape = topic.getShapeType();
if ($defined(shape)) {
parentTopic.setAttribute('shape', shape);
if (shape === TopicShape.IMAGE) {
parentTopic.setAttribute(
'image',
`${topic.getImageSize().width},${topic.getImageSize().height
}:${topic.getImageUrl()}`,
);
}
}
if (topic.areChildrenShrunken() && topic.getType() !== INodeModel.CENTRAL_TOPIC_TYPE) {
parentTopic.setAttribute('shrink', 'true');
}
// Font properties ...
const id = topic.getId();
parentTopic.setAttribute('id', id);
let font = '';
const fontFamily = topic.getFontFamily();
font += `${fontFamily || ''};`;
const fontSize = topic.getFontSize();
font += `${fontSize || ''};`;
const fontColor = topic.getFontColor();
font += `${fontColor || ''};`;
const fontWeight = topic.getFontWeight();
font += `${fontWeight || ''};`;
const fontStyle = topic.getFontStyle();
font += `${fontStyle || ''};`;
if (
$defined(fontFamily)
|| $defined(fontSize)
|| $defined(fontColor)
|| $defined(fontWeight)
|| $defined(fontStyle)
) {
parentTopic.setAttribute('fontStyle', font);
}
const bgColor = topic.getBackgroundColor();
if ($defined(bgColor)) {
parentTopic.setAttribute('bgColor', bgColor);
}
const brColor = topic.getBorderColor();
if ($defined(brColor)) {
parentTopic.setAttribute('brColor', brColor);
}
const metadata = topic.getMetadata();
if ($defined(metadata)) {
parentTopic.setAttribute('metadata', metadata);
}
// Serialize features ...
const features = topic.getFeatures();
for (let i = 0; i < features.length; i++) {
const feature = features[i];
const featureType = feature.getType();
const featureDom = document.createElement(featureType);
const attributes = feature.getAttributes();
for (const key in attributes) {
const value = attributes[key];
if (key === 'text') {
const cdata = document.createCDATASection(this.rmXmlInv(value));
featureDom.appendChild(cdata);
} else {
featureDom.setAttribute(key, this.rmXmlInv(value));
}
}
parentTopic.appendChild(featureDom);
}
// CHILDREN TOPICS
const childTopics = topic.getChildren();
for (let j = 0; j < childTopics.length; j++) {
const childTopic = childTopics[j];
const childDom = this._topicToXML(document, childTopic);
parentTopic.appendChild(childDom);
}
return parentTopic;
},
_noteTextToXML(document, elem, text) {
if (text.indexOf('\n') === -1) {
elem.setAttribute('text', this.rmXmlInv(text));
} else {
const textDom = document.createElement('text');
const cdata = document.createCDATASection(this.rmXmlInv(text));
textDom.appendChild(cdata);
elem.appendChild(textDom);
}
},
_relationshipToXML(document, relationship) {
const result = document.createElement('relationship');
result.setAttribute('srcTopicId', relationship.getFromNode());
result.setAttribute('destTopicId', relationship.getToNode());
const lineType = relationship.getLineType();
result.setAttribute('lineType', lineType);
if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) {
if ($defined(relationship.getSrcCtrlPoint())) {
const srcPoint = relationship.getSrcCtrlPoint();
result.setAttribute(
'srcCtrlPoint',
`${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`,
);
}
if ($defined(relationship.getDestCtrlPoint())) {
const destPoint = relationship.getDestCtrlPoint();
result.setAttribute(
'destCtrlPoint',
`${Math.round(destPoint.x)},${Math.round(destPoint.y)}`,
);
}
}
result.setAttribute('endArrow', relationship.getEndArrow());
result.setAttribute('startArrow', relationship.getStartArrow());
return result;
},
/**
* @param dom
* @param mapId
* @throws will throw an error if dom is null or undefined
* @throws will throw an error if mapId is null or undefined
* @throws will throw an error if the document element is not consistent with a wisemap's root
* element
*/
loadFromDom(dom, mapId) {
$assert(dom, 'dom can not be null');
$assert(mapId, 'mapId can not be null');
const rootElem = dom.documentElement;
// Is a wisemap?.
$assert(
rootElem.tagName === XMLSerializer_Pela.MAP_ROOT_NODE,
'This seem not to be a map document.',
);
this._idsMap = {};
// Start the loading process ...
const version = rootElem.getAttribute('version');
const mindmap = new Mindmap(mapId, version);
const children = rootElem.childNodes;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === 1) {
switch (child.tagName) {
case 'topic': {
const topic = this._deserializeNode(child, mindmap);
mindmap.addBranch(topic);
break;
case 'relationship': {
const relationship = this._deserializeRelationship(child, mindmap);
if (relationship != null) {
mindmap.addRelationship(relationship);
}
case 'relationship': {
const relationship = this._deserializeRelationship(child, mindmap);
if (relationship != null) {
mindmap.addRelationship(relationship);
}
break;
}
default:
break;
break;
}
default:
break;
}
}
this._idsMap = null;
mindmap.setId(mapId);
return mindmap;
},
}
this._idsMap = null;
mindmap.setId(mapId);
return mindmap;
}
_deserializeNode(domElem, mindmap) {
const type = domElem.getAttribute('central') != null
? INodeModel.CENTRAL_TOPIC_TYPE
: INodeModel.MAIN_TOPIC_TYPE;
_deserializeNode(domElem, mindmap) {
const type = domElem.getAttribute('central') != null
? INodeModel.CENTRAL_TOPIC_TYPE
: INodeModel.MAIN_TOPIC_TYPE;
// Load attributes...
let id = domElem.getAttribute('id');
if ($defined(id)) {
id = parseInt(id, 10);
// Load attributes...
let id = domElem.getAttribute('id');
if ($defined(id)) {
id = parseInt(id, 10);
}
if (this._idsMap[id]) {
id = null;
} else {
this._idsMap[id] = domElem;
}
const topic = mindmap.createNode(type, id);
// Set text property is it;s defined...
const text = domElem.getAttribute('text');
if ($defined(text) && text) {
topic.setText(text);
}
const fontStyle = domElem.getAttribute('fontStyle');
if ($defined(fontStyle) && fontStyle) {
const font = fontStyle.split(';');
if (font[0]) {
topic.setFontFamily(font[0]);
}
if (this._idsMap[id]) {
id = null;
} else {
this._idsMap[id] = domElem;
if (font[1]) {
topic.setFontSize(font[1]);
}
const topic = mindmap.createNode(type, id);
// Set text property is it;s defined...
const text = domElem.getAttribute('text');
if ($defined(text) && text) {
topic.setText(text);
if (font[2]) {
topic.setFontColor(font[2]);
}
const fontStyle = domElem.getAttribute('fontStyle');
if ($defined(fontStyle) && fontStyle) {
const font = fontStyle.split(';');
if (font[3]) {
topic.setFontWeight(font[3]);
}
if (font[0]) {
topic.setFontFamily(font[0]);
}
if (font[4]) {
topic.setFontStyle(font[4]);
}
}
if (font[1]) {
topic.setFontSize(font[1]);
}
const shape = domElem.getAttribute('shape');
if ($defined(shape)) {
topic.setShapeType(shape);
if (font[2]) {
topic.setFontColor(font[2]);
}
if (shape === TopicShape.IMAGE) {
const image = domElem.getAttribute('image');
const size = image.substring(0, image.indexOf(':'));
const url = image.substring(image.indexOf(':') + 1, image.length);
topic.setImageUrl(url);
if (font[3]) {
topic.setFontWeight(font[3]);
}
const split = size.split(',');
topic.setImageSize(split[0], split[1]);
}
}
if (font[4]) {
topic.setFontStyle(font[4]);
const bgColor = domElem.getAttribute('bgColor');
if ($defined(bgColor)) {
topic.setBackgroundColor(bgColor);
}
const borderColor = domElem.getAttribute('brColor');
if ($defined(borderColor)) {
topic.setBorderColor(borderColor);
}
const order = domElem.getAttribute('order');
if ($defined(order) && order !== 'NaN') {
// Hack for broken maps ...
topic.setOrder(parseInt(order, 10));
}
const isShrink = domElem.getAttribute('shrink');
// Hack: Some production maps has been stored with the central topic collapsed. This is a bug.
if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) {
topic.setChildrenShrunken(isShrink);
}
const position = domElem.getAttribute('position');
if ($defined(position)) {
const pos = position.split(',');
topic.setPosition(pos[0], pos[1]);
}
const metadata = domElem.getAttribute('metadata');
if ($defined(metadata)) {
topic.setMetadata(metadata);
}
// Creating icons and children nodes
const children = domElem.childNodes;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === Node.ELEMENT_NODE) {
if (child.tagName === 'topic') {
const childTopic = this._deserializeNode(child, mindmap);
childTopic.connectTo(topic);
} else if (TopicFeature.isSupported(child.tagName)) {
// Load attributes ...
const namedNodeMap = child.attributes;
const attributes = {};
for (let j = 0; j < namedNodeMap.length; j++) {
const attribute = namedNodeMap.item(j);
attributes[attribute.name] = attribute.value;
}
// Has text node ?.
const textAttr = this._deserializeTextAttr(child);
if (textAttr) {
attributes.text = textAttr;
}
// Create a new element ....
const featureType = child.tagName;
const feature = TopicFeature.createModel(featureType, attributes);
topic.addFeature(feature);
} else if (child.tagName === 'text') {
const nodeText = this._deserializeNodeText(child);
topic.setText(nodeText);
}
}
}
return topic;
}
const shape = domElem.getAttribute('shape');
if ($defined(shape)) {
topic.setShapeType(shape);
if (shape === TopicShape.IMAGE) {
const image = domElem.getAttribute('image');
const size = image.substring(0, image.indexOf(':'));
const url = image.substring(image.indexOf(':') + 1, image.length);
topic.setImageUrl(url);
const split = size.split(',');
topic.setImageSize(split[0], split[1]);
}
}
const bgColor = domElem.getAttribute('bgColor');
if ($defined(bgColor)) {
topic.setBackgroundColor(bgColor);
}
const borderColor = domElem.getAttribute('brColor');
if ($defined(borderColor)) {
topic.setBorderColor(borderColor);
}
const order = domElem.getAttribute('order');
if ($defined(order) && order !== 'NaN') {
// Hack for broken maps ...
topic.setOrder(parseInt(order, 10));
}
const isShrink = domElem.getAttribute('shrink');
// Hack: Some production maps has been stored with the central topic collapsed. This is a bug.
if ($defined(isShrink) && type !== INodeModel.CENTRAL_TOPIC_TYPE) {
topic.setChildrenShrunken(isShrink);
}
const position = domElem.getAttribute('position');
if ($defined(position)) {
const pos = position.split(',');
topic.setPosition(pos[0], pos[1]);
}
const metadata = domElem.getAttribute('metadata');
if ($defined(metadata)) {
topic.setMetadata(metadata);
}
// Creating icons and children nodes
_deserializeTextAttr(domElem) {
let value = domElem.getAttribute('text');
if (!$defined(value)) {
const children = domElem.childNodes;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === Node.ELEMENT_NODE) {
if (child.tagName === 'topic') {
const childTopic = this._deserializeNode(child, mindmap);
childTopic.connectTo(topic);
} else if (TopicFeature.isSupported(child.tagName)) {
// Load attributes ...
const namedNodeMap = child.attributes;
const attributes = {};
for (let j = 0; j < namedNodeMap.length; j++) {
const attribute = namedNodeMap.item(j);
attributes[attribute.name] = attribute.value;
}
// Has text node ?.
const textAttr = this._deserializeTextAttr(child);
if (textAttr) {
attributes.text = textAttr;
}
// Create a new element ....
const featureType = child.tagName;
const feature = TopicFeature.createModel(featureType, attributes);
topic.addFeature(feature);
} else if (child.tagName === 'text') {
const nodeText = this._deserializeNodeText(child);
topic.setText(nodeText);
}
}
}
return topic;
},
_deserializeTextAttr(domElem) {
let value = domElem.getAttribute('text');
if (!$defined(value)) {
const children = domElem.childNodes;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === Node.CDATA_SECTION_NODE) {
value = child.nodeValue;
}
}
} else {
// Notes must be decoded ...
value = unescape(value);
// Hack for empty nodes ...
if (value === '') {
value = ' ';
}
}
return value;
},
_deserializeNodeText(domElem) {
const children = domElem.childNodes;
let value = null;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === Node.CDATA_SECTION_NODE) {
value = child.nodeValue;
}
}
return value;
},
} else {
// Notes must be decoded ...
value = unescape(value);
_deserializeRelationship(domElement, mindmap) {
const srcId = domElement.getAttribute('srcTopicId');
const destId = domElement.getAttribute('destTopicId');
const lineType = domElement.getAttribute('lineType');
const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint');
const destCtrlPoint = domElement.getAttribute('destCtrlPoint');
// Hack for empty nodes ...
if (value === '') {
value = ' ';
}
}
// If for some reason a relationship lines has source and dest nodes the same, don't import it.
if (srcId === destId) {
return null;
}
// Is the connections points valid ?. If it's not, do not load the relationship ...
if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) {
return null;
}
return value;
}
const model = mindmap.createRelationship(srcId, destId);
model.setLineType(lineType);
if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') {
model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint));
_deserializeNodeText(domElem) {
const children = domElem.childNodes;
let value = null;
for (let i = 0; i < children.length; i++) {
const child = children[i];
if (child.nodeType === Node.CDATA_SECTION_NODE) {
value = child.nodeValue;
}
if ($defined(destCtrlPoint) && destCtrlPoint !== '') {
model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint));
}
model.setEndArrow('false');
model.setStartArrow('true');
return model;
},
}
return value;
}
/**
* This method ensures that the output String has only
* valid XML unicode characters as specified by the
* XML 1.0 standard. For reference, please see
* <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
* standard</a>. This method will return an empty
* String if the input is null or empty.
*
* @param in The String whose non-valid characters we want to remove.
* @return The in String, stripped of non-valid characters.
*/
rmXmlInv(str) {
if (str == null || str === undefined) return null;
_deserializeRelationship(domElement, mindmap) {
const srcId = domElement.getAttribute('srcTopicId');
const destId = domElement.getAttribute('destTopicId');
const lineType = domElement.getAttribute('lineType');
const srcCtrlPoint = domElement.getAttribute('srcCtrlPoint');
const destCtrlPoint = domElement.getAttribute('destCtrlPoint');
let result = '';
for (let i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
if (
c === 0x9
|| c === 0xa
|| c === 0xd
|| (c >= 0x20 && c <= 0xd7ff)
|| (c >= 0xe000 && c <= 0xfffd)
|| (c >= 0x10000 && c <= 0x10ffff)
) {
result += str.charAt(i);
}
// If for some reason a relationship lines has source and dest nodes the same, don't import it.
if (srcId === destId) {
return null;
}
// Is the connections points valid ?. If it's not, do not load the relationship ...
if (mindmap.findNodeById(srcId) == null || mindmap.findNodeById(destId) == null) {
return null;
}
const model = mindmap.createRelationship(srcId, destId);
model.setLineType(lineType);
if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') {
model.setSrcCtrlPoint(web2d.Point.fromString(srcCtrlPoint));
}
if ($defined(destCtrlPoint) && destCtrlPoint !== '') {
model.setDestCtrlPoint(web2d.Point.fromString(destCtrlPoint));
}
model.setEndArrow('false');
model.setStartArrow('true');
return model;
}
/**
* This method ensures that the output String has only
* valid XML unicode characters as specified by the
* XML 1.0 standard. For reference, please see
* <a href="http://www.w3.org/TR/2000/REC-xml-20001006#NT-Char">the
* standard</a>. This method will return an empty
* String if the input is null or empty.
*
* @param in The String whose non-valid characters we want to remove.
* @return The in String, stripped of non-valid characters.
*/
rmXmlInv(str) {
if (str == null || str === undefined) return null;
let result = '';
for (let i = 0; i < str.length; i++) {
const c = str.charCodeAt(i);
if (
c === 0x9
|| c === 0xa
|| c === 0xd
|| (c >= 0x20 && c <= 0xd7ff)
|| (c >= 0xe000 && c <= 0xfffd)
|| (c >= 0x10000 && c <= 0x10ffff)
) {
result += str.charAt(i);
}
return result;
},
},
);
}
return result;
}
}
/**
* a wisemap's root element tag name

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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

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

View File

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

View File

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

View File

@ -43,14 +43,7 @@ module.exports = {
resolve: {
alias: {
'@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'],
},

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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) => {
let signx = 1;
let signy = 1;

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

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

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 ;

View File

@ -9,46 +9,10 @@
border: 1px solid black;
}
</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>
<body onload="initialize();">
<body>
<h1>PolyLines Render Tests </h1>
<table>
<colgroup style="width:80%;">
<col style="width:30%" />
@ -63,15 +27,6 @@
</td>
</tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table>
</body>

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

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.$ = $;

View File

@ -9,47 +9,9 @@
border: 1px solid black;
}
</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>
<body onload="initialize();">
<body>
<h1>PolyLines Render Tests </h1>
@ -67,15 +29,6 @@
</td>
</tr>
<tr>
<td>
This is how multiple childs will look in each style line
</td>
<td>
<div id="multipleLineExample" />
</td>
</tr>
</table>
</body>

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

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
@ -8,136 +7,14 @@
td {
border: 1px solid black;
}
</style>
<script type="text/javascript">
web2d = {
peer: {}
};
web2d.peer =
{
svg: {}
};
web2d.peer.utils = {};
</script>
<style type="text/css">
.eventForm {
float: left;
margin: 10px;
}
</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>
<body onload="initialize();">
<body>
<h1>Elements Event Handling</h1>
<table>
@ -273,4 +150,4 @@
</table>
</body>
</html>
</html>

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);

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
th,
@ -9,78 +7,9 @@
border: 1px solid black;
}
</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>
<body onload="initialize();">
<body>
<h1>Web2d Fonts Tests</h1>
<table>
<colgroup>
<col style="width:30%" />

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}`);
});

View File

@ -9,338 +9,11 @@
border: 1px solid black;
}
</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>
<body onload="initialize();">
<h1>Group Render Tests.</h1>
<body>
<h1>Group Render Tests</h1>
<table>
<colgroup style="width:80%;">
<col style="width:50%" />

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

View File

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

View File

@ -9,84 +9,9 @@
border: 1px solid black;
}
</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>
<body onload="initialize();">
<body>
<h1>Lines Render Tests </h1>

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'));

View File

@ -9,159 +9,9 @@
border: 1px solid black;
}
</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>
<body onload="initialize();">
<body>
<h1>PolyLines Render Tests </h1>
<table>

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