<template>
    <div>
        <el-button @click="showMap(1)">查看地图1</el-button>
        <el-button @click="showMap(2)">查看地图2</el-button>
        <canvas id="mapDemo" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script lang="ts">
import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
import { SFloorParser } from "@persagy-web/big/lib";
import { Component, Vue } from "vue-property-decorator";

/**
 * 场景对象示例
 *
 * @author 郝洁 <haojie@persagy.com>
 */
@Component
export default class MapDemoCanvas extends Vue {
    /** 实例化 view */
    view: SGraphView | undefined;
    /** 命令所属的场景类 */
    scene: SGraphScene | undefined;
    /** json 文件 1 */
    map1 = require('../../../public/assets/map/1.json');
    /** json 文件 2 */
    map2 = require('../../../public/assets/map/2.json');

    /**
     * 页面挂载
     */
    mounted(): void {
        this.view = new SGraphView("mapDemo");
        this.init()
    };
    /**
     * 初始化加载
     */
    init() {
        this.showMap('1');
    };

    /**
     * 绘制地图
     * @param id    图 Id
     */
    showMap(id: string) {
        const scene = new SGraphScene();
        this.view!!.scene = scene;
        let parser = new SFloorParser();
        // @ts-ignore
        parser.parseData(JSON.parse(JSON.stringify(this[`map${id}`].EntityList[0].Elements)));
        parser.spaceList.forEach(t => scene.addItem(t));
        parser.wallList.forEach(t => scene.addItem(t));
        parser.virtualWallList.forEach(t => scene.addItem(t));
        parser.doorList.forEach(t => scene.addItem(t));
        parser.columnList.forEach(t => scene.addItem(t));
        parser.casementList.forEach(t => scene.addItem(t));
        this.view!!.fitSceneToView();
    }
}
</script>


<style scoped>
    canvas {
        border: 1px solid #eeeeee;
        outline: none;
    }
</style>