@prosekit/web 0.7.3 → 0.7.5

package/src/components/resizable/resizable-handle/calc-resize.spec.ts

@@ -0,0 +1,280 @@
+import {
+  expect,
+  test,
+} from 'vitest'
+
+import { calcResize } from './calc-resize'
+
+test('calcBottomRightResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('bottom-right', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('bottom-right', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testIncrease(10, 0)
+
+  // drag to the left
+  testDecrease(-10, 0)
+
+  // drag to the bottom
+  testIncrease(0, 10)
+
+  // drag to the top
+  testDecrease(0, -10)
+
+  // drag to the bottom-right
+  testIncrease(10, 10)
+
+  // drag to the top-left
+  testDecrease(-10, -10)
+})
+
+test('calcBottomLeftResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('bottom-left', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('bottom-left', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testDecrease(10, 0)
+
+  // drag to the left
+  testIncrease(-10, 0)
+
+  // drag to the bottom
+  testIncrease(0, 10)
+
+  // drag to the top
+  testDecrease(0, -10)
+
+  // drag to the bottom-left
+  testIncrease(-10, 10)
+
+  // drag to the top-right
+  testDecrease(10, -10)
+})
+
+test('calcTopRightResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top-right', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top-right', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testIncrease(10, 0)
+
+  // drag to the left
+  testDecrease(-10, 0)
+
+  // drag to the bottom
+  testDecrease(0, 10)
+
+  // drag to the top
+  testIncrease(0, -10)
+
+  // drag to the top-right
+  testIncrease(10, -10)
+
+  // drag to the bottom-left
+  testDecrease(-10, 10)
+})
+
+test('calcTopLeftResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top-left', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top-left', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testDecrease(10, 0)
+
+  // drag to the left
+  testIncrease(-10, 0)
+
+  // drag to the bottom
+  testDecrease(0, 10)
+
+  // drag to the top
+  testIncrease(0, -10)
+
+  // drag to the top-left
+  testIncrease(-10, -10)
+
+  // drag to the bottom-right
+  testDecrease(10, 10)
+})
+
+test('calcTopResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+  const testUnchanged = (dx: number, dy: number) => {
+    const [w1, h1] = [200, 100]
+    const [w2, h2] = calcResize('top', w1, h1, dx, dy, null)
+    expectAreaToUnchanged(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testUnchanged(10, 0)
+
+  // drag to the left
+  testUnchanged(-10, 0)
+
+  // drag to the bottom
+  testDecrease(0, 10)
+
+  // drag to the top
+  testIncrease(0, -10)
+})
+
+test('calcRightResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('right', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('right', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+  const testUnchanged = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('right', w1, h1, dx, dy, null)
+    expectAreaToUnchanged(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testIncrease(10, 0)
+
+  // drag to the left
+  testDecrease(-10, 0)
+
+  // drag to the bottom
+  testUnchanged(0, 10)
+
+  // drag to the top
+  testUnchanged(0, -10)
+})
+
+test('sizes are clamped to positive values', () => {
+  const [w1, h1] = [100, 200]
+  const [w2, h2] = calcResize('right', w1, h1, -500, 0, null)
+  expect(w2).toBeGreaterThan(0)
+  expect(h2).toBeGreaterThan(0)
+})
+
+test('calcBottomResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('bottom', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('bottom', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+  const testUnchanged = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('bottom', w1, h1, dx, dy, null)
+    expectAreaToUnchanged(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testUnchanged(10, 0)
+
+  // drag to the left
+  testUnchanged(-10, 0)
+
+  // drag to the bottom
+  testIncrease(0, 10)
+
+  // drag to the top
+  testDecrease(0, -10)
+})
+
+test('calcLeftResize', () => {
+  const testIncrease = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('left', w1, h1, dx, dy, null)
+    expectAreaToIncrease(w1, h1, w2, h2)
+  }
+  const testDecrease = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('left', w1, h1, dx, dy, null)
+    expectAreaToDecrease(w1, h1, w2, h2)
+  }
+  const testUnchanged = (dx: number, dy: number) => {
+    const [w1, h1] = [100, 200]
+    const [w2, h2] = calcResize('left', w1, h1, dx, dy, null)
+    expectAreaToUnchanged(w1, h1, w2, h2)
+  }
+
+  // drag to the right
+  testDecrease(10, 0)
+
+  // drag to the left
+  testIncrease(-10, 0)
+
+  // drag to the bottom
+  testUnchanged(0, 10)
+
+  // drag to the top
+  testUnchanged(0, -10)
+})
+
+function expectAreaToIncrease(w1: number, h1: number, w2: number, h2: number) {
+  const area1 = w1 * h1
+  const area2 = w2 * h2
+  const aspectRatio1 = w1 / h1
+  const aspectRatio2 = w2 / h2
+  expect(area2).toBeGreaterThan(area1)
+  expect(aspectRatio2).toBeCloseTo(aspectRatio1)
+}
+
+function expectAreaToDecrease(w1: number, h1: number, w2: number, h2: number) {
+  const area1 = w1 * h1
+  const area2 = w2 * h2
+  const aspectRatio1 = w1 / h1
+  const aspectRatio2 = w2 / h2
+  expect(area2).toBeLessThan(area1)
+  expect(aspectRatio2).toBeCloseTo(aspectRatio1)
+}
+
+function expectAreaToUnchanged(w1: number, h1: number, w2: number, h2: number) {
+  expect(w1).toBe(w2)
+  expect(h1).toBe(h2)
+}

