今日やったこと: 2018/09/23

  • @ragg/fleur-test (fleurのテストユーティリティライブラリ)を書き始めた
  • [Delir] LabelInput Componentが変換確定のためにEnterを押したときに「入力完了」になるのを直した
  • [Delir] Parameter Reference Expression API対応
  • [Delir] MonacoEditorがフォーカス時にフリーズするやつを直した
  • [Delir] エンジン周りのリファクタリングについて考え始めたが、なにもわからない… 俺には… なにもわからない…

LabelInput Componentの話

Delirには入力してるときにInputっぽくなって、そうでないときにはただのテキストっぽく見えるLabelInputというコンポーネントがあるんだが、こいつには、Enterを押すと「入力確定」としてテキストっぽい見た目に戻って内容を通知する処理がある。

そいつがEnterキーを押したときに「変換確定」のEnterでも反応してしまって面倒なのでどうしたもんかと調べたら どうやらKeyboardEvent.isComposingというプロパティで「変換中かどうか」が見れるらしい。

KeyboardEvent.isComposing - Web APIs | MDN

こいつは、「変換確定時のEnter」のときにはtrueになっているので、以下のような条件式にしたやったら変換確定のEnterを入力確定扱いしなくなった。

private onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) =>
{
    if (e.key === 'Enter' && !(e.nativeEvent as any).isComposing) {
        this.props.onChange(e.curentTarget.value)
    }
}

as anyとしてるのは、まあそういうことだ…(TypeScriptのDOMの型定義にはないプロパティ…)

Parameter Reference ExpressionAPIの話

エクスプレッションやp5.jsスケッチから、クリップ内のパラメータとかエフェクトのパラメータを参照できるようにする機能を作ってる。

先日のリリースでp5.jsをクリップとして扱えるようになったが、まだジェネラティブな映像しか書けない。 p5.js というか、クリエイティブプログラミング全般の話で、プログラムは「法則的 な動き」には強いが「非法則的な動き」に弱い。

この機能が入ると、非法則的な部分はキーフレームで入力して、それを踏まえた法則的な動きをスクリプトでかけるようになって 作れる映像が格段に増えると考えてる。

どういうAPIになるかはまあそのうちドキュメントに書かれるので待っててくれ。

MonacoEditorのフリーズの話

DelirではエクスプレッションとかのコードエディタにMonacoを使ってるんだけど、このエディタにフォーカスするたびに謎のWorkerの大量リロード祭りが始まって一瞬フリーズする現象が起きてた。 エディタにフォーカスした時に使用する型定義ライブラリを切り替える処理が走っていたことが原因ExpressionEditor.tsxで、同じライブラリセットに切り替えたときは切り替え処理をしないことで対応した。

そもそもなんでライブラリの切り替えが必要かというと、現時点でMonacoは「インスタンスごとに利用する型定義ライブラリを設定する」ことができないため、エディターにフォーカスされたときに、そのエディタに応じてライブラリセットの切り替えを行ってるという経緯がある。(ここ)つらい。