mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-13 02:37:57 +01:00
Merged in feature/remove_actions (pull request #45)
Remove actions in toobar when user is not owner. * Fix eslit errors
This commit is contained in:
parent
e9a23bb1e2
commit
c6db14b99a
@ -48,7 +48,7 @@ export default function Toolbar({
|
||||
<div id="backToList">
|
||||
<img src={BackIconSvg} />
|
||||
</div>
|
||||
{editorMode === 'edition' && (
|
||||
{(editorMode === 'edition-editor' || editorMode === 'edition-owner') && (
|
||||
<div id="persist" className="buttonContainer">
|
||||
<ToolbarButton id="save" className="buttonOn">
|
||||
<img src={SaveSvg} />
|
||||
@ -112,44 +112,51 @@ export default function Toolbar({
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div id="separator" className="buttonContainer"></div>
|
||||
{editorMode === 'edition' && (
|
||||
<ToolbarRightContainer>
|
||||
<ToolbarButton
|
||||
id="export"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('export')}
|
||||
>
|
||||
<img src={ExportSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="publishIt"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('publish')}
|
||||
>
|
||||
<img src={PublicSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="history"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('history')}
|
||||
>
|
||||
<img src={HistorySvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="print"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('print')}
|
||||
>
|
||||
<img src={PrintSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="account">
|
||||
<img src={AccountSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarRightContainer>
|
||||
<ToolbarButton
|
||||
id="export"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('export')}
|
||||
>
|
||||
<img src={ExportSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="print"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('print')}
|
||||
>
|
||||
<img src={PrintSvg} />
|
||||
</ToolbarButton>
|
||||
{editorMode === 'edition-owner' && (
|
||||
<>
|
||||
<ToolbarButton
|
||||
id="history"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('history')}
|
||||
>
|
||||
<img src={HistorySvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton
|
||||
id="publishIt"
|
||||
className="buttonOn"
|
||||
onClick={() => onAction('publish')}
|
||||
>
|
||||
<img src={PublicSvg} />
|
||||
</ToolbarButton>
|
||||
</>
|
||||
)}
|
||||
{(editorMode === 'edition-owner' || editorMode === 'edition-editor') && (
|
||||
<ToolbarButton id="account">
|
||||
<img src={AccountSvg} />
|
||||
</ToolbarButton>
|
||||
)}
|
||||
{editorMode === 'edition-owner' && (
|
||||
<ActionButton onClick={() => onAction('share')}>
|
||||
{intl.formatMessage({ id: 'action.share', defaultMessage: 'Share' })}
|
||||
</ActionButton>
|
||||
</ToolbarRightContainer>
|
||||
)}
|
||||
|
||||
)}
|
||||
</ToolbarRightContainer>
|
||||
</div>
|
||||
</HeaderContainer>
|
||||
);
|
||||
|
@ -13,7 +13,6 @@ import {
|
||||
} from '@wisemapping/mindplot';
|
||||
import './global-styled.css';
|
||||
import I18nMsg from './classes/i18n-msg';
|
||||
import Messages from '@wisemapping/mindplot/src/components/Messages';
|
||||
|
||||
declare global {
|
||||
// used in mindplot
|
||||
|
@ -36,7 +36,7 @@ const options: EditorOptions = {
|
||||
zoom: 0.8,
|
||||
locked: false,
|
||||
mapTitle: "Develop Mindnap",
|
||||
mode: 'edition',
|
||||
mode: 'edition-owner',
|
||||
locale: 'en',
|
||||
enableKeyboardEvents: true
|
||||
};
|
||||
|
4
packages/mindplot/src/@types/custom.d.ts
vendored
4
packages/mindplot/src/@types/custom.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
declare module "*.svg" {
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
}
|
||||
|
@ -41,20 +41,15 @@ class CommandContext {
|
||||
}
|
||||
|
||||
findTopics(topicIds: number[]): Topic[] {
|
||||
$assert($defined(topicIds), 'topicsIds can not be null');
|
||||
const topicsIds = Array.isArray(topicIds) ? topicIds : [topicIds];
|
||||
const designerTopics = this._designer.getModel().getTopics();
|
||||
const result = designerTopics.filter((topic) => topicsIds.includes(topic.getId()));
|
||||
|
||||
if (result.length !== topicsIds.length) {
|
||||
const ids = designerTopics.map((topic) => topic.getId());
|
||||
$assert(
|
||||
result.length === topicsIds.length,
|
||||
`Could not find topic. Result:${result
|
||||
} Filter Criteria:${topicsIds
|
||||
} Current Topics: [${ids
|
||||
}]`,
|
||||
);
|
||||
throw new Error(`Could not find topic. Result:${result
|
||||
} Filter Criteria:${topicsIds
|
||||
} Current Topics: [${ids}])`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
@ -37,7 +37,7 @@ export function buildDesigner(options: DesignerOptions): Designer {
|
||||
PersistenceManager.init(persistence);
|
||||
|
||||
// Register toolbar event ...
|
||||
if (options.mode === 'edition' || options.mode === 'showcase') {
|
||||
if (options.mode === 'edition-owner' || options.mode === 'edition-editor' || options.mode === 'showcase') {
|
||||
const menu = new Menu(designer, 'toolbar');
|
||||
|
||||
// If a node has focus, focus can be move to another node using the keys.
|
||||
|
@ -46,7 +46,7 @@ class OptionsBuilder {
|
||||
}
|
||||
|
||||
const defaultOptions: DesignerOptions = {
|
||||
mode: 'edition',
|
||||
mode: 'edition-owner',
|
||||
zoom: 0.85,
|
||||
saveOnLoad: true,
|
||||
containerSize,
|
||||
|
@ -1,2 +1,2 @@
|
||||
type EditorRenderMode = 'viewonly' | 'edition' | 'showcase';
|
||||
type EditorRenderMode = 'viewonly' | 'edition-owner' | 'edition-editor' | 'showcase';
|
||||
export default EditorRenderMode;
|
||||
|
@ -15,7 +15,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
// eslint-disable-next-line max-classes-per-file
|
||||
|
||||
import {
|
||||
$assert,
|
||||
$defined,
|
||||
@ -23,12 +23,11 @@ import {
|
||||
import {
|
||||
Group,
|
||||
ElementClass,
|
||||
Point,
|
||||
} from '@wisemapping/web2d';
|
||||
import IconGroupRemoveTip from './IconGroupRemoveTip';
|
||||
import { Point } from '@wisemapping/web2d';
|
||||
import Icon from './Icon';
|
||||
import SizeType from './SizeType';
|
||||
import IconModel from './model/IconModel';
|
||||
import FeatureModel from './model/FeatureModel';
|
||||
|
||||
const ORDER_BY_TYPE = new Map<string, number>();
|
||||
@ -38,10 +37,15 @@ ORDER_BY_TYPE.set('link', 2);
|
||||
|
||||
class IconGroup {
|
||||
private _icons: Icon[];
|
||||
|
||||
private _group: any;
|
||||
|
||||
private _removeTip: IconGroupRemoveTip;
|
||||
|
||||
private _iconSize: SizeType;
|
||||
|
||||
private _topicId: number;
|
||||
|
||||
constructor(topicId: number, iconSize: number) {
|
||||
$assert($defined(topicId), 'topicId can not be null');
|
||||
$assert($defined(iconSize), 'iconSize can not be null');
|
||||
@ -59,7 +63,6 @@ class IconGroup {
|
||||
this._removeTip = new IconGroupRemoveTip(this._group);
|
||||
this.seIconSize(iconSize, iconSize);
|
||||
this._registerListeners();
|
||||
|
||||
}
|
||||
|
||||
setPosition(x: number, y: number): void {
|
||||
@ -189,7 +192,6 @@ class IconGroup {
|
||||
}
|
||||
|
||||
static ICON_PADDING = 5;
|
||||
|
||||
}
|
||||
|
||||
export default IconGroup;
|
||||
|
@ -26,8 +26,11 @@ import FeatureModel from './model/FeatureModel';
|
||||
|
||||
class LinkIcon extends Icon {
|
||||
private _linksModel: FeatureModel;
|
||||
|
||||
private _topic: Topic;
|
||||
|
||||
private _readOnly: boolean;
|
||||
|
||||
private _tip: LinkIconTooltip;
|
||||
|
||||
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
|
||||
@ -73,8 +76,8 @@ class LinkIcon extends Icon {
|
||||
getModel(): FeatureModel {
|
||||
return this._linksModel;
|
||||
}
|
||||
static IMAGE_URL = LinksImage;
|
||||
|
||||
static IMAGE_URL = LinksImage;
|
||||
}
|
||||
|
||||
export default LinkIcon;
|
||||
|
@ -161,7 +161,7 @@ abstract class NodeGraph {
|
||||
|
||||
createDragNode(layoutManager: LayoutManager) {
|
||||
const dragShape = this._buildDragShape();
|
||||
|
||||
|
||||
return new DragTopic(dragShape, this, layoutManager);
|
||||
}
|
||||
|
||||
|
@ -27,8 +27,11 @@ import FeatureModel from './model/FeatureModel';
|
||||
|
||||
class NoteIcon extends Icon {
|
||||
private _linksModel: NoteModel;
|
||||
|
||||
private _topic: Topic;
|
||||
|
||||
private _readOnly: boolean;
|
||||
|
||||
private _tip: FloatingTip;
|
||||
|
||||
constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
|
||||
@ -87,7 +90,6 @@ class NoteIcon extends Icon {
|
||||
}
|
||||
|
||||
static IMAGE_URL = NotesImage;
|
||||
|
||||
}
|
||||
|
||||
export default NoteIcon;
|
||||
|
@ -110,8 +110,7 @@ class StandaloneActionDispatcher extends ActionDispatcher {
|
||||
this.execute(command);
|
||||
}
|
||||
|
||||
/** */
|
||||
changeTextToTopic(topicsIds: number[], text: string) {
|
||||
changeTextToTopic(topicsIds: number[], text: string): void {
|
||||
$assert($defined(topicsIds), 'topicsIds can not be null');
|
||||
|
||||
const commandFunc = (topic: Topic, value: string) => {
|
||||
|
@ -707,11 +707,10 @@ abstract class Topic extends NodeGraph {
|
||||
// Do some fancy animation ....
|
||||
const elements = this._flatten2DElements(this);
|
||||
elements.forEach((elem) => {
|
||||
elem.setVisibility(!value, 250)
|
||||
elem.setVisibility(!value, 250);
|
||||
});
|
||||
|
||||
EventBus.instance.fireEvent('childShrinked', model);
|
||||
|
||||
}
|
||||
|
||||
getShrinkConnector(): ShirinkConnector | undefined {
|
||||
@ -893,7 +892,6 @@ abstract class Topic extends NodeGraph {
|
||||
this._relationships.forEach((r) => r.redraw());
|
||||
}
|
||||
|
||||
/** */
|
||||
setBranchVisibility(value: boolean): void {
|
||||
let current: Topic = this;
|
||||
let parent: Topic = this;
|
||||
@ -904,7 +902,6 @@ abstract class Topic extends NodeGraph {
|
||||
current.setVisibility(value);
|
||||
}
|
||||
|
||||
/** */
|
||||
setVisibility(value: boolean, fade = 0): void {
|
||||
this._setTopicVisibility(value, fade);
|
||||
|
||||
@ -961,8 +958,9 @@ abstract class Topic extends NodeGraph {
|
||||
relationship.setVisibility(
|
||||
value
|
||||
&& (targetParent == null || !targetParent.areChildrenShrunken())
|
||||
&& (sourceParent == null || !sourceParent.areChildrenShrunken())
|
||||
, fade);
|
||||
&& (sourceParent == null || !sourceParent.areChildrenShrunken()),
|
||||
fade,
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -25,7 +25,7 @@ type CommandTypes = string | object | boolean | number;
|
||||
class GenericFunctionCommand extends Command {
|
||||
private _value: CommandTypes;
|
||||
|
||||
private _topicsId: number[];
|
||||
private _topicsIds: number[];
|
||||
|
||||
private _commandFunc: (topic: Topic, value: CommandTypes) => CommandTypes;
|
||||
|
||||
@ -39,7 +39,7 @@ class GenericFunctionCommand extends Command {
|
||||
|
||||
super();
|
||||
this._value = value;
|
||||
this._topicsId = topicsIds;
|
||||
this._topicsIds = topicsIds;
|
||||
this._commandFunc = commandFunc;
|
||||
this._oldValues = [];
|
||||
}
|
||||
@ -49,7 +49,7 @@ class GenericFunctionCommand extends Command {
|
||||
*/
|
||||
execute(commandContext: CommandContext) {
|
||||
if (!this._applied) {
|
||||
const topics = commandContext.findTopics(this._topicsId);
|
||||
const topics = commandContext.findTopics(this._topicsIds);
|
||||
|
||||
if (topics != null) {
|
||||
const me = this;
|
||||
@ -66,7 +66,7 @@ class GenericFunctionCommand extends Command {
|
||||
|
||||
undoExecute(commandContext: CommandContext): void {
|
||||
if (this._applied) {
|
||||
const topics = commandContext.findTopics(this._topicsId);
|
||||
const topics = commandContext.findTopics(this._topicsIds);
|
||||
|
||||
topics.forEach(((topic: Topic, index: number) => {
|
||||
this._commandFunc(topic, this._oldValues[index]);
|
||||
|
@ -15,9 +15,9 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import RootedTreeSet from "./RootedTreeSet";
|
||||
import RootedTreeSet from './RootedTreeSet';
|
||||
import Node from './Node';
|
||||
import PositionType from "../PositionType";
|
||||
import PositionType from '../PositionType';
|
||||
|
||||
abstract class ChildrenSorterStrategy {
|
||||
abstract computeChildrenIdByHeights(treeSet: RootedTreeSet, node: Node);
|
||||
|
@ -15,7 +15,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import $ from 'jquery';
|
||||
import { $assert, $defined } from '@wisemapping/core-js';
|
||||
import Events from '../Events';
|
||||
import RootedTreeSet from './RootedTreeSet';
|
||||
|
@ -19,7 +19,7 @@ import { $assert } from '@wisemapping/core-js';
|
||||
import FeatureType from './FeatureType';
|
||||
|
||||
class FeatureModel {
|
||||
static _next_id = 0;
|
||||
static _nextId = 0;
|
||||
|
||||
private _id: number;
|
||||
|
||||
@ -85,8 +85,8 @@ class FeatureModel {
|
||||
}
|
||||
|
||||
static _nextUUID(): number {
|
||||
const result = FeatureModel._next_id + 1;
|
||||
FeatureModel._next_id = result;
|
||||
const result = FeatureModel._nextId + 1;
|
||||
FeatureModel._nextId = result;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
@ -29,7 +29,7 @@ const parseJsObject = (str: string) => JSON.parse(str.replace(/(['"])?([a-z0-9A-
|
||||
abstract class INodeModel {
|
||||
static MAIN_TOPIC_TO_MAIN_TOPIC_DISTANCE = 220;
|
||||
|
||||
private static _next_uuid = 0;
|
||||
private static _nextUuid = 0;
|
||||
|
||||
protected _mindmap: Mindmap;
|
||||
|
||||
@ -49,9 +49,9 @@ abstract class INodeModel {
|
||||
const newId = INodeModel._nextUUID();
|
||||
this.putProperty('id', newId);
|
||||
} else {
|
||||
if (id > INodeModel._next_uuid) {
|
||||
if (id > INodeModel._nextUuid) {
|
||||
$assert(Number.isFinite(id));
|
||||
INodeModel._next_uuid = id;
|
||||
INodeModel._nextUuid = id;
|
||||
}
|
||||
this.putProperty('id', id);
|
||||
}
|
||||
@ -358,8 +358,8 @@ abstract class INodeModel {
|
||||
abstract removeChild(child: INodeModel);
|
||||
|
||||
static _nextUUID(): number {
|
||||
INodeModel._next_uuid += 1;
|
||||
return INodeModel._next_uuid;
|
||||
INodeModel._nextUuid += 1;
|
||||
return INodeModel._nextUuid;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -20,7 +20,7 @@ import Point from '@wisemapping/web2d';
|
||||
import ConnectionLine from '../ConnectionLine';
|
||||
|
||||
class RelationshipModel {
|
||||
static _next_uuid = 0;
|
||||
static _nextUuid = 0;
|
||||
|
||||
private _id: number;
|
||||
|
||||
@ -133,8 +133,8 @@ class RelationshipModel {
|
||||
}
|
||||
|
||||
static _nextUUID() {
|
||||
RelationshipModel._next_uuid += 1;
|
||||
return RelationshipModel._next_uuid;
|
||||
RelationshipModel._nextUuid += 1;
|
||||
return RelationshipModel._nextUuid;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -39,170 +39,145 @@ class Menu extends IMenu {
|
||||
|
||||
// Create panels ...
|
||||
const designerModel = designer.getModel();
|
||||
|
||||
const fontFamilyBtn = $('#fontFamily');
|
||||
if (fontFamilyBtn) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
result = fontFamily;
|
||||
}
|
||||
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 fontSizeBtn = $('#fontSize');
|
||||
if (fontSizeBtn) {
|
||||
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;
|
||||
}
|
||||
result = fontSize;
|
||||
let result = null;
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const fontSize = nodes[i].getFontSize();
|
||||
if (result != null && result !== fontSize) {
|
||||
result = null;
|
||||
break;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: number) {
|
||||
designer.changeFontSize(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
|
||||
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
|
||||
}
|
||||
result = fontSize;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: number) {
|
||||
designer.changeFontSize(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new FontSizePanel('fontSize', fontSizeModel));
|
||||
Menu._registerTooltip('fontSize', $msg('FONT_SIZE'));
|
||||
|
||||
const topicShapeBtn = $('#topicShape');
|
||||
if (topicShapeBtn) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: string) {
|
||||
designer.changeTopicShape(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
|
||||
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
|
||||
}
|
||||
result = shapeType;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(value: string) {
|
||||
designer.changeTopicShape(value);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new TopicShapePanel('topicShape', topicShapeModel));
|
||||
Menu._registerTooltip('topicShape', $msg('TOPIC_SHAPE'));
|
||||
|
||||
const topicIconBtn = $('#topicIcon');
|
||||
if (topicIconBtn) {
|
||||
// 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'));
|
||||
|
||||
// Topic color item ...
|
||||
const topicColorBtn = $('#topicColor');
|
||||
if (topicColorBtn) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex: string) {
|
||||
designer.changeBackgroundColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('topicColor', topicColorModel, widgetsBaseUrl));
|
||||
Menu._registerTooltip('topicColor', $msg('TOPIC_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'));
|
||||
|
||||
// Border color item ...
|
||||
const topicBorderBtn = $('#topicBorder');
|
||||
if (topicBorderBtn) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex: string) {
|
||||
designer.changeBorderColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('topicBorder', borderColorModel, widgetsBaseUrl));
|
||||
Menu._registerTooltip('topicBorder', $msg('TOPIC_BORDER_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'));
|
||||
|
||||
// Font color item ...
|
||||
const fontColorBtn = $('#fontColor');
|
||||
if (fontColorBtn) {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
return result;
|
||||
},
|
||||
setValue(hex) {
|
||||
designer.changeFontColor(hex);
|
||||
},
|
||||
};
|
||||
this._toolbarElems.push(new ColorPalettePanel('fontColor', fontColorModel, baseUrl));
|
||||
Menu._registerTooltip('fontColor', $msg('FONT_COLOR'));
|
||||
}
|
||||
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'));
|
||||
|
||||
@ -315,14 +290,6 @@ class Menu extends IMenu {
|
||||
}
|
||||
}
|
||||
|
||||
const discardElem = $('#discard');
|
||||
if (discardElem.length !== 0) {
|
||||
this._addButton('discard', false, false, () => {
|
||||
this.discardChanges(designer);
|
||||
});
|
||||
Menu._registerTooltip('discard', $msg('DISCARD_CHANGES'));
|
||||
}
|
||||
|
||||
const shareElem = $('#shareIt');
|
||||
if (shareElem.length !== 0) {
|
||||
Menu._registerTooltip('shareIt', $msg('COLLABORATE'));
|
||||
@ -350,14 +317,12 @@ class Menu extends IMenu {
|
||||
}
|
||||
|
||||
const backTolist = $('#backToList');
|
||||
if (backTolist.length !== 0) {
|
||||
backTolist.bind('click', (event) => {
|
||||
event.stopPropagation();
|
||||
window.location.href = '/c/maps/';
|
||||
return false;
|
||||
});
|
||||
Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
|
||||
}
|
||||
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');
|
||||
@ -367,9 +332,9 @@ class Menu extends IMenu {
|
||||
});
|
||||
this._toolbarElems.push(new AccountSettingsPanel('account'));
|
||||
Menu._registerTooltip('account', `${global.accountEmail}`);
|
||||
}
|
||||
|
||||
this._registerEvents(designer);
|
||||
this._registerEvents(designer);
|
||||
}
|
||||
}
|
||||
|
||||
private _registerEvents(designer: Designer) {
|
||||
|
@ -81,7 +81,7 @@ const App = (): ReactElement => {
|
||||
component={withSessionExpirationHandling(MapsPage)}
|
||||
/>
|
||||
<Route exact path="/c/maps/:id/edit">
|
||||
<EnhacedEditorPage isTryMode={false} />
|
||||
<EnhacedEditorPage isTryMode={false}/>
|
||||
</Route>
|
||||
<Route exact path="/c/maps/:id/try">
|
||||
<EnhacedEditorPage isTryMode={true} />
|
||||
|
@ -611,12 +611,12 @@ export default class RestClient implements Client {
|
||||
}
|
||||
}
|
||||
|
||||
buildPersistenceManager(editorMode: EditorRenderMode ): PersistenceManager {
|
||||
buildPersistenceManager(editorMode: EditorRenderMode): PersistenceManager {
|
||||
if (this.persistenceManager) {
|
||||
return this.persistenceManager;
|
||||
}
|
||||
let persistence: PersistenceManager;
|
||||
if (editorMode === 'edition') {
|
||||
if (editorMode === 'edition-owner' || editorMode === 'edition-editor') {
|
||||
persistence = new RESTPersistenceManager({
|
||||
documentUrl: '/c/restful/maps/{id}/document',
|
||||
revertUrl: '/c/restful/maps/{id}/history/latest',
|
||||
@ -645,13 +645,15 @@ export default class RestClient implements Client {
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
private parseResponseOnError = (response: any): ErrorInfo => {
|
||||
console.error("Backend error=>");
|
||||
console.error(response.data);
|
||||
console.error(`Performing backend action error: ${JSON.stringify(response)}`);
|
||||
|
||||
let result: ErrorInfo | undefined;
|
||||
if (response) {
|
||||
const status: number = response.status;
|
||||
const data = response.data;
|
||||
console.error(`Status Code: ${status}`);
|
||||
console.error(`Status Data: ${response.data}`);
|
||||
console.error(`Status Message: ${response.message}`);
|
||||
|
||||
switch (status) {
|
||||
case 401:
|
||||
|
@ -1,25 +1,16 @@
|
||||
import { EditorOptions } from '@wisemapping/editor';
|
||||
import { EditorRenderMode } from '@wisemapping/mindplot';
|
||||
import AppConfig from '../../classes/app-config';
|
||||
|
||||
export default class EditorOptionsBulder {
|
||||
static build(locale: string, hotkeys: boolean, isTryMode: boolean): { options: EditorOptions, mapId: number } {
|
||||
static build(locale: string, mode: EditorRenderMode, hotkeys: boolean): EditorOptions {
|
||||
|
||||
let options: EditorOptions = {
|
||||
enableKeyboardEvents: hotkeys,
|
||||
locale: locale,
|
||||
mode: mode,
|
||||
};
|
||||
|
||||
if (isTryMode) {
|
||||
// Sent to try mode ...
|
||||
options.mode = 'showcase';
|
||||
} else if (global.mindmapLocked) {
|
||||
// Map locked, open for view mode ...
|
||||
options.mode = 'viewonly';
|
||||
} else {
|
||||
options.mode = 'edition';
|
||||
}
|
||||
|
||||
let mapId: number;
|
||||
if (!AppConfig.isDevelopEnv()) {
|
||||
options = {
|
||||
zoom: (global.userOptions?.zoom != undefined
|
||||
@ -30,7 +21,6 @@ export default class EditorOptionsBulder {
|
||||
mapTitle: global.mapTitle,
|
||||
...options
|
||||
}
|
||||
mapId = global.mapId;
|
||||
} else {
|
||||
// Running in a development mode.
|
||||
console.log('Running editor in development mode');
|
||||
@ -40,8 +30,11 @@ export default class EditorOptionsBulder {
|
||||
mapTitle: "Develop Mindnap",
|
||||
...options
|
||||
}
|
||||
mapId = 666;
|
||||
}
|
||||
return { options, mapId };
|
||||
return options;
|
||||
}
|
||||
|
||||
static loadMapId(): number {
|
||||
return !AppConfig.isDevelopEnv() ? global.mapId : 555;
|
||||
}
|
||||
}
|
@ -2,13 +2,14 @@ import React, { useEffect } from 'react';
|
||||
import ActionDispatcher from '../maps-page/action-dispatcher';
|
||||
import { ActionType } from '../maps-page/action-chooser';
|
||||
import Editor from '@wisemapping/editor';
|
||||
import { EditorRenderMode, PersistenceManager } from '@wisemapping/mindplot';
|
||||
|
||||
import AppI18n from '../../classes/app-i18n';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { hotkeysEnabled } from '../../redux/editorSlice';
|
||||
import ReactGA from 'react-ga';
|
||||
import Client from '../../classes/client';
|
||||
import { activeInstance, fetchAccount } from '../../redux/clientSlice';
|
||||
import { PersistenceManager } from '@wisemapping/mindplot';
|
||||
import { activeInstance, fetchAccount, fetchMapById } from '../../redux/clientSlice';
|
||||
import EditorOptionsBulder from './EditorOptionsBuider';
|
||||
|
||||
export type EditorPropsType = {
|
||||
@ -20,16 +21,43 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
|
||||
const hotkey = useSelector(hotkeysEnabled);
|
||||
const userLocale = AppI18n.getUserLocale();
|
||||
const client: Client = useSelector(activeInstance);
|
||||
const { mapId, options } = EditorOptionsBulder.build(userLocale.code, hotkey, isTryMode);
|
||||
|
||||
useEffect(() => {
|
||||
ReactGA.pageview(window.location.pathname + window.location.search);
|
||||
}, []);
|
||||
|
||||
const findEditorMode = (isTryMode: boolean, mapId: number): EditorRenderMode | null => {
|
||||
let result: EditorRenderMode = null;
|
||||
if (isTryMode) {
|
||||
result = 'showcase';
|
||||
} else if (global.mindmapLocked) {
|
||||
result = 'viewonly';
|
||||
} else {
|
||||
const fetchResult = fetchMapById(mapId);
|
||||
if (!fetchResult.isLoading) {
|
||||
if (fetchResult.error) {
|
||||
throw new Error(`User coild not be loaded: ${JSON.stringify(fetchResult.error)}`);
|
||||
}
|
||||
result = fetchResult.map.role === 'owner' ? 'edition-owner' : 'edition-editor';
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// What is the role ?
|
||||
const mapId = EditorOptionsBulder.loadMapId();
|
||||
const mode = findEditorMode(isTryMode, mapId);
|
||||
|
||||
// Account settings can be null and editor cannot be initilized multiple times. This creates problems
|
||||
// at the i18n resource loading.
|
||||
const persistence = client.buildPersistenceManager(options.mode);
|
||||
const loadCompleted = persistence && (options.mode === 'showcase' || fetchAccount());
|
||||
const isAccountLoaded = mode === 'showcase' || fetchAccount;
|
||||
const loadCompleted = mode && isAccountLoaded;
|
||||
|
||||
let options, persistence: PersistenceManager;
|
||||
if (loadCompleted) {
|
||||
options = EditorOptionsBulder.build(userLocale.code, mode, hotkey);
|
||||
persistence = client.buildPersistenceManager(mode);
|
||||
}
|
||||
|
||||
return loadCompleted ? (
|
||||
<>
|
||||
|
Loading…
Reference in New Issue
Block a user