https://github.com/mantou132/gem-panel
A custom element <gem-panel>, let you easily create layout similar to Adobe After Effects.
https://github.com/mantou132/gem-panel
adobe-after-effects console css-grid custom-elements layout panels webcomponents
Last synced: over 1 year ago
JSON representation
A custom element <gem-panel>, let you easily create layout similar to Adobe After Effects.
- Host: GitHub
- URL: https://github.com/mantou132/gem-panel
- Owner: mantou132
- License: mit
- Created: 2021-05-02T19:52:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-06T09:56:59.000Z (over 2 years ago)
- Last Synced: 2025-03-29T00:03:40.551Z (over 1 year ago)
- Topics: adobe-after-effects, console, css-grid, custom-elements, layout, panels, webcomponents
- Language: TypeScript
- Homepage: https://panel.gemjs.org/
- Size: 830 KB
- Stars: 17
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A custom element``, let you easily create layout similar to Adobe After Effects.
## Demo
- [Custom style](https://gem-panel-example-style.vercel.app/)
- [Adobe Bridge simulation](https://gem-panel-example-bridge.vercel.app/)
## Features
- Drag to adjust the grid
- Drag to move the panel and window
- Drag and drop to adjust the panel sorting
- Add commands to the panel
- Cache layout
- Custom style, [screenshot](./screenshots/style.png)
- Async load panel content
- Can use in any framework
- Typescript support
- Lightweight, ~20kb(br)
## Install
```bash
npm i gem-panel
```
## Example
```ts
import { Layout, Panel, Window } from 'gem-panel';
import { render, html } from '@mantou/gem';
const panel1 = new Panel('p1', { title: 'p1 title', content: html`p1 content` });
const panel2 = new Panel('p2', { title: 'p2 title' });
const panel3 = new Panel('p3', { title: 'p3 title', content: html`` });
const panel4 = new Panel('p4', { title: 'p4 title', content: html`` });
const panel5 = new Panel('p5', { title: 'p5 title', content: html`` });
const panel6 = new Panel('p6', { title: 'p6 title', content: html`` });
const panels = [panel1, panel2, panel3, panel4, panel5, panel6];
const layout = new Layout([new Window([panel1, panel4, panel5]), new Window([panel2]), new Window([panel6])]);
render(
html`
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
gem-panel::part(fixed-window) {
box-shadow: 0 0.3em 1em rgb(0 0 0 / 40%);
}
`,
document.body,
);
```
## Develop
```bash
# install dependencies
npm i
# development
npm run example
# test
npm run test
```