bad dropdowns

Author: DogeisCut

src/serializer.ts

@@ -1,5 +1,5 @@
 import * as Blockly from 'blockly';
-import * as JSZip from 'jszip';
+import JSZip from 'jszip';
 
 function sanitizeFilename(name: string): string {
     return name

src/ui/Editor.svelte

@@ -12,6 +12,8 @@
     }
 
     export interface EditorState {
+        workspace: Blockly.WorkspaceSvg
+        canvas: HTMLCanvasElement
         editorModalKind?: "variable" | "projectSettings" | "editorSettings" | null,
         save: {
             unsavedChanges: boolean,
@@ -48,22 +50,23 @@
     })
 
     let editorState: EditorState = $state({
+        workspace: null,
+        canvas: null,
         editorModalKind: null,
         save: null
     })
 
     registerContinuousToolbox();
     
     let blocklyDiv: HTMLDivElement | null = null;
-    let workspace: Blockly.WorkspaceSvg | null = null;
 
     onMount(() => {
         if (!blocklyDiv) return;
 
         const toolboxElement = document.createElement("xml");
         toolboxElement.innerHTML = toolbox;
 
-        workspace = Blockly.inject(blocklyDiv, {
+        editorState.workspace = Blockly.inject(blocklyDiv, {
             toolbox: toolboxElement,
             collapse: true,
             comments: true,
@@ -282,29 +285,30 @@
         </block>
         `
 
-        Blockly.Xml.domToWorkspace(defaultWorkspaceElement, workspace)
+        Blockly.Xml.domToWorkspace(defaultWorkspaceElement, editorState.workspace)
 
-        workspace.addChangeListener(Blockly.Events.disableOrphans);
+        editorState.workspace.addChangeListener(Blockly.Events.disableOrphans);
 
         const listener = (e: Blockly.Events.Abstract) => {
             if (
                 e.isUiEvent ||
                 e.type === Blockly.Events.FINISHED_LOADING ||
-                workspace?.isDragging()
+                editorState.workspace?.isDragging()
             )
                 return;
-            Compiler.compile(workspace!);
+            Compiler.compile(editorState.workspace!);
             if (editorState.save) {
                 editorState.save.unsavedChanges = true
             }
         };
 
-        workspace.addChangeListener(listener);
+        editorState.workspace.addChangeListener(listener);
 
         onDestroy(() => {
-            workspace?.removeChangeListener(listener);
-            workspace?.dispose();
-            workspace = null;
+            editorState.workspace?.removeChangeListener(listener);
+            editorState.workspace?.removeChangeListener(Blockly.Events.disableOrphans);
+            editorState.workspace?.dispose();
+            editorState.workspace = null;
         });
     });
 </script>
@@ -317,16 +321,33 @@
     <div id="pageContainer">
         <div bind:this={blocklyDiv} id="blocklyDiv"></div>
         <RaymarcherPreview 
-        size={projectSettings.size}
-        previewSize={savedEditorState.preview.size}
+            {editorState}
+            {projectSettings}
+            {savedEditorState}
         />
     </div>
     {#if editorState.editorModalKind === "variable"}
         <EditorModalVariable
-        title="Create a Variable"
-        acceptText="Create"
-        cancelText="Cancel"
+            title="Create a Variable"
+            acceptText="Create"
+            cancelText="Cancel"
         ></EditorModalVariable>
+    {:else if editorState.editorModalKind === "editorSettings"}
+        <EditorModal
+            title="Editor Settings"
+            acceptText="Accept"
+            cancelText="Cancel"
+            onAccept={() => {}}
+            onCancel={() => {editorState.editorModalKind = null}}
+        ></EditorModal>
+    {:else if editorState.editorModalKind === "projectSettings"}
+        <EditorModal
+            title="Project Settings"
+            acceptText="Accept"
+            cancelText="Cancel"
+            onAccept={() => {}}
+            onCancel={() => {editorState.editorModalKind = null}}
+        ></EditorModal>
     {/if}
 </div>
 <AlphaWarning />

src/ui/EditorTopBar/EditorTopBar.svelte

@@ -4,6 +4,8 @@
     import EditorTopBarDropdownContentOption from "./EditorTopBarDropdown/EditorTopBarDropdownContentOption/EditorTopBarDropdownContentOption.svelte";
     import EditorTopBarDropdownContentSeparator from "./EditorTopBarDropdownContentSeparator/EditorTopBarDropdownContentSeparator.svelte";
 
+    import * as Serializer from "../../serializer"
+
     import type { ProjectSettings } from "../Editor.svelte"
     import type { EditorState } from "../Editor.svelte"
 
@@ -25,16 +27,25 @@
             <EditorTopBarDropdownContentOption onclick={() => {}}>Load form Computer</EditorTopBarDropdownContentOption>
             <EditorTopBarDropdownContentSeparator />
             <EditorTopBarDropdownContentOption onclick={() => {
-                
+
             }}>Save as...</EditorTopBarDropdownContentOption>
-            <EditorTopBarDropdownContentOption onclick={() => {
-                // Serializer.createFile(Workspace, "Untitled Project", Canvas).then(blob => {
-                //     const a = document.createElement('a');
-                //     a.href = URL.createObjectURL(blob);
-                //     a.download = 'Untitled Project.json';
-                //     a.click();
-                //     URL.revokeObjectURL(a.href);
-                // });
+            <EditorTopBarDropdownContentOption onclick={async () => {
+                const file = await Serializer.createFile(
+                    props.editorState.workspace, 
+                    props.projectSettings.name, 
+                    props.editorState.canvas
+                );
+
+                const url = URL.createObjectURL(file);
+                const a = document.createElement('a');
+
+                a.href = url;
+                a.download = file.name;
+
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
             }}>Save to seperate file</EditorTopBarDropdownContentOption>
         </EditorTopBarDropdown>
 

src/ui/EditorTopBar/EditorTopBarDropdown/EditorTopBarDropdown.svelte

@@ -10,10 +10,12 @@
 </script>
 
 <div class="dropdown">
-    <button onclick={() => open = !open} onfocusout={() => open = false} class="dropbtn">{props.text} <span class="arrow">▼</span></button>
+    <button onclick={() => open = !open} class="dropbtn">
+        {props.text} <span class="arrow">▼</span>
+    </button>
     {#if open}
         <div class="dropdown-content">
-            {@render props.children?.()} 
+            {@render props.children?.()}
         </div>
     {/if}
 </div>

src/ui/RaymarcherPreview/RaymarcherPreview.svelte

@@ -2,26 +2,31 @@
     import { draggable } from "@neodrag/svelte";
     import { makeGraphics, startLoop } from "../../compilier"
     import { onMount } from "svelte";
+    
+    import type { EditorState } from "../Editor.svelte"
+    import type { ProjectSettings } from "../Editor.svelte"
+    import type { SavedEditorState } from "../Editor.svelte"
 
-    let canvas: HTMLCanvasElement
+    interface RaymarcherPreviewProps {
+        editorState: EditorState,
+        projectSettings: ProjectSettings,
+        savedEditorState: SavedEditorState
+    }
 
-    const props: { 
-        size: [number, number]
-        previewSize: [number, number]
-    } = $props()
+    const props: RaymarcherPreviewProps = $props()
 
     onMount(() => {
-        makeGraphics(canvas)
+        makeGraphics(props.editorState.canvas)
         startLoop()
     })
 </script>
 
-<canvas bind:this={canvas} use:draggable={{ bounds: 'parent' }}
-width={props.size[0]}
-height={props.size[1]}
+<canvas bind:this={props.editorState.canvas} use:draggable={{ bounds: 'parent' }}
+width={props.projectSettings.size[0]}
+height={props.projectSettings.size[1]}
 id="raymarcherCanvas"
-style:width='{props.previewSize[0]}px'
-style:height='{props.previewSize[1]}px'
+style:width='{props.savedEditorState.preview.size[0]}px'
+style:height='{props.savedEditorState.preview.size[1]}px'
 >
 </canvas>