← 全部 UI 规范

组件契约

figure-canvas

可复用的图形视口,支持缩放、检查控件和可选的水平拖动旋转。

版本
v0.1.0

Props

名称类型取值默认值
initialZoomnumber—1.15
orbitEnabledboolean—false
inspectionEnabledboolean—false
labelstring——
zoomInLabelstring——
zoomOutLabelstring——
resetLabelstring——
previousLabelstring——
nextLabelstring——
rotateLabelstring——

事件

名称载荷条件
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.

Token

colors
spacing
radius
font

状态机

初始状态: 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

无障碍

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
{
  "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