new file: corkboard.png

modified: index.html new file: logo.png modified: package.json deleted: pin-icon.png modified: public/favicon.ico modified: src/App.vue modified: src/Icon.vue modified: src/components/DialogConfirmDeleteUse.js modified: src/initial-elements.js modified: src/nodes/ComponentUtil.js
SkyAphid · Sep 3, 2024 · d451eca · d451eca
1 parent 656cfb5
commit d451eca
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 49 deletions.
diff --git a/corkboard.png b/corkboard.png
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VueFlow Dialogue Editor</title>
+    <title>Corkboard</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/logo.png b/logo.png
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "vueflow-dialogue-editor",
-  "version": "0.0.0",
-  "private": true,
+  "name": "corkboard",
+  "version": "1.0.0",
+  "private": false,
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/pin-icon.png b/pin-icon.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 /**
-VueFlow Dialogue Editor by NOKORI, 2024
+Corkboard Dialogue/Node-based Editor by NOKORIWARE, 2024
 Uses the following APIs:
 -VueFlow
 -VueQuill
@@ -30,13 +30,18 @@ import Icon from './Icon.vue'
 import { v4 as uuidv4 } from 'uuid';
 
 const { onInit, screenToFlowCoordinate,
-  onConnect, onNodesInitialized, onNodeDrag, updateNode, findNode, getNodes,
+  onConnect, onNodesInitialized, onNodeDrag, updateNode, findNode,
   isNodeIntersecting, getIntersectingNodes,
   addNodes, onNodeDoubleClick, onNodesChange, applyNodeChanges, onNodeContextMenu, removeNodes,
   addEdges, onEdgeDoubleClick, onEdgesChange, applyEdgeChanges, onEdgeContextMenu, removeEdges,
   onSelectionContextMenu,
   onPaneContextMenu,
-  toObject, fromObject } = useVueFlow();
+  toObject, fromObject,
+  getNodes, getEdges, vueFlowRef, } = useVueFlow();
+
+
+//If enabled, a dialog will ask the user to confirm the deletion of elements
+let confirmDelete = true;
 
 //Node intersecting
 const panelEl = ref()
@@ -59,14 +64,13 @@ onConnect(addEdges)
 const deleteKey = 'Delete';
 const confirmDeleteDialog = useConfirmDeleteDialog();
 
+//Node Deleting
 onNodesChange(async (changes) => {
   const nextChanges = []
   for (const change of changes) {
     if (change.type === 'remove') {
-      //await causes the isConfirmed const to wait on a response from the dialog.confirmDefault function
-      const isConfirmed = await confirmDeleteDialog.confirmDefault(change.id)
 
-      if (isConfirmed) {
+      if (await canDelete(change)) {
         componentUtil.deleteComponents(getNodes, change.id);
         nextChanges.push(change)
       }
@@ -75,10 +79,11 @@ onNodesChange(async (changes) => {
     }
   }
 
+  confirmDelete = true;
   applyNodeChanges(nextChanges)
 })
 
-//Edge Renaming
+//Edge Deleting
 onEdgesChange(async (changes) => {
   const nextChanges = []
 
@@ -88,19 +93,28 @@ onEdgesChange(async (changes) => {
     }
 
     if (change.type === 'remove') {
-      const isConfirmed = await confirmDeleteDialog.confirmDefault(change.id)
-
-      if (isConfirmed) {
+      if (await canDelete(change)) {
         nextChanges.push(change)
       }
     } else {
       nextChanges.push(change)
     }
   }
 
+  confirmDelete = true;
   applyEdgeChanges(nextChanges)
 })
 
+async function canDelete(change) {
+  if (confirmDelete) {
+    //await causes the isConfirmed const to wait on a response from the dialog.confirmDefault function
+    return await confirmDeleteDialog.confirmDefault(change.id);
+  }
+
+  return true;
+}
+
+//Edge Renaming
 onEdgeDoubleClick(({ mouseEvent, edge }) => {
   editingEdge.value = edge;
   mouseX = edge.sourceX;
@@ -295,6 +309,18 @@ const panelPosition = computed(() => {
 
 /* Saving & Loading Data */
 
