Implement sidebar docking
parent
4efe0c0ad0
commit
79fc14a78e
@ -0,0 +1,37 @@
|
||||
"use strict";
|
||||
|
||||
const React = require("react");
|
||||
|
||||
const Window = require("../window");
|
||||
|
||||
module.exports = function FloatingWindowArea({windows, onStartMove, onStartCornerResize, onClose, onFocus, onWindowRef}) {
|
||||
return (
|
||||
windows.map((window_) => {
|
||||
let windowStyle = {
|
||||
transform: `translate(${window_.x}px, ${window_.y}px)`,
|
||||
width: window_.width,
|
||||
height: window_.height,
|
||||
zIndex: window_.zIndex
|
||||
};
|
||||
|
||||
let handlers = {
|
||||
onTitleMouseDown: (event) => {
|
||||
onStartMove(window_, event);
|
||||
},
|
||||
onResizerMouseDown: (event) => {
|
||||
onStartCornerResize(window_, event);
|
||||
},
|
||||
onMouseDown: () => {
|
||||
onFocus(window_);
|
||||
},
|
||||
onClose: () => {
|
||||
onClose(window_);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Window elementRef={onWindowRef.bind(null, window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="both" {...handlers} />
|
||||
);
|
||||
})
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,74 @@
|
||||
"use strict";
|
||||
|
||||
const React = require("react");
|
||||
const throttleit = require("throttleit");
|
||||
const classnames = require("classnames");
|
||||
|
||||
const Window = require("../window");
|
||||
|
||||
module.exports = function Sidebar({elementRef, side, windows, onMouseOver, onMouseOut, highlight, onStartMove, onStartBottomResize, onClose, onFocus, onRecalculateWindowPosition, onWindowRef}) {
|
||||
let [onScroll, setOnScroll] = React.useState(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
onScroll = throttleit(() => {
|
||||
windows.forEach((window_) => {
|
||||
onRecalculateWindowPosition(window_.id);
|
||||
});
|
||||
}, 100);
|
||||
|
||||
/* NOTE: Lazy initializer */
|
||||
setOnScroll(() => {
|
||||
return onScroll;
|
||||
});
|
||||
}, [windows]);
|
||||
|
||||
function onMouseOverHandler(event) {
|
||||
onMouseOver(event, side);
|
||||
}
|
||||
|
||||
function onMouseOutHandler(event) {
|
||||
onMouseOut(event, side);
|
||||
}
|
||||
|
||||
function trackRef(windowId) {
|
||||
return function (ref) {
|
||||
onWindowRef(windowId, ref);
|
||||
|
||||
if (ref != null) {
|
||||
onRecalculateWindowPosition(windowId);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={elementRef} className={classnames("sidebar", `side-${side}`, {highlight: highlight})} onMouseOver={onMouseOverHandler} onMouseOut={onMouseOutHandler} onScroll={onScroll}>
|
||||
{windows.map((window_) => {
|
||||
let windowStyle = {
|
||||
width: window_.width,
|
||||
height: window_.height,
|
||||
/* The below is a bit of a hack to ensure that a being-dragged window always displays with coordinates absolute to the page, not relative to the sidebar. */
|
||||
position: (window_.isMoving) ? "fixed" : "static"
|
||||
};
|
||||
|
||||
let handlers = {
|
||||
onTitleMouseDown: (event) => {
|
||||
onStartMove(window_, event);
|
||||
},
|
||||
onResizerMouseDown: (event) => {
|
||||
onStartBottomResize(window_, event);
|
||||
},
|
||||
onMouseDown: () => {
|
||||
onFocus(window_);
|
||||
},
|
||||
onClose: () => {
|
||||
onClose(window_);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Window elementRef={trackRef(window_.id)} key={window_.id} style={windowStyle} window={window_} resizeDirection="vertical" {...handlers} />
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue