Change behavior of "control" and "shift" keys in OrbitControls - three.js

Using a scene with OrbitControls and as far as I can tell by default pressing the ctrl and shift key reverts the left and right mouse movements.
in my setup left mouse click rotatoes arounds the scene and right mouse clicks move around the 2d plain.
how can I disable the ctrl and shift key reversing that?
a hack I found is to edit the controls mouseButtons back when the keys are pressed:
this.controls.mouseButtons = {
LEFT: shouldSwitch ? 2 : 0,
MIDDLE: 1,
RIGHT: shouldSwitch ? 0 : 2,
};
using r141

OrbitControls does not allow disable the processing of "control", "shift" and "meta" keys. You would need a custom modification and remove the following two sections:
https://github.com/mrdoob/three.js/blob/f30599ed21818efbbffee6e923957616fd410016/examples/jsm/controls/OrbitControls.js#L905-L913
https://github.com/mrdoob/three.js/blob/f30599ed21818efbbffee6e923957616fd410016/examples/jsm/controls/OrbitControls.js#L927-L935
Changing the mouse button configuration (OrbitControls.mouseButtons) when one of the keys are pressed like suggested is also a valid solution.

Related

MFC: CListView: Why SetItemState(-1, 0, LVIS_SELECTED) doesn't work if multiple items were selected with SHIFT + arrow key?

Easy to reproduce problem using default MFC dialog application:
Add listview control and link it to CListCtrl class - m_listCtrl.
Enable "owner data" or LVS_OWNERDATA flag to enable virtual list view mode. Enable multiple selection and "Always show selection".
In OnInitDialog() add at least one column and call m_listCtrl.SetItemCount() to set number of items in the list to more than one.
Link button click with a method that calls m_listCtrl.SetItemState(-1, 0, LVIS_SELECTED); That call should deselect all entries in the list.
Click on item in the list and use SHIFT + arrow key to extend selection to at least two entries. If selection is extended with mouse or CTRL + click or CTRL + SHIFT, then the issue doesn't appear.
Click on a button that triggers SetItemState() call in step (4) and notice that items don't get deselected the first time. They only get deselected the second time.
Is that a bug in listview control or am I doing something wrong?
Calling m_listCtrl.SetItemState(-1, 0, LVIS_SELECTED); should deselect all entries with the first call, but it does so only when called twice.

WIN32: Duplicate Standard Button Control (disabled Icon / hotkey underline) in Owner Draw Button?

So for the simple feat of wanting to put an icon on the right side of button text instead of the left resulted in having to use owner draw buttons (but someone here said Custom Draw is actually available if using visual themes). Okay, fine, but now I'm finding you can't really duplicate what Windows standard buttons do when it's not in owner draw mode.
For a normal enabled button I can get the look correct by checking if visual styles are available or not and then using either the DrawThemeBackground() / DrawThemeText() or DrawFrameControl() / DrawText(). However the hot key underline character is shown even when alt key is not pressed, the default buttons don't show it until alt pressed.
For a disabled button, I can't duplicate the disabled look of the icon placed on the button. I tried DrawState() over DrawIconEx() but that looks like the old Windows 3.1 type grey graphic not the visual style dimmed graphic. I see there is a DrawThemeIcon() for an image list, I guess I could try that (I'd have to test non visual style mode to see if DrawState() matches when not using visual styles).
Also, as you hover over the button, the state doesn't change, I understand that if using owner draw, that doesn't occur, maybe it would still work with Custom Draw?
So the two main questions are:
1 - Is there something built-in to the button / owner draw to handle the underlined hotkey only when alt was pressed?
Update to Question 1: I found DT_HIDEPREFIX in DrawText() and using Custom Draw there is the CDIS_SHOWKEYBOARDCUES flag. However with Owner Draw I'm not sure if there is a flag someplace?
2 - How do you draw an icon for a button that is disabled to match what default buttons do?
TIA!!
For shortcut underline you can use WM_QUERYUISTATE to ask if it should be hidden or visible
DWORD draw_text_flags = ...;
if ( SendMessage( control_hwnd, WM_QUERYUISTATE, 0, 0 ) & UISF_HIDEACCEL ) != 0 )
{
// hide prefix
draw_text_flags |= DT_HIDEPREFIX;
}
// some combination of PBS_DEFAULTED, PBS_DISABLED, PBS_HOT, PBS_NORMAL, PBS_PRESSED;
int state = ...;
DrawThemeText( theme, hdc, BP_PUSHBUTTON, state, text, text_len, draw_text_flags, 0, rect );
Answer to Q2: If you create an HIMAGELIST using ILC_COLOR32 | ILC_MASK, and use ILD_NORMAL|ILD_BLEND25 on ImageList_Draw() it gives the same look as windows default buttons for a disabled button.
Based on responses from #Remy-Lebeau and #Daniel-Sęk and reviewing various projects on CodeProject, I create an easy to use class to handle this. It can be found at CodeProject. Thanks Guys.

