@drawtonomy/sdk 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.ja.md +143 -0
  2. package/README.md +57 -53
  3. package/dist/helpers.js +2 -2
  4. package/package.json +5 -2
package/README.ja.md ADDED
@@ -0,0 +1,143 @@
1
+ # @drawtonomy/sdk
2
+
3
+ drawtonomy エクステンション開発用SDK。
4
+
5
+ [English](README.md)
6
+
7
+ ## インストール
8
+
9
+ ```bash
10
+ npm install @drawtonomy/sdk
11
+ ```
12
+
13
+ ## クイックスタート
14
+
15
+ ### 1. マニフェストを作成
16
+
17
+ ```json
18
+ {
19
+ "id": "my-extension",
20
+ "name": "My Extension",
21
+ "version": "1.0.0",
22
+ "description": "何をするエクステンションか",
23
+ "author": { "name": "Your Name" },
24
+ "entry": "./index.html",
25
+ "capabilities": ["shapes:write", "shapes:read", "ui:panel"]
26
+ }
27
+ ```
28
+
29
+ ### 2. SDKを使ってエクステンションを実装
30
+
31
+ ```typescript
32
+ import { ExtensionClient, createVehicle, createLaneWithBoundaries } from '@drawtonomy/sdk'
33
+
34
+ const client = new ExtensionClient('my-extension')
35
+
36
+ // ホストとの接続を待つ
37
+ const init = await client.waitForInit()
38
+ console.log('Connected! Capabilities:', init.grantedCapabilities)
39
+
40
+ // 車両を追加
41
+ client.addShapes([
42
+ createVehicle(200, 300, { templateId: 'sedan', color: 'blue' })
43
+ ])
44
+
45
+ // レーンを一括作成
46
+ const laneShapes = createLaneWithBoundaries(
47
+ [{ x: 0, y: 0 }, { x: 500, y: 0 }],
48
+ [{ x: 0, y: 70 }, { x: 500, y: 70 }]
49
+ )
50
+ client.addShapes(laneShapes)
51
+
52
+ // 既存シェイプを読み取り
53
+ const vehicles = await client.requestShapes({ types: ['vehicle'] })
54
+
55
+ // 通知を表示
56
+ client.notify('完了しました', 'success')
57
+ ```
58
+
59
+ ### 3. 開発サーバーで起動
60
+
61
+ ```bash
62
+ npm run dev -- --port 3001
63
+ ```
64
+
65
+ ### 4. drawtonomyで読み込む
66
+
67
+ ブラウザで以下のURLにアクセス:
68
+
69
+ ```
70
+ https://drawtonomy.com?ext=http://localhost:3001/manifest.json
71
+ ```
72
+
73
+ ## API
74
+
75
+ ### ExtensionClient
76
+
77
+ | メソッド | 必要なCapability | 説明 |
78
+ |---------|-----------------|------|
79
+ | `waitForInit()` | - | ホストとの接続を待つ |
80
+ | `addShapes(shapes)` | `shapes:write` | シェイプを追加 |
81
+ | `updateShapes(updates)` | `shapes:write` | シェイプを更新 |
82
+ | `deleteShapes(ids)` | `shapes:write` | シェイプを削除 |
83
+ | `requestShapes(filter?)` | `shapes:read` | シェイプを読み取り |
84
+ | `requestSnapshot()` | `snapshot:read` | スナップショットを取得 |
85
+ | `requestViewport()` | `viewport:read` | ビューポート情報を取得 |
86
+ | `requestSelection()` | `selection:read` | 選択状態を取得 |
87
+ | `notify(message, level?)` | `ui:notify` | 通知を表示 |
88
+ | `resize(height, width?)` | `ui:panel` | パネルサイズを変更 |
89
+
90
+ ### ファクトリ関数
91
+
92
+ | 関数 | 説明 |
93
+ |------|------|
94
+ | `createPoint(x, y, options?)` | ポイントを作成 |
95
+ | `createLinestring(x, y, pointIds, options?)` | ラインストリングを作成 |
96
+ | `createLane(x, y, leftId, rightId, options?)` | レーンを作成 |
97
+ | `createLaneWithBoundaries(leftPts, rightPts, options?)` | レーン+境界を一括作成 |
98
+ | `createVehicle(x, y, options?)` | 車両を作成 |
99
+ | `createPedestrian(x, y, options?)` | 歩行者を作成 |
100
+ | `createRectangle(x, y, w, h, options?)` | 矩形を作成 |
101
+ | `createEllipse(x, y, w, h, options?)` | 楕円を作成 |
102
+ | `createText(x, y, text, options?)` | テキストを作成 |
103
+ | `createSnapshot(shapes)` | スナップショットを作成 |
104
+
105
+ ## デプロイ
106
+
107
+ エクステンションは任意のHTTPSホスティングサービスにデプロイできます。
108
+
109
+ ### GitHub Pages
110
+
111
+ `manifest.json`のCORSヘッダーは自動付与されるため設定不要。
112
+
113
+ ### Vercel
114
+
115
+ `vercel.json`:
116
+ ```json
117
+ {
118
+ "headers": [
119
+ {
120
+ "source": "/manifest.json",
121
+ "headers": [
122
+ { "key": "Access-Control-Allow-Origin", "value": "*" }
123
+ ]
124
+ }
125
+ ]
126
+ }
127
+ ```
128
+
129
+ ### Netlify
130
+
131
+ `_headers`:
132
+ ```
133
+ /manifest.json
134
+ Access-Control-Allow-Origin: *
135
+ ```
136
+
137
+ ### ローカル開発
138
+
139
+ Vite devサーバーはデフォルトでCORS許可済み。`localhost`はHTTPでも動作します。
140
+
141
+ ## ドキュメント
142
+
143
+ 詳細は https://github.com/kosuke55/drawtonomy/blob/main/docs/extensions.md を参照。
package/README.md CHANGED
@@ -1,112 +1,116 @@
1
1
  # @drawtonomy/sdk
