empty new astro view

SQUASHED: AUTO-COMMIT-src-components-tools-astro-view-example-source.js,AUTO-COMMIT-src-components-tools-astro-view-example-workspace.js,AUTO-COMMIT-src-components-tools-astro-view.html,AUTO-COMMIT-src-components-tools-astro-view.js,AUTO-COMMIT-src-components-tools-code-sight.html,AUTO-COMMIT-src-components-tools-code-sight.js,

src/components/tools/astro-view-example-source.js

@@ -0,0 +1,4 @@
+function a() {
+
+
+}

src/components/tools/astro-view-example-workspace.js

@@ -0,0 +1 @@
+// now wen have a workspace

src/components/tools/astro-view.html

@@ -0,0 +1,104 @@
+<template id="astro-view" >
+  <style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
+  <style data-src="/templates/livelystyle.css"></style>
+  <style>
+    :host {
+      display: flex;
+    }
+
+    .layout-column {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .layout-row {
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+    }
+
+    .pane {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .pane.tool {
+      margin: 1px;
+      border: 1px solid #d5d5d5;
+    }
+
+    #content {
+      margin: 1px;
+    }
+
+    #workspace-path {
+      border: 1px solid #d5d5d5;
+      border-radius: 2px;
+    }
+
+    input {
+      width: 40px;
+      flex: 100;
+      margin: 2px;
+    }
+
+    #source, #ast {
+      width: 100%;
+      height: 100%;
+    }
+
+    button.toggle {
+      color: black;
+    }
+
+    button.toggle.on {
+      color: white;
+      background: steelblue;
+    }
+
+    #log {
+      white-space: pre;
+      overflow: auto;
+      max-height: 300px
+    }
+
+  </style>
+
+  <div id="content" class="pane layout-column">
+    <div id="navigationPane" class="layout-row">
+      <input type="text" id="sourcePath" value="">
+      <button class="toggle" id="update" title="Update AST (right-click to toggle auto-mode).">
+          <i class="fa fa-refresh fa-fw"></i>
+      </button>
+    </div>
+
+    <div class="pane layout-row">
+      <div class="pane tool layout-column">
+        <b>Source</b>
+        <lively-editor class="pane" id="source"></lively-editor>
+      </div>
+
+      <lively-separator></lively-separator>
+
+      <div class="pane tool layout-column">
+        <b>AST</b>
+        <lively-ast-treesitter-inspector class="pane" id="ast"></lively-ast-treesitter-inspector>
+      </div>
+      <lively-separator></lively-separator>
+      <div class="pane tool layout-column">
+        <div>
+          <b>Tokens</b> <span id="tokensInfo"></span>
+        </div>
+        <div class="pane" id="tokens">xxx</div>
+        <div>
+          <b>Embeddings</b> <span id="tokensInfo"></span>
+        </div>
+        <div class="pane" id="embeddings">xxxx</div>
+      </div>
+    </div>
+    <lively-separator></lively-separator>
+    <lively-editor class="pane" id="workspace"></lively-editor>
+
+  </div>
+</template>

src/components/tools/astro-view.js

