Perspective Component Style

Module Development
1

I would like to give the possibility to customize a component using the style property.

"style":{ "$ref":"urn:ignition-schema:schemas/style-properties.schema.json" }

What is the best way to use this style object in the front-end ? (in tsx)

1 Like
2

Those styles will be added through the emit(). in the upper level of your component. Which you already should be using for positoning ect.
{...this.props.emit()}

1 Like
3

Thanks a lot @victordcq !
I didn’t think the style tag would be enough, I probably still lack knowledge in react.

It seems that I have to add “psc-” in front of all the classes defined in the project styles in order for them to be taken into account.

image
image1196Ă—433 32.6 KB

4

Yes if you dont use the emit you will have to parse it yourself.
Its not necessarily related to react, but more to how igntion passes along the properties^^

You will have to use the emit() somewhere though (best in the top level div), else your component will not be positioned correctly in the view.

this is what it says in the example

image
image841Ă—255 15.8 KB

5

I feel like I need to parse the class list in any case.

{…this.props.emit({classes: ans[“style”][“classes”]})} // Doesn’t work

“classes” expects an array while the classes coming from the props of the component ans[“style”][“classes”] are a String.

6

Your upper div should contain {...this.props.emit()}, because the position data is in there.
The classesNames defined in the props.style will also automatically be provided through there.

i believe this will also work for the other styles
this.props.ans[x].emit()

it proabbly should look like this

{...ans.emit()}
or maybe
{...ans.style.emit()}

<div {...this.props.emit()}>
  {props.configuration.map({
    //annotions map ...
    <div  {...ans.emit()}>
7

I just test with {...this.props.emit()} on the main div and now I completely understand the concept you just explained.
But as you have understood, I am in a particular case where we have a list of items (so a list of style too).

I just tested {...ans.emit()} and {...ans.style.emit()} but it does not work.
It raises the following error: TypeError: ans.style.emit is not a function / TypeError: ans.emit is not a function

image

8

can you show me how you defined the

for the annotations?

10

Please post code in a code block, not as a screen shot. Especially with a black background (hard on the eyes of anyone older than 40 or so).

2 Likes
11

I thought found solution but it was a mistake…
This is what my property structure looks like :

image
image778Ă—665 46.8 KB

12

Would be neat if there was a plugin for discourse to allow for screenshots to automatically be converted into formatted text snippets, with the ability to either see the automatically generated text or the provided screenshot.

13

I’d rather the editor just detect screenshots of text and put a suggestion on the preview pane. Something like “This image appears to be mostly text. You should post the text instead, in a code block if necessary, to avoid being called out by irate interlocutors.”

2 Likes
14

Heh it seems the props are turned into objects the moment you go deeper into them. causing them to loose the emit function…
And it turns out you dont really want to use the emit anyways since there the position props are in it too, which is not what you want for a list.

So instead you could do something like this, but i guess your methode is just as fine (aslong as you have the base emit in the upper level)

<div {...this.props.emit()}>
  {props.configuration.map((cnf,cnfId)=>{
    cnf["annotations"].map((ans,ansId)=>{
      const styleProps = this.props.store.props
              .readStyle("configuration[" + cnfId+ "].annotations[" + ansId + "].style")
              .toStyleProps()
      return <div  className={styleProps.className + " annotation-markers"} style={styleProps.style}>{ans["value"]} </div>
    })
  })}
</div>
1 Like
15

I think you are absolutely right and your proposal works very well !
I finally decided to use this solution to use the emitter.

<div {...emit()}>
	{/* tslint:disable-next-line:jsx-no-multiline-js */}
	{props.configuration.map((cnf) => {
		return cnf["annotations"].map((ans: Object) => {
			const styleProps = PropertyTree.parseStyle(ans["style"])
				.addClasses(['annotation-marker']);

			// tslint:disable-next-line:jsx-key
			return <div id={ans["id"]} {...emit(styleProps.toEmitProps())}>{ans["value"]}</div>;
		});
	})}
</div>

Thanks again @victordcq for all the time you took to help me !

1 Like
16

heh thats a good one, better than my answer^^