2
2
 
3
- Drawtonomy エクステンション開発用SDK。
3
+ SDK for building drawtonomy extensions.
4
4
 
5
- ## インストール
5
+ [日本語](README.ja.md)
6
+
7
+ ## Install
6
8
 
7
9
  ```bash
8
10
  npm install @drawtonomy/sdk
9
11
  ```
10
12
 
11
- ## クイックスタート
13
+ ## Quick Start
12
14
 
13
- ### 1. マニフェストを作成
15
+ ### 1. Create a manifest
14
16
 
15
17
  ```json
16
18
  {
17
19
  "id": "my-extension",
18
20
  "name": "My Extension",
19
21
  "version": "1.0.0",
20
- "description": "何をするエクステンションか",
22
+ "description": "What this extension does",
21
23
  "author": { "name": "Your Name" },
22
24
  "entry": "./index.html",
23
25
  "capabilities": ["shapes:write", "shapes:read", "ui:panel"]
24
26
  }
25
27
  ```
26
28
 
27
- ### 2. SDKを使ってエクステンションを実装
29
+ ### 2. Build your extension with the SDK
28
30
 
29
31
  ```typescript
30
32
  import { ExtensionClient, createVehicle, createLaneWithBoundaries } from '@drawtonomy/sdk'
31
33
 
32
34
  const client = new ExtensionClient('my-extension')
33
35
 
34
- // ホストとの接続を待つ
36
+ // Wait for host connection
35
37
  const init = await client.waitForInit()
36
38
  console.log('Connected! Capabilities:', init.grantedCapabilities)
37
39
 
38
- // 車両を追加
40
+ // Add a vehicle
39
41
  client.addShapes([
40
42
  createVehicle(200, 300, { templateId: 'sedan', color: 'blue' })
41
43
  ])
42
44
 
43
- // レーンを一括作成
45
+ // Create a lane with boundaries
44
46
  const laneShapes = createLaneWithBoundaries(
45
47
  [{ x: 0, y: 0 }, { x: 500, y: 0 }],
46
48
  [{ x: 0, y: 70 }, { x: 500, y: 70 }]
47
49
  )
48
50
  client.addShapes(laneShapes)
49
51
 
50
- // 既存シェイプを読み取り
52
+ // Read existing shapes
51
53
  const vehicles = await client.requestShapes({ types: ['vehicle'] })
52
54
 
53
- // 通知を表示
54
- client.notify('完了しました', 'success')
55
+ // Show notification
56
+ client.notify('Done!', 'success')
55
57
  ```
