擴充 SDK

drawtonomy 擴充功能是透過 postMessage 與編輯器溝通的 iframe 代管網頁應用。SDK 提供具型別客戶端;dev-server 提供本機編輯器供您開發。

本頁是快速概覽。完整指南——資訊清單結構、功能清單、訊息協定——位於公開儲存庫:

➡ 擴充功能開發指南(日文)

快速開始

# 編輯器於 :3000
pnpm add -g @drawtonomy/dev-server
drawtonomy-dev-server

# 您的擴充功能於 :3001
cd my-extension && pnpm dev --port 3001

open "http://localhost:3000/?ext=http://localhost:3001/manifest.json"

最小擴充功能

my-extension/
  manifest.json
  index.html
  src/

manifest.json

{
  "id": "my-extension",
  "name": "My Extension",
  "version": "1.0.0",
  "entry": "./index.html",
  "capabilities": ["shapes:read", "shapes:write", "ui:panel"]
}

src/main.ts

import { ExtensionClient, createVehicle } from '@drawtonomy/sdk'

const client = new ExtensionClient()
await client.ready()

document.getElementById('add')!.addEventListener('click', async () => {
  await client.addShapes([createVehicle(0, 0, { templateId: 'sedan' })])
})

參考擴充功能

內建擴充功能是完整保真度的範例:

• ai-scene-generator — 自然語言與 OpenSCENARIO 場景生成。
• template-preview — 預覽形狀範本。
• exporter-playground — 對即時畫布測試匯出器。
• path-footprint-lab — 路徑足跡實驗。

另請參閱

• 擴充功能架構 — 為何使用 iframe 與 postMessage。
• @drawtonomy/sdk 概述 — 套件及其模組。