JSFiddle - React, Tailwind, and code Playground

by Gustavo Carvalho

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script>
<div id="canvas"></div>

JavaScript

(function ($) {
    $.fn.polygonExpander = function (options) {
        options = $.extend({
            width: 400,
            height: 200,
            changeWidth: 50,
            changeSpeed: 10,
            strokeColour: 'white',
            strokeWidth: 1,
            polyArrays: new Array()
        }, options);

        return $(this).each(function () {
            var stage = new Kinetic.Stage({
                container: this.id,
                width: options.width,
                height: options.height
            }),
                bottomLayer = new Kinetic.Layer(),
                topLayer = new Kinetic.Layer(),
                context = bottomLayer.getContext(),
                currentSize = 0,
                interval,
                selectedIndex = -1
                images = new Array();

            function makePolygon(polyArray, layer, currentIndex) {
                var poly = new Kinetic.Polygon({
                    points: [polyArray[0], 0, polyArray[1], 0, polyArray[2], options.height, polyArray[3], options.height],
                    name: 'poly',
                    draggable: false,
                    stroke: options.strokeColour,
                    strokeWidth: options.strokeWidth,
                });

                if (typeof images[currentIndex] === "undefined") {
                    images[currentIndex] = new Image();
                    images[currentIndex].src = polyArray[4];
                    images[currentIndex].onload = function () {
                        poly.setFillPatternImage(images[currentIndex]);
                        stage.draw();
                    }
                } else {
                    poly.setFillPatternImage(images[currentIndex]);
                    stage.draw();
                }

                layer.add(poly);
            }

            function expand(currentIndex) {
                if (currentSize >= options.changeWidth) {
                    window.clearInterval(interval);
            ...