Permalink
Browse files

Add drawing program.

  • Loading branch information...
michaeljbishop committed Oct 19, 2016
1 parent 3175919 commit d5fcc3701f2dd2e446436642189c283dfad88e55
Showing with 98 additions and 43 deletions.
  1. +4 −1 web/static/css/app.css
  2. +91 −0 web/static/js/app.js
  3. +1 −6 web/templates/layout/app.html.eex
  4. +2 −36 web/templates/page/index.html.eex
View
@@ -1 +1,4 @@
-/* This file is for your main application css. */
+/* This file is for your main application css. */
+canvas#draw-canvas {
+ outline-style: solid;
+}
View
@@ -19,3 +19,94 @@ import "phoenix_html"
// paths "./socket" or full ones "web/static/js/socket".
// import socket from "./socket"
+
+var canvas = document.getElementById("draw-canvas");
+var ctx = canvas.getContext("2d");
+
+function drawLine(from, to) {
+ ctx.moveTo(from.x, from.y);
+ ctx.lineTo(to.x, to.y);
+ ctx.stroke();
+}
+
+// ------------------------
+// General Input Tracking
+// ------------------------
+
+var lastPoints = {};
+
+function moveTo(identifier, point) {
+ lastPoints[identifier] = point;
+}
+
+function lineTo(identifier, point) {
+ if (lastPoints[identifier]) {
+ drawLine(lastPoints[identifier], point);
+ }
+ lastPoints[identifier] = point;
+}
+
+function getPos(client) {
+ var rect = canvas.getBoundingClientRect();
+ return {
+ x: client.clientX - rect.left,
+ y: client.clientY - rect.top
+ };
+}
+
+function haltEventBefore(handler) {
+ return function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ handler(event);
+ }
+}
+
+// ----------------
+// Touch Handling
+// ----------------
+
+var mouseDown = false;
+
+canvas.addEventListener('mousedown', haltEventBefore(function(event) {
+ mouseDown = true;
+ moveTo("mouse", getPos(event));
+}));
+
+// We need to be able to listen for mouse ups for the entire document
+document.documentElement.addEventListener('mouseup', function(event) {
+ mouseDown = false;
+});
+
+canvas.addEventListener('mousemove', haltEventBefore(function(event) {
+ if (!mouseDown) return;
+ lineTo("mouse", getPos(event));
+}));
+
+canvas.addEventListener('mouseleave', haltEventBefore(function(event) {
+ if (!mouseDown) return;
+ lineTo("mouse", getPos(event));
+}));
+
+canvas.addEventListener('mouseenter', haltEventBefore(function(event) {
+ if (!mouseDown) return;
+ moveTo("mouse", getPos(event));
+}));
+
+// ----------------
+// Touch Handling
+// ----------------
+
+function handleTouchesWith(func) {
+ return haltEventBefore(function(event) {
+ for (var i = 0; i < event.changedTouches.length; i++) {
+ var touch = event.changedTouches[i];
+ func(touch.identifier, getPos(touch));
+ }
+ });
+};
+
+canvas.addEventListener('touchstart', handleTouchesWith(moveTo));
+canvas.addEventListener('touchmove', handleTouchesWith(lineTo));
+canvas.addEventListener('touchend', handleTouchesWith(lineTo));
+canvas.addEventListener('touchcancel', handleTouchesWith(moveTo));
@@ -14,12 +14,7 @@
<body>
<div class="container">
<header class="header">
- <nav role="navigation">
- <ul class="nav nav-pills pull-right">
- <li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
- </ul>
- </nav>
- <span class="logo"></span>
+ <h1>Draw!</h1>
</header>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
@@ -1,36 +1,2 @@
-<div class="jumbotron">
- <h2><%= gettext "Welcome to %{name}", name: "Phoenix!" %></h2>
- <p class="lead">A productive web framework that<br />does not compromise speed and maintainability.</p>
-</div>
-
-<div class="row marketing">
- <div class="col-lg-6">
- <h4>Resources</h4>
- <ul>
- <li>
- <a href="http://phoenixframework.org/docs/overview">Guides</a>
- </li>
- <li>
- <a href="https://hexdocs.pm/phoenix">Docs</a>
- </li>
- <li>
- <a href="https://github.com/phoenixframework/phoenix">Source</a>
- </li>
- </ul>
- </div>
-
- <div class="col-lg-6">
- <h4>Help</h4>
- <ul>
- <li>
- <a href="http://groups.google.com/group/phoenix-talk">Mailing list</a>
- </li>
- <li>
- <a href="http://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on freenode IRC</a>
- </li>
- <li>
- <a href="https://twitter.com/elixirphoenix">@elixirphoenix</a>
- </li>
- </ul>
- </div>
-</div>
+<canvas id="draw-canvas" class="bordered" width="600" height="600">
+</canvas>

0 comments on commit d5fcc37

Please sign in to comment.