ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve drag

Browse Source
This commit is contained in:
Philipp Kühn
2020-11-25 14:49:36 +01:00
parent c66c30ea49
commit 0b19e7d327
1 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/vue/src/VueRenderer.ts
View File

@@ -70,6 +70,15 @@ class VueNodeView implements NodeView {
view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, getPos()))) view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, getPos())))
}, },
dragend: (event: Event) => {
const target = (event.target as HTMLElement)
if (nodeview.contentDOM?.contains(target)) {
return
}
nodeview.isDragging = false
},
}, },
}, },
this.$slots.default, this.$slots.default,
@@ -147,23 +156,20 @@ class VueNodeView implements NodeView {
stopEvent(event: Event) { stopEvent(event: Event) {
const target = (event.target as HTMLElement) const target = (event.target as HTMLElement)
const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
const isDraggable = this.node.type.spec.draggable const isDraggable = this.node.type.spec.draggable
const isCopyEvent = event.type === 'copy' const isCopyEvent = event.type === 'copy'
const isPasteEvent = event.type === 'paste' const isPasteEvent = event.type === 'paste'
const isCutEvent = event.type === 'cut' const isCutEvent = event.type === 'cut'
const isDragEvent = event.type.startsWith('drag') || event.type === 'drop' const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
// console.log({ isInElement })
if (!isInElement) { if (!isInElement) {
return false return false
} }
// console.log(this.isDragging, event.type)
if (isDragEvent && !this.isDragging) { if (isDragEvent && !this.isDragging) {
event.preventDefault() event.preventDefault()
return false
} }
if (isDraggable && !this.isDragging && event.type === 'mousedown') { if (isDraggable && !this.isDragging && event.type === 'mousedown') {
@@ -175,6 +181,7 @@ class VueNodeView implements NodeView {
if (isValidDragHandle) { if (isValidDragHandle) {
this.isDragging = true this.isDragging = true
// this.isDragging = true
// document.addEventListener('dragend', (e: Event) => { // document.addEventListener('dragend', (e: Event) => {
// console.log('DRAGEEEND') // console.log('DRAGEEEND')
// // const t = (e.target as HTMLElement) // // const t = (e.target as HTMLElement)
@@ -188,7 +195,7 @@ class VueNodeView implements NodeView {
// // // } // // // }
// this.isDragging = false // this.isDragging = false
// }, { once: true }) // }, { once: true })
console.log('BIND EVENT', this.dom) // console.log('BIND EVENT', this.dom)
// document.addEventListener('dragend', this.onDragEnd, { once: true }) // document.addEventListener('dragend', this.onDragEnd, { once: true })
} }
} }
@@ -201,15 +208,15 @@ class VueNodeView implements NodeView {
} }
onDragEnd(event: Event) { onDragEnd(event: Event) {
console.log('ONDRAGEND') // console.log('ONDRAGEND')
const target = (event.target as HTMLElement) // const target = (event.target as HTMLElement)
if (target === this.dom) { // if (target === this.dom) {
console.log('JEP') // console.log('JEP')
this.isDragging = false // this.isDragging = false
} else { // } else {
console.log('NOPE') // console.log('NOPE')
} // }
} }
ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) { ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {