@fw-components/formula-editor 2.0.3-formula-editor.1

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@fw-components/formula-editor",
+  "version": "2.0.3-formula-editor.1",
+  "type": "module",
+  "description": "A WYSIWYG type formula editor",
+  "main": "dist/src/formula-builder.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "es-dev-server --app-index ../../index.html --node-resolve --watch --open"
+  },
+  "dependencies": {
+    "@fw-components/styles": "^2.0.3-formula-editor.1",
+    "big.js": "^6.2.1",
+    "lit": "^2.1.2",
+    "typescript": "^5.0.4"
+  },
+  "author": "The Fundwave Authors",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/big.js": "^6.1.6",
+    "es-dev-server": "^2.1.0"
+  },
+  "gitHead": "f0c8eaf674cdbc6d104fcedb36ddbb6036af40db"
+}

package/src/cursor.ts

@@ -0,0 +1,134 @@
+export class Cursor {
+  /**
+   * The functions `getCurrentCursorPosition`, `setCurrentCursorPosition` and their
+   * helpers `_createRange` and `_isChildOf` are not used for caret manipulation,
+   * but are still in the code for future reference, if the functionality breaks
+   * somehow in some obsolete browser.
+   */
+  static getCurrentCursorPosition(parentElement: any): number {
+    let selection = window.getSelection(),
+      charCount = -1,
+      node;
+
+    if (selection?.focusNode) {
+      if (Cursor._isChildOf(selection.focusNode, parentElement)) {
+        node = selection.focusNode;
+        charCount = selection.focusOffset;
+
+        while (node) {
+          if (node === parentElement) {
+            break;
+          }
+
+          if (node.previousSibling) {
+            node = node.previousSibling;
+            charCount += node.textContent?.length ?? 0;
+          } else {
+            node = node.parentNode;
+            if (node === null) {
+              break;
+            }
+          }
+        }
+      }
+    }
+
+    return charCount;
+  }
+
+  static setCurrentCursorPosition(chars: number, element: any) {
+    if (chars >= 0) {
+      var selection = window.getSelection();
+      let range = Cursor._createRange(element, { count: chars }, undefined);
+
+      if (range) {
+        range.collapse(false);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }
+
+  static _createRange(node: any, chars: any, range: any) {
+    if (!range) {
+      range = document.createRange();
+      range.selectNode(node);
+      range.setStart(node, 0);
+    }
+
+    if (chars.count === 0) {
+      range.setEnd(node, chars.count);
+    } else if (node && chars.count > 0) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        if (node.textContent.length < chars.count) {
+          chars.count -= node.textContent.length;
+        } else {
+          range.setEnd(node, chars.count);
+          chars.count = 0;
+        }
+      } else {
+        for (var lp = 0; lp < node.childNodes.length; lp++) {
+          range = Cursor._createRange(node.childNodes[lp], chars, range);
+
+          if (chars.count === 0) {
+            break;
+          }
+        }
+      }
+    }
+
+    return range;
+  }
+
+  static _isChildOf(node: any, parentElement: any) {
+    while (node !== null) {
+      if (node === parentElement) {
+        return true;
+      }
+      node = node.parentNode;
+    }
+
+    return false;
+  }
+
+  static getCaretPosition(shadowRoot: ShadowRoot, element: HTMLElement) {
+    // `getSelection` is not defined for the type ShadowRoot in TS,
+    // but it does exist.
+    const range = (shadowRoot as any).getSelection()!.getRangeAt(0);
+    const prefix = range.cloneRange();
+    prefix.selectNodeContents(element);
+    prefix.setEnd(range.endContainer, range.endOffset);
+    return prefix.toString().length;
+  }
+
+  static setCaretPosition = (pos: any, parent: any) => {
+    for (const node of parent.childNodes) {
+      if (node.nodeType == Node.TEXT_NODE) {
+        if (node.length >= pos) {
+          const range = document.createRange();
+          const sel = window.getSelection()!;
+          range.setStart(node, pos);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+          return -1;
+        } else {
+          pos = pos - node.length;
+        }
+      } else {
+        pos = this.setCaretPosition(pos, node);
+        if (pos < 0) {
+          return pos;
+        }
+      }
+    }
+    return pos;
+  };
+
+  static getCursorRect(shadowRoot: ShadowRoot) {
+    return (shadowRoot as any)
+      .getSelection()
+      ?.getRangeAt(0)
+      ?.getClientRects()[0];
+  }
+}

package/src/formula-builder.ts

