corrad-software/corrad-bp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Process Flow Component Labels for Improved Clarity

Browse Source 
- 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.
This commit is contained in:
Md Afiq Iskandar 2025-07-28 10:36:54 +08:00
parent ee91cd6c56
commit 4668abd062
7 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/process-flow/custom/HexagonShape.vue
View File

@ -36,7 +36,7 @@ const displayDescription = computed(() => {
:style="shapeStyle" :style="shapeStyle"
> >
<div class="custom-node-content" v-if="displayLabel || displayDescription"> <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 class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
</div> </div>
</div> </div>

2
components/process-flow/custom/RectangleShape.vue
View File

@ -45,7 +45,7 @@ const displayDescription = computed(() => {
:style="shapeStyle" :style="shapeStyle"
> >
<div class="shape-content" v-if="displayLabel || displayDescription"> <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 class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
</div> </div>
</div> </div>

2
components/process-flow/custom/SwimlaneHorizontal.vue
View File

@ -45,7 +45,7 @@ const displayDescription = computed(() => {
:style="shapeStyle" :style="shapeStyle"
> >
<div class="shape-content" v-if="displayLabel || displayDescription"> <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 class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
</div> </div>
</div> </div>

2
components/process-flow/custom/SwimlaneVertical.vue
View File

@ -47,7 +47,7 @@ const displayDescription = computed(() => {
:style="shapeStyle" :style="shapeStyle"
> >
<div class="shape-content" v-if="displayLabel || displayDescription"> <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 class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
</div> </div>
</div> </div>

2
components/process-flow/custom/TrapezoidShape.vue
View File

@ -36,7 +36,7 @@ const displayDescription = computed(() => {
:style="shapeStyle" :style="shapeStyle"
> >
<div class="custom-node-content" v-if="displayLabel || displayDescription"> <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 class="shape-description" v-if="displayDescription">{{ displayDescription }}</div>
</div> </div>
</div> </div>

8
pages/process-builder/index.vue
View File

@ -3270,8 +3270,8 @@ const sendToBack = () => {
Basic Properties Basic Properties
</h4> </h4>
<!-- Node Label --> <!-- Node Label (only for process nodes and text annotations, not other shapes) -->
<div class="mb-3"> <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> <label class="block text-xs font-medium text-gray-600 mb-1">Label</label>
<input <input
v-model="nodeLabel" v-model="nodeLabel"
@ -3281,8 +3281,8 @@ const sendToBack = () => {
/> />
</div> </div>
<!-- Node Description --> <!-- Node Description (only for process nodes and text annotations, not other shapes) -->
<div class="mb-3"> <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> <label class="block text-xs font-medium text-gray-600 mb-1">Description</label>
<textarea <textarea
v-model="nodeDescription" v-model="nodeDescription"

4
stores/processBuilder.js
View File

@ -662,11 +662,11 @@ export const useProcessBuilderStore = defineStore('processBuilder', {
const newNode = { const newNode = {
id: node.id || uuidv4(), id: node.id || uuidv4(),
type: node.type, type: node.type,
label: node.label || node.data?.label || 'New Node', label: node.label || node.data?.label || '',
position: node.position || { x: 100, y: 100 }, position: node.position || { x: 100, y: 100 },
data: { data: {
...node.data, ...node.data,
label: node.data?.label || node.label || 'New Node', label: node.data?.label || node.label || '',
// Ensure shape is set for new nodes // Ensure shape is set for new nodes
shape: node.data?.shape || (node.type === 'gateway' ? 'diamond' : 'rectangle'), shape: node.data?.shape || (node.type === 'gateway' ? 'diamond' : 'rectangle'),
// Ensure default colors are set for new nodes // Ensure default colors are set for new nodes