From 67293bf652cb87aa52e63179ec668fc37f648586 Mon Sep 17 00:00:00 2001 From: unanmed <1319491857@qq.com> Date: Thu, 29 Oct 2026 20:35:56 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=20mutate-animate?= =?UTF-8?q?=20=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - .../client-base/src/components/input.tsx | 2 +- .../client-base/src/components/scroll.tsx | 4 +- .../client-base/src/components/tip.tsx | 4 +- .../client-base/src/map/extension/door.ts | 2 +- .../client-modules/src/action/move.ts | 322 +++++++++--------- packages-user/entry-client/src/create.ts | 2 - packages-user/entry-data/src/mota.ts | 2 - pnpm-lock.yaml | 8 - src/client/ui/toolbox.tsx | 216 ++++++------ src/types/declaration/util.d.ts | 4 +- 11 files changed, 275 insertions(+), 292 deletions(-) diff --git a/package.json b/package.json index bb9be28..997ced0 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "lodash-es": "^4.17.23", "lz-string": "^1.5.0", "maxrects-packer": "^2.7.3", - "mutate-animate": "^1.4.2", "ogg-opus-decoder": "^1.7.3", "opus-decoder": "^0.7.11", "vue": "^3.5.29" diff --git a/packages-user/client-base/src/components/input.tsx b/packages-user/client-base/src/components/input.tsx index 6da3818..bfe65b0 100644 --- a/packages-user/client-base/src/components/input.tsx +++ b/packages-user/client-base/src/components/input.tsx @@ -13,7 +13,7 @@ import { } from '@motajs/render'; // @ts-expect-error render/use.ts 按 D-54 留在实现层，本文件已移入系统层，按 D-68 暂以标注记录，不反向引用、不解耦 import { transitionedColor } from '../use'; -import { linear } from 'mutate-animate'; +import { linear } from '@motajs/animate'; import { SetupComponentOptions } from '@motajs/system'; export interface InputProps extends DefaultProps, Partial { diff --git a/packages-user/client-base/src/components/scroll.tsx b/packages-user/client-base/src/components/scroll.tsx index 74fb21f..809af86 100644 --- a/packages-user/client-base/src/components/scroll.tsx +++ b/packages-user/client-base/src/components/scroll.tsx @@ -26,7 +26,7 @@ import { IRenderItem, ICustomContainer } from '@motajs/render'; -import { hyper, linear, Transition } from 'mutate-animate'; +import { cosh, linear, Transition } from '@motajs/animate'; import { clamp } from 'lodash-es'; // @ts-expect-error render/use.ts 按 D-54 留在实现层，本文件已移入系统层，按 D-68 暂以标注记录，不反向引用、不解耦 import { transitioned } from '../use'; @@ -148,7 +148,7 @@ export const Scroll = defineComponent( const transition = new Transition(); transition.value.scroll = 0; transition.value.showScroll = 0; - transition.mode(hyper('sin', 'out')).absolute(); + transition.mode(cosh('sin', 'out')).absolute(); //#region 滚动操作 diff --git a/packages-user/client-base/src/components/tip.tsx b/packages-user/client-base/src/components/tip.tsx index 33dd7ad..403f0ba 100644 --- a/packages-user/client-base/src/components/tip.tsx +++ b/packages-user/client-base/src/components/tip.tsx @@ -3,7 +3,7 @@ import { logger } from '@motajs/common'; import { computed, defineComponent, onUnmounted, ref } from 'vue'; // @ts-expect-error render/use.ts 按 D-54 留在实现层，本文件已移入系统层，按 D-68 暂以标注记录，不反向引用、不解耦 import { transitioned } from '../use'; -import { hyper } from 'mutate-animate'; +import { cosh } from '@motajs/animate'; import { debounce } from 'lodash-es'; import { texture } from '../elements'; import { SetupComponentOptions } from '@motajs/system'; @@ -45,7 +45,7 @@ export const Tip = defineComponent((props, { expose }) => { const font = new Font('normal'); - const alpha = transitioned(0, 500, hyper('sin', 'in-out'))!; + const alpha = transitioned(0, 500, cosh())!; const pad = computed(() => props.pad ?? [4, 4]); const locHeight = computed(() => props.loc[3] ?? 200); const hidden = computed(() => alpha.ref.value === 0); diff --git a/packages-user/client-base/src/map/extension/door.ts b/packages-user/client-base/src/map/extension/door.ts index 84359ff..fc93e17 100644 --- a/packages-user/client-base/src/map/extension/door.ts +++ b/packages-user/client-base/src/map/extension/door.ts @@ -5,7 +5,7 @@ import { } from '@user/data-base'; import { IMapDoorRenderer } from './types'; import { IMapRenderer } from '../types'; -import { sleep } from 'mutate-animate'; +import { sleep } from '@motajs/common'; import { DOOR_ANIMATE_INTERVAL } from '../../shared'; export class MapDoorRenderer implements IMapDoorRenderer { diff --git a/packages-user/client-modules/src/action/move.ts b/packages-user/client-modules/src/action/move.ts index 976bd94..4631f79 100644 --- a/packages-user/client-modules/src/action/move.ts +++ b/packages-user/client-modules/src/action/move.ts @@ -1,183 +1,185 @@ -import { KeyCode } from '@motajs/client-base'; -import { Hotkey, HotkeyData } from '@motajs/system'; -// @ts-expect-error 需要重构 -import { HeroMover, IMoveController } from '@user/data-state'; -import { Ticker } from 'mutate-animate'; -import { mainScope } from './hotkey'; +// TODO: 需要重构 +// import { KeyCode } from '@motajs/client-base'; +// import { Hotkey, HotkeyData } from '@motajs/system'; +// // @ts-expect-error 需要重构 +// import { HeroMover, IMoveController } from '@user/data-state'; +// import { mainScope } from './hotkey'; -type MoveKey = Record; -type MoveKeyConfig = Record; +// type MoveKey = Record; +// type MoveKeyConfig = Record; -export class HeroKeyMover { - /** 当前按下的键 */ - private pressedKey: Set = new Set(); - /** 当前的移动方向 */ - private moveDir: Dir = 'down'; - /** 当前是否正在使用按键移动 */ - private moving: boolean = false; - /** 当前移动的控制器 */ - private controller?: IMoveController; +// export class HeroKeyMover { +// /** 当前按下的键 */ +// private pressedKey: Set = new Set(); +// /** 当前的移动方向 */ +// private moveDir: Dir = 'down'; +// /** 当前是否正在使用按键移动 */ +// private moving: boolean = false; +// /** 当前移动的控制器 */ +// private controller?: IMoveController; - /** 按键接续ticker */ - private ticker = new Ticker(); +// /** 按键接续ticker */ +// private ticker = new Ticker(); - /** 当前移动实例绑定的热键 */ - hotkey: Hotkey; - /** 当前热键的移动按键信息 */ - hotkeyData: MoveKey; - /** 移动实例 */ - mover: HeroMover; - /** 移动可触发的作用域 */ - scope: symbol = mainScope; +// /** 当前移动实例绑定的热键 */ +// hotkey: Hotkey; +// /** 当前热键的移动按键信息 */ +// hotkeyData: MoveKey; +// /** 移动实例 */ +// mover: HeroMover; +// /** 移动可触发的作用域 */ +// scope: symbol = mainScope; - constructor(hotkey: Hotkey, mover: HeroMover, config?: MoveKeyConfig) { - this.hotkey = hotkey; - this.mover = mover; - hotkey.on('press', this.onPressKey); - hotkey.on('release', this.onReleaseKey); +// constructor(hotkey: Hotkey, mover: HeroMover, config?: MoveKeyConfig) { +// this.hotkey = hotkey; +// this.mover = mover; +// hotkey.on('press', this.onPressKey); +// hotkey.on('release', this.onReleaseKey); - const data = hotkey.data; +// const data = hotkey.data; - this.hotkeyData = { - left: data[config?.left ?? 'moveLeft'], - right: data[config?.right ?? 'moveRight'], - up: data[config?.up ?? 'moveUp'], - down: data[config?.down ?? 'moveDown'] - }; +// this.hotkeyData = { +// left: data[config?.left ?? 'moveLeft'], +// right: data[config?.right ?? 'moveRight'], +// up: data[config?.up ?? 'moveUp'], +// down: data[config?.down ?? 'moveDown'] +// }; - // 静止时尝试启动移动 - this.ticker.add(() => { - if (!this.moving) { - if (this.pressedKey.size > 0) { - const dir = [...this.pressedKey].at(-1); - if (!dir) return; - this.moveDir = dir; - this.tryStartMove(); - } - } - }); - } +// // 静止时尝试启动移动 +// this.ticker.add(() => { +// if (!this.moving) { +// if (this.pressedKey.size > 0) { +// const dir = [...this.pressedKey].at(-1); +// if (!dir) return; +// this.moveDir = dir; +// this.tryStartMove(); +// } +// } +// }); +// } - /** - * 按键移动 - * @param code 按键码 - */ - private onPressKey = (code: KeyCode) => { - if (core.isReplaying() || !core.isPlaying()) return; - core.waitHeroToStop(); - if (code === this.hotkeyData.left.key) this.press('left'); - else if (code === this.hotkeyData.right.key) this.press('right'); - else if (code === this.hotkeyData.up.key) this.press('up'); - else if (code === this.hotkeyData.down.key) this.press('down'); - }; +// /** +// * 按键移动 +// * @param code 按键码 +// */ +// private onPressKey = (code: KeyCode) => { +// if (core.isReplaying() || !core.isPlaying()) return; +// core.waitHeroToStop(); +// if (code === this.hotkeyData.left.key) this.press('left'); +// else if (code === this.hotkeyData.right.key) this.press('right'); +// else if (code === this.hotkeyData.up.key) this.press('up'); +// else if (code === this.hotkeyData.down.key) this.press('down'); +// }; - /** - * 释放按键 - * @param code 按键码 - */ - private onReleaseKey = (code: KeyCode) => { - if (code === this.hotkeyData.left.key) this.release('left'); - else if (code === this.hotkeyData.right.key) this.release('right'); - else if (code === this.hotkeyData.up.key) this.release('up'); - else if (code === this.hotkeyData.down.key) this.release('down'); - }; +// /** +// * 释放按键 +// * @param code 按键码 +// */ +// private onReleaseKey = (code: KeyCode) => { +// if (code === this.hotkeyData.left.key) this.release('left'); +// else if (code === this.hotkeyData.right.key) this.release('right'); +// else if (code === this.hotkeyData.up.key) this.release('up'); +// else if (code === this.hotkeyData.down.key) this.release('down'); +// }; - /** - * 设置按键触发作用域 - */ - setScope(scope: symbol) { - this.scope = scope; - } +// /** +// * 设置按键触发作用域 +// */ +// setScope(scope: symbol) { +// this.scope = scope; +// } - /** - * 按下某个方向键 - * @param dir 移动方向 - */ - press(dir: Dir) { - if (this.hotkey.scope !== this.scope || core.status.lockControl) return; - this.pressedKey.add(dir); - this.moveDir = dir; - if (!this.moving) { - this.tryStartMove(); - } - } +// /** +// * 按下某个方向键 +// * @param dir 移动方向 +// */ +// press(dir: Dir) { +// if (this.hotkey.scope !== this.scope || core.status.lockControl) return; +// this.pressedKey.add(dir); +// this.moveDir = dir; +// if (!this.moving) { +// this.tryStartMove(); +// } +// } - /** - * 松开方向键 - * @param dir 移动方向 - */ - release(dir: Dir) { - this.pressedKey.delete(dir); - if (this.pressedKey.size > 0) { - this.moveDir = [...this.pressedKey][0]; - } else { - this.endMove(); - } - } +// /** +// * 松开方向键 +// * @param dir 移动方向 +// */ +// release(dir: Dir) { +// this.pressedKey.delete(dir); +// if (this.pressedKey.size > 0) { +// this.moveDir = [...this.pressedKey][0]; +// } else { +// this.endMove(); +// } +// } - /** - * 尝试开始移动 - * @returns 是否成功开始移动 - */ - tryStartMove() { - if (this.moving || core.status.lockControl) return false; +// /** +// * 尝试开始移动 +// * @returns 是否成功开始移动 +// */ +// tryStartMove() { +// if (this.moving || core.status.lockControl) return false; - this.mover.oneStep(this.moveDir); - const controller = this.mover.startMove(false, false, false, true); - if (!controller) return false; +// this.mover.oneStep(this.moveDir); +// const controller = this.mover.startMove(false, false, false, true); +// if (!controller) return false; - this.controller = controller; - controller.onEnd.then(() => { - this.moving = false; - this.controller = void 0; - this.mover.off('stepEnd', this.onStepEnd); - }); - this.moving = true; +// this.controller = controller; +// controller.onEnd.then(() => { +// this.moving = false; +// this.controller = void 0; +// this.mover.off('stepEnd', this.onStepEnd); +// }); +// this.moving = true; - this.mover.on('stepEnd', this.onStepEnd); - return true; - } +// this.mover.on('stepEnd', this.onStepEnd); +// return true; +// } - /** - * 停止本次按键移动 - */ - endMove() { - this.controller?.stop(); - } +// /** +// * 停止本次按键移动 +// */ +// endMove() { +// this.controller?.stop(); +// } - /** - * 移动结束 - */ - private onStepEnd = () => { - const con = this.controller; - if (!con) return; +// /** +// * 移动结束 +// */ +// private onStepEnd = () => { +// const con = this.controller; +// if (!con) return; - // 被禁止操作时 - if (core.status.lockControl) { - con.stop(); - return; - } +// // 被禁止操作时 +// if (core.status.lockControl) { +// con.stop(); +// return; +// } - // 未移动时 - if (!this.moving) { - con.stop(); - return; - } +// // 未移动时 +// if (!this.moving) { +// con.stop(); +// return; +// } - // 尝试移动 - if (this.pressedKey.size > 0) { - if (con.queue.length === 0) { - con.push({ type: 'dir', value: this.moveDir }); - } - } else { - con.stop(); - } - }; +// // 尝试移动 +// if (this.pressedKey.size > 0) { +// if (con.queue.length === 0) { +// con.push({ type: 'dir', value: this.moveDir }); +// } +// } else { +// con.stop(); +// } +// }; - destroy() { - this.hotkey.off('press', this.onPressKey); - this.hotkey.off('release', this.onReleaseKey); - this.mover.off('stepEnd', this.onStepEnd); - this.ticker.destroy(); - } -} +// destroy() { +// this.hotkey.off('press', this.onPressKey); +// this.hotkey.off('release', this.onReleaseKey); +// this.mover.off('stepEnd', this.onStepEnd); +// this.ticker.destroy(); +// } +// } + +export {}; diff --git a/packages-user/entry-client/src/create.ts b/packages-user/entry-client/src/create.ts index 3dbdcc3..7b80179 100644 --- a/packages-user/entry-client/src/create.ts +++ b/packages-user/entry-client/src/create.ts @@ -7,7 +7,6 @@ import * as RenderVue from '@motajs/render-vue'; import * as System from '@motajs/system'; import * as UserClientBase from '@user/client-base'; import * as ClientModules from '@user/client-modules'; -import * as MutateAnimate from 'mutate-animate'; import * as Vue from 'vue'; import * as Lodash from 'lodash-es'; @@ -20,7 +19,6 @@ export function create() { Mota.register('@motajs/system', System); Mota.register('@user/client-base', UserClientBase); Mota.register('@user/client-modules', ClientModules); - Mota.register('MutateAnimate', MutateAnimate); Mota.register('Vue', Vue); Mota.register('Lodash', Lodash); } diff --git a/packages-user/entry-data/src/mota.ts b/packages-user/entry-data/src/mota.ts index f10da36..f58e491 100644 --- a/packages-user/entry-data/src/mota.ts +++ b/packages-user/entry-data/src/mota.ts @@ -13,7 +13,6 @@ import type * as DataBase from '@user/data-base'; import type * as DataSystem from '@user/data-system'; import type * as DataState from '@user/data-state'; // ---------- 必要的第三方库 -import type * as MutateAnimate from 'mutate-animate'; import type * as Vue from 'vue'; import type * as Lodash from 'lodash-es'; @@ -33,7 +32,6 @@ interface ModuleInterface { '@user/data-system': typeof DataSystem; '@user/data-state': typeof DataState; // ---------- 必要的第三方库 - MutateAnimate: typeof MutateAnimate; Vue: typeof Vue; Lodash: typeof Lodash; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20bf9fd..bbd8787 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -208,9 +208,6 @@ importers: maxrects-packer: specifier: ^2.7.3 version: 2.7.3 - mutate-animate: - specifier: ^1.4.2 - version: 1.4.2 ogg-opus-decoder: specifier: ^1.7.3 version: 1.7.3 @@ -4966,9 +4963,6 @@ packages: muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} - mutate-animate@1.4.2: - resolution: {integrity: sha512-Ioy3fMZ+lW3ua+BKsbfM8S8dCpGxKucVnM+Llq+rCuhnVrv8rOPXDJ2qe/vk5FemFFp9lmtw1QPsFNx8sE0VAA==} - nan@2.25.0: resolution: {integrity: sha512-0M90Ag7Xn5KMLLZ7zliPWP3rT90P6PN+IzVFS0VqmnPktBk3700xUVv8Ikm9EUaUE5SDWdp/BIxdENzVznpm1g==} @@ -11349,8 +11343,6 @@ snapshots: muggle-string@0.4.1: {} - mutate-animate@1.4.2: {} - nan@2.25.0: {} nanoid@3.3.11: {} diff --git a/src/client/ui/toolbox.tsx b/src/client/ui/toolbox.tsx index da929ac..26e5c21 100644 --- a/src/client/ui/toolbox.tsx +++ b/src/client/ui/toolbox.tsx @@ -1,6 +1,6 @@ import { GameUI, SetupComponentOptions } from '@motajs/system'; import { computed, defineComponent, ref } from 'vue'; -import { Font } from '@motajs/render'; +import { ElementLocator, Font } from '@motajs/render'; import { Scroll, TextContent } from '@user/client-base'; import { IHeroItemState, IHeroState } from '@user/data-base'; import { IHeroAttr } from '@user/data-common'; @@ -100,6 +100,11 @@ export const ToolBox = defineComponent(props => { /** 关闭当前道具栏界面 */ const exit = () => props.controller.close(props.instance); + /** 生成道具行的点击处理器，点击后按再点规则选中或使用该道具 */ + const getItemClick = (item: IHeroItemState) => () => { + clickItem(item); + }; + return () => { const current = selectedItem.value; return ( @@ -121,110 +126,102 @@ export const ToolBox = defineComponent(props => { fillStyle="gold" /> + {/* 每行行底、图标、名称与数量，直接作为 Scroll 子项 */} {permItems.value.map((item, i) => { + const y = i * ROW_HEIGHT; const isSelected = item.num === selected.value; - return ( - clickItem(item)} - > - - - - - - ); + onClick={getItemClick(item)} + />, + , + , + + ]; })} + {/* 每行行底、图标、名称与数量，直接作为 Scroll 子项 */} {consItems.value.map((item, i) => { + const y = i * ROW_HEIGHT; const isSelected = item.num === selected.value; - return ( - clickItem(item)} - > - - - - - - ); + onClick={getItemClick(item)} + />, + , + , + + ]; })} {/* 道具名称 */} @@ -236,28 +233,25 @@ export const ToolBox = defineComponent(props => { fillStyle="gold" /> {/* 道具说明 */} +