shaders/modules/edit-child-shader-sk/edit-child-shader-sk.ts

/**
 * @module modules/edit-child-shader-sk
 * @description <h2><code>edit-child-shader-sk</code></h2>
 *
 * Pops up a dialog to edit a ChildShader's name.
 *
 * May be expanded in the future to also edit the ScrapHashOrName.
 */
import { html } from 'lit/html.js';
import { $$ } from '../../../infra-sk/modules/dom';
import { define } from '../../../elements-sk/modules/define';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import { ChildShader } from '../json';
import { childShaderUniformNameRegex } from '../shadernode';

const defaultChildShader: ChildShader = {
  UniformName: 'childShader',
  ScrapHashOrName: '',
};

export class EditChildShaderSk extends ElementSk {
  private dialog: HTMLDialogElement | null = null;

  private childShader: ChildShader = defaultChildShader;

  private input: HTMLInputElement | null = null;

  private resolve: ((value: ChildShader | undefined) => void) | null = null;

  constructor() {
    super(EditChildShaderSk.template);
  }

  private static template = (ele: EditChildShaderSk) =>
    html`<dialog>
      <label
        >Uniform Name:
        <input
          @input=${() => ele._render()}
          id="uniformName"
          type="text"
          pattern=${childShaderUniformNameRegex.source}
          .value=${ele.childShader.UniformName}
      /></label>
      <div class="controls">
        <button @click=${ele.cancelClick} id="cancel">Cancel</button>
        <button
          @click=${ele.okClick}
          id="ok"
          ?disabled=${ele.input?.validity.patternMismatch}>
          OK
        </button>
      </div>
      <span class="error" ?hidden=${!ele.input?.validity.patternMismatch}
        >Not a valid uniform name.</span
      >
    </dialog>`;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
    this.dialog = $$<HTMLDialogElement>('dialog', this);
    this.dialog!.addEventListener('close', () => this.dialogClosed());
    this.input = $$<HTMLInputElement>('input', this);
  }

  /**
   * Displays the dialog to edit the ChildShader uniform name.
   *
   * Will resolve to an updated copy of the ChildShader, or 'undefined'
   * if the user presses cancel.
   */
  show(childShader: ChildShader): Promise<ChildShader | undefined> {
    return new Promise((resolve) => {
      this.resolve = resolve;
      this.childShader = Object.assign({}, childShader);
      this._render();
      this.dialog!.showModal();
    });
  }

  private dialogClosed() {
    if (!this.resolve) {
      return;
    }
    this.resolve(undefined);
    this.resolve = null;
  }

  private cancelClick() {
    if (!this.resolve) {
      return;
    }
    this.resolve(undefined);
    this.dialog!.close();
    this.resolve = null;
  }

  private okClick() {
    if (!this.resolve) {
      return;
    }
    this.childShader.UniformName = $$<HTMLInputElement>(
      '#uniformName',
      this
    )!.value;
    this.resolve(this.childShader);
    this.dialog!.close();
    this.resolve = null;
  }
}

define('edit-child-shader-sk', EditChildShaderSk);