56
58
 
57
- ### 3. 開発サーバーで起動
59
+ ### 3. Start dev server
58
60
 
59
61
  ```bash
62
+ # Terminal 1: drawtonomy
63
+ drawtonomy-dev-server
64
+
65
+ # Terminal 2: Your extension
60
66
  npm run dev -- --port 3001
61
67
  ```
62
68
 
63
- ### 4. Drawtonomyで読み込む
64
-
65
- ブラウザで以下のURLにアクセス:
69
+ ### 4. Open in browser
66
70
 
67
71
  ```
68
- https://drawtonomy.com?ext=http://localhost:3001/manifest.json
72
+ http://localhost:3000/?ext=http://localhost:3001/manifest.json
69
73
  ```
70
74
 
71
75
  ## API
72
76
 
73
77
  ### ExtensionClient
74
78
 
75
- | メソッド | 必要なCapability | 説明 |
76
- |---------|-----------------|------|
77
- | `waitForInit()` | - | ホストとの接続を待つ |
78
- | `addShapes(shapes)` | `shapes:write` | シェイプを追加 |
79
- | `updateShapes(updates)` | `shapes:write` | シェイプを更新 |
80
- | `deleteShapes(ids)` | `shapes:write` | シェイプを削除 |
81
- | `requestShapes(filter?)` | `shapes:read` | シェイプを読み取り |
82
- | `requestSnapshot()` | `snapshot:read` | スナップショットを取得 |
83
- | `requestViewport()` | `viewport:read` | ビューポート情報を取得 |
84
- | `requestSelection()` | `selection:read` | 選択状態を取得 |
85
- | `notify(message, level?)` | `ui:notify` | 通知を表示 |
86
- | `resize(height, width?)` | `ui:panel` | パネルサイズを変更 |
87
-
88
- ### ファクトリ関数
89
-
90
- | 関数 | 説明 |
91
- |------|------|
92
- | `createPoint(x, y, options?)` | ポイントを作成 |
93
- | `createLinestring(x, y, pointIds, options?)` | ラインストリングを作成 |
94
- | `createLane(x, y, leftId, rightId, options?)` | レーンを作成 |
95
- | `createLaneWithBoundaries(leftPts, rightPts, options?)` | レーン+境界を一括作成 |
96
- | `createVehicle(x, y, options?)` | 車両を作成 |
97
- | `createPedestrian(x, y, options?)` | 歩行者を作成 |
98
- | `createRectangle(x, y, w, h, options?)` | 矩形を作成 |
99
- | `createEllipse(x, y, w, h, options?)` | 楕円を作成 |
100
- | `createText(x, y, text, options?)` | テキストを作成 |
101
- | `createSnapshot(shapes)` | スナップショットを作成 |
102
-
103
- ## デプロイ
104
-
105
- エクステンションは任意のHTTPSホスティングサービスにデプロイできます。
79
+ | Method | Required Capability | Description |
80
+ |--------|-------------------|-------------|
81
+ | `waitForInit()` | - | Wait for host connection |
82
+ | `addShapes(shapes)` | `shapes:write` | Add shapes |
83
+ | `updateShapes(updates)` | `shapes:write` | Update shapes |
84
+ | `deleteShapes(ids)` | `shapes:write` | Delete shapes |
85
+ | `requestShapes(filter?)` | `shapes:read` | Read shapes |
86
+ | `requestSnapshot()` | `snapshot:read` | Get snapshot |
87
+ | `requestViewport()` | `viewport:read` | Get viewport info |
88
+ | `requestSelection()` | `selection:read` | Get selection state |
89
+ | `notify(message, level?)` | `ui:notify` | Show notification |
90
+ | `resize(height, width?)` | `ui:panel` | Resize panel |
91
+
92
+ ### Factory Functions
93
+
94
+ | Function | Description |
95
+ |----------|-------------|
96
+ | `createPoint(x, y, options?)` | Create a point |
97
+ | `createLinestring(x, y, pointIds, options?)` | Create a linestring |
98
+ | `createLane(x, y, leftId, rightId, options?)` | Create a lane |
99
+ | `createLaneWithBoundaries(leftPts, rightPts, options?)` | Create lane with boundaries |
100
+ | `createVehicle(x, y, options?)` | Create a vehicle |
101
+ | `createPedestrian(x, y, options?)` | Create a pedestrian |
102
+ | `createRectangle(x, y, w, h, options?)` | Create a rectangle |
103
+ | `createEllipse(x, y, w, h, options?)` | Create an ellipse |
104
+ | `createText(x, y, text, options?)` | Create text |
105
+ | `createSnapshot(shapes)` | Create a snapshot |
106
+
107
+ ## Deployment
108
+
109
+ Extensions can be deployed to any HTTPS hosting service.
106
110
 
