Change to typescript

This commit is contained in:
Paulo Gustavo Veiga 2022-02-28 16:12:45 -08:00
parent 413f33c9b3
commit 58c08b467e
22 changed files with 191 additions and 346 deletions

View File

@ -116,7 +116,7 @@ class CommandContext {
moveTopic(topic: Topic, position: Point) { moveTopic(topic: Topic, position: Point) {
$assert(topic, 'topic cannot be null'); $assert(topic, 'topic cannot be null');
$assert(position, 'position cannot be null'); $assert(position, 'position cannot be null');
EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, { EventBus.instance.fireEvent('topicMoved', {
node: topic.getModel(), node: topic.getModel(),
position, position,
}); });

View File

@ -93,8 +93,8 @@ class ConnectionLine {
return line; return line;
} }
setVisibility(value: boolean): void { setVisibility(value: boolean, fade = 0): void {
this._line2d.setVisibility(value); this._line2d.setVisibility(value, fade);
} }
isVisible() { isVisible() {

View File

@ -53,7 +53,6 @@ import Mindmap from './model/Mindmap';
import NodeModel from './model/NodeModel'; import NodeModel from './model/NodeModel';
import Topic from './Topic'; import Topic from './Topic';
import { DesignerOptions } from './DesignerOptionsBuilder'; import { DesignerOptions } from './DesignerOptionsBuilder';
import MainTopic from './MainTopic';
import DragTopic from './DragTopic'; import DragTopic from './DragTopic';
import CentralTopic from './CentralTopic'; import CentralTopic from './CentralTopic';
import FeatureType from './model/FeatureType'; import FeatureType from './model/FeatureType';
@ -606,7 +605,7 @@ class Designer extends Events {
this.goToNode(centralTopic); this.goToNode(centralTopic);
// Finally, sort the map ... // Finally, sort the map ...
EventBus.instance.fireEvent(EventBus.events.DoLayout); EventBus.instance.fireEvent('forceLayout');
this.fireEvent('loadSuccess'); this.fireEvent('loadSuccess');
} }
@ -695,12 +694,6 @@ class Designer extends Events {
mindmap.deleteRelationship(rel.getModel()); mindmap.deleteRelationship(rel.getModel());
} }
/**
* @private
* @param {mindplot.model.RelationshipModel} model
* @return {mindplot.Relationship} the new relationship with events registered
* @throws will throw an error if the target topic cannot be found
*/
private _buildRelationshipShape(model: RelationshipModel): Relationship { private _buildRelationshipShape(model: RelationshipModel): Relationship {
const dmodel = this.getModel(); const dmodel = this.getModel();
@ -744,13 +737,9 @@ class Designer extends Events {
return result; return result;
} }
/** removeTopic(node: Topic): void {
* @param {mindplot.Topic} node the topic to remove
* removes the given topic and its children from Workspace, DesignerModel and NodeModel
*/
removeTopic(node) {
if (!node.isCentralTopic()) { if (!node.isCentralTopic()) {
const parent = node._parent; const parent = node.getParent();
node.disconnect(this._workspace); node.disconnect(this._workspace);
// remove children // remove children
@ -771,17 +760,13 @@ class Designer extends Events {
} }
} }
/** private _resetEdition() {
* @private
*/
_resetEdition() {
const screenManager = this._workspace.getScreenManager(); const screenManager = this._workspace.getScreenManager();
screenManager.fireEvent('update'); screenManager.fireEvent('update');
screenManager.fireEvent('mouseup'); screenManager.fireEvent('mouseup');
this._relPivot.dispose(); this._relPivot.dispose();
} }
/** */
deleteSelectedEntities() { deleteSelectedEntities() {
// Is there some action in progress ?. // Is there some action in progress ?.
this._resetEdition(); this._resetEdition();
@ -840,7 +825,7 @@ class Designer extends Events {
/** */ /** */
changeBackgroundColor(color: string) { changeBackgroundColor(color: string) {
const validateFunc = (topic) => topic.getShapeType() !== TopicShape.LINE; const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE;
const validateError = 'Color can not be set to line topics.'; const validateError = 'Color can not be set to line topics.';
const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
@ -849,9 +834,8 @@ class Designer extends Events {
} }
} }
/** */
changeBorderColor(color: string) { changeBorderColor(color: string) {
const validateFunc = (topic) => topic.getShapeType() !== TopicShape.LINE; const validateFunc = (topic: Topic) => topic.getShapeType() !== TopicShape.LINE;
const validateError = 'Color can not be set to line topics.'; const validateError = 'Color can not be set to line topics.';
const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError); const topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
if (topicsIds.length > 0) { if (topicsIds.length > 0) {
@ -859,7 +843,6 @@ class Designer extends Events {
} }
} }
/** */
changeFontSize(size: number) { changeFontSize(size: number) {
const topicsIds = this.getModel().filterTopicsIds(); const topicsIds = this.getModel().filterTopicsIds();
if (topicsIds.length > 0) { if (topicsIds.length > 0) {
@ -895,11 +878,7 @@ class Designer extends Events {
} }
} }
/** addLink(): void {
* lets the selected topic open the link editor where the user can define or modify an
* existing link
*/
addLink() {
const model = this.getModel(); const model = this.getModel();
const topic = model.selectedTopic(); const topic = model.selectedTopic();
if (topic) { if (topic) {
@ -908,8 +887,7 @@ class Designer extends Events {
} }
} }
/** */ addNote(): void {
addNote() {
const model = this.getModel(); const model = this.getModel();
const topic = model.selectedTopic(); const topic = model.selectedTopic();
if (topic) { if (topic) {

View File

@ -42,19 +42,19 @@ class DesignerActionRunner {
command.execute(this._context); command.execute(this._context);
this._undoManager.enqueue(command); this._undoManager.enqueue(command);
this.fireChangeEvent(); this.fireChangeEvent();
EventBus.instance.fireEvent(EventBus.events.DoLayout); EventBus.instance.fireEvent('forceLayout');
} }
undo(): void { undo(): void {
this._undoManager.execUndo(this._context); this._undoManager.execUndo(this._context);
this.fireChangeEvent(); this.fireChangeEvent();
EventBus.instance.fireEvent(EventBus.events.DoLayout); EventBus.instance.fireEvent('forceLayout');
} }
redo(): void { redo(): void {
this._undoManager.execRedo(this._context); this._undoManager.execRedo(this._context);
this.fireChangeEvent(); this.fireChangeEvent();
EventBus.instance.fireEvent(EventBus.events.DoLayout); EventBus.instance.fireEvent('forceLayout');
} }
fireChangeEvent(): void { fireChangeEvent(): void {

View File

@ -24,8 +24,6 @@ import Workspace from './Workspace';
class DragManager { class DragManager {
private _workspace: Workspace; private _workspace: Workspace;
private _designerModel: Workspace;
private _isDragInProcess: boolean; private _isDragInProcess: boolean;
private _eventDispatcher: EventBusDispatcher; private _eventDispatcher: EventBusDispatcher;
@ -38,7 +36,6 @@ class DragManager {
constructor(workspace: Workspace, eventDispatcher: EventBusDispatcher) { constructor(workspace: Workspace, eventDispatcher: EventBusDispatcher) {
this._workspace = workspace; this._workspace = workspace;
this._designerModel = workspace;
this._listeners = {}; this._listeners = {};
this._isDragInProcess = false; this._isDragInProcess = false;
this._eventDispatcher = eventDispatcher; this._eventDispatcher = eventDispatcher;
@ -68,7 +65,7 @@ class DragManager {
// Register mouse up listeners ... // Register mouse up listeners ...
const mouseUpListener = dragManager._buildMouseUpListener( const mouseUpListener = dragManager._buildMouseUpListener(
workspace, topic, dragNode, dragManager, workspace, dragNode, dragManager,
); );
screen.addEvent('mouseup', mouseUpListener); screen.addEvent('mouseup', mouseUpListener);
@ -115,7 +112,7 @@ class DragManager {
return result; return result;
} }
protected _buildMouseUpListener(workspace: Workspace, topic: Topic, dragNode, dragManager: DragManager) { protected _buildMouseUpListener(workspace: Workspace, dragNode, dragManager: DragManager) {
const screen = workspace.getScreenManager(); const screen = workspace.getScreenManager();
const me = this; const me = this;
const result = (event: Event) => { const result = (event: Event) => {
@ -149,13 +146,7 @@ class DragManager {
return result; return result;
} }
/** addEvent(type: 'startdragging' | 'dragging' | 'enddragging', listener) {
* type:
* - startdragging.
* - dragging
* - enddragging
*/
addEvent(type: string, listener) {
this._listeners[type] = listener; this._listeners[type] = listener;
} }
} }

View File

@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert } from '@wisemapping/core-js';
import { Point, ElementClass } from '@wisemapping/web2d'; import { Point, ElementClass } from '@wisemapping/web2d';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
@ -27,12 +27,19 @@ import Workspace from './Workspace';
class DragTopic { class DragTopic {
private _elem2d: ElementClass; private _elem2d: ElementClass;
private _order: number | null; private _order: number | null;
private _draggedNode: NodeGraph; private _draggedNode: NodeGraph;
private _layoutManager: LayoutManager; private _layoutManager: LayoutManager;
private _position: any;
private _position: Point;
private _isInWorkspace: boolean; private _isInWorkspace: boolean;
static _dragPivot: any;
static _dragPivot: DragPivot = new DragPivot();
constructor(dragShape: ElementClass, draggedNode: NodeGraph, layoutManger: LayoutManager) { constructor(dragShape: ElementClass, draggedNode: NodeGraph, layoutManger: LayoutManager) {
$assert(dragShape, 'Rect can not be null.'); $assert(dragShape, 'Rect can not be null.');
$assert(draggedNode, 'draggedNode can not be null.'); $assert(draggedNode, 'draggedNode can not be null.');
@ -46,13 +53,13 @@ class DragTopic {
this._isInWorkspace = false; this._isInWorkspace = false;
} }
setOrder(order: number) { setOrder(order: number): void {
this._order = order; this._order = order;
} }
setPosition(x: number, y: number) { setPosition(x: number, y: number): void {
// Update drag shadow position .... // Update drag shadow position ....
let position = { x, y }; const position = { x, y };
this._position.setValue(position.x, position.y); this._position.setValue(position.x, position.y);
// Elements are positioned in the center. // Elements are positioned in the center.
@ -104,11 +111,7 @@ class DragTopic {
$assert(parent, 'Parent connection node can not be null.'); $assert(parent, 'Parent connection node can not be null.');
// Where it should be connected ? // Where it should be connected ?
const predict = this._layoutManager.predict(
// @todo: This is a hack for the access of the editor.
// It's required to review why this is needed forcing the declaration of a global variable.
const predict = global.designer._eventBussDispatcher._layoutManager.predict(
parent.getId(), parent.getId(),
this._draggedNode.getId(), this._draggedNode.getId(),
this.getPosition(), this.getPosition(),
@ -154,8 +157,8 @@ class DragTopic {
} }
} }
_getDragPivot(): DragPivot { private _getDragPivot(): DragPivot {
return DragTopic.__getDragPivot(); return DragTopic._dragPivot;
} }
getPosition(): Point { getPosition(): Point {
@ -206,18 +209,9 @@ class DragTopic {
static init(workspace: Workspace) { static init(workspace: Workspace) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
const pivot = DragTopic.__getDragPivot(); const pivot = DragTopic._dragPivot;
workspace.append(pivot); workspace.append(pivot);
};
static __getDragPivot() {
let result = DragTopic._dragPivot;
if (!$defined(result)) {
result = new DragPivot();
DragTopic._dragPivot = result;
} }
return result;
};
} }
export default DragTopic; export default DragTopic;

View File

@ -17,24 +17,24 @@
*/ */
class Events { class Events {
private $events; private _handlerByType;
constructor() { constructor() {
this.$events = {}; this._handlerByType = {};
} }
static _removeOn(string: string) { static _normalizeEventName(string: string) {
return string.replace(/^on([A-Z])/, (full, first) => first.toLowerCase()); return string.replace(/^on([A-Z])/, (_full, first) => first.toLowerCase());
} }
addEvent(typeName: string, fn?, internal?: boolean): Events { addEvent(typeName: string, fn?, internal?: boolean): Events {
const type = Events._removeOn(typeName); const type = Events._normalizeEventName(typeName);
// Add function had not been added yet // Add function had not been added yet
const funByType = this.$events[type] ? this.$events[type] : []; const funByType = this._handlerByType[type] ? this._handlerByType[type] : [];
if (!funByType.includes(fn)) { if (!funByType.includes(fn)) {
funByType.push(fn); funByType.push(fn);
this.$events[type] = funByType; this._handlerByType[type] = funByType;
} }
// Mark reference ... // Mark reference ...
@ -42,25 +42,21 @@ class Events {
return this; return this;
} }
fireEvent(typeName: string, eventArgs?, delay?: boolean): Events { fireEvent(typeName: string, eventArgs?): Events {
const type = Events._removeOn(typeName); const type = Events._normalizeEventName(typeName);
const events = this.$events[type]; const events = this._handlerByType[type];
if (!events) return this; if (!events) return this;
const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs]; const args = Array.isArray(eventArgs) ? eventArgs : [eventArgs];
events.forEach(((fn) => { events.forEach(((fn) => {
if (delay) {
fn.delay(delay, this, args);
} else {
fn.apply(this, args); fn.apply(this, args);
}
})); }));
return this; return this;
} }
removeEvent(typeName: string, fn?): Events { removeEvent(typeName: string, fn?): Events {
const type = Events._removeOn(typeName); const type = Events._normalizeEventName(typeName);
const events = this.$events[type]; const events = this._handlerByType[type];
if (events && !fn.internal) { if (events && !fn.internal) {
const index = events.indexOf(fn); const index = events.indexOf(fn);
if (index !== -1) events.splice(index, 1); if (index !== -1) events.splice(index, 1);

View File

@ -277,10 +277,10 @@ class Relationship extends ConnectionLine {
return this._isInWorkspace; return this._isInWorkspace;
} }
setVisibility(value: boolean) { setVisibility(value: boolean, fade = 0) {
super.setVisibility(value); super.setVisibility(value, fade);
if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow); if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
this._startArrow.setVisibility(this._showStartArrow && value); this._startArrow.setVisibility(this._showStartArrow && value, fade);
} }
setOpacity(opacity: number) { setOpacity(opacity: number) {

View File

@ -78,8 +78,8 @@ class ShirinkConnector {
this._isShrink = isShrink; this._isShrink = isShrink;
} }
setVisibility(value: boolean): void { setVisibility(value: boolean, fade = 0): void {
this._ellipse.setVisibility(value); this._ellipse.setVisibility(value, fade);
} }
setOpacity(opacity: number): void { setOpacity(opacity: number): void {

View File

@ -81,7 +81,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
const commandFunc = (topic: Topic, pos: Point) => { const commandFunc = (topic: Topic, pos: Point) => {
const result = topic.getPosition(); const result = topic.getPosition();
EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, { EventBus.instance.fireEvent('topicMoved', {
node: topic.getModel(), node: topic.getModel(),
position: pos, position: pos,
}); });
@ -252,7 +252,6 @@ class StandaloneActionDispatcher extends ActionDispatcher {
this.execute(command); this.execute(command);
} }
/** */
addFeatureToTopic(topicId: number, featureType: FeatureType, attributes) { addFeatureToTopic(topicId: number, featureType: FeatureType, attributes) {
const command = new AddFeatureToTopicCommand(topicId, featureType, attributes); const command = new AddFeatureToTopicCommand(topicId, featureType, attributes);
this.execute(command); this.execute(command);

View File

@ -28,7 +28,6 @@ import TopicStyle from './TopicStyle';
import TopicFeatureFactory from './TopicFeature'; import TopicFeatureFactory from './TopicFeature';
import ConnectionLine from './ConnectionLine'; import ConnectionLine from './ConnectionLine';
import IconGroup from './IconGroup'; import IconGroup from './IconGroup';
import FadeEffect from './util/FadeEffect';
import EventBus from './layout/EventBus'; import EventBus from './layout/EventBus';
import ShirinkConnector from './ShrinkConnector'; import ShirinkConnector from './ShrinkConnector';
import NoteEditor from './widget/NoteEditor'; import NoteEditor from './widget/NoteEditor';
@ -337,11 +336,6 @@ abstract class Topic extends NodeGraph {
return result; return result;
} }
/**
* assigns the new feature model to the topic's node model and adds the respective icon
* @param {mindplot.model.FeatureModel} featureModel
* @return {mindplot.Icon} the icon corresponding to the feature model
*/
addFeature(featureModel: FeatureModel): Icon { addFeature(featureModel: FeatureModel): Icon {
const iconGroup = this.getOrBuildIconGroup(); const iconGroup = this.getOrBuildIconGroup();
this.closeEditors(); this.closeEditors();
@ -350,7 +344,7 @@ abstract class Topic extends NodeGraph {
const model = this.getModel(); const model = this.getModel();
model.addFeature(featureModel); model.addFeature(featureModel);
const result = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly()); const result: Icon = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly());
iconGroup.addIcon( iconGroup.addIcon(
result, result,
featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(), featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(),
@ -360,7 +354,6 @@ abstract class Topic extends NodeGraph {
return result; return result;
} }
/** */
findFeatureById(id: number) { findFeatureById(id: number) {
const model = this.getModel(); const model = this.getModel();
return model.findFeatureById(id); return model.findFeatureById(id);
@ -707,34 +700,21 @@ abstract class Topic extends NodeGraph {
// Change render base on the state. // Change render base on the state.
const shrinkConnector = this.getShrinkConnector(); const shrinkConnector = this.getShrinkConnector();
if ($defined(shrinkConnector)) { if (shrinkConnector) {
shrinkConnector.changeRender(value); shrinkConnector.changeRender(value);
} }
// Do some fancy animation .... // Do some fancy animation ....
const elements = this._flatten2DElements(this); const elements = this._flatten2DElements(this);
const fade = new FadeEffect(elements, !value);
const me = this;
fade.addEvent('complete', () => {
// Set focus on the parent node ...
if (value) {
me.setOnFocus(true);
}
// Set focus in false for all the children ...
elements.forEach((elem) => { elements.forEach((elem) => {
if (elem.setOnFocus) { elem.setVisibility(!value, 250)
elem.setOnFocus(false);
}
}); });
});
fade.start();
EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model); EventBus.instance.fireEvent('childShrinked', model);
} }
/** */ getShrinkConnector(): ShirinkConnector | undefined {
getShrinkConnector(): ShirinkConnector {
let result = this._connector; let result = this._connector;
if (this._connector == null) { if (this._connector == null) {
this._connector = new ShirinkConnector(this); this._connector = new ShirinkConnector(this);
@ -925,19 +905,19 @@ abstract class Topic extends NodeGraph {
} }
/** */ /** */
setVisibility(value: boolean): void { setVisibility(value: boolean, fade = 0): void {
this._setTopicVisibility(value); this._setTopicVisibility(value, fade);
// Hide all children... // Hide all children...
this._setChildrenVisibility(value); this._setChildrenVisibility(value, fade);
// If there there are connection to the node, topic must be hidden. // If there there are connection to the node, topic must be hidden.
this._setRelationshipLinesVisibility(value); this._setRelationshipLinesVisibility(value, fade);
// If it's connected, the connection must be rendered. // If it's connected, the connection must be rendered.
const outgoingLine = this.getOutgoingLine(); const outgoingLine = this.getOutgoingLine();
if (outgoingLine) { if (outgoingLine) {
outgoingLine.setVisibility(value); outgoingLine.setVisibility(value, fade);
} }
} }
@ -971,7 +951,7 @@ abstract class Topic extends NodeGraph {
return elem.isVisible(); return elem.isVisible();
} }
private _setRelationshipLinesVisibility(value: boolean): void { private _setRelationshipLinesVisibility(value: boolean, fade = 0): void {
this._relationships.forEach((relationship) => { this._relationships.forEach((relationship) => {
const sourceTopic = relationship.getSourceTopic(); const sourceTopic = relationship.getSourceTopic();
const targetTopic = relationship.getTargetTopic(); const targetTopic = relationship.getTargetTopic();
@ -981,28 +961,28 @@ abstract class Topic extends NodeGraph {
relationship.setVisibility( relationship.setVisibility(
value value
&& (targetParent == null || !targetParent.areChildrenShrunken()) && (targetParent == null || !targetParent.areChildrenShrunken())
&& (sourceParent == null || !sourceParent.areChildrenShrunken()), && (sourceParent == null || !sourceParent.areChildrenShrunken())
); , fade);
}); });
} }
private _setTopicVisibility(value: boolean) { private _setTopicVisibility(value: boolean, fade = 0) {
const elem = this.get2DElement(); const elem = this.get2DElement();
elem.setVisibility(value); elem.setVisibility(value, fade);
if (this.getIncomingLines().length > 0) { if (this.getIncomingLines().length > 0) {
const connector = this.getShrinkConnector(); const connector = this.getShrinkConnector();
if ($defined(connector)) { if ($defined(connector)) {
connector.setVisibility(value); connector.setVisibility(value, fade);
} }
} }
// Hide inner shape ... // Hide inner shape ...
this.getInnerShape().setVisibility(value); this.getInnerShape().setVisibility(value, fade);
// Hide text shape ... // Hide text shape ...
const textShape = this.getTextShape(); const textShape = this.getTextShape();
textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false); textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false, fade);
} }
/** */ /** */
@ -1018,14 +998,14 @@ abstract class Topic extends NodeGraph {
textShape.setOpacity(opacity); textShape.setOpacity(opacity);
} }
private _setChildrenVisibility(isVisible: boolean) { private _setChildrenVisibility(value: boolean, fade = 0) {
// Hide all children. // Hide all children.
const children = this.getChildren(); const children = this.getChildren();
const model = this.getModel(); const model = this.getModel();
const visibility = isVisible ? !model.areChildrenShrunken() : isVisible; const visibility = value ? !model.areChildrenShrunken() : value;
children.forEach((child) => { children.forEach((child) => {
child.setVisibility(visibility); child.setVisibility(visibility, fade);
const outgoingLine = child.getOutgoingLine(); const outgoingLine = child.getOutgoingLine();
outgoingLine.setVisibility(visibility); outgoingLine.setVisibility(visibility);
}); });
@ -1066,7 +1046,7 @@ abstract class Topic extends NodeGraph {
this._updatePositionOnChangeSize(oldSize, roundedSize); this._updatePositionOnChangeSize(oldSize, roundedSize);
if (hasSizeChanged) { if (hasSizeChanged) {
EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, { EventBus.instance.fireEvent('topicResize', {
node: this.getModel(), node: this.getModel(),
size: roundedSize, size: roundedSize,
}); });
@ -1097,7 +1077,7 @@ abstract class Topic extends NodeGraph {
outgoingLine.removeFromWorkspace(workspace); outgoingLine.removeFromWorkspace(workspace);
// Remove from workspace. // Remove from workspace.
EventBus.instance.fireEvent(EventBus.events.NodeDisconnectEvent, this.getModel()); EventBus.instance.fireEvent('topicDisconect', this.getModel());
// Change text based on the current connection ... // Change text based on the current connection ...
const model = this.getModel(); const model = this.getModel();
@ -1180,7 +1160,7 @@ abstract class Topic extends NodeGraph {
// Fire connection event ... // Fire connection event ...
if (this.isInWorkspace()) { if (this.isInWorkspace()) {
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, { EventBus.instance.fireEvent('topicConnected', {
parentNode: targetTopic.getModel(), parentNode: targetTopic.getModel(),
childNode: this.getModel(), childNode: this.getModel(),
}); });
@ -1218,7 +1198,7 @@ abstract class Topic extends NodeGraph {
workspace.removeChild(line); workspace.removeChild(line);
} }
this._isInWorkspace = false; this._isInWorkspace = false;
EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel()); EventBus.instance.fireEvent('topicRemoved', this.getModel());
} }
addToWorkspace(workspace: Workspace) { addToWorkspace(workspace: Workspace) {
@ -1226,11 +1206,11 @@ abstract class Topic extends NodeGraph {
workspace.append(elem); workspace.append(elem);
if (!this.isInWorkspace()) { if (!this.isInWorkspace()) {
if (!this.isCentralTopic()) { if (!this.isCentralTopic()) {
EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel()); EventBus.instance.fireEvent('topicAdded', this.getModel());
} }
if (this.getModel().isConnected()) { if (this.getModel().isConnected()) {
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, { EventBus.instance.fireEvent('topicConnected', {
parentNode: this.getOutgoingConnectedTopic().getModel(), parentNode: this.getOutgoingConnectedTopic().getModel(),
childNode: this.getModel(), childNode: this.getModel(),
}); });
@ -1300,7 +1280,7 @@ abstract class Topic extends NodeGraph {
} }
} }
private _flatten2DElements(topic: Topic) { private _flatten2DElements(topic: Topic): (Topic | Relationship)[] {
let result = []; let result = [];
const children = topic.getChildren(); const children = topic.getChildren();

View File

@ -40,14 +40,6 @@ const TopicFeatureFactory = {
icon: NoteIcon, icon: NoteIcon,
}, },
/**
* @param {mindplot.Topic} topic
* @param {mindplot.model.FeatureModel} model
* @param {Boolean} readOnly true if the editor is running in read-only mode
* @throws will throw an error if topic is null or undefined
* @throws will throw v an error if model is null or undefined
* @return {mindplot.n,nmn mn4 r be5qnwwddwsz5on} a new instance of the icon subclass matching the topic feature
*/
createIcon(topic, model, readOnly) { createIcon(topic, model, readOnly) {
$assert(topic, 'topic can not be null'); $assert(topic, 'topic can not be null');
$assert(model, 'model can not be null'); $assert(model, 'model can not be null');

View File

@ -52,9 +52,6 @@ class AddFeatureToTopicCommand extends Command {
this._featureModel = null; this._featureModel = null;
} }
/**
* Overrides abstract parent method
*/
execute(commandContext: CommandContext) { execute(commandContext: CommandContext) {
const topic = commandContext.findTopics([this._topicId])[0]; const topic = commandContext.findTopics([this._topicId])[0];
@ -66,10 +63,6 @@ class AddFeatureToTopicCommand extends Command {
topic.addFeature(this._featureModel); topic.addFeature(this._featureModel);
} }
/**
* Overrides abstract parent method
* @see {@link mindplot.Command.undoExecute}
*/
undoExecute(commandContext: CommandContext) { undoExecute(commandContext: CommandContext) {
const topic = commandContext.findTopics([this._topicId])[0]; const topic = commandContext.findTopics([this._topicId])[0];
topic.removeFeature(this._featureModel); topic.removeFeature(this._featureModel);

View File

@ -1,6 +1,4 @@
/* eslint-disable no-unused-vars */ /**
/* eslint-disable class-methods-use-this */
/*
* Copyright [2021] [wisemapping] * Copyright [2021] [wisemapping]
* *
* Licensed under WiseMapping Public License, Version 1.0 (the "License"). * Licensed under WiseMapping Public License, Version 1.0 (the "License").
@ -17,22 +15,26 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import RootedTreeSet from "./RootedTreeSet";
import Node from './Node';
import PositionType from "../PositionType";
abstract class ChildrenSorterStrategy { abstract class ChildrenSorterStrategy {
abstract computeChildrenIdByHeights(treeSet, node); abstract computeChildrenIdByHeights(treeSet: RootedTreeSet, node: Node);
abstract computeOffsets(treeSet, node); abstract computeOffsets(treeSet: RootedTreeSet, node: Node);
abstract insert(treeSet, parent, child, order); abstract insert(treeSet: RootedTreeSet, parent: Node, child: Node, order: number);
abstract detach(treeSet, node); abstract detach(treeSet: RootedTreeSet, node: Node);
abstract predict(treeSet, parent, node, position, free); abstract predict(treeSet: RootedTreeSet, parent, node: Node, position: PositionType);
abstract verify(treeSet, node); abstract verify(treeSet: RootedTreeSet, node: Node);
abstract getChildDirection(treeSet, node); abstract getChildDirection(treeSet: RootedTreeSet, node: Node);
abstract toString(); abstract toString(): string;
} }
export default ChildrenSorterStrategy; export default ChildrenSorterStrategy;

View File

@ -17,25 +17,22 @@
*/ */
import Events from '../Events'; import Events from '../Events';
export type EventType = 'topicResize' | 'topicMoved' | 'childShrinked' | 'topicConnected' | 'topicAdded' | 'topicRemoved' | 'forceLayout' | 'topicDisconect';
class EventBus extends Events { class EventBus extends Events {
// eslint-disable-next-line no-use-before-define
static _instance: EventBus = new EventBus();
static get instance(): EventBus {
return this._instance;
}
fireEvent(type: EventType, eventArgs?: unknown[] | unknown): Events {
return super.fireEvent(type, eventArgs);
}
addEvent(type: EventType, fn?, internal?: boolean): Events {
return super.addEvent(type, fn, internal);
}
} }
/**
* Enum for events
* @enum {String}
*/
EventBus.events = {
NodeResizeEvent: 'NodeResizeEvent',
NodeMoveEvent: 'NodeMoveEvent',
NodeShrinkEvent: 'NodeShrinkEvent',
NodeConnectEvent: 'NodeConnectEvent',
NodeDisconnectEvent: 'NodeDisconnectEvent',
NodeAdded: 'NodeAdded',
NodeRemoved: 'NodeRemoved',
DoLayout: 'DoLayout',
};
/** instance */
EventBus.instance = new EventBus();
export default EventBus; export default EventBus;

View File

@ -15,59 +15,57 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import PositionType from '../PositionType';
import SizeType from '../SizeType';
import Topic from '../Topic';
import EventBus from './EventBus'; import EventBus from './EventBus';
import LayoutManager from './LayoutManager';
class EventBusDispatcher { class EventBusDispatcher {
private _layoutManager: LayoutManager;
constructor() { constructor() {
this.registerBusEvents(); this.registerBusEvents();
} }
/** setLayoutManager(layoutManager: LayoutManager) {
* @param {mindplot.layout.LayoutManager} layoutManager
*/
setLayoutManager(layoutManager) {
this._layoutManager = layoutManager; this._layoutManager = layoutManager;
} }
/**
* register bus events
*/
registerBusEvents() { registerBusEvents() {
EventBus.instance.addEvent(EventBus.events.NodeAdded, this._nodeAdded.bind(this)); EventBus.instance.addEvent('topicAdded', this._topicAdded.bind(this));
EventBus.instance.addEvent(EventBus.events.NodeRemoved, this._nodeRemoved.bind(this)); EventBus.instance.addEvent('topicRemoved', this._topicRemoved.bind(this));
EventBus.instance.addEvent(EventBus.events.NodeResizeEvent, this._nodeResizeEvent.bind(this)); EventBus.instance.addEvent('topicResize', this._topicResizeEvent.bind(this));
EventBus.instance.addEvent(EventBus.events.NodeMoveEvent, this._nodeMoveEvent.bind(this)); EventBus.instance.addEvent('topicMoved', this._topicMoved.bind(this));
EventBus.instance.addEvent( EventBus.instance.addEvent('topicDisconect', this._topicDisconect.bind(this));
EventBus.events.NodeDisconnectEvent, this._nodeDisconnectEvent.bind(this), EventBus.instance.addEvent('topicConnected', this._topicConnected.bind(this));
); EventBus.instance.addEvent('childShrinked', this._childShrinked.bind(this));
EventBus.instance.addEvent(EventBus.events.NodeConnectEvent, this._nodeConnectEvent.bind(this)); EventBus.instance.addEvent('forceLayout', this._forceLayout.bind(this));
EventBus.instance.addEvent(EventBus.events.NodeShrinkEvent, this._nodeShrinkEvent.bind(this));
EventBus.instance.addEvent(EventBus.events.DoLayout, this._doLayout.bind(this));
} }
_nodeResizeEvent(args) { private _topicResizeEvent(args: { node: Topic, size: SizeType }) {
this._layoutManager.updateNodeSize(args.node.getId(), args.size); this._layoutManager.updateNodeSize(args.node.getId(), args.size);
} }
_nodeMoveEvent(args) { private _topicMoved(args: { node: Topic, position: PositionType }) {
this._layoutManager.moveNode(args.node.getId(), args.position); this._layoutManager.moveNode(args.node.getId(), args.position);
} }
_nodeDisconnectEvent(node) { private _topicDisconect(node: Topic) {
this._layoutManager.disconnectNode(node.getId()); this._layoutManager.disconnectNode(node.getId());
} }
_nodeConnectEvent(args) { private _topicConnected(args: { parentNode: Topic, childNode: Topic }) {
this._layoutManager.connectNode( this._layoutManager.connectNode(
args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder(), args.parentNode.getId(), args.childNode.getId(), args.childNode.getOrder(),
); );
} }
_nodeShrinkEvent(node) { private _childShrinked(node: Topic) {
this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken()); this._layoutManager.updateShrinkState(node.getId(), node.areChildrenShrunken());
} }
_nodeAdded(node) { private _topicAdded(node: Topic) {
// Central topic must not be added twice ... // Central topic must not be added twice ...
if (node.getId() !== 0) { if (node.getId() !== 0) {
this._layoutManager.addNode(node.getId(), { width: 10, height: 10 }, node.getPosition()); this._layoutManager.addNode(node.getId(), { width: 10, height: 10 }, node.getPosition());
@ -75,21 +73,14 @@ class EventBusDispatcher {
} }
} }
_nodeRemoved(node) { private _topicRemoved(node: Topic) {
this._layoutManager.removeNode(node.getId()); this._layoutManager.removeNode(node.getId());
} }
_doLayout() { private _forceLayout() {
// (function() {
this._layoutManager.layout(true); this._layoutManager.layout(true);
// console.log("---------");
// this._layoutManager.dump();
// console.log("---------");
// console.log("---------");
// }).delay(0, this);
} }
/** @return layout manager */
getLayoutManager() { getLayoutManager() {
return this._layoutManager; return this._layoutManager;
} }

View File

@ -21,9 +21,18 @@ import Events from '../Events';
import RootedTreeSet from './RootedTreeSet'; import RootedTreeSet from './RootedTreeSet';
import OriginalLayout from './OriginalLayout'; import OriginalLayout from './OriginalLayout';
import ChangeEvent from './ChangeEvent'; import ChangeEvent from './ChangeEvent';
import SizeType from '../SizeType';
import Node from './Node';
import PositionType from '../PositionType';
class LayoutManager extends Events { class LayoutManager extends Events {
constructor(rootNodeId, rootSize) { private _treeSet: RootedTreeSet;
private _layout: OriginalLayout;
private _events: ChangeEvent[];
constructor(rootNodeId: number, rootSize: SizeType) {
super(); super();
$assert($defined(rootNodeId), 'rootNodeId can not be null'); $assert($defined(rootNodeId), 'rootNodeId can not be null');
$assert(rootSize, 'rootSize can not be null'); $assert(rootSize, 'rootSize can not be null');
@ -36,40 +45,22 @@ class LayoutManager extends Events {
this._events = []; this._events = [];
} }
/** updateNodeSize(id: number, size: SizeType): void {
* @param id
* @param size
* @throws will throw an error if id is null or undefined
*/
updateNodeSize(id, size) {
$assert($defined(id), 'id can not be null'); $assert($defined(id), 'id can not be null');
const node = this._treeSet.find(id); const node = this._treeSet.find(id);
node.setSize(size); node.setSize(size);
} }
/** updateShrinkState(id: number, value: boolean): void {
* @param id
* @param value
* @throws will throw an error if id is null or undefined
* @throws will throw an error if value is null or undefined
* @return this
*/
updateShrinkState(id, value) {
$assert($defined(id), 'id can not be null'); $assert($defined(id), 'id can not be null');
$assert($defined(value), 'value can not be null'); $assert($defined(value), 'value can not be null');
const node = this._treeSet.find(id); const node = this._treeSet.find(id);
node.setShrunken(value); node.setShrunken(value);
return this;
} }
/** find(id: number): Node {
* @param id
* @return {@link RootedTreeSet}.find(id)
*/
find(id) {
return this._treeSet.find(id); return this._treeSet.find(id);
} }
@ -81,31 +72,17 @@ class LayoutManager extends Events {
* @throws will throw an error if the position's x property is null or undefined * @throws will throw an error if the position's x property is null or undefined
* @throws will throw an error if the position's y property is null or undefined * @throws will throw an error if the position's y property is null or undefined
*/ */
moveNode(id, position) { moveNode(id: number, position: PositionType) {
$assert($defined(id), 'id cannot be null'); $assert($defined(id), 'id cannot be null');
$assert($defined(position), 'position cannot be null'); $assert($defined(position), 'position cannot be null');
$assert($defined(position.x), 'x can not be null'); $assert($defined(position.x), 'x can not be null');
$assert($defined(position.y), 'y can not be null'); $assert($defined(position.y), 'y can not be null');
const node = this._treeSet.find(id); const node = this._treeSet.find(id);
// @Todo: this should not be here. This is broking the isolated node support...
// node.setFree(true);
// node.setFreeDisplacement(
// {x:position.x - node.getPosition().x, y:position.y - node.getPosition().y}
// );
node.setPosition(position); node.setPosition(position);
} }
/** connectNode(parentId: number, childId: number, order: number) {
* @param parentId
* @param childId
* @param order
* @throws will throw an error if parentId is null or undefined
* @throws will throw an error if childId is null or undefined
* @throws will throw an error if order is null or undefined
* @return this
*/
connectNode(parentId, childId, order) {
$assert($defined(parentId), 'parentId cannot be null'); $assert($defined(parentId), 'parentId cannot be null');
$assert($defined(childId), 'childId cannot be null'); $assert($defined(childId), 'childId cannot be null');
$assert($defined(order), 'order cannot be null'); $assert($defined(order), 'order cannot be null');
@ -115,16 +92,9 @@ class LayoutManager extends Events {
return this; return this;
} }
/** disconnectNode(id: number): void {
* @param id
* @throws will throw an error if id is null or undefined
* @return this
*/
disconnectNode(id) {
$assert($defined(id), 'id can not be null'); $assert($defined(id), 'id can not be null');
this._layout.disconnectNode(id); this._layout.disconnectNode(id);
return this;
} }
/** /**
@ -134,7 +104,7 @@ class LayoutManager extends Events {
* @throws will throw an error if id is null or undefined * @throws will throw an error if id is null or undefined
* @return this * @return this
*/ */
addNode(id, size, position) { addNode(id: number, size: SizeType, position: PositionType) {
$assert($defined(id), 'id can not be null'); $assert($defined(id), 'id can not be null');
const result = this._layout.createNode(id, size, position, 'topic'); const result = this._layout.createNode(id, size, position, 'topic');
this._treeSet.add(result); this._treeSet.add(result);
@ -142,13 +112,7 @@ class LayoutManager extends Events {
return this; return this;
} }
/** removeNode(id: number) {
* removes a node and its connection to parent if existing
* @param id
* @throws will throw an error if id is null or undefined
* @return this
*/
removeNode(id) {
$assert($defined(id), 'id can not be null'); $assert($defined(id), 'id can not be null');
const node = this._treeSet.find(id); const node = this._treeSet.find(id);
@ -163,47 +127,31 @@ class LayoutManager extends Events {
return this; return this;
} }
/** predict(parentId: number, nodeId: number, position: PositionType): { order: number, position: PositionType } {
* @param {Number} parentId
* @param {Number=} nodeId
* @param {String=} position the position to use as mindplot.layout.Node.properties position
* property as '(x,y)'
* @param {Boolean=} free true specifies free node positioning
* @throws will throw an error if parentId is null or undefined
*/
predict(parentId, nodeId, position, free) {
$assert($defined(parentId), 'parentId can not be null'); $assert($defined(parentId), 'parentId can not be null');
const parent = this._treeSet.find(parentId); const parent = this._treeSet.find(parentId);
const node = nodeId ? this._treeSet.find(nodeId) : null; const node = nodeId ? this._treeSet.find(nodeId) : null;
const sorter = parent.getSorter(); const sorter = parent.getSorter();
const result = sorter.predict(this._treeSet, parent, node, position, free); const result = sorter.predict(this._treeSet, parent, node, position);
return { order: result[0], position: result[1] }; return { order: result[0], position: result[1] };
} }
/**
* logs dump to console
*/
dump() { dump() {
console.log(this._treeSet.dump()); console.log(this._treeSet.dump());
} }
/** plot(containerId: string, size = { width: 200, height: 200 }) {
* @param containerId
* @param {width:Number, height:Number} size
* @throws will throw an error if containerId is null or undefined
* @return canvas
*/
plot(containerId, size = { width: 200, height: 200 }) {
// this method is only used from tests that include Raphael // this method is only used from tests that include Raphael
if (!global.Raphael) {
if (!globalThis.Raphael) {
console.warn('Raphael.js not found, exiting plot()'); console.warn('Raphael.js not found, exiting plot()');
return null; return null;
} }
$assert(containerId, 'containerId cannot be null'); $assert(containerId, 'containerId cannot be null');
const squaresize = 10; const squaresize = 10;
const canvas = global.Raphael(containerId, size.width, size.height); const canvas = globalThis.Raphael(containerId, size.width, size.height);
canvas.drawGrid( canvas.drawGrid(
0, 0,
0, 0,
@ -217,40 +165,33 @@ class LayoutManager extends Events {
return canvas; return canvas;
} }
/** layout(flush: boolean): LayoutManager {
* initializes the layout to be updated
* @param fireEvents
* @return this
*/
layout(fireEvents) {
// File repositioning ... // File repositioning ...
this._layout.layout(); this._layout.layout();
// Collect changes ... // Collect changes ...
this._collectChanges(); this._collectChanges(this._treeSet.getTreeRoots());
if ($(fireEvents).length > 0 || fireEvents) { if (flush) {
this._flushEvents(); this._flushEvents();
} }
return this; return this;
} }
_flushEvents() { private _flushEvents() {
this._events.forEach(((event) => { this._events.forEach(((event) => {
this.fireEvent('change', event); this.fireEvent('change', event);
})); }));
this._events = []; this._events = [];
} }
_collectChanges(nodes) { private _collectChanges(nodes: Node[]) {
const nodesToCollect = nodes || this._treeSet.getTreeRoots(); nodes.forEach(((node) => {
nodesToCollect.forEach(((node) => {
if (node.hasOrderChanged() || node.hasPositionChanged()) { if (node.hasOrderChanged() || node.hasPositionChanged()) {
// Find or create a event ... // Find or create a event ...
const id = node.getId(); const id = node.getId();
let event = this._events.some((e) => e.id === id); let event: ChangeEvent = this._events.find((e) => e.getId() === id);
if (!event) { if (!event) {
event = new ChangeEvent(id); event = new ChangeEvent(id);
} }

View File

@ -28,31 +28,20 @@ class RootedTreeSet {
this._rootNodes = []; this._rootNodes = [];
} }
/**
* @param root
* @throws will throw an error if root is null or undefined
*/
setRoot(root: Node) { setRoot(root: Node) {
$assert(root, 'root can not be null'); $assert(root, 'root can not be null');
this._rootNodes.push(this._decodate(root)); this._rootNodes.push(this._decodate(root));
} }
/** getter */ getTreeRoots(): Node[] {
getTreeRoots() {
return this._rootNodes; return this._rootNodes;
} }
_decodate(node: Node) { _decodate(node: Node): Node {
node._children = []; node._children = [];
return node; return node;
} }
/**
* @param {mindplot.model.NodeModel} node
* @throws will throw an error if node is null or undefined
* @throws will throw an error if node with id already exists
* @throws will throw an error if node has been added already
*/
add(node: Node) { add(node: Node) {
$assert(node, 'node can not be null'); $assert(node, 'node can not be null');
if (this.find(node.getId(), false)) { if (this.find(node.getId(), false)) {

View File

@ -255,8 +255,8 @@ class ElementClass {
this.peer.setFill(null, opacity); this.peer.setFill(null, opacity);
} }
setVisibility(isVisible) { setVisibility(value, fade) {
this.peer.setVisibility(isVisible); this.peer.setVisibility(value, fade);
} }
isVisible() { isVisible() {

View File

@ -181,11 +181,14 @@ class ElementPeer {
} }
} }
/* setVisibility(value, fade) {
* style='visibility: visible' this._native.setAttribute('visibility', value ? 'visible' : 'hidden');
*/ this._native.style.opacity = value ? 1 : 0;
setVisibility(isVisible) { if (fade) {
this._native.setAttribute('visibility', isVisible ? 'visible' : 'hidden'); this._native.style.transition = `visibility ${fade}ms, opacity ${fade}ms`;
} else {
this._native.style.transition = null;
}
} }
isVisible() { isVisible() {

View File

@ -66,7 +66,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
Visibility. Visibility with CSS Transition
</td> </td>
<td> <td>
<div id="visibility"></div> <div id="visibility"></div>

View File

@ -225,14 +225,13 @@ const visibilityTest = () => {
rect.setPosition(120, 20); rect.setPosition(120, 20);
workspace.append(rect); workspace.append(rect);
rect.addEvent('mouseover', () => { rect.addEvent('mouseover', () => {
alert('Mouse Over'); rect.setVisibility(false, 500);
});
rect.addEvent('mouseout', () => {
rect.setVisibility(true, 500);
}); });
let isVisible = true;
const executer = function () {
isVisible = !isVisible;
rect.setVisibility(isVisible);
};
// executer.periodical(100); // executer.periodical(100);
workspace.addItAsChildTo($('#visibility')); workspace.addItAsChildTo($('#visibility'));
}; };