parent
ab83621abb
commit
83dd05c1b0
|
@ -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 => {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue