| |
renderpane の overlay には DPIが必要
renderpane の overlay 使う時って結局、
編集エリアウィンドウのDPI(GetDpiForWindow)もしくは
DpiScale＝(DPI/96)の値が必要なんじゃないのか？ 説。
例がある方がわかりやすいので、
/// aaa.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<style>
body {
margin: 0;
padding: 0;
}
.command-button {
opacity: 1.0; /* デフォルトの透明度 */
width: 34px;
height: 34px;
padding: 0;
border: none;
margin: 0;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.command-button svg {
width: 30px;
height: 30px;
display: block;
}
.command-button.active {
opacity: 1.0; /* アクティブ時の透明度 */
cursor: pointer;
}
.command-button.active:active {
padding-top: 1px;
padding-left: 1px;
}
</style>
<script>
// ドラッグ・アンド・ドロップは許可しない。画像をドラッグして秀丸の編集エリアなどにもっていくと妙な挙動になるので防止
document.addEventListener('dragstart', (event) => {
event.preventDefault();
});
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.command-button').forEach(button => {
button?.classList.add('active');
button.addEventListener('click', () => { handleButtonClick(button.id) });
});
});
</script>
</head>
<body>
<button id="pull_all" class="command-button" type="button">
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" fill="black" />
</svg>
</button>
<button id="commit_all" class="command-button" type="button">
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="15" cy="15" r="15" fill="black" />
</svg>
</button>
<button id="push_all" class="command-button" type="button">
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="15,0 30,30 0,30" fill="black" />
</svg>
</button>
<button id="open_vscode" class="command-button" type="button">
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" fill="black" />
</svg>
</button>
</body>
</html>
(文字列だけで伝えるため、画像ではなくsvgにしています)
さて、上記HTMLをボタンに見立てて、編集ペイン上にオーバーレイ配置しようとするとします。
/// aaa.mac
jsmode "WebView2\\" + currentmacrofilename;
js {
debuginfo(2);
renderpanecommand({
target: "TestRenderPane",
show: 1,
uri: currentmacrodirectory() + "\\aaa.html",
place: "overlay",
align: "right",
initialize: "async",
x: 32,
y: 26,
cx: 36,
cy: 140,
});
console.log("show");
}
ディスプレイを100％等。秀丸のDPIが96＝拡大していない場合にはこれでよいですが、
ディスプレイで120％なり150％なり拡大などしている場合は、まずアウトでしょう。
現在の状況だとどういうことになりがちかというと、結局C++なりC#なりで、DPIを取得するため、
var dpiScale = 1;
if (component) { // どこかで何らかの形でdllなりを読んでいるものとする。
var currentWindowDpi = component.GetDpiFromWindowHandle(hidemaru.getCurrentWindowHandle());
if (currentWindowDpi > 0) {
dpiScale = currentWindowDpi/96;
}
}
var xDPI = Math.ceil(32 * dpiScale);
var yDPI = Math.ceil(26 * dpiScale);
var cxDPI = Math.ceil(36 * dpiScale);
var cyDPI = Math.ceil(140 * dpiScale);
renderpanecommand({
target: "TestRenderPane",
show: 1,
uri: currentmacrodirectory() + "\\aaa.html",
place: "overlay",
align: "right",
initialize: "async",
x: xDPI,
y: yDPI,
cx: cxDPI,
cy: cyDPI,
});
みたいになっていきます。
(というかoverlayだとこうしないとディスプレイ拡縮変えるだけでぐちゃぐちゃにｗ）
|
|