front-end code refactoring

Since the front-end received much more code (features) than first expected, the files became much too large. For this reason, the JS and CSS code has now been split by component and thus into several small files. However, since there are now many small files, a JS and CSS bundle tool had to come :D.
This commit is contained in:
Florian 2023-05-19 00:35:34 +02:00 committed by PlantUML
parent 080cbaada9
commit 478ef3bce7
70 changed files with 2725 additions and 2186 deletions

View File

@ -9,6 +9,7 @@
"epstext",
"etag",
"ghaction",
"inmemory",
"Lalloni",
"monaco",
"plantuml",
@ -22,5 +23,8 @@
"utxt"
],
"cSpell.allowCompoundWords": true,
"svg.preview.background": "transparent"
"svg.preview.background": "dark-transparent",
"files.associations": {
"*.jspf": "html"
}
}

View File

@ -0,0 +1,83 @@
# Front-end Contribution
## Web UI
The Web UI uses vanilla javascript.
As online editor Microsoft's [Monaco Editor](https://github.com/microsoft/monaco-editor).
The documentation can be found [here](https://microsoft.github.io/monaco-editor/docs.html).
You may recognize the editor since it's the code editor from [VS Code](https://github.com/microsoft/vscode).
The main entry file are `index.jsp`, `previewer.jsp` and `error.jsp`.
The code structure is mainly divided into `components` and `js`:
- `components` are for example a modal or dialog.
Anything that include things directly seen and rendered on the page.
- `js` contains more the things that do not have a direct influence on the UI. For example the PlantUML language features or the methods for cross-browser/cross-tab communication.
## PlantUML Language Features
At the moment there is no defined PlantUML language.
Feel free to create one!
But until then the syntax highlighting form `apex` is used.
IMHO it works quite well.
All PlantUML language features are bundled into a seperate file `plantuml-language.min.js`.
Therefore anything under `js/language` should be independent!
### Code Completion
What do you need to do to create a new code completion feature:
1. create a new JS file under `js/language/completion` - let's say `xxx.js`
2. create a new `registerXxxCompletion` method
_It may help you if you look into the [documentation](https://microsoft.github.io/monaco-editor/docs.html#functions/languages.registerCompletionItemProvider.html) or at the provided [sample code](https://microsoft.github.io/monaco-editor/playground.html?source=v0.38.0#example-extending-language-services-completion-provider-example) to understand more about `monaco.languages.registerCompletionItemProvider`._
```js
PlantUmlLanguageFeatures.prototype.registerEmojiCompletion = function() {
monaco.languages.registerCompletionItemProvider(PlantUmlLanguageFeatures.languageSelector, {
provideCompletionItems: async (model, position) => {
// ...
return { suggestions };
}
});
};
```
4. add your new method inside the language initialization inside `js/language/language.js`
```diff
const PlantUmlLanguageFeatures = function(initialize = true) {
if (initialize) {
// initialize all validation and code completion methods
this.addStartEndValidationListeners();
this.registerThemeCompletion();
this.registerIconCompletion();
this.registerEmojiCompletion();
+ this.registerXxxCompletion();
}
};
```
### Code Validation
What do you need to do to create a new code validation feature:
1. create a new JS file under `js/language/validation/listeners` - let's say `zzz-validation.js`
2. register your validation methods to the designated event listener
The validation event order is: `before` → `code` → `line` → `after`
You may look at `js/language/validation/listeners/start-end-validation.js` to get an idea how to register a new listener.
3. add your new method inside the language initialization inside `js/language/language.js`
```diff
const PlantUmlLanguageFeatures = function(initialize = true) {
if (initialize) {
// initialize all validation and code completion methods
this.addStartEndValidationListeners();
+ this.addZzzValidationListeners();
this.registerThemeCompletion();
this.registerIconCompletion();
this.registerEmojiCompletion();
}
};
```
### Tipps
- `pom.xml`: set `withoutCSSJSCompress` to `true` to deactivate the minification
- use `mvn fizzed-watcher:run` to watch changes and automatically update the bundled `plantuml.min.{css,js}` and `plantuml-language.min.js` files
- if the browser get the error `ReferenceError: require is not defined` or something similar related to the webjars, try `mvn clean install` to get things straight

View File

@ -28,6 +28,10 @@
- mvn test -DskipTests=false -DargLine="-Dsystem.test.server=http://localhost:8080/plantuml"
-->
<skipTests>true</skipTests>
<!--
JS and CSS compression / minify
-->
<withoutCSSJSCompress>false</withoutCSSJSCompress>
<!--
This artifact is required for:
@ -75,7 +79,7 @@
<junit.version>5.9.3</junit.version>
<junit-suite.version>1.9.3</junit-suite.version>
<selenium.version>4.9.1</selenium.version>
<selenium-webdrivermanager.version>5.3.2</selenium-webdrivermanager.version>
<selenium-webdrivermanager.version>5.3.3</selenium-webdrivermanager.version>
<commons-io.version>2.11.0</commons-io.version>
<jetty-server.version>${jetty.version}</jetty-server.version>
@ -101,6 +105,7 @@
<jetty-maven-plugin.version>${jetty.version}</jetty-maven-plugin.version>
<duplicate-finder-maven-plugin.version>1.5.1</duplicate-finder-maven-plugin.version>
<maven-javadoc-plugin.version>3.5.0</maven-javadoc-plugin.version>
<resources-optimizer-maven-plugin.version>2.4.4</resources-optimizer-maven-plugin.version><!-- no JDK8 support starting version 2.5.0 -->
</properties>
<dependencies>
@ -479,6 +484,95 @@
</webResources>
</configuration>
</plugin>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<executions>
<execution>
<id>clean-minified-resources</id>
<phase>initialize</phase>
<goals>
<goal>clean</goal>
</goals>
<configuration>
<excludeDefaultDirectories>true</excludeDefaultDirectories>
<filesets>
<fileset>
<directory>${basedir}/src/main/webapp/min</directory>
</fileset>
</filesets>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.primefaces.extensions</groupId>
<artifactId>resources-optimizer-maven-plugin</artifactId>
<version>${resources-optimizer-maven-plugin.version}</version>
<executions>
<execution>
<id>optimize</id>
<phase>generate-resources</phase>
<goals>
<goal>optimize</goal>
</goals>
</execution>
</executions>
<configuration>
<warningLevel>DEFAULT</warningLevel>
<failOnWarning>true</failOnWarning>
<suffix>.min</suffix>
<languageIn>ECMASCRIPT_2020</languageIn>
<languageOut>ECMASCRIPT5_STRICT</languageOut>
<emitUseStrict>true</emitUseStrict>
<resourcesSets>
<resourcesSet>
<inputDir>${basedir}/src/main/webapp</inputDir>
<includes>
<include>components/**/*.js</include>
<include>js/**/*.js</include>
</includes>
<excludes>
<exclude>js/language/**</exclude>
</excludes>
<aggregations>
<aggregation>
<withoutCompress>${withoutCSSJSCompress}</withoutCompress>
<removeIncluded>false</removeIncluded>
<outputFile>${basedir}/src/main/webapp/min/plantuml.min.js</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
<resourcesSet>
<inputDir>${basedir}/src/main/webapp/js/language</inputDir>
<includes>
<include>language.js</include>
<include>validation/validation.js</include>
<include>**/*.js</include>
</includes>
<aggregations>
<aggregation>
<withoutCompress>${withoutCSSJSCompress}</withoutCompress>
<removeIncluded>false</removeIncluded>
<outputFile>${basedir}/src/main/webapp/min/plantuml-language.min.js</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
<resourcesSet>
<inputDir>${basedir}/src/main/webapp/components</inputDir>
<includes>
<include>**/*.css</include>
</includes>
<aggregations>
<aggregation>
<withoutCompress>${withoutCSSJSCompress}</withoutCompress>
<removeIncluded>false</removeIncluded>
<outputFile>${basedir}/src/main/webapp/min/plantuml.min.css</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
</resourcesSets>
</configuration>
</plugin>
</plugins>
</build>

128
pom.xml
View File

@ -28,6 +28,12 @@
- mvn test -DskipTests=false -DargLine="-Dsystem.test.server=http://localhost:8080/plantuml"
-->
<skipTests>true</skipTests>
<!--
JS and CSS compression / minify
If false minify is enabled.
Dev Tipp: set to `true` and run `mvn fizzed-watcher:run` while developing the frontend
-->
<withoutCSSJSCompress>false</withoutCSSJSCompress>
<!--
This artifact is required for:
@ -75,7 +81,7 @@
<junit.version>5.9.3</junit.version>
<junit-suite.version>1.9.3</junit-suite.version>
<selenium.version>4.9.1</selenium.version>
<selenium-webdrivermanager.version>5.3.2</selenium-webdrivermanager.version>
<selenium-webdrivermanager.version>5.3.3</selenium-webdrivermanager.version>
<commons-io.version>2.11.0</commons-io.version>
<jetty-server.version>${jetty.version}</jetty-server.version>
@ -93,7 +99,7 @@
<maven-site-plugin.version>3.12.1</maven-site-plugin.version>
<maven-project-info-reports-plugin.version>3.4.3</maven-project-info-reports-plugin.version>
<maven-checkstyle-plugin.version>3.2.2</maven-checkstyle-plugin.version>
<checkstyle.version>10.10.0</checkstyle.version>
<checkstyle.version>10.11.0</checkstyle.version>
<!-- plugins -->
<maven-eclipse-plugin.version>2.10</maven-eclipse-plugin.version>
@ -101,6 +107,8 @@
<jetty-maven-plugin.version>${jetty.version}</jetty-maven-plugin.version>
<duplicate-finder-maven-plugin.version>1.5.1</duplicate-finder-maven-plugin.version>
<maven-javadoc-plugin.version>3.5.0</maven-javadoc-plugin.version>
<resources-optimizer-maven-plugin.version>2.5.6</resources-optimizer-maven-plugin.version>
<fizzed-watcher-maven-plugin.verson>1.0.6</fizzed-watcher-maven-plugin.verson>
</properties>
<dependencies>
@ -173,7 +181,7 @@
<scope>runtime</scope>
</dependency>
<!-- Testing -->
<!-- Testing -->
<dependency>
<groupId>org.junit.jupiter</groupId>
<artifactId>junit-jupiter-api</artifactId>
@ -451,6 +459,120 @@
</webResources>
</configuration>
</plugin>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<executions>
<execution>
<id>clean-minified-resources</id>
<phase>initialize</phase>
<goals>
<goal>clean</goal>
</goals>
<configuration>
<excludeDefaultDirectories>true</excludeDefaultDirectories>
<filesets>
<fileset>
<directory>${basedir}/src/main/webapp/min</directory>
</fileset>
</filesets>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.primefaces.extensions</groupId>
<artifactId>resources-optimizer-maven-plugin</artifactId>
<version>${resources-optimizer-maven-plugin.version}</version>
<executions>
<execution>
<id>optimize</id>
<phase>generate-resources</phase>
<goals>
<goal>optimize</goal>
</goals>
</execution>
</executions>
<configuration>
<warningLevel>DEFAULT</warningLevel>
<failOnWarning>true</failOnWarning>
<suffix>.min</suffix>
<languageIn>ECMASCRIPT_2020</languageIn>
<languageOut>ECMASCRIPT5_STRICT</languageOut>
<emitUseStrict>true</emitUseStrict>
<resourcesSets>
<resourcesSet>
<inputDir>${basedir}/src/main/webapp</inputDir>
<includes>
<include>components/**/*.js</include>
<include>js/**/*.js</include>
</includes>
<excludes>
<exclude>js/language/**</exclude>
</excludes>
<aggregations>
<aggregation>
<withoutCompress>${withoutCSSJSCompress}</withoutCompress>
<removeIncluded>false</removeIncluded>
<outputFile>${basedir}/src/main/webapp/min/plantuml.min.js</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
<resourcesSet>
<inputDir>${basedir}/src/main/webapp/js/language</inputDir>
<includes>
<include>language.js</include>
<include>validation/validation.js</include>
<include>**/*.js</include>
</includes>
<aggregations>
<aggregation>
<withoutCompress>${withoutCSSJSCompress}</withoutCompress>
<removeIncluded>false</removeIncluded>
<outputFile>${basedir}/src/main/webapp/min/plantuml-language.min.js</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
<resourcesSet>
<inputDir>${basedir}/src/main/webapp/components</inputDir>
<includes>
<include>**/*.css</include>
</includes>
<aggregations>
<aggregation>
<withoutCompress>${withoutCSSJSCompress}</withoutCompress>
<removeIncluded>false</removeIncluded>
<outputFile>${basedir}/src/main/webapp/min/plantuml.min.css</outputFile>
</aggregation>
</aggregations>
</resourcesSet>
</resourcesSets>
</configuration>
</plugin>
<plugin>
<groupId>com.fizzed</groupId>
<artifactId>fizzed-watcher-maven-plugin</artifactId>
<version>${fizzed-watcher-maven-plugin.verson}</version>
<configuration>
<watches>
<watch>
<directory>${basedir}/src/main/webapp/components</directory>
<recursive>true</recursive>
<includes>
<include>*.js</include>
<include>*.css</include>
</includes>
<excludes>
<exclude>*.min.js</exclude>
<exclude>*.min.css</exclude>
</excludes>
</watch>
</watches>
<goals>
<goal>clean:clean@clean-minified-resources</goal>
<goal>org.primefaces.extensions:resources-optimizer-maven-plugin:optimize</goal>
</goals>
</configuration>
</plugin>
</plugins>
</build>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

@ -8,7 +8,7 @@
<meta name="color-scheme" content="light dark" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="plantuml.css" />
<link rel="stylesheet" href="min/plantuml.min.css" />
<script src="min/plantuml.min.js"></script>
<script src="min/plantuml-language.min.js"></script>
<script src="webjars/monaco-editor/0.36.1/min/vs/loader.js"></script>
<script src="plantumllanguage.js"></script>
<script src="plantuml.js"></script>

View File

@ -0,0 +1,165 @@
/**********************************
* PlantUML Server Application CSS *
***********************************/
/************* variables *************/
:root {
color-scheme: light dark;
--font-color: black;
--font-color-disabled: #888;
--bg-color: white;
--border-color: #ccc;
--border-color-2: #aaa;
--footer-font-color: #666;
--footer-bg-color: #eee;
--modal-bg-color: #fefefe;
--file-drop-color: #eee;
}
[data-theme="dark"] {
--font-color: #ccc;
--font-color-disabled: #777;
--bg-color: #212121;
--border-color: #848484;
--border-color-2: #aaa;
--footer-font-color: #ccc;
--footer-bg-color: black;
--modal-bg-color: #424242;
--file-drop-color: #212121;
}
/************* default settings *************/
html, body {
margin: 0;
padding: 0;
}
html {
font-family: arial,helvetica,sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--font-color);
overflow: auto;
}
@media screen and (min-width: 900px) {
body {
height: 100vh;
overflow: hidden;
}
.app {
height: 100%;
}
}
input:not([type="image"]) {
background-color: var(--bg-color);
color: var(--font-color);
}
input[type="file"]::file-selector-button {
background-color: var(--bg-color);
color: var(--font-color);
}
select {
background-color: var(--bg-color);
color: var(--font-color);
}
/************* ruler *************/
.hr {
padding: 1rem 0;
width: 100%;
}
.flex-columns > .hr {
padding: 0 1rem;
width: initial;
height: 100%;
}
.hr:after {
content: "";
display: block;
background-color: var(--border-color);
height: 100%;
width: 100%;
min-height: 3px;
min-width: 3px;
}
/************* wait cursor *************/
.wait {
cursor: wait;
}
.wait > * {
pointer-events: none;
}
/************* flex rows and columns *************/
.flex-columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-rows {
display: flex;
flex-direction: column;
}
.flex-main {
flex: 1 1 1px;
overflow: auto;
}
.flex-columns > *, .flex-rows > * {
flex-shrink: 0;
}
/*******************************************************************/
/************* header, main, footer *************/
.header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.main {
margin: 1% 5%;
z-index: 1;
}
.main > div {
margin: 0 1.75%;
}
.main > div:first-child {
margin-left: 0;
}
.main > div:last-child {
margin-right: 0;
}
@media screen and (max-width: 900px) {
.main {
display: block;
overflow: inherit;
}
.main > div {
margin: 1.75% 0;
}
.main > div:first-child {
margin-top: 0;
}
.main > div:last-child {
margin-bottom: 0;
}
}
.footer p {
background-color: var(--footer-bg-color);
color: var(--footer-font-color);
font-size: 0.7em;
margin: 0;
padding: 0.5em;
text-align: center;
}
/*******************************************************************/
/************* color themes *************/
[data-theme="dark"] img:not(#diagram-png):not(.no-filter) {
filter: invert() contrast(30%);
}
[data-theme="dark"] input[type="image"] {
filter: invert() contrast(30%);
}
[data-theme="dark"] a {
color: white;
}

View File

@ -0,0 +1,46 @@
/*********************************
* PlantUML Server Application JS *
**********************************/
"use strict";
async function initApp() {
const view = new URL(window.location.href).searchParams.get("view")?.toLowerCase();
function initializeAppData() {
const analysedUrl = analyseUrl(window.location.href);
const code = document.editor?.getValue();
document.appData = Object.assign({}, window.opener?.document.appData);
if (Object.keys(document.appData).length === 0) {
document.appData = {
encodedDiagram: analysedUrl.encodedDiagram,
index: analysedUrl.index,
numberOfDiagramPages: (code) ? getNumberOfDiagramPagesFromCode(code) : 1,
};
}
}
await initEditor(view);
initializeAppData();
initTheme();
initAppCommunication();
await initPreview(view);
initModals(view);
if (document.editor) {
document.editor.focus();
if (document.appData.encodedDiagram == "SyfFKj2rKt3CoKnELR1Io4ZDoSa70000") {
// if default `Bob -> Alice : hello` example mark example code for faster editing
document.editor.setSelection({
startLineNumber: 2,
endLineNumber: 2,
startColumn: 1,
endColumn: 21,
});
}
}
document.appConfig.autoRefreshState = "complete";
}
// main entry
window.onload = initApp;

View File

@ -0,0 +1,28 @@
/*************
* Editor CSS *
**************/
.editor {
border: 3px solid var(--border-color);
box-sizing: border-box;
overflow: hidden;
}
@media screen and (max-width: 900px) {
.editor {
height: 20em;
}
}
.editor .monaco-editor-container {
overflow: hidden;
position: relative;
}
#monaco-editor {
height: 100%;
}
/* Hack to display the icons and emojis in the auto completion documentation in a visible size.
* (see PlantUmlLanguageFeatures.register{Icon,Emoji}Completion) */
#monaco-editor .overlayWidgets .suggest-details p img[alt="icon"],
#monaco-editor .overlayWidgets .suggest-details p img[alt="emoji"] {
height: 1.2rem;
}

