From 1bebfa3dff3633dfec8d7a6238afa0a112525c7d Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 8 Jan 2022 17:08:26 -0800 Subject: [PATCH] Migrate workspace to TS --- packages/mindplot/src/components/Designer.ts | 2 +- .../mindplot/src/components/DesignerModel.ts | 18 ++++++------ .../src/components/DesignerOptions.ts | 2 +- .../components/{Workspace.js => Workspace.ts} | 28 +++++++++++++------ .../mindplot/src/components/widget/Menu.ts | 2 +- 5 files changed, 31 insertions(+), 21 deletions(-) rename packages/mindplot/src/components/{Workspace.js => Workspace.ts} (90%) diff --git a/packages/mindplot/src/components/Designer.ts b/packages/mindplot/src/components/Designer.ts index 18a783fc..8193428e 100644 --- a/packages/mindplot/src/components/Designer.ts +++ b/packages/mindplot/src/components/Designer.ts @@ -222,7 +222,7 @@ class Designer extends Events { * @param {{width:Number, height:Number}} size * sets width and height of the workspace */ - setViewPort(size) { + setViewPort(size: { height: number, width: number }) { this._workspace.setViewPort(size); const model = this.getModel(); this._workspace.setZoom(model.getZoom(), true); diff --git a/packages/mindplot/src/components/DesignerModel.ts b/packages/mindplot/src/components/DesignerModel.ts index f66ea805..e965c714 100644 --- a/packages/mindplot/src/components/DesignerModel.ts +++ b/packages/mindplot/src/components/DesignerModel.ts @@ -40,22 +40,22 @@ class DesignerModel extends Events { } /** @param {Number} zoom number between 0.3 and 1.9 to set the zoom to */ - setZoom(zoom:number) { + setZoom(zoom: number) { this._zoom = zoom; } /** @return {@link mindplot.Topic[]} all topics */ - getTopics() { + getTopics(): Topic[] { return this._topics; } /** @return {mindplot.Relationship[]} all relationships */ - getRelationships() { + getRelationships(): Relationship[] { return this._relationships; } /** @return {mindplot.CentralTopic} the central topic */ - getCentralTopic() { + getCentralTopic(): Topic { const topics = this.getTopics(); return topics[0]; } @@ -74,7 +74,7 @@ class DesignerModel extends Events { /** * @return {mindplot.Relationship[]} selected relationships */ - filterSelectedRelationships() { + filterSelectedRelationships(): Relationship[] { const result = []; for (let i = 0; i < this._relationships.length; i++) { if (this._relationships[i].isOnFocus()) { @@ -87,7 +87,7 @@ class DesignerModel extends Events { /** * @return {Array.} all topics and relationships */ - getEntities() { + getEntities(): (Relationship | Topic)[] { let result = [].concat(this._topics); result = result.concat(this._relationships); return result; @@ -117,7 +117,7 @@ class DesignerModel extends Events { * @throws will throw an error if topic is null or undefined * @throws will throw an error if the topic's id is not a number */ - addTopic(topic) { + addTopic(topic: Topic): void { $assert(topic, 'topic can not be null'); $assert(typeof topic.getId() === 'number', `id is not a number:${topic.getId()}`); this._topics.push(topic); @@ -128,7 +128,7 @@ class DesignerModel extends Events { * @param {mindplot.Relationship} rel the relationship to add * @throws will throw an error if rel is null or undefined */ - addRelationship(rel) { + addRelationship(rel: Relationship): void { $assert(rel, 'rel can not be null'); this._relationships.push(rel); } @@ -163,7 +163,7 @@ class DesignerModel extends Events { * @param {String} id the id of the topic to be retrieved * @return {mindplot.Topic} the topic with the respective id */ - findTopicById(id:Number):Topic { + findTopicById(id: Number): Topic { let result = null; for (let i = 0; i < this._topics.length; i++) { const topic = this._topics[i]; diff --git a/packages/mindplot/src/components/DesignerOptions.ts b/packages/mindplot/src/components/DesignerOptions.ts index ad2907c1..588e3bcc 100644 --- a/packages/mindplot/src/components/DesignerOptions.ts +++ b/packages/mindplot/src/components/DesignerOptions.ts @@ -3,6 +3,6 @@ export type DesignerOptions = { zoom: number, size: { height: number, witdh: number }, readOnly: boolean, - viewPort: { height: number, witdh: number }, + viewPort: { height: number, width: number }, }; \ No newline at end of file diff --git a/packages/mindplot/src/components/Workspace.js b/packages/mindplot/src/components/Workspace.ts similarity index 90% rename from packages/mindplot/src/components/Workspace.js rename to packages/mindplot/src/components/Workspace.ts index 88a940fc..24098cdb 100644 --- a/packages/mindplot/src/components/Workspace.js +++ b/packages/mindplot/src/components/Workspace.ts @@ -17,9 +17,19 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import { Workspace as Workspace2D } from '@wisemapping/web2d'; +import ScreenManager from './ScreenManager'; class Workspace { - constructor(screenManager, zoom, isReadOnly) { + _zoom: number; + _screenManager: ScreenManager; + _isReadOnly: boolean; + _screenWidth: number; + _screenHeight: number; + _workspace: Workspace2D; + _eventsEnabled: boolean; + _viewPort: { height: number, width: number }; + + constructor(screenManager: ScreenManager, zoom: number, isReadOnly: boolean) { // Create a suitable container ... $assert(screenManager, 'Div container can not be null'); $assert(zoom, 'zoom container can not be null'); @@ -99,7 +109,7 @@ class Workspace { return this._workspace.getCoordSize(); } - setZoom(zoom, center) { + setZoom(zoom: number, center: boolean = false) { this._zoom = zoom; const workspace = this._workspace; @@ -128,8 +138,8 @@ class Workspace { } } else { const coordOrigin = workspace.getCoordOrigin(); - coordOriginX = coordOrigin.x; - coordOriginY = coordOrigin.y; + coordOriginX = coordOrigin.x / 2; + coordOriginY = coordOrigin.y / 2; } workspace.setCoordOrigin(coordOriginX, coordOriginY); @@ -142,15 +152,15 @@ class Workspace { this._screenManager.fireEvent('update'); } - getScreenManager() { + getScreenManager(): ScreenManager { return this._screenManager; } - enableWorkspaceEvents(value) { + enableWorkspaceEvents(value: boolean) { this._eventsEnabled = value; } - isWorkspaceEventsEnabled() { + isWorkspaceEventsEnabled(): boolean { return this._eventsEnabled; } @@ -158,7 +168,7 @@ class Workspace { return this._workspace.getSVGElement(); } - _registerDragEvents() { + private _registerDragEvents() { const workspace = this._workspace; const screenManager = this._screenManager; const mWorkspace = this; @@ -218,7 +228,7 @@ class Workspace { screenManager.addEvent('mousedown', mouseDownListener); } - setViewPort(size) { + setViewPort(size:{ height: number, width: number }) { this._viewPort = size; } } diff --git a/packages/mindplot/src/components/widget/Menu.ts b/packages/mindplot/src/components/widget/Menu.ts index 5bc96efd..b530a6d5 100644 --- a/packages/mindplot/src/components/widget/Menu.ts +++ b/packages/mindplot/src/components/widget/Menu.ts @@ -223,7 +223,7 @@ class Menu extends IMenu { .then((url: string) => { // Create hidden anchor to force download ... const anchor: HTMLAnchorElement = document.createElement('a'); - anchor.style.display = 'none'; + anchor.style.display = 'display: none'; anchor.download = `${mapId}.${formatExtension}`; anchor.href = url; document.body.appendChild(anchor);