feat: render 包单独构建 & fix: 画布高清问题

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

@@ -1,4 +1,4 @@
-import { DefaultProps, ElementLocator, Font, useKey } from '@motajs/render';
+import { DefaultProps, ElementLocator, Font } from '@motajs/render';
 import { computed, defineComponent, reactive, ref } from 'vue';
 import { Background, Selection } from './misc';
 import { TextContent, TextContentExpose, TextContentProps } from './textbox';
@@ -6,6 +6,7 @@ import { SetupComponentOptions } from './types';
 import { TextAlign } from './textboxTyper';
 import { Page, PageExpose } from './page';
 import { GameUI, IUIMountable } from '@motajs/system-ui';
+import { useKey } from '../use';
 
 export interface ConfirmBoxProps extends DefaultProps, TextContentProps {
     text: string;

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

@@ -1,10 +1,10 @@
 import { DefaultProps } from '@motajs/render-vue';
-import Scroll from 'packages/legacy-ui/src/components/scroll.vue';
 import { computed, defineComponent, ref, SlotsType, VNode } from 'vue';
 import { Selection } from './misc';
 import { ElementLocator } from '@motajs/render-core';
 import { Font } from '@motajs/render-style';
 import { SetupComponentOptions } from '@motajs/system-ui';
+import { Scroll } from './scroll';
 
 export interface ListProps extends DefaultProps {
     /** 列表内容，第一项表示 id，第二项表示显示的内容 */
@@ -64,7 +64,7 @@ export const List = defineComponent<ListProps, ListEmits, keyof ListEmits>(
         };
 
         return () => (
-            <Scroll>
+            <Scroll loc={props.loc}>
                 {props.list.map((v, i) => {
                     const [key, value] = v;
                     const loc: ElementLocator = [

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

@@ -70,9 +70,12 @@ export * from './animate';
 export * from './block';
 export * from './cache';
 export * from './camera';
+export * from './damage';
 export * from './frame';
 export * from './hero';
+export * from './itemDetail';
 export * from './layer';
 export * from './misc';
-export * from './viewport';
+export * from './props';
 export * from './utils';
+export * from './viewport';

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

@@ -570,11 +570,11 @@ export class Layer extends Container<ELayerEvent> {
     static readonly FRAME_ALL = 15;
 
     /** 静态层，包含除大怪物及正在移动的内容外的内容 */
-    protected staticMap: MotaOffscreenCanvas2D = this.requireCanvas();
+    protected staticMap = this.requireCanvas(true, false);
     /** 移动层，包含大怪物及正在移动的内容 */
-    protected movingMap: MotaOffscreenCanvas2D = this.requireCanvas();
+    protected movingMap = this.requireCanvas(true, false);
     /** 背景图层 */
-    protected backMap: MotaOffscreenCanvas2D = this.requireCanvas();
+    protected backMap = this.requireCanvas(true, false);
 
     /** 最终渲染至的Sprite */
     main: Sprite = new Sprite('absolute', false, true);

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

@@ -9,9 +9,21 @@ import {
 } from './layer';
 import { EAnimateEvent } from './animate';
 import { EIconEvent, EWinskinEvent } from './misc';
+import { IEnemyCollection } from '@motajs/types';
+import { CanvasStyle } from '@motajs/render-elements';
 
 export interface AnimateProps extends BaseProps {}
 
+export interface DamageProps extends BaseProps {
+    mapWidth?: number;
+    mapHeight?: number;
+    cellSize?: number;
+    enemy?: IEnemyCollection;
+    font?: string;
+    strokeStyle?: CanvasStyle;
+    strokeWidth?: number;
+}
+
 export interface IconProps extends BaseProps {
     /** 图标 id 或数字 */
     icon: AllNumbers | AllIds;

packages-user/client-modules/src/render/index.tsx

@@ -47,3 +47,4 @@ export * from './components';
 export * from './ui';
 export * from './use';
 export * from './elements';
+export * from './renderer';

packages-user/client-modules/src/render/ui/statusBar.tsx

@@ -1,4 +1,4 @@
-import { GameUI, UIComponentProps } from '@motajs/system-ui';
+import { GameUI } from '@motajs/system-ui';
 import { computed, defineComponent, ref, watch } from 'vue';
 import { SetupComponentOptions, TextContent } from '../components';
 import {
@@ -40,7 +40,7 @@ export interface ILeftHeroStatus {
     magicDef: number;
 }
 
-interface StatusBarProps<T> extends DefaultProps, UIComponentProps {
+interface StatusBarProps<T> extends DefaultProps {
     loc: ElementLocator;
     status: T;
     hidden: boolean;

packages-user/client-modules/src/render/use.ts

@@ -1,3 +1,4 @@
+import { Hotkey, gameKey } from '@motajs/system-action';
 import { loading } from '@user/data-base';
 import { TimingFn, Transition } from 'mutate-animate';
 import {
@@ -67,6 +68,25 @@ export function onLoaded(hook: () => void) {
     }
 }
 
+type KeyUsing = [Hotkey, symbol];
+
+/**
+ * 在组件中定义按键操作
+ * @param noScope 是否不创建新作用域
+ */
+export function useKey(noScope: boolean = false): KeyUsing {
+    if (noScope) {
+        return [gameKey, gameKey.scope];
+    } else {
+        const sym = Symbol();
+        gameKey.use(sym);
+        onUnmounted(() => {
+            gameKey.dispose();
+        });
+        return [gameKey, sym];
+    }
+}
+
 export interface ITransitionedController<T> {
     readonly ref: Ref<T>;
     readonly value: T;