kmap-term-tree 0.9.21 → 1.0.0

package/demo/index.html

@@ -1,27 +1,141 @@
 <!doctype html>
-<html lang="en-GB">
+<html lang="de">
 <head>
   <meta charset="utf-8">
+  <title>kmap-term-tree Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css">
   <style>
     body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f1f5f9;
+      color: #1e293b;
+      margin: 0;
+      padding: 32px 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .card {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      max-width: 680px;
+      width: 100%;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+    h1 {
+      font-size: 1.5rem;
+      margin-top: 0;
+      margin-bottom: 16px;
+      color: #0f172a;
+    }
+    .input-row {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+    input[type="text"] {
+      flex: 1;
+      font-size: 1.1rem;
+      padding: 10px 14px;
+      border: 1px solid #cbd5e1;
+      border-radius: 8px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+    input[type="text"]:focus {
+      border-color: #0284c7;
+      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
+    }
+    .presets {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 20px;
+    }
+    button.chip {
+      background: #e2e8f0;
+      border: none;
+      padding: 6px 12px;
+      border-radius: 16px;
+      font-size: 0.85rem;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+    button.chip:hover {
+      background: #0284c7;
+      color: white;
+    }
+    .controls {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 20px;
+      font-size: 0.9rem;
+      color: #475569;
+    }
+    .tree-box {
       background: #fafafa;
+      border: 1px solid #e2e8f0;
+      border-radius: 8px;
+      padding: 20px;
+      min-height: 220px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
     }
   </style>
 </head>
 <body>
-  <div id="demo"></div>
+  <div class="card">
+    <h1>KMap Termbaum (Term Tree)</h1>
+
+    <div class="input-row">
+      <input type="text" id="termInput" value="(2+a)(3-b)" placeholder="AsciiMath Term eingeben, z.B. 2a+3b" />
+    </div>
+
+    <div class="presets">
+      <span style="font-size: 0.85rem; color: #64748b; align-self: center; margin-right: 4px;">Beispiele:</span>
+      <button class="chip" onclick="setTerm('2a+3b')">2a+3b</button>
+      <button class="chip" onclick="setTerm('(2+a)(3-b)')">(2+a)(3-b)</button>
+      <button class="chip" onclick="setTerm('(a+b)/(c+d)')">(a+b)/(c+d)</button>
+      <button class="chip" onclick="setTerm('2a + sin(3b)')">2a + sin(3b)</button>
+      <button class="chip" onclick="setTerm('x^2 - 4')">x^2 - 4</button>
+      <button class="chip" onclick="setTerm('sqrt(b^2 - 4ac)')">sqrt(b^2 - 4ac)</button>
+      <button class="chip" onclick="setTerm('(-b + sqrt(b^2 - 4ac)) / (2a)')">(-b + sqrt(b^2 - 4ac)) / (2a)</button>
+      <button class="chip" onclick="setTerm('5 - -2')">5 - -2</button>
+    </div>
+
+    <div class="controls">
+      <label>
+        <input type="checkbox" id="showLabels" onchange="toggleLabels(this.checked)"> Bezeichnungen anzeigen
+      </label>
+    </div>
+
+    <div class="tree-box">
+      <kmap-term-tree id="termTree" term="(2+a)(3-b)" showDetails></kmap-term-tree>
+    </div>
+  </div>
 
   <script type="module">
-    import { html, render } from 'lit-html';
     import '../dist/src/kmap-term-tree.js';
 
-    const title = 'Hello owc World!';
-    render(
-      html`
-        <kmap-term-tree>2a+2b</kmap-term-tree>
-      `,
-      document.querySelector('#demo')
-    );
+    const input = document.getElementById('termInput');
+    const tree = document.getElementById('termTree');
+
+    input.addEventListener('input', (e) => {
+      tree.term = e.target.value;
+    });
+
+    window.setTerm = function(val) {
+      input.value = val;
+      tree.term = val;
+    };
+
+    window.toggleLabels = function(checked) {
+      tree.showLabels = checked;
+    };
   </script>
 </body>
 </html>

package/demo/kmap.html

@@ -0,0 +1,64 @@
+<style>
+  input {
+    border-radius: 4px 4px 0 0;
+    background-color: inherit;
+    border: none;
+    border-bottom: 1px solid darkgray;
+    padding: 8px;
+    transition: background-color .3s ease-in-out, border-bottom-color .3s ease-in-out;
+    outline: none;
+  }
+
+  input:hover {
+    background-color: lightgray;
+    border-bottom-color: black;
+  }
+
+  input:focus {
+    background-color: lightgray;
+    border-bottom-color: blue;
+  }
+</style>
+
+<h3>Termbaum Generator</h3>
+<p>Hier gibt es ein Tool, das zu einem Term automatisch den Termbaum erzeugt:</p>
+<container>
+  <box>
+    <div><span style="white-space: nowrap"><b>Term: </b> <input id="term"
+          oninput="this.getRootNode().querySelector('#tree').term = event.target.value" /></span>
+    </div>
+    <p><i>Ändere den Term und schau Dir den Baum dazu an!</i></p>
+    <div class="presets">
+      <b>Beispiele:</b>
+      <button class="chip"
+        onclick="this.getRootNode().querySelector('#term').value = '2a+3b'; this.getRootNode().querySelector('#tree').term = '2a+3b'">2a+3b</button>
+      <button class="chip"
+        onclick="this.getRootNode().querySelector('#term').value = '(2+a)(3-b)'; this.getRootNode().querySelector('#tree').term = '(2+a)(3-b)'">(2+a)(3-b)</button>
+      <button class="chip"
+        onclick="this.getRootNode().querySelector('#term').value = '(a+b)/(c+d)'; this.getRootNode().querySelector('#tree').term = '(a+b)/(c+d)'">(a+b)/(c+d)</button>
+      <button class="chip"
+        onclick="this.getRootNode().querySelector('#term').value = '2a + sin(3b)'; this.getRootNode().querySelector('#tree').term = '2a + sin(3b)'">2a
+        + sin(3b)</button>
+      <button class="chip"
+        onclick="this.getRootNode().querySelector('#term').value = 'x^2 - 4'; this.getRootNode().querySelector('#tree').term = 'x^2 - 4'">x^2
+        - 4</button>
+      <button class="chip"
+        onclick="this.getRootNode().querySelector('#term').value = 'sqrt(b^2 - 4ac)'; this.getRootNode().querySelector('#tree').term = 'sqrt(b^2 - 4ac)'">sqrt(b^2
+        - 4ac)</button>
+    </div>
+  </box>
+  <growbox>
+    <kmap-term-tree lazy:KmapTermTree:kmap-term-tree id="tree" showDetails></kmap-term-tree>
+  </growbox>
+</container>
+
+<script>
+  const root = document.currentScript ? document.currentScript.getRootNode() : document;
+  console.log(root)
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      root.querySelector('#term').value = '2a+3b';
+      root.querySelector('#tree').term = '2a+3b';
+    });
+  });
+</script>

package/dist/src/KmapTermTree.d.ts

@@ -1,52 +1,43 @@
 import { LitElement, PropertyValues } from 'lit';
-import { TermNode } from "./parser.js";
-import { Token } from "./tokenizer.js";
-interface Connection {
-    from: number;
-    to: number;
-}
-interface Position {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-interface Edge {
-    from: Position;
-    to: Position;
-}
 export declare class KmapTermTree extends LitElement {
-    shadowRoot: ShadowRoot;
-    static styles: import("lit").CSSResult;
-    private parser;
+    static styles: import("lit").CSSResult[];
     term?: string;
     tension: number;
-    tokens?: Token[];
-    nodes?: TermNode[];
-    termNode?: TermNode;
-    depths?: {
-        [key: string]: number;
-    };
-    maxDepths?: number;
-    connections?: Connection[];
-    edgesElement?: KmapTermTreeEdge;
-    tokensElement?: HTMLDivElement;
-    updateSlotted({ target }: {
-        target: any;
-    }): void;
-    protected update(_changedProperties: PropertyValues): void;
-    private calcDepths;
+    showLabels: boolean;
+    showDetails: boolean;
+    private ast?;
+    private error?;
+    private flatNodes;
+    private edges;
+    private activeNodeId?;
+    private activeSubtreeIds;
+    private treeHeight;
+    private highlightRect?;
+    private formulaElement?;
+    private treeCanvasElement?;
+    private resizeObserver?;
+    private lastObservedWidth;
+    private resizeFrameId?;
+    private animationTimers;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onAnimationOrTransitionEnd;
+    private triggerLayoutUpdate;
+    private watchAncestorAnimations;
+    private scheduleAnimationCheck;
+    private clearAnimationTimers;
+    updateSlotted(event: Event): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    private parseInput;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
+    private renderKaTeX;
+    private recalculateLayout;
+    private collectSubtreeIds;
+    private onNodeHover;
+    private setActiveNode;
+    private findNode;
+    private getNodeVisualBounds;
+    private updateHighlightRect;
+    private renderPath;
     render(): import("lit-html").TemplateResult<1>;
-    protected updated(_changedProperties: PropertyValues): Promise<void>;
-    _connect(connection: Connection): Edge | undefined;
-    _findAbsolutePosition(element: HTMLElement): Position;
-    private static _prettify;
-}
-export declare class KmapTermTreeEdge extends LitElement {
-    static styles: import("lit").CSSResult;
-    tension: number;
-    edges: Edge[];
-    render(): "" | import("lit-html").TemplateResult<2>;
-    _path(edge: Edge): string;
 }
-export {};