diff options
Diffstat (limited to 'src/client/util/DragManager.ts')
| -rw-r--r-- | src/client/util/DragManager.ts | 39 |
1 files changed, 18 insertions, 21 deletions
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index dfd916e92..cec158d23 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -382,29 +382,28 @@ export namespace DragManager { } } const rect = ele.getBoundingClientRect(); - const rotWidth = (rot > 45 && rot < 135) || (rot > 215 && rot < 305) ? rect.height : rect.width; //rect.width * Math.cos((rot * Math.PI) / 180) + rect.height * Math.sin((rot * Math.PI) / 180); - const scaling = rot ? rotWidth / ele.offsetWidth : rect.width / (ele.offsetWidth || rect.width); + const w = ele.offsetWidth || rect.width; + const h = ele.offsetHeight || rect.height; + const rotR = -(rot / 180) * Math.PI; + const tl = [0, 0]; + const tr = [Math.cos(rotR) * w, Math.sin(-rotR) * w]; + const bl = [Math.sin(rotR) * h, Math.cos(-rotR) * h]; + const br = [Math.cos(rotR) * w + Math.sin(rotR) * h, Math.cos(-rotR) * h - Math.sin(rotR) * w]; + const minx = Math.min(tl[0], tr[0], br[0], bl[0]); + const maxx = Math.max(tl[0], tr[0], br[0], bl[0]); + const miny = Math.min(tl[1], tr[1], br[1], bl[1]); + const maxy = Math.max(tl[1], tr[1], br[1], bl[1]); + const scaling = rect.width / (Math.abs(maxx - minx) || 1); elesCont.left = Math.min(rect.left, elesCont.left); elesCont.top = Math.min(rect.top, elesCont.top); elesCont.right = Math.max(rect.right, elesCont.right); elesCont.bottom = Math.max(rect.bottom, elesCont.bottom); - const rotRad = (rot / 180) * Math.PI; - xs.push( - (rot > 90 && rot <= 270 ? rect.right : rect.left) + // - (rot > 270 ? -scaling * (ele.offsetHeight * Math.sin(rotRad)) : 0) + - (rot <= 90 || rot > 180 ? scaling * (ele.offsetHeight * Math.sin(rotRad)) : 0) + - (options?.offsetX || 0) - ); - ys.push( - rect.top + // - (rot > 180 ? -scaling * (ele.offsetWidth * Math.sin(rotRad)) : 0) + - (rot >= 90 && rot < 270 ? -scaling * (ele.offsetHeight * Math.cos(rotRad)) : 0) + - (options?.offsetY || 0) - ); + xs.push(((0 - minx) / (maxx - minx)) * rect.width + rect.left); + ys.push(((0 - miny) / (maxy - miny)) * rect.height + rect.top); scalings.push(scaling); Object.assign(dragElement.style, { - opacity: '0', + opacity: '0.7', position: 'absolute', margin: '0', top: '0', @@ -415,9 +414,9 @@ export namespace DragManager { borderRadius: getComputedStyle(ele).borderRadius, zIndex: globalCssVariables.contextMenuZindex, transformOrigin: '0 0', - width: rot ? '' : `${rect.width / scaling}px`, - height: rot ? '' : `${rect.height / scaling}px`, - transform: `translate(${xs[0]}px, ${ys[0]}px) rotate(${rot}deg)`, + width: '', + height: '', + transform: `translate(${xs[0]}px, ${ys[0]}px) rotate(${rot}deg) scale(${scaling})`, }); dragLabel.style.transform = `translate(${xs[0]}px, ${ys[0] - 20}px)`; @@ -431,8 +430,6 @@ export namespace DragManager { [dragElement, ...Array.from(dragElement.getElementsByTagName('*'))].forEach(ele => (ele as any).style && ((ele as any).style.pointerEvents = 'none')); dragDiv.appendChild(dragElement); - scalings[scalings.length - 1] = rect.width / dragElement.getBoundingClientRect().width; - setTimeout(() => (dragElement.style.opacity = '0.7')); if (dragElement !== ele) { const children = [Array.from(ele.children), Array.from(dragElement.children)]; while (children[0].length) { |