Using the latest version of OpenLayers with React. Trying to change the cursor to pointer in the following way:
function mapOnMove(evt) {
if (evt.dragging) return;
const pixel = map.getEventPixel(evt.originalEvent);
const hit = map.hasFeatureAtPixel(pixel);
evt.map.getTargetElement().style.cursor = hit ? 'pointer' : '';
}
In development everything works as expecting. Cursor turns into pointer on feature hover.
However, after using build script, and serving static files - cursor pointer doesn't work.
Tried to look for the reasons and couldn't find anything appropriate. Maybe someone has any ideas.
Related
I have custom marker icon (gif/png) to display on Google Map V2. I am using GICON and shadow property to set image path. The marker icons are diplaying as expected in development system. But after i deploy the system into server (Windows server 2008 r2, IIS 7.5), the icons are not displaying in some PC (not all). For some users the icons are displaying but for some users it is not displaying. I really appreciate all your help on this regard.
The code used is below :
var cm_baseIcon = new GIcon();
if (Records[i].Act == '1')
cm_baseIcon.shadow = "images/img/Markers/green.gif";
else
cm_baseIcon.shadow = "images/img/Markers/red.gif";
cm_baseIcon.iconSize = new GSize(27, 27);
cm_baseIcon.iconAnchor = new GPoint(9, 34);
cm_baseIcon.infoWindowAnchor = new GPoint(0, 0);
cm_baseIcon.infoShadowAnchor = new GPoint(13, 27);
var markerOpts = {};
var icon = new GIcon(cm_baseIcon);
markerOpts.icon = icon;
When I load your test page, I don't see any markers. Should the page create some markers when first loaded like this, or do I need to interact with the page in some way to get it to display any markers?
I set a breakpoint inside the initialize() function. Your Records variable is an empty array, i.e. []. So the for loop in this function that creates the markers never executes.
Do you know how to use the JavaScript debugger in a browser? It will let you figure out what is going wrong without having to ask anyone. I and other people here are happy to help, of course, but you'll make much faster progress if you can debug this on your own.
I recommend the developer tools in the Chrome browser. Here is a good introduction to the Chrome DevTools. Read through that and try out the JavaScript debugger in particular. You can stop your code and look at variables, change values, single step through the code to see what each line does, etc. This will at least double your productivity in JavaScript, and probably even more than that.
After a few test I finally saved a fabric.canvas to a MySQL database, the problem is that I don't want that the images in the canvas can be resized, I only need the rotation. Unfortunately the json stored doesn't store the lockScalingX and lockScalingY properties of the fabric.Image object and when I retrieve the fabric.canvas I can resize the image.
Is there any way to avoid this?
I use the function
var jsonCanvas = JSON.stringify(canvas.toDatalessObject());
to store the json to a database using php
And I retrive the stored json using
canvas.loadFromJSON(data);
To see what I'm talking about see this fiddle -> http://jsfiddle.net/lpccoder/YX9Wf/1/
I set the oImg.lockScalingX = oImg.lockScalingY = true; before to add to canvas to avoid resizing.
The button Save, saves the canvas but when I load it (using Load button) I can resize the image.
Well as I don't received any answer for this, I'm trying to set the lockScalingX and lockScalingY after load the canvas, but some strange behaviour happens when I use the forEach method. I mean, I need to put an alert before the forEach to get this working, if I don't put this alert the forEach loop doesn't work. To clarify this you can see and compare this two fiddles:
Working one -> jsfiddle.net/lpccoder/hGPCG/
Non working one -> jsfiddle.net/lpccoder/Vv4AW/
I'm new on javascript coding, maybe it's a newbie question, but I think that's a very strange behaviour... Any solution?
Thanks to Rodrigo Pandini who answer this question at https://groups.google.com/forum/#!topic/fabricjs/rGX8F93TeGE
The solution is to use the callback function to set the properties manually:
canvas.loadFromJSON(jsonCanvas, function(){
var objects = canvas.getObjects();
// Trying to set the property after load JSON
//alert('Objects: ' + objects);
objects.forEach(function(o) {
o.lockScalingX = o.lockScalingY = true;
});
canvas.renderAll();
});
Because as far as I know the json doesn't store this properties.
You can check the final solution at -> http://jsfiddle.net/lpccoder/Vv4AW/1/
I have a Maven Jetty project with JSPs using JavaScript. I want to be able to highlight parts of a canvas corresponding to the dragged image's size.
When I look at my JSP by simply opening it in the browser everything works as expected but when I start the Jetty Server with the goal jetty:run the ID of the dragged object is not being set or cannot be retrieved from the transferData of the event.
The relevant code: All draggable images have a unique ID. On drag start I set the ID of the dragged image on the event's transferData like this:
function dragShipFromTable(event) {
event.dataTransfer.setData("id",event.target.id);
}
When the image is dragged over the canvas I call the following function
function allowDrop(event) {
event.preventDefault();
var id = event.dataTransfer.getData("id");
var img = document.getElementById(id);
// Do the highlighting stuff
....
}
The problem is that when the server is started and I do the above action then in allowDrop(event) the ID of the dragged image is not being retrieved from the transferData. It is undefined and therefore the highlighting fails. This is not the case when simply opening the JSP as a File.
Well I kind of found the answer to my own question. First of all the setData method on the dataTransfer object only allows certain formats as first parameter. I interpreted it as an associative array but this is not the case. So it should be
event.dataTransfer.setData("text/plain", id);
event.dataTransfer.getData("text/plain");
to set and retrieve the id correctly.
But in the end everything failed due to chrome as there is a bug in Chrome which prevents me from using dataTransfer as intended (see How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken? ).
I now use global variables to store the information I need. And still I am wondering why everything worked fine when the page was displayed as a file instead of as a response from the webserver.
Is there a way to set the priority (CursorManagerPriority.HIGH) of a mouse cursor set via Mouse.cursor = '...';?
Long story short, I've had to resort to using the CursorManager to apply cursors, because setting the priority is crucial for my application due to the HTML control overriding all cursor changes without a high priority. Setting cursors with the cursor manager totally works, but the cursors aren't as fast/response as those rendered at the OS level (as described here).
If there isn't a way, my next question is: is there any way to suppress the cursor changes made by the HTML control? Setting mouseEnabled = false does it... but disables all mouse events on the HTML page, so that doesn't work.
Example:
This doesn't work:
setInterval(function():void { Mouse.cursor = 'ibeam'; }, 100);
Setting a cursor with a high priority works, however:
// ibeamCursor is an embedded PNG
CursorManager.setCursor(ibeamCursor, CursorManagerPriority.HIGH, -2, -4);
(this code is used at mx:Application scope)
I'm going to assume that you have access to the code for the HTML control...otherwise, I'm not sure you can do this at all.
I don't think you can set priority on cursors set by Mouse.cursor = "..."; (tho I could be wrong...if anyone has info to the contrary, feel free to correct me.)
However, I think you can very easily suppress cursor changes simply by using a boolean variable and an if-statement.
var customCursors:Boolean;
Then, on each place where the cursor changes occur...
if(customCursors == true)
{
Mouse.cursor = "mycursor";
}
This will allow or suppress changes to the cursors, simply by changing the customCursors variable.
However, there may be something more useful if you're dealing with two conflicting cursors, and you want one to only take place during certain instances. For that, you could try a different if statement.
In my own code, I want one cursor to show up only while dragging an object, but not just while the mouse is over it. One is inside the move event, and the other inside the over event. There was a third that would show up only when the object was dragged over a certain point, and when it was not, it needed to be the regular dragging cursor.
This created a rather annoying conflict...
To fix that, I actually checked the Mouse.cursor property in my if statement! The placement of various Mouse.cursor statements in my events created a sort of priority for the cursors. It works perfectly.
In my mouse over statement:
Mouse.cursor = "hand";
In my mouse down statement (where I start dragging):
Mouse.cursor = "dragging";
In my move statement:
if(Mouse.cursor == "draggingover")
{
Mouse.cursor = "dragging";
}
In my mouse up statement (where I stop dragging):
Mouse.cursor = "hand";
In my mouse out statement:
Mouse.cursor = "pointer";
I hope this helps! If it does, don't worry about overlooking this seemingly obvious solution...I think we're all prone to do so when we're looking for built-in functions.
If this isn't helpful, sorry. Again, I don't think there is another way, but if anyone knows of one, please weigh in.
I believe HTML control inherits from ScrollControlBase. Try fixing your Mouse issues on that parent control, rather than on the HTML control.
Also, you can try overriding the HTML control, adding code to remove default cursor look and feel. See this blog post, and just do the opposite.
I've got a pure AS3 (no Flex) project that uses Flare to display and interact with a data visualization. I just implemented some panning behavior, so you can click and drag the visualization around, and now I'd like to give the user a visual indicator that this is possible, by switching the arrow cursor with a nice grabby-looking hand icon.
The user can click and drag at any time except when the mouse is over a clickable node (at which time the cursor swaps to a pointer - this behavior is already in place).
So...
1) Do I need to create my own custom bitmap/sprite or is there a palette of built-in cursors I can use? (I'm not using Flex.)
2) Is there a way to simply replace the default arrow with the pan cursor project-wide, or do I need to attach the swapping to mouse events on display objects? Can I use the stage object to make this behavior apply everywhere?
3) How do I perform the swap? Do I use the Cursor object directly or do I need to get involved with the CursorManager?
Any guidance, pseudo-code, or words of wisdom is greatly appreciated!
I don't think there's a CursorManger in flash, only flex. The way i'm doing is with a custom class which hides the cursor and drags the customized cursor at mouse_move. You have to set it to mouseChildren=false, otherwise will flickr or the buttons will not be clickable. One problem i found is with custom contextual menus. Try this link http://abrahamyan.com/2009/03/23/as3-cursormanager/
A few things I learned (all pretty newby, really). Firstly, there are some built-in cursor options you can set by setting Mouse.cursor to any of the options of MouseCursor.TYPE. The Mouse object is a singleton available app-wide, so anywhere you change it in your code, the change persists until another change is triggered.
For my simple case, I did this:
//on init, start with the "hand"
Mouse.cursor = MouseCursor.HAND;
//on clickable items, change to "pointer", then back to "hand"
myClickableNode.addEventListener(MouseEvent.ROLL_OVER, function(evt:Event):void {
Mouse.cursor = MouseCursor.BUTTON;
});
myClickableNode.addEventListener(MouseEvent.ROLL_OUT, function(evt:Event):void {
Mouse.cursor = MouseCursor.HAND;
});
The result is you always have the "hand" until you rollover something clickable, then you get the "pointer".