Commit c981eeb7 authored by Eva Bardou's avatar Eva Bardou Committed by Robin Tissot
Browse files

Move line being edited in lines store module

parent e79c4992
......@@ -4,8 +4,7 @@
{% block body %}
<div id="editor">
<editor :object="'{{object}}'"
:document-id="'{{document.id}}'"
<editor :document-id="'{{document.id}}'"
:document-name="'{{document.name}}'"
:part-id="'{{part.id}}'"
:default-text-direction="'{{ document.default_text_direction }}'"
......
......@@ -3,6 +3,10 @@ import * as api from '../api'
export const initialState = () => ({
id: null,
name: "",
defaultTextDirection: null,
mainTextDirection: null,
readDirection: null,
types: {},
blockShortcuts: false,
......@@ -20,6 +24,18 @@ export const mutations = {
setId (state, id) {
state.id = id
},
setName (state, name) {
state.name = name
},
setDefaultTextDirection (state, direction) {
state.defaultTextDirection = direction
},
setMainTextDirection (state, direction) {
state.mainTextDirection = direction
},
setReadDirection (state, direction) {
state.readDirection = direction
},
setTypes (state, types) {
state.types = types
},
......
......@@ -3,7 +3,7 @@ import * as api from '../api'
export const initialState = () => ({
all: [],
editedLine: null,
// internal
masksToRecalc: [],
debouncedRecalculateMasks: null,
......@@ -51,18 +51,22 @@ export const mutations = {
// so that all components get a full refresh after an update
state.all = [...state.all]
},
setEditedLine (state, line) {
state.editedLine = line
},
updateOrder (state, { lines, recalculate }) {
for (let i=0; i<lines.length; i++) {
let lineData = lines[i]
let index = state.all.findIndex(l => l.pk == lineData.pk)
if (index != -1) {
if (recalculate) {
state.all[index] = { ...state.all[index], order: i }
state.all[index].order = i
} else {
state.all[index] = { ...state.all[index], order: lineData.order }
state.all[index].order = lineData.order
}
}
}
state.all = [...state.all.sort((a, b) => (a.order > b.order) ? 1 : -1)]
},
updateCurrentTrans (state, transcription) {
state.all = state.all.map(line => {
......@@ -82,6 +86,9 @@ export const mutations = {
state.all[index] = { ...state.all[index], transcriptions: tr }
}
state.all[index] = { ...state.all[index], currentTrans: transcription }
// Force reference update on the whole array
// so that all components get a full refresh after an update
state.all = [...state.all]
},
createTranscriptions (state, createdTranscriptions) {
for (let i=0; i<createdTranscriptions.lines.length; i++) {
......@@ -93,6 +100,9 @@ export const mutations = {
currentTrans: { ...state.all[index].currentTrans, pk: lineTrans.pk }
}
}
// Force reference update on the whole array
// so that all components get a full refresh after an update
state.all = [...state.all]
},
updateTranscriptionVersion (state, { pk, content }) {
let index = state.all.findIndex(l=>l.pk == pk)
......@@ -245,6 +255,24 @@ export const actions = {
}
state.debouncedRecalculateOrdering()
},
toggleLineEdition({commit}, line) {
commit('setEditedLine', line)
},
editLine({state, commit}, direction) {
if (direction == 'next') {
let index = state.all.findIndex(l => l.pk == state.editedLine.pk)
if (index < state.all.length - 1) {
commit('setEditedLine', state.all[index + 1])
}
} else {
let index = state.all.findIndex(l => l.pk == state.editedLine.pk)
if (index >= 1) {
commit('setEditedLine', state.all[index - 1])
}
}
}
}
export default {
......
......@@ -36,13 +36,10 @@ export default Vue.extend({
'line.order': function(n, o) {
// make sure it's at the right place,
// in case it was just created or the ordering got recalculated
let index = Array.from(this.$el.parentNode.children).indexOf(this.$el);
if (index != this.line.order) {
this.$el.parentNode.insertBefore(
this.$el,
this.$el.parentNode.children[this.line.order]);
this.setElContent(this.line.currentTrans.content);
}
this.$el.parentNode.insertBefore(
this.$el,
this.$el.parentNode.children[this.line.order]);
this.setElContent(this.line.currentTrans.content);
},
'line.currentTrans': function(n, o) {
if (n!=undefined) {
......
......@@ -10,7 +10,7 @@
@click="toggleSort"
autocomplete="off"></button>
</div>
<div :class="'content-container ' + readDirection" ref="contentContainer">
<div :class="'content-container ' + $store.state.document.readDirection" ref="contentContainer">
<diploline v-for="line in $store.state.lines.all"
v-bind:line="line"
......@@ -41,12 +41,10 @@ import DiploLine from './DiploLine.vue';
export default Vue.extend({
mixins: [BasePanel],
props: ['readDirection'],
data() { return {
updatedLines : [],
createdLines : [],
movedLines:[],
};},
components: {
'diploline': DiploLine,
......
......@@ -3,17 +3,12 @@
<nav>
<div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
<slot></slot>
<extrainfo :object="object"
:document-name="documentName">
</extrainfo>
<extrainfo></extrainfo>
<extranav></extranav>
</div>
</nav>
<tabcontent :default-text-direction="defaultTextDirection"
:main-text-direction="mainTextDirection"
:read-direction="readDirection">
</tabcontent>
<tabcontent></tabcontent>
</div>
</template>
......@@ -24,7 +19,6 @@ import TabContent from './TabContent.vue';
export default {
props: [
'object',
'documentId',
'documentName',
'partId',
......@@ -79,6 +73,10 @@ export default {
async created() {
this.$store.commit('document/setId', this.documentId);
this.$store.commit('document/setName', this.documentName);
this.$store.commit('document/setDefaultTextDirection', this.defaultTextDirection);
this.$store.commit('document/setMainTextDirection', this.mainTextDirection);
this.$store.commit('document/setReadDirection', this.readDirection);
try {
await this.$store.dispatch('parts/fetchPart', this.partId);
let tr = userProfile.get('initialTranscriptions')
......
<template>
<div>
<div class="nav-div nav-item ml-2">
<span v-if="object" id="part-name">{{ documentName }}</span>
<span v-if="$store.state.document.name" id="part-name">{{ $store.state.document.name }}</span>
<span id="part-title" v-if="$store.state.parts.loaded">{{ $store.state.parts.title }} - {{ $store.state.parts.filename }} - ({{ imageSize }})</span>
<span class="loading" v-if="!$store.state.parts.loaded">Loading&#8230;</span>
</div>
......@@ -61,7 +61,6 @@
<script>
export default {
props: ['object', 'documentName'],
computed: {
imageSize() {
return this.$store.state.parts.image.size[0]+'x'+this.$store.state.parts.image.size[1];
......
......@@ -170,7 +170,7 @@ import { Segmenter } from "../../src/baseline.editor.js";
export default Vue.extend({
mixins: [BasePanel],
props: ["fullsizeimage", "mainTextDirection"],
props: ["fullsizeimage"],
data() {
return {
segmenter: { loaded: false },
......@@ -199,7 +199,7 @@ export default Vue.extend({
this.segmenter = new Segmenter(this.$img, {
delayInit: true,
idField: "pk",
defaultTextDirection: this.mainTextDirection.slice(-2),
defaultTextDirection: this.$store.state.document.mainTextDirection.slice(-2),
regionTypes: this.$store.state.document.types.regions.map((t) => t.name),
lineTypes: this.$store.state.document.types.lines.map((t) => t.name),
baselinesColor: beSettings["color-baselines"] || null,
......
......@@ -2,14 +2,14 @@
<div class="row">
<div class="col-sides">
<a id="next-part"
v-if="readDirection == 'rtl' && $store.state.parts.next"
v-if="$store.state.document.readDirection == 'rtl' && $store.state.parts.next"
href="#"
@click="getNext"
class="nav-btn nav-next"
title="Next (Page Down or Ctrl+Left Arrow)">
<i class="fas fa-angle-left"></i></a>
<a id="prev-part"
v-else-if="readDirection != 'rtl' && $store.state.parts.previous"
v-else-if="$store.state.document.readDirection != 'rtl' && $store.state.parts.previous"
href="#"
@click="getPrevious"
class="nav-btn nav-prev"
......@@ -42,7 +42,6 @@
<keep-alive>
<SegPanel v-if="visible_panels.segmentation && $store.state.parts.loaded"
v-bind:fullsizeimage="fullsizeimage"
v-bind:main-text-direction="mainTextDirection"
id="segmentation-panel"
ref="segPanel">
</SegPanel>
......@@ -50,8 +49,6 @@
<keep-alive>
<VisuPanel v-if="visible_panels.visualisation && $store.state.parts.loaded"
v-bind:default-text-direction="defaultTextDirection"
v-bind:read-direction="readDirection"
id="transcription-panel"
ref="visuPanel">
</VisuPanel>
......@@ -66,7 +63,7 @@
<div class="col-sides">
<a id="prev-part"
v-if="readDirection == 'rtl' && $store.state.parts.previous"
v-if="$store.state.document.readDirection == 'rtl' && $store.state.parts.previous"
@click="getPrevious"
href="#"
class="nav-btn nav-prev"
......@@ -74,7 +71,7 @@
<i class="fas fa-angle-right"></i>
</a>
<a id="next-part"
v-else-if="readDirection != 'rtl' && $store.state.parts.next"
v-else-if="$store.state.document.readDirection != 'rtl' && $store.state.parts.next"
@click="getNext"
href="#"
class="nav-btn nav-next"
......@@ -92,7 +89,6 @@ import VisuPanel from './VisuPanel.vue';
import DiploPanel from './DiploPanel.vue';
export default {
props: ['readDirection', 'defaultTextDirection', 'mainTextDirection'],
data: function() {
return {
zoom: new WheelZoom(),
......
......@@ -7,10 +7,10 @@
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<button v-if="readDirection == 'rtl'"
<button v-if="$store.state.document.readDirection == 'rtl'"
type="button"
id="next-btn"
@click="$parent.editNext()"
@click="$store.dispatch('lines/editLine', 'next')"
title="Next"
class="btn btn-sm mr-1 btn-secondary">
<i class="fas fa-arrow-circle-left"></i>
......@@ -18,16 +18,16 @@
<button v-else
type="button"
id="prev-btn"
@click="$parent.editPrevious()"
@click="$store.dispatch('lines/editLine', 'previous')"
title="Previous"
class="btn btn-sm mr-1 btn-secondary">
<i class="fas fa-arrow-circle-left"></i>
</button>
<button v-if="readDirection == 'rtl'"
<button v-if="$store.state.document.readDirection == 'rtl'"
type="button"
id="prev-btn"
@click="$parent.editPrevious()"
@click="$store.dispatch('lines/editLine', 'previous')"
title="Previous"
class="btn btn-sm mr-1 btn-secondary">
<i class="fas fa-arrow-circle-right"></i>
......@@ -35,7 +35,7 @@
<button v-else
type="button"
id="next-btn"
@click="$parent.editNext()"
@click="$store.dispatch('lines/editLine', 'next')"
title="Next"
class="btn btn-sm mr-1 btn-secondary">
<i class="fas fa-arrow-circle-right"></i>
......@@ -51,7 +51,7 @@
<span aria-hidden="true">&times;</span>
</button>
</div>
<div :class="'modal-body ' + defaultTextDirection">
<div :class="'modal-body ' + $store.state.document.defaultTextDirection">
<div id="modal-img-container" ref="modalImgContainer" width="80%">
<img id="line-img"
v-bind:src="modalImgSrc"
......@@ -70,9 +70,9 @@
</div>
<div id="trans-input-container" ref="transInputContainer">
<input v-on:keyup.down="$parent.editNext"
v-on:keyup.up="$parent.editPrevious"
v-on:keyup.enter="$parent.editNext"
<input v-on:keyup.down="$store.dispatch('lines/editLine', 'next')"
v-on:keyup.up="$store.dispatch('lines/editLine', 'previous')"
v-on:keyup.enter="$store.dispatch('lines/editLine', 'next')"
id="trans-input"
ref="transInput"
name="content"
......@@ -162,7 +162,7 @@ import HelpVersions from './HelpVersions.vue';
import HelpCompareTranscriptions from './HelpCompareTranscriptions.vue';
export default Vue.extend({
props: ['readDirection', 'defaultTextDirection', 'line'],
props: ['line'],
components: {
LineVersion,
HelpVersions,
......@@ -171,7 +171,7 @@ export default Vue.extend({
created() {
// make sure that typing in the input doesnt trigger keyboard shortcuts
$(document).on('hide.bs.modal', '#trans-modal', function(ev) {
this.$parent.editLine = null;
this.$store.dispatch('lines/toggleLineEdition', null);
this.$store.commit('document/setBlockShortcuts', false);
}.bind(this));
......@@ -344,7 +344,7 @@ export default Vue.extend({
input.style.fontSize = fontSize+'px';
input.style.height = Math.round(fontSize*1.1)+'px';
if (this.readDirection == 'rtl') {
if (this.$store.state.document.readDirection == 'rtl') {
container.style.marginRight = context+'px';
} else {
// left to right
......
......@@ -10,7 +10,7 @@
fill="none"
v-bind:stroke="pathStrokeColor"
v-bind:d="baselinePoints"></path>
<text :text-anchor="'end' ? textDirection : ''"
<text :text-anchor="'end' ? $store.state.document.defaultTextDirection : ''"
ref="textElement"
lengthAdjust="spacingAndGlyphs">
<textPath v-bind:href="'#' + textPathId"
......@@ -26,7 +26,6 @@ import { LineBase } from '../../src/editor/mixins.js';
export default Vue.extend({
mixins: [LineBase],
props: ['textDirection'],
watch: {
'line.currentTrans.content': function(n, o) {
this.$nextTick(this.reset);
......@@ -70,7 +69,7 @@ export default Vue.extend({
},
edit() {
this.$parent.editLine = this.line;
this.$store.dispatch('lines/toggleLineEdition', this.line);
},
reset() {
this.computeLineHeight();
......
......@@ -6,10 +6,9 @@
</div>
<div class="content-container">
<div id="visu-zoom-container" class="content">
<svg :class="'w-100 ' + defaultTextDirection">
<svg :class="'w-100 ' + $store.state.document.defaultTextDirection">
<visuline v-for="line in $store.state.lines.all"
ref="visulines"
v-bind:text-direction="defaultTextDirection"
v-bind:line="line"
v-bind:ratio="ratio"
v-bind:key="'VL' + line.pk">
......@@ -18,10 +17,8 @@
</div>
</div>
<TranscriptionModal v-if="editLine"
v-bind:line="editLine"
v-bind:default-text-direction="defaultTextDirection"
v-bind:read-direction="readDirection">
<TranscriptionModal v-if="$store.state.lines.editedLine"
v-bind:line="$store.state.lines.editedLine">
</TranscriptionModal>
</div>
</template>
......@@ -36,10 +33,6 @@ import TranscriptionModal from './TranscriptionModal.vue';
export default Vue.extend({
mixins: [BasePanel],
props: ['readDirection', 'defaultTextDirection'],
data() { return {
editLine: null
};},
components: {
'visuline': VisuLine,
TranscriptionModal,
......@@ -53,18 +46,6 @@ export default Vue.extend({
}.bind(this));
},
methods: {
editNext() {
let index = this.$store.state.lines.all.indexOf(this.editLine);
if(index < this.$store.state.lines.all.length - 1) {
this.editLine = this.$store.state.lines.all[index + 1];
}
},
editPrevious() {
let index = this.$store.state.lines.all.indexOf(this.editLine);
if(index >= 1) {
this.editLine = this.$store.state.lines.all[index - 1];
}
},
resetLines() {
if (this.$store.state.lines.all.length && this.$refs.visulines.length) {
this.$refs.visulines.forEach(function(line) {
......
Markdown is supported
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