From e6e8370da55800552fbbd08a252e033e103a3764 Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Mon, 16 Sep 2024 20:04:36 +0530 Subject: [PATCH 1/4] fix: drag handle scrolling fixed --- .../src/core/components/editors/document/page-renderer.tsx | 2 +- packages/editor/src/core/extensions/side-menu.tsx | 2 +- packages/editor/src/core/plugins/drag-handle.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx index d1ff3b3d014..b794f959fca 100644 --- a/packages/editor/src/core/components/editors/document/page-renderer.tsx +++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx @@ -131,7 +131,7 @@ export const PageRenderer = (props: IPageRenderer) => { return ( <> -
+
{ ai: aiEnabled, dragDrop: dragDropEnabled, }, - scrollThreshold: { up: 300, down: 100 }, + scrollThreshold: { up: 400, down: 200 }, }), ]; }, diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts index f8b258e8ad1..5bf94ade4e4 100644 --- a/packages/editor/src/core/plugins/drag-handle.ts +++ b/packages/editor/src/core/plugins/drag-handle.ts @@ -237,9 +237,9 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp const frameRenderer = document.querySelector(".frame-renderer"); if (!frameRenderer) return; if (e.clientY < options.scrollThreshold.up) { - frameRenderer.scrollBy({ top: -70, behavior: "smooth" }); + frameRenderer.scrollBy({ top: -150, behavior: "smooth" }); } else if (window.innerHeight - e.clientY < options.scrollThreshold.down) { - frameRenderer.scrollBy({ top: 70, behavior: "smooth" }); + frameRenderer.scrollBy({ top: 150, behavior: "smooth" }); } }); From d5dc593b724b113bf1a0373e7d7b699cf06ad8d0 Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Thu, 3 Oct 2024 16:31:42 +0530 Subject: [PATCH 2/4] fix: closest scrollable parent found and scrolled --- .../editor/src/core/plugins/drag-handle.ts | 43 +++++++++++++++++-- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts index 5bf94ade4e4..c932be81d47 100644 --- a/packages/editor/src/core/plugins/drag-handle.ts +++ b/packages/editor/src/core/plugins/drag-handle.ts @@ -232,17 +232,52 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp dragHandleElement.addEventListener("click", (e) => handleClick(e, view)); dragHandleElement.addEventListener("contextmenu", (e) => handleClick(e, view)); + const isScrollable = (node: HTMLElement | SVGElement) => { + if (!(node instanceof HTMLElement || node instanceof SVGElement)) { + return false; + } + const style = getComputedStyle(node); + return ["overflow", "overflow-x", "overflow-y"].some((propertyName) => { + const value = style.getPropertyValue(propertyName); + return value === "auto" || value === "scroll"; + }); + }; + + const getScrollParent = (node: HTMLElement | SVGElement) => { + let currentParent = node.parentElement; + while (currentParent) { + if (isScrollable(currentParent)) { + return currentParent; + } + currentParent = currentParent.parentElement; + } + return document.scrollingElement || document.documentElement; + }; + + // Usage in your existing code dragHandleElement.addEventListener("drag", (e) => { hideDragHandle(); - const frameRenderer = document.querySelector(".frame-renderer"); - if (!frameRenderer) return; + const scrollableParent = getScrollParent(dragHandleElement); + if (!scrollableParent) return; + if (e.clientY < options.scrollThreshold.up) { - frameRenderer.scrollBy({ top: -150, behavior: "smooth" }); + scrollableParent.scrollBy({ top: -70, behavior: "smooth" }); } else if (window.innerHeight - e.clientY < options.scrollThreshold.down) { - frameRenderer.scrollBy({ top: 150, behavior: "smooth" }); + scrollableParent.scrollBy({ top: 70, behavior: "smooth" }); } }); + // dragHandleElement.addEventListener("drag", (e) => { + // hideDragHandle(); + // const frameRenderer = document.querySelector(".frame-renderer"); + // if (!frameRenderer) return; + // if (e.clientY < options.scrollThreshold.up) { + // frameRenderer.scrollBy({ top: -70, behavior: "smooth" }); + // } else if (window.innerHeight - e.clientY < options.scrollThreshold.down) { + // frameRenderer.scrollBy({ top: 70, behavior: "smooth" }); + // } + // }); + hideDragHandle(); sideMenu?.appendChild(dragHandleElement); From fcc1eeecafa66168aef55a0bc4e23323b66bff9b Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Thu, 3 Oct 2024 16:32:50 +0530 Subject: [PATCH 3/4] fix: removed overflow auto from framerenderer --- .../src/core/components/editors/document/page-renderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx index b794f959fca..d1ff3b3d014 100644 --- a/packages/editor/src/core/components/editors/document/page-renderer.tsx +++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx @@ -131,7 +131,7 @@ export const PageRenderer = (props: IPageRenderer) => { return ( <> -
+
Date: Thu, 3 Oct 2024 17:27:51 +0530 Subject: [PATCH 4/4] fix: make dragging dynamic and smoother --- .../editor/src/core/extensions/side-menu.tsx | 2 +- .../editor/src/core/plugins/drag-handle.ts | 38 +++++++++---------- 2 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/editor/src/core/extensions/side-menu.tsx b/packages/editor/src/core/extensions/side-menu.tsx index 4ed47ce3ad4..72b8e9e44c7 100644 --- a/packages/editor/src/core/extensions/side-menu.tsx +++ b/packages/editor/src/core/extensions/side-menu.tsx @@ -42,7 +42,7 @@ export const SideMenuExtension = (props: Props) => { ai: aiEnabled, dragDrop: dragDropEnabled, }, - scrollThreshold: { up: 400, down: 200 }, + scrollThreshold: { up: 200, down: 100 }, }), ]; }, diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts index c932be81d47..809802b4f92 100644 --- a/packages/editor/src/core/plugins/drag-handle.ts +++ b/packages/editor/src/core/plugins/drag-handle.ts @@ -30,18 +30,19 @@ const createDragHandleElement = (): HTMLElement => { return dragHandleElement; }; -const nodeDOMAtCoords = (coords: { x: number; y: number }) => { +export const nodeDOMAtCoords = (coords: { x: number; y: number }) => { const elements = document.elementsFromPoint(coords.x, coords.y); const generalSelectors = [ "li", "p:not(:first-child)", ".code-block", "blockquote", - "img", "h1, h2, h3, h4, h5, h6", "[data-type=horizontalRule]", ".table-wrapper", ".issue-embed", + ".image-component", + ".image-upload-component", ].join(", "); for (const elem of elements) { @@ -237,7 +238,7 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp return false; } const style = getComputedStyle(node); - return ["overflow", "overflow-x", "overflow-y"].some((propertyName) => { + return ["overflow", "overflow-y"].some((propertyName) => { const value = style.getPropertyValue(propertyName); return value === "auto" || value === "scroll"; }); @@ -254,30 +255,27 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp return document.scrollingElement || document.documentElement; }; - // Usage in your existing code + const maxScrollSpeed = 100; + dragHandleElement.addEventListener("drag", (e) => { hideDragHandle(); const scrollableParent = getScrollParent(dragHandleElement); if (!scrollableParent) return; - - if (e.clientY < options.scrollThreshold.up) { - scrollableParent.scrollBy({ top: -70, behavior: "smooth" }); - } else if (window.innerHeight - e.clientY < options.scrollThreshold.down) { - scrollableParent.scrollBy({ top: 70, behavior: "smooth" }); + const scrollThreshold = options.scrollThreshold; + + if (e.clientY < scrollThreshold.up) { + const overflow = scrollThreshold.up - e.clientY; + const ratio = Math.min(overflow / scrollThreshold.up, 1); + const scrollAmount = -maxScrollSpeed * ratio; + scrollableParent.scrollBy({ top: scrollAmount }); + } else if (window.innerHeight - e.clientY < scrollThreshold.down) { + const overflow = e.clientY - (window.innerHeight - scrollThreshold.down); + const ratio = Math.min(overflow / scrollThreshold.down, 1); + const scrollAmount = maxScrollSpeed * ratio; + scrollableParent.scrollBy({ top: scrollAmount }); } }); - // dragHandleElement.addEventListener("drag", (e) => { - // hideDragHandle(); - // const frameRenderer = document.querySelector(".frame-renderer"); - // if (!frameRenderer) return; - // if (e.clientY < options.scrollThreshold.up) { - // frameRenderer.scrollBy({ top: -70, behavior: "smooth" }); - // } else if (window.innerHeight - e.clientY < options.scrollThreshold.down) { - // frameRenderer.scrollBy({ top: 70, behavior: "smooth" }); - // } - // }); - hideDragHandle(); sideMenu?.appendChild(dragHandleElement);