@hina-ui/vue 1.7.6 → 1.7.8

package/dist/shared/primitives/splitter/calculate.ts

@@ -0,0 +1,139 @@
+import { assert } from './assert'
+import { getPanelGroupElement, getResizeHandleElement } from './dom'
+import { getResizeEventCursorPosition, isKeyDown } from './events'
+import type { Direction, DragState, PanelData, ResizeEvent } from './types'
+
+function calculateDragOffsetPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  direction: Direction,
+  initialDragState: DragState,
+  panelGroupElement: ParentNode,
+): number {
+  const isHorizontal = direction === 'horizontal'
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement)
+  assert(handleElement)
+  const groupId = handleElement.getAttribute('data-panel-group-id')
+  assert(groupId)
+  const { initialCursorPosition } = initialDragState
+  const cursorPosition = getResizeEventCursorPosition(direction, event)
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement)
+  assert(groupElement)
+  const groupRect = groupElement.getBoundingClientRect()
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height
+  const offsetPixels = cursorPosition - initialCursorPosition
+  const offsetPercentage = (offsetPixels / groupSizeInPixels) * 100
+  return offsetPercentage
+}
+
+export function calculateDeltaPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  direction: Direction,
+  initialDragState: DragState | null,
+  keyboardResizeBy: number | null,
+  panelGroupElement: ParentNode,
+): number {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === 'horizontal'
+    let delta = 0
+    if (event.shiftKey) delta = 100
+    else delta = keyboardResizeBy ?? 10
+    let movement = 0
+    switch (event.key) {
+      case 'ArrowDown':
+        movement = isHorizontal ? 0 : delta
+        break
+      case 'ArrowLeft':
+        movement = isHorizontal ? -delta : 0
+        break
+      case 'ArrowRight':
+        movement = isHorizontal ? delta : 0
+        break
+      case 'ArrowUp':
+        movement = isHorizontal ? 0 : -delta
+        break
+      case 'End':
+        movement = 100
+        break
+      case 'Home':
+        movement = -100
+        break
+    }
+    return movement
+  } else {
+    if (initialDragState == null) return 0
+    return calculateDragOffsetPercentage(
+      event,
+      dragHandleId,
+      direction,
+      initialDragState,
+      panelGroupElement,
+    )
+  }
+}
+
+export function calculateAriaValues({
+  layout,
+  panelsArray,
+  pivotIndices,
+}: {
+  layout: number[]
+  panelsArray: PanelData[]
+  pivotIndices: number[]
+}) {
+  let currentMinSize = 0
+  let currentMaxSize = 100
+  let totalMinSize = 0
+  let totalMaxSize = 0
+  const firstIndex = pivotIndices[0]
+  assert(firstIndex != null)
+  panelsArray.forEach((panelData, index) => {
+    const { constraints } = panelData
+    const { maxSize = 100, minSize = 0 } = constraints
+    if (index === firstIndex) {
+      currentMinSize = minSize
+      currentMaxSize = maxSize
+    } else {
+      totalMinSize += minSize
+      totalMaxSize += maxSize
+    }
+  })
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize)
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize)
+  const valueNow = layout[firstIndex]
+  return { valueMax, valueMin, valueNow }
+}
+
+export function calculateUnsafeDefaultLayout({
+  panelDataArray,
+}: {
+  panelDataArray: PanelData[]
+}): number[] {
+  const layout = Array.from<number>({ length: panelDataArray.length })
+  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints)
+  let numPanelsWithSizes = 0
+  let remainingSize = 100
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index]
+    assert(panelConstraints)
+    const { defaultSize } = panelConstraints
+    if (defaultSize != null) {
+      numPanelsWithSizes++
+      layout[index] = defaultSize
+      remainingSize -= defaultSize
+    }
+  }
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index]
+    assert(panelConstraints)
+    const { defaultSize } = panelConstraints
+    if (defaultSize != null) continue
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes
+    const size = remainingSize / numRemainingPanels
+    numPanelsWithSizes++
+    layout[index] = size
+    remainingSize -= size
+  }
+  return layout
+}

