Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/layout-updates #1

Merged
SethTrowbridge merged 34 commits from feature/layout-updates into master 2023-06-07 21:12:15 -04:00
Conversation 0 Commits 34 Files Changed 15 +157 -152
7 changed files with 157 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b905f92c06 - Show all commits

7
.vscode/settings.json vendored
View File

@ -1,9 +1,4 @@
{
"deno.enable": true,
"deno.unstable": true,
"deno.codeLens.testArgs": [
"--allow-all",
"--no-check",
"--no-lock"
]
"deno.unstable": true
}

5
deno.json
View File

@ -1,8 +1,9 @@
{
"compilerOptions": {"types":["store.d.ts"]},
"tasks":
{
"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-debug": "deno test --no-lock --inspect-brk test/store_test.js"
"test": "deno test --no-lock --watch store.test.js",
"test-debug": "deno test --no-lock --inspect-brk store.test.js"
}
}

93
src/app.js
View File

@ -1,99 +1,24 @@
//@ts-check
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 TW from "./twind.js";
import * as UI from "./ui.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";
/** @typedef {import("./store.js").State} State */
/** @typedef {import("https://esm.sh/preact@10.11.3/compat").JSX.Element} JSX.Element */
/** @typedef {import("./store.js").Action} Action */
/** @type {JSX.Element} */
/** @type {preact.Context<Binding>} */
const StoreContext = React.createContext([Initial, (_a)=>{}]);
/** @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 reducer = React.useReducer(Reducer, Initial);
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} */
const StoreConsumer =()=> React.useContext(StoreContext);
const Deep =()=>
{
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`
<${StoreProvider}>
<${UI.Button} icon="+">hey!<//>

76
src/store.js
View File

@ -1,8 +1,5 @@
//@ts-check
const size = 1/6;
/** @typedef {[frequency:number, position:number, normal:boolean]} ColumnMapping */
/** @type {Array<ColumnMapping>} */
/** @type {Array<Store.ColumnMapping>} */
export const ColumnMapping = [
[ 125, size*0.0, true ],
[ 250, size*1.0, true ],
@ -14,7 +11,7 @@ export const ColumnMapping = [
[6000, size*5.5, false],
[8000, size*6.0, true ]
];
/** @type {(inFrequency:number)=>ColumnMapping|false} */
/** @type {(inFrequency:number)=>Store.ColumnMapping|false} */
export const ColumnLookup =(inFrequency)=>
{
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} */
export const MarkGet =(freq, chan, user)=> freq[/** @type {"UserL"|"UserR"|"TestL"|"TestR"} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
/** @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: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;
/** @typedef {{Min:number, Max:number, Value:number, Step:number}} Range */
/** @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} */
/** @type {Store.State} */
export const Initial =
{
Chan: { Min:0, Max:1, Value:0, Step:1 },
@ -69,15 +60,7 @@ export const Initial =
]
};
/** @typedef {{Name:"Mark", Data:boolean|null}} ActionMark */
/** @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>} */
/** @type {Record<string, Store.ContextUpdater>} */
const Update =
{
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 */
/** @typedef {{Left:DrawGroup, Right:DrawGroup}} DrawChart */
/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */
/** @type {(inTest:Test, inChan:number, inStim:Range, inIsUser:boolean)=>DrawGroup} */
/** @type {(inTest:Store.Test, inChan:number, inStim:Range, inIsUser:boolean)=>Store.DrawGroup} */
export function Congtiguous(inTest, inChan, inStim, inIsUser)
{
/** @type {DrawGroup} */
/** @type {Store.DrawGroup} */
const output = {Points:[], Paths:[]};
let plot;
let valid = false;
/** @type {Array<DrawPoint>} */
/** @type {Array<Store.DrawPoint>} */
let segment = [];
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);
if(lookup)
{
/** @type {DrawPoint} */
/** @type {Store.DrawPoint} */
const point = {
X: lookup[1]*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)
{
const clone = {...inState};
@ -206,32 +186,4 @@ export function Reducer(inState, inAction)
}
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
View 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
View 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 };
}

4
test/store_test.js → store.test.js
View File

@ -1,5 +1,5 @@
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};
@ -103,7 +103,7 @@ Deno.test("Make Marks", async(t)=>
Deno.test("Contiguous Lines", ()=>
{
/** @type {import("../src/store.js").Test} */
/** @type {Store.Test} */
const model = {
Name:"",
Plot:[