Update package-lock
This commit is contained in:
3729
package-lock.json
generated
3729
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,117 +1,80 @@
|
||||
<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'
|
||||
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/vue3-markdown.css';
|
||||
import ClassNode from './ClassNode.vue';
|
||||
import { useLayout } from './useLayout';
|
||||
|
||||
const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick, fitView } = useVueFlow();
|
||||
|
||||
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 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 dialogCodeVisible = ref(false);
|
||||
|
||||
const userPrefStore = UserPrefStore();
|
||||
|
||||
//66f55e4b2894530b1c154f69
|
||||
const props = defineProps({
|
||||
changes: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
const props = defineProps({ changes: { type: Object, required: true } });
|
||||
const { changes } = toRefs(props);
|
||||
|
||||
onMounted(() => {
|
||||
defineNodes()
|
||||
})
|
||||
defineNodes();
|
||||
});
|
||||
|
||||
onInit((vueFlowInstance) => {
|
||||
vueFlowInstance.fitView()
|
||||
})
|
||||
|
||||
vueFlowInstance.fitView();
|
||||
});
|
||||
|
||||
onNodeClick(({ event, nodes, node }) => {
|
||||
console.log(node)
|
||||
console.log(node);
|
||||
if (node.type == 'class-node') {
|
||||
selectionNode.value = node.data.data
|
||||
dialogCodeVisible.value = true
|
||||
selectionNode.value = node.data.data;
|
||||
dialogCodeVisible.value = true;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
function layoutGraph(direction) {
|
||||
nodes.value = layout(nodes.value, edges.value, direction)
|
||||
nodes.value = layout(nodes.value, edges.value, direction);
|
||||
nextTick(() => {
|
||||
fitView()
|
||||
})
|
||||
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',
|
||||
},)
|
||||
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',
|
||||
})
|
||||
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,
|
||||
})
|
||||
tmpEdges.push({ id: app.name + change.filename, source: app.name, target: change.filename });
|
||||
|
||||
var changes_array = []
|
||||
var changes_array = [];
|
||||
changes.value.forEach((int_change) => {
|
||||
if (int_change.filename == change.filename) {
|
||||
changes_array.push(int_change)
|
||||
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 },
|
||||
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 });
|
||||
});
|
||||
|
||||
})
|
||||
tmpEdges.push({
|
||||
id: change.filename + change.classname,
|
||||
source: change.filename,
|
||||
target: change.classname,
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
nodes.value = tmpNode
|
||||
edges.value = tmpEdges
|
||||
nodes.value = tmpNode;
|
||||
edges.value = tmpEdges;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -121,19 +84,7 @@ function defineNodes() {
|
||||
</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')"
|
||||
|
||||
>
|
||||
|
||||
|
||||
<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>
|
||||
@@ -142,13 +93,9 @@ function defineNodes() {
|
||||
|
||||
<MiniMap />
|
||||
|
||||
<Controls position="top-left">
|
||||
</Controls>
|
||||
<Controls position="top-left"> </Controls>
|
||||
</VueFlow>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -4,17 +4,7 @@
|
||||
</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')"
|
||||
>
|
||||
|
||||
|
||||
<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" />
|
||||
</template>
|
||||
@@ -23,146 +13,105 @@
|
||||
|
||||
<MiniMap />
|
||||
|
||||
<Controls position="top-left">
|
||||
</Controls>
|
||||
<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);
|
||||
|
||||
onMounted(() => {
|
||||
//defineNodes()
|
||||
})
|
||||
|
||||
watch(() => props.file, (first, second) => {
|
||||
loadFileDetails(first)
|
||||
});
|
||||
|
||||
onInit((vueFlowInstance) => {
|
||||
vueFlowInstance.fitView()
|
||||
})
|
||||
watch(
|
||||
() => props.file,
|
||||
(first, second) => {
|
||||
loadFileDetails(first);
|
||||
}
|
||||
);
|
||||
|
||||
onInit((vueFlowInstance) => {
|
||||
vueFlowInstance.fitView();
|
||||
});
|
||||
|
||||
function loadFileDetails(filename) {
|
||||
let fileInfo = { filename: filename, applicationName: props.application };
|
||||
|
||||
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)
|
||||
console.log(node);
|
||||
if (node.type == 'class-node') {
|
||||
selectionNode.value = node.data.data
|
||||
dialogCodeVisible.value = true
|
||||
selectionNode.value = node.data.data;
|
||||
dialogCodeVisible.value = true;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
function layoutGraph(direction) {
|
||||
nodes.value = layout(nodes.value, edges.value, direction)
|
||||
nodes.value = layout(nodes.value, edges.value, direction);
|
||||
nextTick(() => {
|
||||
fitView()
|
||||
})
|
||||
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 {
|
||||
height: 90vh;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.vue-flow__minimap {
|
||||
@@ -172,44 +121,44 @@ function defineNodes() {
|
||||
|
||||
.basic-flow.dark {
|
||||
background: #2d3748;
|
||||
color:#fffffb
|
||||
color: #fffffb;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__node {
|
||||
background: #4a5568;
|
||||
color:#fffffb
|
||||
color: #fffffb;
|
||||
}
|
||||
|
||||
.basic-flow.dark .vue-flow__node.selected {
|
||||
background: #333;
|
||||
box-shadow:0 0 0 2px #2563eb
|
||||
box-shadow: 0 0 0 2px #2563eb;
|
||||
}
|
||||
|
||||
.basic-flow .vue-flow__controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content:center
|
||||
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-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 {
|
||||
@@ -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