Way to modify OrbitControls to rotate camera with right click hold, and orbit target while holding alt

I wish to modify the OrbitControls example found here (https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js) to allow a user to rotate the camera using right-click-hold and while holding alt, orbit the camera about a point in front of the camera. As far as I can tell this only requires a change to the target and offset but I can't seem to get things working correctly. What is the best way to go about doing this?
What I've tried so far:
setting a flag variable 'isOrbit' to true on alt button down and in the update function changing the target location to a certain distance in front of the camera, then on alt button up, making 'isOrbit' false making the update function return the target
Changing the target directly on alt button-down and button-up
If you have a control scheme that works in a way similar I'd love to check it out, if not, tips would be appreciated. Thanks!

Holding Shift prevents mouse wheel zoom in firefox

I am trying to provide users 3 options when they zoom into a d3 chart with the mouse wheel with
d3.behavior.zoom():
zoom x and y: No modifiers
zoom x only: Hold Alt
zoom y only: Hold Shift
This works fine in firefox, but chrome is preventing my zoom from working when shift is held down. This same problem can be seen in in the d3 zoom example, if you hold down shift, the mouse wheel zoom no longer works:
http://bl.ocks.org/mbostock/3892919
I would try to use Ctrl instead of shift, but ctrl is already reserved for Browser Zoom Level.
Any idea if shift+mouse wheel is already reserved in chrome or if this something can be fixed in a future version of d3?
I had the same issue earlier today. When I investigated, I found that it was a "bug" in the d3 zoom behavior. You can find my pull request here: https://github.com/mbostock/d3/pull/1938.
If you look in the d3 repo at src/behavior/zoom.js:327, you'll see that the function is using d3.event.deltaY to get the scroll wheel delta, which is used to update the scale value. The problem is that, in Chrome, holding down the Shift key while scrolling scrolls the page horizontally, which sets deltaX instead of deltaY. Since d3 is only checking deltaY it gets a 0 value every time the Shift key is pressed.
Unfortunately I don't have a good work-around for you at the moment. In my case I may modify the d3 source file that we're using until/unless my fix is applied. Maybe someone else will have a better work-around.

Firebug: How to inspect elements changing with mouse movements?

