diff --git a/ExcalidrawCanvas.jsx b/ExcalidrawCanvas.jsx index 7c515b6..5710bb0 100644 --- a/ExcalidrawCanvas.jsx +++ b/ExcalidrawCanvas.jsx @@ -14,20 +14,16 @@ const resolvablePromise = () => { return promise; }; -const saveData = async (setInitialData, curData, id, saveToFile,closeDrawing=true,exportAsSvg=true) => { - const prevData = localStorage.getItem(`excalidrawMathData-${id}`); +const saveData = async (setInitialData, curData, id, saveToFile, readFile, closeDrawing=true, exportAsSvg=true) => { + const prevData = await readFile("data-"+id+".json", "excalidraw-files"); let formattedData = {...curData}; - formattedData.appState.collaborators = [];; + formattedData.appState.collaborators = []; if(prevData != JSON.stringify(formattedData)){ setInitialData((data)=>{ formattedData.appState.currentItemStrokeColor = data.appState.currentItemStrokeColor; return formattedData }); - localStorage.setItem(`excalidrawMathData-${id}`, JSON.stringify(formattedData)); - let lastId = localStorage.getItem("math-max-id"); - if (parseInt(lastId) { }); const svg = await exportToSvg(formattedData); formattedData.elements.unshift(); - saveToFile("data-"+id+".svg",svg.outerHTML, closeDrawing); + saveToFile("data-"+id+".svg",svg.outerHTML, "drawings", closeDrawing); } -export function ExcalidrawCanvas({ id, saveToFile, gridMode, colors }) { +export function ExcalidrawCanvas({ id, saveToFile, gridMode, colors, readFile, prevData }) { const excalidrawRef = useRef(null); const dimensionRef = useRef(); const saveIntervalRef = useRef(null); - const [InitialData, setInitialData] = useState(localStorage.getItem(`excalidrawMathData-${id}`)? - JSON.parse(localStorage.getItem(`excalidrawMathData-${id}`)) - :{ - elements: [], - appState: { viewBackgroundColor: "#fff0", currentItemFontFamily: 1, currentItemStrokeColor:"#000" }, - scrollToContent: false, - libraryItems: [] - }); + const [InitialData, setInitialData] = useState( + prevData? + JSON.parse(prevData) + :{ + elements: [], + appState: { viewBackgroundColor: "#fff0", currentItemFontFamily: 1, currentItemStrokeColor:"#000" }, + scrollToContent: false, + libraryItems: [] + } + ); let canvas = document.getElementById(`math-canvas-${id}`); let mathBlock = document.querySelector(`.math-block-${id}`); @@ -115,9 +113,9 @@ export function ExcalidrawCanvas({ id, saveToFile, gridMode, colors }) { }; // auto save if(document.querySelector(`.math-block-${id}`)){ - saveData(setInitialData, curData, id, saveToFile, false, false); + saveData(setInitialData, curData, id, saveToFile,readFile, false, false); }else{ - saveData(setInitialData, curData, id, saveToFile, true, true); + saveData(setInitialData, curData, id, saveToFile,readFile, true, true); clearInterval(saveIntervalRef.current); } }, 1000); @@ -152,7 +150,6 @@ export function ExcalidrawCanvas({ id, saveToFile, gridMode, colors }) { let elements = excalidrawRef.current.getSceneElements(); let selectedIds = Object.keys(appState.selectedElementIds); let canvas = document.getElementById(`math-canvas-${id}`); - let finalData; if(canvas){ for (let i = 0; i < selectedIds.length; i++) { let selectedElement = elements.find(elem => (elem.id===selectedIds[i])); @@ -211,7 +208,7 @@ export function ExcalidrawCanvas({ id, saveToFile, gridMode, colors }) { scrollToContent: false, libraryItems: [] }; - saveData(setInitialData, curData, id, saveToFile); + saveData(setInitialData, curData, id, saveToFile, readFile); clearInterval(saveIntervalRef.current); }} style={{ zIndex:5, diff --git a/excalidrawRenderer.tsx b/excalidrawRenderer.tsx index 3d36cb5..eb9abdd 100644 --- a/excalidrawRenderer.tsx +++ b/excalidrawRenderer.tsx @@ -2,9 +2,9 @@ import * as React from "react"; import { ExcalidrawCanvas } from "./ExcalidrawCanvas"; import {createRoot} from 'react-dom/client'; -export const renderCanvas = (container: any, id: number, saveToFile:any, gridModeEndabled:boolean, colors:Array) => { +export const renderCanvas = (container: any, id: number, saveToFile:any, gridModeEndabled:boolean, colors:Array, readFile:any,prevData:string) => { let root = createRoot(container); root.render( - + ); } diff --git a/main.ts b/main.ts index fad382b..d58be80 100644 --- a/main.ts +++ b/main.ts @@ -52,13 +52,13 @@ export default class MathPlus extends Plugin { const vault = this.app.vault; const adapter = vault.adapter; - const saveToFile = async (fileName:string,data:string,closeDrawing=true) => { - let drawingPath = vault.configDir + "/plugins/obsidian-math-plus/drawings"; + const saveToFile = async (fileName:string, data:string, directory:string, closeDrawing=true) => { + let directoryPath = vault.configDir + `/plugins/obsidian-math-plus/${directory}`; // If the drawings directory isn't there, make it - if(!await adapter.exists(drawingPath)){ - await adapter.mkdir(drawingPath); + if(!await adapter.exists(directoryPath)){ + await adapter.mkdir(directoryPath); } - const configPath = vault.configDir + "/plugins/obsidian-math-plus/drawings/"+fileName; + const configPath = vault.configDir + `/plugins/obsidian-math-plus/${directory}/${fileName}`; if(await adapter.exists(configPath)){ await adapter.write(configPath,data); }else{ @@ -75,6 +75,14 @@ export default class MathPlus extends Plugin { } } + const readFile = async (fileName:string, directory:string) => { + const configPath = vault.configDir + `/plugins/obsidian-math-plus/${directory}/${fileName}`; + if(await adapter.exists(configPath)){ + return await adapter.read(configPath); + } + return null + } + // Parse Equation let rawEqu = source.replace(/\|\|.+\|\|\n+/gm,""); let equ = formatEquation(rawEqu); @@ -136,7 +144,8 @@ export default class MathPlus extends Plugin { drawButton.onClickEvent(async ()=>{ const wrapper = el.createEl("div",{cls:"excalidraw-canvas-wrapper"}); this.settings.colorPicker?null:wrapper.addClass("hidden-color-picker"); - renderCanvas(wrapper, blockId, saveToFile, this.settings.gridModeEndabled, [this.settings.color1,this.settings.color2,this.settings.color3]); + let data = await readFile("data-"+blockId+".json", "excalidraw-files"); + renderCanvas(wrapper, blockId, saveToFile, this.settings.gridModeEndabled, [this.settings.color1,this.settings.color2,this.settings.color3],readFile,data); let svgWrapper = el.querySelector(".math-svg-wrapper") as HTMLElement; if(svgWrapper){ svgWrapper.remove(); @@ -170,10 +179,9 @@ export default class MathPlus extends Plugin { name: "Insert math block", hotkeys: [{ modifiers: ["Mod"], key: "m" }], editorCallback: (editor: Editor) => { - let id = parseInt(localStorage.getItem("math-max-id"))+1; + let id = Math.floor(Math.random() * Date.now()); editor.replaceRange("```math\n||{\"id\":"+id+"}||\n\n\n```", editor.getCursor()); editor.setCursor(editor.getCursor().line+3); - localStorage.setItem("math-max-id", id.toString()); }, }); diff --git a/manifest.json b/manifest.json index 949923e..e5898f4 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "obsidian-math-plus", "name": "Obsidian Math+", - "version": "0.2.2", + "version": "0.2.3", "minAppVersion": "0.12.0", "description": "This is an Obsidian plugin for taking math notes using Excalidraw.", "author": "Oscar Capraro", diff --git a/package.json b/package.json index 1aa5e79..69e54b2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-math-plus", - "version": "0.2.2", + "version": "0.2.3", "description": "This is a math plugin for Obsidian (https://obsidian.md)", "main": "main.js", "scripts": { diff --git a/versions.json b/versions.json index da17145..54b4458 100644 --- a/versions.json +++ b/versions.json @@ -4,5 +4,6 @@ "0.1.2": "0.12.0", "0.2.0": "0.12.0", "0.2.1": "0.12.0", - "0.2.2": "0.12.0" + "0.2.2": "0.12.0", + "0.2.3": "0.12.0" }