package/src/components/resizable/resizable-handle/calc-resize.ts

@@ -0,0 +1,121 @@
+import { isFinitePositiveNumber } from '../../../utils/is-finite-positive-number'
+
+export function calcResize(
+  position:
+    | 'top'
+    | 'right'
+    | 'bottom'
+    | 'left'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right',
+  w: number,
+  h: number,
+  dx: number,
+  dy: number,
+  aspectRatio: number | null | undefined,
+): [w: number, h: number] {
+  aspectRatio = aspectRatio ? aspectRatio : w / h
+  aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1
+
+  switch (position) {
+    case 'bottom-right':
+      return clamp(calcBottomRightResize(w, h, dx, dy, aspectRatio))
+    case 'bottom-left':
+      return clamp(calcBottomLeftResize(w, h, dx, dy, aspectRatio))
+    case 'top-right':
+      return clamp(calcTopRightResize(w, h, dx, dy, aspectRatio))
+    case 'top-left':
+      return clamp(calcTopLeftResize(w, h, dx, dy, aspectRatio))
+    case 'top':
+      return clamp(calcTopResize(w, h, dx, dy, aspectRatio))
+    case 'right':
+      return clamp(calcRightResize(w, h, dx, dy, aspectRatio))
+    case 'bottom':
+      return clamp(calcBottomResize(w, h, dx, dy, aspectRatio))
+    case 'left':
+      return clamp(calcLeftResize(w, h, dx, dy, aspectRatio))
+    default:
+      throw new RangeError(`Invalid position: ${position}`)
+  }
+}
+
+type CalcResize = (
+  w: number,
+  h: number,
+  dx: number,
+  dy: number,
+  aspectRatio: number,
+) => [w: number, h: number]
+
+const calcBottomRightResize: CalcResize = (w, h, dx, dy, r) => {
+  w += dx
+  h += dy
+
+  const sum = w + h
+  h = sum / (r + 1)
+  w = sum - h
+  return [w, h]
+}
+
+const calcBottomLeftResize: CalcResize = (w, h, dx, dy, r) => {
+  w -= dx
+  h += dy
+
+  const sum = w + h
+  h = sum / (r + 1)
+  w = sum - h
+  return [w, h]
+}
+
+const calcTopRightResize: CalcResize = (w, h, dx, dy, r) => {
+  w += dx
+  h -= dy
+
+  const sum = w + h
+  h = sum / (r + 1)
+  w = sum - h
+  return [w, h]
+}
+
+const calcTopLeftResize: CalcResize = (w, h, dx, dy, r) => {
+  w -= dx
+  h -= dy
+
+  const sum = w + h
+  h = sum / (r + 1)
+  w = sum - h
+  return [w, h]
+}
+
+const calcTopResize: CalcResize = (w, h, dx, dy, r) => {
+  h -= dy
+  w = h * r
+  return [w, h]
+}
+
+const calcRightResize: CalcResize = (w, h, dx, dy, r) => {
+  w += dx
+  h = w / r
+  return [w, h]
+}
+
+const calcBottomResize: CalcResize = (w, h, dx, dy, r) => {
+  h += dy
+  w = h * r
+  return [w, h]
+}
+
+const calcLeftResize: CalcResize = (w, h, dx, dy, r) => {
+  w -= dx
+  h = w / r
+  return [w, h]
+}
+
+function clamp([w, h]: [number, number]): [number, number] {
+  return [
+    Math.max(w, 1),
+    Math.max(h, 1),
+  ]
+}