package/dist/shared/primitives/splitter/callPanelCallbacks.ts

@@ -0,0 +1,40 @@
+import { assert } from './assert'
+import { fuzzyNumbersEqual } from './compare'
+import type { PanelData } from './types'
+
+export function callPanelCallbacks(
+  panelsArray: PanelData[],
+  layout: number[],
+  panelIdToLastNotifiedSizeMap: Record<string, number>,
+  groupSizeInPixels: number | null,
+) {
+  layout.forEach((size, index) => {
+    const panelData = panelsArray[index]
+    assert(panelData)
+    const { callbacks, constraints, id: panelId } = panelData
+    const { collapsedSize = 0, collapsible, sizeUnit } = constraints
+    let displaySize = size
+    if (sizeUnit === 'px' && groupSizeInPixels != null)
+      displaySize = (size / 100) * groupSizeInPixels
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId]
+    if (lastNotifiedSize == null || !fuzzyNumbersEqual(displaySize, lastNotifiedSize)) {
+      panelIdToLastNotifiedSizeMap[panelId] = displaySize
+      const { onCollapse, onExpand, onResize } = callbacks
+      if (onResize) onResize(displaySize, lastNotifiedSize)
+      if (collapsible && (onCollapse || onExpand)) {
+        if (
+          onExpand &&
+          (lastNotifiedSize == null || fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          !fuzzyNumbersEqual(displaySize, collapsedSize)
+        )
+          onExpand()
+        if (
+          onCollapse &&
+          (lastNotifiedSize == null || !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize)) &&
+          fuzzyNumbersEqual(displaySize, collapsedSize)
+        )
+          onCollapse()
+      }
+    }
+  })
+}

package/dist/shared/primitives/splitter/compare.ts

@@ -0,0 +1,13 @@
+import { PRECISION } from './constants'
+
+export function fuzzyCompareNumbers(actual: number, expected: number, fractionDigits = PRECISION) {
+  actual = Number.parseFloat(actual.toFixed(fractionDigits))
+  expected = Number.parseFloat(expected.toFixed(fractionDigits))
+  const delta = actual - expected
+  if (delta === 0) return 0
+  else return delta > 0 ? 1 : -1
+}
+
+export function fuzzyNumbersEqual(actual: number, expected: number, fractionDigits?: number) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0
+}

package/dist/shared/primitives/splitter/constants.ts

@@ -0,0 +1 @@
+export const PRECISION = 10

package/dist/shared/primitives/splitter/debounce.ts

@@ -0,0 +1,10 @@
+export function debounce<T extends unknown[]>(callback: (...args: T) => void, durationMs = 10) {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+  const callable = (...args: T) => {
+    if (timeoutId !== null) clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => {
+      callback(...args)
+    }, durationMs)
+  }
+  return callable
+}

package/dist/shared/primitives/splitter/dom.ts

