WebAssembly filter application is now configurable

src/components/modal/modal.vue

@@ -29,7 +29,9 @@
             @click="closeModal()"
         >&#215;</button>
         <div ref="content" class="content">
-            <slot name="content" />
+            <div class="content-wrapper">
+                <slot name="content" />
+            </div>
             <div class="actions">
                 <slot name="actions" />
             </div>
@@ -63,7 +65,11 @@ export default {
 
     .content {
         position: relative;
+    }
 
+    .content-wrapper {
+        overflow-y: auto;
+        height: calc(100% - 50px);
         label {
             font-weight: bold;
             color: #FFF;

src/components/preferences/messages.json

@@ -2,7 +2,9 @@
     "en-US": {
         "preferences": "Preferences",
         "lowMemoryMode": "Low memory mode",
-        "lowMemoryExpl": "On devices with low memory (like phones), this mode is recommended to reduce the amount of allocated memory. It comes at the expense of combining several brush strokes into a single history state (e.g. undo will go back several strokes instead of one).",
+        "lowMemoryExpl": "On devices with low memory (like phones), this mode is recommended to reduce the amount of allocated memory. It comes at the expense of brush history accuracy (e.g. undo will go back several strokes instead of one).",
+        "wasmFilters": "Web Assembly filters",
+        "wasmFiltersExpl": "Experimental feature. If application of layer filters is slow, you can enable this mode which offers a performance gain depending on your environment.",
         "save": "Save",
         "cancel": "Cancel"
     }

src/components/preferences/preferences.vue

@@ -21,7 +21,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 <template>
-    <modal>
+    <modal class="preferences">
         <template #header>
             <h2 v-t="'preferences'"></h2>
         </template>
@@ -34,6 +34,15 @@
                     />
                 </div>
                 <p v-t="'lowMemoryExpl'" class="expl"></p>
+                <template v-if="hasWebAssembly">
+                    <div class="wrapper input">
+                        <label v-t="'wasmFilters'"></label>
+                        <toggle-button
+                            v-model="internalValue.wasmFilters"
+                        />
+                    </div>
+                    <p v-t="'wasmFiltersExpl'" class="expl"></p>
+                </template>
             </div>
         </template>
         <template #actions>
@@ -57,6 +66,7 @@
 import { mapGetters, mapMutations, mapActions } from "vuex";
 import Modal from "@/components/modal/modal";
 import { ToggleButton } from "vue-js-toggle-button";
+import { setWasmFilters } from "@/services/render-service";
 import messages from "./messages.json";
 
 export default {
@@ -72,6 +82,17 @@ export default {
         ...mapGetters([
             "preferences",
         ]),
+        hasWebAssembly() {
+            return "WebAssembly" in window;
+        },
+    },
+    watch: {
+        internalValue: {
+            deep: true,
+            handler( value ) {
+                setWasmFilters( !!value.wasmFilters );
+            }
+        }
     },
     created() {
         this.internalValue = { ...this.preferences };
@@ -98,6 +119,14 @@ export default {
 @import "@/styles/_colors";
 @import "@/styles/_mixins";
 
+.preferences {
+    @include large() {
+        $height: 450px;
+        height: $height;
+        top: calc(50% - #{($height + 74px ) / 2});
+    }
+}
+
 .expl {
     font-size: 85%;
     padding: $spacing-medium;

src/services/render-service.js

@@ -35,15 +35,17 @@ import FilterWorker from "@/workers/filter.worker";
 const jobQueue = [];
 let UID = 0;
 
-// TODO make user configurable
-const USE_WASM = false;//!!( "WebAssembly" in window );
+let useWasm = false;
 let wasmWorker;
 
-if ( USE_WASM ) {
-    wasmWorker = new FilterWorker();
-    wasmWorker.onmessage = handleWorkerMessage;
-    wasmWorker.postMessage({ cmd: "initWasm" });
-}
+export const setWasmFilters = enabled => {
+    useWasm = enabled;
+    if ( enabled && !wasmWorker ) {
+        wasmWorker = new FilterWorker();
+        wasmWorker.onmessage = handleWorkerMessage;
+        wasmWorker.postMessage({ cmd: "initWasm" });
+    }
+};
 
 export const renderEffectsForLayer = async ( layer, useCaching = true ) => {
     const { effects } = layer;
@@ -134,7 +136,7 @@ export const renderEffectsForLayer = async ( layer, useCaching = true ) => {
 const runFilterJob = ( source, jobSettings ) => {
     const { width, height } = source;
     const imageData = source.getContext( "2d" ).getImageData( 0, 0, width, height );
-    const wasm      = USE_WASM && wasmWorker;
+    const wasm      = useWasm && wasmWorker;
 
     return new Promise( async ( resolve, reject ) => {
         const id = ( ++UID );

src/store/modules/preferences-module.js

@@ -21,13 +21,15 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import { isMobile } from "@/utils/environment-util";
+import { setWasmFilters } from "@/services/render-service";
 
 const STORAGE_KEY = "bpy_pref";
 
 export default {
     state: {
         preferences: {
-            lowMemory : isMobile()
+            lowMemory : isMobile(),
+            wasmFilters: false,
         },
     },
     getters: {
@@ -45,7 +47,9 @@ export default {
             const existing = window.localStorage?.getItem( STORAGE_KEY );
             if ( existing ) {
                 try {
-                    commit( "setPreferences", JSON.parse( existing ));
+                    const preferences = JSON.parse( existing );
+                    commit( "setPreferences", preferences );
+                    setWasmFilters( !!preferences.wasmFilters );
                 } catch {
                     // non-blocking
                 }