Migrate workspace to TS

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);

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.<mindplot.Relationship, mindplot.Topic>} 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];

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 },
   };
   

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;
   }
 }

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);