feat: winskin框架

src/core/render/preset/graphics.ts

@@ -1,10 +1,10 @@
 import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
-import { RenderItem } from '../item';
+import { ERenderItemEvent, RenderItem } from '../item';
 import { Transform } from '../transform';
 import { ElementNamespace, ComponentInternalInstance } from 'vue';
 
 /*
- * Expected usage (this comment needs to be deleted after implements correctly):
+ * Expected usage (this comment needs to be deleted after implementing correctly):
  * <rect x={10} y={30} width={50} height={30} fill stroke /> <!-- 表现为先填充，后描边 -->
  * <circle x={10} y={50} radius={10} start={Math.PI / 2} end={Math.PI} stroke /> <!-- 表现为仅描边 -->
  * <ellipse x={100} y={50} radiusX={10} radiusY={50} strokeAndFill /> <!-- 表现为先描边后填充 -->
@@ -50,8 +50,10 @@ export const enum GraphicMode {
     StrokeAndFill
 }
 
+export interface EGraphicItemEvent extends ERenderItemEvent {}
+
 export abstract class GraphicItemBase
-    extends RenderItem
+    extends RenderItem<EGraphicItemEvent>
     implements IGraphicProperty
 {
     mode: number = GraphicMode.Fill;

src/core/render/preset/misc.ts

@@ -248,3 +248,34 @@ export class Icon extends RenderItem<EIconEvent> {
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
 }
+
+export interface EWinskinEvent extends ERenderItemEvent {}
+
+export class Winskin extends RenderItem<EWinskinEvent> {
+    image: SizedCanvasImageSource;
+
+    constructor(
+        image: SizedCanvasImageSource,
+        type: RenderItemPosition = 'static'
+    ) {
+        super(type, false, false);
+        this.image = image;
+    }
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        transform: Transform
+    ): void {}
+
+    patchProp(
+        key: string,
+        prevValue: any,
+        nextValue: any,
+        namespace?: ElementNamespace,
+        parentComponent?: ComponentInternalInstance | null
+    ): void {
+        switch (key) {
+        }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
+    }
+}

src/core/render/renderer/elements.tsx

@@ -28,17 +28,24 @@ import {
     RectProps,
     ShaderProps,
     SpriteProps,
-    TextProps
+    TextProps,
+    WinskinProps
 } from './props';
 import { ERenderItemEvent, RenderItem } from '../item';
 import { ESpriteEvent, Sprite } from '../sprite';
 import { EContainerEvent } from '../container';
 import { EGL2Event } from '../gl2';
-import { EIconEvent, EImageEvent, ETextEvent } from '../preset/misc';
+import {
+    EIconEvent,
+    EImageEvent,
+    ETextEvent,
+    EWinskinEvent
+} from '../preset/misc';
 import { ELayerEvent, ELayerGroupEvent } from '../preset/layer';
 import { EAnimateEvent } from '../preset/animate';
 import { EDamageEvent } from '../preset/damage';
 import { EShaderEvent } from '../shader';
+import { EGraphicItemEvent } from '../preset/graphics';
 
 export type WrapEventEmitterEvents<T extends EventEmitter.ValidEventTypes> =
     T extends string | symbol
@@ -87,14 +94,15 @@ declare module 'vue/jsx-runtime' {
             'layer-group': TagDefine<LayerGroupProps, ELayerGroupEvent>;
             damage: TagDefine<DamageProps, EDamageEvent>;
             animation: TagDefine<AnimateProps, EAnimateEvent>;
-            'g-rect': TagDefine<RectProps, ERenderItemEvent>;
+            'g-rect': TagDefine<RectProps, EGraphicItemEvent>;
-            'g-circle': TagDefine<CirclesProps, ERenderItemEvent>;
+            'g-circle': TagDefine<CirclesProps, EGraphicItemEvent>;
-            'g-ellipse': TagDefine<EllipseProps, ERenderItemEvent>;
+            'g-ellipse': TagDefine<EllipseProps, EGraphicItemEvent>;
-            'g-line': TagDefine<LineProps, ERenderItemEvent>;
+            'g-line': TagDefine<LineProps, EGraphicItemEvent>;
-            'g-bezier': TagDefine<BezierProps, ERenderItemEvent>;
+            'g-bezier': TagDefine<BezierProps, EGraphicItemEvent>;
-            'g-quad': TagDefine<QuadraticProps, ERenderItemEvent>;
+            'g-quad': TagDefine<QuadraticProps, EGraphicItemEvent>;
-            'g-path': TagDefine<PathProps, ERenderItemEvent>;
+            'g-path': TagDefine<PathProps, EGraphicItemEvent>;
             icon: TagDefine<IconProps, EIconEvent>;
+            winskin: TagDefine<WinskinProps, EWinskinEvent>;
         }
     }
 }

src/core/render/renderer/map.ts

@@ -4,7 +4,7 @@ import { ElementNamespace, VNodeProps } from 'vue';
 import { Container } from '../container';
 import { MotaRenderer } from '../render';
 import { Sprite } from '../sprite';
-import { Comment, Icon, Image, Text } from '../preset/misc';
+import { Comment, Icon, Image, Text, Winskin } from '../preset/misc';
 import { Shader } from '../shader';
 import { Animate, Damage, EDamageEvent, Layer, LayerGroup } from '../preset';
 import {
@@ -189,3 +189,13 @@ tagMap.register('g-bezier', standardElementNoCache(BezierCurve));
 tagMap.register('g-quad', standardElementNoCache(QuadraticCurve));
 tagMap.register('g-path', standardElementNoCache(Path));
 tagMap.register('icon', standardElementNoCache(Icon));
+tagMap.register('winskin', (_0, _1, props) => {
+    if (!props) return new Winskin(core.material.images.images['winskin.png']);
+    else {
+        const {
+            image = core.material.images.images['winskin.png'],
+            type = 'static'
+        } = props;
+        return new Winskin(image, type);
+    }
+});

src/core/render/renderer/props.ts

@@ -105,3 +105,5 @@ export interface QuadraticProps extends BaseProps {}
 export interface PathProps extends BaseProps {}
 
 export interface IconProps extends BaseProps {}
+
+export interface WinskinProps extends BaseProps {}