Merged in bugfix/loading-modal (pull request #26)

Loading modal

* Remove unused bootstrap files

* Fix embedded playground

* Invert mousewheel zoom

* Add LoadingModal and toggle during designer load


Approved-by: Paulo Veiga
This commit is contained in:
Matias Arriola
2022-01-04 20:11:12 +00:00
committed by Paulo Veiga
parent 706a440d97
commit aa814d5c2f
29 changed files with 91 additions and 9589 deletions

View File

@ -25,7 +25,7 @@
<li><a href="viewmode.html">Mindmap Render:</a> Simple integration to load and render mindaps in read
only mode</li>
<li><a href="editor.html">Mindmap Editor:</a> Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.</li>
<li><a href="container.html">Enbedded:</a> Example on how to embeded editor in a iframe.</li>
<li><a href="container.html">Embedded:</a> Example on how to embeded editor in a iframe.</li>
<li><a href="layout.html">Layout Renders:</a> Showcase the different supported layouts.</li>
</ul>
</div>

View File

@ -9,17 +9,8 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id='load' class="modal fade">
<div class="modal-dialog">
<div style="height: 120px; text-align: center; border: 2px solid orange" class="modal-content">
<img style='margin-top:25px; text-align: center' src="images/ajax-loader.gif">
</div>
</div>
</div>
<body>
<div id="header">
<div id="headerInfo">
<div id="headerActions"></div>
<div id="headerLogo"></div>

View File

@ -21,73 +21,75 @@
<div id="editTab" class="tabContent">
<div id="persist" class="buttonContainer">
<div id="save" class="buttonOn">
<img src="images/save.png" />
<img src="images/save.svg" />
</div>
<div id="discard" class="buttonOn">
<img src="images/discard.png" />
<img src="images/discard.svg" />
</div>
<div id="export" class="buttonOn">
<img src="images/export.svg" />
</div>
</div>
<div id="edit" class="buttonContainer">
<div id="undoEdition" class="buttonOn">
<img src="images/undo.png" />
<img src="images/undo.svg"/>
</div>
<div id="redoEdition" class="buttonOn">
<img src="images/redo.png" />
<img src="images/redo.svg"/>
</div>
</div>
<div id="zoom" class="buttonContainer">
<div id="zoomIn" class="buttonOn">
<img src="images/zoom-in.png" />
</div>
<div id="zoomOut" class="buttonOn">
<img src="images/zoom-out.png" />
<img src="images/zoom-out.svg"/>
</div>
<div id="zoomIn" class="buttonOn">
<img src="images/zoom-in.svg"/>
</div>
</div>
<div id="node" class="buttonContainer">
<div id="topicShape" class="buttonExtOn">
<img src="images/topic-shape.png" />
<img src="images/topic-shape.svg"/>
</div>
<div id="addTopic" class="buttonOn">
<img src="images/topic-add.png" />
<img src="images/topic-add.svg"/>
</div>
<div id="deleteTopic" class="buttonOn">
<img src="images/topic-delete.png" />
<img src="images/topic-delete.svg"/>
</div>
<div id="topicBorder" class="buttonOn">
<img src="images/topic-border.png" />
<div id="topicBorder" class="buttonExtOn">
<img src="images/topic-border.svg"/>
</div>
<div id="topicColor" class="buttonExtOn">
<img src="images/topic-color.png" />
<img src="images/topic-color.svg"/>
</div>
<div id="topicIcon" class="buttonExtOn">
<img src="images/topic-icon.png" />
<img src="images/topic-icon.svg"/>
</div>
<div id="topicNote" class="buttonOn">
<img src="images/topic-note.png" />
<div id="topicNote" class="buttonOn" >
<img src="images/topic-note.svg"/>
</div>
<div id="topicLink" class="buttonOn">
<img src="images/topic-link.png" />
<img src="images/topic-link.svg"/>
</div>
<div id="topicRelation" class="buttonOn">
<img src="images/topic-relation.png" />
<img src="images/topic-relation.svg"/>
</div>
</div>
<div id="font" class="buttonContainer">
<div id="fontFamily" class="buttonOn">
<img src="images/font-type.png" />
<div id="fontFamily" class="buttonExtOn">
<img src="images/font-type.svg"/>
</div>
<div id="fontSize" class="buttonExtOn">
<img src="images/font-size.png" />
<img src="images/font-size.svg"/>
</div>
<div id="fontBold" class="buttonOn">
<img src="images/font-bold.png" />
<img src="images/font-bold.svg"/>
</div>
<div id="fontItalic" class="buttonOn">
<img src="images/font-italic.png" />
<img src="images/font-italic.svg"/>
</div>
<div id="fontColor" class="buttonExtOn" style="padding-top:4px">
<img src="images/font-color.png" />
<div id="fontColor" class="buttonExtOn">
<img src="images/font-color.svg"/>
</div>
</div>
</div>

View File

@ -1,12 +1,17 @@
import '../css/editor.less';
import { buildDesigner, buildOptions } from '../../../../src/components/DesignerBuilder';
import { PersistenceManager, LocalStorageManager } from '../../../../src';
import LoadingModal from '../../../../src/components/widget/LoadingModal';
const loadingModal = new LoadingModal();
loadingModal.show();
const p = new LocalStorageManager('samples/{id}.wxml');
const options = buildOptions({ persistenceManager: p });
const designer = buildDesigner(options);
designer.addEvent('loadSuccess', () => {
loadingModal.hide();
document.getElementById('mindplot').classList.add('ready');
});