Merge 1a8b1f9a0e into 820dc5bf4c

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

@@ -1,14 +1,6 @@
 import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
 import { SetupComponentOptions } from '@motajs/system-ui';
-import {
-    computed,
-    defineComponent,
-    DefineSetupFnComponent,
-    onMounted,
-    Ref,
-    shallowRef,
-    watch
-} from 'vue';
+import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue';
 
 export interface IconsProps extends DefaultProps<GraphicPropsBase> {
     loc: ElementLocator;
@@ -19,53 +11,14 @@ const iconsProps = {
 } satisfies SetupComponentOptions<IconsProps>;
 
 type PathGenerator = (width: number, height: number) => Path2D;
-type PadFn = (
-    divisor: number
-) => [left: number, right: number, top: number, bottom: number];
-type IconLoc = [
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    cx: number,
-    cy: number
-];
-
 /**
- * @param loc 图标位置信息
- * @param pad 计算图标外围填充
+ * @param ox 横向偏移坐标
+ * @param oy 纵向偏移坐标
+ * @param width 路径宽度
+ * @param height 路径高度
  */
-type PathFn = (loc: IconLoc, pad: PadFn) => Path2D;
+type PathFn = (ox: number, oy: number, width: number, height: number) => Path2D;
 
-/**
- * 适配填充
- * @param x 左上角横坐标
- * @param y 左上角纵坐标
- * @param width 矩形宽度
- * @param height 矩形高度
- * @param divisor 填充除数，例如左边缘会变成 `x + width / divisor`
- */
-function pad(
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    divisor: number
-): [left: number, right: number, top: number, bottom: number] {
-    return [
-        x + width / divisor, // left
-        x + width - width / divisor, // right
-        y + height / divisor, // top
-        y + height - height / divisor // bottom
-    ];
-}
-
-/**
- * 适配图标路径生成
- * @param aspect 宽高比
- * @param ref 路径响应式对象
- * @param fn 路径定义函数
- */
 function adjustPath(
     aspect: number,
     ref: Ref<Path2D | undefined>,
@@ -96,57 +49,19 @@ function adjustPath(
             dw = height * aspect;
             ox = (width - dw) / 2;
         }
-        const cx = ox + dw / 2;
-        const cy = oy + dh / 2;
-        path = fn([ox, oy, dw, dh, cx, cy], divisor =>
-            pad(ox, oy, dw, dh, divisor)
-        );
+        path = fn(ox, oy, dw, dh);
         ref.value = path;
         return path;
     };
 }
 
-/**
- * 定义一个描边图标
- * @param aspect 图标的宽高比
- * @param pathDef 图标的路径定义函数
- * @param props 图标组件定义的参数配置
- */
-export function defineIcon<T extends IconsProps>(
-    aspect: number,
-    pathDef: PathFn,
-    props: SetupComponentOptions<T> = iconsProps
-): DefineSetupFnComponent<T> {
-    return defineComponent<T>(props => {
-        const path = shallowRef<Path2D>();
+export const RollbackIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
 
     const width = computed(() => props.loc[2] ?? 200);
     const height = computed(() => props.loc[3] ?? 200);
-        const generatePath = adjustPath(aspect, path, pathDef);
-
-        watch(props, () => {
-            generatePath(width.value, height.value);
-        });
-
-        onMounted(() => {
-            generatePath(width.value, height.value);
-        });
-
-        return () => (
-            <g-path
-                loc={props.loc}
-                path={path.value}
-                stroke
-                lineJoin="round"
-                lineCap="round"
-            ></g-path>
-        );
-    }, props);
-}
-
-export const RollbackIcon = defineIcon(1, loc => {
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [ox, oy, width, height] = loc;
         const arc = width / 10;
         const arrow = width / 10;
         const left = ox + width / 10;
@@ -165,11 +80,36 @@ export const RollbackIcon = defineIcon(1, loc => {
         path.lineTo(end + arrow, top + arrow);
         path.moveTo(left, top);
         return path;
-});
+    });
 
