<template>
    <div class="hello" :id="id"></div>
</template>

<script>
    //import mapJson from "./data/1.json";
    import { drawRect, drawArc, drawEllipse, drawImage, drawPath, drawLine } from "@/utils/draw"

    export default {
        name: "DrawHTEX",
        props: {
            msg: String,
            mapJson: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            height: {
                type: Number,
                default:450
            }
        },
        data() {
            return {
                stage: undefined,
                id: 'container'
            }
        },
        created() {
            this.id = 'container' + this.$jsFn.getBtwRandom(0,100000000)
        },
        methods: {
            initCanvas() {
                if (!this.stage) {
                    this.stage = new Konva.Stage({
                        //container: "container", // id of container <div>
                        container: this.id,
                        width: this.mapJson.width * this.height / this.mapJson.height,
                        height: this.height
                    });
                } else {
                    this.stage.clear()
                }
                this.stage.scale({ x: this.height / this.mapJson.height, y: this.height / this.mapJson.height })
                let that = this;
                var layer = new Konva.Layer();
                var tr = new Konva.Transformer();
                tr.nodes([]);

                var imageObj = new Image();
                imageObj.onload = function () {
                    var bgImage = new Konva.Image({ image: imageObj });

                    layer.add(bgImage);
                    layer.batchDraw();

                    that.doRender(that.stage, layer, tr, that.mapJson.item);

                    // add the shape to the layer
                };
                imageObj.src = this.mapJson.fill.image;

                that.stage.on("click tap", function (e) {
                    // if click on empty area - remove all selections
                    if (e.target === that.stage) {
                        tr.nodes([]);
                        layer.draw();
                        return;
                    }
                    // 判断当前是否按下ctrl或者shift以及是否已经选中
                    const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
                    const isSelected = tr.nodes().indexOf(e.target) >= 0;

                    if (!metaPressed && !isSelected) {
                        // 点击哪个就选中哪个
                        tr.nodes([e.target]);
                    } else if (metaPressed && isSelected) {
                        // 取消选择操作
                        const nodes = tr.nodes().slice(); // use slice to have new copy of array
                        nodes.splice(nodes.indexOf(e.target), 1);
                        tr.nodes(nodes);
                    } else if (metaPressed && !isSelected) {
                        // 多选操作
                        const nodes = tr.nodes().concat([e.target]);
                        tr.nodes(nodes);
                    }
                    layer.draw();
                });

                // add the layer to the stage
                setTimeout(() => {
                    that.stage.add(layer);
                }, 0);
            },

            doRender(stage, layer, tr, items) {
                items.forEach(i => {
                    if (i.type === "Media") {
                        switch (i.mediaType) {
                            case "image":
                                drawImage(stage, layer, i, tr);
                                break;
                            default:
                                break;
                        }
                    } else if (i.type === "Diagram") {
                        drawRect(stage, layer, i, tr);
                        this.doRender(stage, layer, tr, i.shapes);
                    } else {
                        switch (i.svg.svgShape[0].type) {
                            case "path":
                                drawPath(stage, layer, i, tr);
                                break;
                            case "arc":
                                drawArc(stage, layer, i);
                                break;
                            case "rect":
                                drawRect(stage, layer, i);
                                break;
                            case "ellipse":
                                drawEllipse(stage, layer, i);
                                break;
                            default:
                                drawLine(stage, layer, i);
                                break;
                        }
                    }
                });
            }
        },
        mounted() {
            //this.initCanvas();
        },
        watch: {
            'mapJson': {
                handler: function (o, n){
                    console.log(this)
                    this.$nextTick(() => {
                        this.initCanvas()
                    })
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

    .konvajs-content {
        margin: 0 auto;
    }
</style>
