Skip to content
Snippets Groups Projects
Commit 7e6e12cc authored by john's avatar john
Browse files

refactor and bug fixes on track change addition annotation handlers

parent 085afe93
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/components/SimpleEditor/SimpleEditorWrapper.jsx
+ 0
− 2
View file @ 7e6e12cc
...@@ -142,8 +142,6 @@ export class SimpleEditorWrapper extends React.Component { ...@@ -142,8 +142,6 @@ export class SimpleEditorWrapper extends React.Component {
render () { render () {
const { book, fragment, history, user } = this.props const { book, fragment, history, user } = this.props
// user.roles = user.getRoles()
console.log(fragment, user)
// TODO -- merge update and updateComments // TODO -- merge update and updateComments
return ( return (
......
app/components/SimpleEditor/elements/track_change/TrackChangeComponent.js
+ 21
− 28
View file @ 7e6e12cc
...@@ -2,47 +2,40 @@ import { AnnotationComponent, createAnnotation, deleteNode } from 'substance' ...@@ -2,47 +2,40 @@ import { AnnotationComponent, createAnnotation, deleteNode } from 'substance'
class TrackChangeComponent extends AnnotationComponent { class TrackChangeComponent extends AnnotationComponent {
render ($$) { render ($$) {
// const user = this.context.controller.props.user const { status } = this.props.node
const status = this.props.node.status
const trackChangesView = this.toggleTrackChangeView() const trackChangesView = this.toggleTrackChangeView()
let hideDeletes = ''
let showAdditions = ''
if (trackChangesView === false && status === 'delete') {
hideDeletes = 'sc-track-delete-hide'
}
if (trackChangesView === false && status === 'add') {
showAdditions = 'sc-track-add-show'
}
const accept = $$('a') const accept = $$('a')
.addClass('sc-track-item') .addClass('sc-track-item')
.on('click', this.acceptTrackChange) .on('click', this.acceptTrackChange)
.append('accept') .append('accept')
const reject = $$('a').addClass('sc-track-item') const reject = $$('a')
.on('click', this.rejectTrackChange) .addClass('sc-track-item')
.append('reject') .on('click', this.rejectTrackChange)
const seperator = $$('span').addClass('sc-track-separator') .append('reject')
.append(' / ')
const container = $$('span').addClass('sc-accept-reject-container') const separator = $$('span')
.append(accept) .addClass('sc-track-separator')
.append(seperator) .append(' / ')
.append(reject)
const container = $$('span')
.addClass('sc-accept-reject-container')
.append(accept)
.append(separator)
.append(reject)
let el = $$('span') let el = $$('span')
// .attr('data-id', this.props.node.id)
// .attr('data-user', user.username)
// .attr('data-role', user.teams[0].name)
.addClass(this.getClassNames()) .addClass(this.getClassNames())
.addClass(hideDeletes)
.addClass(showAdditions)
.append(this.props.children) .append(this.props.children)
.append(container) .append(container)
const className = 'sc-track-change-' + status el.addClass('sc-track-change-' + status)
el.addClass(className)
if (trackChangesView === false) {
if (status === 'delete') el.addClass('sc-track-delete-hide')
if (status === 'add') el.addClass('sc-track-add-show')
}
return el return el
} }
......
app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js
+ 190
− 148
View file @ 7e6e12cc
...@@ -3,9 +3,9 @@ import { ...@@ -3,9 +3,9 @@ import {
filter, filter,
find, find,
keys, keys,
last, last
max, // max,
minBy // minBy
} from 'lodash' } from 'lodash'
import { import {
...@@ -29,155 +29,194 @@ class TrackChangesProvider { ...@@ -29,155 +29,194 @@ class TrackChangesProvider {
*/ */
handleTransaction (options) { handleTransaction (options) {
this.handleAdd(options) options.selection = this.getSelection()
this.handleDelete(options) this.chooseHanlder(options)
} }
handleAdd (options) { chooseHanlder (options) {
const { event, status } = options if (options.status === 'add') return this.handleAdd(options)
if (status !== 'add') return if (options.status === 'delete') return this.handleDelete(options)
// console.log('adding') }
handleAdd (options) {
const isSelectionCollapsed = this.isSelectionCollapsed() const isSelectionCollapsed = this.isSelectionCollapsed()
let selection
if (isSelectionCollapsed) { if (isSelectionCollapsed) return this.handleAddCollapsed(options)
// this.insertText(event) if (!isSelectionCollapsed) return this.handleAddNonCollapsed(options)
}
const notOnTrack = this.isNotOnTrackAnnotation() handleAddCollapsed (options) {
const { event } = options
if (notOnTrack) { const notOnTrack = this.isNotOnTrackAnnotation()
this.insertText(event) const isOnAdd = this.isOnAnnotation('add')
selection = this.setSelectionPlusOne('left') const isOnDelete = this.isOnAnnotation('delete')
this.createAddAnnotation(selection)
this.moveCursorTo('end')
return
} else {
const isOnAdd = this.isOnAnnotation('add')
if (isOnAdd) { if (notOnTrack) return this.insertCharacterWithAddAnnotation(options)
const annotation = this.getAnnotationByStatus('add')
const isOnLeftEdge = this.isOnLeftEdge(annotation)
this.insertText(event) if (isOnAdd) {
if (isOnLeftEdge) { const annotation = this.getAnnotationByStatus('add')
selection = this.setSelectionPlusOne('left') const isOnLeftEdge = this.isOnLeftEdge(annotation)
this.expandTrackAnnotation(selection, annotation)
this.moveCursorTo('end')
return
}
return
}
const isOnDelete = this.isOnAnnotation('delete') this.insertText(event)
if (isOnLeftEdge) this.expandAnnotationToTheLeft(annotation)
return
}
if (isOnDelete) { if (isOnDelete) {
console.log('on delete') const annotation = this.getAnnotationByStatus('delete')
const annotation = this.getAnnotationByStatus('delete')
const withinAnnotation = this.isSelectionContainedWithin(annotation, true)
if (withinAnnotation) {
// console.log('in')
this.moveCursorTo(annotation.endOffset)
this.insertText(event)
selection = this.setSelectionPlusOne('left')
this.createAddAnnotation(selection)
this.separateAnnotations()
this.moveCursorTo('end')
return
}
console.log('out') const isOnLeftEdge = this.isOnLeftEdge(annotation)
const isOnLeftEdge = this.isOnLeftEdge(annotation) const isOnRightEdge = this.isOnRightEdge(annotation)
if (isOnLeftEdge) { const withinAnnotation = this.isSelectionContainedWithin(annotation, true)
// console.log('left')
this.insertText(event)
selection = this.setSelectionPlusOne('left')
this.createAddAnnotation(selection)
this.moveCursorTo('end')
return
}
const isOnRightEdge = this.isOnRightEdge(annotation) if (withinAnnotation) {
if (isOnRightEdge) { this.moveCursorTo(annotation.endOffset)
// console.log('right') this.insertCharacterWithoutExpandingAnnotation(annotation, options)
this.insertText(event) options.selection = this.getSelection()
selection = this.setSelectionPlusOne('left') return this.handleAdd(options)
this.createAddAnnotation(selection)
this.separateAnnotations()
this.moveCursorTo('end')
return
}
}
} }
} else {
selection = this.getSelection()
const notOnTrack = this.isNotOnTrackAnnotation() if (isOnLeftEdge) return this.insertCharacterWithAddAnnotation(options)
if (notOnTrack) { if (isOnRightEdge) {
this.createDeleteAnnotation(selection) this.insertCharacterWithoutExpandingAnnotation(annotation, options)
this.moveCursorTo('end') return this.handleAdd(options)
this.insertText(event)
selection = this.setSelectionPlusOne('left')
this.createAddAnnotation(selection)
this.separateAnnotations()
this.moveCursorTo('end')
return
} }
}
}
const isOnAdd = this.isOnAnnotation('add') handleAddNonCollapsed (options) {
// const { event } = options
let { selection } = options
if (isOnAdd) { const notOnTrack = this.isNotOnTrackAnnotation()
const annotation = this.getAnnotationByStatus('add') // const isOnAdd = this.isOnAnnotation('add')
const withinAnnotation = this.isSelectionContainedWithin(annotation) // const isOnDelete = this.isOnAnnotation('delete')
if (withinAnnotation) return this.insertText(event) if (notOnTrack) return this.deleteSelectedAndCreateAddition(options)
selection = this.getSelection() const shortenBy = this.deleteAllOwnAdditions(selection)
this.createDeleteAnnotation(selection) options.selection = this.updateSelection(selection, selection.startOffset, selection.endOffset - shortenBy)
const allAdditions = this.getAllAnnotationsByStatus('add') this.deleteSelectedAndCreateAddition(options)
const firstAddition = minBy(allAdditions, 'startOffset')
this.deleteAllOwnAdditions()
const moveTo = max([firstAddition.startOffset, selection.startOffset])
this.moveCursorTo(moveTo)
this.insertText(event)
selection = this.setSelectionPlusOne('left')
this.createAddAnnotation(selection)
this.moveCursorTo('end')
return
}
const isOnDelete = this.isOnAnnotation('delete') // if (isOnAdd) {
// const annotation = this.getAnnotationByStatus('add')
// const withinAnnotation = this.isSelectionContainedWithin(annotation)
//
// if (withinAnnotation) return this.insertText(event)
//
// selection = this.getSelection()
// this.createDeleteAnnotation(selection)
// const allAdditions = this.getAllAnnotationsByStatus('add')
// const firstAddition = minBy(allAdditions, 'startOffset')
// this.deleteAllOwnAdditions()
//
// const moveTo = max([firstAddition.startOffset, selection.startOffset])
// this.moveCursorTo(moveTo)
// this.insertText(event)
// selection = this.setSelectionPlusOne('left')
// this.createAddAnnotation(selection)
// this.moveCursorTo('end')
// return
// }
//
// if (isOnDelete) {
// const annotation = this.getAnnotationByStatus('delete')
// const withinAnnotation = this.isSelectionContainedWithin(annotation)
//
// if (withinAnnotation) {
// this.moveCursorTo(annotation.endOffset)
// // options.selection =
// this.insertText(event)
// selection = this.setSelectionPlusOne('left')
// this.createAddAnnotation(selection)
// this.separateAnnotations()
// this.moveCursorTo('end')
// return
// }
//
// selection = this.getSelection()
// this.expandTrackAnnotation(selection, annotation)
//
// this.moveCursorTo(annotation.endOffset)
// this.insertText(event)
// selection = this.setSelectionPlusOne('left')
// this.createAddAnnotation(selection)
// this.separateAnnotations()
// this.moveCursorTo('end')
// return
// }
}
if (isOnDelete) { deleteSelectedAndCreateAddition (options) {
const annotation = this.getAnnotationByStatus('delete') let { selection } = options
const withinAnnotation = this.isSelectionContainedWithin(annotation)
if (withinAnnotation) { this.createDeleteAnnotation(selection)
this.moveCursorTo(annotation.endOffset) this.moveCursorTo('end', selection)
this.insertText(event)
selection = this.setSelectionPlusOne('left')
this.createAddAnnotation(selection)
this.separateAnnotations()
this.moveCursorTo('end')
return
}
selection = this.getSelection() const deleteAnnotation = this.getAnnotationByStatus('delete')
this.expandTrackAnnotation(selection, annotation) this.insertCharacterWithoutExpandingAnnotation(deleteAnnotation, options)
this.createAdditionAnnotationOnLastChar()
}
this.moveCursorTo(annotation.endOffset) // Inserts a character and then marks it as an add annotation
this.insertText(event) // If an add annotation existed on the left side of the new character already
selection = this.setSelectionPlusOne('left') // substance will expand this annotation on insertion
this.createAddAnnotation(selection) insertCharacterWithAddAnnotation (options) {
this.separateAnnotations() const { event } = options
this.moveCursorTo('end') this.insertText(event)
return // TODO -- watch it with additions by other users
this.createAdditionAnnotationOnLastChar()
}
createAdditionAnnotationOnLastChar () {
const selection = this.setSelectionPlusOne('left')
this.createAddAnnotation(selection)
this.moveCursorTo('end')
}
expandAnnotationToTheLeft (annotation) {
const selection = this.setSelectionPlusOne('left')
this.expandTrackAnnotation(selection, annotation)
this.moveCursorTo('end')
}
insertCharacterWithoutExpandingAnnotation (annotation, options) {
const { event } = options
let selection = options
this.insertText(event)
selection = this.setSelectionPlusOne('left')
this.truncateTrackAnnotation(selection, annotation)
this.moveCursorTo('end')
options.event = null
}
deleteAllOwnAdditions (selection) {
// TODO -- for same user
const additions = this.getAllAnnotationsByStatus('add')
const originalSelection = selection || this.getSelection()
let shortenBy = 0
each(additions, (annotation) => {
const selection = annotation.getSelection()
// make sure only part of annotation that is selected is deleted
if (annotation.startOffset < originalSelection.startOffset) {
selection.startOffset = originalSelection.startOffset
} }
} if (annotation.endOffset > originalSelection.endOffset) {
selection.endOffset = originalSelection.endOffset
}
shortenBy += (selection.endOffset - selection.startOffset)
this.deleteSelection(selection)
})
return shortenBy // return how much shorter the selection should now be
} }
handleDelete (options) { handleDelete (options) {
...@@ -185,6 +224,8 @@ class TrackChangesProvider { ...@@ -185,6 +224,8 @@ class TrackChangesProvider {
if (status !== 'delete') return if (status !== 'delete') return
// console.log('deleting') // console.log('deleting')
// console.log(this.getSelection())
const isSelectionCollapsed = this.isSelectionCollapsed() const isSelectionCollapsed = this.isSelectionCollapsed()
let selection let selection
...@@ -264,6 +305,7 @@ class TrackChangesProvider { ...@@ -264,6 +305,7 @@ class TrackChangesProvider {
const onAdd = this.isOnAnnotation('add') const onAdd = this.isOnAnnotation('add')
if (onAdd) { if (onAdd) {
// console.log('on add')
const annotation = this.getAnnotationByStatus('add') const annotation = this.getAnnotationByStatus('add')
const withinAnnotation = this.isSelectionContainedWithin(annotation) const withinAnnotation = this.isSelectionContainedWithin(annotation)
...@@ -363,6 +405,19 @@ class TrackChangesProvider { ...@@ -363,6 +405,19 @@ class TrackChangesProvider {
surface.transaction(transformation, info) surface.transaction(transformation, info)
} }
truncateTrackAnnotation (selection, annotation) {
const surface = this.getSurface()
const info = this.getInfo()
const transformation = (tx, args) => {
args.anno = annotation
args.selection = selection
truncateAnnotation(tx, args)
}
surface.transaction(transformation, info)
}
separateAnnotations () { separateAnnotations () {
const surface = this.getSurface() const surface = this.getSurface()
const info = this.getInfo() const info = this.getInfo()
...@@ -386,7 +441,9 @@ class TrackChangesProvider { ...@@ -386,7 +441,9 @@ class TrackChangesProvider {
} }
insertText (event) { insertText (event) {
if (!event) return
const surface = this.getSurface() const surface = this.getSurface()
surface.transaction(function (tx, args) { surface.transaction(function (tx, args) {
if (surface.domSelection) surface.domSelection.clear() if (surface.domSelection) surface.domSelection.clear()
args.text = event.data || ' ' // if no data, it's a space key args.text = event.data || ' ' // if no data, it's a space key
...@@ -418,27 +475,6 @@ class TrackChangesProvider { ...@@ -418,27 +475,6 @@ class TrackChangesProvider {
surface.transaction(transformation, info) surface.transaction(transformation, info)
} }
// TODO -- also needs multiple additions
deleteAllOwnAdditions () {
// TODO -- for same user
const additions = this.getAllAnnotationsByStatus('add')
const originalSelection = this.getSelection()
each(additions, (annotation) => {
const selection = annotation.getSelection()
// make sure only part of annotation that is selected is deleted
if (annotation.startOffset < originalSelection.startOffset) {
selection.startOffset = originalSelection.startOffset
}
if (annotation.endOffset > originalSelection.endOffset) {
selection.endOffset = originalSelection.endOffset
}
this.deleteSelection(selection)
})
}
/* /*
ANNOTATION HELPERS ANNOTATION HELPERS
...@@ -573,6 +609,12 @@ class TrackChangesProvider { ...@@ -573,6 +609,12 @@ class TrackChangesProvider {
// is part of the selection outside the annotation // is part of the selection outside the annotation
// move cursor to // move cursor to
updateSelection (selection, startOffset, endOffset) {
selection.startOffset = startOffset
selection.endOffset = endOffset
return selection
}
setSelectionPlusOne (direction) { setSelectionPlusOne (direction) {
const selection = this.getSelection() const selection = this.getSelection()
...@@ -582,8 +624,8 @@ class TrackChangesProvider { ...@@ -582,8 +624,8 @@ class TrackChangesProvider {
return selection return selection
} }
moveCursorTo (point) { moveCursorTo (point, sel) {
const selection = this.getSelection() const selection = sel || this.getSelection()
const surface = this.getSurface() const surface = this.getSurface()
// TODO -- use substance's selection.collapse(direction) // TODO -- use substance's selection.collapse(direction)
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment