JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <style>
        body {
            width: 2000px;
            height: 2000px;
            padding: 0;
            margin: 0;
        }

        svg path {
            fill: #FBFF2E;
            stroke: #000000;
            stroke-width: 1;
        }
    </style>
    <script src="miter.js"></script>
</head>

<body>
    <svg height="100%" id="svg" width="100%" xmlns="http://www.w3.org/2000/svg">
        <path d="M0, 0 L0, 0" fill="none" id="path1" stroke="black" />
        <path d="M0, 0 L0, 0" fill="none" id="path2" stroke="black" />
        <path d="M0, 0 L0, 0" fill="none" id="path3" stroke="black" />
        <path d="M0, 0 L0, 0" fill="none" id="path4" stroke="black" />

        <circle fill="red" id="c1" r="1"></circle>
        <circle fill="red" id="c2" r="1"></circle>
        <circle fill="red" id="c3" r="1"></circle>
        <circle fill="red" id="c4" r="1"></circle>
        <circle fill="red" id="c5" r="1"></circle>
        <circle fill="red" id="c6" r="1"></circle>
        <circle fill="red" id="c7" r="1"></circle>
        <circle fill="red" id="c8" r="1"></circle>
    </svg>

    <script>
        (function(win, doc) {
            'use strict';

            var i;
            var walls = [{
                'id': 'path1',
                'config': {
                    'w': 25
                },
                'points': [{
                    'id': 'c1',
                    'coords': {
                        x: 105,
                        y: 125
                    },
                    'radius': 12
                }, {
                    'id': 'c2',
                    'coords': {
                        x: 105,
                        y: 200
                    },
 ...

JavaScript

(function(win, doc) {
    'use strict';

    function Utils() {
        var self = this;

        self.svg = doc.getElementById('svg');
        self.viewBox = (self.svg instanceof SVGSVGElement && self.svg.hasAttributeNS(null, 'viewBox')) ? self.svg.getAttributeNS(null, 'viewBox').split(' ') : [];
        self.rectBox = (self.svg instanceof SVGSVGElement) ? self.svg.getBoundingClientRect() : {};

        return self;
    }

    Utils.prototype.getUID = (function() {
        var id = 0;

        return function() {
            return id++;
        };
    })();

    Utils.prototype.rotatePoint = function(p, c, a) {
        return rotatePoint(p, c, a);
    };

    Utils.prototype.getIntersection = function(walls, isInline) {
        if (!walls || walls.length < 2) {
            return false;
        }

        var v1 = walls[0].cacheData._outLine;
        var v2 = walls[1].cacheData._outLine;
        var denominator;
        var a;
        var b;
        var numerator1;
        var numerator2;
        var result = {
            x: null,
            y: null,
            onLine1: false,
            onLine2: false
        };

        if (isInline) {
            v1 = walls[0].cacheData._inLine;
            v2 = walls[1].cacheData._inLine;
        }

        denominator = ((v2[1].y - v2[0].y) * (v1[1].x - v1[0].x)) - ((v2[1].x - v2[0].x) * (v1[1].y - v1[0].y));

        if (denominator === 0) {
            return result;
        }

        a = v1[0].y - v2[0].y;
        b = v1[0].x - v2[0].x;

        numerator1 = ((v2[1].x - v2[0].x) * a) - ((v2[1].y - v2[0].y) * b);
        numerator2 = ((v1[1].x - v1[0].x) * a) - ((v1[1].y - v1[0].y) * b);

        a = numerator1 / denominator;
        b = numerator2 / denominator;

        result.x = v1[0].x + (a * (v1[1].x - v1[0].x));
        result.y = v1[0].y + (a * (v1[1].y - v1[0].y));

        if (a > 0 && a < 1) {
            result.onLine1 = true;
        }

        if (b > 0 && b < 1) {
            result.onLine2 = true;
  ...