Add SVG support (lunasvg)

[Lpsd]

I've implemented lunasvg, which gives us the ability to create SVG documents, edit them on the fly, and also load SVG files (from path or raw).

API (for initial release)

svg svgCreate(int width, int height [, string pathOrRawData, function callback ])
xmlnode svgGetDocumentXML(svg svgElement)
bool svgSetDocumentXML(svg svgElement, xmlnode svgDocument [, function callback ])
int, int svgGetSize(svg svgElement)
bool svgSetSize(svg svgElement, int width, int height [, function callback ])

callback is for when SVG has been updated, invoked when texture is available (if update successful).

Example usage

local square = svgCreate(300, 300)
local squareXML = svgGetDocumentXML(square)

-- Add a rect svg node
local rect = xmlCreateChild(squareXML, "rect")
xmlNodeSetAttribute(rect, "x", "0")
xmlNodeSetAttribute(rect, "y", "0")
xmlNodeSetAttribute(rect, "width", "100%")
xmlNodeSetAttribute(rect, "height", "100%")
xmlNodeSetAttribute(rect, "fill", "red")

-- Apply our changes
svgSetDocumentXML(square, squareXML)

-- Create a square with blank document
local clone = svgCreate(300, 300)

-- Set the fill to blue
xmlNodeSetAttribute(rect, "fill", "blue")

-- Apply xml to blank svg document
svgSetDocumentXML(clone, squareXML)

addEventHandler("onClientRender", root, function()
    dxDrawImage(500, 150, 300, 300, square, 0, 0, 0, tocolor(255, 255, 255), false)
    dxDrawImage(900, 350, 300, 300, clone, 0, 0, 0, tocolor(255, 255, 255), false)
end)

local monkey = svgCreate(500, 500, "monkey.svg")

addEventHandler("onClientRender", root, function()
    dxDrawImage(0, 0, 500, 500, monkey, 0, 0, 0, tocolor(255, 255, 255), false)
end)

Preview of the first example

Preview of the second example

The svg element is also derived from CClientTexture, meaning it works with pretty much all dx* functions, including dxGetTexturePixels, dxSetTexturePixels, dxSetPixelColor, etc - direct manipulation is therefore possible, e.g:

local svg = svgCreate(300, 300, "svg.svg")

-- Bind to clear the SVG texture
bindKey("r", "down", function()
    local pixels = dxGetTexturePixels(svg)
    local width, height = svgGetSize(svg)
    
    for i = 0, width do
        for j = 0, height do
            dxSetPixelColor(pixels, i, j, 0, 0, 0, 0)
        end
    end

    dxSetTexturePixels(svg, pixels)
end)

(Resolves #1300)

[prnxdev]

Nice!!

I think there is no need for new function svgCreate for files. I think that DxCreateTexture should work with .svg too the same way it works for .png or .jpg. Also OOP support would be nice :)

[Lpsd]

Integrating into the DX related code would not be good for the overall structure of the API.

svgCreate returns a texture element, CClientVectorGraphic, which can be passed directly to dxDrawImage.

CClientVectorGraphic encapsulates all of the SVG related data, the D3D9 render item and the graphics display class. None of the other dx* functions follow this convention, and in reality they're two completely separate constructs. It would be a mess to implement both features side by side.

Not to mention, we're going to have a LOT of functions with the svg* prefix, to manipulate the SVG document and load data. Somehow, dxCreateSVGDocument doesn't seem right to me?

Have a look into the code, to get a better understand of the implementation.

[Lpsd]

As briefly discussed on Discord, I think the initial plan should be to roll this out with a few basic functions:

texture/svg svgCreate(width, height [, string pathOrRawData ])
xmlnode svgGetDocumentXML(svg svgElement)
bool svgSetDocumentXML(xmlnode xmlData)

You can create a blank SVG document, supply a file path or read from raw (including xmlnode) data. You can also get the SVG document back as an xmlnode, use the existing xml implementation to edit the xml data, and set it back on the document.

The reason for introducing this simple behaviour at first, is because a proper API will take a lot of time and thought, and will probably be quite an addition to the code. Introducing the basics in this PR, and then the API stuff later, is easier on the reviewer(s).

We can always deprecate svgGet/SetDocumentXML at a later date, once a better API has been introduced.

Thoughts?

[patrikjuvonen]

Thanks for the changes! I have now reviewed the code and overall looks good!

I saw a lot of code style formatting issues, are you running clang-format on your editor? We also have a clang-formatter batch script in the utils folder, which helps with fixing formatting issues to be consistent with the rest of the codebase.

Either way to speed up the process I decided to run clang-format on this PR and push the changes here.

Only one thing bugs me which is that the callback and non-callback code is duplicated, which is not best practice. I would like to see these refactored into a single private function call for example, or something else that doesn't result in duplicating code, thus duplicating work and duplicating amount of potential issues.

The size functions work great, thank you for adding them!

I think once you've refactored the duplicate code, this is ready for a final review and then merge.

[Lpsd]

Thanks for the review - I've split that code into static, private methods as suggested. In some cases it doesn't cut down the amount of code needed but at least it's more consistent for any future changes.

[Lpsd]

I've had to format the CLuaShared::GetAsyncTaskScheduler()->PushTask calls by hand, clang-format makes them really ugly if the task function only contains a single line (like a return). Rest should be fine

[patrikjuvonen]

Thank you very much, everything looks good now! 😄