New Feature: Notification feedback

vue3/components/flowchart/ConnectionLine.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { connectionExists, getBezierPath, useVueFlow } from '@vue-flow/core'
 import { computed, reactive, ref, watch } from 'vue'
+import { notify } from "@kyvg/vue3-notification";
 
 const props = defineProps({
   sourceX: {
@@ -21,7 +22,7 @@ const props = defineProps({
   },
   targetPosition: {
     type: String,
-    require: true, // Corrected typo
+    required: true,
   },
   sourcePosition: {
     type: String,
@@ -34,7 +35,7 @@ const { getNodes, connectionStartHandle, onConnectEnd, addEdges, edges } = useVu
 const closest = reactive({
   node: null,
   handle: null,
-  startHandle: null, // Initialize startHandle
+  startHandle: null,
 })
 
 const canSnap = ref(false)
@@ -48,7 +49,69 @@ const MIN_DISTANCE = 75
 const SNAP_DISTANCE = 30
 
 watch([() => props.targetY, () => props.targetX], (_, __, onCleanup) => {
-  // Existing watch logic...
+  const closestNode = getNodes.value.reduce(
+    (res, n) => {
+      if (n.id !== connectionStartHandle.value?.nodeId) {
+        const dx = props.targetX - (n.computedPosition.x + n.dimensions.width / 2)
+        const dy = props.targetY - (n.computedPosition.y + n.dimensions.height / 2)
+        const d = Math.sqrt(dx * dx + dy * dy)
+
+        if (d < res.distance && d < MIN_DISTANCE) {
+          res.distance = d
+          res.node = n
+        }
+      }
+
+      return res
+    },
+    {
+      distance: Number.MAX_VALUE,
+      node: null,
+    },
+  )
+
+  if (!closestNode.node) {
+    return
+  }
+
+  canSnap.value = closestNode.distance < SNAP_DISTANCE
+
+  const type = connectionStartHandle.value.type === 'source' ? 'target' : 'source'
+
+  const closestHandle = closestNode.node.handleBounds[type]?.reduce((prev, curr) => {
+    const prevDistance = Math.sqrt((prev.x - props.targetX) ** 2 + (prev.y - props.targetY) ** 2)
+    const currDistance = Math.sqrt((curr.x - props.targetX) ** 2 + (curr.y - props.targetY) ** 2)
+
+    return prevDistance < currDistance ? prev : curr
+  })
+
+  if (
+    connectionExists(
+      {
+        source: connectionStartHandle.value.nodeId,
+        sourceHandle: connectionStartHandle.value.handleId,
+        target: closestNode.node.id,
+        targetHandle: closestHandle.id,
+      },
+      edges.value,
+    )
+  ) {
+    return
+  }
+
+  if (closestHandle) {
+    const el = document.querySelector(`[data-handleid='${closestHandle.id}']`)
+
+    const prevStyle = el.style.backgroundColor
+    el.style.backgroundColor = canSnap.value ? SNAP_HIGHLIGHT_COLOR : HIGHLIGHT_COLOR
+    closest.node = closestNode.node
+    closest.handle = closestHandle
+    onCleanup(() => {
+      el.style.backgroundColor = prevStyle
+      closest.node = null
+      closest.handle = null
+    })
+  }
 })
 
 const path = computed(() => getBezierPath(props))
@@ -84,6 +147,7 @@ const strokeColor = computed(() => {
 const onConnectionStart = (startHandle) => {
   closest.startHandle = startHandle
 }
+
 </script>
 
 <template>

vue3/components/flowchart/Controls.vue

@@ -3,6 +3,7 @@ import { Panel, useVueFlow } from '@vue-flow/core'
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { watch, onUnmounted } from 'vue';
+import { notify } from "@kyvg/vue3-notification";
 
 
 const store = useStore();
@@ -53,9 +54,9 @@ if (store.state.learninggoal[0].json.tree != undefined) {
 }
 
 
-
-
 const onSave = () => {
+    let action = props.learninggoal.id == 0 ? 'saved' : 'edited';
+
     let obj = {};
     obj['tree'] = toObject();
     obj = JSON.stringify(obj);
@@ -71,6 +72,12 @@ const onSave = () => {
     store.state.editingadding = false;
     router.push({name: 'learninggoals-edit-overview'});
     window.scrollTo(0,0);
+
+    notify({
+    title: "Learning Path " + action,
+    text: "You have " + action + " the Learning Path!",
+    type: 'success'
+  });
     
 };
 

vue3/components/flowchart/Sidebar.vue

@@ -1,14 +1,15 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { defineProps, ref, computed } from 'vue';
 
 const searchTerm = ref('');
 
 function onDragStart(event, nodeType) {
   if (event.dataTransfer) {
-    event.dataTransfer.setData('application/vueflow', nodeType)
-    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('application/vueflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
   }
 }
+
 const props = defineProps({
   courses: Array,
   strings: Object,
@@ -27,12 +28,22 @@ const filteredCourses = computed(() => {
     <div class="description" type="text">{{ strings.fromavailablecourses }}</div>
 
     <input v-model="searchTerm" placeholder="Search courses" />
-    <div class="nodes">
-      <template v-for="course in filteredCourses">
-        <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, course.shortname)">
-          {{course.fullname}}
-        </div>
-      </template>
+    <div class="nodes-container">
+      <div class="nodes">
+        <template v-for="course in filteredCourses" :key="course.id">
+          <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, course.shortname)">
+            {{ course.fullname }}
+          </div>
+        </template>
+      </div>
     </div>
   </aside>
-</template>
+</template>
+
+<style scoped>
+.nodes-container {
+  margin-top: 20px;
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

vue3/components/learninggoals-edit.vue

@@ -98,6 +98,8 @@
 
 <template>
     <div class="learninggoals-edit">
+      <notifications width="100%" />
+
         <div v-if="$store.state.editingadding == false">
             <h3>{{store.state.strings.pluginname}}</h3>
             <div class="learninggoals-edit-add">
@@ -213,6 +215,8 @@ import Controls from './flowchart/Controls.vue';
 import ConnectionLine from './flowchart/ConnectionLine.vue'
 import { useRouter } from 'vue-router';
 
+import { notify } from "@kyvg/vue3-notification";
+
 
 const store = useStore();
 const router = useRouter();
@@ -329,13 +333,23 @@ const deleteLearningpathConfirm = (learninggoalid) => {
   };
   store.dispatch('deleteLearningpath', result);
   clicked.value = {};
+  notify({
+    title: "Leaerning Path deleted",
+    text: "You have deleted the Learning Path!",
+    type: 'warn'
+  });
 };
 
 const duplicateLearningpath = (learninggoalid) => {
   const result = {
     learninggoalid: learninggoalid,
   };
   store.dispatch('duplicateLearningpath', result);
+  notify({
+    title: "Learning Path duplicated",
+    text: "You have duplicated the Learning Path!",
+    type: 'success'
+  });
 };
 
 const showForm = async (learninggoalId = null) => {

vue3/main.js

@@ -4,6 +4,7 @@ import notFound from './components/not-found';
 import learninggoalsEdit from './components/learninggoals-edit';
 import VueInputAutowidth from 'vue-input-autowidth';
 import { store } from './store';
+import Notifications from '@kyvg/vue3-notification'
 
 window.__VUE_OPTIONS_API__ = true; // Enables the Composition API
 window.__VUE_PROD_DEVTOOLS__ = false; // Disable devtools in production
@@ -14,6 +15,7 @@ function init() {
     const app = createApp({});
 
     app.use(VueInputAutowidth);
+    app.use(Notifications);
 
     store.dispatch('loadComponentStrings');
 

vue3/package.json

@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@kyvg/vue3-notification": "^3.0.2",
     "@vue-flow/background": "^1.2.0",
     "@vue-flow/controls": "^1.1.0",
     "@vue-flow/core": "^1.26.0",