add user setting for seamless mode opacity

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;
+}

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',
 

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);

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()

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);

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,

src/templates/settings/application.html

@@ -36,8 +36,8 @@
 
       <div class="settings-item">
         <label>Layer Opacity</label>
-        <input type="range" class="layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
+        <input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
-        <span class="layer-opacity-text"></span>
+        <span class="settings-opacity-text layer-opacity-text"></span>
       </div>
 
       <div class="settings-item">
@@ -47,6 +47,12 @@
         </label>
       </div>
 
+      <div class="settings-item">
+        <label>Seamless opacity</label>
+        <input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0"  max="0.5" step="0.01"/>
+        <span class="settings-opacity-text seamless-opacity-text"></span>
+      </div>
+
       <div class="settings-item">
         <label>Maximum FPS</label>
         <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>