mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Feature to TS
This commit is contained in:
parent
a75962373c
commit
365518ca2d
4
packages/mindplot/src/@types/custom.d.ts
vendored
Normal file
4
packages/mindplot/src/@types/custom.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
declare module "*.svg" {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user