feat: add individual corner radius support

src/assets/textures/rect.js

@@ -1,4 +1,5 @@
 import { Graphics } from 'pixi.js';
+import { EachRadius } from '../../display/data-schema/primitive-schema';
 import { getColor } from '../../utils/get';
 import { cacheKey, generateTexture } from './utils';
 
@@ -15,10 +16,16 @@ export const createRectTexture = (renderer, theme, rectOpts) => {
   texture.id = cacheKey(renderer, rectOpts);
   texture.metadata = {
     slice: {
-      topHeight: borderWidth + 4,
-      leftWidth: borderWidth + 4,
-      rightWidth: borderWidth + 4,
-      bottomHeight: borderWidth + 4,
+      topHeight:
+        getSliceDimension(radius, 'topLeft', 'topRight') + (borderWidth ?? 0),
+      leftWidth:
+        getSliceDimension(radius, 'topLeft', 'bottomLeft') + (borderWidth ?? 0),
+      rightWidth:
+        getSliceDimension(radius, 'topRight', 'bottomRight') +
+        (borderWidth ?? 0),
+      bottomHeight:
+        getSliceDimension(radius, 'bottomLeft', 'bottomRight') +
+        (borderWidth ?? 0),
     },
     borderWidth: borderWidth,
     config: { ...rectOpts },
@@ -31,8 +38,20 @@ const createRect = (theme, { fill, borderWidth, borderColor, radius }) => {
   const size = 20 + borderWidth;
 
   const xywh = [0, 0, size, size];
-  if (radius > 0) {
+  const parsedRadius = EachRadius.safeParse(radius);
+  if (typeof radius === 'number' && radius > 0) {
     graphics.roundRect(...xywh, radius);
+  } else if (parsedRadius.success) {
+    const r = parsedRadius.data;
+    graphics.roundShape(
+      [
+        { x: 0, y: 0, radius: r.topLeft },
+        { x: size, y: 0, radius: r.topRight },
+        { x: size, y: size, radius: r.bottomRight },
+        { x: 0, y: size, radius: r.bottomLeft },
+      ],
+      0,
+    );
   } else {
     graphics.rect(...xywh);
   }
@@ -46,3 +65,9 @@ const createRect = (theme, { fill, borderWidth, borderColor, radius }) => {
   }
   return graphics;
 };
+
+const getSliceDimension = (radius, key1, key2) => {
+  return typeof radius === 'number'
+    ? radius
+    : Math.max(radius?.[key1] ?? 0, radius?.[key2] ?? 0);
+};

src/assets/textures/utils.js

@@ -17,6 +17,6 @@ export const generateTexture = (target, renderer, opts = {}) => {
 export const cacheKey = (renderer, config) => {
   return [
     renderer.uid,
-    ...TextureStyle.keyof().options.map((key) => config[key]),
+    ...TextureStyle.keyof().options.map((key) => JSON.stringify(config[key])),
   ].join('-');
 };

src/display/data-schema/primitive-schema.js

@@ -198,13 +198,20 @@ export const Margin = z.preprocess(
     .default({}),
 );
 
+export const EachRadius = z.object({
+  topLeft: z.number().nonnegative().default(0),
+  topRight: z.number().nonnegative().default(0),
+  bottomRight: z.number().nonnegative().default(0),
+  bottomLeft: z.number().nonnegative().default(0),
+});
+
 export const TextureStyle = z
   .object({
     type: z.enum(['rect']),
     fill: z.string().default('transparent'),
     borderWidth: z.number().default(0),
     borderColor: z.string().default('black'),
-    radius: z.number().default(0),
+    radius: z.union([z.number().nonnegative(), EachRadius]).default(0),
   })
   .partial();
 

src/display/mixins/Sourceable.js

@@ -9,7 +9,7 @@ export const Sourceable = (superClass) => {
       const { source } = relevantChanges;
       const { viewport, theme } = this.context;
       const texture = getTexture(viewport.app.renderer, theme, source);
-      this.texture = texture;
+      Object.assign(this, { texture, ...(texture?.metadata?.slice ?? {}) });
     }
   };
   MixedClass.registerHandler(