オブジェクトプロパティ構文をいろいろお試ししてみた結果の問題点

[snowdrops89]

• まず、属性値を和属性じゃなく元の英語のプロパティ値で設定しようとするとエラーになります。

※キャンバス以外
A＝空のエディタ作成
#属性
//A$無効化＝オン    //できる◎
//A$disabled＝オン  //TypeError: n.match is not a function
#スタイル
//A$幅＝80px        //できる◎
//A$width＝80px     //できる◎

※なでしこで作成したキャンバスの場合
A=[400,400]のキャンバス作成
#属性
//A$幅＝200         //できない×
//A$width＝200      //TypeError: n.match is not a function
#スタイル
//A$幅＝200px       //できる◎
//A$width＝200px    //できる◎

• キャンバスの幅と高さを、単位の有無でスタイルか属性かを対象を分ける件はまだ反映されていないかんじ？

そして、貯蔵庫のキャンバスの場合はなぜか、スタイルはできず英語のwidthで設定した場合だけ属性が設定できます。

※貯蔵庫標準のキャンバス（nako3_canvas）の場合
※HTML設定したキャンバスをDOM要素ID取得した場合も同様
A＝描画中キャンバス。
#属性
//A$幅＝200         //できない×
//A$width＝200      //できる◎
#スタイル
//A$幅＝200px       //できない×
//A$width＝200px    //スタイルは設定されず属性値のwidthが0になる。スタイルではなく属性のwidthに文字列を設定しようとしているためと思われる。

試しになでしこのキャンバス作成ではなくHTML設定したキャンバスでやってみたところ同様でした。
それで、エディタをHTML設定して試してみたら、やはり同様でした。

「<input type="edit" id="test"></span>」をHTML設定
A=「test」をDOM要素ID取得。
#属性
//A$無効化＝オン    //できない×
//A$disabled＝オン  //できる◎
#スタイル
//A$幅＝80px        //できない×
//A$width＝80px     //できない×

• なでしこで部品作成した以外の要素は、和属性は使えずスタイルも設定できず、逆に本来のプロパティ値でのみ属性設定できるという？

[snowdrops89]

v3.6.37にて、キャンバスの属性値で和属性が使えない問題以外は直りました✨
どのように作られたキャンバスも同様のようです。

※貯蔵庫標準のキャンバス（nako3_canvas）の場合
A＝描画中キャンバス。
#属性
A$幅＝200         //できない×
//A$width＝200      //できる◎
#スタイル
//A$幅＝200px       //できる◎
//A$width＝200px      //できる◎

※HTML設定したキャンバスをDOM要素ID取得した場合も同様
「<canvas id="test"></canvas>」をHTML設定
B=「test」をDOM要素ID取得。
#属性
B$幅＝200         //できない×
//B$width＝200      //できる◎
#スタイル
//B$幅＝200px       //できる◎
//B$width＝200px      //できる◎

※なでしこで作成したキャンバスの場合
C=[400,400]のキャンバス作成
#属性
C$幅＝200         //できない×
//C$width＝200      //できる◎
#スタイル
//C$幅＝200px       //できる◎
//C$width＝200px      //できる◎

あっ、これは #1822 でなんとかなるやつ？

[kujirahand]

@snowdrops89 さん、テストありがとうございます！

#1822 ですが、指定する名前が変わりまして定数「DOMプロパティ情報」にもとづいて、「DOM和属性」か「DOM和スタイル」のどちらを利用するのかを決定しています。

https://github.com/kujirahand/nadesiko3/blob/ffe44e3fddd58ec4b7c417d371fd8cff23b39795/src/plugin_browser_dom_basic.mts#L282C4-L282C14

そのため、下記のように、「$幅」と書いた場合は、単位の有無に関係なく、スタイルに値が設定されてしまいます。

A＝描画中キャンバス。
#属性
A$幅＝200         //できない×
//A$width＝200      //できる◎
#スタイル
//A$幅＝200px       //できる◎
//A$width＝200px      //できる◎

動作としては、とても複雑なのですが・・・下記のように動作します。

「DOM$幅 = 200px」の正しい動作:

1. 「幅」は、「DOMプロパティ情報」にエントリがあり、値が「style」なので、「DOM和スタイル」を適用
2. DOM.style.width = 200px を実行

「DOM$幅 = 200」の正しい動作:

1. 「幅」は、「DOMプロパティ情報」にエントリがあり、値が「style」なので、「DOM和スタイル」を適用
2. DOM.style.width = 200 を実行

「DOM$width=200px」の正しい動作:

1. 「width」は「DOMプロパティ情報」にエントリがないので、「DOM和属性」「DOM和スタイル」も参照しません。
2. ただし、単位があるので、スタイルであると判定
3. DOM.style.width = 200px を実行

「DOM$width = 200」の正しい動作:

1. 「width」は「DOMプロパティ情報」にエントリがないので、「DOM和属性」「DOM和スタイル」も参照しません。
2. DOM.width = 200 を実行

これ、分かりやすく、#1822 にもメモっておきます。

[snowdrops89]

ああぁ～、やっと理解しました～‼️
「A.幅＝200」とした場合、設定先はスタイルになるのが正解で、スタイルに200を設定しようとして単位が無いから不正な値となって、どこにも何も設定されてない感じになるんですね。
と、言うことは、キャンバスの場合はDOM和属性で属性値の設定はできない感じ？🥲

[kujirahand]

そうですね。
確かにキャンバスの場合は両方指定したいところではありますね。
ただ、全くやりようが無いわけでなく

• 明示的に「DOM属性設定」命令を使うか、
• 描画中キャンバス$可視=オフにして、「[width,height]のキャンバス作成」命令で新たに作成する
• キャンバス$width=200
  のどれかが使えるので、これを使い分ける感じで良いかと思います。
  今でも十分複雑な動作なので、これ以上例外を増やさない方が良いと思っています。

[kujirahand]

簡単な解決策として「幅属性」と「高さ属性」を追加します。

[snowdrops89]

v3.6.38で「幅属性」と「高さ属性」を確認しました✨
ありがとうございました！
もしまた何かあれば随時上げることにして、閉じます。