@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/useWorkbenchSidebarActionBarDnd.ts

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { DragEvent } from 'react';
+
+import {
+  getActivityBarDropPosition,
+  reorderActivityBarItems,
+  type ActivityBarDropPosition,
+  type ActivityBarOrientation,
+} from './activityBarOrder';
+import {
+  hasWorkbenchSidebarViewPlacementDrag,
+  readWorkbenchSidebarViewPlacementDrag,
+  resetWorkbenchSidebarViewPlacementDragSession,
+  subscribeWorkbenchSidebarViewPlacementDragSessionEnd,
+  writeWorkbenchSidebarViewPlacementDrag,
+} from './sidebarViewPlacementDnd';
+
+export interface WorkbenchSidebarActionBarDropTarget {
+  readonly itemId: string;
+  readonly position: ActivityBarDropPosition;
+}
+
+export interface UseWorkbenchSidebarActionBarDndOptions {
+  readonly itemIds: readonly string[];
+  readonly onReorder?: ((itemIds: string[]) => void) | undefined;
+  readonly orientation?: ActivityBarOrientation;
+  readonly placementDraggable?: boolean;
+  readonly reorderable?: boolean;
+  /** Prevents nested placement drop zones from handling reorder drag events. Default: true */
+  readonly stopPropagationOnReorder?: boolean;
+}
+
+export interface WorkbenchSidebarActionBarItemDragHandlers {
+  readonly draggable: true;
+  readonly onDragEnd: () => void;
+  readonly onDragLeave: () => void;
+  readonly onDragOver: (event: DragEvent<HTMLElement>) => void;
+  readonly onDragStart: (event: DragEvent<HTMLElement>) => void;
+  readonly onDrop: (event: DragEvent<HTMLElement>) => void;
+}
+
+export interface UseWorkbenchSidebarActionBarDndResult {
+  readonly clearDragState: () => void;
+  readonly draggingItemId: string | null;
+  readonly dropTarget: WorkbenchSidebarActionBarDropTarget | null;
+  readonly getDropPosition: (itemId: string) => ActivityBarDropPosition | undefined;
+  readonly getItemDragHandlers: (
+    itemId: string,
+    options?: { readonly disabled?: boolean | undefined },
+  ) => WorkbenchSidebarActionBarItemDragHandlers | null;
+}
+
+export function useWorkbenchSidebarActionBarDnd({
+  itemIds,
+  onReorder,
+  orientation = 'vertical',
+  placementDraggable = false,
+  reorderable = false,
+  stopPropagationOnReorder = true,
+}: UseWorkbenchSidebarActionBarDndOptions): UseWorkbenchSidebarActionBarDndResult {
+  const draggingItemIdRef = useRef<string | null>(null);
+  const [draggingItemId, setDraggingItemId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<WorkbenchSidebarActionBarDropTarget | null>(null);
+
+  const clearDragState = useCallback((): void => {
+    draggingItemIdRef.current = null;
+    setDraggingItemId(null);
+    setDropTarget(null);
+    resetWorkbenchSidebarViewPlacementDragSession();
+  }, []);
+
+  useEffect(() => {
+    const clearLocalDragVisualState = (): void => {
+      draggingItemIdRef.current = null;
+      setDraggingItemId(null);
+      setDropTarget(null);
+    };
+
+    document.addEventListener('drop', clearLocalDragVisualState, true);
+    const unsubscribe =
+      subscribeWorkbenchSidebarViewPlacementDragSessionEnd(clearLocalDragVisualState);
+
+    return () => {
+      document.removeEventListener('drop', clearLocalDragVisualState, true);
+      unsubscribe();
+    };
+  }, []);
+
+  const isLocalReorderSource = useCallback(
+    (sourceId: string): boolean => itemIds.includes(sourceId),
+    [itemIds],
+  );
+
+  const resolveDragSourceId = useCallback(
+    (dataTransfer: DataTransfer): string =>
+      draggingItemIdRef.current ?? readWorkbenchSidebarViewPlacementDrag(dataTransfer),
+    [],
+  );
+
+  const reorderItems = useCallback(
+    (sourceId: string, targetId: string, position: ActivityBarDropPosition): void => {
+      if (onReorder === undefined) {
+        return;
+      }
+
+      const nextItemIds = reorderActivityBarItems([...itemIds], sourceId, targetId, position);
+      if (nextItemIds !== undefined) {
+        onReorder([...nextItemIds]);
+      }
+    },
+    [itemIds, onReorder],
+  );
+
+  const getDropPosition = useCallback(
+    (itemId: string): ActivityBarDropPosition | undefined =>
+      dropTarget?.itemId === itemId ? dropTarget.position : undefined,
+    [dropTarget],
+  );
+
+  const getItemDragHandlers = useCallback(
+    (
+      itemId: string,
+      options?: { readonly disabled?: boolean | undefined },
+    ): WorkbenchSidebarActionBarItemDragHandlers | null => {
+      const disabled = options?.disabled ?? false;
+      const isItemReorderable = reorderable && !disabled;
+      const isItemPlacementDraggable = placementDraggable && !disabled;
+
+      if (!isItemReorderable && !isItemPlacementDraggable) {
+        return null;
+      }
+
+      return {
+        draggable: true,
+        onDragEnd: clearDragState,
+        onDragLeave: () => {
+          if (dropTarget?.itemId === itemId) {
+            setDropTarget(null);
+          }
+        },
+        onDragOver: (event: DragEvent<HTMLElement>) => {
+          if (!reorderable || !hasWorkbenchSidebarViewPlacementDrag(event.dataTransfer)) {
+            return;
+          }
+
+          const sourceId = resolveDragSourceId(event.dataTransfer);
+          if (sourceId.length === 0 || !isLocalReorderSource(sourceId) || sourceId === itemId) {
+            return;
+          }
+
+          event.preventDefault();
+          if (stopPropagationOnReorder) {
+            event.stopPropagation();
+          }
+          event.dataTransfer.dropEffect = 'move';
+
+          const position = getActivityBarDropPosition(
+            event.currentTarget,
+            orientation === 'horizontal' ? event.clientX : event.clientY,
+            orientation,
+          );
+
+          setDropTarget((current) =>
+            current?.itemId === itemId && current.position === position
+              ? current
+              : { itemId, position },
+          );
+        },
+        onDragStart: (event: DragEvent<HTMLElement>) => {
+          if ((!placementDraggable && !reorderable) || disabled) {
+            event.preventDefault();
+            return;
+          }
+
+          writeWorkbenchSidebarViewPlacementDrag(event.dataTransfer, itemId);
+          draggingItemIdRef.current = itemId;
+          setDraggingItemId(itemId);
+        },
+        onDrop: (event: DragEvent<HTMLElement>) => {
+          if (!reorderable || !hasWorkbenchSidebarViewPlacementDrag(event.dataTransfer)) {
+            return;
+          }
+
+          const sourceId = resolveDragSourceId(event.dataTransfer);
+          if (sourceId.length === 0 || !isLocalReorderSource(sourceId)) {
+            return;
+          }
+
+          event.preventDefault();
+          if (stopPropagationOnReorder) {
+            event.stopPropagation();
+          }
+
+          reorderItems(
+            sourceId,
+            itemId,
+            getActivityBarDropPosition(
+              event.currentTarget,
+              orientation === 'horizontal' ? event.clientX : event.clientY,
+              orientation,
+            ),
+          );
+          clearDragState();
+        },
+      };
+    },
+    [
+      clearDragState,
+      dropTarget?.itemId,
+      isLocalReorderSource,
+      orientation,
+      placementDraggable,
+      reorderItems,
+      reorderable,
+      resolveDragSourceId,
+      stopPropagationOnReorder,
+    ],
+  );
+
+  return {
+    clearDragState,
+    draggingItemId,
+    dropTarget,
+    getDropPosition,
+    getItemDragHandlers,
+  };
+}

package/src/workbench/useWorkbenchSidebarLayout.tsx

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useMemo, useState, type JSX, type ReactNode } from 'react';
+
+import {
+  coerceWorkbenchSidebarSlotViewId,
+  listWorkbenchSidebarSlotViewIds,
+  moveWorkbenchSidebarSlotViewOrder,
+  normalizeWorkbenchSidebarSlotViewOrder,
+  resolveWorkbenchSidebarSlotViewIdAfterMove,
+  sortWorkbenchSidebarSlotViewIds,
+  type WorkbenchSidebarSlotId,
+  type WorkbenchSidebarSlotViewOrders,
+} from '@workbench-kit/platform';
+
+import {
+  WorkbenchSidebarLayoutContext,
+  type WorkbenchSidebarLayoutContextValue,
+  toWorkbenchSidebarLayoutContextValue,
+  useWorkbenchSidebarLayoutContextValue,
+} from './workbenchSidebarLayoutContext.js';
+
+export interface WorkbenchSidebarLayoutProviderProps<
+  TViewId extends string,
+  TActivityViewId extends TViewId,
+> {
+  readonly activityViewId: TActivityViewId | string;
+  readonly children: ReactNode;
+  readonly defaultPrimaryViewId: TViewId;
+  readonly defaultSecondaryViewId: TViewId;
+  readonly isActivityViewId: (viewId: string) => viewId is TActivityViewId;
+  readonly listSlotViewIds?: (
+    slot: WorkbenchSidebarSlotId,
+    placements: Readonly<Record<TViewId, WorkbenchSidebarSlotId>>,
+  ) => readonly TViewId[];
+  readonly normalizePlacements: (
+    input: Partial<Record<TViewId, WorkbenchSidebarSlotId>>,
+  ) => Record<TViewId, WorkbenchSidebarSlotId>;
+  readonly onActivityViewChange: (viewId: TActivityViewId) => void;
+  readonly onPlacementsChange: (placements: Record<TViewId, WorkbenchSidebarSlotId>) => void;
+  readonly placements: Readonly<Record<TViewId, WorkbenchSidebarSlotId>>;
+  readonly registeredViewIds: readonly TViewId[];
+}
+
+export function WorkbenchSidebarLayoutProvider<
+  TViewId extends string,
+  TActivityViewId extends TViewId,
+>({
+  activityViewId,
+  children,
+  defaultPrimaryViewId,
+  defaultSecondaryViewId,
+  isActivityViewId,
+  listSlotViewIds,
+  normalizePlacements,
+  onActivityViewChange,
+  onPlacementsChange,
+  placements,
+  registeredViewIds,
+}: WorkbenchSidebarLayoutProviderProps<TViewId, TActivityViewId>): JSX.Element {
+  const [primarySlotViewId, setPrimarySlotViewId] = useState<TViewId>(defaultPrimaryViewId);
+  const [secondarySlotViewId, setSecondarySlotViewId] = useState<TViewId>(defaultSecondaryViewId);
+  const [orders, setOrders] = useState<WorkbenchSidebarSlotViewOrders<TViewId>>({});
+
+  const listViewsForSlot = useCallback(
+    (slot: WorkbenchSidebarSlotId): readonly TViewId[] =>
+      listSlotViewIds?.(slot, placements) ??
+      listWorkbenchSidebarSlotViewIds(slot, placements, registeredViewIds),
+    [listSlotViewIds, placements, registeredViewIds],
+  );
+
+  const primaryViewId = useMemo(
+    () =>
+      coerceWorkbenchSidebarSlotViewId(
+        'primary',
+        primarySlotViewId,
+        placements,
+        registeredViewIds,
+        defaultPrimaryViewId,
+      ),
+    [defaultPrimaryViewId, placements, primarySlotViewId, registeredViewIds],
+  );
+
+  const secondaryViewId = useMemo(
+    () =>
+      coerceWorkbenchSidebarSlotViewId(
+        'secondary',
+        secondarySlotViewId,
+        placements,
+        registeredViewIds,
+        defaultSecondaryViewId,
+      ),
+    [defaultSecondaryViewId, placements, registeredViewIds, secondarySlotViewId],
+  );
+
+  useEffect(() => {
+    setPrimarySlotViewId((current) =>
+      coerceWorkbenchSidebarSlotViewId(
+        'primary',
+        current,
+        placements,
+        registeredViewIds,
+        defaultPrimaryViewId,
+      ),
+    );
+    setSecondarySlotViewId((current) =>
+      coerceWorkbenchSidebarSlotViewId(
+        'secondary',
+        current,
+        placements,
+        registeredViewIds,
+        defaultSecondaryViewId,
+      ),
+    );
+  }, [defaultPrimaryViewId, defaultSecondaryViewId, placements, registeredViewIds]);
+
+  const resolveSlotViewIds = useCallback(
+    (slot: WorkbenchSidebarSlotId, baseViewIds: readonly TViewId[]): readonly TViewId[] =>
+      sortWorkbenchSidebarSlotViewIds(baseViewIds, orders[slot]),
+    [orders],
+  );
+
+  const setSlotViewOrder = useCallback(
+    (
+      slot: WorkbenchSidebarSlotId,
+      orderedViewIds: readonly TViewId[],
+      availableViewIds: readonly TViewId[],
+    ): void => {
+      setOrders((current) => ({
+        ...current,
+        [slot]: normalizeWorkbenchSidebarSlotViewOrder(orderedViewIds, availableViewIds),
+      }));
+    },
+    [],
+  );
+
+  const dropViewOnSlot = useCallback(
+    (viewId: TViewId, targetSlot: WorkbenchSidebarSlotId): void => {
+      const sourceSlot = placements[viewId];
+      if (sourceSlot === undefined || sourceSlot === targetSlot) {
+        return;
+      }
+
+      const nextPlacements = normalizePlacements({
+        ...placements,
+        [viewId]: targetSlot,
+      });
+
+      onPlacementsChange(nextPlacements);
+
+      setOrders((current) =>
+        moveWorkbenchSidebarSlotViewOrder(current, {
+          sourceSlot,
+          sourceViewIds: listViewsForSlot(sourceSlot),
+          targetSlot,
+          targetViewIds: listViewsForSlot(targetSlot),
+          viewId,
+        }),
+      );
+
+      const { nextActivityViewId, nextPrimarySlotFocusedViewId, nextSecondarySlotFocusedViewId } =
+        resolveWorkbenchSidebarSlotViewIdAfterMove<TViewId, TActivityViewId>({
+          activityViewId: activityViewId as TActivityViewId,
+          isActivityViewId,
+          movedViewId: viewId,
+          nextPlacements,
+          registeredViewIds,
+          sourceSlot,
+          targetSlot,
+        });
+
+      if (nextPrimarySlotFocusedViewId !== null) {
+        setPrimarySlotViewId(nextPrimarySlotFocusedViewId);
+      }
+
+      if (nextSecondarySlotFocusedViewId !== null) {
+        setSecondarySlotViewId(nextSecondarySlotFocusedViewId);
+      }
+
+      if (nextActivityViewId !== null) {
+        onActivityViewChange(nextActivityViewId);
+      }
+    },
+    [
+      activityViewId,
+      isActivityViewId,
+      listViewsForSlot,
+      normalizePlacements,
+      onActivityViewChange,
+      onPlacementsChange,
+      placements,
+      registeredViewIds,
+    ],
+  );
+
+  const value = useMemo(
+    (): WorkbenchSidebarLayoutContextValue<TViewId> => ({
+      dropViewOnSlot,
+      placements,
+      primaryViewId,
+      resolveSlotViewIds,
+      secondaryViewId,
+      selectPrimaryView: setPrimarySlotViewId,
+      selectSecondaryView: setSecondarySlotViewId,
+      setSlotViewOrder,
+    }),
+    [
+      dropViewOnSlot,
+      placements,
+      primaryViewId,
+      resolveSlotViewIds,
+      secondaryViewId,
+      setSlotViewOrder,
+    ],
+  );
+
+  return (
+    <WorkbenchSidebarLayoutContext.Provider value={toWorkbenchSidebarLayoutContextValue(value)}>
+      {children}
+    </WorkbenchSidebarLayoutContext.Provider>
+  );
+}
+
+export function useWorkbenchSidebarLayout<
+  TViewId extends string,
+>(): WorkbenchSidebarLayoutContextValue<TViewId> {
+  const context = useWorkbenchSidebarLayoutContextValue<TViewId>();
+
+  if (context === null) {
+    throw new Error('useWorkbenchSidebarLayout must be used within WorkbenchSidebarLayoutProvider');
+  }
+
+  return context;
+}

