figspec

Unofficial static Figma frame/file viewer available as HTML CustomElement

Commits at 6aa99c12291d2ae00935ba16fc117da2eb2cc8ce

  1. 6aa99c12 Allow browser zoom/scroll keybindings, add 100% zoom and zoom to fit bindings (#60) * only trigger keyboard zoom/pan when meta key is not pressed and focus is in the shadow root add tabIndex and focus-visible styling to canvas viewport * add keyboard bindings for resetting zoom and zooming to 100% * add outline to host when .fc-viewport has visible focus reorganize and comment scale variables use switch for keyboard handlers vbabel authored at GitHub comitted at
  2. ae812ca5 Trigger drag state only when the viewport is hovered and focus is not elsewhere (#55) vbabel authored at GitHub comitted at
  3. c69dcc7b always hide the checkmark icon from AT (#56) vbabel authored at GitHub comitted at
  4. 14d9b06b Add keyboard support for pan and zoom actions (#58) * add keyboard support for pan and zoom actions * call #handleKeyDownPanOrZoom from keydown handler rather than registering new listener comments, code style consistency * zoom => scale, MIN/MAX_ZOOM => MIN/MAX_SCALE * don't need to be in drag state to zoom * define MIN/MAX_SCALE in FrameCanvas, pass as options to power of two methods vbabel authored at GitHub comitted at
  5. 0fedbbbe Add `theme` attribute to allow the color scheme to be set by consumer (#57) * set color-scheme to dark on :host when user prefers dark * allow color-scheme attribute to set determine color scheme, otherwise respect user preference set color-scheme css property for either color scheme * spacing/tab fixes * refactor color-scheme attribute to theme to avoid overloading color-scheme vbabel authored at GitHub comitted at
  6. e8880639 Use label elements with for/id attributes for preference input labelling (#53) vbabel authored at GitHub comitted at
  7. fc2bef6a 2.0.5 Shota FUJI authored at Shota FUJI comitted at
  8. 27042357 Merge pull request #52 from vbabel/victor/add-alt-text-to-frame-image add alt text to the rendered image Shota FUJI authored at GitHub comitted at
  9. 0eebc8c4 Merge pull request #51 from vbabel/victor/fix-menu-overlap Bump menubar to left width of Inspector Panel when open Shota FUJI authored at GitHub comitted at
  10. 59732e5b 2.0.4 Shota FUJI authored at Shota FUJI comitted at
  11. ed9ddfb6 chore: Migrate to GitHub Pages Shota FUJI authored at Shota FUJI comitted at
  12. d9dcd9a0 2.0.3 Shota FUJI authored at Shota FUJI comitted at
  13. e0f64b06 Merge pull request #49 from thibaudsz/master chore: add repository link in package.json Shota FUJI authored at GitHub comitted at
  14. dbcf9fb7 2.0.2 Shota FUJI authored at Shota FUJI comitted at
  15. b9391697 fix: Cannot import the modules with Node.js ESM resolution <https://github.com/pocka/figspec-react/issues/1> When the bundler uses Node.js' ESM module resolution, errors occur during an import phase. Considering today's module ecosystem and this library targeting ES2019 environment, I believe this change is safe and reasonable to introduce. If not, I need to re-enable CJS build... Shota FUJI authored at Shota FUJI comitted at
  16. c4d82cdb 2.0.1 Shota FUJI authored at Shota FUJI comitted at
  17. aa4f7035 fix: Frame viewer lacking `link` property Attribute is present, but property was missing. Shota FUJI authored at Shota FUJI comitted at
  18. af5cb992 2.0.0 Shota FUJI authored at Shota FUJI comitted at
  19. 54bf94f4 feat: Make spacing configurable Using spacing size tokens brings consistency and prevents future patches from breaking aesthetics (also less review cost). Shota FUJI authored at Shota FUJI comitted at
  20. f859903e docs: Update README to v2 Shota FUJI authored at Shota FUJI comitted at
  21. 62622f99 chore: Support only ESM-ES2019 The reason `target` set to `ES2015` was I thought "if it's 5yrs old, it's safe". For the same reason, I tried to set to ES2018 but decided to increase because: * Even the Safari 12 mostly supports ES2019. * Library code uses ES2019 API (`Object.fromEntries` and `Array.prototype.flat`). * There was no differences in built files, between `target=es2018` and `target=es2019`. The reason for dropping CJS is it's obsolescence. It was still used for front-end code in 3 years ago (when I initially wrote this lib). However, given the support status of bundlers and Node.js, I believe dropping CJS output provides better user experience thanks to halved package size and more maintainability. Shota FUJI authored at Shota FUJI comitted at
  22. 670d9222 style: Remove unused imports Shota FUJI authored at Shota FUJI comitted at
  23. 9ce0f16e chore: Forbid unused locals ...to make code quality better. Shota FUJI authored at Shota FUJI comitted at
  24. aae86f70 feat: Feedback UI for copy operation Previously there was no feedback for copy (CSS code, text contents) therefore a user was not able to know whether the copy operation is succeeded or not. This commit adds common UI (snackbar) as a feedback UI for the copy operation. Shota FUJI authored at Shota FUJI comitted at
  25. fc1e97fd feat: Touch gestures (pan and pinch) Shota FUJI authored at Shota FUJI comitted at
  26. 43f53b8f Merge pull request #46 from pocka/feature/v2-wip v2 Shota FUJI authored at GitHub comitted at
  27. f240007b docs: Add many nodes example In order to tackle https://github.com/pocka/figspec/issues/30 Twemoji is ideal for this purpose: a lot of nodes, complex shapes, uniqueness among nodes. Shota FUJI authored at Shota FUJI comitted at
  28. 2a52fc42 chore: Mark demo data as auto generated file Shota FUJI authored at Shota FUJI comitted at
  29. 82bb7f43 1.0.2 Shota FUJI authored at Shota FUJI comitted at
  30. 7956a99f fix: Do not use overflowing small <svg> During rewriting FigspecViewer from Lit to DOM (without libraries), I noticed not using overflowing small <svg> fixes long-standing and thought-to-be-hard-to-fix issues at once. Since the fix is easily appliable to the current code base, here it is. The <svg> element works as a layer for guidelines, has had viewBox size of `0 0 5 5` and most of the paint is rendered as overflowing content. The problem is, this is the cause of Safari does not trigger pointer-related actions and Blink renders guidelines at incorrect positions (slightly shifted). * https://github.com/pocka/figspec/issues/37 * https://github.com/pocka/figspec/issues/31 The code is there from the start[^0] and I don't remember why it being this... my guess is limitation of being a nested custom-element and forgot to change on the refactor[^1]. After searching for noticeable differences using `git stash`, the only changes are those bugs fixed. I expected overflow/scroll related issues but no noticeable regression found. [^0]: https://github.com/pocka/figspec/blob/2a57a99908d62f050675d365da74ad9249c281e5/packages/components/src/FigmaViewerGuide/index.ts#L152-L153 [^1]: https://github.com/pocka/figspec/commit/d8991c590cb831a443f2bf97489e4f1142eab81b#diff-a21bd58f460ace3ded3e7274f284ecb4a2e988db51fab687cc64c2dcdccc5093R345-R346 Fix confirmed on macOS Safari 16.5.2, Firefox 115.0.2 (Linux) and Chromium 115.0.5790.110 (Linux). Shota FUJI authored at Shota FUJI comitted at