Mobile support
Isaiah Odhner
parent
92c6d12e90
commit
df0218a3c4
|
|
@ -45,12 +45,13 @@ You can also install it as a Chrome app.
|
|||
It isn't perfectly seamless, and you may lose your drawing or be interrupted.
|
||||
* Load many different palette formats with Colors > Get Colors
|
||||
(I made a [library](https://github.com/1j01/palette.js/) for this)
|
||||
* Mobile support
|
||||
* Click/tap the selected colors area to swap the foreground and background colors
|
||||
|
||||
|
||||
#### Possible improvements include:
|
||||
|
||||
* [Extended Editing](#extended-editing)
|
||||
* Mobile support
|
||||
* Proportionally resize the selection or canvas by holding <kbd>Shift</kbd>
|
||||
* After adding text, save as SVG or HTML with selectable text
|
||||
* <kbd>Alt</kbd> as a shortcut for the eyedropper, as long as it doesn't conflict with keyboard navigation of menus
|
||||
|
|
|
|||
14
TODO.md
14
TODO.md
|
|
@ -88,15 +88,13 @@
|
|||
|
||||
### Device support
|
||||
|
||||
* Use pointer events polyfill...
|
||||
* Multi-touch devices
|
||||
* Second touch cancels current action just like a second button does on the desktop
|
||||
* Two-finger drag to pan
|
||||
* Single-touch devices
|
||||
* Multi-touch devices
|
||||
* Two-finger drag to pan (the second touch cancels the default action just like normal)
|
||||
* Single-touch devices
|
||||
* Pan tool
|
||||
|
||||
|
||||
* Tap (or click) the selected colors area to swap background/foreground colors
|
||||
* Enlarge GUI elements on touch devices
|
||||
|
||||
|
||||
* You can't use the Eraser/Color Eraser tool as a "Color Eraser" without a secondary mouse button
|
||||
|
|
@ -104,15 +102,13 @@
|
|||
|
||||
|
||||
* Access to functionality that would normally require a keyboard (with a numpad!)
|
||||
* Slide pointer between menu buttons and menu items
|
||||
* Numpad +/-: Increase/Decrease brush size, Double/Half selection size, ...
|
||||
* Shift (toggle): Proportional, Smear / Trail Selection, "Snap to 8 directions" / "Octosnap"?
|
||||
* Ctrl+Select: Crop tool
|
||||
* Ctrl+Shift+G: "Render GIF"
|
||||
|
||||
|
||||
* Add Pan and Color Eraser tools to the toolbox
|
||||
|
||||
|
||||
### Tools
|
||||
|
||||
* Free-Form Select
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
<body>
|
||||
<script src="lib/jquery.min.js"></script>
|
||||
<script src="lib/pep.js"></script>
|
||||
<script>
|
||||
$.event.props.push("button", "buttons", "clientX", "clientY", "offsetX", "offsetY", "pageX", "pageY", "screenX", "screenY", "toElement");
|
||||
$.event.props.push("pointerType", "pointerId", "width", "height", "pressure", "tiltX", "tiltY", "hwTimestamp", "isPrimary");
|
||||
</script>
|
||||
<script src="lib/canvas.toBlob.js"></script>
|
||||
<script src="lib/gif.js/gif.js"></script>
|
||||
<script src="lib/palette.js"></script>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,13 @@ html, body, .jspaint {
|
|||
display: none !important;
|
||||
}
|
||||
}
|
||||
.jspaint-component-area,
|
||||
.jspaint-menus {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.jspaint-status-area,
|
||||
.jspaint-component-area,
|
||||
.jspaint-menus {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,13 @@ function $ColorBox(){
|
|||
$current_colors.css({background: colors.ternary});
|
||||
});
|
||||
|
||||
$current_colors.on("pointerdown", function(){
|
||||
var new_bg = colors.foreground;
|
||||
colors.foreground = colors.background;
|
||||
colors.background = new_bg;
|
||||
$G.triggerHandler("option-changed");
|
||||
});
|
||||
|
||||
// the only color editted by Colors > Edit Colors...
|
||||
var $last_fg_color_button;
|
||||
var build_palette = function(){
|
||||
|
|
@ -60,7 +67,7 @@ function $ColorBox(){
|
|||
$i.val(rgb2hex($b.css("background-color")));
|
||||
|
||||
var button, ctrl;
|
||||
$b.on("mousedown", function(e){
|
||||
$b.on("pointerdown", function(e){
|
||||
ctrl = e.ctrlKey;
|
||||
button = e.button;
|
||||
if(button === 0){
|
||||
|
|
@ -76,7 +83,7 @@ function $ColorBox(){
|
|||
$i.prop("enabled", false);
|
||||
}, 400);
|
||||
});
|
||||
$i.on("mousedown", function(e){
|
||||
$i.on("pointerdown", function(e){
|
||||
if(e.button === button && $i.prop("enabled")){
|
||||
$i.trigger("click", "synthetic");
|
||||
}
|
||||
|
|
@ -117,7 +124,7 @@ function $ColorBox(){
|
|||
$c.edit_last_color = function(){
|
||||
// Edit the last color cell that's been selected as the foreground color.
|
||||
$input.click().one("change", function(){
|
||||
$last_fg_color_button.trigger({type: "mousedown", ctrlKey: false, button: 0});
|
||||
$last_fg_color_button.trigger({type: "pointerdown", ctrlKey: false, button: 0});
|
||||
$last_fg_color_button.find("input").val($input.val()).triggerHandler("change");
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -59,15 +59,15 @@ function $Component(name, orientation, $el){
|
|||
var $last_docked_to;
|
||||
var $dock_to;
|
||||
var $ghost;
|
||||
$c.on("mousedown", function(e){
|
||||
$c.on("pointerdown", function(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("mousemove", drag_onmousemove);
|
||||
$G.one("mouseup", function(e){
|
||||
$G.off("mousemove", drag_onmousemove);
|
||||
drag_onmouseup(e);
|
||||
$G.on("pointermove", drag_onpointermove);
|
||||
$G.one("pointerup", function(e){
|
||||
$G.off("pointermove", drag_onpointermove);
|
||||
drag_onpointerup(e);
|
||||
});
|
||||
|
||||
var rect = $c[0].getBoundingClientRect();
|
||||
|
|
@ -93,7 +93,7 @@ function $Component(name, orientation, $el){
|
|||
// Prevent text selection anywhere within the component
|
||||
e.preventDefault();
|
||||
});
|
||||
var drag_onmousemove = function(e){
|
||||
var drag_onpointermove = function(e){
|
||||
|
||||
$ghost.css({
|
||||
left: e.clientX + ox,
|
||||
|
|
@ -134,7 +134,7 @@ function $Component(name, orientation, $el){
|
|||
e.preventDefault();
|
||||
};
|
||||
|
||||
var drag_onmouseup = function(e){
|
||||
var drag_onpointerup = function(e){
|
||||
|
||||
$w.hide();
|
||||
|
||||
|
|
|
|||
|
|
@ -69,14 +69,14 @@ function $Handles($container, element, options){
|
|||
height: magnification * height,
|
||||
});
|
||||
};
|
||||
$h.on("mousedown", function(e){
|
||||
$h.on("pointerdown", function(e){
|
||||
dragged = false;
|
||||
if(e.button === 0){
|
||||
$G.on("mousemove", drag);
|
||||
$G.on("pointermove", drag);
|
||||
$("body").css({cursor: cursor}).addClass("jspaint-cursor-bully");
|
||||
}
|
||||
$G.one("mouseup", function(e){
|
||||
$G.off("mousemove", drag);
|
||||
$G.one("pointerup", function(e){
|
||||
$G.off("pointermove", drag);
|
||||
$("body").css({cursor: ""}).removeClass("jspaint-cursor-bully");
|
||||
|
||||
$resize_ghost.remove();
|
||||
|
|
@ -86,7 +86,7 @@ function $Handles($container, element, options){
|
|||
$container.trigger("update");
|
||||
});
|
||||
});
|
||||
$h.on("mousedown selectstart", function(e){
|
||||
$h.on("pointerdown selectstart", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ function $ToolBox(){
|
|||
var $tool_options = $(E("div")).addClass("jspaint-tool-options");
|
||||
|
||||
var showing_tooltips = false;
|
||||
$tools.on("mouseleave", function(){
|
||||
$tools.on("pointerleave", function(){
|
||||
showing_tooltips = false;
|
||||
$status_text.default();
|
||||
});
|
||||
|
|
@ -44,7 +44,7 @@ function $ToolBox(){
|
|||
$c.update_selected_tool();
|
||||
});
|
||||
|
||||
$b.on("mouseenter", function(){
|
||||
$b.on("pointerenter", function(){
|
||||
var show_tooltip = function(){
|
||||
showing_tooltips = true;
|
||||
$status_text.text(tool.description);
|
||||
|
|
@ -53,7 +53,7 @@ function $ToolBox(){
|
|||
show_tooltip();
|
||||
}else{
|
||||
var tid = setTimeout(show_tooltip, 300);
|
||||
$b.on("mouseleave", function(){
|
||||
$b.on("pointerleave", function(){
|
||||
clearTimeout(tid);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ function $Window($component){
|
|||
});
|
||||
$w.$x.on("mousedown", function(e){
|
||||
e.preventDefault();
|
||||
});
|
||||
$w.$x.on("pointerdown", function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
|
|
@ -26,7 +28,7 @@ function $Window($component){
|
|||
position: "absolute",
|
||||
zIndex: $Window.Z_INDEX++
|
||||
});
|
||||
$w.on("mousedown", function(){
|
||||
$w.on("pointerdown", function(){
|
||||
$w.css({
|
||||
zIndex: $Window.Z_INDEX++
|
||||
});
|
||||
|
|
@ -118,13 +120,13 @@ function $Window($component){
|
|||
top: e.clientY - my,
|
||||
});
|
||||
};
|
||||
$w.$titlebar.on("mousedown", function(e){
|
||||
$w.$titlebar.on("pointerdown", function(e){
|
||||
mx = e.clientX - $w[0].getBoundingClientRect().left;
|
||||
my = e.clientY - $w[0].getBoundingClientRect().top;
|
||||
$G.on("mousemove", drag);
|
||||
$G.on("pointermove", drag);
|
||||
});
|
||||
$G.on("mouseup", function(e){
|
||||
$G.off("mousemove", drag);
|
||||
$G.on("pointerup", function(e){
|
||||
$G.off("pointermove", drag);
|
||||
});
|
||||
$w.$titlebar.on("dblclick", function(e){
|
||||
if($component){
|
||||
|
|
@ -195,7 +197,7 @@ function $FormWindow(title){
|
|||
// this should really not be needed @TODO
|
||||
$b.addClass("jspaint-button jspaint-dialogue-button");
|
||||
|
||||
$b.on("mousedown", function(){
|
||||
$b.on("pointerdown", function(){
|
||||
$b.focus();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
};
|
||||
|
||||
var close_menus = function(){
|
||||
// console.log("close menus");
|
||||
$menus.find(".jspaint-menu-button").trigger("release");
|
||||
// Close any rogue floating submenus
|
||||
$(".jspaint-menu-popup").hide();
|
||||
|
|
@ -58,7 +59,7 @@
|
|||
$checkbox_area.text(item.checkbox.check() ? "✓" : "");
|
||||
}
|
||||
});
|
||||
$item.on("mouseover", function(){
|
||||
$item.on("pointerover", function(){
|
||||
$menu_popup.triggerHandler("update");
|
||||
$item.focus();
|
||||
});
|
||||
|
|
@ -84,26 +85,29 @@
|
|||
});
|
||||
};
|
||||
var open_tid, close_tid;
|
||||
$item.add($submenu_popup).on("mouseover", function(e){
|
||||
$item.add($submenu_popup).on("pointerover", function(e){
|
||||
if(open_tid){clearTimeout(open_tid);}
|
||||
if(close_tid){clearTimeout(close_tid);}
|
||||
});
|
||||
$item.on("mouseover", function(e){
|
||||
$item.on("pointerover", function(e){
|
||||
if(open_tid){clearTimeout(open_tid);}
|
||||
if(close_tid){clearTimeout(close_tid);}
|
||||
open_tid = setTimeout(open_submenu, 200);
|
||||
});
|
||||
$item.add($submenu_popup).on("mouseout", function(){
|
||||
$item.add($submenu_popup).on("pointerout", function(){
|
||||
if(open_tid){clearTimeout(open_tid);}
|
||||
if(close_tid){clearTimeout(close_tid);}
|
||||
close_tid = setTimeout(function(){
|
||||
$submenu_popup.hide();
|
||||
}, 200);
|
||||
});
|
||||
$item.on("mousedown click", open_submenu);
|
||||
$item.on("click pointerdown", open_submenu);
|
||||
}
|
||||
|
||||
$item.on("click", function(){
|
||||
$item.on("pointerup", function(e){
|
||||
if(e.pointerType === "mouse" && e.button !== 0){
|
||||
return;
|
||||
}
|
||||
if(item.checkbox){
|
||||
if(item.checkbox.toggle){
|
||||
item.checkbox.toggle();
|
||||
|
|
@ -114,14 +118,14 @@
|
|||
item.action();
|
||||
}
|
||||
});
|
||||
$item.on("mouseenter", function(){
|
||||
$item.on("pointerenter", function(){
|
||||
if(item.submenu){
|
||||
$status_text.text("");
|
||||
}else{
|
||||
$status_text.text(item.description || "");
|
||||
}
|
||||
});
|
||||
$item.on("mouseleave", function(){
|
||||
$item.on("pointerleave", function(){
|
||||
if($item.is(":visible")){
|
||||
$status_text.text("");
|
||||
}
|
||||
|
|
@ -162,14 +166,11 @@
|
|||
$menu_popup.hide();
|
||||
$menu_button.html(_html(menus_key));
|
||||
$menu_button.attr("tabIndex", -1)
|
||||
$menu_button.on("mousedown", function(){
|
||||
$menu_button.focus();
|
||||
});
|
||||
$menu_container.on("keydown", function(e){
|
||||
var $focused_item = $menu_popup.find(".jspaint-menu-item:focus");
|
||||
switch(e.keyCode){
|
||||
case 37: // Left
|
||||
$menu_container.prev().find(".jspaint-menu-button").trigger("mousedown");
|
||||
$menu_container.prev().find(".jspaint-menu-button").trigger("pointerdown");
|
||||
break;
|
||||
case 39: // Right
|
||||
if($focused_item.find(".jspaint-menu-item-submenu-area:not(:empty)").length){
|
||||
|
|
@ -177,7 +178,7 @@
|
|||
$(".jspaint-menu-popup .jspaint-menu-item").first().focus();
|
||||
e.preventDefault();
|
||||
}else{
|
||||
$menu_container.next().find(".jspaint-menu-button").trigger("mousedown");
|
||||
$menu_container.next().find(".jspaint-menu-button").trigger("pointerdown");
|
||||
}
|
||||
break;
|
||||
case 40: // Down
|
||||
|
|
@ -188,7 +189,7 @@
|
|||
}
|
||||
$next.focus();
|
||||
}else{
|
||||
$menu_button.mousedown();
|
||||
$menu_button.pointerdown();
|
||||
$menu_popup.find(".jspaint-menu-item").first().focus();
|
||||
}
|
||||
break;
|
||||
|
|
@ -200,7 +201,7 @@
|
|||
}
|
||||
$prev.focus();
|
||||
}else{
|
||||
$menu_button.mousedown(); // or maybe do nothing?
|
||||
$menu_button.pointerdown(); // or maybe do nothing?
|
||||
$menu_popup.find(".jspaint-menu-item").last().focus();
|
||||
}
|
||||
break;
|
||||
|
|
@ -216,21 +217,20 @@
|
|||
if(e.altKey){
|
||||
if(String.fromCharCode(e.keyCode) === _hotkey(menus_key)){
|
||||
e.preventDefault();
|
||||
$menu_button.mousedown();
|
||||
$menu_button.pointerdown();
|
||||
}
|
||||
}
|
||||
});
|
||||
$menu_button.on("mousedown mousemove", function(e){
|
||||
if(e.type === "mousemove" && !selecting_menus){
|
||||
$menu_button.on("pointerdown pointerenter", function(e){
|
||||
if(e.type === "pointerenter" && !selecting_menus){
|
||||
return;
|
||||
}
|
||||
if(e.type === "mousedown"){
|
||||
if(!$menu_button.hasClass("active")){
|
||||
this_click_opened_the_menu = true;
|
||||
}
|
||||
}
|
||||
|
||||
close_menus();
|
||||
// console.log("open menu");
|
||||
|
||||
$menu_button.focus();
|
||||
$menu_button.addClass("active");
|
||||
|
|
@ -241,12 +241,13 @@
|
|||
|
||||
$status_text.text("");
|
||||
});
|
||||
$menu_button.on("mouseup", function(e){
|
||||
$menu_button.on("pointerup", function(e){
|
||||
if(this_click_opened_the_menu){
|
||||
this_click_opened_the_menu = false;
|
||||
return;
|
||||
}
|
||||
if($menu_button.hasClass("active")){
|
||||
// console.log(e.type, "occurred and this click didn't open the menu, so...");
|
||||
close_menus();
|
||||
}
|
||||
});
|
||||
|
|
@ -264,9 +265,13 @@
|
|||
close_menus();
|
||||
}
|
||||
});
|
||||
$G.on("blur", close_menus);
|
||||
$G.on("mousedown mouseup", function(e){
|
||||
$G.on("blur", function(e){
|
||||
// console.log("blur", e.target, document.activeElement);
|
||||
close_menus();
|
||||
});
|
||||
$G.on("pointerdown pointerup", function(e){
|
||||
if($(e.target).closest(".jspaint-menus, .jspaint-menu-popup").length === 0){
|
||||
// console.log(e.type, "occurred outside of menus (on ", e.target, ") so...");
|
||||
close_menus();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ Selection.prototype.instantiate = function(_img, _passive){
|
|||
});
|
||||
|
||||
var mox, moy;
|
||||
var mousemove = function(e){
|
||||
var pointermove = function(e){
|
||||
var m = e2c(e);
|
||||
sel._x = Math.max(Math.min(m.x - mox, canvas.width), -sel._w);
|
||||
sel._y = Math.max(Math.min(m.y - moy, canvas.height), -sel._h);
|
||||
|
|
@ -71,7 +71,7 @@ Selection.prototype.instantiate = function(_img, _passive){
|
|||
}
|
||||
};
|
||||
|
||||
sel.canvas_mousedown = function(e){
|
||||
sel.canvas_pointerdown = function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var rect = sel.canvas.getBoundingClientRect();
|
||||
|
|
@ -80,9 +80,9 @@ Selection.prototype.instantiate = function(_img, _passive){
|
|||
mox = ~~(cx / rect.width * sel.canvas.width);
|
||||
moy = ~~(cy / rect.height * sel.canvas.height);
|
||||
|
||||
$G.on("mousemove", mousemove);
|
||||
$G.one("mouseup", function(){
|
||||
$G.off("mousemove", mousemove);
|
||||
$G.on("pointermove", pointermove);
|
||||
$G.one("pointerup", function(){
|
||||
$G.off("pointermove", pointermove);
|
||||
});
|
||||
|
||||
if(e.shiftKey){
|
||||
|
|
@ -90,7 +90,7 @@ Selection.prototype.instantiate = function(_img, _passive){
|
|||
}
|
||||
};
|
||||
|
||||
$(sel.canvas).on("mousedown", sel.canvas_mousedown);
|
||||
$(sel.canvas).on("pointerdown", sel.canvas_pointerdown);
|
||||
$canvas_area.trigger("resize");
|
||||
$status_position.text("");
|
||||
$status_size.text("");
|
||||
|
|
@ -157,7 +157,7 @@ Selection.prototype.replace_canvas = function(new_canvas){
|
|||
$(sel.canvas).replaceWith(new_canvas);
|
||||
sel.canvas = new_canvas;
|
||||
|
||||
$(sel.canvas).on("mousedown", sel.canvas_mousedown);
|
||||
$(sel.canvas).on("pointerdown", sel.canvas_pointerdown);
|
||||
sel.$ghost.triggerHandler("new-element", [sel.canvas]);
|
||||
sel.$ghost.triggerHandler("resize");//?
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ function TextBox(x, y, w, h){
|
|||
|
||||
tb.$ghost = $(E("div")).addClass("jspaint-textbox").appendTo($canvas_area);
|
||||
tb.$editor = $(E("textarea")).addClass("jspaint-textbox-editor");
|
||||
tb.$editor.on("mousedown dragover dragenter drop contextmenu", function(e){
|
||||
tb.$editor.on("pointerdown dragover dragenter drop contextmenu", function(e){
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
|
|
@ -100,7 +100,7 @@ TextBox.prototype.instantiate = function(){
|
|||
});
|
||||
|
||||
var mox, moy;
|
||||
var mousemove = function(e){
|
||||
var pointermove = function(e){
|
||||
var m = e2c(e);
|
||||
tb._x = Math.max(Math.min(m.x - mox, canvas.width), -tb._w);
|
||||
tb._y = Math.max(Math.min(m.y - moy, canvas.height), -tb._h);
|
||||
|
|
@ -110,7 +110,7 @@ TextBox.prototype.instantiate = function(){
|
|||
tb.draw();
|
||||
}
|
||||
};
|
||||
tb.$ghost.on("mousedown", function(e){
|
||||
tb.$ghost.on("pointerdown", function(e){
|
||||
e.preventDefault();
|
||||
|
||||
var rect = tb.$ghost[0].getBoundingClientRect();
|
||||
|
|
@ -119,9 +119,9 @@ TextBox.prototype.instantiate = function(){
|
|||
mox = ~~(cx);
|
||||
moy = ~~(cy);
|
||||
|
||||
$G.on("mousemove", mousemove);
|
||||
$G.one("mouseup", function(){
|
||||
$G.off("mousemove", mousemove);
|
||||
$G.on("pointermove", pointermove);
|
||||
$G.one("pointerup", function(){
|
||||
$G.off("pointermove", pointermove);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
97
src/app.js
97
src/app.js
|
|
@ -62,6 +62,7 @@ var $canvas_area = $(E("div")).addClass("jspaint-canvas-area").appendTo($H);
|
|||
var canvas = new Canvas();
|
||||
var ctx = canvas.ctx;
|
||||
var $canvas = $(canvas).appendTo($canvas_area);
|
||||
$canvas.attr("touch-action", "none");
|
||||
|
||||
var $canvas_handles = $Handles($canvas_area, canvas, {outset: 4, offset: 4, size_only: true});
|
||||
|
||||
|
|
@ -344,7 +345,7 @@ $G.on("cut copy paste", function(e){
|
|||
}
|
||||
});
|
||||
|
||||
var mouse, mouse_start, mouse_previous;
|
||||
var pointer, pointer_start, pointer_previous;
|
||||
var reverse, ctrl, button;
|
||||
function e2c(e){
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
|
|
@ -392,75 +393,75 @@ function tool_go(event_name){
|
|||
ctx.strokeStyle = stroke_color = colors[stroke_color_k];
|
||||
}
|
||||
if(selected_tool.shape){
|
||||
selected_tool.shape(ctx, mouse_start.x, mouse_start.y, mouse.x-mouse_start.x, mouse.y-mouse_start.y);
|
||||
selected_tool.shape(ctx, pointer_start.x, pointer_start.y, pointer.x-pointer_start.x, pointer.y-pointer_start.y);
|
||||
}
|
||||
|
||||
if(selected_tool[event_name]){
|
||||
selected_tool[event_name](ctx, mouse.x, mouse.y);
|
||||
selected_tool[event_name](ctx, pointer.x, pointer.y);
|
||||
}
|
||||
if(selected_tool.paint){
|
||||
if(selected_tool.continuous === "space"){
|
||||
var ham = brush_shape.match(/diagonal/) ? brosandham_line : bresenham_line;
|
||||
ham(mouse_previous.x, mouse_previous.y, mouse.x, mouse.y, function(x, y){
|
||||
ham(pointer_previous.x, pointer_previous.y, pointer.x, pointer.y, function(x, y){
|
||||
selected_tool.paint(ctx, x, y);
|
||||
});
|
||||
}else{
|
||||
selected_tool.paint(ctx, mouse.x, mouse.y);
|
||||
selected_tool.paint(ctx, pointer.x, pointer.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
function canvas_mouse_move(e){
|
||||
function canvas_pointer_move(e){
|
||||
ctrl = e.ctrlKey;
|
||||
mouse = e2c(e);
|
||||
pointer = e2c(e);
|
||||
if(e.shiftKey){
|
||||
if(selected_tool.name.match(/Line|Curve/)){
|
||||
var dist = Math.sqrt(
|
||||
(mouse.y - mouse_start.y) * (mouse.y - mouse_start.y) +
|
||||
(mouse.x - mouse_start.x) * (mouse.x - mouse_start.x)
|
||||
(pointer.y - pointer_start.y) * (pointer.y - pointer_start.y) +
|
||||
(pointer.x - pointer_start.x) * (pointer.x - pointer_start.x)
|
||||
);
|
||||
var octurn = (TAU / 8);
|
||||
var dir08 = Math.atan2(mouse.y - mouse_start.y, mouse.x - mouse_start.x) / octurn;
|
||||
var dir08 = Math.atan2(pointer.y - pointer_start.y, pointer.x - pointer_start.x) / octurn;
|
||||
var dir = Math.round(dir08) * octurn;
|
||||
mouse.x = Math.round(mouse_start.x + Math.cos(dir) * dist);
|
||||
mouse.y = Math.round(mouse_start.y + Math.sin(dir) * dist);
|
||||
pointer.x = Math.round(pointer_start.x + Math.cos(dir) * dist);
|
||||
pointer.y = Math.round(pointer_start.y + Math.sin(dir) * dist);
|
||||
}else if(selected_tool.shape){
|
||||
var w = Math.abs(mouse.x - mouse_start.x);
|
||||
var h = Math.abs(mouse.y - mouse_start.y);
|
||||
var w = Math.abs(pointer.x - pointer_start.x);
|
||||
var h = Math.abs(pointer.y - pointer_start.y);
|
||||
if(w < h){
|
||||
if(mouse.y > mouse_start.y){
|
||||
mouse.y = mouse_start.y + w;
|
||||
if(pointer.y > pointer_start.y){
|
||||
pointer.y = pointer_start.y + w;
|
||||
}else{
|
||||
mouse.y = mouse_start.y - w;
|
||||
pointer.y = pointer_start.y - w;
|
||||
}
|
||||
}else{
|
||||
if(mouse.x > mouse_start.x){
|
||||
mouse.x = mouse_start.x + h;
|
||||
if(pointer.x > pointer_start.x){
|
||||
pointer.x = pointer_start.x + h;
|
||||
}else{
|
||||
mouse.x = mouse_start.x - h;
|
||||
pointer.x = pointer_start.x - h;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tool_go();
|
||||
mouse_previous = mouse;
|
||||
pointer_previous = pointer;
|
||||
}
|
||||
$canvas.on("mousemove", function(e){
|
||||
mouse = e2c(e);
|
||||
$status_position.text(mouse.x + "," + mouse.y);
|
||||
$canvas.on("pointermove", function(e){
|
||||
pointer = e2c(e);
|
||||
$status_position.text(pointer.x + "," + pointer.y);
|
||||
});
|
||||
$canvas.on("mouseleave", function(e){
|
||||
$canvas.on("pointerleave", function(e){
|
||||
$status_position.text("");
|
||||
});
|
||||
|
||||
var mouse_was_pressed = false;
|
||||
$canvas.on("mousedown", function(e){
|
||||
if(mouse_was_pressed && (reverse ? (button === 2) : (button === 0))){
|
||||
mouse_was_pressed = false;
|
||||
var pointer_was_pressed = false;
|
||||
$canvas.on("pointerdown", function(e){
|
||||
if(pointer_was_pressed && (reverse ? (button === 2) : (button === 0))){
|
||||
pointer_was_pressed = false;
|
||||
return cancel();
|
||||
}
|
||||
mouse_was_pressed = true;
|
||||
$G.one("mouseup", function(e){
|
||||
mouse_was_pressed = false;
|
||||
pointer_was_pressed = true;
|
||||
$G.one("pointerup", function(e){
|
||||
pointer_was_pressed = false;
|
||||
});
|
||||
|
||||
if(e.button === 0){
|
||||
|
|
@ -472,32 +473,30 @@ $canvas.on("mousedown", function(e){
|
|||
}
|
||||
button = e.button;
|
||||
ctrl = e.ctrlKey;
|
||||
mouse_start = mouse_previous = mouse = e2c(e);
|
||||
pointer_start = pointer_previous = pointer = e2c(e);
|
||||
|
||||
var mousedown_action = function(){
|
||||
if(selected_tool.paint || selected_tool.mousedown){
|
||||
tool_go("mousedown");
|
||||
var pointerdown_action = function(){
|
||||
if(selected_tool.paint || selected_tool.pointerdown){
|
||||
tool_go("pointerdown");
|
||||
}
|
||||
|
||||
$G.on("mousemove", canvas_mouse_move);
|
||||
$G.on("pointermove", canvas_pointer_move);
|
||||
if(selected_tool.continuous === "time"){
|
||||
var iid = setInterval(function(){
|
||||
tool_go();
|
||||
}, 5);
|
||||
var iid = setInterval(tool_go, 5);
|
||||
}
|
||||
$G.one("mouseup", function(e, canceling){
|
||||
$G.one("pointerup", function(e, canceling){
|
||||
button = undefined;
|
||||
if(canceling){
|
||||
selected_tool.cancel && selected_tool.cancel();
|
||||
}else{
|
||||
mouse = e2c(e);
|
||||
selected_tool.mouseup && selected_tool.mouseup(ctx, mouse.x, mouse.y);
|
||||
pointer = e2c(e);
|
||||
selected_tool.pointerup && selected_tool.pointerup(ctx, pointer.x, pointer.y);
|
||||
}
|
||||
if(selected_tool.deselect){
|
||||
selected_tool = previous_tool;
|
||||
$toolbox && $toolbox.update_selected_tool();
|
||||
}
|
||||
$G.off("mousemove", canvas_mouse_move);
|
||||
$G.off("pointermove", canvas_pointer_move);
|
||||
if(iid){
|
||||
clearInterval(iid);
|
||||
}
|
||||
|
|
@ -509,13 +508,13 @@ $canvas.on("mousedown", function(e){
|
|||
// (Or in OOPLiE, `If the selected tool is passive`)
|
||||
// Or it could use a getter
|
||||
if((typeof selected_tool.passive === "function") ? selected_tool.passive() : selected_tool.passive){
|
||||
mousedown_action();
|
||||
pointerdown_action();
|
||||
}else{
|
||||
undoable(mousedown_action);
|
||||
undoable(pointerdown_action);
|
||||
}
|
||||
});
|
||||
|
||||
$canvas_area.on("mousedown", function(e){
|
||||
$canvas_area.on("pointerdown", function(e){
|
||||
if(e.button === 0){
|
||||
if($canvas_area.is(e.target)){
|
||||
if(selection){
|
||||
|
|
@ -525,7 +524,7 @@ $canvas_area.on("mousedown", function(e){
|
|||
}
|
||||
});
|
||||
|
||||
$("body").on("mousedown contextmenu", function(e){
|
||||
$("body").on("mousedown selectstart contextmenu", function(e){
|
||||
if(
|
||||
e.target instanceof HTMLSelectElement ||
|
||||
e.target instanceof HTMLTextAreaElement ||
|
||||
|
|
@ -539,5 +538,5 @@ $("body").on("mousedown contextmenu", function(e){
|
|||
|
||||
// Stop drawing (or dragging or whatver) if you Alt+Tab or whatever
|
||||
$G.on("blur", function(e){
|
||||
$G.triggerHandler("mouseup");
|
||||
$G.triggerHandler("pointerup");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
$canvas.on("user-resized.ugly-hook", may_be_changed);
|
||||
|
||||
$canvas_area.on("mousedown.ugly-hook", "*", function(e, synthetic){
|
||||
$canvas_area.on("pointerdown.ugly-hook", "*", function(e, synthetic){
|
||||
debug_event(e, synthetic);
|
||||
if(synthetic){ return; }
|
||||
|
||||
|
|
@ -28,19 +28,19 @@
|
|||
may_be_changed();
|
||||
}else{
|
||||
// Changes may occur when you release from a stroke
|
||||
mouse_operations = [e];
|
||||
var mousemove = function(e, synthetic){
|
||||
pointer_operations = [e];
|
||||
var pointermove = function(e, synthetic){
|
||||
debug_event(e, synthetic);
|
||||
if(synthetic){ return; }
|
||||
|
||||
mouse_operations.push(e);
|
||||
pointer_operations.push(e);
|
||||
};
|
||||
$G.on("mousemove.ugly-hook", mousemove);
|
||||
$G.one("mouseup.ugly-hook", function(e, synthetic){
|
||||
$G.on("pointermove.ugly-hook", pointermove);
|
||||
$G.one("pointerup.ugly-hook", function(e, synthetic){
|
||||
debug_event(e, synthetic);
|
||||
if(synthetic){ return; }
|
||||
|
||||
$G.off("mousemove.ugly-hook", mousemove);
|
||||
$G.off("pointermove.ugly-hook", pointermove);
|
||||
|
||||
may_be_changed();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -429,12 +429,12 @@ function redo(){
|
|||
}
|
||||
function cancel(){
|
||||
if(!selected_tool.passive){ undo(); }
|
||||
$G.triggerHandler("mouseup", "cancel");
|
||||
$G.triggerHandler("pointerup", "cancel");
|
||||
}
|
||||
function this_ones_a_frame_changer(){
|
||||
deselect();
|
||||
saved = false;
|
||||
$G.triggerHandler("mouseup", "cancel");
|
||||
$G.triggerHandler("pointerup", "cancel");
|
||||
$G.triggerHandler("session-update");
|
||||
}
|
||||
function deselect(){
|
||||
|
|
@ -558,7 +558,7 @@ function image_attributes(){
|
|||
|
||||
$main.find("input")
|
||||
.css({width: "40px"})
|
||||
.on("change keyup keydown keypress mousedown mousemove paste drop", function(){
|
||||
.on("change keyup keydown keypress pointerdown pointermove paste drop", function(){
|
||||
if($(this).is($width)){
|
||||
width_in_px = $width.val() * unit_sizes_in_px[current_unit];
|
||||
}
|
||||
|
|
@ -653,7 +653,7 @@ function image_flip_and_rotate(){
|
|||
// Select the radio for this field
|
||||
$label.find("input[type='radio']").prop("checked", true);
|
||||
});
|
||||
// @TODO: enable all controls that are accessable to the mouse
|
||||
// @TODO: enable all controls that are accessable to the pointer
|
||||
|
||||
$fieldset.find("label").css({display: "block"});
|
||||
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@
|
|||
var other_user = snap.val();
|
||||
|
||||
// @TODO: display other cursor types?
|
||||
// @TODO: display mouse button state?
|
||||
// @TODO: display pointer button state?
|
||||
// @TODO: display selections
|
||||
|
||||
var cursor_canvas = new Canvas(32, 32);
|
||||
|
|
@ -204,14 +204,14 @@
|
|||
});
|
||||
|
||||
var previous_uri;
|
||||
var mouse_operations = [];
|
||||
var pointer_operations = [];
|
||||
|
||||
var sync = function(){
|
||||
// Sync the data from this client to the server (one-way)
|
||||
var uri = canvas.toDataURL();
|
||||
if(previous_uri !== uri){
|
||||
debug(["clear mouse operations to set data", mouse_operations]);
|
||||
mouse_operations = [];
|
||||
debug(["clear pointer operations to set data", pointer_operations]);
|
||||
pointer_operations = [];
|
||||
debug("set data");
|
||||
session.fb_data.set(uri);
|
||||
previous_uri = uri;
|
||||
|
|
@ -240,9 +240,9 @@
|
|||
// Load the new image data
|
||||
var img = new Image();
|
||||
img.onload = function(){
|
||||
// Cancel any in-progress mouse operations
|
||||
if(mouse_operations.length){
|
||||
$G.triggerHandler("mouseup", "cancel");
|
||||
// Cancel any in-progress pointer operations
|
||||
if(pointer_operations.length){
|
||||
$G.triggerHandler("pointerup", "cancel");
|
||||
}
|
||||
|
||||
// Write the image data to the canvas
|
||||
|
|
@ -252,10 +252,10 @@
|
|||
// Perhaps a better way of syncing transparency
|
||||
// and other options will be established)
|
||||
|
||||
// Playback recorded in-progress mouse operations
|
||||
console.log("playback", mouse_operations);
|
||||
for(var i=0; i<mouse_operations.length; i++){
|
||||
var e = mouse_operations[i];
|
||||
// Playback recorded in-progress pointer operations
|
||||
console.log("playback", pointer_operations);
|
||||
for(var i=0; i<pointer_operations.length; i++){
|
||||
var e = pointer_operations[i];
|
||||
// Trigger the event at each place it is listened for
|
||||
$canvas.triggerHandler(e, ["synthetic"]);
|
||||
$G.triggerHandler(e, ["synthetic"]);
|
||||
|
|
@ -267,7 +267,7 @@
|
|||
|
||||
// Update the cursor status
|
||||
|
||||
$G.on("mousemove.session-hook", function(e){
|
||||
$G.on("pointermove.session-hook", function(e){
|
||||
var m = e2c(e);
|
||||
session.fb_user.child("cursor").update({
|
||||
x: m.x,
|
||||
|
|
@ -282,7 +282,7 @@
|
|||
});
|
||||
});
|
||||
|
||||
// @FIXME: the cursor can come back from "away" via a mouse event
|
||||
// @FIXME: the cursor can come back from "away" via a pointer event
|
||||
// while the window is blurred and stay there when the user goes away
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -70,12 +70,12 @@ var $Choose = function(things, display, choose, is_chosen){
|
|||
$chooser.on("redraw", update);
|
||||
$G.on("option-changed", update);
|
||||
|
||||
$option_container.on("mousedown click", choose_thing);
|
||||
$chooser.on("mousedown", function(){
|
||||
$option_container.on("mouseenter", choose_thing);
|
||||
$option_container.on("pointerdown click", choose_thing);
|
||||
$chooser.on("pointerdown", function(){
|
||||
$option_container.on("pointerenter", choose_thing);
|
||||
});
|
||||
$G.on("mouseup", function(){
|
||||
$option_container.off("mouseenter", choose_thing);
|
||||
$G.on("pointerup", function(){
|
||||
$option_container.off("pointerenter", choose_thing);
|
||||
});
|
||||
|
||||
})(things[i]);
|
||||
|
|
|
|||
144
src/tools.js
144
src/tools.js
|
|
@ -14,12 +14,12 @@ tools = [{
|
|||
y_min: +Infinity,
|
||||
y_max: -Infinity,
|
||||
|
||||
mousedown: function(){
|
||||
pointerdown: function(){
|
||||
var tool = this;
|
||||
tool.x_min = mouse.x;
|
||||
tool.x_max = mouse.x+1;
|
||||
tool.y_min = mouse.y;
|
||||
tool.y_max = mouse.y+1;
|
||||
tool.x_min = pointer.x;
|
||||
tool.x_max = pointer.x+1;
|
||||
tool.y_min = pointer.y;
|
||||
tool.y_max = pointer.y+1;
|
||||
tool.points = [];
|
||||
|
||||
if(selection){
|
||||
|
|
@ -28,26 +28,26 @@ tools = [{
|
|||
selection = null;
|
||||
}
|
||||
// The inverty brush is continuous in space which means
|
||||
// paint(ctx, x, y) will be called for each pixel the mouse moves
|
||||
// and we only need to record individual mouse events to make the polygon
|
||||
var onmousemove = function(e){
|
||||
var mouse = e2c(e);
|
||||
// Constrain the mouse to the canvas
|
||||
mouse.x = Math.min(canvas.width, mouse.x);
|
||||
mouse.x = Math.max(0, mouse.x);
|
||||
mouse.y = Math.min(canvas.height, mouse.y);
|
||||
mouse.y = Math.max(0, mouse.y);
|
||||
// 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 pointer = e2c(e);
|
||||
// Constrain the pointer to the canvas
|
||||
pointer.x = Math.min(canvas.width, pointer.x);
|
||||
pointer.x = Math.max(0, pointer.x);
|
||||
pointer.y = Math.min(canvas.height, pointer.y);
|
||||
pointer.y = Math.max(0, pointer.y);
|
||||
// Add the point
|
||||
tool.points.push(mouse);
|
||||
tool.points.push(pointer);
|
||||
// Update the boundaries of the polygon
|
||||
tool.x_min = Math.min(mouse.x, tool.x_min);
|
||||
tool.x_max = Math.max(mouse.x, tool.x_max);
|
||||
tool.y_min = Math.min(mouse.y, tool.y_min);
|
||||
tool.y_max = Math.max(mouse.y, tool.y_max);
|
||||
tool.x_min = Math.min(pointer.x, tool.x_min);
|
||||
tool.x_max = Math.max(pointer.x, tool.x_max);
|
||||
tool.y_min = Math.min(pointer.y, tool.y_min);
|
||||
tool.y_max = Math.max(pointer.y, tool.y_max);
|
||||
};
|
||||
$G.on("mousemove", onmousemove);
|
||||
$G.one("mouseup", function(){
|
||||
$G.off("mousemove", onmousemove);
|
||||
$G.on("pointermove", onpointermove);
|
||||
$G.one("pointerup", function(){
|
||||
$G.off("pointermove", onpointermove);
|
||||
});
|
||||
},
|
||||
continuous: "space",
|
||||
|
|
@ -87,7 +87,7 @@ tools = [{
|
|||
ctx.putImageData(id_dest, rect_x, rect_y);
|
||||
|
||||
},
|
||||
mouseup: function(){
|
||||
pointerup: function(){
|
||||
// Revert the inverty brush paint
|
||||
ctx.copy(undos[undos.length-1]);
|
||||
|
||||
|
|
@ -116,40 +116,40 @@ tools = [{
|
|||
description: "Selects a rectangular part of the picture to move, copy, or edit.",
|
||||
cursor: ["precise", [16, 16], "crosshair"],
|
||||
passive: true,
|
||||
mousedown: function(){
|
||||
pointerdown: function(){
|
||||
if(selection){
|
||||
selection.draw();
|
||||
selection.destroy();
|
||||
selection = null;
|
||||
}
|
||||
var mouse_has_moved = false;
|
||||
$G.one("mousemove", function(){
|
||||
mouse_has_moved = true;
|
||||
var pointer_has_moved = false;
|
||||
$G.one("pointermove", function(){
|
||||
pointer_has_moved = true;
|
||||
});
|
||||
$G.one("mouseup", function(){
|
||||
if(!mouse_has_moved && selection){
|
||||
$G.one("pointerup", function(){
|
||||
if(!pointer_has_moved && selection){
|
||||
selection.draw();//?
|
||||
selection.destroy();
|
||||
selection = null;
|
||||
}
|
||||
});
|
||||
selection = new Selection(mouse.x, mouse.y, 1, 1);
|
||||
selection = new Selection(pointer.x, pointer.y, 1, 1);
|
||||
},
|
||||
paint: function(){
|
||||
if(!selection){ return; }
|
||||
selection.w = selection.x - mouse.x;
|
||||
selection.h = selection.y - mouse.y;
|
||||
var x1 = Math.max(0, Math.min(selection.x, mouse.x));
|
||||
var y1 = Math.max(0, Math.min(selection.y, mouse.y));
|
||||
var x2 = Math.min(canvas.width, Math.max(selection.x, mouse.x));
|
||||
var y2 = Math.min(canvas.height, Math.max(selection.y, mouse.y));
|
||||
selection.w = selection.x - pointer.x;
|
||||
selection.h = selection.y - pointer.y;
|
||||
var x1 = Math.max(0, Math.min(selection.x, pointer.x));
|
||||
var y1 = Math.max(0, Math.min(selection.y, pointer.y));
|
||||
var x2 = Math.min(canvas.width, Math.max(selection.x, pointer.x));
|
||||
var y2 = Math.min(canvas.height, Math.max(selection.y, pointer.y));
|
||||
selection._x = x1;
|
||||
selection._y = y1;
|
||||
selection._w = Math.max(1, x2 - x1);
|
||||
selection._h = Math.max(1, y2 - y1);
|
||||
selection.position();
|
||||
},
|
||||
mouseup: function(){
|
||||
pointerup: function(){
|
||||
if(!selection){ return; }
|
||||
|
||||
if(ctrl){
|
||||
|
|
@ -219,7 +219,7 @@ tools = [{
|
|||
name: "Fill With Color",
|
||||
description: "Fills an area with the selected drawing color.",
|
||||
cursor: ["fill-bucket", [8, 22], "crosshair"],
|
||||
mousedown: function(ctx, x, y){
|
||||
pointerdown: function(ctx, x, y){
|
||||
|
||||
// Get the rgba values of the selected fill color
|
||||
var rgba = get_rgba_from_color(fill_color);
|
||||
|
|
@ -241,9 +241,9 @@ tools = [{
|
|||
background: this.current_color
|
||||
});
|
||||
},
|
||||
mousedown: function(){
|
||||
pointerdown: function(){
|
||||
var _this = this;
|
||||
$G.one("mouseup", function(){
|
||||
$G.one("pointerup", function(){
|
||||
_this.$options.css({
|
||||
background: ""
|
||||
});
|
||||
|
|
@ -262,7 +262,7 @@ tools = [{
|
|||
}
|
||||
this.display_current_color();
|
||||
},
|
||||
mouseup: function(){
|
||||
pointerup: function(){
|
||||
colors[fill_color_k] = this.current_color;
|
||||
$G.trigger("option-changed");
|
||||
},
|
||||
|
|
@ -276,7 +276,7 @@ tools = [{
|
|||
deselect: true,
|
||||
passive: true,
|
||||
// @TODO: choose and preview viewport with rectangular cursor
|
||||
mousedown: function(){
|
||||
pointerdown: function(){
|
||||
if(magnification > 1){
|
||||
reset_magnification();
|
||||
}else{
|
||||
|
|
@ -343,39 +343,39 @@ tools = [{
|
|||
description: "Inserts text into the picture.",
|
||||
cursor: ["precise", [16, 16], "crosshair"],
|
||||
passive: true,
|
||||
mousedown: function(){
|
||||
pointerdown: function(){
|
||||
if(textbox){
|
||||
textbox.draw();
|
||||
textbox.destroy();
|
||||
}
|
||||
var mouse_has_moved = false;
|
||||
$G.one("mousemove", function(){
|
||||
mouse_has_moved = true;
|
||||
var pointer_has_moved = false;
|
||||
$G.one("pointermove", function(){
|
||||
pointer_has_moved = true;
|
||||
});
|
||||
$G.one("mouseup", function(){
|
||||
if(!mouse_has_moved && textbox){
|
||||
$G.one("pointerup", function(){
|
||||
if(!pointer_has_moved && textbox){
|
||||
textbox.draw();
|
||||
textbox.destroy();
|
||||
textbox = null;
|
||||
}
|
||||
});
|
||||
textbox = new TextBox(mouse.x, mouse.y, 1, 1);
|
||||
textbox = new TextBox(pointer.x, pointer.y, 1, 1);
|
||||
},
|
||||
paint: function(){
|
||||
if(!textbox){ return; }
|
||||
textbox.w = textbox.x - mouse.x;
|
||||
textbox.h = textbox.y - mouse.y;
|
||||
var x1 = Math.max(0, Math.min(textbox.x, mouse.x));
|
||||
var y1 = Math.max(0, Math.min(textbox.y, mouse.y));
|
||||
var x2 = Math.min(canvas.width, Math.max(textbox.x, mouse.x));
|
||||
var y2 = Math.min(canvas.height, Math.max(textbox.y, mouse.y));
|
||||
textbox.w = textbox.x - pointer.x;
|
||||
textbox.h = textbox.y - pointer.y;
|
||||
var x1 = Math.max(0, Math.min(textbox.x, pointer.x));
|
||||
var y1 = Math.max(0, Math.min(textbox.y, pointer.y));
|
||||
var x2 = Math.min(canvas.width, Math.max(textbox.x, pointer.x));
|
||||
var y2 = Math.min(canvas.height, Math.max(textbox.y, pointer.y));
|
||||
textbox._x = x1;
|
||||
textbox._y = y1;
|
||||
textbox._w = Math.max(1, x2 - x1);
|
||||
textbox._h = Math.max(1, y2 - y1);
|
||||
textbox.position();
|
||||
},
|
||||
mouseup: function(){
|
||||
pointerup: function(){
|
||||
if(!textbox){ return; }
|
||||
textbox.instantiate();
|
||||
},
|
||||
|
|
@ -405,12 +405,12 @@ tools = [{
|
|||
// but the first action should be undoable / cancelable
|
||||
return this.points.length > 0;
|
||||
},
|
||||
mouseup: function(ctx, x, y){
|
||||
pointerup: function(ctx, x, y){
|
||||
if(this.points.length >= 4){
|
||||
this.points = [];
|
||||
}
|
||||
},
|
||||
mousedown: function(ctx, x, y){
|
||||
pointerdown: function(ctx, x, y){
|
||||
if(this.points.length < 1){
|
||||
// This would be so much better in CoffeeScript
|
||||
var thine = this;
|
||||
|
|
@ -483,10 +483,10 @@ tools = [{
|
|||
cursor: ["precise", [16, 16], "crosshair"],
|
||||
|
||||
// Record the last click for double-clicking
|
||||
// A double click happens on mousedown of a second click
|
||||
// A double click happens on pointerdown of a second click
|
||||
// (within a cylindrical volume in 2d space + 1d time)
|
||||
last_click_mousedown: {x: -Infinity, y: -Infinity, time: -Infinity},
|
||||
last_click_mouseup: {x: -Infinity, y: -Infinity, time: -Infinity},
|
||||
last_click_pointerdown: {x: -Infinity, y: -Infinity, time: -Infinity},
|
||||
last_click_pointerup: {x: -Infinity, y: -Infinity, time: -Infinity},
|
||||
|
||||
// The vertices of the polygon
|
||||
points: [],
|
||||
|
|
@ -503,7 +503,7 @@ tools = [{
|
|||
return this.points.length > 0;
|
||||
// In other words, it's supposed to be one undoable action
|
||||
},
|
||||
mouseup: function(ctx, x, y){
|
||||
pointerup: function(ctx, x, y){
|
||||
if(this.points.length < 1){ return; }
|
||||
|
||||
var i = this.points.length - 1;
|
||||
|
|
@ -516,9 +516,9 @@ tools = [{
|
|||
this.complete(ctx, x, y);
|
||||
}
|
||||
|
||||
this.last_click_mouseup = {x: x, y: y, time: +(new Date)};
|
||||
this.last_click_pointerup = {x: x, y: y, time: +(new Date)};
|
||||
},
|
||||
mousedown: function(ctx, x, y){
|
||||
pointerdown: function(ctx, x, y){
|
||||
var tool = this;
|
||||
|
||||
if(tool.points.length < 1){
|
||||
|
|
@ -541,18 +541,18 @@ tools = [{
|
|||
tool.points.push({x: x, y: y});
|
||||
});
|
||||
}else{
|
||||
var lx = tool.last_click_mousedown.x;
|
||||
var ly = tool.last_click_mousedown.y;
|
||||
var lt = tool.last_click_mousedown.time;
|
||||
var lx = tool.last_click_pointerdown.x;
|
||||
var ly = tool.last_click_pointerdown.y;
|
||||
var lt = tool.last_click_pointerdown.time;
|
||||
var dx = x - lx;
|
||||
var dy = y - ly;
|
||||
var dt = +(new Date) - lt;
|
||||
var d = Math.sqrt(dx*dx + dy*dy);
|
||||
if(d < 4.1010101 && dt < 250){ // arbitrary 101
|
||||
tool.complete(ctx, x, y);
|
||||
// Release the mouse to prevent tool.paint()
|
||||
// Release the pointer to prevent tool.paint()
|
||||
// being called and clearing the canvas
|
||||
$canvas.trigger("mouseup");
|
||||
$canvas.trigger("pointerup");
|
||||
}else{
|
||||
// Add the point
|
||||
tool.points.push({x: x, y: y});
|
||||
|
|
@ -564,7 +564,7 @@ tools = [{
|
|||
tool.y_max = Math.max(y, tool.y_max);
|
||||
}
|
||||
}
|
||||
tool.last_click_mousedown = {x: x, y: y, time: +new Date};
|
||||
tool.last_click_pointerdown = {x: x, y: y, time: +new Date};
|
||||
},
|
||||
paint: function(ctx, x, y){
|
||||
if(this.points.length < 1){ return; }
|
||||
|
|
@ -670,8 +670,8 @@ tools = [{
|
|||
},
|
||||
reset: function(){
|
||||
this.points = [];
|
||||
this.last_click_mousedown = {x: -Infinity, y: -Infinity, time: -Infinity};
|
||||
this.last_click_mouseup = {x: -Infinity, y: -Infinity, time: -Infinity};
|
||||
this.last_click_pointerdown = {x: -Infinity, y: -Infinity, time: -Infinity};
|
||||
this.last_click_pointerup = {x: -Infinity, y: -Infinity, time: -Infinity};
|
||||
},
|
||||
shape_colors: true,
|
||||
$options: $ChooseShapeStyle()
|
||||
|
|
|
|||
Loading…
Reference in New Issue