feature/layout-updates #1
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {"types":["/store.d.ts"]},
|
"compilerOptions": {"types":["./store"], "checkJs": true},
|
||||||
"tasks":
|
"tasks":
|
||||||
{
|
{
|
||||||
"fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
|
"fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
|
||||||
"test": "deno test --no-lock --watch store.test.js",
|
"test": "deno test --no-lock --no-check --watch store.test.ts",
|
||||||
"test-debug": "deno test --no-lock --inspect-brk store.test.js"
|
"test-debug": "deno test --no-lock --no-check --inspect-brk store.test.ts"
|
||||||
}
|
}
|
||||||
}
|
}
|
65
src/app.js
65
src/app.js
@ -1,46 +1,9 @@
|
|||||||
import * as TW from "./twind.js";
|
import * as TW from "./twind.js";
|
||||||
import * as UI from "./ui.js";
|
import * as UI from "./ui.js";
|
||||||
import { Reducer, Initial } from "./store.js";
|
import * as Store from "./store.js";
|
||||||
import React from "https://esm.sh/preact@10.11.3/compat";
|
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||||
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
import {html} from "https://esm.sh/htm@3.1.1/preact";
|
||||||
|
|
||||||
/** @type {preact.Context<Binding>} */
|
|
||||||
const StoreContext = React.createContext([Initial, (_a)=>{}]);
|
|
||||||
|
|
||||||
|
|
||||||
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
|
||||||
const StoreProvider =(props)=>
|
|
||||||
{
|
|
||||||
const reducer = React.useReducer(Reducer, Initial);
|
|
||||||
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 Deep =()=>
|
|
||||||
{
|
|
||||||
const [State, Dispatch] = StoreConsumer();
|
|
||||||
return html`
|
|
||||||
<${UI.Button} onClick=${()=>Dispatch({Name:"Stim", Data:1})} disabled=${State.Stim.Value == State.Stim.Max}>
|
|
||||||
${State.Stim.Value}
|
|
||||||
<//>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Audiogram =()=>
|
|
||||||
{
|
|
||||||
const [State, Dispatch] = StoreConsumer();
|
|
||||||
return html`
|
|
||||||
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
|
|
||||||
${State.Draw}
|
|
||||||
<${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
|
|
||||||
<${UI.Mark} right=${false}/>
|
|
||||||
<line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
|
const ShadowDOM = document.querySelector("#app").attachShadow({mode: "open"});
|
||||||
const ShadowDiv = document.createElement("div");
|
const ShadowDiv = document.createElement("div");
|
||||||
const ShadowCSS = document.createElement("style");
|
const ShadowCSS = document.createElement("style");
|
||||||
@ -49,20 +12,30 @@ ShadowDOM.append(ShadowDiv);
|
|||||||
|
|
||||||
TW.Init(ShadowCSS, ShadowDiv);
|
TW.Init(ShadowCSS, ShadowDiv);
|
||||||
|
|
||||||
|
const Audiogram =()=>
|
||||||
|
{
|
||||||
|
const [State, Dispatch] = Store.Consumer();
|
||||||
|
|
||||||
|
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} />`);
|
||||||
|
const userL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${false}/>`);
|
||||||
|
const userR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${p.X} y=${p.Y} response=${p.Mark.Resp} right=${true} />`);
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
|
||||||
|
${testL}
|
||||||
|
${testR}
|
||||||
|
</svg>`;
|
||||||
|
};
|
||||||
|
|
||||||
React.render(html`
|
React.render(html`
|
||||||
<${StoreProvider}>
|
<${Store.Provider}>
|
||||||
<${UI.Button} icon="+">hey!<//>
|
<${UI.Button} icon="+">hey!<//>
|
||||||
<${UI.Button} light>Left<//>
|
<${UI.Button} light>Left<//>
|
||||||
<${UI.Button} inactive>Right<//>
|
<${UI.Button} inactive>Right<//>
|
||||||
<${UI.Button} disabled>Right<//>
|
<${UI.Button} disabled>Right<//>
|
||||||
<${Deep}/>
|
|
||||||
<${UI.Chart}>
|
<${UI.Chart}>
|
||||||
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
|
<${Audiogram}/>
|
||||||
<${UI.Mark} right=${true} x=${"20%"} y="20%" />
|
|
||||||
<${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
|
|
||||||
<${UI.Mark} right=${false}/>
|
|
||||||
<line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
|
|
||||||
</svg>
|
|
||||||
<//>
|
<//>
|
||||||
<//>
|
<//>
|
||||||
`, ShadowDiv);
|
`, ShadowDiv);
|
53
src/store.js
53
src/store.js
@ -1,3 +1,5 @@
|
|||||||
|
import React from "https://esm.sh/preact@10.11.3/compat";
|
||||||
|
|
||||||
const size = 1/6;
|
const size = 1/6;
|
||||||
/** @type {Array<Store.ColumnMapping>} */
|
/** @type {Array<Store.ColumnMapping>} */
|
||||||
export const ColumnMapping = [
|
export const ColumnMapping = [
|
||||||
@ -26,7 +28,7 @@ export const ColumnLookup =(inFrequency)=>
|
|||||||
/** @type {(freq:Store.TestFrequency, chan:number, user:boolean)=>Store.TestFrequencySample|undefined} */
|
/** @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"}`)];
|
export const MarkGet =(freq, chan, user)=> freq[/** @type {Store.PlotKey} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
|
||||||
|
|
||||||
/** @type {(freq:Store.TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>Store.TestFrequencySample|undefined} */
|
/** @type {(freq:Store.TestFrequency, chan:number, mark:Store.TestFrequencySample|undefined)=>Store.TestFrequencySample|undefined} */
|
||||||
export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
|
export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
|
||||||
|
|
||||||
/** @type {Store.State} */
|
/** @type {Store.State} */
|
||||||
@ -95,16 +97,13 @@ const Update =
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/** @type {(inTest:Store.Test, inChan:number, inStim:Range, inIsUser:boolean)=>Store.DrawGroup} */
|
/** @type {(inTest:Store.Test, inChan:number, inStim:Store.Range, inIsUser:boolean)=>Store.DrawGroup} */
|
||||||
export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
||||||
{
|
{
|
||||||
/** @type {Store.DrawGroup} */
|
/** @type {Store.DrawGroup} */
|
||||||
const output = {Points:[], Paths:[]};
|
const output = {Points:[], Paths:[]};
|
||||||
|
|
||||||
let plot;
|
let plot;
|
||||||
let valid = false;
|
|
||||||
/** @type {Array<Store.DrawPoint>} */
|
|
||||||
let segment = [];
|
|
||||||
for(let i=0; i<inTest.Plot.length; i++)
|
for(let i=0; i<inTest.Plot.length; i++)
|
||||||
{
|
{
|
||||||
plot = inTest.Plot[i];
|
plot = inTest.Plot[i];
|
||||||
@ -116,29 +115,23 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
|||||||
{
|
{
|
||||||
/** @type {Store.DrawPoint} */
|
/** @type {Store.DrawPoint} */
|
||||||
const point = {
|
const point = {
|
||||||
X: lookup[1]*100,
|
X: lookup[1]*100 + "%",
|
||||||
Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100,
|
Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100 + "%",
|
||||||
Mark: mark
|
Mark: mark
|
||||||
};
|
};
|
||||||
output.Points.push(point);
|
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;
|
return output;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -186,4 +179,18 @@ export function Reducer(inState, inAction)
|
|||||||
}
|
}
|
||||||
|
|
||||||
return clone;
|
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);
|
7
store.d.ts
vendored
7
store.d.ts
vendored
@ -47,8 +47,11 @@ declare namespace Store {
|
|||||||
type PlotKeyTest = "TestL" | "TestR";
|
type PlotKeyTest = "TestL" | "TestR";
|
||||||
type PlotKey = PlotKeyUser | PlotKeyTest;
|
type PlotKey = PlotKeyUser | PlotKeyTest;
|
||||||
|
|
||||||
type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample };
|
type DrawPoint = { X: number|string; Y: number|string; Mark: TestFrequencySample };
|
||||||
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<Array<DrawPoint>> };
|
type DrawLine = { Head:DrawPoint, Tail:DrawPoint};
|
||||||
|
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
|
||||||
type DrawChart = { Left: DrawGroup; Right: DrawGroup };
|
type DrawChart = { Left: DrawGroup; Right: DrawGroup };
|
||||||
type DrawTest = { User?: DrawChart; Test?: DrawChart };
|
type DrawTest = { User?: DrawChart; Test?: DrawChart };
|
||||||
|
|
||||||
|
type Binding = [state:State, dispatch:(inAction:Action)=>void]
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
||||||
import { Reducer, ColumnMapping, Congtiguous, Initial } from "./src/store.js";
|
import { Reducer, ColumnMapping, Initial } from "./src/store.js";
|
||||||
|
|
||||||
let state = {...Initial};
|
let state = {...Initial};
|
||||||
|
|
||||||
@ -41,7 +41,7 @@ Deno.test("Initialize", async(t)=>
|
|||||||
await t.step("Live context values are correct", ()=>
|
await t.step("Live context values are correct", ()=>
|
||||||
{
|
{
|
||||||
assertEquals(state.Live.Test, state.Tests[0]);
|
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");
|
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", ()=>
|
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", ()=>
|
await t.step("Dispatch Freq, Stim, and Chan updates", ()=>
|
||||||
@ -85,40 +85,18 @@ Deno.test("Make Marks", async(t)=>
|
|||||||
|
|
||||||
await t.step("Check marked value", ()=>
|
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", ()=>
|
await t.step("Live context values are correct", ()=>
|
||||||
{
|
{
|
||||||
assertEquals(state.Live.Test, state.Tests[0]);
|
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);
|
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);
|
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user