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

<script>
    import {SGraphScene, SGraphShape, SGraphView} from "@persagy-web/graph/lib";
    import {SRect} from "@persagy-web/draw/lib";

    class SGraphSvgItem extends SGraphShape{

        constructor(parent, data) {
            super(parent, data.Style);
            this.img = new Image();
            this.img.src = data.Url;
            this.img.onload = e => {
                console.log(e);
                console.log('---------------');
                // this.width =
                this.update()
            };
            this.img.onerror = err => {
                console.log(err)
            };
        }

        boundingRect() {
            return new SRect(0,0,100,100)
        }

        onDraw(painter) {
            painter.drawImage(this.img, 0, 0, 100, 100)
        }
    }

    export default {
        name: "svgCanvas",
        data(){
            return{
                id: 'svg' + Date.now(),
                view: '',
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.view = new SGraphView(this.id);
                const scene = new SGraphScene();
                this.view.scene = scene;
                // https://desk-fd.zol-img.com.cn/t_s2560x1600c5/g6/M00/0B/0E/ChMkKV9N5U2IfX_aAA-zeHRQZW8AABvcADsv-0AD7OQ688.jpg
                // https://cdn-img.easyicon.net/image/2019/panda-search.svg
                const item = new SGraphSvgItem(null, { Url: 'https://cdn-img.easyicon.net/image/2019/panda-search.svg'});
                scene.addItem(item);
                this.view.fitSceneToView();
            }
        }
    }
</script>

<style scoped>

</style>
