mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Merge branch 'develop' of https://bitbucket.org/wisemapping/wisemapping-frontend into feature/import-freemind-to-wisemapping
This commit is contained in:
commit
2225a3c640
@ -38,150 +38,17 @@ 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;
|
||||
}
|
||||
result = fontFamily;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
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();
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
result = shapeType;
|
||||
}
|
||||
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'));
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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'));
|
||||
|
||||
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;
|
||||
}
|
||||
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'));
|
||||
// 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();
|
||||
@ -198,98 +65,246 @@ class Menu extends IMenu {
|
||||
});
|
||||
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);
|
||||
// Edition actions ...
|
||||
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;
|
||||
}
|
||||
this.unlockMap(designer);
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
// Autosave on a fixed period of time ...
|
||||
setInterval(
|
||||
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();
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
result = shapeType;
|
||||
}
|
||||
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'));
|
||||
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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'));
|
||||
|
||||
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;
|
||||
}
|
||||
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);
|
||||
}
|
||||
}, 10000,
|
||||
);
|
||||
this.unlockMap(designer);
|
||||
});
|
||||
|
||||
// Autosave on a fixed period of time ...
|
||||
setInterval(
|
||||
() => {
|
||||
if (this.isSaveRequired()) {
|
||||
this.save(saveElem, designer, false);
|
||||
}
|
||||
}, 10000,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Menu._registerTooltip('export', $msg('EXPORT'));
|
||||
|
||||
Menu._registerTooltip('print', $msg('PRINT'));
|
||||
|
||||
const shareElem = $('#shareIt');
|
||||
if (shareElem.length !== 0) {
|
||||
Menu._registerTooltip('shareIt', $msg('COLLABORATE'));
|
||||
@ -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) {
|
||||
|
@ -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"
|
||||
|
@ -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.
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -97,7 +97,7 @@ class ConnectionLine {
|
||||
this._line2d.setVisibility(value, fade);
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
isVisible(): boolean {
|
||||
return this._line2d.isVisible();
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -42,7 +42,6 @@ class OptionsBuilder {
|
||||
width: window.screen.width,
|
||||
height: window.screen.height,
|
||||
};
|
||||
console.log(`height:${containerSize.height}`);
|
||||
}
|
||||
|
||||
const defaultOptions: DesignerOptions = {
|
||||
|
@ -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',
|
||||
|
@ -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);
|
||||
localStorage.setItem(`${mapId}-xml`, mapXml);
|
||||
if (!this.readOnly) {
|
||||
localStorage.setItem(`${mapId}-xml`, mapXml);
|
||||
}
|
||||
console.log(`Map XML to save => ${this.saveMapXml}`);
|
||||
}
|
||||
|
||||
discardChanges(mapId: string) {
|
||||
localStorage.removeItem(`${mapId}-xml`);
|
||||
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),
|
||||
|
@ -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._showStartArrow) this._startArrow.setOpacity(opacity);
|
||||
if (this._showEndArrow) {
|
||||
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();
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
*/
|
||||
execute(commandContext) {
|
||||
execute(commandContext: CommandContext) {
|
||||
const relationship = commandContext.addRelationship(this._model);
|
||||
relationship.setOnFocus(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Overrides abstract parent method
|
||||
* @see {@link mindplot.Command.undoExecute}
|
||||
*/
|
||||
undoExecute(commandContext) {
|
||||
const rel = commandContext.findRelationships(this._model.getId());
|
||||
undoExecute(commandContext: CommandContext) {
|
||||
const rel = commandContext.findRelationships([this._model.getId()]);
|
||||
commandContext.deleteRelationship(rel[0]);
|
||||
}
|
||||
}
|
||||
|
@ -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 = [];
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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();
|
||||
|
@ -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');
|
||||
}
|
||||
|
||||
|
@ -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',
|
||||
|
@ -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 = {
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -47,9 +47,21 @@ export const fetchMapById = (id: number): MapLoadResult => {
|
||||
return client.fetchAllMaps();
|
||||
});
|
||||
|
||||
const result = data?.find((m) => m.id == id);
|
||||
const map = result || null;
|
||||
return { isLoading: isLoading, error: error, map: map };
|
||||
// If the map can not be loaded, create an error object.
|
||||
let map: MapInfo;
|
||||
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 => {
|
||||
|
Loading…
Reference in New Issue
Block a user