A. 데이터 다운로드 및 불러오기

데이터를 사용자 PC에 다운로드하는 기능과 사용자 PC의 파일로부터 데이터를 불러오는 기능에 대한 예제입니다.
실행 결과
코드 보기
<html>
<head>
    <script
        src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
        defer
        onload="onLoadHelper();"
    ></script>

    <script>
        async function onLoadHelper() {
            await mathcore.helper.load("cube", {
                key: "TESTKEY"
            });

            const cube = new mathcore.cube.Cube();
            await cube.render("cube");

            document.getElementById("save").addEventListener("click", () => {
                const dataBlob = cube.dataManager.saveAsBlob();
                cube.utils.files.downloadFile("file-name.gnc", dataBlob, (progress) => {
                    console.log(progress);
                });
            });

            document.getElementById("load").addEventListener("click", () => {
                cube.utils.files.readLocalFile(".gnc").then((file) => {
                    cube.dataManager.load(file);
                });
            });

            const buttons = document.querySelectorAll(".tools button[data-name]");
            buttons.forEach((button) => {
                const icon = `url("${cube.toolManager.getToolIcon(button.dataset.name)}")`;
                button.style.backgroundImage = icon;
                button.addEventListener("click", (event) => {
                    const toolName = button.dataset.name;
                    cube.toolManager.setCurrentTool(toolName);
                });
            });

            cube.toolManager.onChangeTool((toolName) => {
                buttons.forEach((button) => {
                    if (button.dataset.name === toolName) {
                        button.classList.add("active");
                    } else {
                        button.classList.remove("active");
                    }
                });
            });

            buttons[0].dispatchEvent(new Event("click"));
        }
    </script>
</head>

<body>
    <div id="cube"></div>
    <div class="button-group">
        <button id="save">로컬 파일로 다운로드</button>
        <button id="load">로컬 파일 불러오기</button>
    </div>
    <div class="tools">
        <button data-name="basic/select"></button>
        <button data-name="basic/delete"></button>
        <button data-name="cube/plain"></button>
        <button data-name="geometry/prism"></button>
    </div>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            display: flex;
            overflow: hidden;
        }
        #cube {
            position: relative;
            flex: 1;
            height: 100%;
        }
        .button-group {
            position: absolute;
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            right: 0;
            top: 0;
        }
        .tools {
            position: absolute;
            display: flex;
            left: 50%;
            transform: translateX(-50%);
            bottom: 5px;
            column-gap: 5px;
        }
        .tools button {
            width: 40px;
            height: 40px;
            border: 1px solid black;
            border-radius: 4px;
            cursor: pointer;
            background-color: white;
            background-size: contain;
        }
        .tools button.active {
            border: 2px solid red;
        }
    </style>
</body>
</html>