@fw-components/formula-editor 2.0.7-formula-editor.35 → 2.0.7-formula-editor.37

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

@@ -21,13 +21,13 @@ let FormulaEditor = class FormulaEditor extends LitElement {
          */
         this.content = "";
         this.placeholder = "Type your formula...";
+        this.recommendationLabels = new Map();
         this.variables = new Map();
         this.minSuggestionLen = 2;
         this.errorString = "";
         this.formulaRegex = /'[^']*'|[A-Za-z0-9_#@]+|[-+(),*^/\s]/g;
-    }
-    firstUpdated(_changedProperties) {
-        this.editor.focus();
+        this.allowedNumbers = true;
+        this.allowedOperators = new Set(["^", "+", "-", "*", "/"]);
     }
     updated(_changedProperties) {
         if (_changedProperties.has("content")) {
@@ -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.minSuggestionLen);
+            this._parser = new Parser(this.variables, this.formulaRegex, this.allowedNumbers, this.allowedOperators, this.variableType, this.minSuggestionLen);
             this.recommendations = Array.from(this.variables.keys());
         }
     }
@@ -151,6 +151,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
             .recommendations=${this.recommendations}
             .currentSelection=${this._selectedRecommendation}
             .onRecommendationClick=${this.onRecommendationClick.bind(this)}
+            .recommendationLabels=${this.recommendationLabels}
           ></suggestion-menu>`
             : ''}
     `;
