From 4668abd062a1d7686ca19f3fa35fd9888c95c36a Mon Sep 17 00:00:00 2001
From: Md Afiq Iskandar <mdafiqiskandar@gmail.com>
Date: Mon, 28 Jul 2025 10:36:54 +0800
Subject: [PATCH] Refactor Process Flow Component Labels for Improved Clarity

- Updated HexagonShape.vue, RectangleShape.vue, SwimlaneHorizontal.vue, SwimlaneVertical.vue, and TrapezoidShape.vue to remove label text from shape components, enhancing visual clarity.
- Modified index.vue to clarify node label and description input visibility, ensuring they only appear for process nodes and text annotations.
- Adjusted processBuilder.js to set default label values to an empty string for new nodes, improving consistency in node creation.
---
 components/process-flow/custom/HexagonShape.vue       | 2 +-
 components/process-flow/custom/RectangleShape.vue     | 2 +-
 components/process-flow/custom/SwimlaneHorizontal.vue | 2 +-
 components/process-flow/custom/SwimlaneVertical.vue   | 2 +-
 components/process-flow/custom/TrapezoidShape.vue     | 2 +-
 pages/process-builder/index.vue                       | 8 ++++----
 stores/processBuilder.js                              | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/process-flow/custom/HexagonShape.vue b/components/process-flow/custom/HexagonShape.vue
index 2c5e9bf..0f304a2 100644
--- a/components/process-flow/custom/HexagonShape.vue
+++ b/components/process-flow/custom/HexagonShape.vue
@@ -36,7 +36,7 @@ const displayDescription = computed(() => {
     :style="shapeStyle"
   >
     <div class="custom-node-content" v-if="displayLabel || displayDescription">
-      <div class="custom-node-label" v-if="displayLabel">{{ displayLabel }}</div>
+      <div class="custom-node-label" v-if="displayLabel"></div>
       <div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
     </div>
   </div>
diff --git a/components/process-flow/custom/RectangleShape.vue b/components/process-flow/custom/RectangleShape.vue
index 5cdf1c8..6e1958a 100644
--- a/components/process-flow/custom/RectangleShape.vue
+++ b/components/process-flow/custom/RectangleShape.vue
@@ -45,7 +45,7 @@ const displayDescription = computed(() => {
     :style="shapeStyle"
   >
     <div class="shape-content" v-if="displayLabel || displayDescription">
-      <div class="shape-label" v-if="displayLabel">{{ displayLabel }}</div>
+      <div class="shape-label" v-if="displayLabel"></div>
       <div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
     </div>
   </div>
diff --git a/components/process-flow/custom/SwimlaneHorizontal.vue b/components/process-flow/custom/SwimlaneHorizontal.vue
index 6b609dd..f686379 100644
--- a/components/process-flow/custom/SwimlaneHorizontal.vue
+++ b/components/process-flow/custom/SwimlaneHorizontal.vue
@@ -45,7 +45,7 @@ const displayDescription = computed(() => {
     :style="shapeStyle"
   >
     <div class="shape-content" v-if="displayLabel || displayDescription">
-      <div class="shape-label" v-if="displayLabel">{{ displayLabel }}</div>
+      <div class="shape-label" v-if="displayLabel"></div>
       <div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
     </div>
   </div>
diff --git a/components/process-flow/custom/SwimlaneVertical.vue b/components/process-flow/custom/SwimlaneVertical.vue
index 82f48ab..28e27b4 100644
--- a/components/process-flow/custom/SwimlaneVertical.vue
+++ b/components/process-flow/custom/SwimlaneVertical.vue
@@ -47,7 +47,7 @@ const displayDescription = computed(() => {
     :style="shapeStyle"
   >
     <div class="shape-content" v-if="displayLabel || displayDescription">
-      <div class="shape-label" v-if="displayLabel">{{ displayLabel }}</div>
+      <div class="shape-label" v-if="displayLabel"></div>
       <div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
     </div>
   </div>
diff --git a/components/process-flow/custom/TrapezoidShape.vue b/components/process-flow/custom/TrapezoidShape.vue
index ff55e94..478ef15 100644
--- a/components/process-flow/custom/TrapezoidShape.vue
+++ b/components/process-flow/custom/TrapezoidShape.vue
@@ -36,7 +36,7 @@ const displayDescription = computed(() => {
     :style="shapeStyle"
   >
     <div class="custom-node-content" v-if="displayLabel || displayDescription">
-      <div class="custom-node-label" v-if="displayLabel">{{ displayLabel }}</div>
+      <div class="custom-node-label" v-if="displayLabel"></div>
       <div class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
     </div>
   </div>
diff --git a/pages/process-builder/index.vue b/pages/process-builder/index.vue
index 9597ea8..628b6c8 100644
--- a/pages/process-builder/index.vue
+++ b/pages/process-builder/index.vue
@@ -3270,8 +3270,8 @@ const sendToBack = () => {
                     Basic Properties
                   </h4>
                   
-                  <!-- Node Label -->
-                  <div class="mb-3">
+                  <!-- Node Label (only for process nodes and text annotations, not other shapes) -->
+                  <div v-if="!selectedNodeData.data?.isShape || selectedNodeData.type === 'text-annotation'" class="mb-3">
                     <label class="block text-xs font-medium text-gray-600 mb-1">Label</label>
                     <input
                       v-model="nodeLabel"
@@ -3281,8 +3281,8 @@ const sendToBack = () => {
                     />
                   </div>
 
-                  <!-- Node Description -->
-                  <div class="mb-3">
+                  <!-- Node Description (only for process nodes and text annotations, not other shapes) -->
+                  <div v-if="!selectedNodeData.data?.isShape || selectedNodeData.type === 'text-annotation'" class="mb-3">
                     <label class="block text-xs font-medium text-gray-600 mb-1">Description</label>
                     <textarea
                       v-model="nodeDescription"
diff --git a/stores/processBuilder.js b/stores/processBuilder.js
index b85894b..9ab84f0 100644
--- a/stores/processBuilder.js
+++ b/stores/processBuilder.js
@@ -662,11 +662,11 @@ export const useProcessBuilderStore = defineStore('processBuilder', {
         const newNode = {
           id: node.id || uuidv4(),
           type: node.type,
-          label: node.label || node.data?.label || 'New Node',
+          label: node.label || node.data?.label || '',
           position: node.position || { x: 100, y: 100 },
           data: {
             ...node.data,
-            label: node.data?.label || node.label || 'New Node',
+            label: node.data?.label || node.label || '',
             // Ensure shape is set for new nodes
             shape: node.data?.shape || (node.type === 'gateway' ? 'diamond' : 'rectangle'),
             // Ensure default colors are set for new nodes