package/src/components/resizable/resizable-handle/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useResizableHandle } from "./setup"
+import { resizableHandleEvents, resizableHandleProps, type ResizableHandleEvents, type ResizableHandleProps } from "./types"
+
+const ResizableHandleElementBase: BaseElementConstructor<ResizableHandleProps> = defineCustomElement<
+  ResizableHandleProps,
+  ResizableHandleEvents
+>({
+  props: resizableHandleProps,
+  events: resizableHandleEvents,
+  setup: useResizableHandle,
+})
+class ResizableHandleElement extends ResizableHandleElementBase {}
+
+registerCustomElement('prosekit-resizable-handle', ResizableHandleElement)
+  
+export { ResizableHandleElement }

package/src/components/resizable/resizable-handle/setup.ts

@@ -0,0 +1,112 @@
+import {
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+  type SignalState,
+} from '@aria-ui/core'
+import { getWindow } from '@ocavue/utils'
+
+import {
+  onResizeContext,
+  onResizeEndContext,
+  onResizeStartContext,
+  type OnResize,
+  type OnResizeEnd,
+  type OnResizeStart,
+} from '../context'
+
+import { calcResize } from './calc-resize'
+import type { ResizableHandleProps } from './types'
+
+/**
+ * @internal
+ */
+export function useResizableHandle(
+  host: ConnectableElement,
+  { state }: { state: SignalState<ResizableHandleProps> },
+): void {
+  const onResize = onResizeContext.consume(host)
+  const onResizeStart = onResizeStartContext.consume(host)
+  const onResizeEnd = onResizeEndContext.consume(host)
+
+  useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd })
+}
+
+function useResizableHandleState(
+  host: ConnectableElement,
+  state: SignalState<ResizableHandleProps>,
+  context: {
+    onResizeStart: ReadonlySignal<OnResizeStart>
+    onResize: ReadonlySignal<OnResize>
+    onResizeEnd: ReadonlySignal<OnResizeEnd>
+  },
+) {
+  let startX = 0
+  let startY = 0
+  let width = 0
+  let height = 0
+  let aspectRatio = 1
+
+  const pointerPressing = createSignal(false)
+
+  const handlePointerDown = (event: PointerEvent) => {
+    event.preventDefault()
+    pointerPressing.set(true)
+
+    startX = event.x
+    startY = event.y
+
+    const size = context.onResizeStart.get()?.()
+    if (size) {
+      ;[width, height, aspectRatio] = size
+    }
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    event.preventDefault()
+
+    const dx = event.x - startX
+    const dy = event.y - startY
+
+    const [w, h] = calcResize(
+      state.position.peek(),
+      width,
+      height,
+      dx,
+      dy,
+      aspectRatio,
+    )
+
+    context.onResize.get()?.(w, h)
+  }
+
+  const handlePointerUp = (event: PointerEvent) => {
+    event.preventDefault()
+    pointerPressing.set(false)
+
+    context.onResizeEnd.get()?.()
+  }
+
+  useEffect(host, () => {
+    host.addEventListener('pointerdown', handlePointerDown)
+    return () => {
+      host.removeEventListener('pointerdown', handlePointerDown)
+    }
+  })
+
+  useEffect(host, () => {
+    if (!pointerPressing.get()) {
+      return
+    }
+
+    const win = getWindow(host)
+
+    win.addEventListener('pointermove', handlePointerMove)
+    win.addEventListener('pointerup', handlePointerUp)
+    return () => {
+      win.removeEventListener('pointermove', handlePointerMove)
+      win.removeEventListener('pointerup', handlePointerUp)
+    }
+  })
+}

package/src/components/resizable/resizable-handle/types.ts

@@ -0,0 +1,32 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+
+export interface ResizableHandleProps {
+  /**
+   * The position of the handle.
+   *
+   * @default "bottom-right"
+   */
+  position:
+    | 'top'
+    | 'right'
+    | 'bottom'
+    | 'left'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+}
+
+/** @internal */
+export const resizableHandleProps: PropDeclarations<ResizableHandleProps> = {
+  position: { default: 'bottom-right' },
+}
+
+/** @internal */
+export interface ResizableHandleEvents {}
+
+/** @internal */
+export const resizableHandleEvents: EventDeclarations<ResizableHandleEvents> = {}

