aframe-xylayout

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/aframe@v1.0.0/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