diff --git a/packages/editor/src/classes/bootstrap/BootstrapWidgetManager.ts b/packages/editor/src/classes/bootstrap/BootstrapWidgetManager.ts new file mode 100644 index 00000000..d3ce35a1 --- /dev/null +++ b/packages/editor/src/classes/bootstrap/BootstrapWidgetManager.ts @@ -0,0 +1,90 @@ +import { + WidgetManager, + Topic, + LinkModel, + LinkIcon, + NoteModel, + NoteIcon, + $msg, +} from '@wisemapping/mindplot'; +import LinkIconTooltip from './LinkIconTooltip'; +import LinkEditor from './LinkEditor'; +import FloatingTip from './FloatingTip'; +import NoteEditor from './NoteEditor'; +import $ from 'jquery'; + +export default class BootstrapWidgetManager extends WidgetManager { + createTooltipForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) { + const htmlImage = linkIcon.getImage().peer; + const toolTip = new LinkIconTooltip(linkIcon); + linkIcon.addEvent('mouseleave', (event) => { + setTimeout(() => { + if (!$('#linkPopover:hover').length) { + toolTip.hide(); + } + event.stopPropagation(); + }, 100); + }); + $(htmlImage._native).mouseenter(() => { + toolTip.show(); + }); + } + + showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) { + const editorModel = { + getValue(): string { + return topic.getLinkValue(); + }, + setValue(value: string) { + topic.setLinkValue(value); + }, + }; + topic.closeEditors(); + const editor = new LinkEditor(editorModel); + editor.show(); + } + + private _buildTooltipContentForNote(noteModel: NoteModel): JQuery { + if ($('body').find('#textPopoverNote').length === 1) { + const text = $('body').find('#textPopoverNote'); + text.text(noteModel.getText()); + return text; + } + const result = $('
').css({ padding: '5px' }); + + const text = $('
').text(noteModel.getText()).css({ + 'white-space': 'pre-wrap', + 'word-wrap': 'break-word', + }); + result.append(text); + return result; + } + + createTooltipForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) { + const htmlImage = noteIcon.getImage().peer; + const me = this; + const toolTip = new FloatingTip($(htmlImage._native), { + title: $msg('NOTE'), + content() { + return me._buildTooltipContentForNote(noteModel); + }, + html: true, + placement: 'bottom', + destroyOnExit: true, + }); + } + + showEditorForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) { + const editorModel = { + getValue(): string { + return topic.getNoteValue(); + }, + setValue(value: string) { + topic.setNoteValue(value); + }, + }; + topic.closeEditors(); + const editor = new NoteEditor(editorModel); + editor.show(); + } +} diff --git a/packages/mindplot/src/components/widget/FloatingTip.ts b/packages/editor/src/classes/bootstrap/FloatingTip.ts similarity index 98% rename from packages/mindplot/src/components/widget/FloatingTip.ts rename to packages/editor/src/classes/bootstrap/FloatingTip.ts index e613737b..54abfd01 100644 --- a/packages/mindplot/src/components/widget/FloatingTip.ts +++ b/packages/editor/src/classes/bootstrap/FloatingTip.ts @@ -16,7 +16,7 @@ * limitations under the License. */ import merge from 'lodash/merge'; -import Events from '../Events'; +import Events from '../menu/Events'; const defaultOptions = { animation: true, diff --git a/packages/mindplot/src/components/widget/LinkEditor.ts b/packages/editor/src/classes/bootstrap/LinkEditor.ts similarity index 98% rename from packages/mindplot/src/components/widget/LinkEditor.ts rename to packages/editor/src/classes/bootstrap/LinkEditor.ts index 06c70e95..8316e532 100644 --- a/packages/mindplot/src/components/widget/LinkEditor.ts +++ b/packages/editor/src/classes/bootstrap/LinkEditor.ts @@ -17,8 +17,8 @@ */ import $ from 'jquery'; import { $assert } from '@wisemapping/core-js'; -import { $msg } from '../Messages'; -import BootstrapDialog from './bootstrap/BootstrapDialog'; +import { $msg } from '@wisemapping/mindplot'; +import BootstrapDialog from './BootstrapDialog'; interface LinkEditorModel { getValue(): string; diff --git a/packages/mindplot/src/components/widget/LinkIconTooltip.ts b/packages/editor/src/classes/bootstrap/LinkIconTooltip.ts similarity index 92% rename from packages/mindplot/src/components/widget/LinkIconTooltip.ts rename to packages/editor/src/classes/bootstrap/LinkIconTooltip.ts index 31c1a215..047adcca 100644 --- a/packages/mindplot/src/components/widget/LinkIconTooltip.ts +++ b/packages/editor/src/classes/bootstrap/LinkIconTooltip.ts @@ -17,9 +17,9 @@ */ import { $assert } from '@wisemapping/core-js'; import $ from 'jquery'; -import LinkIcon from '../LinkIcon'; -import LinkModel from '../model/LinkModel'; -import { $msg } from '../Messages'; +import { LinkIcon } from '@wisemapping/mindplot'; +import { LinkModel } from '@wisemapping/mindplot'; +import { $msg } from '@wisemapping/mindplot'; import FloatingTip from './FloatingTip'; class LinkIconTooltip extends FloatingTip { @@ -56,7 +56,7 @@ class LinkIconTooltip extends FloatingTip { target: '_blank', }); - link.append(linkText); + link.html(linkText); result.append(link); return result; } diff --git a/packages/mindplot/src/components/widget/NoteEditor.ts b/packages/editor/src/classes/bootstrap/NoteEditor.ts similarity index 98% rename from packages/mindplot/src/components/widget/NoteEditor.ts rename to packages/editor/src/classes/bootstrap/NoteEditor.ts index b7691e49..765ce26d 100644 --- a/packages/mindplot/src/components/widget/NoteEditor.ts +++ b/packages/editor/src/classes/bootstrap/NoteEditor.ts @@ -18,7 +18,7 @@ import { $assert } from '@wisemapping/core-js'; import $ from 'jquery'; import BootstrapDialog from '../../../../editor/src/classes/bootstrap/BootstrapDialog'; -import { $msg } from '../Messages'; +import { $msg } from '@wisemapping/mindplot'; interface NoteEditorModel { getValue(): string; diff --git a/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js b/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js index 58cdd83d..7c3ce051 100644 --- a/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js +++ b/packages/editor/src/classes/menu/KeyboardShortcutTooltip.js @@ -17,7 +17,7 @@ */ import $ from 'jquery'; import { $assert } from '@wisemapping/core-js'; -import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip'; +import FloatingTip from '../bootstrap/FloatingTip'; class KeyboardShortcutTooltip extends FloatingTip { constructor(buttonElem, text) { diff --git a/packages/editor/src/classes/menu/ToolbarPaneItem.js b/packages/editor/src/classes/menu/ToolbarPaneItem.js index 97c0ba37..4dbb54f7 100644 --- a/packages/editor/src/classes/menu/ToolbarPaneItem.js +++ b/packages/editor/src/classes/menu/ToolbarPaneItem.js @@ -17,7 +17,7 @@ */ import { $assert } from '@wisemapping/core-js'; import ToolbarItem from './ToolbarItem'; -import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip'; +import FloatingTip from '../bootstrap/FloatingTip'; class ToolbarPaneItem extends ToolbarItem { constructor(buttonId, model, delayInit) { diff --git a/packages/editor/src/global-styled.css b/packages/editor/src/global-styled.css index 3d7950fb..81ba233a 100644 --- a/packages/editor/src/global-styled.css +++ b/packages/editor/src/global-styled.css @@ -22,21 +22,6 @@ body { height: 100%; } -div#mindplot { - position: relative; - top: 50px; - left: 0; - width: 100%; - height: 100%; - border: 0; - overflow: hidden; - opacity: 1; - background-color: #f2f2f2; - background-image: linear-gradient(#ebe9e7 1px, transparent 1px), - linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px); - background-size: 50px 50px; -} - .notesTip { background-color: #dfcf3c; padding: 5px 15px; diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index 37e4fd41..84b9f4ac 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Toolbar, { ToolbarActionType } from './components/toolbar'; import Footer from './components/footer'; import { IntlProvider } from 'react-intl'; @@ -10,10 +10,23 @@ import { Designer, DesignerKeyboard, EditorRenderMode, + MindplotWebComponentInterface, + Mindmap, + MockPersistenceManager, + LocalStorageManager, + RESTPersistenceManager, + TextExporterFactory, + ImageExporterFactory, + Exporter, + Importer, + TextImporterFactory, } from '@wisemapping/mindplot'; import './global-styled.css'; import I18nMsg from './classes/i18n-msg'; import Menu from './classes/menu/Menu'; +import BootstrapWidgetManager from './classes/bootstrap/BootstrapWidgetManager'; + +require('../../../libraries/bootstrap/js/bootstrap.min'); declare global { // used in mindplot @@ -21,6 +34,14 @@ declare global { var accountEmail: string; } +declare global { + namespace JSX { + interface IntrinsicElements { + ['mindplot-component']: MindplotWebComponentInterface; + } + } +} + export type EditorOptions = { mode: EditorRenderMode; locale: string; @@ -31,6 +52,23 @@ export type EditorOptions = { enableKeyboardEvents: boolean; }; +export { + PersistenceManager, + DesignerOptionsBuilder, + Designer, + DesignerKeyboard, + EditorRenderMode, + Mindmap, + MockPersistenceManager, + LocalStorageManager, + RESTPersistenceManager, + TextExporterFactory, + ImageExporterFactory, + Exporter, + Importer, + TextImporterFactory, +}; + export type EditorProps = { mapId: string; options: EditorOptions; @@ -41,22 +79,21 @@ export type EditorProps = { const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: EditorProps) => { const [isMobile, setIsMobile] = useState(undefined); + const mindplotComponent: any = useRef(); useEffect(() => { // Change page title ... document.title = `${options.mapTitle} | WiseMapping `; // Load mindmap ... + const designer = onLoadDesigner(mapId, options, persistenceManager); // Has extended actions been customized ... if (onLoad) { onLoad(designer); } - // Load mindmap ... - const instance = PersistenceManager.getInstance(); - const mindmap = instance.load(mapId); - designer.loadMap(mindmap); + mindplotComponent.current.loadMap(mapId); setIsMobile(checkMobile()); @@ -89,17 +126,10 @@ const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: Editor options: EditorOptions, persistenceManager: PersistenceManager, ): Designer => { - const buildOptions = DesignerOptionsBuilder.buildOptions({ - persistenceManager, - mode: options.mode, - mapId: mapId, - container: 'mindplot', - zoom: options.zoom, - locale: options.locale, - }); + mindplotComponent.current.buildDesigner(persistenceManager, new BootstrapWidgetManager()); // Build designer ... - const result = buildDesigner(buildOptions); + const result = mindplotComponent.current && mindplotComponent.current.getDesigner(); // Register toolbar event ... if ( @@ -132,7 +162,11 @@ const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: Editor )} -
+