@fw-components/formula-editor 2.0.3-formula-editor.1 → 2.0.7-formula-editor.0

package/src/formula-builder.ts

@@ -1,141 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,236 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;
-}

package/src/helpers.ts

@@ -1,62 +0,0 @@
-export class Stack<Type> {
-  private _elements: Type[] = [];
-
-  push(item: Type): void {
-    this._elements.push(item);
-  }
-
-  pop(): Type | undefined {
-    return this._elements.pop();
-  }
-
-  top(): Type | undefined {
-    return this._elements.at(-1);
-  }
-
-  isEmpty(): boolean {
-    return this._elements.length == 0;
-  }
-
-  print(): void {
-    console.log(this._elements);
-  }
-}
-
-export class Queue<Type> {
-  private _elements: { [key: number]: Type } = {};
-  private _head: number = 0;
-  private _tail: number = 0;
-
-  enqueue(item: Type): void {
-    this._elements[this._tail] = item;
-    this._tail++;
-  }
-
-  dequeue(): Type | undefined {
-    if (this._tail === this._head) return undefined;
-
-    const element = this._elements[this._head];
-    delete this._elements[this._head];
-    this._head++;
-
-    return element;
-  }
-
-  peek(): Type {
-    return this._elements[this._head];
-  }
-
-  isEmpty(): boolean {
-    return this._head == this._tail;
-  }
-
-  print(): void {
-    console.log(this._elements);
-  }
-}
-
-export enum Expectation {
-  VARIABLE,
-  OPERATOR,
-  UNDEFINED,
-}