I'm trying to convert photoshop paths to SVG using PSD.js. Through PSD.js you can get mask data of a layer, and from that data you can get path data of a shape layer. This path data is in the form of Javascript array and conforms to the Photoshop file format specification https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/#50577409_17587.This is all fine if I want to convert a simple shape with no holes. I get the path data, convert it into a SVG path string and render it. But Photoshop allows you to specify multiple paths to be a part of one shape and each path has certain operations that it uses to be drawn onto the shape. These are:
- Unite - adds one path to another
- Subtract - subtracts(makes a hole) a path from another path
- Exclude - subtracts the overlapping area of two paths from one path and preserves
- Intersect - only returns the overlapping area of two paths
This introduces holes that cannot be drawn using just svgs winding rules (svg winding rule can be non-zero or even-odd), because the direction of the path that makes the hole doesn't matter if the path operation is for example subtract. The path will create a hole regardless of the direction of the path (non-zero), which is not the case with svg (it will draw a hole only if the hole path is going in a different direction of the non-hole path). Same goes for an operation like Unite that will fill in an area regardless of the winding rule.
What I want is to extract the path operation type of a path and based on that construct a path that doesn't rely on the svg winding rules to draw holes.
The question is, is there a way to get the path operation for each individual path in a shape in PSD.js?
I tried drawing holes using SVG winding rules but holes are drawn in the same direction as the non-hole path and they are not treated as holes.
