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

src/core/render/item.ts

@@ -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] = {

src/core/render/render.ts

@@ -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`
             );

src/module/render/components/scroll.tsx

@@ -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 =
+            if (direction.value === ScrollDirection.Horizontal) {
-                (height.value - scrollLength) * (contentTarget / max);
+                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) => {
+        const getPos = (ev: IActionEvent, absolute: boolean = false) => {
-            if (direction.value === ScrollDirection.Horizontal) {
+            if (absolute) {
-                return ev.offsetX;
+                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;
+            const movement = pos - downPos;
-
+            scrollTo(contentBefore - movement, 0);
-            scrollTo(contentTarget - movement, 0);
-            lastPos = pos;
         };
 
         /** 最初滚动条在哪 */
@@ -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;
+            if (ev.identifier !== scrollIdentifier || scrollMutate) return;
-            const pos = getPos(ev);
+            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}

src/module/render/ui/statusBar.tsx

@@ -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>