View File

@ -0,0 +1,112 @@
/************
* Editor JS *
*************/
const { setEditorValue, initEditor } = (function() {
function setEditorValue(
editor,
text,
{ suppressEditorChangedMessage=false, forceMoveMarkers=undefined } = {}
) {
if (suppressEditorChangedMessage && editor === document.editor) {
suppressNextMessage("editor");
}
// replace editor value but preserve undo stack
editor.executeEdits("", [{ range: editor.getModel().getFullModelRange(), text, forceMoveMarkers }]);
}
async function initEditor(view) {
function loadMonacoCodeEditorAsync() {
return new Promise((resolve, _reject) => {
require.config({ paths: { vs: "webjars/monaco-editor/0.36.1/min/vs" } });
require(["vs/editor/editor.main"], resolve);
});
}
function createEditorModel() {
let plantumlFeatures;
function onPlantumlEditorContentChanged(code, sender=undefined, broadcastChanges=true) {
function broadcastCodeEditorChanges() {
document.appConfig.autoRefreshState = "started";
const numberOfDiagramPages = getNumberOfDiagramPagesFromCode(code);
let index = document.appData.index;
if (index === undefined || numberOfDiagramPages === 1) {
index = undefined;
} else if (index >= numberOfDiagramPages) {
index = numberOfDiagramPages - 1;
}
makeRequest("POST", "coder", { data: code }).then((encodedDiagram) => {
sendMessage({
sender,
data: { encodedDiagram, numberOfDiagramPages, index },
synchronize: true,
});
});
}
const updatePlantumlLanguageMarkers = (function() {
return function() {
const model = document.editor.getModel();
plantumlFeatures = plantumlFeatures || new PlantUmlLanguageFeatures();
plantumlFeatures.validateCode(model)
.then(markers => monaco.editor.setModelMarkers(model, "plantuml", markers));
}
})();
if (sender && broadcastChanges) broadcastCodeEditorChanges();
updatePlantumlLanguageMarkers();
}
function getInitPlantumlCodeAndRemoveElement() {
const initCodeEl = document.getElementById("initCode");
const initCode = initCodeEl.value;
initCodeEl.remove();
return initCode;
}
// create editor model
const model = monaco.editor.createModel(
getInitPlantumlCodeAndRemoveElement(),
"apex",
monaco.Uri.parse("inmemory://plantuml")
);
// create editor model watcher
let timer = 0;
model.onDidChangeContent(() => {
clearTimeout(timer);
document.appConfig.autoRefreshState = "waiting";
timer = setTimeout(
() => onPlantumlEditorContentChanged(model.getValue(), "editor"),
document.appConfig.editorWatcherTimeout
);
});
return model;
}
function getDefaultStorageService() {
// create own storage service to expand suggestion documentation by default
return {
get() {},
getBoolean(key) { return key === "expandSuggestionDocs"; },
getNumber() { return 0; },
remove() {},
store() {},
onWillSaveState() {},
onDidChangeStorage() {},
onDidChangeValue() {},
};
}
// load monaco editor requirements
await loadMonacoCodeEditorAsync();
if (view !== "previewer") {
// create editor
const model = createEditorModel();
const storageService = getDefaultStorageService();
document.editor = monaco.editor.create(document.getElementById("monaco-editor"), {
model, ...document.appConfig.editorCreateOptions
}, { storageService });
// sometimes the monaco editor has resize problems
document.addEventListener("resize", () => document.editor.layout());
// init editor components
initEditorUrlInput();
initEditorMenu();
}
}
return { setEditorValue, initEditor };
})();

