diff --git a/build.js b/build.js index b4b45a9..5b4b4d0 100644 --- a/build.js +++ b/build.js @@ -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() { diff --git a/images/Logs/grid.png b/images/Logs/grid.png new file mode 100644 index 0000000..b13f584 Binary files /dev/null and b/images/Logs/grid.png differ diff --git a/js/ColorPicker.js b/js/ColorPicker.js index 4fb951b..5f971a1 100644 --- a/js/ColorPicker.js +++ b/js/ColorPicker.js @@ -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(); } diff --git a/js/PaletteBlock.js b/js/PaletteBlock.js index c62e7be..3035e43 100644 --- a/js/PaletteBlock.js +++ b/js/PaletteBlock.js @@ -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); diff --git a/js/ToolManager.js b/js/ToolManager.js index 3177956..99a8dcc 100644 --- a/js/ToolManager.js +++ b/js/ToolManager.js @@ -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: diff --git a/views/compatibility-warning.hbs b/views/compatibility-warning.hbs index 29b7d78..02b002d 100644 --- a/views/compatibility-warning.hbs +++ b/views/compatibility-warning.hbs @@ -11,5 +11,4 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/views/latestLog.hbs b/views/latestLog.hbs index 6cdd02a..8c45377 100644 --- a/views/latestLog.hbs +++ b/views/latestLog.hbs @@ -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.

+We have some good news for users as well! -

Splash page

+

Pixel Grid

-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 Skeddles 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. + +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. - +

Quality of life

-Pro tip: once you've created a new project, you can go back to the splash page -by clicking on Editor -> Splash page - -

Canvas resizing

- -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 Edit -> Resize canvas to decrease the size of the project. Same goes if you -drew an ant on a 1024x1024 canvas, just go to Edit -> Resize canvas and decrease -the dimensions. - - - -

Sprite scaling

- -In addition to the Lospec Pixel Art Scaler, -you can now take advantage of the editor's built-in scaling function. Just click on Edit -> Scale sprite -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. - - - -

Line tool

- -Our contributor Liam added a new line tool! Quality of -life improvement are planned for it, the rectangle and the rectangular selection tools. - - - -

Advanced mode: colour picker and palette block

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

Other changes:

+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: -

That's all folks!

-That's all for this update! Hope you have fun with this new release :)
+

Important bug fixes

+A lot of nasty bugs have been fixed! Please, if you know more we aren't aware of, +feel free to open an issue or make a pull request. + + +

End of log

+That's all for this update! We have some cool things planned for the near future, so stay tuned :)
- Unsettled

P.S.: we're always looking for contributors! Join the Lospec discord to get in touch! \ No newline at end of file diff --git a/views/logs/splash-update.hbs b/views/logs/splash-update.hbs new file mode 100644 index 0000000..6cdd02a --- /dev/null +++ b/views/logs/splash-update.hbs @@ -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. + +

Splash page

+ +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 Skeddles himself! + + + +Pro tip: once you've created a new project, you can go back to the splash page +by clicking on Editor -> Splash page + +

Canvas resizing

+ +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 Edit -> Resize canvas to decrease the size of the project. Same goes if you +drew an ant on a 1024x1024 canvas, just go to Edit -> Resize canvas and decrease +the dimensions. + + + +

Sprite scaling

+ +In addition to the Lospec Pixel Art Scaler, +you can now take advantage of the editor's built-in scaling function. Just click on Edit -> Scale sprite +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. + + + +

Line tool

+ +Our contributor Liam added a new line tool! Quality of +life improvement are planned for it, the rectangle and the rectangular selection tools. + + + +

Advanced mode: colour picker and palette block

+ +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. + + + +

Other changes:

+ + +

That's all folks!

+That's all for this update! Hope you have fun with this new release :)
+- Unsettled +

+P.S.: we're always looking for contributors! Join the Lospec discord to get in touch! \ No newline at end of file