@rpgjs/client 5.0.0-beta.7 → 5.0.0-beta.9

package/src/components/dynamics/parse-value.spec.ts

@@ -0,0 +1,41 @@
+import { describe, expect, test } from "vitest";
+import { signal } from "canvasengine";
+import { resolveDynamicProps, resolveDynamicValue } from "./parse-value";
+
+describe("dynamic component values", () => {
+  test("resolves player properties and keeps bar placeholders for the bar renderer", () => {
+    const object = {
+      name: signal("Alex"),
+      hpSignal: signal(100),
+      _param: signal({ maxHp: 120 })
+    };
+
+    expect(resolveDynamicValue("HP: {hp}/{param.maxHp} {name} {$current}", object)).toBe("HP: 100/120 Alex {$current}");
+  });
+
+  test("keeps resolved props reactive", () => {
+    const object = {
+      name: signal("Alex"),
+      hpSignal: signal(100),
+      _param: signal({ maxHp: 120 })
+    };
+    const props: any = resolveDynamicProps({
+      value: "HP: {hp} {name}",
+      text: "{$current}/{$max} {name}",
+      style: {
+        width: "{hp}"
+      }
+    }, object);
+
+    expect(props.value()).toBe("HP: 100 Alex");
+    expect(props.text()).toBe("{$current}/{$max} Alex");
+    expect(props.style()).toEqual({ width: "100" });
+
+    object.hpSignal.set(10);
+    object.name.set("Sam");
+
+    expect(props.value()).toBe("HP: 10 Sam");
+    expect(props.text()).toBe("{$current}/{$max} Sam");
+    expect(props.style()).toEqual({ width: "10" });
+  });
+});

package/src/components/dynamics/parse-value.ts

@@ -6,17 +6,114 @@ interface MatchResult {
     index: number;
 }
 
+const readSignal = (value: any) => typeof value === 'function' ? value() : value;
+const DYNAMIC_VALUE_PATTERN = /\{([^}]+)\}/g;
+
+const hasDynamicValue = (value: any) => {
+    value = readSignal(value);
+    if (typeof value !== 'string') return false;
+    DYNAMIC_VALUE_PATTERN.lastIndex = 0;
+    return DYNAMIC_VALUE_PATTERN.test(value);
+};
+
+const resolveDynamicSnapshot = (value: any, object?: any): any => {
+    value = readSignal(value);
+
+    if (Array.isArray(value)) {
+        return value.map((entry) => resolveDynamicSnapshot(entry, object));
+    }
+
+    if (value && typeof value === 'object') {
+        return Object.fromEntries(
+            Object.entries(value).map(([key, entry]) => [key, resolveDynamicSnapshot(entry, object)])
+        );
+    }
+
+    return resolveDynamicValue(value, object);
+};
+
+export const getDynamicValue = (property: string, object?: any) => {
+    try {
+        const propertyPath = property.split('.');
+        let currentValue = object;
+
+        for (let j = 0; j < propertyPath.length; j++) {
+            let prop = propertyPath[j];
+
+            currentValue = readSignal(currentValue);
+
+            if (j === 0) {
+                if (prop === 'hp') prop = 'hpSignal';
+                if (prop === 'sp') prop = 'spSignal';
+                if (prop === 'param') prop = '_param';
+            }
+
+            if (currentValue && typeof currentValue === 'object' && prop in currentValue) {
+                currentValue = currentValue[prop];
+            } else {
+                return undefined;
+            }
+        }
+
+        return readSignal(currentValue);
+    } catch (error) {
+        return undefined;
+    }
+};
+
+export const resolveDynamicValue = (value: any, object?: any): any => {
+    value = readSignal(value);
+
+    if (typeof value !== 'string') {
+        return value;
+    }
+
+    return value.replace(DYNAMIC_VALUE_PATTERN, (fullMatch, property) => {
+        const propertyValue = getDynamicValue(property, object);
+        if (propertyValue == null && property.startsWith('$')) return fullMatch;
+        return propertyValue != null ? String(propertyValue) : '';
+    });
+};
+
+const resolveDynamicProp = (value: any, object?: any): any => {
+    if (Array.isArray(value) || (value && typeof value === 'object' && typeof value !== 'function')) {
+        return computed(() => resolveDynamicSnapshot(value, object));
+    }
+
+    if (typeof value === 'function' || hasDynamicValue(value)) {
+        return computed(() => resolveDynamicValue(value, object));
+    }
+
+    return value;
+};
+
+export const resolveDynamicProps = (props: any, object?: any): any => {
+    props = readSignal(props);
+
+    if (Array.isArray(props)) {
+        return computed(() => resolveDynamicSnapshot(props, object));
+    }
+
+    if (props && typeof props === 'object') {
+        return Object.fromEntries(
+            Object.entries(props).map(([key, value]) => [key, resolveDynamicProp(value, object)])
+        );
+    }
+
+    return resolveDynamicProp(props, object);
+};
+
 export const parseDynamicValue = (value: any, object?: any) => {
     if (typeof value !== 'string') {
         return computed(() => String(value ?? ''));
     }
 
     // Find all dynamic references like {propertyName}
-    const pattern = /\{([^}]+)\}/g;
     const matches: MatchResult[] = [];
     let match;
