From 83dd05c1b00c6c811309a7cc5c8d2bf10cfc04f0 Mon Sep 17 00:00:00 2001 From: Isaiah Odhner Date: Tue, 29 Oct 2019 17:43:46 -0400 Subject: [PATCH] Clean up canvas creation Don't pretend the canvas making helper is a class --- src/$ColorBox.js | 2 +- src/OnCanvasHelperLayer.js | 2 +- src/OnCanvasSelection.js | 16 ++++++++-------- src/app.js | 4 ++-- src/electron-injected.js | 2 +- src/functions.js | 4 ++-- src/helpers.js | 10 +++++----- src/image-manipulation.js | 12 ++++++------ src/sessions.js | 2 +- src/tool-options.js | 12 ++++++------ src/tools.js | 4 ++-- 11 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/$ColorBox.js b/src/$ColorBox.js index f8c1526..5897e3a 100644 --- a/src/$ColorBox.js +++ b/src/$ColorBox.js @@ -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 => { diff --git a/src/OnCanvasHelperLayer.js b/src/OnCanvasHelperLayer.js index bea992f..d6fa3c9 100644 --- a/src/OnCanvasHelperLayer.js +++ b/src/OnCanvasHelperLayer.js @@ -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); } } diff --git a/src/OnCanvasSelection.js b/src/OnCanvasSelection.js index 9576d74..cfcea3f 100644 --- a/src/OnCanvasSelection.js +++ b/src/OnCanvasSelection.js @@ -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); } diff --git a/src/app.js b/src/app.js index dce2278..813ba78 100644 --- a/src/app.js +++ b/src/app.js @@ -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); } diff --git a/src/electron-injected.js b/src/electron-injected.js index ed4df30..1f80f03 100644 --- a/src/electron-injected.js +++ b/src/electron-injected.js @@ -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); diff --git a/src/functions.js b/src/functions.js index b0d3fcc..2e03e3b 100644 --- a/src/functions.js +++ b/src/functions.js @@ -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 { 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); } diff --git a/src/image-manipulation.js b/src/image-manipulation.js index a46f507..2c6df50 100644 --- a/src/image-manipulation.js +++ b/src/image-manipulation.js @@ -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; diff --git a/src/sessions.js b/src/sessions.js index 428bdaa..9c8700c 100644 --- a/src/sessions.js +++ b/src/sessions.js @@ -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({ diff --git a/src/tool-options.js b/src/tool-options.js index 2f96bf1..aa9de65 100644 --- a/src/tool-options.js +++ b/src/tool-options.js @@ -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); diff --git a/src/tools.js b/src/tools.js index e0ae413..b0434c4 100644 --- a/src/tools.js +++ b/src/tools.js @@ -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)