@ -1,16 +1,12 @@
'use strict' ;
const React = require ( "react" ) ;
const createReactClass = require ( "create-react-class" ) ;
const throttleit = require ( "throttleit" ) ;
const euclideanDistance = require ( "euclidean-distance" ) ;
const classnames = require ( "classnames" ) ;
const defaultValue = require ( "default-value" ) ;
const Window = require ( "./window" ) ;
/* These can be stored outside a component as effective globals, because there can only be one mouse position anyway. */
let lastMouseX = 0 ;
let lastMouseY = 0 ;
const { useDraggable , mouseMove } = require ( "../hooks/draggable" ) ;
let windowRefs = new Map ( ) ;
@ -25,156 +21,214 @@ function trackRef(window_) {
} ;
}
module . exports = function WindowManager ( { store , children , windowMoveThreshold _ } ) {
let [ movingType , setMovingType ] = React . useState ( null ) ;
let [ movingWindow , setMovingWindow ] = React . useState ( null ) ;
let [ movingWindowBarX , setMovingWindowBarX ] = React . useState ( null ) ;
let [ movingWindowBarY , setMovingWindowBarY ] = React . useState ( null ) ;
let [ movingWindowOriginalWidth , setMovingWindowOriginalWidth ] = React . useState ( null ) ;
let [ movingWindowOriginalHeight , setMovingWindowOriginalHeight ] = React . useState ( null ) ;
let [ movingWindowOriginX , setMovingWindowOriginX ] = React . useState ( null ) ;
let [ movingWindowOriginY , setMovingWindowOriginY ] = React . useState ( null ) ;
let [ movingWindowThresholdMet , setMovingWindowThresholdMet ] = React . useState ( false ) ;
function SideBar ( { elementRef , side , onMouseOver , onMouseOut , highlight } ) {
function onMouseOverHandler ( event ) {
onMouseOver ( event , side ) ;
}
let [ processMouseMove , setProcessMouseMove ] = React . useState ( null ) ;
function onMouseOutHandler ( event ) {
onMouseOut ( event , side ) ;
}
let windowMoveThreshold = defaultValue ( windowMoveThreshold _ , 6 ) ;
return (
< div ref = { elementRef } className = { classnames ( "sidebar" , ` side- ${ side } ` , { highlight : highlight } ) } onMouseOver = { onMouseOverHandler } onMouseOut = { onMouseOutHandler } >
React . useEffect ( ( ) => {
processMouseMove = throttleit ( ( ) => {
/* Yes, the below check is there for a reason; just in case the `movingWindow` state changes between the call to the throttled wrapper and the wrapped function itself. */
if ( movingWindow != null ) {
let thresholdNewlyMet = false ;
if ( movingWindowThresholdMet === false ) {
let origin = [ movingWindowOriginX , movingWindowOriginY ] ;
let position = [ lastMouseX , lastMouseY ] ;
if ( euclideanDistance ( origin , position ) > windowMoveThreshold ) {
thresholdNewlyMet = true ;
setMovingWindowThresholdMet ( true ) ;
}
}
< / div >
) ;
}
function WindowSpace ( { children } ) {
return (
< div className = "windowSpace" >
{ children }
< / div >
) ;
}
function ContentSpace ( { children } ) {
return (
< div className = "contentSpace" >
{ children }
< / div >
) ;
}
if ( movingWindowThresholdMet || thresholdNewlyMet === true ) {
/* Note: we handle this out-of-band, to avoid going through React's rendering cycle for every move event. */
let element = windowRefs . get ( movingWindow ) ;
if ( movingType === "move" ) {
let { x , y } = getCurrentMoveValues ( ) ;
element . style . transform = ` translate( ${ x } px, ${ y } px) ` ;
} else if ( movingType === "resize" ) {
let { width , height } = getCurrentResizeValues ( ) ;
element . style . width = ` ${ width } px ` ;
element . style . height = ` ${ height } px ` ;
module . exports = function WindowManager ( { store , children , windowMoveThreshold } ) {
let [ isResizing , setIsResizing ] = React . useState ( false ) ;
let [ isMoving , setIsMoving ] = React . useState ( false ) ;
let [ lastDragType , setLastDragType ] = React . useState ( null ) ;
let [ dragOperationData , setDragOperationData ] = React . useState ( null ) ;
let [ draggedWindow , setDraggedWindow ] = React . useState ( null ) ;
let [ highlightBar , setHighlightBar ] = React . useState ( null ) ;
let [ leftBarRef , setLeftBarRef ] = React . useState ( null ) ;
let [ rightBarRef , setRightBarRef ] = React . useState ( null ) ;
let [ leftBarBounds , setLeftBarBounds ] = React . useState ( null ) ;
let [ rightBarBounds , setRightBarBounds ] = React . useState ( null ) ;
let [ newX , newY ] = useDraggable ( {
isDragging : isResizing || isMoving ,
operationData : dragOperationData ,
threshold : defaultValue ( windowMoveThreshold , 6 ) ,
onChange : ( xValue , yValue , mouseX , mouseY ) => {
/* NOTE: we handle this out-of-band, to avoid going through React's rendering cycle for every move event. */
let element = windowRefs . get ( draggedWindow ) ;
if ( isMoving ) {
/* NOTE: We *only* change the highlightBar state if necessary, because otherwise we would still go through a rendering cycle for every move event after all. */
if ( isInLeftBar ( mouseX , mouseY ) ) {
if ( highlightBar !== "left" ) {
setHighlightBar ( "left" ) ;
}
} else if ( isInRightBar ( mouseX , mouseY ) ) {
if ( highlightBar !== "right" ) {
setHighlightBar ( "right" ) ;
}
} else {
if ( highlightBar != null ) {
setHighlightBar ( null ) ;
}
}
element . style . transform = ` translate( ${ xValue } px, ${ yValue } px) ` ;
} else if ( isResizing ) {
element . style . width = ` ${ xValue } px ` ;
element . style . height = ` ${ yValue } px ` ;
}
}
} ) ;
React . useEffect ( ( ) => {
if ( leftBarRef != null ) {
setLeftBarBounds ( leftBarRef . getBoundingClientRect ( ) ) ;
} else {
setLeftBarBounds ( null ) ;
}
if ( rightBarRef != null ) {
setRightBarBounds ( rightBarRef . getBoundingClientRect ( ) ) ;
} else {
setRightBarBounds ( null ) ;
}
} , [ leftBarRef , rightBarRef ] ) ;
React . useEffect ( ( ) => {
if ( draggedWindow != null ) {
if ( lastDragType === "move" ) {
store . setPosition ( draggedWindow , newX , newY ) ;
} else if ( lastDragType === "resize" ) {
store . setDimensions ( draggedWindow , newX , newY ) ;
}
} , 10 ) ;
/* NOTE: We first manually set the processMouseMove above, to ensure that the new function instance is immediately available in the render code below. */
/* HACK: React interprets functions as lazy setters, therefore we return the wrapped processMouseMove function from an arrow function. */
setProcessMouseMove ( ( ) => processMouseMove ) ;
} , [ movingWindow ] ) ;
function getCurrentMoveValues ( ) {
return {
x : lastMouseX - movingWindowBarX ,
y : lastMouseY - movingWindowBarY
} ;
setDraggedWindow ( null ) ;
}
} , [ newX , newY ] ) ;
function isInArea ( x , y , bounds ) {
return ( x >= bounds . left && x < bounds . right && y >= bounds . top && y < bounds . bottom ) ;
}
function getCurrentResizeValues ( ) {
return {
width : movingWindowOriginalWidth + ( lastMouseX - movingWindowOriginX ) ,
height : movingWindowOriginalHeight + ( lastMouseY - movingWindowOriginY )
} ;
function isInLeftBar ( x , y ) {
return isInArea ( x , y , leftBarBounds ) ;
}
function isInRightBar ( x , y ) {
return isInArea ( x , y , rightBarBounds ) ;
}
/* NOTE: Due to how synthetic events work in React, we need to separate out the 'get coordinates from event' and 'do something with the coordinates' step; if we throttle the coordinate extraction logic, we'll run into problems when synthetic events have already been cleared for reuse by the time we try to obtain the coordinates. Therefore, `processMouseMove` contains all the throttled logic, whereas the coordinate extraction happens on *every* mousemove event. */
/* FIXME: Consider sidestepping React entirely for the mousemove event handling. How much do synthetic events slow things down? */
function handleMouseMove ( event ) {
if ( movingWindow != null ) {
lastMouseX = event . pageX ;
lastMouseY = event . pageY ;
processMouseMove ( ) ;
function handleDragStart ( type , window _ , event , currentX , currentY ) {
setDraggedWindow ( window _ . id ) ;
setDragOperationData ( {
initialMouseX : event . pageX ,
initialMouseY : event . pageY ,
initialValueX : currentX , / / w i d t h o r X p o s
initialValueY : currentY / / h e i g h t o r Y p o s
} ) ;
if ( type === "move" ) {
setIsMoving ( true ) ;
} else if ( type === "resize" ) {
setIsResizing ( true ) ;
}
}
function handleDragStart ( type , window _ , event , barX , barY ) {
setMovingType ( type ) ;
setMovingWindow ( window _ . id ) ;
setMovingWindowThresholdMet ( false ) ;
setMovingWindowBarX ( barX ) ;
setMovingWindowBarY ( barY ) ;
setMovingWindowOriginX ( event . pageX ) ;
setMovingWindowOriginY ( event . pageY ) ;
setLastDragType ( type ) ;
/* NOTE: The below is to ensure that the window doesn't jump, if the user clicks the titlebar but never moves the mouse. No mousemove event is fired in that scenario, so if we don't set the last-known coordinates here, the window would jump based on whatever coordinate the mouse was last at during the *previous* window drag operation. */
lastMouseX = event . pageX ;
lastMouseY = event . pageY ;
console . log ( "started drag of type" , type ) ;
mouseMove ( event . pageX , event . pageY ) ;
}
function handleTitleMouseDown ( window _ , event , barX , barY ) {
return handleDragStart ( "move" , window _ , event , barX, barY ) ;
function handleTitleMouseDown ( window _ , event ) {
return handleDragStart ( "move" , window _ , event , window _ . x , window _ . y ) ;
}
function handleResizerMouseDown ( window _ , event , barX , barY ) {
setMovingWindowOriginalWidth ( window _ . width ) ;
setMovingWindowOriginalHeight ( window _ . height ) ;
return handleDragStart ( "resize" , window _ , event , barX , barY ) ;
function handleResizerMouseDown ( window _ , event ) {
return handleDragStart ( "resize" , window _ , event , window _ . width , window _ . height ) ;
}
function handleMouseUp ( ) {
if ( movingWindow != null ) {
if ( movingType === "move" ) {
let { x , y } = getCurrentMoveValues ( ) ;
store . setPosition ( movingWindow , x , y ) ;
} else if ( movingType === "resize" ) {
let { width , height } = getCurrentResizeValues ( ) ;
store . setDimensions ( movingWindow , width , height ) ;
}
if ( draggedWindow != null ) {
setIsMoving ( false ) ;
setIsResizing ( false ) ;
}
}
setMovingWindow ( null ) ;
function handleMouseMove ( event ) {
mouseMove ( event . pageX , event . pageY ) ;
}
function onMouseOverBar ( _event , side ) {
if ( isMoving ) {
setHighlightBar ( side ) ;
}
}
function onMouseOutBar ( _event , _side ) {
setHighlightBar ( null ) ;
}
/* TODO: Tiled layout */
return (
< div className = "windowManager" onMouseMove = { handleMouseMove } onMouseUp = { handleMouseUp } >
{ children }
{ store . getAll ( ) . toArray ( ) . map ( ( window _ ) => {
let windowStyle = {
transform : ` translate( ${ window _ . x } px, ${ window _ . y } px) ` ,
width : window _ . width ,
height : window _ . height ,
zIndex : window _ . zIndex
} ;
let handlers = {
onTitleMouseDown : ( ... args ) => {
return handleTitleMouseDown ( window _ , ... args ) ;
} ,
onResizerMouseDown : ( ... args ) => {
return handleResizerMouseDown ( window _ , ... args ) ;
} ,
onMouseDown : ( ) => {
store . focus ( window _ . id ) ;
} ,
onClose : ( ) => {
store . close ( window _ . id ) ;
}
} ;
return (
< Window elementRef = { trackRef ( window _ . id ) } key = { window _ . id } style = { windowStyle } title = { window _ . title } isActive = { window _ . isActive } resizable = { window _ . resizable } { ...handlers } >
{ window _ . contents }
< / Window >
) ;
} ) }
< ContentSpace >
{ children }
< / ContentSpace >
< WindowSpace >
< SideBar elementRef = { setLeftBarRef } side = "left" highlight = { highlightBar === "left" } onMouseOver = { onMouseOverBar } onMouseOut = { onMouseOutBar } / >
{ store . getFloating ( ) . toArray ( ) . map ( ( window _ ) => {
let windowStyle = {
transform : ` translate( ${ window _ . x } px, ${ window _ . y } px) ` ,
width : window _ . width ,
height : window _ . height ,
zIndex : window _ . zIndex
} ;
let handlers = {
onTitleMouseDown : ( ... args ) => {
return handleTitleMouseDown ( window _ , ... args ) ;
} ,
onResizerMouseDown : ( ... args ) => {
return handleResizerMouseDown ( window _ , ... args ) ;
} ,
onMouseDown : ( ) => {
store . focus ( window _ . id ) ;
} ,
onClose : ( ) => {
store . close ( window _ . id ) ;
}
} ;
return (
< Window elementRef = { trackRef ( window _ . id ) } key = { window _ . id } style = { windowStyle } title = { window _ . title } isActive = { window _ . isActive } resizable = { window _ . resizable } { ...handlers } >
{ window _ . contents }
< / Window >
) ;
} ) }
< SideBar elementRef = { setRightBarRef } side = "right" highlight = { highlightBar === "right" } onMouseOver = { onMouseOverBar } onMouseOut = { onMouseOutBar } / >
< / WindowSpace >
< / div >
) ;
} ;
