The default way to select a group of objects interactively in fabricjs is to drag, which displays a blue selection rectangle and then, when the mouse is released, selects all the objects in the rectangle.
Because I am using the drag action to pan the background canvas, I want to change the way to select to use only Control + drag, i.e. hold down the control key while dragging. In all other respects, the behaviour should be the same as the default. Is this possible? How?
The reason for wanting to use Control + drag is that it then matches what the user needs to do in another part of the app I'm building.
Related
I need to drag and select the object in fabric.js just by dragging and selecting a small portion of it. Setting 'selectionFullyContained: false' helps us to select it. But if we drag anywhere within the borders select the object.It is the default behaviour of fabric.js.
I need to select the object only when the drag and selection is made exactly on the object.
Dragging the mouse anywhere within the borders select the object
I need to select the object only when the drag and selection is made exactly on the object(that is the black lined borders)
Please note that we can select and drag exactly the object by setting perPixelFindTarget to true.But I need to select the object using mousedrag
Hi :) I would like to ask you about how to treat elements that compose a list, but whom have assiged a button role and are put in side panel ( so it is not a menu or dropdown). My main problem is how to decide is to where ARROWS should works and where TAB.
Moreover I have a differ types of list items that consist of:
checkbox/ radiobutton only
checkbox/ radiobutton with a link to another panel
two icons/ buttons that has defined an activities etc.
Please look at pictures and help me please :)
PINK - "arrows"
BLUE - "TAB"key
You should hardly decide which component will use TAB key or Arrow Keys. Keyboard accessibility for a large number of components is already defined in WAI-ARIA Authoring Practices.
Adding a different behavior could create issues to both sighted, and non-sighted users because they'll already be knowing which key to use based on the component or they'll know intuitively because of standard roles or they'll know as they use keyboard more to browse.
Offer List
Listbox will work. Arrow Keys to navigate and Enter key to perform the action.
List of Checkboxes and Radio Buttons
I would recommend to keep Checkboxes and Radio Buttons to their default keyboard behavior. Since your cases are more of a list, you can convert the list of checkboxes and radio buttons to Single Select and Multi Select Listboxes and use Checkbox and Radio Button as a font icon or graphic to show the selection, similar to how tick is shown in this Listbox example. When you convert to a Listbox, you'll meet the Arrow Keys requirement.
Selected Fruits List
There are some issues in the required keyboard behavior: How will user know if Arrow-Left or Arrow-Right need to be presed, think about non-sighted users.
Fruit Name and i icon button
In your need, you want both Fruit Name and i icon button to open a panel, suggest to NOT use Arrow-Right to i icon button and only use the Enter key to open the panel. May be you don't need i icon button at all.
Delete icon button
Suggest to use DEL key to delete the item
Conclusion
Remove i icon button. If you can't just keep it as graphic element without any events
Use Enter key to open the panel
Use DEL key to delete the item
I think the whole list will then become a listbox, navigable using Arrow Keys and Enter to invoke an operation
Vegetables List
Neither Accordion nor Nested List works here because you have two actions to do: Make a selection, and Expand and Collapse. I haven't tried TreeView but you can check.
I want to make some elements of my app able to be dragged and dropped by the user, so that the user can customize the position and design his own UI.
What I mean by drag and drop is that for example, when you hold and drag the icons or widgets on your phone, you can customize their position. So I want to make some text or images of my app function just like that.
Thanks for the help!
I'm wondering if you guys have an idea on how to handle this problem.
Process:
First i iterate trough this collection. If the input value is the same as the item of the grid box it will stop and select this item.
View of SAP GridBox
Note that every spy mode will select EVERYTHING and the only way to actually read this is with SAP GrixBox.
The problem here is that i need to click the small grey square on the left of the selected Notification. I cannot select it with any hotkey or with a spy mode.
Small grey square MANUALLY selected
My idea was to use capture an highlighted item with the Region mode and then move 5px to the left. But this does not seem to work ...
Any suggestion are welcome!
If I recall correctly the shortcut for selecting an entire row in Sap Grid is Shift + Space. You need to have a cell selected first, though.
I have a scrolled window in my application, in which I have created a drawing area widget. In the drawing area, I have placed multiple images. When the user enters information about an image in a search box, the appropriate image gets highlighted.
My problem is how do I get the application to scroll automatically to the highlighted Image box without the user using the scroll bar. The scrolledwindow should automatically move the view region, to display the region where the highlighted Image is present.
The scrolling policy used on the scrolled window is XmAUTOMATIC.
Any pointers would be greatly appreciated.Thanks in advance.
Try XmScrollVisible() if this does not work then you will need to:
1. Find out the size of the work area.
2. Find out the size and position of the clip window.
3. Find out the max/ min values for the horizontal scrollbar.
4. Use XmScrollBarGetValues() for the horizontal scrollbar to get its position within the max/min values.
5. Do some math magic to determine how much to move the horizontal scrollbar to get the work area to show through the clip window.
6. Call XmScrollBarSetValues() with Notify = True.
7. Repeat for the Vertical scrollbar.
HTH