<template>
    <div class="platform">
        <div class="svg-div" id="canvas"></div>
    </div>
</template>

<script>

export default {
    name: 'platform',
    
    data() {
        return {}
    },
    
    mounted() {
        this.svgLoad()
    },
    methods: {
        
        svgLoad() {
            var ming = 'http://www.w3.org/2000/svg'
            // 獲取畫布
            var canvas = document.getElementById('canvas')
            // 新建svg根元素用createElementNS
            var oSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
            oSvg.setAttribute('id', 'showsvg')
            oSvg.setAttribute('fill', 'red')
            oSvg.setAttribute('width', '100%')
            oSvg.setAttribute('height', '100%')
            canvas.appendChild(oSvg)

            var oPolyLine = null

            var pointsNum = ''

            var lineText = null

            function createTag(tagName, tagAttr) {
                let tag = document.createElementNS(ming, tagName)

                for (var attr in tagAttr) {
                    tag.setAttribute(attr, tagAttr[attr])
                }

                return tag
            }

            var obj = document.querySelectorAll('.platform')[0]
            // 監(jiān)聽svg鼠標(biāo)事件
            oSvg.onmousedown = function(ev) {
                if (!oPolyLine) {
                    oPolyLine = createTag('polyline', {
                        fill: 'none',

                        stroke: 'red',

                        'stroke-width': '2'
                    })

                    oSvg.appendChild(oPolyLine)
                }

                var x = ev.clientX - obj.offsetLeft - 20

                var y = ev.clientY - obj.offsetTop

                if (pointsNum == '') {
                    pointsNum = x + ',' + y
                } else {
                    pointsNum += ',' + x + ',' + y
                }

                var theText = createTag('text', {
                    //繪制鼠標(biāo)移動(dòng)位置坐標(biāo)

                    fill: 'red'
                })

                oSvg.appendChild(theText)

                oPolyLine.setAttribute('points', pointsNum)

                theText.setAttribute('x', x)

                theText.setAttribute('y', y - 30)

                theText.innerHTML = x + ',' + y
                // 右鍵單擊
                if (ev.button === 0) {
                    var oCircle = createTag('rect', {
                        x: x,
                        y: y,
                        width: 20,
                        height: 10,
                        fill: 'white',
                        stroke: 'red',
                        'stroke-width': 3
                    })

                    oSvg.appendChild(oCircle)
                } else {
                    oSvg.onmousemove = function(ev) {
                        //鼠標(biāo)移動(dòng)事件

                        var ev = ev || window.event

                        if (!lineText) {
                            //顯示鼠標(biāo)移動(dòng)坐標(biāo)

                            lineText = createTag('text', {
                                fill: 'red',

                                x: ev.clientX - obj.offsetLeft,

                                y: ev.clientY - obj.offsetTop
                            })

                            var x = ev.clientX - obj.offsetLeft

                            var y = ev.clientY - obj.offsetTop

                            lineText.innerHTML = x + ',' + y

                            oSvg.appendChild(lineText)
                        } else {
                            var x1 = ev.clientX - obj.offsetLeft

                            var y1 = ev.clientY - obj.offsetTop

                            lineText.setAttribute('x', x1)
                            lineText.setAttribute('y', y1)

                            lineText.innerHTML = x1 + ',' + y1
                        }

                        if (oPolyLine) {
                            var x = ev.clientX - obj.offsetLeft - 20

                            var y = ev.clientY - obj.offsetTop

                            oPolyLine.setAttribute('points', pointsNum + ',' + x + ',' + y)
                        }
                    }
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>

.platform {
    height: 100%;

    .svg-div {
        height: 100%;
        background: rgb(18, 70, 119);
    }
}
</style>