← Todos los specs UI

Contrato del componente

figure-canvas

Viewport reutilizable para figuras con zoom, controles de inspección y rotación horizontal opcional mediante arrastre.

Versión
v0.1.0

Props

NombreTipoValoresPredeterminado
initialZoomnumber—1.15
orbitEnabledboolean—false
inspectionEnabledboolean—false
labelstring——
zoomInLabelstring——
zoomOutLabelstring——
resetLabelstring——
previousLabelstring——
nextLabelstring——
rotateLabelstring——

Eventos

NombreCarga útilCondición
zoomChange{"zoom":{"type":"number"}}Fired after zoom in, zoom out or reset updates the SVG viewBox.
inspect{"direction":{"type":"enum","values":["previous","next"]}}Fired when an enabled inspection control is activated.
resetView—Fired when reset is activated while orbit controls are enabled; the host resets its figure-specific rotation.

Tokens

colors
spacing
radius
font

Máquina de estados

Estado inicial: ready

ready

ZOOM_IN
→ ready · Increase zoom by 0.25, capped at 2.5, Update the SVG viewBox around its original center, Announce the new zoom percentage politely
ZOOM_OUT
→ ready · Decrease zoom by 0.25, floored at 0.75, Update the SVG viewBox around its original center, Announce the new zoom percentage politely
RESET
→ ready · Restore 100% zoom, Dispatch figure-reset-view when orbit is enabled
INSPECT_PREVIOUS
→ ready · Dispatch ArrowLeft to the figure stage
INSPECT_NEXT
→ ready · Dispatch ArrowRight to the figure stage

Accesibilidad

controls
Use native buttons with localized accessible names and a labeled group.
keyboard
All controls are reachable and operable with standard button keyboard behavior.
zoomAnnouncement
Expose the current zoom percentage through a polite live output.
rotation
Explain horizontal drag rotation in the orbit hint and the figure stage accessible description. The host owns camera rotation, rebuilding its figure projection from the real model; reset restores its initial azimuth.
focus
Show a visible focus ring on every control.
JSON validado original
{
  "name": "figure-canvas",
  "version": "0.1.0",
  "props": {
    "initialZoom": {
      "type": "number",
      "default": 1.15
    },
    "orbitEnabled": {
      "type": "boolean",
      "default": false
    },
    "inspectionEnabled": {
      "type": "boolean",
      "default": false
    },
    "label": {
      "type": "string"
    },
    "zoomInLabel": {
      "type": "string"
    },
    "zoomOutLabel": {
      "type": "string"
    },
    "resetLabel": {
      "type": "string"
    },
    "previousLabel": {
      "type": "string"
    },
    "nextLabel": {
      "type": "string"
    },
    "rotateLabel": {
      "type": "string"
    }
  },
  "events": {
    "zoomChange": {
      "payload": {
        "zoom": {
          "type": "number"
        }
      },
      "condition": "Fired after zoom in, zoom out or reset updates the SVG viewBox."
    },
    "inspect": {
      "payload": {
        "direction": {
          "type": "enum",
          "values": [
            "previous",
            "next"
          ]
        }
      },
      "condition": "Fired when an enabled inspection control is activated."
    },
    "resetView": {
      "condition": "Fired when reset is activated while orbit controls are enabled; the host resets its figure-specific rotation."
    }
  },
  "tokens_used": {
    "colors": [],
    "spacing": [],
    "radius": [],
    "font": []
  },
  "state_machine": {
    "initial": "ready",
    "states": {
      "ready": {
        "on": {
          "ZOOM_IN": {
            "target": "ready",
            "actions": [
              "Increase zoom by 0.25, capped at 2.5",
              "Update the SVG viewBox around its original center",
              "Announce the new zoom percentage politely"
            ]
          },
          "ZOOM_OUT": {
            "target": "ready",
            "actions": [
              "Decrease zoom by 0.25, floored at 0.75",
              "Update the SVG viewBox around its original center",
              "Announce the new zoom percentage politely"
            ]
          },
          "RESET": {
            "target": "ready",
            "actions": [
              "Restore 100% zoom",
              "Dispatch figure-reset-view when orbit is enabled"
            ]
          },
          "INSPECT_PREVIOUS": {
            "target": "ready",
            "actions": [
              "Dispatch ArrowLeft to the figure stage"
            ]
          },
          "INSPECT_NEXT": {
            "target": "ready",
            "actions": [
              "Dispatch ArrowRight to the figure stage"
            ]
          }
        }
      }
    }
  },
  "a11y": {
    "controls": "Use native buttons with localized accessible names and a labeled group.",
    "keyboard": "All controls are reachable and operable with standard button keyboard behavior.",
    "zoomAnnouncement": "Expose the current zoom percentage through a polite live output.",
    "rotation": "Explain horizontal drag rotation in the orbit hint and the figure stage accessible description. The host owns camera rotation, rebuilding its figure projection from the real model; reset restores its initial azimuth.",
    "focus": "Show a visible focus ring on every control."
  }
}
ChiralFM