AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-04-11 15:47:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Scroll 组件的点击位置问题

Browse Source
This commit is contained in:
unanmed 2025-02-22 15:31:08 +08:00
parent 1e8600c080
commit 36f847f4a8
4 changed files with 38 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/render/item.ts
View File

@ -821,6 +821,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
: this._transform;
if (!tran) return null;
const [nx, ny] = this.calActionPosition(event, tran);
const inElement = this.isActionInElement(nx, ny);
// 在元素范围内，执行事件
const newEvent: ActionEventMap[T] = {

5
src/core/render/render.ts
View File

@ -250,6 +250,7 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
const id = this.getMouseIdentifier(type, mouse);
const x = event.offsetX / core.domStyle.scale;
const y = event.offsetY / core.domStyle.scale;
return {
target: this,
identifier: id,
@ -463,10 +464,10 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
private toTagString(item: RenderItem, space: number, deep: number): string {
const name = item.constructor.name;
if (item.children.size === 0) {
return `${' '.repeat(deep * space)}<${name} id="${item.id}" type="${item.type}"></${name}>\n`;
return `${' '.repeat(deep * space)}<${name} id="${item.id}" type="${item.type}"${item.hidden ? ' hidden' : ''}></${name}>\n`;
} else {
return (
`${' '.repeat(deep * space)}<${name} id="${item.id}" type="${item.type}">\n` +
`${' '.repeat(deep * space)}<${name} id="${item.id}" type="${item.type}" ${item.hidden ? 'hidden' : ''}>\n` +
`${[...item.children].map(v => this.toTagString(v, space, deep + 1)).join('')}` +
`${' '.repeat(deep * space)}</${name}>\n`
);

50
src/module/render/components/scroll.tsx
View File

@ -148,8 +148,13 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
const max = maxLength - height.value;
const target = clamp(y, 0, max);
contentTarget = target;
scrollTarget =
(height.value - scrollLength) * (contentTarget / max);
if (direction.value === ScrollDirection.Horizontal) {
scrollTarget =
(width.value - scrollLength) * (contentTarget / max);
} else {
scrollTarget =
(height.value - scrollLength) * (contentTarget / max);
}
transition.time(time).transition('scroll', scrollTarget);
transition.time(time).transition('showScroll', target);
};
@ -246,6 +251,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
max = rect.bottom;
}
}
getArea(v, rect);
v.on('transform', onTransform);
listenedChild.add(v);
checkItem(v);
@ -326,20 +332,31 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
}
};
const getPos = (ev: IActionEvent) => {
if (direction.value === ScrollDirection.Horizontal) {
return ev.offsetX;
const getPos = (ev: IActionEvent, absolute: boolean = false) => {
if (absolute) {
if (direction.value === ScrollDirection.Horizontal) {
return ev.absoluteX;
} else {
return ev.absoluteY;
}
} else {
return ev.offsetY;
if (direction.value === ScrollDirection.Horizontal) {
return ev.offsetX;
} else {
return ev.offsetY;
}
}
};
let identifier = -2;
let lastPos = 0;
let downPos = 0;
/** 拖动内容时，内容原本所在的位置 */
let contentBefore = 0;
const down = (ev: IActionEvent) => {
identifier = ev.identifier;
lastPos = getPos(ev);
downPos = getPos(ev, true);
contentBefore = contentTarget;
};
const move = (ev: IActionEvent) => {
@ -354,10 +371,8 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
return;
}
}
const movement = pos - lastPos;
scrollTo(contentTarget - movement, 0);
lastPos = pos;
const movement = pos - downPos;
scrollTo(contentBefore - movement, 0);
};
/** 最初滚动条在哪 */
@ -385,10 +400,11 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
const downScroll = (ev: IActionEvent) => {
scrollBefore = contentTarget;
scrollIdentifier = ev.identifier;
const pos = getPos(ev);
const pos = getPos(ev, true);
// 计算点击在了滚动条的哪个位置
const offsetPos = getPos(ev);
const sEnd = scrollPos + scrollLength;
if (pos >= scrollPos && pos <= sEnd) {
if (offsetPos >= scrollPos && offsetPos <= sEnd) {
scrollDownPos = pos - scrollPos;
scrollMutate = false;
scrollPin = getScrollPin(ev);
@ -398,8 +414,8 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
};
const moveScroll = (ev: IActionEvent) => {
if (ev.identifier !== scrollIdentifier) return;
const pos = getPos(ev);
if (ev.identifier !== scrollIdentifier || scrollMutate) return;
const pos = getPos(ev, true);
const scrollPos = pos - scrollDownPos;
let deltaPin = 0;
let threshold = 0;
@ -451,7 +467,7 @@ export const Scroll = defineComponent<ScrollProps, {}, string, ScrollSlots>(
return (
<container loc={props.loc} onWheel={wheel}>
<container-custom
loc={props.loc}
loc={[0, 0, props.loc[2], props.loc[3]]}
ref={content}
onDown={down}
render={renderContent}

2
src/module/render/ui/statusBar.tsx
View File

@ -169,7 +169,7 @@ export const RightStatusBar = defineComponent<StatusBarProps<IRightHeroStatus>>(
return (
<container loc={p.loc}>
<g-rect loc={[0, 0, p.loc[2], p.loc[3]]} stroke></g-rect>
<Scroll loc={[0, 0, 180, 100]}>
<Scroll loc={[0, 100, 180, 100]}>
<text text="测试1" loc={[0, 0]}></text>
<text text="测试2" loc={[0, 50]}></text>
<text text="测试3" loc={[0, 100]}></text>