JSFiddle - React, Tailwind, and code Playground

by wellcaffeinated

HTML

<script src="http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-0.5.0/physicsjs-full-0.5.0.min.js"></script>
<canvas id="viewport"></canvas>

CSS

html, body {
    background: #121212;
    margin: 0;
    height: 100%;
}
.pjs-meta {
    display: none;
}
#viewport {
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
}

JavaScript

/**
 * PhysicsJS by Jasper Palfree <wellcaffeinated.net>
 * http://wellcaffeinated.net/PhysicsJS
 *
 * Supermarket catastrophy
 */
Physics.behavior('demo-mouse-events', function (parent) {

    return {

        init: function (options) {

            var self = this;

            this.mousePos = Physics.vector();
            this.mousePosOld = Physics.vector();
            this.offset = Physics.vector();

            this.el = $(options.el).on({
                mousedown: function (e) {

                    var offset = $(this).offset();
                    self.mousePos.set(e.pageX - offset.left, e.pageY - offset.top);

                    var body = self._world.findOne({
                        $at: self.mousePos
                    });
                    if (body) {

                        // we're trying to grab a body

                        // fix the body in place
                        body.fixed = true;
                        // remember the currently grabbed body
                        self.body = body;
                        // remember the mouse offset
                        self.offset.clone(self.mousePos).vsub(body.state.pos);
                        return;
                    }

                    self.mouseDown = true;
                },
                mousemove: function (e) {
                    var offset = $(this).offset();
                    self.mousePosOld.clone(self.mousePos);
                    // get new mouse position
                    self.mousePos.set(e.pageX - offset.left, e.pageY - offset.top);
                },
                mouseup: function (e) {
                    var offset = $(this).offset();
                    self.mousePosOld.clone(self.mousePos);
                    self.mousePos.set(e.pageX - offset.left, e.pageY - offset.top);

                    // release the body
                    if (self.body) {
                        self.body.fixed = false;
                        self.body = false;
       ...