search

davidfig / pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js
https://davidfig.github.io/pixi-viewport/
MIT License
1.06k stars 177 forks source link

Drag on viewport seems to dissapear when integrating with Angular. #260

Open jjwallace opened 4 years ago

jjwallace commented 4 years ago

For some reason items (sprites) inside the viewport are draggable; however, The viewport itself doesn't drag around. A snapZoom attached to key presses allows for navigation but it seems the viewport itself cannot be dragged.

I have seen some z-index solutions here but non of those apply to my scenario.

Has this occurred for anyone else.

The project is Angular, Webpack, Pixi, D3

I will post my solution here when I find something.

davidfig commented 4 years ago

Does pinch work? Likely something is capturing the pointerdown event before it reaches the canvas element.

jjwallace commented 4 years ago

Ahh, that makes sense. Pinch also doesn't work also, it just defaults to zooming in the entire dom. I added a listener on the background container to see if mouse events get to the background and no console log is displayed. So yes something must be layered over it, gotta step through and see what it might be. I thought this might be a common problem with angular and pixi battling over something.

davidfig commented 4 years ago

Ok, let me know if you continue to have this problem or how you resolved it so that others can benefit.

jjwallace commented 4 years ago

Still unable to get drag working with d3, angular integration. Do you know any working examples/boilerplate with angular or d3?

davidfig commented 4 years ago

I haven't seen any. If you mock up something in jsfiddle or the like, I can try to debug it.

jjwallace commented 3 years ago

I built a simple angular pixiJS viewport - Boilerplate.

Drag viewport still not function.

Here is the source: https://github.com/jjwallace/angular-pixi/blob/master/src/app/pixiApp/d3/generateSimulationData.js

If you wanna test it: npm install npm start

You will notice you cannot drag around in the viewport.

jjwallace commented 3 years ago

Solution Found The error was occurring with a custom built Render and Render Store. Upon resize of the browser window the render would recalculate the canvas size and child element sizes. The event listener for the resize was somehow overriding the drag listener.
I will post more about this when I take a look a the custom renderer.
//interaction: BrainStore.renderer.interaction, //Custom Renderer interaction: BrainStore.app.renderer.plugins.interaction, //Pixi5

BrummbQ commented 3 years ago

@jjwallace Seem I have a similar issue with angular. Can you maybe post an example what you did exactly? Thanks