[DEV] Better multiple inputs example

Author: RomainCscn

examples/index.html

@@ -108,6 +108,21 @@ <h2>V4 - iink SDK web</h2>
             </svg>
             Get source code</a>
         </div>
+        <p><strong>Use multiple inputs fields</strong></p>
+        <div class="center">
+          <a href="v4/multiple_inputs.html" class="btn">
+            <svg class="icn">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-play"></use>
+            </svg>
+            View example</a>
+          <a
+            href="https://github.com/MyScript/MyScriptJS/blob/master/examples/v4/multiple_inputs.html"
+            class="btn">
+            <svg class="icn">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icn-github"></use>
+            </svg>
+            Get source code</a>
+        </div>
         <p><strong>Custom resource text</strong></p>
         <div class="center">
           <a href="v4/custom_resources_text.html" class="btn">

examples/v4/multiple_inputs.html

@@ -63,330 +63,11 @@
     </div>
     <button class="classic-btn" id="convert" disabled>Convert</button>
   </nav>
-  <main>
-    <label for="input1">
-      Your 1st input
-    </label>
-    <div class="input" touch-action="none" id="input1"></div>
-    <label for="input2">
-      Your 2nd input
-    </label>
-    <div class="input" touch-action="none" id="input2"></div>
-    <label for="input3">
-      Your 3rd input
-    </label>
-    <div class="input" touch-action="none" id="input3"></div>
-    <label for="input4">
-      Your 4th input
-    </label>
-    <div class="input" touch-action="none" id="input4"></div>
+  <main id="mainContent">
   </main>
   <div id="editor" touch-action="none"></div>
   <div id="editor2" touch-action="none"></div>
 </div>
