Vectors in Serialized Documents Don't Provide all Colors

[johnoneil]

This is a little difficult to describe, so a picture is helpful:

In the image above, the arrow is represented by a single Vector element (see the left column) But there are two colors associated with this Vector.

Two colors are associated with this vector. See the right column. These are 68DB6D (green) and FFFFFF (white), for the outer circle and inner arrow respectively.

The problems arise in the serialized document result of the fetch tool`. In the serialized design document, the Vector itself is separated into two groups of points, one for the outer circle, and one for the inner arrow. But only one Color is present (white). We must be packing only the last one.

This is difficult to see outside the debugger but I was able to trace! our traversal through the serialized document:

DisplayList.rs visit ---> Node Name: #telltale/left-blinker
..
2024-04-23T04:23:44.703Z TRACE [harry::render_displaylist] There are 1 background colors provided for this vector path.
...

I'm assuming for a Vector with N paths, it should have (somewhere) N colors.

This is a simple case however, with only "fill" style paths. I think we might have more complex cases where there are both fills and strokes, so I think we may have to pack all the N fill colors and the M stroke colors in a different place, probably a dedicated struct for each.

[rylin8]

Interesting find! Does that mean that the Kotlin renderer is also unable to draw this with both colors? I don't recall this happening, but maybe we also never used a Vector like this with multiple colors?

[iamralpht]

Ok, I found this node, and it's a vector network with mixed fills. To render this correctly, we need to add support for the fillOverrideTable and overrideID properties of vectors:

            "fills": [
              {
                "blendMode": "NORMAL",
                "type": "SOLID",
                "color": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              }
            ],
            "fillOverrideTable": {
              "1": {
                "fills": [
                  {
                    "blendMode": "NORMAL",
                    "type": "SOLID",
                    "color": {
                      "r": 0.4077083468437195,
                      "g": 0.8583333492279053,
                      "b": 0.4257333278656006,
                      "a": 1
                    }
                  }
                ]
              },
              "2": null
            },
            "fillGeometry": [
              {
                "path": "M0 38.5C0 17.237 17.237 0 38.5 0C59.763 0 77 17.237 77 38.5C77 59.763 59.763 77 38.5 77C17.237 77 0 59.763 0 38.5Z",
                "overrideID": 1,
                "windingRule": "NONZERO"
              },
              {
                "path": "M60.1562 38.4129L37.5803 19.25L37.5803 30.3993L21.6562 30.3993L21.6562 46.6007L37.5803 46.6007L37.5803 57.75L60.1562 38.4129Z",
                "windingRule": "NONZERO"
              }
            ],

So one path is using a fill override of 1, which corresponds to the green fill. We don't support that yet, so we'll get a white fill for the whole node.