-export const RetweetIcon = defineIcon(1, loc => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const RetweetIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [ox, oy, width, height] = loc;
         const arc = width / 10;
         const arrow = width / 10;
         const left = ox + width / 10;
@@ -188,24 +128,83 @@ export const RetweetIcon = defineIcon(1, loc => {
         path.lineTo(right - arrow, top + arrow);
         path.moveTo(left, top);
         return path;
-});
+    });
 
-export const ViewMapIcon = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const ViewMapIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , , , cx, cy] = loc;
-    const [left, right, top, bottom] = pad(5);
+        const left = ox + width / 5;
+        const top = oy + height / 5;
+        const right = ox + width - width / 5;
+        const bottom = oy + height - height / 5;
+        const cx = ox + width / 2;
+        const cy = oy + height / 2;
         path.rect(left, top, right - left, bottom - top);
         path.moveTo(cx, top);
         path.lineTo(cx, bottom);
         path.moveTo(left, cy);
         path.lineTo(right, cy);
-    return path;
-});
 
-export const DanmakuIcon = defineIcon(1, (loc, pad) => {
+        return path;
+    });
+
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const DanmakuIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , width, height, cx, cy] = loc;
-    const [left, , , bottom] = pad(5);
+        const left = ox + width / 5;
+        const bottom = oy + height - height / 5;
+        const cx = ox + width / 2;
+        const cy = oy + height / 2;
         const rx = width / 3;
         const ry = height / 4;
         const start = (Math.PI * 16) / 18;
@@ -214,13 +213,42 @@ export const DanmakuIcon = defineIcon(1, (loc, pad) => {
         path.lineTo(left - width / 24, bottom - height / 36);
         path.closePath();
         return path;
-});
+    });
 
-export const ReplayIcon = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const ReplayIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , width, height, , cy] = loc;
-    const [left, right, top, bottom] = pad(5);
         const arc = width / 10;
+        const left = ox + width / 5;
+        const top = oy + height / 5;
+        const right = ox + width - width / 5;
+        const bottom = oy + height - height / 5;
+        const cy = oy + height / 2;
         path.moveTo(right, cy - height / 8);
         path.lineTo(right, top + arc);
         path.arcTo(right, top, right - arc, top, arc);
@@ -240,46 +268,162 @@ export const ReplayIcon = defineIcon(1, (loc, pad) => {
         path.lineTo(right, cy);
         path.lineTo(right + arc, cy + arc);
         return path;
-});
+    });
 
-export const NumpadIcon = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const NumpadIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , width, height, cx, cy] = loc;
-    const [left, right, top, bottom] = pad(5);
+        const left = ox + width / 5;
+        const top = oy + height / 5;
+        const right = ox + width - width / 5;
+        const bottom = oy + height - height / 5;
+        const cx = ox + width / 2;
+        const cy = oy + height / 2;
         path.rect(left, top, right - left, bottom - top);
         const path2 = new Path2D();
         path2.ellipse(cx, cy, width / 9, height / 6, 0, 0, Math.PI * 2);
         path.addPath(path2);
         return path;
-});
+    });
 
-export const PlayIcon = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const PlayIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, oy, , height] = loc;
-    const [left, right, top, bottom] = pad(5);
+        const left = ox + width / 5;
+        const top = oy + height / 5;
+        const right = ox + width - width / 5;
+        const bottom = oy + height - height / 5;
         path.moveTo(left, top);
         path.lineTo(right, oy + height / 2);
         path.lineTo(left, bottom);
         path.closePath();
         return path;
-});
+    });
 
-export const PauseIcon = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                fill
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const PauseIcon = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , width, , cx] = loc;
-    const [, , top, bottom] = pad(5);
+        const cx = ox + width / 2;
+        const top = oy + height / 5;
+        const bottom = oy + height - height / 5;
         path.moveTo(cx - width / 5, top);
         path.lineTo(cx - width / 5, bottom);
         path.moveTo(cx + width / 5, top);
         path.lineTo(cx + width / 5, bottom);
         return path;
