vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-15 19:47:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged feature/remove_actions into master

Browse Source 
* Migration to TS

* Change to typescript

* Fix css style issue due to bootstrap.

* Fix eslit errors

* Remove print button on try
This commit is contained in:
Paulo Veiga 2022-03-05 17:09:40 +00:00
parent 165142a0f5
commit 2c4d937ffa
57 changed files with 562 additions and 788 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor/src/bootstrap-fixes.css vendored Normal file
View File

@ -0,0 +1,20 @@
/*
These are patches or hacks to avoid boostrap interfering with Mui styles
This file is meant to be removed when removing bootstrap
*/
/*
/* bootstrap modal */
.wise-editor .modal {
overflow: hidden;
}
.modal-backdrop {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1000;
}

10
packages/editor/src/bootstrap-prefix.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
packages/editor/src/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

63
packages/editor/src/components/toolbar/index.tsx
View File

@ -43,12 +43,12 @@ export default function Toolbar({
}: ToolbarPropsType): React.ReactElement {
const intl = useIntl();
return (
<HeaderContainer>
<HeaderContainer className="wise-editor">
<div id="toolbar">
<div id="backToList">
<img src={BackIconSvg} />
</div>
{editorMode === 'edition' && (
{(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
<div id="persist" className="buttonContainer">
<ToolbarButton id="save" className="buttonOn">
<img src={SaveSvg} />
@ -112,29 +112,15 @@ export default function Toolbar({
</ToolbarButton>
</div>
<div id="separator" className="buttonContainer"></div>
{editorMode === 'edition' && (
<ToolbarRightContainer>
<ToolbarButton
id="export"
className="buttonOn"
onClick={() => onAction('export')}
>
<img src={ExportSvg} />
</ToolbarButton>
<ToolbarButton
id="publishIt"
className="buttonOn"
onClick={() => onAction('publish')}
>
<img src={PublicSvg} />
</ToolbarButton>
<ToolbarButton
id="history"
className="buttonOn"
onClick={() => onAction('history')}
>
<img src={HistorySvg} />
</ToolbarButton>
<ToolbarRightContainer>
<ToolbarButton
id="export"
className="buttonOn"
onClick={() => onAction('export')}
>
<img src={ExportSvg} />
</ToolbarButton>
{(editorMode === 'edition-owner' || editorMode === 'edition-editor' || editorMode === 'edition-viewer') && (
<ToolbarButton
id="print"
className="buttonOn"
@ -142,14 +128,37 @@ export default function Toolbar({
>
<img src={PrintSvg} />
</ToolbarButton>
)}
{editorMode === 'edition-owner' && (
<>
<ToolbarButton
id="history"
className="buttonOn"
onClick={() => onAction('history')}
>
<img src={HistorySvg} />
</ToolbarButton>
<ToolbarButton
id="publishIt"
className="buttonOn"
onClick={() => onAction('publish')}
>
<img src={PublicSvg} />
</ToolbarButton>
</>
)}
{(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
<ToolbarButton id="account">
<img src={AccountSvg} />
</ToolbarButton>
)}
{editorMode === 'edition-owner' && (
<ActionButton onClick={() => onAction('share')}>
{intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
</ActionButton>
</ToolbarRightContainer>
)}
)}
</ToolbarRightContainer>
</div>
</HeaderContainer>
);

5
packages/editor/src/global-styled.css
View File

@ -1,7 +1,8 @@
/********************************************************************************/
/* Header & Toolbar Styles */
/********************************************************************************/
@import "bootstrap.min.css";
@import "bootstrap-prefix.min.css";
@import "bootstrap-fixes.css";
html {
/* avoid bootstrap overriding font-size and breaking Mui */
@ -129,7 +130,7 @@ div.shareModalDialog {
background-color: #efefef;
}
.popover {
.wise-editor .popover {
font-size: 13px;
max-width: none;
}

4
packages/editor/src/index.tsx
View File

@ -13,7 +13,6 @@ import {
} from '@wisemapping/mindplot';
import './global-styled.css';
import I18nMsg from './classes/i18n-msg';
import Messages from '@wisemapping/mindplot/src/components/Messages';
declare global {
// used in mindplot
@ -100,7 +99,8 @@ const Editor = ({
onAction={onAction}
/>
}
<div id="mindplot" style={mindplotStyle}></div>
<div id="mindplot" style={mindplotStyle} className="wise-editor"></div>
<div id="mindplot-tooltips" className="wise-editor"></div>
<Footer editorMode={options.mode} />
</IntlProvider >
);

2
packages/editor/test/playground/map-render/js/editor.tsx
View File

@ -36,7 +36,7 @@ const options: EditorOptions = {
zoom: 0.8,
locked: false,
mapTitle: "Develop Mindnap",
mode: 'edition',
mode: 'edition-owner',
locale: 'en',
enableKeyboardEvents: true
};

2
packages/mindplot/src/@types/custom.d.ts vendored
View File

@ -1,4 +1,4 @@
declare module "*.svg" {
declare module '*.svg' {
const content: any;
export default content;
}

64
packages/mindplot/src/components/ActionIcon.js
View File

@ -1,64 +0,0 @@
/*
* 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 Icon from './Icon';
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;

13
packages/mindplot/src/components/CommandContext.ts
View File

@ -41,20 +41,15 @@ class CommandContext {
}
findTopics(topicIds: number[]): Topic[] {
$assert($defined(topicIds), 'topicsIds can not be null');
const topicsIds = Array.isArray(topicIds) ? topicIds : [topicIds];
const designerTopics = this._designer.getModel().getTopics();
const result = designerTopics.filter((topic) => topicsIds.includes(topic.getId()));
if (result.length !== topicsIds.length) {
const ids = designerTopics.map((topic) => topic.getId());
$assert(
result.length === topicsIds.length,
`Could not find topic. Result:${result
} Filter Criteria:${topicsIds
} Current Topics: [${ids
}]`,
);
throw new Error(`Could not find topic. Result:${result
} Filter Criteria:${topicsIds
} Current Topics: [${ids}])`);
}
return result;
}
@ -116,7 +111,7 @@ class CommandContext {
moveTopic(topic: Topic, position: Point) {
$assert(topic, 'topic cannot be null');
$assert(position, 'position cannot be null');
EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
EventBus.instance.fireEvent('topicMoved', {
node: topic.getModel(),
position,
});

4
packages/mindplot/src/components/ConnectionLine.ts
View File

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

44
packages/mindplot/src/components/Designer.ts
View File

@ -39,7 +39,7 @@ import Relationship from './Relationship';
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
import TopicFeatureFactory from './TopicFeature';
import { create } from './NodeGraphUtils';
import TopicFactory from './TopicFactory';
import EventBus from './layout/EventBus';
import EventBusDispatcher from './layout/EventBusDispatcher';
@ -53,7 +53,6 @@ import Mindmap from './model/Mindmap';
import NodeModel from './model/NodeModel';
import Topic from './Topic';
import { DesignerOptions } from './DesignerOptionsBuilder';
import MainTopic from './MainTopic';
import DragTopic from './DragTopic';
import CentralTopic from './CentralTopic';
import FeatureType from './model/FeatureType';
@ -225,9 +224,9 @@ class Designer extends Events {
return dragManager;
}
private _buildNodeGraph(model: NodeModel, readOnly: boolean): MainTopic {
private _buildNodeGraph(model: NodeModel, readOnly: boolean): Topic {
// Create node graph ...
const topic = create(model, { readOnly });
const topic = TopicFactory.create(model, { readOnly });
this.getModel().addTopic(topic);
const me = this;
// Add Topic events ...
@ -606,7 +605,7 @@ class Designer extends Events {
this.goToNode(centralTopic);
// Finally, sort the map ...
EventBus.instance.fireEvent(EventBus.events.DoLayout);
EventBus.instance.fireEvent('forceLayout');
this.fireEvent('loadSuccess');
}
@ -695,12 +694,6 @@ class Designer extends Events {
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 {
const dmodel = this.getModel();
@ -744,13 +737,9 @@ class Designer extends Events {
return result;
}
/**
* @param {mindplot.Topic} node the topic to remove
* removes the given topic and its children from Workspace, DesignerModel and NodeModel
*/
removeTopic(node) {
removeTopic(node: Topic): void {
if (!node.isCentralTopic()) {
const parent = node._parent;
const parent = node.getParent();
node.disconnect(this._workspace);
// remove children
@ -771,17 +760,13 @@ class Designer extends Events {
}
}
/**
* @private
*/
_resetEdition() {
private _resetEdition() {
const screenManager = this._workspace.getScreenManager();
screenManager.fireEvent('update');
screenManager.fireEvent('mouseup');
this._relPivot.dispose();
}
/** */
deleteSelectedEntities() {
// Is there some action in progress ?.
this._resetEdition();
@ -840,7 +825,7 @@ class Designer extends Events {
/** */
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 topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
@ -849,9 +834,8 @@ class Designer extends Events {
}
}
/** */
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 topicsIds = this.getModel().filterTopicsIds(validateFunc, validateError);
if (topicsIds.length > 0) {
@ -859,7 +843,6 @@ class Designer extends Events {
}
}
/** */
changeFontSize(size: number) {
const topicsIds = this.getModel().filterTopicsIds();
if (topicsIds.length > 0) {
@ -895,11 +878,7 @@ class Designer extends Events {
}
}
/**
* lets the selected topic open the link editor where the user can define or modify an
* existing link
*/
addLink() {
addLink(): void {
const model = this.getModel();
const topic = model.selectedTopic();
if (topic) {
@ -908,8 +887,7 @@ class Designer extends Events {
}
}
/** */
addNote() {
addNote(): void {
const model = this.getModel();
const topic = model.selectedTopic();
if (topic) {

29
packages/mindplot/src/components/DesignerActionRunner.js → packages/mindplot/src/components/DesignerActionRunner.ts
View File

@ -16,41 +16,50 @@
* limitations under the License.
*/
import { $assert } from '@wisemapping/core-js';
import ActionDispatcher from './ActionDispatcher';
import Command from './Command';
import CommandContext from './CommandContext';
import DesignerUndoManager from './DesignerUndoManager';
import EventBus from './layout/EventBus';
class DesignerActionRunner {
constructor(commandContext, notifier) {
private _undoManager: DesignerUndoManager;
private _context: CommandContext;
private _actionDisplatcher: ActionDispatcher;
constructor(commandContext: CommandContext, notifier: ActionDispatcher) {
$assert(commandContext, 'commandContext can not be null');
this._undoManager = new DesignerUndoManager();
this._context = commandContext;
this._notifier = notifier;
this._actionDisplatcher = notifier;
}
execute(command) {
execute(command: Command): void {
$assert(command, 'command can not be null');
command.execute(this._context);
this._undoManager.enqueue(command);
this.fireChangeEvent();
EventBus.instance.fireEvent(EventBus.events.DoLayout);
EventBus.instance.fireEvent('forceLayout');
}
undo() {
undo(): void {
this._undoManager.execUndo(this._context);
this.fireChangeEvent();
EventBus.instance.fireEvent(EventBus.events.DoLayout);
EventBus.instance.fireEvent('forceLayout');
}
redo() {
redo(): void {
this._undoManager.execRedo(this._context);
this.fireChangeEvent();
EventBus.instance.fireEvent(EventBus.events.DoLayout);
EventBus.instance.fireEvent('forceLayout');
}
fireChangeEvent() {
fireChangeEvent(): void {
const event = this._undoManager.buildEvent();
this._notifier.fireEvent('modelUpdate', event);
this._actionDisplatcher.fireEvent('modelUpdate', event);
}
}

2
packages/mindplot/src/components/DesignerBuilder.ts
View File

@ -37,7 +37,7 @@ export function buildDesigner(options: DesignerOptions): Designer {
PersistenceManager.init(persistence);
// Register toolbar event ...
if (options.mode === 'edition' || options.mode === 'showcase') {
if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'showcase') {
const menu = new Menu(designer, 'toolbar');
// If a node has focus, focus can be move to another node using the keys.

2
packages/mindplot/src/components/DesignerOptionsBuilder.ts
View File

@ -46,7 +46,7 @@ class OptionsBuilder {
}
const defaultOptions: DesignerOptions = {
mode: 'edition',
mode: 'edition-owner',
zoom: 0.85,
saveOnLoad: true,
containerSize,

15
packages/mindplot/src/components/DragManager.ts
View File

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

5
packages/mindplot/src/components/DragPivot.ts
View File

@ -18,7 +18,6 @@
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';
@ -43,7 +42,7 @@ class DragPivot {
constructor() {
this._position = new Point();
this._size = DragTopicConfig.PIVOT_SIZE;
this._size = DragPivot.DEFAULT_PIVOT_SIZE;
this._straightLine = this._buildStraightLine();
this._curvedLine = this._buildCurvedLine();
@ -251,6 +250,8 @@ class DragPivot {
this.setVisibility(false);
this._targetTopic = null;
}
static DEFAULT_PIVOT_SIZE = { width: 50, height: 6 };
}
export default DragPivot;

42
packages/mindplot/src/components/DragTopic.ts
View File

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

5
packages/mindplot/src/components/DragTopicConfig.js
View File

@ -1,5 +0,0 @@
const PIVOT_SIZE = { width: 50, height: 6 };
export default {
PIVOT_SIZE,
};

9
packages/mindplot/src/components/EditorProperties.js → packages/mindplot/src/components/EditorProperties.ts
View File

@ -17,20 +17,21 @@
*/
class EditorProperties {
private _zoom: number;
constructor() {
this._zoom = 0;
this._position = 0;
}
setZoom(zoom) {
setZoom(zoom: number) {
this._zoom = zoom;
}
getZoom() {
getZoom(): number {
return this._zoom;
}
asProperties() {
asProperties(): string {
return `zoom=${this._zoom}\n`;
}
}

2
packages/mindplot/src/components/EditorRenderMode.ts
View File

@ -1,2 +1,2 @@
type EditorRenderMode = 'viewonly' | 'edition' | 'showcase';
type EditorRenderMode = 'viewonly' | 'edition-owner' | 'edition-editor' | 'edition-viewer' | 'showcase';
export default EditorRenderMode;

30
packages/mindplot/src/components/Events.ts
View File

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

4
packages/mindplot/src/components/Icon.ts
View File

@ -16,14 +16,14 @@
* limitations under the License.
*/
import { $assert } from '@wisemapping/core-js';
import { Image } from '@wisemapping/web2d';
import { Image, Point } from '@wisemapping/web2d';
import IconGroup from './IconGroup';
import { Point } from '@wisemapping/web2d';
import SizeType from './SizeType';
import FeatureModel from './model/FeatureModel';
abstract class Icon {
protected _image: Image;
protected _group: IconGroup;
constructor(url: string) {

12
packages/mindplot/src/components/IconGroup.ts
View File

@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// eslint-disable-next-line max-classes-per-file
import {
$assert,
$defined,
@ -23,12 +23,11 @@ import {
import {
Group,
ElementClass,
Point,
} from '@wisemapping/web2d';
import IconGroupRemoveTip from './IconGroupRemoveTip';
import { Point } from '@wisemapping/web2d';
import Icon from './Icon';
import SizeType from './SizeType';
import IconModel from './model/IconModel';
import FeatureModel from './model/FeatureModel';
const ORDER_BY_TYPE = new Map<string, number>();
@ -38,10 +37,15 @@ ORDER_BY_TYPE.set('link', 2);
class IconGroup {
private _icons: Icon[];
private _group: any;
private _removeTip: IconGroupRemoveTip;
private _iconSize: SizeType;
private _topicId: number;
constructor(topicId: number, iconSize: number) {
$assert($defined(topicId), 'topicId can not be null');
$assert($defined(iconSize), 'iconSize can not be null');
@ -59,7 +63,6 @@ class IconGroup {
this._removeTip = new IconGroupRemoveTip(this._group);
this.seIconSize(iconSize, iconSize);
this._registerListeners();
}
setPosition(x: number, y: number): void {
@ -189,7 +192,6 @@ class IconGroup {
}
static ICON_PADDING = 5;
}
export default IconGroup;

5
packages/mindplot/src/components/LinkIcon.ts
View File

@ -26,8 +26,11 @@ import FeatureModel from './model/FeatureModel';
class LinkIcon extends Icon {
private _linksModel: FeatureModel;
private _topic: Topic;
private _readOnly: boolean;
private _tip: LinkIconTooltip;
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
@ -73,8 +76,8 @@ class LinkIcon extends Icon {
getModel(): FeatureModel {
return this._linksModel;
}
static IMAGE_URL = LinksImage;
static IMAGE_URL = LinksImage;
}
export default LinkIcon;

37
packages/mindplot/src/components/NodeGraphUtils.js
View File

@ -1,37 +0,0 @@
import { $assert } from '@wisemapping/core-js';
import CentralTopic from './CentralTopic';
import MainTopic from './MainTopic';
/**
* creates a new topic from the given node model
* @memberof mindplot.Nodegraph
* @param {mindplot.model.NodeModel} nodeModel
* @param {Object} options
* @throws will throw an error if nodeModel is null or undefined
* @throws will throw an error if the nodeModel's type is null or undefined
* @throws will throw an error if the node type cannot be recognized as either central or main
* topic type
* @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
*/
export const create = (nodeModel, options) => {
$assert(nodeModel, 'Model can not be null');
const type = nodeModel.getType();
$assert(type, 'Node model type can not be null');
let result;
if (type === 'CentralTopic') {
result = new CentralTopic(nodeModel, options);
} else if (type === 'MainTopic') {
result = new MainTopic(nodeModel, options);
} else {
$assert(false, `unsupported node type:${type}`);
}
return result;
};
export default {
create,
};

5
packages/mindplot/src/components/NoteIcon.ts
View File

@ -27,8 +27,11 @@ import FeatureModel from './model/FeatureModel';
class NoteIcon extends Icon {
private _linksModel: NoteModel;
private _topic: Topic;
private _readOnly: boolean;
private _tip: FloatingTip;
constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
@ -55,7 +58,6 @@ class NoteIcon extends Icon {
}
this._tip = new FloatingTip($(me.getImage().peer._native), {
title: $msg('NOTE'),
container: 'body',
// Content can also be a function of the target element!
content() {
return me._buildTooltipContent();
@ -88,7 +90,6 @@ class NoteIcon extends Icon {
}
static IMAGE_URL = NotesImage;
}
export default NoteIcon;

6
packages/mindplot/src/components/Relationship.ts
View File

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

4
packages/mindplot/src/components/ShrinkConnector.ts
View File

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

6
packages/mindplot/src/components/StandaloneActionDispatcher.ts
View File

@ -81,7 +81,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
const commandFunc = (topic: Topic, pos: Point) => {
const result = topic.getPosition();
EventBus.instance.fireEvent(EventBus.events.NodeMoveEvent, {
EventBus.instance.fireEvent('topicMoved', {
node: topic.getModel(),
position: pos,
});
@ -110,8 +110,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
this.execute(command);
}
/** */
changeTextToTopic(topicsIds: number[], text: string) {
changeTextToTopic(topicsIds: number[], text: string): void {
$assert($defined(topicsIds), 'topicsIds can not be null');
const commandFunc = (topic: Topic, value: string) => {
@ -252,7 +251,6 @@ class StandaloneActionDispatcher extends ActionDispatcher {
this.execute(command);
}
/** */
addFeatureToTopic(topicId: number, featureType: FeatureType, attributes) {
const command = new AddFeatureToTopicCommand(topicId, featureType, attributes);
this.execute(command);

135
packages/mindplot/src/components/Topic.ts
View File

@ -28,7 +28,6 @@ import TopicStyle from './TopicStyle';
import TopicFeatureFactory from './TopicFeature';
import ConnectionLine from './ConnectionLine';
import IconGroup from './IconGroup';
import FadeEffect from './util/FadeEffect';
import EventBus from './layout/EventBus';
import ShirinkConnector from './ShrinkConnector';
import NoteEditor from './widget/NoteEditor';
@ -337,11 +336,6 @@ abstract class Topic extends NodeGraph {
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 {
const iconGroup = this.getOrBuildIconGroup();
this.closeEditors();
@ -350,7 +344,7 @@ abstract class Topic extends NodeGraph {
const model = this.getModel();
model.addFeature(featureModel);
const result = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly());
const result: Icon = TopicFeatureFactory.createIcon(this, featureModel, this.isReadOnly());
iconGroup.addIcon(
result,
featureModel.getType() === TopicFeatureFactory.Icon.id && !this.isReadOnly(),
@ -360,7 +354,6 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
findFeatureById(id: number) {
const model = this.getModel();
return model.findFeatureById(id);
@ -431,7 +424,6 @@ abstract class Topic extends NodeGraph {
this.adjustShapes();
}
/** */
setFontSize(value: number, updateModel?: boolean) {
const textShape = this.getTextShape();
textShape.setSize(value);
@ -443,8 +435,7 @@ abstract class Topic extends NodeGraph {
this.adjustShapes();
}
/** */
setFontStyle(value, updateModel) {
setFontStyle(value: string, updateModel?: boolean) {
const textShape = this.getTextShape();
textShape.setStyle(value);
if ($defined(updateModel) && updateModel) {
@ -454,8 +445,7 @@ abstract class Topic extends NodeGraph {
this.adjustShapes();
}
/** */
setFontWeight(value, updateModel) {
setFontWeight(value: string, updateModel?: boolean) {
const textShape = this.getTextShape();
textShape.setWeight(value);
if ($defined(updateModel) && updateModel) {
@ -465,7 +455,6 @@ abstract class Topic extends NodeGraph {
this.adjustShapes();
}
/** */
getFontWeight() {
const model = this.getModel();
let result = model.getFontWeight();
@ -476,8 +465,7 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
getFontFamily() {
getFontFamily(): string {
const model = this.getModel();
let result = model.getFontFamily();
if (!$defined(result)) {
@ -487,8 +475,7 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
getFontColor() {
getFontColor(): string {
const model = this.getModel();
let result = model.getFontColor();
if (!$defined(result)) {
@ -498,8 +485,7 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
getFontStyle() {
getFontStyle(): string {
const model = this.getModel();
let result = model.getFontStyle();
if (!$defined(result)) {
@ -509,8 +495,7 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
getFontSize() {
getFontSize(): number {
const model = this.getModel();
let result = model.getFontSize();
if (!$defined(result)) {
@ -520,8 +505,7 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
setFontColor(value, updateModel) {
setFontColor(value: string, updateModel?: boolean) {
const textShape = this.getTextShape();
textShape.setColor(value);
if ($defined(updateModel) && updateModel) {
@ -530,7 +514,7 @@ abstract class Topic extends NodeGraph {
}
}
_setText(text: string, updateModel: boolean) {
private _setText(text: string, updateModel?: boolean) {
const textShape = this.getTextShape();
textShape.setText(text == null ? TopicStyle.defaultText(this) : text);
@ -540,7 +524,6 @@ abstract class Topic extends NodeGraph {
}
}
/** */
setText(text: string) {
// Avoid empty nodes ...
if (!text || $.trim(text).length === 0) {
@ -552,7 +535,6 @@ abstract class Topic extends NodeGraph {
this.adjustShapes();
}
/** */
getText(): string {
const model = this.getModel();
let result = model.getText();
@ -562,12 +544,11 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
setBackgroundColor(color: string) {
this._setBackgroundColor(color, true);
}
_setBackgroundColor(color: string, updateModel: boolean) {
private _setBackgroundColor(color: string, updateModel: boolean) {
const innerShape = this.getInnerShape();
innerShape.setFill(color);
@ -593,11 +574,11 @@ abstract class Topic extends NodeGraph {
}
/** */
setBorderColor(color: string) {
setBorderColor(color: string): void {
this._setBorderColor(color, true);
}
_setBorderColor(color: string, updateModel: boolean) {
private _setBorderColor(color: string, updateModel: boolean): void {
const innerShape = this.getInnerShape();
innerShape.setAttribute('strokeColor', color);
@ -612,8 +593,7 @@ abstract class Topic extends NodeGraph {
}
}
/** */
getBorderColor() {
getBorderColor(): string {
const model = this.getModel();
let result = model.getBorderColor();
if (!$defined(result)) {
@ -622,7 +602,7 @@ abstract class Topic extends NodeGraph {
return result;
}
_buildTopicShape() {
_buildTopicShape(): ElementClass {
const groupAttributes = {
width: 100,
height: 100,
@ -660,17 +640,17 @@ abstract class Topic extends NodeGraph {
group.setTestId(model.getId());
}
_registerDefaultListenersToElement(elem, topic) {
const mouseOver = function mouseOver(event) {
_registerDefaultListenersToElement(elem: ElementClass, topic: Topic) {
const mouseOver = function mouseOver() {
if (topic.isMouseEventsEnabled()) {
topic.handleMouseOver(event);
topic.handleMouseOver();
}
};
elem.addEvent('mouseover', mouseOver);
const outout = function outout(event) {
const outout = function outout() {
if (topic.isMouseEventsEnabled()) {
topic.handleMouseOut(event);
topic.handleMouseOut();
}
};
elem.addEvent('mouseout', outout);
@ -697,13 +677,12 @@ abstract class Topic extends NodeGraph {
}
/** */
areChildrenShrunken() {
areChildrenShrunken(): boolean {
const model = this.getModel();
return model.areChildrenShrunken() && !this.isCentralTopic();
}
/** */
isCollapsed() {
isCollapsed(): boolean {
let result = false;
let current = this.getParent();
@ -714,42 +693,27 @@ abstract class Topic extends NodeGraph {
return result;
}
/** */
setChildrenShrunken(value) {
setChildrenShrunken(value: boolean) {
// Update Model ...
const model = this.getModel();
model.setChildrenShrunken(value);
// Change render base on the state.
const shrinkConnector = this.getShrinkConnector();
if ($defined(shrinkConnector)) {
if (shrinkConnector) {
shrinkConnector.changeRender(value);
}
// Do some fancy animation ....
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) => {
if (elem.setOnFocus) {
elem.setOnFocus(false);
}
});
elements.forEach((elem) => {
elem.setVisibility(!value, 250);
});
fade.start();
EventBus.instance.fireEvent(EventBus.events.NodeShrinkEvent, model);
EventBus.instance.fireEvent('childShrinked', model);
}
/** */
getShrinkConnector(): ShirinkConnector {
getShrinkConnector(): ShirinkConnector | undefined {
let result = this._connector;
if (this._connector == null) {
this._connector = new ShirinkConnector(this);
@ -928,7 +892,6 @@ abstract class Topic extends NodeGraph {
this._relationships.forEach((r) => r.redraw());
}
/** */
setBranchVisibility(value: boolean): void {
let current: Topic = this;
let parent: Topic = this;
@ -939,20 +902,19 @@ abstract class Topic extends NodeGraph {
current.setVisibility(value);
}
/** */
setVisibility(value: boolean): void {
this._setTopicVisibility(value);
setVisibility(value: boolean, fade = 0): void {
this._setTopicVisibility(value, fade);
// Hide all children...
this._setChildrenVisibility(value);
this._setChildrenVisibility(value, fade);
// 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.
const outgoingLine = this.getOutgoingLine();
if (outgoingLine) {
outgoingLine.setVisibility(value);
outgoingLine.setVisibility(value, fade);
}
}
@ -986,7 +948,7 @@ abstract class Topic extends NodeGraph {
return elem.isVisible();
}
private _setRelationshipLinesVisibility(value: boolean): void {
private _setRelationshipLinesVisibility(value: boolean, fade = 0): void {
this._relationships.forEach((relationship) => {
const sourceTopic = relationship.getSourceTopic();
const targetTopic = relationship.getTargetTopic();
@ -997,27 +959,28 @@ abstract class Topic extends NodeGraph {
value
&& (targetParent == null || !targetParent.areChildrenShrunken())
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
fade,
);
});
}
private _setTopicVisibility(value: boolean) {
private _setTopicVisibility(value: boolean, fade = 0) {
const elem = this.get2DElement();
elem.setVisibility(value);
elem.setVisibility(value, fade);
if (this.getIncomingLines().length > 0) {
const connector = this.getShrinkConnector();
if ($defined(connector)) {
connector.setVisibility(value);
connector.setVisibility(value, fade);
}
}
// Hide inner shape ...
this.getInnerShape().setVisibility(value);
this.getInnerShape().setVisibility(value, fade);
// Hide text shape ...
const textShape = this.getTextShape();
textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false);
textShape.setVisibility(this.getShapeType() !== TopicShape.IMAGE ? value : false, fade);
}
/** */
@ -1033,14 +996,14 @@ abstract class Topic extends NodeGraph {
textShape.setOpacity(opacity);
}
private _setChildrenVisibility(isVisible: boolean) {
private _setChildrenVisibility(value: boolean, fade = 0) {
// Hide all children.
const children = this.getChildren();
const model = this.getModel();
const visibility = isVisible ? !model.areChildrenShrunken() : isVisible;
const visibility = value ? !model.areChildrenShrunken() : value;
children.forEach((child) => {
child.setVisibility(visibility);
child.setVisibility(visibility, fade);
const outgoingLine = child.getOutgoingLine();
outgoingLine.setVisibility(visibility);
});
@ -1081,7 +1044,7 @@ abstract class Topic extends NodeGraph {
this._updatePositionOnChangeSize(oldSize, roundedSize);
if (hasSizeChanged) {
EventBus.instance.fireEvent(EventBus.events.NodeResizeEvent, {
EventBus.instance.fireEvent('topicResize', {
node: this.getModel(),
size: roundedSize,
});
@ -1112,7 +1075,7 @@ abstract class Topic extends NodeGraph {
outgoingLine.removeFromWorkspace(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 ...
const model = this.getModel();
@ -1195,7 +1158,7 @@ abstract class Topic extends NodeGraph {
// Fire connection event ...
if (this.isInWorkspace()) {
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
EventBus.instance.fireEvent('topicConnected', {
parentNode: targetTopic.getModel(),
childNode: this.getModel(),
});
@ -1233,7 +1196,7 @@ abstract class Topic extends NodeGraph {
workspace.removeChild(line);
}
this._isInWorkspace = false;
EventBus.instance.fireEvent(EventBus.events.NodeRemoved, this.getModel());
EventBus.instance.fireEvent('topicRemoved', this.getModel());
}
addToWorkspace(workspace: Workspace) {
@ -1241,11 +1204,11 @@ abstract class Topic extends NodeGraph {
workspace.append(elem);
if (!this.isInWorkspace()) {
if (!this.isCentralTopic()) {
EventBus.instance.fireEvent(EventBus.events.NodeAdded, this.getModel());
EventBus.instance.fireEvent('topicAdded', this.getModel());
}
if (this.getModel().isConnected()) {
EventBus.instance.fireEvent(EventBus.events.NodeConnectEvent, {
EventBus.instance.fireEvent('topicConnected', {
parentNode: this.getOutgoingConnectedTopic().getModel(),
childNode: this.getModel(),
});
@ -1315,7 +1278,7 @@ abstract class Topic extends NodeGraph {
}
}
private _flatten2DElements(topic: Topic) {
private _flatten2DElements(topic: Topic): (Topic | Relationship)[] {
let result = [];
const children = topic.getChildren();

27
packages/mindplot/src/components/TopicFactory.ts Normal file
View File

@ -0,0 +1,27 @@
import { $assert } from '@wisemapping/core-js';
import CentralTopic from './CentralTopic';
import MainTopic from './MainTopic';
import NodeModel from './model/NodeModel';
import Topic from './Topic';
class TopicFactory {
static create(nodeModel: NodeModel, options: object): Topic {
$assert(nodeModel, 'Model can not be null');
const type = nodeModel.getType();
$assert(type, 'Node model type can not be null');
let result: Topic;
if (type === 'CentralTopic') {
result = new CentralTopic(nodeModel, options);
} else if (type === 'MainTopic') {
result = new MainTopic(nodeModel, options);
} else {
$assert(false, `unsupported node type:${type}`);
}
return result;
}
}
export default TopicFactory;

8
packages/mindplot/src/components/TopicFeature.js
View File

@ -40,14 +40,6 @@ const TopicFeatureFactory = {
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 an error if model is null or undefined
* @return {mindplot.Icon} a new instance of the icon subclass matching the topic feature
*/
createIcon(topic, model, readOnly) {
$assert(topic, 'topic can not be null');
$assert(model, 'model can not be null');

7
packages/mindplot/src/components/commands/AddFeatureToTopicCommand.ts
View File

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

8
packages/mindplot/src/components/commands/GenericFunctionCommand.ts
View File

@ -25,7 +25,7 @@ type CommandTypes = string | object | boolean | number;
class GenericFunctionCommand extends Command {
private _value: CommandTypes;
private _topicsId: number[];
private _topicsIds: number[];
private _commandFunc: (topic: Topic, value: CommandTypes) => CommandTypes;
@ -39,7 +39,7 @@ class GenericFunctionCommand extends Command {
super();
this._value = value;
this._topicsId = topicsIds;
this._topicsIds = topicsIds;
this._commandFunc = commandFunc;
this._oldValues = [];
}
@ -49,7 +49,7 @@ class GenericFunctionCommand extends Command {
*/
execute(commandContext: CommandContext) {
if (!this._applied) {
const topics = commandContext.findTopics(this._topicsId);
const topics = commandContext.findTopics(this._topicsIds);
if (topics != null) {
const me = this;
@ -66,7 +66,7 @@ class GenericFunctionCommand extends Command {
undoExecute(commandContext: CommandContext): void {
if (this._applied) {
const topics = commandContext.findTopics(this._topicsId);
const topics = commandContext.findTopics(this._topicsIds);
topics.forEach(((topic: Topic, index: number) => {
this._commandFunc(topic, this._oldValues[index]);

24
packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts
View File

@ -1,6 +1,4 @@
/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/*
/**
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
@ -17,22 +15,26 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import RootedTreeSet from './RootedTreeSet';
import Node from './Node';
import PositionType from '../PositionType';
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;

33
packages/mindplot/src/components/layout/EventBus.js → packages/mindplot/src/components/layout/EventBus.ts
View File

@ -17,25 +17,22 @@
*/
import Events from '../Events';
export type EventType = 'topicResize' | 'topicMoved' | 'childShrinked' | 'topicConnected' | 'topicAdded' | 'topicRemoved' | 'forceLayout' | 'topicDisconect';
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;

55
packages/mindplot/src/components/layout/EventBusDispatcher.js → packages/mindplot/src/components/layout/EventBusDispatcher.ts
View File

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

122
packages/mindplot/src/components/layout/LayoutManager.js → packages/mindplot/src/components/layout/LayoutManager.ts
View File

@ -15,15 +15,23 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import $ from 'jquery';
import { $assert, $defined } from '@wisemapping/core-js';
import Events from '../Events';
import RootedTreeSet from './RootedTreeSet';
import OriginalLayout from './OriginalLayout';
import ChangeEvent from './ChangeEvent';
import SizeType from '../SizeType';
import Node from './Node';
import PositionType from '../PositionType';
class LayoutManager extends Events {
constructor(rootNodeId, rootSize) {
private _treeSet: RootedTreeSet;
private _layout: OriginalLayout;
private _events: ChangeEvent[];
constructor(rootNodeId: number, rootSize: SizeType) {
super();
$assert($defined(rootNodeId), 'rootNodeId can not be null');
$assert(rootSize, 'rootSize can not be null');
@ -36,40 +44,22 @@ class LayoutManager extends Events {
this._events = [];
}
/**
* @param id
* @param size
* @throws will throw an error if id is null or undefined
*/
updateNodeSize(id, size) {
updateNodeSize(id: number, size: SizeType): void {
$assert($defined(id), 'id can not be null');
const node = this._treeSet.find(id);
node.setSize(size);
}
/**
* @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) {
updateShrinkState(id: number, value: boolean): void {
$assert($defined(id), 'id can not be null');
$assert($defined(value), 'value can not be null');
const node = this._treeSet.find(id);
node.setShrunken(value);
return this;
}
/**
* @param id
* @return {@link RootedTreeSet}.find(id)
*/
find(id) {
find(id: number): Node {
return this._treeSet.find(id);
}
@ -81,31 +71,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 y property is null or undefined
*/
moveNode(id, position) {
moveNode(id: number, position: PositionType) {
$assert($defined(id), 'id cannot be null');
$assert($defined(position), 'position cannot be null');
$assert($defined(position.x), 'x can not be null');
$assert($defined(position.y), 'y can not be null');
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);
}
/**
* @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) {
connectNode(parentId: number, childId: number, order: number) {
$assert($defined(parentId), 'parentId cannot be null');
$assert($defined(childId), 'childId cannot be null');
$assert($defined(order), 'order cannot be null');
@ -115,16 +91,9 @@ class LayoutManager extends Events {
return this;
}
/**
* @param id
* @throws will throw an error if id is null or undefined
* @return this
*/
disconnectNode(id) {
disconnectNode(id: number): void {
$assert($defined(id), 'id can not be null');
this._layout.disconnectNode(id);
return this;
}
/**
@ -134,7 +103,7 @@ class LayoutManager extends Events {
* @throws will throw an error if id is null or undefined
* @return this
*/
addNode(id, size, position) {
addNode(id: number, size: SizeType, position: PositionType) {
$assert($defined(id), 'id can not be null');
const result = this._layout.createNode(id, size, position, 'topic');
this._treeSet.add(result);
@ -142,13 +111,7 @@ class LayoutManager extends Events {
return this;
}
/**
* 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) {
removeNode(id: number) {
$assert($defined(id), 'id can not be null');
const node = this._treeSet.find(id);
@ -163,47 +126,31 @@ class LayoutManager extends Events {
return this;
}
/**
* @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) {
predict(parentId: number, nodeId: number, position: PositionType): { order: number, position: PositionType } {
$assert($defined(parentId), 'parentId can not be null');
const parent = this._treeSet.find(parentId);
const node = nodeId ? this._treeSet.find(nodeId) : null;
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] };
}
/**
* logs dump to console
*/
dump() {
console.log(this._treeSet.dump());
}
/**
* @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 }) {
plot(containerId: string, size = { width: 200, height: 200 }) {
// this method is only used from tests that include Raphael
if (!global.Raphael) {
if (!globalThis.Raphael) {
console.warn('Raphael.js not found, exiting plot()');
return null;
}
$assert(containerId, 'containerId cannot be null');
const squaresize = 10;
const canvas = global.Raphael(containerId, size.width, size.height);
const canvas = globalThis.Raphael(containerId, size.width, size.height);
canvas.drawGrid(
0,
0,
@ -217,40 +164,33 @@ class LayoutManager extends Events {
return canvas;
}
/**
* initializes the layout to be updated
* @param fireEvents
* @return this
*/
layout(fireEvents) {
layout(flush: boolean): LayoutManager {
// File repositioning ...
this._layout.layout();
// Collect changes ...
this._collectChanges();
this._collectChanges(this._treeSet.getTreeRoots());
if ($(fireEvents).length > 0 || fireEvents) {
if (flush) {
this._flushEvents();
}
return this;
}
_flushEvents() {
private _flushEvents() {
this._events.forEach(((event) => {
this.fireEvent('change', event);
}));
this._events = [];
}
_collectChanges(nodes) {
const nodesToCollect = nodes || this._treeSet.getTreeRoots();
nodesToCollect.forEach(((node) => {
private _collectChanges(nodes: Node[]) {
nodes.forEach(((node) => {
if (node.hasOrderChanged() || node.hasPositionChanged()) {
// Find or create a event ...
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) {
event = new ChangeEvent(id);
}

15
packages/mindplot/src/components/layout/RootedTreeSet.ts
View File

@ -28,31 +28,20 @@ class RootedTreeSet {
this._rootNodes = [];
}
/**
* @param root
* @throws will throw an error if root is null or undefined
*/
setRoot(root: Node) {
$assert(root, 'root can not be null');
this._rootNodes.push(this._decodate(root));
}
/** getter */
getTreeRoots() {
getTreeRoots(): Node[] {
return this._rootNodes;
}
_decodate(node: Node) {
_decodate(node: Node): Node {
node._children = [];
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) {
$assert(node, 'node can not be null');
if (this.find(node.getId(), false)) {

2
packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js
View File

@ -59,6 +59,8 @@ class BootstrapDialog extends Options {
$(this).remove();
});
this._native.on('shown.bs.modal', this.onDialogShown);
this._native.appendTo('#mindplot-tooltips');
}
_buildFooter() {

6
packages/mindplot/src/components/model/FeatureModel.ts
View File

@ -19,7 +19,7 @@ import { $assert } from '@wisemapping/core-js';
import FeatureType from './FeatureType';
class FeatureModel {
static _next_id = 0;
static _nextId = 0;
private _id: number;
@ -85,8 +85,8 @@ class FeatureModel {
}
static _nextUUID(): number {
const result = FeatureModel._next_id + 1;
FeatureModel._next_id = result;
const result = FeatureModel._nextId + 1;
FeatureModel._nextId = result;
return result;
}
}

12
packages/mindplot/src/components/model/INodeModel.ts
View File

@ -29,7 +29,7 @@ const parseJsObject = (str: string) => JSON.parse(str.replace(/(['"])?([a-z0-9A-
abstract class INodeModel {
static MAIN_TOPIC_TO_MAIN_TOPIC_DISTANCE = 220;
private static _next_uuid = 0;
private static _nextUuid = 0;
protected _mindmap: Mindmap;
@ -49,9 +49,9 @@ abstract class INodeModel {
const newId = INodeModel._nextUUID();
this.putProperty('id', newId);
} else {
if (id > INodeModel._next_uuid) {
if (id > INodeModel._nextUuid) {
$assert(Number.isFinite(id));
INodeModel._next_uuid = id;
INodeModel._nextUuid = id;
}
this.putProperty('id', id);
}
@ -287,7 +287,7 @@ abstract class INodeModel {
abstract getPropertiesKeys(): string[];
abstract getProperty(key: string): number | string | boolean;
abstract getProperty(key: string): number | string | boolean | undefined;
abstract putProperty(key: string, value: number | string | boolean): void;
@ -358,8 +358,8 @@ abstract class INodeModel {
abstract removeChild(child: INodeModel);
static _nextUUID(): number {
INodeModel._next_uuid += 1;
return INodeModel._next_uuid;
INodeModel._nextUuid += 1;
return INodeModel._nextUuid;
}
}

6
packages/mindplot/src/components/model/RelationshipModel.ts
View File

@ -20,7 +20,7 @@ import Point from '@wisemapping/web2d';
import ConnectionLine from '../ConnectionLine';
class RelationshipModel {
static _next_uuid = 0;
static _nextUuid = 0;
private _id: number;
@ -133,8 +133,8 @@ class RelationshipModel {
}
static _nextUUID() {
RelationshipModel._next_uuid += 1;
return RelationshipModel._next_uuid;
RelationshipModel._nextUuid += 1;
return RelationshipModel._nextUuid;
}
}

7
packages/mindplot/src/components/util/index.js
View File

@ -1,7 +0,0 @@
import fadeEffect from './FadeEffect';
import shape from './Shape';
export default {
FadeEffect: fadeEffect,
Shape: shape,
};

2
packages/mindplot/src/components/widget/FloatingTip.js
View File

@ -27,7 +27,7 @@ const defaultOptions = {
title: '',
content: '',
delay: 0,
container: false,
container: '#mindplot-tooltips',
destroyOnExit: false,
};

1
packages/mindplot/src/components/widget/LinkIconTooltip.js
View File

@ -31,7 +31,6 @@ class LinkIconTooltip extends FloatingTip {
},
html: true,
placement: 'bottom',
container: 'body',
title: $msg('LINK'),
trigger: 'manual',
template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',

301
packages/mindplot/src/components/widget/Menu.ts
View File

@ -39,170 +39,145 @@ class Menu extends IMenu {
// Create panels ...
const designerModel = designer.getModel();
const fontFamilyBtn = $('#fontFamily');
if (fontFamilyBtn) {
const fontFamilyModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const fontFamily = nodes[i].getFontFamily();
if (result != null && result !== fontFamily) {
result = null;
break;
}
result = fontFamily;
const fontFamilyModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const fontFamily = nodes[i].getFontFamily();
if (result != null && result !== fontFamily) {
result = null;
break;
}
return result;
},
result = fontFamily;
}
return result;
},
setValue(value: string) {
designer.changeFontFamily(value);
},
};
this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
}
setValue(value: string) {
designer.changeFontFamily(value);
},
};
this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
const fontSizeBtn = $('#fontSize');
if (fontSizeBtn) {
const fontSizeModel = {
getValue(): number {
const nodes = designerModel.filterSelectedTopics();
const fontSizeModel = {
getValue(): number {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const fontSize = nodes[i].getFontSize();
if (result != null && result !== fontSize) {
result = null;
break;
}
result = fontSize;
let result = null;
for (let i = 0; i < nodes.length; i++) {
const fontSize = nodes[i].getFontSize();
if (result != null && result !== fontSize) {
result = null;
break;
}
return result;
},
setValue(value: number) {
designer.changeFontSize(value);
},
};
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
}
result = fontSize;
}
return result;
},
setValue(value: number) {
designer.changeFontSize(value);
},
};
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
const topicShapeBtn = $('#topicShape');
if (topicShapeBtn) {
const topicShapeModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const shapeType = nodes[i].getShapeType();
if (result != null && result !== shapeType) {
result = null;
break;
}
result = shapeType;
const topicShapeModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const shapeType = nodes[i].getShapeType();
if (result != null && result !== shapeType) {
result = null;
break;
}
return result;
},
setValue(value: string) {
designer.changeTopicShape(value);
},
};
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
}
result = shapeType;
}
return result;
},
setValue(value: string) {
designer.changeTopicShape(value);
},
};
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
const topicIconBtn = $('#topicIcon');
if (topicIconBtn) {
// Create icon panel dialog ...
const topicIconModel = {
getValue() {
return null;
},
setValue(value: string) {
designer.addIconType(value);
},
};
this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
}
// Create icon panel dialog ...
const topicIconModel = {
getValue() {
return null;
},
setValue(value: string) {
designer.addIconType(value);
},
};
this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
// Topic color item ...
const topicColorBtn = $('#topicColor');
if (topicColorBtn) {
const topicColorModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getBackgroundColor();
if (result != null && result !== color) {
result = null;
break;
}
result = color;
const topicColorModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getBackgroundColor();
if (result != null && result !== color) {
result = null;
break;
}
return result;
},
setValue(hex: string) {
designer.changeBackgroundColor(hex);
},
};
this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
}
result = color;
}
return result;
},
setValue(hex: string) {
designer.changeBackgroundColor(hex);
},
};
this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
// Border color item ...
const topicBorderBtn = $('#topicBorder');
if (topicBorderBtn) {
const borderColorModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getBorderColor();
if (result != null && result !== color) {
result = null;
break;
}
result = color;
const borderColorModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
let result = null;
for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getBorderColor();
if (result != null && result !== color) {
result = null;
break;
}
return result;
},
setValue(hex: string) {
designer.changeBorderColor(hex);
},
};
this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
}
result = color;
}
return result;
},
setValue(hex: string) {
designer.changeBorderColor(hex);
},
};
this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
// Font color item ...
const fontColorBtn = $('#fontColor');
if (fontColorBtn) {
const fontColorModel = {
getValue() {
let result = null;
const nodes = designerModel.filterSelectedTopics();
for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getFontColor();
if (result != null && result !== color) {
result = null;
break;
}
result = color;
const fontColorModel = {
getValue() {
let result = null;
const nodes = designerModel.filterSelectedTopics();
for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getFontColor();
if (result != null && result !== color) {
result = null;
break;
}
return result;
},
setValue(hex) {
designer.changeFontColor(hex);
},
};
this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
}
result = color;
}
return result;
},
setValue(hex) {
designer.changeFontColor(hex);
},
};
this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
Menu._registerTooltip('export', $msg('EXPORT'));
@ -315,14 +290,6 @@ class Menu extends IMenu {
}
}
const discardElem = $('#discard');
if (discardElem.length !== 0) {
this._addButton('discard', false, false, () => {
this.discardChanges(designer);
});
Menu._registerTooltip('discard', $msg('DISCARD_CHANGES'));
}
const shareElem = $('#shareIt');
if (shareElem.length !== 0) {
Menu._registerTooltip('shareIt', $msg('COLLABORATE'));
@ -350,14 +317,12 @@ class Menu extends IMenu {
}
const backTolist = $('#backToList');
if (backTolist.length !== 0) {
backTolist.bind('click', (event) => {
event.stopPropagation();
window.location.href = '/c/maps/';
return false;
});
Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
}
backTolist.bind('click', (event) => {
event.stopPropagation();
window.location.href = '/c/maps/';
return false;
});
Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
// Account dialog ...
const accountSettings = $('#account');
@ -367,9 +332,9 @@ class Menu extends IMenu {
});
this._toolbarElems.push(new AccountSettingsPanel('account'));
Menu._registerTooltip('account', `${global.accountEmail}`);
}
this._registerEvents(designer);
this._registerEvents(designer);
}
}
private _registerEvents(designer: Designer) {

16
packages/web2d/src/components/ElementClass.js
View File

@ -161,12 +161,12 @@ class ElementClass {
setStroke(width, style, color, opacity) {
if (
style != null
&& style !== undefined
&& style !== 'dash'
&& style !== 'dot'
&& style !== 'solid'
&& style !== 'longdash'
&& style !== 'dashdot'
&& style !== undefined
&& style !== 'dash'
&& style !== 'dot'
&& style !== 'solid'
&& style !== 'longdash'
&& style !== 'dashdot'
) {
throw new Error(`Unsupported stroke style: '${style}'`);
}
@ -255,8 +255,8 @@ class ElementClass {
this.peer.setFill(null, opacity);
}
setVisibility(isVisible) {
this.peer.setVisibility(isVisible);
setVisibility(value, fade) {
this.peer.setVisibility(value, fade);
}
isVisible() {

13
packages/web2d/src/components/peer/svg/ElementPeer.js
View File

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

2
packages/web2d/test/playground/shapes.html
View File

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

13
packages/web2d/test/playground/shapes.js
View File

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

2
packages/webapp/src/app.tsx
View File

@ -81,7 +81,7 @@ const App = (): ReactElement => {
component={withSessionExpirationHandling(MapsPage)}
/>
<Route exact path="/c/maps/:id/edit">
<EnhacedEditorPage isTryMode={false} />
<EnhacedEditorPage isTryMode={false}/>
</Route>
<Route exact path="/c/maps/:id/try">
<EnhacedEditorPage isTryMode={true} />

10
packages/webapp/src/classes/client/rest-client/index.ts
View File

@ -611,12 +611,12 @@ export default class RestClient implements Client {
}
}
buildPersistenceManager(editorMode: EditorRenderMode ): PersistenceManager {
buildPersistenceManager(editorMode: EditorRenderMode): PersistenceManager {
if (this.persistenceManager) {
return this.persistenceManager;
}
let persistence: PersistenceManager;
if (editorMode === 'edition') {
if (editorMode === 'edition-owner' || editorMode === 'edition-editor') {
persistence = new RESTPersistenceManager({
documentUrl: '/c/restful/maps/{id}/document',
revertUrl: '/c/restful/maps/{id}/history/latest',
@ -645,13 +645,15 @@ export default class RestClient implements Client {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private parseResponseOnError = (response: any): ErrorInfo => {
console.error("Backend error=>");
console.error(response.data);
console.error(`Performing backend action error: ${JSON.stringify(response)}`);
let result: ErrorInfo | undefined;
if (response) {
const status: number = response.status;
const data = response.data;
console.error(`Status Code: ${status}`);
console.error(`Status Data: ${response.data}`);
console.error(`Status Message: ${response.message}`);
switch (status) {
case 401:

23
packages/webapp/src/components/editor-page/EditorOptionsBuider.ts
View File

@ -1,25 +1,16 @@
import { EditorOptions } from '@wisemapping/editor';
import { EditorRenderMode } from '@wisemapping/mindplot';
import AppConfig from '../../classes/app-config';
export default class EditorOptionsBulder {
static build(locale: string, hotkeys: boolean, isTryMode: boolean): { options: EditorOptions, mapId: number } {
static build(locale: string, mode: EditorRenderMode, hotkeys: boolean): EditorOptions {
let options: EditorOptions = {
enableKeyboardEvents: hotkeys,
locale: locale,
mode: mode,
};
if (isTryMode) {
// Sent to try mode ...
options.mode = 'showcase';
} else if (global.mindmapLocked) {
// Map locked, open for view mode ...
options.mode = 'viewonly';
} else {
options.mode = 'edition';
}
let mapId: number;
if (!AppConfig.isDevelopEnv()) {
options = {
zoom: (global.userOptions?.zoom != undefined
@ -30,7 +21,6 @@ export default class EditorOptionsBulder {
mapTitle: global.mapTitle,
...options
}
mapId = global.mapId;
} else {
// Running in a development mode.
console.log('Running editor in development mode');
@ -40,8 +30,11 @@ export default class EditorOptionsBulder {
mapTitle: "Develop Mindnap",
...options
}
mapId = 666;
}
return { options, mapId };
return options;
}
static loadMapId(): number {
return !AppConfig.isDevelopEnv() ? global.mapId : 555;
}
}

38
packages/webapp/src/components/editor-page/index.tsx
View File

@ -2,13 +2,14 @@ import React, { useEffect } from 'react';
import ActionDispatcher from '../maps-page/action-dispatcher';
import { ActionType } from '../maps-page/action-chooser';
import Editor from '@wisemapping/editor';
import { EditorRenderMode, PersistenceManager } from '@wisemapping/mindplot';
import AppI18n from '../../classes/app-i18n';
import { useSelector } from 'react-redux';
import { hotkeysEnabled } from '../../redux/editorSlice';
import ReactGA from 'react-ga';
import Client from '../../classes/client';
import { activeInstance, fetchAccount } from '../../redux/clientSlice';
import { PersistenceManager } from '@wisemapping/mindplot';
import { activeInstance, fetchAccount, fetchMapById } from '../../redux/clientSlice';
import EditorOptionsBulder from './EditorOptionsBuider';
export type EditorPropsType = {
@ -20,16 +21,43 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
const hotkey = useSelector(hotkeysEnabled);
const userLocale = AppI18n.getUserLocale();
const client: Client = useSelector(activeInstance);
const { mapId, options } = EditorOptionsBulder.build(userLocale.code, hotkey, isTryMode);
useEffect(() => {
ReactGA.pageview(window.location.pathname + window.location.search);
}, []);
const findEditorMode = (isTryMode: boolean, mapId: number): EditorRenderMode | null => {
let result: EditorRenderMode = null;
if (isTryMode) {
result = 'showcase';
} else if (global.mindmapLocked) {
result = 'viewonly';
} else {
const fetchResult = fetchMapById(mapId);
if (!fetchResult.isLoading) {
if (fetchResult.error) {
throw new Error(`User coild not be loaded: ${JSON.stringify(fetchResult.error)}`);
}
result = fetchResult.map.role === 'owner' ? 'edition-owner' : 'edition-editor';
}
}
return result;
}
// What is the role ?
const mapId = EditorOptionsBulder.loadMapId();
const mode = findEditorMode(isTryMode, mapId);
// Account settings can be null and editor cannot be initilized multiple times. This creates problems
// at the i18n resource loading.
const persistence = client.buildPersistenceManager(options.mode);
const loadCompleted = persistence && (options.mode === 'showcase' || fetchAccount());
const isAccountLoaded = mode === 'showcase' || fetchAccount;
const loadCompleted = mode && isAccountLoaded;
let options, persistence: PersistenceManager;
if (loadCompleted) {
options = EditorOptionsBulder.build(userLocale.code, mode, hotkey);
persistence = client.buildPersistenceManager(mode);
}
return loadCompleted ? (
<>