How to create a "reference point" selection?

InDesign
1

For my plugin I need a corner selection.
So far I have solved it with sp-radio, but this does not look very nice:
image

I would much rather use a reference point selection:
image

Is there an element for this, or the possibility to create such an element?

2

When I developed a plugin called ArtboardPanel, I made it myself.

Actually, the div element is clickable, so if you define the normal, hover, and selected appearance for the div element with CSS and control its state with React or something, you can create a radio button-like component for one of them.

Then, by arranging 9 of them and controlling the state of which of them is selected, you can create a reference point UI.

This is example of a radio button-like component.

import { h } from 'preact' ;
import './ButtonLike.css' ;

export const ButtonLike = ( {isSelected, handleClick} ) => {
  return (
    <div
      class='button-like-frame'
      onClick={ handleClick }
    >
      <div
        class={ `button-like-button${isSelected ? '-selected' : ''}` }
      />
    </div>
  ) ;
}
3

Hi @sttk3

Thanks for your reply.
Currently I’m on vanilla js (no react, yet).
I was hoping there is a standard component I could use.

But in the meantime I have managed it:

4

Hi @sivar2311

Oh, it’s already made! That’s great. Roughly speaking, React and the like only make it easier to write state, event, and display descriptions, so there is no need to use it if you can write those yourself.

It would be nice to have them as standard components. I once listed this as a component I would like to have in the Adobe survey.

5

I know React a bit, but still have problems understanding it in connection with UXP.

Yesterday I did a bit of work on the development of Web Components.

The preliminary result (InDesign Test-Plugin) is here: GitHub - sivar2311/corner-picker: InDesign UXP corner-picker element (test)

1 Like