How to read element's property from js


I’m implementing a sort of image map using an SVG image and its rendered PNG through the following steps:

  • Read SVG image from bundle and extract its polygons.
  • Expose a function who uses a point-in-polygon algorithm.
  • Put a Button element with a Clicked handler.
  • Put a Image element with the rendered PNG image inside the Button element.
  • Capture the user click or tap and send it to the testPointInPolygon function

What would be the recommended way to translate the X, Y point from the Button element to their counterparts in the SVG?

Normally, I would capture the size of the button from the testPointInPolygon function and divide by the size of the SVG image in order to translate to the SVG coordinate system. But I still can not find a way to read the height and width of the button from my testPointInPolygon function in Javascript in realtime.

Example code:

		var Observable = require('FuseJS/Observable');
		var Bundle = require('FuseJS/Bundle');
		var testPointInPolygon = require('./bundle.js');

		var imageWidth = Observable();
		var imageHeight = Observable();

		var svgsource = Bundle.readSync("diagram.svg"); 

		var shapes = ["shape1", "shape2", ...];

	    function buttonClicked(arg){
			var x = (arg.x * 1.21052631578947); //F=414/342
			var y = (arg.y * 1.39787234042553); //F=657/470
			console.log("eval point: " + x + "," + y + " imageWidth: " + imageWidth + ", imageHeight: " + imageHeight);

                        //imageWidth and imageHeight are undefined at this point. Can't translate between coordinate systems.

			for (var i = 0; i < shapes.length; i++) {
				var result = testPointInPolygon(x, y, shapes[i], svgsource);
				if(result == true ) {
					console.log("Shape: " + shapes[i] + " in point: " + x + "," + y);

		module.exports = {
		    buttonClicked: buttonClicked,
		    imageWidth: imageWidth,
		    imageHeight: imageHeight



<ScrollView Dock="Top">
   <Button Clicked="{buttonClicked}">
      <Image Name="diagram" Width="{imageWidth}" Height="{imageHeight}" StretchMode="Fill" Files="./diagram.jpg" />



Unfortunately, you cannot “read” the size of an element by data-binding it’s width and height - that would actually do the opposite; the width and height of the image gets set by the observables!

In Fuse, JS is not intended to have any knowledge about the UI, it only contains data and business logic. In the current version of Fuse (0.26), what you are trying to do is not possible with pure JS code, you would have to use Uno code, where much more information is available, see:

For the future I have however added some extra metadata to the Placed event on all elements (.x, .y, .width and .height) so that in the future, simple cases like this can be handled from JS. This will roll out in a near future release (likely 0.28). Keep an eye on changelogs.

Thanks for reporting this use-case


That would be great.

Thanks Anders!