<template>
    <div>
        <canvas id="editPolyline" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script>
import { SGraphScene, SGraphView } from "@persagy-web/graph/lib";
import { SItemStatus, SCircleCornerPolylineItem } from "@persagy-web/big/lib";

/**
 * 可编辑折线示例
 *
 * @author 郝洁 <haojie@persagy.com>
 */
export default {
    name: "editPolyline",
    data() {
        return {
            /** 命令所属的场景类 */
            scene: null,
            /** 实例化 view */
            view: null,
            item: null,
        };
    },
    /**
     * 页面挂载
     */
    mounted() {
        this.view = new SGraphView("editPolyline");
        this.scene = new SGraphScene();
        this.view.scene = this.scene;
        this.init()
    },
    methods: {
        /**
         * 初始化加载
         */
        init() {
            this.scene.root.children = [];
            this.item = new SCircleCornerPolylineItem(null);
            // [15, 20],
            //     [20, 200],
            //     [200, 300],
            //     [300, 100],
            //     [200, 20]
            this.item.pointList = [
                { x: 15000, y: 20000 },
                { x: 20000, y: 20000 },
                { x: 20000, y: 30000 },
                { x: 30000, y: 10000 },
                { x: 20000, y: 10000 },
            ];
            // this.item.generatePath();
            this.scene.addItem(this.item);
            this.scene.grabItem = this.item;
            this.view.update();
            console.log(this.item)
            this.view.fitSceneToView()
        },
    }
}
</script>

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