* bit:delete - updates to behavior

meteor-app/client/components/bits/base/events.js

@@ -116,19 +116,18 @@ Template.bit.events({
     var coords = Utilities.getElementCenter(bitRect);
 
     var options = {
-      seedPoint: coords
+      seedPoint: coords,
+      direction: "forward"
     }
 
     // skip a beat, then display the delete animation
     // not just stylistic, added benefit of not overlapping with Greensock fade to decrease CPU use
-    // TODO: play reverse animation if undo.
+
     Meteor.setTimeout(function(){
       Parallels.Animation.General.poof(options);
       }, 
       325
     );
-
-
   }
 
 });

meteor-app/client/components/bits/base/rendered.js

@@ -79,24 +79,47 @@ Template.bit.onRendered(function (){
     makeSetBitDraggable($bitElement, $dragHandle);
   }
 
-  // When a Bit position is updated during a concurrent session (by someone else)
-  // move the bit to it's new position on all other sessions/clients
+  // Run relevant animations when a bit position is updated
+  // 3 current entry points into this function:
+  // -- when bits first render on the set/canvas
+  // -- when the drawer is opened, and a bit renders in the drawer 
+  // -- when a bit is rendered after undoing a bit:delete
   Tracker.autorun(function() {
-    // for tracking canvas bits, since it already exists
-    // TODO: should probably make this more explicit that it's bits inside the map, not the drawer
 
+    var timeline = new TimelineMax();
+
+    // TODO: should probably make this more explicit that it's bits inside the map/canvas/set, not the drawer
+    //       Right now, if drawer open, both drawer + canvas/set share the same html5 data attribute.
+    //       This is a shortcut, so we can reuse the same bit template
     var bit = Bits.findOne(bitDatabaseId);
-    if (!bit) { return } // if it's just been deleted from the canvas, nothing left to do
+    if (!bit) { return; } // if it's just been deleted from the canvas, nothing left to do
 
-    // this utility function is scoped to the drawer   
-    // if nothing is found, this will be empty
+    // if this bit is in the drawer (vs in a canvas set), nothing left to do
     var $drawerBit = Utilities.getDrawerBitElement(bit._id);
+    if ($drawerBit.length){ return; }
+
+    var $bit = Utilities.getSetBitElement(bit._id);
+
+    // Is this bit autorun a result of a bit redo after a delete?
+    // if so, play the poof animation backwards.
+    // TODO: janky, need a better way of pinpointing this scenario
+    // TODO: also, overlapping animations are cut off on redo.
+    var bitRect = $bit[0].getClientRects()[0];
+    if (bitRect){
+      // Use bit center point as spark point for animation
+      var coords = Utilities.getElementCenter(bitRect);
+      var options = {
+        seedPoint: coords,
+        direction: "backward",
+        speed: 1.5
+      }
+
+      Parallels.Animation.General.poof(options);         
+    }  
+
+    // move the bit to it's new position on all other sessions/clients
+    timeline.to($bitElement, 0, { x: bit.position.x, y: bit.position.y });
 
-    // only if it's a bit that's on the canvas, not in the drawer
-    if (bit && !$drawerBit.length) {
-      var timeline = new TimelineMax();
-      timeline.to($bitElement, 0, { x: bit.position.x, y: bit.position.y });
-    }
   });
 
   // Track upload status for new Bits

meteor-app/client/layout/layout.scss

@@ -129,4 +129,8 @@ hr{
 
 .u--scroll--none {
   overflow: hidden;
+}
+
+[data-name="mojs-shape"] {
+  pointer-events: none;
 }

meteor-app/packages/parallels-animation/general.js

@@ -226,13 +226,19 @@ Parallels.Animation.General = {
 
   poof: function (options){
 
+    // setting defaults, if not passed in
+    options.speed = options.speed || 1;
+    options.direction = options.direction || "forward";
+
     /*
      PURPOSE:
      Displays poof, with sparks. Animate outward sparks from a center point
      -----------------------------------------------------------
 
      OPTIONS/PARAMS:
-     seedPoint:  // x,y point of animation center/seed point
+     seedPoint:  object: x,y point of animation center/seed point
+     direction:  string: "forward" or "backward",
+
      -----------------------------------------------------------
 
      TODO:
@@ -244,21 +250,23 @@ Parallels.Animation.General = {
     // Adapted by combining elements from:
     // ---- https://codepen.io/sol0mka/full/03e9d8f2fbf886aa1505c61c81d782a0/
     // ---- https://codepen.io/sol0mka/pen/AXRAkg
-    var burst1 = new mojs.Burst({
-      left: 0, top: 0,
+    var burst = new mojs.Burst({
+      left: 0, 
+      top: 0,
       count:          8,
       radius:         { 50: 150 },
       children: {
         shape:        'line',
         stroke:       [ 'white', '#FFE217', '#FC46AD', '#D0D202', '#B8E986', '#D0D202' ],
         scale:        1,
         scaleX:       { 1 : 0 },
-        // pathScale:    'rand(.5, 1.25)',
         degreeShift:  'rand(-90, 90)',
         radius:       'rand(20, 40)',
-        // duration:     200,
         delay:        'rand(0, 150)',
-        isForce3d:    true
+        // pathScale:    'rand(.5, 1.25)',
+        // duration:     200,
+        isForce3d:    true,
+        isShowEnd:    false
       }
     });
 
@@ -269,7 +277,7 @@ Parallels.Animation.General = {
       angle:    45,
       count:    12,
       children: {
-        radius:       10,
+        radius:       8,
         fill:         'white',
         scale:        { 1: 0, easing: 'sin.in' },
         pathScale:    [ .7, null ],
@@ -280,18 +288,35 @@ Parallels.Animation.General = {
       }
     });
 
-    var timeline = new mojs.Timeline();
-    timeline.add( cloud, burst1 );
+    var timeline = new mojs.Timeline({
+      speed: options.speed, // default to regular
+
+      // TODO: delete the shapes created here to avoid accumulation in DOM
+      // onPlaybackComplete: function(){
+
+      //  this is no good, because it'll delete *all shapes
+      // and make overlapping animations cut off
+      //   $(".mojs-shape").remove();
+      //   console.log("removing shapes");
+      // }
+    });
+
+    timeline.add( cloud, burst );
 
     cloud.tune(options.seedPoint);
-    burst1
+    burst
       .tune(options.seedPoint)
       .generate()
 
-    timeline.replay();
+    if (options.direction === "forward"){
+      timeline.replay(); 
+    }
 
-    return timeline; // if it's needed, for chaining
+    else if (options.direction === "backward"){
+      timeline.replayBackward();
+    }
 
+    return timeline; // if it's needed, for chaining
   }
 
 }

meteor-app/packages/parallels-client/lib/key-bindings.js

@@ -119,7 +119,8 @@ Parallels.Keys = {
         var coords = Utilities.getElementCenter(bitRect);
 
         var options = {
-          seedPoint: coords
+          seedPoint: coords,
+          direction: "forward"
         }
 
         // skip a beat, then display the delete animation