From 05beab692960c14f0337d8ff577c06759665634b Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Tue, 7 Dec 2021 12:11:40 +0100 Subject: [PATCH] Removed a few dependencies, refactored pixel-editor.js --- js/ColorPicker.js | 12 +-------- js/Dialogue.js | 2 +- js/EditorState.js | 44 +++++++++++++++------------------ js/FileManager.js | 4 +-- js/Input.js | 2 +- js/LayerList.js | 22 +++++++++++++++++ js/PaletteBlock.js | 4 --- js/Settings.js | 4 +-- js/Startup.js | 14 +++-------- js/Tool.js | 21 +--------------- js/ToolManager.js | 10 ++++---- js/TopMenuModule.js | 8 +++--- js/layers/PixelGrid.js | 3 +++ js/pixel-editor.js | 55 +++++++++++++++++++++--------------------- refactor_dependencies | 10 +++----- 15 files changed, 94 insertions(+), 121 deletions(-) diff --git a/js/ColorPicker.js b/js/ColorPicker.js index eae3659..4fb951b 100644 --- a/js/ColorPicker.js +++ b/js/ColorPicker.js @@ -50,7 +50,6 @@ const ColorPicker = (() => { init(); function init() { - // TODO: BIND EVENTS // Appending the palette styles document.getElementsByTagName("head")[0].appendChild(styleElement); @@ -302,7 +301,6 @@ const ColorPicker = (() => { sliders[2].getElementsByTagName("label")[0].innerHTML = 'L'; break; default: - console.log("wtf select a decent picker mode"); break; } @@ -447,9 +445,7 @@ const ColorPicker = (() => { currPickerIconPos[0][1] = miniPickerCanvas.height - yPos; if (currPickerIconPos[0][1] >= 92) - { currPickerIconPos[0][1] = 91.999; - } activePickerIcon.style.left = '' + xPos + 'px'; activePickerIcon.style.top = '' + (miniPickerCanvas.height - yPos) + 'px'; @@ -467,8 +463,6 @@ const ColorPicker = (() => { let newHsv = currColor.hsv; let newHex; - console.log("Hex: " + currColor.hex); - // Adding slider value to value newHsv = new Color("hsv", newHsv.h, newHsv.s, parseInt(event.target.value)); // Updating hex @@ -575,7 +569,6 @@ const ColorPicker = (() => { case 'analog': createIcon(); createIcon(); - nHexContainers = 2; break; case 'cmpt': @@ -594,13 +587,11 @@ const ColorPicker = (() => { nHexContainers = 2; break; case 'tetra': - for (let i=0; i<3; i++) { + for (let i=0; i<3; i++) createIcon(); - } nHexContainers = 3; break; default: - console.log("How did you select the " + currentPickingMode + ", hackerman?"); break; } @@ -632,7 +623,6 @@ const ColorPicker = (() => { let currentColourHsv = new Color("hex", currentColorHex).hsv; let newColourHsv; let newColourHexes = ['', '', '']; - let tmpRgb; switch (currentPickingMode) { diff --git a/js/Dialogue.js b/js/Dialogue.js index ab687bf..26fcc8d 100644 --- a/js/Dialogue.js +++ b/js/Dialogue.js @@ -42,7 +42,7 @@ const Dialogue = (() => { document.getElementById(dialogueName).style.display = 'block'; // If I'm opening the palette window, I initialize the colour picker - if (dialogueName == 'palette-block' && Startup.documentCreated()) { + if (dialogueName == 'palette-block' && EditorState.documentCreated()) { ColorPicker.init(); PaletteBlock.init(); } diff --git a/js/EditorState.js b/js/EditorState.js index ee1761a..54d78c1 100644 --- a/js/EditorState.js +++ b/js/EditorState.js @@ -1,5 +1,6 @@ const EditorState = (() => { let pixelEditorMode = "Basic"; + let firstFile = true; Events.on('click', 'switch-editor-mode-splash', chooseMode); Events.on('click', 'switch-mode-button', toggleMode); @@ -11,35 +12,16 @@ const EditorState = (() => { function switchMode(newMode) { //switch to advanced mode if (newMode == 'Advanced') { - // Show the layer menus - LayerList.getLayerListEntries().style.display = "inline-block"; - document.getElementById('layer-button').style.display = 'inline-block'; + Events.emit("switchedToAdvanced"); // Hide the palette menu document.getElementById('colors-menu').style.right = '200px' pixelEditorMode = 'Advanced'; document.getElementById("switch-mode-button").innerHTML = 'Switch to basic mode'; - - //turn pixel grid off - currFile.pixelGrid.togglePixelGrid('off'); } //switch to basic mode - else { - //if there is a current layer (a document is active) - if (Startup.documentCreated()) { - if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) { - return; - } - - // Selecting the current layer - currFile.currentLayer.selectLayer(); - // Flatten the layers - LayerList.flatten(true); - } - - // Hide the layer menus - LayerList.getLayerListEntries().style.display = 'none'; - document.getElementById('layer-button').style.display = 'none'; + else { + Events.emit("switchedToBasic"); // Show the palette menu document.getElementById('colors-menu').style.display = 'flex'; // Move the palette menu @@ -47,7 +29,6 @@ const EditorState = (() => { pixelEditorMode = 'Basic'; document.getElementById("switch-mode-button").innerHTML = 'Switch to advanced mode'; - currFile.pixelGrid.togglePixelGrid('on'); } } @@ -73,8 +54,23 @@ const EditorState = (() => { switchMode('Advanced'); } + function documentCreated() { + return !firstFile; + } + + function firstPixel() { + return firstFile; + } + + function created() { + firstFile = false; + } + return { getCurrentMode, - switchMode + switchMode, + documentCreated, + created, + firstPixel } })(); \ No newline at end of file diff --git a/js/FileManager.js b/js/FileManager.js index eac00a4..9bd2f7f 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -58,7 +58,7 @@ const FileManager = (() => { } function exportProject() { - if (Startup.documentCreated()) { + if (EditorState.documentCreated()) { //create name let fileName = Util.getValue("export-file-name"); //set download link @@ -107,7 +107,7 @@ const FileManager = (() => { function open() { //if a document exists - if (Startup.documentCreated()) { + if (EditorState.documentCreated()) { //check if the user wants to overwrite if (confirm('Opening a pixel will discard your current one. Are you sure you want to do that?')) //open file selection dialog diff --git a/js/Input.js b/js/Input.js index 03d6c19..5f44c08 100644 --- a/js/Input.js +++ b/js/Input.js @@ -73,7 +73,7 @@ const Input = (() => { } //if no document has been created yet or there is a dialog box open ignore hotkeys - if (!Startup.documentCreated() || Dialogue.isOpen()) return; + if (!EditorState.documentCreated() || Dialogue.isOpen()) return; if (e.key === "Escape") { console.log("esc"); diff --git a/js/LayerList.js b/js/LayerList.js index 2b0d546..f1b48b9 100644 --- a/js/LayerList.js +++ b/js/LayerList.js @@ -9,6 +9,9 @@ const LayerList = (() => { Events.on("mousedown", layerList, openOptionsMenu); // Binding the add layer button to the right function Events.on('click',"add-layer-button", addLayer, false); + // Listening to the switch mode event so I can change the layout + Events.onCustom("switchedToAdvanced", showMenu); + Events.onCustom("switchedToBasic", hideMenu); // Making the layers list sortable new Sortable(layerList, { @@ -19,6 +22,25 @@ const LayerList = (() => { onEnd: layerDragDrop }); + function showMenu() { + layerList.style.display = "inline-block"; + document.getElementById('layer-button').style.display = 'inline-block'; + } + function hideMenu() { + if (EditorState.documentCreated()) { + if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) { + return; + } + // Selecting the current layer + currFile.currentLayer.selectLayer(); + // Flatten the layers + flatten(true); + } + + layerList.style.display = "none"; + document.getElementById('layer-button').style.display = 'none'; + } + function addLayer(id, saveHistory = true) { // layers.length - 3 let index = currFile.layers.length - 3; diff --git a/js/PaletteBlock.js b/js/PaletteBlock.js index edcb09d..b884076 100644 --- a/js/PaletteBlock.js +++ b/js/PaletteBlock.js @@ -1,14 +1,10 @@ const PaletteBlock = (() => { // HTML elements let coloursList = document.getElementById("palette-list"); - let rampMenu = document.getElementById("pb-ramp-options"); - let pbRampDialogue = document.getElementById("pb-ramp-dialogue"); // PaletteBlock-specific data let currentSquareSize = coloursList.children[0].clientWidth; let blockData = {blockWidth: 300, blockHeight: 320, squareSize: 40}; - let isRampSelecting = false; - let ramps = []; let currentSelection = {startIndex:0, endIndex:0, startCoords:[], endCoords: [], name: "", colour: "", label: null}; diff --git a/js/Settings.js b/js/Settings.js index dd66fa8..d152280 100644 --- a/js/Settings.js +++ b/js/Settings.js @@ -45,10 +45,10 @@ const Settings = (() => { settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates'); settings.pixelGridColour = Util.getValue('setting-pixelGridColour'); // Filling pixel grid again if colour changed - currFile.pixelGrid.fillPixelGrid(); + Events.emit("refreshPixelGrid"); //save settings object to cookie - var cookieValue = JSON.stringify(settings); + let cookieValue = JSON.stringify(settings); Cookies.set('pixelEditorSettings', cookieValue, { expires: Infinity }); //close window diff --git a/js/Startup.js b/js/Startup.js index cff1559..2888880 100644 --- a/js/Startup.js +++ b/js/Startup.js @@ -1,6 +1,4 @@ const Startup = (() => { - - let firstPixel = true; let splashPostfix = ''; Events.on('click', 'create-button', create, false); @@ -55,10 +53,9 @@ const Startup = (() => { currFile.layers[1].selectLayer(); } - console.log("Starting with mode " + EditorState.getCurrentMode()); EditorState.switchMode(EditorState.getCurrentMode()); // This is not the first Pixel anymore - firstPixel = false; + EditorState.created(); } function initLayers(width, height) { @@ -66,7 +63,7 @@ const Startup = (() => { currFile.canvasSize = [width, height]; // If this is the first pixel I'm creating since the app has started - if (firstPixel) { + if (EditorState.firstPixel()) { // Creating the first layer currFile.currentLayer = new Layer(width, height, 'pixel-canvas', ""); currFile.currentLayer.canvas.style.zIndex = 2; @@ -113,7 +110,7 @@ const Startup = (() => { // Tmp layer to draw previews on currFile.TMPLayer = new Layer(width, height, 'tmp-canvas'); - if (firstPixel) { + if (EditorState.firstPixel()) { // Adding the first layer and the checkerboard to the list of layers currFile.layers.push(currFile.checkerBoard); currFile.layers.push(currFile.currentLayer); @@ -227,10 +224,6 @@ const Startup = (() => { newPixel(x, y); } - function documentCreated() { - return !firstPixel; - } - function splashEditorMode(mode) { editorMode = mode; } @@ -239,7 +232,6 @@ const Startup = (() => { create, newPixel, newFromTemplate, - documentCreated, splashEditorMode } })(); \ No newline at end of file diff --git a/js/Tool.js b/js/Tool.js index 38ec763..0a9e43e 100644 --- a/js/Tool.js +++ b/js/Tool.js @@ -123,23 +123,4 @@ class Tool { get size() { return this.currSize; } -} - - -/*global dragging currentTool, currentToolTemp, selectionCanceled, endSelection*/ - -/** - * Class selectionTool extends Tool { - * imageDataToMove - * startDataPos - * currDataPos - * finalDataPos - * canMove - * - * movePreview() - * - * // start and end selection just overwrite the onStart and onEnd methods - * - * } - * - */ \ No newline at end of file +} \ No newline at end of file diff --git a/js/ToolManager.js b/js/ToolManager.js index f025ef2..3177956 100644 --- a/js/ToolManager.js +++ b/js/ToolManager.js @@ -30,13 +30,13 @@ const ToolManager = (() => { Events.onCustom("tool-shortcut", onShortcut); function onShortcut(tool) { - if (!Startup.documentCreated || Dialogue.isOpen()) + if (!EditorState.documentCreated || Dialogue.isOpen()) return; switchTool(tools[tool]); } function onMouseWheel(mouseEvent) { - if (!Startup.documentCreated || Dialogue.isOpen()) + if (!EditorState.documentCreated || Dialogue.isOpen()) return; let mousePos = Input.getCursorPosition(mouseEvent); @@ -44,7 +44,7 @@ const ToolManager = (() => { } function onMouseDown(mouseEvent) { - if (!Startup.documentCreated() || Dialogue.isOpen()) + if (!EditorState.documentCreated() || Dialogue.isOpen()) return; let mousePos = Input.getCursorPosition(mouseEvent); @@ -75,7 +75,7 @@ const ToolManager = (() => { } function onMouseMove(mouseEvent) { - if (!Startup.documentCreated() || Dialogue.isOpen()) + if (!EditorState.documentCreated() || Dialogue.isOpen()) return; let mousePos = Input.getCursorPosition(mouseEvent); // Call the hover event @@ -108,7 +108,7 @@ const ToolManager = (() => { } function onMouseUp(mouseEvent) { - if (!Startup.documentCreated()) + if (!EditorState.documentCreated()) return; let mousePos = Input.getCursorPosition(mouseEvent); diff --git a/js/TopMenuModule.js b/js/TopMenuModule.js index 14097b7..885ab38 100644 --- a/js/TopMenuModule.js +++ b/js/TopMenuModule.js @@ -44,7 +44,7 @@ const TopMenuModule = (() => { break; case 'Exit': //if a document exists, make sure they want to delete it - if (Startup.documentCreated()) { + if (EditorState.documentCreated()) { //ask user if they want to leave if (confirm('Exiting will discard your current pixel. Are you sure you want to do that?')) //skip onbeforeunload prompt @@ -64,12 +64,10 @@ const TopMenuModule = (() => { Events.on('click', currSubmenuButton, function(){Events.emit("ctrl+x");}); break; case 'Cancel': - //Events.on('click', currSubmenuButton, tool.pencil.switchTo); + Events.on('click', currSubmenuButton, function(){Events.emit("esc-pressed")}); break; - //Help Menu + //Help Menu case 'Settings': - //fill form with current settings values - //Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates); Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'settings'); break; case 'Help': diff --git a/js/layers/PixelGrid.js b/js/layers/PixelGrid.js index aba8ffd..1a830a3 100644 --- a/js/layers/PixelGrid.js +++ b/js/layers/PixelGrid.js @@ -17,6 +17,9 @@ class PixelGrid extends Layer { initialize() { super.initialize(); this.fillPixelGrid(); + Events.onCustom("refreshPixelGrid", this.fillPixelGrid.bind(this)); + Events.onCustom("switchedToAdvanced", this.disablePixelGrid.bind(this)); + Events.onCustom("switchedToBasic", this.enablePixelGrid.bind(this)); } disablePixelGrid() { diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 43f74d6..1b4822d 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -1,22 +1,34 @@ -/**EXTERNALS AND LIBRARIES**/ +/** EXTERNALS AND LIBRARIES **/ //=include lib/cookies.js //=include lib/jscolor.js //=include lib/sortable.js -/**UTILITY AND INPUT*/ +//=include data/consts.js +//=include data/palettes.js + +/** UTILITY AND INPUT **/ //=include Util.js //=include Events.js //=include Dialogue.js //=include History.js +//=include Settings.js +//=include EditorState.js +/** COLOR-RELATED **/ //=include Color.js +//=include ColorPicker.js +//=include PaletteBlock.js - +/** BASE CLASSES **/ //=include File.js -//=include ColorModule.js - //=include Tool.js +//=include layers/Layer.js +/** SPECIAL LAYERS **/ +//=include layers/Checkerboard.js +//=include layers/PixelGrid.js + +/** TOOLS **/ //=include tools/ResizableTool.js //=include tools/SelectionTool.js @@ -31,35 +43,22 @@ //=include tools/RectangularSelectionTool.js //=include tools/MoveSelectionTool.js -/**init**/ -//=include data/consts.js -//=include Settings.js -//=include LayerList.js -//=include layers/Layer.js -//=include layers/Checkerboard.js -//=include layers/PixelGrid.js - -//=include Startup.js -//=include EditorState.js -//=include ToolManager.js - -/**dropdown formatting**/ -//=include PresetModule.js -//=include data/palettes.js - -/**functions**/ -//=include ColorPicker.js -//=include PaletteBlock.js +/** MODULES AND MENUS **/ //=include SplashPage.js +//=include PresetModule.js +//=include ColorModule.js +//=include ToolManager.js +//=include LayerList.js -/**menus**/ +/** STARTUP AND FILE MANAGEMENT **/ +//=include Startup.js //=include FileManager.js //=include TopMenuModule.js -/**event listeners**/ +/** HTML INPUT EVENTS **/ //=include Input.js -/**feature toggles**/ +/** IHER **/ //=include FeatureToggles.js // Controls execution of this preset module @@ -118,7 +117,7 @@ window.onload = function () { //prevent user from leaving page with unsaved data window.onbeforeunload = function() { - if (documentCreated) + if (EditorState.documentCreated) return 'You will lose your pixel if it\'s not saved!'; else return; diff --git a/refactor_dependencies b/refactor_dependencies index dfc3441..1799cd8 100644 --- a/refactor_dependencies +++ b/refactor_dependencies @@ -1,12 +1,8 @@ Input <- Startup, LayerList, TopMenuModule: Could be resolved by using custom events +FileManager <- LayerList, File, Startup, EditorState, ColorModule + Startup <- ColorModule, ToolManager, LayerList, EditorState, Layer(++) -EditorState <- LayerList, File, Startup(documentCreated): maybe documentCreated should stay in EditorState (that would fix the - circular dependency with Startup), for the other dependencies it'd probably be nice for them to listen to a custom events +TopMenuModule -> Startup -Color <- NONE - -ColorModule <- File - -File <- Startup, but only because Startup sets certain variables in File (pixelGrid, checkerboard and the other global layers)