<template>
    <div class="wrapper">
        <svg ref="svg" v-bind:width="thumbnailWidth" v-bind:height="thumbnailHeight">
            <image xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0" y="0"
                v-bind:width="thumbnailWidth" v-bind:height="thumbnailHeight"
                v-bind:xlink:href="image"></image>
            <rect ref="handler"
                class="move-handler"
                v-bind:x="x" v-bind:y="y"
                v-bind:width="width" v-bind:height="height"
                style="fill: black; opacity: 0.4"></rect>
        </svg>
    </div>
</template>

<script>

    import Snap from 'snapsvg'

    export default {
        props: [
            'image',
            'viewport',
            'viewBox',
            'imageWidth',
            'imageHeight',
        ],
        data() {
            return {
                thumbnailWidth: 0,
                thumbnailHeight: 0,
                loaded: false
            }
        },
        computed: {
            x: function() {
                return this.viewBox[0] * this.getRatioX();
            },
            y: function() {
                return this.viewBox[1] * this.getRatioY();
            },
            width: function() {
                return this.viewBox[2] * this.getRatioX();
            },
            height: function() {
                return this.viewBox[3] * this.getRatioY();
            }
        },
        methods: {
            reset: function() {
                var handler = new Snap(this.$refs.handler);
                handler.node.removeAttribute('transform');
            },
            getRatioX: function() {
                if (this.imageWidth === 0) { return 0; }

                return this.thumbnailWidth / this.imageWidth;
            },
            getRatioY: function() {
                if (this.imageHeight === 0) { return 0; }

                return this.thumbnailHeight / this.imageHeight;
            }
        },
        mounted() {

            var svg = new Snap(this.$refs.svg);
            var handler = new Snap(this.$refs.handler);

            var img = new Image();
            img.onload = (e) => {

                var self = this;

                svg.attr({
                    viewBox: [0, 0, img.width, img.height]
                });

                Object.assign(this, {
                    thumbnailWidth: img.width,
                    thumbnailHeight: img.height,
                    loaded: true
                });

                var events = {
                    onMove: function (dx, dy, x, y) {

                        var snapInvMatrix = this.transform().diffMatrix.invert();
                        snapInvMatrix.e = snapInvMatrix.f = 0;
                        var tdx = snapInvMatrix.x(dx, dy);
                        var tdy = snapInvMatrix.y(dx, dy);

                        var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy];
                        this.transform(transformValue);

                        self.$emit('change', {
                            x: this.getBBox().x * (self.imageWidth / self.thumbnailWidth),
                            y: this.getBBox().y * (self.imageHeight / self.thumbnailHeight),
                        });

                    },
                    onStart: function () {
                        this.data('origTransform', this.transform().local);
                        self.$emit('dragstart');
                    },
                    onEnd: function () {
                        self.$emit('dragend');
                    }
                }

                handler.drag(events.onMove, events.onStart, events.onEnd);
            }

            img.src = this.image;
        }
    }

</script>

<style scoped>
.wrapper {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.wrapper svg {
    border: 2px solid black;
    border-radius: 4px;
}
.move-handler {
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}
</style>