copyAttributes on symbol definitions does not update symbolItems

[nikkwong]

Sketch

const item = new Path.Rectangle({size: [30, 30]})
item.fillColor = 'red'
var symbol = new SymbolDefinition(item)

new SymbolItem(symbol, {x: 400, y: 100})

symbol.definition.copyAttributes(new Path.Rectangle({size: [10, 10], position: {x: 30, y: 30}}))

Symbol items should use updated rectangle, but still appear at {x: 400, y: 100}

[nikkwong]

Workaround is just replacing the definition:

symbol.definition = new Path.Rectangle({size: [10, 10], position: {x: 30, y: 30}})

Maybe add this to the docs if you don't mind; it's unclear which methods/properties specifically can be set on a SymbolDefinition to successfully update references.

[sasensi]

Hi, I think that there are multiple misunderstanding in your first code example:

• first you try to access definition property on the SymbolDefinition instance whereas it is a SymbolItem property (your variable symbol is a SymbolDefinition instance).
• then you try to update the size of the rectangle whereas Path.Rectangle is only a special constructor of the Path class, so your item variable is a Path instance and Path class doesn't have a size property. In order to effectively change this rectangle shape, you have to change the Path points coordinates in some way
• lastly, you try to update the definition position which makes no sense since the definition is a special kind of item which is not displayed, so updating position is useless because each SymbolItem has its own position

With that said, here is a sketch demonstrating how we can replace the definition of a SymbolItem.

// We create 2 symbol definitions.
var symbol1 = new SymbolDefinition(
    new Path.Circle({
        center: [0, 0],
        radius: 50,
        fillColor: 'orange'
    })
);
var symbol2 = new SymbolDefinition(
    new Path.Circle({
        center: [0, 0],
        radius: 25,
        fillColor: 'red'
    })
);

// We place an instance of the first symbol.
var placedSymbol1 = symbol1.place(view.center);
// We place an instance of the second symbol.
var placedSymbol2 = symbol2.place(view.center + 100);
// We place an instance of the first symbol...
var placedSymbol3 = symbol1.place(view.center + 200);
// ...but we then make if point to the second symbol.
placedSymbol3.definition = symbol2;

[nikkwong]

Hey thanks for getting back to me.

Thanks for correcting my incorrect use of using size in Path.Rectangle. Keep getting those mixed up.

It seems as though I want to use SymbolDefinition in a way that is not currently supported by the library. In my case I am using the SymbolDefinition as a substitute for the inability to create patterns in paperjs. It works well actually, and to create attribute modifications on each instance, it is easiest to just modify the SymbolDefinition, including for matrix transformations (a translate operation for example on the definition translates each SymbolItem based on the definition's translate + the SymbolItem's translate, which is lovely). It already works in latest as is but has a few peculiarities.

Maybe you guys don't want to support this, but at least in my application it adds a lot of value and makes the use of symbols more robust.