feat: 所有内置元素的props实现

src/core/render/item.ts

@@ -546,7 +546,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
      */
     protected assertType(
         value: any,
-        expected: string | (new () => any),
+        expected: string | (new (...params: any[]) => any),
         key: string
     ) {
         if (typeof expected === 'string') {

src/core/render/preset/damage.ts

@@ -24,6 +24,7 @@ import { getDamageColor } from '@/plugin/utils';
 import { ERenderItemEvent, RenderItem, transformCanvas } from '../item';
 import EventEmitter from 'eventemitter3';
 import { Transform } from '../transform';
+import { ElementNamespace, ComponentInternalInstance } from 'vue';
 
 const ensureFloorDamage = Mota.require('fn', 'ensureFloorDamage');
 
@@ -200,6 +201,13 @@ export class Damage extends RenderItem<EDamageEvent> {
         this.emit('setMapSize', width, height);
     }
 
+    /**
+     * 设置每个图块的大小
+     */
+    setCellSize(size: number) {
+        this.cellSize = size;
+        this.update();
+    }
     /**
      * 更新怪物列表。更新后，{@link Damage.enemy} 会丢失原来的怪物列表引用，换为传入的列表引用
      * @param enemy 怪物列表
@@ -526,6 +534,48 @@ export class Damage extends RenderItem<EDamageEvent> {
         // console.timeEnd('damage');
     }
 
+    patchProp(
+        key: string,
+        prevValue: any,
+        nextValue: any,
+        namespace?: ElementNamespace,
+        parentComponent?: ComponentInternalInstance | null
+    ): void {
+        switch (key) {
+            case 'mapWidth':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setMapSize(nextValue, this.mapHeight);
+                return;
+            case 'mapHeight':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setMapSize(this.mapWidth, nextValue);
+                return;
+            case 'cellSize':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setCellSize(nextValue);
+                return;
+            case 'enemy':
+                if (!this.assertType(nextValue, 'object', key)) return;
+                this.updateCollection(nextValue);
+                return;
+            case 'font':
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.font = nextValue;
+                this.update();
+                return;
+            case 'strokeStyle':
+                this.strokeStyle = nextValue;
+                this.update();
+                return;
+            case 'strokeWidth':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.strokeWidth = nextValue;
+                this.update();
+                return;
+        }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
+    }
+
     destroy(): void {
         super.destroy();
         this.block.destroy();

src/core/render/preset/layer.ts

@@ -20,6 +20,7 @@ import { Transform } from '../transform';
 import { LayerFloorBinder, LayerGroupFloorBinder } from './floor';
 import { RenderAdapter } from '../adapter';
 import { ElementNamespace, ComponentInternalInstance } from 'vue';
+import { Camera } from '../camera';
 
 export interface ILayerGroupRenderExtends {
     /** 拓展的唯一标识符 */
@@ -204,6 +205,9 @@ export class LayerGroup
      */
     setCellSize(size: number) {
         this.cellSize = size;
+        this.layers.forEach(v => {
+            v.setCellSize(size);
+        });
     }
 
     /**
@@ -342,6 +346,37 @@ export class LayerGroup
         }
     }
 
+    patchProp(
+        key: string,
+        prevValue: any,
+        nextValue: any,
+        namespace?: ElementNamespace,
+        parentComponent?: ComponentInternalInstance | null
+    ): void {
+        switch (key) {
+            case 'cellSize':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setCellSize(nextValue);
+                return;
+            case 'blockSize':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setBlockSize(nextValue);
+                return;
+            case 'floorId':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                const binder = this.getExtends('floor-binder');
+                if (binder instanceof LayerGroupFloorBinder) {
+                    binder.bindFloor(nextValue);
+                }
+                return;
+            case 'camera':
+                if (!this.assertType(nextValue, Camera, key)) return;
+                this.camera = nextValue;
+                return;
+        }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
+    }
+
     destroy(): void {
         for (const ex of this.extend.values()) {
             ex.onDestroy?.(this);
@@ -707,6 +742,15 @@ export class Layer extends Container<ELayerEvent> {
         );
     }
 
+    /**
+     * 设置每个图块的大小
+     * @param size 每个图块的大小
+     */
+    setCellSize(size: number) {
+        this.cellSize = size;
+        this.update();
+    }
+
     /**
      * 设置楼层贴图
      */
@@ -1427,7 +1471,28 @@ export class Layer extends Container<ELayerEvent> {
                 }
                 this.update();
                 return;
+            case 'cellSize':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setCellSize(nextValue);
+                return;
+            case 'mapWidth':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setMapSize(nextValue, this.mapHeight);
+                return;
+            case 'mapHeight':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setMapSize(this.mapWidth, nextValue);
+                return;
+            case 'background':
+                if (!this.assertType(nextValue, 'number', key)) return;
+                this.setBackground(nextValue);
+                return;
+            case 'floorImage':
+                if (!this.assertType(nextValue, Array, key)) return;
+                this.setFloorImage(nextValue);
+                return;
         }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
 
     private addToGroup(group: LayerGroup) {

src/core/render/preset/misc.ts

@@ -115,10 +115,23 @@ export class Text extends RenderItem<ETextEvent> {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
+            case 'text':
+                if (!this.assertType(nextValue, 'string', key)) return;
+                this.setText(nextValue);
+                return;
+            case 'fillStyle':
+                this.setStyle(nextValue);
+                return;
+            case 'strokeStyle':
+                this.setStyle(void 0, nextValue);
+                return;
             case 'font':
                 if (!this.assertType(nextValue, 'string', key)) return;
                 this.setFont(nextValue);
                 break;
+            case 'strokeWidth':
+                this.setStrokeWidth(nextValue);
+                return;
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
@@ -173,6 +186,7 @@ export class Image extends RenderItem<EImageEvent> {
                 this.setImage(nextValue);
                 return;
         }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
 }
 

src/core/render/renderer/props.ts

@@ -86,7 +86,7 @@ export interface DamageProps extends BaseProps {
     cellSize?: number;
     enemy?: EnemyCollection;
     font?: string;
-    strokeStyle?: string;
+    strokeStyle?: CanvasStyle;
     strokeWidth?: number;
 }
 

src/core/render/sprite.ts

@@ -50,16 +50,12 @@ export class Sprite<
         namespace?: ElementNamespace,
         parentComponent?: ComponentInternalInstance | null
     ): void {
-        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
-        const type = typeof nextValue;
         switch (key) {
             case 'render':
-                if (type !== 'function') {
-                    logger.error(21, key, 'function', type);
-                    return;
-                }
+                if (this.assertType(nextValue, 'function', key)) return;
                 this.setRenderFn(nextValue);
                 break;
         }
+        super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
 }