-});
+    });
 
-export const DoubleArrow = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const DoubleArrow = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
         const path2 = new Path2D();
-    const [, , width, height, cx, cy] = loc;
-    const [left, right, top, bottom] = pad(5);
+        const left = ox + width / 5;
+        const top = oy + height / 5;
+        const right = ox + width - width / 5;
+        const bottom = oy + height - height / 5;
+        const cx = ox + width / 2;
+        const cy = oy + height / 2;
         path.moveTo(left, top + height / 12);
         path.lineTo(cx + width / 8, cy);
         path.lineTo(left, bottom - height / 12);
@@ -290,13 +434,42 @@ export const DoubleArrow = defineIcon(1, (loc, pad) => {
         path2.closePath();
         path.addPath(path2);
         return path;
-});
+    });
 
-export const StepForward = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                fill
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const StepForward = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
         const path2 = new Path2D();
-    const [, oy, , height] = loc;
-    const [left, right, top, bottom] = pad(5);
+        const left = ox + width / 5;
+        const top = oy + height / 5;
+        const right = ox + width - width / 5;
+        const bottom = oy + height - height / 5;
         path.moveTo(left, top);
         path.lineTo(right, oy + height / 2);
         path.lineTo(left, bottom);
@@ -305,11 +478,37 @@ export const StepForward = defineIcon(1, (loc, pad) => {
         path2.lineTo(right, bottom);
         path.addPath(path2);
         return path;
-});
+    });
 
-export const SoundVolume = defineIcon(1, loc => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                fill
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const SoundVolume = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [ox, oy, width, height, cx, cy] = loc;
         const left = ox + width / 8;
         const top = oy + height / 5;
         const bottom = oy + height - height / 5;
@@ -320,6 +519,8 @@ export const SoundVolume = defineIcon(1, loc => {
         path.lineTo(width / 2, top);
         path.lineTo(left + width / 6, height / 2 - height / 10);
         path.closePath();
+        const cx = width / 2;
+        const cy = height / 2;
         const start = -Math.PI / 4;
         const end = Math.PI / 4;
         path.moveTo(
@@ -333,12 +534,40 @@ export const SoundVolume = defineIcon(1, loc => {
         );
         path.arc(cx, cy, width / 3, start, end);
         return path;
-});
+    });
 
-export const Fullscreen = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const Fullscreen = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , width, height] = loc;
-    const [left, right, top, bottom] = pad(4);
+        const left = ox + width / 4;
+        const right = ox + width - width / 4;
+        const top = oy + height / 4;
+        const bottom = oy + height - height / 4;
 
         // 左上
         path.moveTo(left + width / 6, top + height / 6);
@@ -368,12 +597,40 @@ export const Fullscreen = defineIcon(1, (loc, pad) => {
         path.lineTo(right, bottom);
         path.lineTo(right - width / 8, bottom);
         return path;
-});
+    });
 
