mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-10 17:33:24 +01:00
Migration to TS
This commit is contained in:
parent
b09035e3b2
commit
413f33c9b3
@ -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;
|
@ -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';
|
||||
@ -225,9 +225,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 ...
|
||||
|
@ -16,19 +16,28 @@
|
||||
* 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);
|
||||
@ -36,21 +45,21 @@ class DesignerActionRunner {
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
}
|
||||
|
||||
undo() {
|
||||
undo(): void {
|
||||
this._undoManager.execUndo(this._context);
|
||||
this.fireChangeEvent();
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
}
|
||||
|
||||
redo() {
|
||||
redo(): void {
|
||||
this._undoManager.execRedo(this._context);
|
||||
this.fireChangeEvent();
|
||||
EventBus.instance.fireEvent(EventBus.events.DoLayout);
|
||||
}
|
||||
|
||||
fireChangeEvent() {
|
||||
fireChangeEvent(): void {
|
||||
const event = this._undoManager.buildEvent();
|
||||
this._notifier.fireEvent('modelUpdate', event);
|
||||
this._actionDisplatcher.fireEvent('modelUpdate', event);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -1,5 +0,0 @@
|
||||
const PIVOT_SIZE = { width: 50, height: 6 };
|
||||
|
||||
export default {
|
||||
PIVOT_SIZE,
|
||||
};
|
@ -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`;
|
||||
}
|
||||
}
|
@ -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) {
|
||||
|
@ -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,
|
||||
};
|
@ -431,7 +431,6 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
setFontSize(value: number, updateModel?: boolean) {
|
||||
const textShape = this.getTextShape();
|
||||
textShape.setSize(value);
|
||||
@ -443,8 +442,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 +452,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 +462,6 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontWeight() {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontWeight();
|
||||
@ -476,8 +472,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontFamily() {
|
||||
getFontFamily(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontFamily();
|
||||
if (!$defined(result)) {
|
||||
@ -487,8 +482,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontColor() {
|
||||
getFontColor(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontColor();
|
||||
if (!$defined(result)) {
|
||||
@ -498,8 +492,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontStyle() {
|
||||
getFontStyle(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontStyle();
|
||||
if (!$defined(result)) {
|
||||
@ -509,8 +502,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
getFontSize() {
|
||||
getFontSize(): number {
|
||||
const model = this.getModel();
|
||||
let result = model.getFontSize();
|
||||
if (!$defined(result)) {
|
||||
@ -520,8 +512,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 +521,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 +531,6 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
setText(text: string) {
|
||||
// Avoid empty nodes ...
|
||||
if (!text || $.trim(text).length === 0) {
|
||||
@ -552,7 +542,6 @@ abstract class Topic extends NodeGraph {
|
||||
this.adjustShapes();
|
||||
}
|
||||
|
||||
/** */
|
||||
getText(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getText();
|
||||
@ -562,12 +551,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 +581,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 +600,7 @@ abstract class Topic extends NodeGraph {
|
||||
}
|
||||
}
|
||||
|
||||
/** */
|
||||
getBorderColor() {
|
||||
getBorderColor(): string {
|
||||
const model = this.getModel();
|
||||
let result = model.getBorderColor();
|
||||
if (!$defined(result)) {
|
||||
@ -622,7 +609,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
_buildTopicShape() {
|
||||
_buildTopicShape(): ElementClass {
|
||||
const groupAttributes = {
|
||||
width: 100,
|
||||
height: 100,
|
||||
@ -660,17 +647,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 +684,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,8 +700,7 @@ abstract class Topic extends NodeGraph {
|
||||
return result;
|
||||
}
|
||||
|
||||
/** */
|
||||
setChildrenShrunken(value) {
|
||||
setChildrenShrunken(value: boolean) {
|
||||
// Update Model ...
|
||||
const model = this.getModel();
|
||||
model.setChildrenShrunken(value);
|
||||
|
27
packages/mindplot/src/components/TopicFactory.ts
Normal file
27
packages/mindplot/src/components/TopicFactory.ts
Normal 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;
|
@ -45,8 +45,8 @@ const TopicFeatureFactory = {
|
||||
* @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
|
||||
* @throws will throw v an error if model is null or undefined
|
||||
* @return {mindplot.n,nmn mn4 r be5qnwwddwsz5on} a new instance of the icon subclass matching the topic feature
|
||||
*/
|
||||
createIcon(topic, model, readOnly) {
|
||||
$assert(topic, 'topic can not be null');
|
||||
|
@ -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;
|
||||
|
||||
|
@ -1,7 +0,0 @@
|
||||
import fadeEffect from './FadeEffect';
|
||||
import shape from './Shape';
|
||||
|
||||
export default {
|
||||
FadeEffect: fadeEffect,
|
||||
Shape: shape,
|
||||
};
|
Loading…
Reference in New Issue
Block a user