I have a map where a user can choose some object/feature on the map and draw a line to another object/feature. When the user selects the feature i would like do add a draw interaction and already set the first point to the selected feature without the user having to click again on the map.
Here is a fiddle: Sample
The commented code below should be executed programmatically without user interaction, after pressing the draw button
geometryFunction: function (c, g) {
if (goog.isDef(g)) {
g.setCoordinates(c);
} else {
// DO THIS AUTOMATICALLY ON PRESSING DRAW
// TO INITIALIZE AND START THE DRAWING PROCESS
c[0][0] = 1174072.754460305;
c[0][1] = 332653.94709708635;
g = new ol.geom.LineString(c);
}
...
}
The current behaviour is that you click on the Draw button and can click on the map to start drawing (but i overwrite the first node with my desired starting location -- in this example near central africa)
Is it possible to click on Draw and the first node is already programmatically set, without having to click on map first?
It is not currently possible to do manually append points to the OpenLayers 3 ol.interaction.Draw, but it would make sense to be able to support it (in my mind). It would be "as-if" the user had clicked.
You should ask the OL3-dev mailing this about adding such a feature to see what they think about it. If they agree and you're willing to work on this, you could provide a pull request. See: https://groups.google.com/forum/#!forum/ol3-dev
If you don't mind using a private method in OL you can do this to achieve what you want.
var event = $.Event('click'); //create a click event in your draw method using JQuery
event.coordinate = [1174072.754460305,332653.94709708635];// set your starting coordinate
draw_interaction.startDrawing_(event);// tell your interaction to start drawing
Related
I'm enjoying learning about KonvaJS with react and typescript.
I have a click handler on component that will create a new star at the x and y coordinates where it was clicked. It does this by adding the x and y coords to state.
That coord array is mapped over which renders the stars in the layer.
What I want to know is for recommended ways for the Stage component to know whether a blank space has been clicked or if a star has been clicked.
If a star has been clicked I want to remove it from state, but currently the stage is adding a new star there.
Is there a way for a child component, a star, to communicate up to its grandparent, the stage, letting it know it has been clicked, and therefore remove this star, not add another?
You could check the target of the click, using a function similar to that posted below, and check an attribute on that target. If it matches, call remove on it. Otherwise, add a new star.
stage.on('click', function (e) {
console.log(e.target)
if(e.target.attrs.name === "star") //this would require you adding a name: "star" attribute to all star objects, but could be done another way
{
//code to remove star
}
else {
//code to add star
}
});
I'm looking for a way to draw a rectangle in a single drag movement, so the user click and hold the mouse pressed then move the mouse and the rectangle is painting as he go and the drawing is finished when he stop pressing the mouse.
Currently it's done using mouse click -> drag -> mouse click again to finish, not that intuitive.
I'm using the latest OpenLayers 3.
Thanks!
The functionality asked for is already present in latest openlayers version (v3.19). Use ol.interaction.Draw.createBox() to create a rectangle with 2 clicks one for start and another for end. See the below example for more details
http://openlayers.org/en/latest/examples/draw-shapes.html?q=draw
You can create your style for the rectangle by creating style object and declaring it in ol.interaction.Draw().
Instead of using the built-in interaction use an instance of https://github.com/openlayers/ol3/blob/master/src/ol/interaction/dragzoom.js but pass in an option/condition to not use the shift key. Here are the conditions https://github.com/openlayers/ol3/blob/master/src/ol/events/condition.js
Have you looked into the DragBox interaction? This will give the user an outline of the box as they are drawing it with click, drag, and release being the interaction.
I am trying to make an image picker component in LibreOffice.
I have a dialog that is dynamically filled with images. When the user clicks on one images, it should be selected and the dialog should be closed.
The problem is that the number of images is variable. So I need to enable scrolling in the dialog (so that the user can navigate through all images).
There seems to be some properties on the dialog object (Scrollbars, Scroll width, Scroll height, etc)
However, I cannot find a way to use them anywhere.
Any ideas?
The scrollbar is one of the Controls available through the dialog box editor. That is the easier way to put a ScrollBar on a dialog box. Just insert it like any other control. There is a harder way via DialogModel.addControl but that seems non-essential to answering this question.
If you add a scrollbar to the dialog box and run the dialog box, you will find it does nothing by default. The functionality (apparently) must be written into a macro. The appropriate triggering event is the While Adjusting event on the ScrollBar object, although it does not trigger the macro simply with the "Test Mode" function in the dialog editor. Running the dialog box through a macro triggers the While Adjusting event when the scroll arrows are triggered, when the slider area is clicked to move the slider, and when the slider itself is dragged. The Object variable returned by the scrollbar event contains a property .Value which is an absolute value between 0 and the EventObject.Model.ScrollValueMax, which allows you to manipulate the other objects on the page manually based on the position of the slider.
Yes, that's right, manipulate objects manually. The sole example I found, from the LibreOffice 4.5 SDK, does precisely this. Of course, it is not as bad as it sounds, because one can iterate through all of the objects on the page by reading the array Dialog.getControls(). In any event, the secret sauce of the example provided in the SDK is to define Static variables to save the initial positions of all of the objects you manipulate with the scrollbar and then simply index those initial positions based on a ratio derived from the scrollbar Value divided by the ScrollValueMax.
Here is a very simple working example of how to scroll. This requires a saved Dialog1 in the Standard library of your document, which contains an object ScrollBar1 (a vertical scrollbar) and Label1 anywhere in the dialog. The ScrollBar1 must be configured to execute the macro ScrBar subroutine (below) on the While Adjusting event. Open the dialog by executing the OpenDialog macro and the scrollbar will move the Label1 control up and down in proportion to the page.
Sub OpenDialog
DialogLibraries.LoadLibrary("Standard")
oVariable = DialogLibraries.Standard.Dialog1
oDialog1 = CreateUnoDialog( oVariable )
oDialog1.Execute()
End Sub
Sub ScrBar (oEventObj As Object)
Static bInit As Boolean
Static PositionLbl1Y0 As Long
oSrc = oEventObj.Source
oSrcModel = oSrc.Model
scrollRatio = oEventObj.Value / oSrcModel.ScrollValueMax
oContx = oSrc.Context
oContxModl = oContx.Model
oLbl1 = oContx.getControl("Label1")
oLbl1Model = oLbl1.Model
REM on initialization remember the position of the label
If bInit = False Then
bInit = True
PositionLbl1Y0 = oLbl1Model.PositionY
End If
oLbl1Model.PositionY = PositionLbl1Y0 - (scrollRatio * oContx.Size.Height)
End Sub
The example provided by the SDK does not run on my setup, but the principles are sound.
There appears to be a second improvised method closer to the functionality one might expect. This method uses the DialogModel.scrollTop property. The property appears to iterate the entire box up or down as a scroll based on the user input. There are two problems using this methodology, however. First, unless you put the scrollbar somewhere else, the scroll bar will scroll away along with the rest of the page. You will need to adjust the location of the scrollbar precisely to compensate for/negate the scrolling of the entire page. In the example below I tried but did not perfect this. Second, the property seems to miss inputs with frequency and easily goes out of alignment/ enters a maladjusted state. Perhaps you can overcome these limitations. Here is the example, relying on the same setup described above.
Sub ScrBar (oEventObj As Object)
Static scrollPos
oSrc = oEventObj.Source
oSrcModel = oSrc.Model
scrollRatio = oEventObj.Value / oSrcModel.ScrollValueMax
If IsEmpty(scrollPos) = False Then
scrollDiff = oEventObj.Value - scrollPos
Else
scrollDiff = oEventObj.Value
End If
scrollPos = oEventObj.Value
oContx = oSrc.Context
oContxModl = oContx.Model
oContxModl.scrollTop = scrollDiff * -1
oSrcModel.PositionY=(scrollRatio * oContx.Size.Height/5) * -1
End Sub
This (sort of) will scroll the contents of the entire dialog box, within limits and with the caveats noted above.
I have a simple custom cursor code that loads a cursor from my Content folder to a Texutre2D, and then simply draws it on Draw. How can I program the image to change when I hold right click and then switch back to default when I release right click?
You have to load both your textures in two Texture2D variables, then simply check in your Update the state of the right button.
if (mouse.RightButton == ButtonState.Pressed)
cursorTexture = pressedTexture;
else
cursorTexture = releasedTexture;
Of course, cursorTexture is the one you have to draw.
I've implemented drag and drop OK with jQueryUI draggable and droppable.
For the less savvy users, I'd like to also offer a visible "move" button. When they click this button, the element would be picked up, and when they click again on a drop target, it's dropped. So the same as drag and drop, but started with one click and dropped with another.
I know it would be possible to do this with separate code, but I'd rather not reinvent everything for a slight variation. Is there a way to get jQueryUI to do this?
The only thing I found is calling the trigger method of the draggable, but you have to pass a mousedown event...
Thanks
See my answer on this other question. If you change it so instead of
$("#headerDiv")
.mousedown(function(event) {
x = event.pageX;
y = event.pageY;
$(this).parent().addClass('movable');
})
.mouseup(function() {
$(this).parent().removeClass('movable');
});
bind to click and implement a toggling mechanism to decide if you are beginning the drag (mousedown equivalent) or ending the drag (mouseup equivalent) you should be most of the way there.
I would use .animate to animate the object to its target. I have done this before with a game. For example you could specify top and left coordinates for the element to move to onClick of the button.