feature/layout-updates #1
7
.vscode/settings.json
vendored
7
.vscode/settings.json
vendored
@ -1,9 +1,4 @@
|
|||||||
{
|
{
|
||||||
"deno.enable": true,
|
"deno.enable": true,
|
||||||
"deno.unstable": true,
|
"deno.unstable": true
|
||||||
"deno.codeLens.testArgs": [
|
|
||||||
"--allow-all",
|
|
||||||
"--no-check",
|
|
||||||
"--no-lock"
|
|
||||||
]
|
|
||||||
}
|
}
|
@ -1,8 +1,9 @@
|
|||||||
{
|
{
|
||||||
|
"compilerOptions": {"types":["store.d.ts"]},
|
||||||
"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 test/store_test.js",
|
"test": "deno test --no-lock --watch store.test.js",
|
||||||
"test-debug": "deno test --no-lock --inspect-brk test/store_test.js"
|
"test-debug": "deno test --no-lock --inspect-brk store.test.js"
|
||||||
}
|
}
|
||||||
}
|
}
|
93
src/app.js
93
src/app.js
@ -1,99 +1,24 @@
|
|||||||
//@ts-check
|
import * as TW from "./twind.js";
|
||||||
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
|
||||||
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
|
||||||
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
|
||||||
|
|
||||||
import * as UI from "./ui.js";
|
import * as UI from "./ui.js";
|
||||||
import { Reducer, Initial } from "./store.js";
|
import { Reducer, Initial } 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";
|
||||||
|
|
||||||
/** @typedef {import("./store.js").State} State */
|
/** @type {preact.Context<Binding>} */
|
||||||
/** @typedef {import("https://esm.sh/preact@10.11.3/compat").JSX.Element} JSX.Element */
|
const StoreContext = React.createContext([Initial, (_a)=>{}]);
|
||||||
/** @typedef {import("./store.js").Action} Action */
|
|
||||||
/** @type {JSX.Element} */
|
|
||||||
|
|
||||||
/** @type {TW.TwindConfig} */
|
|
||||||
const Configure = {
|
|
||||||
theme:
|
|
||||||
{
|
|
||||||
extend:
|
|
||||||
{
|
|
||||||
keyframes:
|
|
||||||
{
|
|
||||||
flash:
|
|
||||||
{
|
|
||||||
'0%': { opacity: 1.0 },
|
|
||||||
'50%': { opacity: 0.3 },
|
|
||||||
'100%': { opacity: 0.0 }
|
|
||||||
},
|
|
||||||
pulse:
|
|
||||||
{
|
|
||||||
"0%": { opacity: 0.0 },
|
|
||||||
"10%": { opacity: 0.0 },
|
|
||||||
"12%": { opacity: 1.0 },
|
|
||||||
"22%": { opacity: 1.0 },
|
|
||||||
"42%": { opacity: 0.2 },
|
|
||||||
"100%": { opacity: 0.0 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
animation:
|
|
||||||
{
|
|
||||||
flash: "flash 1s both"
|
|
||||||
},
|
|
||||||
strokeWidth:
|
|
||||||
{
|
|
||||||
"bold": "3px"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
rules:
|
|
||||||
[
|
|
||||||
[
|
|
||||||
"stroke-draw",
|
|
||||||
{
|
|
||||||
"vector-effect": "non-scaling-stroke",
|
|
||||||
"stroke-linecap": "square",
|
|
||||||
"fill": "none"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'shadow-glow-(.*)',
|
|
||||||
(match, context)=>
|
|
||||||
{
|
|
||||||
return { "box-shadow": `0px 0px 5px 2px ${context.theme().colors[match[1]]}` };
|
|
||||||
}
|
|
||||||
],
|
|
||||||
[
|
|
||||||
'shadow-sss',
|
|
||||||
{
|
|
||||||
"box-shadow": "rgb(0 0 0 / 50%) 0px -3px 2px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
presets: [TWPreTail(), TWPreAuto()]
|
|
||||||
};
|
|
||||||
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.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
|
|
||||||
|
|
||||||
/** @type {import("https://esm.sh/v99/preact@10.11.3/src/index.js").Context<Binding>} */
|
|
||||||
const StoreContext = React.createContext([Initial, (a)=>{}]);
|
|
||||||
|
|
||||||
|
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
||||||
const StoreProvider =(props)=>
|
const StoreProvider =(props)=>
|
||||||
{
|
{
|
||||||
const reducer = React.useReducer(Reducer, Initial);
|
const reducer = React.useReducer(Reducer, Initial);
|
||||||
return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
|
return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @typedef {[state:State, dispatch:(inAction:Action)=>void]} Binding */
|
/** @typedef {[state:Store.State, dispatch:(inAction:Store.Action)=>void]} Binding */
|
||||||
/** @type {()=>Binding} */
|
/** @type {()=>Binding} */
|
||||||
const StoreConsumer =()=> React.useContext(StoreContext);
|
const StoreConsumer =()=> React.useContext(StoreContext);
|
||||||
|
|
||||||
|
|
||||||
const Deep =()=>
|
const Deep =()=>
|
||||||
{
|
{
|
||||||
const [State, Dispatch] = StoreConsumer();
|
const [State, Dispatch] = StoreConsumer();
|
||||||
@ -116,6 +41,14 @@ const Audiogram =()=>
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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`
|
React.render(html`
|
||||||
<${StoreProvider}>
|
<${StoreProvider}>
|
||||||
<${UI.Button} icon="+">hey!<//>
|
<${UI.Button} icon="+">hey!<//>
|
||||||
|
76
src/store.js
76
src/store.js
@ -1,8 +1,5 @@
|
|||||||
//@ts-check
|
|
||||||
|
|
||||||
const size = 1/6;
|
const size = 1/6;
|
||||||
/** @typedef {[frequency:number, position:number, normal:boolean]} ColumnMapping */
|
/** @type {Array<Store.ColumnMapping>} */
|
||||||
/** @type {Array<ColumnMapping>} */
|
|
||||||
export const ColumnMapping = [
|
export const ColumnMapping = [
|
||||||
[ 125, size*0.0, true ],
|
[ 125, size*0.0, true ],
|
||||||
[ 250, size*1.0, true ],
|
[ 250, size*1.0, true ],
|
||||||
@ -14,7 +11,7 @@ export const ColumnMapping = [
|
|||||||
[6000, size*5.5, false],
|
[6000, size*5.5, false],
|
||||||
[8000, size*6.0, true ]
|
[8000, size*6.0, true ]
|
||||||
];
|
];
|
||||||
/** @type {(inFrequency:number)=>ColumnMapping|false} */
|
/** @type {(inFrequency:number)=>Store.ColumnMapping|false} */
|
||||||
export const ColumnLookup =(inFrequency)=>
|
export const ColumnLookup =(inFrequency)=>
|
||||||
{
|
{
|
||||||
for(let i=0; i<ColumnMapping.length; i++)
|
for(let i=0; i<ColumnMapping.length; i++)
|
||||||
@ -26,19 +23,13 @@ export const ColumnLookup =(inFrequency)=>
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/** @type {(freq:TestFrequency, chan:number, user:boolean)=>TestFrequencySample|undefined} */
|
/** @type {(freq:Store.TestFrequency, chan:number, user:boolean)=>Store.TestFrequencySample|undefined} */
|
||||||
export const MarkGet =(freq, chan, user)=> freq[/** @type {"UserL"|"UserR"|"TestL"|"TestR"} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
|
export const MarkGet =(freq, chan, user)=> freq[/** @type {Store.PlotKey} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
|
||||||
|
|
||||||
/** @type {(freq:TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>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;
|
export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
|
||||||
|
|
||||||
/** @typedef {{Min:number, Max:number, Value:number, Step:number}} Range */
|
/** @type {Store.State} */
|
||||||
/** @typedef {{Stim:number, Resp:boolean}} TestFrequencySample */
|
|
||||||
/** @typedef {{Hz:number, TestL:TestFrequencySample, TestR:TestFrequencySample, UserL?:TestFrequencySample, UserR?:TestFrequencySample}} TestFrequency */
|
|
||||||
/** @typedef {{Name:string, Plot:Array<TestFrequency>}} Test */
|
|
||||||
/** @typedef {{Test?:Test, Freq?:TestFrequency, Mark?:TestFrequencySample}} Context */
|
|
||||||
/** @typedef {{Chan:Range, Freq:Range, Stim:Range, Live:Context, Draw:{UserL:DrawGroup, UserR:DrawGroup, TestL:DrawGroup, TestR:DrawGroup}, Tests:Array<Test>}} State @memberof Store*/
|
|
||||||
/** @type {State} */
|
|
||||||
export const Initial =
|
export const Initial =
|
||||||
{
|
{
|
||||||
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
Chan: { Min:0, Max:1, Value:0, Step:1 },
|
||||||
@ -69,15 +60,7 @@ export const Initial =
|
|||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @typedef {{Name:"Mark", Data:boolean|null}} ActionMark */
|
/** @type {Record<string, Store.ContextUpdater>} */
|
||||||
/** @typedef {{Name:"Test", Data:number}} ActionTest */
|
|
||||||
/** @typedef {{Name:"Chan", Data:number}} ActionChan */
|
|
||||||
/** @typedef {{Name:"Freq", Data:number}} ActionFreq */
|
|
||||||
/** @typedef {{Name:"Stim", Data:number}} ActionStim */
|
|
||||||
/** @typedef {ActionMark|ActionTest|ActionChan|ActionFreq|ActionStim} Action */
|
|
||||||
/** @typedef {(inState:State, inAction:Action)=>State} Reducer */
|
|
||||||
/** @typedef {(inState:State)=>boolean} SelectionUpdater */
|
|
||||||
/** @type {Record<string, SelectionUpdater>} */
|
|
||||||
const Update =
|
const Update =
|
||||||
{
|
{
|
||||||
Freq(inState)
|
Freq(inState)
|
||||||
@ -111,19 +94,16 @@ const Update =
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @typedef {{X:number, Y:number, Mark:TestFrequencySample}} DrawPoint */
|
|
||||||
/** @typedef {{Points:Array<DrawPoint>, Paths:Array<Array<DrawPoint>>}} DrawGroup */
|
/** @type {(inTest:Store.Test, inChan:number, inStim:Range, inIsUser:boolean)=>Store.DrawGroup} */
|
||||||
/** @typedef {{Left:DrawGroup, Right:DrawGroup}} DrawChart */
|
|
||||||
/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */
|
|
||||||
/** @type {(inTest:Test, inChan:number, inStim:Range, inIsUser:boolean)=>DrawGroup} */
|
|
||||||
export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
||||||
{
|
{
|
||||||
/** @type {DrawGroup} */
|
/** @type {Store.DrawGroup} */
|
||||||
const output = {Points:[], Paths:[]};
|
const output = {Points:[], Paths:[]};
|
||||||
|
|
||||||
let plot;
|
let plot;
|
||||||
let valid = false;
|
let valid = false;
|
||||||
/** @type {Array<DrawPoint>} */
|
/** @type {Array<Store.DrawPoint>} */
|
||||||
let segment = [];
|
let segment = [];
|
||||||
for(let i=0; i<inTest.Plot.length; i++)
|
for(let i=0; i<inTest.Plot.length; i++)
|
||||||
{
|
{
|
||||||
@ -134,7 +114,7 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
|||||||
const lookup = ColumnLookup(plot.Hz);
|
const lookup = ColumnLookup(plot.Hz);
|
||||||
if(lookup)
|
if(lookup)
|
||||||
{
|
{
|
||||||
/** @type {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,
|
||||||
@ -163,7 +143,7 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** @type {Reducer} */
|
/** @type {Store.Reducer} */
|
||||||
export function Reducer(inState, inAction)
|
export function Reducer(inState, inAction)
|
||||||
{
|
{
|
||||||
const clone = {...inState};
|
const clone = {...inState};
|
||||||
@ -206,32 +186,4 @@ export function Reducer(inState, inAction)
|
|||||||
}
|
}
|
||||||
|
|
||||||
return clone;
|
return clone;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
const minified =
|
|
||||||
[
|
|
||||||
1,
|
|
||||||
[
|
|
||||||
[20, 30, 50, 40, 60, 80],[20, 30, 50, 40, 60, 80]
|
|
||||||
]
|
|
||||||
];
|
|
||||||
const Expand =(inMin)=>
|
|
||||||
{
|
|
||||||
const outTests = [];
|
|
||||||
const inFreq = inMin[0];
|
|
||||||
for(let i=1; i<inMin.length; i++)
|
|
||||||
{
|
|
||||||
let inTest = inMin[i];
|
|
||||||
let inTestName = inTest[0];
|
|
||||||
|
|
||||||
const outTest = {
|
|
||||||
Name:inTest[0],
|
|
||||||
Plot:[]
|
|
||||||
};
|
|
||||||
outTests.push(outTest);
|
|
||||||
const outFreq = {Hz:0, TestL:{Stim:0, Resp:true}, TestR:{Stim:0, Resp:true}, UserL:undefined, UserR:undefined};
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
70
src/twind.js
Normal file
70
src/twind.js
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import * as TW from "https://esm.sh/@twind/core@1.0.1";
|
||||||
|
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
|
||||||
|
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
|
||||||
|
|
||||||
|
/** @type {TW.TwindConfig} */
|
||||||
|
export const Configure = {
|
||||||
|
theme:
|
||||||
|
{
|
||||||
|
extend:
|
||||||
|
{
|
||||||
|
keyframes:
|
||||||
|
{
|
||||||
|
flash:
|
||||||
|
{
|
||||||
|
'0%': { opacity: 1.0 },
|
||||||
|
'50%': { opacity: 0.3 },
|
||||||
|
'100%': { opacity: 0.0 }
|
||||||
|
},
|
||||||
|
pulse:
|
||||||
|
{
|
||||||
|
"0%": { opacity: 0.0 },
|
||||||
|
"10%": { opacity: 0.0 },
|
||||||
|
"12%": { opacity: 1.0 },
|
||||||
|
"22%": { opacity: 1.0 },
|
||||||
|
"42%": { opacity: 0.2 },
|
||||||
|
"100%": { opacity: 0.0 }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation:
|
||||||
|
{
|
||||||
|
flash: "flash 1s both"
|
||||||
|
},
|
||||||
|
strokeWidth:
|
||||||
|
{
|
||||||
|
"bold": "3px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rules:
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"stroke-draw",
|
||||||
|
{
|
||||||
|
"vector-effect": "non-scaling-stroke",
|
||||||
|
"stroke-linecap": "square",
|
||||||
|
"fill": "none"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'shadow-glow-(.*)',
|
||||||
|
(match, context)=>
|
||||||
|
{
|
||||||
|
return { "box-shadow": `0px 0px 5px 2px ${context.theme().colors[match[1]]}` };
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'shadow-sss',
|
||||||
|
{
|
||||||
|
"box-shadow": "rgb(0 0 0 / 50%) 0px -3px 2px inset, rgb(255 255 255 / 50%) 0px 10px 10px inset"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
presets: [TWPreTail(), TWPreAuto()]
|
||||||
|
};
|
||||||
|
|
||||||
|
/** @type {(elStyle:HTMLStyleElement, elDiv:HTMLDivElement)=>void} */
|
||||||
|
export const Init =(elStyle, elDiv)=>
|
||||||
|
{
|
||||||
|
TW.observe(TW.twind(Configure, TW.cssom(elStyle)), elDiv);
|
||||||
|
};
|
54
store.d.ts
vendored
Normal file
54
store.d.ts
vendored
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
declare namespace Store {
|
||||||
|
type ColumnMapping = [frequency: number, position: number, normal: boolean];
|
||||||
|
|
||||||
|
type Range = { Min: number; Max: number; Value: number; Step: number };
|
||||||
|
type TestFrequencySample = { Stim: number; Resp: boolean };
|
||||||
|
|
||||||
|
type TestFrequency = {
|
||||||
|
Hz: number;
|
||||||
|
TestL: TestFrequencySample;
|
||||||
|
TestR: TestFrequencySample;
|
||||||
|
UserL?: TestFrequencySample;
|
||||||
|
UserR?: TestFrequencySample;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Test = { Name: string; Plot: Array<TestFrequency> };
|
||||||
|
|
||||||
|
type Context = {
|
||||||
|
Test?: Test;
|
||||||
|
Freq?: TestFrequency;
|
||||||
|
Mark?: TestFrequencySample;
|
||||||
|
};
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
Chan: Range;
|
||||||
|
Freq: Range;
|
||||||
|
Stim: Range;
|
||||||
|
Live: Context;
|
||||||
|
Draw: {
|
||||||
|
UserL: DrawGroup;
|
||||||
|
UserR: DrawGroup;
|
||||||
|
TestL: DrawGroup;
|
||||||
|
TestR: DrawGroup;
|
||||||
|
};
|
||||||
|
Tests: Array<Test>;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ActionMark = { Name: "Mark"; Data: boolean | null };
|
||||||
|
type ActionTest = { Name: "Test"; Data: number };
|
||||||
|
type ActionChan = { Name: "Chan"; Data: number };
|
||||||
|
type ActionFreq = { Name: "Freq"; Data: number };
|
||||||
|
type ActionStim = { Name: "Stim"; Data: number };
|
||||||
|
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim;
|
||||||
|
type Reducer = (inState: State, inAction: Action) => State;
|
||||||
|
type ContextUpdater = (inState: State) => boolean;
|
||||||
|
|
||||||
|
type PlotKeyUser = "UserL" | "UserR";
|
||||||
|
type PlotKeyTest = "TestL" | "TestR";
|
||||||
|
type PlotKey = PlotKeyUser | PlotKeyTest;
|
||||||
|
|
||||||
|
type DrawPoint = { X: number; Y: number; Mark: TestFrequencySample };
|
||||||
|
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<Array<DrawPoint>> };
|
||||||
|
type DrawChart = { Left: DrawGroup; Right: DrawGroup };
|
||||||
|
type DrawTest = { User?: DrawChart; Test?: DrawChart };
|
||||||
|
}
|
@ -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, Congtiguous, Initial } from "./src/store.js";
|
||||||
|
|
||||||
let state = {...Initial};
|
let state = {...Initial};
|
||||||
|
|
||||||
@ -103,7 +103,7 @@ Deno.test("Make Marks", async(t)=>
|
|||||||
|
|
||||||
Deno.test("Contiguous Lines", ()=>
|
Deno.test("Contiguous Lines", ()=>
|
||||||
{
|
{
|
||||||
/** @type {import("../src/store.js").Test} */
|
/** @type {Store.Test} */
|
||||||
const model = {
|
const model = {
|
||||||
Name:"",
|
Name:"",
|
||||||
Plot:[
|
Plot:[
|
Loading…
Reference in New Issue
Block a user