win-mouseが使えない話

2016年11月01日 · 1 min read · Node.js  ·
Share on:

未解決です

はじめに

Electronでウィジェットを作ってる時に画面全体をドラッグで移動＋クリックで別の動作をしたいみたいな事例

まず普通にElectron側
フレームなしの背景透過状態にする

 1"use strict";
 2
 3const electron = require("electron");
 4const app = electron.app;
 5
 6const BrowserWindow = electron.BrowserWindow;
 7let mainWindow;
 8
 9app.on("window-all-closed", function() {
10    if (process.platform != "darwin") {
11        app.quit();
12    }
13});
14
15app.on("ready", function() {
16    mainWindow = new BrowserWindow({
17        width: 400,
18        height: 600,
19        transparent: true,
20        frame: false,
21    });
22
23    mainWindow.loadURL("file://" + __dirname + "/index.html");
24    mainWindow.openDevTools();
25
26    mainWindow.on("closed", function() {
27        mainWindow = null;
28    });
29});

次にhtml側

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4    <meta charset="utf-8">
 5    <title>ほげ</title>
 6    <style>
 7        html, body{
 8            margin: 0;
 9            padding: 0;
10            width: 100%;
11            height: 100%;
12        }
13        body{
14            -webkit-app-region: drag;
15            -webkit-user-select: none;
16        }
17    </style>
18</head>
19<body>
20    なんか適当にコンテンツ
21</body>
22</html>

みたいな感じで開発すると中に置いたコンテンツをドラッグすることでウィンドウを移動させることが出来る
部分的に解除する（ボタンとか）場合はその要素に

1.button{
2    -webkit-app-region: no-drag;
3}

することでその部分だけ対象から外すことが出来る

でもデスクトップマスコット的な画面全体でドラッグさせたいしクリック等イベントを取りたい時が困る
dragを有効にしてしまうとクリックイベントやマウスオーバーのイベントが全部取られてしまうので検知できなくなってしまう

issueにもある通り一応他にも困ってる人がいた
ただ自作しろ的オチしかないので困る

探してたら

というパッケージを見つけて良さ気なので入れてみたけど前提パッケージのwin-mouseが上手く動かず失敗した

一応トライしたことメモ

  • Could not locate the bindings file. Tried:
    ファイルがズラーっと出る
    bindings/bindings.js
    の76行目に
    1b = opts.path ? require.resolve(n) : require(n)
    とあるけどopts.path自体がundefinedでコケてるっぽいので
    1b = require.resolve(n)
    とした
  • Mouse is not a constructor
    上記の対策したら今度はこのエラー
    これ以上追いきれなかったので分からず

あとはプロセス間通信でウィンドウ側でマウスダウンとアップを検知してウィンドウをゴリゴリ動かしてipcとかで動かしたらいけそうかなって思ったけど労力に見合わ無さそうなのでどうなんだろうか

issueにもあったけど今回Electronに拘る理由はないからNW.js使ってみようかと思う