View File

@ -0,0 +1,10 @@
<div id="editor-main-container" class="editor flex-main flex-rows">
<div>
<%@ include file="/components/editor/url-input/editor-url-input.jsp" %>
</div>
<div class="flex-main monaco-editor-container">
<textarea id="initCode" name="initCode" style="display: none;"><%= net.sourceforge.plantuml.servlet.PlantUmlServlet.stringToHTMLString(decoded) %></textarea>
<div id="monaco-editor"></div>
<%@ include file="/components/editor/menu/editor-menu.jsp" %>
</div>
</div>

View File

@ -0,0 +1,92 @@
/******************
* Editor Menu CSS *
*******************/
.monaco-editor-container .editor-menu {
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.monaco-editor-container .editor-menu > div.menu-kebab {
width: 60px;
height: 60px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
cursor: pointer;
scale: 0.5;
}
.monaco-editor-container .editor-menu:hover > div.menu-kebab,
.monaco-editor-container .editor-menu:focus > div.menu-kebab {
outline: none;
scale: 0.65;
}
.monaco-editor-container .menu-kebab .kebab-circle {
width: 12px;
height: 12px;
margin: 3px;
background: var(--font-color);
border-radius: 50%;
display: block;
opacity: 0.8;
}
.monaco-editor-container .menu-kebab {
flex-direction: column;
position: relative;
transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.monaco-editor-container .menu-kebab .kebab-circle:nth-child(4),
.monaco-editor-container .menu-kebab .kebab-circle:nth-child(5) {
position: absolute;
opacity: 0;
top: 50%;
margin-top: -6px;
left: 50%;
}
.monaco-editor-container .menu-kebab .kebab-circle:nth-child(4) {
margin-left: -25px;
}
.monaco-editor-container .menu-kebab .kebab-circle:nth-child(5) {
margin-left: 13px;
}
.monaco-editor-container .editor-menu:hover .menu-kebab,
.monaco-editor-container .editor-menu:focus .menu-kebab {
transform: rotate(45deg);
}
.monaco-editor-container .editor-menu:hover .menu-kebab .kebab-circle,
.monaco-editor-container .editor-menu:focus .menu-kebab .kebab-circle {
opacity: 1;
}
.monaco-editor-container .editor-menu .menu-item {
display: none;
margin: 1rem 0;
height: 1.75rem;
opacity: 0.5;
position: relative;
-webkit-animation-name: editor-menu-animateitem;
-webkit-animation-duration: 0.4s;
animation-name: editor-menu-animateitem;
animation-duration: 0.4s;
}
@-webkit-keyframes editor-menu-animateitem {
from { top: -50%; opacity: 0; }
to { top: 0; opacity: 0.5; }
}
@keyframes editor-menu-animateitem {
from { top: -50%; opacity: 0; }
to { top: 0; opacity: 0.5; }
}
.monaco-editor-container .editor-menu .menu-item:hover {
opacity: 1;
}
.monaco-editor-container .editor-menu:hover .menu-item,
.monaco-editor-container .editor-menu:focus .menu-item {
display: block;
}

View File

@ -0,0 +1,15 @@
/*****************
* Editor Menu JS *
******************/
function initEditorMenu() {
function copyCodeToClipboard() {
const range = document.editor.getModel().getFullModelRange();
document.editor.focus();
document.editor.setSelection(range);
const code = document.editor.getValue();
navigator.clipboard?.writeText(code).catch(() => {});
}
// add listener
document.getElementById("menu-item-editor-code-copy").addEventListener("click", copyCodeToClipboard);
}

View File

@ -0,0 +1,35 @@
<div class="editor-menu" tabindex="-1">
<div class="menu-kebab">
<div class="kebab-circle"></div>
<div class="kebab-circle"></div>
<div class="kebab-circle"></div>
<div class="kebab-circle"></div>
<div class="kebab-circle"></div>
</div>
<div class="menu-items">
<input
id="menu-item-editor-code-copy"
class="menu-item"
type="image"
alt="copy"
title="Copy code"
src="assets/actions/copy.svg"
/>
<input
class="menu-item"
type="image"
alt="import"
title="Import diagram"
src="assets/actions/upload.svg"
onclick="openModal('diagram-import')"
/>
<input
class="menu-item"
type="image"
alt="export"
title="Export diagram"
src="assets/actions/download.svg"
onclick="openModal('diagram-export')"
/>
</div>
</div>

View File

@ -0,0 +1,29 @@
/***********************
* Editor URL Input CSS *
************************/
.editor .btn-input {
align-items: center;
border-bottom: 3px solid var(--border-color);
box-sizing: border-box;
display: flex;
justify-content: center;
}
.editor .btn-input input[type=text] {
border: 0;
flex: 1 1 1px;
font-family: monospace;
font-size: medium;
padding: 0.2em;
text-overflow: ellipsis;
}
.editor .btn-input input[type=text]:focus {
border: 0;
box-shadow: none;
outline: none;
}
.editor .btn-input input[type="image"] {
height: 1rem;
margin-left: 0.7em;
padding: 0 0.3em;
}

View File

@ -0,0 +1,53 @@
/**********************
* Editor URL Input JS *
***********************/
const { setUrlValue, initEditorUrlInput } = (function() {
function setUrlValue(
url=undefined,
{ encodedDiagram=undefined, index=undefined } = {},
{ suppressEditorChangedMessage=false } = {}
) {
if (!url && !encodedDiagram) return;
if (suppressEditorChangedMessage) {
suppressNextMessage("url");
}
document.getElementById("url").value = url ? url : resolvePath(buildUrl("png", encodedDiagram, index));
}
function initEditorUrlInput() {
const input = document.getElementById("url");
function copyUrlToClipboard() {
input.focus();
input.select();
navigator.clipboard?.writeText(input.value).catch(() => {});
}
async function onInputChanged(event) {
document.appConfig.autoRefreshState = "started";
event.target.title = event.target.value;
const analysedUrl = analyseUrl(event.target.value);
// decode diagram (server request)
const code = await makeRequest("GET", "coder/" + analysedUrl.encodedDiagram);
// change editor content without sending the editor change message
setEditorValue(document.editor, code, { suppressEditorChangedMessage: true });
sendMessage({
sender: "url",
data: {
encodedDiagram: analysedUrl.encodedDiagram,
index: analysedUrl.index,
},
synchronize: true,
});
}
// resolve relative path inside url input once
setUrlValue(resolvePath(input.value));
// update editor and everything else if the URL input is changed
input.addEventListener("change", onInputChanged);
// add listener
document.getElementById("url-copy-btn").addEventListener("click", copyUrlToClipboard);
}
return { setUrlValue, initEditorUrlInput };
})();

View File

@ -0,0 +1,4 @@
<div class="btn-input">
<input id="url" type="text" name="url" value="png/<%= diagramUrl %>" />
<input id="url-copy-btn" type="image" alt="copy" src="assets/actions/copy.svg" tabindex="-1" />
</div>

View File

@ -1 +1 @@
<p><%= net.sourceforge.plantuml.version.Version.fullDescription() %></p>
<p><%= net.sourceforge.plantuml.version.Version.fullDescription() %></p>

View File

@ -0,0 +1,17 @@
<div>
<img
style="display: inline; position: absolute; top: 0; right: 0; border: 0; max-width: 25%;"
class="no-filter"
src="assets/github-fork-me.svg"
alt="Fork me on GitHub"
usemap="#github-banner"
/>
<map id="github-banner" name="github-banner" style="cursor: pointer;">
<area
shape="poly"
coords="10,0 50,0 149,100 149,140"
href="https://github.com/plantuml/plantuml-server"
alt="Fork me on GitHub"
/>
</map>
</div>

View File

@ -0,0 +1,8 @@
<h1>PlantUML Server</h1>
<% if (showSocialButtons) { %>
<%@ include file="/components/header/social-buttons.jsp" %>
<% } %>
<% if (showGithubRibbon) { %>
<%@ include file="/components/header/github-ribbon.jsp" %>
<% } %>
<p>Create your <a href="https://plantuml.com">PlantUML</a> diagrams directly in your browser!</p>

View File

@ -0,0 +1 @@
<!-- Insert here the html code of your social buttons -->

View File

@ -0,0 +1,7 @@
/*********************
* Diagram Export CSS *
**********************/
#diagram-export.modal .label-input-pair label {
min-width: 8rem;
}

View File

@ -0,0 +1,97 @@
/********************
* Diagram Export JS *
*********************/
function initDiagramExport() {
const filenameInput = document.getElementById("download-name");
const fileTypeSelect = document.getElementById("download-type");
function openDiagramExportDialog() {
setVisibility(document.getElementById("diagram-export"), true, true);
const code = document.editor.getValue();
const name = Array.from(
code.matchAll(/^\s*@start[a-zA-Z]*\s+([a-zA-Z-_äöüÄÖÜß ]+)\s*$/gm),
m => m[1]
)[0] || "diagram";
filenameInput.value = name + ".puml";
fileTypeSelect.value = "code";
filenameInput.focus();
}
function splitFilename(filename) {
const idx = filename.lastIndexOf(".");
if (idx < 1) {
return { name: filename, ext: null };
}
if (idx === filename.length - 1) {
return { name: filename.slice(0, -1), ext: null };
}
return {
name: filename.substring(0, idx),
ext: filename.substring(idx + 1),
};
}
function getExtensionByType(type) {
switch (type) {
case "epstext": return "eps";
case "code": return "puml";
default: return type;
}
}
function getTypeByExtension(ext) {
if (!ext) return ext;
ext = ext.toLowerCase();
switch (ext) {
case "puml":
case "plantuml":
case "code":
return "code";
case "ascii": return "txt"
default: return ext;
}
}
function onTypeChanged(event) {
const type = event.target.value;
const ext = getExtensionByType(type);
const { name } = splitFilename(filenameInput.value);
filenameInput.value = name + "." + ext;
}
function onFilenameChanged(event) {
const { ext } = splitFilename(event.target.value);
const type = getTypeByExtension(ext);
if (!type) return;
fileTypeSelect.value = type;
}
function downloadFile() {
const filename = filenameInput.value;
const type = fileTypeSelect.value;
const link = document.createElement("a");
link.download = filename;
if (type === "code") {
const code = document.editor.getValue();
link.href = "data:," + encodeURIComponent(code);
} else {
if (document.appData.index !== undefined) {
link.href = type + "/" + document.appData.index + "/" + document.appData.encodedDiagram;
} else {
link.href = type + "/" + document.appData.encodedDiagram;
}
}
link.click();
}
// register modal
registerModalListener("diagram-export", openDiagramExportDialog);
// add listener
filenameInput.addEventListener("change", onFilenameChanged);
fileTypeSelect.addEventListener("change", onTypeChanged);
document.getElementById("diagram-export-ok-btn").addEventListener("click", downloadFile);
// add Ctrl+S or Meta+S (Mac) key shortcut to open export dialog
window.addEventListener("keydown", event => {
if (event.key === "s" && (isMac ? event.metaKey : event.ctrlKey)) {
event.preventDefault();
if (!isModalOpen("diagram-export")) {
openDiagramExportDialog();
}
}
}, false);
}

View File

@ -0,0 +1,30 @@
/*********************
* Diagram Import CSS *
**********************/
#diagram-import p.error-message {
color: darkred;
padding-left: 1rem;
padding-right: 1rem;
}
#diagram-import input[type="file"] {
display: block;
width: 100%;
border: 0.2rem dashed var(--border-color);
border-radius: 0.4rem;
box-sizing: border-box;
padding: 5rem 2rem;
}
#diagram-import input[type="file"],
#diagram-import input[type="file"]::file-selector-button {
background-color: var(--modal-bg-color);
}
#diagram-import input[type="file"]:hover,
#diagram-import input[type="file"].drop-able {
border-color: var(--border-color-2);
background-color: var(--file-drop-color);
}
#diagram-import input[type="file"]:hover::file-selector-button,
#diagram-import input[type="file"].drop-able::file-selector-button {
background-color: var(--file-drop-color);
}

