atom 1.9.x + graphviz-preview の表示バグの回避

Atom を使っていて、ちょっと図を書いて整理したいなんてときに便利な graphviz-preview ですが、2016/8/27現在、graphviz-previewの更新が、対応バージョン1.7.0で止まっており、現時点の最新である1.9.8で使用するとこんなことになってしまいます。

そのうち修正されてほしいなあと思いつつ、とりあえずの回避方法。

$HOME/.atom/packages/graphviz-preview/styles/graphviz-preview.less をテキストエディタで開き、以下のwebview要素のstyleを追記します。

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.graphviz-preview {
  background-color: #fff;
  overflow: scroll;
  box-sizing: border-box;
  padding: 0;

  iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  // ここから追記
  webview {
    width: 100%;
    height: 100%;
    border: 0;
  }
  // ここまで追記

}

するとこんな感じに。 スクロールバーが二重で表示されるのカッコ悪いんですが、とりあえず使うのには困らないので、これでしのぎながら公式のアップデートを待ちます…

2016/08/28 追記

.graphviz-preview クラスと webview 要素に overflow: none; を設定してやると余分なスクロールバーが消えました。実際のスクロールバーは、webview内に貼られるobjectが表示してくれるようです。

// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";

.graphviz-preview {
  background-color: #fff;
  overflow: none;      // scroll -> none
  box-sizing: border-box;
  padding: 0;

  iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  // ここから追記
  webview {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: none;
  }
  // ここまで追記

}