feat: 缩略图组件

packages-user/client-modules/src/render/components/thumbnail.tsx

@@ -0,0 +1,55 @@
+import {
+    ElementLocator,
+    MotaOffscreenCanvas2D,
+    Sprite
+} from '@motajs/render-core';
+import { SpriteProps } from '@motajs/render-vue';
+import { defineComponent, ref, watch } from 'vue';
+
+export interface ThumbnailProps extends SpriteProps {
+    loc: ElementLocator;
+    padStyle: CanvasStyle;
+    floorId: FloorIds;
+    map?: Block[];
+    hero?: HeroStatus;
+    // configs
+    damage?: boolean;
+    all?: boolean;
+}
+
+export const Thumbnail = defineComponent<ThumbnailProps>(props => {
+    const spriteRef = ref<Sprite>();
+
+    const update = () => {
+        spriteRef.value?.update();
+    };
+
+    const drawThumbnail = (canvas: MotaOffscreenCanvas2D) => {
+        const hero = props.hero;
+        const options: Partial<DrawThumbnailConfig> = {
+            damage: props.damage,
+            ctx: canvas.ctx,
+            x: 0,
+            y: 0,
+            size: 1,
+            all: props.all,
+            noHD: false,
+            v2: true,
+            inFlyMap: false
+        };
+        if (hero) {
+            options.heroLoc = hero.loc;
+            options.heroIcon = hero.image;
+            options.flags = hero.flags;
+            options.centerX = hero.loc.x;
+            options.centerY = hero.loc.y;
+        }
+        core.drawThumbnail(props.floorId, props.map, options);
+    };
+
+    watch(props, update);
+
+    return () => (
+        <sprite ref={spriteRef} loc={props.loc} render={drawThumbnail} />
+    );
+});