@@ -0,0 +1,64 @@
+const isBrowser = typeof document !== 'undefined'
+
+export function getPanelGroupElement(
+  id: string,
+  rootElement: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  if (!isBrowser) return null
+  if (rootElement instanceof HTMLElement && rootElement?.dataset?.panelGroupId === id)
+    return rootElement
+  const element = rootElement.querySelector<HTMLElement>(
+    `[data-panel-group][data-panel-group-id="${id}"]`,
+  )
+  if (element) return element
+  return null
+}
+
+export function getResizeHandleElement(
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  if (!isBrowser) return null
+  const element = scope.querySelector<HTMLElement>(`[data-panel-resize-handle-id="${id}"]`)
+  if (element) return element
+  return null
+}
+
+export function getResizeHandleElementIndex(
+  groupId: string,
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): number | null {
+  if (!isBrowser) return null
+  const handles = getResizeHandleElementsForGroup(groupId, scope)
+  const index = handles.findIndex(
+    handle => handle.getAttribute('data-panel-resize-handle-id') === id,
+  )
+  return index ?? null
+}
+
+export function getResizeHandleElementsForGroup(
+  groupId: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement[] {
+  if (!isBrowser) return []
+  return Array.from(
+    scope.querySelectorAll<HTMLElement>(
+      `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`,
+    ),
+  )
+}
+
+export function getResizeHandlePanelIds(
+  groupId: string,
+  handleId: string,
+  panelsArray: { id: string }[],
+  scope: ParentNode | HTMLElement = document,
+): [idBefore: string | null, idAfter: string | null] {
+  const handle = getResizeHandleElement(handleId, scope)
+  const handles = getResizeHandleElementsForGroup(groupId, scope)
+  const index = handle ? handles.indexOf(handle) : -1
+  const idBefore = panelsArray[index]?.id ?? null
+  const idAfter = panelsArray[index + 1]?.id ?? null
+  return [idBefore, idAfter]
+}

package/dist/shared/primitives/splitter/events.ts

@@ -0,0 +1,29 @@
+import type { Direction, ResizeEvent } from './types'
+
+export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
+  return event.type === 'keydown'
+}
+
+export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
+  return event.type.startsWith('mouse')
+}
+
+export function isTouchEvent(event: ResizeEvent): event is TouchEvent {
+  return event.type.startsWith('touch')
+}
+
+export function getResizeEventCoordinates(event: ResizeEvent) {
+  if (isMouseEvent(event)) {
+    return { x: event.clientX, y: event.clientY }
+  } else if (isTouchEvent(event)) {
+    const touch = event.touches[0]
+    if (touch && touch.clientX && touch.clientY) return { x: touch.clientX, y: touch.clientY }
+  }
+  return { x: Number.POSITIVE_INFINITY, y: Number.POSITIVE_INFINITY }
+}
+
+export function getResizeEventCursorPosition(direction: Direction, event: ResizeEvent): number {
+  const isHorizontal = direction === 'horizontal'
+  const { x, y } = getResizeEventCoordinates(event)
+  return isHorizontal ? x : y
+}

package/dist/shared/primitives/splitter/flags.ts

@@ -0,0 +1,4 @@
+export const EXCEEDED_HORIZONTAL_MIN = 0b0001
+export const EXCEEDED_HORIZONTAL_MAX = 0b0010
+export const EXCEEDED_VERTICAL_MIN = 0b0100
+export const EXCEEDED_VERTICAL_MAX = 0b1000

package/dist/shared/primitives/splitter/layout.ts

