📝 Update guide

docs/how-to-create-new-effects.md

@@ -34,14 +34,14 @@ Of course, you can replace any occurrence of this name and its nick `simple-fade
 Three simple steps are required to create a new effect. 
 You will have to ...
 
-1. add a preferences key for enabling the effect,
+1. add preferences keys for enabling the effect,
 2. create an additional effects class, and finally
 3. register the new effect in two places.
 
 ### 1. Expanding the Schema
 
-For enabling the new effect, the boolean settings key `simple-fade-close-effect` is required.
-In this example, we also add an integer valued settings key for storing the animation time of the new effect and a floating point value for storing another property of the effect - we will use them later in the tutorial.
+For enabling the new effect, the boolean settings keys `simple-fade-open-effect`, `simple-fade-close-effect`, and `simple-fade-animation-time` are required.
+In this example, we also add a floating point value for storing another property of the effect - we will use them later in the tutorial.
 Just copy the XML code below to the file [`schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml`](../schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml).
 Just remember to replace `simple-fade` with your custom name!
 
@@ -56,6 +56,12 @@ Just remember to replace `simple-fade` with your custom name!
   <description>Use the Simple Fade effect for window closing.</description>
 </key>
 
+<key name="simple-fade-open-effect" type="b">
+  <default>false</default>
+  <summary>Simple Fade Open Effect</summary>
+  <description>Use the Simple Fade effect for window opening.</description>
+</key>
+
 <key name="simple-fade-animation-time" type="i">
   <default>1500</default>
   <summary>Simple Fade Animation Time</summary>
@@ -146,8 +152,8 @@ var SimpleFade = class SimpleFade {
   // ---------------------------------------------------------------- API for extension.js
 
   // This is called from extension.js whenever a window is closed with this effect.
-  static createShader(actor, settings) {
-    return new Shader(settings);
+  static createShader(actor, settings, forOpening) {
+    return new Shader(settings, forOpening);
   }
 
   // The tweakTransition() is called from extension.js to tweak a window's open / close
@@ -182,7 +188,7 @@ if (utils.isInShellProcess()) {
   const shaderSnippets = Me.imports.src.shaderSnippets;
 
   Shader = GObject.registerClass({}, class Shader extends Clutter.ShaderEffect {
-    _init(settings) {
+    _init(settings, forOpening) {
       super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
 
       this.set_shader_source(`
@@ -207,8 +213,10 @@ if (utils.isInShellProcess()) {
           // Radial distance from window edge to the window's center.
           float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
 
-          // This gradually dissolves from [1..0] from the outside to the center.
-          float mask = (1.0 - uProgress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
+          // This gradually dissolves from [1..0] from the outside to the center. We
+          // switch the direction for opening and closing.
+          float progress = ${forOpening ? '1.0 - uProgress' : 'uProgress'};
+          float mask = (1.0 - progress * (1.0 + FADE_WIDTH) - dist + FADE_WIDTH) / FADE_WIDTH;
 
           // Make the mask smoother.
           mask = smoothstep(0, 1, mask);