package/src/components/resizable/resizable-root/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useResizableRoot } from "./setup"
+import { resizableRootEvents, resizableRootProps, type ResizableRootEvents, type ResizableRootProps } from "./types"
+
+const ResizableRootElementBase: BaseElementConstructor<ResizableRootProps> = defineCustomElement<
+  ResizableRootProps,
+  ResizableRootEvents
+>({
+  props: resizableRootProps,
+  events: resizableRootEvents,
+  setup: useResizableRoot,
+})
+class ResizableRootElement extends ResizableRootElementBase {}
+
+registerCustomElement('prosekit-resizable-root', ResizableRootElement)
+  
+export { ResizableRootElement }

package/src/components/resizable/resizable-root/setup.ts

@@ -0,0 +1,93 @@
+import {
+  createSignal,
+  useAttribute,
+  useEffect,
+  type ConnectableElement,
+  type SetupOptions,
+} from '@aria-ui/core'
+
+import { isFinitePositiveNumber } from '../../../utils/is-finite-positive-number'
+import {
+  onResizeContext,
+  onResizeEndContext,
+  onResizeStartContext,
+  type OnResize,
+  type OnResizeEnd,
+  type OnResizeStart,
+} from '../context'
+
+import type {
+  ResizableRootEvents,
+  ResizableRootProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useResizableRoot(
+  host: ConnectableElement,
+  { state, emit }: SetupOptions<ResizableRootProps, ResizableRootEvents>,
+): void {
+  const resizing = createSignal(false)
+
+  const onResizeStart: OnResizeStart = () => {
+    const { width, height } = host.getBoundingClientRect()
+
+    let aspectRatio: number = state.aspectRatio.peek() ?? width / height
+
+    if (!isFinitePositiveNumber(aspectRatio)) {
+      aspectRatio = 0
+    }
+
+    emit('resizeStart', { width, height })
+    resizing.set(true)
+    return [width, height, aspectRatio]
+  }
+
+  const onResize: OnResize = (width, height) => {
+    state.width.set(width)
+    state.height.set(height)
+  }
+
+  const onResizeEnd: OnResizeEnd = () => {
+    const { width, height } = host.getBoundingClientRect()
+    emit('resizeEnd', { width, height })
+    resizing.set(false)
+  }
+
+  onResizeStartContext.provide(host, createSignal(onResizeStart))
+  onResizeContext.provide(host, createSignal(onResize))
+  onResizeEndContext.provide(host, createSignal(onResizeEnd))
+
+  useEffect(host, () => {
+    updateResizableRootStyles(
+      host,
+      Math.max(state.width.get() || 0, 1),
+      Math.max(state.height.get() || 0, 1),
+      state.aspectRatio.get(),
+    )
+  })
+
+  useAttribute(host, 'data-resizing', () => (resizing.get() ? '' : undefined))
+}
+
+function updateResizableRootStyles(
+  host: ConnectableElement,
+  width: number,
+  height: number,
+  aspectRatio: number | null,
+) {
+  host.style.width = isFinitePositiveNumber(width) ? `${width}px` : ''
+
+  host.style.height = isFinitePositiveNumber(height) ? `${height}px` : ''
+
+  if (isFinitePositiveNumber(aspectRatio)) {
+    host.style.aspectRatio = `${aspectRatio}`
+
+    if (width && width > 0 && aspectRatio >= 1) {
+      host.style.height = 'auto'
+    } else if (height && height > 0 && aspectRatio <= 1) {
+      host.style.width = 'min-content'
+    }
+  }
+}

package/src/components/resizable/resizable-root/types.ts

@@ -0,0 +1,28 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+
+export interface ResizableRootProps {
+  width: number | null
+  height: number | null
+  aspectRatio: number | null
+}
+
+/** @internal */
+export const resizableRootProps: PropDeclarations<ResizableRootProps> = {
+  width: { default: null },
+  height: { default: null },
+  aspectRatio: { default: null },
+}
+
+export interface ResizableRootEvents {
+  resizeStart: CustomEvent<{ width: number; height: number }>
+  resizeEnd: CustomEvent<{ width: number; height: number }>
+}
+
+/** @internal */
+export const resizableRootEvents: EventDeclarations<ResizableRootEvents> = {
+  resizeStart: {},
+  resizeEnd: {},
+}