Add README.md

dist/examples/electron-editor/README.md

@@ -0,0 +1,121 @@
+# OpenLIME - Standalone Annotation Editor
+
+This application is a lightweight, Electron-based annotation editor. It enables users to create, read, update, and delete annotations with a focus on simplicity and cross-platform compatibility through the Electron framework.
+
+The editor integrates OpenLIME structures to handle annotations that can include graphical SVG elements. These annotations are dynamically rendered onto a canvas using a designated layer (`LayerSvgAnnotation`), allowing for enhanced visualization and interaction with graphical content.
+
+## Features
+- **Read Annotations**: View existing annotations.
+- **Create Annotations**: Add new annotations with title, content, and position.
+- **Update Annotations**: Edit existing annotations.
+- **Delete Annotations**: Remove annotations as needed.
+
+## Installation
+
+### Prerequisites
+- OpenLIME
+- [Node.js](https://nodejs.org/) (v16 or later recommended)
+- [npm](https://www.npmjs.com/) (comes with Node.js)
+
+### Steps
+1. Clone or download this repository to your local machine.
+2. Navigate to the project directory in your terminal:
+   ```bash
+   cd path/to/electron-editor
+   ```
+3. Install the dependencies:
+   ```bash
+   npm install
+   ```
+
+## Usage
+1. Start the application:
+   ```bash
+   npm start
+   ```
+   This will launch the annotation editor in an Electron window.
+
+2. To use the editor in a specific mode (e.g., editor mode), run:
+   ```bash
+   npm run editor
+   ```
+
+3. Begin creating, editing, and managing your annotations within the application interface.
+
+## How It Works
+
+### Main.js
+The `main.js` file is the entry point for the Electron application. It handles:
+- **Initializing the Electron app**: Setting up the main process and creating the application window.
+- **Window Management**: Creating the browser window that loads the front-end (defined in `index.html`).
+- **Preloading Scripts**: Securely injecting the `preload.js` script to enable controlled communication between the main process and the renderer process.
+- **Data Management**: Acts as the backend for the application, managing data operations (such as annotations) and passing data between the main process and the web application.
+
+### Data Flow
+1. **Backend (Main.js)**:
+   - Data such as annotations are maintained and manipulated here.
+   - Uses IPC (Inter-Process Communication) to interact with the renderer process.
+
+2. **Frontend (Index.html)**:
+   - The web app defined in `index.html` provides the user interface for interacting with annotations.
+   - It receives data and updates from the backend via `preload.js`.
+
+3. **Preload.js**:
+   - Acts as a secure bridge between the main process (`main.js`) and the renderer process (`index.html`).
+   - Exposes specific functions to the frontend to send or receive data securely.
+
+### Communication Between Backend and Frontend
+- **Backend to Frontend**: 
+  The main process sends data (e.g., annotations) to the renderer process using Electron's `ipcMain` and `ipcRenderer` modules.
+
+  Example in `main.js`:
+  ```javascript
+  const { ipcMain } = require('electron');
+
+  ipcMain.handle('get-annotations', async () => {
+      return annotations; // Replace with actual annotation data
+  });
+  ```
+
+  Example in `preload.js`:
+  ```javascript
+  const { ipcRenderer, contextBridge } = require('electron');
+
+  contextBridge.exposeInMainWorld('api', {
+      getAnnotations: () => ipcRenderer.invoke('get-annotations'),
+  });
+  ```
+
+  Example in the frontend (`index.js`):
+  ```javascript
+  window.api.getAnnotations().then((annotations) => {
+      console.log(annotations);
+      // Populate the UI with annotation data
+  });
+  ```
+
+- **Frontend to Backend**: 
+  User interactions (e.g., creating an annotation) trigger events that send data back to the backend.
+
+  Example in the frontend (`index.js`):
+  ```javascript
+  const newAnnotation = { title: "New Title", content: "New Content", position: { x: 10, y: 20 } };
+  window.api.createAnnotation(newAnnotation);
+  ```
+
+  Example in `preload.js`:
+  ```javascript
+  contextBridge.exposeInMainWorld('api', {
+      createAnnotation: (annotation) => ipcRenderer.send('create-annotation', annotation),
+  });
+  ```
+
+  Example in `main.js`:
+  ```javascript
+  ipcMain.on('create-annotation', (event, annotation) => {
+      annotations.push(annotation);
+      console.log('Annotation added:', annotation);
+  });
+  ```
+
+This architecture ensures that the backend logic is secure and that the frontend is only responsible for the UI and user interactions.

dist/examples/electron-editor/main.js

@@ -4,9 +4,9 @@ const path = require('path');
 const fs = require('fs');
 const url = require('url');
 
-// Definisci il percorso al file JSON
 const annotationFile = path.join(__dirname, 'data', 'anno.json');
 let annotations = [];
+
 // Initialize annotations
 try {
   // Check if data directory exists, if not create it
@@ -40,7 +40,7 @@ try {
   }
 }
 
-// Funzione per creare la finestra principale
+// Create the main window
 function createWindow() {
 
   const args = process.argv.slice(2);
@@ -56,7 +56,7 @@ function createWindow() {
       enableRemoteModule: false, // Disable unless absolutely necessary
       nodeIntegration: false, // Use preload for secure Node.js access
       preload: path.join(__dirname, 'preload.js'), // Use a preload script
-      webSecurity: true // Disable this to allow loading local resources
+      webSecurity: true
     }
   });
 
@@ -71,10 +71,10 @@ function createWindow() {
   });
 }
 
