Uploading for review for shape tool #1086
Conversation
| this.ctx.restore(); | ||
| } | ||
|
|
||
|
|
| let [selectX, selectY] = this.imageCoordToCanvasCoord(this.selectX, this.selectY); | ||
| this.drawSelectionBox(selectX, selectY, this.selectWidth * this.zoomLevel, this.selectHeight * this.zoomLevel, this.uiColor, 8 * this.zoomLevel, 0); | ||
| } | ||
|
|
There was a problem hiding this comment.
shouldn't have blank lines here
|
|
||
| if (this.tools.shape && this.tools.shape.shapes) { | ||
| for (let shape of this.tools.shape.shapes) { | ||
| this.tools.shape.drawShape(shape); |
There was a problem hiding this comment.
Shapes should either direct draw, or act as sub-layers on a layer. Doesn't really make sense to render in the main function here like this
| } | ||
|
|
||
| onMouseUp(e) { | ||
| if (this.isDrawing && (this.shape === 'rectangle' || this.shape === 'circle')) { |
There was a problem hiding this comment.
== not ===, but also why is this check here at all?
|
|
||
| // Only add if there's actual size | ||
| if (Math.abs(this.currentX - this.startX) > 1 || Math.abs(this.currentY - this.startY) > 1) { | ||
| this.shapes.push({ |
| let w = shape.width * zoom; | ||
| let h = shape.height * zoom; | ||
| ctx.rect(x, y, w, h); | ||
| } else if (shape.type === 'circle') { |
last commit for tonight lol too tired
|
alright i updated it quite a lot, i think i got all the errors and wonky formatting??? using a sub layer now, removed the check it was for accidental clicks but really if it's inside the canvas we don't need that and outside the canvas doesn't matter I can imagine there is more work to be done but for now, it's late. |
| this.startY = 0; | ||
| this.currentX = 0; | ||
| this.currentY = 0; | ||
| this.shapes = []; // Track shapes for undo functionality |
| this.currentX = 0; | ||
| this.currentY = 0; | ||
| this.shapes = []; // Track shapes for undo functionality | ||
| this.shapesLayer = null; // Sub-layer for storing shapes |
There was a problem hiding this comment.
A tool is not associated with any layer, it applies to whichever layer is currently active
|
Alright, let's do this again. Revamped the complete shape tool, now saves to active layer, multiple draw, saves in the output image file, shouldn't add any code and only uses what is already there unless needed... I hope... |
| if (this.shape === 'rectangle') { | ||
| let [x, y] = this.editor.imageCoordToCanvasCoord(Math.min(this.startX, this.currentX), Math.min(this.startY, this.currentY)); | ||
| let [w, h] = [Math.abs(this.currentX - this.startX) * this.editor.zoomLevel, Math.abs(this.currentY - this.startY) * this.editor.zoomLevel]; | ||
| this.editor.ctx.rect(x, y, w, h); |
There was a problem hiding this comment.
I see at least 3x copies of this same core shape drawing code -- it should probably be unified to a single function that gets called from the different places, drawShapeToCanvas looks like the most generalized
| } | ||
|
|
||
| onMouseDown(e) { | ||
| if (e.button !== 0 && e.button !== undefined) { |
There was a problem hiding this comment.
if (e.button != 0) { is all you need here
| if (this.isDrawing) { | ||
| this.finishDrawing(); | ||
| } | ||
| this.editor.updateMousePosFrom(e); |
There was a problem hiding this comment.
I'm pretty sure this is redundant
| this.drawShape(); | ||
| return true; | ||
| } | ||
| return false; |
There was a problem hiding this comment.
i don't think these functions have return values
|
That's what I got for now, it works beautifully just let me know what needs cleaned up, redundancies.. .all the crap I screwed up, the usual |
|
I did some testing. Mostly looks good. I pushed fixes to the basic format stuff (ie the comments I left previously). There is an issue that needs deeper investigation though: it looks like the wrong coordinate space is being used for making the shape? Not sure if that's it, but see here, gif of me creating a rectangle while zoomed all the way in:
As you can see, I can move the rectangle more precisely than the actual underlying pixel space. The current view of the rectangle should be 'snapping' between pixels at this zoom, but instead it's smoothly moving between pixels. You can also see as I go some antialiased pixels fade in/out as I get closer or farther to the pixel - those should be hard lines for the rectangle tool (but antialiased smoothing is probably correct for the circle). |
|
Huh, I tested zoom levels and brush sizes and all that but I guess I must have never done all the way in. Will take a look when I get a chance. |
2 participants
Was a bit me and a bit of help on some stuff from LLM, I've always been honest with that. Just let me know what parts might be out of your standards and I'll do my best to bring them into line.