View File

@ -0,0 +1,152 @@
/********************
* Diagram Import JS *
*********************/
function initDiagramImport() {
const dialogElement = document.getElementById("diagram-import");
const fileInput = document.getElementById("diagram-import-input");
const okButton = document.getElementById("diagram-import-ok-btn");
const errorMessageElement = document.getElementById("diagram-import-error-message");
function openDialog(isOpenManually = true) {
setVisibility(dialogElement, true, true);
dialogElement.dataset.isOpenManually = isOpenManually.toString();
// reset or clear file input
fileInput.value = "";
onFileInputChange(fileInput);
}
function closeDialog() {
fileInput.value = ""; // reset or clear
onFileInputChange(fileInput);
dialogElement.removeAttribute("data-is-open-manually");
setVisibility(dialogElement, false);
}
function onFileInputChange(fileInput) {
errorMessageElement.innerText = "";
okButton.disabled = fileInput.files?.length < 1;
}
function checkFileLocally(file) {
function getImageFileType({name, type}) {
const supported = ["png", "svg"];
// get type by mime type
let fileType = supported.filter(t => type.toLowerCase().indexOf(t) !== -1)[0];
if (fileType) return fileType;
// fallback: get type by filename extension
if (name.indexOf(".") === -1) return undefined;
const ext = name.substring(name.lastIndexOf(".")+1).toLowerCase();
return supported.filter(t => ext === t)[0];
}
function isDiagramCode({name, type}) {
// get type by mime type
let supported = ["plain", "text", "plantuml", "puml"];
if (supported.filter(t => type.toLowerCase().indexOf(t) !== -1).length > 0) {
return true;
}
// fallback: get type by filename extension
if (name.indexOf(".") === -1) return false;
const ext = name.substring(name.lastIndexOf('.')+1).toLowerCase();
supported = ["txt", "puml", "plantuml"];
return supported.filter(t => ext === t).length > 0;
}
const type = getImageFileType(file);
const isCode = type === undefined ? isDiagramCode(file) : false;
if (!type && !isCode) {
errorMessageElement.innerText = "File not supported. " +
"Only PNG and SVG diagram images as well as PlantUML code text files are supported."
}
return { type, isDiagramCode: isCode, valid: type || isCode };
}
function importDiagram(file, fileCheck) {
function loadDiagram(code) {
setEditorValue(document.editor, code);
}
function requestMetadata(file) {
const fd = new FormData();
fd.append("diagram", file, file.name);
return makeRequest("POST", "metadata", {
data: fd,
responseType: "json",
headers: { "Accept": "application/json" },
});
}
dialogElement.classList.add("wait");
return new Promise((resolve, reject) => {
if (fileCheck.type) {
// upload diagram image, get meta data from server and load diagram from result
requestMetadata(file).then(
metadata => { loadDiagram(metadata.decoded); resolve(); },
({ response }) => { errorMessageElement.innerText = response.message || response; reject(); }
);
} else if (fileCheck.isDiagramCode) {
// read code (text) file
const reader = new FileReader();
reader.onload = event => loadDiagram(event.target.result);
reader.readAsText(file);
resolve();
} else {
// this error should already be handled.
errorMessageElement.innerText = "File not supported. " +
"Only PNG and SVG diagram images as well as PlantUML code text files are supported.";
reject();
}
}).then(() => closeDialog(), () => {}).finally(() => dialogElement.classList.remove("wait"));
}
function onGlobalDragEnter(event) {
event.stopPropagation();
event.preventDefault();
if (!isVisible(dialogElement)) {
openDialog(false);
}
}
function onFileInputDragOver(event) {
event.stopPropagation();
event.preventDefault();
if (event.dataTransfer !== null) {
event.dataTransfer.dropEffect = "copy";
}
}
function onFileInputDrop(event) {
function stop() {
event.stopPropagation();
event.preventDefault();
}
const files = event.dataTransfer.files || event.target.files;
if (!files || files.length < 1) {
return stop();
}
const file = files[0];
const fileCheck = checkFileLocally(file);
if (!fileCheck.valid) {
return stop();
}
if (dialogElement.dataset.isOpenManually === "true") {
return; // let file input handle this event => no `stop()`!
}
// drop and go - close modal without additional ok button click
stop();
importDiagram(file, fileCheck);
}
// global drag&drop events
window.addEventListener("dragenter", onGlobalDragEnter, false);
// diagram import dialog drag&drop events
fileInput.addEventListener("dragenter", event => event.target.classList.add("drop-able"), false);
fileInput.addEventListener("dragover", onFileInputDragOver, false);
fileInput.addEventListener("dragexit", event => event.target.classList.remove("drop-able"), false);
fileInput.addEventListener("drop", onFileInputDrop, false);
fileInput.addEventListener("change", event => onFileInputChange(event.target));
// ok button
okButton.addEventListener("click", () => {
const file = fileInput.files[0]; // should be always a valid file
importDiagram(file, checkFileLocally(file)); // otherwise button should be disabled
});
// register model listeners
registerModalListener("diagram-import", openDialog, closeDialog);
}

