feat(editor-state): add manual compilation

packages/editor/packages/editor-state/src/configSchema.ts

@@ -101,7 +101,7 @@ const configSchema: ConfigSchema = {
 			type: 'array',
 			items: runtimeSettingsSchema,
 		},
-		disableCompilation: { type: 'boolean' },
+		disableAutoCompilation: { type: 'boolean' },
 	},
 	additionalProperties: false,
 };

packages/editor/packages/editor-state/src/effects/codeBlockNavigation.test.ts

@@ -43,7 +43,7 @@ describe('codeBlockNavigation', () => {
 			},
 			graphicHelper: {
 				selectedCodeBlock: selectedBlock,
-				codeBlocks: new Set([selectedBlock, leftBlock, rightBlock, upBlock, downBlock]),
+				codeBlocks: [selectedBlock, leftBlock, rightBlock, upBlock, downBlock],
 				viewport: { x: 0, y: 0, width: 800, height: 600, vGrid: 8, hGrid: 16 },
 			},
 		});
@@ -146,7 +146,7 @@ describe('codeBlockNavigation', () => {
 		codeBlockNavigation(state, events);
 
 		// Remove all blocks except selected
-		state.graphicHelper.codeBlocks = new Set([selectedBlock]);
+		state.graphicHelper.codeBlocks = [selectedBlock];
 
 		onKeydownHandler({ key: 'ArrowRight', metaKey: true });
 		expect(state.graphicHelper.selectedCodeBlock).toBe(selectedBlock);

packages/editor/packages/editor-state/src/effects/codeBlocks/__tests__/gridCoordinates.test.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach } from 'vitest';
 
 import { createMockCodeBlock } from '../../../pureHelpers/testingUtils/testUtils';
 
-import type { CodeBlockGraphicData, State } from '../../../types';
+import type { State } from '../../../types';
 
 describe('Grid Coordinates Integration', () => {
 	let mockState: Pick<State, 'graphicHelper'>;
@@ -16,7 +16,7 @@ describe('Grid Coordinates Integration', () => {
 					x: 0,
 					y: 0,
 				},
-				codeBlocks: new Set<CodeBlockGraphicData>(),
+				codeBlocks: [],
 			} as State['graphicHelper'],
 		};
 	});
@@ -88,7 +88,7 @@ describe('Grid Coordinates Integration', () => {
 				y: 160,
 			});
 
-			mockState.graphicHelper.codeBlocks.add(codeBlock);
+			mockState.graphicHelper.codeBlocks.push(codeBlock);
 
 			// Verify initial state with 8x16 font
 			expect(codeBlock.x).toBe(80);
@@ -132,8 +132,8 @@ describe('Grid Coordinates Integration', () => {
 				y: 240,
 			});
 
-			mockState.graphicHelper.codeBlocks.add(block1);
-			mockState.graphicHelper.codeBlocks.add(block2);
+			mockState.graphicHelper.codeBlocks.push(block1);
+			mockState.graphicHelper.codeBlocks.push(block2);
 
 			// Calculate initial grid spacing
 			const initialGridSpacingX = block2.gridX - block1.gridX;

packages/editor/packages/editor-state/src/effects/codeBlocks/blockTypeUpdater.ts

@@ -2,20 +2,13 @@ import { StateManager } from '@8f4e/state-manager';
 
 import getBlockType from '../../pureHelpers/codeParsers/getBlockType';
 
-import type { CodeBlockGraphicData, EventDispatcher, State } from '../../types';
-
-interface CodeBlockAddedEvent {
-	codeBlock: CodeBlockGraphicData;
-}
+import type { CodeBlockGraphicData, State } from '../../types';
 
 /**
  * Effect that keeps the blockType field in sync with code block contents.
- * Updates blockType on:
- * - codeBlockAdded: When a new code block is created
- * - projectLoaded: When a project is loaded (recompute all block types)
- * - code changes: When the selected code block's code changes
+ * Updates blockType when the selected code block's code changes.
  */
-export default function blockTypeUpdater(store: StateManager<State>, events: EventDispatcher): void {
+export default function blockTypeUpdater(store: StateManager<State>): void {
 	const state = store.getState();
 
 	/**
@@ -34,13 +27,6 @@ export default function blockTypeUpdater(store: StateManager<State>, events: Eve
 		}
 	}
 
-	/**
-	 * Update blockType when a new code block is added
-	 */
-	function onCodeBlockAdded({ codeBlock }: CodeBlockAddedEvent): void {
-		updateBlockType(codeBlock);
-	}
-
 	/**
 	 * Update blockType when the selected code block's code changes
 	 */
@@ -50,7 +36,6 @@ export default function blockTypeUpdater(store: StateManager<State>, events: Eve
 		}
 	}
 
-	events.on<CodeBlockAddedEvent>('codeBlockAdded', onCodeBlockAdded);
-	events.on('projectLoaded', updateAllBlockTypes);
+	store.subscribe('graphicHelper.codeBlocks', updateAllBlockTypes);
 	store.subscribe('graphicHelper.selectedCodeBlock.code', onSelectedCodeBlockCodeChange);
 }

packages/editor/packages/editor-state/src/effects/codeBlocks/codeBlockCreator.ts

@@ -6,12 +6,9 @@ import getVertexShaderId from '../../pureHelpers/shaderUtils/getVertexShaderId';
 import getFragmentShaderId from '../../pureHelpers/shaderUtils/getFragmentShaderId';
 import { EventDispatcher } from '../../types';
 
+import type { StateManager } from '@8f4e/state-manager';
 import type { CodeBlockGraphicData, State } from '../../types';
 
-export interface CodeBlockAddedEvent {
-	codeBlock: CodeBlockGraphicData;
-}
-
 const nameList = [
 	'quark',
 	'electron',
@@ -56,7 +53,7 @@ function getRandomCodeBlockId() {
 }
 
 function checkIfCodeBlockIdIsTaken(state: State, id: string) {
-	return Array.from(state.graphicHelper.codeBlocks).some(codeBlock => {
+	return state.graphicHelper.codeBlocks.some(codeBlock => {
 		return codeBlock.id === id;
 	});
 }
@@ -95,7 +92,8 @@ function incrementCodeBlockIdUntilUnique(state: State, blockId: string) {
 	return blockId;
 }
 
-export default function codeBlockCreator(state: State, events: EventDispatcher): void {
+export default function codeBlockCreator(store: StateManager<State>, events: EventDispatcher): void {
+	const state = store.getState();
 	async function onAddCodeBlock({
 		x,
 		y,
@@ -181,16 +179,18 @@ export default function codeBlockCreator(state: State, events: EventDispatcher):
 			blockType: 'unknown', // Will be updated by blockTypeUpdater effect
 		};
 
-		state.graphicHelper.codeBlocks.add(codeBlock);
-		events.dispatch('codeBlockAdded', { codeBlock });
+		store.set('graphicHelper.codeBlocks', [...state.graphicHelper.codeBlocks, codeBlock]);
 	}
 
 	function onDeleteCodeBlock({ codeBlock }: { codeBlock: CodeBlockGraphicData }): void {
 		if (!state.featureFlags.editing) {
 			return;
 		}
 
-		state.graphicHelper.codeBlocks.delete(codeBlock);
+		store.set(
+			'graphicHelper.codeBlocks',
+			state.graphicHelper.codeBlocks.filter(block => block !== codeBlock)
+		);
 	}
 
 	function onCopyCodeBlock({ codeBlock }: { codeBlock: CodeBlockGraphicData }): void {