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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/_canvas.scss
View File

@ -70,7 +70,7 @@
#brush-preview {
position: absolute;
border: solid 1px #fff;
border: solid 2px #fff;
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);
pointer-events: none;

4
js/ColorModule.js
View File

@ -202,4 +202,6 @@ const ColorModule = (() => {
addColor,
AddToSimplePalette
}
})();
})();
console.log("Color module: " + ColorModule);

46
js/_createButton.js
View File

@ -5,8 +5,8 @@ function create(isSplash) {
splashPostfix = '-splash';
}
var width = getValue('size-width' + splashPostfix);
var height = getValue('size-height' + splashPostfix);
var width = Util.getValue('size-width' + splashPostfix);
var height = Util.getValue('size-height' + splashPostfix);
// If I'm creating from the splash screen, I use the splashMode variable
var mode = isSplash ? splashMode : pixelEditorMode;
@ -18,7 +18,7 @@ function create(isSplash) {
document.getElementById('new-pixel-warning').style.display = 'block';
//get selected palette name
var selectedPalette = getText('palette-button' + splashPostfix);
var selectedPalette = Util.getText('palette-button' + splashPostfix);
if (selectedPalette == 'Choose a palette...')
selectedPalette = 'none';
@ -27,27 +27,31 @@ function create(isSplash) {
//reset new form
setValue('size-width', 64);
setValue('size-height', 64);
Util.setValue('size-width', 64);
Util.setValue('size-height', 64);
setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...');
Util.setText('palette-button', 'Choose a palette...');
Util.setText('preset-button', 'Choose a preset...');
}
/** Triggered when the "Create" button in the new pixel dialogue is pressed
*
*/
on('click', 'create-button', function (){
console.log("Here");
// Getting the values of the form
var width = getValue('size-width');
var height = getValue('size-height');
var width = Util.getValue('size-width');
var height = Util.getValue('size-height');
// 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';
//get selected palette name
var selectedPalette = getText('palette-button');
var selectedPalette = Util.getText('palette-button');
if (selectedPalette == 'Choose a palette...')
selectedPalette = 'none';
@ -56,11 +60,11 @@ on('click', 'create-button', function (){
//reset new form
setValue('size-width', 64);
setValue('size-height', 64);
Util.setValue('size-width', 64);
Util.setValue('size-height', 64);
setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...');
Util.setText('palette-button', 'Choose a palette...');
Util.setText('preset-button', 'Choose a preset...');
});
/** 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 (){
// Getting the values of the form
var width = getValue('size-width-splash');
var height = getValue('size-height-splash');
var width = Util.getValue('size-width-splash');
var height = Util.getValue('size-height-splash');
var mode = pixelEditorMode;
if (mode == 'Advanced')
@ -88,9 +92,9 @@ on('click', 'create-button-splash', function (){
selectedPalette = 'none';
//reset new pixel form
setValue('size-width-splash', 64);
setValue('size-height-splash', 64);
Util.setValue('size-width-splash', 64);
Util.setValue('size-height-splash', 64);
setText('palette-button', 'Choose a palette...');
setText('preset-button', 'Choose a preset...');
Util.setText('palette-button', 'Choose a palette...');
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;
case 'Save project':
//create name
var selectedPalette = getText('palette-button');
var selectedPalette = Util.getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe';
@ -69,7 +69,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
case 'Export':
if (documentCreated) {
//create name
var selectedPalette = getText('palette-button');
var selectedPalette = Util.getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
@ -167,7 +167,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
//Help Menu
case 'Settings':
//fill form with current settings values
setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
Util.setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
showDialogue('settings');
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
palettes['Loaded palette'] = {};
palettes['Loaded palette'].colors = colorPalette;
setText('palette-button', 'Loaded palette');
setText('palette-button-splash', 'Loaded palette');
Util.setText('palette-button', 'Loaded palette');
Util.setText('palette-button-splash', 'Loaded palette');
toggle('palette-menu-splash');
};
img.src = e.target.result;

2
js/_mouseEvents.js
View File

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

4
js/_newPixel.js
View File

@ -97,9 +97,9 @@ function newPixel (width, height, editorMode, fileContent = null) {
//add colors from selected palette
var selectedPalette;
if (!firstPixel)
var selectedPalette = getText('palette-button');
var selectedPalette = Util.getText('palette-button');
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 (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 = () => {
//hide the dropdown menu
Util.deselect('palette-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu-splash');
Util.deselect('palette-button-splash');
deselect('palette-menu');
deselect('palette-button');
deselect('palette-menu-splash');
deselect('palette-button-splash');
//show empty palette option
noPaletteButton.style.display = 'block';
@ -115,15 +115,15 @@ palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"",
document.getElementById('load-palette-browse-holder').click();
}
const clickPaletteButtonEvent = (e) => {
Util.toggle('palette-button');
Util.toggle('palette-menu');
toggle('palette-button');
toggle('palette-menu');
Util.deselect('preset-button');
Util.deselect('preset-menu');
deselect('preset-button');
deselect('preset-menu');
// Splash version
Util.toggle('palette-button-splash');
Util.toggle('palette-menu-splash');
toggle('palette-button-splash');
toggle('palette-menu-splash');
e.stopPropagation();
}
@ -141,13 +141,13 @@ palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"",
})
newPixelElement.addEventListener('click', () => {
Util.deselect('preset-button');
Util.deselect('preset-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu');
deselect('preset-button');
deselect('preset-menu');
deselect('palette-button');
deselect('palette-menu');
// Splash version
Util.deselect('palette-button-splash');
Util.deselect('palette-menu-splash');
deselect('palette-button-splash');
deselect('palette-menu-splash');
})
})();

8
js/_presets.js
View File

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

6
js/_settings.js
View File

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

2
js/pixel-editor.js
View File

@ -4,8 +4,6 @@
//=include util/onClick.js
//=include util/onClickChildren.js
//=include util/select.js
//=include util/getSetText.js
//=include util/getSetValue.js
//=include util/hexToRgb.js
//=include util/rgbToHex.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;
}