diff --git a/src/client/ui/client.js b/src/client/ui/client.js index 2a9da7eb6..fe919dc09 100644 --- a/src/client/ui/client.js +++ b/src/client/ui/client.js @@ -33,15 +33,15 @@ svgCanvas = new SvgCanvas(drawingArea); + network = realTimeConnection; + network.connect(window.location.port); + drawingArea.preventBrowserDragDefaults(); - sendPointerEventsOverNetwork(); + handleRealTimeNetwork(); handleClearScreenClick(); handleMouseDragEvents(); handleTouchDragEvents(); - network = realTimeConnection; - network.connect(window.location.port); - return svgCanvas; }; @@ -49,11 +49,35 @@ svgCanvas = null; }; - function sendPointerEventsOverNetwork() { - drawingArea.onMouseMove(function(coordinate) { + function handleRealTimeNetwork() { + documentBody.onMouseMove(function(coordinate) { + var relativeOffset = coordinate.toRelativeOffset(drawingArea); + network.sendPointerLocation(relativeOffset.x, relativeOffset.y); + }); + documentBody.onSingleTouchMove(function(coordinate) { var relativeOffset = coordinate.toRelativeOffset(drawingArea); network.sendPointerLocation(relativeOffset.x, relativeOffset.y); }); + + var allCursors = {}; + + network.onPointerLocation(function(event) { + var id = event.id; + if (allCursors[id] === undefined) allCursors[id] = createCursor(); + moveCursor(allCursors[id], event.x, event.y); + }); + + function createCursor() { + var cursor = HtmlElement.fromHtml("
"); + cursor.appendSelfToBody(); + return cursor; + } + + function moveCursor(cursor, x, y) { + var coordinate = HtmlCoordinate.fromRelativeOffset(drawingArea, x, y).toPageOffset(); + cursor.toDomElement().style.top = coordinate.y + "px"; + cursor.toDomElement().style.left = coordinate.x + "px"; + } } function handleClearScreenClick() { diff --git a/todo.txt b/todo.txt index c59f664e7..865191005 100644 --- a/todo.txt +++ b/todo.txt @@ -49,7 +49,4 @@ Engineering Tasks: - Update smoke tests for real-time networking To Do on current task: -- Spike ghost pointers - - listen for pointer events - - display ghost pointer for each event - - display multiple ghost pointers when multiple clients are connected \ No newline at end of file +* Spike ghost pointers (DONE) \ No newline at end of file