@carto/ps-react-ui 5.0.0-widgets.8 → 5.0.0

package/src/components/lasso-tool/toolbar/actions/edit-properties-action.tsx

@@ -0,0 +1,487 @@
+import {
+  AddOutlined,
+  CloseOutlined,
+  DataObjectOutlined,
+} from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  IconButton,
+  Popover,
+  TextField,
+  Typography,
+} from '@mui/material'
+import {
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+  type KeyboardEvent,
+  type RefObject,
+} from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+/**
+ * Keys the KV editor can never add/rename to: the system already has a
+ * dedicated control for each (Label, the visibility toggle, Lock, the style
+ * pickers, label presentation) or, for `type`, it's a render-only copy the
+ * layer injects. Mirrors `isLassoSystemPropertyKey` in `@carto/ps-react-maps`
+ * — kept local so this package doesn't depend on react-maps for a handful of
+ * strings.
+ */
+const SYSTEM_KEYS = new Set([
+  'label',
+  'visible',
+  'locked',
+  'style',
+  'textVisible',
+  'textColor',
+  'textBold',
+  'textItalic',
+  'textPosition',
+  'type',
+  // Injected by editable-layers draw modes / legacy commit — never KV-editable.
+  'shape',
+  'index',
+])
+
+/** Editable subset of full geometry properties for the KV editor. */
+export function getEditablePropertiesFromFull(
+  properties: Record<string, unknown>,
+): Record<string, unknown> {
+  const editable: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(properties)) {
+    if (!SYSTEM_KEYS.has(key)) editable[key] = value
+  }
+  return editable
+}
+
+export const EDIT_PROPERTIES_ACTION_LABELS = {
+  editProperties: 'Edit properties',
+  keyPlaceholder: 'Key',
+  valuePlaceholder: 'Value',
+  addRow: 'Add property',
+  removeRow: 'Remove property',
+  emptyKeyError: 'Key is required',
+  duplicateKeyError: 'Duplicate key',
+  systemKeyError: 'Reserved key',
+} as const
+
+export interface EditPropertiesActionLabels {
+  editProperties?: string
+  keyPlaceholder?: string
+  valuePlaceholder?: string
+  addRow?: string
+  removeRow?: string
+  emptyKeyError?: string
+  duplicateKeyError?: string
+  systemKeyError?: string
+}
+
+export interface EditPropertiesActionProps {
+  /** Editable properties — the controller already excludes system keys. */
+  properties: Record<string, unknown>
+  disabled?: boolean
+  labels?: EditPropertiesActionLabels
+  /** Commits a full replacement of the editable properties. */
+  onEditProperties: (draft: Record<string, unknown>) => void
+  /**
+   * Element to anchor the popover to (e.g. the toolbar Paper, so it spans the
+   * full bar). Defaults to the action button itself.
+   */
+  anchorRef?: RefObject<HTMLElement | null>
+  /**
+   * True while the mutually-exclusive Label popover is open — force-closes
+   * (discards) this one, per the "one popover at a time" rule.
+   */
+  forceClose?: boolean
+  /** Notified on open/close, so a sibling popover can enforce mutual exclusion. */
+  onOpenChange?: (open: boolean) => void
+  /**
+   * Identity of the current selection (e.g. the selected ids, joined). A
+   * change while the popover is open always discards — by the time this is
+   * noticed, `onEditProperties` has already rebound to the new selection, so
+   * a "commit" would silently edit the wrong geometry.
+   */
+  selectionKey?: string
+}
+
+interface EditPropertiesRow {
+  uid: number
+  key: string
+  value: string
+  /** Raw original value, so an unedited row commits with its original type. */
+  originalValue: unknown
+}
+
+type Labels = Required<EditPropertiesActionLabels>
+
+/**
+ * Renders a property value for the KV editor's text input: strings pass
+ * through, everything else (numbers, booleans, objects/arrays) is
+ * JSON-stringified so it round-trips through a single-line input. Mirrors
+ * `displayPropertyValue` in `@carto/ps-react-maps`.
+ */
+function displayValue(value: unknown): string {
+  if (typeof value === 'string') return value
+  if (value === undefined) return ''
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string -- `JSON.stringify` only returns `undefined` for functions/symbols, the last resort below.
+    return JSON.stringify(value) ?? String(value)
+  } catch {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string -- circular reference or similar: best-effort fallback, still a string.
+    return String(value)
+  }
+}
+
+/**
+ * If the draft string still matches the original value's display form, keeps
+ * the original (typed) value; otherwise the edit wins and commits as a
+ * string.
+ */
+function resolveValue(originalValue: unknown, trimmedValue: string): unknown {
+  if (
+    originalValue !== undefined &&
+    displayValue(originalValue) === trimmedValue
+  ) {
+    return originalValue
+  }
+  return trimmedValue
+}
+
+/**
+ * Freeform KV rows from the editable properties bag. Map label / presentation
+ * live in LabelAction — not as a locked `text` row here.
+ */
+function buildInitialRows(
+  properties: Record<string, unknown>,
+): EditPropertiesRow[] {
+  const rows: EditPropertiesRow[] = []
+  let uid = 0
+  for (const [key, value] of Object.entries(properties)) {
+    rows.push({
+      uid: uid++,
+      key,
+      value: displayValue(value),
+      originalValue: value,
+    })
+  }
+  return rows
+}
+
+/**
+ * Keys that are empty (post-trim), reserved, or duplicated block committing
+ * the whole draft — the offending rows show an inline error.
+ */
+function computeErrors(
+  rows: EditPropertiesRow[],
+  labels: Labels,
+): Map<number, string> {
+  const counts = new Map<string, number>()
+  for (const row of rows) {
+    const trimmed = row.key.trim()
+    if (!trimmed) continue
+    counts.set(trimmed, (counts.get(trimmed) ?? 0) + 1)
+  }
+
+  const errors = new Map<number, string>()
+  for (const row of rows) {
+    const trimmed = row.key.trim()
+    if (!trimmed) {
+      errors.set(row.uid, labels.emptyKeyError)
+    } else if (SYSTEM_KEYS.has(trimmed)) {
+      errors.set(row.uid, labels.systemKeyError)
+    } else if ((counts.get(trimmed) ?? 0) > 1) {
+      errors.set(row.uid, labels.duplicateKeyError)
+    }
+  }
+  return errors
+}
+
+/** Commit merge (A): trims keys/values. */
+function buildDraft(rows: EditPropertiesRow[]): Record<string, unknown> {
+  const draft: Record<string, unknown> = {}
+  for (const row of rows) {
+    const trimmedKey = row.key.trim()
+    if (!trimmedKey) continue
+    draft[trimmedKey] = resolveValue(row.originalValue, row.value.trim())
+  }
+  return draft
+}
+
+/**
+ * Edit properties action: button + anchored popover (layout B) with a
+ * scrollable freeform key/value list. Map label / presentation live in
+ * LabelAction — not here.
+ *
+ * Close rules: outside click commits only a valid draft (an invalid one
+ * keeps the popover open with its errors); Escape always discards; Enter
+ * never closes it (it only moves focus or appends a row).
+ */
+export function EditPropertiesAction({
+  properties,
+  disabled = false,
+  labels,
+  onEditProperties,
+  anchorRef,
+  forceClose = false,
+  onOpenChange,
+  selectionKey,
+}: EditPropertiesActionProps): JSX.Element {
+  const committedRef = useRef(false)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [anchorWidth, setAnchorWidth] = useState<number>()
+  const [rows, setRows] = useState<EditPropertiesRow[]>([])
+  const nextUidRef = useRef(0)
+  // Stable across renders (unlike an inline `.map()` ref callback), so typing
+  // in one row doesn't re-attach every row's ref and steal focus.
+  const nodeRefs = useRef(new Map<string, HTMLInputElement | null>())
+  // A row about to mount (popover just opened, or a row was just added) that
+  // should grab focus once its input attaches — checked (and cleared) by
+  // `setNodeRef` itself, so it fires exactly once, on mount, like
+  // `LabelAction`'s `focusOnMount`. A `useEffect` would run too late: MUI's
+  // `Modal` already auto-focuses its own paper by then.
+  const pendingMountFocusRef = useRef<{
+    uid: number
+    field: 'key' | 'value'
+  } | null>(null)
+
+  const editing = Boolean(anchorEl)
+  const mergedLabels: Labels = useMemo(
+    () => ({ ...EDIT_PROPERTIES_ACTION_LABELS, ...labels }),
+    [labels],
+  )
+  const errors = useMemo(
+    () => computeErrors(rows, mergedLabels),
+    [rows, mergedLabels],
+  )
+
+  const setNodeRef =
+    (uid: number, field: 'key' | 'value') =>
+    (node: HTMLInputElement | null) => {
+      nodeRefs.current.set(`${uid}:${field}`, node)
+      const pending = pendingMountFocusRef.current
+      if (node && pending?.uid === uid && pending.field === field) {
+        node.focus()
+        pendingMountFocusRef.current = null
+      }
+    }
+
+  const openEdit = (button: HTMLElement) => {
+    committedRef.current = false
+    const initialRows = buildInitialRows(properties)
+    nextUidRef.current = initialRows.length
+    const firstRow = initialRows[0]
+    pendingMountFocusRef.current = firstRow
+      ? { uid: firstRow.uid, field: 'key' }
+      : null
+    setRows(initialRows)
+    const anchor = anchorRef?.current ?? button
+    setAnchorWidth(anchor.clientWidth)
+    setAnchorEl(anchor)
+    onOpenChange?.(true)
+  }
+
+  const commitValid = () => {
+    if (committedRef.current) return
+    committedRef.current = true
+    onEditProperties(buildDraft(rows))
+    setAnchorEl(null)
+    onOpenChange?.(false)
+  }
+
+  const discard = () => {
+    if (committedRef.current) return
+    committedRef.current = true
+    setAnchorEl(null)
+    onOpenChange?.(false)
+  }
+
+  const handlePopoverClose = (
+    _event: unknown,
+    reason: 'backdropClick' | 'escapeKeyDown',
+  ) => {
+    if (reason === 'escapeKeyDown') {
+      discard()
+      return
+    }
+    // Outside click: an invalid draft keeps the popover open with its errors.
+    if (errors.size > 0) return
+    commitValid()
+  }
+
+  // Opening Label always discards this popover, regardless of draft validity
+  // — the one-popover-at-a-time rule.
+  const handleForceClose = useEffectEvent(() => {
+    if (anchorEl) discard()
+  })
+  useEffect(() => {
+    if (forceClose) handleForceClose()
+  }, [forceClose])
+
+  // The selection changing while open always discards, never commits: by the
+  // time this effect runs, `onEditProperties` has already rebound to the NEW
+  // selection (same render that changed `selectionKey`), so a "commit" here
+  // would silently edit the wrong geometry.
+  const prevSelectionKeyRef = useRef(selectionKey)
+  const handleSelectionChange = useEffectEvent(() => {
+    if (anchorEl) discard()
+  })
+  useEffect(() => {
+    if (prevSelectionKeyRef.current !== selectionKey) {
+      prevSelectionKeyRef.current = selectionKey
+      handleSelectionChange()
+    }
+  }, [selectionKey])
+
+  const updateRow = (
+    uid: number,
+    patch: Partial<Pick<EditPropertiesRow, 'key' | 'value'>>,
+  ) => {
+    setRows((current) =>
+      current.map((row) => (row.uid === uid ? { ...row, ...patch } : row)),
+    )
+  }
+
+  const removeRow = (uid: number) => {
+    setRows((current) => current.filter((r) => r.uid !== uid))
+  }
+
+  const addRow = () => {
+    const uid = nextUidRef.current++
+    pendingMountFocusRef.current = { uid, field: 'key' }
+    setRows((current) => [
+      ...current,
+      { uid, key: '', value: '', originalValue: undefined },
+    ])
+  }
+
+  const handleKeyFieldKeyDown =
+    (row: EditPropertiesRow) => (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        nodeRefs.current.get(`${row.uid}:value`)?.focus()
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        discard()
+      }
+    }
+
+  const handleValueFieldKeyDown =
+    (row: EditPropertiesRow) => (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        const index = rows.findIndex((r) => r.uid === row.uid)
+        const isLast = index === rows.length - 1
+        if (isLast) {
+          if (!errors.has(row.uid)) addRow()
+        } else {
+          nodeRefs.current.get(`${rows[index + 1]!.uid}:key`)?.focus()
+        }
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        discard()
+      }
+    }
+
+  return (
+    <>
+      <LassoToolbarButtonUI
+        label={mergedLabels.editProperties}
+        active={editing}
+        disabled={disabled}
+        onClick={(event) => openEdit(event.currentTarget)}
+        icon={<DataObjectOutlined sx={{ fontSize: ICON_SIZE }} />}
+      />
+
+      <Popover
+        open={editing}
+        anchorEl={anchorEl}
+        onClose={handlePopoverClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        slotProps={{
+          paper: { sx: { width: anchorWidth, minWidth: 260 } },
+        }}
+      >
+        <Box sx={{ px: 1.5, py: 1 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1,
+              maxHeight: 280,
+              overflowY: 'auto',
+            }}
+          >
+            {rows.map((row) => {
+              const error = errors.get(row.uid)
+              return (
+                <Box
+                  key={row.uid}
+                  sx={{ display: 'flex', flexDirection: 'column', gap: 0.25 }}
+                >
+                  <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
+                    <TextField
+                      inputRef={setNodeRef(row.uid, 'key')}
+                      size='small'
+                      variant='outlined'
+                      placeholder={mergedLabels.keyPlaceholder}
+                      value={row.key}
+                      error={!!error}
+                      onChange={(e) =>
+                        updateRow(row.uid, { key: e.target.value })
+                      }
+                      onKeyDown={handleKeyFieldKeyDown(row)}
+                      sx={{ flex: 1 }}
+                    />
+                    <TextField
+                      inputRef={setNodeRef(row.uid, 'value')}
+                      size='small'
+                      variant='outlined'
+                      placeholder={mergedLabels.valuePlaceholder}
+                      value={row.value}
+                      onChange={(e) =>
+                        updateRow(row.uid, { value: e.target.value })
+                      }
+                      onKeyDown={handleValueFieldKeyDown(row)}
+                      sx={{ flex: 1 }}
+                    />
+                    <IconButton
+                      aria-label={`${mergedLabels.removeRow}${row.key ? `: ${row.key}` : ''}`}
+                      size='small'
+                      onClick={() => removeRow(row.uid)}
+                    >
+                      <CloseOutlined sx={{ fontSize: ICON_SIZE }} />
+                    </IconButton>
+                  </Box>
+                  {error && (
+                    <Typography
+                      variant='caption'
+                      color='error'
+                      sx={{ pl: 0.5 }}
+                    >
+                      {error}
+                    </Typography>
+                  )}
+                </Box>
+              )
+            })}
+
+            <Button
+              size='small'
+              startIcon={<AddOutlined sx={{ fontSize: ICON_SIZE }} />}
+              onClick={addRow}
+              sx={{ justifyContent: 'flex-start', alignSelf: 'flex-start' }}
+            >
+              {mergedLabels.addRow}
+            </Button>
+          </Box>
+        </Box>
+      </Popover>
+    </>
+  )
+}

