Im drawing elements to a new fabric.js canvas. Im using the following code to listen to click events
canvas.on('mouse:down', function(options) {
console.log(options.target);
if (options.target) {
//get details of element
var clicked_id= options.target.get('id')
//before hide or move logs:
//options -> Object {target: u, e: MouseEvent}
//after hide or move logs:
//options -> Object {target: undefined, e: MouseEvent}
}
});
The problems comes, when I hide or move an element. The options parameter within the callback function doesn't recognize that the click X,Y was on top of an element, even if I do a canvas.renderall() call.
The only way I can get around this is to initize the canavs object again.
any ideas?
Call canvas.calcOffset();
after move and render
If it didn't work then try .setCoords();
Related
Can you please show me how the dom can communicate mouse pointer movement events as an input to a phaser scene. I've seen how mouse movement can be tracked within the scene area; but once the mouse leaves and goes to other areas of the DOM, that data is not tracked. I figure if perhaps there was a way to have an input to communicate data from "the outside world" then this could be possible. I am very grateful for help and direction you could share.
All you need to do is add an event listener to the DOM object you also want to track movement in using plain JavaScript. Then, you tie the event listener to the game method you want to execute when the event is triggered.
const body = document.querySelector('body');
body.onmousemove = (pointer) => {
updatePoint(pointer);
};
And then setup your game as normal:
const config = {
type: Phaser.CANVAS,
height: 400,
width: 400,
parent: 'gameContainer',
scene: {
create: create
}
};
const game = new Phaser.Game(config);
let dataText;
function create() {
this.input.on('pointermove', (pointer) => {
updatePoint(pointer);
});
dataText = this.add.text (10, 10, 'x, y');
}
function updatePoint(pointer) {
dataText.text = 'x: ' + pointer.offsetX + ', y: ' + pointer.offsetY;
}
You may have to refactor your code a little bit to get this to work, because the event listener on your DOM element needs to be able to access the game methods. I created a quick codepen showing the setup that worked for me.
I'm trying to implement svg.js to make a map of a clickable floorplan.
But I cannot make this work properly, or this works but doesn't work like I expected:
const map = SVG.get('mysvg');
map.click(function( event ) {
this.fill({ color: '#000' });
console.log(this);
console.log(event.target);
});
When I try to click on some area on the map, instead of change fill color I get nothing.
Actually svgjs triggers 'create' as you can see in console with inspector.
Not sure what am I doing wrong here?
I would expect that the area will change fill color?
https://codepen.io/bobz-zg/pen/LdyXBe
You can use the select function as described here to create a Set. You'd then use the each() method from Set to iterate over each entry and apply the click event handler. For example:
const map = SVG.get("mysvg");
var restaurants = map.select('[id*="restaurant"]:not(g)'); // Create an svg.js Set, but do not capture the group in the set
restaurants.each(function() {
this.click(function(event) {
this.fill({ color: "#000" });
});
});
If you can edit the svg that you are using as an input, I would suggest adding a class to each of the clickable elements to use that as the reference for select. Otherwise, you'll have to do something like selecting all element id 'types' (i.e. restaurant, retail etc.) separately and concatenating the Sets using Set.add() before you do the loop to add the click listener, but that could get messy.
I am working on a highmaps map of the world project and would like to zoom into a marker when the user clicks. I achieved this functionality by using the event in series in the below manner:
events: {
click: function () {
zoomInMarker();
}
},
In my click function I am calling a function that gets Europe's coordinates. the function is defined as below:
function zoomInMarker () {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(740, 1180, false);
chart.yAxis[0].setExtremes(-1730, -1470, false);
chart.redraw();
}
this works but which ever marker on the map I click, obviously always zooms in the same place that is Europe. How do i alter the zoomInMarker function to get the coordinates of the marker that was clicked. like for example using point.position instead of actual values like (740, 1180).
I had got the data using
WinJS.xhr({ url: url, responseType: "json" }).then(
function(result){},
function(error){}
);
I make this stuff on the button click event.
I got the data properly but can not fill them in my ListView.
So now, how can I bind the JSON data in my WinJS.UI.ListView on every click of button with my new data...? please help me for this with some simple example. because I had already checked so many links. But still I could not understand where
it should go something like this:
WinJS.xhr({ .. }).then(function xhrcomplete(req)
{
var data; // assuming you already have code that parsed json text to an object.
var items = [];
// fill code here to get items out of the data
var list = new WinJS.Binding.List(items);
// binding code will depend on whether listview has groupHeaderTemplate or not
// if not - it should be like this
listView.winControl.itemDataSource = list.dataSource; // listView is the id of the your list view control in html
}).then(null, function onerror(error)
{
// handle error case
});
I have checked and tried the method posted here to set where CKEditor dialogs pop up:
Programatically set the position of CKEditor's dialogs
This seems to either be deprecated or incomplete. When attempting this for the 'link' dialog, the dialog box does not format correctly, as if this onShow definition replaces the default action rather than adding to it. Any suggestions to alter this code or a new method to position the link dialog closer to the menu bar?
CKEDITOR.on('dialogDefinition', function(e) {
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(200, 100);
}
})
You're right. Your code is overwriting the basic onShow definition.
What you have to do is simply to save a default (generic) onShow, then overwrite it so it calls the saved one and eventually executes your code:
CKEDITOR.on( 'dialogDefinition', function( event ) {
var dialogDefinition = event.data.definition,
genericOnShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
genericOnShow.apply( this );
this.move( 10, 10 );
// ...or anything you want ;)
}
});
Voilà!
PS. Remember to always pass the context with apply or call.