@cesdk/engine 1.72.2-rc.0 → 1.72.3-rc.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/index.html ADDED
@@ -0,0 +1,182 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>CE.SDK Example</title>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
+
9
+ <style>
10
+ body {
11
+ margin: 0;
12
+ overflow: hidden;
13
+ }
14
+
15
+ html {
16
+ overscroll-behavior-x: contain;
17
+ }
18
+
19
+ #root {
20
+ height: 100vh;
21
+ }
22
+
23
+ .ubq-public {
24
+ /* Override CSS variables for a custom theme */
25
+ }
26
+ </style>
27
+ </head>
28
+
29
+ <body>
30
+ <div id="root"></div>
31
+
32
+ <script type="module">
33
+ import CreativeEditorSDK from './index.js';
34
+ import {
35
+ BlurAssetSource,
36
+ ColorPaletteAssetSource,
37
+ CropPresetsAssetSource,
38
+ DemoAssetSources,
39
+ EffectsAssetSource,
40
+ FiltersAssetSource,
41
+ PagePresetsAssetSource,
42
+ StickerAssetSource,
43
+ TextAssetSource,
44
+ TextComponentAssetSource,
45
+ TypefaceAssetSource,
46
+ UploadAssetSources,
47
+ VectorShapeAssetSource
48
+ } from './plugins/index.js';
49
+
50
+ window.onload = function () {
51
+ var href = window.location.href.split('?');
52
+ var config = {
53
+ baseURL: 'assets/',
54
+ role: 'Creator', // 'Creator', 'Adopter', 'Viewer'
55
+ callbacks: {
56
+ onSave: handleSave,
57
+ onLoad: handleLoad,
58
+ onExport: handleExport,
59
+ onUnsupportedBrowser: () => {
60
+ console.error('Unsupported Browser Detected');
61
+ }
62
+ },
63
+ ui: {
64
+ elements: {
65
+ view: 'default',
66
+ panels: {
67
+ settings: true
68
+ },
69
+ navigation: {
70
+ action: {
71
+ close: true,
72
+ back: true,
73
+ save: true,
74
+ load: true,
75
+ export: true
76
+ }
77
+ }
78
+ }
79
+ }
80
+ };
81
+
82
+ CreativeEditorSDK.create(document.getElementById('root'), config).then(
83
+ async (instance) => {
84
+ // Set the locale using the new API
85
+ instance.i18n.setLocale('en');
86
+
87
+ // Add asset source plugins
88
+ await instance.addPlugin(new BlurAssetSource());
89
+ await instance.addPlugin(new ColorPaletteAssetSource());
90
+ await instance.addPlugin(new CropPresetsAssetSource());
91
+ await instance.addPlugin(new EffectsAssetSource());
92
+ await instance.addPlugin(new FiltersAssetSource());
93
+ await instance.addPlugin(new PagePresetsAssetSource());
94
+ await instance.addPlugin(new StickerAssetSource());
95
+ await instance.addPlugin(new TextAssetSource());
96
+ await instance.addPlugin(new TextComponentAssetSource());
97
+ await instance.addPlugin(new TypefaceAssetSource());
98
+ await instance.addPlugin(new VectorShapeAssetSource());
99
+ await instance.addPlugin(
100
+ new UploadAssetSources({ include: ['ly.img.image.upload'] })
101
+ );
102
+ await instance.addPlugin(
103
+ new DemoAssetSources({ include: ['ly.img.image.*'] })
104
+ );
105
+
106
+ await instance.actions.run('scene.create');
107
+ }
108
+ );
109
+ };
110
+
111
+ var handleExport = function (blobs) {
112
+ const blob = blobs[0];
113
+ const element = document.createElement('a');
114
+ element.setAttribute('href', window.URL.createObjectURL(blob));
115
+ element.setAttribute(
116
+ 'download',
117
+ `cesdk-${new Date().toISOString()}.png`
118
+ );
119
+
120
+ element.style.display = 'none';
121
+ document.body.appendChild(element);
122
+
123
+ element.click();
124
+
125
+ document.body.removeChild(element);
126
+ };
127
+
128
+ var handleSave = function (scene) {
129
+ const element = document.createElement('a');
130
+ const base64Data = btoa(unescape(encodeURIComponent(scene)));
131
+ element.setAttribute(
132
+ 'href',
133
+ `data:application/octet-stream;base64,${base64Data}`
134
+ );
135
+ element.setAttribute(
136
+ 'download',
137
+ `cesdk-${new Date().toISOString()}.scene`
138
+ );
139
+
140
+ element.style.display = 'none';
141
+ document.body.appendChild(element);
142
+
143
+ element.click();
144
+
145
+ document.body.removeChild(element);
146
+ };
147
+
148
+ var handleLoad = (function () {
149
+ const element = document.createElement('input');
150
+ element.setAttribute('type', 'file');
151
+ element.setAttribute('accept', '.scene');
152
+
153
+ element.style.display = 'none';
154
+ document.body.appendChild(element);
155
+
156
+ return () => {
157
+ return new Promise((resolve, reject) => {
158
+ element.onchange = (e) => {
159
+ const file = e.target.files[0];
160
+ if (file === undefined) {
161
+ reject(new Error('No files selected'));
162
+ } else {
163
+ const reader = new FileReader();
164
+ reader.readAsText(file, 'UTF-8');
165
+
166
+ reader.onload = (readerEvent) => {
167
+ const scene = readerEvent.target.result;
168
+ resolve(scene);
169
+ };
170
+ }
171
+
172
+ element.onchange = null;
173
+ element.value = '';
174
+ };
175
+
176
+ element.click();
177
+ });
178
+ };
179
+ })();
180
+ </script>
181
+ </body>
182
+ </html>