mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-08 01:53:04 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

added shift binding for locking aspect ratio resizing

Browse Source
This commit is contained in:
bdbch 2025-05-01 19:14:16 +02:00
parent 94cba69c40
commit b7a27b1e84
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/core/src/helpers/resizable/setup-resize-handlers.ts
View File

@ -55,11 +55,14 @@ export function setupResizeHandlers(
return return
} }
const hasUpdatedWidth = dom.clientWidth !== initialDimensions.width
const hasUpdatedHeight = dom.clientHeight !== initialDimensions.height
editor.commands.command(({ tr }) => { editor.commands.command(({ tr }) => {
tr.setNodeMarkup(pos, undefined, { tr.setNodeMarkup(pos, undefined, {
...node.attrs, ...node.attrs,
width: updateWidth ? dom.clientWidth : node.attrs.width, width: hasUpdatedWidth ? dom.clientWidth : node.attrs.width,
height: updateHeight ? dom.clientHeight : node.attrs.height, height: hasUpdatedHeight ? dom.clientHeight : node.attrs.height,
}) })
return true return true
@ -71,6 +74,8 @@ export function setupResizeHandlers(
return return
} }
const isAspectLocked = e.shiftKey
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@ -84,20 +89,32 @@ export function setupResizeHandlers(
// Calculate new dimensions based on direction and delta // Calculate new dimensions based on direction and delta
let newWidth = updateWidth ? dom.clientWidth + (affectsLeft ? -deltaX : deltaX) : dom.clientWidth let newWidth = updateWidth ? dom.clientWidth + (affectsLeft ? -deltaX : deltaX) : dom.clientWidth
let newHeight = updateHeight ? dom.clientHeight + (affectsTop ? -deltaY : deltaY) : dom.clientHeight let newHeight = updateHeight ? dom.clientHeight + (affectsTop ? -deltaY : deltaY) : dom.clientHeight
// Apply size clamping // Apply size clamping
newWidth = Math.max(minWidth, newWidth) newWidth = Math.max(minWidth, newWidth)
newHeight = Math.max(minHeight, newHeight) newHeight = Math.max(minHeight, newHeight)
// Only update width if it's being modified and is above minimum size // If aspect ratio is locked, adjust the other dimension accordingly
if (isAspectLocked) {
const aspectRatio = initialDimensions.width / initialDimensions.height
if (updateWidth) { if (updateWidth) {
newHeight = Math.round(newWidth / aspectRatio)
} else if (updateHeight) {
newWidth = Math.round(newHeight * aspectRatio)
}
}
const hasUpdatedWidth = newWidth !== dom.clientWidth
const hasUpdatedHeight = newHeight !== dom.clientHeight
// Only update width if it's being modified and is above minimum size
if (hasUpdatedWidth) {
dom.style.width = `${newWidth}px` dom.style.width = `${newWidth}px`
} }
// Only update height if it's being modified and is above minimum size // Only update height if it's being modified and is above minimum size
if (updateHeight) { if (hasUpdatedHeight) {
dom.style.height = `${newHeight}px` dom.style.height = `${newHeight}px`
} }
@ -112,6 +129,8 @@ export function setupResizeHandlers(
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
updateNodeSize()
isResizing = false isResizing = false
currentPosition = null currentPosition = null
@ -119,8 +138,6 @@ export function setupResizeHandlers(
document.removeEventListener('touchmove', handleMove) document.removeEventListener('touchmove', handleMove)
document.removeEventListener('mouseup', handleEnd) document.removeEventListener('mouseup', handleEnd)
document.removeEventListener('touchend', handleEnd) document.removeEventListener('touchend', handleEnd)
updateNodeSize()
} }
const handleKeydown = (e: KeyboardEvent): void => { const handleKeydown = (e: KeyboardEvent): void => {