@fw-components/formula-editor 2.0.7-formula-editor.36 → 2.0.7-formula-editor.38

package/dist/formula-editor/src/formula-editor.js

@@ -37,7 +37,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
             this._adjustTextAreaHeight();
         }
         if (_changedProperties.has("variables")) {
-            this._parser = new Parser(this.variables, this.formulaRegex, this.allowedNumbers, this.allowedOperators, this.minSuggestionLen);
+            this._parser = new Parser(this.variables, this.minSuggestionLen, this.formulaRegex, this.allowedNumbers, this.allowedOperators, this.variableType);
             this.recommendations = Array.from(this.variables.keys());
         }
     }
@@ -63,9 +63,9 @@ let FormulaEditor = class FormulaEditor extends LitElement {
      */
     parseInput(recommendation = "") {
         this.currentCursorPosition = this.editor.selectionStart;
-        const parseOutput = this._parser.parseInput(this.content, this.currentCursorPosition, recommendation);
-        this.recommendations = parseOutput.recommendations;
-        this.errorString = parseOutput.errorString;
+        const { recommendations, errorString, formattedString, newCursorPosition } = this._parser.parseInput(this.content, this.currentCursorPosition, recommendation);
+        this.recommendations = recommendations;
+        this.errorString = errorString;
         /**
          * Don't modify the text stream manually if the text is being composed,
          * unless the user manually chooses to do so by selecting a recommendation.
@@ -74,11 +74,11 @@ let FormulaEditor = class FormulaEditor extends LitElement {
          * @see https://bugs.chromium.org/p/chromium/issues/detail?id=689541
          */
         if (this.lastInputType !== "insertCompositionText" || recommendation) {
-            this.content = parseOutput.formattedString;
+            this.content = formattedString;
         }
         if (Boolean(recommendation)) {
             this.recommendations = [];
-            this.currentCursorPosition = parseOutput.newCursorPosition;
+            this.currentCursorPosition = newCursorPosition;
             /* update cursor position in text area */
             setTimeout(() => {
                 this.editor.setSelectionRange(this.currentCursorPosition, this.currentCursorPosition);
@@ -97,7 +97,8 @@ let FormulaEditor = class FormulaEditor extends LitElement {
     formatFormula() {
         if (!this.content)
             return;
-        this.content = this._parser.addParentheses(this.content) ?? this.content;
+        const newContent = this._parser.addParentheses(this.content);
+        this.content = newContent && newContent.length ? newContent : this.content;
         this.parseInput();
         this.recommendations = [];
     }
@@ -131,10 +132,10 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         return html `
       <style>${FormulaEditorStyles}</style>
 
-      ${this.label ? html `<label for="wysiwyg-editor" class="editor-label">${this.label}</label>` : ""}
+      ${this.label ? html `<label for="fw-formula-editor" class="editor-label">${this.label}</label>` : ""}
 
       <textarea
-        id="wysiwyg-editor"
+        id="fw-formula-editor"
         class=${this.errorString?.length ? "error" : ""}
         .value=${this.content}
         .placeholder=${this.placeholder}
@@ -187,6 +188,9 @@ __decorate([
 __decorate([
     property()
 ], FormulaEditor.prototype, "variables", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "variableType", void 0);
 __decorate([
     property()
 ], FormulaEditor.prototype, "minSuggestionLen", void 0);
@@ -203,7 +207,7 @@ __decorate([
     property()
 ], FormulaEditor.prototype, "allowedOperators", void 0);
 __decorate([
-    query("#wysiwyg-editor")
+    query("#fw-formula-editor")
 ], FormulaEditor.prototype, "editor", void 0);
 __decorate([
     query("suggestion-menu")

package/dist/formula-editor/src/styles/editor.js

@@ -7,7 +7,7 @@ export const FormulaEditorStyles = css `
     margin-bottom: var(--fe-label-margin-bottom, 1px);
   }
 
-  #wysiwyg-editor {
+  #fw-formula-editor {
     display: block;
     resize: none;
     padding: var(--fe-padding, 4px);
@@ -26,13 +26,13 @@ export const FormulaEditorStyles = css `
     line-height: 1.5;
   }
 
-  #wysiwyg-editor:empty:before {
+  #fw-formula-editor:empty:before {
     content: attr(placeholder);
     color: var(--fe-placeholder-color, grey);
     pointer-events: none;
   }
 
-  #wysiwyg-editor.error {
+  #fw-formula-editor.error {
     text-decoration: underline;
     -webkit-text-decoration-style: wavy;
     text-decoration-style: wavy;

package/dist/formula-editor/src/styles/suggestion-menu.js

@@ -35,7 +35,7 @@ export const SuggestionMenuStyles = css `
 
   /* Scrollbar styling */
   ::-webkit-scrollbar {
-    width: 10px;
+    width: 7px;
   }
 
   ::-webkit-scrollbar-track {
@@ -50,9 +50,4 @@ export const SuggestionMenuStyles = css `
   ::-webkit-scrollbar-thumb:hover {
     background: #aaa;
   }
-
-  /* Optional shadow for the dropdown */
-  .content {
-    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
-  }
 `;

package/dist/formula-editor/src/suggestion-menu.js

@@ -13,7 +13,7 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
         this.recommendations = [];
         this.recommendationLabels = new Map();
         this.onRecommendationClick = () => { };
-        this._selectedRecommendationIndex = -1;
+        this._currentFocusedIndex = -1;
     }
     scrollToSelectedRecommendation(index) {
         const listItem = this.suggestionList?.querySelectorAll("li")[index];
@@ -28,27 +28,27 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
     navigate(direction) {
         if (!this.recommendations?.length)
             return;
-        let newIndex = this._selectedRecommendationIndex;
+        let newIndex = this._currentFocusedIndex;
         if (direction === "down")
-            newIndex = (this._selectedRecommendationIndex + 1) % this.recommendations.length;
+            newIndex = (this._currentFocusedIndex + 1) % this.recommendations.length;
         else if (direction === "up")
-            newIndex = (this._selectedRecommendationIndex - 1 + this.recommendations.length) % this.recommendations.length;
-        this._selectedRecommendationIndex = newIndex;
+            newIndex = (this._currentFocusedIndex - 1 + this.recommendations.length) % this.recommendations.length;
+        this._currentFocusedIndex = newIndex;
         this.scrollToSelectedRecommendation(newIndex);
     }
-    handleRecommendationSelect(index = this._selectedRecommendationIndex) {
+    handleRecommendationSelect(index = this._currentFocusedIndex) {
         const recommendation = this.recommendations[index];
         if (!recommendation)
             return;
         this.onRecommendationClick(recommendation);
-        this._selectedRecommendationIndex = -1;
+        this._currentFocusedIndex = -1;
     }
     render() {
         return html `
       <style>${SuggestionMenuStyles}</style>
-      <ul class="wysiwyg-suggestion-menu" @mousedown=${(e) => e.preventDefault()}>
+      <ul class="fw-formula-suggestion-menu" @mousedown=${(e) => e.preventDefault()}>
         ${this.recommendations.map((recommendation, index) => html `<li
-              class="${this._selectedRecommendationIndex === index ? "selected" : ""}"
+              class="${this._currentFocusedIndex === index ? "selected" : ""}"
               @click=${(e) => this.handleRecommendationSelect(index)}
             >${this.recommendationLabels.get(recommendation) ?? recommendation}</li>`)}
       </ul>
@@ -66,9 +66,9 @@ __decorate([
 ], SuggestionMenu.prototype, "onRecommendationClick", void 0);
 __decorate([
     state()
-], SuggestionMenu.prototype, "_selectedRecommendationIndex", void 0);
+], SuggestionMenu.prototype, "_currentFocusedIndex", void 0);
 __decorate([
-    query(".wysiwyg-suggestion-menu")
+    query(".fw-formula-suggestion-menu")
 ], SuggestionMenu.prototype, "suggestionList", void 0);
 SuggestionMenu = __decorate([
     customElement("suggestion-menu")

package/dist/formula-editor/src/types/index.js

@@ -4,14 +4,6 @@ export var Expectation;
     Expectation[Expectation["OPERATOR"] = 1] = "OPERATOR";
     Expectation[Expectation["UNDEFINED"] = 2] = "UNDEFINED";
 })(Expectation || (Expectation = {}));
-export var Operator;
-(function (Operator) {
-    Operator["PLUS"] = "+";
-    Operator["MINUS"] = "-";
-    Operator["MUL"] = "*";
-    Operator["DIV"] = "/";
-    Operator["NONE"] = "";
-})(Operator || (Operator = {}));
 export class Formula {
     constructor(name, formulaString, precision = -1) {
         this.error = null;

package/dist/formula-editor/src/utils/parser.js

@@ -3,15 +3,16 @@ import { Recommender } from "./recommendor.js";
 import { Stack } from "./stack.js";
 import { Queue } from "./queue.js";
 import { Expectation } from "../types";
-import { operatorPrecedence, unaryOperators } from "./constants.js";
+import { operatorPrecedence, unaryOperators, mathematicalOperators } from "./constants.js";
 import { getFormulaTokens } from "./get-formula-tokens.js";
 export class Parser {
-    constructor(variables, formulaRegex, allowedNumbers, allowedOperators, minSuggestionLen) {
+    constructor(variables, minSuggestionLen, formulaRegex, allowedNumbers, allowedOperators, variableType) {
         this.variables = variables;
         this.formulaRegex = formulaRegex;
         this._recommender = new Recommender(Array.from(this.variables.keys()), minSuggestionLen);
-        this.allowedNumbers = allowedNumbers;
-        this.allowedOperators = allowedOperators;
+        this.allowedNumbers = allowedNumbers ?? true;
+        this.allowedOperators = allowedOperators ?? mathematicalOperators;
+        this.variableType = variableType;
     }
     isNumber(value) {
         if (!this.allowedNumbers || value.trim() === "")
@@ -74,14 +75,21 @@ export class Parser {
             /**
              * Error checks
              * skip error check if there is one already
-             */
+            */
             if (expectation != Expectation.UNDEFINED) {
-                if (this.allowedOperators.has(previousToken) && isOperator) {
-                    parseOutput.errorString = `Multiple operators at position ${currentPosition}`;
+                /**
+                 * Unknown symbol/variable/word
+                 */
+                if (!(isNumber || isOperator || isBracket || isSpace)) {
+                    parseOutput.errorString = `${this.variableType} : ${token} does not exist`;
+                    expectation = Expectation.UNDEFINED;
+                }
+                else if (this.allowedOperators.has(previousToken) && isOperator) {
+                    parseOutput.errorString = `Use ${this.variableType}${this.allowedNumbers ? " or numbers" : ""} after ${previousToken}. Pls do not use consecutive two mathametical operators (+,-,*,/,^)`;
                     expectation = Expectation.UNDEFINED;
                 }
                 else if (parentheses.isEmpty() && token === ")") {
-                    parseOutput.errorString = `Unexpected ')' at position ${currentPosition}`;
+                    parseOutput.errorString = "Unexpected closing bracket. Make sure all opening brackets '(' have matching closing brackets ')'.";
                     expectation = Expectation.UNDEFINED;
                 }
                 /**
@@ -90,35 +98,28 @@ export class Parser {
                  */
                 else if (expectation === Expectation.VARIABLE && !isNumber && !isSpace && token != "("
                     && !((unaryOperators.includes(token)) && (!parsedString.trim() || previousToken === "(" || this.allowedOperators.has(previousToken)))) {
-                    parseOutput.errorString = `Expected variable/number at position ${currentPosition}`;
+                    parseOutput.errorString = `Use ${this.variableType}${this.allowedNumbers ? " or numbers" : ""} after ${previousToken}.`;
                     expectation = Expectation.UNDEFINED;
                 }
                 /**
                  * Multiple number/variable together without operator
                  */
                 else if (expectation === Expectation.OPERATOR && !isOperator && !isSpace && token != ")") {
-                    parseOutput.errorString = `Expected mathematical operator at position ${currentPosition}`;
-                    expectation = Expectation.UNDEFINED;
-                }
-                /**
-                 * Unknown symbol/variable/word
-                 */
-                else if (!(isNumber || isOperator || isBracket || isSpace)) {
-                    parseOutput.errorString = `Unknown word at position ${currentPosition}`;
+                    parseOutput.errorString = `Use mathametical operators (${Array.from(this.allowedOperators).join(",")}) after ${previousToken}.`;
                     expectation = Expectation.UNDEFINED;
                 }
                 /**
                  * division by zero
                  */
                 else if (isNumber && previousToken === "/" && (this.variables.get(token) === 0 || Number(token) === 0)) {
-                    parseOutput.errorString = `Division by zero at position ${currentPosition}`;
+                    parseOutput.errorString = `Division by zero is not possible`;
                     expectation = Expectation.UNDEFINED;
                 }
                 /**
                  * Empty brackets
                  */
                 else if (previousToken === "(" && token === ")") {
-                    parseOutput.errorString = `Empty brackets at position ${currentPosition}`;
+                    parseOutput.errorString = `Pls do not use empty brackets ().`;
                     expectation = Expectation.UNDEFINED;
                 }
             }
@@ -151,10 +152,10 @@ export class Parser {
             parseOutput.recommendations = !parseOutput.errorString?.length ? Array.from(this.variables.keys()) : [];
         }
         if (this.allowedOperators.has(previousToken)) {
-            parseOutput.errorString = `Unexpected ending with mathematical operator at position: ${currentPosition}`;
+            parseOutput.errorString = `Pls do not use mathametical operators (${Array.from(this.allowedOperators).join(",")}) at the end.`;
         }
         if (!parentheses.isEmpty()) {
-            parseOutput.errorString = `Unclosed '(' at position: ${parentheses.top()}`;
+            parseOutput.errorString = "Unexpected opening bracket. Make sure all closing brackets ')' have matching opening brackets '('.";
         }
         return parseOutput;
     }

package/dist/formula-editor/src/utils/queue.js

@@ -18,13 +18,10 @@ export class Queue {
     }
     peek() {
         if (this.isEmpty())
-            throw new Error("Cannot peek an empty queue");
+            return undefined;
         return this._elements[this._head];
     }
     isEmpty() {
         return this._head === this._tail;
     }
-    print() {
-        console.log(this._elements);
-    }
 }

package/dist/formula-editor/src/utils/recommendor.js

@@ -1,14 +1,14 @@
 import { matchSorter } from "match-sorter";
 export class Recommender {
     constructor(variables, minSuggestionLen) {
-        this._minimumSuggestionLength = minSuggestionLen > 0 ? minSuggestionLen : 1;
+        this._wordLimitForSuggestions = minSuggestionLen > 0 ? minSuggestionLen : 1;
         this.variableList = variables;
     }
-    getRecommendations(word) {
-        if (word.length < this._minimumSuggestionLength)
+    getRecommendations(inputString) {
+        if (inputString.length < this._wordLimitForSuggestions)
             return [];
-        const recommendations = matchSorter(this.variableList, word);
-        if (recommendations.length === 0 || (recommendations.length === 1 && recommendations[0] === word))
+        const recommendations = matchSorter(this.variableList, inputString);
+        if (recommendations.length === 0)
             return [];
         return recommendations;
     }

package/dist/formula-editor/src/utils/stack.js

@@ -14,7 +14,4 @@ export class Stack {
     isEmpty() {
         return this._elements.length === 0;
     }
-    print() {
-        console.log(this._elements);
-    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.0.7-formula-editor.36",
+  "version": "2.0.7-formula-editor.38",
   "description": "A WYSIWYG type formula editor",
   "main": "dist/formula-editor/src/formula-editor.js",
   "exports": {
@@ -31,5 +31,5 @@
     "@types/big.js": "^6.1.6",
     "es-dev-server": "^2.1.0"
   },
-  "gitHead": "78fd3b78f8f72ac4ab0b4b7ec57848b2a78cccad"
+  "gitHead": "a7118acac7f6e7268373b36a909f6f1720a12ce4"
 }