added new features: embed circuit diagrams in notes + create new circuit in contextual menu of obsidian explorer

Author: code-forge-temple

README.md

@@ -1,4 +1,7 @@
 # circuit-sketcher-obsidian-plugin
+
+> ⭐️ If you like this plugin, please consider [starring the repository](https://github.com/code-forge-temple/circuit-sketcher-obsidian-plugin) on GitHub!
+
 A plugin for Obsidian to draw circuits on a canvas. It is based on the [code-forge-temple/circuit-sketcher-core](https://github.com/code-forge-temple/circuit-sketcher-core).
 
 ## Table of Contents
@@ -14,6 +17,7 @@ A plugin for Obsidian to draw circuits on a canvas. It is based on the [code-for
 - Save and load circuit designs.
 - Customizable library for circuit elements.
 - Responsive design with automatic resizing.
+- **Embed circuit diagrams in notes:** Reference `.circuit-sketcher` files in your notes (e.g., by dragging and dropping the file into a note). In read mode, an image of the circuit will be displayed automatically.
 
 ## Installation
 
@@ -28,7 +32,7 @@ or
 
 ## Usage
 
-1. Use the ribbon icon or command palette to create a new circuit sketcher file.
+1. Use the ribbon icon, command palette, or right-click on a target folder in the file explorer and select **Create new Circuit Sketcher file** to create a new circuit sketcher file.
 2. Start drawing your circuit on the canvas:
     - On the canvas, right-click to show the canvas menu, and select `Create Node`.
     - Right-click on the node to show the node menu, select `Change Image`, and choose an image relevant to your circuit node.

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "circuit-sketcher",
     "name": "Circuit Sketcher",
-    "version": "1.1.4",
+    "version": "1.2.0",
     "minAppVersion": "0.15.0",
     "description": "Draw circuits on a canvas using circuit-sketcher-core.",
     "author": "Code Forge Temple",

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "circuit-sketcher-obsidian-plugin",
-    "version": "1.1.4",
+    "version": "1.2.0",
     "main": "main.js",
     "author": "Code Forge Temple",
     "license": "GPL",

package.json

@@ -21,13 +21,36 @@ export class CircuitSketcherSettingTab extends PluginSettingTab {
 
         containerEl.empty();
 
+        containerEl.createEl("h3", {text: "Circuit Sketcher Plugin"});
+
+        new Setting(containerEl)
+            .setName("Version")
+            .setDesc("Current plugin version")
+            .addText(text => text.setValue(this.plugin.manifest.version).setDisabled(true));
+
+        containerEl.createEl("div", {cls: "setting-item-divider"});
+
+        containerEl.createEl("h3", {text: "Library"});
         new Setting(containerEl)
-            .setName("Library")
             .setDesc("The Circuit Sketcher library will allow you to save any circuit element custom design you create and make it available throughout any .circuit-sketcher file.");
 
         new Setting(containerEl)
             .setName("Library path")
-            .setDesc("The Circuit Sketcher library will be stored at: vault_root/.lib.circuit-sketcher")
+            .setDesc(`The Circuit Sketcher library will be stored at: vault_root/${this.plugin.settings.libraryPath}`)
             .addText(text => text.setValue(this.plugin.settings.libraryPath).setDisabled(true));
+
+        containerEl.createEl("div", {cls: "setting-item-divider"});
+
+        containerEl.createEl("h3", {text: "Cache"});
+
+        new Setting(containerEl)
+            .setDesc("The Circuit Sketcher cache stores generated circuit images and data to improve performance and reduce redundant computations. " +
+                     "It is recommended not to delete the cache, as doing so will cause references to circuit sketches in your notes to become invisible until they are regenerated.");
+
+        new Setting(containerEl)
+            .setName("Cache path")
+            .setDesc(`The Circuit Sketcher cache will be stored at: vault_root/${this.plugin.settings.cachePath}`)
+            .addText(text => text.setValue(this.plugin.settings.cachePath).setDisabled(true));
+
     }
 }

src/CircuitSketcherSettingTab.ts

@@ -61,7 +61,11 @@ export class CircuitSketcherView extends TextFileView {
 
         this.root.render(
             <StrictMode>
-                <App fileContents= {fileContents} />
+                <App
+                    fileContents= {fileContents}
+                    onLoaded={() => {
+                        this.plugin.setCacheImageFile(this.file?.path, CanvasManager.getInstance().toPng);
+                    }} />
             </StrictMode>,
         );
     }
@@ -74,6 +78,7 @@ export class CircuitSketcherView extends TextFileView {
         const fileContents = CanvasManager.getInstance().stringify(true);
 
         this.plugin.setLibraryFile(LocalStorageManager.getLibrary(true));
+        this.plugin.setCacheImageFile(this.file?.path, CanvasManager.getInstance().toPng);
 
         return fileContents;
     }

src/CircuitSketcherView.tsx

@@ -0,0 +1,64 @@
+/************************************************************************
+ *    Copyright (C) 2025 Code Forge Temple                              *
+ *    This file is part of circuit-sketcher-obsidian-plugin project.    *
+ *    Licensed under the GNU General Public License v3.0.               *
+ *    See the LICENSE file in the project root for more information.    *
+ ************************************************************************/
+
+
+import {App, Plugin, PluginManifest} from "obsidian";
+import {compareVersions, createIntermediaryFolders} from "./utils/utils";
+import {CircuitSketcherSettings} from "./types/types";
+import {READONLY_SETTINGS} from "./constants/constants";
+
+
+export default class UpgradablePlugin extends Plugin {
+    settings: CircuitSketcherSettings;
+
+    constructor (app: App, manifest: PluginManifest) {
+        super(app, manifest);
+
+        this.settings = READONLY_SETTINGS;
+    }
+
+    async onload () {
+        await this.loadSettings();
+    }
+
+    async loadSettings () {
+        this.settings = Object.assign({}, await this.loadData(), READONLY_SETTINGS);
+
+        const manifestVersion = this.manifest.version;
+        const storedVersion = this.settings.dataVersion || "0.0.0";
+
+        if (compareVersions(manifestVersion, storedVersion) > 0) {
+            await this.migrateData(storedVersion);
+
+            this.settings.dataVersion = manifestVersion;
+
+            await this.saveSettings();
+        }
+    }
+
+    async migrateData (storedVersion: string) {
+        if(compareVersions("1.2.0", storedVersion) > 0) {
+            await this.migrateLibraryFile();
+        }
+    }
+
+    async saveSettings () {
+        await this.saveData(this.settings);
+    }
+
+    private async migrateLibraryFile (): Promise<void> {
+        const OLD_LIBRARY_PATH = `circuit-sketcher.lib`;
+        const migrationNeeded = await this.app.vault.adapter.exists(OLD_LIBRARY_PATH);
+
+        if (migrationNeeded) {
+            try {
+                await createIntermediaryFolders(this.app.vault, this.settings.libraryPath);
+                await this.app.vault.adapter.rename(OLD_LIBRARY_PATH, this.settings.libraryPath);
+            } catch {/*ignore*/ }
+        }
+    }
+}

src/UpgradablePlugin.ts

@@ -10,7 +10,7 @@ import "./App.scss";
 import {DrawBoardProps} from "../DrawBoard/DrawBoard";
 
 
-export const App = ({fileContents}: DrawBoardProps) => {
+export const App = (props: DrawBoardProps) => {
     const [isLoaded, setIsLoaded] = useState(false);
     const [DrawBoard, setDrawBoard] = useState<React.ComponentType<DrawBoardProps> | null>(null);
     const loadingElement = (
@@ -35,7 +35,7 @@ export const App = ({fileContents}: DrawBoardProps) => {
     return (
         <div className="circuit-sketcher-plugin">
             <Suspense fallback={loadingElement}>
-                <DrawBoard fileContents= {fileContents} />
+                <DrawBoard {...props} />
             </Suspense>
         </div>
     );

src/components/App/App.tsx

@@ -11,11 +11,12 @@ import './DrawBoard.scss';
 
 export type DrawBoardProps = {
     fileContents: string;
+    onLoaded: () => void;
 };
 
 const CANVAS_ID = "circuit-board";
 
-export const DrawBoard = ({fileContents}: DrawBoardProps) => {
+export const DrawBoard = ({fileContents, onLoaded}: DrawBoardProps) => {
     const canvasRef = useRef<HTMLDivElement>(null);
     const resizeTimeoutRef = useRef<number | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -24,7 +25,9 @@ export const DrawBoard = ({fileContents}: DrawBoardProps) => {
         if (!canvasRef.current) return;
 
         CanvasManager.setCanvasId(CANVAS_ID).getInstance().parse(fileContents);
-    }, [fileContents]);
+
+        onLoaded();
+    }, [fileContents, onLoaded]);
 
     const handleResize = () => {
         if (resizeTimeoutRef.current) {

src/components/DrawBoard/DrawBoard.tsx

@@ -0,0 +1,18 @@
+/************************************************************************
+ *    Copyright (C) 2025 Code Forge Temple                              *
+ *    This file is part of circuit-sketcher-obsidian-plugin project.    *
+ *    Licensed under the GNU General Public License v3.0.               *
+ *    See the LICENSE file in the project root for more information.    *
+ ************************************************************************/
+
+import {CircuitSketcherSettings} from "../types/types";
+
+export const FILE_EXTENSION = "circuit-sketcher";
+export const BASE_FOLDER = ".circuit-sketcher";
+export const NEW_LIBRARY_CONTENT = "{}";
+export const CREATE_FILE_COMMAND = "Create new Circuit Sketcher file";
+
+export const READONLY_SETTINGS: CircuitSketcherSettings = {
+    libraryPath: `${BASE_FOLDER}/circuit-sketcher.lib`,
+    cachePath: `${BASE_FOLDER}/circuit-sketcher.cache`,
+};