drag windows; windows start centered
parent
b975f8f94d
commit
0449e0bb50
|
@ -9,6 +9,8 @@ function $Component(name, orientation, $el){
|
|||
wide: $bottom,
|
||||
}[orientation]);
|
||||
|
||||
var $w;
|
||||
|
||||
var ox, oy, w, h, pos, pos_axis;
|
||||
var dragging = false;
|
||||
var $dock_to;
|
||||
|
@ -86,7 +88,12 @@ function $Component(name, orientation, $el){
|
|||
if(!dragging) return;
|
||||
dragging = false;
|
||||
|
||||
if($w){
|
||||
$w.close();
|
||||
$w = null;
|
||||
}
|
||||
if($dock_to){
|
||||
//dock component to $dock_to
|
||||
$dock_to.append($c);
|
||||
|
||||
pos = Math.max(pos, 0);
|
||||
|
@ -99,7 +106,20 @@ function $Component(name, orientation, $el){
|
|||
$c.css("position", "relative");
|
||||
$c.css(pos_axis, pos);
|
||||
}else{
|
||||
//put component in window
|
||||
//put component in a window
|
||||
/*
|
||||
$w = new $Window($c);
|
||||
$w.title(name);
|
||||
$w.$content.append($c);
|
||||
$w.$content.addClass({
|
||||
tall: "jspaint-vertical",
|
||||
wide: "jspaint-horizontal",
|
||||
}[orientation]);
|
||||
$w.css({
|
||||
left: e.clientX + ox,
|
||||
top: e.clientY + oy
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
$ghost && $ghost.remove(), $ghost = null;
|
||||
|
|
53
$Window.js
53
$Window.js
|
@ -1,15 +1,57 @@
|
|||
|
||||
function $Window(){
|
||||
function $Window($component){
|
||||
var $w = $(E("div")).addClass("jspaint-window").appendTo("body");
|
||||
$w.$titlebar = $(E("div")).addClass("jspaint-window-titlebar").appendTo($w);
|
||||
$w.$title = $(E("span")).addClass("jspaint-window-title").appendTo($w.$titlebar);
|
||||
$w.$x = $(E("button")).addClass("jspaint-window-close-button").appendTo($w.$titlebar);
|
||||
$w.$content = $(E("div")).addClass("jspaint-window-content").appendTo($w);
|
||||
|
||||
if($component){
|
||||
$w.addClass("jspaint-component-window");
|
||||
}
|
||||
|
||||
$w.$x.on("click", function(){
|
||||
$w.close();
|
||||
});
|
||||
|
||||
$w.css({position: "absolute"});
|
||||
|
||||
$w.apply_bounds = function(){
|
||||
$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(){
|
||||
console.log($w.width(), $w.height());
|
||||
$w.css({
|
||||
left: (innerWidth - $w.width()) / 2,
|
||||
top: (innerHeight - $w.height()) / 2,
|
||||
});
|
||||
$w.apply_bounds();
|
||||
};
|
||||
|
||||
setTimeout(function(){ $w.center(); });
|
||||
|
||||
$(window).on("resize", $w.apply_bounds);
|
||||
|
||||
var mx, my;
|
||||
var drag = function(e){
|
||||
$w.css({
|
||||
left: e.clientX - mx,
|
||||
top: e.clientY - my,
|
||||
});
|
||||
};
|
||||
$w.$titlebar.on("mousedown", function(e){
|
||||
mx = e.clientX - $w[0].getBoundingClientRect().left;
|
||||
my = e.clientY - $w[0].getBoundingClientRect().top;
|
||||
$G.on("mousemove", drag);
|
||||
});
|
||||
$G.on("mouseup", function(e){
|
||||
$G.off("mousemove", drag);
|
||||
});
|
||||
|
||||
$w.$Button = function(text, handler){
|
||||
$w.$content.append(
|
||||
$(E("button"))
|
||||
|
@ -29,14 +71,11 @@ function $Window(){
|
|||
}
|
||||
};
|
||||
$w.close = function(){
|
||||
if($component){
|
||||
$component.detach();
|
||||
}
|
||||
$w.remove();
|
||||
};
|
||||
|
||||
$w.css({
|
||||
position: "absolute",
|
||||
right: 50,
|
||||
top: 50
|
||||
});
|
||||
|
||||
return $w;
|
||||
}
|
||||
|
|
3
TODO.md
3
TODO.md
|
@ -26,6 +26,7 @@
|
|||
`var mouse_was_pressed = false;`
|
||||
* BUG: status text gets cut off
|
||||
Also, it should gracefully push the dimension displays off the edge instead of covering up the text with usually blank space
|
||||
* BUG: cropping doesn't update the canvas handles
|
||||
|
||||
* Handle some edge cases
|
||||
* Undoing/redoing should stop brush drawing
|
||||
|
@ -112,7 +113,7 @@ This isn't in mspaint, but maybe use should be able to click (double-click?) one
|
|||
|
||||
### Components / Windows
|
||||
* Drag components into a window
|
||||
* Drag windows
|
||||
* Drag windows by the contained component seamlessly
|
||||
* Double-click a component window's titlebar to dock the component to its most recent location.
|
||||
|
||||
|
||||
|
|
|
@ -192,7 +192,9 @@ function render_history_as_gif(){
|
|||
var url = URL.createObjectURL(blob);
|
||||
$output.empty().append(
|
||||
$(E("a")).attr({href: url, target: "_blank"}).append(
|
||||
$(E("img")).attr({src: url})
|
||||
$(E("img")).on("load", function(){
|
||||
$win.center();
|
||||
}).attr({src: url})
|
||||
).on("click", function(e){
|
||||
$win.close();
|
||||
if(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry){
|
||||
|
|
Loading…
Reference in New Issue