Change DragTopic to TS.

This commit is contained in:
Paulo Gustavo Veiga 2022-02-23 17:37:56 -08:00
parent 4e01d20ad4
commit d86bce42bf
5 changed files with 54 additions and 70 deletions

View File

@ -69,7 +69,7 @@ class Designer extends Events {
private _workspace: Workspace; private _workspace: Workspace;
private _eventBussDispatcher: EventBusDispatcher; _eventBussDispatcher: EventBusDispatcher;
private _dragManager: DragManager; private _dragManager: DragManager;
@ -208,15 +208,12 @@ class Designer extends Events {
}); });
dragManager.addEvent('dragging', (event: MouseEvent, dragTopic: DragTopic) => { dragManager.addEvent('dragging', (event: MouseEvent, dragTopic: DragTopic) => {
dragTopic.updateFreeLayout(event);
if (!dragTopic.isFreeLayoutOn()) {
// The node is being drag. Is the connection still valid ? // The node is being drag. Is the connection still valid ?
dragConnector.checkConnection(dragTopic); dragConnector.checkConnection(dragTopic);
if (!dragTopic.isVisible() && dragTopic.isConnected()) { if (!dragTopic.isVisible() && dragTopic.isConnected()) {
dragTopic.setVisibility(true); dragTopic.setVisibility(true);
} }
}
}); });
dragManager.addEvent('enddragging', (event: MouseEvent, dragTopic: DragTopic) => { dragManager.addEvent('enddragging', (event: MouseEvent, dragTopic: DragTopic) => {

View File

@ -31,7 +31,6 @@ export function buildDesigner(options: DesignerOptions): Designer {
// Register load events ... // Register load events ...
designer = new Designer(options, divContainer); designer = new Designer(options, divContainer);
designer.addEvent('loadSuccess', () => { designer.addEvent('loadSuccess', () => {
globalThis.mindmapLoadReady = true;
console.log('Map loadded successfully'); console.log('Map loadded successfully');
}); });

View File

@ -19,7 +19,6 @@ import { $assert } from '@wisemapping/core-js';
import { Point } from '@wisemapping/web2d'; import { Point } from '@wisemapping/web2d';
import DesignerModel from './DesignerModel'; import DesignerModel from './DesignerModel';
import DragTopic from './DragTopic'; import DragTopic from './DragTopic';
import NodeGraph from './NodeGraph';
import SizeType from './SizeType'; import SizeType from './SizeType';
import Topic from './Topic'; import Topic from './Topic';
import Workspace from './Workspace'; import Workspace from './Workspace';

View File

@ -16,13 +16,24 @@
* limitations under the License. * limitations under the License.
*/ */
import { $assert, $defined } from '@wisemapping/core-js'; import { $assert, $defined } from '@wisemapping/core-js';
import { Point } from '@wisemapping/web2d'; import { Point, ElementClass } from '@wisemapping/web2d';
import ActionDispatcher from './ActionDispatcher'; import ActionDispatcher from './ActionDispatcher';
import DragPivot from './DragPivot'; import DragPivot from './DragPivot';
import LayoutManager from './layout/LayoutManager';
import NodeGraph from './NodeGraph';
import Topic from './Topic';
import Workspace from './Workspace';
class DragTopic { class DragTopic {
constructor(dragShape, draggedNode, layoutManger) { private _elem2d: ElementClass;
private _order: number | null;
private _draggedNode: NodeGraph;
private _layoutManager: LayoutManager;
private _position: any;
private _isInWorkspace: boolean;
static _dragPivot: any;
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.');
$assert(layoutManger, 'layoutManger can not be null.'); $assert(layoutManger, 'layoutManger can not be null.');
@ -33,26 +44,15 @@ class DragTopic {
this._layoutManager = layoutManger; this._layoutManager = layoutManger;
this._position = new Point(); this._position = new Point();
this._isInWorkspace = false; this._isInWorkspace = false;
this._isFreeLayoutEnabled = false;
} }
setOrder(order) { setOrder(order: number) {
this._order = order; this._order = order;
} }
setPosition(x, y) { setPosition(x: number, y: number) {
// Update drag shadow position .... // Update drag shadow position ....
let position = { x, y }; let position = { x, y };
if (this.isFreeLayoutOn() && this.isConnected()) {
const { _layoutManager } = this;
const par = this.getConnectedToTopic();
position = _layoutManager.predict(
par.getId(),
this._draggedNode.getId(),
position,
true,
).position;
}
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.
@ -80,45 +80,35 @@ class DragTopic {
} }
} }
updateFreeLayout(event) { setVisibility(value: boolean) {
const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const isFreeEnabled = (event.metaKey && isMac) || (event.ctrlKey && !isMac);
if (this.isFreeLayoutOn() !== isFreeEnabled) {
const dragPivot = this._getDragPivot();
dragPivot.setVisibility(!isFreeEnabled);
this._isFreeLayoutEnabled = isFreeEnabled;
}
}
setVisibility(value) {
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
dragPivot.setVisibility(value); dragPivot.setVisibility(value);
} }
isVisible() { isVisible(): boolean {
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
return dragPivot.isVisible(); return dragPivot.isVisible();
} }
getInnerShape() { getInnerShape(): ElementClass {
return this._elem2d; return this._elem2d;
} }
disconnect(workspace) { disconnect(workspace: Workspace) {
// Clear connection line ... // Clear connection line ...
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
dragPivot.disconnect(workspace); dragPivot.disconnect(workspace);
} }
connectTo(parent) { connectTo(parent: Topic) {
$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 ?
// @todo: This is a hack for the access of the editor. // @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. // It's required to review why this is needed forcing the declaration of a global variable.
const predict = designer._eventBussDispatcher._layoutManager.predict(
const predict = global.designer._eventBussDispatcher._layoutManager.predict(
parent.getId(), parent.getId(),
this._draggedNode.getId(), this._draggedNode.getId(),
this.getPosition(), this.getPosition(),
@ -133,11 +123,11 @@ class DragTopic {
this.setOrder(predict.order); this.setOrder(predict.order);
} }
getDraggedTopic() { getDraggedTopic(): Topic {
return this._draggedNode; return this._draggedNode as Topic;
} }
removeFromWorkspace(workspace) { removeFromWorkspace(workspace: Workspace) {
if (this._isInWorkspace) { if (this._isInWorkspace) {
// Remove drag shadow. // Remove drag shadow.
workspace.removeChild(this._elem2d); workspace.removeChild(this._elem2d);
@ -151,11 +141,11 @@ class DragTopic {
} }
} }
isInWorkspace() { isInWorkspace(): boolean {
return this._isInWorkspace; return this._isInWorkspace;
} }
addToWorkspace(workspace) { addToWorkspace(workspace: Workspace) {
if (!this._isInWorkspace) { if (!this._isInWorkspace) {
workspace.append(this._elem2d); workspace.append(this._elem2d);
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
@ -164,19 +154,19 @@ class DragTopic {
} }
} }
_getDragPivot() { _getDragPivot(): DragPivot {
return DragTopic.__getDragPivot(); return DragTopic.__getDragPivot();
} }
getPosition() { getPosition(): Point {
return this._position; return this._position;
} }
isDragTopic() { isDragTopic(): boolean {
return true; return true;
} }
applyChanges(workspace) { applyChanges(workspace: Workspace) {
$assert(workspace, 'workspace can not be null'); $assert(workspace, 'workspace can not be null');
const actionDispatcher = ActionDispatcher.getInstance(); const actionDispatcher = ActionDispatcher.getInstance();
@ -201,33 +191,33 @@ class DragTopic {
} }
} }
getConnectedToTopic() { getConnectedToTopic(): Topic {
const dragPivot = this._getDragPivot(); const dragPivot = this._getDragPivot();
return dragPivot.getTargetTopic(); return dragPivot.getTargetTopic();
} }
isConnected() { isConnected(): boolean {
return this.getConnectedToTopic() != null; return this.getConnectedToTopic() != null;
} }
isFreeLayoutOn() { isFreeLayoutOn(): false {
return false; return false;
} }
}
DragTopic.init = function init(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.__getDragPivot();
workspace.append(pivot); workspace.append(pivot);
}; };
DragTopic.__getDragPivot = function __getDragPivot() { static __getDragPivot() {
let result = DragTopic._dragPivot; let result = DragTopic._dragPivot;
if (!$defined(result)) { if (!$defined(result)) {
result = new DragPivot(); result = new DragPivot();
DragTopic._dragPivot = result; DragTopic._dragPivot = result;
} }
return result; return result;
}; };
}
export default DragTopic; export default DragTopic;

View File

@ -159,7 +159,6 @@ abstract class NodeGraph {
workspace.removeChild(this); workspace.removeChild(this);
} }
/** */
createDragNode(layoutManager: LayoutManager) { createDragNode(layoutManager: LayoutManager) {
const dragShape = this._buildDragShape(); const dragShape = this._buildDragShape();
return new DragTopic(dragShape, this, layoutManager); return new DragTopic(dragShape, this, layoutManager);