@edv4h/usketch-plugin-viewport-nav 2.0.13 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/plugin.d.ts +20 -1
- package/dist/plugin.d.ts.map +1 -1
- package/dist/plugin.js +34 -3
- package/dist/plugin.js.map +1 -1
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# @edv4h/usketch-plugin-viewport-nav
|
|
2
|
+
|
|
3
|
+
ビューポート操作（ズーム / パン）を提供するプラグイン。
|
|
4
|
+
|
|
5
|
+
- **ズーム**: `Ctrl`/`Cmd` + ホイール（トラックパッドのピンチ含む）でカーソル位置を中心に拡大・縮小。
|
|
6
|
+
- **パン**: ホイール（修飾キー無し）、および中ボタンドラッグ。
|
|
7
|
+
|
|
8
|
+
## 使い方
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { createViewportNavPlugin } from "@edv4h/usketch-plugin-viewport-nav";
|
|
12
|
+
|
|
13
|
+
// 既定（従来どおりの体感）
|
|
14
|
+
createViewportNavPlugin();
|
|
15
|
+
|
|
16
|
+
// ズーム感度を上げる
|
|
17
|
+
createViewportNavPlugin({ zoomSensitivity: 2.5 });
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## オプション
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
interface ViewportNavOptions {
|
|
24
|
+
/**
|
|
25
|
+
* ホイール/トラックパッドのズーム感度。`1` が既定で従来相当。
|
|
26
|
+
* 大きいほど 1 操作あたりの倍率変化が大きくなる（既定 0.25〜6 にクランプ）。
|
|
27
|
+
* 値だけでなく「ライブに読む getter」も渡せる（設定 UI からの即時反映用）。
|
|
28
|
+
*/
|
|
29
|
+
zoomSensitivity?: number | (() => number);
|
|
30
|
+
/**
|
|
31
|
+
* zoomSensitivity のクランプ範囲。既定 { min: 0.25, max: 6 }。
|
|
32
|
+
* タッチ/トラックパッド主体のホストが可動域を広げる/狭める用途に使う。
|
|
33
|
+
* min > max などの破綻した指定は無視して既定にフォールバックする。
|
|
34
|
+
*/
|
|
35
|
+
zoomSensitivityRange?: { min?: number; max?: number };
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### ズーム量の算出
|
|
40
|
+
|
|
41
|
+
ズーム係数は `deltaY` の**大きさ**に比例する:
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
factor = exp(-deltaY * 0.001 * zoomSensitivity)
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
- 従来は `deltaY` の符号だけで `0.9 / 1.1` に固定していたため、小さい `deltaY` を大量に出す
|
|
48
|
+
トラックパッドのピンチと `deltaY≈±100` のマウスホイールとで体感速度が大きく異なっていた。
|
|
49
|
+
比例式にすることで両者の差が縮まり、ピンチも滑らかになる。
|
|
50
|
+
- `zoomSensitivity` 省略時（=1）は `deltaY≈100` で `factor≈0.905`、`deltaY≈-100` で `≈1.105` と
|
|
51
|
+
なり、**従来の 0.9 / 1.1 とほぼ同じ**（後方互換）。
|
|
52
|
+
|
|
53
|
+
### ライブ反映（getter 形式）
|
|
54
|
+
|
|
55
|
+
設定 UI のスライダー等で感度を即時反映したい場合は getter を渡す。wheel イベントごとに評価される。
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
let zoomSensitivity = 1;
|
|
59
|
+
createViewportNavPlugin({ zoomSensitivity: () => zoomSensitivity });
|
|
60
|
+
// 以降 zoomSensitivity を書き換えれば次のズームから反映される
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### クランプ可動域の上書き
|
|
64
|
+
|
|
65
|
+
既定のクランプは `{ min: 0.25, max: 6 }`。タッチ/トラックパッド主体で更に速くしたい等、
|
|
66
|
+
ホスト側でスライダーの可動域を決めたい場合は `zoomSensitivityRange` で上書きできる。
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
// 最速を s=10 まで許容する
|
|
70
|
+
createViewportNavPlugin({
|
|
71
|
+
zoomSensitivity: () => hostSlider.value, // 例: 0.25〜10 のスライダー
|
|
72
|
+
zoomSensitivityRange: { max: 10 },
|
|
73
|
+
});
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
範囲は setup 時に一度だけ解決される（`zoomSensitivity` の getter は wheel ごとに評価）。
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { createViewportNavPlugin } from "./plugin.js";
|
|
1
|
+
export { createViewportNavPlugin, type ViewportNavOptions } from "./plugin.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAA2B,MAAM,aAAa,CAAC"}
|
package/dist/plugin.d.ts
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
1
|
import type { UsketchPlugin } from "@edv4h/usketch-shared";
|
|
2
|
-
export
|
|
2
|
+
export interface ViewportNavOptions {
|
|
3
|
+
/**
|
|
4
|
+
* ホイール/トラックパッドのズーム感度。`1` が既定で従来相当。
|
|
5
|
+
* 大きいほど 1 操作あたりの倍率変化が大きくなる（{@link ViewportNavOptions.zoomSensitivityRange} にクランプ）。
|
|
6
|
+
*
|
|
7
|
+
* 設定 UI からの即時反映のため、値だけでなく「ライブに読む getter」も渡せる。
|
|
8
|
+
* getter は wheel イベントごとに評価される。
|
|
9
|
+
*/
|
|
10
|
+
zoomSensitivity?: number | (() => number);
|
|
11
|
+
/**
|
|
12
|
+
* zoomSensitivity のクランプ範囲。既定 `{ min: 0.25, max: 6 }`。
|
|
13
|
+
* タッチ/トラックパッド主体のホストが可動域を広げる/狭める用途に使う。
|
|
14
|
+
* `min <= max` を満たさない/非有限な指定は無視して既定にフォールバックする。
|
|
15
|
+
*/
|
|
16
|
+
zoomSensitivityRange?: {
|
|
17
|
+
min?: number;
|
|
18
|
+
max?: number;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
export declare function createViewportNavPlugin(options?: ViewportNavOptions): UsketchPlugin;
|
|
3
22
|
//# sourceMappingURL=plugin.d.ts.map
|
package/dist/plugin.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKX,aAAa,EACb,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKX,aAAa,EACb,MAAM,uBAAuB,CAAC;AAiB/B,MAAM,WAAW,kBAAkB;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC1C;;;;OAIG;IACH,oBAAoB,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACtD;AA2BD,wBAAgB,uBAAuB,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,aAAa,CA4DnF"}
|
package/dist/plugin.js
CHANGED
|
@@ -1,16 +1,47 @@
|
|
|
1
|
-
|
|
1
|
+
/** ホイール/トラックパッドのズーム係数の基準ステップ。
|
|
2
|
+
* 既定感度(=1)で deltaY≈100 → factor≈exp(-0.1)≈0.905、deltaY≈-100 → ≈1.105 となり、
|
|
3
|
+
* 従来の固定 0.9 / 1.1 とほぼ同じ体感になる。 */
|
|
4
|
+
const ZOOM_STEP = 0.001;
|
|
5
|
+
/** zoomSensitivity のクランプ既定範囲（極端な値で操作不能になるのを防ぐ）。
|
|
6
|
+
* ホストは {@link ViewportNavOptions.zoomSensitivityRange} で上書きできる。 */
|
|
7
|
+
const DEFAULT_MIN_ZOOM_SENSITIVITY = 0.25;
|
|
8
|
+
const DEFAULT_MAX_ZOOM_SENSITIVITY = 6;
|
|
9
|
+
/** オプションの範囲指定を検証済みの {min,max} に解決する（不正値は既定へフォールバック）。 */
|
|
10
|
+
function resolveRange(range) {
|
|
11
|
+
const min = typeof range?.min === "number" && Number.isFinite(range.min)
|
|
12
|
+
? range.min
|
|
13
|
+
: DEFAULT_MIN_ZOOM_SENSITIVITY;
|
|
14
|
+
const max = typeof range?.max === "number" && Number.isFinite(range.max)
|
|
15
|
+
? range.max
|
|
16
|
+
: DEFAULT_MAX_ZOOM_SENSITIVITY;
|
|
17
|
+
// 破綻した範囲（min > max）は既定に戻す。
|
|
18
|
+
if (min > max)
|
|
19
|
+
return { min: DEFAULT_MIN_ZOOM_SENSITIVITY, max: DEFAULT_MAX_ZOOM_SENSITIVITY };
|
|
20
|
+
return { min, max };
|
|
21
|
+
}
|
|
22
|
+
/** number | (() => number) を解決し、range へクランプする。不正値は 1（既定感度）。 */
|
|
23
|
+
function resolveZoomSensitivity(source, range) {
|
|
24
|
+
const raw = typeof source === "function" ? source() : source;
|
|
25
|
+
if (typeof raw !== "number" || !Number.isFinite(raw))
|
|
26
|
+
return 1;
|
|
27
|
+
return Math.min(range.max, Math.max(range.min, raw));
|
|
28
|
+
}
|
|
29
|
+
export function createViewportNavPlugin(options) {
|
|
2
30
|
return {
|
|
3
31
|
id: "usketch-plugin-viewport-nav",
|
|
4
32
|
name: "ビューポートナビゲーション",
|
|
5
33
|
setup(ctx) {
|
|
6
34
|
// ── Local pan state (scoped to this setup closure) ──
|
|
7
35
|
let middlePanState = null;
|
|
36
|
+
// クランプ範囲は setup 時に一度だけ解決（zoomSensitivity 自体は getter で毎回読む）。
|
|
37
|
+
const range = resolveRange(options?.zoomSensitivityRange);
|
|
8
38
|
// ── Wheel: zoom & pan ──
|
|
9
39
|
const offWheel = ctx.events.on("canvas:wheel", (event) => {
|
|
10
40
|
if (event.ctrlKey || event.metaKey) {
|
|
11
|
-
// Zoom toward cursor
|
|
41
|
+
// Zoom toward cursor — factor は deltaY の大きさに比例（トラックパッドのピンチも滑らか）
|
|
12
42
|
const viewport = ctx.store.getViewport();
|
|
13
|
-
const
|
|
43
|
+
const sensitivity = resolveZoomSensitivity(options?.zoomSensitivity, range);
|
|
44
|
+
const factor = Math.exp(-event.deltaY * ZOOM_STEP * sensitivity);
|
|
14
45
|
ctx.store.zoomTo(viewport.zoom * factor, event.screenPoint);
|
|
15
46
|
}
|
|
16
47
|
else {
|
package/dist/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,uBAAuB;
|
|
1
|
+
{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edv4h/usketch-plugin-viewport-nav",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@edv4h/usketch-core": "2.4.
|
|
16
|
-
"@edv4h/usketch-shared": "4.
|
|
17
|
-
"@edv4h/usketch-store": "3.
|
|
15
|
+
"@edv4h/usketch-core": "2.4.3",
|
|
16
|
+
"@edv4h/usketch-shared": "4.13.0",
|
|
17
|
+
"@edv4h/usketch-store": "3.6.0"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"typescript": "7.0.2",
|