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

Fixed #48 and #47

Browse Source
This commit is contained in:
Nicola 2021-12-12 18:37:16 +01:00
parent 1bac62be4c
commit be852d9aae
8 changed files with 109 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.js
View File

@ -21,6 +21,8 @@ function copy_images(){
gulp.src('./images/Splash images/*.png').pipe(gulp.dest(BUILDDIR));
// Logs images
gulp.src('./images/Logs/*.gif').pipe(gulp.dest(BUILDDIR));
// Logs images
gulp.src('./images/Logs/*.png').pipe(gulp.dest(BUILDDIR));
}
function copy_logs() {

BIN
images/Logs/grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

6
js/ColorPicker.js
View File

@ -354,7 +354,7 @@ const ColorPicker = (() => {
function movePickerIcon(event) {
event.preventDefault();
if (event.which == 1 || draggingCursor) {
if (event.buttons == 1 || draggingCursor) {
let cursorPos = getCursorPosMinipicker(event);
let canvasRect = miniPickerCanvas.getBoundingClientRect();
@ -507,6 +507,10 @@ const ColorPicker = (() => {
styles[1] += "background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, " +
"rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",1) 100%);}";
styles[1] += "input[type=range]#cp-minipicker-slider::-moz-range-track { background: rgb(2,0,36);";
styles[1] += "background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, " +
"rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",1) 100%);}";
updateMiniPickerSpectrum();
updateStyles();
}

4
js/PaletteBlock.js
View File

@ -141,11 +141,11 @@ const PaletteBlock = (() => {
* @param {*} mouseEvent
*/
function updateRampSelection(mouseEvent) {
if (mouseEvent != null && mouseEvent.which == 3) {
if (mouseEvent != null && mouseEvent.buttons == 2) {
currentSelection.endIndex = getElementIndex(mouseEvent.target);
}
if (mouseEvent == null || mouseEvent.which == 3) {
if (mouseEvent == null || mouseEvent.buttons == 2) {
let startCoords = getColourCoordinates(currentSelection.startIndex);
let endCoords = getColourCoordinates(currentSelection.endIndex);

9
js/ToolManager.js
View File

@ -24,7 +24,7 @@ const ToolManager = (() => {
Events.on("mouseup", window, onMouseUp);
Events.on("mousemove", window, onMouseMove);
Events.on("mousedown", window, onMouseDown);
Events.on("mousewheel", window, onMouseWheel);
Events.on("wheel", window, onMouseWheel);
// Bind tool shortcuts
Events.onCustom("tool-shortcut", onShortcut);
@ -36,6 +36,7 @@ const ToolManager = (() => {
}
function onMouseWheel(mouseEvent) {
console.log("MOUSE WHEEL");
if (!EditorState.documentCreated || Dialogue.isOpen())
return;
@ -82,7 +83,7 @@ const ToolManager = (() => {
currTool.onHover(mousePos, mouseEvent.target);
if (Input.isDragging()) {
switch (mouseEvent.which) {
switch (mouseEvent.buttons) {
case 1:
if (Input.isSpacePressed()) {
tools["pan"].onDrag(mousePos, mouseEvent.target);
@ -94,10 +95,10 @@ const ToolManager = (() => {
currTool.onDrag(mousePos, mouseEvent.target);
}
break;
case 2:
case 4:
tools["pan"].onDrag(mousePos, mouseEvent.target);
break;
case 3:
case 2:
currTool.onRightDrag(mousePos, mouseEvent.target);
break;
default:

1
views/compatibility-warning.hbs
View File

@ -12,4 +12,3 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bowser@2.11.0/es5.min.js"></script>
<script src="/pixel-editor/checkCompatibilityPixelEditor.js"></script>

84
views/latestLog.hbs
View File

@ -1,65 +1,39 @@
Hello there, welcome to the latest version of the Lospec Pixel Editor. As you can see, we changed
quite a lot of things. Let's go through all them, starting from this page.
Hi! Welcome to the latest version of the Pixel Editor. It's been quite a while! Most of the changes happened behind
the scenes: we worked very hard to refactor the code, make it a bit more modern and scalable so that contributions will,
hopefully, be easier to make.</br></br>
We have some good news for users as well!
<h2>Splash page</h2>
<h2>Pixel Grid</h2>
The editor now has a splash page! Besides a fancy cover image with beautiful art, on the bottom
left of the page you'll be able to create a new custom pixel. You can also use the quickstart
menu to quickly select a preset or load an existing file. It was designed by <a href="https://twitter.com/skeddles">Skeddles</a> himself!
I've worked a bit on the pixel grid to make it look a bit better and less intrusive when zooming in. You can see the
difference in behaviour between the new grid (left) and the old grid (right) in the image below.
<img src="/pixel-editor/grid.png"/>
In addition, the pixel grid will now automatically be hidden when the zoom level becomes too low: in that way looking at big
sprites becomes a lot less performance-heavy and it doesn't cause lag.
<img src="/pixel-editor/splash.gif"/>
<h2>Quality of life</h2>
<strong>Pro tip: </strong> once you've created a new project, you can go back to the splash page
by clicking on <strong>Editor -> Splash page</strong>
<h2>Canvas resizing</h2>
We implemented canvas resizing! If you wanted to draw a t-rex but created a 4x4 canvas, we've got you covered!
You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size of the project. Same goes if you
drew an ant on a 1024x1024 canvas, just go to <strong>Edit -> Resize canvas</strong> and decrease
the dimensions.
<img src="/pixel-editor/resize-canvas.gif"/>
<h2>Sprite scaling</h2>
In addition to the <a href="https://www.lospec.com/pixel-art-scaler">Lospec Pixel Art Scaler</a>,
you can now take advantage of the editor's built-in scaling function. Just click on <strong>Edit -> Scale sprite</strong>
to scale up or down your work. With the nearest-neighbour algorithm you'll be able to scale sprites
in a pixel-perfect manner, while with bilinear interpolation it's possible to add (or remove, if you're scaling
down a sprite) antialiasing.
<img src="/pixel-editor/scale-sprite.gif"/>
<h2>Line tool</h2>
Our contributor <a href="https://github.com/liamortiz">Liam</a> added a new line tool! Quality of
life improvement are planned for it, the rectangle and the rectangular selection tools.
<img src="/pixel-editor/line-tool.gif"/>
<h2>Advanced mode: colour picker and palette block</h2>
If you're a proud user of the advanced mode, you'll be able to try out the new colour picker: it
supports 3 colour models, 6 colour harmonies and multiple ways to input data. Next to it,
you'll find the new palette block, which lets you arrange your colours however you want, add and
remove multiple colours at once. Changes made in the palette block will update the palette list
you've always been familiar with.
<img src="/pixel-editor/palette-block.gif"/>
<h2>Other changes:</h2>
I've added some quality of life improvements, sometimes subtle (maybe you won't notice but you'd have definitely noticed
the absence of them), sometimes a bit more noticeable. For example:
<ul>
<li>You can now move colours in the palette menu</li>
<li>Use <strong>View -> Pixel grid</strong> to show the pixel grid</li>
<li>Fixed a bunch of bugs, made the brush preview pixel perfect</li>
<li>Added <strong>Layer -> Duplicate</strong> to duplicate a layer</li>
<li>Quality of life development improvements by <a href="https://github.com/nkoder">Nkoder</a> and <a href="https://github.com/JulianWebb">Pongles</a></a></li>
<li>Canvas trimming to get rid of all the extra space you have in your sprite</li>
<li>It's now possible to delete a layer by selecting it and hitting "DEL"</li>
<li>When adding a colour to the palette, it is automatically selected</li>
<li>Thanks to <a href="https://github.com/NSSure">NSSure</a>, you can now select a name for your exported / saved project</li>
<li>The brush preview should now be less intrusive while still being visible</li>
</ul>
<h2>That's all folks!</h2>
That's all for this update! Hope you have fun with this new release :) </br>
<h2> Important bug fixes</h2>
A lot of nasty bugs have been fixed! Please, if you know more we aren't aware of, <a href="https://github.com/lospec/pixel-editor">
feel free to open an issue or make a pull request.</a>
<ul>
<li>Fixed the bug that caused file corruptions</li>
<li>Fixed fill tool not working and creating hundreds of similar colours in certain browsers</li>
<li>Fixed the build procedure for Windows</li>
<li>Fixed the editor ignoring the scale factor when exporting</li>
</ul>
<h2>End of log</h2>
That's all for this update! We have some cool things planned for the near future, so stay tuned :)</br>
- <a href="https://github.com/unsettledgames">Unsettled</a>
</br></br>
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch!

65
views/logs/splash-update.hbs Normal file
View File

@ -0,0 +1,65 @@
Hello there, welcome to the latest version of the Lospec Pixel Editor. As you can see, we changed
quite a lot of things. Let's go through all them, starting from this page.
<h2>Splash page</h2>
The editor now has a splash page! Besides a fancy cover image with beautiful art, on the bottom
left of the page you'll be able to create a new custom pixel. You can also use the quickstart
menu to quickly select a preset or load an existing file. It was designed by <a href="https://twitter.com/skeddles">Skeddles</a> himself!
<img src="/pixel-editor/splash.gif"/>
<strong>Pro tip: </strong> once you've created a new project, you can go back to the splash page
by clicking on <strong>Editor -> Splash page</strong>
<h2>Canvas resizing</h2>
We implemented canvas resizing! If you wanted to draw a t-rex but created a 4x4 canvas, we've got you covered!
You can now click on <strong>Edit -> Resize canvas</strong> to decrease the size of the project. Same goes if you
drew an ant on a 1024x1024 canvas, just go to <strong>Edit -> Resize canvas</strong> and decrease
the dimensions.
<img src="/pixel-editor/resize-canvas.gif"/>
<h2>Sprite scaling</h2>
In addition to the <a href="https://www.lospec.com/pixel-art-scaler">Lospec Pixel Art Scaler</a>,
you can now take advantage of the editor's built-in scaling function. Just click on <strong>Edit -> Scale sprite</strong>
to scale up or down your work. With the nearest-neighbour algorithm you'll be able to scale sprites
in a pixel-perfect manner, while with bilinear interpolation it's possible to add (or remove, if you're scaling
down a sprite) antialiasing.
<img src="/pixel-editor/scale-sprite.gif"/>
<h2>Line tool</h2>
Our contributor <a href="https://github.com/liamortiz">Liam</a> added a new line tool! Quality of
life improvement are planned for it, the rectangle and the rectangular selection tools.
<img src="/pixel-editor/line-tool.gif"/>
<h2>Advanced mode: colour picker and palette block</h2>
If you're a proud user of the advanced mode, you'll be able to try out the new colour picker: it
supports 3 colour models, 6 colour harmonies and multiple ways to input data. Next to it,
you'll find the new palette block, which lets you arrange your colours however you want, add and
remove multiple colours at once. Changes made in the palette block will update the palette list
you've always been familiar with.
<img src="/pixel-editor/palette-block.gif"/>
<h2>Other changes:</h2>
<ul>
<li>You can now move colours in the palette menu</li>
<li>Use <strong>View -> Pixel grid</strong> to show the pixel grid</li>
<li>Fixed a bunch of bugs, made the brush preview pixel perfect</li>
<li>Added <strong>Layer -> Duplicate</strong> to duplicate a layer</li>
<li>Quality of life development improvements by <a href="https://github.com/nkoder">Nkoder</a> and <a href="https://github.com/JulianWebb">Pongles</a></a></li>
<li>Canvas trimming to get rid of all the extra space you have in your sprite</li>
</ul>
<h2>That's all folks!</h2>
That's all for this update! Hope you have fun with this new release :) </br>
- <a href="https://github.com/unsettledgames">Unsettled</a>
</br></br>
P.S.: we're always looking for contributors! Join the <a href="https://discord.com/invite/QjsgTQM">Lospec discord</a> to get in touch!