diff --git a/src/core/render/item.ts b/src/core/render/item.ts index f81562c..bc292bf 100644 --- a/src/core/render/item.ts +++ b/src/core/render/item.ts @@ -821,6 +821,7 @@ export abstract class RenderItem : this._transform; if (!tran) return null; const [nx, ny] = this.calActionPosition(event, tran); + const inElement = this.isActionInElement(nx, ny); // 在元素范围内,执行事件 const newEvent: ActionEventMap[T] = { diff --git a/src/core/render/render.ts b/src/core/render/render.ts index 1fd8661..f979229 100644 --- a/src/core/render/render.ts +++ b/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}">\n`; + return `${' '.repeat(deep * space)}<${name} id="${item.id}" type="${item.type}"${item.hidden ? ' hidden' : ''}>\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)}\n` ); diff --git a/src/module/render/components/scroll.tsx b/src/module/render/components/scroll.tsx index 4439069..0f37338 100644 --- a/src/module/render/components/scroll.tsx +++ b/src/module/render/components/scroll.tsx @@ -148,8 +148,13 @@ export const Scroll = defineComponent( 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( max = rect.bottom; } } + getArea(v, rect); v.on('transform', onTransform); listenedChild.add(v); checkItem(v); @@ -326,20 +332,31 @@ export const Scroll = defineComponent( } }; - 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( 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( 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( }; 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( return ( >( return ( - +