@@ -177,6 +178,9 @@ __decorate([
 __decorate([
     property()
 ], FormulaEditor.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "recommendationLabels", void 0);
 __decorate([
     property()
 ], FormulaEditor.prototype, "label", void 0);
@@ -192,6 +196,15 @@ __decorate([
 __decorate([
     property()
 ], FormulaEditor.prototype, "formulaRegex", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "allowedNumbers", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "allowedOperators", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "variableType", void 0);
 __decorate([
     query("#wysiwyg-editor")
 ], FormulaEditor.prototype, "editor", void 0);

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

@@ -11,6 +11,7 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
     constructor() {
         super(...arguments);
         this.recommendations = [];
+        this.recommendationLabels = new Map();
         this.onRecommendationClick = () => { };
         this._selectedRecommendationIndex = -1;
     }
@@ -49,7 +50,7 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
         ${this.recommendations.map((recommendation, index) => html `<li
               class="${this._selectedRecommendationIndex === index ? "selected" : ""}"
               @click=${(e) => this.handleRecommendationSelect(index)}
-            >${recommendation}</li>`)}
+            >${this.recommendationLabels.get(recommendation) ?? recommendation}</li>`)}
       </ul>
     `;
     }
@@ -57,6 +58,9 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
 __decorate([
     property()
 ], SuggestionMenu.prototype, "recommendations", void 0);
+__decorate([
+    property()
+], SuggestionMenu.prototype, "recommendationLabels", void 0);
 __decorate([
     property()
 ], SuggestionMenu.prototype, "onRecommendationClick", void 0);

package/dist/formula-editor/src/utils/get-formula-tokens.js

@@ -1,5 +1,7 @@
 export function getFormulaTokens(formulaString, formulaRegex) {
     if (!formulaString?.length)
         return [];
+    if (!Boolean(formulaRegex))
+        return formulaString.split(/(\s+)/) || [];
     return formulaString.match(formulaRegex) || [];
 }

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

@@ -3,13 +3,21 @@ import { Recommender } from "./recommendor.js";
 import { Stack } from "./stack.js";
 import { Queue } from "./queue.js";
 import { Expectation } from "../types";
-import { mathematicalOperators, operatorPrecedence, unaryOperators } from "./constants.js";
+import { operatorPrecedence, unaryOperators } from "./constants.js";
 import { getFormulaTokens } from "./get-formula-tokens.js";
 export class Parser {
-    constructor(variables, formulaRegex, minSuggestionLen) {
+    constructor(variables, formulaRegex, allowedNumbers, allowedOperators, variableType, minSuggestionLen) {
         this.variables = variables;
         this.formulaRegex = formulaRegex;
         this._recommender = new Recommender(Array.from(this.variables.keys()), minSuggestionLen);
+        this.allowedNumbers = allowedNumbers;
+        this.allowedOperators = allowedOperators;
+        this.variableType = variableType;
+    }
+    isNumber(value) {
+        if (!this.allowedNumbers || value.trim() === "")
+            return false;
+        return !Number.isNaN(Number(value));
     }
     parseInput(formula, prevCurPos = null, recommendation = null) {
         const tokens = getFormulaTokens(formula, this.formulaRegex);
@@ -30,8 +38,8 @@ export class Parser {
             return parseOutput;
         }
         tokens?.forEach((token) => {
-            let isNumber = token.trim() !== "" && (this.variables.has(token) || !Number.isNaN(Number(token)));
-            const isOperator = mathematicalOperators.has(token);
+            let isNumber = this.variables.has(token) || this.isNumber(token);
+            const isOperator = this.allowedOperators.has(token);
             const isSpace = token.trim() === "";
             const isBracket = token === "(" || token === ")";
             if (isSpace) {
@@ -48,7 +56,7 @@ export class Parser {
             if (currentPosition <= prevCurPos && currentPosition + token.length >= prevCurPos) {
                 if (recommendation) {
                     isNumber = true;
-                    if (mathematicalOperators.has(token)) {
+                    if (this.allowedOperators.has(token)) {
                         const updatedTokenString = `${token} ${recommendation}`;
                         parseOutput.formattedString += updatedTokenString;
                         currentPosition += updatedTokenString.length;
@@ -67,14 +75,21 @@ export class Parser {
             /**
              * Error checks
              * skip error check if there is one already
-             */
+            */
             if (expectation != Expectation.UNDEFINED) {
-                if (mathematicalOperators.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;
                 }
                 /**
@@ -82,36 +97,29 @@ export class Parser {
                  * No error for Unary `+` and `-` as they might represent a positive or negative number respectively
                  */
                 else if (expectation === Expectation.VARIABLE && !isNumber && !isSpace && token != "("
-                    && !((unaryOperators.includes(token)) && (!parsedString.trim() || previousToken === "(" || mathematicalOperators.has(previousToken)))) {
-                    parseOutput.errorString = `Expected variable/number at position ${currentPosition}`;
+                    && !((unaryOperators.includes(token)) && (!parsedString.trim() || previousToken === "(" || this.allowedOperators.has(previousToken)))) {
+                    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;
                 }
             }
@@ -140,14 +148,14 @@ export class Parser {
             parseOutput.formattedString += recommendation;
             previousToken = recommendation;
         }
-        if (mathematicalOperators.has(previousToken) || !previousToken.trim().length) {
+        if (this.allowedOperators.has(previousToken) || !previousToken.trim().length) {
             parseOutput.recommendations = !parseOutput.errorString?.length ? Array.from(this.variables.keys()) : [];
         }
-        if (mathematicalOperators.has(previousToken)) {
-            parseOutput.errorString = `Unexpected ending with mathematical operator at position: ${currentPosition}`;
+        if (this.allowedOperators.has(previousToken)) {
+            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;
     }
@@ -161,7 +169,7 @@ export class Parser {
         let currentTokens = "";
         // Check if variables include unary operators `-` and `+`.
         for (const token of tokens) {
-            if ((unaryOperators.includes(token)) && (!currentTokens.trim() || previousToken === "(" || mathematicalOperators.has(previousToken))) {
+            if ((unaryOperators.includes(token)) && (!currentTokens.trim() || previousToken === "(" || this.allowedOperators.has(previousToken))) {
                 carriedToken = token;
             }
             else if (carriedToken) {
@@ -189,8 +197,8 @@ export class Parser {
                 }
                 operatorStack.pop();
             }
-            else if (mathematicalOperators.has(token)) {
-                while (mathematicalOperators.has(operatorStack.top()) && operatorPrecedence[token] <= operatorPrecedence[operatorStack.top()]) {
+            else if (this.allowedOperators.has(token)) {
+                while (this.allowedOperators.has(operatorStack.top()) && operatorPrecedence[token] <= operatorPrecedence[operatorStack.top()]) {
                     outputQueue.enqueue(operatorStack.pop());
                 }
                 operatorStack.push(token);
@@ -267,7 +275,7 @@ export class Parser {
         const calcStack = new Stack();
         while (!formulaRPN.isEmpty()) {
             const frontItem = formulaRPN.dequeue();
-            if (!mathematicalOperators.has(frontItem)) {
+            if (!this.allowedOperators.has(frontItem)) {
                 const [sign, variableKey] = /^[+-]/.test(frontItem) ? [frontItem[0], frontItem.slice(1)] : ["", frontItem];
                 const operandValue = Number.parseFloat(this.variables.get(variableKey)?.toString() ?? variableKey);
                 const number = Number.parseFloat(sign + "1") * operandValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.0.7-formula-editor.35",
+  "version": "2.0.7-formula-editor.37",
   "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": "ef64463d26814b5eb6389aa3a1f9ce12f26c46a6"
+  "gitHead": "a9c51fbd40797afbd0fc3b65ee780656edb1114f"
 }