Prevent unbalanced SCISSOR_END commands for culled containers

[depau]

Change written by AI. PR comment written by me, more about it later.

I found a small issue with Clay not properly closing scissor commands in my layout. I'm using it to write a UI for an embedded display and I saw this glitch.

Before:

After:

I observed the glitch does not occur if I disable culling.

I tried to track it down by comparing the rendering commands and reading the rendering logic but, struggling quite a bit, I thought I'd throw it at an LLM while I was away to eat. To my surprise, it actually fixed the glitch.

So this is slop. I'm not particularly proud of it, I usually prefer to write my code, but while I do really appreciate your amazing effort at writing this library, I don't find layout logic particularly stimulating for myself :)

I cleaned so it's quick to review if it find it useful, it does fix my issue after all. If you'd rather not have this change, I understand.

Anyway, these are the rendering commands before this change with/without culling enabled, then after this change with culling enabled:

Rendering commands

# culling enabled
render command:  rectangle[0, 0, 128, 128] - color: #000000FF
render command:  rectangle[6, 10, 32, 1] - color: #FFFFFFFF
render command:  text[42, 4, 44, 12] - text: "Main menu", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  rectangle[90, 10, 22, 1] - color: #FFFFFFFF
render command:  scissorStart[4, 22, 120, 82]
render command:    rectangle[4, -27, 120, 22] - color: #000000FF
render command:  scissorEnd
render command:  scissorStart[4, -5, 120, 22]
render command:    rectangle[4, -5, 120, 22] - color: #000000FF
render command:    text[6, -3, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:  scissorEnd
render command:  scissorStart[4, 16, 120, 22]
render command:    rectangle[4, 16, 120, 22] - color: #000000FF
render command:    text[6, 18, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:  scissorEnd
render command:  scissorStart[4, 38, 120, 22]
render command:    rectangle[4, 38, 120, 22] - color: #000000FF
render command:    text[6, 40, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:  scissorEnd
render command:  scissorStart[4, 60, 120, 22]
render command:    rectangle[4, 60, 120, 22] - color: #000000FF
render command:    text[6, 62, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:  scissorEnd
render command:  scissorStart[4, 82, 120, 22]
render command:    rectangle[4, 82, 120, 22] - color: #000000FF
render command:    text[6, 84, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    border[4, 82, 120, 22] - color: #FFFFFFFF
render command:  scissorEnd
render command:  scissorStart[4, 104, 120, 22]
render command:    rectangle[4, 104, 120, 22] - color: #000000FF
render command:    text[6, 106, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:  scissorEnd
render command:  scissorStart[4, 126, 120, 22]
render command:    rectangle[4, 126, 120, 22] - color: #000000FF
render command:  scissorEnd
render command:  rectangle[4, 148, 120, 22] - color: #000000FF
render command:  scissorEnd
render command:  scissorEnd
render command:  text[27, 112, 32, 12] - text: "� Next", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  text[63, 112, 39, 12] - text: "� Select", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  border[4, 108, 120, 16] - color: #FFFFFFFF
render command:  text[114, 4, 12, 12] - text: "�", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  text[114, 8, 12, 12] - text: "�", fontId: 1, fontSize: 8, color: #FFFFFFFF

# culling disabled
render command:  rectangle[0, 0, 128, 128] - color: #000000FF
render command:  rectangle[6, 10, 32, 1] - color: #FFFFFFFF
render command:  text[42, 4, 44, 12] - text: "Main menu", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  rectangle[90, 10, 22, 1] - color: #FFFFFFFF
render command:  scissorStart[4, 22, 120, 82]
render command:    scissorStart[4, -27, 120, 22]
render command:      rectangle[4, -27, 120, 22] - color: #000000FF
render command:      text[6, -25, 43, 18] - text: "� Back", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, -5, 120, 22]
render command:      rectangle[4, -5, 120, 22] - color: #000000FF
render command:      text[6, -3, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 16, 120, 22]
render command:      rectangle[4, 16, 120, 22] - color: #000000FF
render command:      text[6, 18, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 38, 120, 22]
render command:      rectangle[4, 38, 120, 22] - color: #000000FF
render command:      text[6, 40, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 60, 120, 22]
render command:      rectangle[4, 60, 120, 22] - color: #000000FF
render command:      text[6, 62, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 82, 120, 22]
render command:      rectangle[4, 82, 120, 22] - color: #000000FF
render command:      text[6, 84, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:      border[4, 82, 120, 22] - color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 104, 120, 22]
render command:      rectangle[4, 104, 120, 22] - color: #000000FF
render command:      text[6, 106, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 126, 120, 22]
render command:      rectangle[4, 126, 120, 22] - color: #000000FF
render command:      text[6, 128, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 148, 120, 22]
render command:      rectangle[4, 148, 120, 22] - color: #000000FF
render command:      text[6, 150, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:  scissorEnd
render command:  text[27, 112, 32, 12] - text: "� Next", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  text[63, 112, 39, 12] - text: "� Select", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  border[4, 108, 120, 16] - color: #FFFFFFFF
render command:  text[114, 4, 12, 12] - text: "�", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  text[114, 8, 12, 12] - text: "�", fontId: 1, fontSize: 8, color: #FFFFFFFF

# after fix
render command:  rectangle[0, 0, 128, 128] - color: #000000FF
render command:  rectangle[6, 10, 32, 1] - color: #FFFFFFFF
render command:  text[42, 4, 44, 12] - text: "Main menu", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  rectangle[90, 10, 22, 1] - color: #FFFFFFFF
render command:  scissorStart[4, 22, 120, 82]
render command:    rectangle[4, -27, 120, 22] - color: #000000FF
render command:    scissorStart[4, -5, 120, 22]
render command:      rectangle[4, -5, 120, 22] - color: #000000FF
render command:      text[6, -3, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 16, 120, 22]
render command:      rectangle[4, 16, 120, 22] - color: #000000FF
render command:      text[6, 18, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 38, 120, 22]
render command:      rectangle[4, 38, 120, 22] - color: #000000FF
render command:      text[6, 40, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 60, 120, 22]
render command:      rectangle[4, 60, 120, 22] - color: #000000FF
render command:      text[6, 62, 67, 18] - text: "Hello World", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 82, 120, 22]
render command:      rectangle[4, 82, 120, 22] - color: #000000FF
render command:      text[6, 84, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:      border[4, 82, 120, 22] - color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 104, 120, 22]
render command:      rectangle[4, 104, 120, 22] - color: #000000FF
render command:      text[6, 106, 35, 18] - text: "Matrix", fontId: 0, fontSize: 12, color: #FFFFFFFF
render command:    scissorEnd
render command:    scissorStart[4, 126, 120, 22]
render command:      rectangle[4, 126, 120, 22] - color: #000000FF
render command:    scissorEnd
render command:    rectangle[4, 148, 120, 22] - color: #000000FF
render command:  scissorEnd
render command:  text[27, 112, 32, 12] - text: "� Next", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  text[63, 112, 39, 12] - text: "� Select", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  border[4, 108, 120, 16] - color: #FFFFFFFF
render command:  text[114, 4, 12, 12] - text: "�", fontId: 1, fontSize: 8, color: #FFFFFFFF
render command:  text[114, 8, 12, 12] - text: "�", fontId: 1, fontSize: 8, color: #FFFFFFFF

I hope you do understand why this change fixes because if you don't I'm afraid I won't be feeling so comfortable pasting whatever BS Gemini comes up with to explain the changes.

Have a good day!