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

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

    class Circle extends SGraphItem{
        constructor(parent, com){
            super(parent);
            this.composite = com ? SCompositeType.SourceOver : com;
        }
        boundingRect() {
            return new SRect(-500,-500,1500,1500);
        }
        onDraw(painter) {
            painter.brush.color = SColor.Blue;
            painter.pen.color = SColor.Transparent;
            painter.drawRect(0,0,1000,1000);

            painter.composite = SCompositeType.SourceOut;

            painter.brush.color = SColor.Red;
            painter.drawCircle(0,0,500);

            painter.brush.color = SColor.Transparent;
            painter.pen.color = SColor.Black;
            painter.drawRect(-500,-500,1500,1500);
        }
    }

    export default {
        name: "sourceOver",
        data(){
            return {
                view:''
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.view = new SGraphView('sourceOver');
                const scene = new SGraphScene();
                const circle = new Circle(null, SCompositeType.SourceOut);
                scene.addItem(circle);
                this.view.scene = scene;
                this.view.fitSceneToView();
                this.view.scalable = false;
            },
        }
    }
</script>

<style scoped>

</style>