package/src/workbench/useWorkbenchSidebarViewPlacementDropZone.ts

@@ -0,0 +1,194 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type DragEvent,
+  type HTMLAttributes,
+} from 'react';
+
+import {
+  hasWorkbenchSidebarViewPlacementDrag,
+  readWorkbenchSidebarViewPlacementDrag,
+  resetWorkbenchSidebarViewPlacementDragSession,
+  subscribeWorkbenchSidebarViewPlacementDragSessionEnd,
+} from './sidebarViewPlacementDnd';
+
+export type WorkbenchSidebarViewPlacementDropZoneProps = HTMLAttributes<HTMLElement> & {
+  readonly 'data-wb-sidebar-placement-drop-zone'?: string | undefined;
+  readonly 'data-wb-sidebar-placement-drop-zone-active'?: 'true' | undefined;
+};
+
+export interface UseWorkbenchSidebarViewPlacementDropZoneOptions {
+  readonly acceptViewForDrop?: ((viewId: string) => boolean) | undefined;
+  readonly onDropView: (viewId: string) => void;
+  readonly zoneId?: string | undefined;
+}
+
+function chainDragHandler<E extends DragEvent<HTMLElement>>(
+  primary: ((event: E) => void) | undefined,
+  secondary: ((event: E) => void) | undefined,
+): ((event: E) => void) | undefined {
+  if (primary === undefined) {
+    return secondary;
+  }
+
+  if (secondary === undefined) {
+    return primary;
+  }
+
+  return (event: E): void => {
+    secondary(event);
+    if (!event.defaultPrevented) {
+      primary(event);
+    }
+  };
+}
+
+export function mergeWorkbenchSidebarViewPlacementDropZoneProps(
+  dropZoneProps: WorkbenchSidebarViewPlacementDropZoneProps,
+  hostProps: HTMLAttributes<HTMLElement>,
+): HTMLAttributes<HTMLElement> {
+  return {
+    ...hostProps,
+    ...dropZoneProps,
+    onDragEnter: chainDragHandler(hostProps.onDragEnter, dropZoneProps.onDragEnter),
+    onDragEnterCapture: chainDragHandler(
+      hostProps.onDragEnterCapture,
+      dropZoneProps.onDragEnterCapture,
+    ),
+    onDragLeave: chainDragHandler(hostProps.onDragLeave, dropZoneProps.onDragLeave),
+    onDragOver: chainDragHandler(hostProps.onDragOver, dropZoneProps.onDragOver),
+    onDragOverCapture: chainDragHandler(
+      hostProps.onDragOverCapture,
+      dropZoneProps.onDragOverCapture,
+    ),
+    onDrop: chainDragHandler(hostProps.onDrop, dropZoneProps.onDrop),
+    onDropCapture: chainDragHandler(hostProps.onDropCapture, dropZoneProps.onDropCapture),
+  };
+}
+
+export function useWorkbenchSidebarViewPlacementDropZone({
+  acceptViewForDrop,
+  onDropView,
+  zoneId,
+}: UseWorkbenchSidebarViewPlacementDropZoneOptions): WorkbenchSidebarViewPlacementDropZoneProps {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const dragDepthRef = useRef(0);
+
+  const resetDragOver = useCallback((): void => {
+    dragDepthRef.current = 0;
+    setIsDragOver(false);
+  }, []);
+
+  useEffect(() => {
+    const handleDragEnd = (): void => {
+      resetDragOver();
+      resetWorkbenchSidebarViewPlacementDragSession();
+    };
+
+    const handleDocumentDrop = (): void => {
+      resetDragOver();
+    };
+
+    document.addEventListener('dragend', handleDragEnd);
+    document.addEventListener('drop', handleDocumentDrop, true);
+    const unsubscribe = subscribeWorkbenchSidebarViewPlacementDragSessionEnd(resetDragOver);
+
+    return () => {
+      document.removeEventListener('dragend', handleDragEnd);
+      document.removeEventListener('drop', handleDocumentDrop, true);
+      unsubscribe();
+    };
+  }, [resetDragOver]);
+
+  const shouldAcceptDrag = useCallback(
+    (dataTransfer: DataTransfer): boolean => {
+      if (!hasWorkbenchSidebarViewPlacementDrag(dataTransfer)) {
+        return false;
+      }
+
+      const viewId = readWorkbenchSidebarViewPlacementDrag(dataTransfer);
+      if (viewId.length === 0) {
+        return false;
+      }
+
+      return acceptViewForDrop?.(viewId) ?? true;
+    },
+    [acceptViewForDrop],
+  );
+
+  const handleDragEnter = useCallback(
+    (event: DragEvent<HTMLElement>): void => {
+      if (!shouldAcceptDrag(event.dataTransfer)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      dragDepthRef.current += 1;
+      setIsDragOver(true);
+    },
+    [shouldAcceptDrag],
+  );
+
+  const handleDragOver = useCallback(
+    (event: DragEvent<HTMLElement>): void => {
+      if (!shouldAcceptDrag(event.dataTransfer)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.dropEffect = 'move';
+      setIsDragOver(true);
+    },
+    [shouldAcceptDrag],
+  );
+
+  const handleDragLeave = useCallback((event: DragEvent<HTMLElement>): void => {
+    const nextTarget = event.relatedTarget;
+    if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+      return;
+    }
+
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) {
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (event: DragEvent<HTMLElement>): void => {
+      resetDragOver();
+
+      const viewId = readWorkbenchSidebarViewPlacementDrag(event.dataTransfer);
+      if (viewId.length === 0) {
+        resetWorkbenchSidebarViewPlacementDragSession();
+        return;
+      }
+
+      if (acceptViewForDrop !== undefined && !acceptViewForDrop(viewId)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      onDropView(viewId);
+      resetWorkbenchSidebarViewPlacementDragSession();
+    },
+    [acceptViewForDrop, onDropView, resetDragOver],
+  );
+
+  return {
+    ...(zoneId !== undefined ? { 'data-wb-sidebar-placement-drop-zone': zoneId } : {}),
+    ...(isDragOver ? { 'data-wb-sidebar-placement-drop-zone-active': 'true' } : {}),
+    onDragEnter: handleDragEnter,
+    onDragEnterCapture: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDragOverCapture: handleDragOver,
+    onDrop: handleDrop,
+    onDropCapture: handleDrop,
+  };
+}