Feature: Layer List Plugin #11
Conversation
mirko314
force-pushed
the
feature/layer-list
branch
from
ae396a6 to
8803a36
Compare
mirko314
force-pushed
the
feature/layer-list
branch
from
843127d to
98a91ad
Compare
| await cesdk.unstable_addPlugin(LayerListPlugin()); | ||
|
|
||
| await cesdk.createDesignScene(); | ||
| await cesdk.ui.openPanel("@imgly/plugin-layer-list-web.panel"), |
There was a problem hiding this comment.
Question – What is the naming convention here? The "." notation at the end is new to me. However, I guess that we have to clarify naming conventions in general.
There was a problem hiding this comment.
That's a good point. We should think about something. I also thought that it could make sense to export ids from the plugin as constants.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| try { | ||
| await Promise.all([ | ||
| cesdk.unstable_addPlugin( | ||
| // @ts-ignore |
There was a problem hiding this comment.
Are you sure that this is needed?
| BackgroundRemovalPlugin({ ui: { locations: 'canvasMenu' } }) | ||
| ), | ||
| ...addDemoRemoteAssetSourcesPlugins(cesdk) | ||
| ...addDemoRemoteAssetSourcesPlugins(cesdk), | ||
| // @ts-ignore |
| }); | ||
|
|
||
| export const Meta = PLUGIN_META; | ||
| export const Apps = [ |
There was a problem hiding this comment.
This seems something very specific to this kind of "Apps" view that only the demo uses. I do not think I would like to expose this publicly in the package right now but just implement this on the demo app level and then rethink how we want an interface to look like maybe even in the context of the CE.SDK.
| const mode = engine.scene.getMode(); | ||
| if (mode !== 'Design') { | ||
| // eslint-disable-next-line no-console | ||
| console.error('The Layer List Panel is only available in Design mode.'); |
There was a problem hiding this comment.
Just out of curiosity. Is there an issue with Video?
| callbacks: { onUpload: 'local', onLoad: 'upload' }, | ||
| // We need to load assets from the same domain to enable custom dom panels (like e.g created in the layer list panel). | ||
| // Otherwise, the panel only shows an error message. | ||
| baseURL: '/assets', |
There was a problem hiding this comment.
Don't we have to copy asset from the CE.SDK with this changes? At least I cannot start the app without WASM errors.
| return ( | ||
| <div | ||
| className={clsx({ | ||
| 'flex justify-between items-center text-primary-foreground hover:bg-primary-hover pr-4 cursor-move h-8': |
There was a problem hiding this comment.
I'll never get used to tailwind. :D
| {isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />} | ||
| </button> | ||
| )} | ||
| {childrenCount === 0 && <div style={{ width: '24px' }} />} |
There was a problem hiding this comment.
Would it make sense to use our CSS variables instead of hard coding this?
| }); | ||
| }; | ||
| // Subscribe to history updates to update the block tree when the history changes | ||
| const unsubscribe = engine.editor.onHistoryUpdated(() => { |
There was a problem hiding this comment.
Relying on the history state means that it does not react on changes done with the API (if no history step was added). Maybe we can subscribe to the regular events and wrap it in a debounce?
Co-authored-by: maerch <[email protected]>
Co-authored-by: maerch <[email protected]>
Adds a layer list panel plugin.
This plugin uses
to create a highly interactive custom panel for the CE.SDK which allows customers to see all blocks inside the current Scene