<template>
  <div class="baseTopo" ref="baseTopo">
    <canvas id="persagy_topo" :width="canvasWidth" :height="canvasHeight" tabindex="0"></canvas>
  </div>
</template>
<script>
import { PTopoScene } from "@/components/editClass/persagy-edit";
// import { BaseLineEdit } from "@/components/editClass/big-edit";
import { SGraphView } from "@persagy-web/graph";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      scene: null, //场景
      view: null, //视图
      canvasWidth: 700, //画布宽
      canvasHeight: 700 //画布高
    };
  },
  computed: {
    ...mapState(["choiceLegend"])
  },
  mounted() {
    this.canvasWidth = this.$refs.baseTopo.offsetWidth;
    this.canvasHeight = this.$refs.baseTopo.offsetHeight - 10;
    this.scene = new PTopoScene();
    this.view = new SGraphView("persagy_topo");
    this.view.scene = this.scene;
    this.scene.clearCmdStatus = this.clearCmdStatus;
    // this.scene.root.children = [];
    // this.lineItem = new BaseLineEdit(null, []);
    // this.lineItem.status = SItemStatus.Create;
    // this.lineItem.connect("finishCreated", this, this.finishCreated);
    // this.scene.addItem(this.lineItem);
    // this.scene.grabItem = this.lineItem;
    // this.view.update();
  },
  methods: {
    ...mapMutations(["SETCHOICELEHEND"]),
    // 恢复命令状态
    clearCmdStatus() {
      this.SETCHOICELEHEND("");
    }
  },
  watch: {
    choiceLegend(val) {
      if (this.scene) {
        // 设置当前编辑状态
        this.scene.editCmd = this.choiceLegend;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.baseTopo {
  width: 100%;
  height: 100%;
}
</style>