@@ -0,0 +1,227 @@
+/*MD # Astro View - AST Token View spelled wrong
+
+MD*/
+
+
+import Morph from 'src/components/widgets/lively-morph.js';
+import SyntaxChecker from 'src/client/syntax.js'
+
+import { uuid as generateUUID, debounce, flatmap, executeAllTestRunners, promisedEvent, loc, range } from 'utils';
+
+import {DomainObject, TreeSitterDomainObject, LetSmilyReplacementDomainObject, ConstSmilyReplacementDomainObject} from "src/client/domain-code.js"
+
+
+export default class AstroView extends Morph {
+
+  static get defaultSourceURL() { return lively4url + "/src/components/tools/astro-view-example-source.js"; }
+  static get defaultWorkspaceURL() { return lively4url + "/src/components/tools/astro-view-example-workspace.js"; }
+
+  /*MD ## UI Accessing MD*/
+
+  get container() { return this.get("#content"); }
+
+  get sourceEditor() { return this.get("#source"); }
+  get workspaceEditor() { return this.get("#workspace"); }
+
+
+  get sourceLCM() { return this.sourceEditor.livelyCodeMirror(); }
+  get sourceCM() { return this.sourceEditor.currentEditor(); }
+  get source() { return this.sourceCM.getValue(); }
+
+  get astInspector() { return this.get("#ast"); }
+
+  get sourcePath() { return this.get("#sourcePath"); }
+
+  get sourceURL() { return this.sourcePath.value; }
+  set sourceURL(urlString) { this.sourcePath.value = urlString; }
+  onSourcePathEntered(urlString) { this.loadSourceFile(urlString); }
+
+  get workspaceURL() { return this.workspaceEditor.getURL(); }
+  set workspaceURL(urlString) {
+    this.workspaceEditor.setURL(urlString) }
+  // onSourcePathEntered(urlString) { this.loadSourceFile(urlString); }
+
+
+  get updateButton() { return this.get("#update"); }
+
+  get autoUpdate() { return this._autoUpdate; }
+  set autoUpdate(bool) {
+    this.updateButton.classList.toggle("on", bool);
+    this.updateButton.querySelector("i").classList.toggle("fa-spin", bool);
+    this._autoUpdate = bool;
+  }
+  onUpdate(evt) {
+    if (evt.button === 2) this.autoUpdate = !this.autoUpdate;
+    this.update();
+  }
+
+  log(s) {
+    console.log(s)
+  }
+
+  /*MD ## Initialization MD*/
+
+  async loadSourceFile(urlString) {
+    console.log("LOAD ", urlString);
+    this.sourceURL = urlString;
+    this.sourceEditor.setURL(lively.paths.normalizePath(urlString, ""));
+    await this.sourceEditor.loadFile();
+    await this.update(); 
+  }
+
+  async loadWorkspaceFile(urlString) {
+    console.log("LOAD Workspace", urlString);
+    this.workspaceURL = urlString;
+    this.workspaceEditor.setURL(lively.paths.normalizePath(urlString, ""));
+    await this.workspaceEditor.loadFile();
+  }
+
+
+  async initialize() {
+    this.windowTitle = "Astro View";
+    this.registerButtons();
+
+    this.getAllSubmorphs("button").forEach(button => {
+      button.addEventListener('contextmenu', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.currentTarget.dispatchEvent(new MouseEvent("click", {button: 2}));
+      });
+    });
+
+    this.debouncedUpdate = this.update::debounce(500);
+
+    await this.sourceEditor.awaitEditor();
+
+    this.sourceEditor.hideToolbar();
+    this.astInspector.connectEditor(this.sourceEditor);
+    this.sourceLCM.doSave = async () => {
+      this.save();
+    };
+    this.sourceLCM.addEventListener("change", (() =>
+      SyntaxChecker.checkForSyntaxErrors(this.sourceCM))::debounce(200));
+    this.sourceLCM.addEventListener("change", () => {
+      if (this.autoUpdate) this.debouncedUpdate()
+    });
+
+
+    this.sourcePath.addEventListener("keyup", evt => {
+      if (evt.code == "Enter") this.onSourcePathEntered(this.sourcePath.value);
+    });
+
+    const source = this.getAttribute("source");
+    if (source) this.loadSourceFile(source);
+    this.autoUpdate = true;
+
+
+    const workspace = this.getAttribute("workspace");
+    if (workspace) this.loadWorkspaceFile(workspace);
+
+
+
+    this.dispatchEvent(new CustomEvent("initialize"));
+  }
+
+  onClearLog() {
+
+  }
+
+  onEditorCursorActivity(cm) {
+    var from = cm.getCursor(true)
+    var to = cm.getCursor(false)
+
+    this.get("#editorInfo").textContent = `${cm.indexFromPos(from)}-${cm.indexFromPos(to)}`
+  }
+
+  onDomainObjectSelect(node, object) {
+
+    if(!object.isDomainObject) return false
+
+
+    var currentRootNode = object.rootNode().treeSitter
+    if (currentRootNode !== this.treeSitterRootNode) {
+      this.treeSitterRootNode = currentRootNode
+      this.astInspector.inspect(this.treeSitterRootNode);
+    }
+    this.astInspector.selectNode(object.treeSitter)
+
+  }
+
+  onDomainCodeChanged() {
+    this.log("domain code changed " +  this.isUpdating + " length: " + this.editor.getText().length)
+
+    if (this.lastSource == this.editor.getText()) return
+
+    // this.domainObjectInspector.inspect(this.domainObjectInspector.targetObject)
+
+    // prevent cycle....
+    var oldAutoUpdate = this._autoUpdate
+    this._autoUpdate = false
+
+    var newSource = this.editor.getText()
+    this.sourceEditor.setText(newSource)
+
+    DomainObject.edit(this.domainObject, newSource, undefined, {
+      newAST: (ast) => {
+
+        this.astInspector.inspect(ast.rootNode);
+      }
+    }) 
+
+    this.domainObject.updateReplacements()
+    this.domainObjectInspector.inspect(this.domainObject)
+
+    // TODO
+    // this.treeSitterRootNode = evt.detail.node.debugNewAST.rootNode
+    // this.astInspector.inspect(this.treeSitterRootNode)
+
+    this._autoUpdate = true
+  }
+
+  onDomainUpdateButton() {
+    lively.notify("update")
+    this.domainObjectInspector.inspect(this.domainObjectInspector.targetObject)
+  }
+
+  onDomainGraphButton() {
+    lively.openMarkdown(lively4url + "/src/components/tools/domain-code-graph.md", 
+      "Domain Code Graph", {domainObject: this.domainObject})
+  }
+  /*MD ## Execution MD*/
+
+  async update() {
+    this.lastSource  = this.source
+    this.log("source code changed, length: " + this.source.length + "")
+
+    try {
+      var node = await this.astInspector.treeSitterParse(this.source)
+      this.treeSitterRootNode = node.rootNode
+      this.astInspector.inspect(this.treeSitterRootNode);
+    } catch (e) {
+      this.astInspector.inspect({Error: e.message});
+    }
+  }
+
+  async save() {
+    if (this.sourceURL) {
+      await this.sourceEditor.saveFile();
+    }
+    this.update();
+  }
+
+  /*MD ## Lively Integration MD*/
+
+  livelyPrepareSave() {
+    this.setAttribute('source', this.sourceURL);
+    console.log("PREPARE SAVE (AST Explorer)");
+  }
+
+  livelyMigrate(other) {
+  }
+
+  async livelyExample() {
+    await this.loadSourceFile(AstroView.defaultSourceURL);
+    await this.loadWorkspaceFile(AstroView.defaultWorkspaceURL);
+
+  }
+}