変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

spread-sheet

[javascript]spread-sheetカスタムエレメントその2

EBNF解析用に書き換えた組み込みパーサをスプレッドシートに移植できたので、次はスプレッドシートの数式の文法をENBF風に書いてみると

(* セルのデータ *)
cell                ::= expr_cell | value_cell ;
(* 値 *)
value_cell          ::= time_stamp | date | time | logical_expr | number | boolean | text_etc ;
time_stamp          ::= date ' ' time ;
date                ::= yyyy '/' MM '/' dd  | MM '/' dd ;
yyyy                ::= /\\d{4}/ ;
MM                  ::= /\\d{1,2}/ ;
dd                  ::= /\\d{1,2}/ ;
time                ::= HH ':' mm ':' ss | HH ':' mm  ;
HH                  ::= /\\d{1,2}/ ;
mm                  ::= /\\d{1,2}/ ;
ss                  ::= /\\d{1,2}/ ;
number              ::= /[-]?([0-9]+)([.][0-9]*)?/ ;
boolean             ::= /true/i | /false/i ;
text_etc            ::= /.+/ ;
(* 数式 *)
expr_cell           ::= '=' expr ;
expr                ::= logical_expr ;
logical_expr        ::= add_sub_expr [ ( '=' | '>' | '<' | '>=' | '<=' | '<>' ) add_sub_expr ] ;
add_sub_expr        ::= mul_div_expr { ( '+' | '-' | '&' ) mul_div_expr }* ;
mul_div_expr        ::= factor { ( '*' | '/' ) factor } ;
factor              ::= value | parenthesis_expr ;
parenthesis_expr    ::= '(' expr ')' ;
value               ::= number | boolean |  function_def | a1_range | a1 | dqstring ;
a1_range            ::= a1 ':' a1 ;
a1                  ::= /([A-Za-z]+[1-9][0-9]*)/ ;
dqstring            ::= /".*"/ ;
function_def        ::= symbol '(' parameters ')' ;
symbol              ::= /([A-Za-z][A-Za-z0-9_]*)/ ;
parameters          ::= expr { ',' expr } ;

ここでoption( […])の中身をsequenceとしているので、EBNF解析パーサもchoiceからlistに変更してドッチでも良しのつもりだったが、”(…) 値 ”の様な場合は、(…)でchoice様に当確判定が出てしまい(値)ではなく即(])判定に走ってミスとなったので、sequenceに変えた。※EBNFのlist を sequence | choice; に変えようかなとも思ったがchoiceが一切通らなくなる様な気がする。

よくよく考えてみると文法の定義(defintion)文はsequenceが基本で、文法上sequenceを明示する書式がなかったりする。「,」で区切れば可能だが、何かありそう。

