Merge branch 'feature-paste-performance'

src/core/Chef.js

@@ -35,10 +35,11 @@ const Chef = function() {
 */
 Chef.prototype.bake = async function(input, recipeConfig, options, progress, step) {
     log.debug("Chef baking");
-    let startTime  = new Date().getTime(),
+    const startTime  = new Date().getTime(),
         recipe     = new Recipe(recipeConfig),
         containsFc = recipe.containsFlowControl(),
-        error      = false;
+        notUTF8    = options && options.hasOwnProperty("treatAsUtf8") && !options.treatAsUtf8;
+    let error      = false;
 
     if (containsFc && ENVIRONMENT_IS_WORKER()) self.setOption("attemptHighlight", false);
 
@@ -80,13 +81,13 @@ Chef.prototype.bake = async function(input, recipeConfig, options, progress, ste
     // Depending on the size of the output, we may send it back as a string or an ArrayBuffer.
     // This can prevent unnecessary casting as an ArrayBuffer can be easily downloaded as a file.
     // The threshold is specified in KiB.
-    const threshold = (options.outputFileThreshold || 1024) * 1024;
+    const threshold = (options.ioDisplayThreshold || 1024) * 1024;
     const returnType = this.dish.size() > threshold ? Dish.ARRAY_BUFFER : Dish.STRING;
 
     return {
         result: this.dish.type === Dish.HTML ?
-            this.dish.get(Dish.HTML) :
+            this.dish.get(Dish.HTML, notUTF8) :
-            this.dish.get(returnType),
+            this.dish.get(returnType, notUTF8),
         type: Dish.enumLookup(this.dish.type),
         progress: progress,
         duration: new Date().getTime() - startTime,

src/core/Dish.js

@@ -136,11 +136,12 @@ Dish.prototype.set = function(value, type) {
  * Returns the value of the data in the type format specified.
  *
  * @param {number} type - The data type of value, see Dish enums.
+ * @param {boolean} [notUTF8] - Do not treat strings as UTF8.
  * @returns {byteArray|string|number|ArrayBuffer|BigNumber} The value of the output data.
  */
-Dish.prototype.get = function(type) {
+Dish.prototype.get = function(type, notUTF8) {
     if (this.type !== type) {
-        this.translate(type);
+        this.translate(type, notUTF8);
     }
     return this.value;
 };
@@ -150,9 +151,11 @@ Dish.prototype.get = function(type) {
  * Translates the data to the given type format.
  *
  * @param {number} toType - The data type of value, see Dish enums.
+ * @param {boolean} [notUTF8] - Do not treat strings as UTF8.
  */
-Dish.prototype.translate = function(toType) {
+Dish.prototype.translate = function(toType, notUTF8) {
     log.debug(`Translating Dish from ${Dish.enumLookup(this.type)} to ${Dish.enumLookup(toType)}`);
+    const byteArrayToStr = notUTF8 ? Utils.byteArrayToChars : Utils.byteArrayToUtf8;
 
     // Convert data to intermediate byteArray type
     switch (this.type) {
@@ -182,11 +185,11 @@ Dish.prototype.translate = function(toType) {
     switch (toType) {
         case Dish.STRING:
         case Dish.HTML:
-            this.value = this.value ? Utils.byteArrayToUtf8(this.value) : "";
+            this.value = this.value ? byteArrayToStr(this.value) : "";
             this.type = Dish.STRING;
             break;
         case Dish.NUMBER:
-            this.value = this.value ? parseFloat(Utils.byteArrayToUtf8(this.value)) : 0;
+            this.value = this.value ? parseFloat(byteArrayToStr(this.value)) : 0;
             this.type = Dish.NUMBER;
             break;
         case Dish.ARRAY_BUFFER:
@@ -195,7 +198,7 @@ Dish.prototype.translate = function(toType) {
             break;
         case Dish.BIG_NUMBER:
             try {
-                this.value = new BigNumber(Utils.byteArrayToUtf8(this.value));
+                this.value = new BigNumber(byteArrayToStr(this.value));
             } catch (err) {
                 this.value = new BigNumber(NaN);
             }

src/web/InputWaiter.js

@@ -61,9 +61,13 @@ InputWaiter.prototype.set = function(input) {
     if (input instanceof File) {
         this.setFile(input);
         inputText.value = "";
+        this.setInputInfo(input.size, null);
     } else {
         inputText.value = input;
         window.dispatchEvent(this.manager.statechange);
+        const lines = input.length < (this.app.options.ioDisplayThreshold * 1024) ?
+            input.count("\n") + 1 : null;
+        this.setInputInfo(input.length, lines);
     }
 };
 
@@ -81,6 +85,7 @@ InputWaiter.prototype.setFile = function(file) {
         fileType = document.getElementById("input-file-type"),
         fileLoaded = document.getElementById("input-file-loaded");
 
+    this.fileBuffer = new ArrayBuffer();
     fileOverlay.style.display = "block";
     fileName.textContent = file.name;
     fileSize.textContent = file.size.toLocaleString() + " bytes";
@@ -100,21 +105,28 @@ InputWaiter.prototype.setInputInfo = function(length, lines) {
     width = width < 2 ? 2 : width;
 
     const lengthStr = length.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
-    const linesStr = lines.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
+    let msg = "length: " + lengthStr;
 
-    document.getElementById("input-info").innerHTML = "length: " + lengthStr + "<br>lines: " + linesStr;
+    if (typeof lines === "number") {
+        const linesStr = lines.toString().padStart(width, " ").replace(/ /g, "&nbsp;");
+        msg += "<br>lines: " + linesStr;
+    }
+
+    document.getElementById("input-info").innerHTML = msg;
 };
 
 
 /**
- * Handler for input scroll events.
+ * Handler for input change events.
- * Scrolls the highlighter pane to match the input textarea position and updates history state.
  *
  * @param {event} e
  *
  * @fires Manager#statechange
  */
 InputWaiter.prototype.inputChange = function(e) {
+    // Ignore this function if the input is a File
+    if (this.fileBuffer) return;
+
     // Remove highlighting from input and output panes as the offsets might be different now
     this.manager.highlighter.removeHighlights();
 
@@ -123,18 +135,47 @@ InputWaiter.prototype.inputChange = function(e) {
 
     // Update the input metadata info
     const inputText = this.get();
-    const lines = inputText.count("\n") + 1;
+    const lines = inputText.length < (this.app.options.ioDisplayThreshold * 1024) ?
+        inputText.count("\n") + 1 : null;
 
     this.setInputInfo(inputText.length, lines);
 
-
+    if (e && this.badKeys.indexOf(e.keyCode) < 0) {
-    if (this.badKeys.indexOf(e.keyCode) < 0) {
         // Fire the statechange event as the input has been modified
         window.dispatchEvent(this.manager.statechange);
     }
 };
 
 
+/**
+ * Handler for input paste events.
+ * Checks that the size of the input is below the display limit, otherwise treats it as a file/blob.
+ *
+ * @param {event} e
+ */
+InputWaiter.prototype.inputPaste = function(e) {
+    const pastedData = e.clipboardData.getData("Text");
+
+    if (pastedData.length < (this.app.options.ioDisplayThreshold * 1024)) {
+        this.inputChange(e);
+    } else {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const file = new File([pastedData], "PastedData", {
+            type: "text/plain",
+            lastModified: Date.now()
+        });
+
+        this.loaderWorker = new LoaderWorker();
+        this.loaderWorker.addEventListener("message", this.handleLoaderMessage.bind(this));
+        this.loaderWorker.postMessage({"file": file});
+        this.set(file);
+        return false;
+    }
+};
+
+
 /**
  * Handler for input dragover events.
  * Gives the user a visual cue to show that items can be dropped here.

src/web/Manager.js

@@ -132,7 +132,8 @@ Manager.prototype.initialiseEventListeners = function() {
     this.addDynamicListener("#rec-list", "operationremove", this.recipe.opRemove.bind(this.recipe));
 
     // Input
-    this.addMultiEventListener("#input-text", "keyup paste", this.input.inputChange, this.input);
+    this.addMultiEventListener("#input-text", "keyup", this.input.inputChange, this.input);
+    this.addMultiEventListener("#input-text", "paste", this.input.inputPaste, this.input);
     document.getElementById("reset-layout").addEventListener("click", this.app.resetLayout.bind(this.app));
     document.getElementById("clr-io").addEventListener("click", this.input.clearIoClick.bind(this.input));
     this.addListeners("#input-text,#input-file", "dragover", this.input.inputDragover, this.input);

src/web/html/index.html

@@ -372,8 +372,8 @@
                             <label for="errorTimeout"> Operation error timeout in ms (0 for never)</label>
                         </div>
                         <div class="option-item">
-                            <input type="number" option="outputFileThreshold" id="outputFileThreshold" />
+                            <input type="number" option="ioDisplayThreshold" id="ioDisplayThreshold" />
-                            <label for="outputFileThreshold"> Size threshold for treating the output as a file (KiB)</label>
+                            <label for="ioDisplayThreshold"> Size threshold for treating the input and output as a file (KiB)</label>
                         </div>
                         <div class="option-item">
                             <select option="logLevel" id="logLevel">

src/web/index.js

@@ -47,7 +47,7 @@ function main() {
         attemptHighlight:    true,
         theme:               "classic",
         useMetaKey:          false,
-        outputFileThreshold: 1024,
+        ioDisplayThreshold:  512,
         logLevel:            "info"
     };