60 ScrollBox #79
Merged
60 ScrollBox #79
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
CyberDex
commented
Jun 29, 2023
| @@ -7,6 +7,7 @@ export type ListOptions = { | |||
| children?: Container[]; | |||
| vertPadding?: number; | |||
| horPadding?: number; | |||
| items?: Container[]; | |||
There was a problem hiding this comment.
Just a small refactor for a config consistency
CyberDex
commented
Jun 29, 2023
Comment on lines
-171
to
-192
| child.x = this.freeSlot.x; | ||
| child.y = this.freeSlot.y; | ||
| child.eventMode = 'static'; | ||
|
|
||
| this.list.addChild(child); | ||
|
|
||
| if (!this.options.disableDynamicRendering) | ||
| { | ||
| child.renderable = this.isItemVisible(child); | ||
| } | ||
|
|
||
| const elementsMargin = this.options?.elementsMargin ?? 0; | ||
|
|
||
| switch (this.options.type) | ||
| { | ||
| case 'horizontal': | ||
| this.freeSlot.x += elementsMargin + child.width; | ||
| break; | ||
|
|
||
| default: | ||
| this.freeSlot.y += elementsMargin + child.height; | ||
| break; | ||
| } |
There was a problem hiding this comment.
This was excess, this functionality actually is handled by the List component.
CyberDex
commented
Jun 29, 2023
Comment on lines
-57
to
-61
| protected readonly freeSlot = { | ||
| x: 0, | ||
| y: 0, | ||
| }; | ||
|
|
There was a problem hiding this comment.
This was excess, this functionality actually is handled by the List component.
CyberDex
commented
Jun 29, 2023
Comment on lines
+325
to
+337
|
|
||
| const listTouchPoint = this.list.worldTransform.applyInverse(e.global); | ||
|
|
||
| this.visibleItems.forEach((item) => | ||
| { | ||
| if (item.x < listTouchPoint.x | ||
| && item.x + item.width > listTouchPoint.x | ||
| && item.y < listTouchPoint.y | ||
| && item.y + item.height > listTouchPoint.y) | ||
| { | ||
| this.pressedChild = item; | ||
| } | ||
| }); |
There was a problem hiding this comment.
Detecting if pressed on some of visible children...
CyberDex
commented
Jun 29, 2023
Comment on lines
+366
to
+370
| if (this.pressedChild) | ||
| { | ||
| this.disableInteractivity(this.items); | ||
| this.revertClick(this.pressedChild); | ||
|
|
||
| this.pressedChild = null; |
There was a problem hiding this comment.
During dragging started and if was pressed on some item, revert click for it.
CyberDex
commented
Jun 29, 2023
Comment on lines
-348
to
-387
| // prevent interactivity on all children | ||
| protected disableInteractivity(items: DisplayObject[]) | ||
| { | ||
| items.forEach((item, id) => | ||
| { | ||
| this.emitPointerOpOutside(item); | ||
|
|
||
| if (item.interactive) | ||
| { | ||
| this.interactiveStorage.set(id, item); | ||
| item.eventMode = 'auto'; | ||
| item.interactiveChildren = false; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| protected emitPointerOpOutside(item: DisplayObject) | ||
| { | ||
| if (item.eventMode !== 'auto') | ||
| { | ||
| item.emit('pointerupoutside', null); | ||
| } | ||
|
|
||
| if (item instanceof Container && item.children) | ||
| { | ||
| item.children.forEach((child) => this.emitPointerOpOutside(child)); | ||
| } | ||
| } | ||
|
|
||
| // restore interactivity on all children that had it | ||
| protected restoreInteractivity() | ||
| { | ||
| this.interactiveStorage.forEach((item, itemID) => | ||
| { | ||
| item.eventMode = 'static'; | ||
| item.interactiveChildren = false; | ||
| this.interactiveStorage.delete(itemID); | ||
| }); | ||
| } | ||
|
|
There was a problem hiding this comment.
Replaced with new methods at the bottom of the file
CyberDex
commented
Jun 29, 2023
| @@ -47,8 +47,6 @@ export const UseGraphics: StoryFn = ({ | |||
|
|
|||
| for (let i = 0; i < itemsAmount; i++) | |||
| { | |||
| const buttonWrapper = new Container(); | |||
There was a problem hiding this comment.
This was added before to test the issue. Removing now, to keep example cleaner.
CyberDex
force-pushed
the
60-scrollbox
branch
2 times, most recently
from
fb16b57
to
a041f30
Compare
CyberDex
commented
Jun 30, 2023
| { | ||
| this.stopRenderHiddenItems(); | ||
| this.list[type] = this._trackpad[type]; | ||
| } | ||
| } |
Zyie
approved these changes
Jun 30, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #60
The issue is that when user starts to drag scroll box, we should cancel the click if mouse was down on some element and this element or some of it's children has subscriptions to click.
Before, trying to fix this It was disabling interactivity for all the elements, but not their children, this was a reason of this issue.
Now instead of disabling interactivity for all the children, when down event performed on the ScrollBox, I check if down coordinate is on some of visible children. Then I go throughout the tree of its children and disable interactivity, storing the interactive elements. After the scroll is done, I restore interactivity from the list that I have stored.
Also refactored List component a bit and improved docs...