{
  "cell": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "expr_cell" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "value_cell" }
          ]
        }]
    }}},
{
  "value_cell": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "time_stamp" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "date" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "time" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "logical_expr" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "number" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "boolean" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "text_etc" }
          ]
        }]
    }}},
{
  "time_stamp": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "date" },
            { "_sq_string": " " },
            { "_identifier": "time" }
          ]
        }]
    }}},
{
  "date": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "yyyy" },
            { "_sq_string": "/" },
            { "_identifier": "MM" },
            { "_sq_string": "/" },
            { "_identifier": "dd" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "MM" },
            { "_sq_string": "/" },
            { "_identifier": "dd" }
          ]
        }]
    }}},
{
  "yyyy": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\\d{4}/" }
          ]
        }]
    }}},
{
  "MM": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\\d{1,2}/" }
          ]
        }]
    }}},
{
  "dd": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\\d{1,2}/" }
          ]
        }]
    }}},
{
  "time": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "HH" },
            { "_sq_string": ":" },
            { "_identifier": "mm" },
            { "_sq_string": ":" },
            { "_identifier": "ss" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "HH" },
            { "_sq_string": ":" },
            { "_identifier": "mm" }
          ]
        }]
    }}},
{
  "HH": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\\d{1,2}/" }
          ]
        }]
    }}},
{
  "mm": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\\d{1,2}/" }
          ]
        }]
    }}},
{
  "ss": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\\d{1,2}/" }
          ]
        }]
    }}},
{
  "number": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/[-]?([0-9]+)([.][0-9]*)?/" }
          ]
        }]
    }}},
{
  "boolean": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/true/i" }
          ]
        },
        {
          "_sequence": [
            { "_regexp": "/false/i" }
          ]
        }]
    }}},
{
  "text_etc": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/.+/" }
          ]
        }]
    }}},
{
  "expr_cell": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_sq_string": "=" },
            { "_identifier": "expr" }
          ]
        }]
    }}},
{
  "expr": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "logical_expr" }
          ]
        }]
    }}},
{
  "logical_expr": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "add_sub_expr" },
            {
              "_option": [
                {
                  "_sequence": [
                    {
                      "_group": [
                        {
                          "_sequence": [
                            { "_sq_string": "=" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": ">" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": "<" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": ">=" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": "<=" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": "<>" }
                          ]
                        }]
                    },
                    { "_identifier": "add_sub_expr" }
                  ]
                }]
            }]
        }]
    }}},
{
  "add_sub_expr": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "mul_div_expr" },
            {
              "_repeate0": [
                {
                  "_sequence": [
                    {
                      "_group": [
                        {
                          "_sequence": [
                            { "_sq_string": "+" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": "-" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": "&" }
                          ]
                        }]
                    },
                    { "_identifier": "mul_div_expr" }
                  ]
                }]
            }]
        }]
    }}},
{
  "mul_div_expr": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "factor" },
            {
              "_repeate0": [
                {
                  "_sequence": [
                    {
                      "_group": [
                        {
                          "_sequence": [
                            { "_sq_string": "*" }
                          ]
                        },
                        {
                          "_sequence": [
                            { "_sq_string": "/" }
                          ]
                        }]
                    },
                    { "_identifier": "factor" }
                  ]
                }]
            }]
        }]
    }}},
{
  "factor": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "value" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "parenthesis_expr" }
          ]
        }]
    }}},
{
  "parenthesis_expr": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_sq_string": "(" },
            { "_identifier": "expr" },
            { "_sq_string": ")" }
          ]
        }]
    }}},
{
  "value": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "number" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "boolean" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "function_def" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "a1_range" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "a1" }
          ]
        },
        {
          "_sequence": [
            { "_identifier": "dqstring" }
          ]
        }]
    }}},
{
  "a1_range": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "a1" },
            { "_sq_string": ":" },
            { "_identifier": "a1" }
          ]
        }]
    }}},
{
  "a1": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/([A-Za-z]+[1-9][0-9]*)/" }
          ]
        }]
    }}},
{
  "dqstring": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/\".*\"/" }
          ]
        }]
    }}},
{
  "function_def": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "symbol" },
            { "_sq_string": "(" },
            { "_identifier": "parameters" },
            { "_sq_string": ")" }
          ]
        }]
    }}},
{
  "symbol": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_regexp": "/([A-Za-z][A-Za-z0-9_]*)/" }
          ]
        }]
    }}},
{
  "parameters": {
    "_definition": {
      "_choice": [
        {
          "_sequence": [
            { "_identifier": "expr" },
            {
              "_repeate0": [
                {
                  "_sequence": [
                    { "_sq_string": "," },
                    { "_identifier": "expr" }
                  ]
                }]
            }]
        }]
    }}}

「パーサコンビネーションでの実装を諦める」方向に進みそうな雰囲気になってきたが、パーサコンビネーションの方がデバッグしやすいと云う妄想が消え去った後ではコレで良いのかもしれない。

正規表現のオプションの記述が抜けている方が気になるが、空白や改行は基本的に無視する数式文法なので問題は無いだろう。

完璧なテストパターンが欲しくなってきたが、まだまだ内部実装は変わりそうなので諦め。



[javascript]spread-sheetカスタムエレメント

spread-sheetカスタムエレメントってありそうで無いっぽいので作ってみた。

セルに文字入力できるダケのしろもの。

  • IMEがONになると動きがおかしい
  • 範囲指定ができない
  • 計算できない
    • 簡単な計算は可、セルアドレスでセル値参照も可
    • 関数が何も無い
      • sum,count,average,min,max
    • 値の変動に計算式を連動
      • 範囲指定時の連動が未実装
  • 入力したデータの保存ができない
    • indexedDBにセル値を保持
      • indexedDBのスコープがドメイン単位なので別ページと被ってしまいがち
        • databasse属性にurlから置換する%domain%,%path%,%filename%を追加
          • 例:databasename=”%domain%%path%%filename%_スプレッドシート1”
            • 結果はDevToolsのアプリケーションのindexedDBを参照
  • セル幅や高さが変えられない
  • 文字のスタイルを変えられない
  • javascriptからシートのデータを参照できない
  • ステータスバーが無い
  • 数式入力バーが無い
  • セルを移動し画面外に出ても画面がスクロールしない
    • 行列タイトルがスクロールロックしてない
      • スクロールバーが無反応
  • マクロが無い
  • データのインポート、エクスポートが無い
  • グラフ、絵、矢印とか貼れない
  • セルに名前が付けられない
  • シートが1枚ダケ
  • 列・行の追加や削除ができない
  • カットアンドペーストができない

