vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 06:37:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merged in feature/remove_actions (pull request #45)

Browse Source 
Remove actions in toobar when user is not owner.

* Fix eslit errors
This commit is contained in:
Paulo Veiga 2022-03-05 16:10:03 +00:00
parent e9a23bb1e2
commit c6db14b99a
25 changed files with 270 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/editor/src/components/toolbar/index.tsx
View File

@ -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,7 +112,6 @@ export default function Toolbar({
</ToolbarButton>
</div>
<div id="separator" className="buttonContainer"></div>
{editorMode === 'edition' && (
<ToolbarRightContainer>
<ToolbarButton
id="export"
@ -122,12 +121,14 @@ export default function Toolbar({
<img src={ExportSvg} />
</ToolbarButton>
<ToolbarButton
id="publishIt"
id="print"
className="buttonOn"
onClick={() => onAction('publish')}
onClick={() => onAction('print')}
>
<img src={PublicSvg} />
<img src={PrintSvg} />
</ToolbarButton>
{editorMode === 'edition-owner' && (
<>
<ToolbarButton
id="history"
className="buttonOn"
@ -136,20 +137,26 @@ export default function Toolbar({
<img src={HistorySvg} />
</ToolbarButton>
<ToolbarButton
id="print"
id="publishIt"
className="buttonOn"
onClick={() => onAction('print')}
onClick={() => onAction('publish')}
>
<img src={PrintSvg} />
<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>
);

1
packages/editor/src/index.tsx
View File

@ -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

2
packages/editor/test/playground/map-render/js/editor.tsx
View File

@ -36,7 +36,7 @@ const options: EditorOptions = {
zoom: 0.8,
locked: false,
mapTitle: "Develop Mindnap",
mode: 'edition',
mode: 'edition-owner',
locale: 'en',
enableKeyboardEvents: true
};

2
packages/mindplot/src/@types/custom.d.ts vendored
View File

@ -1,4 +1,4 @@
declare module "*.svg" {
declare module '*.svg' {
const content: any;
export default content;
}

9
packages/mindplot/src/components/CommandContext.ts
View File

@ -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
throw new Error(`Could not find topic. Result:${result
} Filter Criteria:${topicsIds
} Current Topics: [${ids
}]`,
);
} Current Topics: [${ids}])`);
}
return result;
}

2
packages/mindplot/src/components/DesignerBuilder.ts
View File

@ -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.

2
packages/mindplot/src/components/DesignerOptionsBuilder.ts
View File

@ -46,7 +46,7 @@ class OptionsBuilder {
}
const defaultOptions: DesignerOptions = {
mode: 'edition',
mode: 'edition-owner',
zoom: 0.85,
saveOnLoad: true,
containerSize,

2
packages/mindplot/src/components/EditorRenderMode.ts
View File

@ -1,2 +1,2 @@
type EditorRenderMode = 'viewonly' | 'edition' | 'showcase';
type EditorRenderMode = 'viewonly' | 'edition-owner' | 'edition-editor' | 'showcase';
export default EditorRenderMode;

12
packages/mindplot/src/components/IconGroup.ts
View File

@ -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;

5
packages/mindplot/src/components/LinkIcon.ts
View File

@ -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;

4
packages/mindplot/src/components/NoteIcon.ts
View File

@ -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;

3
packages/mindplot/src/components/StandaloneActionDispatcher.ts
View File

@ -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) => {

10
packages/mindplot/src/components/Topic.ts
View File

@ -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,
);
});
}

8
packages/mindplot/src/components/commands/GenericFunctionCommand.ts
View File

@ -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]);

4
packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts
View File

@ -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);

1
packages/mindplot/src/components/layout/LayoutManager.ts
View File

@ -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';

6
packages/mindplot/src/components/model/FeatureModel.ts
View File

@ -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;
}
}

10
packages/mindplot/src/components/model/INodeModel.ts
View File

@ -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;
}
}

6
packages/mindplot/src/components/model/RelationshipModel.ts
View File

@ -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;
}
}

37
packages/mindplot/src/components/widget/Menu.ts
View File

@ -39,9 +39,6 @@ class Menu extends IMenu {
// Create panels ...
const designerModel = designer.getModel();
const fontFamilyBtn = $('#fontFamily');
if (fontFamilyBtn) {
const fontFamilyModel = {
getValue() {
const nodes = designerModel.filterSelectedTopics();
@ -63,10 +60,7 @@ class Menu extends IMenu {
};
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();
@ -88,10 +82,7 @@ class Menu extends IMenu {
};
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();
@ -112,10 +103,7 @@ class Menu extends IMenu {
};
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() {
@ -127,11 +115,7 @@ class Menu extends IMenu {
};
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();
@ -152,11 +136,7 @@ class Menu extends IMenu {
};
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();
@ -177,11 +157,7 @@ class Menu extends IMenu {
};
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;
@ -202,7 +178,6 @@ class Menu extends IMenu {
};
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'));
}
// Account dialog ...
const accountSettings = $('#account');
@ -367,10 +332,10 @@ class Menu extends IMenu {
});
this._toolbarElems.push(new AccountSettingsPanel('account'));
Menu._registerTooltip('account', `${global.accountEmail}`);
}
this._registerEvents(designer);
}
}
private _registerEvents(designer: Designer) {
// Register on close events ...

8
packages/webapp/src/classes/client/rest-client/index.ts
View File

@ -616,7 +616,7 @@ export default class RestClient implements Client {
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:

23
packages/webapp/src/components/editor-page/EditorOptionsBuider.ts
View File

@ -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;
}
}

38
packages/webapp/src/components/editor-page/index.tsx
View File

@ -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 ? (
<>