refactor: props 也挪到 client-modules，并使 image 标签与样板解耦

packages-user/client-modules/src/render/elements/props.ts

@@ -0,0 +1,61 @@
+import { BaseProps, TagDefine } from '@motajs/render-vue';
+import { Transform } from '@motajs/render-core';
+import {
+    ILayerGroupRenderExtends,
+    FloorLayer,
+    ILayerRenderExtends,
+    ELayerEvent,
+    ELayerGroupEvent
+} from './layer';
+import { EAnimateEvent } from './animate';
+import { EIconEvent, EWinskinEvent } from './misc';
+
+export interface AnimateProps extends BaseProps {}
+
+export interface IconProps extends BaseProps {
+    /** 图标 id 或数字 */
+    icon: AllNumbers | AllIds;
+    /** 显示图标的第几帧 */
+    frame?: number;
+    /** 是否开启动画，开启后 frame 参数无效 */
+    animate?: boolean;
+}
+
+export interface WinskinProps extends BaseProps {
+    /** winskin 的图片 id */
+    image: ImageIds;
+    /** 边框大小 */
+    borderSize?: number;
+}
+
+export interface LayerGroupProps extends BaseProps {
+    cellSize?: number;
+    blockSize?: number;
+    floorId?: FloorIds;
+    bindThisFloor?: boolean;
+    camera?: Transform;
+    ex?: readonly ILayerGroupRenderExtends[];
+    layers?: readonly FloorLayer[];
+}
+
+export interface LayerProps extends BaseProps {
+    layer?: FloorLayer;
+    mapWidth?: number;
+    mapHeight?: number;
+    cellSize?: number;
+    background?: AllNumbers;
+    floorImage?: FloorAnimate[];
+    ex?: readonly ILayerRenderExtends[];
+}
+
+declare module 'vue/jsx-runtime' {
+    namespace JSX {
+        export interface IntrinsicElements {
+            layer: TagDefine<LayerProps, ELayerEvent>;
+            'layer-group': TagDefine<LayerGroupProps, ELayerGroupEvent>;
+            animation: TagDefine<AnimateProps, EAnimateEvent>;
+            icon: TagDefine<IconProps, EIconEvent>;
+            winskin: TagDefine<WinskinProps, EWinskinEvent>;
+        }
+    }
+}

packages/render-vue/src/elements.tsx

@@ -8,7 +8,6 @@ import {
 } from 'vue';
 import EventEmitter from 'eventemitter3';
 import {
-    AnimateProps,
     BaseProps,
     BezierProps,
     CirclesProps,
@@ -18,10 +17,7 @@ import {
     CustomProps,
     DamageProps,
     EllipseProps,
-    IconProps,
     ImageProps,
-    LayerGroupProps,
-    LayerProps,
     LineProps,
     PathProps,
     QuadraticProps,
@@ -29,8 +25,7 @@ import {
     RectRProps,
     ShaderProps,
     SpriteProps,
-    TextProps,
+    TextProps
-    WinskinProps
 } from './props';
 import {
     ERenderItemEvent,
@@ -40,13 +35,8 @@ import {
     EShaderEvent
 } from '@motajs/render-core';
 import {
-    EIconEvent,
     EImageEvent,
     ETextEvent,
-    EWinskinEvent,
-    ELayerEvent,
-    ELayerGroupEvent,
-    EAnimateEvent,
     EGraphicItemEvent
 } from '@motajs/render-elements';
 
@@ -97,10 +87,7 @@ declare module 'vue/jsx-runtime' {
             image: TagDefine<ImageProps, EImageEvent>;
             comment: TagDefine<CommentProps, ERenderItemEvent>;
             custom: TagDefine<CustomProps, ERenderItemEvent>;
-            layer: TagDefine<LayerProps, ELayerEvent>;
-            'layer-group': TagDefine<LayerGroupProps, ELayerGroupEvent>;
             damage: TagDefine<DamageProps, ERenderItemEvent>;
-            animation: TagDefine<AnimateProps, EAnimateEvent>;
             'g-rect': TagDefine<RectProps, EGraphicItemEvent>;
             'g-circle': TagDefine<CirclesProps, EGraphicItemEvent>;
             'g-ellipse': TagDefine<EllipseProps, EGraphicItemEvent>;
@@ -109,8 +96,6 @@ declare module 'vue/jsx-runtime' {
             'g-quad': TagDefine<QuadraticProps, EGraphicItemEvent>;
             'g-path': TagDefine<PathProps, EGraphicItemEvent>;
             'g-rectr': TagDefine<RectRProps, EGraphicItemEvent>;
-            icon: TagDefine<IconProps, EIconEvent>;
-            winskin: TagDefine<WinskinProps, EWinskinEvent>;
         }
     }
 }

packages/render-vue/src/map.ts

@@ -157,13 +157,13 @@ tagMap.register<ETextEvent, Text>('text', (_0, _1, props) => {
         return new Text(text, type);
     }
 });
+const emptyImage = document.createElement('canvas');
+emptyImage.width = 1;
+emptyImage.height = 1;
 tagMap.register('image', (_0, _1, props) => {
-    if (!props) return new Image(core.material.images.images['bg.webp']);
+    if (!props) return new Image(emptyImage);
     else {
-        const {
+        const { image = emptyImage, type = 'static' } = props;
-            image = core.material.images.images['bg.webp'],
-            type = 'static'
-        } = props;
         return new Image(image, type);
     }
 });

packages/render-vue/src/props.ts

@@ -9,9 +9,6 @@ import {
     CustomContainerRenderFn
 } from '@motajs/render-core';
 import {
-    FloorLayer,
-    ILayerGroupRenderExtends,
-    ILayerRenderExtends,
     BezierParams,
     CircleParams,
     EllipseParams,
@@ -125,28 +122,6 @@ export interface CommentProps extends BaseProps {
     text?: string;
 }
 
-export interface LayerGroupProps extends BaseProps {
-    cellSize?: number;
-    blockSize?: number;
-    floorId?: FloorIds;
-    bindThisFloor?: boolean;
-    camera?: Transform;
-    ex?: readonly ILayerGroupRenderExtends[];
-    layers?: readonly FloorLayer[];
-}
-
-export interface LayerProps extends BaseProps {
-    layer?: FloorLayer;
-    mapWidth?: number;
-    mapHeight?: number;
-    cellSize?: number;
-    background?: AllNumbers;
-    floorImage?: FloorAnimate[];
-    ex?: readonly ILayerRenderExtends[];
-}
-
-export interface AnimateProps extends BaseProps {}
-
 export interface DamageProps extends BaseProps {
     mapWidth?: number;
     mapHeight?: number;
@@ -255,19 +230,3 @@ export interface RectRProps extends GraphicPropsBase {
      */
     ellipse?: RectREllipseParams;
 }
-
-export interface IconProps extends BaseProps {
-    /** 图标 id 或数字 */
-    icon: AllNumbers | AllIds;
-    /** 显示图标的第几帧 */
-    frame?: number;
-    /** 是否开启动画，开启后 frame 参数无效 */
-    animate?: boolean;
-}
-
-export interface WinskinProps extends BaseProps {
-    /** winskin 的图片 id */
-    image: ImageIds;
-    /** 边框大小 */
-    borderSize?: number;
-}