// Copyright (c) 2014-2017 Walter Bender // // This program is free software; you can redistribute it and/or // modify it under the terms of the The GNU Affero General Public // License as published by the Free Software Foundation; either // version 3 of the License, or (at your option) any later version. // // You should have received a copy of the GNU Affero General Public // License along with this library; if not, write to the Free Software // Foundation, 51 Franklin Street, Suite 500 Boston, MA 02110-1335 USA // The trashcan is an area at the bottom of the screen where stacks of // blocks can be dragged. Once in the trash area, they are marked as // trash and hidden. There is a menu button that can be used to // restore trash. requirejs(['activity/utils']); var TRASHWIDTH = 120; var TRASHHEIGHT = 120; function Trashcan () { this.isVisible = false; this._canvas = null; this._stage = null; this._size = null; this._refreshCanvas = null; this._scale = 1; this._iconsize = 55; // default value this._container = new createjs.Container(); this._borderHighlightBitmap = null; this._isHighlightInitialized = false; this._inAnimation = false; this._animationInterval = null; this._highlightPower = 255; this._animationLevel = 0; this.animationTime = 500; this.init = function () { this._stage.addChild(this._container); this._stage.setChildIndex(this._container, 0); this.resizeEvent(1); this._makeTrash(); }; this.setCanvas = function (canvas) { this._canvas = canvas; return this; }; this.setStage = function (stage) { this._stage = stage; return this; }; this.setSize = function (size) { this._size = size; return this; }; this.setRefreshCanvas = function (refreshCanvas) { this._refreshCanvas = refreshCanvas; return this; }; this._makeBorderHighlight = function (isActive) { var img = new Image(); var that = this; img.onload = function () { that._borderHighlightBitmap = new createjs.Bitmap(img); that._borderHighlightBitmap.scaleX = that._size / that._iconsize; that._borderHighlightBitmap.scaleY = that._size / that._iconsize; if (!that._isHighlightInitialized) { that._container.visible = false; that._isHighlightInitialized = true; } else { that._container.removeChildAt(that._container.children.length - 1); } that._container.addChild(that._borderHighlightBitmap); that._borderHighlightBitmap.visible = true; }; var highlightString = 'rgb(' + this._highlightPower + ',' + this._highlightPower + ',' + this._highlightPower + ')'; if (isActive) { // When trash is activated, warn the user with red highlight. highlightString = 'rgb(255, 0, 0)'; } img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(BORDER.replace('stroke_color', highlightString)))); }; this._makeBorder = function () { var img = new Image(); var that = this; img.onload = function () { border = new createjs.Bitmap(img); bitmap.scaleX = that._size / that._iconsize; bitmap.scaleY = that._size / that._iconsize; that._container.addChild(border); that._makeBorderHighlight(false); }; img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(BORDER.replace('stroke_color', '#e0e0e0')))); }; this._makeTrash = function () { var img = new Image(); var that = this; img.onload = function () { bitmap = new createjs.Bitmap(img); that._container.addChild(bitmap); that._iconsize = bitmap.getBounds().width; bitmap.scaleX = that._size / that._iconsize; bitmap.scaleY = that._size / that._iconsize; bitmap.x = ((TRASHWIDTH - that._size) / 2) * bitmap.scaleX; bitmap.y = ((TRASHHEIGHT - that._size) / 2) * bitmap.scaleY; that._makeBorder(); }; img.src = 'images/trash.svg'; }; this.resizeEvent = function (scale) { this._scale = scale; this._container.x = ((this._canvas.width / this._scale) - TRASHWIDTH) / 2; this._container.y = (this._canvas.height / this._scale) - TRASHHEIGHT; }; this.hide = function () { createjs.Tween.get(this._container).to({alpha: 0}, 200).set({visible: false}); }; this.show = function () { this.stopHighlightAnimation(); createjs.Tween.get(this._container).to({alpha: 0.0, visible: true}).to({alpha: 1.0}, 200); }; this.startHighlightAnimation = function () { if (this._inAnimation) { return; } this._inAnimation = true; var that = this; this._animationInterval = setInterval(function () { that._animationLevel += 20; if (that._animationLevel >= that.animationTime) { that.isVisible = true; that._makeBorderHighlight(true); // Make it active. that._refreshCanvas(); clearInterval(that._animationInterval); // Autostop animation. return; } that._highlightPower = parseInt(255 - (255 * (that._animationLevel / that.animationTime)), 10); that._makeBorderHighlight(false); that._refreshCanvas(); }, 20); this._switchHighlightVisibility(true); }; this.stopHighlightAnimation = function () { if (!this._inAnimation) { return; } clearInterval(this._animationInterval); this._inAnimation = false; this.isVisible = false; this._animationLevel = 0; this._highlightPower = 255; this._makeBorderHighlight(false); this._switchHighlightVisibility(false); }; this._switchHighlightVisibility = function (bool) { last(this._container.children).visible = bool; this._container.children[1].visible = !bool; this._container.visible = true; this._refreshCanvas(); }; this.overTrashcan = function (x, y) { var tx = this._container.x; var ty = this._container.y; if (x < tx) { return false; } else if (x > tx + TRASHWIDTH) { return false; } if (y < ty) { return false; } return true; }; };