mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Merge branch 'develop' of https://bitbucket.org/wisemapping/wisemapping-frontend into feature/exports-mindmap
This commit is contained in:
commit
a7df3b2db6
@ -16,6 +16,8 @@ body {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
div#mindplot {
|
||||
|
@ -1,8 +1,4 @@
|
||||
/* Overwrite some styles */
|
||||
body {
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
div#footer {
|
||||
width: 100%;
|
||||
padding: 20px 30px;
|
||||
|
@ -69,7 +69,7 @@ class Designer extends Events {
|
||||
|
||||
private _workspace: Workspace;
|
||||
|
||||
private _eventBussDispatcher: EventBusDispatcher;
|
||||
_eventBussDispatcher: EventBusDispatcher;
|
||||
|
||||
private _dragManager: DragManager;
|
||||
|
||||
@ -208,14 +208,11 @@ class Designer extends Events {
|
||||
});
|
||||
|
||||
dragManager.addEvent('dragging', (event: MouseEvent, dragTopic: DragTopic) => {
|
||||
dragTopic.updateFreeLayout(event);
|
||||
if (!dragTopic.isFreeLayoutOn()) {
|
||||
// The node is being drag. Is the connection still valid ?
|
||||
dragConnector.checkConnection(dragTopic);
|
||||
// The node is being drag. Is the connection still valid ?
|
||||
dragConnector.checkConnection(dragTopic);
|
||||
|
||||
if (!dragTopic.isVisible() && dragTopic.isConnected()) {
|
||||
dragTopic.setVisibility(true);
|
||||
}
|
||||
if (!dragTopic.isVisible() && dragTopic.isConnected()) {
|
||||
dragTopic.setVisibility(true);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -31,7 +31,6 @@ export function buildDesigner(options: DesignerOptions): Designer {
|
||||
// Register load events ...
|
||||
designer = new Designer(options, divContainer);
|
||||
designer.addEvent('loadSuccess', () => {
|
||||
globalThis.mindmapLoadReady = true;
|
||||
console.log('Map loadded successfully');
|
||||
});
|
||||
|
||||
|
@ -16,18 +16,27 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert } from '@wisemapping/core-js';
|
||||
import { Point } from '@wisemapping/web2d';
|
||||
import DesignerModel from './DesignerModel';
|
||||
import DragTopic from './DragTopic';
|
||||
import SizeType from './SizeType';
|
||||
import Topic from './Topic';
|
||||
import Workspace from './Workspace';
|
||||
|
||||
class DragConnector {
|
||||
constructor(designerModel, workspace) {
|
||||
private _designerModel: DesignerModel;
|
||||
|
||||
private _workspace: Workspace;
|
||||
|
||||
constructor(designerModel: DesignerModel, workspace: 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) {
|
||||
checkConnection(dragTopic: DragTopic): void {
|
||||
// Must be disconnected from their current connection ?.
|
||||
const candidates = this._searchConnectionCandidates(dragTopic);
|
||||
const currentConnection = dragTopic.getConnectedToTopic();
|
||||
@ -42,12 +51,13 @@ class DragConnector {
|
||||
}
|
||||
}
|
||||
|
||||
_searchConnectionCandidates(dragTopic) {
|
||||
private _searchConnectionCandidates(dragTopic: DragTopic): Topic[] {
|
||||
let topics = this._designerModel.getTopics();
|
||||
const draggedNode = dragTopic.getDraggedTopic();
|
||||
|
||||
// Drag node connects to the border ...
|
||||
const dragTopicWidth = dragTopic.getSize ? dragTopic.getSize().width : 0; // Hack...
|
||||
// const dragTopicWidth = dragTopic.getSize ? dragTopic.getSize().width : 0; // Hack...
|
||||
const dragTopicWidth = 0;
|
||||
const xMouseGap = dragTopic.getPosition().x > 0 ? 0 : dragTopicWidth;
|
||||
const sPos = { x: dragTopic.getPosition().x - xMouseGap, y: dragTopic.getPosition().y };
|
||||
|
||||
@ -56,7 +66,7 @@ class DragConnector {
|
||||
// - Exclude dragTopic pivot
|
||||
// - Nodes that are collapsed
|
||||
// - It's not part of the branch dragged itself
|
||||
topics = topics.filter((topic) => {
|
||||
topics = topics.filter((topic: Topic) => {
|
||||
let result = draggedNode !== topic;
|
||||
result = result && topic !== draggedNode;
|
||||
result = result && !topic.areChildrenShrunken() && !topic.isCollapsed();
|
||||
@ -67,7 +77,7 @@ class DragConnector {
|
||||
// Filter all the nodes that are outside the vertical boundary:
|
||||
// * The node is to out of the x scope
|
||||
// * The x distance greater the vertical tolerated distance
|
||||
topics = topics.filter((topic) => {
|
||||
topics = topics.filter((topic: Topic) => {
|
||||
const tpos = topic.getPosition();
|
||||
// Center topic has different alignment than the rest of the nodes.
|
||||
// That's why i need to divide it by two...
|
||||
@ -95,17 +105,17 @@ class DragConnector {
|
||||
return topics;
|
||||
}
|
||||
|
||||
_proximityWeight(isAligned, target, sPos, currentConnection) {
|
||||
private _proximityWeight(isAligned: boolean, target: Topic, sPos: Point, currentConnection: Topic): number {
|
||||
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) {
|
||||
private _isVerticallyAligned(targetSize: SizeType, targetPosition: Point, sourcePosition: Point): boolean {
|
||||
return Math.abs(sourcePosition.y - targetPosition.y) < targetSize.height / 2;
|
||||
}
|
||||
|
||||
static MAX_VERTICAL_CONNECTION_TOLERANCE = 80;
|
||||
}
|
||||
|
||||
DragConnector.MAX_VERTICAL_CONNECTION_TOLERANCE = 80;
|
||||
|
||||
export default DragConnector;
|
@ -19,9 +19,28 @@ import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Point, CurvedLine, Rect } from '@wisemapping/web2d';
|
||||
|
||||
import DragTopicConfig from './DragTopicConfig';
|
||||
import SizeType from './SizeType';
|
||||
import Topic from './Topic';
|
||||
import Shape from './util/Shape';
|
||||
import Workspace from './Workspace';
|
||||
|
||||
class DragPivot {
|
||||
private _position: Point;
|
||||
|
||||
private _isVisible: boolean;
|
||||
|
||||
private _targetTopic: Topic;
|
||||
|
||||
private _connectRect: Rect;
|
||||
|
||||
private _dragPivot: Rect;
|
||||
|
||||
private _curvedLine: CurvedLine;
|
||||
|
||||
private _straightLine: CurvedLine;
|
||||
|
||||
private _size: SizeType;
|
||||
|
||||
constructor() {
|
||||
this._position = new Point();
|
||||
this._size = DragTopicConfig.PIVOT_SIZE;
|
||||
@ -34,15 +53,15 @@ class DragPivot {
|
||||
this._isVisible = false;
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
isVisible(): boolean {
|
||||
return this._isVisible;
|
||||
}
|
||||
|
||||
getTargetTopic() {
|
||||
getTargetTopic(): Topic {
|
||||
return this._targetTopic;
|
||||
}
|
||||
|
||||
_buildStraightLine() {
|
||||
private _buildStraightLine(): CurvedLine {
|
||||
const line = new CurvedLine();
|
||||
line.setStyle(CurvedLine.SIMPLE_LINE);
|
||||
line.setStroke(1, 'solid', '#CC0033');
|
||||
@ -51,7 +70,7 @@ class DragPivot {
|
||||
return line;
|
||||
}
|
||||
|
||||
_buildCurvedLine() {
|
||||
private _buildCurvedLine(): CurvedLine {
|
||||
const line = new CurvedLine();
|
||||
line.setStyle(CurvedLine.SIMPLE_LINE);
|
||||
line.setStroke(1, 'solid', '#CC0033');
|
||||
@ -60,7 +79,7 @@ class DragPivot {
|
||||
return line;
|
||||
}
|
||||
|
||||
_redrawLine() {
|
||||
private _redrawLine(): void {
|
||||
// Update line position.
|
||||
$assert(this.getTargetTopic(), 'Illegal invocation. Target node can not be null');
|
||||
|
||||
@ -81,8 +100,8 @@ class DragPivot {
|
||||
line.setFrom(pivotPoint.x, pivotPoint.y);
|
||||
|
||||
// Update rect position
|
||||
const cx = position.x - parseInt(size.width, 10) / 2;
|
||||
const cy = position.y - parseInt(size.height, 10) / 2;
|
||||
const cx = position.x - size.width / 2;
|
||||
const cy = position.y - size.height / 2;
|
||||
pivotRect.setPosition(cx, cy);
|
||||
|
||||
// Make line visible only when the position has been already changed.
|
||||
@ -91,16 +110,16 @@ class DragPivot {
|
||||
line.setTo(targetPoint.x, targetPoint.y);
|
||||
}
|
||||
|
||||
setPosition(point) {
|
||||
setPosition(point: Point): void {
|
||||
this._position = point;
|
||||
this._redrawLine();
|
||||
}
|
||||
|
||||
getPosition() {
|
||||
getPosition(): Point {
|
||||
return this._position;
|
||||
}
|
||||
|
||||
_buildRect() {
|
||||
private _buildRect(): Rect {
|
||||
const size = this._size;
|
||||
const rectAttributes = {
|
||||
fillColor: '#CC0033',
|
||||
@ -114,16 +133,16 @@ class DragPivot {
|
||||
return rect;
|
||||
}
|
||||
|
||||
_getPivotRect() {
|
||||
private _getPivotRect(): Rect {
|
||||
return this._dragPivot;
|
||||
}
|
||||
|
||||
getSize() {
|
||||
getSize(): SizeType {
|
||||
const elem2d = this._getPivotRect();
|
||||
return elem2d.getSize();
|
||||
}
|
||||
|
||||
setVisibility(value) {
|
||||
setVisibility(value: boolean) {
|
||||
if (this.isVisible() !== value) {
|
||||
const pivotRect = this._getPivotRect();
|
||||
pivotRect.setVisibility(value);
|
||||
@ -140,7 +159,7 @@ class DragPivot {
|
||||
}
|
||||
|
||||
// If the node is connected, validate that there is a line connecting both...
|
||||
_getConnectionLine() {
|
||||
_getConnectionLine(): CurvedLine {
|
||||
let result = null;
|
||||
const parentTopic = this._targetTopic;
|
||||
if (parentTopic) {
|
||||
@ -153,7 +172,7 @@ class DragPivot {
|
||||
return result;
|
||||
}
|
||||
|
||||
addToWorkspace(workspace) {
|
||||
addToWorkspace(workspace: Workspace) {
|
||||
const pivotRect = this._getPivotRect();
|
||||
workspace.append(pivotRect);
|
||||
|
||||
@ -179,7 +198,7 @@ class DragPivot {
|
||||
connectRect.moveToBack();
|
||||
}
|
||||
|
||||
removeFromWorkspace(workspace) {
|
||||
removeFromWorkspace(workspace: Workspace) {
|
||||
const shape = this._getPivotRect();
|
||||
workspace.removeChild(shape);
|
||||
|
||||
@ -195,9 +214,7 @@ class DragPivot {
|
||||
}
|
||||
}
|
||||
|
||||
connectTo(targetTopic, position) {
|
||||
$assert(!this._outgoingLine, 'Could not connect an already connected node');
|
||||
$assert(targetTopic !== this, 'Circular connection are not allowed');
|
||||
connectTo(targetTopic: Topic, position: Point) {
|
||||
$assert(position, 'position can not be null');
|
||||
$assert(targetTopic, 'parent can not be null');
|
||||
|
||||
@ -227,7 +244,7 @@ class DragPivot {
|
||||
this._redrawLine();
|
||||
}
|
||||
|
||||
disconnect(workspace) {
|
||||
disconnect(workspace: Workspace): void {
|
||||
$assert(workspace, 'workspace can not be null.');
|
||||
$assert(this._targetTopic, 'There are not connected topic.');
|
||||
|
@ -16,13 +16,24 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import { Point } from '@wisemapping/web2d';
|
||||
import { Point, ElementClass } from '@wisemapping/web2d';
|
||||
|
||||
import ActionDispatcher from './ActionDispatcher';
|
||||
import DragPivot from './DragPivot';
|
||||
import LayoutManager from './layout/LayoutManager';
|
||||
import NodeGraph from './NodeGraph';
|
||||
import Topic from './Topic';
|
||||
import Workspace from './Workspace';
|
||||
|
||||
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(draggedNode, 'draggedNode can not be null.');
|
||||
$assert(layoutManger, 'layoutManger can not be null.');
|
||||
@ -33,26 +44,15 @@ class DragTopic {
|
||||
this._layoutManager = layoutManger;
|
||||
this._position = new Point();
|
||||
this._isInWorkspace = false;
|
||||
this._isFreeLayoutEnabled = false;
|
||||
}
|
||||
|
||||
setOrder(order) {
|
||||
setOrder(order: number) {
|
||||
this._order = order;
|
||||
}
|
||||
|
||||
setPosition(x, y) {
|
||||
setPosition(x: number, y: number) {
|
||||
// Update drag shadow position ....
|
||||
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);
|
||||
|
||||
// Elements are positioned in the center.
|
||||
@ -80,45 +80,35 @@ class DragTopic {
|
||||
}
|
||||
}
|
||||
|
||||
updateFreeLayout(event) {
|
||||
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) {
|
||||
setVisibility(value: boolean) {
|
||||
const dragPivot = this._getDragPivot();
|
||||
dragPivot.setVisibility(value);
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
isVisible(): boolean {
|
||||
const dragPivot = this._getDragPivot();
|
||||
return dragPivot.isVisible();
|
||||
}
|
||||
|
||||
getInnerShape() {
|
||||
getInnerShape(): ElementClass {
|
||||
return this._elem2d;
|
||||
}
|
||||
|
||||
disconnect(workspace) {
|
||||
disconnect(workspace: Workspace) {
|
||||
// Clear connection line ...
|
||||
const dragPivot = this._getDragPivot();
|
||||
dragPivot.disconnect(workspace);
|
||||
}
|
||||
|
||||
connectTo(parent) {
|
||||
connectTo(parent: Topic) {
|
||||
$assert(parent, 'Parent connection node can not be null.');
|
||||
|
||||
// Where it should be connected ?
|
||||
|
||||
// @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 = designer._eventBussDispatcher._layoutManager.predict(
|
||||
|
||||
const predict = global.designer._eventBussDispatcher._layoutManager.predict(
|
||||
parent.getId(),
|
||||
this._draggedNode.getId(),
|
||||
this.getPosition(),
|
||||
@ -133,11 +123,11 @@ class DragTopic {
|
||||
this.setOrder(predict.order);
|
||||
}
|
||||
|
||||
getDraggedTopic() {
|
||||
return this._draggedNode;
|
||||
getDraggedTopic(): Topic {
|
||||
return this._draggedNode as Topic;
|
||||
}
|
||||
|
||||
removeFromWorkspace(workspace) {
|
||||
removeFromWorkspace(workspace: Workspace) {
|
||||
if (this._isInWorkspace) {
|
||||
// Remove drag shadow.
|
||||
workspace.removeChild(this._elem2d);
|
||||
@ -151,11 +141,11 @@ class DragTopic {
|
||||
}
|
||||
}
|
||||
|
||||
isInWorkspace() {
|
||||
isInWorkspace(): boolean {
|
||||
return this._isInWorkspace;
|
||||
}
|
||||
|
||||
addToWorkspace(workspace) {
|
||||
addToWorkspace(workspace: Workspace) {
|
||||
if (!this._isInWorkspace) {
|
||||
workspace.append(this._elem2d);
|
||||
const dragPivot = this._getDragPivot();
|
||||
@ -164,19 +154,19 @@ class DragTopic {
|
||||
}
|
||||
}
|
||||
|
||||
_getDragPivot() {
|
||||
_getDragPivot(): DragPivot {
|
||||
return DragTopic.__getDragPivot();
|
||||
}
|
||||
|
||||
getPosition() {
|
||||
getPosition(): Point {
|
||||
return this._position;
|
||||
}
|
||||
|
||||
isDragTopic() {
|
||||
isDragTopic(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
applyChanges(workspace) {
|
||||
applyChanges(workspace: Workspace) {
|
||||
$assert(workspace, 'workspace can not be null');
|
||||
|
||||
const actionDispatcher = ActionDispatcher.getInstance();
|
||||
@ -201,33 +191,33 @@ class DragTopic {
|
||||
}
|
||||
}
|
||||
|
||||
getConnectedToTopic() {
|
||||
getConnectedToTopic(): Topic {
|
||||
const dragPivot = this._getDragPivot();
|
||||
return dragPivot.getTargetTopic();
|
||||
}
|
||||
|
||||
isConnected() {
|
||||
isConnected(): boolean {
|
||||
return this.getConnectedToTopic() != null;
|
||||
}
|
||||
|
||||
isFreeLayoutOn() {
|
||||
isFreeLayoutOn(): false {
|
||||
return false;
|
||||
}
|
||||
|
||||
static init(workspace: Workspace) {
|
||||
$assert(workspace, 'workspace can not be null');
|
||||
const pivot = DragTopic.__getDragPivot();
|
||||
workspace.append(pivot);
|
||||
};
|
||||
|
||||
static __getDragPivot() {
|
||||
let result = DragTopic._dragPivot;
|
||||
if (!$defined(result)) {
|
||||
result = new DragPivot();
|
||||
DragTopic._dragPivot = result;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
DragTopic.init = function init(workspace) {
|
||||
$assert(workspace, 'workspace can not be null');
|
||||
const pivot = DragTopic.__getDragPivot();
|
||||
workspace.append(pivot);
|
||||
};
|
||||
|
||||
DragTopic.__getDragPivot = function __getDragPivot() {
|
||||
let result = DragTopic._dragPivot;
|
||||
if (!$defined(result)) {
|
||||
result = new DragPivot();
|
||||
DragTopic._dragPivot = result;
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export default DragTopic;
|
@ -64,6 +64,11 @@ class MainTopic extends Topic {
|
||||
const text = this.getText();
|
||||
textShape.setText(text);
|
||||
textShape.setOpacity(0.5);
|
||||
|
||||
// Copy text position of the topic element ...
|
||||
const textPosition = this.getTextShape().getPosition();
|
||||
textShape.setPosition(textPosition.x, textPosition.y);
|
||||
|
||||
group.append(textShape);
|
||||
}
|
||||
return group;
|
||||
|
@ -159,9 +159,9 @@ abstract class NodeGraph {
|
||||
workspace.removeChild(this);
|
||||
}
|
||||
|
||||
/** */
|
||||
createDragNode(layoutManager: LayoutManager) {
|
||||
const dragShape = this._buildDragShape();
|
||||
|
||||
return new DragTopic(dragShape, this, layoutManager);
|
||||
}
|
||||
|
||||
|
@ -17,8 +17,16 @@ export class Locale {
|
||||
|
||||
export default abstract class AppI18n {
|
||||
public static getUserLocale(): Locale {
|
||||
const account = fetchAccount();
|
||||
return account?.locale ? account.locale : this.getBrowserLocale();
|
||||
// @Todo Hack: Try page must not account info. Add this to avoid 403 errors.
|
||||
const isTryPage = window.location.href.endsWith('/try');
|
||||
let result: Locale;
|
||||
if (!isTryPage) {
|
||||
const account = fetchAccount();
|
||||
result = account?.locale ? account.locale : this.getBrowserLocale();
|
||||
} else {
|
||||
result = this.getBrowserLocale();
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
public static getBrowserLocale(): Locale {
|
||||
|
Loading…
Reference in New Issue
Block a user