feat: Icon元素框架 & animate元素名称冲突

src/core/render/preset/misc.ts

@@ -3,6 +3,7 @@ import { Sprite } from '../sprite';
 import { ERenderItemEvent, RenderItem, RenderItemPosition } from '../item';
 import { Transform } from '../transform';
 import { ElementNamespace, ComponentInternalInstance } from 'vue';
+import { AutotileRenderable, RenderableData } from '../cache';
 
 type CanvasStyle = string | CanvasGradient | CanvasPattern;
 
@@ -186,3 +187,50 @@ export class Comment extends RenderItem {
         transform: Transform
     ): void {}
 }
+
+export interface EIconEvent extends ERenderItemEvent {}
+
+export class Icon extends RenderItem<EIconEvent> {
+    /** 图标id */
+    icon: AllNumbers = 0;
+    /** 帧数 */
+    frame: number = 0;
+    /** 是否启用动画 */
+    animate: boolean = false;
+    /** 图标的渲染信息 */
+    private renderable?: RenderableData | AutotileRenderable;
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        transform: Transform
+    ): void {}
+
+    /**
+     * 设置图标
+     * @param id 图标id
+     */
+    setIcon(id: AllIds | AllNumbers) {}
+
+    patchProp(
+        key: string,
+        prevValue: any,
+        nextValue: any,
+        namespace?: ElementNamespace,
+        parentComponent?: ComponentInternalInstance | null
+    ): void {
+        switch (key) {
+            case 'icon':
+                this.setIcon(nextValue);
+                return;
+            case 'animate':
+                if (!this.assertType(nextValue, 'boolean', key)) return;
+                this.animate = nextValue;
+                return;
+            case 'frame':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.frame = nextValue;
+                return;
+        }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
+    }
+}

src/core/render/renderer/elements.tsx

@@ -19,6 +19,7 @@ import {
     EllipseProps,
     GL2Props,
     GraphicsProps,
+    IconProps,
     ImageProps,
     LayerGroupProps,
     LayerProps,
@@ -34,7 +35,7 @@ import { ERenderItemEvent, RenderItem } from '../item';
 import { ESpriteEvent, Sprite } from '../sprite';
 import { EContainerEvent } from '../container';
 import { EGL2Event } from '../gl2';
-import { EImageEvent, ETextEvent } from '../preset/misc';
+import { EIconEvent, EImageEvent, ETextEvent } from '../preset/misc';
 import { ELayerEvent, ELayerGroupEvent } from '../preset/layer';
 import { EAnimateEvent } from '../preset/animate';
 import { EDamageEvent } from '../preset/damage';
@@ -86,7 +87,7 @@ declare module 'vue/jsx-runtime' {
             layer: TagDefine<LayerProps, ELayerEvent>;
             'layer-group': TagDefine<LayerGroupProps, ELayerGroupEvent>;
             damage: TagDefine<DamageProps, EDamageEvent>;
-            animate: TagDefine<AnimateProps, EAnimateEvent>;
+            animation: TagDefine<AnimateProps, EAnimateEvent>;
             graphics: TagDefine<GraphicsProps, ERenderItemEvent>;
             'g-rect': TagDefine<RectProps, ERenderItemEvent>;
             'g-circle': TagDefine<CirclesProps, ERenderItemEvent>;
@@ -95,6 +96,7 @@ declare module 'vue/jsx-runtime' {
             'g-bezier': TagDefine<BezierProps, ERenderItemEvent>;
             'g-quad': TagDefine<QuadraticProps, ERenderItemEvent>;
             'g-path': TagDefine<PathProps, ERenderItemEvent>;
+            icon: TagDefine<IconProps, EIconEvent>;
         }
     }
 }

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, Image, Text } from '../preset/misc';
+import { Comment, Icon, Image, Text } from '../preset/misc';
 import { Shader } from '../shader';
 import { Animate, Damage, EDamageEvent, Layer, LayerGroup } from '../preset';
 import {
@@ -167,7 +167,7 @@ tagMap.register('layer-group', (_0, _1, props) => {
 tagMap.register<EDamageEvent, Damage>('damage', (_0, _1, props) => {
     return new Damage();
 });
-tagMap.register('animate', (_0, _1, props) => {
+tagMap.register('animation', (_0, _1, props) => {
     return new Animate();
 });
 tagMap.register('graphics', standardElement(Graphics));
@@ -178,3 +178,4 @@ tagMap.register('g-line', standardElement(Line));
 tagMap.register('g-bezier', standardElement(BezierCurve));
 tagMap.register('g-quad', standardElement(QuadraticCurve));
 tagMap.register('g-path', standardElement(Path));
+tagMap.register('icon', standardElement(Icon));

src/core/render/renderer/props.ts

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

vite.config.ts

@@ -11,7 +11,7 @@ const FSHOST = 'http://127.0.0.1:3000/';
 
 const custom = [
     'container', 'image', 'sprite', 'shader', 'text', 'comment', 'custom', 
-    'layer', 'layer-group', 'animate', 'damage', 'graphics'
+    'layer', 'layer-group', 'animate', 'damage', 'graphics', 'icon'
 ]
 
 // https://vitejs.dev/config/