-    
-    while ((match = pattern.exec(value)) !== null) {
+
+    DYNAMIC_VALUE_PATTERN.lastIndex = 0;
+    while ((match = DYNAMIC_VALUE_PATTERN.exec(value)) !== null) {
         matches.push({
             property: match[1],
             fullMatch: match[0],
@@ -37,40 +134,8 @@ export const parseDynamicValue = (value: any, object?: any) => {
         for (let i = matches.length - 1; i >= 0; i--) {
             const { property, fullMatch } = matches[i];
             
-            // Try to access the property from the object
-            // Support nested properties like {param.maxHp}
-            let propertyValue = '';
-            try {
-                const propertyPath = property.split('.');
-                let currentValue = object;
-                
-                for (let j = 0; j < propertyPath.length; j++) {
-                    const prop = propertyPath[j];
-                    
-                    // Check if currentValue is a signal (function) and call it
-                    if (typeof currentValue === 'function') {
-                        currentValue = currentValue();
-                    }
-                    
-                    // Access the property
-                    if (currentValue && typeof currentValue === 'object' && prop in currentValue) {
-                        currentValue = currentValue[prop];
-                    } else {
-                        currentValue = undefined;
-                        break;
-                    }
-                }
-                
-                // If the final value is a signal, call it
-                if (typeof currentValue === 'function') {
-                    currentValue = currentValue();
-                }
-                
-                propertyValue = currentValue != null ? String(currentValue) : '';
-            } catch (error) {
-                // If property doesn't exist or can't be accessed, use empty string
-                propertyValue = '';
-            }
+            const currentValue = getDynamicValue(property, object);
+            const propertyValue = currentValue != null ? String(currentValue) : property.startsWith('$') ? fullMatch : '';
             
             result = result.replace(fullMatch, propertyValue);
         }

package/src/components/dynamics/shape-utils.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from "vitest";
+import { getShapeBox, getShapePointBounds, translatePolygonPoints } from "./shape-utils";
+
+describe("shape utilities", () => {
+  test("normalizes rectangles and circles around their rendered bounds", () => {
+    expect(getShapeBox({ type: "rect", width: 32, height: 32 })).toEqual({
+      width: 32,
+      height: 32,
+      offsetX: 0,
+      offsetY: 0
+    });
+    expect(getShapeBox({ type: "circle", radius: 8 })).toEqual({
+      width: 16,
+      height: 16,
+      offsetX: 0,
+      offsetY: 0
+    });
+  });
+
+  test("normalizes line bounds with negative coordinates", () => {
+    expect(getShapeBox({ type: "line", x1: -4, y1: 6, x2: 12, y2: -2 })).toEqual({
+      width: 16,
+      height: 8,
+      offsetX: 4,
+      offsetY: 2
+    });
+  });
+
+  test("normalizes polygon bounds and translated points", () => {
+    const box = getShapeBox({ type: "polygon", points: [-5, 2, 15, 2, 5, 12] });
+
+    expect(getShapePointBounds([-5, 2, 15, 2, 5, 12])).toEqual({
+      minX: -5,
+      minY: 2,
+      maxX: 15,
+      maxY: 12
+    });
+    expect(box).toEqual({
+      width: 20,
+      height: 10,
+      offsetX: 5,
+      offsetY: -2
+    });
+    expect(translatePolygonPoints([-5, 2, 15, 2, 5, 12], box)).toEqual([0, 0, 20, 0, 10, 10]);
+  });
+});

package/src/components/dynamics/shape-utils.ts

@@ -0,0 +1,61 @@
+const defaultToNumber = (value: any, fallback = 0) => {
+  const num = typeof value === 'number' ? value : parseFloat(value);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+export function getShapePointBounds(points: any[] = [], toNumber = defaultToNumber) {
+  if (!Array.isArray(points) || points.length < 2) {
+    return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (let i = 0; i < points.length; i += 2) {
+    const x = toNumber(points[i], 0);
+    const y = toNumber(points[i + 1], 0);
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  }
+
+  return { minX, minY, maxX, maxY };
+}
+
+export function getShapeBox(cfg: any, toNumber = defaultToNumber) {
+  if (cfg.type === 'circle') {
+    return { width: cfg.radius * 2, height: cfg.radius * 2, offsetX: 0, offsetY: 0 };
+  }
+
+  if (cfg.type === 'line') {
+    const minX = Math.min(cfg.x1, cfg.x2);
+    const minY = Math.min(cfg.y1, cfg.y2);
+    const maxX = Math.max(cfg.x1, cfg.x2);
+    const maxY = Math.max(cfg.y1, cfg.y2);
+    return {
+      width: Math.max(1, maxX - minX),
+      height: Math.max(1, maxY - minY),
+      offsetX: -minX,
+      offsetY: -minY
+    };
+  }
+
+  if (cfg.type === 'polygon') {
+    const bounds = getShapePointBounds(cfg.points, toNumber);
+    return {
+      width: Math.max(1, bounds.maxX - bounds.minX),
+      height: Math.max(1, bounds.maxY - bounds.minY),
+      offsetX: -bounds.minX,
+      offsetY: -bounds.minY
+    };
+  }
+
+  return { width: cfg.width, height: cfg.height, offsetX: 0, offsetY: 0 };
+}
+
+export function translatePolygonPoints(points: any[] = [], box: { offsetX: number; offsetY: number }, toNumber = defaultToNumber) {
+  return points.map((point, index) => toNumber(point, 0) + (index % 2 === 0 ? box.offsetX : box.offsetY));
+}

package/src/components/dynamics/shape.ce

@@ -0,0 +1,89 @@
+<Container width={shapeWidth} height={shapeHeight} minWidth={shapeWidth} minHeight={shapeHeight}>
+  <Graphics width={shapeWidth} height={shapeHeight} draw={drawShape} />
+</Container>
+
+<script>
+import { computed } from "canvasengine";
+import { resolveDynamicValue } from "./parse-value";
+import { getShapeBox, translatePolygonPoints } from "./shape-utils";
+
+const props = defineProps();
+const { object } = props;
+
+const read = (prop, fallback) => prop ? prop() : fallback;
+
+const toNumber = (value, fallback = 0) => {
+  const resolved = resolveDynamicValue(value, object);
+  const num = typeof resolved === 'number' ? resolved : parseFloat(resolved);
+  return Number.isFinite(num) ? num : fallback;
+};
+
+const toColor = (value, fallback) => {
+  const resolved = resolveDynamicValue(value, object);
+  if (typeof resolved === 'number') return resolved;
+  if (typeof resolved === 'string' && resolved.startsWith('#')) {
+    return parseInt(resolved.slice(1), 16);
+  }
+  return resolved ?? fallback;
+};
+
+const config = computed(() => ({
+  type: read(props.type, 'rectangle'),
+  fill: toColor(read(props.fill, '#ffffff'), 0xffffff),
+  radius: toNumber(read(props.radius, 8), 8),
+  width: toNumber(read(props.width, 16), 16),
+  height: toNumber(read(props.height, 16), 16),
+  x1: toNumber(read(props.x1, 0), 0),
+  y1: toNumber(read(props.y1, 0), 0),
+  x2: toNumber(read(props.x2, 16), 16),
+  y2: toNumber(read(props.y2, 0), 0),
+  opacity: Math.max(0, Math.min(1, toNumber(read(props.opacity, 1), 1))),
+  points: read(props.points, []),
+  line: read(props.line, null)
+}));
+
+const shapeBox = computed(() => getShapeBox(config(), toNumber));
+
+const shapeWidth = computed(() => shapeBox().width);
+const shapeHeight = computed(() => shapeBox().height);
+
+const drawShape = (g) => {
+  const cfg = config();
+  const box = shapeBox();
+
+  if (cfg.type === 'circle') {
+    g.circle(cfg.radius, cfg.radius, cfg.radius);
+  } else if (cfg.type === 'ellipse') {
+    g.ellipse(box.width / 2, box.height / 2, box.width / 2, box.height / 2);
+  } else if (cfg.type === 'line') {
+    g.moveTo(cfg.x1 + box.offsetX, cfg.y1 + box.offsetY);
+    g.lineTo(cfg.x2 + box.offsetX, cfg.y2 + box.offsetY);
+  } else if (cfg.type === 'polygon' && Array.isArray(cfg.points)) {
+    g.poly(translatePolygonPoints(cfg.points, box, toNumber));
+  } else if (cfg.type === 'rounded-rectangle') {
+    g.roundRect(0, 0, box.width, box.height, toNumber(read(props.radius, 4), 4));
+  } else {
+    g.rect(0, 0, box.width, box.height);
+  }
+
+  if (cfg.type === 'line') {
+    const line = cfg.line ?? {};
+    g.stroke({
+      color: toColor(line.color, cfg.fill),
+      width: toNumber(line.width, 1),
+      alpha: toNumber(line.alpha, cfg.opacity)
+    });
+    return;
+  }
+
+  g.fill({ color: cfg.fill, alpha: cfg.opacity });
+
+  if (cfg.line) {
+    g.stroke({
+      color: toColor(cfg.line.color, cfg.fill),
+      width: toNumber(cfg.line.width, 1),
+      alpha: toNumber(cfg.line.alpha, cfg.opacity)
+    });
+  }
+};
+</script>

package/src/components/dynamics/text.ce

@@ -1,157 +1,38 @@
-<Text text={parseDynamicValue(component.value, object)} ...getComponentStyle(component) />
+<Text text={textValue} color={textColor} size={textSize} fontFamily={textFontFamily} style={textStyle} />
 
 <script>
 import { computed } from "canvasengine";
-import { parseDynamicValue } from "./parse-value";
+import { resolveDynamicValue } from "./parse-value";
 
-const { object } = defineProps();
-const component = object._component;
+const { object, value, style } = defineProps();
 
-/**
- * Parses a numeric style value that can be a number or a string
- * 
- * If the value is a string, it may contain dynamic references like {hp}
- * which need to be parsed using parseDynamicValue. If it's a number,
- * it's returned as-is wrapped in a computed.
- * 
- * @param value - Numeric value (number or string)
- * @param object - Object to resolve dynamic references from
- * @returns Computed signal with the numeric value
- */
-const parseNumericStyleValue = (value, object) => {
-    if (value === undefined || value === null) {
-        return undefined;
-    }
-    
-    if (typeof value === 'number') {
-        return value;
-    }
-    
-    if (typeof value === 'string') {
-        // Check if it contains dynamic references
-        if (value.includes('{')) {
-            // Parse dynamic value and convert to number
-            const parsed = parseDynamicValue(value, object);
-            return computed(() => {
-                const str = parsed();
-                const num = parseFloat(str);
-                return isNaN(num) ? 0 : num;
-            });
-        } else {
-            // Simple string number, convert directly
-            const num = parseFloat(value);
-            return isNaN(num) ? undefined : num;
-        }
-    }
-    
-    return value;
-};
-
-/**
- * Maps component style properties to Canvas Engine Text component props
- * 
- * Converts TextComponentOptions from the server to the format expected
- * by the Canvas Engine Text component. Supports all text styling properties
- * including fill, fontSize, fontFamily, fontStyle, fontWeight, stroke,
- * opacity, wordWrap, and align. Also supports dynamic values (number | string)
- * for numeric properties like fontSize and opacity.
- * 
- * @param component - Component definition with style property
- * @returns Object with Text component props
- * 
- * @example
- * ```ts
- * // Component with style
- * const component = {
- *   style: {
- *     fill: '#000000',
- *     fontSize: 20,
- *     fontFamily: 'Arial',
- *     fontWeight: 'bold'
- *   }
- * };
- * 
- * const props = getComponentStyle(component);
- * // Returns: { color: '#000000', size: 20, fontFamily: 'Arial', style: { fontWeight: 'bold' } }
- * 
- * // Component with dynamic fontSize
- * const component2 = {
- *   style: {
- *     fill: '#000000',
- *     fontSize: '{hp}', // Will be resolved from object.hp
- *     opacity: '0.8'
- *   }
- * };
- * ```
- */
-const getComponentStyle = (component) => {
-    if (!component.style) {
-        return {};
-    }
-
-    const style = component.style;
-    const result = {};
-
-    // Map fill to color (shortcut property)
-    // fill can be a string (hex color) or a dynamic string
-    if (style.fill !== undefined) {
-        if (typeof style.fill === 'string' && style.fill.includes('{')) {
-            result.color = parseDynamicValue(style.fill, object);
-        } else {
-            result.color = style.fill;
-        }
-    }
+const read = (prop, fallback) => prop ? prop() : fallback;
 
-    // Map fontSize to size (shortcut property)
-    // fontSize can be number or string (with dynamic references)
-    if (style.fontSize !== undefined) {
-        const fontSizeValue = parseNumericStyleValue(style.fontSize, object);
-        if (fontSizeValue !== undefined) {
-            result.size = fontSizeValue;
-        }
-    }
+const parseNumericStyleValue = (value, object) => {
+    value = resolveDynamicValue(value, object);
+    if (value === undefined || value === null) return undefined;
+    if (typeof value === 'number') return value;
 
-    // Map fontFamily (shortcut property)
-    if (style.fontFamily !== undefined) {
-        if (typeof style.fontFamily === 'string' && style.fontFamily.includes('{')) {
-            result.fontFamily = parseDynamicValue(style.fontFamily, object);
-        } else {
-            result.fontFamily = style.fontFamily;
-        }
-    }
+    const num = parseFloat(value);
+    return isNaN(num) ? undefined : num;
+};
 
-    // Build style object for PixiJS Text properties
+const getTextStyle = (style) => {
+    if (!style) return {};
     const textStyle = {};
 
-    // Font style properties
     if (style.fontStyle !== undefined) {
-        if (typeof style.fontStyle === 'string' && style.fontStyle.includes('{')) {
-            textStyle.fontStyle = parseDynamicValue(style.fontStyle, object);
-        } else {
-            textStyle.fontStyle = style.fontStyle;
-        }
+        textStyle.fontStyle = resolveDynamicValue(style.fontStyle, object);
     }
 
     if (style.fontWeight !== undefined) {
-        if (typeof style.fontWeight === 'string' && style.fontWeight.includes('{')) {
-            textStyle.fontWeight = parseDynamicValue(style.fontWeight, object);
-        } else if (typeof style.fontWeight === 'number') {
-            textStyle.fontWeight = style.fontWeight;
-        } else {
-            textStyle.fontWeight = style.fontWeight;
-        }
+        textStyle.fontWeight = resolveDynamicValue(style.fontWeight, object);
     }
 
-    // Stroke properties
     if (style.stroke !== undefined) {
-        if (typeof style.stroke === 'string' && style.stroke.includes('{')) {
-            textStyle.stroke = parseDynamicValue(style.stroke, object);
-        } else {
-            textStyle.stroke = style.stroke;
-        }
+        textStyle.stroke = resolveDynamicValue(style.stroke, object);
     }
 
-    // Opacity (can be number or string)
     if (style.opacity !== undefined) {
         const opacityValue = parseNumericStyleValue(style.opacity, object);
         if (opacityValue !== undefined) {
@@ -159,25 +40,29 @@ const getComponentStyle = (component) => {
         }
     }
 
-    // Word wrap
     if (style.wordWrap !== undefined) {
         textStyle.wordWrap = style.wordWrap;
     }
 
-    // Text alignment
     if (style.align !== undefined) {
-        if (typeof style.align === 'string' && style.align.includes('{')) {
-            textStyle.align = parseDynamicValue(style.align, object);
-        } else {
-            textStyle.align = style.align;
-        }
+        textStyle.align = resolveDynamicValue(style.align, object);
     }
 
-    // Only add style prop if there are style properties
-    if (Object.keys(textStyle).length > 0) {
-        result.style = textStyle;
-    }
+    return textStyle;
+};
 
-    return result;
-}
-</script>
+const textValue = computed(() => String(resolveDynamicValue(read(value, ''), object) ?? ''));
+const textColor = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fill !== undefined ? resolveDynamicValue(currentStyle.fill, object) : undefined;
+});
+const textSize = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fontSize !== undefined ? parseNumericStyleValue(currentStyle.fontSize, object) : undefined;
+});
+const textFontFamily = computed(() => {
+    const currentStyle = read(style, {});
+    return currentStyle.fontFamily !== undefined ? resolveDynamicValue(currentStyle.fontFamily, object) : undefined;
+});
+const textStyle = computed(() => getTextStyle(read(style, {})));
+</script>