From e815442881263b234f3163d0305202d34a622028 Mon Sep 17 00:00:00 2001 From: MassiveBox Date: Thu, 17 Apr 2025 16:08:26 +0200 Subject: [PATCH] Editor default options --- src/config.ts | 44 +++++++++++++++++++++++++++++++++++--------- src/editor.ts | 23 ++++++++++++++++------- src/index.ts | 4 ++-- 3 files changed, 53 insertions(+), 18 deletions(-) diff --git a/src/config.ts b/src/config.ts index b744fb4..8ad50dd 100644 --- a/src/config.ts +++ b/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, - autoResize: data.autoResize, + grid: data.grid, background: data.background, + dialogOnDesktop: data.dialogOnDesktop, + analytics: data.analytics, }); await this.config.save(); } }); this.settingUtils.addItem({ - key: "autoResize", - title: "Auto Resize", - description: "Enable to automatically resize the drawing area according to your strokes on new drawings", - value: this.config.options.autoResize, + key: "grid", + title: "Enable grid by default", + description: "Enable to automatically turn on the grid on new drawings.", + 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).
+ The editor will always open as a dialog on mobile. + `, + value: this.config.options.grid, + type: 'checkbox' + }); + this.settingUtils.addItem({ key: "analytics", title: "Analytics", diff --git a/src/editor.ts b/src/editor.ts index 17f9c86..9c5e524 100644 --- a/src/editor.ts +++ b/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 {Dialog, Plugin, openTab, getFrontend} from "siyuan"; +import Editor, {BackgroundComponentBackgroundType, BaseWidget, Color4, EditorEventType} from "js-draw"; +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) { - if(getFrontend() != "mobile") { + async open(p: DrawJSPlugin) { + if(getFrontend() != "mobile" && !p.config.options.dialogOnDesktop) { this.toTab(p); } else { this.toDialog(); diff --git a/src/index.ts b/src/index.ts index 1e0777a..4c5a0fe 100644 --- a/src/index.ts +++ b/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) } }) })