here's a canvas app!

9 years ago · 7c4b334ad3
parent 41276fffb5
commit 7c4b334ad3
2 changed files with 181 additions and 0 deletions
--- a/www/canvas/index.html
+++ b/www/canvas/index.html
@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <script data-main="main" src="/bower_components/requirejs/require.js"></script>
+    <style>
+        html, body{
+            padding: 0px;
+            margin: 0px;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        textarea{
+            width: 100%;
+            height: 100vh;
+            max-width: 100%;
+            max-height: 100vh;
+
+            font-size: 18px;
+            background-color: #073642;
+            color: #839496;
+
+            overflow-x: hidden;
+
+            /* disallow textarea resizes */
+            resize: none;
+        }
+        canvas {
+            border: 5px solid black;
+        }
+        #clear {
+            display: inline;
+        }
+        #colors {
+            z-index: 100;
+            border: 3px solid black;
+            padding: 5px;
+        }
+        span.palette {
+            height: 50px;
+            width: 50px;
+            display: inline-block;
+            margin: 5px;
+            border: 2px solid black;
+        }
+        #controls {
+            display: block;
+            position: relative;
+            border: 3px solid black;
+        }
+        #width, #colors {
+            position: relative;
+        }
+    </style>
+</head>
+<body>
+
+    <canvas id="canvas" width="600" height="600" ></canvas> 
+
+    <h2>Welcome to CryptCanvas!</h2>
+    <h3>Zero Knowledge Realtime Collaborative Canvas Editing</h3>
+
+    <div id="controls">
+        <button id="clear">Clear</button>
+        <input id="width" type="number" value="5"></input>
+        <div id="colors">&nbsp;</div>
+    </div>
+
+
+</body>
+</html>
+
--- a/www/canvas/main.js
+++ b/www/canvas/main.js
@ -0,0 +1,108 @@
+require.config({ paths: {
+    'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify'
+}});
+
+define([
+    '/api/config?cb=' + Math.random().toString(16).substring(2),
+    '/common/RealtimeTextarea.js',
+    '/common/messages.js',
+    '/common/crypto.js',
+    '/common/TextPatcher.js',
+    '/bower_components/fabric.js/dist/fabric.min.js',
+    'json.sortify',
+    '/bower_components/jquery/dist/jquery.min.js',
+    '/customize/pad.js'
+], function (Config, Realtime, Messages, Crypto, TextPatcher, Fabric, JSONSortify) { 
+    var module = window.APP = { };
+    var $ = module.$ = window.jQuery;
+    var Fabric = module.Fabric = window.fabric;
+
+    $(window).on('hashchange', function() {
+        window.location.reload();
+    });
+    if (window.location.href.indexOf('#') === -1) {
+        window.location.href = window.location.href + '#' + Crypto.genKey();
+        return;
+    }
+
+    /* Initialize Fabric */
+    var canvas = module.canvas = new Fabric.Canvas('canvas');
+    var $canvas = $('canvas');
+
+    var $width = $('#width');
+    var updateBrushWidth = function () {
+        canvas.freeDrawingBrush.width = Number($width.val());
+    };
+    updateBrushWidth();
+
+    $width.on('change', updateBrushWidth);
+
+    var palette = ['red', 'blue', 'green', 'white', 'black', 'purple', 'gray'];
+    var $colors = $('#colors');
+    $colors.html(function (i, val) {
+        return palette.map(function (c) {
+                return "<span class='palette' style='background-color:"+c+"'></span>";
+            }).join("");
+    });
+
+    $('.palette').on('click', function () {
+        var color = $(this).css('background-color');
+        canvas.freeDrawingBrush.color = color;
+    });
+
+    var setEditable = function (bool) {
+        canvas.isDrawingMode = bool;
+        $canvas.css('border-color', bool? 'black': 'red');
+    };
+
+    var key = Crypto.parseKey(window.location.hash.substring(1));
+    var initializing = true;
+
+    var config = module.config = {
+        websocketURL: Config.websocketURL + '_old',
+        userName: Crypto.rand64(8),
+        channel: key.channel,
+        cryptKey: key.cryptKey
+    };
+
+    var onInit = config.onInit = function (info) { };
+
+    var onRemote = config.onRemote = function () {
+        if (initializing) { return; }
+        var userDoc = module.realtime.getUserDoc();
+        canvas.loadFromJSON(userDoc);
+        canvas.renderAll();
+    };
+
+    var onLocal = config.onLocal = function () {
+        if (initializing) { return; }
+        var content = JSONSortify(canvas.toDatalessJSON());
+        module.patchText(content);
+    };
+
+    var onReady = config.onReady = function (info) {
+        var realtime = module.realtime = info.realtime;
+        module.patchText = TextPatcher.create({
+            realtime: realtime
+        });
+
+        setEditable(true);
+        initializing = false;
+        onRemote();
+    };
+
+    var onAbort = config.onAbort = function (info) {
+        setEditable(false);
+        window.alert("Server Connection Lost");
+    };
+
+    var rt = Realtime.start(config);
+
+    canvas.on('mouse:up', onLocal);
+
+    $('#clear').on('click', function () {
+        canvas.clear();
+    });
+
+
+});