Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb522228

Browse files
FSM can now be saved to disk as .png
1 parent736e697 commitb522228

File tree

3 files changed

+82
-9
lines changed

3 files changed

+82
-9
lines changed

‎src/components/Dock.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
currentSelected,
1414
alert,
1515
arrowStates,
16+
saveFSMAtom,
1617
}from"../lib/backend";
1718
import{useAtomValue,useSetAtom}from"jotai";
1819

@@ -30,6 +31,9 @@ const Dock = () => {
3031

3132
constsetTransitionTracker=useSetAtom(arrowStates);
3233

34+
constsetSaveFSM=useSetAtom(saveFSMAtom);
35+
constsaveFSM=useAtomValue(saveFSMAtom);
36+
3337
return(
3438
<divclassName="absolute bottom-5 w-screen h-15 flex justify-center items-center select-none">
3539
<divclassName="w-fit px-2 h-15 z-10 bg-secondary-bg rounded-2xl border border-border-bg flex justify-center items-center gap-5 shadow-[0px_0px_40px_0px_rgba(0,0,0,0.5)]">
@@ -196,16 +200,12 @@ const Dock = () => {
196200

197201
{/* Save/Download FSM */}
198202
<div
199-
onClick={()=>
200-
currentState=="save"
201-
?setCurrentState("nil")
202-
:setCurrentState("save")
203-
}
203+
onClick={()=>setSaveFSM(!saveFSM)}
204204
className={clsx(
205205
"group p-2 border flex gap-2 border-border-bg rounded-xl hover:scale-130 hover:-translate-y-5 active:scale-100 cursor-pointer transition-all ease-in-out duration-300",
206206
{
207-
"bg-secondary-bg":currentState!="save",
208-
"bg-blue-500":currentState=="save",
207+
"bg-secondary-bg":!saveFSM,
208+
"bg-blue-500":saveFSM,
209209
}
210210
)}
211211
>

‎src/components/Editor.tsx‎

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
currentSelected,
66
arrowStates,
77
arrows,
8+
saveFSMAtom,
89
}from"../lib/backend";
910
import{useAtom,useAtomValue,useSetAtom}from"jotai";
1011
import{Nodes}from"../lib/backend";
@@ -28,6 +29,10 @@ const Editor = () => {
2829
undefined,
2930
]);// Will have [show/hide, current text, transition text id]
3031

32+
const[showSaveFSM,setShowSaveFSM]=useAtom(saveFSMAtom);
33+
34+
const[saveFSM,setSaveFSM]=useState([1,"",".png"]);// Pop settings for downloading FSM
35+
3136
// Konva Layer Reference
3237
letlayerRef=useRef(null);
3338

@@ -376,8 +381,8 @@ const Editor = () => {
376381
fill="#ffffff"
377382
align="center"
378383
onClick={()=>
379-
(currentEditorState!="create"&&
380-
currentEditorState!="delete")&&
384+
currentEditorState!="create"&&
385+
currentEditorState!="delete"&&
381386
setTrNameEditor([true,transition.name,transition.id])
382387
}
383388
/>
@@ -436,6 +441,72 @@ const Editor = () => {
436441
</button>
437442
</span>
438443
</TransitionNameEditor>
444+
445+
{/* Popup for Save FSM */}
446+
<TransitionNameEditorshowVar={showSaveFSM}>
447+
<spanclassName="absolute text-center leading-13 w-fit px-2 h-15 bg-primary-bg border border-border-bg rounded-2xl shadow-[0px_0px_100px_0px_#000000] transition-all ease-in-out duration-300 flex justify-center items-center">
448+
<select
449+
value={saveFSM[0]}
450+
onChange={(e)=>{
451+
setSaveFSM([parseInt(e.target.value),saveFSM[1]]);
452+
}}
453+
className="text-white font-github text-base px-2 border border-border-bg hover:border-input-active focus:border-2 focus:border-blue-500 transition-all ease-in-out outline-none h-10 rounded-lg mr-2"
454+
>
455+
<optionvalue={1}>1x</option>
456+
<optionvalue={2}>2x</option>
457+
<optionvalue={3}>3x</option>
458+
<optionvalue={4}>4x</option>
459+
<optionvalue={5}>5x</option>
460+
</select>
461+
462+
<input
463+
type="text"
464+
placeholder="Enter File Name..."
465+
value={saveFSM[1]??""}
466+
required
467+
onChange={(e)=>{
468+
setSaveFSM([saveFSM[0],e.target.value]);
469+
}}
470+
className="text-white font-github text-base px-2 border border-border-bg hover:border-input-active focus:border-2 focus:border-blue-500 transition-all ease-in-out outline-none w-full h-10 rounded-lg"
471+
/>
472+
473+
<button
474+
onClick={()=>{
475+
setShowSaveFSM(false);
476+
setSaveFSM([1,""]);
477+
}}
478+
className="rounded-xl text-black bg-white ml-2 px-2 py-2 hover:scale-110 transition-all cursor-pointer active:scale-95 ease-in-out"
479+
>
480+
<Xsize={20}color="#000000"/>
481+
</button>
482+
483+
<button
484+
onClick={()=>{
485+
console.log(saveFSM);
486+
// Save the FSM to disk
487+
488+
if(saveFSM[1].trim()==""){alert("Enter a valid file name");return}
489+
490+
constgroup=layerRef.current.findOne("Group");
491+
constdataUrl=group.toDataURL({pixelRatio:saveFSM[0]/* Resolution */});
492+
493+
constlink=document.createElement('a');
494+
495+
link.download=saveFSM[1];// Name
496+
console.log(`Gon download as${link.download}`)
497+
link.href=dataUrl;
498+
document.body.appendChild(link);
499+
link.click();
500+
document.body.removeChild(link);
501+
502+
setShowSaveFSM(false)
503+
}}
504+
className="rounded-xl text-black bg-blue-500 ml-2 px-2 py-2 hover:scale-110 transition-all cursor-pointer active:scale-95 ease-in-out"
505+
>
506+
<Checksize={20}color="#ffffff"/>
507+
</button>
508+
</span>
509+
</TransitionNameEditor>
439510
</>
440511
);
441512
};

‎src/lib/backend.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,5 @@ export const arrows = atom([]);
4747
// Store for tracking connections
4848
exportconstarrowStates=atom(undefined);
4949

50+
// Store to manage visibility of save actions editor
51+
exportconstsaveFSMAtom=atom(false);

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp