154 lines
3.9 KiB
Vue
154 lines
3.9 KiB
Vue
<script setup>
|
|
import { UserPrefStore } from '@/stores/UserPrefStore.js'
|
|
import { Background } from '@vue-flow/background'
|
|
import { Controls } from '@vue-flow/controls'
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core'
|
|
import { MiniMap } from '@vue-flow/minimap'
|
|
import Dialog from 'primevue/dialog'
|
|
import { defineProps, nextTick, onMounted, ref, toRefs } from 'vue'
|
|
import 'vue3-markdown/dist/style.css'
|
|
import ClassNode from './ClassNode.vue'
|
|
import { useLayout } from './useLayout'
|
|
|
|
|
|
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()
|
|
|
|
const nodes = ref(null)
|
|
const edges = ref(null)
|
|
const dark = ref(false)
|
|
const selectionNode = ref([{fullyQualifiedClassName: '', description: '', classname:''}])
|
|
const { graph, layout, previousDirection } = useLayout()
|
|
|
|
const dialogCodeVisible = ref(false)
|
|
|
|
const userPrefStore = UserPrefStore();
|
|
|
|
//66f55e4b2894530b1c154f69
|
|
const props = defineProps({
|
|
changes: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
const { changes } = toRefs(props);
|
|
|
|
onMounted(() => {
|
|
defineNodes()
|
|
})
|
|
|
|
onInit((vueFlowInstance) => {
|
|
vueFlowInstance.fitView()
|
|
})
|
|
|
|
|
|
onNodeClick(({ event, nodes, node }) => {
|
|
console.log(node)
|
|
if(node.type == 'class-node') {
|
|
selectionNode.value = node.data.data
|
|
dialogCodeVisible.value = true
|
|
}
|
|
|
|
})
|
|
|
|
|
|
function layoutGraph(direction) {
|
|
nodes.value = layout(nodes.value, edges.value, direction)
|
|
nextTick(() => {
|
|
fitView()
|
|
})
|
|
}
|
|
|
|
function defineNodes() {
|
|
var tmpNode=[]
|
|
var tmpEdges = []
|
|
var app = { name: userPrefStore.getSelApp.fe_name }
|
|
tmpNode.push({
|
|
id: app.name,
|
|
data: { label: app.name },
|
|
position: { x: 250, y: 0 },
|
|
class: 'light',
|
|
},)
|
|
|
|
changes.value.forEach((change) => {
|
|
var label = change.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
|
|
tmpNode.push({
|
|
id: change.filename,
|
|
data: { label: label },
|
|
position: { x: 250, y: 0 },
|
|
class: 'light',
|
|
})
|
|
|
|
tmpEdges.push({
|
|
id: app.name + change.filename,
|
|
source: app.name,
|
|
target: change.filename,
|
|
})
|
|
|
|
var changes_array = []
|
|
changes.value.forEach((int_change) => {
|
|
if(int_change.filename == change.filename) {
|
|
changes_array.push(int_change)
|
|
}
|
|
})
|
|
|
|
tmpNode.push({
|
|
id: change.classname,
|
|
data: { label: change.classname.split(".").slice(-1)[0] , data: changes_array},
|
|
type: 'class-node',
|
|
position: { x: 250, y: 0 },
|
|
dimension: { width: 200, height: 100 },
|
|
|
|
})
|
|
tmpEdges.push({
|
|
id: change.filename + change.classname,
|
|
source: change.filename,
|
|
target: change.classname,
|
|
})
|
|
|
|
|
|
})
|
|
|
|
nodes.value = tmpNode
|
|
edges.value = tmpEdges
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Class '+ selectionNode[0].classname" class="change-modal" :style="{ width: '90vw', minHeight:'90vh'}">
|
|
<!--<CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>-->
|
|
<CiaMultipleImpactView :changes="selectionNode"></CiaMultipleImpactView>
|
|
</Dialog>
|
|
|
|
<div>
|
|
<VueFlow
|
|
:nodes="nodes"
|
|
:edges="edges"
|
|
:class="{ dark }"
|
|
class="basic-flow"
|
|
:default-viewport="{ zoom: 1.5 }"
|
|
:min-zoom="0.2"
|
|
:max-zoom="4"
|
|
@nodes-initialized="layoutGraph('LR')"
|
|
|
|
>
|
|
|
|
|
|
<template #node-class-node="props">
|
|
<ClassNode v-bind="props" />
|
|
</template>
|
|
|
|
<Background pattern-color="#aaa" :gap="16" />
|
|
|
|
<MiniMap />
|
|
|
|
<Controls position="top-left">
|
|
</Controls>
|
|
</VueFlow>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |