mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-14 03:07:57 +01:00
Merged in mindplot-webcomponent (pull request #57)
Mindplot webcomponent * styles in js file * editor now uses bootstrap widget manager * fix console error: preventDefault on pasive events * Mode as webcomponent parámeter. Rename of init method * fix merge * Mindplot webcomponent documentation * fix * remove comments * delete comments * Merged in Alejandro-Raiczyk/just-details-1661445571189 (pull request #56) just details Approved-by: Paulo Veiga
This commit is contained in:
parent
f6d04523b8
commit
2370faea62
@ -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 = $('<div id="textPopoverNote"></div>').css({ padding: '5px' });
|
||||||
|
|
||||||
|
const text = $('<div></div>').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();
|
||||||
|
}
|
||||||
|
}
|
@ -16,7 +16,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import merge from 'lodash/merge';
|
import merge from 'lodash/merge';
|
||||||
import Events from '../Events';
|
import Events from '../menu/Events';
|
||||||
|
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
animation: true,
|
animation: true,
|
@ -17,8 +17,8 @@
|
|||||||
*/
|
*/
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import { $msg } from '../Messages';
|
import { $msg } from '@wisemapping/mindplot';
|
||||||
import BootstrapDialog from './bootstrap/BootstrapDialog';
|
import BootstrapDialog from './BootstrapDialog';
|
||||||
|
|
||||||
interface LinkEditorModel {
|
interface LinkEditorModel {
|
||||||
getValue(): string;
|
getValue(): string;
|
@ -17,9 +17,9 @@
|
|||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import LinkIcon from '../LinkIcon';
|
import { LinkIcon } from '@wisemapping/mindplot';
|
||||||
import LinkModel from '../model/LinkModel';
|
import { LinkModel } from '@wisemapping/mindplot';
|
||||||
import { $msg } from '../Messages';
|
import { $msg } from '@wisemapping/mindplot';
|
||||||
import FloatingTip from './FloatingTip';
|
import FloatingTip from './FloatingTip';
|
||||||
|
|
||||||
class LinkIconTooltip extends FloatingTip {
|
class LinkIconTooltip extends FloatingTip {
|
||||||
@ -56,7 +56,7 @@ class LinkIconTooltip extends FloatingTip {
|
|||||||
target: '_blank',
|
target: '_blank',
|
||||||
});
|
});
|
||||||
|
|
||||||
link.append(linkText);
|
link.html(linkText);
|
||||||
result.append(link);
|
result.append(link);
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
@ -18,7 +18,7 @@
|
|||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import BootstrapDialog from '../../../../editor/src/classes/bootstrap/BootstrapDialog';
|
import BootstrapDialog from '../../../../editor/src/classes/bootstrap/BootstrapDialog';
|
||||||
import { $msg } from '../Messages';
|
import { $msg } from '@wisemapping/mindplot';
|
||||||
|
|
||||||
interface NoteEditorModel {
|
interface NoteEditorModel {
|
||||||
getValue(): string;
|
getValue(): string;
|
@ -17,7 +17,7 @@
|
|||||||
*/
|
*/
|
||||||
import $ from 'jquery';
|
import $ from 'jquery';
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip';
|
import FloatingTip from '../bootstrap/FloatingTip';
|
||||||
|
|
||||||
class KeyboardShortcutTooltip extends FloatingTip {
|
class KeyboardShortcutTooltip extends FloatingTip {
|
||||||
constructor(buttonElem, text) {
|
constructor(buttonElem, text) {
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import ToolbarItem from './ToolbarItem';
|
import ToolbarItem from './ToolbarItem';
|
||||||
import FloatingTip from '@wisemapping/mindplot/src/components/widget/FloatingTip';
|
import FloatingTip from '../bootstrap/FloatingTip';
|
||||||
|
|
||||||
class ToolbarPaneItem extends ToolbarItem {
|
class ToolbarPaneItem extends ToolbarItem {
|
||||||
constructor(buttonId, model, delayInit) {
|
constructor(buttonId, model, delayInit) {
|
||||||
|
@ -22,21 +22,6 @@ body {
|
|||||||
height: 100%;
|
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 {
|
.notesTip {
|
||||||
background-color: #dfcf3c;
|
background-color: #dfcf3c;
|
||||||
padding: 5px 15px;
|
padding: 5px 15px;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import Toolbar, { ToolbarActionType } from './components/toolbar';
|
import Toolbar, { ToolbarActionType } from './components/toolbar';
|
||||||
import Footer from './components/footer';
|
import Footer from './components/footer';
|
||||||
import { IntlProvider } from 'react-intl';
|
import { IntlProvider } from 'react-intl';
|
||||||
@ -10,10 +10,23 @@ import {
|
|||||||
Designer,
|
Designer,
|
||||||
DesignerKeyboard,
|
DesignerKeyboard,
|
||||||
EditorRenderMode,
|
EditorRenderMode,
|
||||||
|
MindplotWebComponentInterface,
|
||||||
|
Mindmap,
|
||||||
|
MockPersistenceManager,
|
||||||
|
LocalStorageManager,
|
||||||
|
RESTPersistenceManager,
|
||||||
|
TextExporterFactory,
|
||||||
|
ImageExporterFactory,
|
||||||
|
Exporter,
|
||||||
|
Importer,
|
||||||
|
TextImporterFactory,
|
||||||
} from '@wisemapping/mindplot';
|
} from '@wisemapping/mindplot';
|
||||||
import './global-styled.css';
|
import './global-styled.css';
|
||||||
import I18nMsg from './classes/i18n-msg';
|
import I18nMsg from './classes/i18n-msg';
|
||||||
import Menu from './classes/menu/Menu';
|
import Menu from './classes/menu/Menu';
|
||||||
|
import BootstrapWidgetManager from './classes/bootstrap/BootstrapWidgetManager';
|
||||||
|
|
||||||
|
require('../../../libraries/bootstrap/js/bootstrap.min');
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
// used in mindplot
|
// used in mindplot
|
||||||
@ -21,6 +34,14 @@ declare global {
|
|||||||
var accountEmail: string;
|
var accountEmail: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
['mindplot-component']: MindplotWebComponentInterface;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export type EditorOptions = {
|
export type EditorOptions = {
|
||||||
mode: EditorRenderMode;
|
mode: EditorRenderMode;
|
||||||
locale: string;
|
locale: string;
|
||||||
@ -31,6 +52,23 @@ export type EditorOptions = {
|
|||||||
enableKeyboardEvents: boolean;
|
enableKeyboardEvents: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export {
|
||||||
|
PersistenceManager,
|
||||||
|
DesignerOptionsBuilder,
|
||||||
|
Designer,
|
||||||
|
DesignerKeyboard,
|
||||||
|
EditorRenderMode,
|
||||||
|
Mindmap,
|
||||||
|
MockPersistenceManager,
|
||||||
|
LocalStorageManager,
|
||||||
|
RESTPersistenceManager,
|
||||||
|
TextExporterFactory,
|
||||||
|
ImageExporterFactory,
|
||||||
|
Exporter,
|
||||||
|
Importer,
|
||||||
|
TextImporterFactory,
|
||||||
|
};
|
||||||
|
|
||||||
export type EditorProps = {
|
export type EditorProps = {
|
||||||
mapId: string;
|
mapId: string;
|
||||||
options: EditorOptions;
|
options: EditorOptions;
|
||||||
@ -41,22 +79,21 @@ export type EditorProps = {
|
|||||||
|
|
||||||
const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: EditorProps) => {
|
const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: EditorProps) => {
|
||||||
const [isMobile, setIsMobile] = useState(undefined);
|
const [isMobile, setIsMobile] = useState(undefined);
|
||||||
|
const mindplotComponent: any = useRef();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Change page title ...
|
// Change page title ...
|
||||||
document.title = `${options.mapTitle} | WiseMapping `;
|
document.title = `${options.mapTitle} | WiseMapping `;
|
||||||
|
|
||||||
// Load mindmap ...
|
// Load mindmap ...
|
||||||
|
|
||||||
const designer = onLoadDesigner(mapId, options, persistenceManager);
|
const designer = onLoadDesigner(mapId, options, persistenceManager);
|
||||||
// Has extended actions been customized ...
|
// Has extended actions been customized ...
|
||||||
if (onLoad) {
|
if (onLoad) {
|
||||||
onLoad(designer);
|
onLoad(designer);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Load mindmap ...
|
mindplotComponent.current.loadMap(mapId);
|
||||||
const instance = PersistenceManager.getInstance();
|
|
||||||
const mindmap = instance.load(mapId);
|
|
||||||
designer.loadMap(mindmap);
|
|
||||||
|
|
||||||
setIsMobile(checkMobile());
|
setIsMobile(checkMobile());
|
||||||
|
|
||||||
@ -89,17 +126,10 @@ const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: Editor
|
|||||||
options: EditorOptions,
|
options: EditorOptions,
|
||||||
persistenceManager: PersistenceManager,
|
persistenceManager: PersistenceManager,
|
||||||
): Designer => {
|
): Designer => {
|
||||||
const buildOptions = DesignerOptionsBuilder.buildOptions({
|
mindplotComponent.current.buildDesigner(persistenceManager, new BootstrapWidgetManager());
|
||||||
persistenceManager,
|
|
||||||
mode: options.mode,
|
|
||||||
mapId: mapId,
|
|
||||||
container: 'mindplot',
|
|
||||||
zoom: options.zoom,
|
|
||||||
locale: options.locale,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Build designer ...
|
// Build designer ...
|
||||||
const result = buildDesigner(buildOptions);
|
const result = mindplotComponent.current && mindplotComponent.current.getDesigner();
|
||||||
|
|
||||||
// Register toolbar event ...
|
// Register toolbar event ...
|
||||||
if (
|
if (
|
||||||
@ -132,7 +162,11 @@ const Editor = ({ mapId, options, persistenceManager, onAction, onLoad }: Editor
|
|||||||
<Toolbar editorMode={options.mode} onAction={onAction} />
|
<Toolbar editorMode={options.mode} onAction={onAction} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div id="mindplot" style={mindplotStyle} className="wise-editor"></div>
|
<mindplot-component
|
||||||
|
ref={mindplotComponent}
|
||||||
|
id="mindmap-comp"
|
||||||
|
mode={options.mode}
|
||||||
|
></mindplot-component>
|
||||||
<div id="mindplot-tooltips" className="wise-editor"></div>
|
<div id="mindplot-tooltips" className="wise-editor"></div>
|
||||||
<Footer editorMode={options.mode} isMobile={isMobile} />
|
<Footer editorMode={options.mode} isMobile={isMobile} />
|
||||||
</IntlProvider>
|
</IntlProvider>
|
||||||
|
@ -22,7 +22,7 @@ import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
|
|||||||
|
|
||||||
const initialization = (designer: Designer) => {
|
const initialization = (designer: Designer) => {
|
||||||
designer.addEvent('loadSuccess', () => {
|
designer.addEvent('loadSuccess', () => {
|
||||||
const elem = document.getElementById('mindplot');
|
const elem = document.getElementById('mindmap-comp');
|
||||||
if (elem) {
|
if (elem) {
|
||||||
elem.classList.add('ready');
|
elem.classList.add('ready');
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,78 @@
|
|||||||
# WiseMapping Mindplot
|
# WiseMapping Mindplot
|
||||||
|
|
||||||
WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saves mindmaps.
|
WiseMapping Mindplot module is the core mind map rerendering of WiseMapping. This lighway library allows eithe edition and visualization of saved mindmaps.
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
A WebComponent implementation for mindplot designer is available.
|
||||||
|
This component is registered as mindplot-component in customElements API. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
|
||||||
|
For use it you need to import minplot.js and put in your DOM a <mindplot-component id="mindplot-comp"/> tag. In order to create a Designer on it you need to call its buildDesigner method. Maps can be loaded through loadMap method.
|
||||||
|
|
||||||
|
#### Code example
|
||||||
|
|
||||||
|
```
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src='mindplot.js'></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<mindmap-comp id='mindmap-comp' mode="viewonly"></mindmap-comp>
|
||||||
|
<script>
|
||||||
|
var webComponent = document.getElementById('mindmap-comp');
|
||||||
|
webComponent.buildDesigner(persistence, widget);
|
||||||
|
webComponent.loadMap("1");
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
Optionaly you can use your own presistence manager and widget manager.
|
||||||
|
If you don't have special requirements you can use the defaults.
|
||||||
|
|
||||||
|
```
|
||||||
|
var persistence = new LocalStorageManager(
|
||||||
|
'map.xml',
|
||||||
|
false, false
|
||||||
|
);
|
||||||
|
var widget = new MyAwesomeWidgetManager();
|
||||||
|
// then build the designer with these params
|
||||||
|
webComponent.buildDesigner(persistence, widget);
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage with React framework
|
||||||
|
|
||||||
|
To use the web component in your JSX code, first you need to register it in the IntrinsicElements interface using provided MindplotWebComponentInterface
|
||||||
|
|
||||||
|
#### TypeScript example
|
||||||
|
```
|
||||||
|
import { MindplotWebComponentInterface } from '@wisemapping/mindplot';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
interface IntrinsicElements {
|
||||||
|
['mindplot-component']: MindplotWebComponentInterface;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const App = ()=>{
|
||||||
|
const mindplotComponent: any = useRef();
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
mindplotComponent.current.buildDesigner();
|
||||||
|
mindplotComponent.current.loadMap("map_id");
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (<div>
|
||||||
|
<mindplot-component
|
||||||
|
ref={mindplotComponent}
|
||||||
|
id="mindmap-comp"
|
||||||
|
mode={options.mode}
|
||||||
|
></mindplot-component>
|
||||||
|
</div>);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
Check out the examples located in `test/playground/map-render/js` for some hints on high level usage. You can browse them by running `yarn playground`.
|
Check out the examples located in `test/playground/map-render/js` for some hints on high level usage. You can browse them by running `yarn playground`.
|
||||||
|
@ -56,6 +56,7 @@ import { DesignerOptions } from './DesignerOptionsBuilder';
|
|||||||
import DragTopic from './DragTopic';
|
import DragTopic from './DragTopic';
|
||||||
import CentralTopic from './CentralTopic';
|
import CentralTopic from './CentralTopic';
|
||||||
import FeatureType from './model/FeatureType';
|
import FeatureType from './model/FeatureType';
|
||||||
|
import WidgetManager from './WidgetManager';
|
||||||
|
|
||||||
class Designer extends Events {
|
class Designer extends Events {
|
||||||
private _mindmap: Mindmap;
|
private _mindmap: Mindmap;
|
||||||
@ -882,7 +883,8 @@ class Designer extends Events {
|
|||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
const topic = model.selectedTopic();
|
const topic = model.selectedTopic();
|
||||||
if (topic) {
|
if (topic) {
|
||||||
topic.showLinkEditor();
|
const manager = WidgetManager.getInstance();
|
||||||
|
manager.showEditorForLink(topic, null, null);
|
||||||
this.onObjectFocusEvent();
|
this.onObjectFocusEvent();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -891,7 +893,8 @@ class Designer extends Events {
|
|||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
const topic = model.selectedTopic();
|
const topic = model.selectedTopic();
|
||||||
if (topic) {
|
if (topic) {
|
||||||
topic.showNoteEditor();
|
const manager = WidgetManager.getInstance();
|
||||||
|
manager.showEditorForNote(topic, null, null);
|
||||||
this.onObjectFocusEvent();
|
this.onObjectFocusEvent();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -20,11 +20,12 @@ import $ from 'jquery';
|
|||||||
import PersistenceManager from './PersistenceManager';
|
import PersistenceManager from './PersistenceManager';
|
||||||
import Designer from './Designer';
|
import Designer from './Designer';
|
||||||
import { DesignerOptions } from './DesignerOptionsBuilder';
|
import { DesignerOptions } from './DesignerOptionsBuilder';
|
||||||
|
import WidgetManager from './WidgetManager';
|
||||||
|
|
||||||
let designer: Designer;
|
let designer: Designer;
|
||||||
|
|
||||||
export function buildDesigner(options: DesignerOptions): Designer {
|
export function buildDesigner(options: DesignerOptions): Designer {
|
||||||
const divContainer = $(`#${options.container}`);
|
const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`);
|
||||||
$assert(divContainer, 'container could not be null');
|
$assert(divContainer, 'container could not be null');
|
||||||
|
|
||||||
// Register load events ...
|
// Register load events ...
|
||||||
@ -34,7 +35,8 @@ export function buildDesigner(options: DesignerOptions): Designer {
|
|||||||
const persistence = options.persistenceManager;
|
const persistence = options.persistenceManager;
|
||||||
$assert(persistence, 'persistence must be defined');
|
$assert(persistence, 'persistence must be defined');
|
||||||
PersistenceManager.init(persistence);
|
PersistenceManager.init(persistence);
|
||||||
|
const widgetManager = options.widgetManager ? options.widgetManager : new WidgetManager();
|
||||||
|
WidgetManager.init(widgetManager);
|
||||||
return designer;
|
return designer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,14 +17,17 @@
|
|||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import EditorRenderMode from './EditorRenderMode';
|
import EditorRenderMode from './EditorRenderMode';
|
||||||
|
import WidgetManager from './WidgetManager';
|
||||||
import PersistenceManager from './PersistenceManager';
|
import PersistenceManager from './PersistenceManager';
|
||||||
|
|
||||||
export type DesignerOptions = {
|
export type DesignerOptions = {
|
||||||
zoom: number;
|
zoom: number;
|
||||||
mode: EditorRenderMode;
|
mode: EditorRenderMode;
|
||||||
mapId?: string;
|
mapId?: string;
|
||||||
|
divContainer?: HTMLElement;
|
||||||
container: string;
|
container: string;
|
||||||
persistenceManager?: PersistenceManager;
|
persistenceManager?: PersistenceManager;
|
||||||
|
widgetManager?: WidgetManager;
|
||||||
saveOnLoad?: boolean;
|
saveOnLoad?: boolean;
|
||||||
locale?: string;
|
locale?: string;
|
||||||
};
|
};
|
||||||
|
@ -16,13 +16,12 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import $ from 'jquery';
|
|
||||||
import Icon from './Icon';
|
import Icon from './Icon';
|
||||||
import LinkIconTooltip from './widget/LinkIconTooltip';
|
|
||||||
import LinksImage from '../../assets/icons/links.svg';
|
import LinksImage from '../../assets/icons/links.svg';
|
||||||
import LinkModel from './model/LinkModel';
|
import LinkModel from './model/LinkModel';
|
||||||
import Topic from './Topic';
|
import Topic from './Topic';
|
||||||
import FeatureModel from './model/FeatureModel';
|
import FeatureModel from './model/FeatureModel';
|
||||||
|
import WidgetManager from './WidgetManager';
|
||||||
|
|
||||||
class LinkIcon extends Icon {
|
class LinkIcon extends Icon {
|
||||||
private _linksModel: FeatureModel;
|
private _linksModel: FeatureModel;
|
||||||
@ -31,8 +30,6 @@ class LinkIcon extends Icon {
|
|||||||
|
|
||||||
private _readOnly: boolean;
|
private _readOnly: boolean;
|
||||||
|
|
||||||
private _tip: LinkIconTooltip;
|
|
||||||
|
|
||||||
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
|
constructor(topic: Topic, linkModel: LinkModel, readOnly: boolean) {
|
||||||
$assert(topic, 'topic can not be null');
|
$assert(topic, 'topic can not be null');
|
||||||
$assert(linkModel, 'linkModel can not be null');
|
$assert(linkModel, 'linkModel can not be null');
|
||||||
@ -47,30 +44,12 @@ class LinkIcon extends Icon {
|
|||||||
|
|
||||||
private _registerEvents() {
|
private _registerEvents() {
|
||||||
this._image.setCursor('pointer');
|
this._image.setCursor('pointer');
|
||||||
this._tip = new LinkIconTooltip(this);
|
|
||||||
|
|
||||||
const me = this;
|
const manager = WidgetManager.getInstance();
|
||||||
|
manager.createTooltipForLink(this._topic, this._linksModel as LinkModel, this);
|
||||||
if (!this._readOnly) {
|
if (!this._readOnly) {
|
||||||
// Add on click event to open the editor ...
|
manager.configureEditorForLink(this._topic, this._linksModel as LinkModel, this);
|
||||||
this.addEvent('click', (event) => {
|
|
||||||
me._tip.hide();
|
|
||||||
me._topic.showLinkEditor();
|
|
||||||
event.stopPropagation();
|
|
||||||
});
|
|
||||||
// FIXME: we shouldn't have timeout of that..
|
|
||||||
this.addEvent('mouseleave', (event) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!$('#linkPopover:hover').length) {
|
|
||||||
me._tip.hide();
|
|
||||||
}
|
|
||||||
event.stopPropagation();
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(this.getImage().peer._native).mouseenter(() => {
|
|
||||||
me._tip.show();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getModel(): FeatureModel {
|
getModel(): FeatureModel {
|
||||||
|
81
packages/mindplot/src/components/MindplotWebComponent.ts
Normal file
81
packages/mindplot/src/components/MindplotWebComponent.ts
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import Designer from './Designer';
|
||||||
|
import buildDesigner from './DesignerBuilder';
|
||||||
|
import DesignerOptionsBuilder from './DesignerOptionsBuilder';
|
||||||
|
import EditorRenderMode from './EditorRenderMode';
|
||||||
|
import LocalStorageManager from './LocalStorageManager';
|
||||||
|
import Mindmap from './model/Mindmap';
|
||||||
|
import PersistenceManager from './PersistenceManager';
|
||||||
|
import WidgetManager from './WidgetManager';
|
||||||
|
import mindplotStyles from './styles/mindplot-styles';
|
||||||
|
|
||||||
|
const defaultPersistenceManager = () => new LocalStorageManager('map.xml', false, false);
|
||||||
|
|
||||||
|
export type MindplotWebComponentInterface = {
|
||||||
|
id: string;
|
||||||
|
mode: string;
|
||||||
|
ref: any;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* WebComponent implementation for minplot designer.
|
||||||
|
* This component is registered as mindplot-component in customElements api. (see https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
|
||||||
|
* For use it you need to import minplot.js and put in your DOM a <mindplot-component/> tag. In order to create a Designer on it you need to call its buildDesigner method. Maps can be loaded throught loadMap method.
|
||||||
|
*/
|
||||||
|
class MindplotWebComponent extends HTMLElement {
|
||||||
|
private _shadowRoot: ShadowRoot;
|
||||||
|
|
||||||
|
private _mindmap: Mindmap;
|
||||||
|
|
||||||
|
private _designer: Designer;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this._shadowRoot = this.attachShadow({ mode: 'open' });
|
||||||
|
const mindplotStylesElement = document.createElement('style');
|
||||||
|
mindplotStylesElement.innerHTML = mindplotStyles;
|
||||||
|
this._shadowRoot.appendChild(mindplotStylesElement);
|
||||||
|
const wrapper = document.createElement('div');
|
||||||
|
wrapper.setAttribute('class', 'wise-editor');
|
||||||
|
wrapper.setAttribute('id', 'mindplot');
|
||||||
|
this._shadowRoot.appendChild(wrapper);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns the designer
|
||||||
|
*/
|
||||||
|
getDesigner(): Designer {
|
||||||
|
return this._designer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build the designer of the component
|
||||||
|
* @param {PersistenceManager} persistence the persistence manager to be used. By default a LocalStorageManager is created
|
||||||
|
* @param {UIManager} widgetManager an UI Manager to override default Designer option.
|
||||||
|
*/
|
||||||
|
buildDesigner(persistence?: PersistenceManager, widgetManager?: WidgetManager) {
|
||||||
|
const editorRenderMode = this.getAttribute('mode') as EditorRenderMode;
|
||||||
|
const persistenceManager = persistence || defaultPersistenceManager();
|
||||||
|
const mode = editorRenderMode || 'viewonly';
|
||||||
|
const options = DesignerOptionsBuilder.buildOptions({
|
||||||
|
persistenceManager,
|
||||||
|
mode,
|
||||||
|
widgetManager,
|
||||||
|
divContainer: this._shadowRoot.getElementById('mindplot'),
|
||||||
|
container: 'mindplot',
|
||||||
|
zoom: 0.85,
|
||||||
|
locale: 'en',
|
||||||
|
});
|
||||||
|
this._designer = buildDesigner(options);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load map in designer throught persistence manager instance
|
||||||
|
* @param id the map id to be loaded.
|
||||||
|
*/
|
||||||
|
loadMap(id: string) {
|
||||||
|
const instance = PersistenceManager.getInstance();
|
||||||
|
this._mindmap = instance.load(id);
|
||||||
|
this._designer.loadMap(this._mindmap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MindplotWebComponent;
|
@ -16,14 +16,12 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
import { $assert } from '@wisemapping/core-js';
|
import { $assert } from '@wisemapping/core-js';
|
||||||
import $ from 'jquery';
|
|
||||||
import { $msg } from './Messages';
|
|
||||||
import Icon from './Icon';
|
import Icon from './Icon';
|
||||||
import NotesImage from '../../assets/icons/notes.svg';
|
import NotesImage from '../../assets/icons/notes.svg';
|
||||||
import Topic from './Topic';
|
import Topic from './Topic';
|
||||||
import NoteModel from './model/NoteModel';
|
import NoteModel from './model/NoteModel';
|
||||||
import FeatureModel from './model/FeatureModel';
|
import FeatureModel from './model/FeatureModel';
|
||||||
import FloatingTip from './widget/FloatingTip';
|
import WidgetManager from './WidgetManager';
|
||||||
|
|
||||||
class NoteIcon extends Icon {
|
class NoteIcon extends Icon {
|
||||||
private _linksModel: NoteModel;
|
private _linksModel: NoteModel;
|
||||||
@ -32,8 +30,6 @@ class NoteIcon extends Icon {
|
|||||||
|
|
||||||
private _readOnly: boolean;
|
private _readOnly: boolean;
|
||||||
|
|
||||||
private _tip: FloatingTip;
|
|
||||||
|
|
||||||
constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
|
constructor(topic: Topic, noteModel: NoteModel, readOnly: boolean) {
|
||||||
$assert(topic, 'topic can not be null');
|
$assert(topic, 'topic can not be null');
|
||||||
|
|
||||||
@ -47,42 +43,12 @@ class NoteIcon extends Icon {
|
|||||||
|
|
||||||
private _registerEvents(): void {
|
private _registerEvents(): void {
|
||||||
this._image.setCursor('pointer');
|
this._image.setCursor('pointer');
|
||||||
const me = this;
|
|
||||||
|
|
||||||
|
const manager = WidgetManager.getInstance();
|
||||||
|
manager.createTooltipForNote(this._topic, this._linksModel as NoteModel, this);
|
||||||
if (!this._readOnly) {
|
if (!this._readOnly) {
|
||||||
// Add on click event to open the editor ...
|
manager.configureEditorForNote(this._topic, this._linksModel as NoteModel, this);
|
||||||
this.addEvent('click', (event) => {
|
|
||||||
me._topic.showNoteEditor();
|
|
||||||
event.stopPropagation();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this._tip = new FloatingTip($(me.getImage().peer._native), {
|
|
||||||
title: $msg('NOTE'),
|
|
||||||
// Content can also be a function of the target element!
|
|
||||||
content() {
|
|
||||||
return me._buildTooltipContent();
|
|
||||||
},
|
|
||||||
html: true,
|
|
||||||
placement: 'bottom',
|
|
||||||
destroyOnExit: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private _buildTooltipContent(): JQuery {
|
|
||||||
if ($('body').find('#textPopoverNote').length === 1) {
|
|
||||||
const text = $('body').find('#textPopoverNote');
|
|
||||||
text.text(this._linksModel.getText());
|
|
||||||
return text;
|
|
||||||
}
|
|
||||||
const result = $('<div id="textPopoverNote"></div>').css({ padding: '5px' });
|
|
||||||
|
|
||||||
const text = $('<div></div>').text(this._linksModel.getText()).css({
|
|
||||||
'white-space': 'pre-wrap',
|
|
||||||
'word-wrap': 'break-word',
|
|
||||||
});
|
|
||||||
result.append(text);
|
|
||||||
return result;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getModel(): FeatureModel {
|
getModel(): FeatureModel {
|
||||||
|
@ -28,9 +28,7 @@ import ConnectionLine from './ConnectionLine';
|
|||||||
import IconGroup from './IconGroup';
|
import IconGroup from './IconGroup';
|
||||||
import EventBus from './layout/EventBus';
|
import EventBus from './layout/EventBus';
|
||||||
import ShirinkConnector from './ShrinkConnector';
|
import ShirinkConnector from './ShrinkConnector';
|
||||||
import NoteEditor from './widget/NoteEditor';
|
|
||||||
import ActionDispatcher from './ActionDispatcher';
|
import ActionDispatcher from './ActionDispatcher';
|
||||||
import LinkEditor from './widget/LinkEditor';
|
|
||||||
|
|
||||||
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
|
import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher';
|
||||||
import { TopicShape } from './model/INodeModel';
|
import { TopicShape } from './model/INodeModel';
|
||||||
@ -732,79 +730,65 @@ abstract class Topic extends NodeGraph {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
showNoteEditor(): void {
|
getNoteValue(): string {
|
||||||
const topicId = this.getId();
|
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
const editorModel = {
|
const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
|
||||||
getValue(): string {
|
let result;
|
||||||
const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
|
if (notes.length > 0) {
|
||||||
let result;
|
result = (notes[0] as NoteModel).getText();
|
||||||
if (notes.length > 0) {
|
}
|
||||||
result = (notes[0] as NoteModel).getText();
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
},
|
|
||||||
|
|
||||||
setValue(value: string) {
|
|
||||||
const dispatcher = ActionDispatcher.getInstance();
|
|
||||||
const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
|
|
||||||
if (!$defined(value)) {
|
|
||||||
const featureId = notes[0].getId();
|
|
||||||
dispatcher.removeFeatureFromTopic(topicId, featureId);
|
|
||||||
} else if (notes.length > 0) {
|
|
||||||
dispatcher.changeFeatureToTopic(topicId, notes[0].getId(), {
|
|
||||||
text: value,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
dispatcher.addFeatureToTopic(topicId, TopicFeatureFactory.Note.id, {
|
|
||||||
text: value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const editor = new NoteEditor(editorModel);
|
|
||||||
this.closeEditors();
|
|
||||||
editor.show();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** opens a dialog where the user can enter or edit an existing link associated with this topic */
|
setNoteValue(value: string) {
|
||||||
showLinkEditor() {
|
|
||||||
const topicId = this.getId();
|
const topicId = this.getId();
|
||||||
const model = this.getModel();
|
const model = this.getModel();
|
||||||
const editorModel = {
|
const dispatcher = ActionDispatcher.getInstance();
|
||||||
getValue(): string {
|
const notes = model.findFeatureByType(TopicFeatureFactory.Note.id);
|
||||||
// @param {mindplot.model.LinkModel[]} links
|
if (!$defined(value)) {
|
||||||
const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
|
const featureId = notes[0].getId();
|
||||||
let result;
|
dispatcher.removeFeatureFromTopic(topicId, featureId);
|
||||||
if (links.length > 0) {
|
} else if (notes.length > 0) {
|
||||||
result = (links[0] as LinkModel).getUrl();
|
dispatcher.changeFeatureToTopic(topicId, notes[0].getId(), {
|
||||||
}
|
text: value,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
dispatcher.addFeatureToTopic(topicId, TopicFeatureFactory.Note.id, {
|
||||||
|
text: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return result;
|
getLinkValue(): string {
|
||||||
},
|
const model = this.getModel();
|
||||||
|
// @param {mindplot.model.LinkModel[]} links
|
||||||
|
const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
|
||||||
|
let result;
|
||||||
|
if (links.length > 0) {
|
||||||
|
result = (links[0] as LinkModel).getUrl();
|
||||||
|
}
|
||||||
|
|
||||||
setValue(value: string) {
|
return result;
|
||||||
const dispatcher = ActionDispatcher.getInstance();
|
}
|
||||||
const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
|
|
||||||
if (!$defined(value)) {
|
|
||||||
const featureId = links[0].getId();
|
|
||||||
dispatcher.removeFeatureFromTopic(topicId, featureId);
|
|
||||||
} else if (links.length > 0) {
|
|
||||||
dispatcher.changeFeatureToTopic(topicId, links[0].getId(), {
|
|
||||||
url: value,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
dispatcher.addFeatureToTopic(topicId, TopicFeatureFactory.Link.id, {
|
|
||||||
url: value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
this.closeEditors();
|
setLinkValue(value: string) {
|
||||||
const editor = new LinkEditor(editorModel);
|
const topicId = this.getId();
|
||||||
editor.show();
|
const model = this.getModel();
|
||||||
|
const dispatcher = ActionDispatcher.getInstance();
|
||||||
|
const links = model.findFeatureByType(TopicFeatureFactory.Link.id);
|
||||||
|
if (!$defined(value)) {
|
||||||
|
const featureId = links[0].getId();
|
||||||
|
dispatcher.removeFeatureFromTopic(topicId, featureId);
|
||||||
|
} else if (links.length > 0) {
|
||||||
|
dispatcher.changeFeatureToTopic(topicId, links[0].getId(), {
|
||||||
|
url: value,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
dispatcher.addFeatureToTopic(topicId, TopicFeatureFactory.Link.id, {
|
||||||
|
url: value,
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
closeEditors() {
|
closeEditors() {
|
||||||
|
107
packages/mindplot/src/components/WidgetManager.ts
Normal file
107
packages/mindplot/src/components/WidgetManager.ts
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
import LinkIcon from './LinkIcon';
|
||||||
|
import LinkModel from './model/LinkModel';
|
||||||
|
import NoteModel from './model/NoteModel';
|
||||||
|
import NoteIcon from './NoteIcon';
|
||||||
|
import Topic from './Topic';
|
||||||
|
import { $msg } from './Messages';
|
||||||
|
|
||||||
|
class WidgetManager {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
static _instance: WidgetManager;
|
||||||
|
|
||||||
|
static init = (instance: WidgetManager) => {
|
||||||
|
this._instance = instance;
|
||||||
|
};
|
||||||
|
|
||||||
|
static getInstance(): WidgetManager {
|
||||||
|
return this._instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
private createTooltip(mindmapElement, title, linkModel: LinkModel, noteModel: NoteModel) {
|
||||||
|
const webcomponentShadowRoot = $($('#mindmap-comp')[0].shadowRoot);
|
||||||
|
let tooltip = webcomponentShadowRoot.find('#mindplot-svg-tooltip');
|
||||||
|
if (!tooltip.length) {
|
||||||
|
webcomponentShadowRoot.append(
|
||||||
|
'<div id="mindplot-svg-tooltip" class="mindplot-svg-tooltip">' +
|
||||||
|
'<div id="mindplot-svg-tooltip-title" class="mindplot-svg-tooltip-title"></div>' +
|
||||||
|
'<div id="mindplot-svg-tooltip-content" class="mindplot-svg-tooltip-content">' +
|
||||||
|
'<a id="mindplot-svg-tooltip-content-link" alt="Open in new window ..." class="mindplot-svg-tooltip-content-link" target="_blank"></a>' +
|
||||||
|
'<p id="mindplot-svg-tooltip-content-note" class="mindplot-svg-tooltip-content-note"></p>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>',
|
||||||
|
);
|
||||||
|
tooltip = webcomponentShadowRoot.find('#mindplot-svg-tooltip');
|
||||||
|
|
||||||
|
tooltip.on('mouseover', (evt) => {
|
||||||
|
tooltip.css({ display: 'block' });
|
||||||
|
evt.stopPropagation();
|
||||||
|
});
|
||||||
|
tooltip.on('mouseleave', (evt) => {
|
||||||
|
tooltip.css({ display: 'none' });
|
||||||
|
evt.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
mindmapElement.addEvent('mouseenter', (evt) => {
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-title').html(title);
|
||||||
|
if (linkModel) {
|
||||||
|
webcomponentShadowRoot
|
||||||
|
.find('#mindplot-svg-tooltip-content-link')
|
||||||
|
.attr('href', linkModel.getUrl());
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-link').html(linkModel.getUrl());
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-link').css({ display: 'block' });
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-note').css({ display: 'none' });
|
||||||
|
}
|
||||||
|
if (noteModel) {
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-note').html(noteModel.getText());
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-note').css({ display: 'block' });
|
||||||
|
webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-link').css({ display: 'none' });
|
||||||
|
}
|
||||||
|
const targetRect = evt.target.getBoundingClientRect();
|
||||||
|
const newX = Math.max(0, targetRect.left + targetRect.width / 2 - tooltip.width() / 2);
|
||||||
|
const newY = Math.max(0, targetRect.bottom + 10);
|
||||||
|
tooltip.css({ top: newY, left: newX, position: 'absolute' });
|
||||||
|
tooltip.css({ display: 'block' });
|
||||||
|
evt.stopPropagation();
|
||||||
|
});
|
||||||
|
mindmapElement.addEvent('mouseleave', (evt) => {
|
||||||
|
tooltip.css({ display: 'none' });
|
||||||
|
evt.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
createTooltipForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
|
||||||
|
this.createTooltip(linkIcon.getImage().peer, $msg('LINK'), linkModel, undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
createTooltipForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) {
|
||||||
|
this.createTooltip(noteIcon.getImage().peer, $msg('NOTE'), undefined, noteModel);
|
||||||
|
}
|
||||||
|
|
||||||
|
configureEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
|
||||||
|
const htmlImage = linkIcon.getImage().peer;
|
||||||
|
htmlImage.addEvent('click', (evt) => {
|
||||||
|
this.showEditorForLink(topic, linkModel, linkIcon);
|
||||||
|
evt.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
configureEditorForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) {
|
||||||
|
const htmlImage = noteIcon.getImage().peer;
|
||||||
|
htmlImage.addEvent('click', (evt) => {
|
||||||
|
this.showEditorForNote(topic, noteModel, noteIcon);
|
||||||
|
evt.stopPropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
|
||||||
|
console.log('Show link editor not yet implemented');
|
||||||
|
}
|
||||||
|
|
||||||
|
showEditorForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon) {
|
||||||
|
console.log('Show note editor not yet implemented');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WidgetManager;
|
@ -223,7 +223,9 @@ class Workspace {
|
|||||||
|
|
||||||
// Change cursor.
|
// Change cursor.
|
||||||
window.document.body.style.cursor = 'move';
|
window.document.body.style.cursor = 'move';
|
||||||
mouseMoveEvent.preventDefault();
|
// If I dont ignore touchmove events, browser console shows a lot of errors:
|
||||||
|
// Unable to preventDefault inside passive event listener invocation.
|
||||||
|
if (mouseMoveEvent.type !== 'touchmove') mouseMoveEvent.preventDefault();
|
||||||
|
|
||||||
// Fire drag event ...
|
// Fire drag event ...
|
||||||
screenManager.fireEvent('update');
|
screenManager.fireEvent('update');
|
||||||
|
132
packages/mindplot/src/components/styles/mindplot-styles.js
Normal file
132
packages/mindplot/src/components/styles/mindplot-styles.js
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
const mindplotStyles = `
|
||||||
|
|
||||||
|
div#mindplot {
|
||||||
|
position: relative;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip {
|
||||||
|
display: none;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
text-align: center;
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 6px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
animation: fadeIn 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn ease 0.4s;
|
||||||
|
-webkit-animation: fadeIn ease 0.4s;
|
||||||
|
-moz-animation: fadeIn ease 0.4s;
|
||||||
|
-o-animation: fadeIn ease 0.4s;
|
||||||
|
-ms-animation: fadeIn ease 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-title {
|
||||||
|
background-color: rgb(247, 247, 247);
|
||||||
|
border-bottom-color: rgb(235, 235, 235);
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
padding: 8px 14px;
|
||||||
|
text-align: left;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content {
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
padding: 6px 4px;
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content-link {
|
||||||
|
padding: 3px 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
font-size: smaller;
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: small;
|
||||||
|
color: #428bca;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content-note {
|
||||||
|
text-align: left;
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid #fff;
|
||||||
|
bottom: 100%;
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid rgb(247, 247, 247);
|
||||||
|
bottom: calc(1px + 100%);
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default mindplotStyles;
|
@ -1,154 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright [2021] [wisemapping]
|
|
||||||
*
|
|
||||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
|
||||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
|
||||||
* "powered by wisemapping" text requirement on every single page;
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the license at
|
|
||||||
*
|
|
||||||
* http://www.wisemapping.org/license
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import $ from 'jquery';
|
|
||||||
import Options from '../../Options';
|
|
||||||
import { $msg } from '../../Messages';
|
|
||||||
|
|
||||||
class BootstrapDialog extends Options {
|
|
||||||
constructor(title, options) {
|
|
||||||
super();
|
|
||||||
this.options = {
|
|
||||||
cancelButton: false,
|
|
||||||
closeButton: false,
|
|
||||||
acceptButton: true,
|
|
||||||
removeButton: false,
|
|
||||||
errorMessage: false,
|
|
||||||
onEventData: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
this.setOptions(options);
|
|
||||||
this.options.onEventData.dialog = this;
|
|
||||||
this._native = $('<div class="modal fade" tabindex="-1"></div>').append(
|
|
||||||
'<div class="modal-dialog"></div>',
|
|
||||||
);
|
|
||||||
const content = $('<div class="modal-content"></div>');
|
|
||||||
const header = this._buildHeader(title);
|
|
||||||
|
|
||||||
if (header) {
|
|
||||||
content.append(header);
|
|
||||||
}
|
|
||||||
const body = $('<div class="modal-body"></div>');
|
|
||||||
if (this.options.errorMessage) {
|
|
||||||
const error = $('<div class="alert alert-danger"></div>');
|
|
||||||
error.hide();
|
|
||||||
body.append(error);
|
|
||||||
}
|
|
||||||
content.append(body);
|
|
||||||
const footer = this._buildFooter();
|
|
||||||
if (footer) {
|
|
||||||
content.append(footer);
|
|
||||||
}
|
|
||||||
this._native.find('.modal-dialog').append(content);
|
|
||||||
this._native.on('hidden.bs.modal', function remove() {
|
|
||||||
$(this).remove();
|
|
||||||
});
|
|
||||||
this._native.on('shown.bs.modal', this.onDialogShown);
|
|
||||||
|
|
||||||
this._native.appendTo('#mindplot-tooltips');
|
|
||||||
}
|
|
||||||
|
|
||||||
_buildFooter() {
|
|
||||||
let footer = null;
|
|
||||||
if (this.options.acceptButton || this.options.removeButton || this.options.cancelButton) {
|
|
||||||
footer = $('<div class="modal-footer" style="paddingTop:5;textAlign:center">');
|
|
||||||
}
|
|
||||||
if (this.options.acceptButton) {
|
|
||||||
this.acceptButton = $(
|
|
||||||
`<button type="button" class="btn btn-primary" id="acceptBtn" data-dismiss="modal">${$msg(
|
|
||||||
'ACCEPT',
|
|
||||||
)}</button>`,
|
|
||||||
);
|
|
||||||
footer.append(this.acceptButton);
|
|
||||||
this.acceptButton.unbind('click').on('click', this.options.onEventData, this.onAcceptClick);
|
|
||||||
}
|
|
||||||
if (this.options.removeButton) {
|
|
||||||
this.removeButton = $(
|
|
||||||
`<button type="button" class="btn btn-secondary" id="removeBtn" data-dismiss="modal">${$msg(
|
|
||||||
'REMOVE',
|
|
||||||
)}</button>`,
|
|
||||||
);
|
|
||||||
footer.append(this.removeButton);
|
|
||||||
this.removeButton.on('click', this.options.onEventData, this.onRemoveClick);
|
|
||||||
}
|
|
||||||
if (this.options.cancelButton) {
|
|
||||||
footer.append(
|
|
||||||
`<button type="button" class="btn btn-secondary" data-dismiss="modal">${$msg(
|
|
||||||
'CANCEL',
|
|
||||||
)}</button>`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return footer;
|
|
||||||
}
|
|
||||||
|
|
||||||
_buildHeader(title) {
|
|
||||||
let header = null;
|
|
||||||
if (this.options.closeButton || title) {
|
|
||||||
header = $('<div class="modal-header"></div>');
|
|
||||||
}
|
|
||||||
if (this.options.closeButton) {
|
|
||||||
header.append(
|
|
||||||
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (title) {
|
|
||||||
header.append(`<h2 class="modal-title">${title}</h2>`);
|
|
||||||
}
|
|
||||||
return header;
|
|
||||||
}
|
|
||||||
|
|
||||||
onAcceptClick(event) {
|
|
||||||
throw new Error('Unsupported operation');
|
|
||||||
}
|
|
||||||
|
|
||||||
onDialogShown(event) {
|
|
||||||
// Overwrite default behaviour ...
|
|
||||||
}
|
|
||||||
|
|
||||||
onRemoveClick(event) {
|
|
||||||
throw new Error('Unsupported operation');
|
|
||||||
}
|
|
||||||
|
|
||||||
show() {
|
|
||||||
this._native.modal();
|
|
||||||
}
|
|
||||||
|
|
||||||
setContent(content) {
|
|
||||||
const modalBody = this._native.find('.modal-body');
|
|
||||||
modalBody.append(content);
|
|
||||||
}
|
|
||||||
|
|
||||||
css(options) {
|
|
||||||
this._native.find('.modal-dialog').css(options);
|
|
||||||
}
|
|
||||||
|
|
||||||
close() {
|
|
||||||
this._native.modal('hide');
|
|
||||||
}
|
|
||||||
|
|
||||||
alertError(message) {
|
|
||||||
this._native.find('.alert-danger').text(message);
|
|
||||||
this._native.find('.alert-danger').show();
|
|
||||||
}
|
|
||||||
|
|
||||||
cleanError() {
|
|
||||||
this._native.find('.alert-danger').hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BootstrapDialog;
|
|
@ -31,7 +31,19 @@ import Exporter from './components/export/Exporter';
|
|||||||
import Importer from './components/import/Importer';
|
import Importer from './components/import/Importer';
|
||||||
import DesignerKeyboard from './components/DesignerKeyboard';
|
import DesignerKeyboard from './components/DesignerKeyboard';
|
||||||
import EditorRenderMode from './components/EditorRenderMode';
|
import EditorRenderMode from './components/EditorRenderMode';
|
||||||
|
|
||||||
import ImageIcon from './components/ImageIcon';
|
import ImageIcon from './components/ImageIcon';
|
||||||
|
import MindplotWebComponent, {
|
||||||
|
MindplotWebComponentInterface,
|
||||||
|
} from './components/MindplotWebComponent';
|
||||||
|
import LinkIcon from './components/LinkIcon';
|
||||||
|
import NoteIcon from './components/NoteIcon';
|
||||||
|
import Topic from './components/Topic';
|
||||||
|
|
||||||
|
import LinkModel from './components/model/LinkModel';
|
||||||
|
import NoteModel from './components/model/NoteModel';
|
||||||
|
|
||||||
|
import WidgetManager from './components/WidgetManager';
|
||||||
|
|
||||||
import { buildDesigner } from './components/DesignerBuilder';
|
import { buildDesigner } from './components/DesignerBuilder';
|
||||||
|
|
||||||
@ -39,10 +51,15 @@ import { $notify } from './components/widget/ToolbarNotifier';
|
|||||||
|
|
||||||
import { $msg } from './components/Messages';
|
import { $msg } from './components/Messages';
|
||||||
|
|
||||||
// This hack is required to initialize Bootstrap. In future, this should be removed.
|
import './mindplot-styles.css';
|
||||||
|
|
||||||
const globalAny: any = global;
|
const globalAny: any = global;
|
||||||
globalAny.jQuery = jquery;
|
globalAny.jQuery = jquery;
|
||||||
require('../../../libraries/bootstrap/js/bootstrap.min');
|
// WebComponent registration
|
||||||
|
// The if statement is the fix for doble registration problem. Can be deleted wen webapp-mindplot dependency be dead.
|
||||||
|
if (!customElements.get('mindplot-component')) {
|
||||||
|
customElements.define('mindplot-component', MindplotWebComponent);
|
||||||
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Mindmap,
|
Mindmap,
|
||||||
@ -64,4 +81,12 @@ export {
|
|||||||
$notify,
|
$notify,
|
||||||
$msg,
|
$msg,
|
||||||
DesignerKeyboard,
|
DesignerKeyboard,
|
||||||
|
MindplotWebComponent,
|
||||||
|
MindplotWebComponentInterface,
|
||||||
|
LinkIcon,
|
||||||
|
LinkModel,
|
||||||
|
NoteIcon,
|
||||||
|
NoteModel,
|
||||||
|
WidgetManager,
|
||||||
|
Topic,
|
||||||
};
|
};
|
||||||
|
@ -17,42 +17,30 @@
|
|||||||
*/
|
*/
|
||||||
import jquery from 'jquery';
|
import jquery from 'jquery';
|
||||||
import {} from './components/widget/ToolbarNotifier';
|
import {} from './components/widget/ToolbarNotifier';
|
||||||
import { buildDesigner } from './components/DesignerBuilder';
|
|
||||||
import PersistenceManager from './components/PersistenceManager';
|
import PersistenceManager from './components/PersistenceManager';
|
||||||
import LocalStorageManager from './components/LocalStorageManager';
|
import LocalStorageManager from './components/LocalStorageManager';
|
||||||
import DesignerOptionsBuilder from './components/DesignerOptionsBuilder';
|
import MindplotWebComponent from './components/MindplotWebComponent';
|
||||||
|
|
||||||
console.log('loading static mindmap in read-only');
|
console.log('loading static mindmap in read-only');
|
||||||
|
|
||||||
// This hack is required to initialize Bootstrap. In future, this should be removed.
|
|
||||||
const globalAny: any = global;
|
const globalAny: any = global;
|
||||||
globalAny.jQuery = jquery;
|
globalAny.jQuery = jquery;
|
||||||
require('../../../libraries/bootstrap/js/bootstrap.min');
|
|
||||||
|
|
||||||
|
// WebComponent registration
|
||||||
|
customElements.define('mindplot-component', MindplotWebComponent);
|
||||||
// Configure designer options ...
|
// Configure designer options ...
|
||||||
const historyId = global.historyId ? `${global.historyId}/` : '';
|
const historyId = global.historyId ? `${global.historyId}/` : '';
|
||||||
const persistence: PersistenceManager = new LocalStorageManager(
|
const persistence: PersistenceManager = new LocalStorageManager(
|
||||||
`/c/restful/maps/{id}/${historyId}document/xml${!global.isAuth ? '-pub' : ''}`,
|
`/c/restful/maps/{id}/${historyId}document/xml${!global.isAuth ? '-pub' : ''}`,
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Obtain map zoom from query param if it was specified...
|
// Obtain map zoom from query param if it was specified...
|
||||||
const params = new URLSearchParams(window.location.search.substring(1));
|
const params = new URLSearchParams(window.location.search.substring(1));
|
||||||
|
|
||||||
const zoomParam = Number.parseFloat(params.get('zoom'));
|
const zoomParam = Number.parseFloat(params.get('zoom'));
|
||||||
const options = DesignerOptionsBuilder.buildOptions({
|
|
||||||
persistenceManager: persistence,
|
|
||||||
mode: 'viewonly',
|
|
||||||
mapId: global.mapId,
|
|
||||||
container: 'mindplot',
|
|
||||||
zoom: zoomParam || global.userOptions.zoom,
|
|
||||||
locale: global.locale,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Build designer ...
|
const webComponent: MindplotWebComponent = document.getElementById(
|
||||||
const designer = buildDesigner(options);
|
'mindmap-comp',
|
||||||
|
) as MindplotWebComponent;
|
||||||
// Load map from XML file persisted on disk...
|
webComponent.buildDesigner(persistence);
|
||||||
const instance = PersistenceManager.getInstance();
|
webComponent.loadMap(global.mapId);
|
||||||
const mindmap = instance.load(global.mapId);
|
|
||||||
designer.loadMap(mindmap);
|
|
||||||
|
110
packages/mindplot/src/mindplot-styles.css
Normal file
110
packages/mindplot/src/mindplot-styles.css
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
/*
|
||||||
|
DO NOT USE THIS FILE until we resolve how to import .css files into shadow dom
|
||||||
|
As a workaround, use the file mindplot-styles.js instead
|
||||||
|
*/
|
||||||
|
.mindplot-svg-tooltip {
|
||||||
|
display: none;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
text-align: center;
|
||||||
|
padding: 1px;
|
||||||
|
border-radius: 6px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
animation: fadeIn 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn ease 0.4s;
|
||||||
|
-webkit-animation: fadeIn ease 0.4s;
|
||||||
|
-moz-animation: fadeIn ease 0.4s;
|
||||||
|
-o-animation: fadeIn ease 0.4s;
|
||||||
|
-ms-animation: fadeIn ease 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes fadeIn {
|
||||||
|
0% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-title {
|
||||||
|
background-color: rgb(247, 247, 247);
|
||||||
|
border-bottom-color: rgb(235, 235, 235);
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
font-family: Arial;
|
||||||
|
padding: 8px 14px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content {
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
padding: 6px 4px;
|
||||||
|
max-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content-link {
|
||||||
|
padding: 3px 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip-content-note {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid #fff;
|
||||||
|
bottom: 100%;
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mindplot-svg-tooltip:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid transparent;
|
||||||
|
border-right: 10px solid transparent;
|
||||||
|
border-bottom: 10px solid rgb(247, 247, 247);
|
||||||
|
bottom: calc(1px + 100%);
|
||||||
|
right: 50%;
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
@ -14,8 +14,10 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*"
|
"src/**/*",
|
||||||
, "../editor/src/classes/menu/AccountSettingsPanel.js", "../editor/src/classes/menu/IMenu.ts", "../editor/src/classes/bootstrap" ],
|
"../editor/src/classes/menu/AccountSettingsPanel.js",
|
||||||
|
"../editor/src/classes/menu/IMenu.ts"
|
||||||
|
],
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"node_modules"
|
"node_modules"
|
||||||
]
|
]
|
||||||
|
@ -35,6 +35,10 @@ module.exports = {
|
|||||||
test: /\.(png|svg)$/i,
|
test: /\.(png|svg)$/i,
|
||||||
type: 'asset/inline',
|
type: 'asset/inline',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: 'css-loader',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
@ -20,21 +20,12 @@ const playgroundConfig = {
|
|||||||
devServer: {
|
devServer: {
|
||||||
historyApiFallback: true,
|
historyApiFallback: true,
|
||||||
port: 8083,
|
port: 8083,
|
||||||
open: false,
|
open: false
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.css$/i,
|
|
||||||
use: ['style-loader', 'css-loader?url=false'],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new CleanWebpackPlugin(),
|
new CleanWebpackPlugin(),
|
||||||
new CopyPlugin({
|
new CopyPlugin({
|
||||||
patterns: [
|
patterns: [
|
||||||
{ from: '../../libraries/bootstrap', to: 'bootstrap' },
|
|
||||||
{ from: 'test/playground/index.html', to: 'index.html' },
|
{ from: 'test/playground/index.html', to: 'index.html' },
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
|
@ -64,7 +64,6 @@
|
|||||||
"@mui/styles": "^5.3.0",
|
"@mui/styles": "^5.3.0",
|
||||||
"@reduxjs/toolkit": "^1.5.0",
|
"@reduxjs/toolkit": "^1.5.0",
|
||||||
"@wisemapping/editor": "^0.4.0",
|
"@wisemapping/editor": "^0.4.0",
|
||||||
"@wisemapping/mindplot": "^5.0.2",
|
|
||||||
"axios": "^0.21.0",
|
"axios": "^0.21.0",
|
||||||
"dayjs": "^1.10.7",
|
"dayjs": "^1.10.7",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/mindplot';
|
import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/editor';
|
||||||
import Client, {
|
import Client, {
|
||||||
AccountInfo,
|
AccountInfo,
|
||||||
BasicMapInfo,
|
BasicMapInfo,
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/mindplot';
|
import { EditorRenderMode, Mindmap, PersistenceManager } from '@wisemapping/editor';
|
||||||
import { Locale, LocaleCode } from '../app-i18n';
|
import { Locale, LocaleCode } from '../app-i18n';
|
||||||
|
|
||||||
export type NewUser = {
|
export type NewUser = {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Mindmap, MockPersistenceManager, PersistenceManager } from '@wisemapping/mindplot';
|
import { Mindmap, MockPersistenceManager, PersistenceManager } from '@wisemapping/editor';
|
||||||
import XMLSerializerTango from '@wisemapping/mindplot/src/components/persistence/XMLSerializerTango';
|
import XMLSerializerTango from '@wisemapping/editor';
|
||||||
import Client, {
|
import Client, {
|
||||||
AccountInfo,
|
AccountInfo,
|
||||||
BasicMapInfo,
|
BasicMapInfo,
|
||||||
|
@ -4,8 +4,8 @@ import {
|
|||||||
Mindmap,
|
Mindmap,
|
||||||
PersistenceManager,
|
PersistenceManager,
|
||||||
RESTPersistenceManager,
|
RESTPersistenceManager,
|
||||||
} from '@wisemapping/mindplot';
|
} from '@wisemapping/editor';
|
||||||
import { PersistenceError } from '@wisemapping/mindplot/src/components/PersistenceManager';
|
import { PersistenceError } from '@wisemapping/editor';
|
||||||
import axios, { AxiosInstance, AxiosResponse } from 'axios';
|
import axios, { AxiosInstance, AxiosResponse } from 'axios';
|
||||||
import Client, {
|
import Client, {
|
||||||
ErrorInfo,
|
ErrorInfo,
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { EditorOptions } from '@wisemapping/editor';
|
import { EditorOptions } from '@wisemapping/editor';
|
||||||
import { EditorRenderMode } from '@wisemapping/mindplot';
|
import { EditorRenderMode } from '@wisemapping/editor';
|
||||||
import AppConfig from '../../classes/app-config';
|
import AppConfig from '../../classes/app-config';
|
||||||
|
|
||||||
class EditorOptionsBuilder {
|
class EditorOptionsBuilder {
|
||||||
|
@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
|
|||||||
import ActionDispatcher from '../maps-page/action-dispatcher';
|
import ActionDispatcher from '../maps-page/action-dispatcher';
|
||||||
import { ActionType } from '../maps-page/action-chooser';
|
import { ActionType } from '../maps-page/action-chooser';
|
||||||
import Editor from '@wisemapping/editor';
|
import Editor from '@wisemapping/editor';
|
||||||
import { EditorRenderMode, PersistenceManager } from '@wisemapping/mindplot';
|
import { EditorRenderMode, PersistenceManager } from '@wisemapping/editor';
|
||||||
import { IntlProvider } from 'react-intl';
|
import { IntlProvider } from 'react-intl';
|
||||||
import AppI18n, { Locales } from '../../classes/app-i18n';
|
import AppI18n, { Locales } from '../../classes/app-i18n';
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
|
@ -16,12 +16,12 @@ import {
|
|||||||
ImageExporterFactory,
|
ImageExporterFactory,
|
||||||
Exporter,
|
Exporter,
|
||||||
Mindmap,
|
Mindmap,
|
||||||
} from '@wisemapping/mindplot';
|
} from '@wisemapping/editor';
|
||||||
import Client from '../../../../classes/client';
|
import Client from '../../../../classes/client';
|
||||||
import { activeInstance } from '../../../../redux/clientSlice';
|
import { activeInstance } from '../../../../redux/clientSlice';
|
||||||
|
|
||||||
import { useSelector } from 'react-redux';
|
import { useSelector } from 'react-redux';
|
||||||
import SizeType from '@wisemapping/mindplot/src/components/SizeType';
|
import SizeType from '@wisemapping/editor';
|
||||||
import Checkbox from '@mui/material/Checkbox';
|
import Checkbox from '@mui/material/Checkbox';
|
||||||
|
|
||||||
type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
|
type ExportFormat = 'svg' | 'jpg' | 'png' | 'txt' | 'mm' | 'wxml' | 'xls' | 'md';
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { Alert } from '@mui/material';
|
import { Alert } from '@mui/material';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import FormControl from '@mui/material/FormControl';
|
import FormControl from '@mui/material/FormControl';
|
||||||
import { Importer, TextImporterFactory } from '@wisemapping/mindplot';
|
import { Importer, TextImporterFactory } from '@wisemapping/editor';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { FormattedMessage, useIntl } from 'react-intl';
|
import { FormattedMessage, useIntl } from 'react-intl';
|
||||||
|
@ -34,6 +34,10 @@ module.exports = {
|
|||||||
test: /\.wxml$/i,
|
test: /\.wxml$/i,
|
||||||
type: 'asset/source',
|
type: 'asset/source',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loader: 'css-loader',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
optimization: {
|
optimization: {
|
||||||
|
Loading…
Reference in New Issue
Block a user