addNewPage + pop up menu

electron/components/contextMenu.js

+const { ipcMain, Menu } = require('electron');
+const path = require('path');
+
+const contextTemplate = [
+    {
+        label: 'Ajouter',
+        submenu: [
+            {
+                label: 'Ajouter du texte',
+                click: () => { console.log('Ajout d\'une page texte'); }
+            },
+            {
+                label: 'Ajouter une vidéo',
+                click: () => { console.log('Ajout d\'une page vidéo'); }
+            }
+        ]
+    },
+    {
+        label: 'Dupliquer',
+        click: () => { console.log('Duplication de la page'); }
+    },
+    {
+        label: 'Supprimer',
+        click: () => { console.log('Suppression de la page'); }
+    }
+];
+
+
+module.exports.popupMenu = Menu.buildFromTemplate(contextTemplate);
\ No newline at end of file

electron/electron.js

@@ -10,6 +10,8 @@ const { cleanPreview } = require('./components/preview');
 const path = require('path');
 const store = require('./components/store');
 
+const { popupMenu } = require('./components/contextMenu');
+
 let mainWindow;
 let splashWindow;
 // Open file with editor, on windows : using argv | on macOS using open-file event (see below)
@@ -78,4 +80,8 @@ app.whenReady().then(() => {
         cleanPreview();
         app.quit();
     });
+
+    mainWindow.webContents.on('context-menu', () => {
+        popupMenu.popup(mainWindow.webContents);
+    });
 });
\ No newline at end of file

src/features/sideBar/SideBarV0.vue

@@ -17,6 +17,7 @@ const editorStore = useEditorStore();
                 :side-action="item"
             />
         </div>
+        <button class="btn btn-content" @click="editorStore.addNewPage('text')">Add page</button>
     </div>
 </template>
 

src/shared/stores/editorStore.ts

 import { defineStore } from 'pinia';
-import { ePocProject, Form, FormButton, Screen, SideAction } from '@/src/shared/interfaces';
+import { ePocProject, Form, FormButton, NodeElement, Screen, SideAction } from '@/src/shared/interfaces';
 import { toRaw } from 'vue';
 import { applyNodeChanges, getConnectedEdges, useVueFlow } from '@vue-flow/core';
 
@@ -248,6 +248,31 @@ export const useEditorStore = defineStore('editor', {
 
             node.data.elements.push(newElement);
             this.addElementToScreen(node.id, newElement.action);
+        },
+        addNewPage(type: string, following?: string) {
+            console.log('adding a new page of type', type);
+
+            const elements: NodeElement[] = [];
+            const id = this.generateId();
+
+            elements.push({
+                id: this.generateId(),
+                action: { icon: 'icon-texte', type: 'text', label: 'Texte' },
+                formType: 'text',
+                formValues: {},
+                parentId: id,
+                contentId: this.generateContentId(),
+            });
+
+            const newNode = {
+                id: id,
+                type: 'content',
+                data: { type: type, readyToDrop: false, animated: false, elements: elements, formType: 'screen', formValues: {}, contentId: id },
+                position: { x: 200, y: 200 },
+                deletable: false
+            };
+
+            addNodes([newNode]);
         }
     }
 });