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

Commit 2103119

Browse files
RomainCscnRomainCscn
committed
[DEV] Better multiple inputs example
1 parent 7f843e1 commit 2103119

File tree

5 files changed

+330
-535
lines changed

5 files changed

+330
-535
lines changed

‎examples/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,21 @@ <h2>V4 - iink SDK web</h2>
108108
</svg>
109109
Get source code</a>
110110
</div>
111+
<p><strong>Use multiple inputs fields</strong></p>
112+
<div class="center">
113+
<a href="v4/multiple_inputs.html" class="btn">
114+
<svg class="icn">
115+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
116+
</svg>
117+
View example</a>
118+
<a
119+
href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/multiple_inputs.html"
120+
class="btn">
121+
<svg class="icn">
122+
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
123+
</svg>
124+
Get source code</a>
125+
</div>
111126
<p><strong>Custom resource text</strong></p>
112127
<div class="center">
113128
<a href="v4/custom_resources_text.html" class="btn">

‎examples/v4/multiple_inputs.html

Lines changed: 2 additions & 321 deletions
Original file line numberDiff line numberDiff line change
@@ -63,330 +63,11 @@
6363
</div>
6464
<button class="classic-btn" id="convert" disabled>Convert</button>
6565
</nav>
66-
<main>
67-
<label for="input1">
68-
Your 1st input
69-
</label>
70-
<div class="input" touch-action="none" id="input1"></div>
71-
<label for="input2">
72-
Your 2nd input
73-
</label>
74-
<div class="input" touch-action="none" id="input2"></div>
75-
<label for="input3">
76-
Your 3rd input
77-
</label>
78-
<div class="input" touch-action="none" id="input3"></div>
79-
<label for="input4">
80-
Your 4th input
81-
</label>
82-
<div class="input" touch-action="none" id="input4"></div>
66+
<main id="mainContent">
8367
</main>
8468
<div id="editor" touch-action="none"></div>
8569
<div id="editor2" touch-action="none"></div>
8670
</div>
87-
<script>
88-
let waitingForIdle = false;
89-
let pointerDownOnInput = false;
90-
let pointerDownOnInputPoint;
91-
let clearForIdle;
92-
let selectedInput;
93-
let oldInput;
94-
let selectedEditor = 0;
95-
96-
const editorElement = document.getElementById('editor');
97-
const editorElement2 = document.getElementById('editor2');
98-
let editorElementRef = editorElement;
99-
100-
const undoElement = document.getElementById('undo');
101-
const redoElement = document.getElementById('redo');
102-
const convertElement = document.getElementById('convert');
103-
104-
const input1 = document.getElementById('input1');
105-
const input2 = document.getElementById('input2');
106-
const input3 = document.getElementById('input3');
107-
const input4 = document.getElementById('input4');
108-
109-
const inputValues = new Map();
110-
inputValues.set(input1.id, '');
111-
inputValues.set(input2.id, '');
112-
inputValues.set(input3.id, '');
113-
inputValues.set(input4.id, '');
114-
115-
function extractPoint(event, domElement, configuration, offsetTop = 0, offsetLeft = 0) {
116-
let eventRef = event;
117-
if (eventRef.changedTouches) {
118-
eventRef = eventRef.changedTouches[0];
119-
}
120-
const rect = domElement.getBoundingClientRect();
121-
return {
122-
x: roundFloat(eventRef.clientX - rect.left - domElement.clientLeft - offsetLeft, configuration.xyFloatPrecision),
123-
y: roundFloat(eventRef.clientY - rect.top - domElement.clientTop - offsetTop, configuration.xyFloatPrecision),
124-
t: roundFloat(Date.now(), configuration.timestampFloatPrecision)
125-
};
126-
}
127-
128-
const floatPrecisionArray = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000];
129-
130-
function roundFloat(oneFloat, requestedFloatPrecision) {
131-
if (requestedFloatPrecision || requestedFloatPrecision === 0) {
132-
let floatPrecision;
133-
if (requestedFloatPrecision > 10) {
134-
floatPrecision = floatPrecisionArray[10];
135-
} else {
136-
floatPrecision = floatPrecisionArray[requestedFloatPrecision];
137-
}
138-
return Math.round(oneFloat * floatPrecision) / floatPrecision;
139-
}
140-
return oneFloat;
141-
}
142-
143-
function addChangedListeners(editors) {
144-
editors.forEach(function (editor) {
145-
editor.addEventListener('changed', function (event) {
146-
undoElement.disabled = !event.detail.canUndo;
147-
redoElement.disabled = !event.detail.canRedo;
148-
convertElement.disabled = event.detail.isEmpty;
149-
});
150-
});
151-
}
152-
153-
undoElement.addEventListener('click', function () {
154-
editorElementRef.editor.undo();
155-
});
156-
redoElement.addEventListener('click', function () {
157-
editorElementRef.editor.redo();
158-
});
159-
convertElement.addEventListener('click', function () {
160-
editorElementRef.editor.convert();
161-
});
162-
163-
function addIdleListeners(editors) {
164-
editors.forEach(function (editor) {
165-
editor.addEventListener('idle', function () {
166-
if (waitingForIdle) {
167-
if (editor.editor.exports) {
168-
inputValues.set(oldInput.id, editor.editor.exports['text/plain']);
169-
}
170-
const childModel = editor.querySelector('svg:nth-child(3)')
171-
.cloneNode(true);
172-
const childBackground = editor.querySelector('svg:nth-child(4)')
173-
.cloneNode(true);
174-
childModel.style.zIndex = '10';
175-
childBackground.style.zIndex = '10';
176-
while (oldInput.firstChild) {
177-
oldInput.removeChild(oldInput.firstChild);
178-
}
179-
oldInput.appendChild(childBackground);
180-
oldInput.appendChild(childModel);
181-
editor.style.display = 'none';
182-
editor.editor.clear();
183-
clearForIdle = true;
184-
waitingForIdle = false;
185-
}
186-
});
187-
});
188-
}
189-
190-
function addInputsPointerDownListener(inputId) {
191-
const input = document.getElementById(inputId);
192-
input.addEventListener('pointerdown', function (event) {
193-
pointerDownOnInput = true;
194-
pointerDownOnInputPoint = extractPoint(event, input, editorElementRef.editor.configuration);
195-
if (selectedInput !== input) {
196-
if (editorElementRef) {
197-
if (selectedInput) {
198-
oldInput = selectedInput;
199-
editorElementRef.editor.convert();
200-
editorElementRef.editor.waitForIdle();
201-
waitingForIdle = true;
202-
}
203-
}
204-
clearForIdle = false;
205-
selectedEditor === 0 ? editorElementRef = editorElement : editorElementRef = editorElement2;
206-
selectedInput = input;
207-
editorElementRef.style.width = `${event.target.clientWidth}px`;
208-
editorElementRef.style.height = `${event.target.clientHeight}px`;
209-
editorElementRef.style.display = 'block';
210-
editorElementRef.style.position = 'absolute';
211-
editorElementRef.style.left = `${event.target.tagName === 'svg' ? event.target.parentElement.offsetLeft + 1 : event.target.offsetLeft + 1}px`;
212-
editorElementRef.style.top = `${event.target.tagName === 'svg' ? event.target.parentElement.offsetTop + 1 : event.target.offsetTop + 1}px`;
213-
editorElementRef.style.background = 'white';
214-
const inputValue = inputValues.get(selectedInput.id);
215-
if (inputValue) {
216-
console.log(inputValue);
217-
editorElementRef.editor.import_(inputValue, 'text/plain');
218-
}
219-
editorElementRef.editor.resize();
220-
selectedEditor === 0 ? selectedEditor = 1 : selectedEditor = 0;
221-
}
222-
});
223-
input.addEventListener('pointermove', function (event) { // Trigger a pointerMove
224-
console.log('move');
225-
if (this.activePointerId && this.activePointerId === event.pointerId) {
226-
editorElementRef.editor.pointerMove(extractPoint(event, editorElementRef.editor.domElement, editorElementRef.editor.configuration));
227-
}
228-
else if (pointerDownOnInput) {
229-
const point = extractPoint(event, editorElementRef.editor.domElement, editorElementRef.editor.configuration);
230-
const diffX = Math.abs(pointerDownOnInputPoint.x - point.x);
231-
const diffY = Math.abs(pointerDownOnInputPoint.y - point.y);
232-
// mMaxDiffX = Math.max(diffX, mMaxDiffX);
233-
const cond1 = diffX < 1 && diffY > 1; // && mMaxDiffX < 15;
234-
const cond2 = diffX > 1 && diffY > 1; // && mMaxDiffX < 15;
235-
if (cond1 || cond2) {
236-
this.activePointerId = event.pointerId;
237-
// Hack for iOS 9 Safari : pointerId has to be int so -1 if > max value
238-
const pointerId = event.pointerId > 2147483647 ? -1 : event.pointerId;
239-
editorElementRef.editor.pointerDown(pointerDownOnInputPoint, event.pointerType, pointerId);
240-
}
241-
}
242-
});
243-
input.addEventListener('pointerup', function (event) { // Trigger a pointerMove
244-
pointerDownOnInput = false;
245-
if (this.activePointerId && this.activePointerId === event.pointerId) { // Only considering the active pointer
246-
this.activePointerId = undefined; // Managing the active pointer
247-
event.stopPropagation();
248-
editorElementRef.editor.pointerUp(extractPoint(event, editorElementRef.editor.domElement, editorElementRef.editor.configuration));
249-
}
250-
});
251-
}
252-
253-
function attach(element, editor) {
254-
255-
function unfocus() {
256-
if (window.getSelection().type !== 'None') {
257-
window.getSelection()
258-
.removeAllRanges();
259-
}
260-
}
261-
262-
const context = {
263-
options: { passive: true },
264-
listeners: [{
265-
types: ['pointerdown'],
266-
listener:
267-
function pointerDownHandler(evt) { // Trigger a pointerDown
268-
console.log('okok');
269-
const pointerDownOnEditor = evt.target.id === editor.domElement.id || evt.target.classList.contains('ms-canvas');
270-
if (this.activePointerId) {
271-
if (this.activePointerId === evt.pointerId) {
272-
console.log(`${evt.type} event with the same id without any pointer up`, evt.pointerId);
273-
}
274-
} else if ((evt.button !== 2) && (evt.buttons !== 2) && pointerDownOnEditor) { // Ignore right click
275-
this.activePointerId = evt.pointerId;
276-
// Hack for iOS 9 Safari : pointerId has to be int so -1 if > max value
277-
const pointerId = evt.pointerId > 2147483647 ? -1 : evt.pointerId;
278-
unfocus();
279-
evt.stopPropagation();
280-
editor.pointerDown(extractPoint(evt, element, editor.configuration), evt.pointerType, pointerId);
281-
}
282-
}
283-
}, {
284-
types: ['pointermove'],
285-
listener:
286-
function pointerMoveHandler(evt) { // Trigger a pointerMove
287-
console.log('move');
288-
// Only considering the active pointer
289-
if (this.activePointerId && this.activePointerId === evt.pointerId) {
290-
unfocus();
291-
editor.pointerMove(extractPoint(evt, element, editor.configuration));
292-
} else if (pointerDownOnInput) {
293-
const point = extractPoint(evt, element, editor.configuration);
294-
const diffX = Math.abs(pointerDownOnInputPoint.x - point.x);
295-
const diffY = Math.abs(pointerDownOnInputPoint.y - point.y);
296-
// mMaxDiffX = Math.max(diffX, mMaxDiffX);
297-
const cond1 = diffX < 1 && diffY > 1; // && mMaxDiffX < 15;
298-
const cond2 = diffX > 1 && diffY > 1; // && mMaxDiffX < 15;
299-
if (cond1 || cond2) {
300-
this.activePointerId = evt.pointerId;
301-
// Hack for iOS 9 Safari : pointerId has to be int so -1 if > max value
302-
unfocus();
303-
const pointerId = evt.pointerId > 2147483647 ? -1 : evt.pointerId;
304-
editor.pointerDown(pointerDownOnInputPoint, evt.pointerType, pointerId);
305-
}
306-
}
307-
}
308-
}, {
309-
types: ['pointerup'],
310-
listener:
311-
function pointerUpHandler(evt) { // Trigger a pointerUp
312-
pointerDownOnInput = false;
313-
if (this.activePointerId && this.activePointerId === evt.pointerId) { // Only considering the active pointer
314-
this.activePointerId = undefined; // Managing the active pointer
315-
evt.stopPropagation();
316-
editor.pointerUp(extractPoint(evt, element, editor.configuration));
317-
}
318-
}
319-
}]
320-
};
321-
322-
context.listeners.forEach((item) => {
323-
item.types.forEach(type => element.addEventListener(type, item.listener, context.options));
324-
});
325-
return context;
326-
}
327-
328-
function detach(element, context) {
329-
context.listeners.forEach((item) => {
330-
item.types.forEach(type => element.removeEventListener(type, item.listener, context.options));
331-
});
332-
}
333-
334-
var customGrabber = {
335-
attach: attach,
336-
detach: detach
337-
};
338-
339-
editorElement.addEventListener('loaded', function () {
340-
editorElement.style.display = 'none';
341-
editorElement2.style.display = 'none';
342-
});
343-
344-
function initEditors(editors) {
345-
editors.forEach(function (editorElement) {
346-
MyScript.register(editorElement, {
347-
recognitionParams: {
348-
type: 'TEXT',
349-
protocol: 'WEBSOCKET',
350-
apiVersion: 'V4',
351-
server: {
352-
scheme: 'https',
353-
host: 'webdemoapi.myscript.com',
354-
applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
355-
hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
356-
},
357-
v4: {
358-
text: {
359-
guide: {
360-
enable: false
361-
},
362-
smartGuide: false,
363-
margin: {
364-
left: 10,
365-
right: 10,
366-
top: 5
367-
}
368-
}
369-
}
370-
}
371-
}, undefined, undefined, {
372-
grabber: customGrabber
373-
});
374-
});
375-
}
376-
377-
initEditors([editorElement, editorElement2]);
378-
379-
for (const inputId of inputValues.keys()) {
380-
addInputsPointerDownListener(inputId);
381-
}
382-
383-
addIdleListeners([editorElement, editorElement2]);
384-
addChangedListeners([editorElement, editorElement2]);
385-
386-
window.addEventListener('resize', function () {
387-
editorElement.editor.resize();
388-
editorElement2.editor.resize();
389-
});
390-
</script>
71+
<script src="multiple_inputs.js"></script>
39172
</body>
39273
</html>

0 commit comments

Comments
 (0)