index.html

<div style="margin-bottom: 5px">
  <button id="fileOpener">📂 Open file</button>
  <button id="fileSaver">💾 Save file</button>
</div>
<div id="editor"></div>
<br />
<button id="runCode">▶️ Run code</button>
<br />
<strong>Output:</strong>
<button id="copyOutput">📋 Copy output</button>
<pre id="script-output"><my-text-editor></my-text-editor></pre>

<a href="https://github.com/vezwork/Polytope">
  View on GitHub
  <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    height="30"
  >
    <path
      fill="currentColor"
      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
    />
  </svg> </a
><br /><br />

Instructions and controls:

<ul>
  <li>
    Tested in Chrome on Mac mostly. Opening and saving files
    <a
      href="https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker#browser_compatibility"
      >only works in Chrome.</a
    >
  </li>
  <li>
    Use your keyboard to type, backspace, arrow keys to move the caret,
    shift+arrow keys to select, ctrl+c and ctrl+v to copy paste.
  </li>
  <li>Use Alt or ⌥Control to bring up the editor choice dropdown.</li>
  <li>
    Use mouse and ctrl (in the colored graph editor) to interact with other
    editors. These editors should also support keyboard controls but don't yet.
  </li>
  <li>
    This is a research experiment and has many issues that may not be fixed in
    this iteration of the experiment, but please feel free to
    <a href="https://github.com/vezwork/Polytope"
      >create an issue or reach out</a
    >
    if you would like feedback on some behaviour of Polytope.
  </li>
</ul>

<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />
<br /><br /><br />

<!-- <div style="border: 1px solid black;">
    <button id="outputgetter">Get javascript code</button>
    <pre id="output"></pre>
</div>
<br> -->
<!-- <div style="border: 1px solid black;">
    <button id="sourcegetter">Load editor from javascript code</button>
    <div id="source"></div>
</div> -->

<a href="pres/index.html#slide-3">Back to presentation</a>

<!-- <script type="module" src="groupTheoryEditor.js"></script> -->
<script src="examples/math_ops.js"></script>
<script type="module">
  import { MyEditorElement, builder } from "./custom.js";
  import { generatorPaths, multiplicationTable, gMap } from "./groupTheory.js";

  document.getElementById("editor").append(
    new MyEditorElement({
      code: [],
      builder,
    })
  );

  //https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
  // store a reference to our file handle
  let fileHandle;

  document
    .getElementById("fileOpener")
    .addEventListener("click", () => getFile());
  document
    .getElementById("fileSaver")
    .addEventListener("click", () =>
      writeFile(
        fileHandle,
        document.querySelector("#editor my-text-editor").getOutput()
      )
    );
  async function getFile() {
    [fileHandle] = await showOpenFilePicker();

    if (fileHandle.kind === "file") {
      const fileData = await fileHandle.getFile();
      const contents = await fileData.text();
      document.getElementById("editor").innerHTML = "";
      document.getElementById("editor").append(
        new MyEditorElement({
          code: builder(contents).output,
          builder,
        })
      );
    } else if (fileHandle.kind === "directory") {
    }
  }
  async function writeFile(fileHandle, contents) {
    if (!fileHandle) [fileHandle] = await showSaveFilePicker();
    const writable = await fileHandle.createWritable();
    await writable.write(contents);
    await writable.close();
  }

  // document.getElementById('outputgetter').addEventListener('click', () => {
  //     const out = document.querySelector('my-text-editor').getOutput();
  //     document.getElementById('output').textContent = out;
  // })

  // document.getElementById('sourcegetter').addEventListener('click', () => {
  //     const out = document.getElementById('output').textContent;
  //     document.getElementById('source').innerHTML = '';
  //     document.getElementById('source').append(new MyEditorElement({
  //         code: builder(out).output
  //     }));
  // })

  document.getElementById("runCode").addEventListener("click", () => {
    const out = document.querySelector("my-text-editor").getOutput();
    // evalModule(out);
    document.getElementById("script-output").innerHTML = "";
    eval(out);
  });

  // This function is not used in the source files, but may be used in
  // the editor to output.
  const Polytope = {};
  Polytope.out = (value) => {
    document.getElementById("script-output").append(
      new MyEditorElement({
        code: builder("(" + JSON.stringify(value) + ")").output,
        builder,
      })
    );
  };

  document.getElementById("copyOutput").addEventListener("click", () => {
    copyToClipboard(
      document.getElementById("script-output").children[0].getOutput()
    );
  });

  async function copyToClipboard(string) {
    const tempTextEl = document.createElement("textarea");
    tempTextEl.value = string;
    document.body.appendChild(tempTextEl);
    tempTextEl.select();
    document.execCommand("copy");
    tempTextEl.remove();
  }

  // ref: https://2ality.com/2019/10/eval-via-import.html
  // future improvement ref: https://github.com/tc39/proposal-shadowrealm
  async function evalModule(js) {
    const encodedJs = encodeURIComponent(js);
    const dataUri = "data:text/javascript;charset=utf-8," + encodedJs;
    return import(dataUri);
  }
</script>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;600&display=swap");
  body {
    width: 920px;
    margin: 30px auto;
    font-size: 25px;
  }

  #editor my-text-editor {
    width: 100%;
    min-height: 480px;
  }

  body,
  button {
    font-family: "Fira Code";
  }
</style>