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

@@ -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>

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>

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>

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>

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>

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"

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