<template>
  <div style="overflow: hidden">
    <div id="topology-hrhx" style="width: 100%; height: 100vh"></div>
    <div class="tools">
      <a-button type="primary" @click="onBack">
        <a-icon type="left" /> 返回
      </a-button>
      <div></div>
      <a-button type="primary" style="margin-right: 0" @click="onSizeWindow">
        <a-icon type="border" />
        适合窗口大小
      </a-button>
      <a-button type="primary" @click="onSizeOri">
        <a-icon type="fullscreen-exit" />
        实际大小
      </a-button>
    </div>
  </div>
</template>
<script>
import { Topology } from "@topology/core";
import { register as registerChart } from "@topology/chart-diagram";
export default {
  data() {
    return {
      canvas: {},
      locked: 0,
      showTools: true,
      data:{}
    };
  },
  created() {
    registerChart();
  },
  mounted() {
    this.init();
  },
  methods: {
    onBack() {
      this.$router.push({
        path: "/workspace",
      });
    },
    onSizeWindow() {
      this.canvas.fitView(16);
    },
    onSizeOri() {
      this.canvas.open(this.data);
    },
    init() {
      this.canvas = new Topology("topology-hrhx", {});
      this.data.locked = 1;
      // 3. 渲染图形
      // 画布图形数据，可以来自于官网下载的json
      this.canvas.open(this.data);
      // 或 用window.topology对象 === 上面的canvas
      // topology.open(json);
      // 4. 如果json发送变化，重绘
      this.canvas.render();
    },
  },
};
</script>
<style lang="scss">
.tools {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: flex;
  & > div {
    flex-grow: 1;
  }

  button {
    margin: 12px 16px;
  }
}
</style>