mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Tested get/set functions

Browse Source 
Found out every function that uses this has problems: when calling an object method as an input callback, this gets replaced with the element that triggered the event.
This commit is contained in:
unsettledgames
2021-07-09 23:44:04 +02:00
parent a18584ff04
commit 3f2d67a36e
13 changed files with 59 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/_canvas.scss
View File

@@ -70,7 +70,7 @@
#brush-preview { #brush-preview {
position: absolute; position: absolute;
border: solid 1px #fff; border: solid 2px #fff;
z-index: 1200; z-index: 1200;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
pointer-events: none; pointer-events: none;

2
js/ColorModule.js
View File

@@ -203,3 +203,5 @@ const ColorModule = (() => {
AddToSimplePalette AddToSimplePalette
} }
})(); })();
console.log("Color module: " + ColorModule);

46
js/_createButton.js
View File

@@ -5,8 +5,8 @@ function create(isSplash) {
splashPostfix = '-splash'; splashPostfix = '-splash';
} }
var width = getValue('size-width' + splashPostfix); var width = Util.getValue('size-width' + splashPostfix);
var height = getValue('size-height' + splashPostfix); var height = Util.getValue('size-height' + splashPostfix);
// If I'm creating from the splash screen, I use the splashMode variable // If I'm creating from the splash screen, I use the splashMode variable
var mode = isSplash ? splashMode : pixelEditorMode; var mode = isSplash ? splashMode : pixelEditorMode;
@@ -18,7 +18,7 @@ function create(isSplash) {
document.getElementById('new-pixel-warning').style.display = 'block'; document.getElementById('new-pixel-warning').style.display = 'block';
//get selected palette name //get selected palette name
var selectedPalette = getText('palette-button' + splashPostfix); var selectedPalette = Util.getText('palette-button' + splashPostfix);
if (selectedPalette == 'Choose a palette...') if (selectedPalette == 'Choose a palette...')
selectedPalette = 'none'; selectedPalette = 'none';
@@ -27,27 +27,31 @@ function create(isSplash) {
//reset new form //reset new form
setValue('size-width', 64); Util.setValue('size-width', 64);
setValue('size-height', 64); Util.setValue('size-height', 64);
setText('palette-button', 'Choose a palette...'); Util.setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...'); Util.setText('preset-button', 'Choose a preset...');
} }
/** Triggered when the "Create" button in the new pixel dialogue is pressed /** Triggered when the "Create" button in the new pixel dialogue is pressed
* *
*/ */
on('click', 'create-button', function (){ on('click', 'create-button', function (){
console.log("Here");
// Getting the values of the form // Getting the values of the form
var width = getValue('size-width'); var width = Util.getValue('size-width');
var height = getValue('size-height'); var height = Util.getValue('size-height');
// Creating a new pixel with those properties // Creating a new pixel with those properties
newPixel(width, height); if(pixelEditorMode == "Basic")
newPixel(width, height, "Advanced");
else
newPixel(width, height, "Basic");
document.getElementById('new-pixel-warning').style.display = 'block'; document.getElementById('new-pixel-warning').style.display = 'block';
//get selected palette name //get selected palette name
var selectedPalette = getText('palette-button'); var selectedPalette = Util.getText('palette-button');
if (selectedPalette == 'Choose a palette...') if (selectedPalette == 'Choose a palette...')
selectedPalette = 'none'; selectedPalette = 'none';
@@ -56,11 +60,11 @@ on('click', 'create-button', function (){
//reset new form //reset new form
setValue('size-width', 64); Util.setValue('size-width', 64);
setValue('size-height', 64); Util.setValue('size-height', 64);
setText('palette-button', 'Choose a palette...'); Util.setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...'); Util.setText('preset-button', 'Choose a preset...');
}); });
/** Triggered when the "Create" button in the new pixel dialogue is pressed /** Triggered when the "Create" button in the new pixel dialogue is pressed
@@ -68,8 +72,8 @@ on('click', 'create-button', function (){
*/ */
on('click', 'create-button-splash', function (){ on('click', 'create-button-splash', function (){
// Getting the values of the form // Getting the values of the form
var width = getValue('size-width-splash'); var width = Util.getValue('size-width-splash');
var height = getValue('size-height-splash'); var height = Util.getValue('size-height-splash');
var mode = pixelEditorMode; var mode = pixelEditorMode;
if (mode == 'Advanced') if (mode == 'Advanced')
@@ -88,9 +92,9 @@ on('click', 'create-button-splash', function (){
selectedPalette = 'none'; selectedPalette = 'none';
//reset new pixel form //reset new pixel form
setValue('size-width-splash', 64); Util.setValue('size-width-splash', 64);
setValue('size-height-splash', 64); Util.setValue('size-height-splash', 64);
setText('palette-button', 'Choose a palette...'); Util.setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...'); Util.setText('preset-button', 'Choose a preset...');
}); });

6
js/_fileMenu.js
View File

@@ -31,7 +31,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
break; break;
case 'Save project': case 'Save project':
//create name //create name
var selectedPalette = getText('palette-button'); var selectedPalette = Util.getText('palette-button');
if (selectedPalette != 'Choose a palette...'){ if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation; var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe'; var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe';
@@ -69,7 +69,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
case 'Export': case 'Export':
if (documentCreated) { if (documentCreated) {
//create name //create name
var selectedPalette = getText('palette-button'); var selectedPalette = Util.getText('palette-button');
if (selectedPalette != 'Choose a palette...'){ if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation; var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png'; var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
@@ -167,7 +167,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
//Help Menu //Help Menu
case 'Settings': case 'Settings':
//fill form with current settings values //fill form with current settings values
setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates); Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
showDialogue('settings'); showDialogue('settings');
break; break;

4
js/_loadPalette.js
View File

@@ -37,8 +37,8 @@ document.getElementById('load-palette-browse-holder').addEventListener('change',
//add to palettes so that it can be loaded when they click okay //add to palettes so that it can be loaded when they click okay
palettes['Loaded palette'] = {}; palettes['Loaded palette'] = {};
palettes['Loaded palette'].colors = colorPalette; palettes['Loaded palette'].colors = colorPalette;
setText('palette-button', 'Loaded palette'); Util.setText('palette-button', 'Loaded palette');
setText('palette-button-splash', 'Loaded palette'); Util.setText('palette-button-splash', 'Loaded palette');
toggle('palette-menu-splash'); toggle('palette-menu-splash');
}; };
img.src = e.target.result; img.src = e.target.result;

2
js/_mouseEvents.js
View File

@@ -423,8 +423,6 @@ function draw (mouseEvent) {
currentTool.updateCursor(); currentTool.updateCursor();
else else
canvasView.style.cursor = 'default'; canvasView.style.cursor = 'default';
console.log("Cursor: " + canvasView.style.cursor);
} }
//mousewheel scroll //mousewheel scroll

4
js/_newPixel.js
View File

@@ -97,9 +97,9 @@ function newPixel (width, height, editorMode, fileContent = null) {
//add colors from selected palette //add colors from selected palette
var selectedPalette; var selectedPalette;
if (!firstPixel) if (!firstPixel)
var selectedPalette = getText('palette-button'); var selectedPalette = Util.getText('palette-button');
else else
var selectedPalette = getText('palette-button-splash'); var selectedPalette = Util.getText('palette-button-splash');
// If the user selected a palette and isn't opening a file, I load the selected palette // If the user selected a palette and isn't opening a file, I load the selected palette
if (selectedPalette != 'Choose a palette...' && fileContent == null) { if (selectedPalette != 'Choose a palette...' && fileContent == null) {

32
js/_palettes.js
View File

@@ -84,10 +84,10 @@ palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"",
const buttonEvent = () => { const buttonEvent = () => {
//hide the dropdown menu //hide the dropdown menu
Util.deselect('palette-menu'); deselect('palette-menu');
Util.deselect('palette-button'); deselect('palette-button');
Util.deselect('palette-menu-splash'); deselect('palette-menu-splash');
Util.deselect('palette-button-splash'); deselect('palette-button-splash');
//show empty palette option //show empty palette option
noPaletteButton.style.display = 'block'; noPaletteButton.style.display = 'block';
@@ -115,15 +115,15 @@ palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"",
document.getElementById('load-palette-browse-holder').click(); document.getElementById('load-palette-browse-holder').click();
} }
const clickPaletteButtonEvent = (e) => { const clickPaletteButtonEvent = (e) => {
Util.toggle('palette-button'); toggle('palette-button');
Util.toggle('palette-menu'); toggle('palette-menu');
Util.deselect('preset-button'); deselect('preset-button');
Util.deselect('preset-menu'); deselect('preset-menu');
// Splash version // Splash version
Util.toggle('palette-button-splash'); toggle('palette-button-splash');
Util.toggle('palette-menu-splash'); toggle('palette-menu-splash');
e.stopPropagation(); e.stopPropagation();
} }
@@ -141,13 +141,13 @@ palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"",
}) })
newPixelElement.addEventListener('click', () => { newPixelElement.addEventListener('click', () => {
Util.deselect('preset-button'); deselect('preset-button');
Util.deselect('preset-menu'); deselect('preset-menu');
Util.deselect('palette-button'); deselect('palette-button');
Util.deselect('palette-menu'); deselect('palette-menu');
// Splash version // Splash version
Util.deselect('palette-button-splash'); deselect('palette-button-splash');
Util.deselect('palette-menu-splash'); deselect('palette-menu-splash');
}) })
})(); })();

