2022-03-19

Inkdrop - vim plugin で独自コマンド定義

inkdrop

v5.5 @ windows

v5.5 がリリースされたものの、Electron のバージョンが上がったからなのか Windows でウインドウを最大化するとタスクバーの前面に出てしまう現象に悩み中。タスクバーの位置を上にしたうえで非表示にして使っているのでいろいろ困る。ウインドウを最大化せずに最大のサイズ(スクリーンサイズ)にリサイズすればタスクバーの前には出てこないので、これで回避中。MS の PowerBI でも発生してるし (最近使ってないから知らないが)、何かしらのアプリが掴むからなのかタスクバーが常に表示された状態になることもしばしばなので根本的になにかあるんだろうと思うけど直る気配は無い。アイコン点灯してタスクバー出してくるのはいいとしても一定期間 (3sとか) 過ぎたら非表示に戻って欲しいんだな、ホントは。

いろいろ手間

Inkdrop は基本的に最大化して使っていて、自分で画面を表示しながらメモを取りたい場合や、資料と並べてメモを取ることがしばしばある。最大化状態とサイズ (主に横幅) を小さくした通常状態で切り分けていたので、最大化相当状態としてスクリーンサイズに広げただけでは、マウスを使ってサイズを変える手間が増える。最大化相当状態に戻すのも手間。

vim plugin を愛用しているので独自コマンドを定義して代用することにした (本来はフォーラムに登録しろよなんだけど、手元の課題を自分でできる範囲でプログラムを書いて解決してしまいたくなってしまう病)。

コマンド定義

init.js に定義しておけば :slim<CR> or :sl<CR> で発動できる。便利。 Inkdrop のコマンドとして定義してショートカットキーに当ててもいいのだけど、組み合わせは有限なので vim plugin のコマンドとして定義できると便利。引数も使えるし。

inkdrop.onEditorLoad(() => {
  const CodeMirror = require("codemirror");
  // 幅を指定してリサイズ
  CodeMirror.Vim.defineEx("width", "wi", (cm, event) => {
    if (event.args == null) {
      showConfirm(cm, "requires an argument.");
      return;
    }
    const height = window.screen.height;
    const width = window.screen.width;
    const arg = parseInt(event.args[0], 10);
    const info = { x: width - arg, y: 0, width: arg, height: height };
    inkdrop.window.setBounds(info);
  });
  // 横幅細めでリサイズ
  CodeMirror.Vim.defineEx("slim", "sl", (_, event) => {
    const height = window.screen.height;
    const width = window.screen.width;
    const info = { x: width - 600, y: 0, width: 600, height: height };
    inkdrop.window.setBounds(info);
  });
  // 横幅半分にリサイズ
  CodeMirror.Vim.defineEx("half", "ha", (_, event) => {
    const height = window.screen.height;
    const width = window.screen.width;
    const info = { x: width / 2, y: 0, width: width / 2, height: height };
    inkdrop.window.setBounds(info);
  });
  // 画面いっぱいにリサイズ (≠ Full Screen)
  CodeMirror.Vim.defineEx("full", "fu", (_, event) => {
    const height = window.screen.height;
    const width = window.screen.width;
    const info = { x: 0, y: 0, width, height };
    inkdrop.window.setBounds(info);
  });
});

// メッセージ表示 (Vim Plugin から拝借)
function showConfirm(cm, text) {
  if (cm.openNotification) {
    cm.openNotification('<span style="color: red">' + text + "</span>", {
      bottom: true,
      duration: 5000,
    });
  } else {
    alert(text);
  }
}

Windows で最大サイズにしたらタスクバーが出なくなったのでちょっと修正

  // 画面いっぱいにリサイズ (≠ Full Screen)
  CodeMirror.Vim.defineEx("full", "fu", (_, event) => {
    const height = window.screen.height - 1;   // 高さを微調整
    const width = window.screen.width;
    const info = { x: 0, y: 1, width, height };  // 位置を微調整
    inkdrop.window.setBounds(info);
  });

もうひとこと

zenn.dev に書こうとすると "ちゃんとかこう" と思ってしまったりでハードルが上がるので、こっちでひとまずアウトプットしたうえでまとめたものを zenn.dev に登録するのがいいのかなぁと思う今日このごろ。

2022-03-18

Inkdrop - vim plugin とカーソルの色 : その3

inkdrop

カーソルが点滅しないようにするのは頑張らなくていいことが発覚。

init.js で点滅を止める。

inkdrop.onEditorLoad((e) => {
  const { cm } = inkdrop.getActiveEditor();
  cm.setOption("cursorBlinkRate", 0);
})

styles.less でカーソルの色をオレンジっぽくする。

.CodeMirror-cursor {
    border-left: 2px solid #ffa87d;
}
.cm-fat-cursor .CodeMirror-cursor {
    background: #ffa87d;
}

フォーカスが外れたときにカーソルが消えるようになった。めでたしめでたし。

2022-03-17

Inkdrop - vim plugin とカーソルの色 : その2

inkdrop

カーソルの blink を止めたのはいいけど、フォーカスが外れた時は非表示にしたい。お試し中。

inkdrop.onEditorLoad((e) => {
  const editor = inkdrop.getActiveEditor();
  const { cm } = editor;
  const container = document.querySelector(".CodeMirror-lines");
  const changeVisibility = (visibility) => {
    const cursor = container.querySelector(".CodeMirror-cursor");
    cursor.style.visibility = visibility;
  };

  cm.on("update", () => {
    if (!cm.hasFocus()) {
      changeVisibility("hidden");
    }
  });
  cm.on("blur", () => changeVisibility("hidden"));
  cm.on("focus", () => changeVisibility("visible"));
});

update イベントは頻繁に走るので負荷が気になる。

2022-03-15

Inkdrop - vim plugin とカーソルの色

inkdrop

vim plugin で全角文字にカーソルがあるときに insert モードに入るとカーソルが全角のままのような #inkdrop #後で調べる
— ばしゅら (@basyura) 2022年3月15日

Inkdrop 5.5 がリリースされた。electron のバージョンアップ起因かもしれないが、日頃から愛用している vim plugin のカーソル表示がおかしい。見てみると、そもそものスタイル指定が間違ってたっぽい。

合わせて blink も止めたくなったので見直した。

.editor {
  /* insert mode */
  .CodeMirror-cursor {
    border-left: 2px solid #ffa87d;
    visibility: visible;
  }
  /* normal mode */
  .cm-fat-cursor .CodeMirror-cursor {
    background: #ffa87d;
    visibility: visible;
  }
}

2022-03-06

javascript : getter, setter, Proxy, Reflect

javascript

最近の javascript もある程度勉強したつもりだったけど、全く知らなかった。

明示的な getter & setter

const hogeProxy = {
  _hoge: null,
  set hoge(v) {
    this._hoge = v;
  },
  get fuga() {
    return this._hoge;
  },
};

hogeProxy.hoge = "(=ΦωΦ)";
console.log(hogeProxy.hoge);  //=> undefined
console.log(hogeProxy._hoge); //=> (=ΦωΦ)
console.log(hogeProxy.fuga);  //=> (=ΦωΦ)

汎用的な getter & setter

const person = {
  name: "basyura",
  age: -1,
};

const personProxy = new Proxy(person, {
  get: (obj, prop) => {
    return Reflect.get(obj, prop);
  },
  set: (obj, prop, value) => {
    Reflect.set(obj, prop, value);
  },
});

console.log(personProxy);      //=> { name: 'basyura', age: -1 }
console.log(personProxy.name); //=> basyura
personProxy.age = 99;
console.log(personProxy.age);  //=> 99