Md Afiq Iskandar
85af1a0e97
- Refactored the ProcessFlowCanvas.vue component to improve code readability and maintainability, including consistent formatting and enhanced logging for debugging. - Introduced a new test page (test.vue) featuring a VueFlow component to facilitate testing of flow functionalities with sample nodes and edges. - Wrapped the VueFlow component in a <client-only> tag in both ProcessFlowCanvas.vue and the new test.vue to prevent server-side rendering issues. - Updated styles and structure in the process builder index.vue to ensure proper rendering and maintain a clean layout.
78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div class="vue-flow-test">
|
|
<h3>Vue Flow Test Component</h3>
|
|
<div class="test-container">
|
|
<client-only>
|
|
<VueFlow
|
|
:nodes="testNodes"
|
|
:edges="testEdges"
|
|
class="test-flow"
|
|
style="height: 400px"
|
|
>
|
|
<Background />
|
|
<Controls />
|
|
</VueFlow>
|
|
</client-only>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { VueFlow } from "@vue-flow/core";
|
|
import { Background } from "@vue-flow/background";
|
|
import { Controls } from "@vue-flow/controls";
|
|
import '@vue-flow/core/dist/style.css';
|
|
import '@vue-flow/core/dist/theme-default.css';
|
|
import '@vue-flow/controls/dist/style.css';
|
|
import '@vue-flow/minimap/dist/style.css';
|
|
|
|
console.log("🧪 VueFlowTest component loaded");
|
|
|
|
const testNodes = ref([
|
|
{
|
|
id: "test-1",
|
|
type: "default",
|
|
position: { x: 100, y: 100 },
|
|
data: { label: "Test Node 1" },
|
|
},
|
|
{
|
|
id: "test-2",
|
|
type: "default",
|
|
position: { x: 300, y: 100 },
|
|
data: { label: "Test Node 2" },
|
|
},
|
|
]);
|
|
|
|
const testEdges = ref([
|
|
{
|
|
id: "test-edge-1",
|
|
source: "test-1",
|
|
target: "test-2",
|
|
},
|
|
]);
|
|
|
|
console.log("🧪 Test nodes:", testNodes.value);
|
|
console.log("🧪 Test edges:", testEdges.value);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.vue-flow-test {
|
|
padding: 20px;
|
|
border: 2px solid #ccc;
|
|
margin: 20px;
|
|
}
|
|
|
|
.test-container {
|
|
width: 100%;
|
|
height: 450px;
|
|
border: 1px solid #ddd;
|
|
position: relative;
|
|
}
|
|
|
|
.test-flow {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|