Sometimes I need to inspect elements that are only showing up on a page if you put mouse over some area. The problem is that if you start moving mouse towards firebug console in order to see the changes, mouse-out event is triggered and all changes I am trying to inspect disappear. How to deal with such cases?
Basically I am looking for something that would either:
Switch to firebug console without moving a mouse (using keyboard shortcuts maybe? But I can't figure out how to use firebug with keyboard only)
Have an ability to "freeze" the page so your mouse movements don't trigger any events anymore.
Thanks.
HTML Tooltip (Firebug)
Select the element with the inspector or in the DOM. Go to the "Styles" tab in firebug and click to the small arrow on the tab and select ":hover" (also available ":active"). The state will remain on "hover" and you can select other elements to make them hover.
HTML Tooltip (Firefox developer tools)
Click the button to see three checkboxes, which you can use to set the :hover, :active and :focus pseudo-classes for the selected element
This feature can also be accessed from the popup menu in the HTML view.
If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:
JQuery Tooltip
Open the console and enter jQuery('.css-class').trigger('mouseover')
Regular Javascript Tooltip
Open the console and enter document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
The style panel in Firebug has a dropdown menu where you can choose the :active or :hover state.
You can also start the debugger on a timer. Enter this command into the console:
setTimeout(function(){ debugger; }, 10000);
This will give you 10 seconds to use the mouse and make the page look the way you want in order to inspect it. When the debugger starts, the page will freeze, and you'll be able to explore the elements in the developer tool tab, without the DOM changing or responding to any additional mouse events.
I think you can also do this :
Choose Firebugs Inspect mode
Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.
Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console
Worked for me anyway!
For Jquery UI tooltip I finally set up a long delay for the hiding of the element so I have time to inspect it before it's deleted. For example, I used this to inspect the tooltip:
$( document ).tooltip({ hide: {duration: 100000 } });
instead of:
$( document ).tooltip();
You could insert a breakpoint at the start of the mouseout event handler. Its code won't be executed until you allow it to continue, and you can use the DOM inspector and so forth while execution is stopped.
Firebug's hotkey for inspecting elements is Ctrl + Shift + C (Windows/Linux).
Go here for a list of all Firebug keyboard shortcuts.
For the bootstrap tooltip:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
While selecting :hover in the CSS menu might be nice if you only want to inspect some CSS code, it doesn't work if whatever you want to inspect is changed using JavaScript.
A simple hack in this case is to open Firebug in a different window (top right corner of the Firebug bar) than move your mouse at the desired location and drag and drop something from there out of the browser window. Now you can inspect whatever in the Firebug window. Just don't move your mouse back into the browser window.
For Javascript events such as Mouse over.
Open Firebug/Inspect an element.
Click on the element before the mouseover event, e.g. click on a div. It will turn blue to show it is selected.
Put your mouse over the element and don't move it from this point forward.
Use your ↑/↓ arrow keys to manoeuvre in Firebug.
Use your ←/→ arrow keys to expand/contract code with + or -.
Double tap Tab to get to the CSS pane.
Use the arrow keys to navigate. Use shift and arrow keys to select text. Ctrl & C to copy.
Hold Shift and double tap Tab to get back to the HTML pane.
I'd like to chip in with my preferred method. Putting this little snippet in your console allows you to start the debugger at any time with a simple keypress on your keyboard (F8 is used in this example)
document.addEventListener("keydown", (event) => {if (event.key == 'F8') {debugger}});
You can also use a keycode if you prefer:
document.addEventListener("keydown", (event) => {if (event.keyCode == 119) {debugger}});
I found that Chrome does work a bit differently than Firefox. In particular, menus that close when the mouse is clicked outside of the menu remain open when inspecting them in Chrome (and they close when inspecting them with Firebug). So the advice is to try to use a different development tool in a different browser to see if it makes a difference.
Open console:
If you have javascript based tooltip, find applicable elements in console with appropriate selector. like below and confirm you able to find appropriate element with selectors.
$('your selector')
Write above javascript and Press enter. you will have list of elements.
Now e.g. If library added event on mouseenter enter following script:
$('your selector').mouseenter()
Press enter.
This way you can simulate mouse movement events without actual mouse. and can use actual mouse pointer to investigate thing in debugger tool.
This is an extremely old question by now, but I've found an answer that directly answers the "freeze the browser" portion of the question.
Control + Alt + B. This is "break on mutate". Which means, when you are hovering over an element with firebug engaged (Control + Shift + C), that when the HTML attributes would change, instead they hit a breakpoint, allowing you to easily navigate around to examine for paths, etc.

Resources