Merge branch 'dev' of https://github.com/unanmed/HumanBreak into dev

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

@@ -51,7 +51,7 @@ export const FloorSelector = defineComponent<
     const scrollRef = ref<ScrollExpose>();
 
     const floors = computed(() => props.floors.toReversed());
-    const floorId = computed(() => floors.value[now.value]);
+    const floorId = computed(() => props.floors[now.value]);
     const floorName = computed(() => core.floors[floorId.value].title);
 
     watch(

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

@@ -277,10 +277,10 @@ export const PauseIcon = defineIcon(1, (loc, pad) => {
 export const DoubleArrow = defineIcon(1, (loc, pad) => {
     const path = new Path2D();
     const path2 = new Path2D();
-    const [, , width, height, cx, cy] = loc;
+    const [, , , height, cx, cy] = loc;
     const [left, right, top, bottom] = pad(5);
     path.moveTo(left, top + height / 12);
-    path.lineTo(cx + width / 8, cy);
+    path.lineTo(cx, cy);
     path.lineTo(left, bottom - height / 12);
     path.closePath();
     path2.moveTo(cx, top + height / 12);

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

@@ -1,9 +1,10 @@
 import { EventEmitter } from 'eventemitter3';
 import { logger } from '@motajs/common';
-import { MotaOffscreenCanvas2D } from '@motajs/render-core';
+import { MotaOffscreenCanvas2D, RenderItem } from '@motajs/render-core';
 
 interface BlockCacherEvent {
     split: [];
+    beforeClear: [index: number];
 }
 
 interface BlockData {
@@ -307,9 +308,12 @@ export interface ICanvasCacheItem extends IBlockCacheable {
 
 export class CanvasCacheItem implements ICanvasCacheItem {
     constructor(
-        public canvas: MotaOffscreenCanvas2D,
-        public symbol: number
+        public readonly canvas: MotaOffscreenCanvas2D,
+        public readonly symbol: number,
+        public readonly element: RenderItem
     ) {}
 
-    destroy(): void {}
+    destroy(): void {
+        this.element.deleteCanvas(this.canvas);
+    }
 }

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

@@ -539,7 +539,7 @@ export class Damage extends RenderItem<EDamageEvent> {
             });
 
             ctx.drawImage(temp.canvas, px, py, size, size);
-            block.cache.set(v, new CanvasCacheItem(temp, temp.symbol));
+            block.cache.set(v, new CanvasCacheItem(temp, temp.symbol, this));
         });
         ctx.restore();
         // console.timeEnd('damage');

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

@@ -774,6 +774,7 @@ export class Layer extends Container<ELayerEvent> {
         const num = this.background;
 
         const data = texture.getRenderable(num);
+        this.backImage.forEach(v => this.deleteCanvas(v));
         this.backImage = [];
         if (!data) return;
 
@@ -800,6 +801,7 @@ export class Layer extends Container<ELayerEvent> {
 
             this.backImage.push(canvas);
         }
+        this.deleteCanvas(temp);
 
         for (const ex of this.extend.values()) {
             ex.onBackgroundGenerated?.(this, this.backImage);
@@ -1239,7 +1241,10 @@ export class Layer extends Container<ELayerEvent> {
                 blockSize * cell,
                 blockSize * cell
             );
-            this.block.cache.set(index, new CanvasCacheItem(temp, temp.symbol));
+            this.block.cache.set(
+                index,
+                new CanvasCacheItem(temp, temp.symbol, this)
+            );
         });
     }
 
@@ -1545,7 +1550,7 @@ export function createLayer() {
 
     hook.on('setBlock', (x, y, floor, block) => {
         const isNow = floor === core.status.floorId;
-        LayerGroupFloorBinder.activedBinder.forEach(v => {
+        LayerGroupFloorBinder.activeBinder.forEach(v => {
             if (floor === v.floor || (isNow && v.bindThisFloor)) {
                 v.setBlock('event', block, x, y);
             }
@@ -1561,7 +1566,7 @@ export function createLayer() {
     hook.on('changingFloor', floor => {
         // 潜在隐患：如果putRenderData改成异步，那么会变成两帧后才能真正刷新并渲染
         // 考虑到楼层转换一般不会同时执行很多次，因此这里改为立刻更新
-        LayerGroupFloorBinder.activedBinder.forEach(v => {
+        LayerGroupFloorBinder.activeBinder.forEach(v => {
             if (v.bindThisFloor) v.updateBindData();
             v.emit('floorChange', floor);
         });
@@ -1571,7 +1576,7 @@ export function createLayer() {
     });
     hook.on('setBgFgBlock', (name, number, x, y, floor) => {
         const isNow = floor === core.status.floorId;
-        LayerGroupFloorBinder.activedBinder.forEach(v => {
+        LayerGroupFloorBinder.activeBinder.forEach(v => {
             if (floor === v.floor || (isNow && v.bindThisFloor)) {
                 v.setBlock(name, number, x, y);
             }
@@ -1612,7 +1617,7 @@ export class LayerGroupFloorBinder
 
     private needUpdate: boolean = false;
 
-    static activedBinder: Set<LayerGroupFloorBinder> = new Set();
+    static activeBinder: Set<LayerGroupFloorBinder> = new Set();
 
     /**
      * 绑定楼层为当前楼层，并跟随变化
@@ -1698,7 +1703,7 @@ export class LayerGroupFloorBinder
         for (const layer of group.layers.values()) {
             this.checkLayerExtends(layer);
         }
-        LayerGroupFloorBinder.activedBinder.add(this);
+        LayerGroupFloorBinder.activeBinder.add(this);
     }
 
     onLayerAdd(_group: LayerGroup, layer: Layer): void {
@@ -1706,7 +1711,7 @@ export class LayerGroupFloorBinder
     }
 
     onDestroy(group: LayerGroup) {
-        LayerGroupFloorBinder.activedBinder.delete(this);
+        LayerGroupFloorBinder.activeBinder.delete(this);
         group.layers.forEach(v => {
             v.removeExtends('floor-binder');
         });

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

@@ -211,6 +211,7 @@ export class Winskin extends RenderItem<EWinskinEvent> {
             Winskin.patternMap.set(this.imageName, winskinPattern);
         }
         this.patternCache = winskinPattern;
+        this.deleteCanvas(pattern);
         return winskinPattern;
     }
 

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

@@ -48,6 +48,8 @@ export function createRender() {
 
 export * from './components';
 export * from './elements';
+export * from './fx';
+export * from './legacy';
 export * from './ui';
 export * from './utils';
 export * from './renderer';

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

@@ -5,3 +5,5 @@ export function createLegacy() {
     createGameCanvas();
     createShadow();
 }
+
+export * from './shadow';

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

@@ -25,6 +25,7 @@ import { saveSave, saveLoad } from './save';
 import { mainUIController } from './controller';
 import { MAIN_WIDTH, MAIN_HEIGHT } from '../shared';
 import { openSettings } from './settings';
+import { openViewMap } from './viewmap';
 
 interface ToolbarProps extends DefaultProps {
     loc?: ElementLocator;
@@ -110,9 +111,7 @@ export const PlayingToolbar = defineComponent<
     const redo = () => core.doSL('autoSave', 'reload');
     const numpad = () => emit('numpad');
     const view = () => {
-        if (core.isPlaying() && !core.isMoving() && !core.status.lockControl) {
-            core.ui._drawViewMaps();
-        }
+        openViewMap(mainUIController, [0, 0, MAIN_WIDTH, MAIN_HEIGHT]);
     };
     const danmaku = () => requestAnimationFrame(openDanmakuPoster);
     const replay = () => core.ui._drawReplay();
@@ -183,7 +182,9 @@ export const ReplayingToolbar = defineComponent<ReplayingProps>(props => {
     const speedDown = () => core.speedDownReplay();
     const speedUp = () => core.speedUpReplay();
     const book = () => core.openBook(true);
-    const save = () => core.save(true);
+    const save = () => {
+        saveSave(mainUIController, [0, 0, MAIN_WIDTH, MAIN_HEIGHT]);
+    };
     const view = () => {
         if (core.isPlaying() && !core.isMoving() && !core.status.lockControl) {
             core.ui._drawViewMaps();