canvasengine 2.0.0-rc.4 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-rc.4",
+  "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/hooks/useProps.ts

@@ -163,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'