From d8cdb5055848d9ee8687bd08a2c4ce83a40f8bfa Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Wed, 9 Mar 2022 11:39:02 -0800
Subject: [PATCH] Fix clean up code.

---
 packages/editor/src/classes/menu/Menu.ts      | 468 +++++++++---------
 .../editor/src/components/toolbar/index.tsx   | 118 ++---
 2 files changed, 290 insertions(+), 296 deletions(-)

diff --git a/packages/editor/src/classes/menu/Menu.ts b/packages/editor/src/classes/menu/Menu.ts
index 0cd63062..aa821462 100644
--- a/packages/editor/src/classes/menu/Menu.ts
+++ b/packages/editor/src/classes/menu/Menu.ts
@@ -38,258 +38,256 @@ class Menu extends IMenu {
     const widgetsBaseUrl = `${baseUrl}css/widget`;
 
     // Create panels ...
+
     const designerModel = designer.getModel();
-    const fontFamilyModel = {
-      getValue() {
-        const nodes = designerModel.filterSelectedTopics();
-        let result = null;
-        for (let i = 0; i < nodes.length; i++) {
-          const fontFamily = nodes[i].getFontFamily();
-          if (result != null && result !== fontFamily) {
-            result = null;
-            break;
+    const backTolist = $('#backToList');
+    backTolist.bind('click', (event) => {
+      event.stopPropagation();
+      window.location.href = '/c/maps/';
+      return false;
+    });
+    Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
+
+
+    if (!readOnly) {
+      const fontFamilyModel = {
+        getValue() {
+          const nodes = designerModel.filterSelectedTopics();
+          let result = null;
+          for (let i = 0; i < nodes.length; i++) {
+            const fontFamily = nodes[i].getFontFamily();
+            if (result != null && result !== fontFamily) {
+              result = null;
+              break;
+            }
+            result = fontFamily;
           }
-          result = fontFamily;
-        }
-        return result;
-      },
+          return result;
+        },
 
-      setValue(value: string) {
-        designer.changeFontFamily(value);
-      },
-    };
-    this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
-    Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
+        setValue(value: string) {
+          designer.changeFontFamily(value);
+        },
+      };
+      this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
+      Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
 
-    const fontSizeModel = {
-      getValue(): number {
-        const nodes = designerModel.filterSelectedTopics();
+      const fontSizeModel = {
+        getValue(): number {
+          const nodes = designerModel.filterSelectedTopics();
 
-        let result = null;
-        for (let i = 0; i < nodes.length; i++) {
-          const fontSize = nodes[i].getFontSize();
-          if (result != null && result !== fontSize) {
-            result = null;
-            break;
+          let result = null;
+          for (let i = 0; i < nodes.length; i++) {
+            const fontSize = nodes[i].getFontSize();
+            if (result != null && result !== fontSize) {
+              result = null;
+              break;
+            }
+            result = fontSize;
           }
-          result = fontSize;
-        }
-        return result;
-      },
-      setValue(value: number) {
-        designer.changeFontSize(value);
-      },
-    };
-    this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
-    Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
+          return result;
+        },
+        setValue(value: number) {
+          designer.changeFontSize(value);
+        },
+      };
+      this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
+      Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
 
-    const topicShapeModel = {
-      getValue() {
-        const nodes = designerModel.filterSelectedTopics();
-        let result = null;
-        for (let i = 0; i < nodes.length; i++) {
-          const shapeType = nodes[i].getShapeType();
-          if (result != null && result !== shapeType) {
-            result = null;
-            break;
+      const topicShapeModel = {
+        getValue() {
+          const nodes = designerModel.filterSelectedTopics();
+          let result = null;
+          for (let i = 0; i < nodes.length; i++) {
+            const shapeType = nodes[i].getShapeType();
+            if (result != null && result !== shapeType) {
+              result = null;
+              break;
+            }
+            result = shapeType;
           }
-          result = shapeType;
-        }
-        return result;
-      },
-      setValue(value: string) {
-        designer.changeTopicShape(value);
-      },
-    };
-    this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
-    Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
+          return result;
+        },
+        setValue(value: string) {
+          designer.changeTopicShape(value);
+        },
+      };
+      this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
+      Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
 
-    // Create icon panel dialog ...
-    const topicIconModel = {
-      getValue() {
-        return null;
-      },
-      setValue(value: string) {
-        designer.addIconType(value);
-      },
-    };
-    this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
-    Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
+      // Create icon panel dialog ...
+      const topicIconModel = {
+        getValue() {
+          return null;
+        },
+        setValue(value: string) {
+          designer.addIconType(value);
+        },
+      };
+      this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
+      Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
 
-    const topicColorModel = {
-      getValue() {
-        const nodes = designerModel.filterSelectedTopics();
-        let result = null;
-        for (let i = 0; i < nodes.length; i++) {
-          const color = nodes[i].getBackgroundColor();
-          if (result != null && result !== color) {
-            result = null;
-            break;
+      const topicColorModel = {
+        getValue() {
+          const nodes = designerModel.filterSelectedTopics();
+          let result = null;
+          for (let i = 0; i < nodes.length; i++) {
+            const color = nodes[i].getBackgroundColor();
+            if (result != null && result !== color) {
+              result = null;
+              break;
+            }
+            result = color;
           }
-          result = color;
-        }
-        return result;
-      },
-      setValue(hex: string) {
-        designer.changeBackgroundColor(hex);
-      },
-    };
-    this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
-    Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
+          return result;
+        },
+        setValue(hex: string) {
+          designer.changeBackgroundColor(hex);
+        },
+      };
+      this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
+      Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
 
-    const borderColorModel = {
-      getValue() {
-        const nodes = designerModel.filterSelectedTopics();
-        let result = null;
-        for (let i = 0; i < nodes.length; i++) {
-          const color = nodes[i].getBorderColor();
-          if (result != null && result !== color) {
-            result = null;
-            break;
+      const borderColorModel = {
+        getValue() {
+          const nodes = designerModel.filterSelectedTopics();
+          let result = null;
+          for (let i = 0; i < nodes.length; i++) {
+            const color = nodes[i].getBorderColor();
+            if (result != null && result !== color) {
+              result = null;
+              break;
+            }
+            result = color;
           }
-          result = color;
-        }
-        return result;
-      },
-      setValue(hex: string) {
-        designer.changeBorderColor(hex);
-      },
-    };
-    this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
-    Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
+          return result;
+        },
+        setValue(hex: string) {
+          designer.changeBorderColor(hex);
+        },
+      };
+      this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
+      Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
 
-    const fontColorModel = {
-      getValue() {
-        let result = null;
-        const nodes = designerModel.filterSelectedTopics();
-        for (let i = 0; i < nodes.length; i++) {
-          const color = nodes[i].getFontColor();
-          if (result != null && result !== color) {
-            result = null;
-            break;
+      const fontColorModel = {
+        getValue() {
+          let result = null;
+          const nodes = designerModel.filterSelectedTopics();
+          for (let i = 0; i < nodes.length; i++) {
+            const color = nodes[i].getFontColor();
+            if (result != null && result !== color) {
+              result = null;
+              break;
+            }
+            result = color;
           }
-          result = color;
+          return result;
+        },
+        setValue(hex) {
+          designer.changeFontColor(hex);
+        },
+      };
+      this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
+      Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
+
+      const undoButton = this._addButton('undoEdition', false, false, () => {
+        designer.undo();
+      });
+      if (undoButton) {
+        undoButton.disable();
+      }
+      Menu._registerTooltip('undoEdition', $msg('UNDO'), 'meta+Z');
+
+      const redoButton = this._addButton('redoEdition', false, false, () => {
+        designer.redo();
+      });
+      if (redoButton) {
+        redoButton.disable();
+      }
+      Menu._registerTooltip('redoEdition', $msg('REDO'), 'meta+shift+Z');
+
+      if (redoButton && undoButton) {
+        designer.addEvent('modelUpdate', (event) => {
+          if (event.undoSteps > 0) {
+            undoButton.enable();
+          } else {
+            undoButton.disable();
+          }
+          if (event.redoSteps > 0) {
+            redoButton.enable();
+          } else {
+            redoButton.disable();
+          }
+        });
+      }
+
+      this._addButton('addTopic', true, false, () => {
+        designer.createSiblingForSelectedNode();
+      });
+      Menu._registerTooltip('addTopic', $msg('ADD_TOPIC'), 'Enter');
+
+      this._addButton('deleteTopic', true, true, () => {
+        designer.deleteSelectedEntities();
+      });
+      Menu._registerTooltip('deleteTopic', $msg('TOPIC_DELETE'), 'Delete');
+
+      this._addButton('topicLink', true, false, () => {
+        designer.addLink();
+      });
+      Menu._registerTooltip('topicLink', $msg('TOPIC_LINK'));
+
+      this._addButton('topicRelation', true, false, (event) => {
+        designer.showRelPivot(event);
+      });
+      Menu._registerTooltip('topicRelation', $msg('TOPIC_RELATIONSHIP'));
+
+      this._addButton('topicNote', true, false, () => {
+        designer.addNote();
+      });
+      Menu._registerTooltip('topicNote', $msg('TOPIC_NOTE'));
+
+      this._addButton('fontBold', true, false, () => {
+        designer.changeFontWeight();
+      });
+      Menu._registerTooltip('fontBold', $msg('FONT_BOLD'), 'meta+B');
+
+      this._addButton('fontItalic', true, false, () => {
+        designer.changeFontStyle();
+      });
+      Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), 'meta+I');
+
+
+      if (saveElem) {
+        this._addButton('save', false, false,
+          () => {
+            this.save(saveElem, designer, true);
+          });
+        Menu._registerTooltip('save', $msg('SAVE'), 'meta+S');
+
+        if (!readOnly) {
+          window.addEventListener('beforeunload', () => {
+            if (this.isSaveRequired()) {
+              this.save(saveElem, designer, false);
+            }
+            this.unlockMap(designer);
+          });
+
+          // Autosave on a fixed period of time ...
+          setInterval(
+            () => {
+              if (this.isSaveRequired()) {
+                this.save(saveElem, designer, false);
+              }
+            }, 10000,
+          );
         }
-        return result;
-      },
-      setValue(hex) {
-        designer.changeFontColor(hex);
-      },
-    };
-    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();
-    });
-    if (undoButton) {
-      undoButton.disable();
-    }
-    Menu._registerTooltip('undoEdition', $msg('UNDO'), 'meta+Z');
-
-    const redoButton = this._addButton('redoEdition', false, false, () => {
-      designer.redo();
-    });
-    if (redoButton) {
-      redoButton.disable();
-    }
-    Menu._registerTooltip('redoEdition', $msg('REDO'), 'meta+shift+Z');
-
-    if (redoButton && undoButton) {
-      designer.addEvent('modelUpdate', (event) => {
-        if (event.undoSteps > 0) {
-          undoButton.enable();
-        } else {
-          undoButton.disable();
-        }
-        if (event.redoSteps > 0) {
-          redoButton.enable();
-        } else {
-          redoButton.disable();
-        }
-      });
-    }
-
-    this._addButton('addTopic', true, false, () => {
-      designer.createSiblingForSelectedNode();
-    });
-    Menu._registerTooltip('addTopic', $msg('ADD_TOPIC'), 'Enter');
-
-    this._addButton('deleteTopic', true, true, () => {
-      designer.deleteSelectedEntities();
-    });
-    Menu._registerTooltip('deleteTopic', $msg('TOPIC_DELETE'), 'Delete');
-
-    this._addButton('topicLink', true, false, () => {
-      designer.addLink();
-    });
-    Menu._registerTooltip('topicLink', $msg('TOPIC_LINK'));
-
-    this._addButton('topicRelation', true, false, (event) => {
-      designer.showRelPivot(event);
-    });
-    Menu._registerTooltip('topicRelation', $msg('TOPIC_RELATIONSHIP'));
-
-    this._addButton('topicNote', true, false, () => {
-      designer.addNote();
-    });
-    Menu._registerTooltip('topicNote', $msg('TOPIC_NOTE'));
-
-    this._addButton('fontBold', true, false, () => {
-      designer.changeFontWeight();
-    });
-    Menu._registerTooltip('fontBold', $msg('FONT_BOLD'), 'meta+B');
-
-    this._addButton('fontItalic', true, false, () => {
-      designer.changeFontStyle();
-    });
-    Menu._registerTooltip('fontItalic', $msg('FONT_ITALIC'), 'meta+I');
-
-    if (saveElem) {
-      this._addButton('save', false, false,
-        () => {
-          this.save(saveElem, designer, true);
-        });
-      Menu._registerTooltip('save', $msg('SAVE'), 'meta+S');
-
-      if (!readOnly) {
-        window.addEventListener('beforeunload', () => {
-          if (this.isSaveRequired()) {
-            this.save(saveElem, designer, false);
-          }
-          this.unlockMap(designer);
-        });
-
-        // Autosave on a fixed period of time ...
-        setInterval(
-          () => {
-            if (this.isSaveRequired()) {
-              this.save(saveElem, designer, false);
-            }
-          }, 10000,
-        );
-      }
-    }
-
     const shareElem = $('#shareIt');
     if (shareElem.length !== 0) {
       Menu._registerTooltip('shareIt', $msg('COLLABORATE'));
@@ -316,14 +314,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) {
diff --git a/packages/editor/src/components/toolbar/index.tsx b/packages/editor/src/components/toolbar/index.tsx
index 9a08ea4f..22803507 100644
--- a/packages/editor/src/components/toolbar/index.tsx
+++ b/packages/editor/src/components/toolbar/index.tsx
@@ -55,63 +55,67 @@ export default function Toolbar({
                         </ToolbarButton>
                     </div>
                 )}
-                <div id="edit" className="buttonContainer">
-                    <ToolbarButton id="undoEdition" className="buttonOn">
-                        <img src={UndoSvg} />
-                    </ToolbarButton>
-                    <ToolbarButton id="redoEdition" className="buttonOn">
-                        <img src={RedoSvg} />
-                    </ToolbarButton>
-                </div>
-                <div id="nodeStyle" className="buttonContainer">
-                    <ToolbarButton id="addTopic" className="buttonOn">
-                        <img src={TopicAddSvg} />
-                    </ToolbarButton>
-                    <ToolbarButton id="deleteTopic" className="buttonOn">
-                        <img src={TopicDeleteSvg} />
-                    </ToolbarButton>
-                    <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
-                        <img src={TopicBorderSvg} />
-                    </ToolbarButtonExt>
-                    <ToolbarButtonExt id="topicColor" className="buttonExtOn">
-                        <img src={TopicColorSvg} />
-                    </ToolbarButtonExt>
-                    <ToolbarButtonExt id="topicShape" className="buttonExtOn">
-                        <img src={TopicShapeSvg} />
-                    </ToolbarButtonExt>
-                </div>
-                <div id="font" className="buttonContainer">
-                    <ToolbarButton id="fontFamily" className="buttonOn">
-                        <img src={FontTypeSvg} />
-                    </ToolbarButton>
-                    <ToolbarButtonExt id="fontSize" className="buttonExtOn">
-                        <img src={FontSizeSvg} />
-                    </ToolbarButtonExt>
-                    <ToolbarButton id="fontBold" className="buttonOn">
-                        <img src={FontBoldSvg} />
-                    </ToolbarButton>
-                    <ToolbarButton id="fontItalic" className="buttonOn">
-                        <img src={FontItalicSvg} />
-                    </ToolbarButton>
-                    <ToolbarButtonExt id="fontColor" className="buttonExtOn">
-                        <img src={FontColorSvg} />
-                    </ToolbarButtonExt>
-                </div>
-                <div id="nodeContent" className="buttonContainer">
-                    <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
-                        <img src={TopicIconSvg} />
-                    </ToolbarButtonExt>
-                    <ToolbarButton id="topicNote" className="buttonOn">
-                        <img src={TopicNoteSvg} />
-                    </ToolbarButton>
-                    <ToolbarButton id="topicLink" className="buttonOn">
-                        <img src={TopicLinkSvg} />
-                    </ToolbarButton>
-                    <ToolbarButton id="topicRelation" className="buttonOn">
-                        <img src={TopicRelationSvg} />
-                    </ToolbarButton>
-                </div>
-                <div id="separator" className="buttonContainer"></div>
+                {(editorMode === 'edition-editor' || editorMode === 'edition-owner' || editorMode === 'showcase') && (
+                    <>
+                        <div id="edit" className="buttonContainer">
+                            <ToolbarButton id="undoEdition" className="buttonOn">
+                                <img src={UndoSvg} />
+                            </ToolbarButton>
+                            <ToolbarButton id="redoEdition" className="buttonOn">
+                                <img src={RedoSvg} />
+                            </ToolbarButton>
+                        </div>
+                        <div id="nodeStyle" className="buttonContainer">
+                            <ToolbarButton id="addTopic" className="buttonOn">
+                                <img src={TopicAddSvg} />
+                            </ToolbarButton>
+                            <ToolbarButton id="deleteTopic" className="buttonOn">
+                                <img src={TopicDeleteSvg} />
+                            </ToolbarButton>
+                            <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
+                                <img src={TopicBorderSvg} />
+                            </ToolbarButtonExt>
+                            <ToolbarButtonExt id="topicColor" className="buttonExtOn">
+                                <img src={TopicColorSvg} />
+                            </ToolbarButtonExt>
+                            <ToolbarButtonExt id="topicShape" className="buttonExtOn">
+                                <img src={TopicShapeSvg} />
+                            </ToolbarButtonExt>
+                        </div>
+                        <div id="font" className="buttonContainer">
+                            <ToolbarButton id="fontFamily" className="buttonOn">
+                                <img src={FontTypeSvg} />
+                            </ToolbarButton>
+                            <ToolbarButtonExt id="fontSize" className="buttonExtOn">
+                                <img src={FontSizeSvg} />
+                            </ToolbarButtonExt>
+                            <ToolbarButton id="fontBold" className="buttonOn">
+                                <img src={FontBoldSvg} />
+                            </ToolbarButton>
+                            <ToolbarButton id="fontItalic" className="buttonOn">
+                                <img src={FontItalicSvg} />
+                            </ToolbarButton>
+                            <ToolbarButtonExt id="fontColor" className="buttonExtOn">
+                                <img src={FontColorSvg} />
+                            </ToolbarButtonExt>
+                        </div>
+                        <div id="nodeContent" className="buttonContainer">
+                            <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
+                                <img src={TopicIconSvg} />
+                            </ToolbarButtonExt>
+                            <ToolbarButton id="topicNote" className="buttonOn">
+                                <img src={TopicNoteSvg} />
+                            </ToolbarButton>
+                            <ToolbarButton id="topicLink" className="buttonOn">
+                                <img src={TopicLinkSvg} />
+                            </ToolbarButton>
+                            <ToolbarButton id="topicRelation" className="buttonOn">
+                                <img src={TopicRelationSvg} />
+                            </ToolbarButton>
+                        </div>
+                        <div id="separator" className="buttonContainer"></div>
+                    </>
+                )}
                 <ToolbarRightContainer>
                     <ToolbarButton
                         id="export"