8
js/_presets.js
View File

@@ -25,8 +25,8 @@ const PresetModule = (() => {
Util.setText('palette-button', presets[presetName].palette); Util.setText('palette-button', presets[presetName].palette);
//hide the dropdown menu //hide the dropdown menu
Util.deselect('preset-menu'); deselect('preset-menu');
Util.deselect('preset-button'); deselect('preset-button');
//set the text of the dropdown to the newly selected preset //set the text of the dropdown to the newly selected preset
Util.setText('preset-button', presetName); Util.setText('preset-button', presetName);
@@ -41,8 +41,8 @@ const PresetModule = (() => {
Util.toggle('preset-menu'); Util.toggle('preset-menu');
//close the palette menu //close the palette menu
Util.deselect('palette-button'); deselect('palette-button');
Util.deselect('palette-menu'); deselect('palette-menu');
e.stopPropagation(); e.stopPropagation();
}); });

6
js/_settings.js
View File

@@ -30,14 +30,14 @@ on('click', 'save-settings', saveSettings);
function saveSettings() { function saveSettings() {
//check if values are valid //check if values are valid
if (isNaN(getValue('setting-numberOfHistoryStates'))) { if (isNaN(Util.getValue('setting-numberOfHistoryStates'))) {
alert('Invalid value for numberOfHistoryStates'); alert('Invalid value for numberOfHistoryStates');
return; return;
} }
//save new settings to settings object //save new settings to settings object
settings.numberOfHistoryStates = getValue('setting-numberOfHistoryStates'); settings.numberOfHistoryStates = Util.getValue('setting-numberOfHistoryStates');
settings.pixelGridColour = getValue('setting-pixelGridColour'); settings.pixelGridColour = Util.getValue('setting-pixelGridColour');
// Filling pixel grid again if colour changed // Filling pixel grid again if colour changed
fillPixelGrid(); fillPixelGrid();

2
js/pixel-editor.js
View File

@@ -4,8 +4,6 @@
//=include util/onClick.js //=include util/onClick.js
//=include util/onClickChildren.js //=include util/onClickChildren.js
//=include util/select.js //=include util/select.js
//=include util/getSetText.js
//=include util/getSetValue.js
//=include util/hexToRgb.js //=include util/hexToRgb.js
//=include util/rgbToHex.js //=include util/rgbToHex.js
//=include util/rgbToHsl.js //=include util/rgbToHsl.js

10
js/util/getSetText.js
View File

@@ -1,10 +0,0 @@
//get text of specified element
function getText(elementId) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
return element.textContent;
}
function setText(elementId, text) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.textContent = text;
}

12
js/util/getSetValue.js
View File

@@ -1,12 +0,0 @@
function getValue(elementId) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
console.log("setting: " + elementId + ": " + element.value);
return element.value;
}
function setValue(elementId, value) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.value = value;
}