angular2-swing
angular2-swing copied to clipboard
ksachdeva
Remove card from stack
I was debugging the card stack and I noticed that, If I update cards array and my *ngFor ion-cards changed, the stack is intact!
I start with 3 cards then the user thows out 2 cards. So I append 2 more cards to stack.. when I look to this.swingStack.cards I see 5 cards. If I use the stack repeatedly 100 cards or 1k cards the memory will increase.
I searched for a "removeCard" metho and I could find it in node_modules/swing/dist/stack.js a function named destroyCard.
Understand? We need optimize the stack.
@tobiasmuecksch I think this is different, angular2-swing is maintaining its own array of cards which is only used on content init (https://github.com/ksachdeva/angular2-swing/blob/master/src/swing-stack-component.ts#L51) and essentially this can cause problems if we keep adding / removing cards since this doesnt remove it from the stack at all. The implementation needs a refactor.
I had a quick look on the at the code for this. I think this was added so we can have access to the list of card elements since the swing library is not exposing that. One suggestion would be to expose the list in Swing library and returning that (https://github.com/gajus/swing/blob/master/src/Stack.js#L12) - this will remove the cards variable from this wrapper. Alternatively we can have specific events on the stack like add, remove, update from the swing library which can then update the wrapper array likewise.
@gajus Can we have your opinion on this?
Sorry, I've not been actively involved in Swing for over a year. My knowledge of the code base is limited.
@gajus Hey Gajus, are you willing to give someone else access to the Github and npm repos so we can continue developing your package further please?
@gajus apologies for not clarifying. I was referring to the swing project. It is a major dependency of angular2-swing. I was hoping to raise a couple of PRs, one regarding prepending cards/dynamically adding to the bottom left of the stack, and one regarding being able to destroy cards from the stack and sending an event. Will raise the PRs in next couple of days. Thanks for swing though, it's an awesome project.
@Sparkomatic I see that you have created a 0.13.0 branch that incorporates the changes here - how do I install that version?
@xindexer I'm afraid I'm not sure what version you are referring to. https://www.npmjs.com/package/angular2-swing 0.12.1 is the latest version and that includes 4 way swiping and the ability to prepend cards (so you can dynamically add cards to the bottom of the pack too). I still need to do work to delete cards from the stack but what currently is there should be ok for most normal usage.
@Sparkomatic I was referring to the branch that you made here - https://github.com/Sparkomatic/angular2-swing/releases. But I was actually able to get it to do what I want using angular and ngrx. If you let angular control the DOM (adding and removing elements) angular2-swiper behaves like you want it too. i.e. you dynamically add an element to the array in angular (or in my case through ngrx) then it is populated at the end of the swiper array, if you remove an element then it deletes the html element and doesn't effect how swiper works. The trick is to use "trackBy" so that angular knows how to track the elements in the array
@xindexer If you could show me a link to a working example or a code snippet showing how you do this, it could be really helpful. Thanks.
Here you go - modified the example app to make it work - I'm reversing the order of the cards through z-index - it works but if you can see how to do it without that, it would be cleaner. How do I use the prepend: true variable?
https://github.com/xindexer/angular2-swing-ngrx-example
@Sparkomatic @xindexer would love to see this demo working. Ive update it to Angular 8 but the cards are always showing up undefined
Hey there,
I haven’t worked on this for ages I’m afraid. I’ve kind of lost touch with Angular, can barely remember it.
Sorry,
Jason
On 11 Dec 2019, at 14:19, DAS REPTIL [email protected] wrote:
@xindexer https://github.com/xindexer would love to see this demo working. Ive update it to Angular 8 but the cards are always showing up undefined
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ksachdeva/angular2-swing/issues/22?email_source=notifications&email_token=AGCJKHH5JF3YKNOFK4YTUILQYDZHFA5CNFSM4C7VTDZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGTI5EQ#issuecomment-564563602, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGCJKHFQVGHZIBLHOECVMXLQYDZHFANCNFSM4C7VTDZA.
@Sparkomatic no worries I managed to upgrade it to angular 8 and the latest ngrx. It’s working like a dream :)