Can you release a clipping mask after saving and reopening?
A clipping mask can look right while you work and still be broken after a save. In Si, our browser-based vector editor, we used a simple test: reopen a masked file and release the mask. Can we still recover the artwork t
A clipping mask can look right while you work and still be broken after a save. In Si, our browser-based vector editor, we used a simple test: reopen a masked file and release the mask. Can we still recover the artwork that was hidden?
A small reproduction
Draw a filled rectangle. Place an ellipse above it and select both objects in the same layer and group. Make a clipping mask, save the native vector document, and open the file you just saved. Release the mask and check that the full rectangle returns. Undo should restore the clipped view.
We also tested a JPEG under a closed path. The pair below shows the same image immediately after reopening and after releasing the mask.
Keep the boundary and artwork together
The top selected path becomes the first child of a clip object. The other children retain their own object data. In the JPEG case, that includes the embedded image and its transform. When loading the file, Si checks that the group has at least two children and that the first child is a closed path or compound path.
// Rebuilding the saved children as a Paper.js group.
item = new e.p.Group({
children: o.children!.map(child => restoreItem(e, child)),
insert: false,
});
if (o.objectType === 'clip') {
item.firstChild.clipMask = true;
item.clipped = true;
}
Releasing the group turns clipping off and returns the children as separate objects. Paper.js handles the clipping. Si owns the document format and the release operation.
What the checks covered
In two fresh local browser sessions, the vector and raster fixtures both passed save, reopen, release, and Undo. The saved bytes matched the document snapshot. Reopening regenerated the document ID and preserved the rest of the snapshot. Release returned both objects and preserved the artwork record. Undo restored the clipping group and its children.
The automated test captures the data sent to the file writer. It covers two native Si documents. Native picker behavior, nested masks, and SVG or PDF exchange are outside that test.
The Slohero engineering report includes the two downloadable files and source references.
Authoring disclosure: An AI agent drafted this article from Si source code, saved test artifacts, and the browser checks described above.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.
