drag windows; windows start centered
parent
b975f8f94d
commit
0449e0bb50
|
@ -9,6 +9,8 @@ function $Component(name, orientation, $el){
|
||||||
wide: $bottom,
|
wide: $bottom,
|
||||||
}[orientation]);
|
}[orientation]);
|
||||||
|
|
||||||
|
var $w;
|
||||||
|
|
||||||
var ox, oy, w, h, pos, pos_axis;
|
var ox, oy, w, h, pos, pos_axis;
|
||||||
var dragging = false;
|
var dragging = false;
|
||||||
var $dock_to;
|
var $dock_to;
|
||||||
|
@ -86,7 +88,12 @@ function $Component(name, orientation, $el){
|
||||||
if(!dragging) return;
|
if(!dragging) return;
|
||||||
dragging = false;
|
dragging = false;
|
||||||
|
|
||||||
|
if($w){
|
||||||
|
$w.close();
|
||||||
|
$w = null;
|
||||||
|
}
|
||||||
if($dock_to){
|
if($dock_to){
|
||||||
|
//dock component to $dock_to
|
||||||
$dock_to.append($c);
|
$dock_to.append($c);
|
||||||
|
|
||||||
pos = Math.max(pos, 0);
|
pos = Math.max(pos, 0);
|
||||||
|
@ -99,7 +106,20 @@ function $Component(name, orientation, $el){
|
||||||
$c.css("position", "relative");
|
$c.css("position", "relative");
|
||||||
$c.css(pos_axis, pos);
|
$c.css(pos_axis, pos);
|
||||||
}else{
|
}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;
|
$ghost && $ghost.remove(), $ghost = null;
|
||||||
|
|
63
$Window.js
63
$Window.js
|
@ -1,23 +1,65 @@
|
||||||
|
|
||||||
function $Window(){
|
function $Window($component){
|
||||||
var $w = $(E("div")).addClass("jspaint-window").appendTo("body");
|
var $w = $(E("div")).addClass("jspaint-window").appendTo("body");
|
||||||
$w.$titlebar = $(E("div")).addClass("jspaint-window-titlebar").appendTo($w);
|
$w.$titlebar = $(E("div")).addClass("jspaint-window-titlebar").appendTo($w);
|
||||||
$w.$title = $(E("span")).addClass("jspaint-window-title").appendTo($w.$titlebar);
|
$w.$title = $(E("span")).addClass("jspaint-window-title").appendTo($w.$titlebar);
|
||||||
$w.$x = $(E("button")).addClass("jspaint-window-close-button").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);
|
$w.$content = $(E("div")).addClass("jspaint-window-content").appendTo($w);
|
||||||
|
|
||||||
|
if($component){
|
||||||
|
$w.addClass("jspaint-component-window");
|
||||||
|
}
|
||||||
|
|
||||||
$w.$x.on("click", function(){
|
$w.$x.on("click", function(){
|
||||||
$w.close();
|
$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.$Button = function(text, handler){
|
||||||
$w.$content.append(
|
$w.$content.append(
|
||||||
$(E("button"))
|
$(E("button"))
|
||||||
.text(text)
|
.text(text)
|
||||||
.on("click", function(){
|
.on("click", function(){
|
||||||
handler();
|
handler();
|
||||||
$w.close();
|
$w.close();
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
$w.title = function(title){
|
$w.title = function(title){
|
||||||
|
@ -29,14 +71,11 @@ function $Window(){
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
$w.close = function(){
|
$w.close = function(){
|
||||||
|
if($component){
|
||||||
|
$component.detach();
|
||||||
|
}
|
||||||
$w.remove();
|
$w.remove();
|
||||||
};
|
};
|
||||||
|
|
||||||
$w.css({
|
|
||||||
position: "absolute",
|
|
||||||
right: 50,
|
|
||||||
top: 50
|
|
||||||
});
|
|
||||||
|
|
||||||
return $w;
|
return $w;
|
||||||
}
|
}
|
||||||
|
|
3
TODO.md
3
TODO.md
|
@ -26,6 +26,7 @@
|
||||||
`var mouse_was_pressed = false;`
|
`var mouse_was_pressed = false;`
|
||||||
* BUG: status text gets cut off
|
* 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
|
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
|
* Handle some edge cases
|
||||||
* Undoing/redoing should stop brush drawing
|
* 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
|
### Components / Windows
|
||||||
* Drag components into a window
|
* 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.
|
* 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);
|
var url = URL.createObjectURL(blob);
|
||||||
$output.empty().append(
|
$output.empty().append(
|
||||||
$(E("a")).attr({href: url, target: "_blank"}).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){
|
).on("click", function(e){
|
||||||
$win.close();
|
$win.close();
|
||||||
if(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry){
|
if(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry){
|
||||||
|
|
|
@ -168,4 +168,4 @@ html, body, .jspaint {
|
||||||
|
|
||||||
::before, ::after {
|
::before, ::after {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue