Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clickable inputs & Ovals fixed #316

Closed
wants to merge 2 commits into from
Closed

Clickable inputs & Ovals fixed #316

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7eea310
Clickable inputs
OscarCasadoLorenzo Feb 4, 2023
27f6612
Ovals aliasing algorithm fixed
OscarCasadoLorenzo Feb 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/image-manipulation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const fill_threshold = 1; // 1 is just enough for a workaround for Brave browser's farbling: https://github.com/1j01/jspaint/issues/184
const MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING = 2; //1 is the default stroke line value, so it should be ignored from anti-aliasing

function get_brush_canvas_size(brush_size, brush_shape) {
// brush_shape optional, only matters if it's circle
Expand Down Expand Up @@ -43,7 +44,7 @@ function draw_ellipse(ctx, x, y, w, h, stroke, fill) {
const center_x = x + w / 2;
const center_y = y + h / 2;

if (aliasing) {
if (aliasing && stroke > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING) {
const points = [];
const step = 0.05;
for (let theta = 0; theta < TAU; theta += step) {
Expand All @@ -63,7 +64,7 @@ function draw_ellipse(ctx, x, y, w, h, stroke, fill) {

function draw_rounded_rectangle(ctx, x, y, width, height, radius_x, radius_y, stroke, fill) {

if (aliasing) {
if (aliasing && stroke > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING) {
const points = [];
const lineTo = (x, y) => {
points.push({ x, y });
Expand Down Expand Up @@ -189,14 +190,14 @@ $G.on("invalidate-brush-canvases", () => {
let line_brush_canvas;
// USAGE NOTE: must be called outside of any other usage of op_canvas (because of render_brush)
function update_brush_for_drawing_lines(stroke_size) {
if (aliasing && stroke_size > 1) {
if (aliasing && stroke_size > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING) {
line_brush_canvas = get_brush_canvas("circle", stroke_size);
}
}

function draw_line_without_pattern_support(ctx, x1, y1, x2, y2, stroke_size = 1) {
if (aliasing) {
if (stroke_size > 1) {
if (stroke_size > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING) {
bresenham_line(x1, y1, x2, y2, (x, y) => {
ctx.drawImage(line_brush_canvas, ~~(x - line_brush_canvas.width / 2), ~~(y - line_brush_canvas.height / 2));
});
Expand Down Expand Up @@ -1207,7 +1208,7 @@ function draw_grid(ctx, scale) {
// otherwise update_brush_for_drawing_lines calls render_brush calls draw_ellipse calls draw_polygon calls draw_polygon_or_line_strip
// trying to use the same op_canvas
// (also, avoiding infinite recursion by checking for stroke; assuming brushes will never have outlines)
if (stroke && stroke_size > 1) {
if (stroke && stroke > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING) {
update_brush_for_drawing_lines(stroke_size);
}

Expand Down Expand Up @@ -1262,7 +1263,7 @@ function draw_grid(ctx, scale) {
ctx.drawImage(op_canvas_2d, x_min, y_min);
}
if (stroke) {
if (stroke_size > 1) {
if (stroke > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING) {
const stroke_margin = ~~(stroke_size * 1.1);

const op_canvas_x = x_min - stroke_margin;
Expand Down
5 changes: 5 additions & 0 deletions styles/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1137,3 +1137,8 @@ summary {
user-select: none;
cursor: pointer;
}
input[type="radio"], input[type="checkbox"]{
appearance: auto !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
}