radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up canvas creation 

Don't pretend the canvas making helper is a class
main
Isaiah Odhner 2019-10-29 17:43:46 -04:00
parent ab83621abb
commit 83dd05c1b0
11 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/$ColorBox.js
View File

@ -2,7 +2,7 @@
function $Swatch(color){
const $b = $(E("div")).addClass("swatch");
const swatch_canvas = new Canvas();
const swatch_canvas = make_canvas();
$(swatch_canvas).css({pointerEvents: "none"}).appendTo($b);
$b.update = _color => {

2
src/OnCanvasHelperLayer.js
View File

@ -7,7 +7,7 @@ class OnCanvasHelperLayer extends OnCanvasObject {
pointerEvents: "none",
});
this.position();
this.canvas = new Canvas(this.width * pixelRatio, this.height * pixelRatio);
this.canvas = make_canvas(this.width * pixelRatio, this.height * pixelRatio);
this.$el.append(this.canvas);
}
}

16
src/OnCanvasSelection.js
View File

@ -40,7 +40,7 @@ class OnCanvasSelection extends OnCanvasObject {
// NOTE: need to create a Canvas because something about imgs makes dragging not work with magnification
// (width vs naturalWidth?)
// and at least apply_image_transformation needs it to be a canvas now (and the property name says canvas anyways)
this.source_canvas = new Canvas(_img);
this.source_canvas = make_canvas(_img);
// TODO: is this width/height code needed? probably not! wouldn't it clear the canvas anyways?
// but maybe we should assert in some way that the widths are the same, or resize the selection?
if (this.source_canvas.width !== this.width) {
@ -49,12 +49,12 @@ class OnCanvasSelection extends OnCanvasObject {
if (this.source_canvas.height !== this.height) {
this.source_canvas.height = this.height;
}
this.canvas = new Canvas(this.source_canvas);
this.canvas = make_canvas(this.source_canvas);
}
else {
this.source_canvas = new Canvas(this.width, this.height);
this.source_canvas = make_canvas(this.width, this.height);
this.source_canvas.ctx.drawImage(canvas, this.x, this.y, this.width, this.height, 0, 0, this.width, this.height);
this.canvas = new Canvas(this.source_canvas);
this.canvas = make_canvas(this.source_canvas);
if (!_passive) {
this.cut_out_background();
}
@ -125,7 +125,7 @@ class OnCanvasSelection extends OnCanvasObject {
// if(!transparency){ // now if !transparency or if tool_transparent_mode
// this is mainly in order to support patterns as the background color
// NOTE: must come before cutout canvas is modified
const colored_cutout = new Canvas(cutout);
const colored_cutout = make_canvas(cutout);
replace_colors_with_swatch(colored_cutout.ctx, colors.background, this.x, this.y);
// var colored_cutout_image_data = colored_cutout.ctx.getImageData(0, 0, this.width, this.height);
// }
@ -203,7 +203,7 @@ class OnCanvasSelection extends OnCanvasObject {
// TODO: should Image > Invert apply to this.source_canvas or to this.canvas (replacing this.source_canvas with the result)?
replace_source_canvas(new_source_canvas) {
this.source_canvas = new_source_canvas;
const new_canvas = new Canvas(new_source_canvas);
const new_canvas = make_canvas(new_source_canvas);
$(this.canvas).replaceWith(new_canvas);
this.canvas = new_canvas;
const center_x = this.x + this.width / 2;
@ -228,12 +228,12 @@ class OnCanvasSelection extends OnCanvasObject {
this.update_tool_transparent_mode();
}
resize() {
const new_source_canvas = new Canvas(this.width, this.height);
const new_source_canvas = make_canvas(this.width, this.height);
new_source_canvas.ctx.drawImage(this.source_canvas, 0, 0, this.width, this.height);
this.replace_source_canvas(new_source_canvas);
}
scale(factor) {
const new_source_canvas = new Canvas(this.width * factor, this.height * factor);
const new_source_canvas = make_canvas(this.width * factor, this.height * factor);
new_source_canvas.ctx.drawImage(this.source_canvas, 0, 0, new_source_canvas.width, new_source_canvas.height);
this.replace_source_canvas(new_source_canvas);
}

4
src/app.js
View File

@ -11,7 +11,7 @@ const default_canvas_height = 384;
let my_canvas_width = default_canvas_width;
let my_canvas_height = default_canvas_height;
const canvas = new Canvas();
const canvas = make_canvas();
canvas.classList.add("main-canvas");
const ctx = canvas.ctx;
@ -158,7 +158,7 @@ $canvas.on("user-resized", (e, _x, _y, width, height) => {
const previous_imagedata = undos[undos.length-1];
if(previous_imagedata){
const temp_canvas = new Canvas(previous_imagedata);
const temp_canvas = make_canvas(previous_imagedata);
ctx.drawImage(temp_canvas, 0, 0);
}

2
src/electron-injected.js
View File

@ -147,7 +147,7 @@ window.systemSetAsWallpaperCentered = c => {
if(process.platform === "darwin"){
wallpaperCanvas = c;
}else{
wallpaperCanvas = new Canvas(screen.width, screen.height);
wallpaperCanvas = make_canvas(screen.width, screen.height);
const x = (screen.width - c.width) / 2;
const y = (screen.height - c.height) / 2;
wallpaperCanvas.ctx.drawImage(c, ~~x, ~~y);

4
src/functions.js
View File

@ -791,7 +791,7 @@ function render_history_as_gif(){
$win.center();
});
const gif_canvas = new Canvas(width, height);
const gif_canvas = make_canvas(width, height);
const frames = [...undos, ctx.getImageData(0, 0, canvas.width, canvas.height)];
for(let i=0; i<frames.length; i++){
gif_canvas.ctx.clearRect(0, 0, gif_canvas.width, gif_canvas.height);
@ -1536,7 +1536,7 @@ function set_as_wallpaper_tiled(c){
return window.systemSetAsWallpaperTiled(c);
}
const wallpaperCanvas = new Canvas(screen.width, screen.height);
const wallpaperCanvas = make_canvas(screen.width, screen.height);
const pattern = wallpaperCanvas.ctx.createPattern(c, "repeat");
wallpaperCanvas.ctx.fillStyle = pattern;
wallpaperCanvas.ctx.fillRect(0, 0, wallpaperCanvas.width, wallpaperCanvas.height);

10
src/helpers.js
View File

@ -32,7 +32,7 @@ function E(t){
}
function get_rgba_from_color(color){
const single_pixel_canvas = new Canvas(1, 1);
const single_pixel_canvas = make_canvas(1, 1);
single_pixel_canvas.ctx.fillStyle = color;
single_pixel_canvas.ctx.fillRect(0, 0, 1, 1);
@ -44,7 +44,7 @@ function get_rgba_from_color(color){
return Array.from(image_data.data);
}
function Canvas(width, height){
function make_canvas(width, height){
const image = width;
const new_canvas = E("canvas");
@ -67,7 +67,7 @@ function Canvas(width, height){
// TODO: simplify the abstraction by defining setters for width/height
// that reset the image smoothing to disabled
// and remove all external calls to disable_image_smoothing
// and make image smoothing a parameter to make_canvas
new_ctx.copy = image => {
new_canvas.width = image.naturalWidth || image.width;
@ -84,13 +84,13 @@ function Canvas(width, height){
};
if(width && height){
// new Canvas(width, height)
// make_canvas(width, height)
new_canvas.width = width;
new_canvas.height = height;
// setting width/height resets image smoothing (along with everything)
new_ctx.disable_image_smoothing();
}else if(image){
// new Canvas(image)
// make_canvas(image)
new_ctx.copy(image);
}

12
src/image-manipulation.js
View File

@ -131,7 +131,7 @@ function update_brush_for_drawing_lines(stroke_size){
){
// don't need to do brush_ctx.disable_image_smoothing() currently because images aren't drawn to the brush
const csz = get_brush_canvas_size(stroke_size, "circle");
line_brush_canvas = new Canvas(csz, csz);
line_brush_canvas = make_canvas(csz, csz);
line_brush_canvas.width = csz;
line_brush_canvas.height = csz;
line_brush_canvas.ctx.fillStyle = line_brush_canvas.ctx.strokeStyle = stroke_color;
@ -363,7 +363,7 @@ function apply_image_transformation(fn){
// Apply an image transformation function to either the selection or the entire canvas
const original_canvas = selection ? selection.source_canvas: canvas;
const new_canvas = new Canvas(original_canvas.width, original_canvas.height);
const new_canvas = make_canvas(original_canvas.width, original_canvas.height);
const original_ctx = original_canvas.getContext("2d");
const new_ctx = new_canvas.getContext("2d");
@ -594,7 +594,7 @@ let grid_pattern;
function draw_grid(ctx, scale) {
const pattern_size = Math.floor(scale); // TODO: try ceil too
if (!grid_pattern || grid_pattern.width !== pattern_size || grid_pattern.height !== pattern_size) {
const grid_pattern_canvas = new Canvas(pattern_size, pattern_size);
const grid_pattern_canvas = make_canvas(pattern_size, pattern_size);
const dark_gray = "#808080";
const light_gray = "#c0c0c0";
grid_pattern_canvas.ctx.fillStyle = dark_gray;
@ -912,15 +912,15 @@ function draw_grid(ctx, scale) {
const height = y_max - y_min;
// TODO: maybe have the cutout only the width/height of the bounds
// var cutout = new Canvas(width, height);
const cutout = new Canvas(canvas);
// var cutout = make_canvas(width, height);
const cutout = make_canvas(canvas);
cutout.ctx.save();
cutout.ctx.globalCompositeOperation = "destination-in";
draw_polygon(cutout.ctx, points, false, true);
cutout.ctx.restore();
const cutout_crop = new Canvas(width, height);
const cutout_crop = make_canvas(width, height);
cutout_crop.ctx.drawImage(cutout, x_min, y_min, width, height, 0, 0, width, height);
return cutout_crop;

2
src/sessions.js
View File

@ -278,7 +278,7 @@
// @TODO: display other cursor types?
// @TODO: display pointer button state?
// @TODO: display selections
const cursor_canvas = new Canvas(32, 32);
const cursor_canvas = make_canvas(32, 32);
// Make the cursor element
const $cursor = $(cursor_canvas).addClass("user-cursor").appendTo($app);
$cursor.css({

12
src/tool-options.js
View File

@ -1,5 +1,5 @@
const brush_canvas = new Canvas();
const brush_canvas = make_canvas();
const brush_ctx = brush_canvas.ctx;
let brush_shape = "circle";
let brush_size = 4;
@ -23,7 +23,7 @@ const ChooserCanvas = (
destWidth,
destHeight
) => {
const c = new Canvas(width, height);
const c = make_canvas(width, height);
let img = ChooserCanvas.cache[url];
if(!img){
img = ChooserCanvas.cache[url] = E("img");
@ -100,7 +100,7 @@ const $ChooseShapeStyle = () => {
{stroke: false, fill: true}
],
(a, is_chosen) => {
const sscanvas = new Canvas(39, 21);
const sscanvas = make_canvas(39, 21);
const ssctx = sscanvas.ctx;
// border px inwards amount
@ -154,7 +154,7 @@ const $choose_brush = $Choose((() => {
});
return things;
})(), (o, is_chosen) => {
const cbcanvas = new Canvas(10, 10);
const cbcanvas = make_canvas(10, 10);
const shape = o.shape;
const size = o.size;
@ -174,7 +174,7 @@ const $choose_brush = $Choose((() => {
const $choose_eraser_size = $Choose(
[4, 6, 8, 10],
(size, is_chosen) => {
const cecanvas = new Canvas(39, 16);
const cecanvas = make_canvas(39, 16);
cecanvas.ctx.fillStyle = is_chosen ? "#fff" : "#000";
render_brush(cecanvas.ctx, "square", size);
@ -191,7 +191,7 @@ const $choose_stroke_size = $Choose(
[1, 2, 3, 4, 5],
(size, is_chosen) => {
const w = 39, h = 12, b = 5;
const cscanvas = new Canvas(w, h);
const cscanvas = make_canvas(w, h);
const center_y = (h - size) / 2;
cscanvas.ctx.fillStyle = is_chosen ? "#fff" : "#000";
cscanvas.ctx.fillRect(b, ~~center_y, w - b*2, size);

4
src/tools.js
View File

@ -24,7 +24,7 @@ tools = [{
this.y_min = pointer.y;
this.y_max = pointer.y+1;
this.points = [];
this.preview_canvas = new Canvas(canvas.width, canvas.height);
this.preview_canvas = make_canvas(canvas.width, canvas.height);
// End prior selection, drawing it to the canvas
deselect();
@ -437,7 +437,7 @@ tools = [{
cursor: ["pencil", [13, 23], "crosshair"],
continuous: "space",
stroke_only: true,
pencil_canvas: Canvas(),
pencil_canvas: make_canvas(),
paint(ctx, x, y) {
// XXX: WET (Write Everything Twice) / DAMP (Duplicate Anything Moderately Pastable) (I'm coining that)
// TODO: DRY (Don't Repeat Yourself) / DEHYDRATE (Delete Everything Hindering Yourself Drastically Reducing Aqueous Text Evil) (I'm coining that too)