Compare commits
2 Commits
cb8dd97c4a
...
042333ed4b
| Author | SHA1 | Date | |
|---|---|---|---|
|
042333ed4b | ||
|
|
215cb69313 |
3
eda/edaf/.browserslistrc
Normal file
3
eda/edaf/.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
5
eda/edaf/.editorconfig
Normal file
5
eda/edaf/.editorconfig
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
35
eda/edaf/.eslintrc.js
Normal file
35
eda/edaf/.eslintrc.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
'@vue/standard',
|
||||||
|
'@vue/typescript/recommended'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 2020
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'space-before-function-paren': 'off',
|
||||||
|
'no-callback-literal': 0,
|
||||||
|
'arrow-parens': 0,
|
||||||
|
// allow async-await
|
||||||
|
'no-unused-vars': 0,
|
||||||
|
'generator-star-spacing': 'off',
|
||||||
|
'spaced-comment': 0,
|
||||||
|
'object-curly-spacing': 0,
|
||||||
|
'@typescript-eslint/no-empty-function': 0,
|
||||||
|
'@typescript-eslint/no-this-alias': 0,
|
||||||
|
'@typescript-eslint/no-var-requires': 0,
|
||||||
|
'prefer-const': 0,
|
||||||
|
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
|
||||||
|
camelcase: 0,
|
||||||
|
// 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
'no-undef-init': 0,
|
||||||
|
'no-useless-call': 0,
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
26
eda/edaf/.gitignore
vendored
26
eda/edaf/.gitignore
vendored
@ -1,5 +1,23 @@
|
|||||||
node_modules
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
node_modules
|
||||||
dist-ssr
|
/dist
|
||||||
*.local
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
24
eda/edaf/README.md
Normal file
24
eda/edaf/README.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# edaf
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
yarn lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
5
eda/edaf/babel.config.js
Normal file
5
eda/edaf/babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,13 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Vite App</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,15 +1,46 @@
|
|||||||
{
|
{
|
||||||
"name": "edaf",
|
"name": "edaf",
|
||||||
"version": "0.0.0",
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vite build"
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue": "^3.0.4"
|
"@antv/g6": "^4.1.1",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"d3-force": "^2.1.1",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vuetify": "^2.4.2",
|
||||||
|
"vuex": "^3.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "^1.0.0-rc.13",
|
"@types/d3-force": "^2.1.0",
|
||||||
"@vue/compiler-sfc": "^3.0.4"
|
"@typescript-eslint/eslint-plugin": "^2.33.0",
|
||||||
|
"@typescript-eslint/parser": "^2.33.0",
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-typescript": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/eslint-config-standard": "^5.1.2",
|
||||||
|
"@vue/eslint-config-typescript": "^5.0.2",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-import": "^2.20.2",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
|
"eslint-plugin-standard": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"less": "^3.0.4",
|
||||||
|
"less-loader": "^5.0.0",
|
||||||
|
"sass": "^1.19.0",
|
||||||
|
"sass-loader": "^8.0.0",
|
||||||
|
"typescript": "~3.9.3",
|
||||||
|
"vue-cli-plugin-vuetify": "~2.0.9",
|
||||||
|
"vue-template-compiler": "^2.6.11",
|
||||||
|
"vuetify-loader": "^1.3.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 6.9 KiB |
19
eda/edaf/public/index.html
Normal file
19
eda/edaf/public/index.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,15 +1,270 @@
|
|||||||
|
<style>
|
||||||
|
.info-div {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<img alt="Vue logo" src="./assets/logo.png" />
|
<v-app>
|
||||||
<HelloWorld msg="Hello Vue 3.0 + Vite" />
|
<v-app-bar
|
||||||
|
app
|
||||||
|
color="primary"
|
||||||
|
dark
|
||||||
|
dense
|
||||||
|
>
|
||||||
|
<v-app-bar-nav-icon>
|
||||||
|
<v-avatar size="20">
|
||||||
|
<img
|
||||||
|
src="/favicon.ico"
|
||||||
|
alt="veypi"
|
||||||
|
>
|
||||||
|
</v-avatar>
|
||||||
|
</v-app-bar-nav-icon>
|
||||||
|
<v-toolbar-title>
|
||||||
|
{{ $store.state.algorithms[$store.state.algorithm].text }}
|
||||||
|
</v-toolbar-title>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-text-field
|
||||||
|
v-model="search"
|
||||||
|
append-icon="mdi-magnify"
|
||||||
|
label="Search"
|
||||||
|
single-line
|
||||||
|
hide-details
|
||||||
|
></v-text-field>
|
||||||
|
<v-icon class="mr-5" @click="info=!info">mdi-information</v-icon>
|
||||||
|
<v-icon class="mr-5" @click="sync">mdi-autorenew</v-icon>
|
||||||
|
<v-btn color="warning" class="mr-5" v-if="$store.state.algorithm===0" @click="$refs.core.lay2()">计算</v-btn>
|
||||||
|
<v-icon @click="dialog=!dialog">mdi-cog</v-icon>
|
||||||
|
</v-app-bar>
|
||||||
|
<v-main>
|
||||||
|
<v-system-bar>
|
||||||
|
<v-row class="text-center">
|
||||||
|
<v-col>边数: {{ $store.state.edgesNum }}</v-col>
|
||||||
|
<v-col>节点数: {{ $store.state.nodesNum }}</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-system-bar>
|
||||||
|
<router-view ref="core" style="height: 100%;width: 100%"></router-view>
|
||||||
|
</v-main>
|
||||||
|
<div class="info-div" v-if="info">
|
||||||
|
<v-data-table
|
||||||
|
class="mx-auto"
|
||||||
|
:headers="headers"
|
||||||
|
:items="nodeList"
|
||||||
|
:search="search"
|
||||||
|
disable-sort
|
||||||
|
dense
|
||||||
|
height="300px"
|
||||||
|
style="background: rgba(0,0,0,0.2);"
|
||||||
|
>
|
||||||
|
<template v-slot:item.x="{ item }">
|
||||||
|
{{ item.x.toFixed(2) }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.y="{ item }">
|
||||||
|
{{ item.y.toFixed(2) }}
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.act="{ item }">
|
||||||
|
<v-btn v-if="item.color === freeC " color="warning" @click="lock(item)">固定</v-btn>
|
||||||
|
<v-btn v-else color="primary" @click="unlock(item)">解除</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</div>
|
||||||
|
<v-dialog
|
||||||
|
v-model="dialog"
|
||||||
|
transition="dialog-bottom-transition"
|
||||||
|
max-width="600"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-system-bar
|
||||||
|
color="success"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
设置
|
||||||
|
</v-system-bar>
|
||||||
|
<v-card-text class="mt-10">
|
||||||
|
<v-form>
|
||||||
|
<v-select v-model="$store.state.algorithm" :items="$store.state.algorithms" label="算法"></v-select>
|
||||||
|
<v-slider
|
||||||
|
label="节点数量"
|
||||||
|
class="mt-10"
|
||||||
|
v-model="$store.state.nodesNum"
|
||||||
|
thumb-label="always"
|
||||||
|
:max="$store.state.algorithm ? 100: 10"
|
||||||
|
:min="5"
|
||||||
|
></v-slider>
|
||||||
|
<v-slider
|
||||||
|
:max="$store.state.nodesNum * 5"
|
||||||
|
:min="$store.state.nodesNum * (1 + $store.state.algorithm) - 1" label="边数量" class="mt-10"
|
||||||
|
v-model="$store.state.edgesNum" thumb-label="always"></v-slider>
|
||||||
|
</v-form>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
export default {
|
function uniform2NormalDistribution() {
|
||||||
name: 'App',
|
let sum = 0.0
|
||||||
components: {
|
for (let i = 0; i < 12; i++) {
|
||||||
HelloWorld
|
sum = sum + Math.random(1)
|
||||||
}
|
}
|
||||||
|
return sum - 6.0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getNumberInNormalDistribution(mean, stdDev) {
|
||||||
|
return mean + (uniform2NormalDistribution() * stdDev)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
name: 'App',
|
||||||
|
|
||||||
|
components: {},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
freeC: '#5cf43d',
|
||||||
|
search: '',
|
||||||
|
headers: [
|
||||||
|
{
|
||||||
|
text: '节点id',
|
||||||
|
align: 'start',
|
||||||
|
width: '60px',
|
||||||
|
value: 'id'
|
||||||
|
},
|
||||||
|
{text: 'x', value: 'x', width: 60},
|
||||||
|
{text: 'y', value: 'y', width: 60},
|
||||||
|
{text: 'act', value: 'act'}
|
||||||
|
],
|
||||||
|
dialog: false,
|
||||||
|
info: false
|
||||||
|
//
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
nodeList() {
|
||||||
|
return Object.keys(this.$store.state.nodes).map(v => {
|
||||||
|
return this.$store.state.nodes[v]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
lock(n) {
|
||||||
|
n.color = 'red'
|
||||||
|
n.fx = n.x
|
||||||
|
n.fy = n.y
|
||||||
|
const graph = this.$refs.core.graph
|
||||||
|
graph.updateItem(n.id, {color: n.color})
|
||||||
|
},
|
||||||
|
unlock(n) {
|
||||||
|
n.color = this.freeC
|
||||||
|
n.fx = null
|
||||||
|
n.fy = null
|
||||||
|
this.$refs.core.graph.updateItem(n.id, {color: n.color})
|
||||||
|
},
|
||||||
|
sync() {
|
||||||
|
const edges = {}
|
||||||
|
const nodes = {}
|
||||||
|
for (let i = 0; i < this.$store.state.nodesNum; i++) {
|
||||||
|
nodes['n' + i] = {
|
||||||
|
label: 'n' + i,
|
||||||
|
id: 'n' + i,
|
||||||
|
// 随机布局
|
||||||
|
color: this.freeC,
|
||||||
|
x: i * Math.random() * 100,
|
||||||
|
y: i * Math.random() * 100,
|
||||||
|
size: Math.floor(Math.random() * 20) + 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// nodes.n0.color = 'red'
|
||||||
|
// nodes.n0.fx = 100
|
||||||
|
// nodes.n0.fy = 175
|
||||||
|
// nodes.n0.x = 100
|
||||||
|
// nodes.n0.y = 175
|
||||||
|
// nodes.n1.color = 'red'
|
||||||
|
// nodes.n1.fx = 200
|
||||||
|
// nodes.n1.fy = 225
|
||||||
|
// nodes.n1.x = 200
|
||||||
|
// nodes.n1.y = 225
|
||||||
|
// edges['0-2'] = {
|
||||||
|
// id: '0-2',
|
||||||
|
// source: 'n0',
|
||||||
|
// target: 'n2',
|
||||||
|
// value: 1
|
||||||
|
// }
|
||||||
|
// edges['2-3'] = {
|
||||||
|
// id: '2-3',
|
||||||
|
// source: 'n2',
|
||||||
|
// target: 'n3',
|
||||||
|
// value: 1
|
||||||
|
// }
|
||||||
|
// edges['3-4'] = {
|
||||||
|
// id: '3-4',
|
||||||
|
// source: 'n3',
|
||||||
|
// target: 'n4',
|
||||||
|
// value: 1
|
||||||
|
// }
|
||||||
|
// edges['4-1'] = {
|
||||||
|
// id: '4-1',
|
||||||
|
// source: 'n4',
|
||||||
|
// target: 'n1',
|
||||||
|
// value: 1
|
||||||
|
// }
|
||||||
|
let iter = 1
|
||||||
|
for (let i = 0; i < this.$store.state.nodesNum; i++) {
|
||||||
|
if (Object.keys(edges).length >= this.$store.state.edgesNum) {
|
||||||
|
this.$store.state.edges = edges
|
||||||
|
this.$store.state.nodes = nodes
|
||||||
|
this.$refs.core.loaddata()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let j = i
|
||||||
|
while (i === j) {
|
||||||
|
j = Math.floor(Math.random() * this.$store.state.nodesNum)
|
||||||
|
}
|
||||||
|
let ni = i
|
||||||
|
if (i > j) {
|
||||||
|
ni = j
|
||||||
|
j = i
|
||||||
|
}
|
||||||
|
const v = Math.abs(Math.floor(getNumberInNormalDistribution(4, 20)))
|
||||||
|
edges[ni + '-' + j] = {
|
||||||
|
id: ni + '-' + j,
|
||||||
|
source: 'n' + ni,
|
||||||
|
target: 'n' + j,
|
||||||
|
value: v
|
||||||
|
}
|
||||||
|
}
|
||||||
|
while (iter < 10) {
|
||||||
|
iter = iter + 1
|
||||||
|
for (let i = 0; i < this.$store.state.nodesNum; i++) {
|
||||||
|
for (let j = i + 1; j < this.$store.state.nodesNum; j++) {
|
||||||
|
// const v = Math.floor(Math.random() * 10)
|
||||||
|
const v = Math.floor(getNumberInNormalDistribution(4, 20))
|
||||||
|
if (v > 0) {
|
||||||
|
const id = i + '-' + j
|
||||||
|
edges[id] = {
|
||||||
|
id: id,
|
||||||
|
source: 'n' + i,
|
||||||
|
target: 'n' + j,
|
||||||
|
value: v
|
||||||
|
// label: v
|
||||||
|
}
|
||||||
|
if (Object.keys(edges).length >= this.$store.state.edgesNum) {
|
||||||
|
this.$store.state.edges = edges
|
||||||
|
this.$store.state.nodes = nodes
|
||||||
|
this.$refs.core.loaddata()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.sync()
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
BIN
eda/edaf/src/assets/favicon.ico
Normal file
BIN
eda/edaf/src/assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,19 +1,153 @@
|
|||||||
<template>
|
<template>
|
||||||
<h1>{{ msg }}</h1>
|
<v-container>
|
||||||
<button @click="count++">count is: {{ count }}</button>
|
<v-row class="text-center">
|
||||||
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
|
<v-col cols="12">
|
||||||
|
<v-img
|
||||||
|
:src="require('../assets/logo.svg')"
|
||||||
|
class="my-3"
|
||||||
|
contain
|
||||||
|
height="200"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col class="mb-4">
|
||||||
|
<h1 class="display-2 font-weight-bold mb-3">
|
||||||
|
Welcome to Vuetify
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p class="subheading font-weight-regular">
|
||||||
|
For help and collaboration with other Vuetify developers,
|
||||||
|
<br>please join our online
|
||||||
|
<a
|
||||||
|
href="https://community.vuetifyjs.com"
|
||||||
|
target="_blank"
|
||||||
|
>Discord Community</a>
|
||||||
|
</p>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
class="mb-5"
|
||||||
|
cols="12"
|
||||||
|
>
|
||||||
|
<h2 class="headline font-weight-bold mb-3">
|
||||||
|
What's next?
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<v-row justify="center">
|
||||||
|
<a
|
||||||
|
v-for="(next, i) in whatsNext"
|
||||||
|
:key="i"
|
||||||
|
:href="next.href"
|
||||||
|
class="subheading mx-3"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ next.text }}
|
||||||
|
</a>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
class="mb-5"
|
||||||
|
cols="12"
|
||||||
|
>
|
||||||
|
<h2 class="headline font-weight-bold mb-3">
|
||||||
|
Important Links
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<v-row justify="center">
|
||||||
|
<a
|
||||||
|
v-for="(link, i) in importantLinks"
|
||||||
|
:key="i"
|
||||||
|
:href="link.href"
|
||||||
|
class="subheading mx-3"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ link.text }}
|
||||||
|
</a>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
class="mb-5"
|
||||||
|
cols="12"
|
||||||
|
>
|
||||||
|
<h2 class="headline font-weight-bold mb-3">
|
||||||
|
Ecosystem
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<v-row justify="center">
|
||||||
|
<a
|
||||||
|
v-for="(eco, i) in ecosystem"
|
||||||
|
:key="i"
|
||||||
|
:href="eco.href"
|
||||||
|
class="subheading mx-3"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ eco.text }}
|
||||||
|
</a>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
export default {
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
name: 'HelloWorld',
|
name: 'HelloWorld',
|
||||||
props: {
|
|
||||||
msg: String
|
data: () => ({
|
||||||
},
|
ecosystem: [
|
||||||
data() {
|
{
|
||||||
return {
|
text: 'vuetify-loader',
|
||||||
count: 0
|
href: 'https://github.com/vuetifyjs/vuetify-loader'
|
||||||
}
|
},
|
||||||
}
|
{
|
||||||
}
|
text: 'github',
|
||||||
|
href: 'https://github.com/vuetifyjs/vuetify'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'awesome-vuetify',
|
||||||
|
href: 'https://github.com/vuetifyjs/awesome-vuetify'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
importantLinks: [
|
||||||
|
{
|
||||||
|
text: 'Documentation',
|
||||||
|
href: 'https://vuetifyjs.com'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Chat',
|
||||||
|
href: 'https://community.vuetifyjs.com'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Made with Vuetify',
|
||||||
|
href: 'https://madewithvuejs.com/vuetify'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Twitter',
|
||||||
|
href: 'https://twitter.com/vuetifyjs'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Articles',
|
||||||
|
href: 'https://medium.com/vuetify'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
whatsNext: [
|
||||||
|
{
|
||||||
|
text: 'Explore components',
|
||||||
|
href: 'https://vuetifyjs.com/components/api-explorer'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Select a layout',
|
||||||
|
href: 'https://vuetifyjs.com/getting-started/pre-made-layouts'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Frequently Asked Questions',
|
||||||
|
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
189
eda/edaf/src/g6/force.ts
Normal file
189
eda/edaf/src/g6/force.ts
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
const d3Force = require('d3-force')
|
||||||
|
|
||||||
|
const forceLayout = {
|
||||||
|
tick: () => {
|
||||||
|
},
|
||||||
|
center: [0, 0],
|
||||||
|
nodeStrength: null,
|
||||||
|
edgeStrength: null,
|
||||||
|
preventOverlap: false,
|
||||||
|
nodeSize: undefined,
|
||||||
|
nodeSpacing: undefined,
|
||||||
|
linkDistance: 50,
|
||||||
|
forceSimulation: null,
|
||||||
|
alphaDecay: 0.028,
|
||||||
|
alphaMin: 0.001,
|
||||||
|
alpha: 0.3,
|
||||||
|
collideStrength: 1,
|
||||||
|
onLayoutEnd: function () {
|
||||||
|
},
|
||||||
|
getDefaultCfg() {
|
||||||
|
return {
|
||||||
|
center: [0, 0],
|
||||||
|
nodeStrength: null,
|
||||||
|
edgeStrength: null,
|
||||||
|
preventOverlap: false,
|
||||||
|
nodeSize: undefined,
|
||||||
|
nodeSpacing: undefined,
|
||||||
|
linkDistance: 50,
|
||||||
|
forceSimulation: null,
|
||||||
|
alphaDecay: 0.028,
|
||||||
|
alphaMin: 0.001,
|
||||||
|
alpha: 0.3,
|
||||||
|
collideStrength: 1,
|
||||||
|
onLayoutEnd: function () {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 初始化
|
||||||
|
* @param {Object} data 数据
|
||||||
|
*/
|
||||||
|
init(data) {
|
||||||
|
console.log('init')
|
||||||
|
const self = this
|
||||||
|
self.nodes = data.nodes || []
|
||||||
|
const edges = data.edges || []
|
||||||
|
self.edges = edges.map(function (edge) {
|
||||||
|
const res = {}
|
||||||
|
const expectKeys = ['targetNode', 'sourceNode', 'startPoint', 'endPoint']
|
||||||
|
Object.keys(edge).forEach(function (key) {
|
||||||
|
if (!(expectKeys.indexOf(key) > -1)) {
|
||||||
|
res[key] = edge[key]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return res
|
||||||
|
})
|
||||||
|
self.ticking = false
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 执行布局
|
||||||
|
*/
|
||||||
|
execute(reloadData: any) {
|
||||||
|
console.log('execute')
|
||||||
|
const self = this
|
||||||
|
const nodes = self.nodes
|
||||||
|
const edges = self.edges
|
||||||
|
// 如果正在布局，忽略布局请求
|
||||||
|
if (self.ticking) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let simulation = self.forceSimulation
|
||||||
|
const alphaMin = self.alphaMin
|
||||||
|
const alphaDecay = self.alphaDecay
|
||||||
|
const alpha = self.alpha
|
||||||
|
if (!simulation) {
|
||||||
|
try {
|
||||||
|
// 定义节点的力
|
||||||
|
const nodeForce = d3Force.forceManyBody()
|
||||||
|
if (self.nodeStrength) {
|
||||||
|
nodeForce.strength(self.nodeStrength)
|
||||||
|
}
|
||||||
|
simulation = d3Force.forceSimulation().nodes(nodes)
|
||||||
|
simulation
|
||||||
|
.force('center', d3Force.forceCenter(self.center[0], self.center[1]))
|
||||||
|
.force('charge', nodeForce)
|
||||||
|
.alpha(alpha)
|
||||||
|
.alphaDecay(alphaDecay)
|
||||||
|
.alphaMin(alphaMin)
|
||||||
|
if (self.preventOverlap) {
|
||||||
|
self.overlapProcess(simulation)
|
||||||
|
}
|
||||||
|
// 如果有边，定义边的力
|
||||||
|
if (edges) {
|
||||||
|
// d3 的 forceLayout 会重新生成边的数据模型，为了避免污染源数据
|
||||||
|
const edgeForce = d3Force
|
||||||
|
.forceLink()
|
||||||
|
.id(function (d) {
|
||||||
|
return d.id
|
||||||
|
})
|
||||||
|
.links(edges)
|
||||||
|
if (self.edgeStrength) {
|
||||||
|
edgeForce.strength(self.edgeStrength)
|
||||||
|
}
|
||||||
|
if (self.linkDistance) {
|
||||||
|
edgeForce.distance(self.linkDistance)
|
||||||
|
}
|
||||||
|
self.edgeForce = edgeForce
|
||||||
|
simulation.force('link', edgeForce)
|
||||||
|
}
|
||||||
|
simulation
|
||||||
|
.on('tick', function () {
|
||||||
|
self.tick()
|
||||||
|
})
|
||||||
|
.on('end', function () {
|
||||||
|
self.ticking = false
|
||||||
|
if (self.onLayoutEnd) {
|
||||||
|
self.onLayoutEnd()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
self.ticking = true
|
||||||
|
self.forceSimulation = simulation
|
||||||
|
self.ticking = true
|
||||||
|
} catch (e) {
|
||||||
|
self.ticking = false
|
||||||
|
console.warn(e)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (reloadData) {
|
||||||
|
simulation.nodes(nodes)
|
||||||
|
if (edges && self.edgeForce) {
|
||||||
|
self.edgeForce.links(edges)
|
||||||
|
} else if (edges && !self.edgeForce) {
|
||||||
|
// d3 的 forceLayout 会重新生成边的数据模型，为了避免污染源数据
|
||||||
|
const edgeForce = d3Force
|
||||||
|
.forceLink()
|
||||||
|
.id(function (d) {
|
||||||
|
return d.id
|
||||||
|
})
|
||||||
|
.links(edges)
|
||||||
|
if (self.edgeStrength) {
|
||||||
|
edgeForce.strength(self.edgeStrength)
|
||||||
|
}
|
||||||
|
if (self.linkDistance) {
|
||||||
|
edgeForce.distance(self.linkDistance)
|
||||||
|
}
|
||||||
|
self.edgeForce = edgeForce
|
||||||
|
simulation.force('link', edgeForce)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (self.preventOverlap) {
|
||||||
|
self.overlapProcess(simulation)
|
||||||
|
}
|
||||||
|
simulation.alpha(alpha).restart()
|
||||||
|
this.ticking = true
|
||||||
|
}
|
||||||
|
// TODO
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 根据传入的数据进行布局
|
||||||
|
* @param {Object} data 数据
|
||||||
|
*/
|
||||||
|
layout(data) {
|
||||||
|
console.log('layout')
|
||||||
|
this.init(data)
|
||||||
|
this.execute()
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 更新布局配置，但不执行布局
|
||||||
|
* @param {Object} cfg 需要更新的配置项
|
||||||
|
*/
|
||||||
|
updateCfg(cfg) {
|
||||||
|
console.log('update cfg')
|
||||||
|
const self = this
|
||||||
|
if (self.ticking) {
|
||||||
|
self.forceSimulation.stop()
|
||||||
|
self.ticking = false
|
||||||
|
}
|
||||||
|
self.forceSimulation = null
|
||||||
|
Object.assign(self, cfg)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 销毁
|
||||||
|
*/
|
||||||
|
destroy() {
|
||||||
|
console.log('destroy')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default forceLayout
|
||||||
6
eda/edaf/src/g6/index.ts
Normal file
6
eda/edaf/src/g6/index.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import G6 from '@antv/g6'
|
||||||
|
import forceLayout from '@/g6/force'
|
||||||
|
|
||||||
|
G6.registerLayout('forceLayout', forceLayout)
|
||||||
|
|
||||||
|
export default G6
|
||||||
@ -1,8 +0,0 @@
|
|||||||
#app {
|
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
133
eda/edaf/src/libs/index.js
Normal file
133
eda/edaf/src/libs/index.js
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
function multiply(a, b) {
|
||||||
|
// 相乘约束
|
||||||
|
if (a[0].length !== b.length) {
|
||||||
|
throw new Error()
|
||||||
|
}
|
||||||
|
let m = a.length
|
||||||
|
let p = a[0].length
|
||||||
|
let n = b[0].length
|
||||||
|
|
||||||
|
// 初始化 m*n 全 0 二维数组
|
||||||
|
let c = new Array(m).fill(0).map(arr => new Array(n).fill(0))
|
||||||
|
|
||||||
|
for (let i = 0; i < m; i++) {
|
||||||
|
for (let j = 0; j < n; j++) {
|
||||||
|
for (let k = 0; k < p; k++) {
|
||||||
|
c[i][j] += a[i][k] * b[k][j]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return c
|
||||||
|
}
|
||||||
|
|
||||||
|
function det(square) {
|
||||||
|
// 方阵约束
|
||||||
|
if (square.length !== square[0].length) {
|
||||||
|
throw new Error()
|
||||||
|
}
|
||||||
|
// 方阵阶数
|
||||||
|
let n = square.length
|
||||||
|
|
||||||
|
let result = 0
|
||||||
|
if (n > 3) {
|
||||||
|
// n 阶
|
||||||
|
for (let column = 0; column < n; column++) {
|
||||||
|
// 去掉第 0 行第 column 列的矩阵
|
||||||
|
let matrix = new Array(n - 1).fill(0).map(arr => new Array(n - 1).fill(0))
|
||||||
|
for (let i = 0; i < n - 1; i++) {
|
||||||
|
for (let j = 0; j < n - 1; j++) {
|
||||||
|
if (j < column) {
|
||||||
|
matrix[i][j] = square[i + 1][j]
|
||||||
|
} else {
|
||||||
|
matrix[i][j] = square[i + 1][j + 1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
result += square[0][column] * Math.pow(-1, 0 + column) * det(matrix)
|
||||||
|
}
|
||||||
|
} else if (n === 3) {
|
||||||
|
// 3 阶
|
||||||
|
result = square[0][0] * square[1][1] * square[2][2] +
|
||||||
|
square[0][1] * square[1][2] * square[2][0] +
|
||||||
|
square[0][2] * square[1][0] * square[2][1] -
|
||||||
|
square[0][2] * square[1][1] * square[2][0] -
|
||||||
|
square[0][1] * square[1][0] * square[2][2] -
|
||||||
|
square[0][0] * square[1][2] * square[2][1]
|
||||||
|
} else if (n === 2) {
|
||||||
|
// 2 阶
|
||||||
|
result = square[0][0] * square[1][1] - square[0][1] * square[1][0]
|
||||||
|
} else if (n === 1) {
|
||||||
|
// 1 阶
|
||||||
|
result = square[0][0]
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
function transpose(matrix) {
|
||||||
|
let result = new Array(matrix.length).fill(0).map(arr => new Array(matrix[0].length).fill(0))
|
||||||
|
for (let i = 0; i < result.length; i++) {
|
||||||
|
for (let j = 0; j < result[0].length; j++) {
|
||||||
|
result[i][j] = matrix[j][i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
function adjoint(square) {
|
||||||
|
// 方阵约束
|
||||||
|
if (square[0].length !== square.length) {
|
||||||
|
throw new Error()
|
||||||
|
}
|
||||||
|
|
||||||
|
let n = square.length
|
||||||
|
|
||||||
|
let result = new Array(n).fill(0).map(arr => new Array(n).fill(0))
|
||||||
|
for (let row = 0; row < n; row++) {
|
||||||
|
for (let column = 0; column < n; column++) {
|
||||||
|
// 去掉第 row 行第 column 列的矩阵
|
||||||
|
let matrix = []
|
||||||
|
for (let i = 0; i < square.length; i++) {
|
||||||
|
if (i !== row) {
|
||||||
|
let arr = []
|
||||||
|
for (let j = 0; j < square.length; j++) {
|
||||||
|
if (j !== column) {
|
||||||
|
arr.push(square[i][j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
matrix.push(arr)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
result[row][column] = Math.pow(-1, row + column) * det(matrix)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return transpose(result)
|
||||||
|
}
|
||||||
|
|
||||||
|
function inv(square) {
|
||||||
|
if (square[0].length !== square.length) {
|
||||||
|
throw new Error()
|
||||||
|
}
|
||||||
|
let detValue = det(square)
|
||||||
|
let result = adjoint(square)
|
||||||
|
|
||||||
|
for (let i = 0; i < result.length; i++) {
|
||||||
|
for (let j = 0; j < result.length; j++) {
|
||||||
|
result[i][j] /= detValue
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyM(m, xs, xe, ys, ye) {
|
||||||
|
let n = []
|
||||||
|
for (let i = xs; i < xe; i++) {
|
||||||
|
n.push([])
|
||||||
|
for (let j = ys; j < ye; j++) {
|
||||||
|
n[i - xs].push(m[i][j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return n
|
||||||
|
}
|
||||||
|
|
||||||
|
export { inv, multiply, copyM }
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import App from './App.vue'
|
|
||||||
import './index.css'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
|
||||||
14
eda/edaf/src/main.ts
Normal file
14
eda/edaf/src/main.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import vuetify from './plugins/vuetify'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
vuetify,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
7
eda/edaf/src/plugins/vuetify.ts
Normal file
7
eda/edaf/src/plugins/vuetify.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuetify from 'vuetify/lib/framework'
|
||||||
|
|
||||||
|
Vue.use(Vuetify)
|
||||||
|
|
||||||
|
export default new Vuetify({
|
||||||
|
})
|
||||||
27
eda/edaf/src/router/index.ts
Normal file
27
eda/edaf/src/router/index.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter, { RouteConfig } from 'vue-router'
|
||||||
|
import Home from '../views/Home.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes: Array<RouteConfig> = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'About',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
13
eda/edaf/src/shims-tsx.d.ts
vendored
Normal file
13
eda/edaf/src/shims-tsx.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import Vue, { VNode } from 'vue'
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace JSX {
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
interface Element extends VNode {}
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
interface ElementClass extends Vue {}
|
||||||
|
interface IntrinsicElements {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4
eda/edaf/src/shims-vue.d.ts
vendored
Normal file
4
eda/edaf/src/shims-vue.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import Vue from 'vue'
|
||||||
|
export default Vue
|
||||||
|
}
|
||||||
4
eda/edaf/src/shims-vuetify.d.ts
vendored
Normal file
4
eda/edaf/src/shims-vuetify.d.ts
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
declare module 'vuetify/lib/framework' {
|
||||||
|
import Vuetify from 'vuetify'
|
||||||
|
export default Vuetify
|
||||||
|
}
|
||||||
21
eda/edaf/src/store/index.ts
Normal file
21
eda/edaf/src/store/index.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
algorithm: 1,
|
||||||
|
algorithms: [
|
||||||
|
{value: 0, text: '二次线长布局'},
|
||||||
|
{value: 1, text: '力矢量布局'}
|
||||||
|
],
|
||||||
|
nodes: [],
|
||||||
|
edges: {},
|
||||||
|
nodesNum: 5,
|
||||||
|
edgesNum: 4
|
||||||
|
},
|
||||||
|
mutations: {},
|
||||||
|
actions: {},
|
||||||
|
modules: {}
|
||||||
|
})
|
||||||
5
eda/edaf/src/views/About.vue
Normal file
5
eda/edaf/src/views/About.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
173
eda/edaf/src/views/Home.vue
Normal file
173
eda/edaf/src/views/Home.vue
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home" id="container">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue'
|
||||||
|
import G6 from './../g6'
|
||||||
|
import {multiply, inv, copyM} from '@/libs'
|
||||||
|
|
||||||
|
const modes = {
|
||||||
|
default: ['drag-canvas', 'zoom-canvas', 'brush-select']
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshDragedNodePosition(e: any) {
|
||||||
|
const model = e.item.get('model')
|
||||||
|
model.x = e.x
|
||||||
|
model.y = e.y
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
name: 'Home',
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
graph: G6.Graph,
|
||||||
|
cfg: {
|
||||||
|
container: 'container',
|
||||||
|
modes: modes,
|
||||||
|
defaultNode: {
|
||||||
|
size: 20
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
mode() {
|
||||||
|
return this.$store.state.algorithm
|
||||||
|
},
|
||||||
|
nodes() {
|
||||||
|
return Object.keys(this.$store.state.nodes).map(v => {
|
||||||
|
return this.$store.state.nodes[v]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
edges() {
|
||||||
|
return Object.keys(this.$store.state.edges).map(v => this.$store.state.edges[v])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
mode() {
|
||||||
|
this.graph.destroy()
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
lay2() {
|
||||||
|
const p = []
|
||||||
|
const l = []
|
||||||
|
let fnum = 0
|
||||||
|
this.nodes.forEach(v => {
|
||||||
|
l.push([])
|
||||||
|
this.nodes.forEach(() => {
|
||||||
|
l[l.length - 1].push(0)
|
||||||
|
})
|
||||||
|
if (v.color === 'red') {
|
||||||
|
fnum = fnum + 1
|
||||||
|
p.push([v.x, v.y])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (fnum === 0) {
|
||||||
|
alert('请固定至少一个点')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.nodes.forEach(v => {
|
||||||
|
if (v.color !== 'red') {
|
||||||
|
p.push([0, 0])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.edges.forEach(v => {
|
||||||
|
const s = Number(v.source.slice(1))
|
||||||
|
const e = Number(v.target.slice(1))
|
||||||
|
l[s][e] = 1
|
||||||
|
l[e][s] = 1
|
||||||
|
})
|
||||||
|
const ones = [l.map(e => 1)]
|
||||||
|
const onesL = multiply(ones, l)
|
||||||
|
const B = multiply(l, p)
|
||||||
|
const A = []
|
||||||
|
for (let i = 0; i < p.length; i++) {
|
||||||
|
A.push([])
|
||||||
|
for (let j = 0; j < p.length; j++) {
|
||||||
|
A[i].push(0)
|
||||||
|
if (i === j) {
|
||||||
|
A[i][j] = onesL[0][i]
|
||||||
|
}
|
||||||
|
A[i][j] = A[i][j] - l[i][j]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const nA = copyM(A, fnum, A.length, fnum, A.length)
|
||||||
|
const nB = copyM(B, fnum, A.length, 0, 2)
|
||||||
|
const res = multiply(inv(nA), nB)
|
||||||
|
let index = 0
|
||||||
|
console.log(res)
|
||||||
|
this.nodes.forEach(v => {
|
||||||
|
if (v.color !== 'red') {
|
||||||
|
v.x = res[index][0]
|
||||||
|
v.y = res[index][1]
|
||||||
|
this.graph.updateItem(v.id, {x: v.x, y: v.y})
|
||||||
|
index = index + 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
const container = document.getElementById('container')
|
||||||
|
this.cfg.width = container.scrollWidth
|
||||||
|
this.cfg.height = container.scrollHeight || 500
|
||||||
|
this.cfg.layout = this.mode === 1 ? {
|
||||||
|
type: 'force',
|
||||||
|
center: [this.cfg.width / 2, this.cfg.height / 2],
|
||||||
|
preventOverlap: true,
|
||||||
|
onTick: (e) => {
|
||||||
|
},
|
||||||
|
onLayoutEnd: () => {
|
||||||
|
},
|
||||||
|
workerEnabled: false
|
||||||
|
} : undefined
|
||||||
|
const graph = new G6.Graph(this.cfg)
|
||||||
|
this.graph = graph
|
||||||
|
this.loaddata()
|
||||||
|
if (this.mode !== 1) {
|
||||||
|
graph.on('node:drag', e => {
|
||||||
|
if (e.item?.getModel().color === 'red') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
refreshDragedNodePosition(e)
|
||||||
|
graph.refresh()
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const forceLayout = graph.get('layoutController').layoutMethod
|
||||||
|
const start = (e) => {
|
||||||
|
graph.layout()
|
||||||
|
refreshDragedNodePosition(e)
|
||||||
|
}
|
||||||
|
const move = (e) => {
|
||||||
|
forceLayout.execute()
|
||||||
|
refreshDragedNodePosition(e)
|
||||||
|
}
|
||||||
|
const end = (e) => {
|
||||||
|
// e.item.get('model').fx = null
|
||||||
|
// e.item.get('model').fy = null
|
||||||
|
}
|
||||||
|
graph.on('node:dragstart', start)
|
||||||
|
graph.on('node:drag', move)
|
||||||
|
graph.on('node:dragend', end)
|
||||||
|
graph.on('node:touchstart', start)
|
||||||
|
graph.on('node:touchmove', move)
|
||||||
|
graph.on('node:touchend', end)
|
||||||
|
},
|
||||||
|
loaddata() {
|
||||||
|
this.graph.data({
|
||||||
|
nodes: this.nodes,
|
||||||
|
edges: this.edges
|
||||||
|
})
|
||||||
|
this.graph.render()
|
||||||
|
// this.graph.fitView(20)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
39
eda/edaf/tsconfig.json
Normal file
39
eda/edaf/tsconfig.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"importHelpers": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"types": [
|
||||||
|
"webpack-env"
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"tests/**/*.ts",
|
||||||
|
"tests/**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
5
eda/edaf/vue.config.js
Normal file
5
eda/edaf/vue.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
transpileDependencies: [
|
||||||
|
'vuetify'
|
||||||
|
]
|
||||||
|
}
|
||||||
9848
eda/edaf/yarn.lock
9848
eda/edaf/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user