+async function onReset() {
+  const isConfirmed = await confirmDeleteDialog.confirmReset();
+
+  if (isConfirmed) {
+
+    confirmDelete = false;
+    removeNodes(getNodes.value);
+
+  }
+
+}
+
 function onSave() {
   const saveData = JSON.stringify(toObject(), null, 2);
 
@@ -369,24 +395,31 @@ async function onLoad() {
 
     <!-- Toolbar -->
     <Controls position="top-left">
-      <ControlButton title="Save" @click="onSave">
+
+      <ControlButton title="Reset to New Project" @click="onReset">
+        <Icon name="reset" />
+      </ControlButton>
+
+      <ControlButton title="Save Project" @click="onSave">
         <Icon name="save" />
       </ControlButton>
 
-      <ControlButton title="Load" @click="onLoad">
-        <Icon name="restore" />
+      <ControlButton title="Load Project" @click="onLoad">
+        <Icon name="load" />
       </ControlButton>
 
-      <ControlButton title="Log `toObject`" @click="console.log(toObject());">
+      <ControlButton title="Log `toObject` to Console" @click="console.log(toObject());">
         <Icon name="log" />
       </ControlButton>
+
     </Controls>
 
   </VueFlow>
 
   <!-- Label Renaming Dialog -->
   <div v-if="editingEdge" class="label-renaming-field">
-    <input :id="'label-editor'" type="text" v-model="editingEdge.label" @keydown.enter="endEdgeEditing" @keydown.escape="endEdgeEditing" />
+    <input :id="'label-editor'" type="text" v-model="editingEdge.label" @keydown.enter="endEdgeEditing"
+      @keydown.escape="endEdgeEditing" />
   </div>
 
 </template>

diff --git a/src/Icon.vue b/src/Icon.vue
@@ -7,47 +7,54 @@ defineProps({
 })
 </script>
 
+<!-- Bootstrap Icons https://icons.getbootstrap.com/ -->
 <template>
   <svg v-if="name === 'reset'" width="16" height="16" viewBox="0 0 32 32">
     <path d="M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z" />
   </svg>
 
   <svg v-if="name === 'update'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      d="M14 20v-2h2.6l-3.2-3.2l1.425-1.425L18 16.55V14h2v6Zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4Zm3.775-9.425L4 5.4L5.4 4l5.175 5.175Z"
-    />
+      d="M14 20v-2h2.6l-3.2-3.2l1.425-1.425L18 16.55V14h2v6Zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4Zm3.775-9.425L4 5.4L5.4 4l5.175 5.175Z" />
   </svg>
 
   <svg v-if="name === 'sun'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      d="M12 17q-2.075 0-3.537-1.463Q7 14.075 7 12t1.463-3.538Q9.925 7 12 7t3.538 1.462Q17 9.925 17 12q0 2.075-1.462 3.537Q14.075 17 12 17ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm18 0q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287q.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8-8q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm0 18q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7q.013-.425.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7q0 .4-.275.7q-.275.3-.687.287q-.413-.012-.713-.287ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712q0-.413.275-.688q.275-.3.688-.287q.412.012.712.287L19.425 18q.3.275.288.7q-.013.425-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.287-.688q.012-.412.287-.712L18 4.575q.275-.3.7-.288q.425.013.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275q-.4 0-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.713-.275q.412 0 .687.275q.3.275.288.688q-.013.412-.288.712L6 19.425q-.275.3-.7.287q-.425-.012-.725-.287Z"
-    />
+      d="M12 17q-2.075 0-3.537-1.463Q7 14.075 7 12t1.463-3.538Q9.925 7 12 7t3.538 1.462Q17 9.925 17 12q0 2.075-1.462 3.537Q14.075 17 12 17ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm18 0q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287q.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8-8q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm0 18q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7q.013-.425.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7q0 .4-.275.7q-.275.3-.687.287q-.413-.012-.713-.287ZM18 19.425l-1.05-1.075q-.275-.3-.275-.712q0-.413.275-.688q.275-.3.688-.287q.412.012.712.287L19.425 18q.3.275.288.7q-.013.425-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.287-.688q.012-.412.287-.712L18 4.575q.275-.3.7-.288q.425.013.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275q-.4 0-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.713-.275q.412 0 .687.275q.3.275.288.688q-.013.412-.288.712L6 19.425q-.275.3-.7.287q-.425-.012-.725-.287Z" />
   </svg>
 
   <svg v-if="name === 'moon'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025q.337.025.662.075q-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613q1.15-.612 1.875-1.637q.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Z"
-    />
+      d="M12 21q-3.75 0-6.375-2.625T3 12q0-3.75 2.625-6.375T12 3q.35 0 .688.025q.337.025.662.075q-1.025.725-1.637 1.887Q11.1 6.15 11.1 7.5q0 2.25 1.575 3.825Q14.25 12.9 16.5 12.9q1.375 0 2.525-.613q1.15-.612 1.875-1.637q.05.325.075.662Q21 11.65 21 12q0 3.75-2.625 6.375T12 21Z" />
   </svg>
 
   <svg v-if="name === 'log'" width="16" height="16" viewBox="0 0 24 24">
     <path
-      d="M20 19V7H4v12h16m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16m-7 14v-2h5v2h-5m-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59l3.99-4Z"
-    />
+      d="M20 19V7H4v12h16m0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16m-7 14v-2h5v2h-5m-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59l3.99-4Z" />
   </svg>
 
   <svg v-if="name === 'save'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path fill="currentColor"
+      d="M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-9 11q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-6-8h9V6H6z" />
+  </svg>
+
+  <svg v-if="name === 'load'" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder2-open" viewBox="0 0 16 16">
     <path
-      fill="currentColor"
-      d="M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-9 11q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-6-8h9V6H6z"
-    />
+      d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z" />
+  </svg>
+
+  <svg v-if="name === 'camera'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill="currentColor"
+      d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4z" />
+    <path fill="currentColor"
+      d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0" />
   </svg>
 
   <svg v-else-if="name === 'restore'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      fill="currentColor"
-      d="m12 17l4-4l-1.4-1.4l-1.6 1.55V9h-2v4.15L9.4 11.6L8 13zm-6 5q-.825 0-1.412-.587T4 20V8l6-6h8q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4h-7.15L6 8.85zm0 0h12z"
-    />
+    <path fill="currentColor"
+      d="m12 17l4-4l-1.4-1.4l-1.6 1.55V9h-2v4.15L9.4 11.6L8 13zm-6 5q-.825 0-1.412-.587T4 20V8l6-6h8q.825 0 1.413.588T20 4v16q0 .825-.587 1.413T18 22zm0-2h12V4h-7.15L6 8.85zm0 0h12z" />
   </svg>
 
+
+
 </template>
diff --git a/src/components/DialogConfirmDeleteUse.js b/src/components/DialogConfirmDeleteUse.js
@@ -20,13 +20,6 @@ export function useDialogConfirmDelete() {
   }
 }
 
-export function useConfirmDeleteDialog() {
-  return{
-    confirm,
-    confirmDefault
-  }
-}
-
 function confirm(msg) {
   isVisible.value = true
   message.value = msg
@@ -50,6 +43,29 @@ function confirmDefault(id){
   ));
 }
 
