@tatamicks/core 0.3.2 → 1.0.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.
- package/README.md +518 -81
- package/dist/PalettePanel-CtXsH6Cb.js +5137 -0
- package/dist/PalettePanel-CtXsH6Cb.js.map +1 -0
- package/dist/PalettePanel-Dipvtj7D.cjs +9 -0
- package/dist/PalettePanel-Dipvtj7D.cjs.map +1 -0
- package/dist/PalettePanel.css +1 -0
- package/dist/canvas.cjs +1 -0
- package/dist/canvas.cjs.map +1 -0
- package/dist/canvas.mjs +354 -0
- package/dist/canvas.mjs.map +1 -0
- package/dist/index.cjs +5 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +3 -1
- package/dist/index.css.d.ts +2 -0
- package/dist/index.mjs +1424 -6891
- package/dist/index.mjs.map +1 -1
- package/dist/paperSettingsWidget-DgDoBA0P.js +5137 -0
- package/dist/paperSettingsWidget-DgDoBA0P.js.map +1 -0
- package/dist/paperSettingsWidget-sLJsIUxS.cjs +2 -0
- package/dist/paperSettingsWidget-sLJsIUxS.cjs.map +1 -0
- package/dist/paperSettingsWidget.css +1 -0
- package/dist/shell.cjs +1 -0
- package/dist/shell.cjs.map +1 -0
- package/dist/shell.mjs +65 -0
- package/dist/shell.mjs.map +1 -0
- package/dist/sidebarPortal-C06y4JSP.js +723 -0
- package/dist/sidebarPortal-C06y4JSP.js.map +1 -0
- package/dist/sidebarPortal-C3HszQyp.cjs +1 -0
- package/dist/sidebarPortal-C3HszQyp.cjs.map +1 -0
- package/dist/src/canvas.d.ts +2523 -0
- package/dist/src/index.d.ts +1801 -2880
- package/dist/src/shell.d.ts +1982 -0
- package/package.json +21 -8
- package/dist/index.js +0 -70
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,1982 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @tatamicks/core/shell - シェルサブパスエントリポイント
|
|
3
|
+
*
|
|
4
|
+
* カスタマイズ向けの Advanced API。
|
|
5
|
+
*
|
|
6
|
+
* ActionBar / Sidebar / DefaultSelectionActionBarOverlay / FloatingWidget は {@link @tatamicks/core} メインエントリのみで提供(このサブパスには含まれない)。
|
|
7
|
+
*
|
|
8
|
+
* @remarks Advanced — 個別パネル・ UI プリミティブ・選択 UI カスタムなど、細かくカスタマイズしたい場合に使用する。
|
|
9
|
+
*
|
|
10
|
+
* Breaking changes が生じる可能性がある。
|
|
11
|
+
*
|
|
12
|
+
* @packageDocumentation
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
import { ComponentType } from 'react';
|
|
16
|
+
import { default as default_2 } from 'react';
|
|
17
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
18
|
+
import { JSX } from 'react/jsx-runtime';
|
|
19
|
+
import { MemoExoticComponent } from 'react';
|
|
20
|
+
import { ReactNode } from 'react';
|
|
21
|
+
import { RefAttributes } from 'react';
|
|
22
|
+
import { RefObject } from 'react';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* `ActionBar` 内のセクション間区切り線コンポーネント。
|
|
26
|
+
*
|
|
27
|
+
* @remarks
|
|
28
|
+
* **Shell** — `ActionBar` により自動挿入される。通常は直接使用しない。
|
|
29
|
+
*/
|
|
30
|
+
export declare const ActionBarDivider: {
|
|
31
|
+
(_props: ActionBarDividerProps): JSX.Element;
|
|
32
|
+
displayName: string;
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* `ActionBar` 内のセクション間区切り線コンポーネントへの props。
|
|
37
|
+
*/
|
|
38
|
+
export declare type ActionBarDividerProps = Record<string, never>;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* 登録済みアクションの実行および有効判定インターフェース。
|
|
42
|
+
*
|
|
43
|
+
* @remarks
|
|
44
|
+
* button ブロックのクリック時に呼び出される。
|
|
45
|
+
*/
|
|
46
|
+
declare interface ActionContext {
|
|
47
|
+
/** 指定 ID のアクションを実行する。 */
|
|
48
|
+
execute(actionId: BuiltinActionId | (string & {}), payload?: unknown): void;
|
|
49
|
+
/** 指定 ID のアクションが実行可能か返す。 */
|
|
50
|
+
isEnabled(actionId: BuiltinActionId | (string & {})): boolean;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* アクション実行後にトースト通知で表示するフィードバック情報。
|
|
55
|
+
*
|
|
56
|
+
* @remarks
|
|
57
|
+
* `ActionBar` / `CanvasActionSection` に渡す `onActionFeedback` の引数型。
|
|
58
|
+
*/
|
|
59
|
+
declare interface ActionFeedback {
|
|
60
|
+
/** アクションの識別子 */
|
|
61
|
+
actionId: string;
|
|
62
|
+
/** トースト通知に表示するメッセージ */
|
|
63
|
+
message: string;
|
|
64
|
+
/** ショートカットキーの表示文字列(なしの場合は `null`) */
|
|
65
|
+
shortcut: string | null;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* 全単位の配列。
|
|
70
|
+
*/
|
|
71
|
+
declare const ALL_UNITS: readonly ["mm", "cm", "fr", "inch", "pt", "px", "%"];
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* ブロックの背景色と枠線を設定するパネル。
|
|
75
|
+
*
|
|
76
|
+
* @remarks
|
|
77
|
+
* **Shell** — タブ切り替えで背景色と枠線を個別に設定できる。
|
|
78
|
+
*/
|
|
79
|
+
export declare const BackgroundBorderPanel: default_2.FC<BackgroundBorderPanelProps>;
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* `BackgroundBorderPanel` コンポーネントへの props。
|
|
83
|
+
*/
|
|
84
|
+
export declare interface BackgroundBorderPanelProps {
|
|
85
|
+
/** 選択中のブロックの配列 */
|
|
86
|
+
selectedBlocks: Block[];
|
|
87
|
+
/** ブロック更新時のコールバック */
|
|
88
|
+
onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
declare type BaseRenderer = ForwardRefExoticComponent<RendererProps<Record<string, Value>, Value> & RefAttributes<BlockRef>>;
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* binding パスによる設定値の読み書きインターフェース。
|
|
95
|
+
*
|
|
96
|
+
* @remarks
|
|
97
|
+
* `HiddenBinding` の評価および button ブロックのアクション判定に使用される。
|
|
98
|
+
*/
|
|
99
|
+
declare interface BindingContext {
|
|
100
|
+
/**
|
|
101
|
+
* 指定パスの値を取得する。
|
|
102
|
+
*
|
|
103
|
+
* - パスが存在し値が `null` の場合: `null` を返す。
|
|
104
|
+
* - パスの値が未設定(未登録)の場合: `undefined` を返す。
|
|
105
|
+
*
|
|
106
|
+
* `extra` として渡す実装では、担当外のパスに対して `undefined` を返すことで
|
|
107
|
+
* 組み込みの BindingContext へのフォールバックを指示できる。
|
|
108
|
+
* 有効値として `null` を返す場合はフォールバックしない。
|
|
109
|
+
*/
|
|
110
|
+
get(path: string): Value | undefined;
|
|
111
|
+
/** 指定パスに値を書き込む。 */
|
|
112
|
+
set(path: string, value: Value): void;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* book 内のブロックを表すインターフェース。
|
|
117
|
+
*
|
|
118
|
+
* @remarks
|
|
119
|
+
* - `kind` はプラグインの登録 ID(`createPluginRegistry` に渡した `kind`)と対応する。
|
|
120
|
+
*
|
|
121
|
+
* - `props` の値解決順序: `block.props` → `page.blockDefaults?.[kind]` → `PropDef.defaultProps`
|
|
122
|
+
*
|
|
123
|
+
* - `id` はブック全体でユニークである必要がある。
|
|
124
|
+
*
|
|
125
|
+
* - `P` のジェネリクスは `Page.blocks: Block[]` に格納すると `Record<string, Value>` に消去される。
|
|
126
|
+
*
|
|
127
|
+
* そのため `block.kind === "text"` のように `kind` で条件分岐しても TypeScript は `props` の型を絞り込まない。
|
|
128
|
+
*
|
|
129
|
+
* props に型安全にアクセスするには `pluginRegistry[block.kind]?.validateProps(block.props)` を使用すること。
|
|
130
|
+
*
|
|
131
|
+
* 実行時の型保証は `BlockPlugin.validateProps` が担保している。
|
|
132
|
+
*
|
|
133
|
+
* - `P` に関数・クラスインスタンス・DOM 要素など非シリアライズ可能な値を含めると、JSON 保存時に値が消失する。
|
|
134
|
+
*
|
|
135
|
+
* 型パラメータ `P` は {@link SerializableRecord}(= `Record<string, Value | undefined>`)互換であること。
|
|
136
|
+
*
|
|
137
|
+
* 検証には `satisfies SerializableRecord` を使用すること。
|
|
138
|
+
*/
|
|
139
|
+
declare interface Block<P extends SerializableRecord = Record<string, Value>> {
|
|
140
|
+
/** ブロック ID */
|
|
141
|
+
id: string;
|
|
142
|
+
/** ブロック種別(プラグインの kind) */
|
|
143
|
+
kind: string;
|
|
144
|
+
/** ブロックの位置とサイズ */
|
|
145
|
+
layout: BlockRect;
|
|
146
|
+
/** ブロック固有のプロパティ(プラグインごとに内容が異なる) */
|
|
147
|
+
props: P;
|
|
148
|
+
/** ブロックのスタイル */
|
|
149
|
+
style?: BlockStyle;
|
|
150
|
+
/** ブロックの動作設定 */
|
|
151
|
+
behavior?: BlockBehavior;
|
|
152
|
+
/** ブロックの表示/非表示を制御する条件式 */
|
|
153
|
+
hiddenBinding?: HiddenBinding;
|
|
154
|
+
/**
|
|
155
|
+
* form モードで送信するデフォルト値。
|
|
156
|
+
*
|
|
157
|
+
* 設定されている場合、edit モードで自動で初期値として使用される。
|
|
158
|
+
*/
|
|
159
|
+
initValue?: Value;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* ブロックの動作設定。
|
|
164
|
+
*
|
|
165
|
+
* @remarks
|
|
166
|
+
* キーが存在する(`true`)場合に有効、`undefined` の場合は無効として扱う。
|
|
167
|
+
*/
|
|
168
|
+
declare interface BlockBehavior {
|
|
169
|
+
/**
|
|
170
|
+
* 読み取り専用フラグ。
|
|
171
|
+
*
|
|
172
|
+
* `NoteMode.VIEW` の強制読み取りとは独立して動作し、EDIT モードでも入力をブロックする。
|
|
173
|
+
*/
|
|
174
|
+
readOnly?: true;
|
|
175
|
+
/**
|
|
176
|
+
* コンテンツ実測幅にブロックを伸縮させる。
|
|
177
|
+
*
|
|
178
|
+
* `paper.autoWidth` と組み合わせるとキャンバス幅も追従する。
|
|
179
|
+
*/
|
|
180
|
+
widthFit?: true;
|
|
181
|
+
/**
|
|
182
|
+
* コンテンツ実測高さにブロックを伸縮させる。
|
|
183
|
+
*
|
|
184
|
+
* `paper.autoHeight` と組み合わせるとキャンバス高さも追従する。
|
|
185
|
+
*/
|
|
186
|
+
heightFit?: true;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/**
|
|
190
|
+
* ブロック種別ごとの共通デフォルトプロパティ。
|
|
191
|
+
*
|
|
192
|
+
* @remarks
|
|
193
|
+
* - キー: プラグインの kind(例: `"text"`, `"checkbox"`)
|
|
194
|
+
* - 値: プロパティの部分辞書。`block.props` にキーが存在しない場合に参照され、
|
|
195
|
+
* それも存在しない場合は `PropDef.defaultProps` にフォールバックする
|
|
196
|
+
*
|
|
197
|
+
* @example
|
|
198
|
+
* ```ts
|
|
199
|
+
* const defaults: BlockDefaults = {
|
|
200
|
+
* text: { fontFamily: "serif", verticalAlign: "center" },
|
|
201
|
+
* checkbox: { horizontalAlign: "center" },
|
|
202
|
+
* };
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
declare type BlockDefaults = Record<string, Record<string, Value>>;
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* ブロック種類ごとのデフォルトプロパティ設定パネル。
|
|
209
|
+
*
|
|
210
|
+
* @remarks
|
|
211
|
+
* **Shell** — `DefaultCanvasPanel` 内で使用される。
|
|
212
|
+
*/
|
|
213
|
+
export declare const BlockDefaultsPanel: MemoExoticComponent<({ blockDefaults, pluginRegistry, onChange }: BlockDefaultsPanelProps) => JSX.Element>;
|
|
214
|
+
|
|
215
|
+
/**
|
|
216
|
+
* `BlockDefaultsPanel` コンポーネントへの props。
|
|
217
|
+
*/
|
|
218
|
+
export declare interface BlockDefaultsPanelProps {
|
|
219
|
+
/** 現在のブロックデフォルト設定 */
|
|
220
|
+
blockDefaults: BlockDefaults;
|
|
221
|
+
/** プラグインレジストリ(全プラグイン情報) */
|
|
222
|
+
pluginRegistry: PluginRegistry;
|
|
223
|
+
/** デフォルト値変更時のコールバック */
|
|
224
|
+
onChange: (newBlockDefaults: BlockDefaults) => void;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* ブロックの配列順序を変更するパネル。UI では上が最前面、下が最背面。
|
|
229
|
+
*
|
|
230
|
+
* @remarks
|
|
231
|
+
* **Shell** — 内部配列では最後が最前面。
|
|
232
|
+
*/
|
|
233
|
+
export declare const BlockOrderPanel: {
|
|
234
|
+
({ blocks, onBlocksChange, selectedBlockIds, onBlockHover, onBlockDragChange, }: BlockOrderPanelProps): JSX.Element;
|
|
235
|
+
displayName: string;
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* `BlockOrderPanel` コンポーネントへの props。
|
|
240
|
+
*/
|
|
241
|
+
export declare interface BlockOrderPanelProps {
|
|
242
|
+
/** ブロック一覧 */
|
|
243
|
+
blocks: Block[];
|
|
244
|
+
/** ブロック更新時のコールバック (blocks 配列全体を更新) */
|
|
245
|
+
onBlocksChange: (blocks: Block[]) => void;
|
|
246
|
+
/** 選択中のブロック ID 一覧 */
|
|
247
|
+
selectedBlockIds?: string[];
|
|
248
|
+
/** ホバー時のコールバック(キャンバス上でのホバーハイライト用。ドラッグ選択とは別) */
|
|
249
|
+
onBlockHover?: (id: string | null) => void;
|
|
250
|
+
/** ドラッグ中のブロック ID 通知(キャンバス上にソリッド枠を表示するために使用) */
|
|
251
|
+
onBlockDragChange?: (id: string | null) => void;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/**
|
|
255
|
+
* pluginのメタ情報(UI表示・アイコン・デフォルトサイズ)。
|
|
256
|
+
*/
|
|
257
|
+
declare interface BlockPluginMeta {
|
|
258
|
+
/** UIに表示されるブロック名 */
|
|
259
|
+
displayName: string;
|
|
260
|
+
/** ブロックの説明文 */
|
|
261
|
+
description?: string;
|
|
262
|
+
/** ブロックのグリッド上のデフォルトサイズ */
|
|
263
|
+
defaultSize?: BlockSize;
|
|
264
|
+
/** ブロック選択パネルなどで使用するアイコンコンポーネント */
|
|
265
|
+
icon?: ComponentType<{
|
|
266
|
+
className?: string;
|
|
267
|
+
}>;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/**
|
|
271
|
+
* ブロックのグリッド上座標。
|
|
272
|
+
*/
|
|
273
|
+
declare interface BlockPos {
|
|
274
|
+
/** グリッド列の開始位置 (0-based) */
|
|
275
|
+
x: number;
|
|
276
|
+
/** グリッド行の開始位置 (0-based) */
|
|
277
|
+
y: number;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/**
|
|
281
|
+
* ブロックプロパティパネルの純粹なコンテナ。レイアウトシェルのみを提供する。
|
|
282
|
+
*
|
|
283
|
+
* @remarks
|
|
284
|
+
* **Shell** — ビジネスロジックを含む実装は `DefaultBlockPropertyPanel` を使用してください。
|
|
285
|
+
*/
|
|
286
|
+
export declare const BlockPropertyPanel: {
|
|
287
|
+
({ children, className, }: BlockPropertyPanelProps): JSX.Element;
|
|
288
|
+
displayName: string;
|
|
289
|
+
};
|
|
290
|
+
|
|
291
|
+
/**
|
|
292
|
+
* `BlockPropertyPanel` コンポーネントへの props。
|
|
293
|
+
*/
|
|
294
|
+
export declare interface BlockPropertyPanelProps {
|
|
295
|
+
/** パネルのコンテンツ */
|
|
296
|
+
children?: ReactNode;
|
|
297
|
+
/** カスタムクラス名 */
|
|
298
|
+
className?: string;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/**
|
|
302
|
+
* ブロックのグリッド上の位置とサイズを合わせた矩形領域。
|
|
303
|
+
*/
|
|
304
|
+
declare interface BlockRect extends BlockPos, BlockSize {
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
declare interface BlockRectPx {
|
|
308
|
+
left: number;
|
|
309
|
+
top: number;
|
|
310
|
+
width: number;
|
|
311
|
+
height: number;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
/**
|
|
315
|
+
* Rendererが forwardRef で外部に公開するインターフェース。
|
|
316
|
+
*/
|
|
317
|
+
declare interface BlockRef {
|
|
318
|
+
focus: () => void;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/**
|
|
322
|
+
* ブロックのグリッド上サイズ。
|
|
323
|
+
*/
|
|
324
|
+
declare interface BlockSize {
|
|
325
|
+
/** 列方向の幅(列数) */
|
|
326
|
+
w: number;
|
|
327
|
+
/** 行方向の高さ(行数) */
|
|
328
|
+
h: number;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* ブロックのスタイル定義。
|
|
333
|
+
*/
|
|
334
|
+
declare interface BlockStyle {
|
|
335
|
+
/** 背景色 (CSS color 値) */
|
|
336
|
+
backgroundColor?: string;
|
|
337
|
+
/** 枠線スタイル */
|
|
338
|
+
border?: BorderStyle;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/**
|
|
342
|
+
* 複数ページのフォームを表すスキーマ(Book)。
|
|
343
|
+
*
|
|
344
|
+
* @remarks
|
|
345
|
+
* - `pages` は最低1ページ必須(タプル型で空配列を禁止)
|
|
346
|
+
* - `Page.id` はオプション。index による識別がベースだが、並び替え・外部同期には `id` を利用する
|
|
347
|
+
* - `block.id` はブック全体でユニークであること
|
|
348
|
+
* - `paper` はブック全体で共通(全ページ同一の用紙設定を維持する)
|
|
349
|
+
*/
|
|
350
|
+
declare interface Book {
|
|
351
|
+
/** ブック全体の用紙設定。全ページ共通(PDF の慣習に従いページごとの変更は不可) */
|
|
352
|
+
paper: Paper;
|
|
353
|
+
/** ページ一覧(0-based インデックス順) */
|
|
354
|
+
pages: [Page, ...Page[]];
|
|
355
|
+
/** ブックレベルのメタデータ。例: `{ title: "月次業務報告書", version: "2" }` */
|
|
356
|
+
metaData?: Record<string, Value>;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
/**
|
|
360
|
+
* 枠線の幅に使用できる単位の配列。
|
|
361
|
+
*/
|
|
362
|
+
declare const BORDER_UNITS: readonly ["px", "pt", "mm"];
|
|
363
|
+
|
|
364
|
+
/**
|
|
365
|
+
* 四辺それぞれの枠線スタイル定義。省略した辺は枠線なし。
|
|
366
|
+
*
|
|
367
|
+
* `all` を指定した場合、各辺に個別指定がなければ `all` の値が全辺に適用される。
|
|
368
|
+
*/
|
|
369
|
+
declare interface BorderStyle {
|
|
370
|
+
top?: LineStyle;
|
|
371
|
+
right?: LineStyle;
|
|
372
|
+
bottom?: LineStyle;
|
|
373
|
+
left?: LineStyle;
|
|
374
|
+
/** 全辺共通スタイル。各辺に個別指定がない場合のフォールバック */
|
|
375
|
+
all?: LineStyle;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/**
|
|
379
|
+
* 枠線の幅に使用できる単位。
|
|
380
|
+
*/
|
|
381
|
+
declare type BorderUnit = (typeof BORDER_UNITS)[number];
|
|
382
|
+
|
|
383
|
+
/**
|
|
384
|
+
* 組み込みアクション ID のユニオン型。
|
|
385
|
+
*
|
|
386
|
+
* `ActionContext.execute` / `ActionContext.isEnabled` の引数に指定したとき IDE の補完候補として表示される。
|
|
387
|
+
* カスタムアクション ID は任意の `string` として渡せる。
|
|
388
|
+
*/
|
|
389
|
+
declare type BuiltinActionId = "undo" | "redo" | "paste" | "delete" | "copy" | "duplicate" | "addPage" | "deletePage" | "selectBlocks" | "goToPage" | "updateBlocks";
|
|
390
|
+
|
|
391
|
+
/**
|
|
392
|
+
* `CanvasPanel` 最上部に表示するアクションボタン行。
|
|
393
|
+
*
|
|
394
|
+
* @remarks
|
|
395
|
+
* **Shell** — Undo/Redo/Delete/Copy/Paste/Duplicate ボタンを提供する。
|
|
396
|
+
*/
|
|
397
|
+
export declare const CanvasActionPanel: {
|
|
398
|
+
({ context, onActionFeedback, }: CanvasActionPanelProps): JSX.Element;
|
|
399
|
+
displayName: string;
|
|
400
|
+
};
|
|
401
|
+
|
|
402
|
+
/**
|
|
403
|
+
* `CanvasActionPanel` コンポーネントへの props。
|
|
404
|
+
*/
|
|
405
|
+
export declare interface CanvasActionPanelProps {
|
|
406
|
+
/** NoteContext(`useNoteContext` が返すコンテキスト) */
|
|
407
|
+
context: NoteContext;
|
|
408
|
+
/** アクション実行時のフィードバック(トースト表示など) */
|
|
409
|
+
onActionFeedback?: (feedback: ActionFeedback) => void;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/**
|
|
413
|
+
* `ActionBar` に表示する Undo/Redo/Paste ボタン群コンポーネント。
|
|
414
|
+
*
|
|
415
|
+
* @remarks
|
|
416
|
+
* **Shell** — 選択依存のアクション(Delete/Copy/Duplicate)は `SelectionActionBar` 側で担う。
|
|
417
|
+
*/
|
|
418
|
+
export declare const CanvasActionSection: {
|
|
419
|
+
({ actionContext, onActionFeedback, onPrint, }: CanvasActionSectionProps): JSX.Element;
|
|
420
|
+
displayName: string;
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
/**
|
|
424
|
+
* `CanvasActionSection` コンポーネントへの props。
|
|
425
|
+
*/
|
|
426
|
+
export declare interface CanvasActionSectionProps {
|
|
427
|
+
/** アクション実行コンテキスト */
|
|
428
|
+
actionContext: ActionContext;
|
|
429
|
+
/** アクション実行時のフィードバック(トースト表示など) */
|
|
430
|
+
onActionFeedback?: (feedback: ActionFeedback) => void;
|
|
431
|
+
/** 印刷ボタン押下時のコールバック。省略時は `window.print()` を呼び出す */
|
|
432
|
+
onPrint?: () => void;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/**
|
|
436
|
+
* キャンバス設定パネルの純粹なコンテナ。`TabPanel` ラッパーのみを提供する。
|
|
437
|
+
*
|
|
438
|
+
* @remarks
|
|
439
|
+
* **Shell** — ビジネスロジックを含む実装は `DefaultCanvasPanel` を使用してください。
|
|
440
|
+
*/
|
|
441
|
+
export declare const CanvasPanel: {
|
|
442
|
+
({ children, className }: CanvasPanelProps): JSX.Element;
|
|
443
|
+
displayName: string;
|
|
444
|
+
};
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* `CanvasPanel` コンポーネントへの props。
|
|
448
|
+
*/
|
|
449
|
+
declare interface CanvasPanelProps {
|
|
450
|
+
/** パネルのコンテンツ */
|
|
451
|
+
children?: ReactNode;
|
|
452
|
+
/** カスタムクラス名 */
|
|
453
|
+
className?: string;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/**
|
|
457
|
+
* チェックボックス入力コンポーネント。
|
|
458
|
+
*
|
|
459
|
+
* @remarks
|
|
460
|
+
* **Shell** — プラグインプロパティの編集 UI として使用する。
|
|
461
|
+
*/
|
|
462
|
+
export declare const Checkbox: {
|
|
463
|
+
({ value, onChange, readOnly, label: propLabel, config, }: CheckboxProps): default_2.ReactElement;
|
|
464
|
+
displayName: string;
|
|
465
|
+
};
|
|
466
|
+
|
|
467
|
+
/**
|
|
468
|
+
* チェックボックス入力の設定オブジェクト。
|
|
469
|
+
*
|
|
470
|
+
* @remarks
|
|
471
|
+
* **Shell** — `CheckboxProps.config` に渡す設定値の型。
|
|
472
|
+
*/
|
|
473
|
+
export declare interface CheckboxConfig {
|
|
474
|
+
/** チェックボックスのラベルテキスト */
|
|
475
|
+
label?: string;
|
|
476
|
+
[key: string]: Value | undefined;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
/**
|
|
480
|
+
* チェックボックス入力コンポーネントへの props。
|
|
481
|
+
*/
|
|
482
|
+
export declare interface CheckboxProps extends PropertyComponentProps<boolean | undefined> {
|
|
483
|
+
/** チェックボックスのラベルテキスト */
|
|
484
|
+
label?: string;
|
|
485
|
+
/** `label` 等をまとめた設定オブジェクト。フィールドより優先度が低い */
|
|
486
|
+
config?: CheckboxConfig;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
/**
|
|
490
|
+
* 折りたたみ可能なセクションコンポーネント。
|
|
491
|
+
*
|
|
492
|
+
* @remarks
|
|
493
|
+
* **Shell** — プロパティパネル等のセクション区切り UI として使用する。
|
|
494
|
+
*/
|
|
495
|
+
export declare const CollapsibleSection: {
|
|
496
|
+
({ title, children, collapsible, defaultCollapsed, isOpen: isOpenProp, onOpenChange, description, actions, openLabel, closeLabel, noPadding, }: CollapsibleSectionProps): JSX.Element;
|
|
497
|
+
displayName: string;
|
|
498
|
+
};
|
|
499
|
+
|
|
500
|
+
/**
|
|
501
|
+
* 折りたたみ可能なセクションコンポーネントへの props。
|
|
502
|
+
*/
|
|
503
|
+
export declare interface CollapsibleSectionProps {
|
|
504
|
+
/** セクションのタイトル */
|
|
505
|
+
title: string;
|
|
506
|
+
/** 子要素(コンテンツ) */
|
|
507
|
+
children: ReactNode;
|
|
508
|
+
/** 折りたたみ可能にするかどうか(デフォルト: false = 常時展開) */
|
|
509
|
+
collapsible?: boolean;
|
|
510
|
+
/** 初期状態で折りたたむかどうか(collapsible が true のときのみ有効、デフォルト: true) */
|
|
511
|
+
defaultCollapsed?: boolean;
|
|
512
|
+
/**
|
|
513
|
+
* 開閉状態の外部制御(指定時は内部状態を使わず isOpen に従う)。
|
|
514
|
+
* collapsible=true のときのみ有効。
|
|
515
|
+
*/
|
|
516
|
+
isOpen?: boolean;
|
|
517
|
+
/** 外部制御時の開閉変更コールバック */
|
|
518
|
+
onOpenChange?: (open: boolean) => void;
|
|
519
|
+
/** タイトル直右に表示する info アイコンのツールチップ説明文 */
|
|
520
|
+
description?: string;
|
|
521
|
+
/** ヘッダー右側に配置するアクション要素 */
|
|
522
|
+
actions?: ReactNode;
|
|
523
|
+
/** 開いているときに表示するラベル(例: "カスタム") */
|
|
524
|
+
openLabel?: string;
|
|
525
|
+
/** 閉じているときに表示するラベル(例: "標準") */
|
|
526
|
+
closeLabel?: string;
|
|
527
|
+
/** コンテンツ領域のパディングを除去する */
|
|
528
|
+
noPadding?: boolean;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
/**
|
|
532
|
+
* カラーピッカーコンポーネント。
|
|
533
|
+
*
|
|
534
|
+
* @remarks
|
|
535
|
+
* **Shell** — プラグインプロパティの編集 UI として使用する。
|
|
536
|
+
*/
|
|
537
|
+
export declare const ColorPicker: {
|
|
538
|
+
({ value, onChange, readOnly, showTextInput, allowUndefined: propAllowUndefined, placeholder: propPlaceholder, width: propWidth, height: propHeight, config, }: ColorPickerProps): default_2.ReactElement;
|
|
539
|
+
displayName: string;
|
|
540
|
+
};
|
|
541
|
+
|
|
542
|
+
/**
|
|
543
|
+
* カラーピッカーの設定オブジェクト。
|
|
544
|
+
*
|
|
545
|
+
* @remarks
|
|
546
|
+
* **Shell** — `ColorPickerProps.config` に渡す設定値の型。
|
|
547
|
+
*/
|
|
548
|
+
declare interface ColorPickerConfig {
|
|
549
|
+
/** `true` のとき未設定(`undefined`)を許容する */
|
|
550
|
+
allowUndefined?: boolean;
|
|
551
|
+
/** 幅(px) */
|
|
552
|
+
width?: number;
|
|
553
|
+
/** 高さ(px) */
|
|
554
|
+
height?: number;
|
|
555
|
+
[key: string]: Value | undefined;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/**
|
|
559
|
+
* カラーピッカーコンポーネントへの props。
|
|
560
|
+
*/
|
|
561
|
+
export declare interface ColorPickerProps extends PropertyComponentProps<string | undefined> {
|
|
562
|
+
/** カラーテキスト入力を表示するか */
|
|
563
|
+
showTextInput?: boolean;
|
|
564
|
+
/** undefined(未設定)を許容するか */
|
|
565
|
+
allowUndefined?: boolean;
|
|
566
|
+
/** プレースホルダーテキスト */
|
|
567
|
+
placeholder?: string;
|
|
568
|
+
/** 幅(px) */
|
|
569
|
+
width?: number;
|
|
570
|
+
/** 高さ(px) */
|
|
571
|
+
height?: number;
|
|
572
|
+
/** 設定オブジェクト */
|
|
573
|
+
config?: ColorPickerConfig;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
/**
|
|
577
|
+
* 選択ブロックのプロパティを編集するコンポーネントのデフォルト実装。
|
|
578
|
+
*
|
|
579
|
+
* @remarks
|
|
580
|
+
* **Shell** — レイアウト・背景・枠線・メタ情報・プラグインプロパティパネルを内包する。
|
|
581
|
+
*/
|
|
582
|
+
export declare const DefaultBlockPropertyPanel: MemoExoticComponent<({ context, gridSize, className }: DefaultBlockPropertyPanelProps) => JSX.Element>;
|
|
583
|
+
|
|
584
|
+
/**
|
|
585
|
+
* `DefaultBlockPropertyPanel` コンポーネントへの props。
|
|
586
|
+
*/
|
|
587
|
+
export declare interface DefaultBlockPropertyPanelProps {
|
|
588
|
+
/** NoteContext(`useNoteContext` が返すコンテキスト) */
|
|
589
|
+
context: NoteContext;
|
|
590
|
+
/** グリッドサイズ(レイアウトパネルに渡す) */
|
|
591
|
+
gridSize?: {
|
|
592
|
+
cols: number;
|
|
593
|
+
rows: number;
|
|
594
|
+
};
|
|
595
|
+
/** カスタムクラス名 */
|
|
596
|
+
className?: string;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
/**
|
|
600
|
+
* キャンバス設定統合パネルのデフォルト実装。
|
|
601
|
+
*
|
|
602
|
+
* @remarks
|
|
603
|
+
* **Shell** — 内部に CanvasActionPanel, PaperSizePanel, MarginPanel, GridSizePanel, BlockDefaultsPanel, BlockOrderPanel を含む。
|
|
604
|
+
*/
|
|
605
|
+
export declare const DefaultCanvasPanel: {
|
|
606
|
+
({ context, onBlockHover, onBlockDragChange, onActionFeedback, }: DefaultCanvasPanelProps): JSX.Element;
|
|
607
|
+
displayName: string;
|
|
608
|
+
};
|
|
609
|
+
|
|
610
|
+
/**
|
|
611
|
+
* `DefaultCanvasPanel` コンポーネントへの props。
|
|
612
|
+
*/
|
|
613
|
+
export declare interface DefaultCanvasPanelProps {
|
|
614
|
+
/** NoteContext(`useNoteContext` が返すコンテキスト) */
|
|
615
|
+
context: NoteContext;
|
|
616
|
+
/** ホバー中のブロック ID 通知 */
|
|
617
|
+
onBlockHover?: (id: string | null) => void;
|
|
618
|
+
/** ドラッグ中のブロック ID 通知 */
|
|
619
|
+
onBlockDragChange?: (id: string | null) => void;
|
|
620
|
+
/** アクション実行時のフィードバック(トースト表示など) */
|
|
621
|
+
onActionFeedback?: (feedback: ActionFeedback) => void;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
/**
|
|
625
|
+
* 数値と単位の組み合わせ。
|
|
626
|
+
*/
|
|
627
|
+
declare interface Dimension<U extends Unit = Unit> {
|
|
628
|
+
/** 数値 */
|
|
629
|
+
value: number;
|
|
630
|
+
/** 単位 */
|
|
631
|
+
unit: U;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/**
|
|
635
|
+
* `Dimension`(値+単位)入力コンポーネント。
|
|
636
|
+
*
|
|
637
|
+
* @remarks
|
|
638
|
+
* **Shell** — プラグインプロパティの編集 UI として使用する。
|
|
639
|
+
*/
|
|
640
|
+
export declare const DimensionInput: <U extends Unit>(props: DimensionInputProps<U>) => default_2.ReactElement;
|
|
641
|
+
|
|
642
|
+
/**
|
|
643
|
+
* `Dimension`(値+単位)入力の設定オブジェクト。
|
|
644
|
+
*
|
|
645
|
+
* @remarks
|
|
646
|
+
* **Shell** — `DimensionInputProps.config` に渡す設定値の型。
|
|
647
|
+
*/
|
|
648
|
+
export declare interface DimensionInputConfig<U extends Unit> {
|
|
649
|
+
/** 選択可能な単位の一覧 */
|
|
650
|
+
allowedUnits?: readonly U[];
|
|
651
|
+
/** 最小値 */
|
|
652
|
+
min?: number;
|
|
653
|
+
/** 最大値 */
|
|
654
|
+
max?: number;
|
|
655
|
+
/** ステップ幅 */
|
|
656
|
+
step?: number;
|
|
657
|
+
/** プレースホルダーテキスト */
|
|
658
|
+
placeholder?: string;
|
|
659
|
+
/** 幅(px) */
|
|
660
|
+
width?: number;
|
|
661
|
+
/** 高さ(px) */
|
|
662
|
+
height?: number;
|
|
663
|
+
[key: string]: Value | undefined;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
/**
|
|
667
|
+
* `Dimension`(値+単位)入力コンポーネントへの props。
|
|
668
|
+
*/
|
|
669
|
+
export declare interface DimensionInputProps<U extends Unit> extends PropertyComponentProps<Dimension<U> | undefined> {
|
|
670
|
+
/** 選択可能な単位の一覧 */
|
|
671
|
+
allowedUnits?: readonly U[];
|
|
672
|
+
/** 最小値 */
|
|
673
|
+
min?: number;
|
|
674
|
+
/** 最大値 */
|
|
675
|
+
max?: number;
|
|
676
|
+
/** ステップ幅 */
|
|
677
|
+
step?: number;
|
|
678
|
+
/** プレースホルダーテキスト */
|
|
679
|
+
placeholder?: string;
|
|
680
|
+
/** 幅(px) */
|
|
681
|
+
width?: number;
|
|
682
|
+
/** 高さ(px) */
|
|
683
|
+
height?: number;
|
|
684
|
+
/** `aria-label` 属性に設定するテキスト */
|
|
685
|
+
ariaLabel?: string;
|
|
686
|
+
/** 各フィールドをまとめた設定オブジェクト。フィールドより優先度が低い */
|
|
687
|
+
config?: DimensionInputConfig<U>;
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
/**
|
|
691
|
+
* ドロップダウン選択コンポーネント。
|
|
692
|
+
*
|
|
693
|
+
* @remarks
|
|
694
|
+
* **Shell** — プラグインプロパティの編集 UI として使用する。
|
|
695
|
+
*/
|
|
696
|
+
export declare const Dropdown: {
|
|
697
|
+
<T extends string = string>(props: DropdownProps<T>): default_2.ReactElement;
|
|
698
|
+
displayName: string;
|
|
699
|
+
};
|
|
700
|
+
|
|
701
|
+
/**
|
|
702
|
+
* ドロップダウン選択の設定オブジェクト。
|
|
703
|
+
*
|
|
704
|
+
* @remarks
|
|
705
|
+
* **Shell** — `DropdownProps.config` に渡す設定値の型。
|
|
706
|
+
*/
|
|
707
|
+
export declare interface DropdownConfig {
|
|
708
|
+
/** 選択肢の一覧 */
|
|
709
|
+
options?: readonly DropdownOption[];
|
|
710
|
+
/** 未選択時のプレースホルダーテキスト */
|
|
711
|
+
placeholder?: string;
|
|
712
|
+
/** 幅(px) */
|
|
713
|
+
width?: number;
|
|
714
|
+
/** 高さ(px) */
|
|
715
|
+
height?: number;
|
|
716
|
+
/** `false` のとき「未選択」状態を選択不可にする(デフォルト: `true`) */
|
|
717
|
+
allowEmpty?: boolean;
|
|
718
|
+
[key: string]: Value | undefined;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
/**
|
|
722
|
+
* ドロップダウンの選択肢オブジェクト。
|
|
723
|
+
*
|
|
724
|
+
* @remarks
|
|
725
|
+
* **Shell** — `DropdownConfig.options` や `DropdownProps.options` に渡す選択肖の型。
|
|
726
|
+
*/
|
|
727
|
+
export declare interface DropdownOption {
|
|
728
|
+
/** 選択時に `onChange` に渡される値 */
|
|
729
|
+
value: Value;
|
|
730
|
+
/** 画面表示ラベル */
|
|
731
|
+
label: string;
|
|
732
|
+
[key: string]: Value;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
/**
|
|
736
|
+
* ドロップダウン選択コンポーネントへの props。
|
|
737
|
+
*/
|
|
738
|
+
export declare interface DropdownProps<T extends string = string> extends PropertyComponentProps<T | undefined> {
|
|
739
|
+
/** 選択肢の一覧 */
|
|
740
|
+
options?: readonly DropdownOption[];
|
|
741
|
+
/** 未選択時のプレースホルダーテキスト */
|
|
742
|
+
placeholder?: string;
|
|
743
|
+
/** 幅(px) */
|
|
744
|
+
width?: number;
|
|
745
|
+
/** 高さ(px) */
|
|
746
|
+
height?: number;
|
|
747
|
+
/** `aria-label` 属性に設定するテキスト */
|
|
748
|
+
ariaLabel?: string;
|
|
749
|
+
/** `false` のとき「未選択」状態を選択不可にする(デフォルト: `true`) */
|
|
750
|
+
allowEmpty?: boolean;
|
|
751
|
+
/** 各フィールドをまとめた設定オブジェクト。フィールドより優先度が低い */
|
|
752
|
+
config?: DropdownConfig;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
/**
|
|
756
|
+
* フルエディター用の UI 状態。
|
|
757
|
+
*
|
|
758
|
+
* @remarks
|
|
759
|
+
* - `useNoteContext` が内部で生成し、`NoteContext` に格納する。
|
|
760
|
+
* - `Default*` コンポーネントと `getDefault*` ヘルパー関数はこの状態を参照する。
|
|
761
|
+
*/
|
|
762
|
+
declare interface EditorState {
|
|
763
|
+
/** 選択中のブロック ID 一覧 */
|
|
764
|
+
selectedBlockIds: string[];
|
|
765
|
+
/** 表示中のページインデックス */
|
|
766
|
+
pageIdx: number;
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
/**
|
|
770
|
+
* `SelectionActionBar` に渡すデフォルト items 配列を返す。
|
|
771
|
+
*
|
|
772
|
+
* @remarks
|
|
773
|
+
* **Shell** — 各要素には `key` が付いているため `filter` / `map` でプログラマブルに操作できる。
|
|
774
|
+
*
|
|
775
|
+
* @example
|
|
776
|
+
* ```tsx
|
|
777
|
+
* const items = getDefaultSelectionActionBarItems({ context });
|
|
778
|
+
* // 削除ボタンを除外
|
|
779
|
+
* <SelectionActionBar items={items.filter((i) => i.key !== "delete")} />
|
|
780
|
+
* ```
|
|
781
|
+
*/
|
|
782
|
+
export declare function getDefaultSelectionActionBarItems({ context, gridSize, onActionFeedback, }: GetDefaultSelectionActionBarItemsOptions): ReactNode[];
|
|
783
|
+
|
|
784
|
+
/**
|
|
785
|
+
* `GetDefaultSelectionActionBarItemsOptions` のオプション。
|
|
786
|
+
*
|
|
787
|
+
* @remarks
|
|
788
|
+
* **Shell** — `getDefaultSelectionActionBarItems()` の引数型。
|
|
789
|
+
*/
|
|
790
|
+
export declare interface GetDefaultSelectionActionBarItemsOptions {
|
|
791
|
+
/** NoteContext(`useNoteContext` が返すコンテキスト) */
|
|
792
|
+
context: NoteContext;
|
|
793
|
+
/** グリッドサイズ(レイアウトパネルに使用) */
|
|
794
|
+
gridSize?: {
|
|
795
|
+
cols: number;
|
|
796
|
+
rows: number;
|
|
797
|
+
};
|
|
798
|
+
/** アクション実行時のフィードバック(トースト表示など) */
|
|
799
|
+
onActionFeedback?: (feedback: ActionFeedback) => void;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
/**
|
|
803
|
+
* ページのグリッド定義。
|
|
804
|
+
*
|
|
805
|
+
* @remarks
|
|
806
|
+
* `cols` / `rows` を省略した列/行は全て 1fr 等分割として扱われる。
|
|
807
|
+
*/
|
|
808
|
+
declare interface Grid {
|
|
809
|
+
/** 列数 */
|
|
810
|
+
colCount: number;
|
|
811
|
+
/** 行数 */
|
|
812
|
+
rowCount: number;
|
|
813
|
+
/** 列のサイズ定義マップ(インデックス → Dimension)。省略時は全列 1fr。 */
|
|
814
|
+
cols?: Record<number, Dimension<GridUnit>>;
|
|
815
|
+
/** 行のサイズ定義マップ(インデックス → Dimension)。省略時は全行 1fr。 */
|
|
816
|
+
rows?: Record<number, Dimension<GridUnit>>;
|
|
817
|
+
}
|
|
818
|
+
|
|
819
|
+
/**
|
|
820
|
+
* グリッドの列・行サイズに使用できる単位の配列。
|
|
821
|
+
*/
|
|
822
|
+
declare const GRID_UNITS: readonly ["mm", "cm", "fr", "inch", "pt", "px"];
|
|
823
|
+
|
|
824
|
+
/**
|
|
825
|
+
* `ActionBar` 上にグリッドの列数・行数を表示するコンパクトなコントロール。
|
|
826
|
+
*
|
|
827
|
+
* @remarks
|
|
828
|
+
* **Shell** — `ActionBar` のグリッド列数・行数設定セクション。
|
|
829
|
+
*/
|
|
830
|
+
export declare const GridSettingsSection: {
|
|
831
|
+
({ grid, onGridChange, }: GridSettingsSectionProps): JSX.Element;
|
|
832
|
+
displayName: string;
|
|
833
|
+
};
|
|
834
|
+
|
|
835
|
+
/**
|
|
836
|
+
* `GridSettingsSection` コンポーネントへの props。
|
|
837
|
+
*/
|
|
838
|
+
export declare interface GridSettingsSectionProps {
|
|
839
|
+
/** グリッド設定 */
|
|
840
|
+
grid: Grid;
|
|
841
|
+
/** グリッド変更時のコールバック */
|
|
842
|
+
onGridChange: (grid: Grid) => void;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
/**
|
|
846
|
+
* 行・列数を変更するパネル。
|
|
847
|
+
*
|
|
848
|
+
* @remarks
|
|
849
|
+
* **Shell** — 行・列数変更パネル。
|
|
850
|
+
*/
|
|
851
|
+
export declare const GridSizePanel: {
|
|
852
|
+
({ grid, onGridChange }: GridSizePanelProps): JSX.Element;
|
|
853
|
+
displayName: string;
|
|
854
|
+
};
|
|
855
|
+
|
|
856
|
+
/**
|
|
857
|
+
* `GridSizePanel` コンポーネントへの props。
|
|
858
|
+
*/
|
|
859
|
+
export declare interface GridSizePanelProps {
|
|
860
|
+
/** グリッド設定 */
|
|
861
|
+
grid: Grid;
|
|
862
|
+
/** グリッド変更時のコールバック */
|
|
863
|
+
onGridChange: (grid: Grid) => void;
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
/**
|
|
867
|
+
* グリッドの列・行サイズに使用できる単位(`fr` を含む)。
|
|
868
|
+
*/
|
|
869
|
+
declare type GridUnit = (typeof GRID_UNITS)[number];
|
|
870
|
+
|
|
871
|
+
/**
|
|
872
|
+
* ブロックの表示/非表示を binding 値で制御する条件式。
|
|
873
|
+
*
|
|
874
|
+
* - `string` — 指定パスの値が truthy のとき非表示
|
|
875
|
+
*
|
|
876
|
+
* - `{ path, eq }` — 指定パスの値が `eq` と等しいとき非表示
|
|
877
|
+
*
|
|
878
|
+
* - `{ path, neq }` — 指定パスの値が `neq` と等しくないとき非表示
|
|
879
|
+
*
|
|
880
|
+
* `eq` / `neq` は `===` による参照比較を行うため、オブジェクト・配列を指定しても期待通りに動作しない。
|
|
881
|
+
*
|
|
882
|
+
* そのため `Value` からオブジェクト・配列変形を除いた `Exclude<Value, Value[] | readonly Value[] | { [key: string]: Value }>` に制限している。
|
|
883
|
+
*/
|
|
884
|
+
declare type HiddenBinding = string | {
|
|
885
|
+
path: string;
|
|
886
|
+
/**
|
|
887
|
+
* `===` で比較するためプリミティブ値のみ有効。
|
|
888
|
+
*
|
|
889
|
+
* `Value` からオブジェクト・配列を除いた型。
|
|
890
|
+
*/
|
|
891
|
+
eq: Exclude<Value, Value[] | readonly Value[] | {
|
|
892
|
+
[key: string]: Value;
|
|
893
|
+
}>;
|
|
894
|
+
/** `eq` と同時指定不可 */
|
|
895
|
+
neq?: never;
|
|
896
|
+
} | {
|
|
897
|
+
path: string;
|
|
898
|
+
/**
|
|
899
|
+
* `===` で比較するためプリミティブ値のみ有効。
|
|
900
|
+
*
|
|
901
|
+
* `Value` からオブジェクト・配列を除いた型。
|
|
902
|
+
*/
|
|
903
|
+
neq: Exclude<Value, Value[] | readonly Value[] | {
|
|
904
|
+
[key: string]: Value;
|
|
905
|
+
}>;
|
|
906
|
+
/** `neq` と同時指定不可 */
|
|
907
|
+
eq?: never;
|
|
908
|
+
};
|
|
909
|
+
|
|
910
|
+
/**
|
|
911
|
+
* アイコンボタンコンポーネント。
|
|
912
|
+
*
|
|
913
|
+
* @remarks
|
|
914
|
+
* **Shell** — ツールバーヤアクションバーのアイコンボタン UI として使用する。
|
|
915
|
+
*/
|
|
916
|
+
export declare const IconActionButton: {
|
|
917
|
+
({ icon, label, onClick, onMouseEnter, disabled, title, preventFocusOnMouseDown, }: IconActionButtonProps): JSX.Element;
|
|
918
|
+
displayName: string;
|
|
919
|
+
};
|
|
920
|
+
|
|
921
|
+
/**
|
|
922
|
+
* アイコンボタンコンポーネントへの props。
|
|
923
|
+
|
|
924
|
+
*/
|
|
925
|
+
export declare interface IconActionButtonProps {
|
|
926
|
+
/** ボタン内に表示するアイコン */
|
|
927
|
+
icon: default_2.ReactNode;
|
|
928
|
+
/** アクセシビリティ用ラベル(`aria-label` および `title` のデフォルト値) */
|
|
929
|
+
label: string;
|
|
930
|
+
/** クリック時のコールバック */
|
|
931
|
+
onClick?: () => void;
|
|
932
|
+
/** マウスホバー時のコールバック */
|
|
933
|
+
onMouseEnter?: () => void;
|
|
934
|
+
/** `true` のとき非活性化 */
|
|
935
|
+
disabled?: boolean;
|
|
936
|
+
/** ツールチップテキスト。省略時は `label` を使用する */
|
|
937
|
+
title?: string;
|
|
938
|
+
/** `true` のとき `mousedown` でフォーカスを奪わない。パネルを閉じたくない操作に使用する */
|
|
939
|
+
preventFocusOnMouseDown?: boolean;
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
/**
|
|
943
|
+
* JSON 形式でブックデータのインポート・エクスポートを行うパネル。
|
|
944
|
+
*
|
|
945
|
+
* @remarks
|
|
946
|
+
* **Shell** — `OtherPanel` のデフォルトセクションとして使用される。
|
|
947
|
+
*/
|
|
948
|
+
export declare const ImportExportPanel: default_2.FC<ImportExportPanelProps>;
|
|
949
|
+
|
|
950
|
+
/**
|
|
951
|
+
* `ImportExportPanel` コンポーネントへの props。
|
|
952
|
+
*/
|
|
953
|
+
export declare interface ImportExportPanelProps {
|
|
954
|
+
/** ブックデータ */
|
|
955
|
+
book: Book;
|
|
956
|
+
/** 入力値のマップ */
|
|
957
|
+
values: Record<string, Value>;
|
|
958
|
+
/** ブック変更時のコールバック */
|
|
959
|
+
onBookChange: OnBookChange;
|
|
960
|
+
/** 入力値変更時のコールバック */
|
|
961
|
+
onValuesChange: OnValuesChange;
|
|
962
|
+
}
|
|
963
|
+
|
|
964
|
+
/**
|
|
965
|
+
* ブロックの位置と大きさを設定するパネル。
|
|
966
|
+
*
|
|
967
|
+
* @remarks
|
|
968
|
+
* **Shell** — 複数選択時はバウンディングボックスの最小座標を基準に相対変更する。
|
|
969
|
+
*/
|
|
970
|
+
export declare const LayoutPanel: default_2.FC<LayoutPanelProps>;
|
|
971
|
+
|
|
972
|
+
/**
|
|
973
|
+
* `LayoutPanel` コンポーネントへの props。
|
|
974
|
+
*/
|
|
975
|
+
export declare interface LayoutPanelProps {
|
|
976
|
+
/** 選択中のブロックの配列 */
|
|
977
|
+
selectedBlocks: Block[];
|
|
978
|
+
/** ブロック更新時のコールバック */
|
|
979
|
+
onUpdateBlocks: (updates: Record<string, Partial<Block>>, options?: {
|
|
980
|
+
mergeKey?: string;
|
|
981
|
+
}) => void;
|
|
982
|
+
/** グリッドサイズ(最大入力値の制限に使用) */
|
|
983
|
+
gridSize?: {
|
|
984
|
+
cols: number;
|
|
985
|
+
rows: number;
|
|
986
|
+
};
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
/**
|
|
990
|
+
* 線のスタイル定義(色・幅・種別)。
|
|
991
|
+
*/
|
|
992
|
+
declare interface LineStyle {
|
|
993
|
+
/** CSS カラー値 */
|
|
994
|
+
color: string;
|
|
995
|
+
/** 線の幅 */
|
|
996
|
+
width: Dimension<BorderUnit>;
|
|
997
|
+
/** 線の種別 */
|
|
998
|
+
type: LineType;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
/**
|
|
1002
|
+
* 枠線・区切り線に適用するスタイル種別。
|
|
1003
|
+
*/
|
|
1004
|
+
declare enum LineType {
|
|
1005
|
+
/** 実線 */
|
|
1006
|
+
SOLID = "solid",
|
|
1007
|
+
/** 破線 */
|
|
1008
|
+
DASHED = "dashed",
|
|
1009
|
+
/** 点線 */
|
|
1010
|
+
DOTTED = "dotted"
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
/**
|
|
1014
|
+
* マージンを変更するパネル。
|
|
1015
|
+
*
|
|
1016
|
+
* @remarks
|
|
1017
|
+
* **Shell** — 全辺一括設定モードあり。
|
|
1018
|
+
*/
|
|
1019
|
+
export declare const MarginPanel: {
|
|
1020
|
+
({ paper, onPaperChange }: MarginPanelProps): JSX.Element;
|
|
1021
|
+
displayName: string;
|
|
1022
|
+
};
|
|
1023
|
+
|
|
1024
|
+
/**
|
|
1025
|
+
* `MarginPanel` コンポーネントへの props。
|
|
1026
|
+
*/
|
|
1027
|
+
export declare interface MarginPanelProps {
|
|
1028
|
+
/** 用紙設定 */
|
|
1029
|
+
paper: Paper;
|
|
1030
|
+
/** 用紙変更時のコールバック */
|
|
1031
|
+
onPaperChange: (paper: Paper) => void;
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
/**
|
|
1035
|
+
* ブロックの ID と非表示設定を編集するパネル。
|
|
1036
|
+
*
|
|
1037
|
+
* @remarks
|
|
1038
|
+
* **Shell** — ID の重複チェックおよびバリデーションを含む。
|
|
1039
|
+
*/
|
|
1040
|
+
export declare const MetaPanel: default_2.FC<MetaPanelProps>;
|
|
1041
|
+
|
|
1042
|
+
/**
|
|
1043
|
+
* `MetaPanel` コンポーネントへの props。
|
|
1044
|
+
*/
|
|
1045
|
+
export declare interface MetaPanelProps {
|
|
1046
|
+
/** 選択中のブロックの配列 */
|
|
1047
|
+
selectedBlocks: Block[];
|
|
1048
|
+
/** ブロック更新時のコールバック */
|
|
1049
|
+
onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
|
|
1050
|
+
/** 全ブロックの ID セット(重複チェックに使用) */
|
|
1051
|
+
allBlockIds?: Set<string>;
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
/**
|
|
1055
|
+
* `useNoteContext` が組み立てるコンテキストオブジェクト。
|
|
1056
|
+
*
|
|
1057
|
+
* Note / ActionBar / Sidebar / DefaultSelectionActionBarOverlay にそのまま渡して使用する。
|
|
1058
|
+
*/
|
|
1059
|
+
declare interface NoteContext {
|
|
1060
|
+
/** Book(用紙設定・ページを含む) */
|
|
1061
|
+
book: Book;
|
|
1062
|
+
/** Book 変更コールバック */
|
|
1063
|
+
onBookChange: OnBookChange;
|
|
1064
|
+
/** ブロックプラグインのレジストリ(`createPluginRegistry` で生成) */
|
|
1065
|
+
pluginRegistry: PluginRegistry;
|
|
1066
|
+
/** Note を包む `position: relative` なコンテナの ref */
|
|
1067
|
+
containerRef: RefObject<HTMLDivElement | null>;
|
|
1068
|
+
/** バインディングパス対応の値読み書きコンテキスト */
|
|
1069
|
+
bindingContext: BindingContext;
|
|
1070
|
+
/** ブロック挿入・移動・削除などのアクションハンドラコンテキスト */
|
|
1071
|
+
actionContext: ActionContext;
|
|
1072
|
+
/** 各ブロックの現在の入力値 */
|
|
1073
|
+
values: Record<string, Value>;
|
|
1074
|
+
/** 入力値が変更されたときのコールバック */
|
|
1075
|
+
onValuesChange?: OnValuesChange;
|
|
1076
|
+
/**
|
|
1077
|
+
* フルエディター用の UI 状態。
|
|
1078
|
+
* DefaultSelectionActionBarOverlay / getDefaultActionBarSections / getDefaultSidebarTabs
|
|
1079
|
+
* はこのフィールドを参照する。
|
|
1080
|
+
*/
|
|
1081
|
+
editorState: EditorState;
|
|
1082
|
+
}
|
|
1083
|
+
|
|
1084
|
+
/**
|
|
1085
|
+
* Note の表示・編集モード。
|
|
1086
|
+
*/
|
|
1087
|
+
declare enum NoteMode {
|
|
1088
|
+
/**
|
|
1089
|
+
* ブロックの配置・サイズ変更、グリッド設定、`initValue`(初期値)の設定が可能。
|
|
1090
|
+
*
|
|
1091
|
+
* 入力コントロールは動作するが、値はセッション内のみ保持される(永続化されない)。
|
|
1092
|
+
*/
|
|
1093
|
+
FORM = "Form",
|
|
1094
|
+
/**
|
|
1095
|
+
* ブロックの値を入力・編集できる。
|
|
1096
|
+
*
|
|
1097
|
+
* レイアウトや `initValue` は変更不可。
|
|
1098
|
+
*/
|
|
1099
|
+
EDIT = "Edit",
|
|
1100
|
+
/**
|
|
1101
|
+
* すべて読み取り専用。入力コントロールは無効。
|
|
1102
|
+
*
|
|
1103
|
+
* `showValidation` によるバリデーション結果の表示が有効。
|
|
1104
|
+
*/
|
|
1105
|
+
VIEW = "View"
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
/**
|
|
1109
|
+
* 数値入力コンポーネント。
|
|
1110
|
+
*
|
|
1111
|
+
* @remarks
|
|
1112
|
+
* **Shell** — プラグインプロパティの編集 UI として使用する。
|
|
1113
|
+
*/
|
|
1114
|
+
export declare const NumberInput: {
|
|
1115
|
+
({ value, onChange, readOnly, min: propMin, max: propMax, step: propStep, integer: propInteger, placeholder: propPlaceholder, width: propWidth, height: propHeight, ariaLabel, config, onBlur, }: NumberInputProps): default_2.ReactElement;
|
|
1116
|
+
displayName: string;
|
|
1117
|
+
};
|
|
1118
|
+
|
|
1119
|
+
/**
|
|
1120
|
+
* 数値入力の設定オブジェクト。
|
|
1121
|
+
*
|
|
1122
|
+
* @remarks
|
|
1123
|
+
* **Shell** — `NumberInputProps.config` に渡す設定値の型。
|
|
1124
|
+
*/
|
|
1125
|
+
export declare interface NumberInputConfig {
|
|
1126
|
+
/** 最小値 */
|
|
1127
|
+
min?: number;
|
|
1128
|
+
/** 最大値 */
|
|
1129
|
+
max?: number;
|
|
1130
|
+
/** ステップ幅 */
|
|
1131
|
+
step?: number;
|
|
1132
|
+
/** `true` のとき入力値を整数に丸める */
|
|
1133
|
+
integer?: boolean;
|
|
1134
|
+
/** プレースホルダーテキスト */
|
|
1135
|
+
placeholder?: string;
|
|
1136
|
+
/** 幅(px) */
|
|
1137
|
+
width?: number;
|
|
1138
|
+
/** 高さ(px) */
|
|
1139
|
+
height?: number;
|
|
1140
|
+
[key: string]: Value | undefined;
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
/**
|
|
1144
|
+
* 数値入力コンポーネントへの props。
|
|
1145
|
+
*/
|
|
1146
|
+
export declare interface NumberInputProps extends PropertyComponentProps<number | undefined> {
|
|
1147
|
+
/** 最小値 */
|
|
1148
|
+
min?: number;
|
|
1149
|
+
/** 最大値 */
|
|
1150
|
+
max?: number;
|
|
1151
|
+
/** ステップ幅 */
|
|
1152
|
+
step?: number;
|
|
1153
|
+
/** `true` のとき入力値を整数に丸める */
|
|
1154
|
+
integer?: boolean;
|
|
1155
|
+
/** プレースホルダーテキスト */
|
|
1156
|
+
placeholder?: string;
|
|
1157
|
+
/** 幅(px) */
|
|
1158
|
+
width?: number;
|
|
1159
|
+
/** 高さ(px) */
|
|
1160
|
+
height?: number;
|
|
1161
|
+
/** `aria-label` 属性に設定するテキスト */
|
|
1162
|
+
ariaLabel?: string;
|
|
1163
|
+
/** `min`/`max`/`step` 等をまとめた設定オブジェクト。フィールドより優先度が低い */
|
|
1164
|
+
config?: NumberInputConfig;
|
|
1165
|
+
/** フォーカスが外れたときのコールバック */
|
|
1166
|
+
onBlur?: () => void;
|
|
1167
|
+
}
|
|
1168
|
+
|
|
1169
|
+
/**
|
|
1170
|
+
* Book 全体の変更通知(ブロック・グリッド・用紙変更を一本で扱う)。
|
|
1171
|
+
*
|
|
1172
|
+
* @remarks
|
|
1173
|
+
* `options.mergeKey` を指定すると、同一キーの連続変更が履歴上でマージされる。
|
|
1174
|
+
* `options.noTimeWindow` を `true` にすると 500ms の時間窓制限なしにマージされる(セッション型用)。
|
|
1175
|
+
* ドラッグ中の連続更新やパネルのキー入力など、Undo を細分化したくない場面で使用する。
|
|
1176
|
+
*/
|
|
1177
|
+
declare type OnBookChange = (book: Book, options?: {
|
|
1178
|
+
mergeKey?: string;
|
|
1179
|
+
noTimeWindow?: boolean;
|
|
1180
|
+
}) => void;
|
|
1181
|
+
|
|
1182
|
+
/**
|
|
1183
|
+
* values の変更通知(EDIT モードでの入力値変更)。
|
|
1184
|
+
*
|
|
1185
|
+
* 差分リスト形式で渡される。1 ブロック編集 → 1 要素の配列。
|
|
1186
|
+
* `value` が `undefined` の場合はそのブロックの値を削除する。
|
|
1187
|
+
*
|
|
1188
|
+
* @example
|
|
1189
|
+
* ```tsx
|
|
1190
|
+
* onValuesChange={(changes) => {
|
|
1191
|
+
* setValues(prev => {
|
|
1192
|
+
* const next = { ...prev };
|
|
1193
|
+
* for (const { id, value } of changes) {
|
|
1194
|
+
* if (value === undefined) delete next[id];
|
|
1195
|
+
* else next[id] = value;
|
|
1196
|
+
* }
|
|
1197
|
+
* return next;
|
|
1198
|
+
* });
|
|
1199
|
+
* }}
|
|
1200
|
+
* ```
|
|
1201
|
+
*/
|
|
1202
|
+
declare type OnValuesChange = (changes: ValueChange[]) => void;
|
|
1203
|
+
|
|
1204
|
+
/**
|
|
1205
|
+
* その他設定パネル。インポート・エクスポートなどを含む。
|
|
1206
|
+
*
|
|
1207
|
+
* @remarks
|
|
1208
|
+
* **Shell** — `sections` で内容をカスタマイズできる。
|
|
1209
|
+
*/
|
|
1210
|
+
export declare const OtherPanel: default_2.FC<OtherPanelProps>;
|
|
1211
|
+
|
|
1212
|
+
/**
|
|
1213
|
+
* `OtherPanel` コンポーネントへの props。
|
|
1214
|
+
*/
|
|
1215
|
+
export declare interface OtherPanelProps {
|
|
1216
|
+
/** NoteContext(`useNoteContext` が返すコンテキスト) */
|
|
1217
|
+
context: NoteContext;
|
|
1218
|
+
/** カスタムセクションの配列。未指定時はデフォルト構成(`ImportExportPanel`)が使用される */
|
|
1219
|
+
sections?: ReactNode[];
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1222
|
+
/**
|
|
1223
|
+
* 1ページ分のフォームスキーマ。
|
|
1224
|
+
*/
|
|
1225
|
+
declare interface Page {
|
|
1226
|
+
/** ページの一意 ID。保存済み Book に ID がない場合は {@link ensurePageIds} で付与できる */
|
|
1227
|
+
id?: string;
|
|
1228
|
+
/** グリッド設定(スパース形式)。全列・全行が 1fr の場合は colCount / rowCount のみ */
|
|
1229
|
+
grid: Grid;
|
|
1230
|
+
/** 配置されているブロック一覧 */
|
|
1231
|
+
blocks: Block[];
|
|
1232
|
+
/** ブロック種別ごとの共通デフォルト設定。値解決順序は `Block` の @remarks を参照 */
|
|
1233
|
+
blockDefaults?: BlockDefaults;
|
|
1234
|
+
/** ページ固有のメタデータ(バージョン・タイトルなど) */
|
|
1235
|
+
metaData?: Record<string, Value>;
|
|
1236
|
+
}
|
|
1237
|
+
|
|
1238
|
+
/**
|
|
1239
|
+
* ブロックをドラッグ&ドロップで挿入するためのパレットパネル。
|
|
1240
|
+
*
|
|
1241
|
+
* @remarks
|
|
1242
|
+
* **Shell** — ブロック未選択時にサイドバーに表示される。
|
|
1243
|
+
*/
|
|
1244
|
+
export declare const PalettePanel: {
|
|
1245
|
+
({ context, className }: PalettePanelProps): JSX.Element;
|
|
1246
|
+
displayName: string;
|
|
1247
|
+
};
|
|
1248
|
+
|
|
1249
|
+
/**
|
|
1250
|
+
* `PalettePanel` コンポーネントへの props。
|
|
1251
|
+
*/
|
|
1252
|
+
export declare interface PalettePanelProps {
|
|
1253
|
+
/** NoteContext(`useNoteContext` が返すコンテキスト) */
|
|
1254
|
+
context: NoteContext;
|
|
1255
|
+
/** カスタムクラス名 */
|
|
1256
|
+
className?: string;
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1259
|
+
/**
|
|
1260
|
+
* ページに適用する用紙設定(サイズ・マージン・向き)。
|
|
1261
|
+
*/
|
|
1262
|
+
declare interface Paper {
|
|
1263
|
+
/** 用紙サイズ */
|
|
1264
|
+
size: PaperSize;
|
|
1265
|
+
/** 用紙マージン */
|
|
1266
|
+
margin: PaperMargin;
|
|
1267
|
+
/** 用紙の向き。true = 横向き (landscape)、省略/false = 縦向き (portrait) */
|
|
1268
|
+
orientation?: boolean;
|
|
1269
|
+
/**
|
|
1270
|
+
* 幅自動リサイズ。
|
|
1271
|
+
*
|
|
1272
|
+
* `true` のとき、`widthFit` ブロックの実測幅に合わせてキャンバス幅を広げる。
|
|
1273
|
+
*/
|
|
1274
|
+
autoWidth?: boolean;
|
|
1275
|
+
/**
|
|
1276
|
+
* 高さ自動リサイズ。
|
|
1277
|
+
*
|
|
1278
|
+
* `true` のとき、`heightFit` ブロックの実測高さに合わせてキャンバス高さを広げる。
|
|
1279
|
+
*/
|
|
1280
|
+
autoHeight?: boolean;
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
/**
|
|
1284
|
+
* 用紙サイズに使用できる単位の配列。
|
|
1285
|
+
*/
|
|
1286
|
+
declare const PAPER_UNITS: readonly ["mm", "cm", "inch"];
|
|
1287
|
+
|
|
1288
|
+
/**
|
|
1289
|
+
* 用紙四辺のマージン設定。
|
|
1290
|
+
*/
|
|
1291
|
+
declare interface PaperMargin {
|
|
1292
|
+
top: Dimension<PaperUnit>;
|
|
1293
|
+
right: Dimension<PaperUnit>;
|
|
1294
|
+
bottom: Dimension<PaperUnit>;
|
|
1295
|
+
left: Dimension<PaperUnit>;
|
|
1296
|
+
/**
|
|
1297
|
+
* 一括編集フラグ。`true` のとき、`all` フィールドが四辺の共通値として使われる。
|
|
1298
|
+
*
|
|
1299
|
+
* Book に保存されるため、通常の binding パス `margin.bulk` で読み書きできる。
|
|
1300
|
+
*/
|
|
1301
|
+
bulk?: boolean;
|
|
1302
|
+
/**
|
|
1303
|
+
* 一括モード時の四辺共通マージン値。`bulk` が `true` のときのみ描画・印刷に使用される。
|
|
1304
|
+
*
|
|
1305
|
+
* binding パス `margin.all.value` / `margin.all.unit` で読み書きできる。
|
|
1306
|
+
*/
|
|
1307
|
+
all?: Dimension<PaperUnit>;
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
/**
|
|
1311
|
+
* `ActionBar` 上に用紙サイズプリセット選択を表示するコンパクトなコントロール。
|
|
1312
|
+
*
|
|
1313
|
+
* @remarks
|
|
1314
|
+
* **Shell** — カスタム選択時は幅・高さ・単位の入力も表示される。
|
|
1315
|
+
*/
|
|
1316
|
+
export declare const PaperSettingsSection: {
|
|
1317
|
+
({ paper, onPaperChange, }: PaperSettingsSectionProps): JSX.Element;
|
|
1318
|
+
displayName: string;
|
|
1319
|
+
};
|
|
1320
|
+
|
|
1321
|
+
/**
|
|
1322
|
+
* `PaperSettingsSection` コンポーネントへの props。
|
|
1323
|
+
*/
|
|
1324
|
+
export declare interface PaperSettingsSectionProps {
|
|
1325
|
+
/** 用紙設定 */
|
|
1326
|
+
paper: Paper;
|
|
1327
|
+
/** 用紙変更時のコールバック */
|
|
1328
|
+
onPaperChange: (paper: Paper) => void;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
/**
|
|
1332
|
+
* 用紙サイズ設定。
|
|
1333
|
+
*
|
|
1334
|
+
* @remarks
|
|
1335
|
+
* `preset` が `CUSTOM` 以外の場合も `width` / `height` には実寸が格納される。
|
|
1336
|
+
*/
|
|
1337
|
+
declare interface PaperSize {
|
|
1338
|
+
/** 選択中のプリセット */
|
|
1339
|
+
preset: PaperSizePreset;
|
|
1340
|
+
/** 幅(物理単位)。`CUSTOM` 時はユーザー指定値。 */
|
|
1341
|
+
width: Dimension<PaperUnit>;
|
|
1342
|
+
/** 高さ(物理単位)。`CUSTOM` 時はユーザー指定値。 */
|
|
1343
|
+
height: Dimension<PaperUnit>;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
/**
|
|
1347
|
+
* 用紙サイズ・向き・自動サイズモードを変更するパネル。
|
|
1348
|
+
*
|
|
1349
|
+
* @remarks
|
|
1350
|
+
* **Shell** — カスタム選択時は幅・高さ・単位の入力も表示される。
|
|
1351
|
+
*/
|
|
1352
|
+
export declare const PaperSizePanel: {
|
|
1353
|
+
({ paper, onPaperChange, }: PaperSizePanelProps): JSX.Element;
|
|
1354
|
+
displayName: string;
|
|
1355
|
+
};
|
|
1356
|
+
|
|
1357
|
+
/**
|
|
1358
|
+
* `PaperSizePanel` コンポーネントへの props。
|
|
1359
|
+
*/
|
|
1360
|
+
export declare interface PaperSizePanelProps {
|
|
1361
|
+
/** 用紙設定 */
|
|
1362
|
+
paper: Paper;
|
|
1363
|
+
/** 用紙変更時のコールバック */
|
|
1364
|
+
onPaperChange: (paper: Paper) => void;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
/**
|
|
1368
|
+
* 用紙サイズのプリセット種別。`CUSTOM` 選択時は `PaperSize.width` / `height` が有効になる。
|
|
1369
|
+
*/
|
|
1370
|
+
declare enum PaperSizePreset {
|
|
1371
|
+
A4 = "A4",
|
|
1372
|
+
B5 = "B5",
|
|
1373
|
+
A3 = "A3",
|
|
1374
|
+
LETTER = "Letter",
|
|
1375
|
+
LEGAL = "Legal",
|
|
1376
|
+
CUSTOM = "Custom"
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
/**
|
|
1380
|
+
* 用紙サイズに使用できる単位。
|
|
1381
|
+
*/
|
|
1382
|
+
declare type PaperUnit = (typeof PAPER_UNITS)[number];
|
|
1383
|
+
|
|
1384
|
+
/**
|
|
1385
|
+
* 選択ブロックのプラグイン固有属性パネルを表示するコンポーネント。
|
|
1386
|
+
*
|
|
1387
|
+
* @remarks
|
|
1388
|
+
* **Shell** — プラグインの `propDefs` に従ってプロパティフィールドを動的に表示する。
|
|
1389
|
+
*/
|
|
1390
|
+
export declare const PluginPanels: default_2.FC<PluginPanelsProps>;
|
|
1391
|
+
|
|
1392
|
+
/**
|
|
1393
|
+
* `PluginPanels` コンポーネントへの props。
|
|
1394
|
+
*/
|
|
1395
|
+
export declare interface PluginPanelsProps {
|
|
1396
|
+
/** 選択中のブロックの配列 */
|
|
1397
|
+
selectedBlocks: Block[];
|
|
1398
|
+
/** プラグインレジストリ */
|
|
1399
|
+
pluginRegistry: PluginRegistry;
|
|
1400
|
+
/** ブロック更新時のコールバック */
|
|
1401
|
+
onUpdateBlocks: (updates: Record<string, Partial<Block>>) => void;
|
|
1402
|
+
/** ブロックデフォルト設定 */
|
|
1403
|
+
blockDefaults?: BlockDefaults;
|
|
1404
|
+
/** `true` のときグループヘッダーを表示(デフォルト: `true`) */
|
|
1405
|
+
showGroupHeader?: boolean;
|
|
1406
|
+
}
|
|
1407
|
+
|
|
1408
|
+
/**
|
|
1409
|
+
* `createPluginRegistry` が返す、`block.kind` をキーにしたプラグインレジストリ。
|
|
1410
|
+
*
|
|
1411
|
+
* 未登録の `kind` は `undefined` になるため、アクセス前に存在確認が必要。
|
|
1412
|
+
*/
|
|
1413
|
+
declare type PluginRegistry = Record<string, ResolvedPlugin | undefined>;
|
|
1414
|
+
|
|
1415
|
+
/**
|
|
1416
|
+
* coreのプロパティカタログに登録する1機能の定義。
|
|
1417
|
+
*
|
|
1418
|
+
* @remarks
|
|
1419
|
+
* `defaultProps` は `createPluginRegistry` でプラグイン単位に合成され、実際のブロック描画時は `PropDef.defaultProps` → `page.blockDefaults[kind]` → `block.props` の順でマージされる。
|
|
1420
|
+
*
|
|
1421
|
+
* 後段の値ほど優先される。
|
|
1422
|
+
*/
|
|
1423
|
+
declare interface PropDef {
|
|
1424
|
+
/** プロパティの種別 ID。`BlockPlugin.properties` 内で一意になるよう設定する */
|
|
1425
|
+
kind: string;
|
|
1426
|
+
/** このプロパティを持つブロック種別のデフォルト props */
|
|
1427
|
+
defaultProps: Record<string, Value>;
|
|
1428
|
+
/**
|
|
1429
|
+
* カスタム編集UIコンポーネント(省略時はPropertyFieldのビルトインUIにフォールバック)。
|
|
1430
|
+
*
|
|
1431
|
+
* 外部プラグインは独自のエディタUIをここに渡すことができる。 * * `PropertyComponentProps<Value>` を実装することで `readOnly` が正しく受け取れる。
|
|
1432
|
+
*/
|
|
1433
|
+
component?: ComponentType<PropertyComponentProps<Value>>;
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
/**
|
|
1437
|
+
* UI コンポーネント(Checkbox, NumberInput 等)の共通 Props 基底型。
|
|
1438
|
+
*/
|
|
1439
|
+
declare interface PropertyComponentProps<T> {
|
|
1440
|
+
/** このコンポーネントが編集対象とする現在の値 */
|
|
1441
|
+
value: T;
|
|
1442
|
+
/** 値が変更されたときに呼ばれるコールバック */
|
|
1443
|
+
onChange: (value: T) => void;
|
|
1444
|
+
/**
|
|
1445
|
+
* `true` のとき、ユーザーによる値変更を禁止する。
|
|
1446
|
+
*
|
|
1447
|
+
* カスタムコンポーネントを実装する際は必ずこのフラグを参照してインタラクションを無効化すること。
|
|
1448
|
+
*/
|
|
1449
|
+
readOnly?: boolean;
|
|
1450
|
+
}
|
|
1451
|
+
|
|
1452
|
+
/**
|
|
1453
|
+
* `PropDef` の種類に応じたプロパティ編集フィールドを描画するコンポーネント。
|
|
1454
|
+
*
|
|
1455
|
+
* @remarks
|
|
1456
|
+
* `PluginPanels` から各ブロックのプロパティを編集するために使用される。
|
|
1457
|
+
*/
|
|
1458
|
+
export declare const PropertyField: MemoExoticComponent<({ propDef, selectedBlocks, onChange, onChangeBatch, readOnly, blockDefaults, onResetToDefault, }: PropertyFieldProps) => JSX.Element>;
|
|
1459
|
+
|
|
1460
|
+
/**
|
|
1461
|
+
* `PropDefEditor`(ブロックデフォルト用)および `PropertyField` コンポーネントへの props。
|
|
1462
|
+
*/
|
|
1463
|
+
export declare interface PropertyFieldProps {
|
|
1464
|
+
/** プロパティ定義(種類・ドィスプレイ名・デフォルト値など) */
|
|
1465
|
+
propDef: PropDef;
|
|
1466
|
+
/** 選択中のブロックの配列 */
|
|
1467
|
+
selectedBlocks: Block[];
|
|
1468
|
+
/** 容橋値変更時のコールバック */
|
|
1469
|
+
onChange: (key: string, value: Value) => void;
|
|
1470
|
+
/** 複数値一括変更時のコールバック */
|
|
1471
|
+
onChangeBatch?: (updates: Record<string, Value>) => void;
|
|
1472
|
+
/** `true` のときカスタムコンポーネントに `readOnly` を渡す */
|
|
1473
|
+
readOnly?: boolean;
|
|
1474
|
+
/** ブロックデフォルト設定 */
|
|
1475
|
+
blockDefaults?: BlockDefaults;
|
|
1476
|
+
/** デフォルト値にリセット実行時のコールバック */
|
|
1477
|
+
onResetToDefault?: (keys: string[]) => void;
|
|
1478
|
+
}
|
|
1479
|
+
|
|
1480
|
+
/**
|
|
1481
|
+
* Renderer コンポーネントが受け取る props。
|
|
1482
|
+
*/
|
|
1483
|
+
declare interface RendererProps<P = Record<string, Value>, V = Value> {
|
|
1484
|
+
/** ブロック ID */
|
|
1485
|
+
id: string;
|
|
1486
|
+
/** ブロックのプロパティ(プラグイン固有型) */
|
|
1487
|
+
props: P;
|
|
1488
|
+
/** ブロックの値 */
|
|
1489
|
+
value: V;
|
|
1490
|
+
/** 値の変更通知コールバック */
|
|
1491
|
+
onChange: (value: V) => void;
|
|
1492
|
+
/** フォーカス離脱時の値確定通知コールバック(オプション) */
|
|
1493
|
+
onBlur?: (value: V) => void;
|
|
1494
|
+
/**
|
|
1495
|
+
* 読み取り専用フラグ。
|
|
1496
|
+
*
|
|
1497
|
+
* `BlockContainer` が以下のロジックで計算して渡す。
|
|
1498
|
+
*
|
|
1499
|
+
* - EDIT モード: `block.behavior?.readOnly ?? false`
|
|
1500
|
+
*
|
|
1501
|
+
* - FORM / VIEW モード: 常に `true`
|
|
1502
|
+
*/
|
|
1503
|
+
readOnly: boolean;
|
|
1504
|
+
/** Note のモード(`EDIT` / `VIEW` / `FORM`) */
|
|
1505
|
+
mode: NoteMode;
|
|
1506
|
+
/** ブロックの描画領域(px)。未設定時は auto として扱う */
|
|
1507
|
+
dimensions?: {
|
|
1508
|
+
widthPx: number;
|
|
1509
|
+
heightPx: number;
|
|
1510
|
+
};
|
|
1511
|
+
/**
|
|
1512
|
+
* ブロック幅の実測値(px)を通知するコールバック。
|
|
1513
|
+
*
|
|
1514
|
+
* `block.behavior.widthFit === true` のブロックに限り `BlockContainer` から渡される。
|
|
1515
|
+
*/
|
|
1516
|
+
onMeasureWidth?: (widthPx: number) => void;
|
|
1517
|
+
/**
|
|
1518
|
+
* ブロック高さの実測値(px)を通知するコールバック。
|
|
1519
|
+
*
|
|
1520
|
+
* `block.behavior.heightFit === true` のブロックに限り `BlockContainer` から渡される。
|
|
1521
|
+
*/
|
|
1522
|
+
onMeasureHeight?: (heightPx: number) => void;
|
|
1523
|
+
/** `BindingContext`(値の読み書きパス解決)。必要なブロックのみ参照する */
|
|
1524
|
+
bindingContext?: BindingContext;
|
|
1525
|
+
/** `ActionContext`(undo/redo 等のアクション実行)。必要なブロックのみ参照する */
|
|
1526
|
+
actionContext?: ActionContext;
|
|
1527
|
+
/** アクセシビリティラベル。`BlockRenderer` が `resolvedPlugin.meta.displayName` を自動セットする */
|
|
1528
|
+
ariaLabel?: string;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
/**
|
|
1532
|
+
* レジストリに登録された解決済みプラグイン。
|
|
1533
|
+
*
|
|
1534
|
+
* @remarks
|
|
1535
|
+
* BlockPlugin<P,V> のジェネリクスを型消去し、Shell/Canvas 層が any なしで扱えるフラットな構造にまとめたもの。
|
|
1536
|
+
*
|
|
1537
|
+
* Renderer の P/V variance 問題は BaseRenderer 型への単一キャストで解決。
|
|
1538
|
+
*/
|
|
1539
|
+
declare interface ResolvedPlugin {
|
|
1540
|
+
/** `block.kind` と対応するプラグインの一意識別子 */
|
|
1541
|
+
kind: string;
|
|
1542
|
+
/** UI 表示・アイコン・デフォルトサイズ等のメタ情報 */
|
|
1543
|
+
meta: BlockPluginMeta;
|
|
1544
|
+
/** プロパティパネルに表示するプロパティ定義一覧 */
|
|
1545
|
+
properties: PropDef[];
|
|
1546
|
+
/** プラグインの全 `PropDef.defaultProps` を合成した、このブロック種別のデフォルト props */
|
|
1547
|
+
defaultProps: Record<string, Value>;
|
|
1548
|
+
/**
|
|
1549
|
+
* ブロックを描画する Renderer コンポーネント。
|
|
1550
|
+
*
|
|
1551
|
+
* BlockPlugin<P,V>.Renderer を格納する際、P/V の variance 問題を回避するためベース型にキャストしている。
|
|
1552
|
+
*
|
|
1553
|
+
* 実行時には block.props(解決済み)と value が渡されるため安全。
|
|
1554
|
+
*/
|
|
1555
|
+
Renderer: BaseRenderer;
|
|
1556
|
+
/** 旧バージョンの props を現バージョンに変換する。`validateProps` の前に呼ばれる */
|
|
1557
|
+
migrateProps?: (props: unknown) => Record<string, unknown>;
|
|
1558
|
+
/**
|
|
1559
|
+
* ストレージから読み込んだ生の `block.props` をサニタイズして型安全な Props に変換する。
|
|
1560
|
+
*
|
|
1561
|
+
* 省略時は raw オブジェクトをそのまま使用する。
|
|
1562
|
+
*/
|
|
1563
|
+
validateProps?: (props: unknown) => Record<string, Value>;
|
|
1564
|
+
/**
|
|
1565
|
+
* 外部 state から読み込んだ生の値をサニタイズする。
|
|
1566
|
+
*
|
|
1567
|
+
* `undefined` を返した場合は `block.initValue`、それもなければ raw 値にフォールバックする。
|
|
1568
|
+
*
|
|
1569
|
+
* フォールバックを指示する場合にのみ `undefined` を使い、`null` は正当な値として返せる。
|
|
1570
|
+
*
|
|
1571
|
+
* 省略時は raw 値をそのまま使用する。
|
|
1572
|
+
*/
|
|
1573
|
+
validateValue?: (value: unknown, props: Record<string, Value>) => Value | undefined;
|
|
1574
|
+
}
|
|
1575
|
+
|
|
1576
|
+
/**
|
|
1577
|
+
* フローティングボタンバー + ポップオーバーフレームワークのコンテナ。
|
|
1578
|
+
*
|
|
1579
|
+
* @remarks
|
|
1580
|
+
* **Shell** — `items` 配列でボタン・パネルを渡す。デフォルト構成は `getDefaultSelectionActionBarItems()` で取得できる。
|
|
1581
|
+
*/
|
|
1582
|
+
export declare const SelectionActionBar: {
|
|
1583
|
+
({ items, className, style, onPointerDown, }: SelectionActionBarProps): JSX.Element;
|
|
1584
|
+
displayName: string;
|
|
1585
|
+
};
|
|
1586
|
+
|
|
1587
|
+
/**
|
|
1588
|
+
* `SelectionActionBar` の個別ボタン。バー以外の UI からも単体で使用可能。
|
|
1589
|
+
*
|
|
1590
|
+
* @remarks
|
|
1591
|
+
* **Shell** — `SelectionActionBar` の各ボタン。
|
|
1592
|
+
*/
|
|
1593
|
+
export declare const SelectionActionBarButton: {
|
|
1594
|
+
({ icon, label, onClick, onMouseEnter, title, disabled, }: SelectionActionBarButtonProps): ReactNode;
|
|
1595
|
+
displayName: string;
|
|
1596
|
+
};
|
|
1597
|
+
|
|
1598
|
+
/**
|
|
1599
|
+
* `SelectionActionBarButton` コンポーネントへの props。
|
|
1600
|
+
*/
|
|
1601
|
+
export declare interface SelectionActionBarButtonProps {
|
|
1602
|
+
/** ボタン内に表示するアイコン(SVG コンポーネントや絵文字など) */
|
|
1603
|
+
icon: ReactNode;
|
|
1604
|
+
/** aria-label / title に使用するラベル */
|
|
1605
|
+
label: string;
|
|
1606
|
+
/** クリック時のコールバック */
|
|
1607
|
+
onClick?: () => void;
|
|
1608
|
+
/** マウスオーバー時のコールバック */
|
|
1609
|
+
onMouseEnter?: () => void;
|
|
1610
|
+
/** ツールチップに表示するテキスト(省略時は `label` を使用) */
|
|
1611
|
+
title?: string;
|
|
1612
|
+
/** `true` のときボタンを無効化 */
|
|
1613
|
+
disabled?: boolean;
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
/**
|
|
1617
|
+
* `SelectionActionBar` コンテキストで共有される値。
|
|
1618
|
+
*/
|
|
1619
|
+
export declare interface SelectionActionBarContextValue {
|
|
1620
|
+
/** 現在開いているパネルの ID */
|
|
1621
|
+
openPanel: string | null;
|
|
1622
|
+
/** ホバーでパネルを開く */
|
|
1623
|
+
openPanelByHover: (panelId: string) => void;
|
|
1624
|
+
/** クリックでパネルを開く */
|
|
1625
|
+
openPanelByClick: (panelId: string) => void;
|
|
1626
|
+
/** バー外のイベント用 pointer-down ハンドラ */
|
|
1627
|
+
onPointerDown?: default_2.PointerEventHandler<HTMLDivElement>;
|
|
1628
|
+
/** ポータルベースのポップオーバー描画用ターゲット要素 */
|
|
1629
|
+
wrapperEl: HTMLDivElement | null;
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
/**
|
|
1633
|
+
* `selectionBoundingBox` の右上コーナーの右上に `children` を浮かせるコンテナ。
|
|
1634
|
+
*
|
|
1635
|
+
* @remarks
|
|
1636
|
+
* **Shell** — `isDragging=true` または `selectionBoundingBox` が `null` の場合は何も描画しない。
|
|
1637
|
+
*
|
|
1638
|
+
* 配置ルール: 水平はバーの右端を `bbox.right` に揃える。垂直はブロック上に表示し上端がキャンバス外の場合はブロック下に反転。
|
|
1639
|
+
*/
|
|
1640
|
+
export declare const SelectionActionBarOverlay: ({ selectionBoundingBox, isDragging, zIndex, children, }: SelectionActionBarOverlayProps) => JSX.Element | null;
|
|
1641
|
+
|
|
1642
|
+
/**
|
|
1643
|
+
* `SelectionActionBarOverlay` コンポーネントへの props。
|
|
1644
|
+
*/
|
|
1645
|
+
export declare interface SelectionActionBarOverlayProps {
|
|
1646
|
+
/**
|
|
1647
|
+
* 選択ブロック群の bounding box(px座標)。
|
|
1648
|
+
*
|
|
1649
|
+
* `useSelectionBoundingBox` で算出して渡す。`null` の場合は非表示。
|
|
1650
|
+
*/
|
|
1651
|
+
selectionBoundingBox?: SelectionBoundingBox | null;
|
|
1652
|
+
/** ドラッグ中のとき `true` を渡すと非表示になる */
|
|
1653
|
+
isDragging?: boolean;
|
|
1654
|
+
/** z-index(デフォルト: `Z_INDEX.SELECTION_ACTION_BAR`) */
|
|
1655
|
+
zIndex?: number;
|
|
1656
|
+
/** オーバーレイ内に描画するコンテンツ */
|
|
1657
|
+
children?: ReactNode;
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
/**
|
|
1661
|
+
* `SelectionActionBar` 内でポップオーバーパネルを1件管理するコンポーネント。
|
|
1662
|
+
*
|
|
1663
|
+
* @remarks
|
|
1664
|
+
* **Shell** — トリガーボタンはバー内に描画し、ポップオーバーはラッパー要素にポータル描画される。
|
|
1665
|
+
*/
|
|
1666
|
+
export declare const SelectionActionBarPanel: {
|
|
1667
|
+
({ id, icon, label, children, }: SelectionActionBarPanelProps): JSX.Element;
|
|
1668
|
+
displayName: string;
|
|
1669
|
+
};
|
|
1670
|
+
|
|
1671
|
+
/**
|
|
1672
|
+
* `SelectionActionBarPanel` コンポーネントへの props。
|
|
1673
|
+
*/
|
|
1674
|
+
export declare interface SelectionActionBarPanelProps {
|
|
1675
|
+
/** このパネルを一意に識別する ID */
|
|
1676
|
+
id: string;
|
|
1677
|
+
/** トリガーボタンのアイコン(SVG コンポーネントや絵文字など) */
|
|
1678
|
+
icon: ReactNode;
|
|
1679
|
+
/** トリガーボタンのラベル(aria-label) */
|
|
1680
|
+
label: string;
|
|
1681
|
+
/** ポップオーバーのコンテンツ */
|
|
1682
|
+
children: ReactNode;
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
/**
|
|
1686
|
+
* `SelectionActionBar` コンポーネントへの props。
|
|
1687
|
+
*/
|
|
1688
|
+
export declare interface SelectionActionBarProps {
|
|
1689
|
+
/**
|
|
1690
|
+
* バーに表示するアイテムの配列(SelectionActionBarButton / SelectionActionBarPanel など)。
|
|
1691
|
+
* デフォルト値は `getDefaultSelectionActionBarItems()` で取得できる。
|
|
1692
|
+
*/
|
|
1693
|
+
items?: ReactNode[];
|
|
1694
|
+
/** バールート要素への追加 CSS クラス */
|
|
1695
|
+
className?: string;
|
|
1696
|
+
/** バールート要素へのインラインスタイル */
|
|
1697
|
+
style?: default_2.CSSProperties;
|
|
1698
|
+
/** コンテキストに渡す pointer-down ハンドラ */
|
|
1699
|
+
onPointerDown?: default_2.PointerEventHandler<HTMLDivElement>;
|
|
1700
|
+
}
|
|
1701
|
+
|
|
1702
|
+
/**
|
|
1703
|
+
* 選択ブロック群全体を囲む bounding box(px 座標)を表す型。
|
|
1704
|
+
*/
|
|
1705
|
+
export declare interface SelectionBoundingBox {
|
|
1706
|
+
left: number;
|
|
1707
|
+
top: number;
|
|
1708
|
+
right: number;
|
|
1709
|
+
bottom: number;
|
|
1710
|
+
width: number;
|
|
1711
|
+
height: number;
|
|
1712
|
+
}
|
|
1713
|
+
|
|
1714
|
+
/**
|
|
1715
|
+
* JSON シリアライズ可能なプロパティのみを持つオブジェクト型の境界。
|
|
1716
|
+
*
|
|
1717
|
+
* `BlockPlugin<P>` / `Block<P>` の型引数制約として使用し、`P` に関数・クラスインスタンス・DOM 要素など非 serializable な型が混入した場合に型エラーとして検出する。
|
|
1718
|
+
*
|
|
1719
|
+
* オプショナルフィールド(`?`)は `undefined` を許容するため `Value | undefined` としている。
|
|
1720
|
+
*/
|
|
1721
|
+
declare type SerializableRecord = Record<string, Value | undefined>;
|
|
1722
|
+
|
|
1723
|
+
/**
|
|
1724
|
+
* サイドバー/フローティングウィジェットのルート要素に付与する props。
|
|
1725
|
+
*
|
|
1726
|
+
* @remarks
|
|
1727
|
+
* **Shell** — スプレッドすることで `NoteForm` の選択解除ロジックの対象外になる。
|
|
1728
|
+
*/
|
|
1729
|
+
export declare const SIDEBAR_PORTAL_PROPS: {
|
|
1730
|
+
readonly "data-sidebar": "true";
|
|
1731
|
+
};
|
|
1732
|
+
|
|
1733
|
+
/**
|
|
1734
|
+
* NoteForm がサイドバー領域を判定するためのセレクタ。
|
|
1735
|
+
*
|
|
1736
|
+
* @remarks
|
|
1737
|
+
* **Shell** — カスタムサイドバー実装時にルート要素へ付与する `data-sidebar="true"` を選択する。
|
|
1738
|
+
*/
|
|
1739
|
+
export declare const SIDEBAR_PORTAL_SELECTOR = "[data-sidebar=\"true\"]";
|
|
1740
|
+
|
|
1741
|
+
/**
|
|
1742
|
+
* タブパネル共通コンポーネント。
|
|
1743
|
+
*
|
|
1744
|
+
* @remarks
|
|
1745
|
+
* **Shell** — サイドバーのタブコンテンツ領域として使用する。
|
|
1746
|
+
*/
|
|
1747
|
+
export declare const TabPanel: ({ children, emptyMessage, className, }: TabPanelProps) => JSX.Element;
|
|
1748
|
+
|
|
1749
|
+
/**
|
|
1750
|
+
* タブパネル共通コンポーネントへの props。
|
|
1751
|
+
*/
|
|
1752
|
+
export declare interface TabPanelProps {
|
|
1753
|
+
/** パネルの内容 */
|
|
1754
|
+
children: ReactNode;
|
|
1755
|
+
/** 空状態のメッセージ(childrenがない場合に表示) */
|
|
1756
|
+
emptyMessage?: string;
|
|
1757
|
+
/** カスタムクラス名 */
|
|
1758
|
+
className?: string;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
/**
|
|
1762
|
+
* タブコンテナコンポーネント。
|
|
1763
|
+
*
|
|
1764
|
+
* @remarks
|
|
1765
|
+
* **Shell** — サイドバー・パネルのタブ UI として使用する。
|
|
1766
|
+
*/
|
|
1767
|
+
export declare const Tabs: default_2.FC<TabsProps>;
|
|
1768
|
+
|
|
1769
|
+
/**
|
|
1770
|
+
* タブコンテンツコンポーネント。
|
|
1771
|
+
*
|
|
1772
|
+
* @remarks
|
|
1773
|
+
* **Shell** — `Tabs` の子要素として使用する。
|
|
1774
|
+
*/
|
|
1775
|
+
export declare const TabsContent: default_2.FC<TabsContentProps>;
|
|
1776
|
+
|
|
1777
|
+
/**
|
|
1778
|
+
* タブコンテンツコンポーネントへの props。
|
|
1779
|
+
*/
|
|
1780
|
+
export declare interface TabsContentProps {
|
|
1781
|
+
/** 対応するタブ値(`TabsTrigger.value` と対応) */
|
|
1782
|
+
value: string;
|
|
1783
|
+
/** 表示する内容 */
|
|
1784
|
+
children: default_2.ReactNode;
|
|
1785
|
+
/** カスタムクラス名 */
|
|
1786
|
+
className?: string;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
/**
|
|
1790
|
+
* タブリストコンポーネント。
|
|
1791
|
+
*
|
|
1792
|
+
* @remarks
|
|
1793
|
+
* **Shell** — `Tabs` の子要素として使用する。
|
|
1794
|
+
*/
|
|
1795
|
+
export declare const TabsList: default_2.FC<TabsListProps>;
|
|
1796
|
+
|
|
1797
|
+
/**
|
|
1798
|
+
* タブリストコンポーネントへの props。
|
|
1799
|
+
*/
|
|
1800
|
+
export declare interface TabsListProps {
|
|
1801
|
+
/** 子要素 */
|
|
1802
|
+
children: default_2.ReactNode;
|
|
1803
|
+
/** カスタムクラス名 */
|
|
1804
|
+
className?: string;
|
|
1805
|
+
/** 幅(px) */
|
|
1806
|
+
width?: number;
|
|
1807
|
+
/** 高さ(px) */
|
|
1808
|
+
height?: number;
|
|
1809
|
+
/** インラインスタイル */
|
|
1810
|
+
style?: default_2.CSSProperties;
|
|
1811
|
+
}
|
|
1812
|
+
|
|
1813
|
+
/**
|
|
1814
|
+
* タブコンテナコンポーネントへの props。
|
|
1815
|
+
*/
|
|
1816
|
+
export declare interface TabsProps {
|
|
1817
|
+
/** 初期選択タブの値 */
|
|
1818
|
+
defaultValue: string;
|
|
1819
|
+
/** 外部制御時の選択タブ値 */
|
|
1820
|
+
value?: string;
|
|
1821
|
+
/** 選択タブ変更時のコールバック */
|
|
1822
|
+
onValueChange?: (value: string) => void;
|
|
1823
|
+
/** 子要素 */
|
|
1824
|
+
children: default_2.ReactNode;
|
|
1825
|
+
/** 表示バリアント。`segmented` は分割ボタン型 */
|
|
1826
|
+
variant?: "default" | "segmented";
|
|
1827
|
+
/** カスタムクラス名 */
|
|
1828
|
+
className?: string;
|
|
1829
|
+
}
|
|
1830
|
+
|
|
1831
|
+
/**
|
|
1832
|
+
* タブトリガーボタンコンポーネント。
|
|
1833
|
+
*
|
|
1834
|
+
* @remarks
|
|
1835
|
+
* **Shell** — `TabsList` の子要素として使用する。
|
|
1836
|
+
*/
|
|
1837
|
+
export declare const TabsTrigger: default_2.FC<TabsTriggerProps>;
|
|
1838
|
+
|
|
1839
|
+
/**
|
|
1840
|
+
* タブトリガーボタンコンポーネントへの props。
|
|
1841
|
+
*/
|
|
1842
|
+
export declare interface TabsTriggerProps {
|
|
1843
|
+
/** このトリガーが対応するタブ値(`TabsContent.value` と対応) */
|
|
1844
|
+
value: string;
|
|
1845
|
+
/** ボタン内に表示する内容 */
|
|
1846
|
+
children: default_2.ReactNode;
|
|
1847
|
+
/** カスタムクラス名 */
|
|
1848
|
+
className?: string;
|
|
1849
|
+
/** `true` のとき非活性化 */
|
|
1850
|
+
disabled?: boolean;
|
|
1851
|
+
/** 幅(px) */
|
|
1852
|
+
width?: number;
|
|
1853
|
+
/** 高さ(px) */
|
|
1854
|
+
height?: number;
|
|
1855
|
+
/** インラインスタイル */
|
|
1856
|
+
style?: default_2.CSSProperties;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
/**
|
|
1860
|
+
* テキスト入力コンポーネント。
|
|
1861
|
+
*
|
|
1862
|
+
* @remarks
|
|
1863
|
+
* **Shell** — プラグインプロパティの編集 UI として使用する。
|
|
1864
|
+
*/
|
|
1865
|
+
export declare const TextInput: {
|
|
1866
|
+
({ value, onChange, readOnly, placeholder: propPlaceholder, maxLength: propMaxLength, multiline: propMultiline, rows: propRows, width, height, ariaLabel, config, onBlur, }: TextInputProps): default_2.ReactElement;
|
|
1867
|
+
displayName: string;
|
|
1868
|
+
};
|
|
1869
|
+
|
|
1870
|
+
/**
|
|
1871
|
+
* テキスト入力の設定オブジェクト。
|
|
1872
|
+
*
|
|
1873
|
+
* @remarks
|
|
1874
|
+
* **Shell** — `TextInputProps.config` に渡す設定値の型。
|
|
1875
|
+
*/
|
|
1876
|
+
export declare interface TextInputConfig {
|
|
1877
|
+
/** プレースホルダーテキスト */
|
|
1878
|
+
placeholder?: string;
|
|
1879
|
+
/** 最大文字数 */
|
|
1880
|
+
maxLength?: number;
|
|
1881
|
+
/** `true` のとき `<textarea>` で表示する */
|
|
1882
|
+
multiline?: boolean;
|
|
1883
|
+
/** `multiline` のとき表示する行数 */
|
|
1884
|
+
rows?: number;
|
|
1885
|
+
/** 幅(px) */
|
|
1886
|
+
width?: number;
|
|
1887
|
+
/** 高さ(px) */
|
|
1888
|
+
height?: number;
|
|
1889
|
+
[key: string]: Value | undefined;
|
|
1890
|
+
}
|
|
1891
|
+
|
|
1892
|
+
/**
|
|
1893
|
+
* テキスト入力コンポーネントへの props。
|
|
1894
|
+
*/
|
|
1895
|
+
export declare interface TextInputProps extends PropertyComponentProps<string | undefined> {
|
|
1896
|
+
/** プレースホルダーテキスト */
|
|
1897
|
+
placeholder?: string;
|
|
1898
|
+
/** 最大文字数 */
|
|
1899
|
+
maxLength?: number;
|
|
1900
|
+
/** `true` のとき `<textarea>` で表示する */
|
|
1901
|
+
multiline?: boolean;
|
|
1902
|
+
/** `multiline` のとき表示する行数 */
|
|
1903
|
+
rows?: number;
|
|
1904
|
+
/** 幅(px) */
|
|
1905
|
+
width?: number;
|
|
1906
|
+
/** 高さ(px) */
|
|
1907
|
+
height?: number;
|
|
1908
|
+
/** `aria-label` 属性に設定するテキスト */
|
|
1909
|
+
ariaLabel?: string;
|
|
1910
|
+
/** 各フィールドをまとめた設定オブジェクト。フィールドより優先度が低い */
|
|
1911
|
+
config?: TextInputConfig;
|
|
1912
|
+
/** フォーカスが外れたときのコールバック */
|
|
1913
|
+
onBlur?: () => void;
|
|
1914
|
+
}
|
|
1915
|
+
|
|
1916
|
+
/**
|
|
1917
|
+
* このパッケージで使用できる全単位。
|
|
1918
|
+
*/
|
|
1919
|
+
declare type Unit = (typeof ALL_UNITS)[number];
|
|
1920
|
+
|
|
1921
|
+
/**
|
|
1922
|
+
* `SelectionActionBar` コンテキスト値を取得するフック。
|
|
1923
|
+
*
|
|
1924
|
+
* @remarks
|
|
1925
|
+
* **Shell** — `SelectionActionBar` の子コンポーネント内でのみ使用可能。
|
|
1926
|
+
*
|
|
1927
|
+
* バー外で呼び出すと `Error` をスローする。
|
|
1928
|
+
*/
|
|
1929
|
+
export declare function useSelectionActionBar(): SelectionActionBarContextValue;
|
|
1930
|
+
|
|
1931
|
+
/**
|
|
1932
|
+
* 選択中ブロックたちの bounding box を返す。
|
|
1933
|
+
*
|
|
1934
|
+
* 選択ブロックが 0 件、または存在しない ID のみの場合は `null` を返す。
|
|
1935
|
+
*
|
|
1936
|
+
* @remarks
|
|
1937
|
+
* **Shell** — 結果は `useMemo` でメモ化される。
|
|
1938
|
+
*/
|
|
1939
|
+
export declare function useSelectionBoundingBox(blocks: Block[], selectedBlockIds: string[], getBlockRectPx: (block: Block) => BlockRectPx): SelectionBoundingBox | null;
|
|
1940
|
+
|
|
1941
|
+
/**
|
|
1942
|
+
* 選択中ブロックの bounding box をコンテナ相対 px 座標で返すフック。
|
|
1943
|
+
*
|
|
1944
|
+
* @remarks
|
|
1945
|
+
* **Shell** — `position: relative` なコンテナ内に `<Note>` と `<DefaultSelectionActionBarOverlay>` を並べる構成で使用する。
|
|
1946
|
+
*
|
|
1947
|
+
* 「いつ再計測するか」は呼び出し側の責任。ブロックの座標変化時にも再計測したい場合は、
|
|
1948
|
+
* `selectedBlockIds` に新しい配列参照を渡すこと。
|
|
1949
|
+
*
|
|
1950
|
+
* @example
|
|
1951
|
+
* ```tsx
|
|
1952
|
+
* const containerRef = useRef<HTMLDivElement>(null);
|
|
1953
|
+
* const selectionBoundingBox = useSelectionBounds(containerRef, selectedBlockIds);
|
|
1954
|
+
* ```
|
|
1955
|
+
*
|
|
1956
|
+
* @param containerRef - Note を包む `position: relative` なコンテナの ref
|
|
1957
|
+
* @param selectedBlockIds - 選択中のブロック ID 一覧(再計測が必要なときは新しい配列参照を渡すこと)
|
|
1958
|
+
* @returns 選択範囲の bounding box。選択なし・要素未発見時は null
|
|
1959
|
+
*/
|
|
1960
|
+
export declare function useSelectionBounds(containerRef: RefObject<HTMLElement | null>, selectedBlockIds: string[]): SelectionBoundingBox | null;
|
|
1961
|
+
|
|
1962
|
+
/**
|
|
1963
|
+
* このパッケージで扱う値の型。JSON シリアライズ可能な値のみを表す再帰型。
|
|
1964
|
+
*
|
|
1965
|
+
* ブロックの入力値・バインディング値・スキーマのデフォルト値などに共通して使用される。
|
|
1966
|
+
*/
|
|
1967
|
+
declare type Value = string | number | boolean | null | Value[] | readonly Value[] | {
|
|
1968
|
+
[key: string]: Value;
|
|
1969
|
+
};
|
|
1970
|
+
|
|
1971
|
+
/**
|
|
1972
|
+
* 1 件の値変更を表す。
|
|
1973
|
+
*
|
|
1974
|
+
* @remarks
|
|
1975
|
+
* `value` が `undefined` の場合はそのブロックの値を削除する。
|
|
1976
|
+
*/
|
|
1977
|
+
declare type ValueChange = {
|
|
1978
|
+
id: string;
|
|
1979
|
+
value: Value | undefined;
|
|
1980
|
+
};
|
|
1981
|
+
|
|
1982
|
+
export { }
|