Add standalone editor using electron as backend

cnr-isti-vclab · Nov 16, 2024 · 43081ce · 43081ce
1 parent 56b5d4b
commit 43081ce
Show file tree

Hide file tree

Showing 14 changed files with 1,367 additions and 0 deletions.
diff --git a/dist/examples/electron-editor/css/examples.css b/dist/examples/electron-editor/css/examples.css
@@ -0,0 +1,14 @@
+html,
+body {
+	margin: 0px;
+	padding: 0px;
+	height: 100%;
+	font-family: "Open Sans",sans-serif;
+	overflow: hidden;
+}
+h1 { margin-left: 50px; }
+
+.openlime {
+	height:80%;
+}
+
diff --git a/dist/examples/electron-editor/css/light.css b/dist/examples/electron-editor/css/light.css
@@ -0,0 +1 @@
+../../../css/light.css
diff --git a/dist/examples/electron-editor/css/skin.css b/dist/examples/electron-editor/css/skin.css
@@ -0,0 +1 @@
+../../../css/skin.css
diff --git a/dist/examples/electron-editor/data/anno.json b/dist/examples/electron-editor/data/anno.json
@@ -0,0 +1,12 @@
+[
+  {
+    "id": "ac06f3f6-9247-4ec8-a54b-d0307aeca53d",
+    "idx": "1",
+    "label": "TEST",
+    "description": "12345",
+    "class": "class4",
+    "publish": 1,
+    "data": {},
+    "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t<path xmlns=\"http://www.w3.org/2000/svg\" d=\"M1712.5 1369.3 q-12.7 239.7 5.5 258.5 c18.2 18.8 78.3 6.3 104.5 5.5 c26.1 -0.8 118.7 10.0 143.0 -16.5 c24.3 -26.5 6.5 -167.6 5.5 -192.5 c-1.0 -24.9 -3.2 -91.1 -11.0 -99.0 c-7.8 -7.9 -32.9 -6.2 -44.0 -5.5 c-11.1 0.7 -65.5 19.2 -88.0 22.0 c-22.5 2.8 -93.4 -0.7 -99.0 0.0 c-5.6 0.7 -18.6 1.2 -22.0 5.5 q-3.4 4.3 0.0 22.0\" class=\"line openlime-annotation\" width=\"197.96847635726797px\" height=\"197.96847635726797px\" data-annotation=\"ac06f3f6-9247-4ec8-a54b-d0307aeca53d\" data-class=\"class4\"/>  \n\t\t\t\t</svg>"
+  }
+]
diff --git a/dist/examples/electron-editor/img/lighthouse-kdmap.jpg b/dist/examples/electron-editor/img/lighthouse-kdmap.jpg
diff --git a/dist/examples/electron-editor/index.html b/dist/examples/electron-editor/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <meta http-equiv="Content-Security-Policy" content="
+    default-src 'self';
+    script-src 'self';
+    style-src 'self' 'unsafe-inline';
+    img-src 'self' data:;
+    connect-src 'self';">
+    <link rel="stylesheet" href="css/skin.css" />
+    <style>
+        html,
+        body {
+            margin: 0px;
+            padding: 0px;
+            height: 100%;
+            font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+            overflow: hidden;
+            opacity: 1;
+            /* Add these properties to prevent text selection */
+            -webkit-user-select: none;
+            /* Safari */
+            -moz-user-select: none;
+            /* Firefox */
+            -ms-user-select: none;
+            /* IE10+/Edge */
+            user-select: none;
+            /* Standard */
+            -webkit-touch-callout: none;
+            /* iOS Safari */
+            /* Prevent context menu */
+            -webkit-context-menu: none;
+            -moz-context-menu: none;
+        }
+    </style>
+    <!-- <link rel="stylesheet" href="css/examples.css" /> -->
+
+</head>
+
+<body>
+    <div class="openlime"></div>
+    <script src="js/openlime.js"></script>
+    <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/dist/examples/electron-editor/index.js b/dist/examples/electron-editor/index.js
@@ -0,0 +1,179 @@
+// Utilities
+function formatPerformanceTime() {
+  // Get current timestamp in milliseconds since page load
+  const perfTime = performance.now();
+
+  // Add it to the page load timestamp to get current time
+  const timestamp = performance.timeOrigin + perfTime;
+
+  // Create date object
+  const date = new Date(timestamp);
+
+  // Format each component with padding
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day}-${hours}-${minutes}`;
+}
+
+//########################################################################
+
+// Check URL parameters
+const urlParams = new URLSearchParams(window.location.search);
+const editorEnable = urlParams.has('editor');
+
+// Create an OpenLIME canvas into openlime
+const lime = new OpenLIME.Viewer('.openlime');
+lime.camera.bounded = false;
+
+// Fetch a (custom) skin. A skin is a set of visual elements for the web page.
+OpenLIME.Skin.setUrl('skin/skin.svg');
+
+// Create a custom dialog
+let openlime = document.querySelector('.openlime');
+let infoDialog = new OpenLIME.UIDialog(openlime, { modal: true });
+infoDialog.hide();
+
+// Create an image layer and add it to the canvans
+const layer = new OpenLIME.Layer({
+  type: 'image',
+  layout: 'image',
+  url: 'img/lighthouse-kdmap.jpg'
+});
+lime.addLayer('Base', layer);
+
+// Define annotation parameters
+
+async function loadAnnotations() {
+  try {
+    const annotations = await window.electronAPI.readAnnotations();
+    // If annotations is null or undefined, return empty array
+    return annotations || [];
+  } catch (error) {
+    console.error('Error loading annotations:', error);
+    // Return empty array in case of error
+    return [];
+  }
+}
+
+const classParam = {
+  '': { stroke: '#000', label: '' },
+  'class1': { stroke: '#770', label: 'A' },
+  'class2': { stroke: '#707', label: 'B' },
+  'class3': { stroke: '#777', label: 'C' },
+  'class4': { stroke: '#070', label: 'D' },
+  'class5': { stroke: '#007', label: 'E' },
+  'class6': { stroke: '#077', label: 'F' },
+};
+
+(async function initializeAnnotations() {
+  try {
+    const annotations = await loadAnnotations();
+    aOptions = {
+      type: 'svg_annotations',
+      layout: layer.layout,
+      style: `
+        path { cursor:pointer; fill: rgba(32, 32, 32, 0.8); stroke: #aaa; stroke-width:2px; vector-effect:non-scaling-stroke; }
+        text { cursor:pointer; user-select: none; font-family:arial; stroke-width:1px; font-size:6px; fill:#fff; alignment-baseline:middle; text-anchor:middle; }
+        .line { cursor:pointer; fill: none; stroke: #aaa; stroke-width:4px; vector-effect:non-scaling-stroke; }
+        .pin text { stroke: none; }
+        .selected.line { stroke: #f00; }
+        `,
+      annotationUpdate: (anno, transform) => {
+        let size = 36 / transform.z;
+        anno.elements.forEach(e => { e.setAttribute('width', size + 'px'); e.setAttribute('height', size + 'px'); });
+      },
+      annotations: annotations
+    };
+
+    if (!editorEnable) {
+      aOptions = {
+        ...aOptions,
+        onClick: (anno) => {
+          infoDialog.setContent(`<h4>${anno.label}</h4><p>${anno.description}</p>`);
+          infoDialog.show();
+        },
+        customData: (anno) => {
+          anno.data.date = formatPerformanceTime();
+        },
+        classes: classParam
+      }
+    }
+
+    // Create an annotation layer and add it to the canvans
+    const annoLayer = new OpenLIME.LayerAnnotation(aOptions);
+    lime.addLayer('anno', annoLayer);
+
+    if (editorEnable) {
+      const editor = new OpenLIME.EditorSvgAnnotation(lime, annoLayer, {
+        classes: classParam
+      });
+      editor.createCallback = (anno) => {
+        console.log("Created annotation: ", anno);
+        anno.data = {};
+        processRequest(anno, 'create');
+        return true;
+      };
+      editor.deleteCallback = (anno) => {
+        console.log("Deleted annotation: ", anno);
+        processRequest(anno, 'delete');
+        return true;
+      };
+      editor.updateCallback = (anno) => {
+        console.log("Updated annotation: ", anno);
+        processRequest(anno, 'update');
+        return true;
+      };
+    }
+  } catch (error) {
+    console.error('Failed to load annotations:', error);
+  }
+
+  // Create an User Interface 
+  const ui = new OpenLIME.UIBasic(lime);
+
+  // Get a subset of pre-defined actions to work on it
+  let { help, home, layers, fullscreen, light, zoomin, zoomout } = ui.actions
+
+  // 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 };
+
+  // Add image attribution 
+  ui.attribution = "";
+
+  // Calback function to send requests to the backend
+  async function processRequest(anno, action) {
+    try {
+      let result;
+      switch (action) {
+        case "create":
+          result = await window.electronAPI.createAnnotation(anno);
+          break;
+        case "update":
+          result = await window.electronAPI.updateAnnotation(anno);
+          break;
+        case "delete":
+          result = await window.electronAPI.deleteAnnotation(anno.id);
+          break;
+        default:
+          throw new Error('Azione non supportata');
+      }
+    }
+    catch (error) {
+      console.error('Errore durante l\'operazione:', error);
+      alert('Errore durante l\'operazione');
+    }
+  }
+
+})();
diff --git a/dist/examples/electron-editor/js/openlime.js b/dist/examples/electron-editor/js/openlime.js
@@ -0,0 +1 @@
+../../../js/openlime.js
diff --git a/dist/examples/electron-editor/js/openlime.min.js b/dist/examples/electron-editor/js/openlime.min.js
@@ -0,0 +1 @@
+../../../js/openlime.min.js