React、SVG、css-layout を使用した図の作成
この記事では、次を使用して図を作成するプロセスを示します。 反応する, SVG、フェイスブックの CSSレイアウト 図書館。 で , 当社では、お客様が当社のコンピューティング ノードとオンプレミス ライセンス サーバー間の通信用にライセンス プロキシ サーバーを設定できる Web UI を提供しています。 図は、これらのサーバーがどのように相互に通信するかをユーザーに示す優れた方法です。
この手法で作成した図の例を次に示します。 コントロールは、状態が変化したときに React がダイアグラムを再レンダリングできることを示すためのものです。
SVG は DOM の一部にすぎないため、React 内で図を作成するのに適しています。 ただし、SVG は独自の座標系を使用するため、SVG 要素のレイアウトは HTML で CSS を使用するほど簡単ではありません。 そこがフェイスブックの CSSレイアウト CSS を使用できるようになります。 フレックスボックス SVG 要素をレイアウトするためのモデル。
React、SVG、css-layout を使用すると、次のことが可能になります。
- コンポーネントのプロパティまたは状態の変化に応じてダイアグラムを動的に変更します。
- 要件の変更を迅速に繰り返す
- UI をローカライズする既存の方法を使用して他の言語にローカライズする
ワイヤーフレーム
図の作成を開始するには、css-layout で記述されたデフォルトのスタイルを持つ HTML を使用して図をワイヤーフレーム化します。 README:
div、span {ボックスサイズ設定:ボーダーボックス; 位置: 相対的; ディスプレイ: フレックス; フレックス方向: 列; align-items: ストレッチ; フレックスシュリンク: 0; コンテンツの整列: フレックススタート; 境界線: 0 黒一色。 マージン: 0; パディング: 0; }
HTML での図のワイヤーフレームは次のようになります。
これにより、次が生成されます。
境界を示すためだけに、各 div に枠線が追加されました。 留意すべき点がいくつかあります。
- css-layout のみを使用する必要があります サポートされている属性.
- SVG でのテキストの配置、特に垂直方向の中央揃えは、依然として多少手動のプロセスになります。
ワイヤーフレームからCSSレイアウトツリーを作成する
css-layout では、ノードは単なるオブジェクトです。 { スタイル: { … }、子: [ ノード ] }。 ルート ノードはツリーとみなされます。 ランニング computeLayout() ツリー上のすべてのノードに、幅、高さ、上、左、右、下を含むレイアウト オブジェクトが設定されます。 これは、SVG 要素を配置するために使用します。
ワイヤーフレームからツリーを作成するには、HTML と ID を単純に読み取るだけです。にアクセスできるように、各ノードに が与えられます。 レイアウト ID による各ノードのプロパティ 後で。
const computeLayout = require('css-layout'); const range = require('lodash/utility/range'); 関数 em(n) { 戻り値 n * 12; const numServers = 2; const nodeTree = { id: 'root'、style: { alignItems: 'center' }、子: [ { id: 'rescaleBox'、style: { パディング: em(1)、幅: em(12) }、子: [ { id: 'rescaleLabel', style: { height: em(1) } }, { id: 'computeNodes', style: { height: em(3), marginBottom: em(2), marginTop: em(1) }, }, { id: 'licenseProxy', style: { height: em(3) } }, ], }, { id: 'onPremiseBox', style: { marginTop: em(3), }, Children: [ { id: 'onPremiseLabel'、スタイル: { 高さ: em(1)、マージン: em(1) } }、{ id: 'onPremiseServers'、スタイル: { flexDirection: 'row'、marginBottom: em(1)、paddingLeft: em(0.5)、paddingRight: em(0.5), }、子: range(0, numServers).map(i => { return { id: `server${i}`、style: { height: em(6) 、マージン左: em(0.5)、マージン右: em(0.5)、幅: em(8)、}、}; })、}、]、}、]、}; computeLayout(nodeTree);
React を使用したレンダリング
各ノードには、 レイアウト 財産。 これらを作る レイアウト によってアクセス可能なオブジェクト id 非常に単純です:
function createLayoutMap(obj,map={}) { if (obj.id) {map[obj.id] = obj.layout; if (obj.children) { for (let i = 0; i < obj.children.length; i++) { createLayoutMap(obj.children[i], map); マップを返します。 const l = createLayoutMap(nodeTree);
l オブジェクトには、各ノードに与えられた ID によってアクセスできるすべてのレイアウト情報が含まれます。 これにより、次の組み合わせを使用できるようになります。 , , React で図をレンダリングするには:
render() { // ... 上記の他のすべての内容 ... const l = createLayoutMap(nodeTree); return ( {gettext('Rescale')} {gettext('Compute Nodes')} {gettext('License Proxy')} {licenseProxyIp} // ... など、残りは読者の演習として残されています); }
ご覧のとおり、私たちは レイアウト 要素を配置したり、要素の幅と高さを設定するために css-layout によって計算されたプロパティ。 注意すべき点:
- top, 右, ボトム, 左 のプロパティ レイアウト オブジェクトはその親ノードに相対的です。 SVGでは、 それぞれの子供たちが 要素はその変換に対して相対的に配置されます。
- 前述したように、テキストの配置は多少手動になります。 の テキストアンカー プロパティは水平方向のセンタリングを処理できますが、 dy 垂直方向のセンタリングを処理するためのいくつかのマジックナンバーを含むプロパティ。
このテクニックはこれにインスピレーションを受けて誕生しました ブログ投稿 css-layout を使用して D3 チャートをレイアウトします。
