eda演示完成

2021-01-11 11:50:18 +08:00
parent 215cb69313
commit 042333ed4b
18 changed files with 1060 additions and 120 deletions
@@ -1,32 +1,270 @@
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
-</template>
-
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+<style>
+.info-div {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 </style>
+<template>
+  <v-app>
+    <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>
+
+<script lang="ts">
+import Vue from 'vue'
+
+function uniform2NormalDistribution() {
+  let sum = 0.0
+  for (let i = 0; i < 12; i++) {
+    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>
@@ -1,36 +1,94 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
+  <v-container>
+    <v-row class="text-center">
+      <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>

 <script lang="ts">
@@ -38,26 +96,58 @@ import Vue from 'vue'

 export default Vue.extend({
  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
+
+  data: () => ({
+    ecosystem: [
+      {
+        text: 'vuetify-loader',
+        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>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
@@ -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
@@ -0,0 +1,6 @@
+import G6 from '@antv/g6'
+import forceLayout from '@/g6/force'
+
+G6.registerLayout('forceLayout', forceLayout)
+
+export default G6
@@ -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 }
@@ -2,11 +2,13 @@ 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')
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib/framework'
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+})
@@ -0,0 +1,4 @@
+declare module 'vuetify/lib/framework' {
+  import Vuetify from 'vuetify'
+  export default Vuetify
+}
@@ -5,11 +5,17 @@ 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: {
-  }
+  mutations: {},
+  actions: {},
+  modules: {}
 })
@@ -1,18 +1,173 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  <div class="home" id="container">
  </div>
 </template>

 <script lang="ts">
 import Vue from 'vue'
-import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src
+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: {
-    HelloWorld
+  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>