@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/canvas/canvasGeometry.ts

@@ -1,133 +1,133 @@
-export interface CanvasRect {
-  x: number
-  y: number
-  w: number
-  h: number
-}
-
-export interface CanvasSize {
-  w: number
-  h: number
-}
-
-export interface ViewportRect {
-  left: number
-  top: number
-  width: number
-  height: number
-}
-
-export interface CanvasPoint {
-  x: number
-  y: number
-}
-
-export type CanvasResizeHandle = 'nw' | 'ne' | 'se' | 'sw'
-
-export function canvasScale(
-  viewport: Pick<ViewportRect, 'width' | 'height'>,
-  canvas: CanvasSize,
-): number {
-  const xScale = viewport.width / canvas.w
-  const yScale = viewport.height / canvas.h
-  return Number.isFinite(xScale) && xScale > 0 ? xScale : yScale
-}
-
-export function clientPointToCanvas(input: {
-  clientX: number
-  clientY: number
-  viewport: ViewportRect
-  canvas: CanvasSize
-}): CanvasPoint {
-  const scale = canvasScale(input.viewport, input.canvas)
-  return {
-    x: (input.clientX - input.viewport.left) / scale,
-    y: (input.clientY - input.viewport.top) / scale,
-  }
-}
-
-export function clientDeltaToCanvas(input: {
-  deltaX: number
-  deltaY: number
-  viewport: Pick<ViewportRect, 'width' | 'height'>
-  canvas: CanvasSize
-}): CanvasPoint {
-  const scale = canvasScale(input.viewport, input.canvas)
-  return {
-    x: input.deltaX / scale,
-    y: input.deltaY / scale,
-  }
-}
-
-export function clampCanvasRect(
-  rect: CanvasRect,
-  canvas: CanvasSize,
-  minimum: Pick<CanvasRect, 'w' | 'h'> = { w: 24, h: 24 },
-): CanvasRect {
-  const w = Math.min(Math.max(rect.w, minimum.w), canvas.w)
-  const h = Math.min(Math.max(rect.h, minimum.h), canvas.h)
-  return {
-    x: Math.min(Math.max(rect.x, 0), canvas.w - w),
-    y: Math.min(Math.max(rect.y, 0), canvas.h - h),
-    w,
-    h,
-  }
-}
-
-export function moveCanvasRect(input: {
-  rect: CanvasRect
-  delta: CanvasPoint
-  canvas: CanvasSize
-  gridStep?: number
-}): CanvasRect {
-  return clampCanvasRect(
-    snapCanvasRect(
-      {
-        ...input.rect,
-        x: input.rect.x + input.delta.x,
-        y: input.rect.y + input.delta.y,
-      },
-      input.gridStep,
-    ),
-    input.canvas,
-  )
-}
-
-export function resizeCanvasRect(input: {
-  rect: CanvasRect
-  delta: CanvasPoint
-  handle: CanvasResizeHandle
-  canvas: CanvasSize
-  minimum?: Pick<CanvasRect, 'w' | 'h'>
-  gridStep?: number
-}): CanvasRect {
-  const { rect, delta, handle } = input
-  const left = handle.includes('w')
-  const top = handle.includes('n')
-  const next = {
-    x: left ? rect.x + delta.x : rect.x,
-    y: top ? rect.y + delta.y : rect.y,
-    w: left ? rect.w - delta.x : rect.w + delta.x,
-    h: top ? rect.h - delta.y : rect.h + delta.y,
-  }
-  return clampCanvasRect(
-    snapCanvasRect(next, input.gridStep),
-    input.canvas,
-    input.minimum,
-  )
-}
-
-export function snapCanvasRect(
-  rect: CanvasRect,
-  gridStep = 0,
-): CanvasRect {
-  if (gridStep <= 0) return rect
-  const snap = (value: number): number =>
-    Math.round(value / gridStep) * gridStep
-  return {
-    x: snap(rect.x),
-    y: snap(rect.y),
-    w: Math.max(gridStep, snap(rect.w)),
-    h: Math.max(gridStep, snap(rect.h)),
-  }
-}
+export interface CanvasRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface CanvasSize {
+  w: number
+  h: number
+}
+
+export interface ViewportRect {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+export interface CanvasPoint {
+  x: number
+  y: number
+}
+
+export type CanvasResizeHandle = 'nw' | 'ne' | 'se' | 'sw'
+
+export function canvasScale(
+  viewport: Pick<ViewportRect, 'width' | 'height'>,
+  canvas: CanvasSize,
+): number {
+  const xScale = viewport.width / canvas.w
+  const yScale = viewport.height / canvas.h
+  return Number.isFinite(xScale) && xScale > 0 ? xScale : yScale
+}
+
+export function clientPointToCanvas(input: {
+  clientX: number
+  clientY: number
+  viewport: ViewportRect
+  canvas: CanvasSize
+}): CanvasPoint {
+  const scale = canvasScale(input.viewport, input.canvas)
+  return {
+    x: (input.clientX - input.viewport.left) / scale,
+    y: (input.clientY - input.viewport.top) / scale,
+  }
+}
+
+export function clientDeltaToCanvas(input: {
+  deltaX: number
+  deltaY: number
+  viewport: Pick<ViewportRect, 'width' | 'height'>
+  canvas: CanvasSize
+}): CanvasPoint {
+  const scale = canvasScale(input.viewport, input.canvas)
+  return {
+    x: input.deltaX / scale,
+    y: input.deltaY / scale,
+  }
+}
+
+export function clampCanvasRect(
+  rect: CanvasRect,
+  canvas: CanvasSize,
+  minimum: Pick<CanvasRect, 'w' | 'h'> = { w: 24, h: 24 },
+): CanvasRect {
+  const w = Math.min(Math.max(rect.w, minimum.w), canvas.w)
+  const h = Math.min(Math.max(rect.h, minimum.h), canvas.h)
+  return {
+    x: Math.min(Math.max(rect.x, 0), canvas.w - w),
+    y: Math.min(Math.max(rect.y, 0), canvas.h - h),
+    w,
+    h,
+  }
+}
+
+export function moveCanvasRect(input: {
+  rect: CanvasRect
+  delta: CanvasPoint
+  canvas: CanvasSize
+  gridStep?: number
+}): CanvasRect {
+  return clampCanvasRect(
+    snapCanvasRect(
+      {
+        ...input.rect,
+        x: input.rect.x + input.delta.x,
+        y: input.rect.y + input.delta.y,
+      },
+      input.gridStep,
+    ),
+    input.canvas,
+  )
+}
+
+export function resizeCanvasRect(input: {
+  rect: CanvasRect
+  delta: CanvasPoint
+  handle: CanvasResizeHandle
+  canvas: CanvasSize
+  minimum?: Pick<CanvasRect, 'w' | 'h'>
+  gridStep?: number
+}): CanvasRect {
+  const { rect, delta, handle } = input
+  const left = handle.includes('w')
+  const top = handle.includes('n')
+  const next = {
+    x: left ? rect.x + delta.x : rect.x,
+    y: top ? rect.y + delta.y : rect.y,
+    w: left ? rect.w - delta.x : rect.w + delta.x,
+    h: top ? rect.h - delta.y : rect.h + delta.y,
+  }
+  return clampCanvasRect(
+    snapCanvasRect(next, input.gridStep),
+    input.canvas,
+    input.minimum,
+  )
+}
+
+export function snapCanvasRect(
+  rect: CanvasRect,
+  gridStep = 0,
+): CanvasRect {
+  if (gridStep <= 0) return rect
+  const snap = (value: number): number =>
+    Math.round(value / gridStep) * gridStep
+  return {
+    x: snap(rect.x),
+    y: snap(rect.y),
+    w: Math.max(gridStep, snap(rect.w)),
+    h: Math.max(gridStep, snap(rect.h)),
+  }
+}

package/src/components/common/canvas/index.ts

@@ -1,27 +1,27 @@
-export { CanvasElementFrame } from './CanvasElementFrame.js'
-export type { CanvasElementFrameProps } from './CanvasElementFrame.js'
-export type CanvasElementPlacement = 'flow' | 'absolute'
-export type CanvasElementDropSide = 'before' | 'left' | 'right'
-export {
-  canvasScale,
-  clampCanvasRect,
-  clientDeltaToCanvas,
-  clientPointToCanvas,
-  moveCanvasRect,
-  resizeCanvasRect,
-  snapCanvasRect,
-} from './canvasGeometry.js'
-export type {
-  CanvasPoint,
-  CanvasRect,
-  CanvasResizeHandle,
-  CanvasSize,
-  ViewportRect,
-} from './canvasGeometry.js'
-export { useCanvasDragResize } from './useCanvasDragResize.js'
-export type {
-  CanvasDragKind,
-  CanvasDragState,
-  UseCanvasDragResizeOptions,
-  UseCanvasDragResizeResult,
-} from './useCanvasDragResize.js'
+export { CanvasElementFrame } from './CanvasElementFrame.js'
+export type { CanvasElementFrameProps } from './CanvasElementFrame.js'
+export type CanvasElementPlacement = 'flow' | 'absolute'
+export type CanvasElementDropSide = 'before' | 'left' | 'right'
+export {
+  canvasScale,
+  clampCanvasRect,
+  clientDeltaToCanvas,
+  clientPointToCanvas,
+  moveCanvasRect,
+  resizeCanvasRect,
+  snapCanvasRect,
+} from './canvasGeometry.js'
+export type {
+  CanvasPoint,
+  CanvasRect,
+  CanvasResizeHandle,
+  CanvasSize,
+  ViewportRect,
+} from './canvasGeometry.js'
+export { useCanvasDragResize } from './useCanvasDragResize.js'
+export type {
+  CanvasDragKind,
+  CanvasDragState,
+  UseCanvasDragResizeOptions,
+  UseCanvasDragResizeResult,
+} from './useCanvasDragResize.js'

package/src/components/common/canvas/useCanvasDragResize.test.tsx

@@ -1,152 +1,152 @@
-import { act } from 'react'
-import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, describe, expect, it } from 'vitest'
-import type { CanvasRect, CanvasSize, ViewportRect } from './canvasGeometry.js'
-import { useCanvasDragResize } from './useCanvasDragResize.js'
-
-const canvas: CanvasSize = { w: 1280, h: 720 }
-const viewport: ViewportRect = { left: 0, top: 0, width: 640, height: 360 }
-const frame: CanvasRect = { x: 120, y: 80, w: 240, h: 120 }
-
-;(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean })
-  .IS_REACT_ACT_ENVIRONMENT = true
-
-let root: Root | null = null
-let host: HTMLDivElement | null = null
-
-afterEach(() => {
-  act(() => {
-    root?.unmount()
-  })
-  root = null
-  host?.remove()
-  host = null
-})
-
-function dispatchPointer(
-  target: EventTarget,
-  type: string,
-  init: PointerEventInit,
-): void {
-  target.dispatchEvent(
-    new PointerEvent(type, {
-      bubbles: true,
-      cancelable: true,
-      pointerId: 1,
-      buttons: type === 'pointerup' || type === 'pointercancel' ? 0 : 1,
-      ...init,
-    }),
-  )
-}
-
-function Harness({
-  onPreview,
-  onCommit,
-}: {
-  onPreview: (rect: CanvasRect) => void
-  onCommit: (rect: CanvasRect) => void
-}) {
-  const drag = useCanvasDragResize({
-    canvas,
-    getViewport: () => viewport,
-    gridStep: 10,
-    minimum: { w: 80, h: 60 },
-    onPreview,
-    onCommit,
-  })
-
-  return (
-    <button
-      type="button"
-      data-drag-kind={drag.dragState?.kind ?? 'none'}
-      data-suppress-click={drag.shouldSuppressClick ? 'true' : 'false'}
-      onClick={() => drag.clearClickSuppression()}
-      onPointerDown={event => drag.beginMove(frame, event)}
-    >
-      Move
-    </button>
-  )
-}
-
-function mountHarness(input: {
-  onPreview?: (rect: CanvasRect) => void
-  onCommit?: (rect: CanvasRect) => void
-} = {}): HTMLButtonElement {
-  host = document.createElement('div')
-  document.body.append(host)
-  root = createRoot(host)
-  act(() => {
-    root?.render(
-      <Harness
-        onPreview={input.onPreview ?? (() => undefined)}
-        onCommit={input.onCommit ?? (() => undefined)}
-      />,
-    )
-  })
-  const button = host.querySelector('button')
-  if (!button) throw new Error('Harness button did not render')
-  return button
-}
-
-describe('useCanvasDragResize', () => {
-  it('previews and commits moved frames from pointer deltas', () => {
-    const previews: CanvasRect[] = []
-    const commits: CanvasRect[] = []
-    const button = mountHarness({
-      onPreview: rect => previews.push(rect),
-      onCommit: rect => commits.push(rect),
-    })
-
-    act(() => {
-      dispatchPointer(button, 'pointerdown', { clientX: 40, clientY: 40 })
-      dispatchPointer(window, 'pointermove', { clientX: 70, clientY: 60 })
-    })
-
-    expect(button.dataset.dragKind).toBe('move')
-    expect(previews).toEqual([{ x: 180, y: 120, w: 240, h: 120 }])
-
-    act(() => {
-      dispatchPointer(window, 'pointerup', { clientX: 70, clientY: 60 })
-    })
-
-    expect(commits).toEqual([{ x: 180, y: 120, w: 240, h: 120 }])
-    expect(button.dataset.dragKind).toBe('none')
-    expect(button.dataset.suppressClick).toBe('true')
-  })
-
-  it('does not commit or suppress clicks for selection-only pointer presses', () => {
-    const commits: CanvasRect[] = []
-    const button = mountHarness({ onCommit: rect => commits.push(rect) })
-
-    act(() => {
-      dispatchPointer(button, 'pointerdown', { clientX: 40, clientY: 40 })
-      dispatchPointer(window, 'pointerup', { clientX: 41, clientY: 41 })
-    })
-
-    expect(commits).toEqual([])
-    expect(button.dataset.suppressClick).toBe('false')
-  })
-
-  it('restores the preview and does not commit when the pointer drag is cancelled', () => {
-    const previews: CanvasRect[] = []
-    const commits: CanvasRect[] = []
-    const button = mountHarness({
-      onPreview: rect => previews.push(rect),
-      onCommit: rect => commits.push(rect),
-    })
-
-    act(() => {
-      dispatchPointer(button, 'pointerdown', { clientX: 40, clientY: 40 })
-      dispatchPointer(window, 'pointermove', { clientX: 70, clientY: 60 })
-      dispatchPointer(window, 'pointercancel', { clientX: 70, clientY: 60 })
-    })
-
-    expect(previews).toEqual([
-      { x: 180, y: 120, w: 240, h: 120 },
-      frame,
-    ])
-    expect(commits).toEqual([])
-    expect(button.dataset.dragKind).toBe('none')
-    expect(button.dataset.suppressClick).toBe('false')
-  })
-})
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it } from 'vitest'
+import type { CanvasRect, CanvasSize, ViewportRect } from './canvasGeometry.js'
+import { useCanvasDragResize } from './useCanvasDragResize.js'
+
+const canvas: CanvasSize = { w: 1280, h: 720 }
+const viewport: ViewportRect = { left: 0, top: 0, width: 640, height: 360 }
+const frame: CanvasRect = { x: 120, y: 80, w: 240, h: 120 }
+
+;(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean })
+  .IS_REACT_ACT_ENVIRONMENT = true
+
+let root: Root | null = null
+let host: HTMLDivElement | null = null
+
+afterEach(() => {
+  act(() => {
+    root?.unmount()
+  })
+  root = null
+  host?.remove()
+  host = null
+})
+
+function dispatchPointer(
+  target: EventTarget,
+  type: string,
+  init: PointerEventInit,
+): void {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      pointerId: 1,
+      buttons: type === 'pointerup' || type === 'pointercancel' ? 0 : 1,
+      ...init,
+    }),
+  )
+}
+
+function Harness({
+  onPreview,
+  onCommit,
+}: {
+  onPreview: (rect: CanvasRect) => void
+  onCommit: (rect: CanvasRect) => void
+}) {
+  const drag = useCanvasDragResize({
+    canvas,
+    getViewport: () => viewport,
+    gridStep: 10,
+    minimum: { w: 80, h: 60 },
+    onPreview,
+    onCommit,
+  })
+
+  return (
+    <button
+      type="button"
+      data-drag-kind={drag.dragState?.kind ?? 'none'}
+      data-suppress-click={drag.shouldSuppressClick ? 'true' : 'false'}
+      onClick={() => drag.clearClickSuppression()}
+      onPointerDown={event => drag.beginMove(frame, event)}
+    >
+      Move
+    </button>
+  )
+}
+
+function mountHarness(input: {
+  onPreview?: (rect: CanvasRect) => void
+  onCommit?: (rect: CanvasRect) => void
+} = {}): HTMLButtonElement {
+  host = document.createElement('div')
+  document.body.append(host)
+  root = createRoot(host)
+  act(() => {
+    root?.render(
+      <Harness
+        onPreview={input.onPreview ?? (() => undefined)}
+        onCommit={input.onCommit ?? (() => undefined)}
+      />,
+    )
+  })
+  const button = host.querySelector('button')
+  if (!button) throw new Error('Harness button did not render')
+  return button
+}
+
+describe('useCanvasDragResize', () => {
+  it('previews and commits moved frames from pointer deltas', () => {
+    const previews: CanvasRect[] = []
+    const commits: CanvasRect[] = []
+    const button = mountHarness({
+      onPreview: rect => previews.push(rect),
+      onCommit: rect => commits.push(rect),
+    })
+
+    act(() => {
+      dispatchPointer(button, 'pointerdown', { clientX: 40, clientY: 40 })
+      dispatchPointer(window, 'pointermove', { clientX: 70, clientY: 60 })
+    })
+
+    expect(button.dataset.dragKind).toBe('move')
+    expect(previews).toEqual([{ x: 180, y: 120, w: 240, h: 120 }])
+
+    act(() => {
+      dispatchPointer(window, 'pointerup', { clientX: 70, clientY: 60 })
+    })
+
+    expect(commits).toEqual([{ x: 180, y: 120, w: 240, h: 120 }])
+    expect(button.dataset.dragKind).toBe('none')
+    expect(button.dataset.suppressClick).toBe('true')
+  })
+
+  it('does not commit or suppress clicks for selection-only pointer presses', () => {
+    const commits: CanvasRect[] = []
+    const button = mountHarness({ onCommit: rect => commits.push(rect) })
+
+    act(() => {
+      dispatchPointer(button, 'pointerdown', { clientX: 40, clientY: 40 })
+      dispatchPointer(window, 'pointerup', { clientX: 41, clientY: 41 })
+    })
+
+    expect(commits).toEqual([])
+    expect(button.dataset.suppressClick).toBe('false')
+  })
+
+  it('restores the preview and does not commit when the pointer drag is cancelled', () => {
+    const previews: CanvasRect[] = []
+    const commits: CanvasRect[] = []
+    const button = mountHarness({
+      onPreview: rect => previews.push(rect),
+      onCommit: rect => commits.push(rect),
+    })
+
+    act(() => {
+      dispatchPointer(button, 'pointerdown', { clientX: 40, clientY: 40 })
+      dispatchPointer(window, 'pointermove', { clientX: 70, clientY: 60 })
+      dispatchPointer(window, 'pointercancel', { clientX: 70, clientY: 60 })
+    })
+
+    expect(previews).toEqual([
+      { x: 180, y: 120, w: 240, h: 120 },
+      frame,
+    ])
+    expect(commits).toEqual([])
+    expect(button.dataset.dragKind).toBe('none')
+    expect(button.dataset.suppressClick).toBe('false')
+  })
+})