Adding visual indicators for selected index of nodes/segments/paths

Scripting
1

Hello,

I am trying to add visual indicators when cycling through any index of nodes/segments/paths to visually see which elements are selected.

I would like to be able to adjust the size, color, and thickness, and also add a text label of the index number.

It seems that using NSBezierPath, NSPoint, and NSColor are a way to achieve this but I am unfamiliar with how to work with them.

index_cycle

2

You have to read a bit in the documentation the NS-classes. And check some plugins that use them to see how it works.

3

A little tip: try the plugin called Skedge (You can find it in the plugin manager)
You can easily mess around with the drawing methods and NS-classes with instant visual feedback. Great for prototyping.

1 Like
4

Wow! Just what I was looking for. Thank you, Mark.

5

You’re welcome @gor.jious

I should promote things like this more. People seem to not really know about it yet. :man_shrugging:

6

I’ve been playing around with the Skedge snippets and it is really helpful to have the live visual feedback.

However, I am still having difficultly navigating through the NS-Classes and selecting a specific segment index.

Below are snippets which I’ve tried and they seem to get close. SNIPPET 3 selects Index 0 and gives a list of NSPoint objects but I’m unsure how to use it as a path.

I’ve been looking at the AppKit documentation and the link below seems useful ‘Returns the type of path element at the specified index’ but I can’t figure out how to apply it.
func element(at index: Int) -> NSBezierPath.ElementType
https://developer.apple.com/documentation/appkit/nsbezierpath/1520751-element?changes=_5

Any more help/direction would be greatly appreciated

SNIPPET 1

    for path in layer.paths:
        print path

PRINTS
<GSPath 12 nodes and 4 segments>

SNIPPET 2

for path in layer.paths:
    	for segment in path.segments:		
    		print segment

PRINTS (a list of segments as NSPoint objects)

(
    "NSPoint: {300, 0}",
    "NSPoint: {379, 0}",
    "NSPoint: {443, 64}",
    "NSPoint: {443, 143}"
)
(
    "NSPoint: {443, 143}",
    "NSPoint: {443, 222}",
    "NSPoint: {380, 286}",
    "NSPoint: {300, 286}"
)
(
    "NSPoint: {300, 286}",
    "NSPoint: {221, 286}",
    "NSPoint: {157, 222}",
    "NSPoint: {157, 143}"
)
(
    "NSPoint: {157, 143}",
    "NSPoint: {157, 64}",
    "NSPoint: {221, 0}",
    "NSPoint: {300, 0}"
)

SNIPPET 3

    for path in layer.paths:
    	for segment in path.segments[0]:		
    		print segment

PRINTS

NSPoint: {300, 0}
NSPoint: {379, 0}
NSPoint: {443, 64}
NSPoint: {443, 143}

SNIPPET 4

    for path in layer.paths:
        bp = path.bezierPath
        bp.setLineWidth_(5)
        NSColor.blueColor().set()
    	bp.stroke()
    	print bp

PRINTS

    Path <0x60400553f0e0>
      Bounds: {{157, 0}, {286, 286}}
      Control point bounds: {{157, 0}, {286, 286}}
        300.000000 0.000000 moveto
        379.000000 0.000000 443.000000 64.000000 443.000000 143.000000 curveto
        443.000000 222.000000 380.000000 286.000000 300.000000 286.000000 curveto
        221.000000 286.000000 157.000000 222.000000 157.000000 143.000000 curveto
        157.000000 64.000000 221.000000 0.000000 300.000000 0.000000 curveto
        closepath
        300.000000 0.000000 moveto
7

as you can see in snippet 1 and 4, you get two different results when printing the path. that’s because the path in glyphs per default is not directly a NSBezierPath. In snippet 4 you successfuly transformed it into one, meaning this is the NSBezierPath which you can try to apply your NS-methods as you found in your developer documentation link(s).