draft.html

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>CNC Draft Tool</title>
    <script src="webapp/libs/require.js"></script>
    <script src="webapp/config.js"></script>
    <script>
        requirejs.config({
            baseUrl: 'webapp'
        });
    </script>

    <link rel="stylesheet" href="webapp/twoDView.css" type="text/css">
    <style> html, body {
        height: 100%;
        position: relative;
    }

    body {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .draft {
        display: flex;
        display: -webkit-flex;
        flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
    }

    .selected {
        stroke: red;
    }
    </style>
</head>
<body>
<script>
    require(['Ember', 'cnc/ui/emberTwoDView', 'text!templates/draftApp.handlebars', 'THREE', 'cnc/util'],
            function (Ember, twoDView, draftApp, three, util) {
                Ember.TEMPLATES['draft'] = Ember.Handlebars.compile(draftApp);
                var App = Ember.Application.create({
                    customEvents: {
                        mousewheel: "mousewheel"
                    }
                });
                window.App = App;

                function ptAngleLength(angle, length) {
                    return new util.Point(length * Math.cos(angle), length * Math.sin(angle));
                }

                function drawRegularPolygon(center, radius, sides) {
                    var path = '';
                    var angularStep = 2 * Math.PI / sides;

                    function rotateWithAngle(p, angle) {
                        var sin = Math.sin(angle);
                        var cos = Math.cos(angle);
                        var dp = p.sub(center);
                        return new util.Point(center.x + dp.x * cos - dp.y * sin, center.y + dp.x * sin + dp.y * cos);
                    }

                    function circleCircleIntersections(c1, r1, c2, r2) {
                        var sqD = c1.sqDistance(c2);
                        var sqR1 = r1 * r1;
                        var sqR2 = r2 * r2;
                        if (sqD > (r1 + r2) * (r1 + r2))
                            return [];
                        var d = Math.sqrt(sqD);
                        var a = (sqR1 - sqR2 + sqD);
                        var a1 = a * a / (4 * sqD);
                        var a2 = a / (2 * sqD);
                        var p2 = c1.lerp(c2, a2);
                        var h = Math.sqrt(sqR1 - a1);
                        if (h == 0)
                            return [p2];
                        var dx = h * (c2.x - c1.x) / d;
                        var dy = h * (c2.y - c1.y) / d;
                        var sol1 = new util.Point(p2.x + dy, p2.y - dx);
                        var sol2 = new util.Point(p2.x - dy, p2.y + dx);
                        return [sol1, sol2];
                    }

                    function projectPointOnCircle(center, radius, p) {
                        var t = radius / center.distance(p);
                        return center.lerp(p, t);
                    }

                    for (var i = 0; i < sides; i++) {
                        var angle = i * angularStep;

                        function rotate(p) {
                            return rotateWithAngle(p, angle);
                        }

                        var localStartPoint = new util.Point(radius, 0);
                        var startPoint = rotate(localStartPoint);
                        var localNextPoint = rotateWithAngle(localStartPoint, angularStep);
                        path += path.length == 0 ? 'M' : 'L';
                        path += startPoint.svgp;
                        var lineLength = 1;
                        var rootRadius = 138.4 / 2;
                        var undercutRadius = 6;
                        var points = circleCircleIntersections(new util.Point(0, 0), rootRadius, localNextPoint, undercutRadius + lineLength);
                        var selected = points[0];
                        var arcStart = projectPointOnCircle(selected, undercutRadius, localStartPoint);
                        var arcEnd = projectPointOnCircle(selected, undercutRadius, localNextPoint);
                        path += 'L' + rotate(arcStart).svgp;
                        path += 'A ' + undercutRadius + ',' + undercutRadius + ' ' + angle + ' 1 0 ';
                        path += rotate(arcEnd).svgp;
                    }
                    return path + 'Z';
                }

                App.TwoDView = Ember.View.extend({
                    classNames: ['TwoDView'],
                    didInsertElement: function () {
                        var view = twoDView.EmberTwoDView.create({element: this.$()});
                        this.set('nativeComponent', view);
                        this.set('selection', null);
                        var _this = this;
                        var pathDesc = drawRegularPolygon(new util.Point(0, 0), 148.1 / 2, 30);
                        var path = view.get('paper').path(pathDesc).attr({stroke: 'black', fill: 'none', 'stroke-width': 2});
                        path.node.selectable = true;
                    },
                    click: function (event) {
                        var target = event.target;
                        this.set('selection', target.selectable ? target.instance : null);
                    },
                    selectionChanged: function () {
                        var selection = this.get('selection');
                        if (selection != null)
                            util.toggleClass(selection, 'selected', true);
                    }.observes('selection'),
                    selectionWillChange: function () {
                        var selection = this.get('selection');
                        if (selection != null)
                            util.toggleClass(selection, 'selected', false);
                    }.observesBefore('selection'),
                    nativeComponent: null,
                    selection: null
                });
                App.Router.reopen({
                    rootURL: '/webgcode/'
                });
                App.Router.map(function () {
                    this.resource('draft', {path: '/'});
                });
                App.DraftView = Ember.View.extend({
                    classNames: ['draft']
                });
                App.DraftRoute = Ember.Route.extend({});
            });
</script>
</body>
</html>