Config improvements and compatibility with old versions

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@js-draw/material-icons": "^1.29.0",
-    "js-draw": "^1.29.0"
+    "js-draw": "^1.29.0",
+    "ts-serializable": "^4.2.0"
   }
 }

src/config.ts

@@ -2,16 +2,14 @@ import {PluginFile} from "@/file";
 import {CONFIG_FILENAME, JSON_MIME, STORAGE_PATH} from "@/const";
 import {Plugin, showMessage} from "siyuan";
 import {SettingUtils} from "@/libs/setting-utils";
+import {getFirstDefined} from "@/helper";
 
-type Options = {
+export interface Options {
-    restorePosition: boolean;
-    grid: boolean
-    background: string
     dialogOnDesktop: boolean
     analytics: boolean
-};
+    editorOptions: EditorOptions
-
+}
-export type DefaultEditorOptions = {
+export interface EditorOptions {
     restorePosition: boolean;
     grid: boolean
     background: string
@@ -30,32 +28,23 @@ export class PluginConfig {
         this.file = new PluginFile(STORAGE_PATH, CONFIG_FILENAME, JSON_MIME);
     }
 
-    getDefaultEditorOptions(): DefaultEditorOptions {
-        return {
-            restorePosition: this.options.restorePosition,
-            grid: this.options.grid,
-            background: this.options.background
-        };
-    }
-
     async load() {
         this.firstRun = false;
         await this.file.loadFromSiYuanFS();
-        this.options = JSON.parse(this.file.getContent());
+        const jsonObj = JSON.parse(this.file.getContent());
-        if(this.options == null) {
+        if(jsonObj == null) {
-            this.loadDefaultConfig();
+            this.firstRun = true;
         }
-    }
+        // if more than one fallback, the intermediate ones are from a legacy config file version
-
-    private loadDefaultConfig() {
         this.options = {
-            grid: true,
+            dialogOnDesktop: getFirstDefined(jsonObj?.dialogOnDesktop, false),
-            background: "#00000000",
+            analytics: getFirstDefined(jsonObj?.analytics, true),
-            dialogOnDesktop: false,
+            editorOptions: {
-            analytics: true,
+                restorePosition: getFirstDefined(jsonObj?.editorOptions?.restorePosition, jsonObj?.restorePosition,  true),
-            restorePosition: true,
+                grid: getFirstDefined(jsonObj?.editorOptions?.grid, jsonObj?.grid, true),
+                background: getFirstDefined(jsonObj?.editorOptions?.background, jsonObj?.background, "#00000000")
+            },
         };
-        this.firstRun = true;
     }
 
     async save() {
@@ -102,16 +91,18 @@ export class PluginConfigViewer {
         let color = data.backgroundDropdown === "CUSTOM" ? data.background : data.backgroundDropdown;
         if(!PluginConfig.validateColor(color)) {
             showMessage(this.plugin.i18n.errInvalidBackgroundColor, 0, 'error');
-            data.background = this.config.options.background;
+            data.background = this.config.options.editorOptions.background;
             this.settingUtils.set('background', data.background);
         }
 
         this.config.setConfig({
-            grid: data.grid,
-            background: color,
             dialogOnDesktop: data.dialogOnDesktop,
             analytics: data.analytics,
-            restorePosition: data.restorePosition,
+            editorOptions: {
+                grid: data.grid,
+                background: color,
+                restorePosition: data.restorePosition,
+            }
         });
         await this.config.save();
 
@@ -131,7 +122,7 @@ export class PluginConfigViewer {
             key: "grid",
             title: this.plugin.i18n.settings.grid.title,
             description: this.plugin.i18n.settings.grid.description,
-            value: this.config.options.grid,
+            value: this.config.options.editorOptions.grid,
             type: 'checkbox'
         });
 
@@ -140,8 +131,8 @@ export class PluginConfigViewer {
             title: this.plugin.i18n.settings.backgroundDropdown.title,
             description: this.plugin.i18n.settings.backgroundDropdown.description,
             type: 'select',
-            value:  this.config.options.background in this.backgroundDropdownOptions ?
+            value:  this.config.options.editorOptions.background in this.backgroundDropdownOptions ?
-                this.config.options.background : 'CUSTOM',
+                this.config.options.editorOptions.background : 'CUSTOM',
             options: this.backgroundDropdownOptions,
         });
 
@@ -149,7 +140,7 @@ export class PluginConfigViewer {
             key: "background",
             title: this.plugin.i18n.settings.background.title,
             description: this.plugin.i18n.settings.background.description,
-            value: this.config.options.background,
+            value: this.config.options.editorOptions.background,
             type: 'textinput',
         });
 
@@ -157,7 +148,7 @@ export class PluginConfigViewer {
             key: "restorePosition",
             title: this.plugin.i18n.settings.restorePosition.title,
             description: this.plugin.i18n.settings.restorePosition.description,
-            value: this.config.options.restorePosition,
+            value: this.config.options.editorOptions.restorePosition,
             type: 'checkbox'
         });
 

src/editor.ts

@@ -13,7 +13,7 @@ import Editor, {
 import {Dialog, getFrontend, openTab, Plugin, showMessage} from "siyuan";
 import {findSyncIDInProtyle, replaceSyncID} from "@/protyle";
 import DrawJSPlugin from "@/index";
-import {DefaultEditorOptions} from "@/config";
+import {EditorOptions} from "@/config";
 import 'js-draw/styles';
 import {SyncIDNotFoundError, UnchangedProtyleError} from "@/errors";
 
@@ -49,7 +49,7 @@ export class PluginEditor {
 
     }
 
-    static async create(fileID: string, defaultEditorOptions: DefaultEditorOptions): Promise<PluginEditor> {
+    static async create(fileID: string, defaultEditorOptions: EditorOptions): Promise<PluginEditor> {
 
         const instance = new PluginEditor(fileID);
 
@@ -66,7 +66,7 @@ export class PluginEditor {
 
     }
 
-    async restoreOrInitFile(defaultEditorOptions: DefaultEditorOptions) {
+    async restoreOrInitFile(defaultEditorOptions: EditorOptions) {
 
         this.drawingFile = new PluginAsset(this.fileID, this.syncID, SVG_MIME);
         await this.drawingFile.loadFromSiYuanFS();
@@ -173,7 +173,7 @@ export class EditorManager {
     static async create(fileID: string, p: DrawJSPlugin) {
         let instance = new EditorManager();
         try {
-            let editor = await PluginEditor.create(fileID, p.config.getDefaultEditorOptions());
+            let editor = await PluginEditor.create(fileID, p.config.options.editorOptions);
             instance.setEditor(editor);
         }catch (error) {
             EditorManager.handleCreationError(error, p);
@@ -191,7 +191,7 @@ export class EditorManager {
                     return;
                 }
                 try {
-                    const editor = await PluginEditor.create(fileID, p.config.getDefaultEditorOptions());
+                    const editor = await PluginEditor.create(fileID, p.config.options.editorOptions);
                     this.element.appendChild(editor.getElement());
                 }catch (error){
                     EditorManager.handleCreationError(error, p);

src/helper.ts

@@ -105,4 +105,12 @@ export function imgSrcToIDs(imgSrc: string | null): { fileID: string; syncID: st
 
     return assetPathToIDs(imgSrc);
 
+}
+
+export function getFirstDefined(...a) {
+    for(let i = 0; i < a.length; i++) {
+        if(a[i] !== undefined) {
+            return a[i];
+        }
+    }
 }