diff --git a/src/css/settings-application.css b/src/css/settings-application.css
index 2951bd08..341f08ff 100644
--- a/src/css/settings-application.css
+++ b/src/css/settings-application.css
@@ -30,13 +30,20 @@
border-color: var(--highlight-color);
}
-.layer-opacity-input {
+.settings-opacity-input {
margin: 5px;
vertical-align: middle;
+}
+
+.layer-opacity-input {
width: 100px;
}
-.layer-opacity-text {
+.seamless-opacity-input {
+ width: 75px;
+}
+
+.settings-opacity-text {
height: 31px;
display: inline-block;
line-height: 30px;
@@ -55,3 +62,7 @@
/* Override the default 10px margin bottom for this panel */
margin-bottom: 15px;
}
+
+.settings-section-application .button-primary {
+ margin-top: 10px;
+}
diff --git a/src/js/Constants.js b/src/js/Constants.js
index f6ac4519..e2f9048e 100644
--- a/src/js/Constants.js
+++ b/src/js/Constants.js
@@ -19,7 +19,7 @@ var Constants = {
DEFAULT_PEN_COLOR : '#000000',
TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',
- SEAMLESS_MODE_OVERLAY_COLOR : 'rgba(255, 255, 255, 0.5)',
+ SEAMLESS_MODE_OVERLAY_COLOR : 'rgba(255, 255, 255, 0)',
CURRENT_COLORS_PALETTE_ID : '__current-colors',
diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js
index 50ee2195..92d6cd57 100644
--- a/src/js/controller/settings/ApplicationSettingsController.js
+++ b/src/js/controller/settings/ApplicationSettingsController.js
@@ -43,8 +43,16 @@
var layerOpacityInput = document.querySelector('.layer-opacity-input');
layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
+ this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
this.updateLayerOpacityText_(layerOpacityInput.value);
+ // Seamless mask opacity
+ var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
+ seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+ this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
+ this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
+ this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
+
// Form
this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
@@ -94,11 +102,27 @@
}
};
+ ns.ApplicationSettingsController.prototype.onSeamlessOpacityChange_ = function (evt) {
+ var target = evt.target;
+ var opacity = parseFloat(target.value);
+ if (!isNaN(opacity)) {
+ pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
+ this.updateSeamlessOpacityText_(opacity);
+ } else {
+ target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+ }
+ };
+
ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) {
var layerOpacityText = document.querySelector('.layer-opacity-text');
layerOpacityText.innerHTML = opacity;
};
+ ns.ApplicationSettingsController.prototype.updateSeamlessOpacityText_ = function (opacity) {
+ var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
+ seamlessOpacityText.innerHTML = opacity;
+ };
+
ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
evt.preventDefault();
$.publish(Events.CLOSE_SETTINGS_DRAWER);
diff --git a/src/js/rendering/frame/CachedFrameRenderer.js b/src/js/rendering/frame/CachedFrameRenderer.js
index 58fe0004..e5823c47 100644
--- a/src/js/rendering/frame/CachedFrameRenderer.js
+++ b/src/js/rendering/frame/CachedFrameRenderer.js
@@ -35,6 +35,7 @@
this.getZoom(),
this.getGridWidth(),
pskl.UserSettings.get('SEAMLESS_MODE'),
+ pskl.UserSettings.get('SEAMLESS_OPACITY'),
offset.x, offset.y,
size.width, size.height,
frame.getHash()
diff --git a/src/js/rendering/frame/FrameRenderer.js b/src/js/rendering/frame/FrameRenderer.js
index c9b610ce..15154e00 100644
--- a/src/js/rendering/frame/FrameRenderer.js
+++ b/src/js/rendering/frame/FrameRenderer.js
@@ -293,7 +293,9 @@
* differentiate those additional frames from the main frame.
*/
ns.FrameRenderer.prototype.drawTiledFrames_ = function (context, image, w, h, z) {
- context.fillStyle = Constants.SEAMLESS_MODE_OVERLAY_COLOR;
+ var opacity = pskl.UserSettings.get('SEAMLESS_OPACITY');
+ opacity = pskl.utils.Math.minmax(opacity, 0, 1);
+ context.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')';
[[0, -1], [0, 1], [-1, -1], [-1, 0], [-1, 1], [1, -1], [1, 0], [1, 1]].forEach(function (d) {
context.drawImage(image, d[0] * w * z, d[1] * h * z);
context.fillRect(d[0] * w * z, d[1] * h * z, w * z, h * z);
diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js
index fcb9fe1b..0e79be1a 100644
--- a/src/js/utils/UserSettings.js
+++ b/src/js/utils/UserSettings.js
@@ -7,6 +7,7 @@
DEFAULT_SIZE : 'DEFAULT_SIZE',
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
SELECTED_PALETTE : 'SELECTED_PALETTE',
+ SEAMLESS_OPACITY : 'SEAMLESS_OPACITY',
SEAMLESS_MODE : 'SEAMLESS_MODE',
ORIGINAL_SIZE_PREVIEW : 'ORIGINAL_SIZE_PREVIEW',
ONION_SKIN : 'ONION_SKIN',
@@ -25,6 +26,7 @@
},
'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
+ 'SEAMLESS_OPACITY' : 0.30,
'SEAMLESS_MODE' : false,
'ORIGINAL_SIZE_PREVIEW' : false,
'ONION_SKIN' : false,
diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html
index 504d9d67..e9189c38 100644
--- a/src/templates/settings/application.html
+++ b/src/templates/settings/application.html
@@ -36,8 +36,8 @@
-
-
+
+
@@ -47,6 +47,12 @@
+
+
+
+
+
+