{"_id":"@edv4h/usketch-plugin-edge-pan","_rev":"2-0bf10904a4f451198e4454cc1c35803c","name":"@edv4h/usketch-plugin-edge-pan","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@edv4h/usketch-plugin-edge-pan","version":"0.2.0","license":"MIT","_id":"@edv4h/usketch-plugin-edge-pan@0.2.0","maintainers":[{"name":"myuske","email":"circlemountain.ym@gmail.com"}],"homepage":"https://github.com/EdV4H/usketch#readme","bugs":{"url":"https://github.com/EdV4H/usketch/issues"},"dist":{"shasum":"83991e474345bfa08369196925c503de1d354230","tarball":"https://registry.npmjs.org/@edv4h/usketch-plugin-edge-pan/-/usketch-plugin-edge-pan-0.2.0.tgz","fileCount":23,"integrity":"sha512-wlo63USRIY5NgZSsSjqQOIQSCvJnrK7ePTIthfQyOpcP4q/hZK3dx0DyE4uFDGRFxvuuF+eiSMMzTmLKFPv6Ew==","signatures":[{"sig":"MEQCIEU0Ppj9NbBsFKM69JXJHjhoO7Oq/qynEF4LECcVXt2wAiAHcjLh1imbXd7DwhHMaNrgbHts8wzs3s3bjKqOfMTjXw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37315},"main":"./dist/index.js","type":"module","_from":"file:edv4h-usketch-plugin-edge-pan-0.2.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","source":"./src/index.ts"}},"scripts":{"test":"vitest run --passWithNoTests","build":"tsc -p tsconfig.json","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"_npmUser":{"name":"myuske","email":"circlemountain.ym@gmail.com"},"_resolved":"/Users/yusukemaruyama/Projects/usketch/plugins/usketch-plugin-edge-pan/edv4h-usketch-plugin-edge-pan-0.2.0.tgz","_integrity":"sha512-wlo63USRIY5NgZSsSjqQOIQSCvJnrK7ePTIthfQyOpcP4q/hZK3dx0DyE4uFDGRFxvuuF+eiSMMzTmLKFPv6Ew==","repository":{"url":"git+https://github.com/EdV4H/usketch.git","type":"git","directory":"plugins/usketch-plugin-edge-pan"},"_npmVersion":"11.16.0","description":"Shape をドラッグ中、ポインタを**画角の端**に寄せると、その方向へ**画角が自動でスライド（スクロール）**するプラグイン。tldraw の \"edge scrolling\" 相当。掴んでいる Shape はカーソル下に留まったまま、世界がその下をスクロールします。","directories":{},"_nodeVersion":"26.3.0","dependencies":{"@edv4h/usketch-shared":"4.13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"4.1.11","typescript":"7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/usketch-plugin-edge-pan_0.2.0_1788928559177_0.04917263589237941","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"_id":"@edv4h/usketch-plugin-edge-pan@0.2.1","bugs":{"url":"https://github.com/EdV4H/usketch/issues"},"dist":{"shasum":"932df4b784e6cc6a517a3ee56e19628e06d5d0da","tarball":"https://registry.npmjs.org/@edv4h/usketch-plugin-edge-pan/-/usketch-plugin-edge-pan-0.2.1.tgz","fileCount":23,"integrity":"sha512-I3k+XsBTYVZucO70r8fkA8QZzSbeQKj0/iHNfqhSE0qDadTJcy3fHJs2Mc6NhEex5BdShA/EQbMvsWQr4/+O7w==","signatures":[{"sig":"MEQCIF8+RwMKIsCKxBAHBpAY6xtx9MfXi1uXlOlXhGpx9hYkAiBvz0v7H7kBPSxFsZXP+RYKPSqqtE8a2IDPeUgZOBP3Hg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDTvzTuNic+R21qzqinPE5/muDwCagMWVIFOU7Mn1OkwgIhAPwtOPrvYN4oAlRlkP6SP6/iaHNks13YibWo1KtZCjS6"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@edv4h%2fusketch-plugin-edge-pan@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":37315},"main":"./dist/index.js","name":"@edv4h/usketch-plugin-edge-pan","type":"module","_from":"file:edv4h-usketch-plugin-edge-pan-0.2.1.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","source":"./src/index.ts"}},"license":"MIT","scripts":{"test":"vitest run --passWithNoTests","build":"tsc -p tsconfig.json","clean":"rm -rf dist","typecheck":"tsc --noEmit"},"version":"0.2.1","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:075de409-2a45-4f54-b727-95a7f446e75f"}},"homepage":"https://github.com/EdV4H/usketch#readme","_resolved":"/tmp/88dfec322f0171664f34132519e13929/edv4h-usketch-plugin-edge-pan-0.2.1.tgz","_integrity":"sha512-I3k+XsBTYVZucO70r8fkA8QZzSbeQKj0/iHNfqhSE0qDadTJcy3fHJs2Mc6NhEex5BdShA/EQbMvsWQr4/+O7w==","repository":{"url":"git+https://github.com/EdV4H/usketch.git","type":"git","directory":"plugins/usketch-plugin-edge-pan"},"_npmVersion":"12.1.0","description":"Shape をドラッグ中、ポインタを**画角の端**に寄せると、その方向へ**画角が自動でスライド（スクロール）**するプラグイン。tldraw の \"edge scrolling\" 相当。掴んでいる Shape はカーソル下に留まったまま、世界がその下をスクロールします。","directories":{},"maintainers":[{"name":"myuske","email":"circlemountain.ym@gmail.com"}],"_nodeVersion":"24.21.0","dependencies":{"@edv4h/usketch-shared":"4.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vitest":"4.1.11","typescript":"7.0.2"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/usketch-plugin-edge-pan_0.2.1_1790580453242_0.480965805780007"}}},"time":{"created":"2026-09-09T04:35:59.004Z","modified":"2026-09-28T07:27:33.724Z","0.2.0":"2026-09-09T04:35:59.319Z","0.2.1":"2026-09-28T07:27:33.334Z"},"bugs":{"url":"https://github.com/EdV4H/usketch/issues"},"license":"MIT","homepage":"https://github.com/EdV4H/usketch#readme","repository":{"url":"git+https://github.com/EdV4H/usketch.git","type":"git","directory":"plugins/usketch-plugin-edge-pan"},"description":"Shape をドラッグ中、ポインタを**画角の端**に寄せると、その方向へ**画角が自動でスライド（スクロール）**するプラグイン。tldraw の \"edge scrolling\" 相当。掴んでいる Shape はカーソル下に留まったまま、世界がその下をスクロールします。","maintainers":[{"name":"myuske","email":"circlemountain.ym@gmail.com"}],"readme":"# @edv4h/usketch-plugin-edge-pan\n\nShape をドラッグ中、ポインタを**画角の端**に寄せると、その方向へ**画角が自動でスライド（スクロール）**するプラグイン。tldraw の \"edge scrolling\" 相当。掴んでいる Shape はカーソル下に留まったまま、世界がその下をスクロールします。\n\n## 仕組み\n\n- ポインタが画角端の「帯（margin）」に入ると、`BoardStore.panBy` で毎フレーム画角をパンします。速度は**帯の奥ほど速く**（境界で 0・端で最大）。\n- パンで画角が動くと、カーソルが止まっていてもドラッグ中のツールは位置を再計算しません（掴んだ Shape がワールドに取り残される）。そこで本プラグインは、パンした分だけ**ドラッグ中の Shape をワールド空間で直接移動**させ、画面上はカーソル下に留めます（移動量 = 実パン量 ÷ zoom）。\n- ドラッグ中に動いた Shape の id（select ツールが動かした親＋子孫）を蓄積し、それらを追従対象にします。移動は transient（コマンド化しない）ので Undo を汚さず、drop 時に select ツールが最終位置を 1 コマンドとして確定します（`commit()` は現在の store 位置を採るため追従分も含まれる）。\n\n## 使い方\n\n```ts\nimport { createEdgePanPlugin } from \"@edv4h/usketch-plugin-edge-pan\";\n\n// 既定のまま\ncreateEdgePanPlugin();\n\n// ホスト側で挙動を設定\ncreateEdgePanPlugin({\n  edgeSize: 64,      // 反応する端の帯の幅(px)\n  maxSpeed: 24,      // 帯の最奥での 1 フレームあたりのパン量(px)\n  axes: \"both\",      // \"both\" | \"horizontal\" | \"vertical\"\n  curve: (d) => d * d, // 端に近づくほど急加速（既定は線形）\n});\n```\n\n## オプション（すべてホストが設定可能）\n\n```ts\ninterface EdgePanOptions {\n  enabled?:  boolean      | (() => boolean);       // 既定 true\n  edgeSize?: number       | (() => number);        // 既定 48 (px)\n  maxSpeed?: number       | (() => number);        // 既定 16 (px/frame)\n  axes?:     EdgePanAxes   | (() => EdgePanAxes);   // 既定 \"both\"\n  curve?:    (depth: number) => number;            // 0..1 → 0..1、既定は線形\n}\ntype EdgePanAxes = \"both\" | \"horizontal\" | \"vertical\";\n```\n\n- **すべて getter（`() => value`）でも渡せます** — 設定 UI のスライダー等からライブに反映されます（値は毎フレーム評価）。\n- 数値は堅牢化のためクランプ・不正値は既定へフォールバック（`edgeSize >= 1`、`maxSpeed >= 0`）。\n\n## HUD（end-user 向け）\n\nプロジェクト規約どおり独自 UI は持たず、共有 HUD に設定グループ「端で画角スライド」を登録します（有効 / 端の帯(px) / 最大速度 / 対象軸）。**HUD の上書きはホスト options より優先**され、options を土台に end-user がその場で微調整できます。\n\n## Snap プラグインとの併用\n\n`@edv4h/usketch-plugin-snap` は `store.updateShape` をモンキーパッチして、ドラッグ中の位置更新をガイドへスナップします。自動パンの追従移動は「画角補正」であってユーザー操作ではないため、追従はスナップさせずカーソル下へ留めたい（スナップさせると、ワールド固定のガイドに貼り付いてスクロールしても図形が動かなくなる）。\n\nedge-pan は setup 時に掴んだ**パッチ前の生 `updateShape`** で追従を行うことでこれを回避します。そのため **edge-pan を snap より先に登録**してください（先に登録されていれば生の updateShape を掴めます）。スクロール中は追従（非スナップ）、ポインタを実際に動かせば snap は通常どおり再作動します。\n\n## 補足\n\n- パンは `BoardStore` の viewport constraint を通るので、`setViewportConstraint`（例: dashboard のスクロール制限）が効いている盤面では、その範囲内でのみスライドします。\n- ドラッグ検知は `shape:updated`＋pointer-down、終了は `shapes:move-end` / `canvas:pointerup`。\n","readmeFilename":"README.md"}