Please add distance unit oriented text input component

Photoshop
1

So we have input for text. We have input for numbers but many of the inputs in PS are numbers + units.

E.g. 10px 30mm 5in. It also has possibility to change units in context menu or by writing text. You can also do math in it. With shift it increments more and you can change values with scrolling or by dragging label.

Can we have the same UI also in UXP without writing everything from scratch?

3 Likes
2

Yes, great idea! And please the same for XD - without units but with the Shift key down behaviiur and math!

3

When I started with CEP, I wrote similar components from scratch (except for the math).

Just tidied them up a bit and made them both available in a repo, because it’s a bit much code to share here.

I also included all the unit conversions functions I wrote for my plugins.

Maybe this helps someone (if you’re using React), until Adobe release native components for that, which I don’t really see coming in the near future :smiley:

2 Likes
4

I know that I saw it in your plugin but I did not expect you to open source it :slight_smile: Thanks a lot! This could possibly reduce the development time of my next plugin to half since it has a very easy UI. :smiley:

Anyway, you are currently using HTML component that will be later removed from UXP although I like more this compact native-looking input :smiley:

5

You’re welcome :slight_smile:
Yes I know, I’m still ignoring that as long as possible, because I hate the bulky look of some of the Spectrum Components :smile: By the time they will be deprecated, I’ll hopefully have all my components sourced out in a package that I just need to update and reimport in all the plugins.

6

So I tested it and I like. But few things were missing:

  • return original value on escape
  • space between number and units
  • commit on blur
    I was able to modify this.

And this would be great to have:

  • specify list of units to allow so I could pass empty array for unit less field (I used classic input but it has its own problems)
  • when you select multiple layers with different values then input is empty. I am missing a way to do it same here. (todo)
7

Sounds more like application logic to me, not like state that the input should manage.

The other ideas are very good and should only require a few more lines all together. :+1:
At one point I even had an “allowedUnits” array, but I think it got lost on the way as I never really used it.

For the other ones, if you want to share the code or create a PR, I can surely add this to the repo. I’m still busy finishing the next plugin I’ve been working on for months, so I’ll probably not make any edits to the components myself right now.

8

For mixed values I simply added mixed:boolean property. If this is true then shown value in input field is empty. That is all it does. Looks good for me so far.

I could do pull request but I was focused on make it work instead of improving reusable component so it might require additional changes :smiley:

9

I’m still not quite sure what you mean by mixed values, could you explain the use case again?

10

Example:

  • you have text 2 layers
  • first has 20px size
  • second has 10px size
  • you select both
  • you can’t show 10 or 20 in text field since it is not a true
  • so you want to show blank text field

therefore plugin logic can calculate “mixed” property and if this is true then field is shown as empty regardless its true inner values

11

Ah okay, got it. But alternatively you could also just set the value to undefined whenever your app finds more than one selected layer. Then this additional property would be obsolete and the input would be decoupled even more from that piece of logic. But then again… one additional property doesn’t cost anything :smiley: :man_shrugging:

12

I did another change which is enforing units. If there are not units then units are not undefined but “px” instead and thats internal behavior of component. Also if you have same value but different unit then it should be blank.

13

One more thing. Units might need to be localized. E.g. my language, Czech uses for pixels such a bizarre string as ob instead of px

14

That’s weird, what does it stand for? :smiley: But I guess localization is a whole new story, all my plugins are only in english, so I also didn’t localize any specific components.

15

Yes, that is 1 of dozens of reasons why this should be a built-in component. :smiley:

And it stands for obrazové body which literally translated would be display points.

1 Like
16

Conversion into picas is wrong in that component.

It has to be if this has to correspond with PS math.

export function pxToPica(pixel: number, ppi: number): number {
	return (pixel * 6) / ppi;
}

export function picaToPx(pica: number, ppi: number): number {
	return (pica / 6) * ppi;
}
17

Is it document somewhere or did you just play around with the units to see the actual PS conversion?
I honestly never used pica in my life and just took the formula from here.