diff --git a/js/activity.js b/js/activity.js index 3c1a92df0c..952b45c1fe 100644 --- a/js/activity.js +++ b/js/activity.js @@ -4391,8 +4391,7 @@ function Activity() { .setRefreshCanvas(refreshCanvas) .init(); - // Put the boundary in the turtles container so it scrolls - // with the blocks. + // Put the boundary in the turtles container so it scrolls with the blocks. turtles = new Turtles(); turtles.masterStage = stage; turtles.stage = turtleContainer; @@ -4403,11 +4402,9 @@ function Activity() { turtles.doGrid = _doCartesianPolar; turtles.refreshCanvas = refreshCanvas; - // Put the boundary in the blocks container so it scrolls - // with the blocks. + // Put the boundary in the blocks container so it scrolls with the blocks. - boundary = new Boundary(); - boundary.setStage(blocksContainer).init(); + boundary = new Boundary(blocksContainer); blocks = new Blocks(this); blocks diff --git a/js/boundary.js b/js/boundary.js index 0456ed01dd..0a06511193 100644 --- a/js/boundary.js +++ b/js/boundary.js @@ -14,44 +14,32 @@ // trash and hidden. There is a menu button that can be used to // restore trash. -function Boundary() { - this._stage = null; - this._container = null; - - this.setStage = function(stage) { - this._stage = stage; - return this; - }; - - this.resizeEvent = function(scale) {}; - - this.init = function() { +class Boundary { + constructor(stage) { this._container = new createjs.Container(); + this._stage = stage; this._stage.addChild(this._container); this._stage.setChildIndex(this._container, 0); - }; + } - this.setScale = function(w, h, scale) { + // resizeEvent(scale) {}; + + setScale(w, h, scale) { this.destroy(); this.create(w, h, scale); - }; + } - this.destroy = function() { + destroy() { if (this._container.children.length > 0) { this._container.removeChild(this._container.children[0]); } - }; + } - this.offScreen = function(x, y) { - return ( - x < this.x || - x > this.x + this.dx || - y < this.y || - y > this.y + this.dy - ); - }; + offScreen(x, y) { + return x < this.x || x > this.x + this.dx || y < this.y || y > this.y + this.dy; + } - this.create = function(w, h, scale) { + create(w, h, scale) { this.w = w / scale; this.x = 55 + 13; this.dx = this.w - (110 + 26); @@ -60,40 +48,37 @@ function Boundary() { this.y = 55 + 13; this.dy = this.h - (55 + 26); - that = this; - - function __makeBoundary() { + const __makeBoundary = () => { let img = new Image(); - img.onload = function() { + img.onload = () => { bitmap = new createjs.Bitmap(img); - that._container.addChild(bitmap); + this._container.addChild(bitmap); }; - img.src = "data:image/svg+xml;base64," + window.btoa( unescape( encodeURIComponent( - BOUNDARY.replace("HEIGHT", that.h) - .replace("WIDTH", that.w) - .replace("Y", that.y) - .replace("X", that.x) - .replace("DY", that.dy) - .replace("DX", that.dx) + BOUNDARY.replace("HEIGHT", this.h) + .replace("WIDTH", this.w) + .replace("Y", this.y) + .replace("X", this.x) + .replace("DY", this.dy) + .replace("DX", this.dx) .replace("stroke_color", "#e08080") ) ) ); - } + }; __makeBoundary(); - }; + } - this.hide = function() { + hide() { this._container.visible = false; - }; + } - this.show = function() { + show() { this._container.visible = true; - }; + } }