canvasengine 2.0.0-rc.3 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-rc.3",
+  "version": "2.0.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Graphic.ts

@@ -240,7 +240,22 @@ export function Circle(props: CircleProps) {
 }
 
 export function Ellipse(props: EllipseProps) {
-  return Circle(props as CircleProps);
+  const { color, border } = useProps(props, {
+    border: null
+  })
+
+  return Graphics({
+    draw: (g, width, height, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, width, height);
+      g.ellipse(x + width / 2, y + height / 2, width / 2, height / 2);
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
+      }
+      g.fill(propValue(color));
+    },
+    ...props
+  })
 }
 
 export function Triangle(props: TriangleProps) {

package/src/components/Sprite.ts

@@ -753,7 +753,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     spriteHeight: number,
     realSize?: TextureOptionsMerging["spriteRealSize"]
   ) {
-    if (!this.hitbox || !spriteWidth || !spriteHeight) {
+    if (!this.hitbox || !spriteWidth || !spriteHeight || !this.anchor) {
       return;
     }
 

package/src/engine/signal.ts

@@ -30,6 +30,28 @@ export let currentSubscriptionsTracker: ((subscription: Subscription) => void) |
 export let currentDefinePropsTracker: ((signals: Record<string, any>) => void) | null = null;
 export let mountTracker: MountFunction | null = null;
 
+const readSignalValue = (value: any) => {
+  const callableValueSignal = value?.__canvasEngineCallableSignalValue;
+  if (callableValueSignal) return callableValueSignal();
+  return isSignal(value) ? value() : value;
+};
+
+const patchDefinePropsSignals = (target: Element, source: Element) => {
+  const targetSignals = (target as any)[DEFINE_PROPS_SIGNALS];
+  const sourceSignals = (source as any)[DEFINE_PROPS_SIGNALS];
+
+  if (!targetSignals || !sourceSignals) {
+    return;
+  }
+
+  Object.entries(sourceSignals as Record<string, any>).forEach(([key, sourceSignal]) => {
+    const targetSignal = targetSignals[key];
+    if (targetSignal && typeof targetSignal.set === "function") {
+      targetSignal.set(readSignalValue(sourceSignal));
+    }
+  });
+};
+
 const getHotComponentRegistry = (): Map<string, HotComponentRecord> => {
   const hotGlobal = globalThis as any;
   if (!hotGlobal.__CANVAS_ENGINE_HOT_COMPONENTS__) {
@@ -274,6 +296,8 @@ export function createHotComponent<P>(
             nextProps.children = target.props.children;
           }
 
+          patchDefinePropsSignals(target, source);
+
           target.props = nextProps;
           target.propObservables = source.propObservables;
           target.componentInstance.onUpdate?.(nextProps);

package/src/hooks/useProps.ts

@@ -1,6 +1,7 @@
 import { isSignal, signal } from "@signe/reactive"
 import { isPrimitive } from "../engine/reactive"
 import { currentDefinePropsTracker } from "../engine/signal"
+import { isTrigger } from "../engine/trigger"
 
 /**
  * Converts props into reactive signals if they are primitive values.
@@ -47,7 +48,36 @@ type PropSchema = {
     [key: string]: PropType | PropType[] | PropConfig;
 }
 
-const toPropSignal = (value: any) => isSignal(value) ? value : signal(value)
+const DEFINE_PROPS_CALLABLE_SIGNAL_VALUE = "__canvasEngineCallableSignalValue"
+
+const createCallablePropSignal = (value: (...args: any[]) => any) => {
+    const valueSignal: any = signal(value)
+    const callable: any = (...args: any[]) => valueSignal()(...args)
+
+    callable[DEFINE_PROPS_CALLABLE_SIGNAL_VALUE] = valueSignal
+    callable.set = valueSignal.set
+    callable.freeze = valueSignal.freeze
+    callable.unfreeze = valueSignal.unfreeze
+    callable.mutate = valueSignal.mutate
+    callable.update = valueSignal.update
+    callable.observable = valueSignal.observable
+    callable._subject = valueSignal._subject
+
+    Object.defineProperty(callable, "_isFrozen", {
+        get: () => valueSignal._isFrozen,
+        set: (value) => {
+            valueSignal._isFrozen = value
+        }
+    })
+
+    return callable
+}
+
+const toPropSignal = (value: any) => {
+    if (isSignal(value) || isTrigger(value)) return value
+    if (typeof value === 'function') return createCallablePropSignal(value)
+    return signal(value)
+}
 
 const definePropSignals = (props: any): any => {
     const obj: any = {}
@@ -133,6 +163,49 @@ export const useDefineProps = (props: any) => {
     }
 }
 
+const getRawProps = (props: any) => isSignal(props) ? props() : (props ?? {})
+
+const getEmitHandler = (handler: any) => {
+    if (handler?.[DEFINE_PROPS_CALLABLE_SIGNAL_VALUE]) return handler
+    if (isSignal(handler)) return handler()
+    return handler
+}
+
+/**
+ * Defines event emitters from component props.
+ *
+ * @param {object} props - The raw component props containing event handlers.
+ * @returns {function} A function returning named emit callbacks.
+ *
+ * @example
+ * const { select } = useDefineEmits({ select: (item) => item.id })();
+ * select({ id: 1 });
+ */
+export const useDefineEmits = (props: any) => {
+    return () => new Proxy({}, {
+        get(_target, key) {
+            if (typeof key !== 'string') {
+                return undefined
+            }
+
+            return (...args: any[]) => {
+                const rawProps = getRawProps(props)
+                const handler = getEmitHandler(rawProps[key])
+
+                if (handler === undefined || handler === null) {
+                    return undefined
+                }
+
+                if (typeof handler !== 'function') {
+                    throw new Error(`Invalid emit handler: "${key}" must be a function`)
+                }
+
+                return handler(...args)
+            }
+        }
+    })
+}
+
 /**
  * Validates the type of a property.
  * 

package/src/index.ts

@@ -10,7 +10,7 @@ export * from './engine/trigger'
 export * from './engine/bootstrap'
 export * from './engine/animation'
 export { FocusManager, focusManager, type ScrollOptions } from './engine/FocusManager'
-export { useProps, useDefineProps } from './hooks/useProps'
+export { useProps, useDefineProps, useDefineEmits } from './hooks/useProps'
 export { useFocusIndex, useFocusedElement, useFocusChange } from './hooks/useFocus'
 export * from './utils/Ease'
 export * from './utils/RadialGradient'