I had to cheat a lot for the editor at its inception:
- added redo/undo
- no fill checkbox
- renamed some variables
- missing call to startDrawing from mouseDown
- rectangle did not work
- free-draw did not work
- filled free draw did not exist
- no triangle
- ...etc etc etc etc
- ...well, technically, almost every line is touched by a human now, but I need an editor to
continue with the game, so... means to an end.
>>> Prompt 1:
Using JS and a 800x600 canvas. I need a simple drawing program with the following:
Buttons to select color/shape can be in plain HTML
- set a current color to 1 of 5 colors
- using mouse, ability to select and then draw a shape:
- ellipse
- rectangle
- line
- free draw
- When creating a shape, and user is moving the mouse, give visual
feedback on what the shape looks like at that moment -- note that you still
need to keep other shapes on canvas when the current shape finishes
- all shapes should be able to be drawn as filled or not filled
- When a new shape is added to canvas, all parameters (including coordinates, color, fill-status)
to create that shape should be printed with console.log().
- Finished shapes should remain on canvas even when new shapes are added That is: don't remove
any shapes from canvas. Not even during 'preview' when you are drawing a shape. Whether you solve
this by drawing all shapes every frame during drawing of a new shape (or with a double-buffer) ... up to you.
- Add serialization and deserialization of the shapes (shapes, not bitmap data), include current color and whether
filled or not. E.g. Serialize shapes like this: { "type" : "rect", "filled": true, "color":"green", "x1" : 1, "y" : 1, "x2" : 100, "y2" : 100 } etc for each shape.
- With serialization/deserialization it should be easy to add infinite undo/redo of canvas changes, so add that
- Obviously, shapes that are created during preview/drawing should not be pushed into undo history nor into
serialization. Only finalized shapes should be there.
- Background is #444
- be brief, less is more, make helper functions for e.g. document.getElementById(), document.querySelector(), etc
name context 'ctx', document 'doc', canvas 'c', color as 'col', and similar short variable names for everything.
- to make it less verbose, just do one event listener for buttons and check which id was clicked and dispatch from there
No external depenencies. Give me full HTML+javascript and no explanation.
>>> Prompt 2:
The following functions draws all drawn shapes on a canvas,
the second half of draw() draws a preview of a current shape being drawn by mouse
movement during mouse button being pressed.
Add a shape for Triangle too -- just give me the new code needed for (no need for full functions):
- existing shapes drawing
- preview shape
- shape done
<<< code for draw/finishDrawing here >>>
>>> Prompt 3:
Given an x and y, I want the smallest shape in 'shapes' that enclose that exact coordinate.
Comparing minX, minY, maxX, maxY is enough, it does not need to be exact area size.
Name the function findSmallestShape(x, y, haystack).
<<< JSON shapes went here >>>
>>> Prompt 4:
Given the above shapes (an example), I want to translate them by an arbitrary x/y offset.
Give me the code -- you don't need to give me the shapes as they're just an example.
The function should be called translateShape(shape, x,y)
>>> Prompt 5:
Given the CSS for that, give me a minimal amount of javascript code to move that div
(already declared variable is called selectionDiv) with the mouse within the boundary
of a DOM element in the variable 'canvas'. Note that the canvas element can be at
an arbitrary position, so you need to use offsets (scroll too). The dragging-point (where
mouse goes down) should remain the same in relation to the div when the div is moved
with the mouse (don't make that dragging point 0,0).
Enclose all the functionality for this in a function called initSelectionDiv()
Give me only the code, no need for extra explanation.