@@ -0,0 +1,141 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { Formula } from "./helpers/types.js";
+
+import { TextButtonStyles } from "../../styles/src/button-styles.js";
+import { FormulaEditor } from "./formula-editor";
+
+@customElement("formula-builder")
+class FormulaBuilder extends LitElement {
+  static styles = css`
+    #wysiwyg-err {
+      width: 100%;
+      border-radius: 0px 0px var(--fe-err-border-radius, 4px)
+        var(--fe-err-border-radius, 4px);
+      color: var(--fe-err-text-color, #fc514f);
+      border: var(--fe-err-border-width, 2px) solid black;
+      /* border-top: 0px; */
+      background-color: var(--fe-background-color, #222222);
+      padding: 4px;
+      margin: 0px 0px 8px 0px;
+    }
+
+    .wysiwyg-no-err {
+      color: #098668 !important;
+    }
+  `;
+
+  @property({
+    type: Map<string, number>,
+    converter: {
+      fromAttribute: (value) => {
+        if (value) {
+          return new Map<string, number>(JSON.parse(value));
+        }
+      },
+      toAttribute: (value: Map<string, number>) => {
+        return JSON.stringify(Array.from(value.entries()));
+      },
+    },
+  })
+  variables = new Map([
+    ["sales_expense", 2],
+    ["sales_in_quarter", 3],
+    ["sales_cummulative", 3],
+    ["cummulative_sum", 4],
+    ["mayank", 10],
+  ]);
+
+  @property({
+    type: Formula,
+    converter: {
+      fromAttribute: (value) => {
+        if (value) {
+          const formulaJSON = JSON.parse(value);
+          return new Formula(
+            formulaJSON.name,
+            formulaJSON.formulaString,
+            formulaJSON.precision
+          );
+        }
+      },
+      toAttribute: (value) => {
+        return JSON.stringify(value);
+      },
+    },
+  })
+  formula = new Formula("", "");
+
+  @property()
+  handleCalculate = () => {
+    this.formulaEditor?.requestCalculate();
+  };
+
+  @property()
+  handleFormat = () => {
+    this.formulaEditor?.requestFormat();
+  };
+
+  @query("#metric-name-input")
+  nameInput: HTMLInputElement | undefined;
+
+  @query("formula-editor")
+  formulaEditor: FormulaEditor | undefined;
+
+  handleChange() {
+    this.dispatchEvent(
+      new CustomEvent("fw-formula-changed", {
+        detail: {
+          name: this.nameInput?.value,
+          rawFormula: this.formula.formulaString,
+          error: this.formula.error,
+          precision: this.formula.precision,
+        },
+        bubbles: true,
+      })
+    );
+
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      ${TextButtonStyles}
+
+      <div>
+        <label for="metric-name-input">Metric Name</label>
+        <input
+          id="metric-name-input"
+          .value=${this.formula.name}
+          @input=${(e: any) => {
+            this.handleChange();
+          }}
+        />
+      </div>
+      <label>Formula</label>
+      <formula-editor
+        class="fe"
+        minSuggestionLen="0"
+        @fw-formula-content-changed=${(e: any) => {
+          this.formula.formulaString = e.detail.formulaString;
+          this.formula.error = e.detail.error;
+          this.handleChange();
+        }}
+        .variables=${this.variables}
+        .content=${this.formula.formulaString}
+        .errorString=${this.formula.error}
+      >
+      </formula-editor>
+      <div id="wysiwyg-err" class="${this.formula.error ?? "wysiwyg-no-err"}">
+        ${this.formula.error ??
+        `${this.formula.name} = ${this.formula.formulaString}`}
+      </div>
+      <button class="primary-text-button" @click=${this.handleCalculate}>
+        Calculate
+      </button>
+      <button class="primary-text-button" @click=${this.handleFormat}>
+        Format
+      </button>
+    `;
+  }
+}

package/src/formula-creator.ts

@@ -0,0 +1,99 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { Operator } from "./helpers/types";
+
+enum FormulaEntityType {
+  Operator,
+  Entity,
+}
+
+class FormulaEntity {
+  constructor(
+    type: FormulaEntityType,
+    metric: string | null,
+    operator: Operator = Operator.NONE
+  ) {
+    this.type = type;
+    this.metric = metric;
+    this.operator = operator;
+  }
+
+  type: FormulaEntityType;
+  metric: string | null;
+  operator: Operator;
+}
+
+class FormulaRow {
+  constructor(
+    type: FormulaEntityType,
+    metrices: FormulaEntity[] | null = null,
+    operator: Operator = Operator.NONE
+  ) {
+    this.type = type;
+    this.metrices = metrices;
+    this.operator = operator;
+  }
+
+  type: FormulaEntityType;
+  operator: Operator = Operator.NONE;
+  metrices: FormulaEntity[] | null;
+}
+
+@customElement("formula-creator")
+class FormulaCreator extends LitElement {
+  @state()
+  formulaState: FormulaRow[] = [
+    new FormulaRow(FormulaEntityType.Entity, [
+      new FormulaEntity(FormulaEntityType.Entity, "Sales Expense"),
+      new FormulaEntity(FormulaEntityType.Operator, null, Operator.MINUS),
+      new FormulaEntity(FormulaEntityType.Entity, "Marketing Expense"),
+    ]),
+    new FormulaRow(FormulaEntityType.Operator, null, Operator.DIV),
+    new FormulaRow(FormulaEntityType.Entity, [
+      new FormulaEntity(FormulaEntityType.Entity, "Sales Expense"),
+      new FormulaEntity(FormulaEntityType.Operator, null, Operator.PLUS),
+      new FormulaEntity(FormulaEntityType.Entity, "Marketing Expense"),
+    ]),
+    new FormulaRow(FormulaEntityType.Operator, null, Operator.DIV),
+    new FormulaRow(FormulaEntityType.Entity, [
+      new FormulaEntity(FormulaEntityType.Entity, "Sales Expense"),
+      new FormulaEntity(FormulaEntityType.Operator, null, Operator.DIV),
+      new FormulaEntity(FormulaEntityType.Entity, "Marketing Expense"),
+    ]),
+  ];
+
+  render() {
+    return html`
+      <label>Formula</label>
+      ${repeat(
+        this.formulaState,
+        (_, rowIndex) => `row-${rowIndex}`,
+        (formulaRow, rowIndex) => {
+          return formulaRow.type == FormulaEntityType.Entity
+            ? html` <div>
+                ${repeat(
+                  formulaRow.metrices!,
+                  (_, columnIndex) => `col-(${rowIndex},${columnIndex})`,
+                  (formulaEntity, columnIndex) => {
+                    return formulaEntity.type == FormulaEntityType.Entity
+                      ? html`<input
+                          value=${ifDefined(
+                            formulaEntity.metric === null
+                              ? undefined
+                              : formulaEntity.metric
+                          )}
+                        />`
+                      : html`<operator-input
+                          .operator=${formulaEntity.operator}
+                        ></operator-input>`;
+                  }
+                )}
+              </div>`
+            : html`<div>${formulaRow.operator}</div>`;
+        }
+      )}
+    `;
+  }
+}

package/src/formula-editor.ts

@@ -0,0 +1,236 @@
+import { html, LitElement, PropertyValueMap } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { FormulaEditorStyles } from "./styles/formula-editor-styles.js";
+import { Parser } from "./parser.js";
+import { Cursor } from "./cursor.js";
+import "./suggestion-menu.js";
+
+@customElement("formula-editor")
+export class FormulaEditor extends LitElement {
+  private _parser: Parser;
+
+  constructor() {
+    super();
+
+    this._parser = new Parser(this.variables, this.minSuggestionLen);
+  }
+
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    this._parser = new Parser(this.variables, this.minSuggestionLen);
+    this.parseInput(null, false);
+  }
+
+  /**
+   * These `states` and `properties` can't be defined as `static get properties`,
+   * because TS doesn't support that.
+   * @see https://github.com/lit/lit-element/issues/414
+   */
+
+  @state()
+  _formattedContent: Element | null = null;
+
+  @state()
+  _recommendations: string[] | null = null;
+
+  @state()
+  _calculatedResult: number | undefined = undefined;
+
+  /**
+   * If `parseInput` is called to add a recommendation, say by clicking,
+   * browser removes focus from the input box. In that case, we have no way
+   * of knowing where the cursor previously was, other than storing it somewhere.
+   */
+
+  @state()
+  currentCursorPosition: number | null = null;
+
+  @state()
+  currentCursorRect: DOMRect | undefined = undefined;
+
+  @state()
+  lastInputType: string = "undef";
+
+  @property()
+  content: string = "";
+
+  @property({
+    type: Map<string, number>,
+    converter: {
+      fromAttribute: (value) => {
+        if (value) {
+          return new Map<string, number>(JSON.parse(value));
+        }
+      },
+      toAttribute: (value: Map<string, number>) => {
+        return JSON.stringify(Array.from(value.entries()));
+      },
+    },
+  })
+  variables = new Map();
+
+  @property()
+  minSuggestionLen: number = 2;
+
+  @property()
+  errorString: string | null = null;
+
+  @query("wysiwyg-editor")
+  editor: any;
+
+  handleChange(event: InputEvent) {
+    event.preventDefault();
+
+    this.lastInputType = event.inputType;
+    this.content = (event.target as HTMLDivElement).innerText;
+    this.parseInput();
+
+    (event.target as HTMLDivElement).focus();
+  }
+
+  handleTab(event: KeyboardEvent) {
+    if (event.code == "Tab" && this._recommendations?.length == 1) {
+      event.preventDefault();
+      this.parseInput(this._recommendations[0]);
+    }
+  }
+
+  onClickRecommendation(recommendation: string) {
+    let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+    if (!editor) return;
+
+    this.parseInput(recommendation);
+    this.currentCursorPosition = null;
+  }
+
+  /**
+   *
+   * @param recommendation The recommendation which needs to be inserted
+   * at the current cursor position
+   * @param manageCursor Whether or not cursor management is needed. Not
+   * needed when manual insertion of text is required (eg: during initialization)
+   * @returns void
+   */
+  parseInput(
+    recommendation: string | null = null,
+    manageCursor: boolean = true
+  ) {
+    let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+    if (!editor) return;
+
+    /**
+     * @see https://github.com/WICG/webcomponents/issues/79
+     */
+
+    if (manageCursor)
+      this.currentCursorPosition = recommendation
+        ? this.currentCursorPosition
+        : Cursor.getCaretPosition(this.shadowRoot!, editor);
+
+    const parseOutput = this._parser.parseInput(
+      this.content,
+      this.currentCursorPosition,
+      recommendation
+    );
+
+    this._recommendations = parseOutput.recommendations;
+    this._formattedContent = parseOutput.formattedContent;
+    this.errorString = parseOutput.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 suggestion.
+     * @see https://github.com/w3c/input-events/issues/86
+     * @see https://github.com/w3c/input-events/pull/122
+     * @see https://bugs.chromium.org/p/chromium/issues/detail?id=689541
+     * */
+
+    if (this.lastInputType != "insertCompositionText" || recommendation) {
+      editor.innerHTML = parseOutput.formattedString!;
+    }
+
+    this.content = (editor as HTMLDivElement).innerText;
+
+    if (recommendation) {
+      this._recommendations = null;
+      this.currentCursorPosition = parseOutput.newCursorPosition;
+    }
+
+    if (manageCursor)
+      Cursor.setCaretPosition(this.currentCursorPosition!, editor);
+    editor?.focus();
+
+    if (manageCursor)
+      this.currentCursorRect = Cursor.getCursorRect(this.shadowRoot!);
+
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent("fw-formula-content-changed", {
+        detail: {
+          formulaString: this.content,
+          error: this.errorString,
+        },
+        bubbles: true,
+      })
+    );
+  }
+
+  requestCalculate() {
+    if (this._parser.parseInput(this.content).errorString) {
+      return;
+    }
+
+    const calculatedResult = this._parser.calculate(this.content);
+
+    this.content = this._parser.addParentheses(this.content) ?? this.content;
+    this.parseInput();
+
+    this._calculatedResult = calculatedResult.result;
+    this.errorString = calculatedResult.errorString;
+
+    this._recommendations = null;
+    this.requestUpdate();
+  }
+
+  requestFormat() {
+    this.content = this._parser.addParentheses(this.content) ?? this.content;
+    this.parseInput();
+    this._recommendations = null;
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <style>
+        ${FormulaEditorStyles}
+      </style>
+      <div
+        contenteditable
+        id="wysiwyg-editor"
+        spellcheck="false"
+        autocomplete="off"
+        @input=${this.handleChange}
+        @keydown=${this.handleTab}
+      ></div>
+      ${this._recommendations
+        ? html` <suggestion-menu
+            style="
+              position: absolute; 
+              left: ${(this.currentCursorRect?.left ?? 0) -
+            (this.editor?.getClientRect()[0]?.left ?? 0) +
+            "px"}; 
+              top: ${(this.currentCursorRect?.top ??
+              0 - (this.editor?.getClientRect()[0]?.top ?? 0)) +
+            window.scrollY +
+            "px"};
+            "
+            .recommendations=${this._recommendations}
+            .onClickRecommendation=${(e: any) => this.onClickRecommendation(e)}
+          ></suggestion-menu>`
+        : html``}
+      <p>${this._calculatedResult}</p>
+    `;
+  }
+}

package/src/helpers/types.ts

@@ -0,0 +1,20 @@
+export enum Operator {
+  PLUS = "+",
+  MINUS = "-",
+  MUL = "*",
+  DIV = "/",
+  NONE = "",
+}
+
+export class Formula {
+  constructor(name: string, formulaString: string, precision: number = -1) {
+    this.name = name;
+    this.formulaString = formulaString;
+    this.precision = precision;
+  }
+
+  name: string;
+  formulaString: string;
+  precision: number;
+  error: string | null = null;
+}