Select symbol definition path

Question

I need to view the segments and handles of the path that defines a SymbolItem. It is a related issue to this one but in reverse (I want the behavior displayed on that jsfiddle). As per the following example, I can view the bounding box of the SymbolItem, but I cannot select the path itself in order to view its segments/handles. What am I missing?

function onMouseDown(event) {
    project.activeLayer.selected = false;
    // Check whether there is something on that position already. If there isn't:
    // Add a circle centered around the position of the mouse:
    if (event.item === null) {
        var circle = new Path.Circle(new Point(0, 0), 10);
        circle.fillColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
        var circleSymbol = new SymbolDefinition(circle);
        multiply(circleSymbol, event.point);
    }
    // If there is an item at that position, select the item.
    else {
        event.item.selected = true;
    }
}

function multiply(item, location) {
    for (var i = 0; i < 10; i++) {
        var next = item.place(location);
        next.position.x = next.position.x + 20 * i; 
    } 
}

Did you try setting [`path.fullySelected = true;`](http://paperjs.org/reference/path/#fullyselected) ? Then you have to manage the handle manipulations with [`hitResult = item.hitTest(point)`](http://paperjs.org/reference/path/#hittest-point) and move the proper segment / handle in a mouseMove event handler. — arthur.sw, Jan 03 '18 at 16:58
@arthur.sw, Thank you! I tried `fullySelected` at the definition and also `event.item.fullySelected = true` right after `event.item.selected = true`. It doesn't seem to make any difference, unfortunately. I can move the handles, I just cannot make them visible. — Olga Saucedo, Jan 03 '18 at 17:24

score 1 · Answer 1 · answered Oct 19 '18 at 12:05

Using SymbolDefinition/SymbolItem prevent you from changing properties of each symbol items.
The only thing you can do in this case is select all symbols which share a common definition.
To achieve what you want, you have to use Path directly.
Here is a sketch showing the solution.

function onMouseDown(event) {
    project.activeLayer.selected = false;
    if (event.item === null) {
        var circle = new Path.Circle(new Point(0, 0), 10);
        circle.fillColor = Color.random();
        // just pass the circle instead of making a symbol definition
        multiply(circle, event.point);
    }
    else {
        event.item.selected = true;
    }
}

function multiply(item, location) {
    for (var i = 0; i < 10; i++) {
        // use passed item for first iteration, then use a clone
        var next = i === 0 ? item : item.clone();
        next.position = location + [20 * i, 0];
    }
}

Select symbol definition path

1 Answers1