@aiquants/directory-tree 3.0.4 → 3.1.0

package/src/types.ts

@@ -0,0 +1,619 @@
+/**
+ * @file This file defines types related to the DirectoryTree component.
+ *       このファイルは、DirectoryTree コンポーネントに関連する型を定義します。
+ */
+
+import type { VirtualScroll } from "@aiquants/virtualscroll"
+import type { ComponentProps, CSSProperties, ReactNode } from "react"
+
+/**
+ * @type DirectoryEntry
+ * @description Represents an entry in the directory tree, which can be a file or a directory.
+ *              ディレクトリツリー内のエントリを表す。ファイルまたはディレクトリの場合がある。
+ * @property {string} name - Name of the entry. エントリ名。
+ * @property {ReactNode} [label] - Optional label to render instead of name. 名前のかわりに描画する任意のラベル。
+ * @property {"file" | "directory"} type - Type of the entry. エントリの種別。
+ * @property {string} absolutePath - Absolute path of the entry. エントリの絶対パス。
+ * @property {string} relativePath - Relative path of the entry. エントリの相対パス。
+ * @property {DirectoryEntry[]} [children] - Child entries if it's a directory. ディレクトリの場合の子エントリ。
+ * @property {DirectoryTreeIconRenderer} [icon] - Optional icon renderer for the entry. エントリ用の任意のアイコン描画設定。
+ */
+export type DirectoryEntry = {
+    name: string
+    label?: ReactNode
+    type: "file" | "directory"
+    absolutePath: string
+    relativePath: string
+    children?: DirectoryEntry[]
+    icon?: DirectoryTreeIconRenderer
+    /**
+     * Optional CSS class name for the entry.
+     * エントリ用のオプション CSS クラス名。
+     */
+    className?: string
+    /**
+     * Optional inline styles for the entry.
+     * エントリ用のオプションのインラインスタイル。
+     */
+    style?: CSSProperties
+}
+
+/**
+ * Row height for directory tree entries.
+ * Either a fixed pixel value applied to every row, or a function computing the
+ * height per entry (for variable-height rows). When a function is supplied it
+ * receives the entry and its flattened (visible) index.
+ *
+ * ディレクトリツリー各行の高さ。
+ * 全行に適用する固定ピクセル値、またはエントリごとに高さを算出する関数（可変高さ行）。
+ * 関数を渡す場合は、エントリとフラット化後（表示上）のインデックスが渡される。
+ *
+ * @remarks
+ * 関数を渡す場合は参照を安定させること（例: `useCallback`）。identity が毎レンダー
+ * 変わると仮想スクロールの高さモデルが都度再計算され、パフォーマンスが劣化する。
+ *
+ * 不正値（`NaN` / `Infinity` / `0` / 負値）を返した行は既定 20px にフォールバックする。
+ *
+ * 高さを実行時に変更する場合、可視外アイテムのスクロールバー総高は一時的に旧値のまま
+ * となり、スクロールに伴い自己修復される（表示中の行と接続線は即座に正確）。変更直後から
+ * 総高を厳密にしたい場合は `virtualScroll.behaviorOptions.resetOnGetItemHeightChange` を
+ * 有効化する。
+ */
+export type ItemHeight = number | ((entry: DirectoryEntry, index: number) => number)
+
+/**
+ * Context object passed to icon renderer functions.
+ * アイコン描画関数に渡されるコンテキストオブジェクト。
+ */
+export type DirectoryTreeIconRenderContext = {
+    entry: DirectoryEntry
+    isDirectory: boolean
+    isExpanded: boolean
+    isSelected: boolean
+    isItemSelected: boolean
+    extension?: string
+}
+
+/**
+ * Type definition for icon renderer.
+ * アイコン描画ロジックの定義。
+ */
+export type DirectoryTreeIconRenderer = ReactNode | ((context: DirectoryTreeIconRenderContext) => ReactNode)
+
+/**
+ * Icon override options for directory tree entries.
+ * ディレクトリツリーエントリのアイコン差し替えオプション。
+ */
+export type DirectoryTreeIconOverrides = {
+    directory?: DirectoryTreeIconRenderer
+    directoryExpanded?: DirectoryTreeIconRenderer
+    file?: DirectoryTreeIconRenderer
+    fileByExtension?: Record<string, DirectoryTreeIconRenderer>
+}
+
+/**
+ * Highlight styles configuration for hover and selection states.
+ * ホバー時および選択時のハイライトスタイルの設定。
+ */
+export type HighlightStyles = {
+    /** CSS class name for hover state. / ホバー時の CSS クラス名。 */
+    hoverClassName?: string
+    /** Inline style for hover state. / ホバー時のインラインスタイル。 */
+    hoverStyle?: CSSProperties
+    /** CSS class name for selected directory. / ディレクトリ選択時の CSS クラス名。 */
+    directorySelectedClassName?: string
+    /** Inline style for selected directory. / ディレクトリ選択時のインラインスタイル。 */
+    directorySelectedStyle?: CSSProperties
+    /** CSS class name for selected item (file). / アイテム（ファイル）選択時の CSS クラス名。 */
+    itemSelectedClassName?: string
+    /** Inline style for selected item (file). / アイテム（ファイル）選択時のインラインスタイル。 */
+    itemSelectedStyle?: CSSProperties
+}
+
+/**
+ * Event object passed to the onEntryClick callback.
+ * onEntryClick コールバックに渡されるイベントオブジェクト。
+ */
+export type DirectoryTreeClickEvent = {
+    /** The entry that was clicked. / クリックされたエントリ。 */
+    entry: DirectoryEntry
+    /** Whether the entry is a directory. / エントリがディレクトリかどうか。 */
+    isDirectory: boolean
+    /** Whether the directory is currently expanded (always false for files). / ディレクトリが展開中か (ファイルは常に false)。 */
+    isExpanded: boolean
+    /**
+     * Call to prevent the default behavior.
+     * For directories, this prevents the expand/collapse toggle.
+     * For files, this is a no-op (there is no default behavior to prevent).
+     *
+     * デフォルト動作を抑制する。
+     * ディレクトリの場合、展開/折りたたみのトグルを抑制する。
+     * ファイルの場合、抑制するデフォルト動作がないため何もしない。
+     */
+    preventDefault: () => void
+}
+
+/**
+ * Options for configuring virtual scroll behavior.
+ * 仮想スクロールの挙動を設定するためのオプション。
+ */
+export type DirectoryTreeVirtualScrollOptions = Omit<ComponentProps<typeof VirtualScroll>, "itemCount" | "getItem" | "getItemHeight" | "children" | "viewportSize"> & {
+    /** Override for viewport height. / 内部計測をスキップするための任意の固定ビューポート高さ。 */
+    viewportHeightOverride?: number
+}
+
+/**
+ * A single column definition for the TreeGrid (columns) mode.
+ * `columns[0]` is always the name / tree column (indent + expand glyph + type icon live here).
+ *
+ * TreeGrid（列）モードの列定義。`columns[0]` は常に名前（ツリー）列。
+ *
+ * @remarks
+ * `render` / `footer` の関数は参照を安定させること（`useMemo` / `useCallback`）。
+ * identity が毎レンダー変わると行のメモ化が無効化され、可視行が毎回再描画されて
+ * 仮想スクロールの利点が失われる（`ItemHeight` と同じ制約）。
+ */
+export type DirectoryTreeColumn = {
+    /** Unique column key (duplicates are flagged in dev). / 一意なキー（dev で重複検証）。 */
+    key: string
+    /** Column header content. / 列ヘッダ内容。 */
+    header?: ReactNode
+    /**
+     * Footer content. The function form receives **every node of the `entries` prop
+     * (including collapsed subtrees)**, not just the visible rows.
+     * フッタ内容。関数形は entries prop の全ノード（折り畳み subtree 含む）を受け取る。
+     */
+    footer?: ReactNode | ((allEntries: DirectoryEntry[]) => ReactNode)
+    /**
+     * Column width in px. The name column (`columns[0]`) uses this as its frozen width;
+     * numeric columns use it as the grid track width.
+     * 列幅(px)。名前列は凍結幅、数値列は grid track 幅として使用。
+     * 既定: 名前列 240、数値列 96。
+     */
+    width?: number
+    /** Cell text alignment. Default `left` (numeric columns should use `right`). / セル寄せ。既定 left。 */
+    align?: "left" | "right" | "center"
+    /** Extra class name for cells in this column. / この列のセルに付与する追加クラス。 */
+    className?: string
+    /**
+     * Cell content renderer. In the name column the indent / expand glyph / type icon are
+     * drawn by the library, and this render output is placed as the label content
+     * (falls back to `entry.name` when omitted).
+     * セル内容レンダラ。名前列では indent/glyph/icon はライブラリが描画し、本 render の
+     * 戻り値がラベル内容として配置される（省略時は `entry.name`）。
+     */
+    render?: (entry: DirectoryEntry, ctx: { indentLevel: number; isDirectory: boolean; isExpanded: boolean }) => ReactNode
+}
+
+/**
+ * TreeGrid (columns) mode configuration. When provided, the name column is frozen on the
+ * left (indent + connector lines confined there) and the remaining columns render as an
+ * aligned grid with an aligned header/footer and a horizontally scrollable numeric region.
+ * When omitted, the classic label-based tree rendering is used.
+ *
+ * TreeGrid（列）モード設定。指定時は名前列を凍結し数値列を整列グリッドで描画、整列ヘッダ/フッタと
+ * 数値領域の横スクロールを提供する。省略時は従来のラベルツリー描画。
+ *
+ * @remarks `columns` と各 `render` / `footer` は参照安定必須。
+ */
+export type DirectoryTreeGrid = {
+    /** Column definitions (**stable reference required**). `columns[0]` is the name/tree column. / 列定義（参照安定必須）。 */
+    columns: DirectoryTreeColumn[]
+    /** Render the header row. Default true. / ヘッダ行表示。既定 true。 */
+    showHeader?: boolean
+    /** Render the footer row. Default false. / フッタ行表示。既定 false。 */
+    showFooter?: boolean
+    /** Extra class for the header row. / ヘッダ行の追加クラス。 */
+    headerClassName?: string
+    /** Extra class for the footer row. / フッタ行の追加クラス。 */
+    footerClassName?: string
+    /** Extra class (or per-entry factory) for body rows. / 行の追加クラス（またはエントリ別ファクトリ）。 */
+    rowClassName?: string | ((entry: DirectoryEntry) => string)
+    /**
+     * Vertical scrollbar width, used to keep the header/footer numeric viewport aligned with
+     * the body (whose width is reduced by the vertical scrollbar). Default 12.
+     * 縦スクロールバー幅。ヘッダ/フッタの数値ビューポート幅を本体と一致させるために使用。既定 12。
+     */
+    scrollBarWidth?: number
+}
+
+/**
+ * Represents the state and actions for a directory tree.
+ * ディレクトリツリーの状態とアクションを表します。
+ */
+export type DirectoryTreeState = {
+    /**
+     * A set of strings representing the paths of the expanded directories.
+     * 展開されているディレクトリのパスを表す文字列のセット。
+     */
+    expanded: Set<string>
+    /**
+     * Toggles the expansion state of a directory.
+     * ディレクトリの展開状態を切り替えます。
+     * @param path - The path of the directory to toggle.
+     */
+    toggle: (path: string) => void
+    /**
+     * Expands a directory.
+     * ディレクトリを展開します。
+     * @param path - The path of the directory to expand.
+     */
+    expand: (path: string) => void
+    /**
+     * Collapses a directory.
+     * ディレクトリを折りたたみます。
+     * @param path - The path of the directory to collapse.
+     */
+    collapse: (path: string) => void
+    /**
+     * Collapses multiple specified directories.
+     * 指定された複数のディレクトリを折りたたみます。
+     * @param paths - An array of directory paths to collapse.
+     */
+    collapseMultiple: (paths: string[]) => void
+    /**
+     * Expands multiple specified directories.
+     * 指定された複数のディレクトリを展開します。
+     * @param paths - An array of directory paths to expand.
+     */
+    expandMultiple: (paths: string[]) => void
+    /**
+     * Collapses all directories.
+     * すべてのディレクトリを折りたたみます。
+     */
+    collapseAll: () => void
+    /**
+     * Checks if a directory is expanded.
+     * ディレクトリが展開されているかどうかを確認します。
+     * @param path - The path of the directory to check.
+     * @returns True if the directory is expanded, false otherwise.
+     */
+    isExpanded: (path: string) => boolean
+    /**
+     * A boolean that is true if a transition is pending.
+     * トランジションが保留中の場合に true となる真偽値。
+     */
+    isPending: boolean
+}
+
+/**
+ * @type DirectoryTreeProps
+ * @description Props for the DirectoryTree component.
+ *              DirectoryTree コンポーネントの Props。
+ */
+export type DirectoryTreeProps = {
+    /**
+     * The directory entries to display.
+     * 表示するディレクトリエンティティの配列。
+     */
+    entries: DirectoryEntry[]
+
+    /**
+     * Configuration for tree expansion state and behavior.
+     * ツリーの展開状態と動作の設定。
+     */
+    expansion: {
+        /**
+         * Function to toggle the expansion state of a directory.
+         * ディレクトリの展開状態を切り替える関数。
+         */
+        toggle: (path: string) => void
+        /**
+         * Function to check if a directory is expanded.
+         * ディレクトリが展開されているか確認する関数。
+         */
+        isExpanded: (path: string) => boolean
+        /**
+         * Function to expand multiple specified directories.
+         * 指定された複数のディレクトリを展開する関数。
+         */
+        expandMultiple: (paths: string[]) => void
+        /**
+         * Function to collapse all specified directories.
+         * 指定されたすべてのディレクトリを折りたたむ関数。
+         */
+        collapseMultiple: (paths: string[]) => void
+        /**
+         * Flag to indicate if the tree is in a pending state.
+         * ツリーが保留状態かどうかを示すフラグ。
+         */
+        isPending?: boolean
+        /**
+         * If true, all directories are always expanded.
+         * true の場合、すべてのディレクトリが常に展開されます。
+         */
+        alwaysExpanded?: boolean
+        /**
+         * The action to perform on double-clicking a directory.
+         * ディレクトリをダブルクリックしたときのアクション。
+         */
+        doubleClickAction?: "toggle" | "recursive"
+    }
+
+    /**
+     * Configuration for item selection.
+     * アイテム選択の設定。
+     */
+    selection: {
+        /**
+         * Selection mode for items.
+         * アイテムの選択モード。
+         */
+        mode?: "none" | "single" | "multiple"
+        /**
+         * The currently selected path.
+         * 現在選択されているパス。
+         */
+        selectedPath?: string | null
+        /**
+         * Set of paths for currently selected items.
+         * 現在選択されているアイテムのパスのセット。
+         */
+        selectedItems?: Set<string>
+        /**
+         * Callback when an entry (file or directory) is clicked.
+         * エントリ（ファイルまたはディレクトリ）がクリックされたときのコールバック。
+         *
+         * For files: called immediately on click.
+         * For directories: called immediately on click, then expand/collapse follows
+         *   unless preventDefault() is called on the event.
+         *
+         * ファイルの場合: クリック時に即座に呼ばれる。
+         * ディレクトリの場合: クリック時に即座に呼ばれ、イベントで preventDefault() が
+         *   呼ばれない限り展開/折りたたみが続行される。
+         */
+        onEntryClick: (event: DirectoryTreeClickEvent) => void
+        /**
+         * Callback when item selection changes.
+         * アイテム選択状態変更時のコールバック。
+         */
+        onSelectionChange?: (entry: DirectoryEntry, isSelected: boolean) => void
+    }
+
+    /**
+     * Visual customization options.
+     * 表示のカスタマイズオプション。
+     */
+    visual?: {
+        /**
+         * Optional CSS class name for the container.
+         * コンテナ用のオプション CSS クラス名。
+         */
+        className?: string
+        /**
+         * Optional inline styles for the container.
+         * コンテナ用のオプションのインラインスタイル。
+         */
+        style?: CSSProperties
+        /**
+         * Line color for tree connections.
+         * ツリーラインの色。
+         */
+        lineColor?: string
+        /**
+         * Flag indicating whether to render tree connector lines.
+         * ツリーのコネクタラインをレンダリングするかどうかのフラグ。
+         */
+        showTreeLines?: boolean
+        /**
+         * Flag indicating whether to render directory expand icons.
+         * ディレクトリの展開アイコンを描画するかどうかのフラグ。
+         */
+        showExpandIcons?: boolean
+        /**
+         * Flag indicating whether to render directory type icons.
+         * ディレクトリアイコンを描画するかどうかのフラグ。
+         */
+        showDirectoryIcons?: boolean
+        /**
+         * Flag indicating whether to render file type icons.
+         * ファイルアイコンを描画するかどうかのフラグ。
+         */
+        showFileIcons?: boolean
+        /**
+         * Icon overrides applied globally.
+         * グローバルに適用するアイコン差し替え設定。
+         */
+        iconOverrides?: DirectoryTreeIconOverrides
+        /**
+         * Size of the expand icon.
+         * 展開アイコンのサイズ。
+         */
+        expandIconSize?: number
+        /**
+         * Row height in px, or a function computing the height per entry. Default 20.
+         * When a function is supplied, rows may have different heights and the tree
+         * connector lines follow each row's cumulative offset.
+         *
+         * 各行の高さ (px)、またはエントリごとに高さを算出する関数。既定 20。
+         * 関数を渡すと行ごとに高さを変えられ、ツリー接続線は各行の累積オフセットに追従する。
+         */
+        itemHeight?: ItemHeight
+        /**
+         * If true, removes the indentation and connector lines for root-level items.
+         * true の場合、ルートレベルのアイテムのインデントとコネクタラインを削除します。
+         */
+        removeRootIndent?: boolean
+        /**
+         * Highlight styles configuration for hover and selection states.
+         * ホバー時および選択時のハイライトスタイルの設定。
+         */
+        highlightStyles?: HighlightStyles
+        /** CSS class name for each entry. / 各エントリ（行）に適用する追加の CSS クラス名。 */
+        entryClassName?: string
+        /** Inline styles for each entry. / 各エントリ（行）に適用する追加のインラインスタイル。 */
+        entryStyle?: CSSProperties
+        /** CSS class name for the name (label) part. / 名前（ラベル）部分に適用する追加の CSS クラス名。 */
+        nameClassName?: string
+        /** Inline styles for the name (label) part. / 名前（ラベル）部分に適用する追加のインラインスタイル。 */
+        nameStyle?: CSSProperties
+        /** CSS class name specifically for directory names. / ディレクトリ名特有の追加の CSS クラス名。 */
+        directoryNameClassName?: string
+        /** Inline styles specifically for directory names. / ディレクトリ名特有の追加のインラインスタイル。 */
+        directoryNameStyle?: CSSProperties
+        /** CSS class name specifically for file names. / ファイル名特有の追加の CSS クラス名。 */
+        fileNameClassName?: string
+        /** Inline styles specifically for file names. / ファイル名特有の追加のインラインスタイル。 */
+        fileNameStyle?: CSSProperties
+    }
+
+    /**
+     * Additional options for VirtualScroll integration.
+     * VirtualScroll の設定を上書きするオプション。
+     */
+    virtualScroll?: DirectoryTreeVirtualScrollOptions
+
+    /**
+     * TreeGrid (columns) mode. When provided, the name column is frozen on the left and the
+     * remaining columns render as an aligned grid with header/footer and a horizontally
+     * scrollable numeric region. When omitted, the classic label-based tree is rendered.
+     *
+     * TreeGrid（列）モード。指定時は名前列を凍結し数値列を整列グリッドで描画する。省略時は従来のツリー。
+     *
+     * `grid.columns` と各 `render` / `footer` は参照安定必須（`itemHeight` と同じ制約）。
+     */
+    grid?: DirectoryTreeGrid
+}
+
+/**
+ * Props for the useDirectoryTreeState hook.
+ * useDirectoryTreeState フックのプロパティ。
+ */
+export type UseDirectoryTreeStateProps = {
+    /**
+     * An optional set of initially expanded directory paths.
+     * 初期状態で展開されているディレクトリパスのオプションのセット。
+     */
+    initialExpanded?: Set<string>
+    /**
+     * An optional key to store the expanded state in localStorage.
+     * 展開状態を localStorage に保存するためのオプションのキー。
+     */
+    storageKey?: string
+}
+
+/**
+ * @type DirectoryEntryItemProps
+ * @description Props for the DirectoryEntryItem component.
+ *              DirectoryEntryItem コンポーネントの Props。
+ */
+export type DirectoryEntryItemProps = {
+    entry: DirectoryEntry
+    indentLevel: number
+    /** Resolved height of this row in px. / この行の解決済み高さ (px)。 */
+    rowHeight: number
+    isDirOpen: (path: string) => boolean
+
+    expansion: {
+        toggleDirectory: (path: string) => void
+        onToggleDirectoryRecursive: (entry: DirectoryEntry) => void
+        doubleClickAction?: "toggle" | "recursive"
+    }
+
+    selection: {
+        selectedPath: string | null
+        mode?: "none" | "single" | "multiple"
+        selectedItems?: Set<string>
+        onEntryClick: (event: DirectoryTreeClickEvent) => void
+        onSelectionChange?: (entry: DirectoryEntry, isSelected: boolean) => void
+    }
+
+    visual: {
+        showExpandIcons?: boolean
+        showDirectoryIcons?: boolean
+        showFileIcons?: boolean
+        iconOverrides?: DirectoryTreeIconOverrides
+        expandIconSize?: number
+        useCanvasExpandIcons?: boolean
+        highlightStyles?: HighlightStyles
+        entryClassName?: string
+        entryStyle?: CSSProperties
+        nameClassName?: string
+        nameStyle?: CSSProperties
+        directoryNameClassName?: string
+        directoryNameStyle?: CSSProperties
+        fileNameClassName?: string
+        fileNameStyle?: CSSProperties
+    }
+
+    parentIsLast: boolean[]
+    renderChildren?: boolean
+}
+
+/**
+ * Information for a single item in the tree line.
+ *
+ * ツリーラインの単一アイテムの情報。
+ */
+export type TreeLineItemInfo = {
+    id: string // アイテムの一意な識別子
+    absolutePath: string // アイテムの絶対パス
+    name: string // アイテム名
+    indentLevel: number // アイテムのインデントレベル
+    isLastChild: boolean // アイテムが親の最後の子であるかどうか
+    ancestorIsLast: boolean[] // 各祖先が最後の子であるかを示す配列
+    isDirectory: boolean // アイテムがディレクトリであるかどうか
+    isOpen?: boolean // ディレクトリが開いているかどうか (任意)
+    isExpanded: boolean // ディレクトリが展開されているかどうか
+    hideLines?: boolean // ツリーラインを隠すかどうか
+}
+
+/**
+ * Segment data for TreeLine rendering.
+ *
+ * TreeLine 描画用のセグメントデータ。
+ */
+export type TreeLineSegment = {
+    key: string // セグメントの一意なキー
+    x1: number // 線分の始点X座標
+    y1: number // 線分の始点Y座標
+    x2: number // 線分の終点X座標
+    y2: number // 線分の終点Y座標
+    itemIndex: number // セグメントが属するアイテムのインデックス
+}
+
+/**
+ * Glyph data for expand icons rendered on the tree line canvas.
+ *
+ * ツリーラインキャンバスに描画する展開アイコンのグリフ情報。
+ */
+export type TreeLineGlyph = {
+    key: string // グリフの一意なキー
+    itemIndex: number // グリフが属するアイテムのインデックス
+    centerX: number // グリフの中心X座標
+    centerY: number // グリフの中心Y座標
+    size: number // グリフのサイズ
+    isExpanded: boolean // 展開状態かどうか
+}
+
+/**
+ * Geometric data for tree line rendering.
+ *
+ * ツリーライン描画用のジオメトリデータ。
+ */
+export type TreeLineGeometry = {
+    segmentsByItem: TreeLineSegment[][] // アイテムごとの線分配列
+    glyphsByItem: TreeLineGlyph[][] // アイテムごとのグリフ配列
+}
+
+/**
+ * Props for the TreeLine component.
+ *
+ * TreeLine コンポーネントの Props。
+ */
+export type TreeLineProps = {
+    segmentsByItem: TreeLineSegment[][] // アイテムごとのセグメント配列
+    glyphsByItem: TreeLineGlyph[][] // アイテムごとのグリフ配列
+    itemHeight: number // 各アイテムの高さ
+    width: number // SVG 領域の全体の幅
+    viewportHeight: number // ビューポートの高さ
+    scrollPosition: number // 現在のスクロール位置
+    color?: string // ツリーラインの色 (任意)
+    strokeWidth?: number // ツリーラインの線の太さ (任意)
+    renderStartIndex?: number // レンダリングを開始するインデックス (任意)
+    renderEndIndex?: number // レンダリングを終了するインデックス (任意)
+    lookaheadEndIndex?: number // 表示範囲外も考慮したインデックス上限 (任意)
+    devicePixelRatio?: number // デバイスピクセル比 (任意)
+    expandGlyphColor?: string // 展開アイコンの色 (任意)
+    expandGlyphSize?: number // 展開アイコンのサイズ (任意)
+}