Fix clean up code.

This commit is contained in:
Paulo Gustavo Veiga 2022-03-09 11:39:02 -08:00
parent 1d7db72ae5
commit d8cdb50558
2 changed files with 290 additions and 296 deletions

View File

@ -38,258 +38,256 @@ class Menu extends IMenu {
const widgetsBaseUrl = `${baseUrl}css/widget`; const widgetsBaseUrl = `${baseUrl}css/widget`;
// Create panels ... // Create panels ...
const designerModel = designer.getModel(); const designerModel = designer.getModel();
const fontFamilyModel = { const backTolist = $('#backToList');
getValue() { backTolist.bind('click', (event) => {
const nodes = designerModel.filterSelectedTopics(); event.stopPropagation();
let result = null; window.location.href = '/c/maps/';
for (let i = 0; i < nodes.length; i++) { return false;
const fontFamily = nodes[i].getFontFamily(); });
if (result != null && result !== fontFamily) { Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
result = null;
break;
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) { setValue(value: string) {
designer.changeFontFamily(value); designer.changeFontFamily(value);
}, },
}; };
this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel)); this._toolbarElems.push(new FontFamilyPanel('fontFamily', fontFamilyModel));
Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY')); Menu._registerTooltip('fontFamily', $msg('FONT_FAMILY'));
const fontSizeModel = { const fontSizeModel = {
getValue(): number { getValue(): number {
const nodes = designerModel.filterSelectedTopics(); const nodes = designerModel.filterSelectedTopics();
let result = null; let result = null;
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
const fontSize = nodes[i].getFontSize(); const fontSize = nodes[i].getFontSize();
if (result != null && result !== fontSize) { if (result != null && result !== fontSize) {
result = null; result = null;
break; break;
}
result = fontSize;
} }
result = fontSize; return result;
} },
return result; setValue(value: number) {
}, designer.changeFontSize(value);
setValue(value: number) { },
designer.changeFontSize(value); };
}, this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
}; Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
const topicShapeModel = { const topicShapeModel = {
getValue() { getValue() {
const nodes = designerModel.filterSelectedTopics(); const nodes = designerModel.filterSelectedTopics();
let result = null; let result = null;
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
const shapeType = nodes[i].getShapeType(); const shapeType = nodes[i].getShapeType();
if (result != null && result !== shapeType) { if (result != null && result !== shapeType) {
result = null; result = null;
break; break;
}
result = shapeType;
} }
result = shapeType; return result;
} },
return result; setValue(value: string) {
}, designer.changeTopicShape(value);
setValue(value: string) { },
designer.changeTopicShape(value); };
}, this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
}; Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
// Create icon panel dialog ... // Create icon panel dialog ...
const topicIconModel = { const topicIconModel = {
getValue() { getValue() {
return null; return null;
}, },
setValue(value: string) { setValue(value: string) {
designer.addIconType(value); designer.addIconType(value);
}, },
}; };
this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel)); this._toolbarElems.push(new IconPanel('topicIcon', topicIconModel));
Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON')); Menu._registerTooltip('topicIcon', $msg('TOPIC_ICON'));
const topicColorModel = { const topicColorModel = {
getValue() { getValue() {
const nodes = designerModel.filterSelectedTopics(); const nodes = designerModel.filterSelectedTopics();
let result = null; let result = null;
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getBackgroundColor(); const color = nodes[i].getBackgroundColor();
if (result != null && result !== color) { if (result != null && result !== color) {
result = null; result = null;
break; break;
}
result = color;
} }
result = color; return result;
} },
return result; setValue(hex: string) {
}, designer.changeBackgroundColor(hex);
setValue(hex: string) { },
designer.changeBackgroundColor(hex); };
}, this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
}; Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
Menu._registerTooltip('topicColor', $msg('TOPIC_COLOR'));
const borderColorModel = { const borderColorModel = {
getValue() { getValue() {
const nodes = designerModel.filterSelectedTopics(); const nodes = designerModel.filterSelectedTopics();
let result = null; let result = null;
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getBorderColor(); const color = nodes[i].getBorderColor();
if (result != null && result !== color) { if (result != null && result !== color) {
result = null; result = null;
break; break;
}
result = color;
} }
result = color; return result;
} },
return result; setValue(hex: string) {
}, designer.changeBorderColor(hex);
setValue(hex: string) { },
designer.changeBorderColor(hex); };
}, this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
}; Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_COLOR'));
const fontColorModel = { const fontColorModel = {
getValue() { getValue() {
let result = null; let result = null;
const nodes = designerModel.filterSelectedTopics(); const nodes = designerModel.filterSelectedTopics();
for (let i = 0; i < nodes.length; i++) { for (let i = 0; i < nodes.length; i++) {
const color = nodes[i].getFontColor(); const color = nodes[i].getFontColor();
if (result != null && result !== color) { if (result != null && result !== color) {
result = null; result = null;
break; 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('export', $msg('EXPORT'));
Menu._registerTooltip('print', $msg('PRINT')); 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'); const shareElem = $('#shareIt');
if (shareElem.length !== 0) { if (shareElem.length !== 0) {
Menu._registerTooltip('shareIt', $msg('COLLABORATE')); Menu._registerTooltip('shareIt', $msg('COLLABORATE'));
@ -316,14 +314,6 @@ class Menu extends IMenu {
Menu._registerTooltip('keyboardShortcuts', $msg('KEYBOARD_SHOTCUTS')); 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 ... // Account dialog ...
const accountSettings = $('#account'); const accountSettings = $('#account');
if (accountSettings.length !== 0) { if (accountSettings.length !== 0) {

View File

@ -55,63 +55,67 @@ export default function Toolbar({
</ToolbarButton> </ToolbarButton>
</div> </div>
)} )}
<div id="edit" className="buttonContainer"> {(editorMode === 'edition-editor' || editorMode === 'edition-owner' || editorMode === 'showcase') && (
<ToolbarButton id="undoEdition" className="buttonOn"> <>
<img src={UndoSvg} /> <div id="edit" className="buttonContainer">
</ToolbarButton> <ToolbarButton id="undoEdition" className="buttonOn">
<ToolbarButton id="redoEdition" className="buttonOn"> <img src={UndoSvg} />
<img src={RedoSvg} /> </ToolbarButton>
</ToolbarButton> <ToolbarButton id="redoEdition" className="buttonOn">
</div> <img src={RedoSvg} />
<div id="nodeStyle" className="buttonContainer"> </ToolbarButton>
<ToolbarButton id="addTopic" className="buttonOn"> </div>
<img src={TopicAddSvg} /> <div id="nodeStyle" className="buttonContainer">
</ToolbarButton> <ToolbarButton id="addTopic" className="buttonOn">
<ToolbarButton id="deleteTopic" className="buttonOn"> <img src={TopicAddSvg} />
<img src={TopicDeleteSvg} /> </ToolbarButton>
</ToolbarButton> <ToolbarButton id="deleteTopic" className="buttonOn">
<ToolbarButtonExt id="topicBorder" className="buttonExtOn"> <img src={TopicDeleteSvg} />
<img src={TopicBorderSvg} /> </ToolbarButton>
</ToolbarButtonExt> <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
<ToolbarButtonExt id="topicColor" className="buttonExtOn"> <img src={TopicBorderSvg} />
<img src={TopicColorSvg} /> </ToolbarButtonExt>
</ToolbarButtonExt> <ToolbarButtonExt id="topicColor" className="buttonExtOn">
<ToolbarButtonExt id="topicShape" className="buttonExtOn"> <img src={TopicColorSvg} />
<img src={TopicShapeSvg} /> </ToolbarButtonExt>
</ToolbarButtonExt> <ToolbarButtonExt id="topicShape" className="buttonExtOn">
</div> <img src={TopicShapeSvg} />
<div id="font" className="buttonContainer"> </ToolbarButtonExt>
<ToolbarButton id="fontFamily" className="buttonOn"> </div>
<img src={FontTypeSvg} /> <div id="font" className="buttonContainer">
</ToolbarButton> <ToolbarButton id="fontFamily" className="buttonOn">
<ToolbarButtonExt id="fontSize" className="buttonExtOn"> <img src={FontTypeSvg} />
<img src={FontSizeSvg} /> </ToolbarButton>
</ToolbarButtonExt> <ToolbarButtonExt id="fontSize" className="buttonExtOn">
<ToolbarButton id="fontBold" className="buttonOn"> <img src={FontSizeSvg} />
<img src={FontBoldSvg} /> </ToolbarButtonExt>
</ToolbarButton> <ToolbarButton id="fontBold" className="buttonOn">
<ToolbarButton id="fontItalic" className="buttonOn"> <img src={FontBoldSvg} />
<img src={FontItalicSvg} /> </ToolbarButton>
</ToolbarButton> <ToolbarButton id="fontItalic" className="buttonOn">
<ToolbarButtonExt id="fontColor" className="buttonExtOn"> <img src={FontItalicSvg} />
<img src={FontColorSvg} /> </ToolbarButton>
</ToolbarButtonExt> <ToolbarButtonExt id="fontColor" className="buttonExtOn">
</div> <img src={FontColorSvg} />
<div id="nodeContent" className="buttonContainer"> </ToolbarButtonExt>
<ToolbarButtonExt id="topicIcon" className="buttonExtOn"> </div>
<img src={TopicIconSvg} /> <div id="nodeContent" className="buttonContainer">
</ToolbarButtonExt> <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
<ToolbarButton id="topicNote" className="buttonOn"> <img src={TopicIconSvg} />
<img src={TopicNoteSvg} /> </ToolbarButtonExt>
</ToolbarButton> <ToolbarButton id="topicNote" className="buttonOn">
<ToolbarButton id="topicLink" className="buttonOn"> <img src={TopicNoteSvg} />
<img src={TopicLinkSvg} /> </ToolbarButton>
</ToolbarButton> <ToolbarButton id="topicLink" className="buttonOn">
<ToolbarButton id="topicRelation" className="buttonOn"> <img src={TopicLinkSvg} />
<img src={TopicRelationSvg} /> </ToolbarButton>
</ToolbarButton> <ToolbarButton id="topicRelation" className="buttonOn">
</div> <img src={TopicRelationSvg} />
<div id="separator" className="buttonContainer"></div> </ToolbarButton>
</div>
<div id="separator" className="buttonContainer"></div>
</>
)}
<ToolbarRightContainer> <ToolbarRightContainer>
<ToolbarButton <ToolbarButton
id="export" id="export"