-export const ExitFullscreen = defineIcon(1, (loc, pad) => {
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
+
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
+
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);
+
+export const ExitFullscreen = defineComponent<IconsProps>(props => {
+    const path = ref<Path2D>();
+
+    const width = computed(() => props.loc[2] ?? 200);
+    const height = computed(() => props.loc[3] ?? 200);
+    const generatePath = adjustPath(1, path, (ox, oy, width, height) => {
         const path = new Path2D();
-    const [, , width, height] = loc;
-    const [left, right, top, bottom] = pad(4);
+        const left = ox + width / 4;
+        const right = ox + width - width / 4;
+        const top = oy + height / 4;
+        const bottom = oy + height - height / 4;
 
         // 左上
         path.moveTo(left + width / 6, top + height / 6);
@@ -403,48 +660,25 @@ export const ExitFullscreen = defineIcon(1, (loc, pad) => {
         path.lineTo(right - width / 6, bottom - height / 6);
         path.lineTo(right - width / 6, bottom - height / 24);
         return path;
-});
+    });
 
-export const ArrowLeftTailless = defineIcon(1, (loc, pad) => {
-    const path = new Path2D();
-    const [, , width] = loc;
-    const [left, right, top, bottom] = pad(4);
+    watch(props, () => {
+        generatePath(width.value, height.value);
+    });
 
-    path.moveTo(right, top);
-    path.lineTo(left + width / 4, (top + right) / 2);
-    path.lineTo(right, bottom);
-    return path;
-});
+    onMounted(() => {
+        generatePath(width.value, height.value);
+    });
 
-export const ArrowRightTailless = defineIcon(1, (loc, pad) => {
-    const path = new Path2D();
-    const [, , width] = loc;
-    const [left, right, top, bottom] = pad(4);
-
-    path.moveTo(left, top);
-    path.lineTo(right - width / 4, (top + right) / 2);
-    path.lineTo(left, bottom);
-    return path;
-});
-
-export const ArrowUpTailless = defineIcon(1, (loc, pad) => {
-    const path = new Path2D();
-    const [, , , height] = loc;
-    const [left, right, top, bottom] = pad(4);
-
-    path.moveTo(left, bottom);
-    path.lineTo((left + right) / 2, top + height / 4);
-    path.lineTo(right, bottom);
-    return path;
-});
-
-export const ArrowDownTailless = defineIcon(1, (loc, pad) => {
-    const path = new Path2D();
-    const [, , , height] = loc;
-    const [left, right, top, bottom] = pad(4);
-
-    path.moveTo(left, top);
-    path.lineTo((left + right) / 2, bottom - height / 4);
-    path.lineTo(right, top);
-    return path;
-});
+    return () => {
+        return (
+            <g-path
+                loc={props.loc}
+                path={path.value}
+                stroke
+                lineJoin="round"
+                lineCap="round"
+            ></g-path>
+        );
+    };
+}, iconsProps);

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

@@ -26,7 +26,6 @@ import { ExitFullscreen, Fullscreen, SoundVolume } from '../components';
 import { mainSetting, triggerFullscreen } from '@motajs/legacy-ui';
 import { saveLoad } from './save';
 import { MainSceneUI } from './main';
-import { adjustCover } from '../utils';
 
 const enum TitleButton {
     StartGame,
@@ -60,12 +59,19 @@ export const GameTitle = defineComponent<GameTitleProps>(props => {
     const bg = core.material.images.images['bg.webp'];
 
     //#region 计算背景图
-    const [width, height] = adjustCover(
-        bg.width,
-        bg.height,
-        MAIN_WIDTH,
-        MAIN_HEIGHT
-    );
+    const aspect = bg.width / bg.height;
+    const canvasAspect = MAIN_WIDTH / MAIN_HEIGHT;
+    const [width, height] = (() => {
+        if (canvasAspect > aspect) {
+            const width = MAIN_WIDTH;
+            const height = width / aspect;
+            return [width, height];
+        } else {
+            const height = MAIN_HEIGHT;
+            const width = height * aspect;
+            return [width, height];
+        }
+    })();
 
     //#region 标题设置
 

packages-user/client-modules/src/render/utils/layout.ts

@@ -57,30 +57,3 @@ export function adjustGrid(
         locs
     };
 }
-
-/**
- * 适配为覆盖模式，类似于 `object-fit: cover`
- * @param itemWidth 元素宽度
- * @param itemHeight 元素高度
- * @param targetWidth 目标宽度
- * @param targetHeight 目标高度
- * @returns 适配为覆盖模式后元素的宽高
- */
-export function adjustCover(
-    itemWidth: number,
-    itemHeight: number,
-    targetWidth: number,
-    targetHeight: number
-): Readonly<LocArr> {
-    const aspect = itemWidth / itemHeight;
-    const canvasAspect = targetWidth / targetHeight;
-    if (canvasAspect > aspect) {
-        const width = targetWidth;
-        const height = width / aspect;
-        return [width, height];
-    } else {
-        const height = targetHeight;
-        const width = height * aspect;
-        return [width, height];
-    }
-}