v1.1.1 update: added size option for canvas

jia6y · Jul 8, 2023 · 2139db2 · 2139db2
1 parent ca168d8
commit 2139db2
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 19 deletions.
diff --git a/lib/obIntegration/canvas.ts b/lib/obIntegration/canvas.ts
@@ -7,15 +7,22 @@ const canvasJson = {
     "edges": []
 }
 
+const canvasSize = {
+    "L": [500, 500],
+    "M": [300, 350],
+    "S": [230, 280]
+}
+
 export async function generateCanvas(app: App, flomo: Flomo, config: Record<string, string>): Promise<void> {
+    const size: number[] = canvasSize[config["canvasSize"]];
     if (flomo.stat["memo"] > 0) {
         const buffer: Record<string, string>[] = [];
         const canvas_file = `${config["flomoTarget"]}/Flomo Canvas.canvas`;
 
         for (const [idx, memo] of flomo.memos().entries()) {
             const _id: string = uuidv4();
-            const _x: number = (idx % 8) * 520; //  margin: 20px, length: 8n
-            const _y: number = (Math.floor(idx / 8)) * 520; //  margin: 20px
+            const _x: number = (idx % 8) * (size[0] + 20); //  margin: 20px, length: 8n
+            const _y: number = (Math.floor(idx / 8)) * (size[1] + 20); //  margin: 20px
 
             const content = (() => {
                 const res = memo["content"].replace(/!\[\]\(file\//gi, "![](flomo/");
@@ -33,8 +40,8 @@ export async function generateCanvas(app: App, flomo: Flomo, config: Record<stri
                         "id": _id,
                         "x": _x,
                         "y": _y,
-                        "width": 500,
-                        "height": 500
+                        "width": size[0],
+                        "height": size[1]
                     };
                 } else {
                     return {
@@ -43,8 +50,8 @@ export async function generateCanvas(app: App, flomo: Flomo, config: Record<stri
                         "id": _id,
                         "x": _x,
                         "y": _y,
-                        "width": 500,
-                        "height": 500
+                        "width": size[0],
+                        "height": size[1]
                     };
                 }
             })()

diff --git a/lib/ui.ts b/lib/ui.ts
@@ -99,6 +99,47 @@ export class ImporterUI extends Modal {
                     })
             });
 
+        const canvsOptionBlock: HTMLDivElement = contentEl.createEl("div", { cls: "canvasOptionBlock" });
+
+        const canvsOptionLabelL: HTMLLabelElement = canvsOptionBlock.createEl("label");
+        const canvsOptionLabelM: HTMLLabelElement = canvsOptionBlock.createEl("label");
+        const canvsOptionLabelS: HTMLLabelElement = canvsOptionBlock.createEl("label");
+
+        const canvsSizeL: HTMLInputElement = canvsOptionLabelL.createEl("input", { type: "radio", cls: "ckbox" });
+        canvsOptionLabelL.createEl("small", { text: "large" });
+        const canvsSizeM: HTMLInputElement = canvsOptionLabelM.createEl("input", { type: "radio", cls: "ckbox" });
+        canvsOptionLabelM.createEl("small", { text: "medium" });
+        const canvsSizeS: HTMLInputElement = canvsOptionLabelS.createEl("input", { type: "radio", cls: "ckbox" });
+        canvsOptionLabelS.createEl("small", { text: "small" });
+
+        canvsSizeL.name = "canvas_opt";
+        canvsSizeM.name = "canvas_opt";
+        canvsSizeS.name = "canvas_opt";
+
+        switch(this.plugin.settings.canvasSize){
+            case "L":
+                canvsSizeL.checked = true;
+                break
+            case "M":
+                canvsSizeM.checked = true;
+                break
+            case "S":
+                canvsSizeS.checked = true;
+                break
+        }
+
+        canvsSizeL.onchange = (ev) => {
+            this.plugin.settings.canvasSize = "L";
+        };
+
+        canvsSizeM.onchange = (ev) => {
+            this.plugin.settings.canvasSize = "M";
+        };
+
+        canvsSizeS.onchange = (ev) => {
+            this.plugin.settings.canvasSize = "S";
+        };
+
         new Setting(contentEl).setName('Experimental Options').setDesc('set experimental options')
 
         const expOptionBlock: HTMLDivElement = contentEl.createEl("div", { cls: "expOptionBlock" });

diff --git a/main.js b/main.js
diff --git a/main.ts b/main.ts
@@ -7,15 +7,17 @@ interface MyPluginSettings {
 	memoTarget: string,
 	optionsMoments: string,
 	optionsCanvas: string,
-	expOptionAllowbilink: boolean
+	expOptionAllowbilink: boolean,
+	canvasSize: string
 }
 
 const DEFAULT_SETTINGS: MyPluginSettings = {
 	flomoTarget: 'flomo',
 	memoTarget: 'memos',
 	optionsMoments: "copy_with_link",
 	optionsCanvas: "copy_with_link",
-	expOptionAllowbilink: true
+	expOptionAllowbilink: true,
+	canvasSize: 'M'
 }
 
 export default class FlomoImporterPlugin extends Plugin {

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "flomo-importer",
 	"name": "Flomo Importer",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"minAppVersion": "1.1.16",
 	"description": "Make Flomo Memos to Obsidian Notes",
 	"author": "Jialu Y",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flomo-importer-plugin",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Make Flomo Memos to Obsidian Notes",
   "main": "main.js",
   "scripts": {

diff --git a/styles.css b/styles.css
@@ -28,4 +28,10 @@ If your plugin does not need CSS, delete this file.
 
 .ckbox {
     vertical-align: middle;
+}
+
+.canvasOptionBlock {
+    text-align: right;
+    vertical-align: middle;
+    margin: 0 0 10px;
 }
diff --git a/versions.json b/versions.json
@@ -1,4 +1,5 @@
 {
 	"1.0.0": "0.15.0",
-	"1.1.0": "1.1.16"
+	"1.1.0": "1.1.16",
+	"1.1.1": "1.1.16"
 }