Skip to content

feat: add a pin button to the toolbar to allow text selection - #45

Merged
r74tech merged 3 commits into
mainfrom
feat/pin-lock
Oct 2, 2026
Merged

r74tech merged 3 commits into
mainfrom
feat/pin-lock

Conversation

@r74tech

@r74tech r74tech commented Oct 2, 2026

Copy link
Copy Markdown
Owner

Adds a pin button to the toolbar so that text inside a pan/zoom element (e.g. diagram labels) can be selected.

Panzoom sets user-select: none and cursor: move on the element and its parent, and calls preventDefault on pointerdown, so text couldn't be selected before. While pinned, the current view is kept and:

  • The pointer handlers are unbound (destroy(), which keeps the transform), and the cursor / user-select / touch-action styles are cleared, so the element behaves like normal content (e.g. a text cursor over text)
  • The mouse wheel scrolls the page instead of zooming, and double-click selects a word instead of resetting the view
  • The zoom and reset buttons are disabled, and the toolbar stays visible to indicate the pinned state

Clicking the button again resumes pan and zoom. The button is shown only when the toolbar is enabled. The "User Interactions" and "Configuration" docs are updated as well.

This also includes #44 and updates tsconfig for the options removed in TypeScript 7:

  • Removed baseUrl and moduleResolution: "node", and set moduleResolution: "bundler" and rootDir: "./src"
  • Added src/css.d.ts for import './styles/panzoom.css', since unresolved side-effect imports are now errors by default

Lint, format, typecheck and the plugin build pass, and the dist layout is unchanged. On the Basic and Mermaid pages of the docs site, I checked that while pinned, dragging selects text and the view stays still, and that panning works again after unpinning.

@semantic-release/changelog (v7) and @semantic-release/git (v11) are major updates that switch to ES Modules, but they are not verified yet since the release job only runs on main.

Closes #44

dependabot Bot and others added 3 commits September 30, 2026 21:36
…dates

Bumps the npm-all group with 11 updates in the / directory:

