Merge branch 'develop' of https://bitbucket.org/wisemapping/wisemapping-frontend into feature/import-freemind-to-wisemapping

packages/editor/src/classes/menu/Menu.ts

@@ -38,7 +38,35 @@ class Menu extends IMenu {
     const widgetsBaseUrl = `${baseUrl}css/widget`;
 
     // Create panels ...
+
     const designerModel = designer.getModel();
+
+    // Common actions ....
+    const backTolist = $('#backToList');
+    backTolist.bind('click', (event) => {
+      event.stopPropagation();
+      window.location.href = '/c/maps/';
+      return false;
+    });
+    Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
+
+    this._addButton('zoom-plus', false, false, () => {
+      designer.zoomIn();
+    });
+    Menu._registerTooltip('zoom-plus', $msg('ZOOM_IN'));
+
+    this._addButton('zoom-minus', false, false, () => {
+      designer.zoomOut();
+    });
+    Menu._registerTooltip('zoom-minus', $msg('ZOOM_OUT'));
+
+    this._addButton('position', false, false, () => {
+      designer.zoomToFit();
+    });
+    Menu._registerTooltip('position', $msg('CENTER_POSITION'));
+
+    // Edition actions ...
+    if (!readOnly) {
       const fontFamilyModel = {
         getValue() {
           const nodes = designerModel.filterSelectedTopics();
@@ -179,25 +207,6 @@ class Menu extends IMenu {
       this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
       Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
 
-    Menu._registerTooltip('export', $msg('EXPORT'));
-
-    Menu._registerTooltip('print', $msg('PRINT'));
-
-    this._addButton('zoom-plus', false, false, () => {
-      designer.zoomIn();
-    });
-    Menu._registerTooltip('zoom-plus', $msg('ZOOM_IN'));
-
-    this._addButton('zoom-minus', false, false, () => {
-      designer.zoomOut();
-    });
-    Menu._registerTooltip('zoom-minus', $msg('ZOOM_OUT'));
-
-    this._addButton('position', false, false, () => {
-      designer.zoomToFit();
-    });
-    Menu._registerTooltip('position', $msg('CENTER_POSITION'));
-
       const undoButton = this._addButton('undoEdition', false, false, () => {
         designer.undo();
       });
@@ -264,6 +273,7 @@ class Menu extends IMenu {
       });
       Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), 'meta+I');
 
+
       if (saveElem) {
         this._addButton('save', false, false,
           () => {
@@ -289,6 +299,11 @@ class Menu extends IMenu {
           );
         }
       }
+    }
+
+    Menu._registerTooltip('export', $msg('EXPORT'));
+
+    Menu._registerTooltip('print', $msg('PRINT'));
 
     const shareElem = $('#shareIt');
     if (shareElem.length !== 0) {
@@ -316,14 +331,6 @@ class Menu extends IMenu {
       Menu._registerTooltip('keyboardShortcuts', $msg('KEYBOARD_SHOTCUTS'));
     }
 
-    const backTolist = $('#backToList');
-    backTolist.bind('click', (event) => {
-      event.stopPropagation();
-      window.location.href = '/c/maps/';
-      return false;
-    });
-    Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
-
     // Account dialog ...
     const accountSettings = $('#account');
     if (accountSettings.length !== 0) {

packages/editor/src/components/toolbar/index.tsx

@@ -55,6 +55,8 @@ export default function Toolbar({
                         </ToolbarButton>
                     </div>
                 )}
+                {(editorMode === 'edition-editor' || editorMode === 'edition-owner' || editorMode === 'showcase') && (
+                    <>
                         <div id="edit" className="buttonContainer">
                             <ToolbarButton id="undoEdition" className="buttonOn">
                                 <img src={UndoSvg} />
@@ -112,6 +114,8 @@ export default function Toolbar({
                             </ToolbarButton>
                         </div>
                         <div id="separator" className="buttonContainer"></div>
+                    </>
+                )}
                 <ToolbarRightContainer>
                     <ToolbarButton
                         id="export"

packages/editor/src/index.tsx

@@ -90,7 +90,7 @@ const Editor = ({
         const result = buildDesigner(buildOptions);
 
         // Register toolbar event ...
-        if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'showcase') {
+        if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'edition-viewer' || options.mode === 'showcase') {
             const menu = new Menu(designer, 'toolbar');
 
             //  If a node has focus, focus can be move to another node using the keys.

packages/mindplot/src/components/ConnectionLine.ts

@@ -97,7 +97,7 @@ class ConnectionLine {
     this._line2d.setVisibility(value, fade);
   }
 
-  isVisible() {
+  isVisible(): boolean {
     return this._line2d.isVisible();
   }
 

packages/mindplot/src/components/Designer.ts

@@ -110,7 +110,7 @@ class Designer extends Events {
 
     // Init Screen manager..
     const screenManager = new ScreenManager(divElement);
-    this._workspace = new Workspace(screenManager, this._model.getZoom(), options.mode === 'viewonly');
+    this._workspace = new Workspace(screenManager, this._model.getZoom(), this.isReadOnly());
 
     // Init layout manager ...
     this._eventBussDispatcher = new EventBusDispatcher();
@@ -623,7 +623,7 @@ class Designer extends Events {
   }
 
   isReadOnly(): boolean {
-    return Boolean(this._options?.mode === 'viewonly');
+    return this._options.mode === 'viewonly' || this._options.mode === 'edition-viewer';
   }
 
   nodeModelToTopic(nodeModel: NodeModel): Topic {

packages/mindplot/src/components/DesignerOptionsBuilder.ts

@@ -42,7 +42,6 @@ class OptionsBuilder {
         width: window.screen.width,
         height: window.screen.height,
       };
-      console.log(`height:${containerSize.height}`);
     }
 
     const defaultOptions: DesignerOptions = {

packages/mindplot/src/components/ImageIcon.js

@@ -206,7 +206,7 @@ ImageIcon.prototype.ICON_FAMILIES = [{
 },
 {
   id: 'appsgoogle',
-  icons: ['appsgoogle_youtube', 'appsgoogle_gmail', 'appsgoogle-maps'],
+  icons: ['appsgoogle_youtube', 'appsgoogle_gmail', 'appsgoogle_maps'],
 },
 {
   id: 'tag',

packages/mindplot/src/components/LocalStorageManager.ts

@@ -23,23 +23,34 @@ class LocalStorageManager extends PersistenceManager {
 
   private forceLoad: boolean;
 
-  constructor(documentUrl: string, forceLoad: boolean) {
+  private readOnly: boolean;
+
+  constructor(documentUrl: string, forceLoad: boolean, readOnly = true) {
     super();
     this.documentUrl = documentUrl;
     this.forceLoad = forceLoad;
+    this.readOnly = readOnly;
   }
 
   saveMapXml(mapId: string, mapDoc: Document): void {
     const mapXml = new XMLSerializer().serializeToString(mapDoc);
+    if (!this.readOnly) {
       localStorage.setItem(`${mapId}-xml`, mapXml);
     }
+    console.log(`Map XML to save => ${this.saveMapXml}`);
+  }
 
   discardChanges(mapId: string) {
+    if (!this.readOnly) {
       localStorage.removeItem(`${mapId}-xml`);
     }
+  }
 
   loadMapDom(mapId: string) {
-    let xml = localStorage.getItem(`${mapId}-xml`);
+    let xml;
+    if (!this.readOnly) {
+      xml = localStorage.getItem(`${mapId}-xml`);
+    }
     if (xml == null || this.forceLoad) {
       $.ajax({
         url: this.documentUrl.replace('{id}', mapId),

packages/mindplot/src/components/Relationship.ts

@@ -20,8 +20,10 @@ import { Arrow, Point, ElementClass } from '@wisemapping/web2d';
 import ConnectionLine from './ConnectionLine';
 import ControlPoint from './ControlPoint';
 import RelationshipModel from './model/RelationshipModel';
+import PositionType from './PositionType';
 import Topic from './Topic';
 import Shape from './util/Shape';
+import Workspace from './Workspace';
 
 class Relationship extends ConnectionLine {
   private _focusShape: ElementClass;
@@ -187,7 +189,7 @@ class Relationship extends ConnectionLine {
     this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
   }
 
-  addToWorkspace(workspace) {
+  addToWorkspace(workspace: Workspace): void {
     workspace.append(this._focusShape);
     workspace.append(this._controlPointsController);
 
@@ -207,11 +209,11 @@ class Relationship extends ConnectionLine {
     this.redraw();
   }
 
-  _initializeControlPointController(): void {
+  private _initializeControlPointController(): void {
     this.setOnFocus(true);
   }
 
-  removeFromWorkspace(workspace) {
+  removeFromWorkspace(workspace: Workspace): void {
     workspace.removeChild(this._focusShape);
     workspace.removeChild(this._controlPointsController);
     if (!workspace.isReadOnly) {
@@ -243,7 +245,7 @@ class Relationship extends ConnectionLine {
     }
   }
 
-  private _refreshShape() {
+  private _refreshShape(): void {
     const sPos = this._line2d.getFrom();
     const tPos = this._line2d.getTo();
     const ctrlPoints = this._line2d.getControlPoints();
@@ -279,19 +281,31 @@ class Relationship extends ConnectionLine {
 
   setVisibility(value: boolean, fade = 0) {
     super.setVisibility(value, fade);
-    if (this._showEndArrow) this._endArrow.setVisibility(this._showEndArrow);
+
+    // If visibility change, remove the on focus.
+    this.setOnFocus(false);
+
+    if (this._showEndArrow) {
+      this._endArrow.setVisibility(this._showEndArrow);
+    }
     this._startArrow.setVisibility(this._showStartArrow && value, fade);
   }
 
-  setOpacity(opacity: number) {
+  setOpacity(opacity: number): void {
     super.setOpacity(opacity);
-    if (this._showEndArrow) this._endArrow.setOpacity(opacity);
+    if (this._showEndArrow) {
-    if (this._showStartArrow) this._startArrow.setOpacity(opacity);
+      this._endArrow.setOpacity(opacity);
+    }
+    if (this._showStartArrow) {
+      this._startArrow.setOpacity(opacity);
+    }
   }
 
   setShowEndArrow(visible: boolean) {
     this._showEndArrow = visible;
-    if (this._isInWorkspace) this.redraw();
+    if (this._isInWorkspace) {
+      this.redraw();
+    }
   }
 
   setShowStartArrow(visible: boolean) {
@@ -315,25 +329,25 @@ class Relationship extends ConnectionLine {
     if (this._endArrow) this._endArrow.setFrom(x, y);
   }
 
-  setSrcControlPoint(control) {
+  setSrcControlPoint(control: PositionType): void {
     this._line2d.setSrcControlPoint(control);
     this._startArrow.setControlPoint(control);
   }
 
-  setDestControlPoint(control) {
+  setDestControlPoint(control: PositionType) {
     this._line2d.setDestControlPoint(control);
     if (this._showEndArrow) this._endArrow.setControlPoint(control);
   }
 
-  getControlPoints() {
+  getControlPoints(): PositionType {
     return this._line2d.getControlPoints();
   }
 
-  isSrcControlPointCustom() {
+  isSrcControlPointCustom(): boolean {
     return this._line2d.isSrcControlPointCustom();
   }
 
-  isDestControlPointCustom() {
+  isDestControlPointCustom(): boolean {
     return this._line2d.isDestControlPointCustom();
   }
 
@@ -345,7 +359,7 @@ class Relationship extends ConnectionLine {
     this._line2d.setIsDestControlPointCustom(isCustom);
   }
 
-  getId() {
+  getId(): number {
     return this._model.getId();
   }
 

packages/mindplot/src/components/Topic.ts

@@ -375,17 +375,14 @@ abstract class Topic extends NodeGraph {
     this.adjustShapes();
   }
 
-  /** */
   addRelationship(relationship: Relationship) {
     this._relationships.push(relationship);
   }
 
-  /** */
   deleteRelationship(relationship: Rect) {
     this._relationships = this._relationships.filter((r) => r !== relationship);
   }
 
-  /** */
   getRelationships(): Relationship[] {
     return this._relationships;
   }
@@ -1093,6 +1090,7 @@ abstract class Topic extends NodeGraph {
         const connector = targetTopic.getShrinkConnector();
         if ($defined(connector)) {
           connector.setVisibility(false);
+          targetTopic.isCollapsed(false);
         }
       }
     }

packages/mindplot/src/components/commands/AddRelationshipCommand.ts

@@ -17,6 +17,7 @@
  */
 import { $assert } from '@wisemapping/core-js';
 import Command from '../Command';
+import CommandContext from '../CommandContext';
 import RelationshipModel from '../model/RelationshipModel';
 
 class AddRelationshipCommand extends Command {
@@ -25,27 +26,20 @@ class AddRelationshipCommand extends Command {
   /**
      * @classdesc This command class handles do/undo of adding a relationship to a topic.
      */
-  constructor(model:RelationshipModel) {
+  constructor(model: RelationshipModel) {
     $assert(model, 'Relationship model can not be null');
 
     super();
     this._model = model;
   }
 
-  /**
+  execute(commandContext: CommandContext) {
-     * Overrides abstract parent method
-     */
-  execute(commandContext) {
     const relationship = commandContext.addRelationship(this._model);
     relationship.setOnFocus(true);
   }
 
-  /**
+  undoExecute(commandContext: CommandContext) {
-     * Overrides abstract parent method
+    const rel = commandContext.findRelationships([this._model.getId()]);
-     * @see {@link mindplot.Command.undoExecute}
-     */
-  undoExecute(commandContext) {
-    const rel = commandContext.findRelationships(this._model.getId());
     commandContext.deleteRelationship(rel[0]);
   }
 }

packages/mindplot/src/components/commands/AddTopicCommand.ts

@@ -38,9 +38,6 @@ class AddTopicCommand extends Command {
     this._parentsIds = parentTopicsId;
   }
 
-  /**
-       * Overrides abstract parent method
-       */
   execute(commandContext: CommandContext) {
     const me = this;
     this._models.forEach((model, index) => {
@@ -68,10 +65,6 @@ class AddTopicCommand extends Command {
     });
   }
 
-  /**
-       * Overrides abstract parent method
-       * @see {@link mindplot.Command.undoExecute}
-       */
   undoExecute(commandContext: CommandContext) {
     // Delete disconnected the nodes. Create a copy of the topics ...
     const clonedModel = [];

packages/mindplot/src/components/commands/ChangeFeatureToTopicCommand.ts

@@ -37,9 +37,6 @@ class ChangeFeatureToTopicCommand extends Command {
     this._attributes = attributes;
   }
 
-  /**
-     * Overrides abstract parent method
-     */
   execute(commandContext: CommandContext) {
     const topic = commandContext.findTopics([this._topicId])[0];
     const feature = topic.findFeatureById(this._featureId);
@@ -49,10 +46,6 @@ class ChangeFeatureToTopicCommand extends Command {
     this._attributes = oldAttributes;
   }
 
-  /**
-     * Overrides abstract parent method
-     * @see {@link mindplot.Command.undoExecute}
-     */
   undoExecute(commandContext: CommandContext) {
     this.execute(commandContext);
   }

packages/mindplot/src/components/commands/DragTopicCommand.ts

@@ -47,9 +47,6 @@ class DragTopicCommand extends Command {
     this._order = order;
   }
 
-  /**
-     * Overrides abstract parent method
-     */
   execute(commandContext: CommandContext): void {
     const topic = commandContext.findTopics([this._topicsId])[0];
     topic.setVisibility(false);

packages/mindplot/src/components/commands/MoveControlPointCommand.ts

@@ -19,19 +19,20 @@ import { $assert, $defined } from '@wisemapping/core-js';
 import { Line } from '@wisemapping/web2d';
 import Command from '../Command';
 import ControlPoint from '../ControlPoint';
+import PositionType from '../PositionType';
 
 class MoveControlPointCommand extends Command {
   private _ctrlPointControler: ControlPoint;
 
   private _line: Line;
 
-  private _controlPoint: any;
+  private _controlPoint: Line;
 
-  private _oldControlPoint: any;
+  private _oldControlPoint: Line;
 
-  private _originalEndPoint: any;
+  private _originalEndPoint: PositionType;
 
-  private _wasCustom: any;
+  private _wasCustom: boolean;
 
   private _endPoint: any;
 
@@ -68,9 +69,6 @@ class MoveControlPointCommand extends Command {
     this._point = point;
   }
 
-  /**
-         * Overrides abstract parent method
-         */
   execute() {
     const model = this._line.getModel();
     switch (this._point) {
@@ -97,10 +95,6 @@ class MoveControlPointCommand extends Command {
     this._line.getLine().updateLine(this._point);
   }
 
-  /**
-         * Overrides abstract parent method
-         * @see {@link mindplot.Command.undoExecute}
-         */
   undoExecute() {
     const line = this._line;
     const model = line.getModel();

packages/mindplot/src/components/persistence/XMLSerializerTango.ts

@@ -106,7 +106,7 @@ class XMLSerializerTango implements XMLMindmapSerializer {
       }
     }
 
-    if (topic.areChildrenShrunken() && topic.getType() !== 'CentralTopic') {
+    if ((topic.areChildrenShrunken() && topic.getChildren().length > 0) && topic.getType() !== 'CentralTopic') {
       parentTopic.setAttribute('shrink', 'true');
     }
 

packages/webapp/src/classes/client/rest-client/index.ts

@@ -615,8 +615,14 @@ export default class RestClient implements Client {
         if (this.persistenceManager) {
             return this.persistenceManager;
         }
+
         let persistence: PersistenceManager;
         if (editorMode === 'edition-owner' || editorMode === 'edition-editor') {
+
+            if (!global.lockSession) {
+                throw new Error(`Session could not be found: global.lockSession: '${global.lockSession}' - global.lockTimestamp: '${global.lockTimestamp}' - ${global.mindmapLocked} - ${global.mindmapLockedMsg}`)
+            }
+
             persistence = new RESTPersistenceManager({
                 documentUrl: '/c/restful/maps/{id}/document',
                 revertUrl: '/c/restful/maps/{id}/history/latest',

packages/webapp/src/components/editor-page/EditorOptionsBuilder.ts

@@ -2,7 +2,7 @@ import { EditorOptions } from '@wisemapping/editor';
 import { EditorRenderMode } from '@wisemapping/mindplot';
 import AppConfig from '../../classes/app-config';
 
-export default class EditorOptionsBulder {
+export default class EditorOptionsBuilder {
     static build(locale: string, mode: EditorRenderMode, hotkeys: boolean): EditorOptions {
 
         let options: EditorOptions = {

packages/webapp/src/components/editor-page/index.tsx

@@ -10,7 +10,7 @@ import { hotkeysEnabled } from '../../redux/editorSlice';
 import ReactGA from 'react-ga';
 import Client from '../../classes/client';
 import { activeInstance, fetchAccount, fetchMapById } from '../../redux/clientSlice';
-import EditorOptionsBulder from './EditorOptionsBuider';
+import EditorOptionsBuilder from './EditorOptionsBuilder';
 
 export type EditorPropsType = {
     isTryMode: boolean;
@@ -23,6 +23,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
     const client: Client = useSelector(activeInstance);
 
     useEffect(() => {
+        document.title = `${global.mapTitle ? global.mapTitle : 'unknown'} | WiseMapping `;
         ReactGA.pageview(window.location.pathname + window.location.search);
     }, []);
 
@@ -36,16 +37,16 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
             const fetchResult = fetchMapById(mapId);
             if (!fetchResult.isLoading) {
                 if (fetchResult.error) {
-                    throw new Error(`User coild not be loaded: ${JSON.stringify(fetchResult.error)}`);
+                    throw new Error(`Map information could not be loaded: ${JSON.stringify(fetchResult)}`);
                 }
-                result = fetchResult.map.role === 'owner' ? 'edition-owner' : 'edition-editor';
+                result = `edition-${fetchResult?.map?.role}`;
             }
         }
         return result;
     }
 
     // What is the role ?
-    const mapId = EditorOptionsBulder.loadMapId();
+    const mapId = EditorOptionsBuilder.loadMapId();
     const mode = findEditorMode(isTryMode, mapId);
 
     // Account settings can be null and editor cannot be initilized multiple times. This creates problems
@@ -55,7 +56,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
 
     let options, persistence: PersistenceManager;
     if (loadCompleted) {
-        options = EditorOptionsBulder.build(userLocale.code, mode, hotkey);
+        options = EditorOptionsBuilder.build(userLocale.code, mode, hotkey);
         persistence = client.buildPersistenceManager(mode);
     }
 

packages/webapp/src/redux/clientSlice.ts

@@ -47,9 +47,21 @@ export const fetchMapById = (id: number): MapLoadResult => {
         return client.fetchAllMaps();
     });
 
-    const result = data?.find((m) => m.id == id);
+    // If the map can not be loaded, create an error object.
-    const map = result || null;
+    let map: MapInfo;
-    return { isLoading: isLoading, error: error, map: map };
+    let errorMsg: ErrorInfo = error;
+    if (!isLoading) {
+        // Sanitize error structure ...
+        if (errorMsg) {
+            errorMsg = Object.keys(error).length !== 0 ? error : null;
+        }
+        //  Seach for object...
+        map = data?.find((m) => m.id == id);
+        if (map === null && !errorMsg) {
+            errorMsg = { msg: `Map with id ${id} could not be found. Please, reflesh the page` }
+        }
+    }
+    return { isLoading: isLoading, error: errorMsg, map: map };
 };
 
 export const fetchAccount = (): AccountInfo | undefined => {