Accessible GUI-based simple canvas editor
Related files:
This module coordinates the setting up of a basic GUI-based editor of a SC scene. Once run, it returns (among other things) a Cell wrapper (created in a sub-module) which we can use to host the entitys to be used in the scene. To help edit the scene, it gives us:
CTRL + X, CTRL + C, CTRL + V keystrokesInputs to the initializeCanvasSceneEditor function
sceneCanvas - SC canvas wrapper object (required)domEntityEditor - CSS query string to locate the DOM element where the entity editor form will appear (required)sceneDimensions - a Number, or an array of [width, height] Numbers, setting the size of the scene Cell which will be returned to the calling code (default: 1600)minimapDimensions - a Number, or an array of [width, height] Numbers, setting the size of minimap that appears on the scene Cell (default: 200)Output from the initializeCanvasSceneEditor function - is an object containing the following attributes:
animation - the scene editor’s animation objectsceneLayer - the scene Cell wrapper objectaddControllerAttributes - an object containing attributes that need to be added to entitys which will be controlled by the scene editorsetGuiControlChars - a function to allow users to map keyboard action keys to better suit their preferred keyboard layoutkillSceneEditor - kill function, to remove everything associated with the scene editor from the SC libraryimport { initializeMinimap } from './canvas-minimap.js'
import { initializeDomEntityEditor } from './dom-entity-editor.js'
import { initializeEntityNavigation } from './entity-navigation.js'
import { initializeEntityManipulationGui } from './entity-manipulation-gui.js'
import { initializeEntityCopyPaste } from './entity-copy-paste.js'const initializeCanvasSceneEditor = (items = {}, scrawl) => {Check we have required arguments/values
const { sceneCanvas, domEntityEditor, sceneDimensions, minimapDimensions } = items;
if (scrawl == null) throw new Error('SC entity manipulation GUI module error: missing Scrawl-canvas object argument');
let argsCheck = '';
if (sceneCanvas == null) argsCheck += ' Scene canvas wrapper;';
if (domEntityEditor == null) argsCheck += ' DOM entity editor CSS query string;';
if (argsCheck.length) throw new Error(`SC entity manipulation GUI module error: missing arguments${argsCheck}`);This is mostly plumbing work, making sure each sub-module gets the right attributes they need
Initialize minimap
const {
mainCell,
checkForMinimapChanges,
killCanvasMinimap,
} = initializeMinimap({
canvas: sceneCanvas,
mainDimensions: sceneDimensions,
mapDimensions: minimapDimensions,
}, scrawl);Initialize DOM entity editor functionality
const {
dashboard,
killDomEntityEditor,
} = initializeDomEntityEditor({
queryString: domEntityEditor,
}, scrawl);Initialize entity navigation
const {
selectedEntitys,
addControllerAttributes,
checkForEntityNavigationHoverActions,
updateControllerDisplay,
killEntityNavigation,
} = initializeEntityNavigation({
canvas: sceneCanvas,
cell: mainCell,
dashboard,
}, scrawl);Initialize entity manipulation GUI
const {
checkForSelectionUpdates,
setGuiControlChars,
createGui,
killEntityManipulationGui,
} = initializeEntityManipulationGui({
canvas: sceneCanvas,
cell: mainCell,
selectedEntitys,
dashboard,
updateControllerDisplay,
}, scrawl);Initialize entity copy-paste
const {
killEntityCopyPaste,
} = initializeEntityCopyPaste({
canvas: sceneCanvas,
selectedEntitys,
addControllerAttributes,
updateControllerDisplay,
dashboard,
createGui,
}, scrawl); const animation = scrawl.makeRender({
name: 'canvas-scene-editor-animation',
target: sceneCanvas,
commence: () => {
checkForMinimapChanges();
checkForSelectionUpdates();
dashboard.update(selectedEntitys);
},
afterShow: checkForEntityNavigationHoverActions,
});For the kill/cleanup sequence, we run through the module kill functions in the reverse order in which we created them
const killSceneEditor = () => {
killEntityCopyPaste();
killEntityManipulationGui();
killEntityNavigation();
killDomEntityEditor();
killCanvasMinimap();
};Return object
return {
animation,
sceneLayer: mainCell,
addControllerAttributes,
setGuiControlChars,
killSceneEditor,
};
};export {
initializeCanvasSceneEditor,
};