+function confirmReset(){
+  return confirm(h(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '8px',
+      },
+    },
+    [`Reset workspace?`, h('br'), `This cannot be undone.`],
+  ));
+}
+
+export function useConfirmDeleteDialog() {
+  return{
+    confirm,
+    confirmDefault,
+    confirmReset
+  }
+}
+
 //Another way
 /*export function useDialog() {
   return {

diff --git a/src/initial-elements.js b/src/initial-elements.js
@@ -1,4 +1,3 @@
-import { MarkerType } from '@vue-flow/core';
 import { reactive } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -10,8 +9,8 @@ export const initialNodes = reactive([
     position: { x: 0, y: 0 },
     // all nodes can have a data object containing any data you want to pass to the node
     // a label can property can be used for default nodes
-    data: { 
-      label: 'Node 1', 
+    data: {
+      label: 'Node 1',
       body: "",
       components: []
     },
@@ -23,24 +22,27 @@ export const initialNodes = reactive([
   {
     id: uuidv4(),
     type: 'text-field',
-    position: { x: 400, y: 0 },
+    position: { x: 500, y: 0 },
     data: { label: 'Node 2' },
   },
 
   // An output node, specified by using `type: 'output'`
   {
     id: uuidv4(),
     type: 'text-area',
-    position: { x: 700, y: 0 },
+    position: { x: 900, y: 0 },
     data: { label: 'Node 3', body: '' },
   },
 
   // A note node, for making notes
   {
     id: uuidv4(),
     type: 'note',
-    position: { x: 300, y: 400 },
-    data: { label: 'Note Node', body: 'Welcome!' },
+    position: { x: 375, y: 175 },
+    data: { 
+      label: 'Welcome to Corkboard!', 
+      body: '<b><i>Getting Started:</i></b><ol><li>Right click the background to bring up the context menu</li><li>Double click nodes to delete and modify them</li><li>Drag attribute nodes over text area nodes to combine them</li><li>Save & load projects using the toolbar in the upper-left</li></ol>' 
+    },
   },
 
 ]);

diff --git a/src/nodes/ComponentUtil.js b/src/nodes/ComponentUtil.js
@@ -40,7 +40,7 @@ export function useComponentUtil() {
 
         for (const node of nodes.value){
 
-            console.log(node.id);
+            //console.log(node.id);
 
             if (node.id == componentNodeID){
                 continue;