74 lines
2.1 KiB
React
74 lines
2.1 KiB
React
|
import { bg, uiElement, floatingMenu, mainBar, text, modeNotInUse, padButtons } from "../../js/color";
|
||
|
|
import { JuPadBody, JuPadButtons } from "../../js/svg";
|
||
|
|
import showStatus from "../../stear/extra/Pages/showStatus";
|
||
|
|
import { SWindow, s, SFrame } from "../../stear/main";
|
||
|
|
import { fadein, fadeout, subCancel } from "../../stear/utils";
|
||
|
|
|
||
|
|
|
||
|
|
export default new SWindow({
|
||
|
|
call: async (stear, { find, resolve, close, render, call, event, include }, animation) => {
|
||
|
|
console.log(animation)
|
||
|
|
event.onloaded = () => {
|
||
|
|
fadein(find.main, 200, true);
|
||
|
|
}
|
||
|
|
event.onresolve = async () => {
|
||
|
|
await fadeout(find.main);
|
||
|
|
}
|
||
|
|
|
||
|
|
let cancelSub = subCancel(() => {
|
||
|
|
resolve(false);
|
||
|
|
})
|
||
|
|
|
||
|
|
return <div style={{
|
||
|
|
width: "calc(100% - 4rem)",
|
||
|
|
height: "calc(100% - 4rem)",
|
||
|
|
backgroundColor: floatingMenu,
|
||
|
|
padding: "2rem",
|
||
|
|
overflow:"auto",
|
||
|
|
textAlign:"center"
|
||
|
|
}}>
|
||
|
|
<div style={{textAlign:"left"}}>
|
||
|
|
<div style={{
|
||
|
|
fontSize: "2rem",
|
||
|
|
padding: "0.1rem",
|
||
|
|
display: "unset",
|
||
|
|
backgroundColor: text,
|
||
|
|
backgroundClip: "text",
|
||
|
|
webkitBackgroundClip: "text",
|
||
|
|
color: "transparent",
|
||
|
|
cursor: "pointer",
|
||
|
|
userSelect: "none",
|
||
|
|
}}
|
||
|
|
event={{
|
||
|
|
pointerdown: () => {
|
||
|
|
cancelSub();
|
||
|
|
resolve(false);
|
||
|
|
}
|
||
|
|
}}>❌</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||
|
|
style={{maxHeight:"calc(100% - 6rem)"}}
|
||
|
|
viewBox="0 0 1920 1080">
|
||
|
|
<path style={{ fill: uiElement }} d={JuPadBody} />
|
||
|
|
|
||
|
|
{JuPadButtons.map((b,i)=><path id="clickable" style={{fill:padButtons}} event={{pointerdown:()=>void call(showStatus,{text:"clicked: "+i})}} d={b} />)}
|
||
|
|
|
||
|
|
</svg>
|
||
|
|
<label htmlFor="aniName">Animation Name: </label>
|
||
|
|
<input id="aniName" type="text" value={animation.name} style={{
|
||
|
|
height: "1rem",
|
||
|
|
border: "2px solid",
|
||
|
|
borderRadius: "0.5rem",
|
||
|
|
outline: "none",
|
||
|
|
padding:"0.5rem"}}
|
||
|
|
event = {{
|
||
|
|
change:(e)=>{
|
||
|
|
animation.name = e.target.value;
|
||
|
|
}
|
||
|
|
}}/>
|
||
|
|
|
||
|
|
|
||
|
|
</div>;
|
||
|
|
}
|
||
|
|
})
|