feat(window): add setEffects API (#392)

Author: lucasfernog

.changes/window-set-effects.md

@@ -0,0 +1,6 @@
+---
+"window": "patch"
+"window-js": "patch"
+---
+
+Added the `setEffects` and `clearEffects` API.

examples/api/src-tauri/src/lib.rs

@@ -56,7 +56,7 @@ pub fn run() {
             #[cfg(desktop)]
             {
                 window_builder = window_builder
-                    .user_agent("Tauri API")
+                    .user_agent(&format!("Tauri API - {}", std::env::consts::OS))
                     .title("Tauri API Validation")
                     .inner_size(1000., 800.)
                     .min_inner_size(600., 400.)
@@ -71,6 +71,11 @@ pub fn run() {
                     .decorations(false);
             }
 
+            #[cfg(target_os = "macos")]
+            {
+                window_builder = window_builder.transparent(true);
+            }
+
             let window = window_builder.build().unwrap();
 
             #[cfg(debug_assertions)]

examples/api/src/views/Window.svelte

@@ -6,6 +6,8 @@
     UserAttentionType,
     PhysicalSize,
     PhysicalPosition,
+    Effect,
+    EffectState,
   } from "@tauri-apps/plugin-window";
   import { open as openDialog } from "@tauri-apps/plugin-dialog";
   import { open } from "@tauri-apps/plugin-shell";
@@ -57,7 +59,20 @@
     "rowResize",
   ];
 
+  const windowsEffects = ["mica", "blur", "acrylic"];
+  const isWindows = navigator.appVersion.includes("windows");
+  const isMacOS = navigator.appVersion.includes("macos");
+  let effectOptions = isWindows
+    ? windowsEffects
+    : Object.keys(Effect)
+        .map((effect) => Effect[effect])
+        .filter((e) => !windowsEffects.includes(e));
+  const effectStateOptions = Object.keys(EffectState).map(
+    (state) => EffectState[state]
+  );
+
   export let onMessage;
+  const mainEl = document.querySelector("main");
 
   let newWindowLabel;
 
@@ -91,6 +106,12 @@
   let cursorIgnoreEvents = false;
   let windowTitle = "Awesome Tauri Example!";
 
+  let effects = [];
+  let selectedEffect;
+  let effectState;
+  let effectRadius;
+  let effectR, effectG, effectB, effectA;
+
   function openUrl() {
     open(urlValue);
   }
@@ -172,6 +193,38 @@
     await windowMap[selectedWindow].requestUserAttention(null);
   }
 
+  async function addEffect() {
+    if (!effects.includes(selectedEffect)) {
+      effects = [...effects, selectedEffect];
+    }
+
+    const payload = {
+      effects,
+      state: effectState,
+      radius: effectRadius,
+    };
+    if (
+      Number.isInteger(effectR) &&
+      Number.isInteger(effectG) &&
+      Number.isInteger(effectB) &&
+      Number.isInteger(effectA)
+    ) {
+      payload.color = [effectR, effectG, effectB, effectA];
+    }
+
+    mainEl.classList.remove("bg-primary");
+    mainEl.classList.remove("dark:bg-darkPrimary");
+    await windowMap[selectedWindow].clearEffects();
+    await windowMap[selectedWindow].setEffects(payload);
+  }
+
+  async function clearEffects() {
+    effects = [];
+    await windowMap[selectedWindow].clearEffects();
+    mainEl.classList.add("bg-primary");
+    mainEl.classList.add("dark:bg-darkPrimary");
+  }
+
   $: {
     windowMap[selectedWindow];
     loadWindowPosition();
@@ -455,5 +508,88 @@
         <button class="btn" id="open-url"> Open URL </button>
       </form>
     </div>
+
+    <br />
+
+    {#if isWindows || isMacOS}
+      <div class="flex flex-col gap-1">
+        <div class="flex">
+          <label>
+            Effect
+            <select class="input" bind:value={selectedEffect}>
+              {#each effectOptions as effect}
+                <option value={effect}>{effect}</option>
+              {/each}
+            </select>
+          </label>
+
+          <label>
+            State
+            <select class="input" bind:value={effectState}>
+              {#each effectStateOptions as state}
+                <option value={state}>{state}</option>
+              {/each}
+            </select>
+          </label>
+
+          <label>
+            Radius
+            <input class="input" type="number" bind:value={effectRadius} />
+          </label>
+        </div>
+
+        <div class="flex">
+          <label>
+            Color
+            <div class="flex">
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="R"
+                bind:value={effectR}
+              />
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="G"
+                bind:value={effectG}
+              />
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="B"
+                bind:value={effectB}
+              />
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="A"
+                bind:value={effectA}
+              />
+            </div>
+          </label>
+        </div>
+
+        <div class="flex">
+          <button class="btn" style="width: 80px;" on:click={addEffect}
+            >Add</button
+          >
+        </div>
+
+        <div class="flex">
+          <div>
+            Applied effects: {effects.length ? effects.join(",") : "None"}
+          </div>
+
+          <button class="btn" style="width: 80px;" on:click={clearEffects}
+            >Clear</button
+          >
+        </div>
+      </div>
+    {/if}
   {/if}
 </div>