Fix center option.

packages/mindplot/src/components/Designer.ts

@@ -57,6 +57,7 @@ import Point from '@wisemapping/web2d';
 import { DesignerOptions } from './DesignerOptionsBuilder';
 import MainTopic from './MainTopic';
 import DragTopic from './DragTopic';
+import NodeGraph from './NodeGraph';
 
 class Designer extends Events {
   private _mindmap: Mindmap;
@@ -73,7 +74,7 @@ class Designer extends Events {
   constructor(options: DesignerOptions, divElement: JQuery) {
     $assert(options, 'options must be defined');
     $assert(options.zoom, 'zoom must be defined');
-    $assert(options.size, 'size must be defined');
+    $assert(options.containerSize, 'size must be defined');
     $assert(divElement, 'divElement must be defined');
     super();
 
@@ -83,7 +84,7 @@ class Designer extends Events {
     this._options = options;
 
     // Set full div elem render area ...
-    divElement.css(options.size);
+    divElement.css(options.containerSize);
 
     // Dispatcher manager ...
     const commandContext = new CommandContext(this);
@@ -118,14 +119,12 @@ class Designer extends Events {
 
     this._relPivot = new RelationshipPivot(this._workspace, this);
 
-    // Set editor working area ...
-    this.setViewPort(options.viewPort);
-
     TopicEventDispatcher.configure(this.isReadOnly());
     this._clipboard = [];
 
     // Hack: There are static reference to designer variable. Needs to be reviewed.
     global.designer = this;
+
   }
 
   private _registerWheelEvents(): void {
@@ -213,12 +212,6 @@ class Designer extends Events {
     return dragManager;
   }
 
-  private setViewPort(size: { height: number, width: number }):void {
-    this._workspace.setViewPort(size);
-    const model = this.getModel();
-    this._workspace.setZoom(model.getZoom(), true);
-  }
-
   private _buildNodeGraph(model: NodeModel, readOnly: boolean): MainTopic {
     // Create node graph ...
     const topic = create(model, { readOnly });
@@ -325,7 +318,7 @@ class Designer extends Events {
     this._workspace.setZoom(zoom);
   }
 
-  setZoomToFit(): void {
+  zoomToFit(): void {
     this.getModel().setZoom(1);
     this._workspace.setZoom(1, true);
   }
@@ -415,22 +408,8 @@ class Designer extends Events {
     return this._model;
   }
 
-  shrinkSelectedBranch(): void {
-    const nodes = this.getModel().filterSelectedTopics();
-    if (nodes.length <= 0 || nodes.length !== 1) {
-      // If there are more than one node selected,
-      $notify($msg('ONLY_ONE_TOPIC_MUST_BE_SELECTED_COLLAPSE'));
-      return;
-    }
-    // Execute event ...
-    const topic = nodes[0];
-    if (topic.getType() !== 'CentralTopic') {
-      this._actionDispatcher.shrinkBranch([topic.getId()], !topic.areChildrenShrunken());
-    }
-  }
-
   /** create a NodeModel for the selected node's child and add it via the ActionDispatcher */
-  createChildForSelectedNode():void {
+  private _createChildForSelectedNode(): void {
     const nodes = this.getModel().filterSelectedTopics();
     if (nodes.length <= 0) {
       // If there are more than one node selected,
@@ -516,20 +495,6 @@ class Designer extends Events {
     return childModel;
   }
 
-  addDraggedNode(event, model: NodeModel) {
-    $assert(event, 'event can not be null');
-    $assert(model, 'model can not be null');
-
-    // Position far from the visual area ...
-    model.setPosition(1000, 1000);
-
-    this._actionDispatcher.addTopics([model]);
-    const topic = this.getModel().findTopicById(model.getId());
-
-    // Simulate a mouse down event to start the dragging ...
-    topic.fireEvent('mousedown', event);
-  }
-
   createSiblingForSelectedNode(): void {
     const nodes = this.getModel().filterSelectedTopics();
     if (nodes.length <= 0) {
@@ -547,7 +512,7 @@ class Designer extends Events {
     if (!topic.getOutgoingConnectedTopic()) {
       // Central topic and isolated topics ....
       // Central topic doesn't have siblings ...
-      this.createChildForSelectedNode();
+      this._createChildForSelectedNode();
     } else {
       const parentTopic = topic.getOutgoingConnectedTopic();
       const siblingModel = this._createSiblingModel(topic);
@@ -584,7 +549,7 @@ class Designer extends Events {
     return result;
   }
 
-  showRelPivot(event):void {
+  showRelPivot(event: MouseEvent): void {
     const nodes = this.getModel().filterSelectedTopics();
     if (nodes.length <= 0) {
       // This could not happen ...
@@ -600,8 +565,7 @@ class Designer extends Events {
     this._relPivot.start(nodes[0], pos);
   }
 
-  /** @return {{zoom:Number}} the zoom */
+  getMindmapProperties(): { zoom: number } {
-  getMindmapProperties() {
     const model = this.getModel();
     return { zoom: model.getZoom() };
   }
@@ -610,7 +574,7 @@ class Designer extends Events {
        * @param {mindplot.Mindmap} mindmap
        * @throws will throw an error if mindmapModel is null or undefined
        */
-  loadMap(mindmap: Mindmap) {
+  loadMap(mindmap: Mindmap): void {
     $assert(mindmap, 'mindmapModel can not be null');
     this._mindmap = mindmap;
 
@@ -629,7 +593,7 @@ class Designer extends Events {
     // Building node graph ...
     const branches = mindmap.getBranches();
     branches.forEach((branch) => {
-      const nodeGraph = this.nodeModelToNodeGraph(branch);
+      const nodeGraph = this._nodeModelToTopic(branch);
       nodeGraph.setBranchVisibility(true);
     });
 
@@ -651,27 +615,20 @@ class Designer extends Events {
     return this._mindmap;
   }
 
-  /** */
+  undo(): void {
-  undo() {
-    // @Todo: This is a hack...
     this._actionDispatcher._actionRunner.undo();
   }
 
-  /** */
+  redo(): void {
-  redo() {
     this._actionDispatcher._actionRunner.redo();
   }
 
   /** */
-  isReadOnly() {
+  isReadOnly(): boolean {
     return this._options.readOnly;
   }
 
-  /**
+  private _nodeModelToTopic(nodeModel: NodeModel):Topic {
-       * @param {mindplot.model.NodeModel} nodeModel
-       * @return {mindplot.Topic} the topic (extends mindplot.NodeGraph) created to the model
-       */
-  nodeModelToNodeGraph(nodeModel: NodeModel) {
     $assert(nodeModel, 'Node model can not be null');
     let children = nodeModel.getChildren().slice();
     children = children.sort((a, b) => a.getOrder() - b.getOrder());
@@ -682,7 +639,7 @@ class Designer extends Events {
     this._workspace.append(result);
     children.forEach((child) => {
       if ($defined(child)) {
-        this.nodeModelToNodeGraph(child);
+        this._nodeModelToTopic(child);
       }
     });
     return result;
@@ -694,7 +651,7 @@ class Designer extends Events {
    * @return {mindplot.Relationship} the relationship created to the model
    * @throws will throw an error if model is null or undefined
    */
-  private _relationshipModelToRelationship(model: RelationshipModel) {
+  private _relationshipModelToRelationship(model: RelationshipModel):Relationship {
     $assert(model, 'Node model can not be null');
 
     const result = this._buildRelationshipShape(model);
@@ -715,7 +672,7 @@ class Designer extends Events {
        * @param {mindplot.model.RelationshipModel} model
        * @return {mindplot.Relationship} the relationship added to the mindmap
        */
-  addRelationship(model: RelationshipModel) {
+  addRelationship(model: RelationshipModel):Relationship {
     const mindmap = this.getMindmap();
     mindmap.addRelationship(model);
     return this._relationshipModelToRelationship(model);
@@ -725,7 +682,7 @@ class Designer extends Events {
        * deletes the relationship from the linked topics, DesignerModel, Workspace and Mindmap
        * @param {mindplot.Relationship} rel the relationship to delete
        */
-  deleteRelationship(rel: Relationship) {
+  deleteRelationship(rel: Relationship):void {
     const sourceTopic = rel.getSourceTopic();
     sourceTopic.deleteRelationship(rel);
 
@@ -745,7 +702,7 @@ class Designer extends Events {
        * @return {mindplot.Relationship} the new relationship with events registered
        * @throws will throw an error if the target topic cannot be found
        */
-  _buildRelationshipShape(model: RelationshipModel) {
+  private _buildRelationshipShape(model: RelationshipModel):Relationship {
     const dmodel = this.getModel();
 
     const sourceTopicId = model.getFromNode();

packages/mindplot/src/components/DesignerOptionsBuilder.ts

@@ -17,11 +17,11 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import PersistenceManager from './PersistenceManager';
+import { Size } from './Size';
 
 export type DesignerOptions = {
   zoom: number,
-  viewPort?: { height: number, width: number },
+  containerSize?: Size,
-  size?: { height: number, width: number },
   readOnly?: boolean,
   mapId?: string,
   container: string,
@@ -34,27 +34,21 @@ class OptionsBuilder {
   static buildOptions(options: DesignerOptions): DesignerOptions {
     $assert(options.persistenceManager, 'persistence must be defined');
 
-    let containerSize = options.size;
+    let containerSize = options.containerSize;
-    if (options.size == null) {
+    if (options.containerSize == null) {
       // If it has not been defined, use browser size ...
       containerSize = {
-        width: window.screen.availWidth,
+        width: window.screen.width,
-        height: window.screen.availHeight,
+        height: window.screen.height,
       }
+      console.log("height:"+containerSize.height);
     }
 
-    // Is offset adjustment required 
-    const viewPort = {
-      height: window.innerHeight,
-      width: window.innerWidth,
-    };
-
     const defaultOptions: DesignerOptions = {
       readOnly: false,
       zoom: 0.85,
       saveOnLoad: true,
-      size: containerSize,
+      containerSize: containerSize,
-      viewPort: viewPort,
       container: 'mindplot',
       locale: 'en',
     };

packages/mindplot/src/components/ScreenManager.ts

@@ -19,10 +19,10 @@ import { $assert } from '@wisemapping/core-js';
 import { Point } from '@wisemapping/web2d';
 
 class ScreenManager {
-  _divContainer: JQuery;
+  private _divContainer: JQuery;
-  _padding: { x: number; y: number; };
+  private _padding: { x: number; y: number; };
-  _clickEvents: ((event: UIEvent)=>void)[];
+  private _clickEvents: ((event: UIEvent)=>void)[];
-  _scale: number;
+  private _scale: number;
 
   constructor(divElement: JQuery) {
     $assert(divElement, 'can not be null');
@@ -41,6 +41,16 @@ class ScreenManager {
     });
   }
 
+  /**
+   * Return the current visibile area in the browser.
+   */
+  getVisibleBrowserSize():{width:number,height:number}{
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight - 50 // Todo: Fix toolbar hardcode.
+    }
+  }
+
   setScale(scale: number) {
     $assert(scale, 'Screen scale can not be null');
     this._scale = scale;

packages/mindplot/src/components/Size.ts

@@ -0,0 +1,4 @@
+export type Size = {
+  width: number;
+  height: number;
+};

packages/mindplot/src/components/Workspace.ts

@@ -18,16 +18,16 @@
 import { $assert, $defined } from '@wisemapping/core-js';
 import { Workspace as Workspace2D } from '@wisemapping/web2d';
 import ScreenManager from './ScreenManager';
+import { Size } from './Size';
 
 class Workspace {
   _zoom: number;
   _screenManager: ScreenManager;
   _isReadOnly: boolean;
-  _screenWidth: number;
+  _containerSize: Size;
-  _screenHeight: number;
   _workspace: Workspace2D;
   _eventsEnabled: boolean;
-  _viewPort: { height: number, width: number };
+  private _visibleAreaSize: any;
 
   constructor(screenManager: ScreenManager, zoom: number, isReadOnly: boolean) {
     // Create a suitable container ...
@@ -39,36 +39,48 @@ class Workspace {
     this._isReadOnly = isReadOnly;
 
     const divContainer = screenManager.getContainer();
-    this._screenWidth = Number.parseInt(divContainer.css('width'), 10);
+    this._containerSize = {
-    this._screenHeight = Number.parseInt(divContainer.css('height'), 10);
+      width: Number.parseInt(divContainer.css('width'), 10),
-
+      height: Number.parseInt(divContainer.css('height'), 10)
+    }
     // Initialize web2d workspace.
     const workspace = this._createWorkspace();
     this._workspace = workspace;
 
     // Append to the workspace...
     workspace.addItAsChildTo(divContainer);
-    this.setZoom(zoom, true);
 
     // Register drag events ...
     this._registerDragEvents();
     this._eventsEnabled = true;
+
+    // Readjust if the window is resized ...
+    window.addEventListener('resize', (event) => {
+      this._adjustWorkspace();
+    });
+
+    this.setZoom(zoom, true);
   }
 
-  get isReadOnly() {
+  private _adjustWorkspace(): void {
+    this.setZoom(this._zoom, false);
+  }
+
+  isReadOnly(): boolean {
     return this._isReadOnly;
   }
 
   private _createWorkspace() {
     // Initialize workspace ...
-    const coordOriginX = -(this._screenWidth / 2);
+    const browserVisibleSize = this._screenManager.getVisibleBrowserSize();
-    const coordOriginY = -(this._screenHeight / 2);
+    const coordOriginX = -(browserVisibleSize.width / 2);
+    const coordOriginY = -(browserVisibleSize.height / 2);
 
     const workspaceProfile = {
-      width: `${this._screenWidth}px`,
+      width: `${this._containerSize.width}px`,
-      height: `${this._screenHeight}px`,
+      height: `${this._containerSize.height}px`,
-      coordSizeWidth: this._screenWidth,
+      coordSizeWidth: browserVisibleSize.width,
-      coordSizeHeight: this._screenHeight,
+      coordSizeHeight: browserVisibleSize.height,
       coordOriginX,
       coordOriginY,
       fillColor: 'transparent',
@@ -95,11 +107,11 @@ class Workspace {
     }
   }
 
-  addEvent(type, listener) {
+  addEvent(type: string, listener) {
     this._workspace.addEvent(type, listener);
   }
 
-  removeEvent(type, listener) {
+  removeEvent(type: string, listener) {
     $assert(type, 'type can not be null');
     $assert(listener, 'listener can not be null');
     this._workspace.removeEvent(type, listener);
@@ -112,52 +124,42 @@ class Workspace {
   setZoom(zoom: number, center: boolean = false): void {
     this._zoom = zoom;
     const workspace = this._workspace;
-
+    const newVisibleAreaSize = this._screenManager.getVisibleBrowserSize();
-    // Calculate the original boxview size ...
-    let origWidth = 0;
-    let origHeight = 0
-    if (this._viewPort) {
-      origWidth = this._viewPort.width;
-      origHeight = this._viewPort.height;
-    }
 
     // Update coord scale...
-    const coordWidth = zoom * this._screenWidth;
+    const newCoordWidth =  zoom * this._containerSize.width;
-    const coordHeight = zoom * this._screenHeight;
+    const newCoordHeight = zoom * this._containerSize.height;
-    workspace.setCoordSize(coordWidth, coordHeight);
 
-    // View port coords ...
-    if (this._viewPort) {
-      this._viewPort.width *= zoom;
-      this._viewPort.height *= zoom;
-    }
-
-    // Center topic....
     let coordOriginX: number;
     let coordOriginY: number;
-
     if (center) {
-      if (this._viewPort) {
+      // Center and define a new center of coordinates ...
-        coordOriginX = -(this._viewPort.width / 2);
+      coordOriginX = -(newVisibleAreaSize.width / 2) * zoom;
-        coordOriginY = -(this._viewPort.height / 2);
+      coordOriginY = -(newVisibleAreaSize.height / 2) * zoom;
-      } else {
-        coordOriginX = -(coordWidth / 2);
-        coordOriginY = -(coordHeight / 2);
-      }
-    } else {
-      // Zoom keeping the center in the same place ...
-      // const xPaddinng = (this._viewPort.width - origWidth) / 2;
-      // const yPaddinng = (this._viewPort.height - origHeight) / 2;
 
-      // const coordOrigin = workspace.getCoordOrigin();
+    } else {
-      // coordOriginX = coordOrigin.x - xPaddinng;
-      // coordOriginY = coordOrigin.y - yPaddinng;
-      const coordOrigin = workspace.getCoordOrigin();
-      coordOriginX = coordOrigin.x;
-      coordOriginY = coordOrigin.y;
 
+      const oldCoordOrigin = workspace.getCoordOrigin();
+
+      // Next coordSize is always centered in the middle of the visible area ...
+      const newCoordOriginX = -(newVisibleAreaSize.width / 2) * zoom;
+      const newCoordOriginY = -(newVisibleAreaSize.height / 2) * zoom;
+
+      // Calculate the offset with the original center to ...
+      const oldCenterOriginX = -(this._visibleAreaSize.width / 2) * zoom;
+      const oldCenterOriginY = -(this._visibleAreaSize.height / 2) * zoom;
+
+      const offsetX = oldCoordOrigin.x - oldCenterOriginX;
+      const offsetY = oldCoordOrigin.y - oldCenterOriginY;
+
+      // Update to new coordinate ...
+      coordOriginX = Math.round(newCoordOriginX + offsetX);
+      coordOriginY = Math.round(newCoordOriginY + offsetY);
     }
+
     workspace.setCoordOrigin(coordOriginX, coordOriginY);
+    workspace.setCoordSize(newCoordWidth, newCoordHeight);
+    this._visibleAreaSize = newVisibleAreaSize;
 
     // Update screen.
     this._screenManager.setOffset(coordOriginX, coordOriginY);
@@ -242,10 +244,6 @@ class Workspace {
     };
     screenManager.addEvent('mousedown', mouseDownListener);
   }
-
-  setViewPort(size: { height: number, width: number }) {
-    this._viewPort = size;
-  }
 }
 
 export default Workspace;

packages/mindplot/src/components/widget/Menu.ts

@@ -260,7 +260,7 @@ class Menu extends IMenu {
     Menu._registerTooltip('zoom-minus', $msg('ZOOM_OUT'));
 
     this._addButton('position', false, false, () => {
-      designer.setZoomToFit();
+      designer.zoomToFit();
     });
     Menu._registerTooltip('position', $msg('CENTER_POSITION'));
 

packages/mindplot/test/playground/map-render/html/editor.html

@@ -4,6 +4,7 @@
 
 <head>
     <title>WiseMapping - Editor </title>
+    <meta name="viewport" content="initial-scale=1">
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
     <link rel="icon" href="favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">