Update package-lock
This commit is contained in:
@@ -1,220 +1,169 @@
|
||||
<template>
|
||||
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Class detail: '+selectionNode.fullyQualifiedClassName" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
|
||||
<SingleClassViewer v-if="dialogCodeVisible" :className="selectionNode.fullyQualifiedClassName" />
|
||||
</Dialog>
|
||||
|
||||
<div>
|
||||
<VueFlow
|
||||
:nodes="nodes"
|
||||
:edges="edges"
|
||||
class=" basic-flow"
|
||||
:default-viewport="{ zoom: 1.5 }"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="4"
|
||||
@nodes-initialized="layoutGraph('LR')"
|
||||
>
|
||||
|
||||
<Dialog v-model:visible="dialogCodeVisible" modal :header="'Class detail: ' + selectionNode.fullyQualifiedClassName" class="change-modal" :style="{ width: '70vw', minHeight: '75vh' }">
|
||||
<SingleClassViewer v-if="dialogCodeVisible" :className="selectionNode.fullyQualifiedClassName" />
|
||||
</Dialog>
|
||||
|
||||
<div>
|
||||
<VueFlow :nodes="nodes" :edges="edges" 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" />
|
||||
<ClassNode v-bind="props" />
|
||||
</template>
|
||||
|
||||
<Background pattern-color="#aaa" :gap="16" />
|
||||
<Background pattern-color="#aaa" :gap="16" />
|
||||
|
||||
<MiniMap />
|
||||
|
||||
<Controls position="top-left">
|
||||
</Controls>
|
||||
</VueFlow>
|
||||
</div>
|
||||
<MiniMap />
|
||||
|
||||
<Controls position="top-left"> </Controls>
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
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 { nextTick, onMounted, ref, toRefs, watch } from 'vue';
|
||||
import ClassNode from './ClassNode.vue';
|
||||
import { useLayout } from './useLayout';
|
||||
|
||||
import axios from 'axios';
|
||||
import { defineProps } from 'vue';
|
||||
import 'vue3-markdown/dist/vue3-markdown.css';
|
||||
|
||||
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 { nextTick, onMounted, ref, toRefs, watch } from 'vue'
|
||||
import ClassNode from './ClassNode.vue'
|
||||
import { useLayout } from './useLayout'
|
||||
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick, fitView } = useVueFlow();
|
||||
|
||||
import axios from 'axios'
|
||||
import { defineProps } from 'vue'
|
||||
import 'vue3-markdown/dist/style.css'
|
||||
const nodes = ref(null);
|
||||
const edges = ref(null);
|
||||
const dark = ref(false);
|
||||
const selectionNode = ref({ fullyQualifiedClassName: '', description: '' });
|
||||
const { graph, layout, previousDirection } = 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: ''})
|
||||
const { graph, layout, previousDirection } = useLayout()
|
||||
|
||||
const dialogCodeVisible = ref(false)
|
||||
const props = defineProps({
|
||||
file: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
application: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const dialogCodeVisible = ref(false);
|
||||
const props = defineProps({ file: { type: String, required: true }, application: { type: String, required: true } });
|
||||
|
||||
const { file } = toRefs(props);
|
||||
const fileDetails = ref(null);
|
||||
const fileDetails = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
//defineNodes()
|
||||
})
|
||||
//defineNodes()
|
||||
});
|
||||
|
||||
watch(() => props.file, (first, second) => {
|
||||
loadFileDetails(first)
|
||||
});
|
||||
watch(
|
||||
() => props.file,
|
||||
(first, second) => {
|
||||
loadFileDetails(first);
|
||||
}
|
||||
);
|
||||
|
||||
onInit((vueFlowInstance) => {
|
||||
vueFlowInstance.fitView()
|
||||
})
|
||||
vueFlowInstance.fitView();
|
||||
});
|
||||
|
||||
function loadFileDetails(filename) {
|
||||
let fileInfo = { filename: filename, applicationName: props.application };
|
||||
|
||||
function loadFileDetails(filename){
|
||||
|
||||
let fileInfo={
|
||||
filename: filename,
|
||||
applicationName: props.application
|
||||
}
|
||||
|
||||
axios.post("/source-module/getFileSimpleInfo",fileInfo).then(response => {
|
||||
fileDetails.value =response.data
|
||||
defineNodes()
|
||||
})
|
||||
axios.post('/source-module/getFileSimpleInfo', fileInfo).then((response) => {
|
||||
fileDetails.value = response.data;
|
||||
defineNodes();
|
||||
});
|
||||
}
|
||||
|
||||
onNodeClick(({ event, nodes, node }) => {
|
||||
console.log(node)
|
||||
if(node.type == 'class-node') {
|
||||
selectionNode.value = node.data.data
|
||||
dialogCodeVisible.value = true
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
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()
|
||||
})
|
||||
nodes.value = layout(nodes.value, edges.value, direction);
|
||||
nextTick(() => {
|
||||
fitView();
|
||||
});
|
||||
}
|
||||
|
||||
function defineNodes() {
|
||||
var tmpNode = [];
|
||||
var tmpEdges = [];
|
||||
var filename = fileDetails.value.filename.split('\\').slice(-1)[0].split('/').slice(-1)[0];
|
||||
|
||||
var tmpNode=[]
|
||||
var tmpEdges=[]
|
||||
var filename = fileDetails.value.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
|
||||
|
||||
tmpNode.push({
|
||||
id: filename,
|
||||
data: { label: filename },
|
||||
position: { x: 250, y: 0 },
|
||||
class: 'light',
|
||||
},)
|
||||
tmpNode.push({ id: filename, data: { label: filename }, position: { x: 250, y: 0 }, class: 'light' });
|
||||
|
||||
fileDetails.value.classes.forEach((c) => {
|
||||
tmpNode.push({
|
||||
id: c.name,
|
||||
data: { label:c.name.split(".").slice(-1)[0] , data:{ fullyQualifiedClassName:c.name} },
|
||||
position: { x: 250, y: 0 },
|
||||
class: 'light',
|
||||
type: 'class-node'
|
||||
})
|
||||
tmpEdges.push({
|
||||
id: filename + c.name,
|
||||
source: filename,
|
||||
target: c.name,
|
||||
})
|
||||
})
|
||||
|
||||
tmpNode.push({ id: c.name, data: { label: c.name.split('.').slice(-1)[0], data: { fullyQualifiedClassName: c.name } }, position: { x: 250, y: 0 }, class: 'light', type: 'class-node' });
|
||||
tmpEdges.push({ id: filename + c.name, source: filename, target: c.name });
|
||||
});
|
||||
|
||||
nodes.value = tmpNode
|
||||
edges.value = tmpEdges
|
||||
layoutGraph('LR')
|
||||
nodes.value = tmpNode;
|
||||
edges.value = tmpEdges;
|
||||
layoutGraph('LR');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@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';
|
||||
|
||||
|
||||
|
||||
.basic-flow{
|
||||
.basic-flow {
|
||||
height: 90vh;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.vue-flow__minimap {
|
||||
transform: scale(75%);
|
||||
transform-origin: bottom right;
|
||||
transform: scale(75%);
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
.basic-flow.dark {
|
||||
background:#2d3748;
|
||||
color:#fffffb
|
||||
background: #2d3748;
|
||||
color: #fffffb;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__node {
|
||||
background:#4a5568;
|
||||
color:#fffffb
|
||||
background: #4a5568;
|
||||
color: #fffffb;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__node.selected {
|
||||
background:#333;
|
||||
box-shadow:0 0 0 2px #2563eb
|
||||
background: #333;
|
||||
box-shadow: 0 0 0 2px #2563eb;
|
||||
}
|
||||
|
||||
.basic-flow .vue-flow__controls {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content:center
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__controls {
|
||||
border:1px solid #FFFFFB
|
||||
border: 1px solid #fffffb;
|
||||
}
|
||||
|
||||
.basic-flow .vue-flow__controls .vue-flow__controls-button {
|
||||
border:none;
|
||||
border-right:1px solid #eee
|
||||
border: none;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
|
||||
background:#4d4d4d
|
||||
background: #4d4d4d;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__edge-textbg {
|
||||
fill:#292524
|
||||
fill: #292524;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__edge-text {
|
||||
fill:#fffffb
|
||||
fill: #fffffb;
|
||||
}
|
||||
|
||||
.vue-flow__node-default {
|
||||
border: 1px solid #292524;
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
@@ -225,7 +174,7 @@ function defineNodes() {
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.vue-flow__node-class-node {
|
||||
@@ -241,6 +190,6 @@ function defineNodes() {
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user