I'm creating a SymbolDefinition
for a circle, and placing it on the canvas using new SymbolItem(definition)
. The circle object used to create the definition had a default position of (0,0), a default color, and no additional information because whatever defaults paper sets.
When I instance the symbol and place it at a certain position (lets say (20,30) for example), I also append some other information such as a name, some supplementary info in its data property, etc.
If I click on the placed circle, and have a callback search for that item using project#hitResultAll
, the item contained within the hit result no longer possesses any of the information mentioned above. In fact, it appears to be the original circle object used to create the definition; its position is in fact (0,0), it has no name, and the data property is empty.
Here is a jsFiddle with an example (open dev console to see output).
In case the link doesn't work, here is the example code:
var canvas = paper.createCanvas(100, 100);
document.getElementById("canvasDiv").appendChild(canvas);
paper.setup(canvas);
var circle = paper.Path.Circle([0,0], 10);
circle.fillColor = 'red';
var definition = new paper.SymbolDefinition(circle);
var tool = new paper.Tool();
tool.onMouseUp = function(event){
var hitResult = paper.project.hitTestAll(event.point);
if(hitResult.length > 0){
var result = hitResult[0];
var item = result.item;
console.log("Item name should be 'Bob', but is actually " + item.name);
// Output is: Item name should be 'Bob', but is actually null
}
};
var actualCircle = new paper.SymbolItem(definition);
actualCircle.position = [20,30];
actualCircle.name = 'Bob';
console.log("Symbol Item was created with the name " + actualCircle.name);
// Output is: Symbol Item was created with the name Bob
Does anyone know why this is happening, and how I can go about solving it?