<template>
    <div>
        <canvas :id="id" width="800px" height="400px"></canvas>
    </div>
</template>

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

    @Component
    export default class SvgCanvas extends Vue{
        id: string = 'svg' + Date.now();
        view: SGraphView | undefined;
        svgData = {
            // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
            Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg',
            X: 100,
            Y: 100,
            Width: 200,
            Height: 200
        };
        private mounted(): void {
            this.init()
        };
        init(): void {
            this.view = new SGraphView(this.id);
            const scene = new SGraphScene();
            this.view.scene = scene;
            const item = new SGraphSvgItem(null, this.svgData);
            scene.addItem(item);
            this.view.fitSceneToView();
        };
    }
</script>

<style scoped>

</style>
