MALIO-DEV/PlantUmlServer
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend 2.0: initial version

Browse Source 
- auto refresh function
- light and dark theme
- monaco editor (vscode) with "apex" as syntax highlighting language
  * apex seems to work quite fine (better than no highlighting)
  * future possibility: own plantuml language syntax support
  * future possibility: autocomplete (to much work but maybe partial)
    - implemented example for `!theme ...`
    - implemented example for `<&icon>`
  * future possibility: code validation
    - implemented example for `@start...` and `@end...`:
      * should be the first or last command
      * should be of the some type (e.g. `@startyaml` and @endyaml)
      * should be used exactly once per document/diagram
- editor and preview is splitable into two windows like the
  "Extract window" functionality on
  (plantuml.com)[https://www.plantuml.com/plantuml]
- multi index / multi paging diagram support
- diagram can be displayed/rended as PNG, SVG, ASCII Art or PDF
- Ctrl+s download the PlantUML Code as code file (diagram.puml)
- Ctrl+, opens the settings and Esc closes the settings
This commit is contained in:
Florian
2023-04-29 00:29:29 +02:00
committed by PlantUML
parent 763976abdd
commit f727c6dd13
46 changed files with 2638 additions and 761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/main/webapp/resource/preview.jsp Normal file
View File

@@ -0,0 +1,89 @@
<div class="previewer-container flex-rows">
<div class="preview-menu">
<div class="diagram-links flex-columns">
<span>View as:</span>
<a class="diagram-link" data-img-type="png" href="png/<%= diagramUrl %>" title="View diagram as PNG">
<img src="assets/file-types/png.svg" alt="PNG" />
</a>
<a class="diagram-link" data-img-type="svg" href="svg/<%= diagramUrl %>" title="View diagram as SVG">
<img src="assets/file-types/svg.svg" alt="SVG" />
</a>
<a class="diagram-link" data-img-type="txt" href="txt/<%= diagramUrl %>" title="View diagram as ASCII Art">
<img src="assets/file-types/ascii.svg" alt="ASCII Art" />
</a>
<a class="diagram-link" data-img-type="pdf" href="pdf/<%= diagramUrl %>" title="View diagram as PDF">
<img src="assets/file-types/pdf.svg" alt="PDF" />
</a>
<a
id="map-diagram-link"
class="diagram-link"
data-img-type="map"
href="map/<%= diagramUrl %>"
title="View diagram as Map Data"
<% if (!hasMap) { %>
style="display: none;"
<% } %>
>
<img src="assets/file-types/map.svg" alt="MAP" />
</a>
<div class="flex-main menu-r">
<div class="btn-float-r">
<input
id="btn-settings"
class="btn-settings"
type="image"
src="assets/settings.svg"
alt="settings"
onclick="openSettings();"
/>
<input
id="btn-undock"
class="btn-dock"
type="image"
src="assets/undock.svg"
alt="undock"
onclick="undock();"
/>
<input
id="btn-dock"
class="btn-dock"
type="image"
src="assets/dock.svg"
alt="dock"
onclick="window.close();"
style="display: none;"
/>
</div>
</div>
</div>
</div>
<div class="hr"></div>
<div id="paginator" data-number-of-diagram-pages="1" style="display: none;"></div>
<div class="previewer-main flex-main">
<div id="diagram" class="diagram">
<div>
<!-- PNG -->
<img id="diagram-png" src="png/<%= diagramUrl %>" alt="PlantUML diagram" usemap="#plantuml_map" />
<% if (hasMap) { %>
<%= map %>
<% } else { %>
<map id="plantuml_map" name="plantuml_map"></map>
<% } %>
<!-- SVG -->
<svg id="diagram-svg" style="display: none;"></svg>
<!-- ASCII Art -->
<pre id="diagram-txt" style="display: none;"></pre>
<!-- PDF -->
<object id="diagram-pdf" data="" type="application/pdf" width="100%" height="100%" style="display: none;">
<p>Unable to display PDF file.</p>
</object>
</div>
</div>
</div>
<% if (showSocialButtons) { %>
<div>
<%@ include file="socialbuttons2.jsp" %>
</div>
<% } %>
<%@ include file="settings.jsp" %>
</div>