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

package/src/components/lasso-tool/geometry-toolbar.tsx

@@ -0,0 +1,158 @@
+import { useRef, useState, type JSX } from 'react'
+import type { LassoGeometryToolbarUIProps } from './types'
+import { LassoToolbarUI } from './toolbar'
+import {
+  LassoGeometryToolbarProvider,
+  type LassoGeometryToolbarContextValue,
+} from './toolbar/context'
+import {
+  ConnectedColorAction,
+  ConnectedDeleteAction,
+  ConnectedDuplicateAction,
+  ConnectedEditGeometryAction,
+  ConnectedEditPropertiesAction,
+  ConnectedFillAction,
+  ConnectedIntersectAction,
+  ConnectedLabelAction,
+  ConnectedLockAction,
+  ConnectedSplitAction,
+  ConnectedStrokeAction,
+  ConnectedSubtractAction,
+  ConnectedToggleTypeAction,
+  ConnectedUnionAction,
+} from './toolbar/connected'
+
+/**
+ * Shell for the contextual toolbar of a lasso selection: the floating `Paper`,
+ * plus the state every action needs published on a context. **Which actions it
+ * has is the consumer's call** — list them as children, in the order you want:
+ *
+ * ```tsx
+ * <LassoTools.GeometryToolbar mapId='map1'>
+ *   {(props) => (
+ *     <LassoGeometryToolbarUI {...props}>
+ *       <LassoGeometryToolbarUI.Color />
+ *       <LassoGeometryToolbarUI.Label />
+ *       <LassoGeometryToolbarUI.Divider />
+ *       <LassoGeometryToolbarUI.Delete />
+ *     </LassoGeometryToolbarUI>
+ *   )}
+ * </LassoTools.GeometryToolbar>
+ * ```
+ *
+ * Same contract as widgets-v2: the actions take no data props (they read the
+ * context) and each one renders nothing when its handler is missing, so a
+ * composition can list every action safely. Pre-composed toolbars are
+ * application-level code and live outside this library — see
+ * `apps/storybook/stories/modules/lasso/geometry-toolbar.tsx` for the canonical
+ * example, which reproduces the full CARTO design.
+ *
+ * For a toolbar outside this shell, compose `LassoToolbarUI` with the
+ * prop-driven actions from `lasso-tool/toolbar` instead.
+ */
+export function LassoGeometryToolbarUI({
+  type,
+  label,
+  locked = false,
+  selectionCount = 1,
+  anyLocked,
+  style,
+  defaultTextColor,
+  onToggleType,
+  onRename,
+  onSetTextPresentation,
+  onToggleLock,
+  onDelete,
+  onSetStyle,
+  onEditGeometry,
+  editingGeometry = false,
+  onUnion,
+  splittable = false,
+  onSplit,
+  onSubtract,
+  onIntersect,
+  onDuplicate,
+  selectedIds,
+  properties,
+  onEditProperties,
+  forceTextVisible,
+  labels,
+  PaperProps,
+  children,
+}: LassoGeometryToolbarUIProps): JSX.Element {
+  const paperRef = useRef<HTMLDivElement>(null)
+  const [openPopoverId, setOpenPopoverId] = useState<
+    'label' | 'editProperties' | null
+  >(null)
+
+  // With any locked geometry in the selection, every action but the lock
+  // toggle is disabled (single-selection: anyLocked === locked).
+  const disabled = anyLocked ?? locked
+
+  const value: LassoGeometryToolbarContextValue = {
+    type,
+    label,
+    locked,
+    selectionCount,
+    anyLocked,
+    style,
+    defaultTextColor,
+    disabled,
+    // Single-target actions are also unavailable on a multi-selection.
+    singleOnly: disabled || selectionCount > 1,
+    // Style pickers only make sense for draw geometries with a style handler
+    // (the controller omits `style` when the selection mixes types).
+    showStyle: type === 'draw' && !!style && !!onSetStyle,
+    editingGeometry,
+    labels,
+    anchorRef: paperRef,
+    splittable,
+    onToggleType,
+    onRename,
+    onSetTextPresentation,
+    onToggleLock,
+    onDelete,
+    onSetStyle,
+    onEditGeometry,
+    onUnion,
+    onSplit,
+    onSubtract,
+    onIntersect,
+    onDuplicate,
+    selectedIds,
+    properties,
+    onEditProperties,
+    forceTextVisible,
+    openPopoverId,
+    onOpenPopoverChange: (id, open) => {
+      setOpenPopoverId((current) => {
+        if (open) return id
+        return current === id ? null : current
+      })
+    },
+  }
+
+  return (
+    <LassoToolbarUI ref={paperRef} PaperProps={PaperProps}>
+      <LassoGeometryToolbarProvider value={value}>
+        {children}
+      </LassoGeometryToolbarProvider>
+    </LassoToolbarUI>
+  )
+}
+
+LassoGeometryToolbarUI.Color = ConnectedColorAction
+LassoGeometryToolbarUI.Fill = ConnectedFillAction
+LassoGeometryToolbarUI.Stroke = ConnectedStrokeAction
+LassoGeometryToolbarUI.EditGeometry = ConnectedEditGeometryAction
+LassoGeometryToolbarUI.Label = ConnectedLabelAction
+LassoGeometryToolbarUI.EditProperties = ConnectedEditPropertiesAction
+LassoGeometryToolbarUI.ToggleType = ConnectedToggleTypeAction
+LassoGeometryToolbarUI.Union = ConnectedUnionAction
+LassoGeometryToolbarUI.Split = ConnectedSplitAction
+LassoGeometryToolbarUI.Subtract = ConnectedSubtractAction
+LassoGeometryToolbarUI.Intersect = ConnectedIntersectAction
+LassoGeometryToolbarUI.Duplicate = ConnectedDuplicateAction
+LassoGeometryToolbarUI.Lock = ConnectedLockAction
+LassoGeometryToolbarUI.Delete = ConnectedDeleteAction
+LassoGeometryToolbarUI.Divider = LassoToolbarUI.Divider

