blockly 작성한 함수 예제
2023-03-17
blockly 를 vue 3로 구현을 해보고 있는데, 구현하면서 필요할 것 같은 버튼을 몇가지 만들었습니다.
demo 로 만들었던건 총 4가지이며, 예제 코드를 남기고자 합니다.
아래 코드는 html로 버튼을 만든 것입니다.
<button @click="showCode">js code 출력</button>
<button @click="fileSave">저장</button>
<button @click="fileLoad">불러오기</button>
<button @click="clear">clear</button>
javascript 출력
javascript의 workspaceToCode 함수를 사용하여 alert 으로 찍어보는 예제 입니다.
import {javascriptGenerator} from 'blockly/javascript';
const showCode = () => {
const jsCode = javascriptGenerator.workspaceToCode(foo.value.workspace);
alert(jsCode);
console.log(jsCode)
//console.log(foo.value.workspace);
foo.value.workspace.addChangeListener(onFirstComment);
}
저장
serializer 의 save() 함수를 활용하여 json 코드를 뽑아 내고 있으며,
json 을 save_fail 에 저장하는 예제 입니다.
const fileSave = () => {
const { workspace } = foo.value;
const serializer = new Blockly.serialization.blocks.BlockSerializer();
const state = serializer.save(workspace);
save_file.value = state;
}
불러오기
serializer 의 load() 함수에 json 코드를 전달하여 로딩을 하는 예제 입니다.
const fileLoad = () => {
const { workspace } = foo.value;
const serializer = new Blockly.serialization.blocks.BlockSerializer();
serializer.load(save_file.value, workspace);
}
클리어
workspace 의 clear() 함수를 이용하여 블럭을 모두 제거 하는 예제입니다.
const clear = () => {
const { workspace } = foo.value;
workspace.clear();
}
기타 클래스들
위 코드에서는 javascript, serializer, workspace 이런 오브젝트를 사용하였는데,
docs 에 들어가 보시면 더 많은 클레스와 함수들이
제공되고 있으므로, 더욱 활용해보시면 좋을것으로 생각됩니다.