Symbol not working with HitTest

[Sean Johnson]

First. Thank you guys so much for making such an intuitive and useful
library!

I have a few hundred or so reoccurring symbols I would like hover over
& click on. Following the hitTest demo on your web site and doing a
little experimenting my own, I cannot seem to detect, via Project or
Group objects, when a placed symbol is detected via hitTest.

For example:

HitTest Works with items:
-----------------------------

var path = new Path.Star(new Point(0, 0), 6, 5, 13);
path.style = {
fillColor: 'white',
strokeColor: 'black'
};

// Create a symbol from the path:
//var symbol = new Symbol(path);


// Place 100 instances of the symbol:
for (var i = 0; i < 100; i++) {
// Place an instance of the symbol in the project:
var instance = path.clone();

// Move the instance to a random position within the view:
instance.position = Point.random() * view.size;

// Rotate the instance by a random amount between
// 0 and 360 degrees:
instance.rotate(Math.random() * 360);

// Scale the instance between 0.25 and 1:
instance.scale(0.25 + Math.random() * 0.75);
}

function onMouseMove(event) {
//console.log(event.point.x);
var hitResult = project.hitTest(event.point);
project.activeLayer.selected = false;
if (hitResult && hitResult.item)
hitResult.item.selected = true;
}


HitTest Doesn't work with symbols
-------------------------------------------------


var path = new Path.Star(new Point(0, 0), 6, 5, 13);
path.style = {
fillColor: 'white',
strokeColor: 'black'
};

// Create a symbol from the path:
var symbol = new Symbol(path);

// Remove the path:
path.remove();

// Place 100 instances of the symbol:
for (var i = 0; i < 100; i++) {
// Place an instance of the symbol in the project:
var instance = new PlacedSymbol(symbol);

// Move the instance to a random position within the view:
instance.position = Point.random() * view.size;

// Rotate the instance by a random amount between
// 0 and 360 degrees:
instance.rotate(Math.random() * 360);

// Scale the instance between 0.25 and 1:
instance.scale(0.25 + Math.random() * 0.75);
}

function onMouseMove(event) {
console.log(event.point.x);
var hitResult = project.hitTest(event.point);
project.activeLayer.selected = false;
if (hitResult && hitResult.item)
hitResult.item.selected = true;
}


Any ideas?

Thanks,
Sean

[Marc Grabow]

I have the same problem :/ Any help? 

Thanks!

Marc 

[Ryan Beasley]

According to the comments in this issue  https://github.com/paperjs/paper.js/issues/45#issuecomment-2708357

"Hit testing of placed symbols is still not supported, please open another issue for that."

But no one has cared enough to open an issue yet.

~Ryan

[Ryan Beasley]

Looking through v0.22, the problem is that when PlacedSymbol._hitTest() is called, the function is from a prototype and it does not look at any _symbol.  Try this code, it seems to work for me:

window.paper.PlacedSymbol.inject({

  generics: true,

  _hitTest: function(point, options, matrix) {

    var thisSymbolTest = this._symbol._definition.hitTest(point, options, matrix ? matrix.clone().concatenate(this.matrix) : this.matrix);

    if (thisSymbolTest)   thisSymbolTest.item = this;

    return thisSymbolTest;

  },

});

I don't yet fully understand the code base, so this might not be the best approach.  Let me know if I'm doing anything incorrectly, like the matrix concatenation or "generics: true".

Also, I don't know all the changes with the nightly build, so I don't know if this will work with it.

~Ryan

[Carlo Alberto Ferraris]

I opened an issue for this on Github: https://github.com/paperjs/paper.js/issues/131

[Michael Lee]

I saw the issue #131 is closed, but I faced the same problem again with version 0.9.19.

Originally, hitTest() doesn't find a hitResult. After I used the workaround provided by Ryan, I can select the PlacedSymbol once. But when I do the hitTest the second time, no hitResult was found.

My code do work with Item, so I assume it will work with PlacedSymbol without any modification? Or any thing that I need to add in the hitOptions?