-// Avvia l'applicazione quando Electron è pronto
+// Start the browser when app is ready
 app.on('ready', createWindow);
 
-// Handler per leggere le annotazioni
+// Handler to read annotations
 ipcMain.handle('read-annotations', async () => {
   try {
     const data = fs.readFileSync(annotationFile, 'utf8');
@@ -84,25 +84,25 @@ ipcMain.handle('read-annotations', async () => {
     }
     return JSON.parse(data);
   } catch (err) {
-    console.error('Errore nella lettura del file JSON:', err);
+    console.error('Error in reading JSON file:', err);
     // If there's a JSON parsing error or any other error, return empty array
     return [];
   }
 });
 
-// Handler per creare una nuova annotazione
+// Handler to create a new annotation
 ipcMain.handle('create-annotation', async (event, newAnnotation) => {
   try {
     annotations.push(newAnnotation);
     fs.writeFileSync(annotationFile, JSON.stringify(annotations, null, 2));
     return { status: 'success' };
   } catch (err) {
-    console.error('Errore durante la creazione dell\'annotazione:', err);
+    console.error('Error while creating the annotation:', err);
     throw err;
   }
 });
 
-// Handler per aggiornare un'annotazione esistente
+// Handler to update an existing annotation
 ipcMain.handle('update-annotation', async (event, updatedAnnotation) => {
   try {
     const index = annotations.findIndex(anno => anno.id === updatedAnnotation.id);
@@ -111,22 +111,22 @@ ipcMain.handle('update-annotation', async (event, updatedAnnotation) => {
       fs.writeFileSync(annotationFile, JSON.stringify(annotations, null, 2));
       return { status: 'success' };
     } else {
-      throw new Error('Annotazione non trovata');
+      throw new Error('Annotation not found');
     }
   } catch (err) {
-    console.error('Errore durante l\'aggiornamento dell\'annotazione:', err);
+    console.error('Error while updating the annotation:', err);
     throw err;
   }
 });
 
-// Handler per cancellare un'annotazione
+// Handler to delete an annotation
 ipcMain.handle('delete-annotation', async (event, annotationId) => {
   try {
     annotations = annotations.filter(anno => anno.id !== annotationId);
     fs.writeFileSync(annotationFile, JSON.stringify(annotations, null, 2));
     return { status: 'success' };
   } catch (err) {
-    console.error('Errore durante la cancellazione dell\'annotazione:', err);
+    console.error('Error while deleting the annotation:', err);
     throw err;
   }
 });