Unofficial static Figma frame/file viewer available as HTML CustomElement
Commits at 669eb592c33633faa19db1db0a6e464a11c1214d
669eb592fix(components): Disable canvas interaction on inspector
https://github.com/pocka/figspec/pull/12#issuecomment-754766352
Since event handlers listens at a root of the CustomElement, gestures
working even on the inspector panel. This commit prevents these gestures
from working on the inspector panel by adding `stopPropagation`.
The "space+drag" functionallity, on the other hand, can't be prevented
because it's registered via `onmouse~` but I don't think it's critical
for UX.
I also fixed some elements' sizing so they could scroll and be sized
properly.
Shota Fuji
authored at
Shota Fuji
comitted at
dfd433ccMerge pull request #12 from yannbf/feature/inspector-view
Feature/inspector viewShota Fuji
authored at
GitHub
comitted at
bdca799cMerge pull request #18 from pocka/fix/react-jsx-transform
Do not use new JSX transformShota Fuji
authored at
GitHub
comitted at
593c1f69chore: Explicitly specify typing files
Even though TypeScript catches typing files, npmjs.com cannot detect
whether the package has TypeScript typings.
Shota Fuji
authored at
Shota Fuji
comitted at
dfe5a51aMerge pull request #13 from pocka/feature/react-binding
React bindingsShota Fuji
authored at
GitHub
comitted at
3524be23Merge pull request #11 from pocka/feature/initial-zoom-level
Initial zoom levelShota Fuji
authored at
GitHub
comitted at
1f3fdd1fchore: Do not flag src/index.ts as pure
Without specifying the file in package.json#sideEffects, webpack used by
build-storybook marks the file as side-effect free and omits it!
Shota Fuji
authored at
Shota Fuji
comitted at
569c3f80Merge pull request #9 from yannbf/feature/add-drag
Feature: add drag functionality like figmaShota Fuji
authored at
GitHub
comitted at
d8991c59refactor: Use single customElement for preview
Use only <figspec-viewer> instead of with <figma-viewer-guide>.
This reduces maintenance costs and makes modifying the codebase more
easy.
I also changed the DOM structure to rendering guides and tooltips
inside one single <svg> container for simplicity (and for performance,
hopefully).
Shota Fuji
authored at
Shota Fuji
comitted at
2a57a999refactor: figma-viewer -> figspec-viewer
To match the package name. Also avoids conflict with future (possible)
official custom elements.
Shota Fuji
authored at
Shota Fuji
comitted at
f06f1246feature: add drag like figma
Figma provides drag functionality when holding space, so does other tools.
Functionality is added to match that.
Yann Braga
authored at
Yann Braga
comitted at
c53ff5femisc: Mark non-public properties as private
Almost every public accesible properties are caught by
web-component-analyzer and appears on Docs table. Some getters and
inherited public properties are not intended to be used by users.
Shota Fuji
authored at
Shota Fuji
comitted at
b6d4e733feat: Initial zoom level
https://github.com/pocka/figspec/issues/1
Sets initial zoom level based on element's size. This might not be same
as Figma's behavior, but it's convenient.
Shota Fuji
authored at
Shota Fuji
comitted at
4184ab6efeat(react): React bindings
You can use WebComponents (custom elements) in React, but the experience
is not great. No props binding (React uses setAttribute), Poor type
definition (JSX does great job though), Imperative event handling,
etc...
This bindings aim to solve these inconveniencies.
Shota Fuji
authored at
Shota Fuji
comitted at
af9a7942perf: Does not compute node related stuff each render
https://github.com/pocka/figspec/issues/7
Only performe flattening the node tree, determining outermost
bounding rect and construct distance-lines when related values have
updated. From what I saw, this change stabilizes an average FPS and
makes a memory usage more mild (less GC sweep).
Shota Fuji
authored at
Shota Fuji
comitted at
1f79281arefactor(components): Delegate viewer functionalitty into mixin
Shota Fuji
authored at
Shota Fuji
comitted at
cc281367refactor(components): Slim down figspec-viewer
In order to add file viewer feature, I needed to split non-nodes related
codes out from <figspec-viewer>. This commit does:
1. Make error UI as component (View function)
2. Move pan/scale related things out as a mixin
With a little more cleanup, I can add file viewer feature without a
bunch of duplicated code :)
Shota Fuji
authored at
Shota Fuji
comitted at