feature/layout-updates #1
@ -1,2 +1,4 @@
|
|||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="src/app.js"></script>
|
<script type="module" src="src/app.js"></script>
|
27
src/app.js
27
src/app.js
@ -12,20 +12,29 @@ ShadowDOM.append(ShadowDiv);
|
|||||||
|
|
||||||
TW.Init(ShadowCSS, ShadowDiv);
|
TW.Init(ShadowCSS, ShadowDiv);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const Audiogram =()=>
|
const Audiogram =()=>
|
||||||
{
|
{
|
||||||
const [State, Dispatch] = Store.Consumer();
|
const [State] = 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}/>`);
|
/** @type {(inAmount:number)=>string} */ const Perc =(inAmount)=> (inAmount*100)+"%";
|
||||||
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 testMarksL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(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} />`);
|
const testMarksR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`);
|
||||||
|
const testLinesL = State.Draw.TestL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
|
const testLinesR = State.Draw.TestR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
|
|
||||||
|
const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`);
|
||||||
|
const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`);
|
||||||
|
const userLinesL = State.Draw.UserL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
|
const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
|
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw) opacity-50">${testMarksL}${testLinesL}</svg>
|
||||||
${testL}
|
<svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 bold draw) opacity-50">${testMarksR}${testLinesR}</svg>
|
||||||
${testR}
|
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 2 draw)">${userMarksL}${userLinesL}</svg>
|
||||||
</svg>`;
|
<svg class="absolute top-0 w-full h-full overflow-visible stroke(red-700 2 draw)">${userMarksR}${userLinesR}</svg>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
React.render(html`
|
React.render(html`
|
||||||
|
@ -55,8 +55,8 @@ export const Initial =
|
|||||||
Name: "Patient A Asymmetric Notch",
|
Name: "Patient A Asymmetric Notch",
|
||||||
Plot:
|
Plot:
|
||||||
[
|
[
|
||||||
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
|
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } },
|
||||||
{ Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
|
{ Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -32,7 +32,7 @@ export const Configure = {
|
|||||||
},
|
},
|
||||||
strokeWidth:
|
strokeWidth:
|
||||||
{
|
{
|
||||||
"bold": "3px"
|
"bold": "4px"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -98,11 +98,11 @@ const Glyph = {
|
|||||||
<g style="transform: translate(-35.35%, 35.35%) rotate(96deg) scale(0.5);">${children}</g>`
|
<g style="transform: translate(-35.35%, 35.35%) rotate(96deg) scale(0.5);">${children}</g>`
|
||||||
};
|
};
|
||||||
|
|
||||||
/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:number, y:number})=>preact.VNode} */
|
/** @type {({right, response, x, y, classes}:{right:boolean, response?:boolean, x:number|string, y:number|string, classes:string})=>preact.VNode} */
|
||||||
export const Mark =({right, response, x, y})=>
|
export const Mark =({right, response, x, y, classes})=>
|
||||||
{
|
{
|
||||||
return html`
|
return html`
|
||||||
<svg x=${(x*100) + "%"} y=${(y*100) + "%"} width="20" height="20" class="overflow-visible">
|
<svg x=${x} y=${y} width="20" height="20" class=${`overflow-visible ${classes}`}>
|
||||||
<${ right ? Glyph.O : Glyph.X }>
|
<${ right ? Glyph.O : Glyph.X }>
|
||||||
${ !response && html`<${Glyph.Arrow}/>` }
|
${ !response && html`<${Glyph.Arrow}/>` }
|
||||||
<//>
|
<//>
|
||||||
|
2
store.d.ts
vendored
2
store.d.ts
vendored
@ -47,7 +47,7 @@ declare namespace Store {
|
|||||||
type PlotKeyTest = "TestL" | "TestR";
|
type PlotKeyTest = "TestL" | "TestR";
|
||||||
type PlotKey = PlotKeyUser | PlotKeyTest;
|
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 DrawLine = { Head:DrawPoint, Tail:DrawPoint};
|
||||||
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
|
type DrawGroup = { Points: Array<DrawPoint>; Paths: Array<DrawLine> };
|
||||||
type DrawChart = { Left: DrawGroup; Right: DrawGroup };
|
type DrawChart = { Left: DrawGroup; Right: DrawGroup };
|
||||||
|
@ -98,5 +98,11 @@ Deno.test("Make Marks", async(t)=>
|
|||||||
assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
|
assertEquals(state.Live.Mark?.Stim, state.Stim.Value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
await t.step("Check Draw output", ()=>
|
||||||
|
{
|
||||||
|
assertEquals(state.Draw.TestL.Points.length, 2);
|
||||||
|
assertEquals(state.Draw.TestL.Paths.length, 1);
|
||||||
|
});
|
||||||
|
|
||||||
console.log(state.Draw);
|
console.log(state.Draw);
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user