From cee5db744d88d20097dce466f05af3e56197fe04 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 17 Oct 2025 11:24:13 +0900 Subject: [PATCH 1/6] add each radius option --- src/assets/textures/rect.js | 13 ++++++++++++- src/assets/textures/utils.js | 2 +- src/display/data-schema/primitive-schema.js | 9 ++++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/assets/textures/rect.js b/src/assets/textures/rect.js index b5efc0a1..6d730220 100644 --- a/src/assets/textures/rect.js +++ b/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'; @@ -31,8 +32,18 @@ const createRect = (theme, { fill, borderWidth, borderColor, radius }) => { const size = 20 + borderWidth; const xywh = [0, 0, size, size]; - if (radius > 0) { + if (typeof radius === 'number' && radius > 0) { graphics.roundRect(...xywh, radius); + } else if (EachRadius.safeParse(radius).success) { + graphics.roundShape( + [ + { x: 0, y: 0, radius: radius.topLeft }, + { x: size, y: 0, radius: radius.topRight }, + { x: size, y: size, radius: radius.bottomRight }, + { x: 0, y: size, radius: radius.bottomLeft }, + ], + 0, + ); } else { graphics.rect(...xywh); } diff --git a/src/assets/textures/utils.js b/src/assets/textures/utils.js index 05092576..86b246c6 100644 --- a/src/assets/textures/utils.js +++ b/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('-'); }; diff --git a/src/display/data-schema/primitive-schema.js b/src/display/data-schema/primitive-schema.js index 0f637f0d..5edbb61e 100644 --- a/src/display/data-schema/primitive-schema.js +++ b/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().default(0), + topRight: z.number().default(0), + bottomRight: z.number().default(0), + bottomLeft: z.number().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(), EachRadius]).default(0), }) .partial(); From 5f438f78041659c4cff85669ed5a7b1e4bae2333 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 24 Oct 2025 11:59:56 +0900 Subject: [PATCH 2/6] fix --- src/assets/textures/rect.js | 20 ++++++++++++++++---- src/display/mixins/Sourceable.js | 2 +- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/assets/textures/rect.js b/src/assets/textures/rect.js index 6d730220..f8e9f13f 100644 --- a/src/assets/textures/rect.js +++ b/src/assets/textures/rect.js @@ -16,10 +16,22 @@ 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: + typeof radius === 'number' + ? radius + : Math.max(radius?.topLeft, radius?.topRight), + leftWidth: + typeof radius === 'number' + ? radius + : Math.max(radius?.topLeft, radius?.bottomLeft), + rightWidth: + typeof radius === 'number' + ? radius + : Math.max(radius?.topRight, radius?.bottomRight), + bottomHeight: + typeof radius === 'number' + ? radius + : Math.max(radius?.bottomRight, radius?.bottomLeft), }, borderWidth: borderWidth, config: { ...rectOpts }, diff --git a/src/display/mixins/Sourceable.js b/src/display/mixins/Sourceable.js index ea38e8be..0c54dca9 100644 --- a/src/display/mixins/Sourceable.js +++ b/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( From 8002f77f699b9a67bb588635b26fadfd175cc51b Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 24 Oct 2025 12:29:02 +0900 Subject: [PATCH 3/6] fix --- src/assets/textures/rect.js | 38 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/src/assets/textures/rect.js b/src/assets/textures/rect.js index f8e9f13f..f57cd0a3 100644 --- a/src/assets/textures/rect.js +++ b/src/assets/textures/rect.js @@ -16,22 +16,10 @@ export const createRectTexture = (renderer, theme, rectOpts) => { texture.id = cacheKey(renderer, rectOpts); texture.metadata = { slice: { - topHeight: - typeof radius === 'number' - ? radius - : Math.max(radius?.topLeft, radius?.topRight), - leftWidth: - typeof radius === 'number' - ? radius - : Math.max(radius?.topLeft, radius?.bottomLeft), - rightWidth: - typeof radius === 'number' - ? radius - : Math.max(radius?.topRight, radius?.bottomRight), - bottomHeight: - typeof radius === 'number' - ? radius - : Math.max(radius?.bottomRight, radius?.bottomLeft), + topHeight: getSliceDimension(radius, 'topLeft', 'topRight'), + leftWidth: getSliceDimension(radius, 'topLeft', 'bottomLeft'), + rightWidth: getSliceDimension(radius, 'topRight', 'bottomRight'), + bottomHeight: getSliceDimension(radius, 'bottomLeft', 'bottomRight'), }, borderWidth: borderWidth, config: { ...rectOpts }, @@ -44,15 +32,17 @@ const createRect = (theme, { fill, borderWidth, borderColor, radius }) => { const size = 20 + borderWidth; const xywh = [0, 0, size, size]; + const parsedRadius = EachRadius.safeParse(radius); if (typeof radius === 'number' && radius > 0) { graphics.roundRect(...xywh, radius); - } else if (EachRadius.safeParse(radius).success) { + } else if (parsedRadius.success) { + const r = parsedRadius.data; graphics.roundShape( [ - { x: 0, y: 0, radius: radius.topLeft }, - { x: size, y: 0, radius: radius.topRight }, - { x: size, y: size, radius: radius.bottomRight }, - { x: 0, y: size, radius: radius.bottomLeft }, + { 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, ); @@ -69,3 +59,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); +}; From a72db606855d75ae26c48b3fcef00a1c133a54a9 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 24 Oct 2025 14:33:09 +0900 Subject: [PATCH 4/6] fix --- src/assets/textures/rect.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/assets/textures/rect.js b/src/assets/textures/rect.js index f57cd0a3..f66df85d 100644 --- a/src/assets/textures/rect.js +++ b/src/assets/textures/rect.js @@ -16,10 +16,15 @@ export const createRectTexture = (renderer, theme, rectOpts) => { texture.id = cacheKey(renderer, rectOpts); texture.metadata = { slice: { - topHeight: getSliceDimension(radius, 'topLeft', 'topRight'), - leftWidth: getSliceDimension(radius, 'topLeft', 'bottomLeft'), - rightWidth: getSliceDimension(radius, 'topRight', 'bottomRight'), - bottomHeight: getSliceDimension(radius, 'bottomLeft', 'bottomRight'), + 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 }, From 9ca7a3f430790c4d63dd234dfe0df6c799686f7b Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 24 Oct 2025 14:50:12 +0900 Subject: [PATCH 5/6] fix --- src/assets/textures/rect.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/assets/textures/rect.js b/src/assets/textures/rect.js index f66df85d..406f3e09 100644 --- a/src/assets/textures/rect.js +++ b/src/assets/textures/rect.js @@ -17,14 +17,15 @@ export const createRectTexture = (renderer, theme, rectOpts) => { texture.metadata = { slice: { topHeight: - getSliceDimension(radius, 'topLeft', 'topRight') + borderWidth ?? 0, + getSliceDimension(radius, 'topLeft', 'topRight') + (borderWidth ?? 0), leftWidth: - getSliceDimension(radius, 'topLeft', 'bottomLeft') + borderWidth ?? 0, + getSliceDimension(radius, 'topLeft', 'bottomLeft') + (borderWidth ?? 0), rightWidth: - getSliceDimension(radius, 'topRight', 'bottomRight') + borderWidth ?? 0, + getSliceDimension(radius, 'topRight', 'bottomRight') + + (borderWidth ?? 0), bottomHeight: - getSliceDimension(radius, 'bottomLeft', 'bottomRight') + borderWidth ?? - 0, + getSliceDimension(radius, 'bottomLeft', 'bottomRight') + + (borderWidth ?? 0), }, borderWidth: borderWidth, config: { ...rectOpts }, From f9c3b44479305b4656886747da8670688407bce0 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Fri, 24 Oct 2025 14:54:46 +0900 Subject: [PATCH 6/6] fix --- src/display/data-schema/primitive-schema.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/display/data-schema/primitive-schema.js b/src/display/data-schema/primitive-schema.js index 5edbb61e..f6449003 100644 --- a/src/display/data-schema/primitive-schema.js +++ b/src/display/data-schema/primitive-schema.js @@ -199,10 +199,10 @@ export const Margin = z.preprocess( ); export const EachRadius = z.object({ - topLeft: z.number().default(0), - topRight: z.number().default(0), - bottomRight: z.number().default(0), - bottomLeft: z.number().default(0), + 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 @@ -211,7 +211,7 @@ export const TextureStyle = z fill: z.string().default('transparent'), borderWidth: z.number().default(0), borderColor: z.string().default('black'), - radius: z.union([z.number(), EachRadius]).default(0), + radius: z.union([z.number().nonnegative(), EachRadius]).default(0), }) .partial();