lospec / pixel-editor Goto Github PK

After opening a .lpe file, it looks like the pan speed is not adjusted, probably because of some kind of problem in the zoom reset triggered by the open button.

Contact the owner of the repo before starting to work on this

• Use a more object oriented approach
• Avoid frameworks, for now, unless there's a valid reason to use them
• Remove as many global variables as possible
• If possible, keep and reuse the current implementations of features
• Keep the code accessible by contributors
• Refactor the CSS
• Programmatically generate similar objects (tools entry in the tool menu)
• Write a scheme, discuss it and publish it in the repo before actually starting to rework the code

I've been using the Pixel Editor to change the palette of Game Boy Camera photos I take. Sometime in the last several months, any black in the image (#000000) becomes transparent when exporting as a .png, meaning I have to change any blacks to slightly off-black. I feel I didn't used to have to do that..

not sure if it's just me or what, but I tried uploading a slightly large PNG as a palette, and the site is not loading for me now. I'm so sorry if I caused that! I just didn't totally understand the load palette function.

Thank you for lospec, i love it!

Let users open a png image into a new layer. If the file is bigger than the current canvas, the user will have to choose between expanding the canvas or scaling the imported image.

When exporting a pixel image in Chrome/Windows, the image instantly goes to my Downloads folder with its own templated "pixel-dimensions date etc." filename. It would be wonderful if I could choose the directory I was saving the image to, and to give it a custom filename as well.

When the user hovers on a tool, a div containing instructions about its use and shortcuts appears.

Probably because sometimes the currently selected colour is null. After selecting a colour it fills the entire canvas.

• Filling with black doesn't work
• Filling a black area completely ignores the boundaries

Single, static reference layer: the user can draw over it (could take the place of the checkerboard when used)
Multiple reference images
The user can drag them around the canvas
The user can resize them to a certain extent
When placed on the canvas, the reference image is exactly below the current layer, so that the user can always see the image and draw over it

Axis locking for rect and line tool (lock line tool to 30, 45, 60 degrees)
Let the user use the rect and the rect selection to draw or select squares
Let the user lock an axis when moving a selection, so that it only moves vertically or horizontally

OS: Windows 10
Browser: Chrome, Edge
Thanks in advance

At the moment, pressing the mouse wheel also makes the app draw a brush stroke that is not undoable.

Related: if the user zooms and creates a layer, the brush has the same behaviour.

• The app already has comments, they could be improved in some parts, where necessary
• The docs should accurately describe the structure of the code and help contributors understand where to put their hands, giving info about all the components of the app

The limits for where the canvas can be dragged on screen do not take into account the new layers panel, so the canvas can get lost underneath it, and is not perfectly centered when first created.

Single, static reference layer: the user can draw over it (could take the place of the checkerboard when used)

Since the pixel grid is quite performance-heavy, it might be nice to update it everytime the user pans but only drawing the grid in the current viewport.

Implement new ways to select a section of a sprite, such as a lasso tool and a magic wand tool.

Only happens when selecting a palette. In addition, instead of the checkerboard, a colour that is not even in the palette is used as a background colour.

Let the user define a group of layers they can lock, move, hide (...) at once.

Make the local app automatically update every time the code changes: this would speed up the development process

Have a way for people to have grids to use, it would help out in ways like spritesheet editing or creating structures

• Axis locking for rect and line tool (lock line tool to 30, 45, 60 degrees)
• Let the user use the rect and the rect selection to draw or select squares
• Let the user lock an axis when moving a selection, so that it only moves vertically or horizontally

I'm seeing this error on trying to create a new drawing. I love lospec! Thanks for an awesome app!

pixel-editor.js:1 Uncaught TypeError: Cannot read property 'specified' of undefined
    at newPixel (pixel-editor.js:1)
    at pixel-editor.js:1
    at HTMLButtonElement.<anonymous> (pixel-editor.js:1)

it makes everyone sad

upon turning a color to black in the pixel art editor, it shows as black, but will draw like it is the background color. switching the color does not fix it.

originally opened by Landon Britt on https://bitbucket.org/skeddles/lospec/issues/33/switching-a-color-to-black-makes-the-color

I have hidden my text.
I'm sorry, I wrote issues in the wrong repository.

When deleting a layer, the editor should automatically select another one. However this does not happen and if the user draws while having no selected layer, the currentLayer.canvas variable will not be assigned since it will still point to the destroyed canvas.

Is your feature request related to a problem? Please describe.
I find detecting the position of the mouse pointer when the background grid is activated quite hard.

Describe the solution you'd like
always show the currently selected tool at mouse pointer position. Like you do for fill tool

Additional context
This is how it look with pen tool activated. not visible enough imho.

even harder to read when zoomed in

1. Create an initial 64x64 image and export it. Image is expected correctly as 64 x 64
2. Scale the image up to 320 x 320 and export it. Image is exported correctly as 320 x 320
3. Save the project.
4. Reload the website and load the project.
5. Export the image. Image is expected correctly as 64 x 64
6. Scale the image up to 320 x 320 and export it. Image is exported incorrectly as 64 x 64

Is there any way that Lospec Pixel Editor could support touchscreen? I use a Chromebook, and its a lot easier.

Let 2 or more users share an editor instance to draw together. Discussion below, this comment will contain all the things decided in the discussion.

To discuss:

• Autosave
• Locking layers
• Undo / redo
• How to make rooms
• Backend

Let the user drag a symettry axis (horizontal or vertical) around the canvas, so that brush strokes are mirrored around those axes

Enabling the pixel grid on big files with low levels of zoom makes the editor lag a lot: since at said zoom levels the pixel grid is not visible anyway, hiding the grid when the user zooms out too much should be enough.

Multiple reference images

• The user can drag them around the canvas
• The user can resize them to a certain extent
• When placed on the canvas, the reference image is exactly below the current layer, so that the user can always see the image and draw over it

• This should both be implemented in the wiki of this repo and in a pop up window in the editor
• The docs should accurately describe the behaviour of the editor and illustrate all its features, possibly with examples if necessary

when this feature was written the cursor would stay in place, but some update must have changed it, now the cursor moves around the screen as well as the resizing box, which is weird and confusing

also in firefox alt opens the file menu, so we need a e.preventDefault() somewhere

I love this editor! 🎉 ❤️

I'd like to use this on my phone/tablet... how complex would it be to add events for touch interaction? The editor doesn't work super well there now, for example dragging doesn't seem to work.

This might be multi-part; first looking at event handlers, then perhaps some HTML <meta> tags to control page width, and there are some spots where event.preventDefault() and event.stopPropagation() might help to stop touch events from selecting things on the page or triggering menus or copy/paste operations? Not sure.

Just looking around the code, here are some places that could potentially be starting points to improving touch UI:

Event handlers

(this also includes mouseup, mousemove and such, 4 handlers total in this file)

And this, maybe also related?

If I load a big sprite, I'm basically not able to see it in its entirety