11import * as React from "react" ;
2- import { AllProps , IState , AnchorType , ISize , SizeUnit } from "src/Globals/Types " ;
3- import { initialState , isHorizontalSpace , isVerticalSpace , coalesce } from "src/Globals/Utils " ;
4- import { ISpaceContext , updateSpace , removeSpace , registerSpace , createSpaceContext } from "src/Globals/ ISpaceContext" ;
5- import { SpaceLayerContext , SpaceContext } from "src/Contexts" ;
2+ import { AllProps , IState , AnchorType , ISize , SizeUnit } from "src/types " ;
3+ import { initialState , isHorizontalSpace , isVerticalSpace , coalesce } from "src/utils " ;
4+ import { ISpaceContext , updateSpace , removeSpace , registerSpace , createSpaceContext } from "src/ISpaceContext" ;
5+ import { SpaceLayerContext , SpaceContext } from "src/components/ Contexts" ;
66import { ResizeSensor } from "css-element-queries" ;
7- import { startMouseDrag } from "src/Globals/Dragging" ;
7+ import { startMouseDrag } from "src/dragging" ;
8+ import { startMouseResize } from "src/resizing" ;
89
910const calcProp = ( props : AllProps , positionedFn : ( p : AllProps ) => SizeUnit , elseFn : ( p : AllProps ) => SizeUnit ) =>
1011 props . isPositioned ? positionedFn ( props ) : elseFn ( props ) ;
12+
1113const initialLeft = ( props : AllProps ) =>
1214 calcProp (
1315 props ,
1416 ( p ) => p . left ,
1517 ( p ) => ( p . anchor !== AnchorType . Right ? p . left || 0 : undefined ) ,
1618 ) ;
19+
1720const initialTop = ( props : AllProps ) =>
1821 calcProp (
1922 props ,
2023 ( p ) => p . top ,
2124 ( p ) => ( p . anchor !== AnchorType . Bottom ? p . top || 0 : undefined ) ,
2225 ) ;
26+
2327const initialRight = ( props : AllProps ) =>
2428 calcProp (
2529 props ,
2630 ( p ) => p . right ,
2731 ( p ) => ( p . anchor !== AnchorType . Left ? p . right || 0 : undefined ) ,
2832 ) ;
33+
2934const initialBottom = ( props : AllProps ) =>
3035 calcProp (
3136 props ,
3237 ( p ) => p . bottom ,
3338 ( p ) => ( p . anchor !== AnchorType . Top ? p . bottom || 0 : undefined ) ,
3439 ) ;
40+
3541const initialWidth = ( props : AllProps ) =>
3642 calcProp (
3743 props ,
3844 ( p ) => p . width ,
3945 ( p ) => ( isHorizontalSpace ( p . anchor ) ? p . anchorSize || 0 : p . width ) ,
4046 ) ;
47+
4148const initialHeight = ( props : AllProps ) =>
4249 calcProp (
4350 props ,
4451 ( p ) => p . height ,
4552 ( p ) => ( isVerticalSpace ( p . anchor ) ? p . anchorSize || 0 : p . height ) ,
4653 ) ;
4754
48- export const useSpace = ( props : AllProps , divElementRef : React . MutableRefObject < HTMLElement | undefined > ) => {
55+ export const useSpace = ( props : AllProps , spaceElement : React . MutableRefObject < HTMLElement | undefined > ) => {
4956 const parentContext = React . useContext ( SpaceContext ) as ISpaceContext ;
5057
5158 if ( ! parentContext ) {
@@ -61,8 +68,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
6168 const currentZIndex = props . zIndex || layerContext || 0 ;
6269
6370 const updateCurrentSize = React . useCallback ( ( ) => {
64- if ( divElementRef . current ) {
65- const rect = divElementRef . current . getBoundingClientRect ( ) ;
71+ if ( spaceElement . current ) {
72+ const rect = spaceElement . current . getBoundingClientRect ( ) ;
6673 setCurrentSize ( {
6774 width : rect . width ,
6875 height : rect . height ,
@@ -109,6 +116,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
109116 bottom : initialBottom ( props ) ,
110117 width : initialWidth ( props ) ,
111118 height : initialHeight ( props ) ,
119+ adjustedLeft : 0 ,
120+ adjustedTop : 0 ,
112121 } ) ;
113122 } , [ props . left , props . top , props . bottom , props . right , props . width , props . height , props . anchor ] ) ;
114123
@@ -121,9 +130,9 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
121130 // Setup / cleanup
122131
123132 React . useEffect ( ( ) => {
124- if ( divElementRef . current ) {
133+ if ( spaceElement . current ) {
125134 if ( props . trackSize ) {
126- resizeSensor . current = new ResizeSensor ( divElementRef . current , ( size ) =>
135+ resizeSensor . current = new ResizeSensor ( spaceElement . current , ( size ) =>
127136 setCurrentSize ( {
128137 width : size . width ,
129138 height : size . height ,
@@ -156,7 +165,11 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
156165 state . children ,
157166 ( children ) => setState ( { children : children } ) ,
158167 ( resizing ) => setState ( { resizing : resizing } ) ,
159- ( e ) => startMouseDrag ( e , parentContext , space , divElementRef . current ) ,
168+ ( event , onDragEnd ) => startMouseDrag ( event , parentContext , space , spaceElement . current , onDragEnd ) ,
169+ ( event , resizeType ) =>
170+ startMouseResize ( event , parentContext , space , props , spaceElement . current , ( r ) => {
171+ updateSpace ( parentContext , space . id , { adjustedLeft : r . x } ) ;
172+ } ) ,
160173 parentContext ,
161174 ) ;
162175
0 commit comments