kmap-term-tree 0.9.21 → 1.0.0

package/stories/index.stories.ts

@@ -6,6 +6,9 @@ export default {
   component: 'kmap-term-tree',
   argTypes: {
     term: { control: 'text' },
+    showLabels: { control: 'boolean' },
+    showDetails: { control: 'boolean' },
+    tension: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
     textColor: { control: 'color' },
     backgroundColor: { control: 'color' },
     borderColor: { control: 'color' },
@@ -21,6 +24,9 @@ interface Story<T> {
 
 interface ArgTypes {
   term?: string;
+  showLabels?: boolean;
+  showDetails?: boolean;
+  tension?: number;
   textColor?: string;
   backgroundColor?: string;
   borderColor?: string;
@@ -28,17 +34,44 @@ interface ArgTypes {
 }
 
 const Template: Story<ArgTypes> = ({
-  term = '2a+sin(3b)',
+  term = '(2+a)(3-b)',
+  showLabels = false,
+  showDetails = true,
+  tension = 0.5,
   textColor,
   backgroundColor,
   borderColor,
   edgeColor,
 }: ArgTypes) => html`
   <kmap-term-tree
-    style="--kmap-term-tree-text-color: ${textColor || 'black'}; --kmap-term-tree-background-color: ${backgroundColor || 'white'}; --kmap-term-tree-border-color: ${borderColor || '#005b9f'}; --kmap-term-tree-edge-color: ${edgeColor || '#fbc02d'};"
+    style="--kmap-term-tree-text-color: ${textColor ||
+    '#1f2937'}; --kmap-term-tree-background-color: ${backgroundColor ||
+    '#ffffff'}; --kmap-term-tree-border-color: ${borderColor ||
+    '#005b9f'}; --kmap-term-tree-edge-color: ${edgeColor || '#cbd5e1'};"
     .term=${term}
+    .showLabels=${showLabels}
+    .showDetails=${showDetails}
+    .tension=${tension}
   >
   </kmap-term-tree>
 `;
 
 export const Regular = Template.bind({});
+Regular.args = {
+  term: '(2+a)(3-b)',
+};
+
+export const Fraction = Template.bind({});
+Fraction.args = {
+  term: '(a+b)/(c+d)',
+};
+
+export const Trigonometry = Template.bind({});
+Trigonometry.args = {
+  term: '2a + sin(3b)',
+};
+
+export const Mitternachtsformel = Template.bind({});
+Mitternachtsformel.args = {
+  term: 'sqrt(b^2 - 4ac)',
+};

package/test/asciimath-parser.test.ts

@@ -0,0 +1,50 @@
+import { expect } from '@open-wc/testing';
+import { parseAsciiMath } from '../src/asciimath-parser.js';
+
+describe('asciimath-parser', () => {
+  it('parses addition and variables', () => {
+    const ast = parseAsciiMath('2a + 3b');
+    expect(ast.op).to.equal('Add');
+    expect(ast.mathJson).to.deep.equal([
+      'Add',
+      ['Multiply', 2, 'a'],
+      ['Multiply', 3, 'b'],
+    ]);
+    expect(ast.depth).to.equal(2);
+  });
+
+  it('handles implicit multiplication with parentheses', () => {
+    const ast = parseAsciiMath('(2+a)(3-b)');
+    expect(ast.op).to.equal('Multiply');
+    expect(ast.mathJson).to.deep.equal([
+      'Multiply',
+      ['Add', 2, 'a'],
+      ['Subtract', 3, 'b'],
+    ]);
+    expect(ast.depth).to.equal(2);
+  });
+
+  it('handles unary minus and double minus', () => {
+    const ast1 = parseAsciiMath('-3 * x');
+    expect(ast1.op).to.equal('Multiply');
+    expect(ast1.mathJson).to.deep.equal(['Multiply', ['Negate', 3], 'x']);
+
+    const ast2 = parseAsciiMath('5 - -2');
+    expect(ast2.op).to.equal('Subtract');
+    expect(ast2.mathJson).to.deep.equal(['Subtract', 5, ['Negate', 2]]);
+  });
+
+  it('handles powers and functions', () => {
+    const ast = parseAsciiMath('x^2 + sin(3x)');
+    expect(ast.op).to.equal('Add');
+    expect(ast.children[0].op).to.equal('Power');
+    expect(ast.children[1].op).to.equal('Sin');
+  });
+
+  it('handles division / fraction', () => {
+    const ast = parseAsciiMath('(a + b) / (c + d)');
+    expect(ast.op).to.equal('Divide');
+    expect(ast.children[0].op).to.equal('Add');
+    expect(ast.children[1].op).to.equal('Add');
+  });
+});

package/test/kmap-term-tree.test.ts

@@ -4,16 +4,75 @@ import { KmapTermTree } from '../src/KmapTermTree.js';
 import '../src/kmap-term-tree.js';
 
 describe('KmapTermTree', () => {
-  it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture<KmapTermTree>(html`<kmap-term-tree></kmap-term-tree>`);
+  it('renders a term with KaTeX and tree nodes', async () => {
+    const el = await fixture<KmapTermTree>(
+      html`<kmap-term-tree term="2a+3b"></kmap-term-tree>`
+    );
+    await el.updateComplete;
 
-    expect(el.title).to.equal('Hey there');
-    //expect(el.counter).to.equal(5);
+    const formula = el.shadowRoot!.querySelector('#formula');
+    expect(formula).to.exist;
+    expect(formula!.innerHTML).to.contain('katex');
+
+    const nodes = el.shadowRoot!.querySelectorAll('.tree-node');
+    // For 2a + 3b: nodes are +, and two implicit multiplications (3 operations)
+    expect(nodes.length).to.be.greaterThan(0);
+  });
+
+  it('supports slot content', async () => {
+    const el = await fixture<KmapTermTree>(
+      html`<kmap-term-tree>(2+a)(3-b)</kmap-term-tree>`
+    );
+    await el.updateComplete;
+
+    expect(el.term).to.equal('(2+a)(3-b)');
+    const formula = el.shadowRoot!.querySelector('#formula');
+    expect(formula!.innerHTML).to.contain('katex');
+  });
+
+  it('highlights full height for fractions and roots', async () => {
+    const el = await fixture<KmapTermTree>(
+      html`<kmap-term-tree term="sqrt(2/3)"></kmap-term-tree>`
+    );
+    await el.updateComplete;
+
+    const overlay = el.shadowRoot!.querySelector(
+      '.highlight-overlay'
+    ) as HTMLElement;
+    expect(overlay).to.exist;
+
+    const overlayRect = overlay.getBoundingClientRect();
+    const n1 = el.shadowRoot!.getElementById('n1')!; // numerator 2
+    const n2 = el.shadowRoot!.getElementById('n2')!; // denominator 3
+
+    const r1 = n1.getBoundingClientRect();
+    const r2 = n2.getBoundingClientRect();
+
+    // The overlay top must be at or above the numerator top
+    expect(overlayRect.top).to.be.at.most(r1.top);
+    // The overlay bottom must be at or below the denominator bottom
+    expect(overlayRect.bottom).to.be.at.least(r2.bottom);
   });
 
-  it('passes the a11y audit', async () => {
-    const el = await fixture<KmapTermTree>(html`<kmap-term-tree></kmap-term-tree>`);
+  it('computes correct layout even with CSS scale transform', async () => {
+    const el = await fixture<KmapTermTree>(
+      html`<kmap-term-tree term="2a+3b"></kmap-term-tree>`
+    );
+    await el.updateComplete;
+
+    const normalNode = el.shadowRoot!.querySelector('.tree-node') as HTMLElement;
+    expect(normalNode).to.exist;
+    const normalLeft = parseFloat(normalNode.style.left);
 
-    await expect(el).shadowDom.to.be.accessible();
+    // Apply scale transform and recalculate layout
+    el.style.transform = 'scale(0.3)';
+    (el as any).recalculateLayout();
+
+    const scaledNode = el.shadowRoot!.querySelector('.tree-node') as HTMLElement;
+    const scaledLeft = parseFloat(scaledNode.style.left);
+
+    // Both should compute substantially the same local canvas left coordinate (within 2px)
+    expect(Math.abs(scaledLeft - normalLeft)).to.be.below(2);
   });
 });
+