Convert to arrow functions with lebab
npm install -g lebab@3.1.0 lebab --replace src/ --transform arrowmain
Isaiah Odhner
parent
789bc07035
commit
d0e722d12c
|
|
@ -5,7 +5,7 @@ function $Swatch(color){
|
|||
var swatch_canvas = new Canvas();
|
||||
$(swatch_canvas).css({pointerEvents: "none"}).appendTo($b);
|
||||
|
||||
$b.update = function(_color){
|
||||
$b.update = _color => {
|
||||
color = _color;
|
||||
if(color instanceof CanvasPattern){
|
||||
$b.addClass("pattern");
|
||||
|
|
@ -13,7 +13,7 @@ function $Swatch(color){
|
|||
$b.removeClass("pattern");
|
||||
}
|
||||
|
||||
requestAnimationFrame(function(){
|
||||
requestAnimationFrame(() => {
|
||||
swatch_canvas.width = $b.innerWidth();
|
||||
swatch_canvas.height = $b.innerHeight();
|
||||
// I don't think disable_image_smoothing() is needed here
|
||||
|
|
@ -24,7 +24,7 @@ function $Swatch(color){
|
|||
}
|
||||
});
|
||||
};
|
||||
$G.on("theme-load", function(){
|
||||
$G.on("theme-load", () => {
|
||||
$b.update(color);
|
||||
});
|
||||
$b.update(color);
|
||||
|
|
@ -58,13 +58,13 @@ function $ColorBox(){
|
|||
bottom: 3,
|
||||
});
|
||||
|
||||
$G.on("option-changed", function(){
|
||||
$G.on("option-changed", () => {
|
||||
$foreground_color.update(colors.foreground);
|
||||
$background_color.update(colors.background);
|
||||
$current_colors.update(colors.ternary);
|
||||
});
|
||||
|
||||
$current_colors.on("pointerdown", function(){
|
||||
$current_colors.on("pointerdown", () => {
|
||||
var new_bg = colors.foreground;
|
||||
colors.foreground = colors.background;
|
||||
colors.background = new_bg;
|
||||
|
|
@ -77,9 +77,9 @@ function $ColorBox(){
|
|||
// TODO: base this on the element sizes
|
||||
var width_per_button = 16;
|
||||
|
||||
var build_palette = function(){
|
||||
var build_palette = () => {
|
||||
$palette.empty();
|
||||
$.each(palette, function(i, color){
|
||||
$.each(palette, (i, color) => {
|
||||
var $b = $Swatch(color).addClass("color-button");
|
||||
$b.appendTo($palette);
|
||||
|
||||
|
|
@ -90,7 +90,7 @@ function $ColorBox(){
|
|||
|
||||
var $i = $(E("input")).attr({type: "color"});
|
||||
$i.appendTo($b);
|
||||
$i.on("change", function(){
|
||||
$i.on("change", () => {
|
||||
color = $i.val();
|
||||
$b.update(color);
|
||||
set_color(color);
|
||||
|
|
@ -102,7 +102,7 @@ function $ColorBox(){
|
|||
$i.val(rgb2hex(color));
|
||||
|
||||
var button, ctrl;
|
||||
$b.on("pointerdown", function(e){
|
||||
$b.on("pointerdown", e => {
|
||||
// TODO: how should the ternary color, and selection cropping, work on macOS?
|
||||
ctrl = e.ctrlKey;
|
||||
button = e.button;
|
||||
|
|
@ -119,11 +119,11 @@ function $ColorBox(){
|
|||
}
|
||||
|
||||
$i.prop("enabled", true);
|
||||
setTimeout(function(){
|
||||
setTimeout(() => {
|
||||
$i.prop("enabled", false);
|
||||
}, 400);
|
||||
});
|
||||
$i.on("click", function(e, synthetic){
|
||||
$i.on("click", (e, synthetic) => {
|
||||
if(!synthetic){
|
||||
e.preventDefault();
|
||||
}
|
||||
|
|
@ -156,9 +156,9 @@ function $ColorBox(){
|
|||
|
||||
var $c = $Component("Colors", "wide", $cb);
|
||||
|
||||
$c.edit_last_color = function(){
|
||||
$c.edit_last_color = () => {
|
||||
// Edit the last color cell that's been selected as the foreground color.
|
||||
create_and_trigger_input({type: "color"}, function(input){
|
||||
create_and_trigger_input({type: "color"}, input => {
|
||||
// console.log(input, input.value);
|
||||
$last_fg_color_button.trigger({type: "pointerdown", ctrlKey: false, button: 0});
|
||||
$last_fg_color_button.find("input").val(input.value).triggerHandler("change");
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ function $Component(name, orientation, $el){
|
|||
pos_axis = "left";
|
||||
}
|
||||
|
||||
var dock_to = function($dock_to){
|
||||
var dock_to = $dock_to => {
|
||||
$w.hide();
|
||||
|
||||
$dock_to.append($c);
|
||||
|
|
@ -60,13 +60,13 @@ function $Component(name, orientation, $el){
|
|||
var $last_docked_to;
|
||||
var $dock_to;
|
||||
var $ghost;
|
||||
$c.on("pointerdown", function(e){
|
||||
$c.on("pointerdown", e => {
|
||||
// Only start a drag via a left click directly on the component element
|
||||
if(e.button !== 0){ return; }
|
||||
if(!$c.is(e.target)){ return; }
|
||||
|
||||
$G.on("pointermove", drag_onpointermove);
|
||||
$G.one("pointerup", function(e){
|
||||
$G.one("pointerup", e => {
|
||||
$G.off("pointermove", drag_onpointermove);
|
||||
drag_onpointerup(e);
|
||||
});
|
||||
|
|
@ -94,7 +94,7 @@ function $Component(name, orientation, $el){
|
|||
// Prevent text selection anywhere within the component
|
||||
e.preventDefault();
|
||||
});
|
||||
var drag_onpointermove = function(e){
|
||||
var drag_onpointermove = e => {
|
||||
|
||||
$ghost.css({
|
||||
left: e.clientX + ox,
|
||||
|
|
@ -135,7 +135,7 @@ function $Component(name, orientation, $el){
|
|||
e.preventDefault();
|
||||
};
|
||||
|
||||
var drag_onpointerup = function(e){
|
||||
var drag_onpointerup = e => {
|
||||
|
||||
$w.hide();
|
||||
|
||||
|
|
@ -175,23 +175,23 @@ function $Component(name, orientation, $el){
|
|||
$G.trigger("resize");
|
||||
};
|
||||
|
||||
$c.dock = function(){
|
||||
$c.dock = () => {
|
||||
pos = last_docked_to_pos;
|
||||
dock_to($last_docked_to);
|
||||
};
|
||||
|
||||
$c.show = function(){
|
||||
$c.show = () => {
|
||||
$($c[0]).show(); // avoid recursion
|
||||
if($.contains($w[0], $c[0])){
|
||||
$w.show();
|
||||
}
|
||||
return $c;
|
||||
};
|
||||
$c.hide = function(){
|
||||
$c.hide = () => {
|
||||
$c.add($w).hide();
|
||||
return $c;
|
||||
};
|
||||
$c.toggle = function(){
|
||||
$c.toggle = () => {
|
||||
if($c.is(":visible")){
|
||||
$c.hide();
|
||||
}else{
|
||||
|
|
@ -200,7 +200,7 @@ function $Component(name, orientation, $el){
|
|||
return $c;
|
||||
};
|
||||
|
||||
$w.on("close", function(e){
|
||||
$w.on("close", e => {
|
||||
e.preventDefault();
|
||||
$w.hide();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@ function $FontBox(){
|
|||
$button_group.append($bold, $italic, $underline, $vertical);
|
||||
$fb.append($family, $size, $button_group);
|
||||
|
||||
var update_font = function(){
|
||||
var update_font = () => {
|
||||
text_tool_font.size = Number($size.val());
|
||||
text_tool_font.family = $family.val();
|
||||
$G.trigger("option-changed");
|
||||
};
|
||||
|
||||
FontDetective.each(function(font){
|
||||
FontDetective.each(font => {
|
||||
var $option = $(E("option"));
|
||||
$option.val(font).text(font.name);
|
||||
$family.append($option);
|
||||
|
|
@ -65,7 +65,7 @@ function $FontBox(){
|
|||
backgroundImage: "url(images/text-tools.png)",
|
||||
backgroundPosition: xi*-16 + "px 0px"
|
||||
});
|
||||
$button.on("click", function(){
|
||||
$button.on("click", () => {
|
||||
$button.toggleClass("selected");
|
||||
text_tool_font[thing] = $button.hasClass("selected");
|
||||
update_font();
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
|
||||
function $Handles($container, element, options){
|
||||
var outset = options.outset || 0;
|
||||
var get_offset_left = options.get_offset_left || function(){ return 0; };
|
||||
var get_offset_top = options.get_offset_top || function(){ return 0; };
|
||||
var get_offset_left = options.get_offset_left || (() => { return 0; });
|
||||
var get_offset_top = options.get_offset_top || (() => { return 0; });
|
||||
var size_only = options.size_only || false;
|
||||
var el = element;
|
||||
$container.on("new-element", function(e, element){
|
||||
$container.on("new-element", (e, element) => {
|
||||
el = element;
|
||||
});
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ function $Handles($container, element, options){
|
|||
["bottom", "middle"], // ↓
|
||||
["bottom", "right"], // ↘
|
||||
["middle", "right"], // →
|
||||
], function(pos){
|
||||
], pos => {
|
||||
var y_axis = pos[0];
|
||||
var x_axis = pos[1];
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ function $Handles($container, element, options){
|
|||
cursor = Cursor([cursor_fname, [16, 16], cursor]);
|
||||
$h.css({cursor: cursor});
|
||||
|
||||
var drag = function(e){
|
||||
var drag = e => {
|
||||
$resize_ghost.appendTo($container);
|
||||
dragged = true;
|
||||
|
||||
|
|
@ -91,13 +91,13 @@ function $Handles($container, element, options){
|
|||
height: magnification * height,
|
||||
});
|
||||
};
|
||||
$h.on("pointerdown", function(e){
|
||||
$h.on("pointerdown", e => {
|
||||
dragged = false;
|
||||
if(e.button === 0){
|
||||
$G.on("pointermove", drag);
|
||||
$("body").css({cursor: cursor}).addClass("cursor-bully");
|
||||
}
|
||||
$G.one("pointerup", function(e){
|
||||
$G.one("pointerup", e => {
|
||||
$G.off("pointermove", drag);
|
||||
$("body").css({cursor: ""}).removeClass("cursor-bully");
|
||||
|
||||
|
|
@ -108,12 +108,12 @@ function $Handles($container, element, options){
|
|||
$container.trigger("update");
|
||||
});
|
||||
});
|
||||
$h.on("mousedown selectstart", function(e){
|
||||
$h.on("mousedown selectstart", e => {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
var update_handle = function(){
|
||||
var update_handle = () => {
|
||||
var rect = el.getBoundingClientRect();
|
||||
var hs = $h.width();
|
||||
if(x_axis === "middle"){
|
||||
|
|
|
|||
|
|
@ -13,22 +13,22 @@ function $MenuBar(menus){
|
|||
$menus.attr("touch-action", "none");
|
||||
var selecting_menus = false;
|
||||
|
||||
var _html = function(menus_key){
|
||||
return menus_key.replace(/&(.)/, function(m){
|
||||
var _html = menus_key => {
|
||||
return menus_key.replace(/&(.)/, m => {
|
||||
return "<span class='menu-hotkey'>" + m[1] + "</span>";
|
||||
});
|
||||
};
|
||||
var _hotkey = function(menus_key){
|
||||
var _hotkey = menus_key => {
|
||||
return menus_key[menus_key.indexOf("&")+1].toUpperCase();
|
||||
};
|
||||
|
||||
var close_menus = function(){
|
||||
var close_menus = () => {
|
||||
$menus.find(".menu-button").trigger("release");
|
||||
// Close any rogue floating submenus
|
||||
$(".menu-popup").hide();
|
||||
};
|
||||
|
||||
var is_disabled = function(item){
|
||||
var is_disabled = item => {
|
||||
if(typeof item.enabled === "function"){
|
||||
return !item.enabled();
|
||||
}else if(typeof item.enabled === "boolean"){
|
||||
|
|
@ -43,7 +43,7 @@ function $MenuBar(menus){
|
|||
var $menu_popup = $(E("div")).addClass("menu-popup");
|
||||
var $menu_popup_table = $(E("table")).addClass("menu-popup-table").appendTo($menu_popup);
|
||||
|
||||
$.map(menu_items, function(item){
|
||||
$.map(menu_items, item => {
|
||||
var $row = $(E("tr")).addClass("menu-row").appendTo($menu_popup_table)
|
||||
if(item === $MenuBar.DIVIDER){
|
||||
var $td = $(E("td")).attr({colspan: 4}).appendTo($row);
|
||||
|
|
@ -62,13 +62,13 @@ function $MenuBar(menus){
|
|||
$label.html(_html(item.item));
|
||||
$shortcut.text(item.shortcut);
|
||||
|
||||
$menu_popup.on("update", function(){
|
||||
$menu_popup.on("update", () => {
|
||||
$item.attr("disabled", is_disabled(item));
|
||||
if(item.checkbox && item.checkbox.check){
|
||||
$checkbox_area.text(item.checkbox.check() ? "✓" : "");
|
||||
}
|
||||
});
|
||||
$item.on("pointerover", function(){
|
||||
$item.on("pointerover", () => {
|
||||
$menu_popup.triggerHandler("update");
|
||||
$item[0].focus();
|
||||
});
|
||||
|
|
@ -83,7 +83,7 @@ function $MenuBar(menus){
|
|||
var $submenu_popup = $MenuPopup(item.submenu).appendTo("body");
|
||||
$submenu_popup.hide();
|
||||
|
||||
var open_submenu = function(){
|
||||
var open_submenu = () => {
|
||||
$submenu_popup.show();
|
||||
$submenu_popup.triggerHandler("update");
|
||||
var rect = $submenu_area[0].getBoundingClientRect();
|
||||
|
|
@ -94,27 +94,27 @@ function $MenuBar(menus){
|
|||
});
|
||||
};
|
||||
var open_tid, close_tid;
|
||||
$item.add($submenu_popup).on("pointerover", function(e){
|
||||
$item.add($submenu_popup).on("pointerover", e => {
|
||||
if(open_tid){clearTimeout(open_tid);}
|
||||
if(close_tid){clearTimeout(close_tid);}
|
||||
});
|
||||
$item.on("pointerover", function(e){
|
||||
$item.on("pointerover", e => {
|
||||
if(open_tid){clearTimeout(open_tid);}
|
||||
if(close_tid){clearTimeout(close_tid);}
|
||||
open_tid = setTimeout(open_submenu, 200);
|
||||
});
|
||||
$item.add($submenu_popup).on("pointerout", function(){
|
||||
$item.add($submenu_popup).on("pointerout", () => {
|
||||
$menu_popup.closest(".menu-container").find(".menu-button")[0].focus();
|
||||
if(open_tid){clearTimeout(open_tid);}
|
||||
if(close_tid){clearTimeout(close_tid);}
|
||||
close_tid = setTimeout(function(){
|
||||
close_tid = setTimeout(() => {
|
||||
$submenu_popup.hide();
|
||||
}, 200);
|
||||
});
|
||||
$item.on("click pointerdown", open_submenu);
|
||||
}
|
||||
|
||||
var item_action = function(){
|
||||
var item_action = () => {
|
||||
if(item.checkbox){
|
||||
if(item.checkbox.toggle){
|
||||
item.checkbox.toggle();
|
||||
|
|
@ -125,20 +125,20 @@ function $MenuBar(menus){
|
|||
item.action();
|
||||
}
|
||||
};
|
||||
$item.on("pointerup", function(e){
|
||||
$item.on("pointerup", e => {
|
||||
if(e.pointerType === "mouse" && e.button !== 0){
|
||||
return;
|
||||
}
|
||||
item_action();
|
||||
});
|
||||
$item.on("pointerover", function(){
|
||||
$item.on("pointerover", () => {
|
||||
if(item.submenu){
|
||||
$menus.triggerHandler("info", "");
|
||||
}else{
|
||||
$menus.triggerHandler("info", item.description || "");
|
||||
}
|
||||
});
|
||||
$item.on("pointerout", function(){
|
||||
$item.on("pointerout", () => {
|
||||
if($item.is(":visible")){
|
||||
$menus.triggerHandler("info", "");
|
||||
// may not exist for submenu popups
|
||||
|
|
@ -149,7 +149,7 @@ function $MenuBar(menus){
|
|||
}
|
||||
});
|
||||
|
||||
$item.on("keydown", function(e){
|
||||
$item.on("keydown", e => {
|
||||
if(e.ctrlKey || e.shiftKey || e.altKey || e.metaKey){
|
||||
return;
|
||||
}
|
||||
|
|
@ -159,7 +159,7 @@ function $MenuBar(menus){
|
|||
}
|
||||
});
|
||||
|
||||
$menu_popup.on("keydown", function(e){
|
||||
$menu_popup.on("keydown", e => {
|
||||
if(e.ctrlKey || e.shiftKey || e.altKey || e.metaKey){
|
||||
return;
|
||||
}
|
||||
|
|
@ -175,7 +175,7 @@ function $MenuBar(menus){
|
|||
}
|
||||
|
||||
var this_click_opened_the_menu = false;
|
||||
$.each(menus, function(menus_key, menu_items){
|
||||
$.each(menus, (menus_key, menu_items) => {
|
||||
var $menu_container = $(E("div")).addClass("menu-container").appendTo($menus);
|
||||
var $menu_button = $(E("div")).addClass("menu-button").appendTo($menu_container);
|
||||
var $menu_popup = $MenuPopup(menu_items).appendTo($menu_container);
|
||||
|
|
@ -199,7 +199,7 @@ function $MenuBar(menus){
|
|||
$menu_popup.hide();
|
||||
$menu_button.html(_html(menus_key));
|
||||
$menu_button.attr("tabIndex", -1)
|
||||
$menu_container.on("keydown", function(e){
|
||||
$menu_container.on("keydown", e => {
|
||||
var $focused_item = $menu_popup.find(".menu-item:focus");
|
||||
switch(e.keyCode){
|
||||
case 37: // Left
|
||||
|
|
@ -240,7 +240,7 @@ function $MenuBar(menus){
|
|||
break;
|
||||
}
|
||||
});
|
||||
$G.on("keydown", function(e){
|
||||
$G.on("keydown", e => {
|
||||
if(e.ctrlKey || e.metaKey){ // Ctrl or Command held
|
||||
if(e.keyCode !== 17 && e.keyCode !== 91 && e.keyCode !== 93 && e.keyCode !== 224){ // anything but Ctrl or Command pressed
|
||||
close_menus();
|
||||
|
|
@ -254,7 +254,7 @@ function $MenuBar(menus){
|
|||
}
|
||||
}
|
||||
});
|
||||
$menu_button.on("pointerdown pointerover", function(e){
|
||||
$menu_button.on("pointerdown pointerover", e => {
|
||||
if(e.type === "pointerover" && !selecting_menus){
|
||||
return;
|
||||
}
|
||||
|
|
@ -275,7 +275,7 @@ function $MenuBar(menus){
|
|||
|
||||
$menus.triggerHandler("info", "");
|
||||
});
|
||||
$menu_button.on("pointerup", function(e){
|
||||
$menu_button.on("pointerup", e => {
|
||||
if(this_click_opened_the_menu){
|
||||
this_click_opened_the_menu = false;
|
||||
return;
|
||||
|
|
@ -284,7 +284,7 @@ function $MenuBar(menus){
|
|||
close_menus();
|
||||
}
|
||||
});
|
||||
$menu_button.on("release", function(e){
|
||||
$menu_button.on("release", e => {
|
||||
selecting_menus = false;
|
||||
|
||||
$menu_button.removeClass("active");
|
||||
|
|
@ -293,16 +293,16 @@ function $MenuBar(menus){
|
|||
$menus.triggerHandler("default-info");
|
||||
});
|
||||
});
|
||||
$G.on("keypress", function(e){
|
||||
$G.on("keypress", e => {
|
||||
if(e.keyCode === 27){ // Esc
|
||||
close_menus();
|
||||
}
|
||||
});
|
||||
$G.on("blur", function(e){
|
||||
$G.on("blur", e => {
|
||||
// console.log("blur", e.target, document.activeElement);
|
||||
close_menus();
|
||||
});
|
||||
$G.on("pointerdown pointerup", function(e){
|
||||
$G.on("pointerdown pointerup", e => {
|
||||
if($(e.target).closest(".menus, .menu-popup").length === 0){
|
||||
// console.log(e.type, "occurred outside of menus (on ", e.target, ") so...");
|
||||
close_menus();
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ function $ToolBox(tools, is_extras){
|
|||
var $tool_options = $(E("div")).addClass("tool-options");
|
||||
|
||||
var showing_tooltips = false;
|
||||
$tools.on("pointerleave", function(){
|
||||
$tools.on("pointerleave", () => {
|
||||
showing_tooltips = false;
|
||||
$status_text.default();
|
||||
});
|
||||
|
||||
var $buttons = $($.map(tools, function(tool, i){
|
||||
var $buttons = $($.map(tools, (tool, i) => {
|
||||
var $b = $(E("div")).addClass("tool");
|
||||
$b.appendTo($tools);
|
||||
tool.$button = $b;
|
||||
|
|
@ -36,7 +36,7 @@ function $ToolBox(tools, is_extras){
|
|||
update_css();
|
||||
$G.on("theme-load", update_css);
|
||||
|
||||
$b.on("click", function(e){
|
||||
$b.on("click", e => {
|
||||
if (e.shiftKey || e.ctrlKey) {
|
||||
select_tool(tool, true);
|
||||
return;
|
||||
|
|
@ -48,8 +48,8 @@ function $ToolBox(tools, is_extras){
|
|||
}
|
||||
});
|
||||
|
||||
$b.on("pointerenter", function(){
|
||||
var show_tooltip = function(){
|
||||
$b.on("pointerenter", () => {
|
||||
var show_tooltip = () => {
|
||||
showing_tooltips = true;
|
||||
$status_text.text(tool.description);
|
||||
};
|
||||
|
|
@ -57,7 +57,7 @@ function $ToolBox(tools, is_extras){
|
|||
show_tooltip();
|
||||
}else{
|
||||
var tid = setTimeout(show_tooltip, 300);
|
||||
$b.on("pointerleave", function(){
|
||||
$b.on("pointerleave", () => {
|
||||
clearTimeout(tid);
|
||||
});
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@ function $ToolBox(tools, is_extras){
|
|||
}));
|
||||
|
||||
var $c = $Component(is_extras ? "Extra Tools" : "Tools", "tall", $tools.add($tool_options));
|
||||
$c.update_selected_tool = function(){
|
||||
$c.update_selected_tool = () => {
|
||||
$buttons.removeClass("selected");
|
||||
selected_tools.forEach((selected_tool)=> {
|
||||
selected_tool.$button.addClass("selected");
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ function $Window($component){
|
|||
|
||||
$w.attr("touch-action", "none");
|
||||
|
||||
$w.$x.on("click", function(){
|
||||
$w.$x.on("click", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.$x.on("mousedown selectstart", function(e){
|
||||
$w.$x.on("mousedown selectstart", e => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
|
@ -29,13 +29,13 @@ function $Window($component){
|
|||
position: "absolute",
|
||||
zIndex: $Window.Z_INDEX++
|
||||
});
|
||||
$w.on("pointerdown", function(){
|
||||
$w.on("pointerdown", () => {
|
||||
$w.css({
|
||||
zIndex: $Window.Z_INDEX++
|
||||
});
|
||||
});
|
||||
|
||||
$w.on("keydown", function(e){
|
||||
$w.on("keydown", e => {
|
||||
if(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey){
|
||||
return;
|
||||
}
|
||||
|
|
@ -66,12 +66,12 @@ function $Window($component){
|
|||
case 13: // Enter (doesn't actually work in chrome because the button gets clicked immediately)
|
||||
if($focused.is("button")){
|
||||
$focused.addClass("pressed");
|
||||
var release = function(){
|
||||
var release = () => {
|
||||
$focused.removeClass("pressed");
|
||||
$focused.off("focusout", release);
|
||||
$(window).off("keyup", keyup);
|
||||
};
|
||||
var keyup = function(e){
|
||||
var keyup = e => {
|
||||
if(e.keyCode === 32 || e.keyCode === 13){
|
||||
release();
|
||||
}
|
||||
|
|
@ -97,14 +97,14 @@ function $Window($component){
|
|||
}
|
||||
});
|
||||
|
||||
$w.applyBounds = function(){
|
||||
$w.applyBounds = () => {
|
||||
$w.css({
|
||||
left: Math.max(0, Math.min(innerWidth - $w.width(), $w[0].getBoundingClientRect().left)),
|
||||
top: Math.max(0, Math.min(innerHeight - $w.height(), $w[0].getBoundingClientRect().top)),
|
||||
});
|
||||
};
|
||||
|
||||
$w.center = function(){
|
||||
$w.center = () => {
|
||||
$w.css({
|
||||
left: (innerWidth - $w.width()) / 2,
|
||||
top: (innerHeight - $w.height()) / 2,
|
||||
|
|
@ -116,17 +116,17 @@ function $Window($component){
|
|||
$G.on("resize", $w.applyBounds);
|
||||
|
||||
var drag_offset_x, drag_offset_y;
|
||||
var drag = function(e){
|
||||
var drag = e => {
|
||||
$w.css({
|
||||
left: e.clientX - drag_offset_x,
|
||||
top: e.clientY - drag_offset_y,
|
||||
});
|
||||
};
|
||||
$w.$titlebar.attr("touch-action", "none");
|
||||
$w.$titlebar.on("mousedown selectstart", function(e){
|
||||
$w.$titlebar.on("mousedown selectstart", e => {
|
||||
e.preventDefault();
|
||||
});
|
||||
$w.$titlebar.on("pointerdown", function(e){
|
||||
$w.$titlebar.on("pointerdown", e => {
|
||||
if($(e.target).is("button")){
|
||||
return;
|
||||
}
|
||||
|
|
@ -135,22 +135,22 @@ function $Window($component){
|
|||
$G.on("pointermove", drag);
|
||||
$("body").addClass("dragging");
|
||||
});
|
||||
$G.on("pointerup", function(e){
|
||||
$G.on("pointerup", e => {
|
||||
$w.applyBounds();
|
||||
$G.off("pointermove", drag);
|
||||
$("body").removeClass("dragging");
|
||||
});
|
||||
$w.$titlebar.on("dblclick", function(e){
|
||||
$w.$titlebar.on("dblclick", e => {
|
||||
if($component){
|
||||
$component.dock();
|
||||
}
|
||||
});
|
||||
|
||||
$w.$Button = function(text, handler){
|
||||
$w.$Button = (text, handler) => {
|
||||
var $b = $(E("button"))
|
||||
.appendTo($w.$content)
|
||||
.text(text)
|
||||
.on("click", function(){
|
||||
.on("click", () => {
|
||||
if(handler){
|
||||
handler();
|
||||
}
|
||||
|
|
@ -158,7 +158,7 @@ function $Window($component){
|
|||
});
|
||||
return $b;
|
||||
};
|
||||
$w.title = function(title){
|
||||
$w.title = title => {
|
||||
if(title){
|
||||
$w.$title.text(title);
|
||||
return $w;
|
||||
|
|
@ -166,7 +166,7 @@ function $Window($component){
|
|||
return $w.$title.text();
|
||||
}
|
||||
};
|
||||
$w.close = function(){
|
||||
$w.close = () => {
|
||||
var e = $.Event("close");
|
||||
$w.trigger(e);
|
||||
if(e.isDefaultPrevented()){
|
||||
|
|
@ -195,9 +195,9 @@ function $FormWindow(title){
|
|||
$w.$main = $(E("div")).appendTo($w.$form);
|
||||
$w.$buttons = $(E("div")).appendTo($w.$form).addClass("button-group");
|
||||
|
||||
$w.$Button = function(label, action){
|
||||
$w.$Button = (label, action) => {
|
||||
var $b = $(E("button")).appendTo($w.$buttons).text(label);
|
||||
$b.on("click", function(e){
|
||||
$b.on("click", e => {
|
||||
// prevent the form from submitting
|
||||
// @TODO: instead, prevent the form's submit event
|
||||
e.preventDefault();
|
||||
|
|
@ -205,7 +205,7 @@ function $FormWindow(title){
|
|||
action();
|
||||
});
|
||||
|
||||
$b.on("pointerdown", function(){
|
||||
$b.on("pointerdown", () => {
|
||||
$b[0].focus();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ class OnCanvasSelection extends OnCanvasObject {
|
|||
sel.$el.addClass("selection");
|
||||
var last_tool_transparent_mode = tool_transparent_mode;
|
||||
var last_background_color = colors.background;
|
||||
this._on_option_changed = function () {
|
||||
this._on_option_changed = () => {
|
||||
if (!sel.source_canvas) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@ class OnCanvasSelection extends OnCanvasObject {
|
|||
}
|
||||
sel.$el.append(sel.canvas);
|
||||
sel.$handles = $Handles(sel.$el, sel.canvas, { outset: 2 });
|
||||
sel.$el.on("user-resized", function (e, delta_x, delta_y, width, height) {
|
||||
sel.$el.on("user-resized", (e, delta_x, delta_y, width, height) => {
|
||||
sel.x += delta_x;
|
||||
sel.y += delta_y;
|
||||
sel.width = width;
|
||||
|
|
@ -77,7 +77,7 @@ class OnCanvasSelection extends OnCanvasObject {
|
|||
sel.resize();
|
||||
});
|
||||
var mox, moy;
|
||||
var pointermove = function (e) {
|
||||
var pointermove = e => {
|
||||
var m = e2c(e);
|
||||
sel.x = Math.max(Math.min(m.x - mox, canvas.width), -sel.width);
|
||||
sel.y = Math.max(Math.min(m.y - moy, canvas.height), -sel.height);
|
||||
|
|
@ -86,7 +86,7 @@ class OnCanvasSelection extends OnCanvasObject {
|
|||
sel.draw();
|
||||
}
|
||||
};
|
||||
sel.canvas_pointerdown = function (e) {
|
||||
sel.canvas_pointerdown = e => {
|
||||
e.preventDefault();
|
||||
var rect = sel.canvas.getBoundingClientRect();
|
||||
var cx = e.clientX - rect.left;
|
||||
|
|
@ -94,7 +94,7 @@ class OnCanvasSelection extends OnCanvasObject {
|
|||
mox = ~~(cx / rect.width * sel.canvas.width);
|
||||
moy = ~~(cy / rect.height * sel.canvas.height);
|
||||
$G.on("pointermove", pointermove);
|
||||
$G.one("pointerup", function () {
|
||||
$G.one("pointerup", () => {
|
||||
$G.off("pointermove", pointermove);
|
||||
});
|
||||
if (e.shiftKey) {
|
||||
|
|
@ -258,7 +258,7 @@ class OnCanvasSelection extends OnCanvasObject {
|
|||
var sel = this;
|
||||
sel.instantiate(null, "passive");
|
||||
if (sel.canvas) {
|
||||
undoable(0, function () {
|
||||
undoable(0, () => {
|
||||
ctx.copy(sel.canvas);
|
||||
$canvas_area.trigger("resize");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
var tb = this;
|
||||
tb.$el.addClass("textbox");
|
||||
tb.$editor = $(E("textarea")).addClass("textbox-editor");
|
||||
var update = function () {
|
||||
var update = () => {
|
||||
var font = text_tool_font;
|
||||
font.color = colors.foreground;
|
||||
font.background = tool_transparent_mode ? "transparent" : colors.background;
|
||||
|
|
@ -63,7 +63,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
tb.$el.append(tb.$editor);
|
||||
tb.$editor[0].focus();
|
||||
tb.$handles = $Handles(tb.$el, tb.$editor[0], { outset: 2 });
|
||||
tb.$el.on("user-resized", function (e, delta_x, delta_y, width, height) {
|
||||
tb.$el.on("user-resized", (e, delta_x, delta_y, width, height) => {
|
||||
tb.x += delta_x;
|
||||
tb.y += delta_y;
|
||||
tb.width = width;
|
||||
|
|
@ -71,7 +71,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
tb.position();
|
||||
});
|
||||
var mox, moy;
|
||||
var pointermove = function (e) {
|
||||
var pointermove = e => {
|
||||
var m = e2c(e);
|
||||
tb.x = Math.max(Math.min(m.x - mox, canvas.width), -tb.width);
|
||||
tb.y = Math.max(Math.min(m.y - moy, canvas.height), -tb.height);
|
||||
|
|
@ -80,7 +80,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
tb.draw();
|
||||
}
|
||||
};
|
||||
tb.$el.on("pointerdown", function (e) {
|
||||
tb.$el.on("pointerdown", e => {
|
||||
if (e.target instanceof HTMLInputElement ||
|
||||
e.target instanceof HTMLTextAreaElement ||
|
||||
e.target.classList.contains("handle")) {
|
||||
|
|
@ -93,7 +93,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
mox = ~~(cx);
|
||||
moy = ~~(cy);
|
||||
$G.on("pointermove", pointermove);
|
||||
$G.one("pointerup", function () {
|
||||
$G.one("pointerup", () => {
|
||||
$G.off("pointermove", pointermove);
|
||||
});
|
||||
});
|
||||
|
|
@ -106,7 +106,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
var tb = this;
|
||||
var text = tb.$editor.val();
|
||||
if (text) {
|
||||
undoable(0, function () {
|
||||
undoable(0, () => {
|
||||
var font = text_tool_font;
|
||||
ctx.fillStyle = font.background;
|
||||
ctx.fillRect(tb.x, tb.y, tb.width, tb.height);
|
||||
|
|
|
|||
64
src/app.js
64
src/app.js
|
|
@ -92,7 +92,7 @@ var $status_text = $(E("div")).addClass("status-text").appendTo($status_area);
|
|||
var $status_position = $(E("div")).addClass("status-coordinates").appendTo($status_area);
|
||||
var $status_size = $(E("div")).addClass("status-coordinates").appendTo($status_area);
|
||||
|
||||
$status_text.default = function(){
|
||||
$status_text.default = () => {
|
||||
$status_text.text("For Help, click Help Topics on the Help Menu.");
|
||||
};
|
||||
$status_text.default();
|
||||
|
|
@ -115,10 +115,10 @@ if(menu_bar_outside_frame){
|
|||
$menu_bar.prependTo($V);
|
||||
}
|
||||
|
||||
$menu_bar.on("info", function(e, info){
|
||||
$menu_bar.on("info", (e, info) => {
|
||||
$status_text.text(info);
|
||||
});
|
||||
$menu_bar.on("default-info", function(e){
|
||||
$menu_bar.on("default-info", e => {
|
||||
$status_text.default();
|
||||
});
|
||||
|
||||
|
|
@ -145,8 +145,8 @@ var $toolbox = $ToolBox(tools);
|
|||
// so it can display names of the tools, and maybe authors and previews (and not necessarily icons)
|
||||
var $colorbox = $ColorBox();
|
||||
|
||||
$canvas.on("user-resized", function(e, _x, _y, width, height){
|
||||
undoable(0, function(){
|
||||
$canvas.on("user-resized", (e, _x, _y, width, height) => {
|
||||
undoable(0, () => {
|
||||
canvas.width = Math.max(1, width);
|
||||
canvas.height = Math.max(1, height);
|
||||
ctx.disable_image_smoothing();
|
||||
|
|
@ -167,30 +167,30 @@ $canvas.on("user-resized", function(e, _x, _y, width, height){
|
|||
storage.set({
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
}, function(err){
|
||||
}, err => {
|
||||
// oh well
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
$G.on("resize", function(){ // for browser zoom, and in-app zoom of the canvas
|
||||
$G.on("resize", () => { // for browser zoom, and in-app zoom of the canvas
|
||||
update_canvas_rect();
|
||||
update_disable_aa();
|
||||
});
|
||||
$canvas_area.on("scroll", function() {
|
||||
$canvas_area.on("scroll", () => {
|
||||
update_canvas_rect();
|
||||
});
|
||||
$canvas_area.on("resize", function() {
|
||||
$canvas_area.on("resize", () => {
|
||||
update_magnified_canvas_size();
|
||||
});
|
||||
|
||||
$("body").on("dragover dragenter", function(e){
|
||||
$("body").on("dragover dragenter", e => {
|
||||
var dt = e.originalEvent.dataTransfer;
|
||||
var has_files = Array.from(dt.types).indexOf("Files") !== -1;
|
||||
if(has_files){
|
||||
e.preventDefault();
|
||||
}
|
||||
}).on("drop", function(e){
|
||||
}).on("drop", e => {
|
||||
if(e.isDefaultPrevented()){
|
||||
return;
|
||||
}
|
||||
|
|
@ -205,10 +205,10 @@ $("body").on("dragover dragenter", function(e){
|
|||
});
|
||||
|
||||
var keys = {};
|
||||
$G.on("keyup", function(e){
|
||||
$G.on("keyup", e => {
|
||||
delete keys[e.keyCode];
|
||||
});
|
||||
$G.on("keydown", function(e){
|
||||
$G.on("keydown", e => {
|
||||
if(e.isDefaultPrevented()){
|
||||
return;
|
||||
}
|
||||
|
|
@ -229,7 +229,7 @@ $G.on("keydown", function(e){
|
|||
// probably best to use a library at this point!
|
||||
|
||||
if(selection){
|
||||
var nudge_selection = function(delta_x, delta_y){
|
||||
var nudge_selection = (delta_x, delta_y) => {
|
||||
selection.x += delta_x;
|
||||
selection.y += delta_y;
|
||||
selection.position();
|
||||
|
|
@ -361,7 +361,7 @@ $G.on("keydown", function(e){
|
|||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
$G.on("cut copy paste", function(e){
|
||||
$G.on("cut copy paste", e => {
|
||||
if(e.isDefaultPrevented()){
|
||||
return;
|
||||
}
|
||||
|
|
@ -380,7 +380,7 @@ $G.on("cut copy paste", function(e){
|
|||
|
||||
if(e.type === "copy" || e.type === "cut"){
|
||||
if(selection && selection.canvas){
|
||||
var do_sync_clipboard_copy_or_cut = function() {
|
||||
var do_sync_clipboard_copy_or_cut = () => {
|
||||
// works only for pasting within a jspaint instance
|
||||
var data_url = selection.canvas.toDataURL();
|
||||
cd.setData("text/x-data-uri; type=image/png", data_url);
|
||||
|
|
@ -404,12 +404,12 @@ $G.on("cut copy paste", function(e){
|
|||
}
|
||||
}
|
||||
}else if(e.type === "paste"){
|
||||
$.each(cd.items, function(i, item){
|
||||
$.each(cd.items, (i, item) => {
|
||||
if(item.type.match(/^text\/(?:x-data-uri|uri-list|plain)|URL$/)){
|
||||
item.getAsString(function(text){
|
||||
item.getAsString(text => {
|
||||
var uris = get_URIs(text);
|
||||
if (uris.length > 0) {
|
||||
load_image_from_URI(uris[0], function(err, img){
|
||||
load_image_from_URI(uris[0], (err, img) => {
|
||||
if(err){ return show_resource_load_error_message(); }
|
||||
paste(img);
|
||||
});
|
||||
|
|
@ -434,7 +434,7 @@ set_magnification(1);
|
|||
storage.get({
|
||||
width: default_canvas_width,
|
||||
height: default_canvas_height,
|
||||
}, function(err, values){
|
||||
}, (err, values) => {
|
||||
if(err){return;}
|
||||
my_canvas_width = values.width;
|
||||
my_canvas_height = values.height;
|
||||
|
|
@ -449,7 +449,7 @@ storage.get({
|
|||
});
|
||||
|
||||
if(window.document_file_path_to_open){
|
||||
open_from_file_path(document_file_path_to_open, function(err){
|
||||
open_from_file_path(document_file_path_to_open, err => {
|
||||
if(err){
|
||||
return show_error_message("Failed to open file " + document_file_path_to_open, err);
|
||||
}
|
||||
|
|
@ -520,7 +520,7 @@ function tool_go(selected_tool, event_name){
|
|||
if(selected_tool.paint){
|
||||
if(selected_tool.continuous === "space"){
|
||||
var ham = brush_shape.match(/diagonal/) ? brosandham_line : bresenham_line;
|
||||
ham(pointer_previous.x, pointer_previous.y, pointer.x, pointer.y, function(x, y){
|
||||
ham(pointer_previous.x, pointer_previous.y, pointer.x, pointer.y, (x, y) => {
|
||||
selected_tool.paint(ctx, x, y);
|
||||
});
|
||||
}else{
|
||||
|
|
@ -582,11 +582,11 @@ function canvas_pointer_move(e){
|
|||
});
|
||||
pointer_previous = pointer;
|
||||
}
|
||||
$canvas.on("pointermove", function(e){
|
||||
$canvas.on("pointermove", e => {
|
||||
pointer = e2c(e);
|
||||
$status_position.text(pointer.x + "," + pointer.y);
|
||||
});
|
||||
$canvas.on("pointerenter", function(e){
|
||||
$canvas.on("pointerenter", e => {
|
||||
pointer_over_canvas = true;
|
||||
|
||||
update_helper_layer();
|
||||
|
|
@ -596,7 +596,7 @@ $canvas.on("pointerenter", function(e){
|
|||
update_helper_layer_on_pointermove_active = true;
|
||||
}
|
||||
});
|
||||
$canvas.on("pointerleave", function(e){
|
||||
$canvas.on("pointerleave", e => {
|
||||
pointer_over_canvas = false;
|
||||
|
||||
$status_position.text("");
|
||||
|
|
@ -612,7 +612,7 @@ $canvas.on("pointerleave", function(e){
|
|||
var pointer_active = false;
|
||||
var pointer_over_canvas = false;
|
||||
var update_helper_layer_on_pointermove_active = false;
|
||||
$canvas.on("pointerdown", function(e){
|
||||
$canvas.on("pointerdown", e => {
|
||||
update_canvas_rect();
|
||||
|
||||
// Quick Undo when there are multiple pointers (i.e. for touch)
|
||||
|
|
@ -626,7 +626,7 @@ $canvas.on("pointerdown", function(e){
|
|||
pointer_active = true;
|
||||
pointer_type = e.pointerType;
|
||||
pointer_buttons = e.buttons;
|
||||
$G.one("pointerup", function(e){
|
||||
$G.one("pointerup", e => {
|
||||
pointer_active = false;
|
||||
update_helper_layer();
|
||||
|
||||
|
|
@ -649,7 +649,7 @@ $canvas.on("pointerdown", function(e){
|
|||
shift = e.shiftKey;
|
||||
pointer_start = pointer_previous = pointer = e2c(e);
|
||||
|
||||
var pointerdown_action = function(){
|
||||
var pointerdown_action = () => {
|
||||
// TODO for multitools: don't register event listeners for each tool
|
||||
selected_tools.forEach((selected_tool)=> {
|
||||
|
||||
|
|
@ -661,7 +661,7 @@ $canvas.on("pointerdown", function(e){
|
|||
if(selected_tool.continuous === "time"){
|
||||
var iid = setInterval(()=> { tool_go(selected_tool); }, 5);
|
||||
}
|
||||
$G.one("pointerup", function(e, canceling){
|
||||
$G.one("pointerup", (e, canceling) => {
|
||||
button = undefined;
|
||||
reverse = false;
|
||||
if(canceling){
|
||||
|
|
@ -692,7 +692,7 @@ $canvas.on("pointerdown", function(e){
|
|||
update_helper_layer();
|
||||
});
|
||||
|
||||
$canvas_area.on("pointerdown", function(e){
|
||||
$canvas_area.on("pointerdown", e => {
|
||||
if(e.button === 0){
|
||||
if($canvas_area.is(e.target)){
|
||||
if(selection){
|
||||
|
|
@ -706,7 +706,7 @@ $app
|
|||
.add($toolbox)
|
||||
// .add($toolbox2)
|
||||
.add($colorbox)
|
||||
.on("mousedown selectstart contextmenu", function(e){
|
||||
.on("mousedown selectstart contextmenu", e => {
|
||||
if(e.isDefaultPrevented()){
|
||||
return;
|
||||
}
|
||||
|
|
@ -729,6 +729,6 @@ $app
|
|||
});
|
||||
|
||||
// Stop drawing (or dragging or whatver) if you Alt+Tab or whatever
|
||||
$G.on("blur", function(e){
|
||||
$G.on("blur", e => {
|
||||
$G.triggerHandler("pointerup");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
|
||||
(function(){
|
||||
(() => {
|
||||
|
||||
var may_be_changed = function(){
|
||||
var may_be_changed = () => {
|
||||
window.console && console.log("change may have occured");
|
||||
$canvas.triggerHandler("change");
|
||||
};
|
||||
|
||||
var debug_event = function(e, synthetic){
|
||||
var debug_event = (e, synthetic) => {
|
||||
// var label = synthetic ? "(synthetic)" : "(normal)";
|
||||
// window.console && console.debug && console.debug(e.type, label);
|
||||
};
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
$canvas.on("user-resized.ugly-hook", may_be_changed);
|
||||
|
||||
$canvas_area.on("pointerdown.ugly-hook", "*", function(e, synthetic){
|
||||
$canvas_area.on("pointerdown.ugly-hook", "*", (e, synthetic) => {
|
||||
debug_event(e, synthetic);
|
||||
if(synthetic){ return; }
|
||||
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
}else{
|
||||
// Changes may occur when you release
|
||||
pointer_operations = [e];
|
||||
var pointermove = function(e, synthetic){
|
||||
var pointermove = (e, synthetic) => {
|
||||
debug_event(e, synthetic);
|
||||
if(synthetic){ return; }
|
||||
|
||||
pointer_operations.push(e);
|
||||
};
|
||||
$G.on("pointermove.ugly-hook", pointermove);
|
||||
$G.one("pointerup.ugly-hook", function(e, synthetic){
|
||||
$G.one("pointerup.ugly-hook", (e, synthetic) => {
|
||||
debug_event(e, synthetic);
|
||||
if(synthetic){ return; }
|
||||
|
||||
|
|
@ -47,8 +47,8 @@
|
|||
}
|
||||
});
|
||||
|
||||
$G.on("session-update.ugly-hook", function(){
|
||||
$G.on("session-update.ugly-hook", () => {
|
||||
setTimeout(may_be_changed);
|
||||
});
|
||||
|
||||
}());
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ var reg_contents = `Windows Registry Editor Version 5.00
|
|||
`; // oof \\\\
|
||||
var reg_file_path = path.join(is_dev ? "." : path.dirname(argv[0]), `set-jspaint${is_dev ? "-DEV-MODE" : ""}-as-default-image-editor.reg`);
|
||||
if(process.platform == "win32" && !is_dev){
|
||||
fs.writeFile(reg_file_path, reg_contents, function(err){
|
||||
fs.writeFile(reg_file_path, reg_contents, err => {
|
||||
if(err){
|
||||
return console.error(err);
|
||||
}
|
||||
|
|
@ -36,8 +36,8 @@ if (process.platform == "win32" && argv.length >= 2) {
|
|||
}
|
||||
}
|
||||
|
||||
window.open_from_file_path = function(file_path, callback, canceled){
|
||||
fs.readFile(file_path, function(err, buffer) {
|
||||
window.open_from_file_path = (file_path, callback, canceled) => {
|
||||
fs.readFile(file_path, (err, buffer) => {
|
||||
if(err){
|
||||
return callback(err);
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@ window.open_from_file_path = function(file_path, callback, canceled){
|
|||
});
|
||||
};
|
||||
|
||||
window.save_to_file_path = function(filePath, formatName, savedCallback){
|
||||
window.save_to_file_path = (filePath, formatName, savedCallback) => {
|
||||
var mimeType = {
|
||||
"JPEG": "image/jpeg",
|
||||
"PNG": "image/png",
|
||||
|
|
@ -68,16 +68,16 @@ window.save_to_file_path = function(filePath, formatName, savedCallback){
|
|||
// if(mimeType === "image/gif"){
|
||||
// new GIF();
|
||||
// }
|
||||
canvas.toBlob(function(blob){
|
||||
canvas.toBlob(blob => {
|
||||
if(blob.type !== mimeType){
|
||||
return show_error_message("Failed to save as " + formatName + " (your browser doesn't support exporting a canvas as \"" + mimeType + "\")");
|
||||
}
|
||||
sanity_check_blob(blob, function(){
|
||||
blob_to_buffer(blob, function(err, buffer){
|
||||
sanity_check_blob(blob, () => {
|
||||
blob_to_buffer(blob, (err, buffer) => {
|
||||
if(err){
|
||||
return show_error_message("Failed to save! (Technically, failed to convert a Blob to a Buffer.)", err);
|
||||
}
|
||||
fs.writeFile(filePath, buffer, function(err){
|
||||
fs.writeFile(filePath, buffer, err => {
|
||||
if(err){
|
||||
return show_error_message("Failed to save file!", err);
|
||||
}
|
||||
|
|
@ -90,8 +90,8 @@ window.save_to_file_path = function(filePath, formatName, savedCallback){
|
|||
};
|
||||
|
||||
// TODO: window.platform.saveCanvasAs etc. or platformIntegration or system or something
|
||||
window.systemSaveCanvasAs = function(canvas, suggestedFileName, savedCallback){
|
||||
var getExtension = function(filePathOrName){
|
||||
window.systemSaveCanvasAs = (canvas, suggestedFileName, savedCallback) => {
|
||||
var getExtension = filePathOrName => {
|
||||
var splitByDots = filePathOrName.split(/\./g);
|
||||
return splitByDots[splitByDots.length - 1].toLowerCase();
|
||||
};
|
||||
|
|
@ -116,7 +116,7 @@ window.systemSaveCanvasAs = function(canvas, suggestedFileName, savedCallback){
|
|||
dialog.showSaveDialog({
|
||||
defaultPath: suggestedFileName,
|
||||
filters: filters,
|
||||
}, function(filePath) {
|
||||
}, filePath => {
|
||||
if(!filePath){
|
||||
return; // user canceled
|
||||
}
|
||||
|
|
@ -125,7 +125,7 @@ window.systemSaveCanvasAs = function(canvas, suggestedFileName, savedCallback){
|
|||
// TODO: Linux/Unix?? you're not supposed to need file extensions
|
||||
return show_error_message("Missing file extension - try adding .png to the file name");
|
||||
}
|
||||
var formatNameMatched = ((filters.find(function(filter){return filter.extensions.indexOf(extension) > -1})) || {}).name;
|
||||
var formatNameMatched = ((filters.find(filter => {return filter.extensions.indexOf(extension) > -1})) || {}).name;
|
||||
if(!formatNameMatched){
|
||||
return show_error_message("Can't save as *." +extension + " - try adding .png to the file name");
|
||||
}
|
||||
|
|
@ -134,7 +134,7 @@ window.systemSaveCanvasAs = function(canvas, suggestedFileName, savedCallback){
|
|||
});
|
||||
};
|
||||
|
||||
window.systemSetAsWallpaperCentered = function(c){
|
||||
window.systemSetAsWallpaperCentered = c => {
|
||||
var dataPath = require('electron').remote.app.getPath("userData");
|
||||
|
||||
var imgPath = require("path").join(dataPath, "bg.png");
|
||||
|
|
@ -153,14 +153,14 @@ window.systemSetAsWallpaperCentered = function(c){
|
|||
wallpaperCanvas.ctx.drawImage(c, ~~x, ~~y);
|
||||
}
|
||||
|
||||
get_array_buffer_from_canvas(wallpaperCanvas).then(function(array_buffer){
|
||||
get_array_buffer_from_canvas(wallpaperCanvas).then(array_buffer => {
|
||||
var buffer = new Buffer(array_buffer);
|
||||
fs.writeFile(imgPath, buffer, function(err){
|
||||
fs.writeFile(imgPath, buffer, err => {
|
||||
if(err){
|
||||
return show_error_message("Failed to set as desktop background: couldn't write temporary image file.", err);
|
||||
}
|
||||
// {scale: "center"} only supported on macOS; see above workaround
|
||||
wallpaper.set(imgPath, {scale: "center"}, function(err){
|
||||
wallpaper.set(imgPath, {scale: "center"}, err => {
|
||||
if(err){
|
||||
show_error_message("Failed to set as desktop background!", err);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const createWindow = () => {
|
|||
mainWindow = null;
|
||||
});
|
||||
|
||||
const handleRedirect = function(e, url) {
|
||||
const handleRedirect = (e, url) => {
|
||||
// check that the URL is not part of the app
|
||||
if(url.indexOf("file://") === -1){
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ extra_tools = [{
|
|||
this.rendered_size = brush_size;
|
||||
this.rendered_shape = brush_shape;
|
||||
}
|
||||
var draw_brush = function(x, y){
|
||||
var draw_brush = (x, y) => {
|
||||
ctx.drawImage(brush_canvas, Math.ceil(x-csz/2), Math.ceil(y-csz/2));
|
||||
};
|
||||
var r = airbrush_size * 2;
|
||||
|
|
@ -83,7 +83,7 @@ extra_tools = [{
|
|||
this.rendered_size = brush_size;
|
||||
this.rendered_shape = brush_shape;
|
||||
}
|
||||
var draw_brush = function(x, y){
|
||||
var draw_brush = (x, y) => {
|
||||
ctx.drawImage(brush_canvas, Math.ceil(x-csz/2), Math.ceil(y-csz/2));
|
||||
};
|
||||
for(var i = 0; i < 60; i++){
|
||||
|
|
|
|||
150
src/functions.js
150
src/functions.js
|
|
@ -156,7 +156,7 @@ function show_custom_zoom_window() {
|
|||
var $really_custom_radio_option = $fieldset.find("input[value='really-custom']");
|
||||
var $really_custom_input = $fieldset.find("input[name='really-custom-zoom-input']");
|
||||
|
||||
$really_custom_input.closest("label").on("click", function(e){
|
||||
$really_custom_input.closest("label").on("click", e => {
|
||||
$really_custom_radio_option.prop("checked", true);
|
||||
$really_custom_input[0].focus();
|
||||
});
|
||||
|
|
@ -168,7 +168,7 @@ function show_custom_zoom_window() {
|
|||
|
||||
$fieldset.find("label").css({display: "block"});
|
||||
|
||||
$w.$Button("Okay", function(){
|
||||
$w.$Button("Okay", () => {
|
||||
var option_val = $fieldset.find("input[name='custom-zoom-radio']:checked").val();
|
||||
var mag;
|
||||
if(option_val === "really-custom"){
|
||||
|
|
@ -181,7 +181,7 @@ function show_custom_zoom_window() {
|
|||
if(isNaN(mag)){
|
||||
var $msgw = new $FormWindow("Invalid Value").addClass("dialogue-window");
|
||||
$msgw.$main.text("The value specified for custom zoom was invalid.");
|
||||
$msgw.$Button("Okay", function(){
|
||||
$msgw.$Button("Okay", () => {
|
||||
$msgw.close();
|
||||
});
|
||||
return;
|
||||
|
|
@ -194,7 +194,7 @@ function show_custom_zoom_window() {
|
|||
|
||||
$w.close();
|
||||
})[0].focus();
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
$w.close();
|
||||
});
|
||||
|
||||
|
|
@ -255,13 +255,13 @@ function create_and_trigger_input(attrs, callback){
|
|||
// TODO: rename these functions to lowercase (and maybe say "files" in this case)
|
||||
function get_FileList_from_file_select_dialog(callback){
|
||||
// TODO: specify mime types?
|
||||
create_and_trigger_input({type: "file"}, function(input){
|
||||
create_and_trigger_input({type: "file"}, input => {
|
||||
callback(input.files);
|
||||
});
|
||||
}
|
||||
|
||||
function open_from_Image(img, callback, canceled){
|
||||
are_you_sure(function(){
|
||||
are_you_sure(() => {
|
||||
// TODO: shouldn't open_from_* start a new session?
|
||||
|
||||
this_ones_a_frame_changer();
|
||||
|
|
@ -281,7 +281,7 @@ function open_from_Image(img, callback, canceled){
|
|||
function get_URIs(text) {
|
||||
// parse text/uri-list
|
||||
// get lines, discarding comments
|
||||
var lines = text.split(/[\n\r]+/).filter(function(line){return line[0] !== "#" && line});
|
||||
var lines = text.split(/[\n\r]+/).filter(line => {return line[0] !== "#" && line});
|
||||
// discard text with too many lines (likely pasted HTML or something) - may want to revisit this
|
||||
if (lines.length > 15) {
|
||||
return [];
|
||||
|
|
@ -300,9 +300,9 @@ function get_URIs(text) {
|
|||
function load_image_from_URI(uri, callback){
|
||||
// TODO: if URI is not blob: or data:, show dialog with progress bar and this string from mspaint.exe: "Downloading picture"
|
||||
fetch(uri)
|
||||
.then(function(response) {
|
||||
.then(response => {
|
||||
return response.blob();
|
||||
}).then(function(blob) {
|
||||
}).then(blob => {
|
||||
var img = new Image();
|
||||
img.crossOrigin = "Anonymous";
|
||||
img.onload = function(){
|
||||
|
|
@ -311,28 +311,28 @@ function load_image_from_URI(uri, callback){
|
|||
}
|
||||
callback(null, img);
|
||||
};
|
||||
img.onerror = function(e) {
|
||||
img.onerror = e => {
|
||||
callback && callback(new Error("Image failed to load"));
|
||||
};
|
||||
img.src = window.URL.createObjectURL(blob);
|
||||
}).catch(function(exception) {
|
||||
}).catch(exception => {
|
||||
callback && callback(new Error("Image failed to load"));
|
||||
});
|
||||
}
|
||||
function open_from_URI(uri, callback, canceled){
|
||||
load_image_from_URI(uri, function(err, img){
|
||||
load_image_from_URI(uri, (err, img) => {
|
||||
if(err){ return callback(err); }
|
||||
open_from_Image(img, callback, canceled);
|
||||
});
|
||||
}
|
||||
function open_from_File(file, callback, canceled){
|
||||
var blob_url = URL.createObjectURL(file);
|
||||
load_image_from_URI(blob_url, function(err, img){
|
||||
load_image_from_URI(blob_url, (err, img) => {
|
||||
// revoke object URL regardless of error
|
||||
URL.revokeObjectURL(file);
|
||||
if(err){ return callback(err); }
|
||||
|
||||
open_from_Image(img, function(){
|
||||
open_from_Image(img, () => {
|
||||
file_name = file.name;
|
||||
document_file_path = file.path; // available in Electron
|
||||
update_title();
|
||||
|
|
@ -357,14 +357,14 @@ function get_image_file_from_FileList_or_show_error(files, user_input_method_ver
|
|||
function open_from_FileList(files, user_input_method_verb_past_tense){
|
||||
var file = get_image_file_from_FileList_or_show_error(files, user_input_method_verb_past_tense);
|
||||
if(file){
|
||||
open_from_File(file, function(err){
|
||||
open_from_File(file, err => {
|
||||
if(err){ return show_error_message("Failed to open file:", err); }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function file_new(){
|
||||
are_you_sure(function(){
|
||||
are_you_sure(() => {
|
||||
this_ones_a_frame_changer();
|
||||
|
||||
reset_file();
|
||||
|
|
@ -379,7 +379,7 @@ function file_new(){
|
|||
// there's this little thing called Inversion of Control...
|
||||
// also paste_from_file_select_dialog
|
||||
function file_open(){
|
||||
get_FileList_from_file_select_dialog(function(files){
|
||||
get_FileList_from_file_select_dialog(files => {
|
||||
open_from_FileList(files, "selected");
|
||||
});
|
||||
}
|
||||
|
|
@ -395,7 +395,7 @@ function file_load_from_url(){
|
|||
// TODO: URL validation (input has to be in a form (and we don't want the form to submit))
|
||||
$w.$main.html("<label>URL: <input type='url' required value='' class='url-input'/></label>");
|
||||
var $input = $w.$main.find(".url-input");
|
||||
$w.$Button("Load", function(){
|
||||
$w.$Button("Load", () => {
|
||||
var uris = get_URIs($input.val());
|
||||
if (uris.length > 0) {
|
||||
// TODO: retry loading if same URL entered
|
||||
|
|
@ -408,7 +408,7 @@ function file_load_from_url(){
|
|||
show_error_message("Invalid URL. It must include a protocol (https:// or http://)");
|
||||
}
|
||||
});
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
|
|
@ -424,7 +424,7 @@ function file_save(){
|
|||
}
|
||||
if(document_file_path){
|
||||
// TODO: save as JPEG by default if the previously opened/saved file was a JPEG?
|
||||
return save_to_file_path(document_file_path, "PNG", function(saved_file_path, saved_file_name){
|
||||
return save_to_file_path(document_file_path, "PNG", (saved_file_path, saved_file_name) => {
|
||||
saved = true;
|
||||
document_file_path = saved_file_path;
|
||||
file_name = saved_file_name;
|
||||
|
|
@ -436,7 +436,7 @@ function file_save(){
|
|||
|
||||
function file_save_as(){
|
||||
deselect();
|
||||
save_canvas_as(canvas, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + ".png", function(saved_file_path, saved_file_name){
|
||||
save_canvas_as(canvas, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + ".png", (saved_file_path, saved_file_name) => {
|
||||
saved = true;
|
||||
document_file_path = saved_file_path;
|
||||
file_name = saved_file_name;
|
||||
|
|
@ -452,20 +452,20 @@ function are_you_sure(action, canceled){
|
|||
var $w = new $FormWindow().addClass("dialogue-window");
|
||||
$w.title("Paint");
|
||||
$w.$main.text("Save changes to "+file_name+"?");
|
||||
$w.$Button("Save", function(){
|
||||
$w.$Button("Save", () => {
|
||||
$w.close();
|
||||
file_save();
|
||||
action();
|
||||
})[0].focus();
|
||||
$w.$Button("Discard", function(){
|
||||
$w.$Button("Discard", () => {
|
||||
$w.close();
|
||||
action();
|
||||
});
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
$w.close();
|
||||
canceled && canceled();
|
||||
});
|
||||
$w.$x.on("click", function(){
|
||||
$w.$x.on("click", () => {
|
||||
canceled && canceled();
|
||||
});
|
||||
$w.center();
|
||||
|
|
@ -490,7 +490,7 @@ function show_error_message(message, error){
|
|||
overflow: "auto",
|
||||
});
|
||||
}
|
||||
$w.$Button("OK", function(){
|
||||
$w.$Button("OK", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
|
|
@ -510,7 +510,7 @@ function show_resource_load_error_message(){
|
|||
", such as <a href='https://imgur.com/'>Imgur</a>."
|
||||
);
|
||||
$w.$main.css({maxWidth: "500px"});
|
||||
$w.$Button("OK", function(){
|
||||
$w.$Button("OK", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
|
|
@ -664,7 +664,7 @@ function paste_image_from_file(file){
|
|||
// TODO: revoke object URL
|
||||
var blob_url = URL.createObjectURL(file);
|
||||
// paste_image_from_URI(blob_url);
|
||||
load_image_from_URI(blob_url, function(err, img){
|
||||
load_image_from_URI(blob_url, (err, img) => {
|
||||
// TODO: this shouldn't really have the CORS error message, if it's from a blob URI
|
||||
if(err){ return show_resource_load_error_message(); }
|
||||
paste(img);
|
||||
|
|
@ -674,7 +674,7 @@ function paste_image_from_file(file){
|
|||
}
|
||||
|
||||
function paste_from_file_select_dialog(){
|
||||
get_FileList_from_file_select_dialog(function(files){
|
||||
get_FileList_from_file_select_dialog(files => {
|
||||
var file = get_image_file_from_FileList_or_show_error(files, "selected");
|
||||
if(file){
|
||||
paste_image_from_file(file);
|
||||
|
|
@ -691,10 +691,10 @@ function paste(img){
|
|||
"The image is bigger than the canvas.<br>" +
|
||||
"Would you like the canvas to be enlarged?<br>"
|
||||
);
|
||||
$w.$Button("Enlarge", function(){
|
||||
$w.$Button("Enlarge", () => {
|
||||
$w.close();
|
||||
// Additional undoable
|
||||
undoable(function(){
|
||||
undoable(() => {
|
||||
var original = undos[undos.length-1];
|
||||
canvas.width = Math.max(original.width, img.width);
|
||||
canvas.height = Math.max(original.height, img.height);
|
||||
|
|
@ -708,11 +708,11 @@ function paste(img){
|
|||
$canvas_area.trigger("resize");
|
||||
});
|
||||
})[0].focus();
|
||||
$w.$Button("Crop", function(){
|
||||
$w.$Button("Crop", () => {
|
||||
$w.close();
|
||||
do_the_paste();
|
||||
});
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
|
|
@ -744,11 +744,11 @@ function render_history_as_gif(){
|
|||
});
|
||||
$win.$main.css({padding: 5});
|
||||
|
||||
var $cancel = $win.$Button('Cancel', function(){
|
||||
var $cancel = $win.$Button('Cancel', () => {
|
||||
$win.close();
|
||||
});
|
||||
|
||||
$win.on('close', function(){
|
||||
$win.on('close', () => {
|
||||
gif.abort();
|
||||
});
|
||||
|
||||
|
|
@ -762,12 +762,12 @@ function render_history_as_gif(){
|
|||
height: height,
|
||||
});
|
||||
|
||||
gif.on("progress", function(p){
|
||||
gif.on("progress", p => {
|
||||
$progress.val(p);
|
||||
$progress_percent.text(~~(p*100)+"%");
|
||||
});
|
||||
|
||||
gif.on("finished", function(blob){
|
||||
gif.on("finished", blob => {
|
||||
$win.title("Rendered GIF");
|
||||
var url = URL.createObjectURL(blob);
|
||||
$output.empty().append(
|
||||
|
|
@ -777,15 +777,15 @@ function render_history_as_gif(){
|
|||
height: height,
|
||||
})
|
||||
);
|
||||
$win.$Button("Upload to Imgur", function(){
|
||||
$win.$Button("Upload to Imgur", () => {
|
||||
$win.close();
|
||||
sanity_check_blob(blob, function(){
|
||||
sanity_check_blob(blob, () => {
|
||||
show_imgur_uploader(blob);
|
||||
});
|
||||
});
|
||||
$win.$Button("Save", function(){
|
||||
$win.$Button("Save", () => {
|
||||
$win.close();
|
||||
sanity_check_blob(blob, function(){
|
||||
sanity_check_blob(blob, () => {
|
||||
saveAs(blob, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + " history.gif");
|
||||
});
|
||||
});
|
||||
|
|
@ -872,12 +872,12 @@ function undoable(callback, action){
|
|||
var $w = new $FormWindow().addClass("dialogue-window");
|
||||
$w.title("Paint");
|
||||
$w.$main.html("Discard "+redos.length+" possible redo-able actions?<br>(Ctrl+Y or Ctrl+Shift+Z to redo)<br>");
|
||||
$w.$Button(action ? "Discard and Apply" : "Discard", function(){
|
||||
$w.$Button(action ? "Discard and Apply" : "Discard", () => {
|
||||
$w.close();
|
||||
redos = [];
|
||||
action && action();
|
||||
})[0].focus();
|
||||
$w.$Button("Keep", function(){
|
||||
$w.$Button("Keep", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
|
|
@ -1009,16 +1009,16 @@ async function edit_copy(execCommandFallback){
|
|||
throw new Error("The Async Clipboard API is not supported by this browser. " + browserRecommendationForClipboardAccess);
|
||||
}
|
||||
}
|
||||
selection.canvas.toBlob(function(blob) {
|
||||
sanity_check_blob(blob, function(){
|
||||
selection.canvas.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
navigator.clipboard.write([
|
||||
new ClipboardItem(Object.defineProperty({}, blob.type, {
|
||||
value: blob,
|
||||
enumerable: true,
|
||||
}))
|
||||
]).then(function(){
|
||||
]).then(() => {
|
||||
console.log("Copied image to the clipboard");
|
||||
}, function(error){
|
||||
}, error => {
|
||||
show_error_message("Failed to copy to the Clipboard.", error);
|
||||
});
|
||||
});
|
||||
|
|
@ -1072,7 +1072,7 @@ async function edit_paste(execCommandFallback){
|
|||
if(clipboardText) {
|
||||
var uris = get_URIs(clipboardText);
|
||||
if (uris.length > 0) {
|
||||
load_image_from_URI(uris[0], function(err, img){
|
||||
load_image_from_URI(uris[0], (err, img) => {
|
||||
if(err){ return show_resource_load_error_message(); }
|
||||
paste(img);
|
||||
});
|
||||
|
|
@ -1092,7 +1092,7 @@ async function edit_paste(execCommandFallback){
|
|||
}
|
||||
|
||||
function image_invert(){
|
||||
apply_image_transformation(function(original_canvas, original_ctx, new_canvas, new_ctx){
|
||||
apply_image_transformation((original_canvas, original_ctx, new_canvas, new_ctx) => {
|
||||
var id = original_ctx.getImageData(0, 0, original_canvas.width, original_canvas.height);
|
||||
for(var i=0; i<id.data.length; i+=4){
|
||||
id.data[i+0] = 255 - id.data[i+0];
|
||||
|
|
@ -1104,7 +1104,7 @@ function image_invert(){
|
|||
}
|
||||
|
||||
function clear(){
|
||||
undoable(0, function(){
|
||||
undoable(0, () => {
|
||||
this_ones_a_frame_changer();
|
||||
|
||||
if(transparency){
|
||||
|
|
@ -1203,7 +1203,7 @@ function detect_transparency(){
|
|||
|
||||
function make_monochrome_pattern(lightness){
|
||||
|
||||
var dither_threshold_table = Array.from({length: 64}, function(undef, p){
|
||||
var dither_threshold_table = Array.from({length: 64}, (undef, p) => {
|
||||
var q = p ^ (p >> 3);
|
||||
return (
|
||||
((p & 4) >> 2) | ((q & 4) >> 1) |
|
||||
|
|
@ -1313,7 +1313,7 @@ function image_attributes(){
|
|||
$units.append('<label><input type="radio" name="units" value="cm">Cm</label>');
|
||||
$units.append('<label><input type="radio" name="units" value="px">Pixels</label>');
|
||||
$units.find("[value=" + current_unit + "]").attr({checked: true});
|
||||
$units.on("change", function(){
|
||||
$units.on("change", () => {
|
||||
var new_unit = $units.find(":checked").val();
|
||||
$width.val(width_in_px / unit_sizes_in_px[new_unit]);
|
||||
$height.val(height_in_px / unit_sizes_in_px[new_unit]);
|
||||
|
|
@ -1332,7 +1332,7 @@ function image_attributes(){
|
|||
|
||||
// Buttons on the right
|
||||
|
||||
$w.$Button("Okay", function(){
|
||||
$w.$Button("Okay", () => {
|
||||
var transparency_option = $transparency.find(":checked").val();
|
||||
var colors_option = $colors.find(":checked").val();
|
||||
var unit = $units.find(":checked").val();
|
||||
|
|
@ -1363,11 +1363,11 @@ function image_attributes(){
|
|||
image_attributes.$window.close();
|
||||
})[0].focus();
|
||||
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
image_attributes.$window.close();
|
||||
});
|
||||
|
||||
$w.$Button("Default", function(){
|
||||
$w.$Button("Default", () => {
|
||||
width_in_px = default_canvas_width;
|
||||
height_in_px = default_canvas_height;
|
||||
$width.val(width_in_px / unit_sizes_in_px[current_unit]);
|
||||
|
|
@ -1396,7 +1396,7 @@ function image_flip_and_rotate(){
|
|||
$rotate_by_angle.append("<label><input type='radio' name='rotate-by-angle' value='arbitrary'/><input type='number' min='-360' max='360' name='rotate-by-arbitrary-angle' value=''/> Degrees</label>");
|
||||
$rotate_by_angle.find("input").attr({disabled: true});
|
||||
|
||||
$fieldset.find("input").on("change", function(){
|
||||
$fieldset.find("input").on("change", () => {
|
||||
var action = $fieldset.find("input[name='flip-or-rotate']:checked").val();
|
||||
$rotate_by_angle.find("input").attr({
|
||||
disabled: action !== "rotate-by-angle"
|
||||
|
|
@ -1420,7 +1420,7 @@ function image_flip_and_rotate(){
|
|||
|
||||
$fieldset.find("label").css({display: "block"});
|
||||
|
||||
$w.$Button("Okay", function(){
|
||||
$w.$Button("Okay", () => {
|
||||
var action = $fieldset.find("input[name='flip-or-rotate']:checked").val();
|
||||
var angle_val = $fieldset.find("input[name='rotate-by-angle']:checked").val();
|
||||
if(angle_val === "arbitrary"){
|
||||
|
|
@ -1432,7 +1432,7 @@ function image_flip_and_rotate(){
|
|||
if(isNaN(angle)){
|
||||
var $msgw = new $FormWindow("Invalid Value").addClass("dialogue-window");
|
||||
$msgw.$main.text("The value specified for Degrees was invalid.");
|
||||
$msgw.$Button("Okay", function(){
|
||||
$msgw.$Button("Okay", () => {
|
||||
$msgw.close();
|
||||
});
|
||||
return;
|
||||
|
|
@ -1454,7 +1454,7 @@ function image_flip_and_rotate(){
|
|||
|
||||
$w.close();
|
||||
})[0].focus();
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
$w.close();
|
||||
});
|
||||
|
||||
|
|
@ -1469,7 +1469,7 @@ function image_stretch_and_skew(){
|
|||
var $fieldset_skew = $(E("fieldset")).appendTo($w.$main);
|
||||
$fieldset_skew.append("<legend>Skew</legend><table></table>");
|
||||
|
||||
var $RowInput = function($table, img_src, label_text, default_value, label_unit){
|
||||
var $RowInput = ($table, img_src, label_text, default_value, label_unit) => {
|
||||
var $tr = $(E("tr")).appendTo($table);
|
||||
var $img = $(E("img")).attr({
|
||||
src: "images/transforms/" + img_src + ".png"
|
||||
|
|
@ -1494,7 +1494,7 @@ function image_stretch_and_skew(){
|
|||
var skew_x = $RowInput($fieldset_skew.find("table"), "skew-x", "Horizontal:", 0, "Degrees");
|
||||
var skew_y = $RowInput($fieldset_skew.find("table"), "skew-y", "Vertical:", 0, "Degrees");
|
||||
|
||||
$w.$Button("Okay", function(){
|
||||
$w.$Button("Okay", () => {
|
||||
var xscale = parseFloat(stretch_x.val())/100;
|
||||
var yscale = parseFloat(stretch_y.val())/100;
|
||||
var hskew = parseFloat(skew_x.val())/360*TAU;
|
||||
|
|
@ -1504,7 +1504,7 @@ function image_stretch_and_skew(){
|
|||
$w.close();
|
||||
})[0].focus();
|
||||
|
||||
$w.$Button("Cancel", function(){
|
||||
$w.$Button("Cancel", () => {
|
||||
$w.close();
|
||||
});
|
||||
|
||||
|
|
@ -1519,10 +1519,10 @@ function save_canvas_as(canvas, fileName, savedCallbackUnreliable){
|
|||
}
|
||||
|
||||
// TODO: file name + type dialog
|
||||
canvas.toBlob(function(blob){
|
||||
sanity_check_blob(blob, function(){
|
||||
canvas.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
var file_saver = saveAs(blob, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + ".png");
|
||||
file_saver.onwriteend = function(){
|
||||
file_saver.onwriteend = () => {
|
||||
// this won't fire in chrome
|
||||
savedCallbackUnreliable();
|
||||
};
|
||||
|
|
@ -1554,8 +1554,8 @@ function set_as_wallpaper_centered(c){
|
|||
return window.systemSetAsWallpaperCentered(c);
|
||||
}
|
||||
|
||||
c.toBlob(function(blob){
|
||||
sanity_check_blob(blob, function(){
|
||||
c.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
saveAs(blob, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + " wallpaper.png");
|
||||
});
|
||||
});
|
||||
|
|
@ -1566,19 +1566,19 @@ function set_as_wallpaper_centered(c){
|
|||
* @return {Promise}
|
||||
*/
|
||||
function get_array_buffer_from_canvas(canvas) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
return new Promise((resolve, reject) => {
|
||||
var file_reader = new FileReader();
|
||||
|
||||
file_reader.onloadend = function() {
|
||||
file_reader.onloadend = () => {
|
||||
resolve(file_reader.result);
|
||||
};
|
||||
|
||||
file_reader.onerror = function() {
|
||||
file_reader.onerror = () => {
|
||||
reject(new Error("Failed to read canvas image to array buffer"));
|
||||
};
|
||||
|
||||
canvas.toBlob(function(blob) {
|
||||
sanity_check_blob(blob, function(){
|
||||
canvas.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
file_reader.readAsArrayBuffer(blob);
|
||||
});
|
||||
});
|
||||
|
|
@ -1587,8 +1587,8 @@ function get_array_buffer_from_canvas(canvas) {
|
|||
|
||||
function save_selection_to_file(){
|
||||
if(selection && selection.canvas){
|
||||
selection.canvas.toBlob(function(blob){
|
||||
sanity_check_blob(blob, function(){
|
||||
selection.canvas.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
saveAs(blob, "selection.png");
|
||||
});
|
||||
});
|
||||
|
|
@ -1606,7 +1606,7 @@ function sanity_check_blob(blob, okay_callback){
|
|||
"<a href='https://github.com/1j01/jspaint/issues/118'>Issue #118</a>"
|
||||
);
|
||||
$w.$main.css({maxWidth: "500px"});
|
||||
$w.$Button("OK", function(){
|
||||
$w.$Button("OK", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
|
|
|
|||
20
src/help.js
20
src/help.js
|
|
@ -18,10 +18,10 @@ function show_help(){
|
|||
$iframe.css({backgroundColor: "white"});
|
||||
$help_window.center();
|
||||
|
||||
var parse_object_params = function($object){
|
||||
var parse_object_params = $object => {
|
||||
// parse an $(<object>) to a plain object of key value pairs
|
||||
var object = {};
|
||||
$object.children("param").each(function(i, param){
|
||||
$object.children("param").each((i, param) => {
|
||||
object[param.name] = param.value;
|
||||
});
|
||||
return object;
|
||||
|
|
@ -29,13 +29,13 @@ function show_help(){
|
|||
|
||||
var $last_expanded;
|
||||
|
||||
var $Item = function(text){
|
||||
var $Item = text => {
|
||||
var $item = $(E("div")).addClass("item").text(text);
|
||||
$item.on("mousedown", function(){
|
||||
$item.on("mousedown", () => {
|
||||
$contents.find(".item").removeClass("selected");
|
||||
$item.addClass("selected");
|
||||
});
|
||||
$item.on("click", function(){
|
||||
$item.on("click", () => {
|
||||
var $li = $item.parent();
|
||||
if($li.is(".folder")){
|
||||
if($last_expanded){
|
||||
|
|
@ -49,13 +49,13 @@ function show_help(){
|
|||
};
|
||||
|
||||
var $default_item_li = $(E("li")).addClass("page");
|
||||
$default_item_li.append($Item("Welcome to Help").on("click", function(e){
|
||||
$default_item_li.append($Item("Welcome to Help").on("click", e => {
|
||||
$iframe.attr({src: "help/default.html"});
|
||||
}));
|
||||
$contents.append($default_item_li);
|
||||
|
||||
$.get("help/mspaint.hhc", function(hhc){
|
||||
$($.parseHTML(hhc)).filter("ul").children().each(function(i, li){
|
||||
$.get("help/mspaint.hhc", hhc => {
|
||||
$($.parseHTML(hhc)).filter("ul").children().each((i, li) => {
|
||||
|
||||
var object = parse_object_params($(li).children("object"));
|
||||
|
||||
|
|
@ -66,10 +66,10 @@ function show_help(){
|
|||
var $folder_items_ul = $(E("ul"));
|
||||
$folder_li.append($folder_items_ul);
|
||||
|
||||
$(li).children("ul").children().each(function(i, li){
|
||||
$(li).children("ul").children().each((i, li) => {
|
||||
var object = parse_object_params($(li).children("object"));
|
||||
var $item_li = $(E("li")).addClass("page");
|
||||
$item_li.append($Item(object.Name).on("click", function(e){
|
||||
$item_li.append($Item(object.Name).on("click", e => {
|
||||
$iframe.attr({src: "help/" + object.Local});
|
||||
}));
|
||||
$folder_items_ul.append($item_li);
|
||||
|
|
|
|||
|
|
@ -54,13 +54,13 @@ function Canvas(width, height){
|
|||
|
||||
new_canvas.ctx = new_ctx;
|
||||
|
||||
new_ctx.disable_image_smoothing = function(image){
|
||||
new_ctx.disable_image_smoothing = image => {
|
||||
new_ctx.mozImageSmoothingEnabled = false;
|
||||
new_ctx.webkitImageSmoothingEnabled = false;
|
||||
new_ctx.msImageSmoothingEnabled = false;
|
||||
new_ctx.imageSmoothingEnabled = false;
|
||||
};
|
||||
new_ctx.enable_image_smoothing = function(image){
|
||||
new_ctx.enable_image_smoothing = image => {
|
||||
new_ctx.mozImageSmoothingEnabled = true;
|
||||
new_ctx.webkitImageSmoothingEnabled = true;
|
||||
new_ctx.msImageSmoothingEnabled = true;
|
||||
|
|
@ -71,7 +71,7 @@ function Canvas(width, height){
|
|||
// that reset the image smoothing to disabled
|
||||
// and remove all external calls to disable_image_smoothing
|
||||
|
||||
new_ctx.copy = function(image){
|
||||
new_ctx.copy = image => {
|
||||
new_canvas.width = image.naturalWidth || image.width;
|
||||
new_canvas.height = image.naturalHeight || image.height;
|
||||
|
||||
|
|
|
|||
|
|
@ -148,11 +148,11 @@ function draw_line_without_pattern_support(ctx, x1, y1, x2, y2, stroke_size){
|
|||
stroke_size = stroke_size || 1;
|
||||
if(aliasing){
|
||||
if(stroke_size > 1){
|
||||
bresenham_line(x1, y1, x2, y2, function(x, y){
|
||||
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));
|
||||
});
|
||||
}else{
|
||||
bresenham_line(x1, y1, x2, y2, function(x, y){
|
||||
bresenham_line(x1, y1, x2, y2, (x, y) => {
|
||||
ctx.fillRect(x, y, 1, 1);
|
||||
});
|
||||
}
|
||||
|
|
@ -368,7 +368,7 @@ function apply_image_transformation(fn){
|
|||
if(selection){
|
||||
selection.replace_source_canvas(new_canvas);
|
||||
}else{
|
||||
undoable(0, function(){
|
||||
undoable(0, () => {
|
||||
this_ones_a_frame_changer();
|
||||
|
||||
ctx.copy(new_canvas);
|
||||
|
|
@ -379,7 +379,7 @@ function apply_image_transformation(fn){
|
|||
}
|
||||
|
||||
function flip_horizontal(){
|
||||
apply_image_transformation(function(original_canvas, original_ctx, new_canvas, new_ctx){
|
||||
apply_image_transformation((original_canvas, original_ctx, new_canvas, new_ctx) => {
|
||||
new_ctx.translate(new_canvas.width, 0);
|
||||
new_ctx.scale(-1, 1);
|
||||
new_ctx.drawImage(original_canvas, 0, 0);
|
||||
|
|
@ -387,7 +387,7 @@ function flip_horizontal(){
|
|||
}
|
||||
|
||||
function flip_vertical(){
|
||||
apply_image_transformation(function(original_canvas, original_ctx, new_canvas, new_ctx){
|
||||
apply_image_transformation((original_canvas, original_ctx, new_canvas, new_ctx) => {
|
||||
new_ctx.translate(0, new_canvas.height);
|
||||
new_ctx.scale(1, -1);
|
||||
new_ctx.drawImage(original_canvas, 0, 0);
|
||||
|
|
@ -395,7 +395,7 @@ function flip_vertical(){
|
|||
}
|
||||
|
||||
function rotate(angle){
|
||||
apply_image_transformation(function(original_canvas, original_ctx, new_canvas, new_ctx){
|
||||
apply_image_transformation((original_canvas, original_ctx, new_canvas, new_ctx) => {
|
||||
new_ctx.save();
|
||||
switch(angle){
|
||||
case TAU / 4:
|
||||
|
|
@ -427,7 +427,7 @@ function rotate(angle){
|
|||
var bb_max_x = -Infinity;
|
||||
var bb_min_y = +Infinity;
|
||||
var bb_max_y = -Infinity;
|
||||
var corner = function(x01, y01){
|
||||
var corner = (x01, y01) => {
|
||||
var x = Math.sin(-angle)*h*x01 + Math.cos(+angle)*w*y01;
|
||||
var y = Math.sin(+angle)*w*y01 + Math.cos(-angle)*h*x01;
|
||||
bb_min_x = Math.min(bb_min_x, x);
|
||||
|
|
@ -466,7 +466,7 @@ function rotate(angle){
|
|||
}
|
||||
|
||||
function stretch_and_skew(xscale, yscale, hsa, vsa){
|
||||
apply_image_transformation(function(original_canvas, original_ctx, new_canvas, new_ctx){
|
||||
apply_image_transformation((original_canvas, original_ctx, new_canvas, new_ctx) => {
|
||||
var w = original_canvas.width * xscale;
|
||||
var h = original_canvas.height * yscale;
|
||||
|
||||
|
|
@ -474,7 +474,7 @@ function stretch_and_skew(xscale, yscale, hsa, vsa){
|
|||
var bb_max_x = -Infinity;
|
||||
var bb_min_y = +Infinity;
|
||||
var bb_max_y = -Infinity;
|
||||
var corner = function(x01, y01){
|
||||
var corner = (x01, y01) => {
|
||||
var x = Math.tan(hsa)*h*x01 + w*y01;
|
||||
var y = Math.tan(vsa)*w*y01 + h*x01;
|
||||
bb_min_x = Math.min(bb_min_x, x);
|
||||
|
|
@ -568,7 +568,7 @@ function draw_bezier_curve(ctx, start_x, start_y, control_1_x, control_1_y, cont
|
|||
var min_y = Math.min(start_y, control_1_y, control_2_y, end_y);
|
||||
var max_x = Math.max(start_x, control_1_x, control_2_x, end_x);
|
||||
var max_y = Math.max(start_y, control_1_y, control_2_y, end_y);
|
||||
draw_with_swatch(ctx, min_x, min_y, max_x, max_y, stroke_color, function(op_ctx_2d){
|
||||
draw_with_swatch(ctx, min_x, min_y, max_x, max_y, stroke_color, op_ctx_2d => {
|
||||
draw_bezier_curve_without_pattern_support(op_ctx_2d, start_x, start_y, control_1_x, control_1_y, control_2_x, control_2_y, end_x, end_y, stroke_size);
|
||||
});
|
||||
}
|
||||
|
|
@ -577,7 +577,7 @@ function draw_line(ctx, x1, y1, x2, y2, stroke_size){
|
|||
var min_y = Math.min(y1, y2);
|
||||
var max_x = Math.max(x1, x2);
|
||||
var max_y = Math.max(y1, y2);
|
||||
draw_with_swatch(ctx, min_x, min_y, max_x, max_y, stroke_color, function(op_ctx_2d){
|
||||
draw_with_swatch(ctx, min_x, min_y, max_x, max_y, stroke_color, op_ctx_2d => {
|
||||
draw_line_without_pattern_support(op_ctx_2d, x1, y1, x2, y2, stroke_size);
|
||||
});
|
||||
// also works:
|
||||
|
|
@ -616,7 +616,7 @@ function draw_grid(ctx, scale) {
|
|||
ctx.restore();
|
||||
}
|
||||
|
||||
(function(){
|
||||
(() => {
|
||||
|
||||
var tessy = (function initTesselator() {
|
||||
// function called for each vertex of tesselator output
|
||||
|
|
@ -792,10 +792,10 @@ function draw_grid(ctx, scale) {
|
|||
}
|
||||
}
|
||||
|
||||
window.draw_line_strip = function(ctx, points){
|
||||
window.draw_line_strip = (ctx, points) => {
|
||||
draw_polygon_or_line_strip(ctx, points, true, false, false);
|
||||
};
|
||||
window.draw_polygon = function(ctx, points, stroke, fill){
|
||||
window.draw_polygon = (ctx, points, stroke, fill) => {
|
||||
draw_polygon_or_line_strip(ctx, points, stroke, fill, true);
|
||||
};
|
||||
|
||||
|
|
@ -900,7 +900,7 @@ function draw_grid(ctx, scale) {
|
|||
}
|
||||
}
|
||||
|
||||
window.copy_contents_within_polygon = function(canvas, points, x_min, y_min, x_max, y_max){
|
||||
window.copy_contents_within_polygon = (canvas, points, x_min, y_min, x_max, y_max) => {
|
||||
// Copy the contents of the given canvas within the polygon given by points bounded by x/y_min/max
|
||||
x_max = Math.max(x_max, x_min + 1);
|
||||
y_max = Math.max(y_max, y_min + 1);
|
||||
|
|
@ -923,7 +923,7 @@ function draw_grid(ctx, scale) {
|
|||
}
|
||||
|
||||
// TODO: maybe shouldn't be external...
|
||||
window.draw_with_swatch = function(ctx, x_min, y_min, x_max, y_max, swatch, callback) {
|
||||
window.draw_with_swatch = (ctx, x_min, y_min, x_max, y_max, swatch, callback) => {
|
||||
var stroke_margin = ~~(stroke_size * 1.1);
|
||||
|
||||
x_max = Math.max(x_max, x_min + 1);
|
||||
|
|
|
|||
18
src/imgur.js
18
src/imgur.js
|
|
@ -22,12 +22,12 @@ function show_imgur_uploader(blob){
|
|||
overflow: "auto",
|
||||
marginBottom: "0.5em",
|
||||
});
|
||||
$preview_image.on("load", function(){
|
||||
$preview_image.on("load", () => {
|
||||
$imgur_window.css({width: "auto"});
|
||||
$imgur_window.center();
|
||||
});
|
||||
|
||||
var $upload_button = $imgur_window.$Button("Upload", function(){
|
||||
var $upload_button = $imgur_window.$Button("Upload", () => {
|
||||
|
||||
$preview_image_area.remove();
|
||||
$upload_button.remove();
|
||||
|
|
@ -43,7 +43,7 @@ function show_imgur_uploader(blob){
|
|||
textAlign: "center",
|
||||
});
|
||||
|
||||
var parseImgurResponseJSON = function(responseJSON){
|
||||
var parseImgurResponseJSON = responseJSON => {
|
||||
try {
|
||||
var response = JSON.parse(responseJSON);
|
||||
} catch(error) {
|
||||
|
|
@ -86,7 +86,7 @@ function show_imgur_uploader(blob){
|
|||
var req = new XMLHttpRequest();
|
||||
|
||||
if(req.upload){
|
||||
req.upload.addEventListener('progress', function(event){
|
||||
req.upload.addEventListener('progress', event => {
|
||||
if(event.lengthComputable){
|
||||
var progress_value = event.loaded / event.total;
|
||||
var percentage_text = Math.floor(progress_value * 100) + "%";
|
||||
|
|
@ -96,7 +96,7 @@ function show_imgur_uploader(blob){
|
|||
}, false);
|
||||
}
|
||||
|
||||
req.addEventListener("readystatechange", function() {
|
||||
req.addEventListener("readystatechange", () => {
|
||||
if(req.readyState == 4 && req.status == 200){
|
||||
$progress.add($progress_percent).remove();
|
||||
|
||||
|
|
@ -121,10 +121,10 @@ function show_imgur_uploader(blob){
|
|||
// TODO: a button to copy the URL to the clipboard
|
||||
// (also maybe put the URL in a readonly input)
|
||||
|
||||
var $delete_button = $imgur_window.$Button("Delete", function(){
|
||||
var $delete_button = $imgur_window.$Button("Delete", () => {
|
||||
var req = new XMLHttpRequest();
|
||||
|
||||
req.addEventListener("readystatechange", function() {
|
||||
req.addEventListener("readystatechange", () => {
|
||||
if(req.readyState == 4 && req.status == 200){
|
||||
$delete_button.remove();
|
||||
|
||||
|
|
@ -150,7 +150,7 @@ function show_imgur_uploader(blob){
|
|||
|
||||
$imgur_status.text("Deleting...");
|
||||
});
|
||||
var $okay_button = $imgur_window.$Button("OK", function(){
|
||||
var $okay_button = $imgur_window.$Button("OK", () => {
|
||||
$imgur_window.close();
|
||||
});
|
||||
}else if(req.readyState == 4){
|
||||
|
|
@ -170,7 +170,7 @@ function show_imgur_uploader(blob){
|
|||
|
||||
$imgur_status.text("Uploading...");
|
||||
});
|
||||
var $cancel_button = $imgur_window.$Button("Cancel", function(){
|
||||
var $cancel_button = $imgur_window.$Button("Cancel", () => {
|
||||
$imgur_window.close();
|
||||
});
|
||||
$imgur_window.width(300);
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@ function storage_quota_exceeded(){
|
|||
"<p>You can still save the current image with <b>File > Save</b>. " +
|
||||
"You should save frequently, or free up enough space to keep the image safe.</p>"
|
||||
);
|
||||
$w.$Button("View and manage storage", function(){
|
||||
$w.$Button("View and manage storage", () => {
|
||||
$w.close();
|
||||
ignoring_quota_exceeded = false;
|
||||
manage_storage();
|
||||
});
|
||||
$w.$Button("Ignore", function(){
|
||||
$w.$Button("Ignore", () => {
|
||||
$w.close();
|
||||
ignoring_quota_exceeded = true;
|
||||
});
|
||||
|
|
@ -44,11 +44,11 @@ function manage_storage(){
|
|||
var $message = $(E("p")).appendTo($storage_manager.$main).html(
|
||||
"Any images you've saved to your computer with <b>File > Save</b> will not be affected."
|
||||
);
|
||||
$storage_manager.$Button("Close", function(){
|
||||
$storage_manager.$Button("Close", () => {
|
||||
$storage_manager.close();
|
||||
});
|
||||
|
||||
var addRow = function(k, imgSrc){
|
||||
var addRow = (k, imgSrc) => {
|
||||
var $tr = $(E("tr")).appendTo($table);
|
||||
|
||||
var $img = $(E("img")).attr({src: imgSrc});
|
||||
|
|
@ -61,7 +61,7 @@ function manage_storage(){
|
|||
$(E("td")).append($open_link).appendTo($tr);
|
||||
$(E("td")).append($remove).appendTo($tr);
|
||||
|
||||
$remove.on("click", function(){
|
||||
$remove.on("click", () => {
|
||||
localStorage.removeItem(k);
|
||||
$tr.remove();
|
||||
if($table.find("tr").length == 0){
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
(function(){
|
||||
(() => {
|
||||
|
||||
var log = function(){
|
||||
if(typeof console !== "undefined"){
|
||||
|
|
@ -100,12 +100,12 @@
|
|||
var lsid = "image#" + session_id;
|
||||
log("local storage id: " + lsid);
|
||||
// save image to storage
|
||||
var save_image_to_storage = function () {
|
||||
var save_image_to_storage = () => {
|
||||
var save_paused = handle_data_loss();
|
||||
if (save_paused) {
|
||||
return;
|
||||
}
|
||||
storage.set(lsid, canvas.toDataURL("image/png"), function (err) {
|
||||
storage.set(lsid, canvas.toDataURL("image/png"), err => {
|
||||
if (err) {
|
||||
if (err.quotaExceeded) {
|
||||
storage_quota_exceeded();
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
});
|
||||
};
|
||||
storage.get(lsid, function (err, uri) {
|
||||
storage.get(lsid, (err, uri) => {
|
||||
if (err) {
|
||||
if (localStorageAvailable) {
|
||||
show_error_message("Failed to retrieve image from local storage:", err);
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
}
|
||||
}
|
||||
else if (uri) {
|
||||
open_from_URI(uri, function (err) {
|
||||
open_from_URI(uri, err => {
|
||||
if (err) {
|
||||
return show_error_message("Failed to open image from local storage:", err);
|
||||
}
|
||||
|
|
@ -196,14 +196,14 @@
|
|||
session.id = session_id;
|
||||
file_name = "[Loading " + session.id + "]";
|
||||
update_title();
|
||||
var on_firebase_loaded = function () {
|
||||
var on_firebase_loaded = () => {
|
||||
file_name = "[" + session.id + "]";
|
||||
update_title();
|
||||
session.start();
|
||||
};
|
||||
if (!FireSession.fb_root) {
|
||||
$.getScript("lib/firebase.js")
|
||||
.done(function () {
|
||||
.done(() => {
|
||||
var config = {
|
||||
apiKey: "AIzaSyBgau8Vu9ZE8u_j0rp-Lc044gYTX5O3X9k",
|
||||
authDomain: "jspaint.firebaseapp.com",
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
FireSession.fb_root = firebase.database().ref("/");
|
||||
on_firebase_loaded();
|
||||
})
|
||||
.fail(function () {
|
||||
.fail(() => {
|
||||
show_error_message("Failed to load Firebase; the document will not load, and changes will not be saved.");
|
||||
file_name = "[Failed to load " + session.id + "]";
|
||||
update_title();
|
||||
|
|
@ -239,14 +239,14 @@
|
|||
// "<a href='https://github.com/1j01/jspaint/issues/68'>this issue</a> to show interest, and/or subscribe for updates.</p>"
|
||||
);
|
||||
$w.$main.css({ maxWidth: "500px" });
|
||||
$w.$Button("OK", function () {
|
||||
$w.$Button("OK", () => {
|
||||
$w.close();
|
||||
});
|
||||
$w.center();
|
||||
// Wrap the Firebase API because they don't
|
||||
// provide a great way to clean up event listeners
|
||||
session._fb_listeners = [];
|
||||
var _fb_on = function (fb, event_type, callback, error_callback) {
|
||||
var _fb_on = (fb, event_type, callback, error_callback) => {
|
||||
session._fb_listeners.push({ fb, event_type, callback, error_callback });
|
||||
fb.on(event_type, callback, error_callback);
|
||||
};
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
session.fb_user.set(user);
|
||||
// @TODO: Execute the above two lines when .info/connected
|
||||
// For each existing and new user
|
||||
_fb_on(session.fb_users, "child_added", function (snap) {
|
||||
_fb_on(session.fb_users, "child_added", snap => {
|
||||
// Is this you?
|
||||
if (snap.key === user_id) {
|
||||
// You already have a cursor.
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
transition: "opacity 0.5s",
|
||||
});
|
||||
// When the cursor data changes
|
||||
_fb_on(fb_other_user, "value", function (snap) {
|
||||
_fb_on(fb_other_user, "value", snap => {
|
||||
other_user = snap.val();
|
||||
// If the user has left
|
||||
if (other_user == null) {
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
}
|
||||
else {
|
||||
// Draw the cursor
|
||||
var draw_cursor = function () {
|
||||
var draw_cursor = () => {
|
||||
cursor_canvas.width = cursor_image.width;
|
||||
cursor_canvas.height = cursor_image.height;
|
||||
var cctx = cursor_canvas.ctx;
|
||||
|
|
@ -334,7 +334,7 @@
|
|||
});
|
||||
var previous_uri;
|
||||
var pointer_operations = [];
|
||||
var sync = function () {
|
||||
var sync = () => {
|
||||
var save_paused = handle_data_loss();
|
||||
if (save_paused) {
|
||||
return;
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
};
|
||||
$canvas.on("change.session-hook", sync);
|
||||
// Any time we change or recieve the image data
|
||||
_fb_on(session.fb_data, "value", function (snap) {
|
||||
_fb_on(session.fb_data, "value", snap => {
|
||||
log("data update");
|
||||
var uri = snap.val();
|
||||
if (uri == null) {
|
||||
|
|
@ -367,7 +367,7 @@
|
|||
saved = true; // hopefully
|
||||
// Load the new image data
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
img.onload = () => {
|
||||
// Cancel any in-progress pointer operations
|
||||
if (pointer_operations.length) {
|
||||
$G.triggerHandler("pointerup", "cancel");
|
||||
|
|
@ -389,13 +389,13 @@
|
|||
};
|
||||
img.src = uri;
|
||||
}
|
||||
}, function (error) {
|
||||
}, error => {
|
||||
show_error_message("Failed to retrieve data from Firebase. The document will not load, and changes will not be saved.", error);
|
||||
file_name = "[Failed to load " + session.id + "]";
|
||||
update_title();
|
||||
});
|
||||
// Update the cursor status
|
||||
$G.on("pointermove.session-hook", function (e) {
|
||||
$G.on("pointermove.session-hook", e => {
|
||||
var m = e2c(e);
|
||||
session.fb_user.child("cursor").update({
|
||||
x: m.x,
|
||||
|
|
@ -403,7 +403,7 @@
|
|||
away: false,
|
||||
});
|
||||
});
|
||||
$G.on("blur.session-hook", function (e) {
|
||||
$G.on("blur.session-hook", e => {
|
||||
session.fb_user.child("cursor").update({
|
||||
away: true,
|
||||
});
|
||||
|
|
@ -438,17 +438,17 @@
|
|||
// Handle the starting, switching, and ending of sessions from the location.hash
|
||||
|
||||
var current_session;
|
||||
var end_current_session = function(){
|
||||
var end_current_session = () => {
|
||||
if(current_session){
|
||||
log("ending current session");
|
||||
current_session.end();
|
||||
current_session = null;
|
||||
}
|
||||
};
|
||||
var generate_session_id = function(){
|
||||
var generate_session_id = () => {
|
||||
return (Math.random()*Math.pow(2, 32)).toString(16).replace(".", "");
|
||||
};
|
||||
var update_session_from_location_hash = function(e){
|
||||
var update_session_from_location_hash = e => {
|
||||
// TODO: should #load: be separate from #session:/#local:,
|
||||
// and be able to load *into* a session, rather than just start one?
|
||||
// well I guess loading into a session wouldn't be that helpful if it makes a new image anyways
|
||||
|
|
@ -494,18 +494,18 @@
|
|||
end_current_session();
|
||||
|
||||
// TODO: fix loading duplicately, from popstate and hashchange
|
||||
open_from_URI(url, function(err){
|
||||
open_from_URI(url, err => {
|
||||
if(err){
|
||||
show_resource_load_error_message();
|
||||
}
|
||||
// TODO: saved = false;?
|
||||
// NOTE: the following is intended to run regardless of error (as opposed to returning if there's an error)
|
||||
// FIXME: race condition (make the timeout long and try to fix it with a flag or something )
|
||||
setTimeout(function(){
|
||||
setTimeout(() => {
|
||||
// NOTE: this "change" event doesn't *guarantee* there was a change :/
|
||||
// let alone that there was a user interaction with the currently loaded document
|
||||
// that is, it also triggers for session changes, which I'm trying to avoid here
|
||||
$canvas.one("change", function(){
|
||||
$canvas.one("change", () => {
|
||||
if(location.hash === hash_loading_url_from){
|
||||
log("switching to new session from #load: URL because of user interaction");
|
||||
end_current_session();
|
||||
|
|
@ -526,7 +526,7 @@
|
|||
}
|
||||
};
|
||||
|
||||
$G.on("hashchange popstate", function(e){
|
||||
$G.on("hashchange popstate", e => {
|
||||
log(e.type, location.hash);
|
||||
update_session_from_location_hash();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// TODO: remove "ref" cruft from being compiled from CoffeeScript
|
||||
// or maybe replace this module with localforage actually
|
||||
|
||||
(function() {
|
||||
((() => {
|
||||
var isArray, localStore, ref, ref1;
|
||||
|
||||
isArray = (ref = Array.isArray) != null ? ref : function(a) {
|
||||
isArray = (ref = Array.isArray) != null ? ref : a => {
|
||||
return ("" + a) !== a && {}.toString.call(a) === "[object Array]";
|
||||
};
|
||||
|
||||
|
|
@ -79,4 +79,4 @@
|
|||
|
||||
window.storage = localStore;
|
||||
|
||||
}).call(this);
|
||||
})).call(this);
|
||||
|
|
|
|||
12
src/theme.js
12
src/theme.js
|
|
@ -1,7 +1,7 @@
|
|||
(function() {
|
||||
(() => {
|
||||
var default_theme = "classic.css";
|
||||
var theme_storage_key = "jspaint theme";
|
||||
var href_for = function(theme) {
|
||||
var href_for = theme => {
|
||||
return "styles/themes/" + theme;
|
||||
};
|
||||
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
var iid;
|
||||
function wait_for_theme_loaded(theme, callback) {
|
||||
clearInterval(iid);
|
||||
iid = setInterval(function() {
|
||||
iid = setInterval(() => {
|
||||
var theme_loaded =
|
||||
getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--theme-loaded")
|
||||
|
|
@ -34,11 +34,11 @@
|
|||
theme_link.id = "theme-link";
|
||||
document.head.appendChild(theme_link);
|
||||
|
||||
window.get_theme = function() {
|
||||
window.get_theme = () => {
|
||||
return current_theme;
|
||||
};
|
||||
|
||||
window.set_theme = function(theme) {
|
||||
window.set_theme = theme => {
|
||||
current_theme = theme;
|
||||
|
||||
try {
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
$(window).trigger("resize"); // not exactly, but get dynamic cursor to update its offset
|
||||
});
|
||||
|
||||
wait_for_theme_loaded(theme, function(){
|
||||
wait_for_theme_loaded(theme, () => {
|
||||
$(window).triggerHandler("theme-load");
|
||||
});
|
||||
theme_link.href = href_for(theme);
|
||||
|
|
|
|||
|
|
@ -9,19 +9,27 @@ var pencil_size = 1;
|
|||
var stroke_size = 1; // lines, curves, shape outlines
|
||||
var tool_transparent_mode = false;
|
||||
|
||||
var ChooserCanvas = function(
|
||||
url, invert,
|
||||
width, height,
|
||||
sourceX, sourceY, sourceWidth, sourceHeight,
|
||||
destX, destY, destWidth, destHeight
|
||||
){
|
||||
var ChooserCanvas = (
|
||||
url,
|
||||
invert,
|
||||
width,
|
||||
height,
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
destX,
|
||||
destY,
|
||||
destWidth,
|
||||
destHeight
|
||||
) => {
|
||||
var c = new Canvas(width, height);
|
||||
var img = ChooserCanvas.cache[url];
|
||||
if(!img){
|
||||
img = ChooserCanvas.cache[url] = E("img");
|
||||
img.src = url;
|
||||
}
|
||||
var render = function(){
|
||||
var render = () => {
|
||||
c.ctx.drawImage(
|
||||
img,
|
||||
sourceX, sourceY, sourceWidth, sourceHeight,
|
||||
|
|
@ -43,22 +51,22 @@ var ChooserCanvas = function(
|
|||
};
|
||||
ChooserCanvas.cache = {};
|
||||
|
||||
var $Choose = function(things, display, choose, is_chosen){
|
||||
var $Choose = (things, display, choose, is_chosen) => {
|
||||
var $chooser = $(E("div")).addClass("chooser");
|
||||
$chooser.on("update", function(){
|
||||
$chooser.on("update", () => {
|
||||
$chooser.empty();
|
||||
for(var i=0; i<things.length; i++){
|
||||
(function(thing){
|
||||
(thing => {
|
||||
var $option_container = $(E("div")).appendTo($chooser);
|
||||
var $option = $();
|
||||
var choose_thing = function(){
|
||||
var choose_thing = () => {
|
||||
if(is_chosen(thing)){
|
||||
return; // unnecessary optimization
|
||||
}
|
||||
choose(thing);
|
||||
$G.trigger("option-changed");
|
||||
}
|
||||
var update = function(){
|
||||
var update = () => {
|
||||
var selected_color = get_theme() === "modern.css" ? "#0178d7" : "#000080"; // TODO: get from a CSS variable
|
||||
$option_container.css({
|
||||
backgroundColor: is_chosen(thing) ? selected_color : ""
|
||||
|
|
@ -72,10 +80,10 @@ var $Choose = function(things, display, choose, is_chosen){
|
|||
$G.on("option-changed", update);
|
||||
|
||||
$option_container.on("pointerdown click", choose_thing);
|
||||
$chooser.on("pointerdown", function(){
|
||||
$chooser.on("pointerdown", () => {
|
||||
$option_container.on("pointerenter", choose_thing);
|
||||
});
|
||||
$G.on("pointerup", function(){
|
||||
$G.on("pointerup", () => {
|
||||
$option_container.off("pointerenter", choose_thing);
|
||||
});
|
||||
|
||||
|
|
@ -84,14 +92,14 @@ var $Choose = function(things, display, choose, is_chosen){
|
|||
});
|
||||
return $chooser;
|
||||
};
|
||||
var $ChooseShapeStyle = function(){
|
||||
var $ChooseShapeStyle = () => {
|
||||
var $chooser = $Choose(
|
||||
[
|
||||
{stroke: true, fill: false},
|
||||
{stroke: true, fill: true},
|
||||
{stroke: false, fill: true}
|
||||
],
|
||||
function(a, is_chosen){
|
||||
(a, is_chosen) => {
|
||||
var sscanvas = new Canvas(39, 21);
|
||||
var ssctx = sscanvas.ctx;
|
||||
|
||||
|
|
@ -117,11 +125,11 @@ var $ChooseShapeStyle = function(){
|
|||
|
||||
return sscanvas;
|
||||
},
|
||||
function(a){
|
||||
a => {
|
||||
$chooser.stroke = a.stroke;
|
||||
$chooser.fill = a.fill;
|
||||
},
|
||||
function(a){
|
||||
a => {
|
||||
return $chooser.stroke === a.stroke && $chooser.fill === a.fill;
|
||||
}
|
||||
).addClass("choose-shape-style");
|
||||
|
|
@ -132,49 +140,44 @@ var $ChooseShapeStyle = function(){
|
|||
return $chooser;
|
||||
};
|
||||
|
||||
var $choose_brush = $Choose(
|
||||
(function(){
|
||||
var brush_shapes = ["circle", "square", "reverse_diagonal", "diagonal"];
|
||||
var circular_brush_sizes = [7, 4, 1];
|
||||
var brush_sizes = [8, 5, 2];
|
||||
var things = [];
|
||||
brush_shapes.forEach((brush_shape)=> {
|
||||
var sizes = brush_shape === "circle" ? circular_brush_sizes : brush_sizes;
|
||||
sizes.forEach((brush_size)=> {
|
||||
things.push({
|
||||
shape: brush_shape,
|
||||
size: brush_size,
|
||||
});
|
||||
});
|
||||
});
|
||||
return things;
|
||||
})(),
|
||||
function(o, is_chosen){
|
||||
var cbcanvas = new Canvas(10, 10);
|
||||
|
||||
var shape = o.shape;
|
||||
var size = o.size;
|
||||
|
||||
cbcanvas.ctx.fillStyle =
|
||||
cbcanvas.ctx.strokeStyle =
|
||||
is_chosen ? "#fff" : "#000";
|
||||
|
||||
render_brush(cbcanvas.ctx, shape, size);
|
||||
|
||||
return cbcanvas;
|
||||
},
|
||||
function(o){
|
||||
brush_shape = o.shape;
|
||||
brush_size = o.size;
|
||||
},
|
||||
function(o){
|
||||
return brush_shape === o.shape && brush_size === o.size;
|
||||
}
|
||||
).addClass("choose-brush");
|
||||
var $choose_brush = $Choose((() => {
|
||||
var brush_shapes = ["circle", "square", "reverse_diagonal", "diagonal"];
|
||||
var circular_brush_sizes = [7, 4, 1];
|
||||
var brush_sizes = [8, 5, 2];
|
||||
var things = [];
|
||||
brush_shapes.forEach((brush_shape)=> {
|
||||
var sizes = brush_shape === "circle" ? circular_brush_sizes : brush_sizes;
|
||||
sizes.forEach((brush_size)=> {
|
||||
things.push({
|
||||
shape: brush_shape,
|
||||
size: brush_size,
|
||||
});
|
||||
});
|
||||
});
|
||||
return things;
|
||||
})(), (o, is_chosen) => {
|
||||
var cbcanvas = new Canvas(10, 10);
|
||||
|
||||
var shape = o.shape;
|
||||
var size = o.size;
|
||||
|
||||
cbcanvas.ctx.fillStyle =
|
||||
cbcanvas.ctx.strokeStyle =
|
||||
is_chosen ? "#fff" : "#000";
|
||||
|
||||
render_brush(cbcanvas.ctx, shape, size);
|
||||
|
||||
return cbcanvas;
|
||||
}, o => {
|
||||
brush_shape = o.shape;
|
||||
brush_size = o.size;
|
||||
}, o => {
|
||||
return brush_shape === o.shape && brush_size === o.size;
|
||||
}).addClass("choose-brush");
|
||||
|
||||
var $choose_eraser_size = $Choose(
|
||||
[4, 6, 8, 10],
|
||||
function(size, is_chosen){
|
||||
(size, is_chosen) => {
|
||||
var cecanvas = new Canvas(39, 16);
|
||||
|
||||
cecanvas.ctx.fillStyle = is_chosen ? "#fff" : "#000";
|
||||
|
|
@ -182,17 +185,17 @@ var $choose_eraser_size = $Choose(
|
|||
|
||||
return cecanvas;
|
||||
},
|
||||
function(size){
|
||||
size => {
|
||||
eraser_size = size;
|
||||
},
|
||||
function(size){
|
||||
size => {
|
||||
return eraser_size === size;
|
||||
}
|
||||
).addClass("choose-eraser");
|
||||
|
||||
var $choose_stroke_size = $Choose(
|
||||
[1, 2, 3, 4, 5],
|
||||
function(size, is_chosen){
|
||||
(size, is_chosen) => {
|
||||
var w = 39, h = 12, b = 5;
|
||||
var cscanvas = new Canvas(w, h);
|
||||
var center_y = (h - size) / 2;
|
||||
|
|
@ -200,10 +203,10 @@ var $choose_stroke_size = $Choose(
|
|||
cscanvas.ctx.fillRect(b, ~~center_y, w - b*2, size);
|
||||
return cscanvas;
|
||||
},
|
||||
function(size){
|
||||
size => {
|
||||
stroke_size = size;
|
||||
},
|
||||
function(size){
|
||||
size => {
|
||||
return stroke_size === size;
|
||||
}
|
||||
).addClass("choose-stroke-size");
|
||||
|
|
@ -211,7 +214,7 @@ var $choose_stroke_size = $Choose(
|
|||
var magnifications = [1, 2, 6, 8, 10];
|
||||
var $choose_magnification = $Choose(
|
||||
magnifications,
|
||||
function(scale, is_chosen){
|
||||
(scale, is_chosen) => {
|
||||
var i = magnifications.indexOf(scale);
|
||||
var secret = scale === 10; // 10x is secret
|
||||
var chooser_canvas = ChooserCanvas(
|
||||
|
|
@ -226,16 +229,16 @@ var $choose_magnification = $Choose(
|
|||
}
|
||||
return chooser_canvas;
|
||||
},
|
||||
function(scale){
|
||||
scale => {
|
||||
set_magnification(scale);
|
||||
},
|
||||
function(scale){
|
||||
scale => {
|
||||
return scale === magnification;
|
||||
}
|
||||
).addClass("choose-magnification")
|
||||
.css({position: "relative"}); // positioning context for above `position: "absolute"` canvas
|
||||
|
||||
$choose_magnification.on("update", function(){
|
||||
$choose_magnification.on("update", () => {
|
||||
$choose_magnification
|
||||
.find(".secret-option")
|
||||
.parent()
|
||||
|
|
@ -245,7 +248,7 @@ $choose_magnification.on("update", function(){
|
|||
var airbrush_sizes = [9, 16, 24];
|
||||
var $choose_airbrush_size = $Choose(
|
||||
airbrush_sizes,
|
||||
function(size, is_chosen){
|
||||
(size, is_chosen) => {
|
||||
|
||||
var image_width = 72; // width of source image
|
||||
var i = airbrush_sizes.indexOf(size); // 0 or 1 or 2
|
||||
|
|
@ -265,17 +268,17 @@ var $choose_airbrush_size = $Choose(
|
|||
0, 0, w, h // x, y, width, height on created destination canvas
|
||||
);
|
||||
},
|
||||
function(size){
|
||||
size => {
|
||||
airbrush_size = size;
|
||||
},
|
||||
function(size){
|
||||
size => {
|
||||
return size === airbrush_size;
|
||||
}
|
||||
).addClass("choose-airbrush-size");
|
||||
|
||||
var $choose_transparent_mode = $Choose(
|
||||
[false, true],
|
||||
function(_tool_transparent_mode, is_chosen){
|
||||
(_tool_transparent_mode, is_chosen) => {
|
||||
var sw = 35, sh = 23; // width, height from source image
|
||||
var b = 2; // margin by which the source image is inset on the destination
|
||||
var theme_folder = `images/${get_theme().replace(/\.css/, "")}`;
|
||||
|
|
@ -287,10 +290,10 @@ var $choose_transparent_mode = $Choose(
|
|||
b, b, sw, sh // x, y, width, height on created destination canvas
|
||||
);
|
||||
},
|
||||
function(_tool_transparent_mode){
|
||||
_tool_transparent_mode => {
|
||||
tool_transparent_mode = _tool_transparent_mode;
|
||||
},
|
||||
function(_tool_transparent_mode){
|
||||
_tool_transparent_mode => {
|
||||
return _tool_transparent_mode === tool_transparent_mode;
|
||||
}
|
||||
).addClass("choose-transparent-mode");
|
||||
|
|
|
|||
16
src/tools.js
16
src/tools.js
|
|
@ -33,7 +33,7 @@ tools = [{
|
|||
// The inverty brush is continuous in space which means
|
||||
// paint(ctx, x, y) will be called for each pixel the pointer moves
|
||||
// and we only need to record individual pointer events to make the polygon
|
||||
var onpointermove = function(e){
|
||||
var onpointermove = e => {
|
||||
var pointer = e2c(e);
|
||||
// Constrain the pointer to the canvas
|
||||
pointer.x = Math.min(canvas.width, pointer.x);
|
||||
|
|
@ -49,7 +49,7 @@ tools = [{
|
|||
tool.y_max = Math.max(pointer.y, tool.y_max);
|
||||
};
|
||||
$G.on("pointermove", onpointermove);
|
||||
$G.one("pointerup", function(){
|
||||
$G.one("pointerup", () => {
|
||||
$G.off("pointermove", onpointermove);
|
||||
});
|
||||
},
|
||||
|
|
@ -144,10 +144,10 @@ tools = [{
|
|||
selection = null;
|
||||
}
|
||||
var pointer_has_moved = false;
|
||||
$G.one("pointermove", function(){
|
||||
$G.one("pointermove", () => {
|
||||
pointer_has_moved = true;
|
||||
});
|
||||
$G.one("pointerup", function(){
|
||||
$G.one("pointerup", () => {
|
||||
if(!pointer_has_moved && selection){
|
||||
selection.draw();//?
|
||||
selection.destroy();
|
||||
|
|
@ -301,7 +301,7 @@ tools = [{
|
|||
},
|
||||
pointerdown: function(){
|
||||
var _this = this;
|
||||
$G.one("pointerup", function(){
|
||||
$G.one("pointerup", () => {
|
||||
_this.$options.css({
|
||||
background: ""
|
||||
});
|
||||
|
|
@ -535,10 +535,10 @@ tools = [{
|
|||
textbox.destroy();
|
||||
}
|
||||
var pointer_has_moved = false;
|
||||
$G.one("pointermove", function(){
|
||||
$G.one("pointermove", () => {
|
||||
pointer_has_moved = true;
|
||||
});
|
||||
$G.one("pointerup", function(){
|
||||
$G.one("pointerup", () => {
|
||||
if(!pointer_has_moved && textbox){
|
||||
textbox.draw();
|
||||
textbox.destroy();
|
||||
|
|
@ -716,7 +716,7 @@ tools = [{
|
|||
// @TODO: stop needing this:
|
||||
tool.canvas_base = canvas;
|
||||
|
||||
undoable(function(){
|
||||
undoable(() => {
|
||||
// @TODO: stop needing this:
|
||||
tool.canvas_base = undos[undos.length-1];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
(function () {
|
||||
(() => {
|
||||
var rAF_ID, rotologo, $window, space_phase_key_handler, player, player_placeholder;
|
||||
var vaporwave_active = false;
|
||||
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
$window = $();
|
||||
}
|
||||
|
||||
var wait_for_youtube_api = function (callback) {
|
||||
var wait_for_youtube_api = callback => {
|
||||
if (typeof YT !== "undefined") {
|
||||
callback();
|
||||
} else {
|
||||
|
|
@ -18,13 +18,13 @@
|
|||
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||
|
||||
// The YouTube API will call this global function when loaded and ready.
|
||||
window.onYouTubeIframeAPIReady = function () {
|
||||
window.onYouTubeIframeAPIReady = () => {
|
||||
callback();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var stop_vaporwave = function () {
|
||||
var stop_vaporwave = () => {
|
||||
vaporwave_active = false;
|
||||
|
||||
cancelAnimationFrame(rAF_ID);
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
// bepis pepsi isded pepsi isded
|
||||
};
|
||||
|
||||
var start_vaporwave = function () {
|
||||
var start_vaporwave = () => {
|
||||
vaporwave_active = true;
|
||||
|
||||
rotologo = document.createElement("img");
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
opacity: "0",
|
||||
});
|
||||
|
||||
var animate = function () {
|
||||
var animate = () => {
|
||||
rAF_ID = requestAnimationFrame(animate);
|
||||
|
||||
$(rotologo).css({
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
// NOTE: placeholder not a container; the YT API replaces the element passed in the DOM
|
||||
// but keeps inline styles apparently, and maybe other things, I don't know; it's weird
|
||||
|
||||
wait_for_youtube_api(function () {
|
||||
wait_for_youtube_api(() => {
|
||||
player = new YT.Player(player_placeholder, {
|
||||
height: "390",
|
||||
width: "640",
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
function onPlayerStateChange(event) {
|
||||
if (event.data == YT.PlayerState.PLAYING) {
|
||||
// TODO: pause and resume this timer with the video
|
||||
setTimeout(function(){
|
||||
setTimeout(() => {
|
||||
$(rotologo).css({opacity: 1});
|
||||
}, 14150);
|
||||
}
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
}
|
||||
|
||||
var is_theoretically_playing = true;
|
||||
space_phase_key_handler = function (e) {
|
||||
space_phase_key_handler = e => {
|
||||
// press space to phase in and out of space phase スペース相 - windows 98 マイクロソフト 『ＷＩＮＴＲＡＰ』 X 将来のオペレーティングシステムサウンド 1998 VAPORWAVE
|
||||
if (e.which === 32) {
|
||||
// TODO: record player SFX
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
addEventListener("keydown", space_phase_key_handler);
|
||||
};
|
||||
|
||||
var toggle_vaporwave = function () {
|
||||
var toggle_vaporwave = () => {
|
||||
if (vaporwave_active) {
|
||||
stop_vaporwave();
|
||||
} else {
|
||||
|
|
@ -208,4 +208,4 @@
|
|||
|
||||
addEventListener("keydown", Konami.code(toggle_vaporwave));
|
||||
|
||||
}());
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue