Add electron package builder

dist/examples/electron-editor/README.md

@@ -9,6 +9,8 @@ The editor integrates OpenLIME structures to handle annotations that can include
 - **Create Annotations**: Add new annotations with title, content, and position.
 - **Update Annotations**: Edit existing annotations.
 - **Delete Annotations**: Remove annotations as needed.
+- **Full Screen Mode**: Toggle between windowed and full screen modes.
+- **Developer Tools**: Built-in developer tools for debugging.
 
 ## Installation
 
@@ -87,9 +89,23 @@ To run in editor mode:
   ./OpenLIME\ Electron\ Editor-1.0.0.AppImage --editor
   ```
 
+#### Application Menu and Shortcuts
+The application provides several menu options and keyboard shortcuts:
+
+- **File Menu**:
+  - Open Annotation Dir: Opens the directory containing annotation files
+  - Exit: Closes the application
+
+- **View Menu**:
+  - Toggle Full Screen: Switch between windowed and full screen modes
+    - Windows/Linux: `F11`
+    - macOS: `Cmd+F`
+  - Developer Tools: Open Chrome Developer Tools
+    - All platforms: `F12`
+
 #### Accessing Annotation Data
 Annotations are stored in a user-specific data directory. You can access this directory through:
-1. The application menu: `File > Open Data Directory`
+1. The application menu: `File > Open Annotation Dir`
 2. Manual navigation to:
    - **Windows**: `%APPDATA%\OpenLIME Electron Editor\data`
    - **macOS**: `~/Library/Application Support/OpenLIME Electron Editor/data`

dist/examples/electron-editor/create_icons.sh

@@ -0,0 +1,105 @@
+#!/bin/bash
+
+# Check for dependencies
+if ! command -v magick &> /dev/null || ! command -v png2icns &> /dev/null; then
+  echo "Error: This script requires ImageMagick (magick) and png2icns (libicns) to be installed."
+  echo "Install them on Arch Linux: sudo pacman -S imagemagick; yay -S libicns"
+  exit 1
+fi
+
+# Ensure a PNG file is provided
+if [ "$#" -ne 2 ]; then
+  echo "Usage: $0 <path_to_1024x1024_png> <icon>"
+  exit 1
+fi
+
+mkdir -p build
+
+SOURCE_PNG="$1"
+OUTPUT_FNAME="$2"
+ICONS_DIR="build/icons"
+OUTPUT_ICNS="build/$OUTPUT_FNAME".icns
+OUTPUT_ICO="build/$OUTPUT_FNAME".ico
+OUTPUT_PNG="build/$OUTPUT_FNAME".png
+
+if [ ! -f "$SOURCE_PNG" ]; then
+  echo "Error: File '$SOURCE_PNG' not found."
+  exit 1
+fi
+
+# Create build directory if it doesn't exist
+mkdir -p "$ICONS_DIR"
+
+# Create standard PNG and ICO files
+magick "$SOURCE_PNG" -resize "512x512!" "$OUTPUT_PNG"
+echo "Successfully created $OUTPUT_PNG"
+magick "$SOURCE_PNG" -resize "512x512!" "$OUTPUT_ICO"
+echo "Successfully created $OUTPUT_ICO"
+echo
+
+# Create temporary directory for ICNS creation
+TMP_DIR=$(mktemp -d)
+trap "rm -rf $TMP_DIR" EXIT
+
+# Define all required sizes
+# Standard ICNS sizes:
+# 16x16 - 16x16 (16pt@1x) [is32]
+# 32x32 - 32x32 (16pt@2x, 32pt@1x) [il32]
+# 128x128 - 128x128 (128pt@1x) [it32]
+# 256x256 - 256x256 (256pt@1x, 128pt@2x) [ic08]
+# 512x512 - 512x512 (512pt@1x, 256pt@2x) [ic09]
+# 1024x1024 - 1024x1024 (512pt@2x) [ic10]
+
+# Additional Linux sizes:
+# 24x24, 48x48, 64x64, 96x96 for better desktop integration
+SIZES=(16 24 32 48 64 96 128 256 512 1024)
+
+# Generate icons for each size
+echo "Generating PNG variants..."
+for SIZE in "${SIZES[@]}"; do
+  # Generate for ICNS (only standard sizes)
+  if [[ $SIZE == 16 || $SIZE == 32 || $SIZE == 128 || $SIZE == 256 || $SIZE == 512 || $SIZE == 1024 ]]; then
+    magick "$SOURCE_PNG" -resize "${SIZE}x${SIZE}!" "${TMP_DIR}/icon_${SIZE}x${SIZE}.png"
+  fi
+
+  # Generate for Linux icons directory
+  magick "$SOURCE_PNG" -resize "${SIZE}x${SIZE}!" "${ICONS_DIR}/${SIZE}x${SIZE}.png"
+  echo "Created ${SIZE}x${SIZE} icon"
+done
+
+# Create symlinks for Linux icons
+echo "Creating symlinks..."
+for SIZE in "${SIZES[@]}"; do
+  ln -sf "${SIZE}x${SIZE}.png" "${ICONS_DIR}/icon_${SIZE}.png"
+done
+
+# Verify ICNS dimensions
+echo "Verifying ICNS dimensions..."
+ICNS_SIZES=(16 32 128 256 512 1024)
+for SIZE in "${ICNS_SIZES[@]}"; do
+  DIM=$(identify -format "%wx%h" "${TMP_DIR}/icon_${SIZE}x${SIZE}.png")
+  if [ "$DIM" != "${SIZE}x${SIZE}" ]; then
+    echo "Error: File ${TMP_DIR}/icon_${SIZE}x${SIZE}.png has incorrect dimensions: $DIM"
+    exit 1
+  fi
+done
+
+# Generate ICNS file
+echo "Creating .icns file..."
+png2icns "$OUTPUT_ICNS" "${TMP_DIR}/icon_"*.png 2>/dev/null
+
+if [ $? -eq 0 ]; then
+  echo "Successfully created $OUTPUT_ICNS"
+else
+  echo "Error: Failed to create .icns file."
+  exit 1
+fi
+
+echo
+echo "All icons created successfully:"
+echo "- Windows ICO: $OUTPUT_ICO"
+echo "- macOS ICNS: $OUTPUT_ICNS"
+echo "- Linux PNG:  $OUTPUT_PNG"
+echo "- Linux icons directory: $ICONS_DIR"
+
+exit 0

dist/examples/electron-editor/index.js

@@ -146,13 +146,8 @@ const classParam = {
   // Remove light from the toolbar
   light.display = false;
 
-  // Add help, zoomin and zoomout to the toolbar
-  help.display = true;
-  zoomin.display = true;
-  zoomout.display = true;
-
   // Add configured actions to the toolbar
-  ui.actions = { help, home, layers, fullscreen, light, zoomin, zoomout };
+  ui.actions = { home, layers, light };
 
   // Add image attribution 
   ui.attribution = "";

dist/examples/electron-editor/main.js

@@ -85,41 +85,65 @@ function createWindow() {
     }
   });
 
-  // Add menu item to open data directory
+  // Create application menu
   const { Menu, MenuItem } = require('electron');
-  const menu = Menu.getApplicationMenu() || Menu.buildFromTemplate([]);
-
-  const fileMenu = menu.items.find(item => item.label === 'File') || 
-                  new MenuItem({ label: 'File', submenu: [] });
-
-  fileMenu.submenu.append(new MenuItem({
-    label: 'Open Data Directory',
-    click: () => {
-      require('electron').shell.openPath(dataDir);
+  const menu = Menu.buildFromTemplate([
+    {
+      label: 'File',
+      submenu: [
+        {
+          label: 'Open Annotation Dir',
+          click: () => {
+            require('electron').shell.openPath(dataDir);
+          }
+        },
+        { type: 'separator' },
+        {
+          label: 'Exit',
+          role: 'quit'
+        }
+      ]
+    },
+    {
+      label: 'View',
+      submenu: [
+        {
+          label: 'Toggle Full Screen',
+          accelerator: process.platform === 'darwin' ? 'Cmd+F' : 'F11',
+          click: () => {
+            const isFullScreen = win.isFullScreen();
+            win.setFullScreen(!isFullScreen);
+          }
+        },
+        { type: 'separator' },
+        {
+          label: 'Developer Tools',
+          accelerator: 'F12',
+          click: () => {
+            win.webContents.toggleDevTools();
+          }
+        }
+      ]
     }
-  }));
+  ]);
 
-  if (!menu.items.find(item => item.label === 'File')) {
-    menu.append(fileMenu);
-  }
-
   Menu.setApplicationMenu(menu);
 }
 
 // Handle the 'second-instance' event
 app.on('second-instance', (event, commandLine, workingDirectory) => {
   const isEditorMode = commandLine.slice(1).some(arg => arg === '--editor');
   const existingWindows = BrowserWindow.getAllWindows();
-  
+
   if (existingWindows.length > 0) {
     const win = existingWindows[0];
     if (win.isMinimized()) win.restore();
     win.focus();
-    
+
     // Reload the window with new mode if necessary
     const currentURL = new URL(win.webContents.getURL());
     const currentIsEditor = currentURL.searchParams.has('editor');
-    
+
     if (currentIsEditor !== isEditorMode) {
       const queryParams = isEditorMode ? new URLSearchParams({ editor: 'true' }).toString() : "";
       const indexPath = `file://${path.join(__dirname, 'index.html')}?${queryParams}`;

dist/examples/electron-editor/package.json

@@ -1,10 +1,11 @@
 {
   "name": "openlime-electron-editor",
   "version": "1.0.0",
+  "description": "An Electron-based annotation editor using OpenLIME",
   "main": "main.js",
   "build": {
     "appId": "it.openlime.electroneditor",
-    "productName": "OpenLIME Electron Editor",
+    "productName": "OpenLIME Editor",
     "asar": true,
     "directories": {
       "output": "dist"
@@ -16,34 +17,54 @@
     ],
     "mac": {
       "target": "dmg",
-      "category": "public.app-category.productivity"
+      "category": "public.app-category.productivity",
+      "icon": "build/icon.icns"
     },
     "win": {
       "target": "nsis",
-      "publisherName": "Your Company"
+      "icon": "build/icon.ico",
+      "signingHashAlgorithms": [
+        "sha256"
+      ],
+      "signtoolOptions": {
+        "publisherName": "OpenLIME"
+      }
     },
     "linux": {
       "target": "AppImage",
       "executableName": "openlime-electron-editor",
+      "icon": "build/icon.png",
       "desktop": {
         "Name": "OpenLIME Editor",
-        "Comment": "An Electron-based annotation editor"
+        "Comment": "An Electron-based annotation editor",
+        "Categories": "Graphics;Utility;",
+        "Type": "Application"
       },
-      "category": "Utility"
+      "category": "Graphics"
     }
   },
   "scripts": {
     "start": "electron .",
     "editor": "electron . --editor",
+    "prepare-icons": "./create_linux_icons.sh",
+    "prebuild": "npm run prepare-icons",
     "build": "electron-builder",
-    "build:win": "electron-builder --win",
+    "build:win": "electron-builder --win --x64",
     "build:mac": "electron-builder --mac",
     "build:linux": "electron-builder --linux"
   },
-  "keywords": [],
-  "author": "",
+  "keywords": [
+    "openlime",
+    "electron",
+    "annotation",
+    "editor"
+  ],
+  "author": {
+    "name": "OpenLIME",
+    "email": "[email protected]",
+    "url": "https://openlime.github.io"
+  },
   "license": "ISC",
-  "description": "",
   "devDependencies": {
     "electron": "^33.2.0",
     "electron-builder": "^25.1.8"