Merge pull request #625 from intechstudio/feat/DisabledAnimations

🚩PR: Added setting of Disable Animations

src/renderer/App.svelte

@@ -34,6 +34,11 @@
 
   import MiddlePanelContainer from "./main/MiddlePanelContainer.svelte";
   import { addPackageAction, removePackageAction } from "./lib/_configs";
+  import {
+    setDocumentAnimationsEnabled,
+    reduced_motion_store,
+  } from "../renderer/runtime/animations";
+  import { get } from "svelte/store";
 
   console.log("Hello from Svelte main.js");
 
@@ -163,41 +168,27 @@
     }
   };
 
-  let leftPaneSize;
-  function handlePaneResize(event) {
-    if (event.detail[0].size > leftPaneSize) {
-      // when left panel is resized to > 0, make leftpanel visible
-      appSettings.update((store) => {
-        store.leftPanelVisible = true;
-        return store;
-      });
-    }
-    $splitpanes.left = event.detail[0].size;
-  }
-
-  function handlePaneResized(event) {
-    event.detail.forEach((pane, index) => {
-      // left pane
-      if (index == 0) {
-        if (pane.size == 0) {
-          // when left panel is resized to 0, make leftpanel invisible
-          appSettings.update((store) => {
-            store.leftPanelVisible = false;
-            return store;
-          });
-        }
-        leftPaneSize = pane.size;
+  function handleDisableAnimationsChange(settingValue, reducedValue) {
+    switch (settingValue) {
+      case "auto": {
+        setDocumentAnimationsEnabled(!reducedValue);
+        break;
       }
-      // middle pane
-      if (index == 1) {
-        $splitpanes.middle = pane.size;
+      case "enabled": {
+        setDocumentAnimationsEnabled(true);
+        break;
       }
-      // right pane
-      if (index == 2) {
-        $splitpanes.right = pane.size;
+      case "disabled": {
+        setDocumentAnimationsEnabled(false);
+        break;
       }
-    });
+    }
   }
+
+  $: handleDisableAnimationsChange(
+    $appSettings.persistent.disableAnimations,
+    $reduced_motion_store
+  );
 </script>
 
 {#if window.ctxProcess.buildVariables().BUILD_TARGET !== "web"}

src/renderer/main/grid-layout/grid-modules/underlays/ModuleBorder.svelte

@@ -3,30 +3,57 @@
   import { createEventDispatcher } from "svelte";
   import { user_input } from "../../../../runtime/runtime.store.js";
   import { fade } from "svelte/transition";
+  import { reduced_motion_store } from "../../../../runtime/animations";
+  import { get } from "svelte/store";
 
   export let device = undefined;
   export let visible = false;
 
   let isSelected = false;
   let isSystemEventsSelected = false;
+  let animationDisabled = false;
 
   $: handleUserInputChange($user_input);
 
   function handleUserInputChange(ui) {
     isSelected = device?.dx == ui.dx && device?.dy == ui.dy;
     isSystemEventsSelected = isSelected && ui.elementnumber == 255;
   }
+
+  function handleAnimationChange(settingValue, reducedValue) {
+    switch (settingValue) {
+      case "auto": {
+        animationDisabled = reducedValue;
+        break;
+      }
+      case "enabled": {
+        animationDisabled = false;
+        break;
+      }
+      case "disabled": {
+        animationDisabled = true;
+        break;
+      }
+    }
+  }
+
+  $: handleAnimationChange(
+    $appSettings.persistent.disableAnimations,
+    $reduced_motion_store
+  );
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 {#if visible}
   <div
-    class="{$$props.class} border-2 border-transparent"
-    class:border-white={isSelected}
-    class:border-opacity-30={isSelected}
-    class:animate-border-error={device?.fwMismatch}
+    class="{$$props.class} border-2"
+    class:border-transparent={!isSelected && !device?.fwMismatch}
+    class:border-error={device?.fwMismatch && animationDisabled}
+    class:border-white={isSelected && !device?.fwMismatch}
+    class:border-opacity-30={isSelected && !device?.fwMismatch}
+    class:animate-border-error={device?.fwMismatch && !animationDisabled}
     style={$$props.style}
   >
     {#if isSelected && isSystemEventsSelected && $appSettings.persistent.showPCB}
@@ -1508,9 +1535,12 @@
   }
 
   @keyframes error-animation {
-    to {
+    from {
       border-color: #dc2626;
     }
+    to {
+      border-color: transparent;
+    }
   }
 
   .active-systemelement {

src/renderer/main/panels/preferences/Preferences.svelte

@@ -20,11 +20,10 @@
     MoltenButton,
     MoltenInput,
   } from "@intechstudio/grid-uikit";
+  import { reduced_motion_store } from "../../../runtime/animations.js";
 
   const configuration = window.ctxProcess.configuration();
 
-  onMount(async () => {});
-
   async function selectDirectory() {
     appSettings.update((s) => {
       s.intervalPause = true;
@@ -128,6 +127,34 @@
         />
       </BlockRow>
     </Block>
+
+    <Block>
+      <BlockTitle>Animations</BlockTitle>
+      <BlockBody
+        >Transition animations can be disabled to improve usability and
+        performance.</BlockBody
+      >
+      <MeltRadio
+        bind:target={$appSettings.persistent.disableAnimations}
+        options={[
+          {
+            title: `Auto (${
+              $reduced_motion_store ? "Disabled" : "Enabled"
+            } by OS)`,
+            value: "auto",
+          },
+          {
+            title: "Enabled",
+            value: "enabled",
+          },
+          {
+            title: "Disabled",
+            value: "disabled",
+          },
+        ]}
+      />
+    </Block>
+
     <Block>
       <BlockTitle>Welcome screen</BlockTitle>
       <BlockBody

src/renderer/runtime/animations.ts

@@ -0,0 +1,49 @@
+import { writable } from "svelte/store";
+
+export const reduced_motion_store = create_reduced_motion_store();
+
+function create_reduced_motion_store() {
+  // Grab the prefers reduced media query.
+  const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const reduced = !mediaQuery || mediaQuery.matches; //true if reduced
+  const store = writable(reduced);
+
+  // Ads an event listener to check for changes in the media query's value.
+  mediaQuery.addEventListener("change", () => {
+    store.set(mediaQuery.matches);
+  });
+  return store;
+}
+
+export function setDocumentAnimationsEnabled(value: boolean) {
+  if (value) {
+    enableAnimation();
+  } else {
+    disableAnimation();
+  }
+}
+
+function disableAnimation() {
+  const css = `
+        * {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+          animation-delay: 0.01ms !important;
+        }
+      `;
+  const existingStyleElement = document.getElementById("custom-global-style");
+  if (!existingStyleElement) {
+    const styleElement = document.createElement("style");
+    styleElement.textContent = css;
+    styleElement.id = "custom-global-style";
+    document.head.appendChild(styleElement);
+  }
+}
+
+function enableAnimation() {
+  const existingStyleElement = document.getElementById("custom-global-style");
+  if (existingStyleElement) {
+    existingStyleElement.remove();
+  }
+}

src/renderer/runtime/app-helper.store.js

@@ -37,6 +37,7 @@ const persistentDefaultValues = {
   showPCB: false,
   changeOnEvent: "event",
   sendHeartbeatImmediate: false,
+  disableAnimations: false,
 };
 
 function createSplitPanes() {