lingo3d
Version:
Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor
53 lines • 3.03 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useSignal } from "@preact/signals";
import { BACKGROUND_COLOR, EDITOR_WIDTH, LIBRARY_WIDTH, SCENEGRAPH_WIDTH } from "../../globals";
import { getScripts, pullScripts } from "../../states/useScripts";
import useInitCSS from "../hooks/useInitCSS";
import useInitEditor from "../hooks/useInitEditor";
import useSyncState from "../hooks/useSyncState";
import makeMonaco from "./makeMonaco";
import { editor, languages } from "monaco-editor";
import data from "monaco-themes/themes/Sunburst.json";
import { getScript, setScript } from "../../states/useScript";
import AppBar from "../component/bars/AppBar";
import CloseableTab from "../component/tabs/CloseableTab";
import { useLayoutEffect, useMemo } from "preact/hooks";
import { selectTab } from "../component/tabs/Tab";
import { addScriptsUnsaved, deleteScriptsUnsaved, getScriptsUnsaved } from "../../states/useScriptsUnsaved";
import { editorUrlPtr } from "../../pointers/assetsPathPointers";
const { Monaco } = makeMonaco();
Object.assign(data.colors, {
"editor.background": BACKGROUND_COLOR
// "editorSuggestWidget.background": "",
// "editorSuggestWidget.selectedBackground": ""
});
editor.defineTheme("lingo3d", data);
fetch(editorUrlPtr[0] + "lingo3d.d.ts").then(async (res) => languages.typescript.typescriptDefaults.addExtraLib(await res.text(), "lingo3d.d.ts"));
const ScriptEditor = () => {
useInitCSS();
useInitEditor();
const selectedSignal = useSignal([]);
const script = useSyncState(getScript);
const scripts = useSyncState(getScripts);
const scriptsUnsavedPtr = useSyncState(getScriptsUnsaved);
useLayoutEffect(() => {
const uuid = script?.uuid;
uuid && selectTab(selectedSignal, uuid);
}, [script]);
useLayoutEffect(() => {
const uuid = selectedSignal.value.at(-1);
setScript(scripts.find((script) => script.uuid === uuid));
}, [selectedSignal.value]);
const monacoFiles = useMemo(() => {
const result = {};
for (const script of scripts)
result[script.uuid] = script.code;
return result;
}, [scripts, scriptsUnsavedPtr]);
return (_jsxs("div", { className: "lingo3d-ui lingo3d-bg lingo3d-editor lingo3d-flexcol", style: { width: EDITOR_WIDTH + LIBRARY_WIDTH + SCENEGRAPH_WIDTH }, children: [_jsx(AppBar, { children: scripts.map((script) => (_jsx(CloseableTab, { selectedSignal: selectedSignal, id: script.uuid, onClose: () => pullScripts(script), unsaved: scriptsUnsavedPtr[0].has(script), children: script.name }, script.uuid))) }), _jsx(Monaco, { className: "lingo3d-nofix", style: { flexGrow: 1 }, theme: "lingo3d", language: script?.language.toLowerCase(), fontSize: 12, files: monacoFiles, file: script?.uuid, onChange: () => addScriptsUnsaved(script), onSave: (code) => {
script.code = code;
deleteScriptsUnsaved(script);
} })] }));
};
export default ScriptEditor;
//# sourceMappingURL=index.js.map