mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Migration to EE6 of web2d and mindplot
This commit is contained in:
parent
a8a843353b
commit
17b22ca211
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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',
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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');
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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'] },
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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
@ -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;
|
||||
|
||||
|
@ -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: {
|
||||
|
@ -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) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
};
|
@ -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}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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');
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
@ -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">×</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();
|
||||
}
|
||||
});
|
@ -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'; };
|
||||
|
@ -1,6 +1,6 @@
|
||||
TestSuite = new Class({
|
||||
class TestSuite {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
TestSuite.NODE_SIZE = { width: 80, height: 30 };
|
||||
TestSuite.ROOT_NODE_SIZE = { width: 120, height: 40 };
|
||||
|
@ -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'],
|
||||
},
|
||||
|
@ -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"]
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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';
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
47
packages/web2d/src/index.js
Normal file
47
packages/web2d/src/index.js
Normal 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,
|
||||
};
|
@ -1,41 +0,0 @@
|
||||
import '@libraries/mootools-core-1.4.5';
|
||||
|
||||
// Utils
|
||||
import eventUtils from '@utils/EventUtils';
|
||||
import transformUtils from '@utils/TransformUtils';
|
||||
|
||||
// Import Components
|
||||
import workspace from '@components/Workspace';
|
||||
import toolkit from '@components/Toolkit';
|
||||
import elipse from '@components/Elipse';
|
||||
import line from '@components/Line';
|
||||
import polyLine from '@components/PolyLine';
|
||||
import curvedLine from '@components/CurvedLine';
|
||||
import arrow from '@components/Arrow';
|
||||
import group from '@components/Group';
|
||||
import rect from '@components/Rect';
|
||||
import text from '@components/Text';
|
||||
import font from '@components/Font';
|
||||
import point from '@components/Point';
|
||||
import image from '@components/Image';
|
||||
|
||||
export default {
|
||||
// Utils
|
||||
EventUtils: eventUtils,
|
||||
TransformUtils: transformUtils,
|
||||
|
||||
// Components
|
||||
Arrow: arrow,
|
||||
CurvedLine: curvedLine,
|
||||
Elipse: elipse,
|
||||
Font: font,
|
||||
Group: group,
|
||||
Image: image,
|
||||
Line: line,
|
||||
Point: point,
|
||||
PolyLine: polyLine,
|
||||
Rect: rect,
|
||||
Text: text,
|
||||
Toolkit: toolkit,
|
||||
Workspace: workspace,
|
||||
};
|
63
packages/web2d/test/playground/Grid.js
Executable file
63
packages/web2d/test/playground/Grid.js
Executable 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 ;
|
@ -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>
|
||||
|
||||
|
22
packages/web2d/test/playground/arrow.js
Normal file
22
packages/web2d/test/playground/arrow.js
Normal 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());
|
@ -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.$ = $;
|
||||
|
@ -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>
|
||||
|
||||
|
26
packages/web2d/test/playground/curvedLine.js
Normal file
26
packages/web2d/test/playground/curvedLine.js
Normal 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());
|
@ -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>
|
107
packages/web2d/test/playground/events.js
Normal file
107
packages/web2d/test/playground/events.js
Normal 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);
|
@ -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%" />
|
||||
|
57
packages/web2d/test/playground/font.js
Normal file
57
packages/web2d/test/playground/font.js
Normal 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}`);
|
||||
});
|
@ -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%" />
|
||||
|
304
packages/web2d/test/playground/group.js
Normal file
304
packages/web2d/test/playground/group.js
Normal 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();
|
@ -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>
|
||||
|
@ -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>
|
||||
|
||||
|
67
packages/web2d/test/playground/line.js
Normal file
67
packages/web2d/test/playground/line.js
Normal 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'));
|
@ -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
Loading…
Reference in New Issue
Block a user