diff --git a/src/js/Events.js b/src/js/Events.js index 8f1ddeb4..8b71a254 100644 --- a/src/js/Events.js +++ b/src/js/Events.js @@ -30,13 +30,6 @@ var Events = { CLOSE_SETTINGS_DRAWER : 'CLOSE_SETTINGS_DRAWER', - /** - * Fire this event to update the opacity of the overlay frame. - * Payload : - * 1st argument : opacity {Number} between 0 and 1 - */ - SET_OVERLAY_OPACITY : 'SET_OVERLAY_OPACITY', - /** * The framesheet was reseted and is now probably drastically different. * Number of frames, content of frames, color used for the palette may have changed. diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js index e0562da2..430664fc 100644 --- a/src/js/controller/DrawingController.js +++ b/src/js/controller/DrawingController.js @@ -64,7 +64,6 @@ $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this)); $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this)); - $.subscribe(Events.SET_OVERLAY_OPACITY, this.onSetOverlayOpacity_.bind(this)); pskl.app.shortcutService.addShortcut('0', this.resetZoom_.bind(this)); pskl.app.shortcutService.addShortcut('+', this.increaseZoom_.bind(this, 1)); @@ -137,10 +136,6 @@ $.publish(Events.ZOOM_CHANGED); }; - ns.DrawingController.prototype.onSetOverlayOpacity_ = function (evt, opacity) { - this.overlayRenderer.setCanvasOpacity(opacity); - }; - /** * @private */ diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js index 11da4f74..82ea9ada 100644 --- a/src/js/rendering/frame/FrameRenderer.js +++ b/src/js/rendering/frame/FrameRenderer.js @@ -99,12 +99,6 @@ return this.zoom; }; - ns.FrameRenderer.prototype.setCanvasOpacity = function (opacity) { - if (this.displayCanvas) { - this.displayCanvas.style.opacity = opacity; - } - }; - ns.FrameRenderer.prototype.setDisplaySize = function (width, height) { this.displayWidth = width; this.displayHeight = height; diff --git a/src/js/tools/drawing/selection/BaseSelect.js b/src/js/tools/drawing/selection/BaseSelect.js index 59b3c752..644423db 100644 --- a/src/js/tools/drawing/selection/BaseSelect.js +++ b/src/js/tools/drawing/selection/BaseSelect.js @@ -35,8 +35,6 @@ this.lastCol = col; this.lastRow = row; - $.publish(Events.SET_OVERLAY_OPACITY, [0.5]); - // The select tool can be in two different state. // If the inital click of the tool is not on a selection, we go in 'select' // mode to create a selection. @@ -71,8 +69,6 @@ } else if (this.mode == 'moveSelection') { this.onSelectionDragEnd_(col, row, color, frame, overlay); } - - $.publish(Events.SET_OVERLAY_OPACITY, [1]); }; /** @@ -113,12 +109,19 @@ for (var i = 0, l = pixels.length; i < l ; i++) { var pixel = pixels[i]; var hasColor = pixel.color && pixel.color !== Constants.TRANSPARENT_COLOR ; - var color = hasColor ? pixel.color : Constants.SELECTION_TRANSPARENT_COLOR; + var color = hasColor ? this.getTransparentVariant_(pixel.color) : Constants.SELECTION_TRANSPARENT_COLOR; overlay.setPixel(pixels[i].col, pixels[i].row, color); } }; + ns.BaseSelect.prototype.getTransparentVariant_ = pskl.utils.FunctionUtils.memo(function (colorStr) { + var color = window.tinycolor(colorStr); + color = window.tinycolor.lighten(color, 10); + color.setAlpha(0.5); + return color.toRgbString(); + }, {}); + // The list of callbacks to implement by specialized tools to implement the selection creation behavior. /** @protected */ ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {}; diff --git a/src/js/utils/FunctionUtils.js b/src/js/utils/FunctionUtils.js new file mode 100644 index 00000000..71a05b1c --- /dev/null +++ b/src/js/utils/FunctionUtils.js @@ -0,0 +1,16 @@ +(function () { + var ns = $.namespace('pskl.utils'); + + ns.FunctionUtils = { + memo : function (fn, cache, scope) { + var memoized = function () { + var key = Array.prototype.join.call(arguments, '-'); + if (!cache[key]) { + cache[key] = fn.apply(scope, arguments); + } + return cache[key]; + }; + return memoized; + } + }; +})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 3583713a..64f8fd8e 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -23,6 +23,7 @@ "js/utils/Dom.js", "js/utils/Event.js", "js/utils/Environment.js", + "js/utils/FunctionUtils.js", "js/utils/Math.js", "js/utils/FileUtils.js", "js/utils/FileUtilsDesktop.js",