deno.json

@@ -1,9 +1,11 @@
 {
-    "compilerOptions": {"types":["./store"], "checkJs": true},
+    "compilerOptions": {"types":["/store.d.ts"]},
+    "lint": {"files": {"include": ["src/"]}},
+    "fmt": {"files": {"include": ["src/"]}},
     "tasks":
     {
         "fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
-        "test": "deno test --no-lock --no-check --watch store.test.ts",
+        "test": "deno test --no-lock --watch store.test.js",
-        "test-debug": "deno test --no-lock --no-check --inspect-brk store.test.ts"
+        "test-debug": "deno test --no-lock --inspect-brk store.test.js"
     }
 }

src/app.js

@@ -1,20 +1,25 @@
 import * as TW from "./twind.js";
 import * as UI from "./ui.js";
-import * as Store from "./store.js";
+import { Reducer, Initial } from "./store.js";
 import React from "https://esm.sh/preact@10.11.3/compat";
 import {html} from "https://esm.sh/htm@3.1.1/preact";
 
-const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
+/** @type {preact.Context<Binding>} */
-const ShadowDiv = document.createElement("div");
+const StoreContext = React.createContext([Initial, (_a)=>{}]);
-const ShadowCSS = document.createElement("style");
+/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
-ShadowDOM.append(ShadowCSS);
+const StoreProvider =(props)=>
-ShadowDOM.append(ShadowDiv);
+{
-
+    const initialized = Reducer(Initial, {Name:"Test", Data:0})
-TW.Init(ShadowCSS, ShadowDiv);
+    const reducer = React.useReducer(Reducer, initialized);
+    return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
+}
+/** @typedef {[state:Store.State, dispatch:(inAction:Store.Action)=>void]} Binding */
+/** @type {()=>Binding} */
+const StoreConsumer =()=> React.useContext(StoreContext);
 
 const Audiogram =()=>
 {
-    const [State, Dispatch] = Store.Consumer();
+    const [State, Dispatch] = StoreConsumer();
 
     const testL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`);
     const testR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`);
@@ -25,11 +30,20 @@ const Audiogram =()=>
     <svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
         ${testL}
         ${testR}
