Paper.js - Get first ''selected item'' from selectedItems

Question

I'm trying my way around building a graphics editor with Paper.js

I would like to select the first(1st) element that was picked using a selection tool(either Shift+Click, or dragging a selection box). Direct-click detection is done via hit-testing and selection box via getIntersection

• If it's Shift+Click its the first selected element. Which element was clicked is found with HitResult
• If its selectionBox, the first intersection? result of the selection box.

Is it possible to get this?

I do a FOR loop to get all the elements in the Paper.js selectedItems array which returns all the selected items on the canvas.

I've tried this:

var selected = paper.project.selectedItems;
var firstSelected = selected[0];

but this doesn't return what i need.

The above code snippet fetches an array that is agnostic to which element was selected first. It simply orders the selectedItems in the array starting from the ''oldest drawn path''.

What i need is a way to find out which is the 1st element that was selected.

• Either the 1st that get's ''touched(intersected)'' with the selection rectangle
• Or the first that was clicked while in Shift+Click functionality(Select more than one element with click).

The reason for this is that i would like to add to my editor, align-relative-to functionality.

In order to have a correct UX, the user must have the ability to align an element relative to another that he sets as the ''reference item''. Therefore i need to know the 1st element selected relative to others in order to use it as the ''reference item''.

Any ideas ?

Answer 1

Here is a working example of what I understood you want to achieve for the selection (without the align-relative-to functionality). And here is the code (under SelectPaperJS) https://c9.io/arthursw/oiio/

It should not be too hard to make something similar on Stylii (since you're using it).

You can have an array to keep track of the order of selection of your items. For example in the mousedown function of the direct select tool (from line 789 of editor.js) you can add the newly selected element to this array (line 800). Same thing when you select with the rectangular selection tool.