Skip to content

Commit

Permalink
wip: Polyfill experiements
Browse files Browse the repository at this point in the history
  • Loading branch information
DanielHauschildt committed Feb 12, 2024
1 parent 4cddfea commit 5289b4a
Show file tree
Hide file tree
Showing 58 changed files with 643 additions and 378 deletions.
18 changes: 13 additions & 5 deletions TODO.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
- ? How can I list all plugins that are active
- ? How can I deactivate a plugin
- ? we should pass the PluginContext with seperate `{engine?: ImglyEngine, editor?: ImglyEditor, ui?: ImglyUI`

- `feature.isEnabled` should be feature.isEnabledFor(blockId) -> test for multiple blockIds at once
- [ ] How can I list all plugins that are active
- [ ] How can I deactivate a plugin later completely? `enableFeatures`, but this must be per "command". A plugin might contribute multiple features?
- [ ] we should pass the PluginContext with separate `imgly: {engine?: ImglyEngine, editor?: ImglyEditor, ui?: ImglyUI`
- [ ] We can already establish the name 'imgly" for the PLUGINS
- [ ] `unstable_getCanvasMenuOrder` should maybe be called `unstable_getCanvasMenuEntries`
- [ ] `unstable_setCanvasMenuOrder` should maybe be called `unstable_setCanvasMenuEntries`
- [ ] `unstable_enableFeatures` what is it used for. the button is not displayed when I check it internally
- [ ] `unstable_enableFeatures` should get the blocks it should evaluate it for. It's not always the selected ones in every scenario.
- [ ] `enable_features` could probably better be named `enableFeatureInContext()`
- [ ] What is the intention of the `builder.Button` first parameter, where is the id used later?
- [ ] (Exkurs) How can I change the type of a block to another. E.g. Change a Graphic Block into a Group Block for Vectorizer and the ID should stay the same and all properties that are relevant. "Turn into"
- [ ] The separation of ui and engine is sometimes too hard to use. I propose not to make it dependent on initUI and init. But more like lifecycles in general and always pass {ui?, engine, editor}
- [ ] `upload` should maybe be part of the asset sources and/or part of engine
3 changes: 2 additions & 1 deletion examples/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"@imgly/plugin-vectorizer-web": "*",
"react": "^18.2.0",
"react-cmdk": "^1.3.9",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"share-api-polyfill": "^1.1.1"
},
"devDependencies": {
"@types/react": "^18.2.43",
Expand Down
49 changes: 37 additions & 12 deletions examples/web/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,52 @@ import CreativeEditorSDK, { Configuration } from "@cesdk/cesdk-js";
import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
import VectorizerPlugin, { Manifest as VectorizerManifest } from '@imgly/plugin-vectorizer-web';

import { ActionsMenu } from "./CommandPalette"
import { CommandPalette } from "./CommandPalette"
import 'share-api-polyfill';

const plugins = [VectorizerPlugin(), BackgroundRemovalPlugin()]
function downloadBlob(blob: Blob, filename: string) {
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
URL.revokeObjectURL(url);
}

const downloadBlocks = (cesdk: CreativeEditorSDK, blobs: Blob[], options: { mimeType: string, pages?: number[] }) => {
const postfix = options.mimeType.split("/")[1]
const pageIds = options.pages ?? []

blobs.forEach((blob, index) => {
const pageId = pageIds[index]
let pageName = `page-${index}`
if (pageId) {
const name = cesdk.engine.block.getName(pageId)
pageName = name?.length ? name : pageName
}
const filename = `${pageName}.${postfix}`;
downloadBlob(blob, filename);
})
return Promise.resolve();
}


function App() {
const cesdk = useRef<CreativeEditorSDK>();
const config: Configuration = {
license: import.meta.env.VITE_CESDK_LICENSE_KEY,
callbacks: {
callbacks: {
onUpload: "local",
onDownload: "download",
onSave: (s) => {
console.log("Save", s);
return Promise.resolve();
},
onExport: (blobs, options) => {
// why does this only export 1 page
console.log("Export", blobs, options);
return Promise.resolve();
onSave: async (str: string) => {
// improve
return downloadBlocks(cesdk.current!, [new Blob([str])], { mimeType: 'application/imgly' })
},

onExport: async (blobs, options) => {
return downloadBlocks(cesdk.current!, blobs, { mimeType: options.mimeType, pages: options.pages })

},
onLoad: "upload",
},
Expand All @@ -41,7 +66,7 @@ function App() {
save: true,
load: true,
export: true,
share: true,
// share: true,
}
}
}
Expand All @@ -51,7 +76,7 @@ function App() {

return (
<>
<ActionsMenu cesdkRef={cesdk} actions={[...VectorizerManifest?.contributes?.actions]} />
<CommandPalette cesdkRef={cesdk} actions={[...VectorizerManifest?.contributes?.commands]} />
<div
style={{ width: "100vw", height: "100vh" }}
ref={(domElement) => {
Expand Down
24 changes: 12 additions & 12 deletions examples/web/src/CommandPalette.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "react-cmdk/dist/cmdk.css";
import CommandPalette, { filterItems, getItemIndex } from "react-cmdk";
import CMDK , { filterItems, getItemIndex } from "react-cmdk";
import { useState, useEffect, RefObject } from "react";
import CreativeEditorSDK from "@cesdk/cesdk-js";

// https://github.com/albingroen/react-cmdk
export const ActionsMenu = (params: { cesdkRef: RefObject<CreativeEditorSDK | undefined>, actions: Array<any> }) => {
export const CommandPalette = (params: { cesdkRef: RefObject<CreativeEditorSDK | undefined>, actions: Array<any> }) => {
const [page, _setPage] = useState<"root">("root");
const [search, setSearch] = useState("");
const [isOpen, setIsOpen] = useState<boolean>(false);
Expand Down Expand Up @@ -138,8 +138,8 @@ export const ActionsMenu = (params: { cesdkRef: RefObject<CreativeEditorSDK | un
]
},
{
heading: "Plugin",
id: "plugin",
heading: "Turn into...",
id: "turnInto",
items: params.actions.map(action => {
return {
id: action.id,
Expand All @@ -158,32 +158,32 @@ export const ActionsMenu = (params: { cesdkRef: RefObject<CreativeEditorSDK | un
);

return (
<CommandPalette
<CMDK
onChangeSearch={setSearch}
onChangeOpen={setIsOpen}
search={search}
isOpen={isOpen}
page={page}
>
<CommandPalette.Page id="root">
<CMDK.Page id="root">
{filteredItems.length ? (
filteredItems.map((list) => (
<CommandPalette.List key={list.id} heading={list.heading}>
<CMDK.List key={list.id} heading={list.heading}>
{list.items.map(({ id, ...rest }) => (
<CommandPalette.ListItem
<CMDK.ListItem
key={id}
index={getItemIndex(filteredItems, id)}
{...rest}
/>
))}
</CommandPalette.List>
</CMDK.List>
))
) : (
<CommandPalette.FreeSearchAction />
<CMDK.FreeSearchAction />
)}
</CommandPalette.Page>
</CMDK.Page>

</CommandPalette>
</CMDK>
);
};

Expand Down
8 changes: 5 additions & 3 deletions examples/web/src/addPlugins.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import CreativeEditorSDK from '@cesdk/cesdk-js';

// import PolyfillCommandsPlugin from "@imgly/plugin-polyfill-commands"
import BackgroundRemovalPlugin from '@imgly/plugin-background-removal-web';
import VectorizerPlugin from '@imgly/plugin-vectorizer-web';

const plugins = [VectorizerPlugin(), BackgroundRemovalPlugin()]

const plugins = [
// PolyfillCommandsPlugin(),
VectorizerPlugin(),
BackgroundRemovalPlugin()]

async function addPlugins(cesdk: CreativeEditorSDK) {
try {
Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
"name": "imgly-plugins",
"version": "0.0.0",
"workspaces": [
"examples/*",
"packages/*"
"examples/web",
"packages/background-removal",
"packages/vectorizer"
],
"scripts": {
"build": "turbo run build --force",
Expand Down
3 changes: 1 addition & 2 deletions packages/background-removal/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
],
"repository": {
"type": "git",
"url": "git+https://github.com/imgly/plugin-background-removal-web.git"
"url": "git+https://github.com/imgly/plugins.git"
},
"license": "SEE LICENSE IN LICENSE.md",
"author": {
Expand Down Expand Up @@ -57,7 +57,6 @@
"types:create": "tsc --emitDeclarationOnly"
},
"devDependencies": {
"@cesdk/cesdk-js": "~1.20.0",
"@types/ndarray": "^1.0.14",
"chalk": "^5.3.0",
"concurrently": "^8.2.2",
Expand Down
1 change: 1 addition & 0 deletions packages/background-removal/src/registerComponents.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export function registerComponents(cesdk: CreativeEditorSDK) {
return;
}

// Why is that needed. The feature enable should already handle that
const [id] = engine.block.findAllSelected();
if (!cesdk.engine.block.hasFill(id)) return;

Expand Down
1 change: 1 addition & 0 deletions packages/polyfill-commands/LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
TBD
40 changes: 40 additions & 0 deletions packages/polyfill-commands/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# IMG.LY CE.SDK Plugin Vectorizer

This plugin introduces a vectorizer for the CE.SDK editor.

## Installation

You can install the plugin via npm or yarn. Use the following commands to install the package:

```
yarn add @imgly/plugin-vectorizer-web
npm install @imgly/plugin-vectorizer-web
```

## Usage

Adding the plugin to CE.SDK will automatically add a vectorizer
canvas menu entry for every block with an image fill.

```typescript
import CreativeEditorSDK from '@cesdk/cesdk-js';
import VectorizerPlugin from '@imgly/plugin-vectorizer-web';

const config = {
license: '<your-license-here>',
callbacks: {
// Please note that the vectorizer plugin depends on an correctly
// configured upload. 'local' will work for local testing, but in
// production you will need something stable. Please take a look at:
// https://img.ly/docs/cesdk/ui/guides/upload-images/
onUpload: 'local'
}
};

const cesdk = await CreativeEditorSDK.create(container, config);
await cesdk.addDefaultAssetSources(),
await cesdk.addDemoAssetSources({ sceneMode: 'Design' }),
await cesdk.unstable_addPlugin(VectorizerPlugin());

await cesdk.createDesignScene();
```
1 change: 1 addition & 0 deletions packages/polyfill-commands/STRUCTURE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- https://nextjs.org/docs/getting-started/project-structure -->
File renamed without changes.
58 changes: 58 additions & 0 deletions packages/polyfill-commands/esbuild/config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import chalk from 'chalk';
import { readFile } from 'fs/promises';

// import packageJson from '../package.json' assert { type: 'json' };
// Avoid the Experimental Feature warning when using the above.
const packageJson = JSON.parse(
await readFile(new URL('../package.json', import.meta.url))
);


const dependencies = Object.keys(packageJson.dependencies)
const peerDependencies = Object.keys(packageJson.peerDependencies)
const externals = [...dependencies, ...peerDependencies]

console.log(
chalk.yellow('Building version: '),
chalk.green(packageJson.version)
);

const configs = [
{
entryPoints: ['src/index.ts', "src/worker.ts"],
define: {
PLUGIN_VERSION: `"${packageJson.version}"`
},
minify: true,
bundle: true,
sourcemap: true,
external: externals,
platform: 'node',
format: 'esm',
outdir: 'dist',
outExtension: { '.js': '.mjs' },
plugins: [
{
name: 'reporter',
setup(build) {
build.onEnd((result) => {
console.log(
`[${new Date().toLocaleTimeString(undefined, {
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
hour12: false
})}] Build ${
result.errors.length
? chalk.red('failed')
: chalk.green('succeeded')
}`
);
});
}
}
]
}
];

export default configs;
3 changes: 3 additions & 0 deletions packages/polyfill-commands/esbuild/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// These constants here are added by the base esbuild config

declare const PLUGIN_VERSION: string;
Loading

0 comments on commit 5289b4a

Please sign in to comment.