From f84ccfdcbd597492a3639143923a9aeb6765560b Mon Sep 17 00:00:00 2001 From: Matias Arriola Date: Mon, 17 Jan 2022 15:17:44 -0300 Subject: [PATCH] Add editor route and component --- .../mindplot/src/components/widget/Menu.ts | 78 ------------ packages/webapp/src/app.tsx | 7 +- .../src/components/maps-page/editor/index.tsx | 62 ++++++++++ .../components/maps-page/editor/toolbar.tsx | 112 ++++++++++++++++++ 4 files changed, 179 insertions(+), 80 deletions(-) create mode 100644 packages/webapp/src/components/maps-page/editor/index.tsx create mode 100644 packages/webapp/src/components/maps-page/editor/toolbar.tsx diff --git a/packages/mindplot/src/components/widget/Menu.ts b/packages/mindplot/src/components/widget/Menu.ts index 7e1127b2..62f43a39 100644 --- a/packages/mindplot/src/components/widget/Menu.ts +++ b/packages/mindplot/src/components/widget/Menu.ts @@ -18,7 +18,6 @@ */ import $ from 'jquery'; import { $msg } from '../Messages'; -import BootstrapDialogRequest from '../libraries/bootstrap/BootstrapDialogRequest'; import IMenu from './IMenu'; import FontFamilyPanel from './FontFamilyPanel'; import FontSizePanel from './FontSizePanel'; @@ -38,17 +37,6 @@ class Menu extends IMenu { const widgetsBaseUrl = `${baseUrl}css/widget`; - // Stop event propagation ... - $(`#${this._containerId}`).bind('click', (event) => { - event.stopPropagation(); - return false; - }); - - $(`#${this._containerId}`).bind('dblclick', (event) => { - event.stopPropagation(); - return false; - }); - // Create panels ... const designerModel = designer.getModel(); @@ -216,38 +204,8 @@ class Menu extends IMenu { Menu._registerTooltip('fontColor', $msg('FONT_COLOR')); } - this._addButton('export', false, false, () => { - // @Todo: this must be configured in the dialog... - const formatExtension = 'jpg'; - - designer.export(formatExtension) - .then((url: string) => { - // Create hidden anchor to force download ... - const anchor: HTMLAnchorElement = document.createElement('a'); - anchor.style.display = 'display: none'; - anchor.download = `${mapId}.${formatExtension}`; - anchor.href = url; - document.body.appendChild(anchor); - - // Trigger click ... - anchor.click(); - - // Clean up ... - URL.revokeObjectURL(url); - document.body.removeChild(anchor); - }); - - // Create anchor element ... - }); - Menu._registerTooltip('export', $msg('EXPORT')); - this._addButton('print', false, false, () => { - this.save(saveElem, designer, false); - const urlPrefix = window.location.href.substring(0, window.location.href.lastIndexOf('c/maps/')); - window.open(`${urlPrefix}c/maps/${mapId}/print`); - }); - Menu._registerTooltip('print', $msg('PRINT')); this._addButton('zoom-plus', false, false, () => { @@ -367,42 +325,6 @@ class Menu extends IMenu { Menu._registerTooltip('discard', $msg('DISCARD_CHANGES')); } - const shareElem = $('#shareIt'); - if (shareElem.length !== 0) { - this._addButton('shareIt', false, false, () => { - new BootstrapDialogRequest(`c/maps/${mapId}/sharef`, $msg('COLLABORATE'), { - closeButton: true, - cancelButton: true, - }); - designer.onObjectFocusEvent(); - }); - Menu._registerTooltip('shareIt', $msg('COLLABORATE')); - } - - const publishElem = $('#publishIt'); - if (publishElem.length !== 0) { - this._addButton('publishIt', false, false, () => { - new BootstrapDialogRequest(`c/maps/${mapId}/publishf`, $msg('PUBLISH'), { - closeButton: true, - cancelButton: true, - }); - designer.onObjectFocusEvent(); - }); - Menu._registerTooltip('publishIt', $msg('PUBLISH')); - } - - const historyElem = $('#history'); - if (historyElem.length !== 0) { - this._addButton('history', false, false, () => { - new BootstrapDialogRequest(`c/maps/${mapId}/historyf`, $msg('HISTORY'), { - closeButton: true, - cancelButton: true, - }); - designer.onObjectFocusEvent(); - }); - Menu._registerTooltip('history', $msg('HISTORY')); - } - // Keyboard Shortcuts Action ... const keyboardShortcut = $('#keyboardShortcuts'); if (keyboardShortcut.length !== 0) { diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx index 1d403f0e..aebc8d42 100644 --- a/packages/webapp/src/app.tsx +++ b/packages/webapp/src/app.tsx @@ -15,6 +15,7 @@ import MapsPage from './components/maps-page'; import CssBaseline from '@material-ui/core/CssBaseline'; import { ThemeProvider } from '@material-ui/core/styles'; import GoogleAnalytics from 'react-ga'; +import Editor from './components/maps-page/editor'; // Google Analytics Initialization. GoogleAnalytics.initialize('UA-0000000-0'); @@ -31,7 +32,6 @@ const queryClient = new QueryClient({ const App = (): ReactElement => { const appi18n = new AppI18n(); const locale = appi18n.getBrowserLocale(); - return locale.message ? ( @@ -62,9 +62,12 @@ const App = (): ReactElement => { path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} /> - + + + + diff --git a/packages/webapp/src/components/maps-page/editor/index.tsx b/packages/webapp/src/components/maps-page/editor/index.tsx new file mode 100644 index 00000000..fe106076 --- /dev/null +++ b/packages/webapp/src/components/maps-page/editor/index.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import Toolbar from './toolbar'; +import ActionDispatcher from '../action-dispatcher'; +import { ActionType } from '../action-chooser'; + + +// this component is a hack. In order to work, we need to load externally the "loader.js" script from mindplot +// TODO: create the Editor component in the editor package, with its own build and include it instead +export default function Editor(): React.ReactElement { + const memoryPersistence = false; + const readOnlyMode = false; + const mapId = 1; + const [activeDialog, setActiveDialog] = React.useState(null); + + return <> + +
+
+
+ +
+
+ + +
+
+ +
+
+ +
+ { + memoryPersistence &&
+

TRY_WELCOME

+

TRY_WELCOME_DESC

+
+ SIGN_UP
+ +
+ } + { + activeDialog && + setActiveDialog(null)} + mapsId={[mapId]} + /> + } + +} + diff --git a/packages/webapp/src/components/maps-page/editor/toolbar.tsx b/packages/webapp/src/components/maps-page/editor/toolbar.tsx new file mode 100644 index 00000000..4e008c4f --- /dev/null +++ b/packages/webapp/src/components/maps-page/editor/toolbar.tsx @@ -0,0 +1,112 @@ +import React from 'react'; +import { ActionType } from '../action-chooser'; + +export type ToolbarPropsType = { + memoryPersistence: boolean; + readOnlyMode: boolean; + onAction: (action: ActionType) => void; +}; + +export default function Toolbar({ + memoryPersistence, + readOnlyMode, + onAction, +}: ToolbarPropsType): React.ReactElement { + return ( +
+
+ +
+ {!memoryPersistence && ( +
+
+ +
+
+ )} + {!readOnlyMode && ( + <> +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+ +
+ +
+
+
+ + )} + {!memoryPersistence && ( +
+
onAction('export')}> + +
+
onAction('publish')}> + +
+
onAction('history')}> + +
+
onAction('print')}> + +
+
+ +
+
onAction('share')}> + SHARE +
+
+ )} +
+ ); +}