xyLayout

Flexbox like layout + UI components for A-Frame.

Examples

Live demos:

• Flexbox like Layout
• UI Components (マルチバイト文字列対応)
• Virtual keyboard (日本語入力対応)

Usage

Use xylayout-all.min.js (35kB)

AFrameのあとにxylayout-all.min.jsを読み込んでください．

ES2015 をサポートしたブラウザが必要です．(最新版の Chrome, Firefox, Edge で動作します)

<script src="https://cdn.jsdelivr.net/gh/aframevr/[email protected]/dist/aframe-master.min.js"></script>
<script src="https://binzume.github.io/aframe-xylayout/dist/xylayout-all.min.js"></script>
...
<a-xycontainer direction="column" spacing="0.1" padding="0.2">
    <a-xylabel value="ABC123漢字" width="2" height="0.5"></a-xylabel>
    <a-xybutton label="Button"></a-xybutton>
    <a-xyselect values="abc,123,Foo,Bar" select="1"></a-xyselect>
    <a-xytoggle value="true"></a-xytoggle>
    <a-xyrange width="4" height="0.5" value="20"></a-xyrange>
    <a-xycontainer direction="row" spacing="0.2">
        <a-box color="blue"></a-box>
        <a-box color="red"></a-box>
        <a-box color="green"></a-box>
    </a-xycontainer>
</a-xycontainer>

Building xylayout-all.min.js

npm install
npm run dist

Primitives

T.B.D. (See examples)

• a-xycontainer
• a-xywindow
• a-xylabel
• a-xybutton
• a-xyrange
• a-xytoggle
• a-xyselect
• a-xyscroll
• a-xyinput
• a-xykeyboard

それぞれ同名のコンポーネント + xyrectコンポーネントが使われます．

Components

xycontainer

3Dオブジェクトを平面上に配置するコンテナ． CSS Flexbox と同様のレイアウトができますが挙動は少し異なります．

Attributes:

| name | default | desc | values | | ---- | ------- | ---- | ------ | | direction | column | レイアウト方向 | 'row', 'column' ('horizontal', 'vertical') | | justifyItems | start | レイアウト方向の小要素の配置 | 'center', 'start', 'end', 'space-between', 'space-around', 'stretch'| | alignItems | none | レイアウトに対し垂直方向の小要素の配置 |'none', 'center', 'start', 'end', 'stretch'| | alignContent | none | wrapで折り返した時の各行の配置 |'none', 'center', 'start', 'end', 'stretch'| | spacing | 0 | レイアウト間隔 | number | | padding | 0 | 上下左右の余白 | number | | wrap | nowrap | 折返し | wrap, nowrap | | reverse | false | 逆向きにレイアウト | |

xyitem

親のxycontainerで指定された値を要素ごとに上書くためのコンポーネント． 親要素がxycontainerではない場合は追加しても何も起きません．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | align | align | none | alignItems参照 | | grow | number | 1 | stretchで拡張される量 | | shrink | number | 1 | stretchで縮小される量 | | fixed | boolean | false | trueに設定するとレイアウト時に無視されます |

xyrect

xycontainerは要素のwidth,height属性を見ますが，width,heightからサイズがわからないもの(a-sphereなど)や， 原点が中心ではないオブジェクトに対してサイズを明示するためのコンポーネント．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | width | number | -1 | 要素の幅を明示．無指定時(-1)は要素のwidth属性を使います | | height | number | -1 | 要素の高さを明示．無指定時(-1)は要素のheight属性を使います | | pivot | vec2 | (0.5, 0.5) | 要素の原点の位置 |

pivotは，左下が(0,0)です．a-frame のほとんどの要素は中心 (0.5, 0.5) が原点です．

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | xyresize | {xyrect} | Resize event |

xywindow

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | title | string | | ウィンドウタイトル | | closable | boolean | true | 閉じるボタンの表示 |

xylabel

textコンポーネントのWrappper． マルチバイト文字が含まれる場合はCanvasでのレンダリングにフォールバックします．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | value | string | | テキスト | | renderingMode | string | auto | canvas: 常にcanvasでレンダリングする, auto: 可能ならtextコンポーネントを使う | | resolution | number | 32 | canvasを使う場合の高さ方向の解像度 |

上記以外のパラメータはtextコンポーネントを参照．

xybutton

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | color | color | | ボタンの色 | | hoverColor | color | | カーソルが載った時のボタンの色 |

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | click | | Click event |

xytoggle

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | value | boolean | false | トグルスイッチの状態 |

※ このコンポーネントはDOM要素にも value 属性を追加します

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | change | {value} | changed event |

xyrange

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | min | number | 0 | 最小値 | | max | number | 100 | 最大値 | | value | number | 0 | 初期値 | | step | number | 0 | 変化の単位 | | thumbSize | number | 0.4 | つまみサイズ |

※ このコンポーネントはDOM要素にも value 属性を追加します

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | change | {value} | changed event |

xyselect

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | values | array | [] | 選択肢 | | select | int | 0 | 選択されているインデックス | | toggle | boolean | false | トグルモード |

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | change | {value, index} | changed event |

xylist

リスト．RecyclerView です．xyscrollの子要素で使う前提の実装です． 表示の際にはxylist.setAdapter(), xylist.setContents() を呼ぶ必要があります．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | itemWidth | number | -1 | アイテムの幅 | | itemHeight | number | -1 | アイテムの高さ |

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | clickitem | {index} | click item event |

Method:

使い方はサンプルを参照してください．

• setAdapter({create, bind}): ビューの生成処理を設定します
• setContents(data, optional_count): リストの内容を設定します
• setLayout({size, targets, layout}): レイアウトを設定します

xyclipping

表示をクリッピングするためのコンポーネント．xyscrollで使用．

小要素のサイズが親要素をはみ出す場合にレンダリング時にクリッピングされます．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | clipTop | boolean | true | 上部をクリッピングします | | clipBottom | boolean | true | 下部をクリッピングします | | clipLeft | boolean | false | 左側をクリッピングします | | clipRight | boolean | false | 右側をクリッピングします | | exclude | selector | | クリッピングから除外する要素 |

THREE.js標準のシェーダを使っている場合のみ正しく動きます．例えばa-textはシェーダが専用のものなので正しくクリッピングされません．

xyscroll

スクロールを管理するコンポーネント． 小要素の高さがはみ出す場合にスクロールバーによるスクロールができるようにします．横スクロールは未対応です．

このコンポーネントだけは，要素の中心ではなく左下を原点として扱います．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | scrollbar | boolean | true | スクロールバーを表示 |

Events:

| name | event.detail | desc | | ---- | ------------ | ---- | | xyviewport | [t, b, l, r]| viewport change event |

xyinput

テキスト入力ボックス．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | value | string | | 内容 | | type | string | | '', 'number', 'password' | | placeholder | string | | プレースホルダーテキスト | | caretColor | color | | キャッレット色 | | bgColor | color | white | 背景色 |

※ このコンポーネントはDOM要素にも value 属性を追加します

xykeyboard

キーボード．フォーカスを持った要素にKeyboardEventを送信します．日本語入力可．

Attributes:

| name | type | default | desc | | ---- | ---- | ------- | ---- | | ime | boolean | false | 漢字変換を有効にする | | keySize | number | 0.2 | キーのサイズ |

License

MIT License