-<script>
-  let waitingForIdle = false;
-  let pointerDownOnInput = false;
-  let pointerDownOnInputPoint;
-  let clearForIdle;
-  let selectedInput;
-  let oldInput;
-  let selectedEditor = 0;
-
-  const editorElement = document.getElementById('editor');
-  const editorElement2 = document.getElementById('editor2');
-  let editorElementRef = editorElement;
-
-  const undoElement = document.getElementById('undo');
-  const redoElement = document.getElementById('redo');
-  const convertElement = document.getElementById('convert');
-
-  const input1 = document.getElementById('input1');
-  const input2 = document.getElementById('input2');
-  const input3 = document.getElementById('input3');
-  const input4 = document.getElementById('input4');
-
-  const inputValues = new Map();
-  inputValues.set(input1.id, '');
-  inputValues.set(input2.id, '');
-  inputValues.set(input3.id, '');
-  inputValues.set(input4.id, '');
-
-  function extractPoint(event, domElement, configuration, offsetTop = 0, offsetLeft = 0) {
-    let eventRef = event;
-    if (eventRef.changedTouches) {
-      eventRef = eventRef.changedTouches[0];
-    }
-    const rect = domElement.getBoundingClientRect();
-    return {
-      x: roundFloat(eventRef.clientX - rect.left - domElement.clientLeft - offsetLeft, configuration.xyFloatPrecision),
-      y: roundFloat(eventRef.clientY - rect.top - domElement.clientTop - offsetTop, configuration.xyFloatPrecision),
-      t: roundFloat(Date.now(), configuration.timestampFloatPrecision)
-    };
-  }
-
-  const floatPrecisionArray = [1, 10, 100, 1000, 10000, 100000, 1000000, 10000000, 100000000, 1000000000];
-
-  function roundFloat(oneFloat, requestedFloatPrecision) {
-    if (requestedFloatPrecision || requestedFloatPrecision === 0) {
-      let floatPrecision;
-      if (requestedFloatPrecision > 10) {
-        floatPrecision = floatPrecisionArray[10];
-      } else {
-        floatPrecision = floatPrecisionArray[requestedFloatPrecision];
-      }
-      return Math.round(oneFloat * floatPrecision) / floatPrecision;
-    }
-    return oneFloat;
-  }
-
-  function addChangedListeners(editors) {
-    editors.forEach(function (editor) {
-      editor.addEventListener('changed', function (event) {
-        undoElement.disabled = !event.detail.canUndo;
-        redoElement.disabled = !event.detail.canRedo;
-        convertElement.disabled = event.detail.isEmpty;
-      });
-    });
-  }
-
-  undoElement.addEventListener('click', function () {
-    editorElementRef.editor.undo();
-  });
-  redoElement.addEventListener('click', function () {
-    editorElementRef.editor.redo();
-  });
-  convertElement.addEventListener('click', function () {
-    editorElementRef.editor.convert();
-  });
-
-  function addIdleListeners(editors) {
-    editors.forEach(function (editor) {
-      editor.addEventListener('idle', function () {
-        if (waitingForIdle) {
-          if (editor.editor.exports) {
-            inputValues.set(oldInput.id, editor.editor.exports['text/plain']);
-          }
-          const childModel = editor.querySelector('svg:nth-child(3)')
-            .cloneNode(true);
-          const childBackground = editor.querySelector('svg:nth-child(4)')
-            .cloneNode(true);
-          childModel.style.zIndex = '10';
-          childBackground.style.zIndex = '10';
-          while (oldInput.firstChild) {
-            oldInput.removeChild(oldInput.firstChild);
-          }
-          oldInput.appendChild(childBackground);
-          oldInput.appendChild(childModel);
-          editor.style.display = 'none';
-          editor.editor.clear();
-          clearForIdle = true;
-          waitingForIdle = false;
-        }
-      });
-    });
-  }
-
-  function addInputsPointerDownListener(inputId) {
-    const input = document.getElementById(inputId);
-    input.addEventListener('pointerdown', function (event) {
-      pointerDownOnInput = true;
-      pointerDownOnInputPoint = extractPoint(event, input, editorElementRef.editor.configuration);
-      if (selectedInput !== input) {
-        if (editorElementRef) {
-          if (selectedInput) {
-            oldInput = selectedInput;
-            editorElementRef.editor.convert();
-            editorElementRef.editor.waitForIdle();
-            waitingForIdle = true;
-          }
-        }
-        clearForIdle = false;
-        selectedEditor === 0 ? editorElementRef = editorElement : editorElementRef = editorElement2;
-        selectedInput = input;
-        editorElementRef.style.width = `${event.target.clientWidth}px`;
-        editorElementRef.style.height = `${event.target.clientHeight}px`;
-        editorElementRef.style.display = 'block';
-        editorElementRef.style.position = 'absolute';
-        editorElementRef.style.left = `${event.target.tagName === 'svg' ? event.target.parentElement.offsetLeft + 1 : event.target.offsetLeft + 1}px`;
-        editorElementRef.style.top = `${event.target.tagName === 'svg' ? event.target.parentElement.offsetTop + 1 : event.target.offsetTop + 1}px`;
-        editorElementRef.style.background = 'white';
-        const inputValue = inputValues.get(selectedInput.id);
-        if (inputValue) {
-          console.log(inputValue);
-          editorElementRef.editor.import_(inputValue, 'text/plain');
-        }
-        editorElementRef.editor.resize();
-        selectedEditor === 0 ? selectedEditor = 1 : selectedEditor = 0;
-      }
-    });
-    input.addEventListener('pointermove', function (event) { // Trigger a pointerMove
-      console.log('move');
-      if (this.activePointerId && this.activePointerId === event.pointerId) {
-        editorElementRef.editor.pointerMove(extractPoint(event, editorElementRef.editor.domElement, editorElementRef.editor.configuration));
-      }
-      else if (pointerDownOnInput) {
-        const point = extractPoint(event, editorElementRef.editor.domElement, editorElementRef.editor.configuration);
-        const diffX = Math.abs(pointerDownOnInputPoint.x - point.x);
-        const diffY = Math.abs(pointerDownOnInputPoint.y - point.y);
-        // mMaxDiffX = Math.max(diffX, mMaxDiffX);
-        const cond1 = diffX < 1 && diffY > 1; // && mMaxDiffX < 15;
-        const cond2 = diffX > 1 && diffY > 1; // && mMaxDiffX < 15;
-        if (cond1 || cond2) {
-          this.activePointerId = event.pointerId;
-          // Hack for iOS 9 Safari : pointerId has to be int so -1 if > max value
-          const pointerId = event.pointerId > 2147483647 ? -1 : event.pointerId;
-          editorElementRef.editor.pointerDown(pointerDownOnInputPoint, event.pointerType, pointerId);
-        }
-      }
-    });
-    input.addEventListener('pointerup', function (event) { // Trigger a pointerMove
-      pointerDownOnInput = false;
-      if (this.activePointerId && this.activePointerId === event.pointerId) { // Only considering the active pointer
-        this.activePointerId = undefined; // Managing the active pointer
-        event.stopPropagation();
-        editorElementRef.editor.pointerUp(extractPoint(event, editorElementRef.editor.domElement, editorElementRef.editor.configuration));
-      }
-    });
-  }
-
-  function attach(element, editor) {
-
-    function unfocus() {
-      if (window.getSelection().type !== 'None') {
-        window.getSelection()
-          .removeAllRanges();
-      }
-    }
-
-    const context = {
-      options: { passive: true },
-      listeners: [{
-        types: ['pointerdown'],
-        listener:
-          function pointerDownHandler(evt) { // Trigger a pointerDown
-            console.log('okok');
-            const pointerDownOnEditor = evt.target.id === editor.domElement.id || evt.target.classList.contains('ms-canvas');
-            if (this.activePointerId) {
-              if (this.activePointerId === evt.pointerId) {
-                console.log(`${evt.type} event with the same id without any pointer up`, evt.pointerId);
-              }
-            } else if ((evt.button !== 2) && (evt.buttons !== 2) && pointerDownOnEditor) { // Ignore right click
-              this.activePointerId = evt.pointerId;
-              // Hack for iOS 9 Safari : pointerId has to be int so -1 if > max value
-              const pointerId = evt.pointerId > 2147483647 ? -1 : evt.pointerId;
-              unfocus();
-              evt.stopPropagation();
-              editor.pointerDown(extractPoint(evt, element, editor.configuration), evt.pointerType, pointerId);
-            }
-          }
-      }, {
-        types: ['pointermove'],
-        listener:
-          function pointerMoveHandler(evt) { // Trigger a pointerMove
-            console.log('move');
-            // Only considering the active pointer
-            if (this.activePointerId && this.activePointerId === evt.pointerId) {
-              unfocus();
-              editor.pointerMove(extractPoint(evt, element, editor.configuration));
-            } else if (pointerDownOnInput) {
-              const point = extractPoint(evt, element, editor.configuration);
-              const diffX = Math.abs(pointerDownOnInputPoint.x - point.x);
-              const diffY = Math.abs(pointerDownOnInputPoint.y - point.y);
-              // mMaxDiffX = Math.max(diffX, mMaxDiffX);
-              const cond1 = diffX < 1 && diffY > 1; // && mMaxDiffX < 15;
-              const cond2 = diffX > 1 && diffY > 1; // && mMaxDiffX < 15;
-              if (cond1 || cond2) {
-                this.activePointerId = evt.pointerId;
-                // Hack for iOS 9 Safari : pointerId has to be int so -1 if > max value
-                unfocus();
-                const pointerId = evt.pointerId > 2147483647 ? -1 : evt.pointerId;
-                editor.pointerDown(pointerDownOnInputPoint, evt.pointerType, pointerId);
-              }
-            }
-          }
-      }, {
-        types: ['pointerup'],
-        listener:
-          function pointerUpHandler(evt) { // Trigger a pointerUp
-            pointerDownOnInput = false;
-            if (this.activePointerId && this.activePointerId === evt.pointerId) { // Only considering the active pointer
-              this.activePointerId = undefined; // Managing the active pointer
-              evt.stopPropagation();
-              editor.pointerUp(extractPoint(evt, element, editor.configuration));
-            }
-          }
-      }]
-    };
-
-    context.listeners.forEach((item) => {
-      item.types.forEach(type => element.addEventListener(type, item.listener, context.options));
-    });
-    return context;
-  }
-
-  function detach(element, context) {
-    context.listeners.forEach((item) => {
-      item.types.forEach(type => element.removeEventListener(type, item.listener, context.options));
-    });
-  }
-
-  var customGrabber = {
-    attach: attach,
-    detach: detach
-  };
-
-  editorElement.addEventListener('loaded', function () {
-    editorElement.style.display = 'none';
-    editorElement2.style.display = 'none';
-  });
-
-  function initEditors(editors) {
-    editors.forEach(function (editorElement) {
-      MyScript.register(editorElement, {
-        recognitionParams: {
-          type: 'TEXT',
-          protocol: 'WEBSOCKET',
-          apiVersion: 'V4',
-          server: {
-            scheme: 'https',
-            host: 'webdemoapi.myscript.com',
-            applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
-            hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
-          },
-          v4: {
-            text: {
-              guide: {
-                enable: false
-              },
-              smartGuide: false,
-              margin: {
-                left: 10,
-                right: 10,
-                top: 5
-              }
-            }
-          }
-        }
-      }, undefined, undefined, {
-        grabber: customGrabber
-      });
-    });
-  }
-
-  initEditors([editorElement, editorElement2]);
-
-  for (const inputId of inputValues.keys()) {
-    addInputsPointerDownListener(inputId);
-  }
-
-  addIdleListeners([editorElement, editorElement2]);
-  addChangedListeners([editorElement, editorElement2]);
-
-  window.addEventListener('resize', function () {
-    editorElement.editor.resize();
-    editorElement2.editor.resize();
-  });
-</script>
+<script src="multiple_inputs.js"></script>
 </body>
 </html>