package/src/components/lasso-tool/icons.tsx

@@ -0,0 +1,193 @@
+import type { SVGProps } from 'react'
+
+export function DrawPolygonIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M4 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm16 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm-2.829 1a2.996 2.996 0 0 0 0 2H6.829a2.995 2.995 0 0 0 0-2h10.342Zm-2.463-5.707 3.998 4a3.013 3.013 0 0 0-1.414 1.414l-4-3.999a3.014 3.014 0 0 0 1.31-1.214l.106-.201ZM2.998 6.829a2.995 2.995 0 0 0 2.002 0v10.342a2.993 2.993 0 0 0-2.002 0V6.83ZM12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm1.84-3.919c.464.483 1.09.81 1.79.896l-1.47 2.94a2.992 2.992 0 0 0-1.79-.894l1.47-2.942ZM16 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm9.171.998a2.994 2.994 0 0 0 0 2.002H6.829a2.995 2.995 0 0 0 0-2.002h6.342Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function DrawSquareIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M4 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm16 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm-2.829 1a2.993 2.993 0 0 0-.17.974l-.001.052.007.183a3 3 0 0 0 .164.79H6.829a2.995 2.995 0 0 0 0-2h10.342ZM2.998 6.828a2.995 2.995 0 0 0 2.002 0V17.17a2.993 2.993 0 0 0-2.002 0V6.83Zm16.001 0a2.995 2.995 0 0 0 2 0V17.17a2.993 2.993 0 0 0-2 0V6.829ZM20 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm13.171.998a2.991 2.991 0 0 0-.17.976L17 4.026l.007.183a3 3 0 0 0 .164.79H6.829a2.995 2.995 0 0 0 0-2H17.17Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function DrawCircleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function DrawLassoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M12 3c4.935 0 9 3.736 9 9l-.002.343-.012.668c-.012.438-.033.86-.062 1.266l-.05.597C20.498 18.767 19.267 21 17 21c-1.192 0-1.971-.341-2.988-1.122l-.472-.375c-.401-.319-.64-.473-.888-.566a4.938 4.938 0 0 0-.415-.13l-.34-.085-.398-.086-.456-.086-.66-.111-1.708-.273a9.112 9.112 0 0 1-.952-.206C5.46 17.301 3 14.954 3 12.015c0-1.508.485-2.995 1.436-4.458.355.585.906 1.04 1.562 1.272C5.328 9.916 5 10.977 5 12.015c0 1.889 1.78 3.588 3.282 4.025l.085.023.345.076.517.092 1.619.257.583.1.518.098.237.05.433.103c.272.07.512.143.73.224.434.161.783.373 1.235.718l.457.362c.806.646 1.24.857 1.959.857.893 0 1.63-1.518 1.895-4.45l.045-.585c.013-.2.024-.407.033-.62l.02-.655c.005-.224.007-.454.007-.69 0-4.12-3.133-7-7-7a1 1 0 1 1 0-2ZM7 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function SelectToolIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='m10.083 19.394.057.113a1 1 0 0 0 1.72.007l2.869-4.786 4.786-2.87a1 1 0 0 0-.121-1.777l-14-6c-.83-.356-1.669.483-1.313 1.313l6.002 14ZM6.905 6.904l9.903 4.244-3.322 1.995-.102.069a1 1 0 0 0-.242.274l-1.992 3.321-4.245-9.903Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/** Freehand-selection glyph: the lasso trace with a selection cursor. */
+export function LassoSelectIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <g transform='scale(0.75)'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M12 3c4.935 0 9 3.736 9 9l-.002.343-.012.668c-.012.438-.033.86-.062 1.266l-.05.597C20.498 18.767 19.267 21 17 21c-1.192 0-1.971-.341-2.988-1.122l-.472-.375c-.401-.319-.64-.473-.888-.566a4.938 4.938 0 0 0-.415-.13l-.34-.085-.398-.086-.456-.086-.66-.111-1.708-.273a9.112 9.112 0 0 1-.952-.206C5.46 17.301 3 14.954 3 12.015c0-1.508.485-2.995 1.436-4.458.355.585.906 1.04 1.562 1.272C5.328 9.916 5 10.977 5 12.015c0 1.889 1.78 3.588 3.282 4.025l.085.023.345.076.517.092 1.619.257.583.1.518.098.237.05.433.103c.272.07.512.143.73.224.434.161.783.373 1.235.718l.457.362c.806.646 1.24.857 1.959.857.893 0 1.63-1.518 1.895-4.45l.045-.585c.013-.2.024-.407.033-.62l.02-.655c.005-.224.007-.454.007-.69 0-4.12-3.133-7-7-7a1 1 0 1 1 0-2ZM7 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'
+          fill='currentColor'
+        />
+      </g>
+      <path
+        transform='translate(12.5 11.5) scale(0.48)'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='m10.083 19.394.057.113a1 1 0 0 0 1.72.007l2.869-4.786 4.786-2.87a1 1 0 0 0-.121-1.777l-14-6c-.83-.356-1.669.483-1.313 1.313l6.002 14ZM6.905 6.904l9.903 4.244-3.322 1.995-.102.069a1 1 0 0 0-.242.274l-1.992 3.321-4.245-9.903Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/**
+ * Union/join glyph: two rings with the overlap filled by a dot grid.
+ * From Figma node 6985:35371.
+ *
+ * The Figma glyph spans 14.25 of the 24 units; the rest of this set spans 20, so
+ * it read visibly smaller in the toolbar. Scaled about its own center
+ * ((4.5+18.75)/2, (5.25+18.75)/2) by 20/14.25 ≈ 1.4 to match them.
+ */
+export function UnionIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        transform='translate(12 12) scale(1.4) translate(-11.625 -12)'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M13.5 5.25C16.3995 5.25 18.75 7.60051 18.75 10.5C18.75 13.0426 16.9425 15.163 14.5424 15.6465C13.7221 17.4758 11.8848 18.75 9.75 18.75C6.85051 18.75 4.5 16.3995 4.5 13.5C4.5 10.9574 6.30747 8.83696 8.70762 8.35348C9.52794 6.52422 11.3652 5.25 13.5 5.25ZM8.26868 10.0539L8.21987 10.0754C6.91155 10.6608 6 11.974 6 13.5C6 15.5711 7.67893 17.25 9.75 17.25C10.9981 17.25 12.1038 16.6402 12.7855 15.7024C10.2239 15.3531 8.25 13.1571 8.25 10.5C8.25 10.3498 8.25631 10.201 8.26868 10.0539ZM9.82552 9.75075L9.80431 9.86051C9.7686 10.0683 9.75 10.282 9.75 10.5C9.75 12.5457 11.3881 14.2088 13.4241 14.2492C13.4742 14.0072 13.5 13.7566 13.5 13.5C13.5 11.4542 11.8617 9.79097 9.82552 9.75075ZM13.5 6.75C12.2519 6.75 11.1462 7.35976 10.4645 8.29764C13.0261 8.64685 15 10.8429 15 13.5C15 13.6502 14.9937 13.799 14.9813 13.9461C16.3152 13.3724 17.25 12.0454 17.25 10.5C17.25 8.42893 15.5711 6.75 13.5 6.75ZM12.75 13.125C12.96 13.125 13.125 13.29 13.125 13.5C13.125 13.71 12.96 13.875 12.75 13.875C12.54 13.875 12.375 13.71 12.375 13.5C12.375 13.29 12.54 13.125 12.75 13.125ZM11.625 12.75C11.835 12.75 12 12.915 12 13.125C12 13.335 11.835 13.5 11.625 13.5C11.415 13.5 11.25 13.335 11.25 13.125C11.25 12.915 11.415 12.75 11.625 12.75ZM12.75 12C12.96 12 13.125 12.165 13.125 12.375C13.125 12.585 12.96 12.75 12.75 12.75C12.54 12.75 12.375 12.585 12.375 12.375C12.375 12.165 12.54 12 12.75 12ZM11.625 11.625C11.835 11.625 12 11.79 12 12C12 12.21 11.835 12.375 11.625 12.375C11.415 12.375 11.25 12.21 11.25 12C11.25 11.79 11.415 11.625 11.625 11.625ZM10.5 11.25C10.71 11.25 10.875 11.415 10.875 11.625C10.875 11.835 10.71 12 10.5 12C10.29 12 10.125 11.835 10.125 11.625C10.125 11.415 10.29 11.25 10.5 11.25ZM11.625 10.5C11.835 10.5 12 10.665 12 10.875C12 11.085 11.835 11.25 11.625 11.25C11.415 11.25 11.25 11.085 11.25 10.875C11.25 10.665 11.415 10.5 11.625 10.5ZM10.5 10.125C10.71 10.125 10.875 10.29 10.875 10.5C10.875 10.71 10.71 10.875 10.5 10.875C10.29 10.875 10.125 10.71 10.125 10.5C10.125 10.29 10.29 10.125 10.5 10.125Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/** Spatial-mask glyph (circle with horizontal "globe" stripes) for the lasso
+ * geometry toolbar's mask/draw toggle. From Figma node 5960:14347. */
+export function SpatialMaskIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      // The exported glyph filled its 15×15 box edge to edge, so next to the
+      // MUI icons (whose glyphs leave a margin inside 24×24) it rendered ~20%
+      // bigger. Same box and same 20-unit glyph as the rest of the set now.
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        transform='translate(12 12) scale(1.33333) translate(-7.5 -7.5)'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM13.5 7.5C13.5 10.8137 10.8137 13.5 7.5 13.5C6.44531 13.5 5.45418 13.2279 4.59299 12.75H6.85607C7.29596 12.3013 7.67991 11.7975 7.99663 11.25H2.81597C2.62675 11.014 2.45501 10.7633 2.30269 10.5H8.37593C8.58402 10.0237 8.74407 9.52171 8.84997 9H1.68903C1.62614 8.75568 1.57826 8.50533 1.54642 8.25H8.96297C8.98746 8.00332 9 7.75312 9 7.5C9 7.24688 8.98746 6.99668 8.96297 6.75H1.54642C1.57826 6.49467 1.62614 6.24432 1.68903 6H8.84997C8.74407 5.47829 8.58402 4.97625 8.37593 4.5H2.30269C2.45501 4.2367 2.62675 3.98604 2.81597 3.75H7.99663C7.67991 3.20248 7.29596 2.69872 6.85607 2.25H4.59299C5.45418 1.77213 6.44531 1.5 7.5 1.5C10.8137 1.5 13.5 4.18629 13.5 7.5Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+/** "Aa" glyph for the lasso geometry toolbar's rename action. From Figma node
+ * 5960:14347. */
+export function TextAaIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      // Same reason as SpatialMaskIcon: the exported box was the glyph's own
+      // bounding box, so it rendered edge to edge. 20 units wide inside 24×24.
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        transform='translate(12 12) scale(1.2597) translate(-7.9385 -5.34375)'
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M5.4 0L9.18 10.5H7.56L6.72 8.085H2.475L1.62 10.5H0L3.795 0H5.4ZM4.605 1.95C4.515 2.31 4.395 2.705 4.245 3.135L2.955 6.705H6.24L4.965 3.135C4.785 2.645 4.665 2.25 4.605 1.95ZM12.9247 2.5875C13.3083 2.5875 13.6514 2.6203 13.9542 2.68591C14.257 2.75152 14.5649 2.87769 14.8778 3.06442C15.1907 3.25114 15.4355 3.55143 15.6121 3.96526C15.7887 4.37909 15.877 4.88881 15.877 5.49442V10.5058H14.363V9.83965C13.818 10.4049 13.1114 10.6875 12.2434 10.6875C11.4258 10.6875 10.7622 10.4629 10.2525 10.0138C9.74275 9.5646 9.48789 8.92619 9.48789 8.09853C9.48789 7.26077 9.77555 6.62488 10.3509 6.19086C10.9262 5.75685 11.6277 5.53984 12.4554 5.53984C13.2124 5.53984 13.8483 5.69124 14.363 5.99404V5.57012C14.363 4.99479 14.2318 4.586 13.9694 4.34376C13.707 4.10152 13.2881 3.9804 12.7127 3.9804C11.8649 3.9804 11.1281 4.21255 10.5023 4.67685L10.0329 3.38993C10.8101 2.85498 11.7741 2.5875 12.9247 2.5875ZM12.7127 6.90245C12.2081 6.90245 11.7968 7.00086 11.4788 7.19769C11.1609 7.39451 11.0019 7.69479 11.0019 8.09853C11.0019 8.47199 11.1331 8.7647 11.3955 8.97666C11.658 9.18862 12.0365 9.2946 12.5311 9.2946C13.2578 9.2946 13.8684 9.01703 14.363 8.46189V7.28096C13.8886 7.02862 13.3385 6.90245 12.7127 6.90245Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}