package/src/components/lasso-tool/toolbar/actions/fill-action.tsx

@@ -0,0 +1,55 @@
+import { OpacityOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import type { LassoDrawFill } from '../../types'
+import { ICON_SIZE } from '../styles'
+import { ActionMenu } from './action-menu'
+
+export const FILL_ACTION_LABELS = {
+  tooltip: 'Fill',
+  options: {
+    filled: 'Filled',
+    opacity: 'Opacity',
+    none: 'None',
+  },
+} as const
+
+const FILL_VALUES: LassoDrawFill[] = ['filled', 'opacity', 'none']
+
+export interface FillActionProps {
+  value: LassoDrawFill
+  disabled?: boolean
+  /**
+   * Disables just the `none` option — set it when the stroke is already
+   * `none`, since the store refuses to make both invisible at once.
+   */
+  disableNone?: boolean
+  labels?: {
+    tooltip?: string
+    options?: Partial<Record<LassoDrawFill, string>>
+  }
+  onChange: (value: LassoDrawFill) => void
+}
+
+/** Fill picker for `draw` geometries: filled / opacity / none. */
+export function FillAction({
+  value,
+  disabled = false,
+  disableNone = false,
+  labels,
+  onChange,
+}: FillActionProps): JSX.Element {
+  return (
+    <ActionMenu
+      label={labels?.tooltip ?? FILL_ACTION_LABELS.tooltip}
+      icon={<OpacityOutlined sx={{ fontSize: ICON_SIZE }} />}
+      disabled={disabled}
+      value={value}
+      options={FILL_VALUES.map((fill) => ({
+        value: fill,
+        label: labels?.options?.[fill] ?? FILL_ACTION_LABELS.options[fill],
+        disabled: fill === 'none' && disableNone,
+      }))}
+      onChange={onChange}
+    />
+  )
+}

package/src/components/lasso-tool/toolbar/actions/intersect-action.tsx

@@ -0,0 +1,33 @@
+import { JoinInnerOutlined } from '@mui/icons-material'
+import type { JSX } from 'react'
+import { LassoToolbarButtonUI } from '../button'
+import { ICON_SIZE } from '../styles'
+
+export const INTERSECT_ACTION_LABELS = {
+  intersect: 'Intersect geometries',
+} as const
+
+export interface IntersectActionProps {
+  disabled?: boolean
+  label?: string
+  onIntersect: () => void
+}
+
+/**
+ * Replaces the selection with its common area. Only meaningful with 2+
+ * overlapping geometries selected.
+ */
+export function IntersectAction({
+  disabled = false,
+  label,
+  onIntersect,
+}: IntersectActionProps): JSX.Element {
+  return (
+    <LassoToolbarButtonUI
+      label={label ?? INTERSECT_ACTION_LABELS.intersect}
+      disabled={disabled}
+      onClick={onIntersect}
+      icon={<JoinInnerOutlined sx={{ fontSize: ICON_SIZE }} />}
+    />
+  )
+}