rename canvas app to 'whiteboard'
This commit is contained in:
ansuz
File diff suppressed because it is too large
Load Diff
@@ -1,78 +0,0 @@
|
||||
<!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-bootload="main.js" data-main="/common/boot.js" 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;
|
||||
}
|
||||
#copy {
|
||||
padding-left: 75px;
|
||||
}
|
||||
span.palette {
|
||||
height: 4vw;
|
||||
width: 4vw;
|
||||
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>
|
||||
|
||||
<div id="copy">
|
||||
<h2>Welcome to CryptCanvas!</h2>
|
||||
<h3>Zero Knowledge Realtime Collaborative Canvas Editing</h3>
|
||||
</div>
|
||||
|
||||
<div id="controls">
|
||||
<button id="clear">Clear</button>
|
||||
<button id="save">Save</button>
|
||||
<input id="width" type="number" value="5"></input>
|
||||
<div id="colors"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,150 +0,0 @@
|
||||
require.config({ paths: {
|
||||
'json.sortify': '/bower_components/json.sortify/dist/JSON.sortify'
|
||||
}});
|
||||
|
||||
define([
|
||||
'/api/config?cb=' + Math.random().toString(16).substring(2),
|
||||
'/bower_components/chainpad-netflux/chainpad-netflux.js',
|
||||
'/bower_components/chainpad-crypto/crypto.js',
|
||||
'/bower_components/textpatcher/TextPatcher.amd.js',
|
||||
'json.sortify',
|
||||
'/bower_components/chainpad-json-validator/json-ot.js',
|
||||
'/common/cryptpad-common.js',
|
||||
'fabric.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
'/bower_components/file-saver/FileSaver.min.js',
|
||||
//'/customize/pad.js'
|
||||
], function (Config, Realtime, Crypto, TextPatcher, JSONSortify, JsonOT, Cryptpad) {
|
||||
var saveAs = window.saveAs;
|
||||
|
||||
var module = window.APP = { };
|
||||
var $ = module.$ = window.jQuery;
|
||||
var Fabric = module.Fabric = window.fabric;
|
||||
|
||||
var secret = Cryptpad.getSecrets();
|
||||
/*
|
||||
var key;
|
||||
var channel = '';
|
||||
if (!/#/.test(window.location.href)) {
|
||||
key = Crypto.genKey();
|
||||
} else {
|
||||
var hash = window.location.hash.slice(1);
|
||||
channel = hash.slice(0, 32);
|
||||
key = hash.slice(32);
|
||||
}*/
|
||||
|
||||
/* 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', 'beige', 'brown', 'cyan', 'darkcyan', 'gold', 'yellow', 'pink'];
|
||||
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 saveImage = module.saveImage = function () {
|
||||
$canvas[0].toBlob(function (blob) {
|
||||
var defaultName = "pretty-picture.png";
|
||||
// TODO make this translatable
|
||||
saveAs(blob, window.prompt("What would you like to name your image?",
|
||||
defaultName) || "pretty-picture.png");
|
||||
});
|
||||
};
|
||||
|
||||
var initializing = true;
|
||||
|
||||
var config = module.config = {
|
||||
initialState: '{}',
|
||||
websocketURL: Cryptpad.getWebsocketURL(),
|
||||
validateKey: secret.keys.validateKey,
|
||||
readOnly: false, // TODO, support read-only
|
||||
channel: secret.channel,
|
||||
crypto: Crypto.createEncryptor(secret.keys),
|
||||
transformFunction: JsonOT.transform,
|
||||
};
|
||||
|
||||
var editHash;
|
||||
var onInit = config.onInit = function (info) {
|
||||
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
|
||||
Cryptpad.replaceHash(editHash);
|
||||
};
|
||||
|
||||
// used for debugging, feel free to remove
|
||||
var Catch = function (f) {
|
||||
return function () {
|
||||
try {
|
||||
f();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
var onRemote = config.onRemote = Catch(function () {
|
||||
if (initializing) { return; }
|
||||
var userDoc = module.realtime.getUserDoc();
|
||||
|
||||
canvas.loadFromJSON(userDoc);
|
||||
canvas.renderAll();
|
||||
});
|
||||
|
||||
var onLocal = config.onLocal = Catch(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");
|
||||
|
||||
if (window.confirm("Would you like to save your image?")) {
|
||||
saveImage();
|
||||
}
|
||||
};
|
||||
|
||||
var rt = Realtime.start(config);
|
||||
|
||||
canvas.on('mouse:up', onLocal);
|
||||
|
||||
$('#clear').on('click', function () {
|
||||
canvas.clear();
|
||||
});
|
||||
|
||||
$('#save').on('click', function () {
|
||||
saveImage();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user