JSFiddle - React, Tailwind, and code Playground

by Mohammed Ismail Ansari

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<b>flipX:</b>
<span data-bind="text: flipX"></span>
<br />
<b>flipY:</b>
<span data-bind="text: flipY"></span>
<br />
<b>angle:</b>
<span data-bind="text: angle"></span>
<br />
<br />
<button data-bind="click: function() { angle(angle()+90); }">Rotate</button>
<button data-bind="click: function() { angle(0); }">Reset Angle</button>
<button data-bind="click: function() { flipX(!flipX()); }">FlipX</button>
<button data-bind="click: function() { flipY(!flipY()); }">FlipY</button>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g class="realRectangle">
        <line class="side top" x1="50" y1="50" x2="150" y2="50"
            stroke="red"
            data-bind="style: { cursor: sideCursorChanged()?'e-resize':'n-resize' }" />
        <line class="side bottom" x1="50" y1="150" x2="150" y2="150"
            stroke="blue"
            data-bind="style: { cursor: sideCursorChanged()?'e-resize':'n-resize' }" />
        <line class="side left" x1="50" y1="50" x2="50" y2="150"
            stroke="green"
            data-bind="style: { cursor: sideCursorChanged()?'n-resize':'e-resize' }" />
        <line class="side right" x1="150" y1="150" x2="150" y2="50"
            stroke="gold"
            data-bind="style: { cursor: sideCursorChanged()?'n-resize':'e-resize' }" />
        <circle class="corner topLeft" cx="50" cy="50" r="5"
            fill="red"
            data-bind="style: { cursor: cornerCursorChanged()?'ne-resize':'nw-resize' }" />
        <circle class="corner topRight" cx="150" cy="50" r="5"
            fill="gold"
            data-bind="style: { cursor: cornerCursorChanged()?'nw-resize':'ne-resize' }" />
        <circle class="corner bottomLeft" cx="50" cy="150" r="5"
            fill="green"
            data-bind="style: { cursor: cornerCursorChanged()?'nw-resize':'ne-resize' }" />
        <circle class="corner bottomRight" cx="150" cy="150" r="5"
           ...

CSS

body
{
    background-color: #A0A0A0;
    font-family: 'Arial';
}

.side
{
    stroke-width: 5;
}

.corner
{
    stroke: white;
    stroke-width: 2;
}

JavaScript

var viewmodel = function(){
    var self = this;
    this.cursorType = ko.observable('default');
    
    this.flipX = ko.observable(false);
    this.flipY = ko.observable(false);
    this.angle = ko.observable(0);
    
    this.sideCursorChanged = ko.computed(function () {
       return (self.angle()-90)%180===0; 
    });
    this.cornerCursorChanged = ko.computed(function () {
       return ((self.flipX() ^ self.flipY()) ^ self.sideCursorChanged()); 
    });
}

$(document).ready(function(){
    var vm = new viewmodel();
    ko.applyBindings(vm);
});