Skip to content
This repository was archived by the owner on Jan 4, 2021. It is now read-only.

Commit 9ebfb65

Browse files
author
Francois-Xavier Gentilhomme
committed
[DOC] documenation update
1 parent e96b01d commit 9ebfb65

File tree

1 file changed

+91
-137
lines changed

1 file changed

+91
-137
lines changed

‎docs/components/myscript-text-web/myscript-text-web.html

Lines changed: 91 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -25,46 +25,70 @@
2525
--myscript-common-element-button-focus-background: var(--myscript-text-web-button-focus-background);
2626
--myscript-common-element-button-disabled-background: var(--myscript-text-web-button-disabled-background);
2727
}
28+
2829
myscript-common-element {
29-
height: 100%;
30-
}
31-
myscript-common-element.result {
3230
height: calc(100% - 100px);
3331
}
32+
3433
.resultField {
3534
overflow: auto;
3635
text-align: center;
3736
font-size: xx-large;
3837
min-height: 95px;
3938
max-height: 95px;
40-
color: #1580CD;
41-
}
42-
span[selected] {
43-
color: #FFFFFF;
44-
background-color: #1580CD;
4539
}
46-
span[selected] * {
47-
color: inherit;
48-
background-color: inherit;
40+
41+
.resultField[hidden] + myscript-common-element {
42+
height: 100%;
4943
}
44+
5045
.text {
46+
color: #1580CD;
5147
background-color: #EDF0F2;
5248
font-size: 1.75rem;
5349
padding: .5rem .75rem;
5450
border-radius: 3px;
5551
cursor: pointer;
5652
}
53+
54+
.text[selected] {
55+
color: #FFFFFF;
56+
background-color: #1580CD;
57+
}
58+
59+
.candidate[selected] * {
60+
color: inherit;
61+
background-color: inherit;
62+
}
63+
5764
.char.predicted {
5865
color: #73818C;
5966
}
67+
6068
.char.completed {
6169
color: #1A9FFF;
6270
}
6371
</style>
6472
<template>
6573
<div class="resultField" hidden="[[ displayResultZone(hideresult, unloaded) ]]">
66-
<template is="dom-repeat" id="candidateList" items="[[ candidates ]]" as="candidate">
67-
<span id="candidate" index="[[ index ]]" selected$="[[ candidate.selected ]]" inner-h-t-m-l="[[ candidate.customlabel ]]" on-tap="_select"></span>
74+
<template is="dom-repeat" id="textCandidateList" items="[[ candidates ]]" as="textCandidate" index-as="textIndex">
75+
<span class$="text {{ _getCandidateFlags(candidate) }}" selected$="[[ _isSelected(textIndex, result.textSegmentResult.selectedCandidateIdx) ]]" on-tap="_select">
76+
<template is="dom-if" if="[[ !textCandidate.children ]]">
77+
{{ textCandidate.label }}
78+
</template>
79+
<template is="dom-if" if="[[ textCandidate.children ]]"><!--WARN: templates needs to be inline to avoid carriage return after span-->
80+
<template is="dom-repeat" id="wordCandidateList" items="[[ _getChildCandidates(textCandidate, result, 'text') ]]" as="wordCandidate">
81+
<span class$="word {{ _getCandidateFlags(wordCandidate) }}">
82+
<template is="dom-if" if="[[ !wordCandidate.children ]]">
83+
{{ wordCandidate.label }}
84+
</template>
85+
<template is="dom-if" if="[[ wordCandidate.children ]]">
86+
<template is="dom-repeat" id="charCandidateList" items="[[ _getChildCandidates(wordCandidate, result, 'word') ]]" as="charCandidate"><span class$="char {{ _getCandidateFlags(charCandidate) }}">{{ charCandidate.label }}</span></template>
87+
</template>
88+
</span>
89+
</template>
90+
</template>
91+
</span>
6892
</template>
6993
</div>
7094
<myscript-common-element
@@ -147,16 +171,18 @@
147171
myscriptTextWebElement.result = {};
148172
myscriptTextWebElement.resultlabel = '';
149173
myscriptTextWebElement.candidates = [];
174+
175+
if (eventDetail.recognitionResult && eventDetail.recognitionResult['text/plain']) {
176+
myscriptTextWebElement.resultlabel = eventDetail.recognitionResult['text/plain'];
177+
}
150178
if (eventDetail.rawResult &&
151179
eventDetail.rawResult.result &&
152180
eventDetail.rawResult.result.textSegmentResult &&
153181
eventDetail.rawResult.result.textSegmentResult.candidates) {
154182

155183
myscriptTextWebElement.result = eventDetail.rawResult.result;
156-
myscriptTextWebElement.resultlabel = eventDetail.rawResult.result.textSegmentResult.candidates[eventDetail.rawResult.result.textSegmentResult.selectedCandidateIdx].label;
157-
myscriptTextWebElement.candidates = eventDetail.rawResult.result.textSegmentResult.candidates;
158-
myscriptTextWebElement.candidates[eventDetail.rawResult.result.textSegmentResult.selectedCandidateIdx].selected = true; // FIXME: ugly hack to mark selected candidate
159-
textUpdateCandidatesCustomLabel(myscriptTextWebElement);
184+
myscriptTextWebElement.resultlabel = myscriptTextWebElement.result.textSegmentResult.candidates[myscriptTextWebElement.result.textSegmentResult.selectedCandidateIdx].label;
185+
myscriptTextWebElement.candidates = myscriptTextWebElement.result.textSegmentResult.candidates;
160186
}
161187
}
162188