等々いっぱい未実装。

1つのクラスでは長すぎるので分割してみた。

  • SpreadSheetCustomElement   全体(this)
    • this.customElement     カスタムエレメント登録Callback等
    • this.event         イベント処理
    • this.command       コマンドっぽい処理
    • this.layout         レイアウト処理

各処理からはthis.spreadsheet経由で別処理を呼び出す必要がある。

function OpenEntry () {
  let rect = this.spreadsheet.layout.cellEditing.getBoundingClientRect(); //編集するセルの位置を求め
  this.spreadsheet.layout.divTextarea.top = rect.top; //テキストエリアを内包するdivをソコに移動させ
  this.spreadsheet.layout.divTextarea.left = rect.left;
  this.spreadsheet.layout.textarea.value = event.key; //テキストエリアに入力した文字を入れ
  this.spreadsheet.layout.divTextarea.style.display = 'block'; //テキストエリアを内包するdivを表示
}

this.xxxx.yyyy.zzzzと長々と詠唱するのは読みにくいので

function OpenEntry () {
  const spreadsheet = this.spreadsheet;
  const layout = spreadsheet.layout;
  let rect = layout.cellEditing.getBoundingClientRect(); //編集するセルの位置を求め
  layout.divTextarea.top = rect.top; //テキストエリアを内包するdivをソコに移動させ
  layout.divTextarea.left = rect.left;
  layout.textarea.value = event.key; //テキストエリアに入力した文字を入れ
  layout.divTextarea.style.display = 'block'; //テキストエリアを内包するdivを表示
}

constを使い短縮化した。

