Improve caching when using local generation (fixes #47)

Author: joethei

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: File a bug report
-labels: ["bug"]
+labels: [ "bug" ]
 body:
   - type: markdown
     attributes:

package.json

@@ -31,6 +31,7 @@
     "@codemirror/search": "6.0.0",
     "@codemirror/view": "6.0.0",
     "@codemirror/commands": "6.0.0",
-    "@codemirror/language": "https://github.com/lishid/cm-language"
+    "@codemirror/language": "https://github.com/lishid/cm-language",
+    "localforage": "1.10.0"
   }
 }

src/localProcessors.ts

@@ -1,9 +1,10 @@
 import PlantumlPlugin from "./main";
 import {Processor} from "./processor";
-import {MarkdownPostProcessorContext} from "obsidian";
+import {MarkdownPostProcessorContext, moment} from "obsidian";
 import * as plantuml from "plantuml-encoder";
 import {insertAsciiImage, insertImageWithMap, insertSvgImage} from "./functions";
 import {OutputType} from "./const";
+import * as localforage from "localforage";
 
 export class LocalProcessors implements Processor {
 
@@ -14,38 +15,52 @@ export class LocalProcessors implements Processor {
     }
 
     ascii = async(source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+        const encodedDiagram = plantuml.encode(source);
+        const item: string = await localforage.getItem('ascii-' + encodedDiagram);
+        if(item) {
+            insertAsciiImage(el, item);
+            await localforage.setItem('ts-' + encodedDiagram, Date.now());
+            return;
+        }
+
         const image = await this.generateLocalImage(source, OutputType.ASCII, this.plugin.replacer.getPath(ctx));
         insertAsciiImage(el, image);
+        await localforage.setItem('ascii-' + encodedDiagram, image);
+        await localforage.setItem('ts-' + encodedDiagram, Date.now());
     }
 
     png = async(source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
         const encodedDiagram = plantuml.encode(source);
-
-        if(localStorage.getItem(encodedDiagram + "-png")) {
-            const image = localStorage.getItem(encodedDiagram + "-png");
-            const map = localStorage.getItem(encodedDiagram + "-map");
-            insertImageWithMap(el,image, map, encodedDiagram);
+        const item: string = await localforage.getItem('png-' + encodedDiagram);
+        if(item) {
+            const map: string = await localforage.getItem('map-' + encodedDiagram);
+            insertImageWithMap(el, item , map, encodedDiagram);
+            await localforage.setItem('ts-' + encodedDiagram, Date.now());
             return;
         }
 
         const path = this.plugin.replacer.getPath(ctx);
         const image = await this.generateLocalImage(source, OutputType.PNG, path);
         const map = await this.generateLocalMap(source, path);
 
-        localStorage.setItem(encodedDiagram + "-png", image);
-        localStorage.setItem(encodedDiagram + "-map", map);
+        await localforage.setItem('png-' + encodedDiagram, image);
+        await localforage.setItem('map-' + encodedDiagram, map);
+        await localforage.setItem('ts-'+ encodedDiagram, Date.now());
 
         insertImageWithMap(el, image, map, encodedDiagram);
     }
 
     svg = async(source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
         const encodedDiagram = plantuml.encode(source);
-        if(localStorage.getItem(encodedDiagram + "-svg")) {
-            insertSvgImage(el, localStorage.getItem(encodedDiagram + "-svg"));
+        const item: string = await localforage.getItem('svg-' + encodedDiagram);
+        if(item) {
+            insertSvgImage(el, item);
+            await localforage.setItem('ts-' + encodedDiagram, Date.now());
             return;
         }
-
         const image = await this.generateLocalImage(source, OutputType.SVG, this.plugin.replacer.getPath(ctx));
+        await localforage.setItem('svg-' + encodedDiagram, image);
+        await localforage.setItem('ts-' + encodedDiagram, Date.now());
         insertSvgImage(el, image);
     }
 

src/main.ts

@@ -12,6 +12,7 @@ import {Replacer} from "./functions";
 import {VIEW_TYPE} from "./PumlView";
 import {Prec} from "@codemirror/state";
 import {asyncDecoBuilderExt} from "./decorations/EmbedDecoration";
+import localforage from "localforage";
 
 declare module "obsidian" {
     interface Workspace {
@@ -83,6 +84,13 @@ export default class PlantumlPlugin extends Plugin {
         //keep this processor for backwards compatibility
         this.registerMarkdownCodeBlockProcessor("plantuml-map", processor.png);
 
+        this.cleanupLocalStorage();
+        localforage.config({
+            name: 'puml',
+            description: 'PlantUML plugin'
+        });
+        await this.cleanupCache();
+
 
         //internal links
         this.observer = new MutationObserver(async (mutation) => {
@@ -168,6 +176,31 @@ export default class PlantumlPlugin extends Plugin {
         });
     }
 
+    async cleanupCache() {
+        await localforage.iterate((value, key) => {
+            if(key.startsWith('ts-')) {
+                const encoded = key.split('-')[1];
+                if(value < new Date().getTime() - (this.settings.cache * 24 * 60 * 60 * 1000)) {
+                    localforage.removeItem('png-' + encoded);
+                    localforage.removeItem('svg-' + encoded);
+                    localforage.removeItem('map-' + encoded);
+                    localforage.removeItem('ascii-' + encoded);
+                }
+            }
+        });
+    }
+
+    /*
+     * older versions used to store generated images in local storage when using local generation.
+     * To fix issues with the local storage quota we have to clean this up when upgrading from a version that supported this.
+     */
+    cleanupLocalStorage() {
+        for (const key of Object.keys(localStorage)) {
+            if(key.endsWith('-map') || key.endsWith('-png') || key.endsWith('-svg') || key.endsWith('ascii')) {
+                localStorage.removeItem(key);
+            }
+        }
+    }
 
     async onunload(): Promise<void> {
         console.log('unloading plugin plantuml');

src/settings.ts

@@ -9,6 +9,7 @@ export interface PlantUMLSettings {
     javaPath: string;
     dotPath: string;
     defaultProcessor: string;
+    cache: number;
 }
 
 export const DEFAULT_SETTINGS: PlantUMLSettings = {
@@ -19,6 +20,7 @@ export const DEFAULT_SETTINGS: PlantUMLSettings = {
     javaPath: 'java',
     dotPath: 'dot',
     defaultProcessor: "png",
+    cache: 60,
 }
 
 export class PlantUMLSettingsTab extends PluginSettingTab {
@@ -68,7 +70,7 @@ export class PlantUMLSettingsTab extends PluginSettingTab {
                 );
 
             new Setting(containerEl)
-                .setName("Java Path")
+                .setName("Java path")
                 .setDesc("Path to Java executable")
                 .addText(text => text.setPlaceholder(DEFAULT_SETTINGS.javaPath)
                     .setValue(this.plugin.settings.javaPath)
@@ -80,7 +82,7 @@ export class PlantUMLSettingsTab extends PluginSettingTab {
                 );
 
             new Setting(containerEl)
-                .setName("Dot Path")
+                .setName("Dot path")
                 .setDesc("Path to dot executable")
                 .addText(text => text.setPlaceholder(DEFAULT_SETTINGS.dotPath)
                     .setValue(this.plugin.settings.dotPath)
@@ -120,7 +122,23 @@ export class PlantUMLSettingsTab extends PluginSettingTab {
                     text.inputEl.addClass("puml-settings-area")
                 }
             );
-        new Setting(containerEl).setName("Debounce")
+
+        new Setting(containerEl)
+            .setName('Cache')
+            .setDesc('in days. Only applicable when generating diagrams locally')
+            .addSlider(slider => {
+                slider
+                    .setLimits(10, 360, 10)
+                    .setValue(this.plugin.settings.cache)
+                    .setDynamicTooltip()
+                    .onChange(async value => {
+                        this.plugin.settings.cache = value;
+                        await this.plugin.saveSettings();
+                    })
+            });
+
+        new Setting(containerEl)
+            .setName("Debounce")
             .setDesc("How often should the diagram refresh in seconds")
             .addText(text => text.setPlaceholder(String(DEFAULT_SETTINGS.debounce))
                 .setValue(String(this.plugin.settings.debounce))