ビルトイン関数

$compオブジェクトで動的に定義したコンポーネントに対して、以下のビルトイン関数を利用できます。

$fn.ui.add(compObj)

$compオブジェクトで動的に定義したコンポーネントをキャンバスへ追加することが出来ます。
v4.1.0で追加された関数です。

引数

名前	型	説明
compObj	Object	$compオブジェクトで動的に定義したコンポーネントオブジェクト

戻り値

なし

使用例

//イメージコンポーネントを動的に定義
const image = new $comp.Image({
    id: "image_1",
    width: 250,
    height: 250,
    x: 50,
    y: 100,
    value: "/sample/01.png",
    objectFit: "contain",
    clickEvent: "detachedAction",
    detachedAction: "show_detail"
})

//定義したコンポーネントをキャンバスへ追加
$fn.ui.add(image);

$fn.ui.remove(compObj)

キャンバスからコンポーネントを削除することが出来ます。
v4.1.0で追加された関数になります。

引数

名前	型	説明
compObj	Object	キャンバス上のコンポーネントオブジェクト

戻り値

なし

使用例

//DBからイメージコンポーネントのidとvalueのパスを取得
const results = await SelectImageCompInfo();

const delArray = [];

//キャンバスからDBの情報に一致するイメージコンポーネントを抽出
results.map(item => {
    Object.keys($ui).forEach(key => {
        if(key == item.id){
            delArray.push($ui[key])
        };
    });
});

//キャンバス上から削除
delArray.forEach(component => $fn.ui.remove(component));

ノート

$fn.ui.remove($ui[“＜コンポーネントID＞”])や$fn.ui.remove($ui.＜コンポーネントid＞)のようにコンポーネントのIDを指定して削除することも出来ます。

$fn.ui.removeDynamicComponents()

キャンバス上の動的に追加されたコンポーネントを一括削除することが出来ます。 v4.1.0で追加された関数です。

引数

なし

戻り値

なし

使用例

$fn.ui.removeDynamicComponents();