@@ -0,0 +1,153 @@
+import { assert } from './assert'
+import { fuzzyCompareNumbers, fuzzyNumbersEqual } from './compare'
+import { resizePanel } from './resizePanel'
+import type { PanelConstraints } from './types'
+
+export function compareLayouts(a: number[], b: number[]) {
+  if (a.length !== b.length) return false
+  else for (let index = 0; index < a.length; index++) if (a[index] !== b[index]) return false
+  return true
+}
+
+export function adjustLayoutByDelta({
+  delta,
+  layout: prevLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  trigger,
+}: {
+  delta: number
+  layout: number[]
+  panelConstraints: PanelConstraints[]
+  pivotIndices: number[]
+  trigger: 'imperative-api' | 'keyboard' | 'mouse-or-touch'
+}): number[] {
+  if (fuzzyNumbersEqual(delta, 0)) return prevLayout
+  const nextLayout = [...prevLayout]
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices
+  assert(firstPivotIndex != null)
+  assert(secondPivotIndex != null)
+  let deltaApplied = 0
+  if (trigger === 'keyboard') {
+    {
+      const index = delta < 0 ? secondPivotIndex : firstPivotIndex
+      const panelConstraints = panelConstraintsArray[index]
+      assert(panelConstraints)
+      if (panelConstraints.collapsible) {
+        const prevSize = prevLayout[index]
+        assert(prevSize != null)
+        const constraints = panelConstraintsArray[index]
+        assert(constraints)
+        const { collapsedSize = 0, minSize = 0 } = constraints
+        if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+          const localDelta = minSize - prevSize
+          if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0)
+            delta = delta < 0 ? 0 - localDelta : localDelta
+        }
+      }
+    }
+    {
+      const index = delta < 0 ? firstPivotIndex : secondPivotIndex
+      const panelConstraints = panelConstraintsArray[index]
+      assert(panelConstraints)
+      const { collapsible } = panelConstraints
+      if (collapsible) {
+        const prevSize = prevLayout[index]
+        assert(prevSize != null)
+        const constraints = panelConstraintsArray[index]
+        assert(constraints)
+        const { collapsedSize = 0, minSize = 0 } = constraints
+        if (fuzzyNumbersEqual(prevSize, minSize)) {
+          const localDelta = prevSize - collapsedSize
+          if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0)
+            delta = delta < 0 ? 0 - localDelta : localDelta
+        }
+      }
+    }
+  }
+  {
+    const increment = delta < 0 ? 1 : -1
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex
+    let maxAvailableDelta = 0
+    while (true) {
+      const prevSize = prevLayout[index]
+      assert(prevSize != null)
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: 100,
+      })
+      const available = maxSafeSize - prevSize
+      maxAvailableDelta += available
+      index += increment
+      if (index < 0 || index >= panelConstraintsArray.length) break
+    }
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta))
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta
+  }
+  {
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex
+    let index = pivotIndex
+    while (index >= 0 && index < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied)
+      const prevSize = prevLayout[index]
+      assert(prevSize != null)
+      const unsafeSize = prevSize - deltaRemaining
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize,
+      })
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize
+        nextLayout[index] = safeSize
+        if (
+          deltaApplied
+            .toPrecision(3)
+            .localeCompare(Math.abs(delta).toPrecision(3), undefined, { numeric: true }) >= 0
+        )
+          break
+      }
+      if (delta < 0) index--
+      else index++
+    }
+  }
+  if (fuzzyNumbersEqual(deltaApplied, 0)) return prevLayout
+  {
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex
+    const prevSize = prevLayout[pivotIndex]
+    assert(prevSize != null)
+    const unsafeSize = prevSize + deltaApplied
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize,
+    })
+    nextLayout[pivotIndex] = safeSize
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize
+      const remainingPivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex
+      let index = remainingPivotIndex
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const size = nextLayout[index]
+        assert(size != null)
+        const unsafe = size + deltaRemaining
+        const safe = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index,
+          size: unsafe,
+        })
+        if (!fuzzyNumbersEqual(size, safe)) {
+          deltaRemaining -= safe - size
+          nextLayout[index] = safe
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) break
+        if (delta > 0) index--
+        else index++
+      }
+    }
+  }
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0)
+  if (!fuzzyNumbersEqual(totalSize, 100)) return prevLayout
+  return nextLayout
+}

package/dist/shared/primitives/splitter/pivot.ts

@@ -0,0 +1,10 @@
+import { getResizeHandleElementIndex } from './dom'
+
+export function determinePivotIndices(
+  groupId: string,
+  dragHandleId: string,
+  panelGroupElement: ParentNode,
+): [number, number] {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement)
+  return index != null ? [index, index + 1] : [-1, -1]
+}

package/dist/shared/primitives/splitter/rects.ts

@@ -0,0 +1,24 @@
+export interface Rectangle {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export function intersects(rectOne: Rectangle, rectTwo: Rectangle, strict: boolean): boolean {
+  if (strict) {
+    return (
+      rectOne.x < rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width > rectTwo.x &&
+      rectOne.y < rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height > rectTwo.y
+    )
+  } else {
+    return (
+      rectOne.x <= rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width >= rectTwo.x &&
+      rectOne.y <= rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height >= rectTwo.y
+    )
+  }
+}