| Package | From | To |
| --- | --- | --- |
| [@semantic-release/changelog](https://github.com/semantic-release/changelog) | `6.0.3` | `7.0.0` |
| [@semantic-release/git](https://github.com/semantic-release/git) | `10.0.1` | `11.0.1` |
| [@semantic-release/github](https://github.com/semantic-release/github) | `12.0.9` | `12.0.10` |
| [@semantic-release/npm](https://github.com/semantic-release/npm) | `13.1.5` | `13.2.0` |
| [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) | `26.5.0` | `26.6.3` |
| [lint-staged](https://github.com/lint-staged/lint-staged) | `16.4.0` | `17.6.0` |
| [oxfmt](https://github.com/oxc-project/oxc/tree/HEAD/npm/oxfmt) | `0.67.0` | `0.70.0` |
| [oxlint](https://github.com/oxc-project/oxc/tree/HEAD/npm/oxlint) | `1.82.0` | `1.85.0` |
| [react](https://github.com/react/react/tree/HEAD/packages/react) | `19.2.8` | `19.3.0` |
| [react-dom](https://github.com/react/react/tree/HEAD/packages/react-dom) | `19.2.8` | `19.3.0` |
| [typescript](https://github.com/microsoft/TypeScript) | `5.9.3` | `7.0.2` |



Updates `@semantic-release/changelog` from 6.0.3 to 7.0.0
- [Release notes](https://github.com/semantic-release/changelog/releases)
- [Commits](semantic-release/changelog@v6.0.3...v7.0.0)

Updates `@semantic-release/git` from 10.0.1 to 11.0.1
- [Release notes](https://github.com/semantic-release/git/releases)
- [Commits](semantic-release/git@v10.0.1...v11.0.1)

Updates `@semantic-release/github` from 12.0.9 to 12.0.10
- [Release notes](https://github.com/semantic-release/github/releases)
- [Commits](semantic-release/github@v12.0.9...v12.0.10)

Updates `@semantic-release/npm` from 13.1.5 to 13.2.0
- [Release notes](https://github.com/semantic-release/npm/releases)
- [Commits](semantic-release/npm@v13.1.5...v13.2.0)

Updates `@types/node` from 26.5.0 to 26.6.3
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

Updates `lint-staged` from 16.4.0 to 17.6.0
- [Release notes](https://github.com/lint-staged/lint-staged/releases)
- [Changelog](https://github.com/lint-staged/lint-staged/blob/main/CHANGELOG.md)
- [Commits](lint-staged/lint-staged@v16.4.0...v17.6.0)

Updates `oxfmt` from 0.67.0 to 0.70.0
- [Release notes](https://github.com/oxc-project/oxc/releases)
- [Changelog](https://github.com/oxc-project/oxc/blob/main/npm/oxfmt/CHANGELOG.md)
- [Commits](https://github.com/oxc-project/oxc/commits/oxfmt_v0.70.0/npm/oxfmt)

Updates `oxlint` from 1.82.0 to 1.85.0
- [Release notes](https://github.com/oxc-project/oxc/releases)
- [Changelog](https://github.com/oxc-project/oxc/blob/main/npm/oxlint/CHANGELOG.md)
- [Commits](https://github.com/oxc-project/oxc/commits/oxlint_v1.85.0/npm/oxlint)

Updates `react` from 19.2.8 to 19.3.0
- [Release notes](https://github.com/react/react/releases)
- [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/react/react/commits/v19.3.0/packages/react)

Updates `react-dom` from 19.2.8 to 19.3.0
- [Release notes](https://github.com/react/react/releases)
- [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md)
- [Commits](https://github.com/react/react/commits/v19.3.0/packages/react-dom)

Updates `typescript` from 5.9.3 to 7.0.2
- [Release notes](https://github.com/microsoft/TypeScript/releases)
- [Commits](microsoft/TypeScript@v5.9.3...v7.0.2)

---
updated-dependencies:
- dependency-name: "@semantic-release/changelog"
  dependency-version: 7.0.0
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: npm-all
- dependency-name: "@semantic-release/git"
  dependency-version: 11.0.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: npm-all
- dependency-name: "@semantic-release/github"
  dependency-version: 12.0.10
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: npm-all
- dependency-name: "@semantic-release/npm"
  dependency-version: 13.2.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: npm-all
- dependency-name: "@types/node"
  dependency-version: 26.6.3
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: npm-all
- dependency-name: lint-staged
  dependency-version: 17.6.0
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: npm-all
- dependency-name: oxfmt
  dependency-version: 0.70.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: npm-all
- dependency-name: oxlint
  dependency-version: 1.85.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: npm-all
- dependency-name: react
  dependency-version: 19.3.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: npm-all
- dependency-name: react-dom
  dependency-version: 19.3.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: npm-all
- dependency-name: typescript
  dependency-version: 7.0.2
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: npm-all
...

Signed-off-by: dependabot[bot] <support@github.com>
baseUrlとmoduleResolution=nodeを削除し、moduleResolution=bundlerとrootDirを指定する。
noUncheckedSideEffectImportsが既定で有効になったため、CSSのside-effect import用に型宣言を追加する。
ピン留め中は現在の表示を保ったままパン・ズームを止め、
カーソルやテキスト選択を通常の要素と同じ挙動に戻す。
ホイールはページスクロール、ダブルクリックは単語選択になる。
@github-actions

github-actions Bot commented Oct 2, 2026 •

Copy link
Copy Markdown
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-10-02 15:08 UTC

@r74tech
r74tech merged commit ab1f18f into main Oct 2, 2026
6 checks passed
@r74tech
r74tech deleted the feat/pin-lock branch October 2, 2026 15:08
github-actions Bot pushed a commit that referenced this pull request Oct 2, 2026
# [2.5.0](v2.4.5...v2.5.0) (2026-10-02)

### Features

* add a pin button to the toolbar to allow text selection ([#45](#45)) ([ab1f18f](ab1f18f))
@github-actions

github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown

🎉 This PR is included in version 2.5.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant