[Trouble understanding onCompleteScope in an Angular application]

Thanks again for the reply. Sorry about the close() function confusion, i simply typed close to make it shorter for the troubleshooting in an earlier post. The correct name is indeed closeDragMethod().

I am glad my approach is correct!
By setting the callbackScope to my mainObject... will that do anything, or is it more of a "this is the most correct way to do it" approach?

 

I look forward to implementing more awesome Greensock features in our app, and i expect us to join Club Greensock soon, to take advantage of the awesome morphing features.

 

 

[Trouble understanding onCompleteScope in an Angular application]

1 hour ago, OSUblake said:

A demo would be helpful because your code doesn't look right. It should probably be something like this.

 

update() {

  TweenLite.to(this.target, 0.6, {
   opacity:0, 
    scale:0, 
    svgOrigin:"0 0", 
    onComplete: this.close,
    callbackScope: this
  });
}

 

 

Thanks a lot to you both. I had hoped i could explain myself properly without creating a demo, but not understanding all the terms, make such an endeavour difficult...

I did make it work, but as i wrote, properly not correctly.
If i use your example Blake, this.close is simply not being called, nothing happens. 

 

If i type it like this:

 this.close()

 

i get a Runtime Error

 this.close is not a function

 

If i however type this at the beginning of my function, a function which creates the Draggable, and then uses Tween to animate, then it works:

let mainComponent:MainComponent = this;

 

The whole function is here below, this actually works (trial and error), but i would love to make my code even better. This definately feels slightly hacky!

 

updateZone(zone:number, e:any) {
    let selectedElement = undefined;
    let sensor = this.zcon.assignedSensorId[zone]; 
  
    if(sensor && !this.dragNdropModeActive) {
      this.dragNdropModeActive = true;
      this.dragFromThisZone = zone;
      if (e.target.nearestViewportElement.classList.contains('draggable')) {
        selectedElement = e.target.nearestViewportElement;
        
        this.getRect(selectedElement, e);
        this.renderer.addClass(selectedElement, 'dragging');

        let options = false;
        let scale = 0;
        let x = 0;
        let y = 0;

        let mainObject:ZoneControlMain = this; // THIS IS THE WAY I CAN ACCESS MY FUNCTIONS IN TWEEN CALLBACKS
        
        this.draggableZ = Draggable.create(".dragging .z-component", {

          onPress: function() {
            if(!options) {
              options = true;
              scale = this.target._gsTransform.scaleX;
              x =  this.target._gsTransform.x;
              y =  this.target._gsTransform.y;
            }
          },
          onDragStart: function() {
            console.log("Drag start...");
          },
          onDrag: function() {
            const trashCanDropArea = document.getElementsByClassName("trashcan");

            if (this.hitTest(".trashcan", "10%")) {
              if(!trashCanDropArea[0].classList.contains('highlight')) {
                trashCanDropArea[0].classList.add('highlight');
              }
            } else {
              if(trashCanDropArea[0].classList.contains('highlight')) {
                trashCanDropArea[0].classList.remove('highlight');
              }
            }
            if (this.hitTest(".draggable", "70%")) {
              console.log("SWAP");
            }
          },
          onDragEnd: function() {
            if (this.hitTest(".trashcan", "10%")) {
              TweenMax.to(this.target, 0.2, {
                opacity:0, scale:0, 
                onComplete: function() {
                  mainObject.closeDragMode(); // USING THIS ANGULAR COMPONENT TO ACCESS FUNCTIONS OTHERWISE NOT KNOWN TO GREENSOCK
                } 
              });
            }
            if (this.hitTest(".draggable", "70%")) {
              console.log("SWAPPED");
            }
            var tl = new TimelineLite();
            tl.to(this.target, 0.2, {delay: 0.2, x:x, y:y, scale:scale}).to(this.target, 1, {delay: 0.2,opacity:1, ease:Power2.easeInOut});
          }
        });
      }
    } else {
     this.closeDragMode();
    }
  }

 

 

 

 

[Trouble understanding onCompleteScope in an Angular application]

I managed to fix it... it does feel wrong, so if anyone have a better/more smooth way to do it, i would love to know.
I apply my angular component to a variable first, and then i use that variable to access all my angular functions.

Is this really the way?

 

update() {
  // here i apply my component to a variable
  let mainComponent:MainComponent = this;

  // mainComponent (aka the whole component) is available for use, and the Angular methods are available
  TweenLite.to(this.target, 0.6, {
   opacity:0, scale:0, svgOrigin:"0 0", onComplete:mainComponent.close()
  });
}

 

[Trouble understanding onCompleteScope in an Angular application]

Greetings Greensock community

 

I have a "simple" question, which i cannot for the life of me figure out on my own.

In Angular, i have several methods in my component, it could be "closeEverything()", normally i call such function with "this.closeEverything()".
Now, when i try to call such method in a TweenLite.to onComplete callback, it says undefined function. So far so good. Greensock does not know anything about the Angular scope, and i reckon Angular does now know anything about the Greensock scope.

 

Now from what i have read, i might be able to change the scope Greensock uses in the onCompleteScope property, but i have not been able to make it work. 

Does anyone have an example, where out-of-scope functions are being called in Tween callbacks?  What is it i am missing, i feel like a complete newbie again, trying to implement this otherwise awesome library into my existing Angular application.

 

/Balslev