後で割り当てを変更する時には直しやすいかもしれない。(気がする。

this.spreadsheet.layout.divTextarea.top 
// divTextareaをlayoutからshadowへ移動
=>this.spreadsheet.layout.spreadsheet.shadow.divTextarea.top 
// divTextareaをshadowからlayoutへ戻す
=>this.spreadsheet.layout.spreadsheet.shadow.spreadsheet.layout.divTextarea.top 
// は?

となるよりは

layout.divTextarea.top 
// divTextareaをlayoutからshadowへ移動
=>shadow.divTextarea.top 
// divTextareaをshadowからlayoutへ戻す
=>layout.divTextarea.top 
// 良し!

の方がマシ。

さて!いざ、やってみるとVScodeのリファクタリングが不十分でサクラエディタで(ガシガシ

になるのはいつものこと。

カスタムエレメントの宣言をクラスの出す事は可能だけど、クラスのstatic getterがconstructorに作られるので差し替え不可、無名のクラス文でラップするとコードがとても長くなるので取止め。

ps.

行列タイトルロックできたけど、タイトルロックの状態の表と元のサイズの表の差をスクロール量としてスクロールバーのスライダー位置を調整しているので、まだスライダーを触ってもタイトルロックの状態は変動しない。

ps

spread-sheetカスタムエレメント3 セルの範囲をMS-Office365のExcelまで拡大してみたところ、Ctrl+↓↑で移動すると1,048,576行もあるせいで移動完了まで「しばらくお待ちください」状態。カーソルをあちこちと移動するとテーブルが右端から壊れていく。

ps.

多少良くなったので、spread-sheetカスタムエレメント3を更新、データもindexedDBに保持したので、ブラウザが重くなるかもしれない。また時々DB構成を変えるかもしれないので、devToolsのアプリケーションでストレージからIndexDBに▶が付いていたらDB削除してから見た方が良いかも。まだカーソルジャンプ中に帰ってこない時がある。

ps.

indexedDB周りをdatabase.jsに分離。データベースも’R0000001’とか’C00002’など固定文字列も止めてinteger化したが今までどおりVersionアップ処理はしていない。

ps.

A1セルから右端まで移動し一番下の行へジャンプするとセルが隠れた。同様に一番下の行のA列から右端の列までジャンプし一番上の行へジャンプすると右側の隙間がひろがっていた。この修正中に列を追加する処理を呼び出す側がawaitしていなかったせいで画面が壊れることがあった。

カスタムエレメントの属性にdatabasenameを追加し、スプレッドシート毎にindexedDBのデータベースを分離可能に。

ページ移動(PageUp/Down)で同期を取っていたら、キーリピートで並行に処理が走ってしまい画面構成がクズれるので、全般的にキー操作はsetTimeoutで後回しにすることで並行に処理が走らない様にした。

ps.2024/3/18

indexDBの構成を変更!パーサーコンビーネータを組み込んで数値やセルアドレスで四則演算程度の数式を計算できた。但し、indexedDBが非同期なので、パーサーコンビーネータでArray.reduceを使った箇所の同期ズレ(Promiseレーシングや無限ループ)を対処できずfor文に戻した。

セル値の変動に連動して再計算させてみたが、inndedDBのトランザクションは階層化できない様で、トランザクションを流しながらセルデータをinndedDBで読み書きした後に、カーソルを移動させると、トランザクションが終了な済みエラーになる。また、データベースに複数キーのインデックスがあると、単キーのインデックスでもカーソルの範囲(上下限)は配列で指定しなければいけない。bound([1],[1])でデータが取れるけど、bound(1,1)ではスカっと終了する。

そう云えば、数式とかデータに空白が混入するとパーサのパターンにマッチしない。パーサの処理の先頭に空白の読飛ばし処理を追加した。でも数式は先頭文字が=の場合だけに限定したいので、読飛ばしをON・OFFするようにした。seqとchiceにパラメータに混入させたのでソコはチョットごまかし。

#初期設定
this.fSpaceSkip = false;
・・・
#数式の構文のルート木
const exprCell = this.map(this.seq(this.token('='), () => { this.fSpaceSkip = true }, expr), async (parsed) => {
・・・
#値の構文のルート木
const cell = this.choice(exprCell, () => { this.fSpaceSkip = false }, valueCell);
・・・
#各パーサの処理
async (target, position) => {
  if (this.fSpaceSkip) { [target, position] = this.skipSpace(target, position); }
・・・
}
#seqまたはchoiceのforループ
for (var i = 0; i < parsers.length; i++) {
  var parsed = await parsers[i](target, position);
  if (parsed === undefined) {
    continue;
  }
  ・・・
}

TextAreaを表示中に他のセルをクリックするとTextAreaを閉じそのセルをフォーカスっぽい表示にするけど、その際にクリックイベントで渡されたevent.targetの中身が書換わってスクリプトが暴走状態になってたので即保持しておく。※Promiseを使い出してからはよく起きる現象

ps.2024/3/19

sum関数がちょっと動き出した。なのでindexedDBの構成がまた変わった。min.max,averageもセルの範囲指定でも計算可。※結果が正しいかもしれない。

ps.2024/3/20

indexedDBのセルデータをJSON風に変更で文字列型が修正漏れ。sum関数等でほぼ同じコードが続くのでコールバック式に変更。Deleteキーでセルデータを空白に。=A1などアドレスや範囲が結果になる場合にそれっぽく表示。1+2は計算するけど1+2+3は面倒そうなので後回しにしたら、関数のパラメータも3個あるとダメだったし、アドレスに小文字を使うと変で、=A1:C7と範囲値の場合も中途半端で、セルを空欄にするとundefined(ある意味正しいけど)になってたので、見直し。確認のためにindexedDBを見ると、画面からデータを削除するとレコードの値が空になってたダケだったのでレコードごと消える様に修正。indexedDBのデータが同じドメインなら共有だがdatabasename属性に置換文字列を追加し名前で切り分け可能にした。

ps.2024/3/21

セルデータをJSON風化のmin.max関数の修正漏れ。(v)?v:”でnullやundefinedが表示されない様にしたら0も表示しなくなっていた。date型で日付と時刻の入力でDate型のformatを実装、boolean型の入力、now(), today()を実装。論理式を実装しないとif関数が作れない。round()とvlookup()はコードしてみたダケ。

ps.2024/3/24

a1形式のaddress1をaddressに。関数をグループ管理に変更中。後、細かいバグ。セル上にマウスを移動するとデバッグ用ツールチップを表示。

ps.2024/3/25

データ型をstringをtextに変更。F2で入力すると直前のセルで入力した内容がチラっと見えていた。

パーサーコンビネータに論理式等を追加したのでexpr(計算式の根っこ)の呼び出しが激増しasync、 awaitも多く連動計算の待ち時間が長くなってきてsetTimeoutで連動計算を呼び出していることもああり、僅かなミスでスタックオーバーフローやメモリ不足に陥りやすくなっている。

ps.2024/3/26

計算式のパース(parse)と計算(calc)を分離、indexedDBの式はパース結果(トークン風)。これでA1とR1C1の切り替えができそう。少し寄り道してmapメソッドをBNFテキストからパーサーコンビネータの文法部分を作るようにしてしまいたい。今は this.map(this.seq( のようにthis と括弧が多いから。

ps.2024/3/27

演算子*と/が+ーな計算をしていた。関数をexprメンバーに文字で格納していた名残で式のトークンを配列で格納していたがname,parametersに分けた。式を再入力するとexprがname,parametersに変わる様に暫くは式の文字列化と計算でexprも併用させる。アドレス型のaddressを配列に変更したのでそのうちアドレス範囲型を無くす予定。




top