diff --git a/js/activity-works.js b/js/activity-works.js index 108eb6e..5181386 100644 --- a/js/activity-works.js +++ b/js/activity-works.js @@ -1,7 +1,7 @@ define(function (require) { var activity = require("sugar-web/activity/activity"); var icon = require("sugar-web/graphics/icon"); - + var DrawingApp = require("js/activity"); // Manipulate the DOM only when it is ready. require(['domReady!'], function (doc) { @@ -14,276 +14,8 @@ define(function (require) { icon.colorize(activityButton, colors); }); - var newButton = document.getElementById("new-button"); - newButton.onclick = function () { - new_positions(); - } - - var stopButton = document.getElementById("stop-button"); - stopButton.addEventListener('click', function (e) { - activity.close(); - }); - - var clearButton = document.getElementById("clear-button"); // **New Line** - clearButton.addEventListener('click', clearCanvas); // **New Line** - - // Then create a list of the label elements - nlabels = []; - for (i = 0; i < 21; i++) { - nlabels[i] = document.getElementById("n" + i.toString()); - } - - // Stage is an EaselJS construct - var canvas, stage; - // The display object currently under the mouse, or being dragged - var mouseTarget; - // Indicates whether we are currently in a drag operation - var dragStarted; - var offset; - var update = true; - var drawingCanvas; - var oldPt; - var midPt; - var oldMidPt; - var color; - var stroke; - var colors; - var index; - var imagepos = []; - var myimages = []; - var bitmaps = []; - var bitmapLabels = []; - var pen_bitmap; - var Star = "images/star.svg"; - var Dot = "images/dot.svg"; - var Pen = "images/pen.svg"; - var shape = 0; - - init(); - - function init() { - if (window.top != window) { - document.getElementById("header").style.display = "none"; - } - document.getElementById("loader").className = "loader"; - // Create the stage and point it to the canvas: - canvas = document.getElementById("myCanvas"); - index = 0; - colors = ["#D0033C", "#01A4A9", "#E9510E", "#CCCE01", "#FDC415", "#E1338C"]; - oldPt = new createjs.Point(400, 300); - midPt = oldPt; - oldMidPt = oldPt; - // Check to see if we are running in a browser with touch support - stage = new createjs.Stage(canvas); - // Enable touch interactions if supported on the current device: - createjs.Touch.enable(stage); - // Keep tracking the mouse even when it leaves the canvas - stage.mouseMoveOutside = true; - // Enable mouse over and mouse out events - stage.enableMouseOver(10); - // Load the source images: a dot, a star and a turtle - for (var i = 0; i < nlabels.length; i++) { - imagepos[i] = [-100, -100]; - } - for (var i = 0; i < nlabels.length; i++) { - myimages[i] = new Image(); - myimages[i].dataId = i; - if (i == 0) { - myimages[i].src = Star; - } - else { - myimages[i].src = Dot; - } - myimages[i].onload = handleImageLoad; - } - pen = new Image(); - pen.src = Pen; - pen.onload = handlePenLoad; - // Create a drawing canvas - drawingCanvas = new createjs.Shape(); - stage.addChild(drawingCanvas); - stage.update(); - } - - function stop() { - createjs.Ticker.removeEventListener("tick", tick); - } - - function handleImageLoad(event) { - var image = event.target; - var imgW = image.width; - var imgH = image.height; - var bitmap, bitText; - var container = new createjs.Container(); - stage.addChild(container); - // Create a shape that represents the center of the icon: - var hitArea = new createjs.Shape(); - hitArea.graphics.beginFill("#FFF").drawEllipse(-11, -14, 24, 18); - // Position hitArea relative to the internal coordinate system - // of the target (bitmap instances): - hitArea.x = imgW / 2; - hitArea.y = imgH / 2; - var i = myimages.indexOf(image); - // Create and populate the screen with number icons. - bitmap = new createjs.Bitmap(image); - bitmaps[i] = bitmap; // Save now so we can reposition later. - bitText = new createjs.Text(image.dataId.toString(), "bold 20px Arial", "#000"); - bitmapLabels[i] = bitText; - container.addChild(bitmap); - container.addChild(bitText); - var labelX = imagepos[i][0]; - var labelY = imagepos[i][1]; - bitmap.x = labelX; - bitmap.y = labelY; - bitText.x = labelX; - bitText.y = labelY; - bitmap.regX = Math.floor(imgW / 2); - bitmap.regY = Math.floor(imgH / 2); - if (i == 0) { - bitmap.scaleX = bitmap.scaleY = bitmap.scale = 0.5; - } - else { - bitmap.scaleX = bitmap.scaleY = bitmap.scale = 1.5; - } - bitmap.name = "bmp_" + i; - bitmap.cursor = "pointer"; - // Assign the hitArea to bitmap to use it for hit tests: - bitmap.hitArea = hitArea; - - // Wrapper function to provide scope for the event handlers: - (function (target) {})(bitmap); - - document.getElementById("loader").className = ""; - createjs.Ticker.addEventListener("tick", tick); - } - - function handlePenLoad(event) { - var image = event.target; - var imgW = image.width; - var imgH = image.height; - var bitmap; - var container = new createjs.Container(); - stage.addChild(container); - // Create a shape that represents the center of the icon - var hitArea = new createjs.Shape(); - hitArea.graphics.beginFill("#FFF").drawEllipse(-22, -28, 48, 36); - // Position hitArea relative to the internal coordinate system - // of the target (bitmap instances): - hitArea.x = imgW / 2; - hitArea.y = imgH / 2; - // Create a pen - bitmap = new createjs.Bitmap(image); - pen_bitmap = bitmap; - container.addChild(bitmap); - bitmap.x = imagepos[0][0]; - bitmap.y = imagepos[0][1]; - bitmap.regX = Math.floor(imgW / 2); - bitmap.regY = Math.floor(imgH / 2); - bitmap.scaleX = bitmap.scaleY = bitmap.scale = 1; - bitmap.name = "bmp_pen"; - bitmap.cursor = "pointer"; - // Assign the hitArea to bitmap to use it for hit tests: - bitmap.hitArea = hitArea; - // Wrapper function to provide scope for the event handlers: - (function (target) { - bitmap.onPress = function (evt) { - // Bump the target in front of its siblings: - container.addChild(target); - var offset = { - x: target.x - evt.stageX, - y: target.y - evt.stageY - }; - evt.onMouseMove = function (ev) { - target.x = ev.stageX + offset.x; - target.y = ev.stageY + offset.y; - // Indicate that the stage should be updated - // on the next tick: - update = true; - var midPt = new createjs.Point( - (oldPt.x + stage.mouseX) >> 1, - (oldPt.y + stage.mouseY) >> 1 - ); - drawingCanvas.graphics - .setStrokeStyle(stroke, 'round', 'round') - .beginStroke(color) - .moveTo(midPt.x, midPt.y) - .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); - oldPt.x = stage.mouseX; - oldPt.y = stage.mouseY; - oldMidPt.x = midPt.x; - oldMidPt.y = midPt.y; - } - } - bitmap.onMouseOver = function () { - target.scaleX = target.scaleY = target.scale * 1.2; - update = true; - color = colors[(index++) % colors.length]; - stroke = (Math.random() * 30 + 10) | 0; - oldPt = new createjs.Point(stage.mouseX, stage.mouseY); - oldMidPt = oldPt; - } - bitmap.onMouseOut = function () { - target.scaleX = target.scaleY = target.scale; - update = true; - } - })(bitmap); - - document.getElementById("loader").className = ""; - createjs.Ticker.addEventListener("tick", tick); - } - - function tick(event) { - // This set makes it so the stage only re-renders when - // an event handler indicates a change has happened. - if (update) { - update = false; // Only update once - stage.update(event); - } - } - - function new_positions() { - for (var i = 0; i < bitmaps.length; i++) { - var fontSize = 6; - var ovrhdX = i.toString().length * fontSize; - var ovrhdY = fontSize + 4; - if (shape < shapes.length) { - if (i < shapes[shape].length) { - bitmaps[i].x = shapes[shape][i][0]; - bitmaps[i].y = shapes[shape][i][1]; - } - else { - bitmaps[i].x = -100; - bitmaps[i].y = -100; - } - } - else { - bitmaps[i].x = Math.floor(canvas.width * Math.random()); - bitmaps[i].y = Math.floor(canvas.height * Math.random()); - } - bitmapLabels[i].x = bitmaps[i].x - ovrhdX; - bitmapLabels[i].y = bitmaps[i].y - ovrhdY; - } - pen_bitmap.x = bitmaps[0].x; - pen_bitmap.y = bitmaps[0].y; - drawingCanvas.graphics.clear(); - update = true; - shape = shape + 1; - } - - /** - * Clear the canvas and reset the drawing lines. - * This function removes only the drawn lines without affecting the turtles' positions. - */ - function clearCanvas() { - // Clear the drawing canvas - drawingCanvas.graphics.clear(); - - // Reset any drawing-related state variables if necessary - // (e.g., resetting old points if they are used) - oldPt = new createjs.Point(400, 300); - midPt = oldPt; - oldMidPt = oldPt; - update = true; - } + // Create an instance of DrawingApp + var app = new DrawingApp(); + app.init(); }); }); diff --git a/js/activity.js b/js/activity.js index 421d424..d22eb2d 100644 --- a/js/activity.js +++ b/js/activity.js @@ -16,275 +16,299 @@ define(function (require) { icon.colorize(activityButton, colors); }); - var newButton = document.getElementById("new-button"); - newButton.onclick = function () { - new_positions(); - } + // Initialize the main applicaton + var app = new DrawingApp(); + app.init(); + }); - var stopButton = document.getElementById("stop-button"); - stopButton.addEventListener('click', function (e) { - activity.close(); - }); - var clearButton = document.getElementById("clear-button"); // **New Line** - clearButton.addEventListener('click', clearCanvas); // **New Line** + function DrawingApp() { + // Stage and canvass + this.canvas = null; + this.stage = null; + this.drawingCanvas = null; - // Then create a list of the label elements - nlabels = []; - for (i = 0; i < 21; i++) { - nlabels[i] = document.getElementById("n" + i.toString()); - } + // Drawing variables + this.oldPt = null; + this.midPt = null; + this.oldMidPt = null; + this.color = null; + this.stroke = null; + this.colors = ["#D0033C", "#01A4A9", "#E9510E", "#CCCE01", "#FDC415", "#E1338C"]; + this.index = 0; + this.update = true; - // Stage is an EaselJS construct - var canvas, stage; - // The display object currently under the mouse, or being dragged - var mouseTarget; - // Indicates whether we are currently in a drag operation - var dragStarted; - var offset; - var update = true; - var drawingCanvas; - var oldPt; - var midPt; - var oldMidPt; - var color; - var stroke; - var colors; - var index; - var imagepos = []; - var myimages = []; - var bitmaps = []; - var bitmapLabels = []; - var pen_bitmap; - var Star = "images/star.svg"; - var Dot = "images/dot.svg"; - var Pen = "images/pen.svg"; - var shape = 0; - - init(); - - function init() { - if (window.top != window) { - document.getElementById("header").style.display = "none"; - } - document.getElementById("loader").className = "loader"; - // Create the stage and point it to the canvas: - canvas = document.getElementById("myCanvas"); - index = 0; - colors = ["#D0033C", "#01A4A9", "#E9510E", "#CCCE01", "#FDC415", "#E1338C"]; - oldPt = new createjs.Point(400, 300); - midPt = oldPt; - oldMidPt = oldPt; - // Check to see if we are running in a browser with touch support - stage = new createjs.Stage(canvas); - // Enable touch interactions if supported on the current device: - createjs.Touch.enable(stage); - // Keep tracking the mouse even when it leaves the canvas - stage.mouseMoveOutside = true; - // Enable mouse over and mouse out events - stage.enableMouseOver(10); - // Load the source images: a dot, a star and a turtle - for (var i = 0; i < nlabels.length; i++) { - imagepos[i] = [-100, -100]; - } - for (var i = 0; i < nlabels.length; i++) { - myimages[i] = new Image(); - myimages[i].dataId = i; - if (i == 0) { - myimages[i].src = Star; - } - else { - myimages[i].src = Dot; - } - myimages[i].onload = handleImageLoad; - } - pen = new Image(); - pen.src = Pen; - pen.onload = handlePenLoad; - // Create a drawing canvas - drawingCanvas = new createjs.Shape(); - stage.addChild(drawingCanvas); - stage.update(); - } + // Assets and bitmaps + this.imagepos = []; + this.myimages = []; + this.bitmaps = []; + this.bitmapLabels = []; + this.pen_bitmap = null; + + // Other variables + this.nlabels = []; + this.shape = 0; + + // Image sources + this.Star = "images/star.svg"; + this.Dot = "images/dot.svg"; + this.Pen = "images/pen.svg"; + } + + DrawingApp.prototype.init = function () { + var self = this; - function stop() { - createjs.Ticker.removeEventListener("tick", tick); + if (window.top != window) { + document.getElementById("header").style.display = "none"; } + document.getElementById("loader").className = "loader"; - function handleImageLoad(event) { - var image = event.target; - var imgW = image.width; - var imgH = image.height; - var bitmap, bitText; - var container = new createjs.Container(); - stage.addChild(container); - // Create a shape that represents the center of the icon: - var hitArea = new createjs.Shape(); - hitArea.graphics.beginFill("#FFF").drawEllipse(-11, -14, 24, 18); - // Position hitArea relative to the internal coordinate system - // of the target (bitmap instances): - hitArea.x = imgW / 2; - hitArea.y = imgH / 2; - var i = myimages.indexOf(image); - // Create and populate the screen with number icons. - bitmap = new createjs.Bitmap(image); - bitmaps[i] = bitmap; // Save now so we can reposition later. - bitText = new createjs.Text(image.dataId.toString(), "bold 20px Arial", "#000"); - bitmapLabels[i] = bitText; - container.addChild(bitmap); - container.addChild(bitText); - var labelX = imagepos[i][0]; - var labelY = imagepos[i][1]; - bitmap.x = labelX; - bitmap.y = labelY; - bitText.x = labelX; - bitText.y = labelY; - bitmap.regX = Math.floor(imgW / 2); - bitmap.regY = Math.floor(imgH / 2); - if (i == 0) { - bitmap.scaleX = bitmap.scaleY = bitmap.scale = 0.5; - } - else { - bitmap.scaleX = bitmap.scaleY = bitmap.scale = 1.5; - } - bitmap.name = "bmp_" + i; - bitmap.cursor = "pointer"; - // Assign the hitArea to bitmap to use it for hit tests: - bitmap.hitArea = hitArea; + // Set up the canvas and stage + this.canvas = document.getElementById("myCanvas"); + this.stage = new createjs.Stage(this.canvas); + + // Enable touch and mouse interactions + createjs.Touch.enable(this.stage); + this.stage.mouseMoveOutside = true; + this.stage.enableMouseOver(10); - // Wrapper function to provide scope for the event handlers: - (function (target) {})(bitmap); + // Initialize drawing points + this.oldPt = new createjs.Point(400, 300); + this.midPt = this.oldPt; + this.oldMidPt = this.oldPt; - document.getElementById("loader").className = ""; - createjs.Ticker.addEventListener("tick", tick); + // Initialize image positions and labels + for (var i = 0; i < 21; i++) { + this.imagepos[i] = [-100, -100]; + this.nlabels[i] = document.getElementById("n" + i.toString()); } - function handlePenLoad(event) { - var image = event.target; - var imgW = image.width; - var imgH = image.height; - var bitmap; - var container = new createjs.Container(); - stage.addChild(container); - // Create a shape that represents the center of the icon - var hitArea = new createjs.Shape(); - hitArea.graphics.beginFill("#FFF").drawEllipse(-22, -28, 48, 36); - // Position hitArea relative to the internal coordinate system - // of the target (bitmap instances): - hitArea.x = imgW / 2; - hitArea.y = imgH / 2; - // Create a pen - bitmap = new createjs.Bitmap(image); - pen_bitmap = bitmap; - container.addChild(bitmap); - bitmap.x = imagepos[0][0]; - bitmap.y = imagepos[0][1]; - bitmap.regX = Math.floor(imgW / 2); - bitmap.regY = Math.floor(imgH / 2); - bitmap.scaleX = bitmap.scaleY = bitmap.scale = 1; - bitmap.name = "bmp_pen"; - bitmap.cursor = "pointer"; - // Assign the hitArea to bitmap to use it for hit tests: - bitmap.hitArea = hitArea; - // Wrapper function to provide scope for the event handlers: - (function (target) { - bitmap.onPress = function (evt) { - // Bump the target in front of its siblings: - container.addChild(target); - var offset = { - x: target.x - evt.stageX, - y: target.y - evt.stageY - }; - evt.onMouseMove = function (ev) { - target.x = ev.stageX + offset.x; - target.y = ev.stageY + offset.y; - // Indicate that the stage should be updated - // on the next tick: - update = true; - var midPt = new createjs.Point( - (oldPt.x + stage.mouseX) >> 1, - (oldPt.y + stage.mouseY) >> 1 - ); - drawingCanvas.graphics - .setStrokeStyle(stroke, 'round', 'round') - .beginStroke(color) - .moveTo(midPt.x, midPt.y) - .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); - oldPt.x = stage.mouseX; - oldPt.y = stage.mouseY; - oldMidPt.x = midPt.x; - oldMidPt.y = midPt.y; - } - } - bitmap.onMouseOver = function () { - target.scaleX = target.scaleY = target.scale * 1.2; - update = true; - color = colors[(index++) % colors.length]; - stroke = (Math.random() * 30 + 10) | 0; - oldPt = new createjs.Point(stage.mouseX, stage.mouseY); - oldMidPt = oldPt; - } - bitmap.onMouseOut = function () { - target.scaleX = target.scaleY = target.scale; - update = true; - } - })(bitmap); + // Load images + this.loadImages(); + + // Create a drawing canvas for the activity + this.drawingCanvas = new createjs.Shape(); + this.stage.addChild(this.drawingCanvas); + this.stage.update(); + + // Set up event listeners + this.setupEventListeners(); + }; + + DrawingApp.prototype.loadImages = function () { + var self = this; - document.getElementById("loader").className = ""; - createjs.Ticker.addEventListener("tick", tick); + // Load the dot and star images + for (var i = 0; i < this.nlabels.length; i++) { + var image = new Image(); + image.dataId = i; + image.src = i === 0 ? this.Star : this.Dot; + image.onload = function (event) { + self.handleImageLoad(event); + }; + this.myimages.push(image); } - function tick(event) { - // This set makes it so the stage only re-renders when - // an event handler indicates a change has happened. - if (update) { - update = false; // Only update once - stage.update(event); - } + // Load the pen image + var penImage = new Image(); + penImage.src = this.Pen; + penImage.onload = function (event) { + self.handlePenLoad(event); + }; + }; + + DrawingApp.prototype.handleImageLoad = function (event) { + var image = event.target; + var imgW = image.width; + var imgH = image.height; + var i = image.dataId; + + var container = new createjs.Container(); + this.stage.addChild(container); + + // Create bitmap and text label + var bitmap = new createjs.Bitmap(image); + var bitText = new createjs.Text(i.toString(), "bold 20px Arial", "#000"); + this.bitmaps[i] = bitmap; + this.bitmapLabels[i] = bitText; + + container.addChild(bitmap); + container.addChild(bitText); + + // Set initial positions + bitmap.x = this.imagepos[i][0]; + bitmap.y = this.imagepos[i][1]; + bitText.x = bitmap.x; + bitText.y = bitmap.y; + + // Set registration point and scale + bitmap.regX = imgW / 2; + bitmap.regY = imgH / 2; + bitmap.scaleX = bitmap.scaleY = bitmap.scale = i === 0 ? 0.5 : 1.5; + + // Set hit area + var hitArea = new createjs.Shape(); + hitArea.graphics.beginFill("#FFF").drawEllipse(-11, -14, 24, 18); + hitArea.x = imgW / 2; + hitArea.y = imgH / 2; + bitmap.hitArea = hitArea; + + // Set cursor + bitmap.cursor = "pointer"; + + document.getElementById("loader").className = ""; + createjs.Ticker.addEventListener("tick", this.tick.bind(this)); + }; + + DrawingApp.prototype.handlePenLoad = function (event) { + var self = this; + var image = event.target; + var imgW = image.width; + var imgH = image.height; + + var container = new createjs.Container(); + this.stage.addChild(container); + + // Create pen bitmap + var bitmap = new createjs.Bitmap(image); + this.pen_bitmap = bitmap; + container.addChild(bitmap); + + // Set initial position and registration point + bitmap.x = this.imagepos[0][0]; + bitmap.y = this.imagepos[0][1]; + bitmap.regX = imgW / 2; + bitmap.regY = imgH / 2; + bitmap.scaleX = bitmap.scaleY = bitmap.scale = 1; + + // Set hit area + var hitArea = new createjs.Shape(); + hitArea.graphics.beginFill("#FFF").drawEllipse(-22, -28, 48, 36); + hitArea.x = imgW / 2; + hitArea.y = imgH / 2; + bitmap.hitArea = hitArea; + + // Set cursor + bitmap.cursor = "pointer"; + + // Event handlers + (function (target) { + target.onPress = function (evt) { + // Bring the target to the front + container.addChild(target); + var offset = { + x: target.x - evt.stageX, + y: target.y - evt.stageY + }; + + // Initialize drawing variables + self.color = self.colors[(self.index++) % self.colors.length]; + self.stroke = (Math.random() * 30 + 10) | 0; + self.oldPt = new createjs.Point(self.stage.mouseX, self.stage.mouseY); + self.oldMidPt = self.oldPt; + + evt.onMouseMove = function (ev) { + target.x = ev.stageX + offset.x; + target.y = ev.stageY + offset.y; + self.update = true; + + var midPt = new createjs.Point( + (self.oldPt.x + self.stage.mouseX) >> 1, + (self.oldPt.y + self.stage.mouseY) >> 1 + ); + self.drawingCanvas.graphics + .setStrokeStyle(self.stroke, 'round', 'round') + .beginStroke(self.color) + .moveTo(midPt.x, midPt.y) + .curveTo(self.oldPt.x, self.oldPt.y, self.oldMidPt.x, self.oldMidPt.y); + + self.oldPt.x = self.stage.mouseX; + self.oldPt.y = self.stage.mouseY; + self.oldMidPt.x = midPt.x; + self.oldMidPt.y = midPt.y; + }; + }; + + target.onMouseOver = function () { + target.scaleX = target.scaleY = target.scale * 1.2; + self.update = true; + }; + + target.onMouseOut = function () { + target.scaleX = target.scaleY = target.scale; + self.update = true; + }; + })(bitmap); + + document.getElementById("loader").className = ""; + createjs.Ticker.addEventListener("tick", this.tick.bind(this)); + }; + + DrawingApp.prototype.tick = function (event) { + if (this.update) { + this.update = false; + this.stage.update(event); } + }; - function new_positions() { - for (var i = 0; i < bitmaps.length; i++) { - var fontSize = 6; - var ovrhdX = i.toString().length * fontSize; - var ovrhdY = fontSize + 4; - if (shape < shapes.length) { - if (i < shapes[shape].length) { - bitmaps[i].x = shapes[shape][i][0]; - bitmaps[i].y = shapes[shape][i][1]; - } - else { - bitmaps[i].x = -100; - bitmaps[i].y = -100; - } - } - else { - bitmaps[i].x = Math.floor(canvas.width * Math.random()); - bitmaps[i].y = Math.floor(canvas.height * Math.random()); + DrawingApp.prototype.newPositions = function () { + for (var i = 0; i < this.bitmaps.length; i++) { + var fontSize = 6; + var ovrhdX = i.toString().length * fontSize; + var ovrhdY = fontSize + 4; + + if (this.shape < shapes.length) { + if (i < shapes[this.shape].length) { + this.bitmaps[i].x = shapes[this.shape][i][0]; + this.bitmaps[i].y = shapes[this.shape][i][1]; + } else { + this.bitmaps[i].x = -100; + this.bitmaps[i].y = -100; } - bitmapLabels[i].x = bitmaps[i].x - ovrhdX; - bitmapLabels[i].y = bitmaps[i].y - ovrhdY; + } else { + this.bitmaps[i].x = Math.floor(this.canvas.width * Math.random()); + this.bitmaps[i].y = Math.floor(this.canvas.height * Math.random()); } - pen_bitmap.x = bitmaps[0].x; - pen_bitmap.y = bitmaps[0].y; - drawingCanvas.graphics.clear(); - update = true; - shape = shape + 1; - } - /** - * Clear the canvas and reset the drawing lines. - * This function removes only the drawn lines without affecting the turtles' positions. - */ - function clearCanvas() { - // Clear the drawing canvas - drawingCanvas.graphics.clear(); - - // Reset any drawing-related state variables if necessary - // (e.g., resetting old points if they are used) - oldPt = new createjs.Point(400, 300); - midPt = oldPt; - oldMidPt = oldPt; - update = true; + this.bitmapLabels[i].x = this.bitmaps[i].x - ovrhdX; + this.bitmapLabels[i].y = this.bitmaps[i].y - ovrhdY; } - }); + this.pen_bitmap.x = this.bitmaps[0].x; + this.pen_bitmap.y = this.bitmaps[0].y; + this.drawingCanvas.graphics.clear(); + this.update = true; + this.shape += 1; + }; + + DrawingApp.prototype.clearCanvas = function () { + this.drawingCanvas.graphics.clear(); + this.oldPt = new createjs.Point(400, 300); + this.midPt = this.oldPt; + this.oldMidPt = this.oldPt; + this.update = true; + }; + + DrawingApp.prototype.setupEventListeners = function () { + var self = this; + + // New positions button + var newButton = document.getElementById("new-button"); + newButton.onclick = function () { + self.newPositions(); + }; + + // Stop activity button + var stopButton = document.getElementById("stop-button"); + stopButton.addEventListener('click', function () { + activity.close(); + }); + + // Clear canvas button + var clearButton = document.getElementById("clear-button"); + clearButton.addEventListener('click', function () { + self.clearCanvas(); + }); + }; + + // Export the DrawingApp class + return DrawingApp; });