diff --git a/packages/mindplot/src/components/IconGroup.ts b/packages/mindplot/src/components/IconGroup.ts index 15e48340..b7e0e21d 100644 --- a/packages/mindplot/src/components/IconGroup.ts +++ b/packages/mindplot/src/components/IconGroup.ts @@ -31,7 +31,7 @@ ORDER_BY_TYPE.set('link', 2); class IconGroup { private _icons: ImageIcon[]; - private _group; + private _group: Group; private _removeTip: IconGroupRemoveTip; diff --git a/packages/mindplot/src/components/IconGroupRemoveTip.js b/packages/mindplot/src/components/IconGroupRemoveTip.ts similarity index 69% rename from packages/mindplot/src/components/IconGroupRemoveTip.js rename to packages/mindplot/src/components/IconGroupRemoveTip.ts index 5b07664c..e186cc79 100644 --- a/packages/mindplot/src/components/IconGroupRemoveTip.js +++ b/packages/mindplot/src/components/IconGroupRemoveTip.ts @@ -1,24 +1,22 @@ -import { $assert, $defined } from '@wisemapping/core-js'; +import { $assert } from '@wisemapping/core-js'; import { Group, Rect, Line } from '@wisemapping/web2d'; +import ImageIcon from './ImageIcon'; -export default class RemoveTip { - /** @lends IconGroup.RemoveTip */ - /** - * @classdesc inner class of IconGroup - * @constructs - * @param container - */ - constructor(container) { - $assert(container, 'group can not be null'); - this._fadeElem = container; +class IconGroupRemoveTip { + private _group: Group; + + private _activeIcon: ImageIcon | null; + + private _widget: Group; + + private _closeTimeoutId; + + constructor(group: Group) { + $assert(group, 'group can not be null'); + this._group = group; } - /** - * @param topicId - * @param icon - * @throws will throw an error if icon is null or undefined - */ - show(topicId, icon) { + show(topicId: number, icon: ImageIcon) { $assert(icon, 'icon can not be null'); // Nothing to do ... @@ -48,50 +46,43 @@ export default class RemoveTip { }); widget.setPosition(pos.x + 80, pos.y - 50); - this._fadeElem.append(widget); + this._group.append(widget); // Setup current element ... this._activeIcon = icon; this._widget = widget; - } else { + } else if (this._closeTimeoutId) { clearTimeout(this._closeTimeoutId); } } - /** */ hide() { this.close(200); } - /** - * @param delay - */ - close(delay) { - // This is not ok, trying to close the same dialog twice ? + close(delay: number) { if (this._closeTimeoutId) { clearTimeout(this._closeTimeoutId); } - const me = this; if (this._activeIcon) { const widget = this._widget; - const close = function close() { - me._activeIcon = null; - me._fadeElem.removeChild(widget); - me._widget = null; - me._closeTimeoutId = null; + const close = () => { + this._activeIcon = null; + this._group.removeChild(widget); + this._widget = null; + this._closeTimeoutId = null; }; - if (!$defined(delay) || delay === 0) { - close(); - } else { + if (delay > 0) { this._closeTimeoutId = setTimeout(close, delay); + } else { + close(); } } } - // eslint-disable-next-line class-methods-use-this - _buildWeb2d() { + private _buildWeb2d(): Group { const result = new Group({ width: 10, height: 10, @@ -144,23 +135,19 @@ export default class RemoveTip { return result; } - /** - * @param topicId - * @param icon - */ - decorate(topicId, icon) { - const me = this; - + decorate(topicId: number, icon) { if (!icon.__remove) { icon.addEvent('mouseover', () => { - me.show(topicId, icon); + this.show(topicId, icon); }); icon.addEvent('mouseout', () => { - me.hide(); + this.hide(); }); // eslint-disable-next-line no-param-reassign icon.__remove = true; } } } + +export default IconGroupRemoveTip; diff --git a/packages/mindplot/src/components/RelationshipPivot.ts b/packages/mindplot/src/components/RelationshipPivot.ts index 9067af26..24fad98a 100644 --- a/packages/mindplot/src/components/RelationshipPivot.ts +++ b/packages/mindplot/src/components/RelationshipPivot.ts @@ -145,16 +145,17 @@ class RelationshipPivot { private _calculateFromPosition(toPosition: Point): Point { // Calculate origin position ... + const sourceTopic = this._sourceTopic!; let sourcePosition = this._sourceTopic!.getPosition(); - if (this._sourceTopic!.getType() === 'CentralTopic') { - sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition); + if (sourceTopic!.getType() === 'CentralTopic') { + sourcePosition = Shape.workoutIncomingConnectionPoint(sourceTopic, toPosition); } const controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition); - const point = new Point( - parseInt(controlPoint[0].x, 10) + sourcePosition.x, - parseInt(controlPoint[0].y, 10) + sourcePosition.y, - ); - return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, point); + const point = { + x: controlPoint[0].x + sourcePosition.x, + y: controlPoint[0].y + sourcePosition.y, + }; + return Shape.calculateRelationShipPointCoordinates(sourceTopic, point); } private _connectOnFocus(event: string, targetTopic: Topic): void { diff --git a/packages/mindplot/src/components/util/FadeEffect.js b/packages/mindplot/src/components/util/FadeEffect.js deleted file mode 100644 index 390725b0..00000000 --- a/packages/mindplot/src/components/util/FadeEffect.js +++ /dev/null @@ -1,42 +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. - */ - -// FIXME: this Class should be reimplemented -import Events from '../Events'; - -class FadeEffect extends Events { - constructor(elements, isVisible) { - super(); - this._isVisible = isVisible; - this._element = elements; - } - - /** */ - start() { - const visible = this._isVisible; - this._element.forEach((elem) => { - if (elem) { - elem.setVisibility(visible); - } - }); - this._isVisible = !visible; - this.fireEvent('complete'); - } -} - -export default FadeEffect; diff --git a/packages/mindplot/src/components/util/Shape.js b/packages/mindplot/src/components/util/Shape.ts similarity index 79% rename from packages/mindplot/src/components/util/Shape.js rename to packages/mindplot/src/components/util/Shape.ts index 20ba4efa..974fd66b 100644 --- a/packages/mindplot/src/components/util/Shape.js +++ b/packages/mindplot/src/components/util/Shape.ts @@ -19,46 +19,56 @@ import { Point } from '@wisemapping/web2d'; import { $assert, $defined } from '@wisemapping/core-js'; import { TopicShape } from '../model/INodeModel'; import TopicConfig from '../TopicConfig'; +import PositionType from '../PositionType'; +import SizeType from '../SizeType'; +import Topic from '../Topic'; -const Shape = { - isAtRight(sourcePoint, targetPoint) { +class Shape { + static isAtRight(sourcePoint: PositionType, targetPoint: PositionType): boolean { $assert(sourcePoint, 'Source can not be null'); $assert(targetPoint, 'Target can not be null'); return sourcePoint.x < targetPoint.x; - }, + } - calculateRectConnectionPoint(rectCenterPoint, rectSize, isAtRight) { + static calculateRectConnectionPoint( + rectCenterPoint: PositionType, + rectSize: SizeType, + isAtRight: boolean, + ): PositionType { $assert(rectCenterPoint, 'rectCenterPoint can not be null'); $assert(rectSize, 'rectSize can not be null'); $assert($defined(isAtRight), 'isRight can not be null'); // This is used fix a minor difference ...z const correctionHardcode = 2; - let result; + let result: PositionType; if (isAtRight) { - result = new Point( - rectCenterPoint.x - rectSize.width / 2 + correctionHardcode, - rectCenterPoint.y, - ); + result = { + x: rectCenterPoint.x - rectSize.width / 2 + correctionHardcode, + y: rectCenterPoint.y, + }; } else { - result = new Point( - parseFloat(rectCenterPoint.x) + rectSize.width / 2 - correctionHardcode, - rectCenterPoint.y, - ); + result = { + x: rectCenterPoint.x + rectSize.width / 2 - correctionHardcode, + y: rectCenterPoint.y, + }; } return result; - }, + } - calculateRelationShipPointCoordinates(topic, controlPoint) { + static calculateRelationShipPointCoordinates( + topic: Topic, + controlPoint: PositionType, + ): PositionType { const size = topic.getSize(); const position = topic.getPosition(); const yGap = position.y - controlPoint.y; const xGap = position.x - controlPoint.x; const disable = Math.abs(yGap) < 5 || Math.abs(xGap) < 5 || Math.abs(yGap - xGap) < 5; - let y; - let x; + let y: number; + let x: number; const gap = 5; if (controlPoint.y > position.y + size.height / 2) { y = position.y + size.height / 2 + gap; @@ -84,10 +94,13 @@ const Shape = { y = !disable ? position.y - (yGap / xGap) * (position.x - x) : position.y; } - return new Point(x, y); - }, + return { x, y }; + } - calculateDefaultControlPoints(srcPos, tarPos) { + static calculateDefaultControlPoints( + srcPos: PositionType, + tarPos: PositionType, + ): [PositionType, PositionType] { const y = srcPos.y - tarPos.y; const x = srcPos.x - tarPos.x; const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0. @@ -105,9 +118,9 @@ const Shape = { const y2 = m * (x2 - tarPos.x) + tarPos.y; return [new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-tarPos.x + x2, -tarPos.y + y2)]; - }, + } - workoutIncomingConnectionPoint(targetNode, sourcePosition) { + static workoutIncomingConnectionPoint(targetNode: Topic, sourcePosition: PositionType) { $assert(sourcePosition, 'sourcePoint can not be null'); const pos = targetNode.getPosition(); const size = targetNode.getSize(); @@ -129,7 +142,7 @@ const Shape = { result.x = Math.ceil(result.x); result.y = Math.ceil(result.y); return result; - }, -}; + } +} export default Shape;