mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-08-02 23:01:47 +08:00
685 lines
20 KiB
TypeScript
685 lines
20 KiB
TypeScript
import { DefaultProps, ElementLocator, GraphicPropsBase } from '@motajs/render';
|
|
import { SetupComponentOptions } from '@motajs/system-ui';
|
|
import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue';
|
|
|
|
export interface IconsProps extends DefaultProps<GraphicPropsBase> {
|
|
loc: ElementLocator;
|
|
}
|
|
|
|
const iconsProps = {
|
|
props: ['loc']
|
|
} satisfies SetupComponentOptions<IconsProps>;
|
|
|
|
type PathGenerator = (width: number, height: number) => Path2D;
|
|
/**
|
|
* @param ox 横向偏移坐标
|
|
* @param oy 纵向偏移坐标
|
|
* @param width 路径宽度
|
|
* @param height 路径高度
|
|
*/
|
|
type PathFn = (ox: number, oy: number, width: number, height: number) => Path2D;
|
|
|
|
function adjustPath(
|
|
aspect: number,
|
|
ref: Ref<Path2D | undefined>,
|
|
fn: PathFn
|
|
): PathGenerator {
|
|
let beforeWidth = 200;
|
|
let beforeHeight = 200;
|
|
let path: Path2D | undefined;
|
|
return (width, height) => {
|
|
if (width === beforeWidth && height === beforeHeight && path) {
|
|
return path;
|
|
}
|
|
beforeWidth = width;
|
|
beforeHeight = height;
|
|
const eleAspect = width / height;
|
|
let ox = 0;
|
|
let oy = 0;
|
|
let dw = 0;
|
|
let dh = 0;
|
|
if (aspect >= eleAspect) {
|
|
ox = 0;
|
|
dw = width;
|
|
dh = width / aspect;
|
|
oy = (height - dh) / 2;
|
|
} else {
|
|
oy = 0;
|
|
dh = height;
|
|
dw = height * aspect;
|
|
ox = (width - dw) / 2;
|
|
}
|
|
path = fn(ox, oy, dw, dh);
|
|
ref.value = path;
|
|
return path;
|
|
};
|
|
}
|
|
|
|
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(1, path, (ox, oy, width, height) => {
|
|
const path = new Path2D();
|
|
const arc = width / 10;
|
|
const arrow = width / 10;
|
|
const left = ox + width / 10;
|
|
const top = oy + height / 5;
|
|
const right = ox + width - width / 10;
|
|
const bottom = oy + height - height / 5;
|
|
const end = left + width / 4;
|
|
path.moveTo(left, bottom);
|
|
path.lineTo(right - arc, bottom);
|
|
path.arcTo(right, bottom, right, bottom - arc, arc);
|
|
path.lineTo(right, top + arc);
|
|
path.arcTo(right, top, right - arc, top, arc);
|
|
path.lineTo(end, top);
|
|
path.moveTo(end + arrow, top - arrow);
|
|
path.lineTo(end, top);
|
|
path.lineTo(end + arrow, top + arrow);
|
|
path.moveTo(left, top);
|
|
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 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 arc = width / 10;
|
|
const arrow = width / 10;
|
|
const left = ox + width / 10;
|
|
const top = oy + height / 5;
|
|
const right = ox + width - width / 10;
|
|
const bottom = oy + height - height / 5;
|
|
const end = left + width / 2;
|
|
path.moveTo(end, bottom);
|
|
path.lineTo(left + arc, bottom);
|
|
path.arcTo(left, bottom, left, bottom - arc, arc);
|
|
path.lineTo(left, top + arc);
|
|
path.arcTo(left, top, left + arc, top, arc);
|
|
path.lineTo(right, top);
|
|
path.moveTo(right - arrow, top - arrow);
|
|
path.lineTo(right, top);
|
|
path.lineTo(right - arrow, top + arrow);
|
|
path.moveTo(left, top);
|
|
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 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 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;
|
|
});
|
|
|
|
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 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;
|
|
const end = (Math.PI * 12) / 18;
|
|
path.ellipse(cx, cy, rx, ry, 0, start, end);
|
|
path.lineTo(left - width / 24, bottom - height / 36);
|
|
path.closePath();
|
|
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 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 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);
|
|
path.lineTo(left + arc, top);
|
|
path.arcTo(left, top, left, top + arc, arc);
|
|
path.lineTo(left, cy);
|
|
path.moveTo(left + arc, cy - arc);
|
|
path.lineTo(left, cy);
|
|
path.lineTo(left - arc, cy - arc);
|
|
path.moveTo(left, cy + height / 8);
|
|
path.lineTo(left, bottom - arc);
|
|
path.arcTo(left, bottom, left + arc, bottom, arc);
|
|
path.lineTo(right - arc, bottom);
|
|
path.arcTo(right, bottom, right, bottom - arc, arc);
|
|
path.lineTo(right, cy);
|
|
path.moveTo(right - arc, cy + arc);
|
|
path.lineTo(right, cy);
|
|
path.lineTo(right + arc, cy + arc);
|
|
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 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 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;
|
|
});
|
|
|
|
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 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;
|
|
});
|
|
|
|
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 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;
|
|
});
|
|
|
|
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 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);
|
|
path.closePath();
|
|
path2.moveTo(cx, top + height / 12);
|
|
path2.lineTo(right, cy);
|
|
path2.lineTo(cx, bottom - height / 12);
|
|
path2.closePath();
|
|
path.addPath(path2);
|
|
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
|
|
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 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();
|
|
path2.moveTo(right, top);
|
|
path2.lineTo(right, bottom);
|
|
path.addPath(path2);
|
|
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
|
|
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 left = ox + width / 8;
|
|
const top = oy + height / 5;
|
|
const bottom = oy + height - height / 5;
|
|
path.moveTo(left, height / 2 - height / 10);
|
|
path.lineTo(left, height / 2 + height / 10);
|
|
path.lineTo(left + width / 6, height / 2 + height / 10);
|
|
path.lineTo(width / 2, bottom);
|
|
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(
|
|
width / 2 + (Math.SQRT1_2 * width) / 6,
|
|
height / 2 - (Math.SQRT1_2 * width) / 6
|
|
);
|
|
path.arc(cx, cy, width / 6, start, end);
|
|
path.moveTo(
|
|
width / 2 + (Math.SQRT1_2 * width) / 3,
|
|
height / 2 - (Math.SQRT1_2 * width) / 3
|
|
);
|
|
path.arc(cx, cy, width / 3, start, end);
|
|
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 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 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);
|
|
path.lineTo(left, top);
|
|
path.moveTo(left, top + height / 8);
|
|
path.lineTo(left, top);
|
|
path.lineTo(left + width / 8, top);
|
|
|
|
// 右上
|
|
path.moveTo(right - width / 6, top + height / 6);
|
|
path.lineTo(right, top);
|
|
path.moveTo(right, top + height / 8);
|
|
path.lineTo(right, top);
|
|
path.lineTo(right - width / 8, top);
|
|
|
|
// 左下
|
|
path.moveTo(left + width / 6, bottom - height / 6);
|
|
path.lineTo(left, bottom);
|
|
path.moveTo(left, bottom - height / 8);
|
|
path.lineTo(left, bottom);
|
|
path.lineTo(left + width / 8, bottom);
|
|
|
|
// 右下
|
|
path.moveTo(right - width / 6, bottom - height / 6);
|
|
path.lineTo(right, bottom);
|
|
path.moveTo(right, bottom - height / 8);
|
|
path.lineTo(right, bottom);
|
|
path.lineTo(right - width / 8, bottom);
|
|
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 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 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);
|
|
path.lineTo(left, top);
|
|
path.moveTo(left + width / 24, top + height / 6);
|
|
path.lineTo(left + width / 6, top + height / 6);
|
|
path.lineTo(left + width / 6, top + height / 24);
|
|
|
|
// 右上
|
|
path.moveTo(right - width / 6, top + height / 6);
|
|
path.lineTo(right, top);
|
|
path.moveTo(right - width / 24, top + height / 6);
|
|
path.lineTo(right - width / 6, top + height / 6);
|
|
path.lineTo(right - width / 6, top + height / 24);
|
|
|
|
// 左下
|
|
path.moveTo(left + width / 6, bottom - height / 6);
|
|
path.lineTo(left, bottom);
|
|
path.moveTo(left + width / 24, bottom - height / 6);
|
|
path.lineTo(left + width / 6, bottom - height / 6);
|
|
path.lineTo(left + width / 6, bottom - height / 24);
|
|
|
|
// 右下
|
|
path.moveTo(right - width / 6, bottom - height / 6);
|
|
path.lineTo(right, bottom);
|
|
path.moveTo(right - width / 24, bottom - height / 6);
|
|
path.lineTo(right - width / 6, bottom - height / 6);
|
|
path.lineTo(right - width / 6, bottom - height / 24);
|
|
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);
|