feature/layout-updates #1
@ -1,5 +1,7 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {"types":["/store.d.ts"]},
|
"compilerOptions": {"types":["/store.d.ts"]},
|
||||||
|
"lint": {"files": {"include": ["src/"]}},
|
||||||
|
"fmt": {"files": {"include": ["src/"]}},
|
||||||
"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",
|
||||||
|
35
src/app.js
35
src/app.js
@ -6,37 +6,30 @@ import {html} from "https://esm.sh/htm@3.1.1/preact";
|
|||||||
|
|
||||||
/** @type {preact.Context<Binding>} */
|
/** @type {preact.Context<Binding>} */
|
||||||
const StoreContext = React.createContext([Initial, (_a)=>{}]);
|
const StoreContext = React.createContext([Initial, (_a)=>{}]);
|
||||||
|
|
||||||
|
|
||||||
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
/** @type {(props:{children:preact.ComponentChildren})=>preact.VNode} */
|
||||||
const StoreProvider =(props)=>
|
const StoreProvider =(props)=>
|
||||||
{
|
{
|
||||||
const reducer = React.useReducer(Reducer, Initial);
|
const initialized = Reducer(Initial, {Name:"Test", Data:0})
|
||||||
|
const reducer = React.useReducer(Reducer, initialized);
|
||||||
return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
|
return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @typedef {[state:Store.State, dispatch:(inAction:Store.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 [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 Audiogram =()=>
|
||||||
{
|
{
|
||||||
const [State, Dispatch] = StoreConsumer();
|
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} />`);
|
||||||
|
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`
|
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)">
|
||||||
${State.Draw}
|
${testL}
|
||||||
<${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
|
${testR}
|
||||||
<${UI.Mark} right=${false}/>
|
|
||||||
<line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
|
|
||||||
</svg>
|
</svg>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -55,14 +48,8 @@ React.render(html`
|
|||||||
<${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);
|
@ -116,8 +116,8 @@ export function Congtiguous(inTest, inChan, inStim, inIsUser)
|
|||||||
{
|
{
|
||||||
/** @type {Store.DrawPoint} */
|
/** @type {Store.DrawPoint} */
|
||||||
const point = {
|
const point = {
|
||||||
X: lookup[1]*100,
|
X: lookup[1],
|
||||||
Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100,
|
Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min),
|
||||||
Mark: mark
|
Mark: mark
|
||||||
};
|
};
|
||||||
output.Points.push(point);
|
output.Points.push(point);
|
||||||
|
30
src/ui.js
30
src/ui.js
@ -1,11 +1,10 @@
|
|||||||
//@ts-check
|
|
||||||
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";
|
||||||
import { ColumnMapping } from "./store.js";
|
import { ColumnMapping } from "./store.js";
|
||||||
|
|
||||||
/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
|
/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */
|
||||||
|
|
||||||
/** @type {({children, icon, light, disabled, inactive, onClick}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>JSX.Element} */
|
/** @type {({children, icon, light, disabled, inactive, onClick}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>preact.VNode} */
|
||||||
export function Button({children, icon, light, disabled, inactive, onClick})
|
export function Button({children, icon, light, disabled, inactive, onClick})
|
||||||
{
|
{
|
||||||
const [FlashGet, FlashSet] = React.useState(0);
|
const [FlashGet, FlashSet] = React.useState(0);
|
||||||
@ -39,14 +38,15 @@ export function Button({children, icon, light, disabled, inactive, onClick})
|
|||||||
export function Chart({children})
|
export function Chart({children})
|
||||||
{
|
{
|
||||||
const inset = 20;
|
const inset = 20;
|
||||||
/** @type {Array<JSX.Element>} */
|
/** @type {Array<preact.VNode>} */
|
||||||
const rules = [];
|
const rules = [];
|
||||||
ColumnMapping.forEach(([label, position, normal])=>
|
ColumnMapping.forEach(([label, position, normal])=>
|
||||||
{
|
{
|
||||||
rules.push(html`
|
rules.push(html`
|
||||||
<span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-400) ${!normal && "border-dashed"}">
|
<span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-400) ${!normal && "border-dashed"}">
|
||||||
<span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
|
<span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
|
||||||
</span>`);
|
</span>`
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const dbMin = -10;
|
const dbMin = -10;
|
||||||
@ -56,8 +56,8 @@ export function Chart({children})
|
|||||||
rules.push(html`
|
rules.push(html`
|
||||||
<span class="block absolute left-[-${inset}px] top-[${((db-dbMin) / (dbMax-dbMin))*100}%] h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 slate-400"})">
|
<span class="block absolute left-[-${inset}px] top-[${((db-dbMin) / (dbMax-dbMin))*100}%] h-0 w-[calc(100%+${inset*2}px)] border-b(${db == 0 ? "2 black" : "1 slate-400"})">
|
||||||
<span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
|
<span class="block absolute top-0 left-0 -translate-x-full -translate-y-1/2 pr-2">${db}</span>
|
||||||
</span>
|
</span>`
|
||||||
`);
|
);
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<div class="relative w-full h-[600px] font(sans medium) text(xs)">
|
<div class="relative w-full h-[600px] font(sans medium) text(xs)">
|
||||||
@ -76,14 +76,13 @@ export function Chart({children})
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>`;
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** @type {Record<string, BasicElement>} */
|
/** @type {Record<string, BasicElement>} */
|
||||||
const Glyph = {
|
const Glyph = {
|
||||||
Arrow:({children})=> html`
|
Arrow:()=> html`
|
||||||
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="0%" y2="0%" ></line>
|
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="0%" y2="0%" ></line>
|
||||||
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="25%" y2="100%"></line>
|
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="25%" y2="100%"></line>
|
||||||
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
|
<line vector-effect="non-scaling-stroke" x1="100%" y1="100%" x2="100%" y2="25%" ></line>`,
|
||||||
@ -99,14 +98,13 @@ 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:string|number, y:string|number})=>JSX.Element} */
|
/** @type {({right, response, x, y}:{right:boolean, response?:boolean, x:number, y:number})=>preact.VNode} */
|
||||||
export function Mark({right, response, x, y})
|
export const Mark =({right, response, x, y})=>
|
||||||
{
|
{
|
||||||
return html`
|
return html`
|
||||||
<svg x=${x} y=${y} width="20" height="20" class="overflow-visible">
|
<svg x=${(x*100) + "%"} y=${(y*100) + "%"} width="20" height="20" class="overflow-visible">
|
||||||
<${ right ? Glyph.O : Glyph.X }>
|
<${ right ? Glyph.O : Glyph.X }>
|
||||||
${ !response && html`<${Glyph.Arrow}/>` }
|
${ !response && html`<${Glyph.Arrow}/>` }
|
||||||
<//>
|
<//>
|
||||||
</svg>
|
</svg>`;
|
||||||
`;
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user