add support for onDragStart and onDragEnd callbacks

change the useffect for drag start
johnwalley · Mar 14, 2023 · e72bc38 · e72bc38
1 parent dad515c
commit e72bc38
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -116,6 +116,14 @@ Direction to split. If true then the panes will be stacked vertically, otherwise
 
 Callback that is fired when the pane sizes change (usually on drag). Recommended to add a debounce function to rate limit the callback. Passed an array of numbers.
 
+### onDragStart
+
+Callback that is fired when the user clicks on the sash
+
+### onDragEnd
+
+Callback that is fired when the user stops clicking the sash
+
 ### onReset
 
 Callback that is fired whenever the user double clicks a sash.

diff --git a/src/allotment.tsx b/src/allotment.tsx
@@ -114,6 +114,10 @@ export type AllotmentProps = {
   onReset?: () => void;
   /** Callback on visibility change */
   onVisibleChange?: (index: number, visible: boolean) => void;
+  /** Callback on drag start */
+  onDragStart?: (sizes: number[]) => void;
+  /** Callback on drag end */
+  onDragEnd?: (sizes: number[]) => void;
 } & CommonProps;
 
 /**
@@ -135,6 +139,8 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       onChange,
       onReset,
       onVisibleChange,
+      onDragStart,
+      onDragEnd
     },
     ref
   ) => {
@@ -213,40 +219,43 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
         proportionalLayout,
         ...(initializeSizes &&
           defaultSizes && {
-            descriptor: {
-              size: defaultSizes.reduce((a, b) => a + b, 0),
-              views: defaultSizes.map((size, index) => {
-                const props = splitViewPropsRef.current.get(
-                  previousKeys.current[index]
-                );
+          descriptor: {
+            size: defaultSizes.reduce((a, b) => a + b, 0),
+            views: defaultSizes.map((size, index) => {
+              const props = splitViewPropsRef.current.get(
+                previousKeys.current[index]
+              );
+
+              const view = new PaneView(layoutService.current, {
+                element: document.createElement("div"),
+                minimumSize: props?.minSize ?? minSize,
+                maximumSize: props?.maxSize ?? maxSize,
+                priority: props?.priority ?? LayoutPriority.Normal,
+                ...(props?.preferredSize && {
+                  preferredSize: props?.preferredSize,
+                }),
+                snap: props?.snap ?? snap,
+              });
 
-                const view = new PaneView(layoutService.current, {
-                  element: document.createElement("div"),
-                  minimumSize: props?.minSize ?? minSize,
-                  maximumSize: props?.maxSize ?? maxSize,
-                  priority: props?.priority ?? LayoutPriority.Normal,
-                  ...(props?.preferredSize && {
-                    preferredSize: props?.preferredSize,
-                  }),
-                  snap: props?.snap ?? snap,
-                });
-
-                views.current.push(view);
-
-                return {
-                  container: [...splitViewViewRef.current.values()][index],
-                  size: size,
-                  view: view,
-                };
-              }),
-            },
-          }),
+              views.current.push(view);
+
+              return {
+                container: [...splitViewViewRef.current.values()][index],
+                size: size,
+                view: view,
+              };
+            }),
+          },
+        }),
       };
 
       splitViewRef.current = new SplitView(
         containerRef.current,
         options,
-        onChange
+        onChange,
+        onDragStart,
+        onDragEnd,
+
       );
 
       splitViewRef.current.on("sashDragStart", () => {
@@ -447,6 +456,18 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       }
     }, [onChange]);
 
+    useEffect(() => {
+      if (splitViewRef.current) {
+        splitViewRef.current.onDidDragStart = onDragStart;
+      }
+    }, [onDragStart]);
+
+    useEffect(() => {
+      if (splitViewRef.current) {
+        splitViewRef.current.onDidDragEnd = onDragEnd;
+      }
+    }, [onDragEnd]);
+
     useResizeObserver({
       ref: containerRef,
       onResize: ({ width, height }) => {

diff --git a/src/split-view/split-view.ts b/src/split-view/split-view.ts
@@ -310,6 +310,8 @@ interface SashDragState {
  */
 export class SplitView extends EventEmitter implements Disposable {
   public onDidChange: ((sizes: number[]) => void) | undefined;
+  public onDidDragStart: ((sizes: number[]) => void) | undefined;
+  public onDidDragEnd: ((sizes: number[]) => void) | undefined;
 
   /**  This {@link SplitView}'s orientation. */
   readonly orientation: Orientation;
@@ -362,7 +364,9 @@ export class SplitView extends EventEmitter implements Disposable {
   constructor(
     container: HTMLElement,
     options: SplitViewOptions = {},
-    onDidChange?: (sizes: number[]) => void
+    onDidChange?: (sizes: number[]) => void,
+    onDidDragStart?: (sizes: number[]) => void,
+    onDidDragEnd?: (sizes: number[]) => void
   ) {
     super();
 
@@ -374,6 +378,14 @@ export class SplitView extends EventEmitter implements Disposable {
       this.onDidChange = onDidChange;
     }
 
+    if(onDidDragStart){
+      this.onDidDragStart = onDidDragStart;
+    }
+
+    if(onDidDragEnd){
+      this.onDidDragEnd = onDidDragEnd;
+    }
+
     this.sashContainer = document.createElement("div");
 
     this.sashContainer.classList.add("sash-container", styles.sashContainer);
@@ -472,6 +484,8 @@ export class SplitView extends EventEmitter implements Disposable {
       sash.on("start", (event: BaseSashEvent) => {
         this.emit("sashDragStart");
         this.onSashStart(sashEventMapper(event));
+        const sizes = this.viewItems.map((i) => i.size);
+        this.onDidDragStart?.(sizes)
       });
 
       sash.on("change", (event: BaseSashEvent) =>
@@ -481,6 +495,9 @@ export class SplitView extends EventEmitter implements Disposable {
       sash.on("end", () => {
         this.emit("sashDragEnd");
         this.onSashEnd(this.sashItems.findIndex((item) => item.sash === sash));
+        const sizes = this.viewItems.map((i) => i.size);
+        this.onDidDragEnd?.(sizes)
+
       });
 
       sash.on("reset", () => {
@@ -1089,6 +1106,7 @@ export class SplitView extends EventEmitter implements Disposable {
 
     this.onDidChange?.(this.viewItems.map((viewItem) => viewItem.size));
 
+
     // Layout sashes
     this.sashItems.forEach((item) => item.sash.layout());
     this.updateSashEnablement();