Connecting the event of dom elements with paper.js object. its working fine. but its executing function very slow.
ex:
<button id="btn">Click</button>
js'
var secondPath = new Path.Circle(new Point(180, 50), 35);
$('#btn').on('click', function(e){
secondPath.fillColor = 'blue';
});
here getting the results but it takes little time. But its working, if I add the event in the canvas elements
Please help me
I believe the issue is that you're using the DOM events, not the paperjs mouse handlers. When you use the paperjs mouse handling it notes whether the canvas needs to be redrawn. When you use the DOM mouse events paper doesn't "know" you've changed the content so it doesn't force an update to the view.
Add a line: paper.view.update() after you fill the circle and things should work correctly.
Related
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
I have a cytoscape graph added to my web app. In the core's configuration I've set the boxSelectionEnabled to true.
This is letting me draw a Box with holding Shift or Ctrl around graph elements.
Now i am trying to read all these elements upon the boxend event of graph like this,
this.cy.on("boxend", lang.hitch(this, function (event) {
console.log("boxend");
//read selected elements of graph by boxselection
}));
But, this even is not triggering. I tried with other box events such as boxstart,boxselect,box but those are not working as well. Although, I tried same with events such as tap,cxttap events and they are working fine without any issue.
So, is there any way to get all the box selection elements from graph with these events.
Thanks,
Suraj.
cy.on('boxend') seems to be working fine. You probably have an issue with wrapping the callback the way you have.
I want two buttons to trigger each his own overlay content (centered vertical and horizontal), but keep the overlay layout the same only the content is different. I wrote a good functional single overlay script for one button, but the two buttons aren't working. In the fiddle there is only the script for one button that i'm using, it is properly quite simple.
Here is the fiddle: link
function funcShow(event){
event.preventDefault();
$('.overlay-info').fadeIn(400);}
function funcClose(event){
event.preventDefault();
$('.overlay-info').fadeOut(400);}
You should put click handlers on your divs using jquery in a document ready function as seen below. Its not as "nice" and accepted to put them in an onclick property like you have.
And also its always nice to have Ids for everything that you are going to use to do things with like click or close. So if you see the example below, you have the document ready function that puts a clickhandler on the first div (id="overlay-one") and the second div as well as the close functions. Try it! It worked for me in you fiddle.
$(document).ready(function(){
$("#overlay-one").click(function(event){
funcShow(event);
});
$("#overlay-two").click(function(event){
funcShow2(event);
});
$("#close-one").click(function(event){
funcClose(event);
});
$("#close-two").click(function(event){
funcClose2(event);
});
});
The document ready function executes after your page is loaded so the clikc handlers are added after the elements have been created. You can also use .click on for classes to add events to a lot of things at once such as $("CLASS").click(function(){//stuff})
i have a problem on my map application, i am trying to put a coustom control on a Panorama and when users click to this custom button, panorama informations wll be saved.
For this purpose, i am using a function to check if there is a panaroma data exists
function checkforstreetview(mapid){
service.getPanoramaByLocation(markers[mapid].getPosition(), 50, function(r,status){
if(status==google.maps.StreetViewStatus.OK){
google.maps.event.addListener(markers[mapid], 'click', function (e) {
panorama[mapid].setVisible(true);
return false;
});
panorama[mapid].setPosition(markers[mapid].getPosition()); // custom control is moving to the left occurs here
}
});
}
as first, i am getting marker position on the map and check for panorama within 50m then if there is a panorama data, i am binding an click event to the marker for switching to panorama.
I am placing customdiv control via;
panorama[mapid].controls[google.maps.ControlPosition.TOP_CENTER].push(customdiv[0]);
Html markup of custom control is:
<div id="customdiv" title="Get data" style="height:10%;cursor:pointer;margin:0 auto;"><img src="/customdiv.jpg" style="height:100%;float:right;margin:5px;"/></div>
At the same time, i've assigned a function for drag and drop event for marker (with addlistener method), so if the marker drag'n drop to another position, checkforstreetview function is executed again.
So, what is the main problem?
In first execution there is no problem, when i click to the marker, panorama opens correctly and custom control is correctly placed but after close the panorama, drag'n drop marker to another position and click to marker again to show new panorama for new position, custom control moving to the left of panorama view.
Correct positioning (when system is initially loaded)
And buggy positioning (when i switch to panorama view in second time with marker click)
Extra information :
Because of google maps need to know height and width of container to work properly, i am using visibility: hidden rule for map container, not display:none but i think this cannot be problem bacause, on system load everything works correctly.
I've tested on Windows 7 / Firefox - Chrome - Opera - Safari - IE (lastest versions)
Tried solutions:
Many CSS hacks
Re-positioning custom control via google.maps.ControlPosition.TOP_CENTER
I've tried to put custom control to another positions BOTTOM_CENTER, LEFT_BOTTOM, .. etc but every time, custom control is moving to another position (shifting to the right, top, left )
Finally, i've commented out panorama[mapid].setPosition(markers[mapid].getPosition()); line and i've used standard packman to panorama/map switching then there is no problem on custom control positioning.
EDIT : Another interesting point is, after wrong positioning of custom control (and adress bar) when i click to next/previous arrows for next/previous images of panorama, custom control and adress bar becomes normal (correct position)
What can be the solution to stop shifting/moving costom control?
Thanks right now...
You cannot designate static CSS for the API, you must tell the maps API what you want your CSS to be (assign CSS properties in javascript):
https://developers.google.com/maps/documentation/javascript/examples/control-custom
I've resolved the issue by below function
google.maps.event.addListener(panorama[mapid], 'position_changed', function() {
google.maps.event.trigger(panorama[mapid],'resize');
});
I have a Google Map Version 3 that I can't quite get working as I want. When the map opens there are several markers on the page and clicking or hovering on the marker opens a little InfoBox with the name of the hotel. Clicking on another marker closes the first InfoBox and opens a new one on the new marker. The problem comes with closing the last InfoBox.
If I allow the closeBox in the options, the closeBox (little cross in a square) gets left on the screen when the rest of the InfoBox is closed. This only happens when the InfoBox closes because another one has been opened. As I can't find a solution to this, I intended to do away with the closeBox and let users click a blank area of map to get rid of the final InfoBox. However, at the moment, that doesn't work either.
The problem page can be seen at http://www.littlehotels-testdomain.co.uk/spain/abadia.php (click on "See a location map for this hotel" just to the right of the photo).
The bit of code which should make this work is:
google.maps.event.addListener(hotelmarker, 'mouseover', function() {
var ib = new InfoBox(ibOptions);
boxText.innerHTML = hotelname;
ib.open(map, hotelmarker);
});
google.maps.event.addListener(map, 'click', function() {
ib.close(map, hotelmarker);
});
Is there something in the second event listener that I am missing?
You need to make your ib (infoBox reference) global. Put it outside your Listener functions.
Andy's 47th rule of JavaScript programming: never use a global variable to accomplish something you can do with a single line using jQuery:
$(".infoBox").hide();