mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Removed a few dependencies, refactored pixel-editor.js

This commit is contained in:
unsettledgames 2021-12-07 12:11:40 +01:00
parent 21dd47c2b0
commit 05beab6929
15 changed files with 94 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
js/ColorPicker.js
View File

@ -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)
{

2
js/Dialogue.js
View File

@ -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();
}

44
js/EditorState.js
View File

@ -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
}
})();

4
js/FileManager.js
View File

@ -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

2
js/Input.js
View File

@ -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");

22
js/LayerList.js
View File

@ -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;

4
js/PaletteBlock.js
View File

@ -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};

4
js/Settings.js
View File

@ -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

14
js/Startup.js
View File

@ -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
}
})();

21
js/Tool.js
View File

@ -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
*
* }
*
*/
}

10
js/ToolManager.js
View File

@ -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);

8
js/TopMenuModule.js
View File

@ -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':

3
js/layers/PixelGrid.js
View File

@ -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() {

55
js/pixel-editor.js
View File

@ -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;

10
refactor_dependencies
View File

@ -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)