@imgly/plugin-cutout-library-web 0.1.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -12
- package/dist/index.d.ts +5 -5
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +3 -3
- package/dist/plugin.d.ts +2 -3
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -16,25 +16,29 @@ npm install @imgly/plugin-cutout-library-web
|
|
|
16
16
|
|
|
17
17
|
## Usage
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
canvas menu entry for every block with an image fill.
|
|
19
|
+
When adding the plugin to the CE.SDK, you can also add an action button to the canvas menu. Further, we provide a utility method for getting a insert entry for the cutout library that adds the cutout library to the dock.
|
|
21
20
|
|
|
22
21
|
```typescript
|
|
23
22
|
import CreativeEditorSDK from '@cesdk/cesdk-js';
|
|
24
|
-
import
|
|
25
|
-
|
|
26
|
-
const config = {
|
|
27
|
-
license: '<your-license-here>'
|
|
28
|
-
};
|
|
23
|
+
import CutoutLibraryPlugin from '@imgly/plugin-cutout-library-web';
|
|
29
24
|
|
|
30
25
|
const cesdk = await CreativeEditorSDK.create(container, config);
|
|
31
|
-
await cesdk.addDefaultAssetSources()
|
|
32
|
-
|
|
33
|
-
|
|
26
|
+
await cesdk.addDefaultAssetSources();
|
|
27
|
+
await cesdk.addDemoAssetSources({ sceneMode: 'Design' });
|
|
28
|
+
await cesdk.addPlugin(
|
|
34
29
|
CutoutLibraryPlugin({
|
|
35
|
-
|
|
30
|
+
ui: { locations: ['canvasMenu'] }
|
|
36
31
|
})
|
|
37
|
-
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
cesdk.ui.setDockOrder([
|
|
35
|
+
...cesdk.ui.getDockOrder(),
|
|
36
|
+
{
|
|
37
|
+
id: 'cutout',
|
|
38
|
+
label: 'Cutout',
|
|
39
|
+
entries: ['ly.img.cutout.entry']
|
|
40
|
+
}
|
|
41
|
+
]);
|
|
38
42
|
|
|
39
43
|
await cesdk.createDesignScene();
|
|
40
44
|
```
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { UILocations, generateCutoutFromSelection
|
|
1
|
+
import { UILocations, generateCutoutFromSelection } from './plugin';
|
|
2
2
|
export declare const DEFAULT_ASSET_BASE_URI: string;
|
|
3
3
|
export declare const DEFAULT_PLUGIN_CONFIGURATION: {
|
|
4
4
|
assetBaseUri: string;
|
|
@@ -11,11 +11,11 @@ export interface PluginConfiguration {
|
|
|
11
11
|
}
|
|
12
12
|
export declare function getPluginConfiguration(config: Partial<PluginConfiguration>): PluginConfiguration;
|
|
13
13
|
declare const Plugin: (config?: Partial<PluginConfiguration>) => {
|
|
14
|
-
|
|
15
|
-
cesdk
|
|
16
|
-
}) => void
|
|
14
|
+
initialize: (context: import("@cesdk/cesdk-js").EnginePluginContext & {
|
|
15
|
+
cesdk?: import("@cesdk/cesdk-js").default | undefined;
|
|
16
|
+
}) => void;
|
|
17
17
|
name: string;
|
|
18
18
|
version: string;
|
|
19
19
|
};
|
|
20
20
|
export default Plugin;
|
|
21
|
-
export { generateCutoutFromSelection
|
|
21
|
+
export { generateCutoutFromSelection };
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var u="@imgly/plugin-cutout-library-web.canvasMenu",
|
|
1
|
+
var u="@imgly/plugin-cutout-library-web.canvasMenu",I=`${u}.button`,g=`${I}.label`;var c="ly.img.cutout",N=`${c}.entry`,C="@imgly/plugin-cutout-library-web.notifications.selectCutoutBlock",d="@imgly/plugin-cutout-library-web.notifications.cutoutBlockSelected",f="@imgly/plugin-cutout-library-web.notifications.differentPages",m={en:{[`libraries.${N}.label`]:"Cutouts",[C]:"Please select a block to cutout",[d]:"Cutout blocks cannot be cutout from selection",[f]:"Selected Blocks are from different pages. Please select blocks from the same page.",[g]:"Cutout"},de:{[`libraries.${N}.label`]:"Schnittlinien",[C]:"Bitte w\xE4hlen Sie einen Block zum Ausschneiden aus",[d]:"Schnittlinienbl\xF6cke k\xF6nnen nicht ausgeschnitten werden",[f]:"Ausgew\xE4hlte Bl\xF6cke stammen aus verschiedenen Seiten. Bitte w\xE4hlen Sie Bl\xF6cke von derselben Seite aus.",[g]:"Ausschneiden"}};function S(e){e.ui.registerComponent(u,({builder:{Button:o},engine:t})=>{let n=["//ly.img.ubq/group","//ly.img.ubq/graphic","//ly.img.ubq/text"],r=t.block.findAllSelected();if(r.length!==1||!n.includes(t.block.getType(r[0])))return null;o(I,{label:g,icon:({theme:a})=>`${_}/dock-${a}.svg`,onClick:()=>{p(e)}})})}async function b(e,o,t="",n){let{assets:r,id:a}=o;e.asset.addLocalSource(a,void 0,n),r.forEach(i=>{i.meta&&Object.entries(i.meta).forEach(([s,U])=>{let E=U.toString();if(E.includes("{{base_url}}")){let P=E.replace("{{base_url}}",t);i.meta&&(i.meta[s]=P)}}),i.payload?.sourceSet&&i.payload.sourceSet.forEach(s=>{s.uri=s.uri.replace("{{base_url}}",t)}),e.asset.addAssetToSource(a,i)})}var A=b;function L({assetBaseUri:e,ui:o}){return{initialize:({cesdk:t})=>{t!=null&&(h(t,{assetBaseUri:e}),y(t,{assetBaseUri:e}),S(t),o?.locations.includes("canvasMenu")&&t.ui.setCanvasMenuOrder([u,...t.ui.getCanvasMenuOrder()]),t.setTranslations(m))}}}function y(e,o=l){let{assetBaseUri:t}=O(o);e.ui.addAssetLibraryEntry({id:N,sourceIds:[c],icon:({theme:n})=>`${t}/dock-${n}.svg`,gridColumns:2,gridItemHeight:"square",cardLabel:n=>n.label,cardLabelPosition:()=>"below",cardBackgroundPreferences:[{path:"meta.thumbUri",type:"image"}]})}async function h(e,{assetBaseUri:o}){let t=await fetch(`${o}/${c}/content.json`).then(n=>n.json());A(e.engine,t,`${o}/${c}/assets`,async n=>n.id==="cutout-selection"?p(e):await e.engine.asset.defaultApplyAsset(n))}function p(e){let o=e.engine.block.findAllSelected();if(o.length===0){e.ui.showNotification({message:C,type:"error"});return}if(o.some(s=>e.engine.block.getType(s)==="//ly.img.ubq/cutout")){e.ui.showNotification({message:d,type:"error"});return}let n=o.map(s=>D(e.engine,s)),r=Array.from(new Set(n));if(r.length>1){e.ui.showNotification({message:f,type:"error"});return}let a=r[0],i=e.engine.block.createCutoutFromBlocks(o);return e.engine.block.appendChild(a,i),e.engine.block.setAlwaysOnTop(i,!0),e.engine.block.select(i),e.engine.editor.addUndoStep(),i}function D(e,o){let t=o;for(;t&&e.block.getType(t)!=="//ly.img.ubq/page";){let n=e.block.getParent(t);if(!n||n===t)return t;t=n}return t}var T=L;var _=`https://staticimgly.com/${"@imgly/plugin-cutout-library-web".replace("@","")}/1.0.0/dist/assets`,l={assetBaseUri:_};function O(e){return{...l,...e}}var B=(e=l)=>({name:"@imgly/plugin-cutout-library-web",version:"1.0.0",...T({...l,...e})}),z=B;export{_ as DEFAULT_ASSET_BASE_URI,l as DEFAULT_PLUGIN_CONFIGURATION,z as default,p as generateCutoutFromSelection,O as getPluginConfiguration};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/constants.ts", "../src/components.ts", "../src/loadAssetSourceFromContentJSON.ts", "../src/plugin.ts", "../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export const VERSION = PLUGIN_VERSION;\nexport const CANVAS_MENU_COMPONENT_ID = `${PLUGIN_NAME}.canvasMenu`;\nexport const CANVAS_MENU_COMPONENT_BUTTON_ID = `${CANVAS_MENU_COMPONENT_ID}.button`;\nexport const CANVAS_MENU_COMPONENT_BUTTON_LABEL = `${CANVAS_MENU_COMPONENT_BUTTON_ID}.label`;\n\nexport const FEATURE_ID = `${PLUGIN_NAME}.feature`;\nexport const ASSET_SOURCE_ID = 'ly.img.cutout';\nexport const ENTRY_ID = `${ASSET_SOURCE_ID}.entry`;\n\nexport const NOTIFICATION_SELECT_CUTOUT_BLOCK_ID = `${PLUGIN_NAME}.notifications.selectCutoutBlock`;\nexport const NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID = `${PLUGIN_NAME}.notifications.cutoutBlockSelected`;\nexport const NOTIFICATION_DIFFERENT_PAGES_ID = `${PLUGIN_NAME}.notifications.differentPages`;\n\nexport const I18N = {\n en: {\n [`libraries.${ENTRY_ID}.label`]: 'Cutouts',\n [NOTIFICATION_SELECT_CUTOUT_BLOCK_ID]: 'Please select a block to cutout',\n [NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID]:\n 'Cutout blocks cannot be cutout from selection',\n [NOTIFICATION_DIFFERENT_PAGES_ID]:\n 'Selected Blocks are from different pages. Please select blocks from the same page.',\n [CANVAS_MENU_COMPONENT_BUTTON_LABEL]: 'Cutout'\n },\n de: {\n [`libraries.${ENTRY_ID}.label`]: 'Schnittlinien',\n [NOTIFICATION_SELECT_CUTOUT_BLOCK_ID]:\n 'Bitte w\u00E4hlen Sie einen Block zum Ausschneiden aus',\n [NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID]:\n 'Schnittlinienbl\u00F6cke k\u00F6nnen nicht ausgeschnitten werden',\n [NOTIFICATION_DIFFERENT_PAGES_ID]:\n 'Ausgew\u00E4hlte Bl\u00F6cke stammen aus verschiedenen Seiten. Bitte w\u00E4hlen Sie Bl\u00F6cke von derselben Seite aus.',\n [CANVAS_MENU_COMPONENT_BUTTON_LABEL]: 'Ausschneiden'\n }\n} as const;\n", "import CreativeEditorSDK, { ObjectTypeLonghand } from '@cesdk/cesdk-js';\nimport { DEFAULT_ASSET_BASE_URI } from '.';\nimport {\n CANVAS_MENU_COMPONENT_BUTTON_ID,\n CANVAS_MENU_COMPONENT_BUTTON_LABEL,\n CANVAS_MENU_COMPONENT_ID\n} from './constants';\nimport { generateCutoutFromSelection } from './plugin';\n\nexport function registerComponents(cesdk: CreativeEditorSDK) {\n cesdk.ui.
|
|
5
|
-
"mappings": "AACO,IAAMA,EAA2B,8CAC3BC,EAAkC,GAAGD,CAAwB,UAC7DE,EAAqC,GAAGD,CAA+B,SAG7E,IAAME,EAAkB,gBAClBC,EAAW,GAAGD,CAAe,SAE7BE,EAAsC,mEACtCC,EAAwC,qEACxCC,EAAkC,gEAElCC,EAAO,CAClB,GAAI,CACF,CAAC,aAAaJ,CAAQ,QAAQ,EAAG,UACjC,CAACC,CAAmC,EAAG,kCACvC,CAACC,CAAqC,EACpC,gDACF,CAACC,CAA+B,EAC9B,qFACF,CAACE,CAAkC,EAAG,QACxC,EACA,GAAI,CACF,CAAC,aAAaL,CAAQ,QAAQ,EAAG,gBACjC,CAACC,CAAmC,EAClC,uDACF,CAACC,CAAqC,EACpC,+DACF,CAACC,CAA+B,EAC9B,oHACF,CAACE,CAAkC,EAAG,cACxC,CACF,ECxBO,SAASC,EAAmBC,EAA0B,CAC3DA,EAAM,GAAG,
|
|
6
|
-
"names": ["CANVAS_MENU_COMPONENT_ID", "CANVAS_MENU_COMPONENT_BUTTON_ID", "CANVAS_MENU_COMPONENT_BUTTON_LABEL", "ASSET_SOURCE_ID", "ENTRY_ID", "NOTIFICATION_SELECT_CUTOUT_BLOCK_ID", "NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID", "NOTIFICATION_DIFFERENT_PAGES_ID", "I18N", "CANVAS_MENU_COMPONENT_BUTTON_LABEL", "registerComponents", "cesdk", "CANVAS_MENU_COMPONENT_ID", "Button", "engine", "allowedTypes", "selectedBlockIds", "CANVAS_MENU_COMPONENT_BUTTON_ID", "CANVAS_MENU_COMPONENT_BUTTON_LABEL", "theme", "DEFAULT_ASSET_BASE_URI", "generateCutoutFromSelection", "loadAssetSourceFromContentJSON", "engine", "content", "baseURL", "applyAsset", "assets", "sourceId", "asset", "key", "value", "stringValue", "updated", "sourceSet", "loadAssetSourceFromContentJSON_default", "CutoutPlugin", "assetBaseUri", "ui", "cesdk", "addCutoutAssetSource", "
|
|
4
|
+
"sourcesContent": ["export const VERSION = PLUGIN_VERSION;\nexport const CANVAS_MENU_COMPONENT_ID = `${PLUGIN_NAME}.canvasMenu`;\nexport const CANVAS_MENU_COMPONENT_BUTTON_ID = `${CANVAS_MENU_COMPONENT_ID}.button`;\nexport const CANVAS_MENU_COMPONENT_BUTTON_LABEL = `${CANVAS_MENU_COMPONENT_BUTTON_ID}.label`;\n\nexport const FEATURE_ID = `${PLUGIN_NAME}.feature`;\nexport const ASSET_SOURCE_ID = 'ly.img.cutout';\nexport const ENTRY_ID = `${ASSET_SOURCE_ID}.entry`;\n\nexport const NOTIFICATION_SELECT_CUTOUT_BLOCK_ID = `${PLUGIN_NAME}.notifications.selectCutoutBlock`;\nexport const NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID = `${PLUGIN_NAME}.notifications.cutoutBlockSelected`;\nexport const NOTIFICATION_DIFFERENT_PAGES_ID = `${PLUGIN_NAME}.notifications.differentPages`;\n\nexport const I18N = {\n en: {\n [`libraries.${ENTRY_ID}.label`]: 'Cutouts',\n [NOTIFICATION_SELECT_CUTOUT_BLOCK_ID]: 'Please select a block to cutout',\n [NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID]:\n 'Cutout blocks cannot be cutout from selection',\n [NOTIFICATION_DIFFERENT_PAGES_ID]:\n 'Selected Blocks are from different pages. Please select blocks from the same page.',\n [CANVAS_MENU_COMPONENT_BUTTON_LABEL]: 'Cutout'\n },\n de: {\n [`libraries.${ENTRY_ID}.label`]: 'Schnittlinien',\n [NOTIFICATION_SELECT_CUTOUT_BLOCK_ID]:\n 'Bitte w\u00E4hlen Sie einen Block zum Ausschneiden aus',\n [NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID]:\n 'Schnittlinienbl\u00F6cke k\u00F6nnen nicht ausgeschnitten werden',\n [NOTIFICATION_DIFFERENT_PAGES_ID]:\n 'Ausgew\u00E4hlte Bl\u00F6cke stammen aus verschiedenen Seiten. Bitte w\u00E4hlen Sie Bl\u00F6cke von derselben Seite aus.',\n [CANVAS_MENU_COMPONENT_BUTTON_LABEL]: 'Ausschneiden'\n }\n} as const;\n", "import CreativeEditorSDK, { ObjectTypeLonghand } from '@cesdk/cesdk-js';\nimport { DEFAULT_ASSET_BASE_URI } from '.';\nimport {\n CANVAS_MENU_COMPONENT_BUTTON_ID,\n CANVAS_MENU_COMPONENT_BUTTON_LABEL,\n CANVAS_MENU_COMPONENT_ID\n} from './constants';\nimport { generateCutoutFromSelection } from './plugin';\n\nexport function registerComponents(cesdk: CreativeEditorSDK) {\n cesdk.ui.registerComponent(\n CANVAS_MENU_COMPONENT_ID,\n ({ builder: { Button }, engine }) => {\n // only show canvas menu button for type=graphic, type=text, type=group\n const allowedTypes: ObjectTypeLonghand[] = [\n '//ly.img.ubq/group',\n '//ly.img.ubq/graphic',\n '//ly.img.ubq/text'\n ] as const;\n const selectedBlockIds = engine.block.findAllSelected();\n if (\n selectedBlockIds.length !== 1 ||\n !allowedTypes.includes(engine.block.getType(selectedBlockIds[0]))\n ) {\n return null;\n }\n Button(CANVAS_MENU_COMPONENT_BUTTON_ID, {\n label: CANVAS_MENU_COMPONENT_BUTTON_LABEL,\n icon: ({ theme }) => `${DEFAULT_ASSET_BASE_URI}/dock-${theme}.svg`,\n onClick: () => {\n generateCutoutFromSelection(cesdk);\n }\n });\n }\n );\n}\n", "import { AssetDefinition, AssetResult, CreativeEngine } from '@cesdk/cesdk-js';\n\nasync function loadAssetSourceFromContentJSON(\n engine: CreativeEngine,\n content: ContentJSON,\n baseURL = '',\n applyAsset?: ((asset: AssetResult) => Promise<number | undefined>) | undefined\n) {\n const { assets, id: sourceId } = content;\n\n engine.asset.addLocalSource(sourceId, undefined, applyAsset);\n assets.forEach((asset) => {\n if (asset.meta) {\n Object.entries(asset.meta).forEach(([key, value]: [any, any]) => {\n const stringValue: string = value.toString();\n if (stringValue.includes('{{base_url}}')) {\n const updated = stringValue.replace('{{base_url}}', baseURL);\n if (asset.meta) {\n asset.meta[key] = updated;\n }\n }\n });\n }\n\n if (asset.payload?.sourceSet) {\n asset.payload.sourceSet.forEach((sourceSet) => {\n sourceSet.uri = sourceSet.uri.replace('{{base_url}}', baseURL);\n });\n }\n\n engine.asset.addAssetToSource(sourceId, asset);\n });\n}\nexport type ContentJSON = {\n version: string;\n id: string;\n assets: AssetDefinition[];\n};\n\nexport default loadAssetSourceFromContentJSON;\n", "import type CreativeEditorSDK from '@cesdk/cesdk-js';\nimport { CreativeEngine, type EditorPlugin } from '@cesdk/cesdk-js';\nimport {\n DEFAULT_PLUGIN_CONFIGURATION,\n PluginConfiguration,\n getPluginConfiguration\n} from '.';\nimport { registerComponents } from './components';\nimport {\n ASSET_SOURCE_ID,\n CANVAS_MENU_COMPONENT_ID,\n ENTRY_ID,\n I18N,\n NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID,\n NOTIFICATION_DIFFERENT_PAGES_ID,\n NOTIFICATION_SELECT_CUTOUT_BLOCK_ID\n} from './constants';\nimport loadAssetSourceFromContentJSON from './loadAssetSourceFromContentJSON';\n\nexport type UILocations = 'canvasMenu';\n\nexport interface UserInterfaceConfiguration {\n locations?: UILocations[];\n}\n\nexport function CutoutPlugin({\n assetBaseUri,\n ui\n}: PluginConfiguration): Omit<EditorPlugin, 'name' | 'version'> {\n return {\n initialize: ({ cesdk }) => {\n if (cesdk == null) return;\n\n addCutoutAssetSource(cesdk, { assetBaseUri });\n addCutoutAssetLibraryEntry(cesdk, { assetBaseUri });\n\n registerComponents(cesdk);\n if (ui?.locations.includes('canvasMenu')) {\n cesdk.ui.setCanvasMenuOrder([\n CANVAS_MENU_COMPONENT_ID,\n ...cesdk.ui.getCanvasMenuOrder()\n ]);\n }\n cesdk.setTranslations(I18N);\n }\n };\n}\n\nfunction addCutoutAssetLibraryEntry(\n cesdk: CreativeEditorSDK,\n config: Partial<PluginConfiguration> = DEFAULT_PLUGIN_CONFIGURATION\n) {\n const { assetBaseUri } = getPluginConfiguration(config);\n cesdk.ui.addAssetLibraryEntry({\n id: ENTRY_ID,\n sourceIds: [ASSET_SOURCE_ID],\n icon: ({ theme }: { theme: string }) => `${assetBaseUri}/dock-${theme}.svg`,\n gridColumns: 2,\n gridItemHeight: 'square' as const,\n cardLabel: (asset: any) => asset.label,\n cardLabelPosition: () => 'below' as const,\n cardBackgroundPreferences: [{ path: 'meta.thumbUri', type: 'image' }]\n });\n}\n\nasync function addCutoutAssetSource(\n cesdk: CreativeEditorSDK,\n {\n assetBaseUri\n }: {\n assetBaseUri: string;\n }\n) {\n const contentJSON = await fetch(\n `${assetBaseUri}/${ASSET_SOURCE_ID}/content.json`\n ).then((res) => res.json());\n\n loadAssetSourceFromContentJSON(\n cesdk.engine,\n contentJSON,\n `${assetBaseUri}/${ASSET_SOURCE_ID}/assets`,\n async (asset) => {\n if (asset.id === 'cutout-selection') {\n return generateCutoutFromSelection(cesdk);\n }\n const blockId = await cesdk.engine.asset.defaultApplyAsset(asset);\n return blockId;\n }\n );\n}\n\nexport function generateCutoutFromSelection(cesdk: CreativeEditorSDK) {\n const selectedBlockIds = cesdk.engine.block.findAllSelected();\n\n if (selectedBlockIds.length === 0) {\n cesdk.ui.showNotification({\n message: NOTIFICATION_SELECT_CUTOUT_BLOCK_ID,\n type: 'error'\n });\n return undefined;\n }\n const hasCutoutsSelected = selectedBlockIds.some((selectedBlockId) => {\n return (\n cesdk.engine.block.getType(selectedBlockId) === '//ly.img.ubq/cutout'\n );\n });\n if (hasCutoutsSelected) {\n cesdk.ui.showNotification({\n message: NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID,\n type: 'error'\n });\n return undefined;\n }\n\n const parentPageBlockIds = selectedBlockIds.map((block) =>\n getParentPageId(cesdk.engine, block)\n );\n const uniqueParentPageBlockIds = Array.from(new Set(parentPageBlockIds));\n // throw error if blocks are from different pages\n if (uniqueParentPageBlockIds.length > 1) {\n cesdk.ui.showNotification({\n message: NOTIFICATION_DIFFERENT_PAGES_ID,\n type: 'error'\n });\n return undefined;\n }\n const pageId = uniqueParentPageBlockIds[0];\n\n const blockId = cesdk.engine.block.createCutoutFromBlocks(selectedBlockIds);\n cesdk.engine.block.appendChild(pageId, blockId);\n cesdk.engine.block.setAlwaysOnTop(blockId, true);\n cesdk.engine.block.select(blockId);\n cesdk.engine.editor.addUndoStep();\n return blockId;\n}\n\nfunction getParentPageId(engine: CreativeEngine, block: number) {\n // traverse up the block tree to find the page\n let currentBlock = block;\n while (\n currentBlock &&\n engine.block.getType(currentBlock) !== '//ly.img.ubq/page'\n ) {\n const parentBlock = engine.block.getParent(currentBlock);\n if (!parentBlock || parentBlock === currentBlock) {\n return currentBlock;\n }\n currentBlock = parentBlock;\n }\n return currentBlock;\n}\n\nexport default CutoutPlugin;\n", "import plugin, { UILocations, generateCutoutFromSelection } from './plugin';\n\nexport const DEFAULT_ASSET_BASE_URI = `https://staticimgly.com/${PLUGIN_NAME.replace(\n '@',\n ''\n)}/${PLUGIN_VERSION}/dist/assets`;\n\nexport const DEFAULT_PLUGIN_CONFIGURATION = {\n assetBaseUri: DEFAULT_ASSET_BASE_URI\n};\n\nexport interface PluginConfiguration {\n assetBaseUri: string;\n ui?: {\n locations: UILocations[];\n };\n}\n\nexport function getPluginConfiguration(\n config: Partial<PluginConfiguration>\n): PluginConfiguration {\n return { ...DEFAULT_PLUGIN_CONFIGURATION, ...config };\n}\n\nconst Plugin = (\n config: Partial<PluginConfiguration> = DEFAULT_PLUGIN_CONFIGURATION\n) => ({\n name: PLUGIN_NAME,\n version: PLUGIN_VERSION,\n ...plugin({ ...DEFAULT_PLUGIN_CONFIGURATION, ...config })\n});\n\nexport default Plugin;\n\nexport { generateCutoutFromSelection };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["CANVAS_MENU_COMPONENT_ID", "CANVAS_MENU_COMPONENT_BUTTON_ID", "CANVAS_MENU_COMPONENT_BUTTON_LABEL", "ASSET_SOURCE_ID", "ENTRY_ID", "NOTIFICATION_SELECT_CUTOUT_BLOCK_ID", "NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID", "NOTIFICATION_DIFFERENT_PAGES_ID", "I18N", "CANVAS_MENU_COMPONENT_BUTTON_LABEL", "registerComponents", "cesdk", "CANVAS_MENU_COMPONENT_ID", "Button", "engine", "allowedTypes", "selectedBlockIds", "CANVAS_MENU_COMPONENT_BUTTON_ID", "CANVAS_MENU_COMPONENT_BUTTON_LABEL", "theme", "DEFAULT_ASSET_BASE_URI", "generateCutoutFromSelection", "loadAssetSourceFromContentJSON", "engine", "content", "baseURL", "applyAsset", "assets", "sourceId", "asset", "key", "value", "stringValue", "updated", "sourceSet", "loadAssetSourceFromContentJSON_default", "CutoutPlugin", "assetBaseUri", "ui", "cesdk", "addCutoutAssetSource", "addCutoutAssetLibraryEntry", "registerComponents", "CANVAS_MENU_COMPONENT_ID", "I18N", "config", "DEFAULT_PLUGIN_CONFIGURATION", "getPluginConfiguration", "ENTRY_ID", "ASSET_SOURCE_ID", "theme", "asset", "contentJSON", "res", "loadAssetSourceFromContentJSON_default", "generateCutoutFromSelection", "selectedBlockIds", "NOTIFICATION_SELECT_CUTOUT_BLOCK_ID", "selectedBlockId", "NOTIFICATION_CUTOUT_BLOCK_SELECTED_ID", "parentPageBlockIds", "block", "getParentPageId", "uniqueParentPageBlockIds", "NOTIFICATION_DIFFERENT_PAGES_ID", "pageId", "blockId", "engine", "currentBlock", "parentBlock", "plugin_default", "DEFAULT_ASSET_BASE_URI", "DEFAULT_PLUGIN_CONFIGURATION", "getPluginConfiguration", "config", "Plugin", "plugin_default", "src_default"]
|
|
7
7
|
}
|
package/dist/plugin.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import type CreativeEditorSDK from '@cesdk/cesdk-js';
|
|
2
|
-
import {
|
|
2
|
+
import { type EditorPlugin } from '@cesdk/cesdk-js';
|
|
3
3
|
import { PluginConfiguration } from '.';
|
|
4
4
|
export type UILocations = 'canvasMenu';
|
|
5
5
|
export interface UserInterfaceConfiguration {
|
|
6
6
|
locations?: UILocations[];
|
|
7
7
|
}
|
|
8
|
-
export declare function CutoutPlugin({ assetBaseUri, ui }: PluginConfiguration): EditorPlugin
|
|
9
|
-
export declare function getCutoutLibraryInsertEntry(config?: Partial<PluginConfiguration>): UserInterfaceElements.AssetLibraryEntry;
|
|
8
|
+
export declare function CutoutPlugin({ assetBaseUri, ui }: PluginConfiguration): Omit<EditorPlugin, 'name' | 'version'>;
|
|
10
9
|
export declare function generateCutoutFromSelection(cesdk: CreativeEditorSDK): number | undefined;
|
|
11
10
|
export default CutoutPlugin;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@imgly/plugin-cutout-library-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Cutout Library plugin for the CE.SDK editor",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"CE.SDK",
|
|
@@ -40,19 +40,20 @@
|
|
|
40
40
|
"scripts": {
|
|
41
41
|
"start": "npm run watch",
|
|
42
42
|
"clean": "npx rimraf dist",
|
|
43
|
+
"purge": "npx rimraf node_modules",
|
|
43
44
|
"build": "npm run clean && node scripts/build.mjs && cp -r assets dist/",
|
|
44
45
|
"dev": "node scripts/watch.mjs",
|
|
46
|
+
"dev:wait": "npx wait-on ./dist/index.mjs ./dist/index.d.ts --timeout 30000",
|
|
45
47
|
"dev:types": "tsc --emitDeclarationOnly --watch --preserveWatchOutput",
|
|
46
48
|
"publish:latest": "npm run build && npm publish --tag latest --access public",
|
|
47
49
|
"publish:next": "npm run build && npm publish --tag next --access public",
|
|
48
|
-
"check:all": "concurrently -n lint,type,pretty \"yarn check:lint\" \"yarn check:
|
|
50
|
+
"check:all": "concurrently -n lint,type,pretty \"yarn check:lint\" \"yarn check:types\" \"yarn check:pretty\"",
|
|
49
51
|
"check:lint": "eslint --max-warnings 0 './src/**/*.{ts,tsx}'",
|
|
50
52
|
"check:pretty": "prettier --list-different './src/**/*.{ts,tsx}'",
|
|
51
|
-
"check:
|
|
53
|
+
"check:types": "tsc --noEmit",
|
|
52
54
|
"types:create": "tsc --emitDeclarationOnly"
|
|
53
55
|
},
|
|
54
56
|
"devDependencies": {
|
|
55
|
-
"@cesdk/cesdk-js": "~1.21.0",
|
|
56
57
|
"@types/ndarray": "^1.0.14",
|
|
57
58
|
"chalk": "^5.3.0",
|
|
58
59
|
"concurrently": "^8.2.2",
|
|
@@ -61,7 +62,7 @@
|
|
|
61
62
|
"typescript": "^5.3.3"
|
|
62
63
|
},
|
|
63
64
|
"peerDependencies": {
|
|
64
|
-
"@cesdk/cesdk-js": "
|
|
65
|
+
"@cesdk/cesdk-js": "^1.32.0"
|
|
65
66
|
},
|
|
66
67
|
"dependencies": {
|
|
67
68
|
"lodash": "^4.17.21"
|