View File

@ -5,7 +5,7 @@
<div class="hr"></div>
</div>
<div class="modal-main flex-main">
<input id="diagram-import-input" type="file" name="diagram" onchange="onDiagramImportInputChange(this);" />
<input id="diagram-import-input" type="file" name="diagram" />
<p id="diagram-import-error-message" class="error-message"></p>
</div>
<div class="modal-footer">

View File

@ -0,0 +1,95 @@
/*************
* Modals CSS *
**************/
.modal {
display: block;
position: fixed;
z-index: 1;
padding: 5%;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal .modal-content {
background-color: var(--modal-bg-color);
margin: auto;
padding: 2rem;
border: 3px solid var(--border-color);
max-width: 30rem;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: modal-animatetop;
-webkit-animation-duration: 0.4s;
animation-name: modal-animatetop;
animation-duration: 0.4s;
position: relative;
top: 50%;
transform: translateY(-50%);
}
@-webkit-keyframes modal-animatetop {
from { top: -50%; opacity: 0; }
to { top: 50%; opacity: 1; }
}
@keyframes modal-animatetop {
from { top: -50%; opacity: 0; }
to { top: 50%; opacity: 1; }
}
/************* header, main, footer *************/
.modal .modal-header h2 {
margin: 0;
}
.modal .modal-main {
flex: 1;
}
.modal .modal-footer {
margin-top: 1rem;