From ae2bc510a0b0e9737dd5b018fd542c218566f452 Mon Sep 17 00:00:00 2001 From: Isaac Hagoel Date: Sat, 1 Jul 2023 14:37:55 +1000 Subject: [PATCH 1/4] 454 - copying height and width from the computed styles when morphing instead of using the rect because of a browser bug that causes wrong info on rect when inside css grid --- package.json | 2 +- src/helpers/styler.js | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index ec75ff2..cc61150 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "dist" ], "description": "*An awesome drag and drop library for Svelte 3 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *", - "version": "0.9.22", + "version": "0.9.23", "repository": { "type": "git", "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git" diff --git a/src/helpers/styler.js b/src/helpers/styler.js index b8a726b..b778a97 100644 --- a/src/helpers/styler.js +++ b/src/helpers/styler.js @@ -40,8 +40,8 @@ export function createDraggedElementFrom(originalElement, positionCenterOnXY) { draggedEl.style.margin = "0"; // we can't have relative or automatic height and width or it will break the illusion draggedEl.style.boxSizing = "border-box"; - draggedEl.style.height = `${rect.height}px`; - draggedEl.style.width = `${rect.width}px`; + // draggedEl.style.height = `${rect.height}px`; + // draggedEl.style.width = `${rect.width}px`; draggedEl.style.transition = `${trs("top")}, ${trs("left")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `; // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time window.setTimeout(() => (draggedEl.style.transition += `, ${trs("width")}, ${trs("height")}`), 0); @@ -104,7 +104,9 @@ function copyStylesFromTo(copyFromEl, copyToEl) { s.startsWith("border") || s === "opacity" || s === "color" || - s === "list-style-type" + s === "list-style-type" || + s === "width" || + s === "height" ) .forEach(s => copyToEl.style.setProperty(s, computedStyle.getPropertyValue(s), computedStyle.getPropertyPriority(s))); } From e1aed6f276a203634ddc2a30aaa16d51522fb708 Mon Sep 17 00:00:00 2001 From: Isaac Hagoel Date: Sat, 1 Jul 2023 14:40:10 +1000 Subject: [PATCH 2/4] 454 - updated release notes --- release-notes.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/release-notes.md b/release-notes.md index e6f8e26..506d28a 100644 --- a/release-notes.md +++ b/release-notes.md @@ -1,4 +1,7 @@ ## Svelte Dnd Action - Release Notes +### [0.9.23](https://github.com/isaacHagoel/svelte-dnd-action/pull/457) + +Fix morphing when within css grid ### [0.9.22](https://github.com/isaacHagoel/svelte-dnd-action/pull/410) From e823c99d7c141c300d408e053a6d96ca54cd226c Mon Sep 17 00:00:00 2001 From: Isaac Hagoel Date: Mon, 3 Jul 2023 11:34:43 +0900 Subject: [PATCH 3/4] 454 - fixed wrong place of commented out height and width assignment from previous commit --- src/helpers/styler.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/helpers/styler.js b/src/helpers/styler.js index b778a97..ba06a4f 100644 --- a/src/helpers/styler.js +++ b/src/helpers/styler.js @@ -40,8 +40,8 @@ export function createDraggedElementFrom(originalElement, positionCenterOnXY) { draggedEl.style.margin = "0"; // we can't have relative or automatic height and width or it will break the illusion draggedEl.style.boxSizing = "border-box"; - // draggedEl.style.height = `${rect.height}px`; - // draggedEl.style.width = `${rect.width}px`; + draggedEl.style.height = `${rect.height}px`; + draggedEl.style.width = `${rect.width}px`; draggedEl.style.transition = `${trs("top")}, ${trs("left")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `; // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time window.setTimeout(() => (draggedEl.style.transition += `, ${trs("width")}, ${trs("height")}`), 0); @@ -77,8 +77,8 @@ export function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX left: (currentMouseX - draggedElRect.left) / draggedElRect.width, top: (currentMouseY - draggedElRect.top) / draggedElRect.height }; - draggedEl.style.height = `${newRect.height}px`; - draggedEl.style.width = `${newRect.width}px`; + // draggedEl.style.height = `${newRect.height}px`; + // draggedEl.style.width = `${newRect.width}px`; draggedEl.style.left = `${parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange}px`; draggedEl.style.top = `${parseFloat(draggedEl.style.top) - relativeDistanceOfMousePointerFromDraggedSides.top * heightChange}px`; } @@ -105,6 +105,7 @@ function copyStylesFromTo(copyFromEl, copyToEl) { s === "opacity" || s === "color" || s === "list-style-type" || + // copying with and height to make up for rect update timing issues in some browsers s === "width" || s === "height" ) From 908c78d7233bd2b2d9d62d1063639c390e686f76 Mon Sep 17 00:00:00 2001 From: Isaac Hagoel Date: Sun, 9 Jul 2023 16:42:44 +0300 Subject: [PATCH 4/4] 454 - added a comment to explain the change --- src/helpers/styler.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/helpers/styler.js b/src/helpers/styler.js index ba06a4f..e715ffd 100644 --- a/src/helpers/styler.js +++ b/src/helpers/styler.js @@ -77,6 +77,7 @@ export function morphDraggedElementToBeLike(draggedEl, copyFromEl, currentMouseX left: (currentMouseX - draggedElRect.left) / draggedElRect.width, top: (currentMouseY - draggedElRect.top) / draggedElRect.height }; + // The lines below are commented out because of issue 454 - seems like these rect values take time to update when in grid layout, therefore this gets copied from the computed styles now // draggedEl.style.height = `${newRect.height}px`; // draggedEl.style.width = `${newRect.width}px`; draggedEl.style.left = `${parseFloat(draggedEl.style.left) - relativeDistanceOfMousePointerFromDraggedSides.left * widthChange}px`;