From be852d9aae95ae2bbc022eee7ca342ded8485bb2 Mon Sep 17 00:00:00 2001 From: Nicola <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 12 Dec 2021 18:37:16 +0100 Subject: [PATCH] Fixed #48 and #47 --- build.js | 2 + images/Logs/grid.png | Bin 0 -> 24201 bytes js/ColorPicker.js | 6 ++- js/PaletteBlock.js | 4 +- js/ToolManager.js | 9 ++-- views/compatibility-warning.hbs | 3 +- views/latestLog.hbs | 84 +++++++++++--------------------- views/logs/splash-update.hbs | 65 ++++++++++++++++++++++++ 8 files changed, 109 insertions(+), 64 deletions(-) create mode 100644 images/Logs/grid.png create mode 100644 views/logs/splash-update.hbs 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 0000000000000000000000000000000000000000..b13f584cbb5e570039cc540aec659883a775b495 GIT binary patch literal 24201 zcmeHPQA|@;7`_moP^^+}orc&dSy;Bzm=L!m${f3;8-i01iDeJ9P?ND_F`8j%6X$9u z=t?&9!Ne>^X>dk|rnL_yvltn5M4#xENJiKMNnDy$q&VYhN87t|ZoQY5%?nKyL(KQk za7)^A|DK$C{_lMM|9#H7?NthSv7BKTMfDbaJ;UUv87BK$em42fx=7vkeU*-J z53l}%yvb={x3LW4JysZN&L!^)_HX&9m0^?z=qqdd<25#h*{!M8vkkW055~&+_OhoO zEdl%b?q!-v*|ys69`w|IJLb1W*VYVb&lCpzE2{^4o47R{MY{Zwj-o$L#==}8%ssTn zd$>q6z|G1u=FZ$pmk+DXl)pqj!)eAn377dLT^w=JjlL_VqerKIhvJd4_VlUy2XhGos-_@8$j zvi#(7w@zskp-n$_|Lk&CPOVae{+5TkN@xgVyw;ZXTCZn$@oh`@owKa*=x7LZc$l22K~eJ9K>$iDF~hF(Dv6wnLq% zKWOm$s6j>ox;ZTbl#IFP0?)Fg`4 z{Z&Fhd~DbK{pNf+qq&!6e*5O`&Z&!zJWLiQ3oC1GU%_LDJu5AzV1q|C1ats&0M6o3 zGC*naNC5q4% zJBu1`@O&&{kFOX5!vi`DbXW@23OWpQ80aui_^5ZFIE3O5vLUh|vLUh|vLUh|vf=a2 zhS{VO=-$MQ)UK7ogx!fo(t2Xn5*jG6Ij!S{kW9zzD^mM;o;g%3Xk=+m61kPVAS~zm zlXSOCH^Q!z4xS9gOAGDE2`=H`*i+~bLOT`T+Xk`?WE;pfmm6J;C?KPNi~=$W$S5F- z1?1;_yg-kCQg8uK3Q!7A3Q+n~Gxg%=lAcNWq>(gBg+IExGch}mknM#A41&3*f<}l> zAU=Wk1mcsWC_brahTgq4h)_EzKV4 zEnJtecOj{^Gn7#E>m5Gn#ibmHYulW87HLdW+Ba*MQZ6JR$ApREc1)P)QGgXDx+ma~ z6n!1AhY9u^*z`r?5M)Ww(gd(Vbfy8USbDHxQ4+NOurSI%9T%(+nw9dSTWtnT*M?@PB zi350PU%B89hzY}lQHx1Zk--WRohb20Qo~Y;!?1^mR;SqXdCyvk!;mFKFI~V2YFo_X zFu)4Ye;7C{>0G@SSneUZq4+#o1aJVVpkuy`snY=nCzj zq9QqNVp5RPML$hprGznvSCch2skXc4!AD=r8Q2${;No`X%GXZyuf~h#h { 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:
    -
  • You can now move colours in the palette menu
    • -
  • Use View -> Pixel grid to show the pixel grid
    • -
  • Fixed a bunch of bugs, made the brush preview pixel perfect
    • -
  • Added Layer -> Duplicate to duplicate a layer
    • -
  • Quality of life development improvements by Nkoder and Pongles
    • -
  • Canvas trimming to get rid of all the extra space you have in your sprite
    • +
  • It's now possible to delete a layer by selecting it and hitting "DEL"
    • +
  • When adding a colour to the palette, it is automatically selected
    • +
  • Thanks to NSSure, you can now select a name for your exported / saved project
    • +
  • The brush preview should now be less intrusive while still being visible
-

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. +
    +
  • Fixed the bug that caused file corruptions
    • +
  • Fixed fill tool not working and creating hundreds of similar colours in certain browsers
    • +
  • Fixed the build procedure for Windows
    • +
  • Fixed the editor ignoring the scale factor when exporting
    • +
+ +

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:

+
    +
  • You can now move colours in the palette menu
    • +
  • Use View -> Pixel grid to show the pixel grid
    • +
  • Fixed a bunch of bugs, made the brush preview pixel perfect
    • +
  • Added Layer -> Duplicate to duplicate a layer
    • +
  • Quality of life development improvements by Nkoder and Pongles
    • +
  • Canvas trimming to get rid of all the extra space you have in your sprite
    • +
+ +

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