+ adding support for local rendering(references #6)

joethei · Dec 12, 2021 · e9089d8 · e9089d8
1 parent f5c29b9
commit e9089d8
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ You can also host your own server
 [JEE](https://plantuml.com/de/server) /
 [PicoWeb](https://plantuml.com/de/picoweb)) and specify its address in the settings.
 
+You can also render your diagrams locally by installing the desktop only [Local PlantUML Provider](https://github.com/joethei/obsidian-local-plantuml) plugin.
+
 ## Usage
 Create a fenced codeblock using `plantuml` as the language.
 Specify your plantuml code inside.

diff --git a/manifest.json b/manifest.json
@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-plantuml",
 	"name": "PlantUML",
-	"version": "1.2.7",
-	"minAppVersion": "0.11.5",
+	"version": "1.3.0",
+	"minAppVersion": "0.12.0",
 	"description": "Render PlantUML Diagrams",
 	"author": "Johannes Theiner",
 	"authorUrl": "https://github.com/joethei/",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "obsidian-plantuml",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "PlantUML rendering for Obsidian.md",
   "main": "main.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "lint": "eslint . --ext .ts"
   },
   "keywords": [],
-  "author": "",
+  "author": "Johannes Theiner",
   "license": "MIT",
   "devDependencies": {
     "@types/node": "^14.14.2",
@@ -20,6 +20,7 @@
     "builtin-modules": "^3.2.0",
     "esbuild": "^0.14.2",
     "eslint": "^7.22.0",
+    "node": "^17.2.0",
     "obsidian": "^0.12.7",
     "plantuml-encoder": "^1.4.0",
     "tslib": "^2.3.1",

diff --git a/src/processors.ts b/src/processors.ts
@@ -1,4 +1,4 @@
-import { MarkdownPostProcessorContext, request} from "obsidian";
+import {MarkdownPostProcessorContext, request} from "obsidian";
 import {DEFAULT_SETTINGS} from "./settings";
 import * as plantuml from "plantuml-encoder";
 import PlantumlPlugin from "./main";
@@ -10,6 +10,15 @@ export class Processors {
         this.plugin = plugin;
     }
 
+    private async localProcessor(source: string, type: string) : Promise<string> {
+        //@ts-ignore
+        if(this.plugin.app.plugins.plugins["local-plantuml"]) {
+            //@ts-ignore
+            return await this.plugin.app.plugins.plugins["local-plantuml"].generateImage(source, this.plugin.settings.localJar, type);
+        }
+        return "";
+    }
+
     /**
      * replace all non-breaking spaces with actual spaces
      * @param text
@@ -38,8 +47,15 @@ export class Processors {
 
         const imageUrlBase = url + "/svg/";
         source = this.replaceNonBreakingSpaces(source);
+        source = this.plugin.settings.header + "\r\n" + source;
+
+        const local = await this.localProcessor(source, "svg");
+        if(local !== "") {
+            el.insertAdjacentHTML('beforeend', local);
+            return;
+        }
 
-        const encodedDiagram = plantuml.encode(this.plugin.settings.header + "\r\n" + source);
+        const encodedDiagram = plantuml.encode(source);
 
         request({url: imageUrlBase + encodedDiagram, method: 'GET'}).then((value: string) => {
             el.insertAdjacentHTML('beforeend', value);
@@ -58,7 +74,29 @@ export class Processors {
 
         const imageUrlBase = url + "/png/";
         source = this.replaceNonBreakingSpaces(source);
-        const encodedDiagram = plantuml.encode(this.plugin.settings.header + "\r\n" + source);
+        source = this.plugin.settings.header + "\r\n" + source;
+
+        const encodedDiagram = plantuml.encode(source);
+
+        const local = await this.localProcessor(source, "png");
+        if(local !== "") {
+            const img = document.createElement("img");
+            img.src = "data:image/png;base64," + local;
+            img.useMap = "#" + encodedDiagram;
+
+            //@ts-ignore
+            const map = await this.plugin.app.plugins.plugins["local-plantuml"].generateMap(source, this.plugin.settings.localJar);
+            console.log(map);
+            if(map.contains("map")) {
+                console.log("map");
+                el.innerHTML = map;
+                el.children[0].setAttr("name", encodedDiagram);
+            }
+
+            el.appendChild(img);
+
+            return;
+        }
 
         const img = document.createElement("img");
         img.src = imageUrlBase + encodedDiagram;
@@ -68,7 +106,7 @@ export class Processors {
         const mapUrlBase = url + "/map/";
         request({url: mapUrlBase + encodedDiagram, method: "GET"}).then((value: string) => {
             //only add the map content if actual text is returned(e.g. PicoWeb does not support this)
-            if (value.contains("<map>")) {
+            if (value.contains("map")) {
                 el.innerHTML = value;
                 el.children[0].setAttr("name", encodedDiagram);
             }
@@ -88,8 +126,19 @@ export class Processors {
         }
         const asciiUrlBase = url + "/txt/";
         source = this.replaceNonBreakingSpaces(source);
+        source = this.plugin.settings.header + "\r\n" + source;
+
+        const local = await this.localProcessor(source, "txt");
+        if(local !== "") {
+            const pre = document.createElement("pre");
+            const code = document.createElement("code");
+            pre.appendChild(code);
+            code.setText(local);
+            el.appendChild(pre);
+            return;
+        }
 
-        const encodedDiagram = plantuml.encode(this.plugin.settings.header + "\r\n" + source);
+        const encodedDiagram = plantuml.encode(source);
 
         const result = await request({url: asciiUrlBase + encodedDiagram});
 
@@ -107,13 +156,4 @@ export class Processors {
         code.setText(result);
         el.appendChild(pre);
     };
-
-    //taken from: https://stackoverflow.com/a/1144788/5589264
-    private escapeRegExp(string: string) : string {
-        return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-    }
-
-    private replaceAll(str: string, find: string, replace: string) : string {
-        return str.replace(new RegExp(this.escapeRegExp(find), 'g'), replace);
-    }
 }
diff --git a/src/settings.ts b/src/settings.ts
@@ -5,12 +5,14 @@ export interface PlantUMLSettings {
     server_url: string,
     header: string;
     debounce: number;
+    localJar: string;
 }
 
 export const DEFAULT_SETTINGS: PlantUMLSettings = {
     server_url: 'https://www.plantuml.com/plantuml',
     header: '',
     debounce: 3,
+    localJar: '',
 }
 
 export class PlantUMLSettingsTab extends PluginSettingTab {
@@ -36,6 +38,22 @@ export class PlantUMLSettingsTab extends PluginSettingTab {
                     }
                 )
             );
+
+        //@ts-ignore
+        if(this.plugin.app.plugins.plugins["local-plantuml"]) {
+            new Setting(containerEl)
+                .setName("Local JAR")
+                .setDesc("Path to local PlantUML Jar")
+                .addText(text => text.setPlaceholder(DEFAULT_SETTINGS.localJar)
+                    .setValue(this.plugin.settings.localJar)
+                    .onChange(async (value) => {
+                            this.plugin.settings.localJar = value;
+                            await this.plugin.saveSettings();
+                        }
+                    )
+                );
+        }
+
         new Setting(containerEl).setName("Header")
             .setDesc("Included at the head in every diagram. Useful for specifying a common theme (.puml file)")
             .addTextArea(text => {

diff --git a/versions.json b/versions.json
@@ -10,5 +10,6 @@
 	"1.2.4": "0.11.5",
 	"1.2.5": "0.11.5",
 	"1.2.6": "0.11.5",
-	"1.2.7": "0.11.5"
+	"1.2.7": "0.11.5",
+	"1.3.0": "0.12.0"
 }