I've dijit BorderContainer overlaying a gfx surface which is movable (dojox.gfx.Moveable). Is there any way of disabling BorderContainer completely from catching mouse events and letting the Surface get them instead?
I've been thinking of publishing the BorderContainer events to Surface, but that's seems like an overkill and might run into problems along the way.
BorderContainer is just a DOM node with other nodes inside it, really. Since they're not contained by the gfx surface, you'd probably have to wire the events up to relay them, the same as you would any other HTML element. Perhaps you can use dojo.connect on the relevant events?
Related
I have two shape at same position, not same color, and when i click over them, i want to fire click event on both, not just the first.
These two shapes are in the same container.
I have tried getObjectsUnderPoint() under stage.on("mousemove"), but this function increase my FPS (60 to 32~, and inside there are just a console.log), So it's not a good solution.
I tried the bubble, the useCapture, but i think it isn't what i want.
I just want to fire click on all element behind my mouse.
If someone have a solution, please.
There are a few points here:
EaselJS objects sort of work like HTML DOM Elements. If an element has a mouse handler on it it will block objects in other hierarchies below it from receiving the event. This is just how it works. The main difference is that if you don't have mouse events, then they are just ignored (like if you set the pointerEvents on an HTML element to none to have the mouse ignore it).
Your idea with getObjectsUnderPoint is what I would have recommended. Running any hit-test logic on mousemove is going to be expensive (mousemove fires a LOT, which is why we give the ability to throttle the typical mouseover check if you enableMouseOver on the stage).
A few things to optimize it:
Ensure you are using mode=2 on your getObjectsUnderPoint, which will only check objects with mouse listeners. This greatly reduces the overhead in checking. [docs]
Instead of checking the stage on your own mousemove event, set a flag to check it on tick. This throttles it to your Ticker FPS at least. You could also set an interval to check it even less often. It can create a little bit of a visible lag, but you can probably find a nice balance.
Reduce what is checked. If you have a container with your clickable elements in it, you can only check that object for mouse interaction.
If your objects are the exact same, you can also just trigger the click manually on the second item.
obj1.on("click", function(event) {
obj2.dispatchEvent(event);
});
I hope those approaches provide you a solution. Let me know if you have follow-up questions.
Cheers,
How to track/listen active dragging event of UI Element in UWP. I added the flat CanDrag=true to enable the drag feature. Using the DragStarting and DragLeave can identify the start and end of drag. But want to get the X,Y coordinate of the UIElement on dragging. Any recommendation to achieve that? I dont want to use RenderTransform for this.
I don't think it's possible in standard Drag'n'Drop flow.
There're few options but they look like a crutch.
You may use manipulations and subscribe to Delta event. That's where RenderTransform comes in.
You may start some time loop and get visual position each frame. (The most crutchy idea)
Try to play wih IsHitTestVisible and subscribe to PointMove of some FrameworkElement behind.
Subscribe to PointEntered and PointExited to the elements you dragging over so they could fire events.
I prefer the first one. It's simple and it's plane.
Is it possible to apply UI virtualization to ScrollViewer in WinRT. In my application I am creating a line chart with the help of Polyline(Polyline embedded inside a scrollviewver). But in the current case, If it come more than 500 points. It blocks the UI during the time of interacting with the Map. So what I am trying to achieve is to apply kind of UI virtualization to scroll view. If anyone had any idea to solve this please help me.
The way I would handle a Polyline is I would break its data into sections, perhaps screen-wide ones (assuming horizontal-only scrolling), put a Canvas inside of the ScrollViewer, make the size (Width) of the Canvas the total size of the chart and put a few (say 5) Polyline controls in it and then on the ViewChanged event update the Polyline controls' Canvas.Left and Points properties to correspond to the area around the current view port of the ScrollViewer. That should give you smooth scrolling. Just don't add/remove or update the controls on each ViewChanged and only update Canvas.Left and Points when you need to - that is when you don't have a Polyline ready to display next to the current view port.
I have created a Windows 8 Store App using C# / XAML. My interface includes a scrollable list, which is rendered using an ScrollViewer. I would like to be able to handle manipulation events on the elements within the list, however, setting ManipulationMode to anything other than None on the list element causes my list to no longer scroll.
Here is a simplified version of the UI:
<ScrollViewer>
<Border/> <!-- these contain child content -->
<Border/>
<Border/>
<!-- Set ManipulationMode on an element in order to receive manipulation events -->
<!-- This causes the scroll viewer to stop working! -->
<Border ManipulationMode="All"
ManipulationDelta="..."/>
<Border/>
<Border/>
</ScrollViewer>
I understand that the WinRT ScrollViewer uses a special ManipulationMode of System for performance reasons, but I would like to have a vertically scrolling list, containing elements that respond to horizontal manipulation / gestures. Can anyone think of a creative workaround that would make this possible?
it may be long time but didn't find any good solution. I just achieved what I wanted very easily.
public MovableGrid()
{
ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.System;
AddHandler(ManipulationDeltaEvent, new ManipulationDeltaEventHandler(UIElement_OnManipulationDelta), true);
AddHandler(ManipulationCompletedEvent, new ManipulationCompletedEventHandler(UIElement_OnManipulationCompleted), true);
}
I wanted my MovableGrid to be moved on X axis and I have list of MovableGrids which I wanted to be scrolled with scrollviewer. That's enough to do that.
What I have done was I put a transparent rectangle on top of the ScrollViewer and handle manipulations there. When I find the manipulation should scroll the ScrollViewer - I scroll the ScrollViewer using the ScrollToHorizontal/VerticalOffset() methods. On ManipulationStarted I also use VisualTreeHelper.FindElementsInHostCoordinates to check which item I could manipulate too and then I can decide whether to manipulate that item or not depending on various conditions. It's quite a bit of custom code though. You would also need to update the RenderTransform of the ScrollContentPresenter in the ScrollViewer when the user tries to drag farther than minimum/maximum offset to immitate the ScrollViewer default behavior, handle mouse scrollwheel etc. Nothing YOU could not handle of course. I could not find a better way unfortunately and I am interested if someone finds one.
EDIT* Another solution I thought of when trying to answer another similar question was to use another ScrollViewer as a child item and use its ViewChanged events instead of manipulation events.
EDIT 2*
Also with Windows 8.1 you get ManipulationModes.System which combined with other modes should allow you to handle manipulations inside of a ScrollViewer. Then you can call CancelDirectManipulations() on the manipulated element once you want its parent ScrollViewers to stop processing manipulations for pan&zoom.
I have a XULRunner application that I want to have display 2d graphics in a HTML element. I would like to be able to repaint those graphics when the window resizes. The layout looks something like this:
<box flex="1" id="canvas-box">
<html:canvas id="canvas" flex="1">
</html:canvas>
</box>
First of all the "width" and "height" properties of the canvas element do not reflect its actual size on the screen. This causes the strokes to come out stretched strangely, since 1 unit in the x direction ends up being different than 1 unit in the y direction. Secondly, I can't get the onresize event to fire, regardless of whether I put it on the canvas or on the surrounding box.
The XUL tutorial does warn that there are layout weirdnesses that will occur when you use HTML elements inside your XUL app, but in this case I don't have a choice because I need 2d graphics. Any pointers?
EDIT For now I'm going to use SVG in the place of the canvas element. I'm in the preliminary stages of trying it out, but at least it doesn't seem to have the weird "stretching" problems that canvas was having.
Couldn't you just put an HTML frame/iframe in the XUL and put the canvas in there?
I thought onresize only worked on <window>, you could resize the canvas and repaint it from there.