@@ -168,73 +194,12 @@
168194
}
169195
}
170196

171-
/**
172-
* Update custom label of candidates by theirs owns properties
173-
*/
174-
function textUpdateCandidatesCustomLabel(myscriptTextWebElement) {
175-
var result = myscriptTextWebElement.result;
176-
result.textSegmentResult.candidates.forEach(function (candidate) {
177-
var textClasses = ['text', 'myscript-text-web'];
178-
var textFlags = myscriptTextWebElement._getFlagsClasses(candidate);
179-
if (textFlags) {
180-
textClasses.push(textFlags);
181-
}
182-
var textLabel = '<span class="' + textClasses.join(' ') + '">';
183-
if (result.wordSegments && result.wordSegments.length > -1) {
184-
candidate.children.forEach(function(textChild) {
185-
var wordCandidateIndex = textChild.selectedCandidateIdx;
186-
var wordInkRanges = textChild.inkRanges;
187-
result.wordSegments.forEach(function (wordSegment) {
188-
if (wordSegment.inkRanges === wordInkRanges) {
189-
var wordCandidate = wordSegment.candidates[wordCandidateIndex];
190-
if (wordCandidate) {
191-
var wordClasses = ['word', 'myscript-text-web'];
192-
var wordFlags = myscriptTextWebElement._getFlagsClasses(candidate);
193-
if (wordFlags) {
194-
wordClasses.push(wordFlags);
195-
}
196-
var wordLabel = '<span class="' + wordClasses.join(' ') + '">';
197-
if (!result.charSegments || result.charSegments.length <= 0) {
198-
wordLabel += wordCandidate.label;
199-
} else {
200-
wordCandidate.children.forEach(function(charSegmentItem, index) {
201-
var charClasses = ['char', 'myscript-text-web'];
202-
var charFlags = myscriptTextWebElement._getFlagsClasses(candidate);
203-
// if (charFlags) {
204-
// charClasses.push(charFlags);
205-
// }
206-
var charLabel = '<span class="' + charClasses.join(' ') + '">';
207-
if (!(charSegmentItem.inkRanges && charSegmentItem.inkRanges.length > 0)) {
208-
if (wordCandidate.flags.indexOf('PREDICTED') > -1) {
209-
charLabel = '<span class="char predicted myscript-text-web">';
210-
} else if (wordCandidate.flags.indexOf('COMPLETED') > -1) {
211-
charLabel = '<span class="char completed myscript-text-web">';
212-
}
213-
}
214-
charLabel += wordCandidate.label.charAt(index);
215-
charLabel += '</span>';
216-
wordLabel += charLabel;
217-
});
218-
}
219-
wordLabel += '</span>';
220-
textLabel += wordLabel;
221-
}
222-
}
223-
});
224-
});
225-
}
226-
candidate.customlabel = textLabel + '</span>';
227-
});
228-
}
229-
230197
function textAttachElementToDom(myscriptTextWebElement) {
231198
if (myscriptTextWebElement.unloaded !== true && myscriptTextWebElement.connected === true) {
232199

233200
myscriptTextWebElement.myscriptcommonelement = textQsWrapper(myscriptTextWebElement).querySelector('myscript-common-element');
234-
//myscriptTextWebElement.myscriptcommonelement.unloaded = false;
235201
myscriptTextWebElement.myscriptcommonelement.options = { recognitionParams: { textParameter: textBuildOptionsFromTextParam(myscriptTextWebElement) } };
236202
myscriptTextWebElement.myscriptcommonelement.removeAttribute('unloaded');
237-
myscriptTextWebElement.hideresultChanged(myscriptTextWebElement.hideresult);
238203

239204
myscriptTextWebElement.myscriptcommonelement.addEventListener('myscript-common-element-change', function (event) {
240205
LOG("text change intercepted", event);
@@ -495,8 +460,7 @@
495460
*/
496461
hideresult: {
497462
type: Boolean,
498-
value: false,
499-
observer: 'hideresultChanged'
463+
value: false
500464
},
501465
/**
502466
* The recognition language used by the recognition process.
@@ -521,7 +485,7 @@
521485
*/
522486
resultdetail: {
523487
type: String,
524-
value: 'CHARACTER'
488+
value: 'WORD'
525489
},
526490
/**
527491
* The content types to use for the recognition.
@@ -548,7 +512,7 @@
548512
value: []
549513
},
550514
/**
551-
* List of user resources to use for recognitions. Thoses user ressources have to be attached to the user account where application is declare.
515+
* List of user resources to use for recognitions. Theses user resources have to be attached to the user account where application is declare.
552516
* @type {Array}
553517
*/
554518
userresources: {
@@ -561,7 +525,7 @@
561525
*/
562526
textcandidatelistsize: {
563527
type: Number,
564-
value: 3
528+
value: 1
565529
},
566530
/**
567531
* The size of the candidate lists that will be provided at the word level in the recognition result.
@@ -577,15 +541,15 @@
577541
*/
578542
wordpredictionlistsize: {
579543
type: Number,
580-
value: 1
544+
value: 0
581545
},
582546
/**
583547
* The size of the candidate completion lists that will be provided at the word level in the recognition result.
584548
* This value must be between `0` and `20`.
585549
*/
586550
wordcompletionlistsize: {
587551
type: Number,
588-
value: 1
552+
value: 0
589553
},
590554
/**
591555
* The size of the candidate lists that will be provided at the character level in the recognition result.
@@ -720,18 +684,6 @@
720684
//-----------------------------------------------------------------------
721685
//--------- Wrapping END ------------
722686
//-----------------------------------------------------------------------
723-
/**
724-
*
725-
*/
726-
hideresultChanged: function (hideresult) {
727-
if (this.myscriptcommonelement) {
728-
if (hideresult) {
729-
this.myscriptcommonelement.classList.remove('result');
730-
} else {
731-
this.myscriptcommonelement.classList.add('result');
732-
}
733-
}
734-
},
735687
unloadedChanged: function (newUnloadValue) {
736688
LOG('text unloaded changed', newUnloadValue);
737689
this.unloaded = newUnloadValue;
@@ -765,56 +717,58 @@
765717
this.result = {};
766718
this.result = result;
767719
},
768-
/**
769-
* Determine if the candidate is selected
770-
* @param candidate
771-
* @param result
772-
* @returns {boolean}
773-
* @private
774-
*/
775-
_isSelected: function (candidate, result) {
776-
if (result && result.textSegmentResult) {
777-
return (candidate === result.textSegmentResult.candidates[result.textSegmentResult.selectedCandidateIdx]);
778-
}
779-
return false;
720+
_isSelected: function (index, selectedIndex) {
721+
return index === selectedIndex;
780722
},
781-
_getWordCandidates: function (candidate, result) {
782-
var wordCandidates = undefined;
783-
if (result.wordSegments && result.wordSegments.length > -1) {
784-
wordCandidates = [];
785-
candidate.children.forEach(function (textChild) {
786-
var wordCandidateIndex = textChild.selectedCandidateIdx;
787-
var wordInkRanges = textChild.inkRanges;
788-
result.wordSegments.forEach(function (wordSegment) {
789-
if (wordSegment.inkRanges === wordInkRanges) {
790-
wordCandidates.push(wordSegment.candidates[wordCandidateIndex])
723+
_getChildSegments: function (candidate, result, type) {
724+
var segments = [];
725+
726+
function addSegment(child, segment) {
727+
if (segment.inkRanges === child.inkRanges) {
728+
segment.selectedCandidateIdx = child.selectedCandidateIdx;
729+
segments.push(segment);
730+
}
731+
}
732+
733+
if (candidate.children) {
734+
candidate.children.forEach(function (child, index) {
735+
if (type === 'text' && result.wordSegments && result.wordSegments.length > -1) {
736+
result.wordSegments.forEach(function (segment) {
737+
addSegment(child, segment);
738+
});
739+
} else if (type === 'word' && result.charSegments && result.charSegments.length > -1) {
740+
if (!child.inkRanges) {
741+
var seg = {
742+
candidates: [{
743+
label: candidate.label.charAt(index),
744+
flags: candidate.flags
745+
}],
746+
selectedCandidateIdx: 0
747+
};
748+
segments.push(seg);
749+
} else {
750+
result.charSegments.forEach(function (segment) {
751+
addSegment(child, segment);
752+
});
791753
}
792-
});
754+
}
793755
});
794756
}
795-
return wordCandidates;
757+
return segments;
796758
},
797-
_getCharCandidates: function (candidate, result) {
798-
var charCandidates = undefined;
799-
if (result.wordSegments && result.wordSegments.length > -1) {
800-
charCandidates = [];
801-
candidate.children.forEach(function (wordChild) {
802-
var charCandidateIndex = wordChild.selectedCandidateIdx;
803-
var charInkRanges = wordChild.inkRanges;
804-
result.charSegments.forEach(function (charSegment) {
805-
if (charSegment.inkRanges === charInkRanges) {
806-
charCandidates.push(charSegment.candidates[charCandidateIndex])
807-
}
808-
});
759+
_getChildCandidates: function (candidate, result, type) {
760+
var candidates = [];
761+
this._getChildSegments(candidate, result, type)
762+
.forEach(function (segment) {
763+
candidates.push(segment.candidates[segment.selectedCandidateIdx]);
809764
});
810-
}
811-
return charCandidates;
765+
return candidates;
812766
},
813-
_getFlagsClasses: function (candidate) {
767+
_getCandidateFlags: function (candidate) {
814768
if (candidate.flags) {
815769
return candidate.flags.join(' ').toLowerCase();
816770
}
817-
return false;
771+
return '';
818772
}
819773
})
820774
;

0 commit comments

Comments
 (0)