107
111
  ### GitHub Pages
108
112
 
109
- `manifest.json`のCORSヘッダーは自動付与されるため設定不要。
113
+ CORS headers are included by default — no configuration needed.
110
114
 
111
115
  ### Vercel
112
116
 
@@ -132,10 +136,10 @@ https://drawtonomy.com?ext=http://localhost:3001/manifest.json
132
136
  Access-Control-Allow-Origin: *
133
137
  ```
134
138
 
135
- ### ローカル開発
139
+ ### Local Development
136
140
 
137
- Vite devサーバーはデフォルトでCORS許可済み。`localhost`はHTTPでも動作します。
141
+ Use `@drawtonomy/dev-server` for local development. See the [Extension Development Guide](https://github.com/kosuke55/drawtonomy/blob/main/docs/extensions.md) for details.
138
142
 
139
- ## ドキュメント
143
+ ## Documentation
140
144
 
141
- 詳細は https://github.com/kosuke55/drawtonomy-app/blob/main/docs/extensions.md を参照。
145
+ See the full [Extension Development Guide](https://github.com/kosuke55/drawtonomy/blob/main/docs/extensions.md) for details.
package/dist/helpers.js CHANGED
@@ -106,8 +106,8 @@ export function createVehicle(x, y, options) {
106
106
  rotation: options?.templateId ? 0 : 0,
107
107
  zIndex: 0,
108
108
  props: {
109
- w: options?.w ?? 90,
110
- h: options?.h ?? 45,
109
+ w: options?.w ?? 30,
110
+ h: options?.h ?? 56,
111
111
  color: options?.color ?? 'black',
112
112
  size: options?.size ?? 'm',
113
113
  attributes: options?.attributes ?? { type: 'vehicle', subtype: 'car' },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@drawtonomy/sdk",
3
- "version": "0.1.0",
4
- "description": "SDK for building Drawtonomy extensions",
3
+ "version": "0.2.1",
4
+ "description": "SDK for building drawtonomy extensions",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -29,5 +29,8 @@
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
31
  "typescript": "^5.7.0"
32
+ },
33
+ "dependencies": {
34
+ "@drawtonomy/sdk": "^0.1.0"
32
35
  }
33
36
  }