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

Clean up 

No more "var" declarations
main
Isaiah Odhner 2019-11-03 10:36:34 -05:00
parent 439f8cad27
commit 593cddac09
10 changed files with 50 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/$Component.js
View File

@ -29,6 +29,10 @@ function $Component(name, orientation, $el){
let w, h;
let pos = 0;
let pos_axis;
let last_docked_to_pos;
let $last_docked_to;
let $dock_to;
let $ghost;
if(orientation === "tall"){
pos_axis = "top";
@ -56,10 +60,6 @@ function $Component(name, orientation, $el){
last_docked_to_pos = pos;
};
var last_docked_to_pos;
var $last_docked_to;
let $dock_to;
let $ghost;
$c.on("pointerdown", e => {
// Only start a drag via a left click directly on the component element
if(e.button !== 0){ return; }
@ -94,7 +94,7 @@ function $Component(name, orientation, $el){
// Prevent text selection anywhere within the component
e.preventDefault();
});
var drag_onpointermove = e => {
const drag_onpointermove = e => {
$ghost.css({
left: e.clientX + ox,
@ -135,7 +135,7 @@ function $Component(name, orientation, $el){
e.preventDefault();
};
var drag_onpointerup = e => {
const drag_onpointerup = e => {
$w.hide();

2
src/$Window.js
View File

@ -71,7 +71,7 @@ function $Window($component){
$focused.off("focusout", release);
$(window).off("keyup", keyup);
};
var keyup = e => {
const keyup = e => {
if(e.keyCode === 32 || e.keyCode === 13){
release();
}

2
src/OnCanvasSelection.js
View File

@ -127,7 +127,7 @@ class OnCanvasSelection extends OnCanvasObject {
// NOTE: must come before cutout canvas is modified
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);
// const colored_cutout_image_data = colored_cutout.ctx.getImageData(0, 0, this.width, this.height);
// }
for (let i = 0; i < cutoutImageData.data.length; i += 4) {
const in_cutout = cutoutImageData.data[i + 3] > 0;

16
src/app.js
View File

@ -58,7 +58,7 @@ let text_tool_font = {
const undos = []; //array of ImageData
const redos = []; //array of ImageData
//var frames = []; //array of {delay: N, undos: [ImageData], redos: [ImageData], image: ImageData}? array of Frames?
//const frames = []; //array of {delay: N, undos: [ImageData], redos: [ImageData], image: ImageData}? array of Frames?
let file_name;
let document_file_path;
@ -68,7 +68,9 @@ let pointer, pointer_start, pointer_previous, pointer_type, pointer_buttons;
let reverse;
let ctrl;
let button;
let pointer_active = false;
let pointer_over_canvas = false;
let update_helper_layer_on_pointermove_active = false;
const $app = $(E("div")).addClass("jspaint").appendTo("body");
@ -145,7 +147,7 @@ if(!extras_menu_should_start_visible){
// </menu bar>
const $toolbox = $ToolBox(tools);
// var $toolbox2 = $ToolBox(extra_tools, true);//.hide();
// const $toolbox2 = $ToolBox(extra_tools, true);//.hide();
// Note: a second $ToolBox doesn't work because they use the same tool options (which could be remedied)
// and also the UI isn't designed for multiple vertical components (or horizontal ones)
// If there's to be extra tools, they should probably get a window, with different UI
@ -275,7 +277,7 @@ $G.on("keydown", e => {
}else if(e.keyCode === 107 || e.keyCode === 109){ // Numpad Plus and Minus
const plus = e.keyCode === 107;
const minus = e.keyCode === 109;
const delta = plus - minus; // var delta = +plus++ -minus--; // Δ = ±±±±
const delta = plus - minus; // const delta = +plus++ -minus--; // Δ = ±±±±
if(selection){
selection.scale(2 ** delta);
@ -610,9 +612,6 @@ $canvas.on("pointerleave", e => {
}
});
var pointer_active = false;
var pointer_over_canvas = false;
var update_helper_layer_on_pointermove_active = false;
$canvas.on("pointerdown", e => {
update_canvas_rect();
@ -659,8 +658,9 @@ $canvas.on("pointerdown", e => {
}
$G.on("pointermove", canvas_pointer_move);
let iid;
if(selected_tool.continuous === "time"){
var iid = setInterval(()=> { tool_go(selected_tool); }, 5);
iid = setInterval(()=> { tool_go(selected_tool); }, 5);
}
$G.one("pointerup", (e, canceling) => {
button = undefined;

2
src/canvas-change.js
View File

@ -7,7 +7,7 @@
};
const debug_event = (e, synthetic) => {
// var label = synthetic ? "(synthetic)" : "(normal)";
// const label = synthetic ? "(synthetic)" : "(normal)";
// window.console && console.debug && console.debug(e.type, label);
};

2
src/electron-injected.js
View File

@ -96,7 +96,7 @@ window.systemSaveCanvasAs = (canvas, suggestedFileName, savedCallback) => {
return splitByDots[splitByDots.length - 1].toLowerCase();
};
// TODO: default to existing extension, except it would be awkward to rearrange the list...
// var suggestedExtension = getExtension(suggestedFileName);
// const suggestedExtension = getExtension(suggestedFileName);
const filters = [
// top one is considered default by electron
{name: "PNG", extensions: ["png"]},

43
src/functions.js
View File

@ -54,15 +54,12 @@ function update_helper_layer_immediately(e) {
const hctx = hcanvas.ctx;
const margin = 15;
// var viewport_width = Math.floor(Math.min($canvas_area.width() / magnification + margin*2, canvas.width));
// var viewport_height = Math.floor(Math.min($canvas_area.height() / magnification + margin*2, canvas.height));
const viewport_x = Math.floor(Math.max($canvas_area.scrollLeft() / magnification - margin, 0));
const viewport_y = Math.floor(Math.max($canvas_area.scrollTop() / magnification - margin, 0));
const viewport_x2 = Math.floor(Math.min(viewport_x + $canvas_area.width() / magnification + margin*2, canvas.width));
const viewport_y2 = Math.floor(Math.min(viewport_y + $canvas_area.height() / magnification + margin*2, canvas.height));
const viewport_width = viewport_x2 - viewport_x;
const viewport_height = viewport_y2 - viewport_y;
// console.log($canvas_area.width(), $canvas_area.height(), viewport_width, viewport_height, canvas.width, canvas.height);
const resolution_width = viewport_width * scale;
const resolution_height = viewport_height * scale;
if (
@ -633,8 +630,8 @@ function show_news(){
}
$news_window = $Window().title("Project News");
// var $latest_entries = $latest_news.find(".news-entry");
// var latest_entry = $latest_entries[$latest_entries.length - 1];
// const $latest_entries = $latest_news.find(".news-entry");
// const latest_entry = $latest_entries[$latest_entries.length - 1];
// console.log("LATEST MEWS:", $latest_news);
// console.log("LATEST ENTRY:", latest_entry);
@ -746,20 +743,20 @@ function render_history_as_gif(){
$win.close();
});
$win.on('close', () => {
gif.abort();
});
try{
const width = canvas.width;
const height = canvas.height;
var gif = new GIF({
const gif = new GIF({
//workers: Math.min(5, Math.floor(undos.length/50)+1),
workerScript: "lib/gif.js/gif.worker.js",
width,
height,
});
$win.on('close', () => {
gif.abort();
});
gif.on("progress", p => {
$progress.val(p);
$progress_percent.text(`${~~(p*100)}%`);
@ -808,19 +805,19 @@ function render_history_as_gif(){
/*
function render_history_as_apng(){
var $win = $FormWindow();
const $win = $FormWindow();
$win.title("Rendering APNG");
$win.center();
var $output = $win.$main;
var $progress = $(E("progress")).appendTo($output);
var $progress_percent = $(E("span")).appendTo($output).css({
const $output = $win.$main;
const $progress = $(E("progress")).appendTo($output);
const $progress_percent = $(E("span")).appendTo($output).css({
width: "2.3em",
display: "inline-block",
textAlign: "center",
});
$win.$main.css({padding: 5});
var $cancel = $win.$Button('Cancel', ()=> {
const $cancel = $win.$Button('Cancel', ()=> {
$win.close();
});
@ -829,17 +826,17 @@ function render_history_as_apng(){
});
try{
var width = canvas.width;
var height = canvas.height;
var frames = [...undos, ctx.getImageData(0, 0, canvas.width, canvas.height)];
// var apng = new APNG(frames, {loops: Infinity}, (blob)=> {
var apng = new APNG({loops: Infinity})
for(var i=0; i<frames.length; i++){
apng.addFrame(frames[i], {delay: 200});
const width = canvas.width;
const height = canvas.height;
const frames = [...undos, ctx.getImageData(0, 0, canvas.width, canvas.height)];
// const apng = new APNG(frames, {loops: Infinity}, (blob)=> {
const apng = new APNG({loops: Infinity})
for(const frame of frames){
apng.addFrame(frame, {delay: 200});
}
apng.render((blob)=> {
$win.title("Rendered APNG");
var url = URL.createObjectURL(blob);
const url = URL.createObjectURL(blob);
$output.empty().append(
$(E("img")).attr({
src: url,

8
src/image-manipulation.js
View File

@ -225,7 +225,7 @@ function draw_fill(ctx, start_x, start_y, fill_r, fill_g, fill_b, fill_a){
const c_width = canvas.width;
const c_height = canvas.height;
const id = ctx.getImageData(0, 0, c_width, c_height);
pixel_pos = (start_y*c_width + start_x) * 4;
let pixel_pos = (start_y*c_width + start_x) * 4;
const start_r = id.data[pixel_pos+0];
const start_g = id.data[pixel_pos+1];
const start_b = id.data[pixel_pos+2];
@ -244,7 +244,6 @@ function draw_fill(ctx, start_x, start_y, fill_r, fill_g, fill_b, fill_a){
let new_pos;
let x;
let y;
var pixel_pos;
let reach_left;
let reach_right;
new_pos = stack.pop();
@ -892,8 +891,7 @@ function draw_grid(ctx, scale) {
let x_max = -Infinity;
let y_min = +Infinity;
let y_max = -Infinity;
for (var i = 0; i < numPoints; i++) {
const {x, y} = points[i];
for (const {x, y} of points) {
x_min = Math.min(x, x_min);
x_max = Math.max(x, x_max);
y_min = Math.min(y, y_min);
@ -977,7 +975,7 @@ 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 = make_canvas(width, height);
// const cutout = make_canvas(width, height);
const cutout = make_canvas(canvas);
cutout.ctx.save();

7
src/imgur.js
View File

@ -45,7 +45,7 @@ function show_imgur_uploader(blob){
const parseImgurResponseJSON = responseJSON => {
try {
var response = JSON.parse(responseJSON);
return JSON.parse(responseJSON);
} catch(error) {
$imgur_status.text("Received an invalid JSON response from Imgur: ");
// .append($(E("pre")).text(responseJSON));
@ -78,7 +78,6 @@ function show_imgur_uploader(blob){
$imgur_window.css({width: "auto"});
$imgur_window.center();
}
return response;
};
// make an HTTP request to the Imgur image upload API
@ -150,7 +149,7 @@ function show_imgur_uploader(blob){
$imgur_status.text("Deleting...");
});
const $okay_button = $imgur_window.$Button("OK", () => {
$imgur_window.$Button("OK", () => {
$imgur_window.close();
});
}else if(req.readyState == 4){
@ -170,7 +169,7 @@ function show_imgur_uploader(blob){
$imgur_status.text("Uploading...");
});
var $cancel_button = $imgur_window.$Button("Cancel", () => {
const $cancel_button = $imgur_window.$Button("Cancel", () => {
$imgur_window.close();
});
$imgur_window.width(300);

13
src/tools.js
View File

@ -751,12 +751,11 @@ window.tools = [{
if(w < 0){ x += w; w = -w; }
if(h < 0){ y += h; h = -h; }
let radius;
if(w < stroke_size || h < stroke_size){
ctx.fillStyle = ctx.strokeStyle;
radius = Math.min(8, w/2, h/2);
// var radius_x = Math.min(8, w/2);
// var radius_y = Math.min(8, h/2);
const radius = Math.min(8, w/2, h/2);
// const radius_x = Math.min(8, w/2);
// const radius_y = Math.min(8, h/2);
draw_rounded_rectangle(
ctx,
x, y, w, h,
@ -766,9 +765,9 @@ window.tools = [{
true
);
}else{
radius = Math.min(8, (w - stroke_size)/2, (h - stroke_size)/2);
// var radius_x = Math.min(8, (w - stroke_size)/2);
// var radius_y = Math.min(8, (h - stroke_size)/2);
const radius = Math.min(8, (w - stroke_size)/2, (h - stroke_size)/2);
// const radius_x = Math.min(8, (w - stroke_size)/2);
// const radius_y = Math.min(8, (h - stroke_size)/2);
draw_rounded_rectangle(
ctx,
x + ~~(stroke_size / 2),