Skip to content

Commit

Permalink
Add TranscriptionLine mark validation. Only open subtask if mark is v…
Browse files Browse the repository at this point in the history
…alid. (#2167)
  • Loading branch information
srallen authored May 13, 2021
1 parent f9494f3 commit dbee4f5
Show file tree
Hide file tree
Showing 5 changed files with 224 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function InteractionLayer({
if (activeMark && !activeMark.isValid) {
activeTool.deleteMark(activeMark)
setActiveMark(undefined)
event.stopPropagation()
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
Point,
TranscriptionLine
} from '@plugins/drawingTools/components'
import { expect } from 'chai'

describe('Component > InteractionLayer', function () {
let wrapper
Expand Down Expand Up @@ -256,18 +257,83 @@ describe('Component > InteractionLayer', function () {
mockedContext.restore()
})

it('should set the mark to finished', function () {
const fakeEvent = {
pointerId: 'fakePointer',
type: 'pointer',
target: {
setPointerCapture: sinon.stub(),
releasePointerCapture: sinon.stub()
describe('when the mark is valid', function () {
it('should set the mark to finished', function () {
const fakeEvent = {
pointerId: 'fakePointer',
type: 'pointer',
target: {
setPointerCapture: sinon.stub(),
releasePointerCapture: sinon.stub()
}
}
}
wrapper.find(DrawingCanvas).simulate('pointerdown', fakeEvent)
wrapper.find(DrawingCanvas).simulate('pointerup', fakeEvent)
expect(mockMark.finish).to.have.been.calledOnce()
wrapper.find(DrawingCanvas).simulate('pointerdown', fakeEvent)
wrapper.find(DrawingCanvas).simulate('pointerup', fakeEvent)
expect(mockMark.finish).to.have.been.calledOnce()
})
})

describe('when the mark is invalid', function () {
it('should delete the mark', function () {
const mockMark = {
finished: true,
isValid: false,
finish: sinon.stub(),
initialDrag: sinon.stub(),
initialPosition: sinon.stub(),
setCoordinates: sinon.stub(),
setSubTaskVisibility: sinon.stub(),
setVideoTime: sinon.stub()
}
const mockDrawingTask = DrawingTask.TaskModel.create({
activeToolIndex: 0,
instruction: 'draw a mark',
taskKey: 'T0',
tools: [
{
marks: {},
max: 2,
toolComponent: TranscriptionLine,
type: 'transcriptionLine'
}
],
type: 'drawing'
})
activeTool = mockDrawingTask.activeTool
const setActiveMarkStub = sinon.stub()
sinon.stub(activeTool, 'createMark').callsFake(() => mockMark)
sinon.stub(activeTool, 'deleteMark').callsFake(() => {})
sinon
.stub(activeTool, 'handlePointerDown')
.callsFake(() => mockMark)

wrapper = shallow(
<InteractionLayer
activeMark={mockMark}
activeTool={activeTool}
frame={2}
height={400}
setActiveMark={setActiveMarkStub}
width={600}
/>
)

const fakeEvent = {
pointerId: 'fakePointer',
type: 'pointer',
target: {
setPointerCapture: sinon.stub(),
releasePointerCapture: sinon.stub()
},
stopPropagation: sinon.stub()
}
wrapper.find(DrawingCanvas).simulate('pointerdown', fakeEvent)
setActiveMarkStub.resetHistory()
wrapper.find(DrawingCanvas).simulate('pointerup', fakeEvent)
expect(activeTool.deleteMark).to.have.been.calledOnce()
expect(setActiveMarkStub).to.have.been.calledOnceWith(undefined)
expect(fakeEvent.stopPropagation).to.have.been.calledOnce()
})
})
})
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Mark = forwardRef(function Mark(
}

function openSubTaskPopup() {
if (mark.finished && !mark.subTaskVisibility && mark.tasks.length > 0) {
if (mark.isValid && mark.finished && !mark.subTaskVisibility && mark.tasks.length > 0) {
focusMark()
const markBounds = markRoot.current?.getBoundingClientRect()
mark.setSubTaskVisibility(true, markBounds)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const TranscriptionLineModel = types
},

get isValid () {
return true
return self.x1 !== self.x2 || self.y1 !== self.y2
},

get length () {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
import TranscriptionLineTool from '../../tools/TranscriptionLineTool'
import { TranscriptionLine as TranscriptionLineComponent } from '@plugins/drawingTools/components/'

describe('Models > Drawing Task > Marks > TranscriptionLine', function () {
let mark

function mockMark() {
const toolData = {
color: '#ff0000',
label: 'Underline the transcription',
max: '10',
min: 1,
type: 'transcriptionLine'
}

const tool = TranscriptionLineTool.create(toolData)
const mark = tool.createMark({ id: 'mockMark' })
return { tool, mark }
}

beforeEach(function () {
({ mark } = mockMark())
})

it('should exist', function () {
expect(mark).to.be.ok()
})

it('should have a TranscriptionLineTool parent', function () {
expect(mark.tool.type).to.equal('transcriptionLine')
})

it('should have a TranscriptionLine component', function () {
expect(mark.toolComponent).to.equal(TranscriptionLineComponent)
})

describe('when the mark is initially created', function () {
let mark
const coordinates = { x: 5, y: 10 }

before(function () {
({ mark } = mockMark())
})

it('can set an initial position of the same point for x1, y1 and x2, y2', function () {
mark.initialPosition(coordinates)
expect(mark.x1).to.equal(coordinates.x)
expect(mark.y1).to.equal(coordinates.y)
expect(mark.x2).to.equal(coordinates.x)
expect(mark.y2).to.equal(coordinates.y)
})

it('should not be finished', function () {
expect(mark.finished).to.be.false()
})

it('should not be valid', function () {
expect(mark.isValid).to.be.false()
})
})

describe('when the initial position is set', function () {
let mark, tool
const pointOne = { x: 5, y: 10 }
const pointTwo = { x: 15, y: 35 }
before(function () {
({ mark, tool } = mockMark())
mark.initialPosition(pointOne)
})

it('should position the delete button from the first point', function () {
const { x, y } = mark.deleteButtonPosition(1)
expect(x).to.be.a('number')
expect(y).to.be.a('number')
})

it('should return the coordinates of the first point', function () {
const { x, y } = mark.coords
expect(x).to.equal(pointOne.x)
expect(y).to.equal(pointOne.y)
})

it('can set the second point of the mark', function () {
tool.handlePointerDown(pointTwo, mark)
expect(mark.x2).to.equal(pointTwo.x)
expect(mark.y2).to.equal(pointTwo.y)
})
})

describe('when the second point is set', function () {
let mark, tool
const pointOne = { x: 5, y: 10 }
const pointTwo = { x: 15, y: 35 }
before(function () {
({ mark, tool } = mockMark())
mark.initialPosition(pointOne)
tool.handlePointerDown(pointTwo, mark)
})

it('is valid', function () {
expect(mark.isValid).to.be.true()
})

it('can be finished', function () {
mark.finish()
expect(mark.finished).to.be.true()
})

it('has length', function () {
const { length } = mark
expect(length).to.be.a('number')
})
})

describe('drag movement', function () {
let mark, tool
const pointOne = { x: 5, y: 10 }
const pointTwo = { x: 15, y: 35 }
before(function () {
({ mark, tool } = mockMark())
mark.initialPosition(pointOne)
tool.handlePointerDown(pointTwo, mark)
})

it('can move', function () {
const diff = { x: 2, y: 4 }
mark.move(diff)
expect(mark.x1).to.equal(pointOne.x + diff.x)
expect(mark.x2).to.equal(pointTwo.x + diff.x)
expect(mark.y1).to.equal(pointOne.y + diff.y)
expect(mark.y2).to.equal(pointTwo.y + diff.y)
})

it('can set both points\' coordinates', function () {
const newCoordinates = { x1: 36, y1: 74, x2: 47, y2: 103 }
mark.setCoordinates(newCoordinates)
expect(mark.x1).to.equal(newCoordinates.x1)
expect(mark.x2).to.equal(newCoordinates.x2)
expect(mark.y1).to.equal(newCoordinates.y1)
expect(mark.y2).to.equal(newCoordinates.y2)
})
})
})

0 comments on commit dbee4f5

Please sign in to comment.