-    </svg>`;
+    </svg>
-};
+    `;
+}
+
+const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
+const ShadowDiv = document.createElement("div");
+const ShadowCSS = document.createElement("style");
+ShadowDOM.append(ShadowCSS);
+ShadowDOM.append(ShadowDiv);
+
+TW.Init(ShadowCSS, ShadowDiv);
 
 React.render(html`
-    <${Store.Provider}>
+    <${StoreProvider}>
         <${UI.Button} icon="+">hey!<//>
         <${UI.Button} light>Left<//>
         <${UI.Button} inactive>Right<//>

src/store.js

@@ -1,5 +1,3 @@
-import React from "https://esm.sh/preact@10.11.3/compat";
-
 const size = 1/6;
 /** @type {Array<Store.ColumnMapping>} */
 export const ColumnMapping = [
@@ -28,7 +26,7 @@ export const ColumnLookup =(inFrequency)=>
 /** @type {(freq:Store.TestFrequency, chan:number, user:boolean)=>Store.TestFrequencySample|undefined} */
 export const MarkGet =(freq, chan, user)=> freq[/** @type {Store.PlotKey} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
 
-/** @type {(freq:Store.TestFrequency, chan:number, mark:Store.TestFrequencySample|undefined)=>Store.TestFrequencySample|undefined} */
+/** @type {(freq:Store.TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>Store.TestFrequencySample|undefined} */
 export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
 
 /** @type {Store.State} */
@@ -97,13 +95,16 @@ const Update =
 };
 
 
-/** @type {(inTest:Store.Test, inChan:number, inStim:Store.Range, inIsUser:boolean)=>Store.DrawGroup} */
+/** @type {(inTest:Store.Test, inChan:number, inStim:Range, inIsUser:boolean)=>Store.DrawGroup} */
 export function Congtiguous(inTest, inChan, inStim, inIsUser)
 {
     /** @type {Store.DrawGroup} */
     const output = {Points:[], Paths:[]};
 
     let plot;
+    let valid = false;
+    /** @type {Array<Store.DrawPoint>} */
+    let segment = [];
     for(let i=0; i<inTest.Plot.length; i++)
     {
         plot = inTest.Plot[i];
@@ -120,18 +121,24 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
                     Mark: mark
                 };
                 output.Points.push(point);
+
+                if(mark.Resp)
+                {
+                    if(!valid)
+                    {
+                        segment = [];
+                        output.Paths.push(segment);
+                    }
+                    valid = true;
+                    segment.push(point);
+                }
+                else
+                {
+                    valid = false;
+                }
             }
         }
     }
-    for(let i=1; i<output.Points.length; i++)
-    {
-        /** @type {Store.DrawLine} */
-        const line = {Head:output.Points[i-1], Tail:output.Points[i]};
-        if(line.Head.Mark.Resp && line.Tail.Mark.Resp)
-        {
-            output.Paths.push(line);
-        }
-    }
     return output;
 }
 
@@ -179,18 +186,4 @@ export function Reducer(inState, inAction)
     }
 
     return clone;
-}
+}
-
-
-/** @type {preact.Context<Store.Binding>} */
-export const Context = React.createContext([Initial, (_a)=>{}]);
-/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
-export const Provider =(props)=>
-{
-    const initialized = Reducer(Initial, {Name:"Test", Data:0});
-    /** @type {Store.Binding} */
-    const reducer = React.useReducer(Reducer, initialized);
-    return React.createElement(Context.Provider, {value:reducer, children:props.children});
-}
-/** @type {()=>Store.Binding} */
-export const Consumer =()=> React.useContext(Context);

store.d.ts

@@ -47,11 +47,8 @@ declare namespace Store {
   type PlotKeyTest = "TestL" | "TestR";
   type PlotKey = PlotKeyUser | PlotKeyTest;
 
-  type DrawPoint = { X: number|string; Y: number|string; Mark: TestFrequencySample };
+  type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample };
-  type DrawLine = { Head:DrawPoint, Tail:DrawPoint};
+  type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<Array<DrawPoint>> };
-  type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
   type DrawChart = { Left: DrawGroup; Right: DrawGroup };
   type DrawTest = { User?: DrawChart; Test?: DrawChart };
-
-  type Binding = [state:State, dispatch:(inAction:Action)=>void]
 }

store.test.js

@@ -1,5 +1,5 @@
 import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
-import { Reducer, ColumnMapping, Initial } from "./src/store.js";
+import { Reducer, ColumnMapping, Congtiguous, Initial } from "./src/store.js";
 
 let state = {...Initial};
 
@@ -41,7 +41,7 @@ Deno.test("Initialize", async(t)=>
     await t.step("Live context values are correct", ()=>
     {
         assertEquals(state.Live.Test, state.Tests[0]);
-        assertEquals(state.Live.Freq?.Hz, ColumnMapping[state.Freq.Value][0]);
+        assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq.Value][0]);
         assertEquals(state.Live.Mark, undefined, "(User) Mark is undefined");
     });
 });
@@ -64,10 +64,10 @@ Deno.test("Make Marks", async(t)=>
 
     await t.step("Check marked value", ()=>
     {
-        assertEquals(state.Live.Freq?.UserL !== undefined, true, `there will be a user mark for the left channel`);
+        assertEquals(state.Live.Freq.UserL !== undefined, true, `there will be a user mark for the left channel`);
-        assertEquals(state.Live.Freq?.UserR === undefined, true, `but not the right`);
+        assertEquals(state.Live.Freq.UserR === undefined, true, `but not the right`);
-        assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
+        assertEquals(state.Live.Mark.Stim, state.Stim.Value);
-        assertEquals(state.Live.Mark?.Resp, true);
+        assertEquals(state.Live.Mark.Resp, true);
     });
 
     await t.step("Dispatch Freq, Stim, and Chan updates", ()=>
@@ -85,18 +85,40 @@ Deno.test("Make Marks", async(t)=>
 
     await t.step("Check marked value", ()=>
     {
-        assertEquals(state.Live.Freq?.UserR !== undefined, true, `there will be a user mark for the right channel`);
+        assertEquals(state.Live.Freq.UserR !== undefined, true, `there will be a user mark for the right channel`);
-        assertEquals(state.Live.Freq?.UserL !== undefined, true, `and the left`);
+        assertEquals(state.Live.Freq.UserL !== undefined, true, `and the left`);
-        assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
+        assertEquals(state.Live.Mark.Stim, state.Stim.Value);
-        assertEquals(state.Live.Mark?.Resp, false);
+        assertEquals(state.Live.Mark.Resp, false);
     });
 
     await t.step("Live context values are correct", ()=>
     {
         assertEquals(state.Live.Test, state.Tests[0]);
-        assertEquals(state.Live.Freq?.Hz, ColumnMapping[state.Freq.Value][0]);
+        assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq.Value][0]);
-        assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
+        assertEquals(state.Live.Mark.Stim, state.Stim.Value);
     });
 
     console.log(state.Draw);
+});
+
+Deno.test("Contiguous Lines", ()=>
+{
+    /** @type {Store.Test} */
+    const model = {
+        Name:"",
+        Plot:[
+            {Hz: 500,  TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
+            {Hz: 1000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
+            {Hz: 2000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:false}},
+            {Hz: 3000, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
+            {Hz: 4000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
+            {Hz: 4000, TestL: {Stim:50, Resp:true}, TestR: {Stim:55, Resp:true}, UserL:{Stim:40, Resp:true}}
+        ]
+    }
+
+    const {Points, Paths} = Congtiguous(model, 0, Initial.Stim, true);
+    assertEquals(Points.length, 6);
+    assertEquals(Paths.length, 2);
+    assertEquals(Paths[0].length, 2);
+    assertEquals(Paths[1].length, 3);
 });