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

package/src/components/common/canvas/CanvasElementFrame.tsx

@@ -1,182 +1,182 @@
-import type {
-  KeyboardEvent,
-  PointerEvent,
-  ReactElement,
-  ReactNode,
-} from 'react'
-import { styled } from 'styled-components'
-import type {
-  CanvasRect,
-  CanvasResizeHandle,
-  CanvasSize,
-} from './canvasGeometry.js'
-
-const HANDLE_POSITIONS: Record<CanvasResizeHandle, string> = {
-  nw: 'top: -6px; left: -6px; cursor: nwse-resize;',
-  ne: 'top: -6px; right: -6px; cursor: nesw-resize;',
-  se: 'right: -6px; bottom: -6px; cursor: nwse-resize;',
-  sw: 'bottom: -6px; left: -6px; cursor: nesw-resize;',
-}
-
-const Frame = styled.div<{
-  $active?: boolean
-  $readOnly?: boolean
-  $disabled?: boolean
-}>`
-  position: absolute;
-  z-index: 20;
-  box-sizing: border-box;
-  border: ${({ $active }) => ($active ? '2px' : '1.5px')} solid
-    ${({ $active, $readOnly }) =>
-      $active
-        ? 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 82%, white)'
-        : $readOnly
-        ? 'rgb(127 127 127 / 42%)'
-        : 'rgb(127 127 127 / 58%)'};
-  background: ${({ $active }) =>
-    $active
-      ? 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 8%, transparent)'
-      : 'transparent'};
-  box-shadow: ${({ $active }) =>
-    $active
-      ? '0 0 0 2px color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 22%, transparent), 0 8px 22px rgb(0 0 0 / 16%)'
-      : '0 0 0 1px rgb(255 255 255 / 42%)'};
-  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
-  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
-
-  &:hover {
-    border-style: solid;
-    border-color: ${({ $readOnly }) =>
-      $readOnly
-        ? 'rgb(127 127 127 / 60%)'
-        : 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 68%, white)'};
-  }
-`
-
-const Label = styled.div`
-  position: absolute;
-  top: -25px;
-  left: -1px;
-  max-width: min(220px, 100%);
-  overflow: hidden;
-  padding: 3px 7px;
-  border-radius: 4px 4px 0 0;
-  background: color-mix(in srgb, var(--platform-color-surface, #ffffff) 96%, transparent);
-  box-shadow: 0 1px 4px rgb(0 0 0 / 14%);
-  color: var(--platform-color-text, #1f2430);
-  font-size: 12px;
-  font-weight: 760;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const Handle = styled.button<{ $handle: CanvasResizeHandle }>`
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  border: 2px solid currentColor;
-  border-radius: 3px;
-  background: var(--platform-color-surface, #ffffff);
-  color: var(--platform-color-accent, #3b6ff5);
-  box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
-  ${({ $handle }) => HANDLE_POSITIONS[$handle]}
-`
-
-function percent(value: number, total: number): string {
-  return `${(value / total) * 100}%`
-}
-
-export interface CanvasElementFrameProps {
-  frame: CanvasRect
-  canvas: CanvasSize
-  label?: string
-  ariaLabel?: string
-  selected?: boolean
-  readOnly?: boolean
-  disabled?: boolean
-  children?: ReactNode
-  onSelect?: () => void
-  onMovePointerDown?: (event: PointerEvent<HTMLDivElement>) => void
-  onFrameKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
-  onResizePointerDown?: (
-    handle: CanvasResizeHandle,
-    event: PointerEvent<HTMLButtonElement>,
-  ) => void
-}
-
-export function CanvasElementFrame({
-  frame,
-  canvas,
-  label,
-  ariaLabel,
-  selected,
-  readOnly,
-  disabled,
-  children,
-  onSelect,
-  onMovePointerDown,
-  onFrameKeyDown,
-  onResizePointerDown,
-}: CanvasElementFrameProps): ReactElement {
-  const resolvedAriaLabel = ariaLabel ?? `${label ?? 'Canvas element'}${
-    readOnly ? ', read-only' : ', selectable'
-  }${selected ? ', selected' : ''}`
-  return (
-    <Frame
-      data-canvas-element-frame="true"
-      data-canvas-selected={selected ? 'true' : undefined}
-      data-canvas-read-only={readOnly ? 'true' : undefined}
-      data-canvas-disabled={disabled ? 'true' : undefined}
-      $active={selected}
-      $readOnly={readOnly}
-      $disabled={disabled}
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      aria-label={resolvedAriaLabel}
-      aria-pressed={selected ? true : undefined}
-      aria-disabled={disabled ? true : undefined}
-      style={{
-        left: percent(frame.x, canvas.w),
-        top: percent(frame.y, canvas.h),
-        width: percent(frame.w, canvas.w),
-        height: percent(frame.h, canvas.h),
-        cursor: onMovePointerDown && !readOnly ? 'grab' : 'default',
-      }}
-      onClick={event => {
-        event.stopPropagation()
-        onSelect?.()
-      }}
-      onKeyDown={event => {
-        onFrameKeyDown?.(event)
-        if (event.defaultPrevented) return
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          onSelect?.()
-        }
-      }}
-      onPointerDown={event => {
-        if (readOnly) return
-        onMovePointerDown?.(event)
-      }}
-    >
-      {label ? <Label>{label}</Label> : null}
-      {children}
-      {selected && onResizePointerDown && !readOnly
-        ? (Object.keys(HANDLE_POSITIONS) as CanvasResizeHandle[]).map(handle => (
-            <Handle
-              key={handle}
-              type="button"
-              aria-label={`Resize ${label ?? 'element'} ${handle}`}
-              $handle={handle}
-              onPointerDown={event => {
-                event.stopPropagation()
-                onResizePointerDown(handle, event)
-              }}
-            />
-          ))
-        : null}
-    </Frame>
-  )
-}
+import type {
+  KeyboardEvent,
+  PointerEvent,
+  ReactElement,
+  ReactNode,
+} from 'react'
+import { styled } from 'styled-components'
+import type {
+  CanvasRect,
+  CanvasResizeHandle,
+  CanvasSize,
+} from './canvasGeometry.js'
+
+const HANDLE_POSITIONS: Record<CanvasResizeHandle, string> = {
+  nw: 'top: -6px; left: -6px; cursor: nwse-resize;',
+  ne: 'top: -6px; right: -6px; cursor: nesw-resize;',
+  se: 'right: -6px; bottom: -6px; cursor: nwse-resize;',
+  sw: 'bottom: -6px; left: -6px; cursor: nesw-resize;',
+}
+
+const Frame = styled.div<{
+  $active?: boolean
+  $readOnly?: boolean
+  $disabled?: boolean
+}>`
+  position: absolute;
+  z-index: 20;
+  box-sizing: border-box;
+  border: ${({ $active }) => ($active ? '2px' : '1.5px')} solid
+    ${({ $active, $readOnly }) =>
+      $active
+        ? 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 82%, white)'
+        : $readOnly
+        ? 'rgb(127 127 127 / 42%)'
+        : 'rgb(127 127 127 / 58%)'};
+  background: ${({ $active }) =>
+    $active
+      ? 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 8%, transparent)'
+      : 'transparent'};
+  box-shadow: ${({ $active }) =>
+    $active
+      ? '0 0 0 2px color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 22%, transparent), 0 8px 22px rgb(0 0 0 / 16%)'
+      : '0 0 0 1px rgb(255 255 255 / 42%)'};
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
+
+  &:hover {
+    border-style: solid;
+    border-color: ${({ $readOnly }) =>
+      $readOnly
+        ? 'rgb(127 127 127 / 60%)'
+        : 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 68%, white)'};
+  }
+`
+
+const Label = styled.div`
+  position: absolute;
+  top: -25px;
+  left: -1px;
+  max-width: min(220px, 100%);
+  overflow: hidden;
+  padding: 3px 7px;
+  border-radius: 4px 4px 0 0;
+  background: color-mix(in srgb, var(--platform-color-surface, #ffffff) 96%, transparent);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 14%);
+  color: var(--platform-color-text, #1f2430);
+  font-size: 12px;
+  font-weight: 760;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const Handle = styled.button<{ $handle: CanvasResizeHandle }>`
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 2px solid currentColor;
+  border-radius: 3px;
+  background: var(--platform-color-surface, #ffffff);
+  color: var(--platform-color-accent, #3b6ff5);
+  box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
+  ${({ $handle }) => HANDLE_POSITIONS[$handle]}
+`
+
+function percent(value: number, total: number): string {
+  return `${(value / total) * 100}%`
+}
+
+export interface CanvasElementFrameProps {
+  frame: CanvasRect
+  canvas: CanvasSize
+  label?: string
+  ariaLabel?: string
+  selected?: boolean
+  readOnly?: boolean
+  disabled?: boolean
+  children?: ReactNode
+  onSelect?: () => void
+  onMovePointerDown?: (event: PointerEvent<HTMLDivElement>) => void
+  onFrameKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
+  onResizePointerDown?: (
+    handle: CanvasResizeHandle,
+    event: PointerEvent<HTMLButtonElement>,
+  ) => void
+}
+
+export function CanvasElementFrame({
+  frame,
+  canvas,
+  label,
+  ariaLabel,
+  selected,
+  readOnly,
+  disabled,
+  children,
+  onSelect,
+  onMovePointerDown,
+  onFrameKeyDown,
+  onResizePointerDown,
+}: CanvasElementFrameProps): ReactElement {
+  const resolvedAriaLabel = ariaLabel ?? `${label ?? 'Canvas element'}${
+    readOnly ? ', read-only' : ', selectable'
+  }${selected ? ', selected' : ''}`
+  return (
+    <Frame
+      data-canvas-element-frame="true"
+      data-canvas-selected={selected ? 'true' : undefined}
+      data-canvas-read-only={readOnly ? 'true' : undefined}
+      data-canvas-disabled={disabled ? 'true' : undefined}
+      $active={selected}
+      $readOnly={readOnly}
+      $disabled={disabled}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-label={resolvedAriaLabel}
+      aria-pressed={selected ? true : undefined}
+      aria-disabled={disabled ? true : undefined}
+      style={{
+        left: percent(frame.x, canvas.w),
+        top: percent(frame.y, canvas.h),
+        width: percent(frame.w, canvas.w),
+        height: percent(frame.h, canvas.h),
+        cursor: onMovePointerDown && !readOnly ? 'grab' : 'default',
+      }}
+      onClick={event => {
+        event.stopPropagation()
+        onSelect?.()
+      }}
+      onKeyDown={event => {
+        onFrameKeyDown?.(event)
+        if (event.defaultPrevented) return
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          onSelect?.()
+        }
+      }}
+      onPointerDown={event => {
+        if (readOnly) return
+        onMovePointerDown?.(event)
+      }}
+    >
+      {label ? <Label>{label}</Label> : null}
+      {children}
+      {selected && onResizePointerDown && !readOnly
+        ? (Object.keys(HANDLE_POSITIONS) as CanvasResizeHandle[]).map(handle => (
+            <Handle
+              key={handle}
+              type="button"
+              aria-label={`Resize ${label ?? 'element'} ${handle}`}
+              $handle={handle}
+              onPointerDown={event => {
+                event.stopPropagation()
+                onResizePointerDown(handle, event)
+              }}
+            />
+          ))
+        : null}
+    </Frame>
+  )
+}

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

@@ -1,66 +1,66 @@
-import { describe, expect, it } from 'vitest'
-import {
-  clampCanvasRect,
-  clientDeltaToCanvas,
-  clientPointToCanvas,
-  moveCanvasRect,
-  resizeCanvasRect,
-} from './canvasGeometry.js'
-
-const canvas = { w: 1280, h: 720 }
-const viewport = { left: 10, top: 20, width: 640, height: 360 }
-
-describe('canvasGeometry', () => {
-  it('maps browser points and deltas into canvas coordinates', () => {
-    expect(
-      clientPointToCanvas({
-        clientX: 330,
-        clientY: 200,
-        viewport,
-        canvas,
-      }),
-    ).toEqual({ x: 640, y: 360 })
-
-    expect(
-      clientDeltaToCanvas({
-        deltaX: 50,
-        deltaY: 25,
-        viewport,
-        canvas,
-      }),
-    ).toEqual({ x: 100, y: 50 })
-  })
-
-  it('clamps rectangles to slide bounds', () => {
-    expect(
-      clampCanvasRect(
-        { x: -80, y: 700, w: 200, h: 100 },
-        canvas,
-        { w: 80, h: 40 },
-      ),
-    ).toEqual({ x: 0, y: 620, w: 200, h: 100 })
-  })
-
-  it('moves and snaps rectangles within the canvas', () => {
-    expect(
-      moveCanvasRect({
-        rect: { x: 90, y: 90, w: 200, h: 120 },
-        delta: { x: 23, y: 37 },
-        canvas,
-        gridStep: 20,
-      }),
-    ).toEqual({ x: 120, y: 120, w: 200, h: 120 })
-  })
-
-  it('resizes from handles and respects minimum size', () => {
-    expect(
-      resizeCanvasRect({
-        rect: { x: 100, y: 100, w: 200, h: 120 },
-        delta: { x: 80, y: 40 },
-        handle: 'nw',
-        canvas,
-        minimum: { w: 100, h: 80 },
-      }),
-    ).toEqual({ x: 180, y: 140, w: 120, h: 80 })
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  clampCanvasRect,
+  clientDeltaToCanvas,
+  clientPointToCanvas,
+  moveCanvasRect,
+  resizeCanvasRect,
+} from './canvasGeometry.js'
+
+const canvas = { w: 1280, h: 720 }
+const viewport = { left: 10, top: 20, width: 640, height: 360 }
+
+describe('canvasGeometry', () => {
+  it('maps browser points and deltas into canvas coordinates', () => {
+    expect(
+      clientPointToCanvas({
+        clientX: 330,
+        clientY: 200,
+        viewport,
+        canvas,
+      }),
+    ).toEqual({ x: 640, y: 360 })
+
+    expect(
+      clientDeltaToCanvas({
+        deltaX: 50,
+        deltaY: 25,
+        viewport,
+        canvas,
+      }),
+    ).toEqual({ x: 100, y: 50 })
+  })
+
+  it('clamps rectangles to slide bounds', () => {
+    expect(
+      clampCanvasRect(
+        { x: -80, y: 700, w: 200, h: 100 },
+        canvas,
+        { w: 80, h: 40 },
+      ),
+    ).toEqual({ x: 0, y: 620, w: 200, h: 100 })
+  })
+
+  it('moves and snaps rectangles within the canvas', () => {
+    expect(
+      moveCanvasRect({
+        rect: { x: 90, y: 90, w: 200, h: 120 },
+        delta: { x: 23, y: 37 },
+        canvas,
+        gridStep: 20,
+      }),
+    ).toEqual({ x: 120, y: 120, w: 200, h: 120 })
+  })
+
+  it('resizes from handles and respects minimum size', () => {
+    expect(
+      resizeCanvasRect({
+        rect: { x: 100, y: 100, w: 200, h: 120 },
+        delta: { x: 80, y: 40 },
+        handle: 'nw',
+        canvas,
+        minimum: { w: 100, h: 80 },
+      }),
+    ).toEqual({ x: 180, y: 140, w: 120, h: 80 })
+  })
+})