Feature to TS

This commit is contained in:
Paulo Gustavo Veiga 2022-02-22 19:12:04 -08:00
parent a75962373c
commit 365518ca2d
6 changed files with 82 additions and 102 deletions

View File

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

View File

@ -17,36 +17,43 @@
*/
import { $assert } from '@wisemapping/core-js';
import { Image } from '@wisemapping/web2d';
import IconGroup from './IconGroup';
import { Point } from '@wisemapping/web2d';
import SizeType from './SizeType';
import FeatureModel from './model/FeatureModel';
class Icon {
constructor(url) {
abstract class Icon {
protected _image: Image;
protected _group: IconGroup;
constructor(url: string) {
$assert(url, 'topic can not be null');
this._image = new Image();
this._image.setHref(url);
this._image.setSize(Icon.SIZE, Icon.SIZE);
}
getImage() {
getImage(): Image {
return this._image;
}
setGroup(group) {
setGroup(group: IconGroup) {
this._group = group;
}
getGroup() {
getGroup(): IconGroup {
return this._group;
}
getSize() {
getSize(): SizeType {
return this._image.getSize();
}
getPosition() {
getPosition(): Point {
return this._image.getPosition();
}
addEvent(type, fnc) {
addEvent(type: string, fnc): void {
this._image.addEvent(type, fnc);
}
@ -54,8 +61,10 @@ class Icon {
remove() {
throw new Error('Unsupported operation');
}
abstract getModel(): FeatureModel;
static SIZE = 90;
}
Icon.SIZE = 90;
export default Icon;

View File

@ -22,21 +22,31 @@ import {
} from '@wisemapping/core-js';
import {
Group,
ElementClass,
} 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();
const ORDER_BY_TYPE = new Map<string, number>();
ORDER_BY_TYPE.set('icon', 0);
ORDER_BY_TYPE.set('note', 1);
ORDER_BY_TYPE.set('link', 2);
class IconGroup {
constructor(topicId, iconSize) {
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');
this._topicId = topicId;
this._icons = [];
this._group = new Group({
width: 0,
@ -46,34 +56,31 @@ class IconGroup {
coordSizeWidth: 0,
coordSizeHeight: 100,
});
this._removeTip = new IconGroupRemoveTip(this._group, topicId);
this._removeTip = new IconGroupRemoveTip(this._group);
this.seIconSize(iconSize, iconSize);
this._registerListeners();
}
/** */
setPosition(x, y) {
setPosition(x: number, y: number): void {
this._group.setPosition(x, y);
}
/** */
getPosition() {
getPosition(): Point {
return this._group.getPosition();
}
/** */
getNativeElement() {
getNativeElement(): ElementClass {
return this._group;
}
/** */
getSize() {
getSize(): SizeType {
return this._group.getSize();
}
/** */
seIconSize(width, height) {
seIconSize(width: number, height: number) {
this._iconSize = {
width,
height,
@ -81,12 +88,7 @@ class IconGroup {
this._resize(this._icons.length);
}
/**
* @param icon the icon to be added to the icon group
* @param {Boolean} remove
* @throws will throw an error if icon is not defined
*/
addIcon(icon, remove) {
addIcon(icon: Icon, remove: boolean) {
$defined(icon, 'icon is not defined');
// Order could have change, need to re-add all.
@ -113,7 +115,7 @@ class IconGroup {
}
}
_findIconFromModel(iconModel) {
private _findIconFromModel(iconModel: FeatureModel) {
let result = null;
this._icons.forEach((icon) => {
@ -132,14 +134,14 @@ class IconGroup {
}
/** */
removeIconByModel(featureModel) {
removeIconByModel(featureModel: FeatureModel) {
$assert(featureModel, 'featureModel can not be null');
const icon = this._findIconFromModel(featureModel);
this._removeIcon(icon);
}
_removeIcon(icon) {
private _removeIcon(icon: Icon) {
$assert(icon, 'icon can not be null');
this._removeTip.close(0);
@ -156,11 +158,11 @@ class IconGroup {
}
/** */
moveToFront() {
moveToFront(): void {
this._group.moveToFront();
}
_registerListeners() {
private _registerListeners() {
this._group.addEvent('click', (event) => {
// Avoid node creation ...
event.stopPropagation();
@ -171,21 +173,23 @@ class IconGroup {
});
}
_resize(iconsLength) {
private _resize(iconsLength: number) {
this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
this._group.setCoordSize(iconsLength * iconSize, iconSize);
}
_positionIcon(icon, order) {
private _positionIcon(icon: Icon, order: number) {
const iconSize = Icon.SIZE + IconGroup.ICON_PADDING * 2;
icon.getImage().setPosition(
iconSize * order + IconGroup.ICON_PADDING,
IconGroup.ICON_PADDING,
);
}
static ICON_PADDING = 5;
}
IconGroup.ICON_PADDING = 5;
export default IconGroup;

View File

@ -20,9 +20,17 @@ import $ from 'jquery';
import Icon from './Icon';
import LinkIconTooltip from './widget/LinkIconTooltip';
import LinksImage from '../../assets/icons/links.svg';
import LinkModel from './model/LinkModel';
import Topic from './Topic';
import FeatureModel from './model/FeatureModel';
class LinkIcon extends Icon {
constructor(topic, linkModel, readOnly) {
private _linksModel: FeatureModel;
private _topic: Topic;
private _readOnly: boolean;
private _tip: LinkIconTooltip;
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
$assert(topic, 'topic can not be null');
$assert(linkModel, 'linkModel can not be null');
@ -34,7 +42,7 @@ class LinkIcon extends Icon {
this._registerEvents();
}
_registerEvents() {
private _registerEvents() {
this._image.setCursor('pointer');
this._tip = new LinkIconTooltip(this);
@ -62,10 +70,11 @@ class LinkIcon extends Icon {
});
}
getModel() {
getModel(): FeatureModel {
return this._linksModel;
}
static IMAGE_URL = LinksImage;
}
LinkIcon.IMAGE_URL = LinksImage;
export default LinkIcon;

View File

@ -21,9 +21,17 @@ import { $msg } from './Messages';
import Icon from './Icon';
import FloatingTip from './widget/FloatingTip';
import NotesImage from '../../assets/icons/notes.svg';
import Topic from './Topic';
import NoteModel from './model/NoteModel';
import FeatureModel from './model/FeatureModel';
class NoteIcon extends Icon {
constructor(topic, noteModel, readOnly) {
private _linksModel: NoteModel;
private _topic: Topic;
private _readOnly: boolean;
private _tip: FloatingTip;
constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
$assert(topic, 'topic can not be null');
super(NoteIcon.IMAGE_URL);
@ -34,7 +42,7 @@ class NoteIcon extends Icon {
this._registerEvents();
}
_registerEvents() {
private _registerEvents(): void {
this._image.setCursor('pointer');
const me = this;
@ -58,7 +66,7 @@ class NoteIcon extends Icon {
});
}
_buildTooltipContent() {
private _buildTooltipContent(): JQuery {
if ($('body').find('#textPopoverNote').length === 1) {
const text = $('body').find('#textPopoverNote');
text.text(this._linksModel.getText());
@ -75,11 +83,12 @@ class NoteIcon extends Icon {
return result;
}
getModel() {
getModel(): FeatureModel {
return this._linksModel;
}
static IMAGE_URL = NotesImage;
}
NoteIcon.IMAGE_URL = NotesImage;
export default NoteIcon;

View File

@ -17,8 +17,6 @@
*/
import { $assert } from '@wisemapping/core-js';
import { Point } from '@wisemapping/web2d';
import Icon from './Icon';
import Topic from './Topic';
class ScreenManager {
private _divContainer: JQuery;
@ -84,59 +82,6 @@ class ScreenManager {
}
}
private _getElementPosition(elem: Topic) {
// Retrieve current element position.
const elementPosition = elem.getPosition();
let { x } = elementPosition;
let { y } = elementPosition;
// Add workspace offset.
x -= this._padding.x;
y -= this._padding.y;
// Scale coordinate in order to be relative to the workspace. That's coord/size;
x /= this._scale;
y /= this._scale;
// Remove decimal part..
return { x, y };
}
getWorkspaceIconPosition(e: Icon) {
// Retrieve current icon position.
const image = e.getImage();
const elementPosition = image.getPosition();
const imageSize = e.getSize();
// Add group offset
const iconGroup = e.getGroup();
const group = iconGroup.getNativeElement();
const coordOrigin = group.getCoordOrigin();
const groupSize = group.getSize();
const coordSize = group.getCoordSize();
const scale = {
x: coordSize.width / parseInt(groupSize.width, 10),
y: coordSize.height / parseInt(groupSize.height, 10),
};
let x = (elementPosition.x - coordOrigin.x - parseInt(imageSize.width, 10) / 2) / scale.x;
let y = (elementPosition.y - coordOrigin.y - parseInt(imageSize.height, 10) / 2) / scale.y;
// Retrieve iconGroup Position
const groupPosition = iconGroup.getPosition();
x += groupPosition.x;
y += groupPosition.y;
// Retrieve topic Position
const topic = iconGroup.getTopic();
const topicPosition = this._getElementPosition(topic);
topicPosition.x -= parseInt(topic.getSize().width, 10) / 2;
// Remove decimal part..
return { x: x + topicPosition.x, y: y + topicPosition.y };
}
getWorkspaceMousePosition(event: MouseEvent) {
// Retrieve current mouse position.
let x = event.clientX;