Editor default options

src/config.ts

@@ -5,11 +5,17 @@ import {SettingUtils} from "@/libs/setting-utils";
 import {validateColor} from "@/helper";
 
 type Options = {
-    autoResize: boolean
+    grid: boolean
     background: string
+    dialogOnDesktop: boolean
     analytics: boolean
 };
 
+export type DefaultEditorOptions = {
+    grid: boolean
+    background: string
+}
+
 export class PluginConfig {
 
     private file: PluginFile;
@@ -23,6 +29,13 @@ export class PluginConfig {
         this.file = new PluginFile(STORAGE_PATH, CONFIG_FILENAME, JSON_MIME);
     }
 
+    getDefaultEditorOptions(): DefaultEditorOptions {
+        return {
+            grid: this.options.grid,
+            background: this.options.background,
+        };
+    }
+
     async load() {
         this.firstRun = false;
         await this.file.loadFromSiYuanFS();
@@ -34,8 +47,9 @@ export class PluginConfig {
 
     private loadDefaultConfig() {
         this.options = {
-            autoResize: true,
+            grid: true,
             background: "#000000",
+            dialogOnDesktop: false,
             analytics: true,
         };
         this.firstRun = true;
@@ -75,30 +89,42 @@ export class PluginConfigViewer {
             plugin: this.plugin,
             callback: async (data) => {
                 this.config.setConfig({
-                    analytics: data.analytics,
+                    grid: data.grid,
-                    autoResize: data.autoResize,
                     background: data.background,
+                    dialogOnDesktop: data.dialogOnDesktop,
+                    analytics: data.analytics,
                 });
                 await this.config.save();
             }
         });
 
         this.settingUtils.addItem({
-            key: "autoResize",
+            key: "grid",
-            title: "Auto Resize",
+            title: "Enable grid by default",
-            description: "Enable to automatically resize the drawing area according to your strokes on new drawings",
+            description: "Enable to automatically turn on the grid on new drawings.",
-            value: this.config.options.autoResize,
+            value: this.config.options.grid,
             type: 'checkbox'
         });
 
         this.settingUtils.addItem({
             key: "background",
-            title: "Default Background Color",
+            title: "Default background Color",
             description: "Default background color of the drawing area for new drawings in hexadecimal.",
             value: this.config.options.background,
             type: 'textarea',
         });
 
+        this.settingUtils.addItem({
+            key: "dialogOnDesktop",
+            title: "Open editor as dialog on desktop",
+            description: `
+                Dialog mode provides a larger drawing area, but it's not as handy to use as tabs (default).<br />
+                The editor will always open as a dialog on mobile.
+            `,
+            value: this.config.options.grid,
+            type: 'checkbox'
+        });
+
         this.settingUtils.addItem({
             key: "analytics",
             title: "Analytics",

src/editor.ts

@@ -1,9 +1,11 @@
 import {MaterialIconProvider} from "@js-draw/material-icons";
 import {PluginAsset, PluginFile} from "@/file";
 import {JSON_MIME, STORAGE_PATH, SVG_MIME, TOOLBAR_FILENAME} from "@/const";
-import Editor, {BaseWidget, EditorEventType} from "js-draw";
+import Editor, {BackgroundComponentBackgroundType, BaseWidget, Color4, EditorEventType} from "js-draw";
-import {Dialog, Plugin, openTab, getFrontend} from "siyuan";
+import {Dialog, getFrontend, openTab, Plugin} from "siyuan";
 import {findSyncIDInProtyle, replaceSyncID} from "@/protyle";
+import DrawJSPlugin from "@/index";
+import {DefaultEditorOptions} from "@/config";
 
 export class PluginEditor {
 
@@ -21,7 +23,7 @@ export class PluginEditor {
     getFileID(): string { return this.fileID; }
     getSyncID(): string { return this.syncID; }
 
-    constructor(fileID: string) {
+    constructor(fileID: string, defaultEditorOptions: DefaultEditorOptions) {
 
         this.fileID = fileID;
 
@@ -43,6 +45,13 @@ export class PluginEditor {
             await this.drawingFile.loadFromSiYuanFS();
             if(this.drawingFile.getContent() != null) {
                 await this.editor.loadFromSVG(this.drawingFile.getContent());
+            }else{
+                // it's a new drawing
+                this.editor.dispatch(this.editor.setBackgroundStyle({
+                    color: Color4.fromHex(defaultEditorOptions.background),
+                    type: defaultEditorOptions.grid ? BackgroundComponentBackgroundType.Grid : BackgroundComponentBackgroundType.SolidColor,
+                    autoresize: true
+                }));
             }
         });
 
@@ -120,7 +129,7 @@ export class EditorManager {
         this.editor = editor;
     }
 
-    static registerTab(p: Plugin) {
+    static registerTab(p: DrawJSPlugin) {
         p.addTab({
             'type': "whiteboard",
             init() {
@@ -129,7 +138,7 @@ export class EditorManager {
                     alert("File ID missing - couldn't open file.")
                     return;
                 }
-                const editor = new PluginEditor(fileID);
+                const editor = new PluginEditor(fileID, p.config.getDefaultEditorOptions());
                 this.element.appendChild(editor.getElement());
             }
         });
@@ -158,8 +167,8 @@ export class EditorManager {
         dialog.element.querySelector("#DrawingPanel").appendChild(this.editor.getElement());
     }
 
-    async open(p: Plugin) {
+    async open(p: DrawJSPlugin) {
-        if(getFrontend() != "mobile") {
+        if(getFrontend() != "mobile" && !p.config.options.dialogOnDesktop) {
             this.toTab(p);
         } else {
             this.toDialog();

src/index.ts

@@ -34,7 +34,7 @@ export default class DrawJSPlugin extends Plugin {
                 const fileID = generateRandomString();
                 const syncID = generateTimeString() + '-' + generateRandomString();
                 protyle.insert(getMarkdownBlock(fileID, syncID), true, false);
-                new EditorManager(new PluginEditor(fileID)).open(this);
+                new EditorManager(new PluginEditor(fileID, this.config.getDefaultEditorOptions())).open(this);
             }
         }];
 
@@ -46,7 +46,7 @@ export default class DrawJSPlugin extends Plugin {
                 label: "Edit with js-draw",
                 click: () => {
                     void this.analytics.sendEvent('edit');
-                    new EditorManager(new PluginEditor(ids.fileID)).open(this)
+                    new EditorManager(new PluginEditor(ids.fileID, this.config.getDefaultEditorOptions())).open(this)
                 }
             })
         })