@cntrl-site/sdk-nextjs 0.8.4 → 0.8.6
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/.idea/workspace.xml +355 -0
- package/cntrl-site-sdk-nextjs-0.8.10.tgz +0 -0
- package/lib/components/Item.js +7 -4
- package/lib/components/items/ImageItem.js +4 -1
- package/lib/components/items/RectangleItem.js +4 -1
- package/lib/components/items/RichTextItem.js +5 -1
- package/lib/components/items/VideoItem.js +4 -1
- package/lib/components/items/VimeoEmbed.js +4 -4
- package/lib/components/items/YoutubeEmbed.js +4 -4
- package/lib/components/useItemScale.js +12 -0
- package/lib/utils/Animator/Animator.js +17 -1
- package/lib/utils/RichTextConverter/RichTextConverter.js +32 -8
- package/lib/utils/ScaleAnchorMap.js +15 -0
- package/package.json +2 -2
- package/src/components/Item.tsx +7 -4
- package/src/components/items/ImageItem.tsx +4 -1
- package/src/components/items/RectangleItem.tsx +4 -1
- package/src/components/items/RichTextItem.tsx +10 -1
- package/src/components/items/VideoItem.tsx +4 -1
- package/src/components/items/VimeoEmbed.tsx +4 -4
- package/src/components/items/YoutubeEmbed.tsx +4 -4
- package/src/components/useItemScale.ts +15 -0
- package/src/utils/Animator/Animator.ts +20 -1
- package/src/utils/RichTextConverter/RichTextConverter.tsx +32 -8
- package/src/utils/ScaleAnchorMap.ts +13 -0
- package/cntrl-site-sdk-nextjs-0.7.1.tgz +0 -0
- package/cntrl-site-sdk-nextjs-0.8.4.tgz +0 -0
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="AutoImportSettings">
|
|
4
|
+
<option name="autoReloadType" value="SELECTIVE" />
|
|
5
|
+
</component>
|
|
6
|
+
<component name="ChangeListManager">
|
|
7
|
+
<list default="true" id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="CNTRL-861: fixe">
|
|
8
|
+
<change beforePath="$PROJECT_DIR$/src/components/items/RichTextItem.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/items/RichTextItem.tsx" afterDir="false" />
|
|
9
|
+
</list>
|
|
10
|
+
<option name="SHOW_DIALOG" value="false" />
|
|
11
|
+
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
|
12
|
+
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
|
13
|
+
<option name="LAST_RESOLUTION" value="IGNORE" />
|
|
14
|
+
</component>
|
|
15
|
+
<component name="Git.Settings">
|
|
16
|
+
<option name="RECENT_BRANCH_BY_REPOSITORY">
|
|
17
|
+
<map>
|
|
18
|
+
<entry key="$PROJECT_DIR$" value="main" />
|
|
19
|
+
</map>
|
|
20
|
+
</option>
|
|
21
|
+
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
|
22
|
+
</component>
|
|
23
|
+
<component name="MarkdownSettingsMigration">
|
|
24
|
+
<option name="stateVersion" value="1" />
|
|
25
|
+
</component>
|
|
26
|
+
<component name="ProjectId" id="2H4nx2LrD2TTrbJMopYKifu02PK" />
|
|
27
|
+
<component name="ProjectViewState">
|
|
28
|
+
<option name="hideEmptyMiddlePackages" value="true" />
|
|
29
|
+
<option name="showLibraryContents" value="true" />
|
|
30
|
+
</component>
|
|
31
|
+
<component name="PropertiesComponent"><![CDATA[{
|
|
32
|
+
"keyToString": {
|
|
33
|
+
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
|
34
|
+
"RunOnceActivity.ShowReadmeOnStart": "true",
|
|
35
|
+
"WebServerToolWindowFactoryState": "false",
|
|
36
|
+
"last_opened_file_path": "/Users/admin/Documents/CNTRL/sdk-nextjs",
|
|
37
|
+
"node.js.detected.package.eslint": "true",
|
|
38
|
+
"node.js.detected.package.tslint": "true",
|
|
39
|
+
"node.js.selected.package.eslint": "(autodetect)",
|
|
40
|
+
"node.js.selected.package.tslint": "(autodetect)",
|
|
41
|
+
"nodejs_package_manager_path": "npm",
|
|
42
|
+
"ts.external.directory.path": "/Users/admin/Documents/CNTRL/sdk-nextjs/node_modules/typescript/lib",
|
|
43
|
+
"vue.rearranger.settings.migration": "true"
|
|
44
|
+
}
|
|
45
|
+
}]]></component>
|
|
46
|
+
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
|
47
|
+
<component name="TaskManager">
|
|
48
|
+
<task active="true" id="Default" summary="Default task">
|
|
49
|
+
<changelist id="daade3cc-2214-4d1b-a6ad-012b8ae407bf" name="Changes" comment="" />
|
|
50
|
+
<created>1667553465933</created>
|
|
51
|
+
<option name="number" value="Default" />
|
|
52
|
+
<option name="presentableId" value="Default" />
|
|
53
|
+
<updated>1667553465933</updated>
|
|
54
|
+
<workItem from="1667553467855" duration="59000" />
|
|
55
|
+
<workItem from="1667577252000" duration="8061000" />
|
|
56
|
+
<workItem from="1667926766782" duration="2182000" />
|
|
57
|
+
<workItem from="1668162212487" duration="28710000" />
|
|
58
|
+
<workItem from="1669397663981" duration="8121000" />
|
|
59
|
+
<workItem from="1669630429786" duration="5568000" />
|
|
60
|
+
<workItem from="1669712625667" duration="100000" />
|
|
61
|
+
<workItem from="1670846885306" duration="14667000" />
|
|
62
|
+
<workItem from="1670922174491" duration="24668000" />
|
|
63
|
+
<workItem from="1683273070032" duration="31643000" />
|
|
64
|
+
</task>
|
|
65
|
+
<task id="LOCAL-00001" summary="CNTRL-484 - added embed vimeo video">
|
|
66
|
+
<created>1667586762678</created>
|
|
67
|
+
<option name="number" value="00001" />
|
|
68
|
+
<option name="presentableId" value="LOCAL-00001" />
|
|
69
|
+
<option name="project" value="LOCAL" />
|
|
70
|
+
<updated>1667586762678</updated>
|
|
71
|
+
</task>
|
|
72
|
+
<task id="LOCAL-00002" summary="CNTRL-484 - problem fix">
|
|
73
|
+
<created>1667587045426</created>
|
|
74
|
+
<option name="number" value="00002" />
|
|
75
|
+
<option name="presentableId" value="LOCAL-00002" />
|
|
76
|
+
<option name="project" value="LOCAL" />
|
|
77
|
+
<updated>1667587045426</updated>
|
|
78
|
+
</task>
|
|
79
|
+
<task id="LOCAL-00003" summary="CNTRL-484 - version bump">
|
|
80
|
+
<created>1667587257510</created>
|
|
81
|
+
<option name="number" value="00003" />
|
|
82
|
+
<option name="presentableId" value="LOCAL-00003" />
|
|
83
|
+
<option name="project" value="LOCAL" />
|
|
84
|
+
<updated>1667587257510</updated>
|
|
85
|
+
</task>
|
|
86
|
+
<task id="LOCAL-00004" summary="CNTRL-486 - added youtube item">
|
|
87
|
+
<created>1668184730139</created>
|
|
88
|
+
<option name="number" value="00004" />
|
|
89
|
+
<option name="presentableId" value="LOCAL-00004" />
|
|
90
|
+
<option name="project" value="LOCAL" />
|
|
91
|
+
<updated>1668184730139</updated>
|
|
92
|
+
</task>
|
|
93
|
+
<task id="LOCAL-00005" summary="CNTRL-486 - added youtube type">
|
|
94
|
+
<created>1668185842201</created>
|
|
95
|
+
<option name="number" value="00005" />
|
|
96
|
+
<option name="presentableId" value="LOCAL-00005" />
|
|
97
|
+
<option name="project" value="LOCAL" />
|
|
98
|
+
<updated>1668185842201</updated>
|
|
99
|
+
</task>
|
|
100
|
+
<task id="LOCAL-00006" summary="CNTRL-486 - youtube fixes">
|
|
101
|
+
<created>1668193338566</created>
|
|
102
|
+
<option name="number" value="00006" />
|
|
103
|
+
<option name="presentableId" value="LOCAL-00006" />
|
|
104
|
+
<option name="project" value="LOCAL" />
|
|
105
|
+
<updated>1668193338566</updated>
|
|
106
|
+
</task>
|
|
107
|
+
<task id="LOCAL-00007" summary="CNTRL-486 - added mute to video when autoplay On">
|
|
108
|
+
<created>1668504184323</created>
|
|
109
|
+
<option name="number" value="00007" />
|
|
110
|
+
<option name="presentableId" value="LOCAL-00007" />
|
|
111
|
+
<option name="project" value="LOCAL" />
|
|
112
|
+
<updated>1668504184323</updated>
|
|
113
|
+
</task>
|
|
114
|
+
<task id="LOCAL-00008" summary="CNTRL-486 - added search params to Url">
|
|
115
|
+
<created>1668506131079</created>
|
|
116
|
+
<option name="number" value="00008" />
|
|
117
|
+
<option name="presentableId" value="LOCAL-00008" />
|
|
118
|
+
<option name="project" value="LOCAL" />
|
|
119
|
+
<updated>1668506131079</updated>
|
|
120
|
+
</task>
|
|
121
|
+
<task id="LOCAL-00009" summary="CNTRL-486 - version update">
|
|
122
|
+
<created>1668508864371</created>
|
|
123
|
+
<option name="number" value="00009" />
|
|
124
|
+
<option name="presentableId" value="LOCAL-00009" />
|
|
125
|
+
<option name="project" value="LOCAL" />
|
|
126
|
+
<updated>1668508864371</updated>
|
|
127
|
+
</task>
|
|
128
|
+
<task id="LOCAL-00010" summary="CNTRL-486 - version bump">
|
|
129
|
+
<created>1668509275485</created>
|
|
130
|
+
<option name="number" value="00010" />
|
|
131
|
+
<option name="presentableId" value="LOCAL-00010" />
|
|
132
|
+
<option name="project" value="LOCAL" />
|
|
133
|
+
<updated>1668509275485</updated>
|
|
134
|
+
</task>
|
|
135
|
+
<task id="LOCAL-00011" summary="CNTRL-486 - version bump">
|
|
136
|
+
<created>1668509525445</created>
|
|
137
|
+
<option name="number" value="00011" />
|
|
138
|
+
<option name="presentableId" value="LOCAL-00011" />
|
|
139
|
+
<option name="project" value="LOCAL" />
|
|
140
|
+
<updated>1668509525445</updated>
|
|
141
|
+
</task>
|
|
142
|
+
<task id="LOCAL-00012" summary="CNTRL-486 - fixes">
|
|
143
|
+
<created>1669397733023</created>
|
|
144
|
+
<option name="number" value="00012" />
|
|
145
|
+
<option name="presentableId" value="LOCAL-00012" />
|
|
146
|
+
<option name="project" value="LOCAL" />
|
|
147
|
+
<updated>1669397733023</updated>
|
|
148
|
+
</task>
|
|
149
|
+
<task id="LOCAL-00013" summary="CNTRL-486 - fixes">
|
|
150
|
+
<created>1669402876183</created>
|
|
151
|
+
<option name="number" value="00013" />
|
|
152
|
+
<option name="presentableId" value="LOCAL-00013" />
|
|
153
|
+
<option name="project" value="LOCAL" />
|
|
154
|
+
<updated>1669402876183</updated>
|
|
155
|
+
</task>
|
|
156
|
+
<task id="LOCAL-00014" summary="CNTRL-486 - fixes">
|
|
157
|
+
<created>1669402893251</created>
|
|
158
|
+
<option name="number" value="00014" />
|
|
159
|
+
<option name="presentableId" value="LOCAL-00014" />
|
|
160
|
+
<option name="project" value="LOCAL" />
|
|
161
|
+
<updated>1669402893251</updated>
|
|
162
|
+
</task>
|
|
163
|
+
<task id="LOCAL-00015" summary="CNTRL-486 - fixes">
|
|
164
|
+
<created>1669405389296</created>
|
|
165
|
+
<option name="number" value="00015" />
|
|
166
|
+
<option name="presentableId" value="LOCAL-00015" />
|
|
167
|
+
<option name="project" value="LOCAL" />
|
|
168
|
+
<updated>1669405389296</updated>
|
|
169
|
+
</task>
|
|
170
|
+
<task id="LOCAL-00016" summary="CNTRL-486 - fixes">
|
|
171
|
+
<created>1669405966077</created>
|
|
172
|
+
<option name="number" value="00016" />
|
|
173
|
+
<option name="presentableId" value="LOCAL-00016" />
|
|
174
|
+
<option name="project" value="LOCAL" />
|
|
175
|
+
<updated>1669405966077</updated>
|
|
176
|
+
</task>
|
|
177
|
+
<task id="LOCAL-00017" summary="CNTRL-486 - version bump">
|
|
178
|
+
<created>1669408571358</created>
|
|
179
|
+
<option name="number" value="00017" />
|
|
180
|
+
<option name="presentableId" value="LOCAL-00017" />
|
|
181
|
+
<option name="project" value="LOCAL" />
|
|
182
|
+
<updated>1669408571358</updated>
|
|
183
|
+
</task>
|
|
184
|
+
<task id="LOCAL-00018" summary="CNTRL-617 Youtube anf vimeo videos Url update">
|
|
185
|
+
<created>1669635492235</created>
|
|
186
|
+
<option name="number" value="00018" />
|
|
187
|
+
<option name="presentableId" value="LOCAL-00018" />
|
|
188
|
+
<option name="project" value="LOCAL" />
|
|
189
|
+
<updated>1669635492235</updated>
|
|
190
|
+
</task>
|
|
191
|
+
<task id="LOCAL-00019" summary="CNTRL-617 Version bump">
|
|
192
|
+
<created>1669635593460</created>
|
|
193
|
+
<option name="number" value="00019" />
|
|
194
|
+
<option name="presentableId" value="LOCAL-00019" />
|
|
195
|
+
<option name="project" value="LOCAL" />
|
|
196
|
+
<updated>1669635593460</updated>
|
|
197
|
+
</task>
|
|
198
|
+
<task id="LOCAL-00020" summary="CNTRL-694 added valid url builder">
|
|
199
|
+
<created>1670861002829</created>
|
|
200
|
+
<option name="number" value="00020" />
|
|
201
|
+
<option name="presentableId" value="LOCAL-00020" />
|
|
202
|
+
<option name="project" value="LOCAL" />
|
|
203
|
+
<updated>1670861002829</updated>
|
|
204
|
+
</task>
|
|
205
|
+
<task id="LOCAL-00021" summary="CNTRL-694 added code styling and version bump">
|
|
206
|
+
<created>1670862883753</created>
|
|
207
|
+
<option name="number" value="00021" />
|
|
208
|
+
<option name="presentableId" value="LOCAL-00021" />
|
|
209
|
+
<option name="project" value="LOCAL" />
|
|
210
|
+
<updated>1670862883753</updated>
|
|
211
|
+
</task>
|
|
212
|
+
<task id="LOCAL-00022" summary="CNTRL-694 comments fix">
|
|
213
|
+
<created>1670864771128</created>
|
|
214
|
+
<option name="number" value="00022" />
|
|
215
|
+
<option name="presentableId" value="LOCAL-00022" />
|
|
216
|
+
<option name="project" value="LOCAL" />
|
|
217
|
+
<updated>1670864771128</updated>
|
|
218
|
+
</task>
|
|
219
|
+
<task id="LOCAL-00023" summary="CNTRL-694 undefined url fix">
|
|
220
|
+
<created>1670947749514</created>
|
|
221
|
+
<option name="number" value="00023" />
|
|
222
|
+
<option name="presentableId" value="LOCAL-00023" />
|
|
223
|
+
<option name="project" value="LOCAL" />
|
|
224
|
+
<updated>1670947749514</updated>
|
|
225
|
+
</task>
|
|
226
|
+
<task id="LOCAL-00024" summary="CNTRL-694 version bump">
|
|
227
|
+
<created>1670948708761</created>
|
|
228
|
+
<option name="number" value="00024" />
|
|
229
|
+
<option name="presentableId" value="LOCAL-00024" />
|
|
230
|
+
<option name="project" value="LOCAL" />
|
|
231
|
+
<updated>1670948708762</updated>
|
|
232
|
+
</task>
|
|
233
|
+
<task id="LOCAL-00025" summary="CNTRL-427: changed Item w and h params">
|
|
234
|
+
<created>1670952164829</created>
|
|
235
|
+
<option name="number" value="00025" />
|
|
236
|
+
<option name="presentableId" value="LOCAL-00025" />
|
|
237
|
+
<option name="project" value="LOCAL" />
|
|
238
|
+
<updated>1670952164829</updated>
|
|
239
|
+
</task>
|
|
240
|
+
<task id="LOCAL-00026" summary="CNTRL-427: changed white-space prop to normal for all text aligns">
|
|
241
|
+
<created>1671017859114</created>
|
|
242
|
+
<option name="number" value="00026" />
|
|
243
|
+
<option name="presentableId" value="LOCAL-00026" />
|
|
244
|
+
<option name="project" value="LOCAL" />
|
|
245
|
+
<updated>1671017859114</updated>
|
|
246
|
+
</task>
|
|
247
|
+
<task id="LOCAL-00027" summary="CNTRL-427: deleted unused import">
|
|
248
|
+
<created>1671017914825</created>
|
|
249
|
+
<option name="number" value="00027" />
|
|
250
|
+
<option name="presentableId" value="LOCAL-00027" />
|
|
251
|
+
<option name="project" value="LOCAL" />
|
|
252
|
+
<updated>1671017914825</updated>
|
|
253
|
+
</task>
|
|
254
|
+
<task id="LOCAL-00028" summary="CNTRL-427: version bump">
|
|
255
|
+
<created>1671097766100</created>
|
|
256
|
+
<option name="number" value="00028" />
|
|
257
|
+
<option name="presentableId" value="LOCAL-00028" />
|
|
258
|
+
<option name="project" value="LOCAL" />
|
|
259
|
+
<updated>1671097766100</updated>
|
|
260
|
+
</task>
|
|
261
|
+
<task id="LOCAL-00029" summary="CNTRL-861: added scale for item">
|
|
262
|
+
<created>1683462977817</created>
|
|
263
|
+
<option name="number" value="00029" />
|
|
264
|
+
<option name="presentableId" value="LOCAL-00029" />
|
|
265
|
+
<option name="project" value="LOCAL" />
|
|
266
|
+
<updated>1683462977817</updated>
|
|
267
|
+
</task>
|
|
268
|
+
<task id="LOCAL-00030" summary="CNTRL-861: added scale to cover div">
|
|
269
|
+
<created>1683464547773</created>
|
|
270
|
+
<option name="number" value="00030" />
|
|
271
|
+
<option name="presentableId" value="LOCAL-00030" />
|
|
272
|
+
<option name="project" value="LOCAL" />
|
|
273
|
+
<updated>1683464547774</updated>
|
|
274
|
+
</task>
|
|
275
|
+
<task id="LOCAL-00031" summary="CNTRL-861: fixes">
|
|
276
|
+
<created>1683464779856</created>
|
|
277
|
+
<option name="number" value="00031" />
|
|
278
|
+
<option name="presentableId" value="LOCAL-00031" />
|
|
279
|
+
<option name="project" value="LOCAL" />
|
|
280
|
+
<updated>1683464779856</updated>
|
|
281
|
+
</task>
|
|
282
|
+
<task id="LOCAL-00032" summary="CNTRL-861: added rotate to items">
|
|
283
|
+
<created>1683474659610</created>
|
|
284
|
+
<option name="number" value="00032" />
|
|
285
|
+
<option name="presentableId" value="LOCAL-00032" />
|
|
286
|
+
<option name="project" value="LOCAL" />
|
|
287
|
+
<updated>1683474659610</updated>
|
|
288
|
+
</task>
|
|
289
|
+
<task id="LOCAL-00033" summary="CNTRL-861: fixes">
|
|
290
|
+
<created>1683474875208</created>
|
|
291
|
+
<option name="number" value="00033" />
|
|
292
|
+
<option name="presentableId" value="LOCAL-00033" />
|
|
293
|
+
<option name="project" value="LOCAL" />
|
|
294
|
+
<updated>1683474875208</updated>
|
|
295
|
+
</task>
|
|
296
|
+
<task id="LOCAL-00034" summary="CNTRL-861: fixes">
|
|
297
|
+
<created>1683474899380</created>
|
|
298
|
+
<option name="number" value="00034" />
|
|
299
|
+
<option name="presentableId" value="LOCAL-00034" />
|
|
300
|
+
<option name="project" value="LOCAL" />
|
|
301
|
+
<updated>1683474899380</updated>
|
|
302
|
+
</task>
|
|
303
|
+
<task id="LOCAL-00035" summary="CNTRL-861: fixe">
|
|
304
|
+
<created>1683476057882</created>
|
|
305
|
+
<option name="number" value="00035" />
|
|
306
|
+
<option name="presentableId" value="LOCAL-00035" />
|
|
307
|
+
<option name="project" value="LOCAL" />
|
|
308
|
+
<updated>1683476057882</updated>
|
|
309
|
+
</task>
|
|
310
|
+
<option name="localTasksCounter" value="36" />
|
|
311
|
+
<servers />
|
|
312
|
+
</component>
|
|
313
|
+
<component name="TypeScriptGeneratedFilesManager">
|
|
314
|
+
<option name="version" value="3" />
|
|
315
|
+
</component>
|
|
316
|
+
<component name="Vcs.Log.Tabs.Properties">
|
|
317
|
+
<option name="TAB_STATES">
|
|
318
|
+
<map>
|
|
319
|
+
<entry key="MAIN">
|
|
320
|
+
<value>
|
|
321
|
+
<State />
|
|
322
|
+
</value>
|
|
323
|
+
</entry>
|
|
324
|
+
</map>
|
|
325
|
+
</option>
|
|
326
|
+
</component>
|
|
327
|
+
<component name="VcsManagerConfiguration">
|
|
328
|
+
<MESSAGE value="CNTRL-484 - version bump" />
|
|
329
|
+
<MESSAGE value="CNTRL-486 - added youtube item" />
|
|
330
|
+
<MESSAGE value="CNTRL-486 - added youtube type" />
|
|
331
|
+
<MESSAGE value="CNTRL-486 - youtube fixes" />
|
|
332
|
+
<MESSAGE value="CNTRL-486 - added mute to video when autoplay On" />
|
|
333
|
+
<MESSAGE value="CNTRL-486 - added search params to Url" />
|
|
334
|
+
<MESSAGE value="CNTRL-486 - version update" />
|
|
335
|
+
<MESSAGE value="CNTRL-486 - fixes" />
|
|
336
|
+
<MESSAGE value="CNTRL-486 - version bump" />
|
|
337
|
+
<MESSAGE value="CNTRL-617 Youtube anf vimeo videos Url update" />
|
|
338
|
+
<MESSAGE value="CNTRL-617 Version bump" />
|
|
339
|
+
<MESSAGE value="CNTRL-694 added valid url builder" />
|
|
340
|
+
<MESSAGE value="CNTRL-694 added code styling and version bump" />
|
|
341
|
+
<MESSAGE value="CNTRL-694 comments fix" />
|
|
342
|
+
<MESSAGE value="CNTRL-694 undefined url fix" />
|
|
343
|
+
<MESSAGE value="CNTRL-694 version bump" />
|
|
344
|
+
<MESSAGE value="CNTRL-427: changed Item w and h params" />
|
|
345
|
+
<MESSAGE value="CNTRL-427: changed white-space prop to normal for all text aligns" />
|
|
346
|
+
<MESSAGE value="CNTRL-427: deleted unused import" />
|
|
347
|
+
<MESSAGE value="CNTRL-427: version bump" />
|
|
348
|
+
<MESSAGE value="CNTRL-861: added scale for item" />
|
|
349
|
+
<MESSAGE value="CNTRL-861: added scale to cover div" />
|
|
350
|
+
<MESSAGE value="CNTRL-861: added rotate to items" />
|
|
351
|
+
<MESSAGE value="CNTRL-861: fixes" />
|
|
352
|
+
<MESSAGE value="CNTRL-861: fixe" />
|
|
353
|
+
<option name="LAST_COMMIT_MESSAGE" value="CNTRL-861: fixe" />
|
|
354
|
+
</component>
|
|
355
|
+
</project>
|
|
Binary file
|
package/lib/components/Item.js
CHANGED
|
@@ -12,12 +12,13 @@ const VimeoEmbed_1 = require("./items/VimeoEmbed");
|
|
|
12
12
|
const YoutubeEmbed_1 = require("./items/YoutubeEmbed");
|
|
13
13
|
const CustomItem_1 = require("./items/CustomItem");
|
|
14
14
|
const useCntrlContext_1 = require("../provider/useCntrlContext");
|
|
15
|
-
const useItemAngle_1 = require("./useItemAngle");
|
|
16
15
|
const useItemPosition_1 = require("./useItemPosition");
|
|
17
16
|
const useItemDimensions_1 = require("./useItemDimensions");
|
|
18
17
|
const useItemSticky_1 = require("./items/useItemSticky");
|
|
19
18
|
const castObject_1 = require("../utils/castObject");
|
|
20
19
|
const useCurrentLayout_1 = require("../common/useCurrentLayout");
|
|
20
|
+
const useItemScale_1 = require("./useItemScale");
|
|
21
|
+
const ScaleAnchorMap_1 = require("../utils/ScaleAnchorMap");
|
|
21
22
|
const itemsMap = {
|
|
22
23
|
[sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
|
|
23
24
|
[sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
|
|
@@ -30,7 +31,7 @@ const itemsMap = {
|
|
|
30
31
|
const noop = () => null;
|
|
31
32
|
const Item = ({ item }) => {
|
|
32
33
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
33
|
-
const
|
|
34
|
+
const { scale, scaleAnchor } = (0, useItemScale_1.useItemScale)(item);
|
|
34
35
|
const position = (0, useItemPosition_1.useItemPosition)(item);
|
|
35
36
|
const layout = (0, useCurrentLayout_1.useCurrentLayout)();
|
|
36
37
|
const [ref, setRef] = (0, react_1.useState)(null);
|
|
@@ -57,7 +58,8 @@ const Item = ({ item }) => {
|
|
|
57
58
|
setParentOffsetTop(offsetParent.offsetTop / window.innerWidth);
|
|
58
59
|
}, [ref]);
|
|
59
60
|
const styles = {
|
|
60
|
-
transform: `
|
|
61
|
+
transform: `scale(${scale})`,
|
|
62
|
+
transformOrigin: ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor],
|
|
61
63
|
left: `${position.left * 100}vw`,
|
|
62
64
|
width: `${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
|
|
63
65
|
height: `${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${height * 100}vw` : 'unset'}`,
|
|
@@ -75,7 +77,8 @@ const Item = ({ item }) => {
|
|
|
75
77
|
width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
|
|
76
78
|
height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'unset'};
|
|
77
79
|
z-index: ${area.zIndex};
|
|
78
|
-
transform:
|
|
80
|
+
transform: scale(${scale});
|
|
81
|
+
transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
|
|
79
82
|
}
|
|
80
83
|
`);
|
|
81
84
|
})}
|
|
@@ -6,14 +6,17 @@ const react_1 = require("react");
|
|
|
6
6
|
const sdk_1 = require("@cntrl-site/sdk");
|
|
7
7
|
const LinkWrapper_1 = require("../LinkWrapper");
|
|
8
8
|
const useFileItem_1 = require("./useFileItem");
|
|
9
|
+
const useItemAngle_1 = require("../useItemAngle");
|
|
9
10
|
const ImageItem = ({ item }) => {
|
|
10
11
|
const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item);
|
|
12
|
+
const angle = (0, useItemAngle_1.useItemAngle)(item);
|
|
11
13
|
const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
|
|
12
14
|
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
|
|
13
15
|
borderRadius: `${radius * 100}vw`,
|
|
14
16
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
15
17
|
opacity: `${opacity}`,
|
|
16
|
-
borderColor: `${borderColor}
|
|
18
|
+
borderColor: `${borderColor}`,
|
|
19
|
+
transform: `rotate(${angle}deg)`
|
|
17
20
|
}, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
18
21
|
.image-wrapper-${item.id} {
|
|
19
22
|
position: absolute;
|
|
@@ -6,15 +6,18 @@ const react_1 = require("react");
|
|
|
6
6
|
const sdk_1 = require("@cntrl-site/sdk");
|
|
7
7
|
const LinkWrapper_1 = require("../LinkWrapper");
|
|
8
8
|
const useRectangleItem_1 = require("./useRectangleItem");
|
|
9
|
+
const useItemAngle_1 = require("../useItemAngle");
|
|
9
10
|
const RectangleItem = ({ item }) => {
|
|
10
11
|
const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item);
|
|
12
|
+
const angle = (0, useItemAngle_1.useItemAngle)(item);
|
|
11
13
|
const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor).toCss(), [fillColor]);
|
|
12
14
|
const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
|
|
13
15
|
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, style: {
|
|
14
16
|
backgroundColor: `${backgroundColor}`,
|
|
15
17
|
borderRadius: `${radius * 100}vw`,
|
|
16
18
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
17
|
-
borderColor: `${borderColor}
|
|
19
|
+
borderColor: `${borderColor}`,
|
|
20
|
+
transform: `rotate(${angle}deg)`
|
|
18
21
|
} }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
19
22
|
.rectangle-${item.id} {
|
|
20
23
|
position: absolute;
|
|
@@ -8,9 +8,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
//@ts-ignore
|
|
9
9
|
const style_1 = __importDefault(require("styled-jsx/style"));
|
|
10
10
|
const useRichTextItem_1 = require("./useRichTextItem");
|
|
11
|
+
const useItemAngle_1 = require("../useItemAngle");
|
|
11
12
|
const RichTextItem = ({ item }) => {
|
|
12
13
|
const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
|
|
14
|
+
const angle = (0, useItemAngle_1.useItemAngle)(item);
|
|
13
15
|
const className = preset ? `cntrl-preset-${preset.id}` : undefined;
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className,
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, style: {
|
|
17
|
+
transform: `rotate(${angle}deg)`
|
|
18
|
+
}, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
|
|
15
19
|
};
|
|
16
20
|
exports.RichTextItem = RichTextItem;
|
|
@@ -6,14 +6,17 @@ const react_1 = require("react");
|
|
|
6
6
|
const sdk_1 = require("@cntrl-site/sdk");
|
|
7
7
|
const LinkWrapper_1 = require("../LinkWrapper");
|
|
8
8
|
const useFileItem_1 = require("./useFileItem");
|
|
9
|
+
const useItemAngle_1 = require("../useItemAngle");
|
|
9
10
|
const VideoItem = ({ item }) => {
|
|
10
11
|
const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item);
|
|
12
|
+
const angle = (0, useItemAngle_1.useItemAngle)(item);
|
|
11
13
|
const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
|
|
12
14
|
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
|
|
13
15
|
borderRadius: `${radius * 100}vw`,
|
|
14
16
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
15
17
|
opacity: `${opacity}`,
|
|
16
|
-
borderColor: `${borderColor}
|
|
18
|
+
borderColor: `${borderColor}`,
|
|
19
|
+
transform: `rotate(${angle}deg)`
|
|
17
20
|
}, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
18
21
|
.video-wrapper-${item.id} {
|
|
19
22
|
position: absolute;
|
|
@@ -4,8 +4,10 @@ exports.VimeoEmbedItem = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const LinkWrapper_1 = require("../LinkWrapper");
|
|
6
6
|
const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
|
|
7
|
+
const useItemAngle_1 = require("../useItemAngle");
|
|
7
8
|
const VimeoEmbedItem = ({ item }) => {
|
|
8
9
|
const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
|
|
10
|
+
const angle = (0, useItemAngle_1.useItemAngle)(item);
|
|
9
11
|
const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
|
|
10
12
|
const getValidVimeoUrl = (url) => {
|
|
11
13
|
const validURL = new URL(url);
|
|
@@ -22,16 +24,14 @@ const VimeoEmbedItem = ({ item }) => {
|
|
|
22
24
|
};
|
|
23
25
|
const validUrl = getValidVimeoUrl(url);
|
|
24
26
|
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, style: {
|
|
25
|
-
borderRadius: `${radius * 100}vw
|
|
27
|
+
borderRadius: `${radius * 100}vw`,
|
|
28
|
+
transform: `rotate(${angle}deg)`
|
|
26
29
|
}, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
27
30
|
.embed-video-wrapper-${item.id} {
|
|
28
31
|
position: absolute;
|
|
29
32
|
overflow: hidden;
|
|
30
33
|
width: 100%;
|
|
31
34
|
height: 100%;
|
|
32
|
-
top: 50%;
|
|
33
|
-
left: 50%;
|
|
34
|
-
transform: translate(-50%, -50%);
|
|
35
35
|
}
|
|
36
36
|
.embedVideo {
|
|
37
37
|
width: 100%;
|
|
@@ -5,9 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const LinkWrapper_1 = require("../LinkWrapper");
|
|
6
6
|
const getValidYoutubeUrl_1 = require("../../utils/getValidYoutubeUrl");
|
|
7
7
|
const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
|
|
8
|
+
const useItemAngle_1 = require("../useItemAngle");
|
|
8
9
|
const YoutubeEmbedItem = ({ item }) => {
|
|
9
10
|
const { autoplay, controls, url } = item.commonParams;
|
|
10
11
|
const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item);
|
|
12
|
+
const angle = (0, useItemAngle_1.useItemAngle)(item);
|
|
11
13
|
const getValidYoutubeUrl = (url) => {
|
|
12
14
|
const newUrl = new URL(url);
|
|
13
15
|
const id = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);
|
|
@@ -19,16 +21,14 @@ const YoutubeEmbedItem = ({ item }) => {
|
|
|
19
21
|
};
|
|
20
22
|
const validUrl = getValidYoutubeUrl(url);
|
|
21
23
|
return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-youtube-video-wrapper-${item.id}`, style: {
|
|
22
|
-
borderRadius: `${radius * 100}vw
|
|
24
|
+
borderRadius: `${radius * 100}vw`,
|
|
25
|
+
transform: `rotate(${angle}deg)`
|
|
23
26
|
}, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedYoutubeVideo", src: validUrl || '', allow: "accelerometer; autoplay; allowfullscreen;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
|
|
24
27
|
.embed-youtube-video-wrapper-${item.id} {
|
|
25
28
|
position: absolute;
|
|
26
29
|
overflow: hidden;
|
|
27
30
|
width: 100%;
|
|
28
31
|
height: 100%;
|
|
29
|
-
top: 50%;
|
|
30
|
-
left: 50%;
|
|
31
|
-
transform: translate(-50%, -50%);
|
|
32
32
|
}
|
|
33
33
|
.embedYoutubeVideo {
|
|
34
34
|
width: 100%;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useItemScale = void 0;
|
|
4
|
+
const useKeyframeValue_1 = require("../common/useKeyframeValue");
|
|
5
|
+
const useCurrentLayout_1 = require("../common/useCurrentLayout");
|
|
6
|
+
const useItemScale = (item) => {
|
|
7
|
+
const layout = (0, useCurrentLayout_1.useCurrentLayout)();
|
|
8
|
+
const { scale } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }), (animator, scroll, value) => animator.getScale(value, scroll));
|
|
9
|
+
const scaleAnchor = item.area[layout].scaleAnchor;
|
|
10
|
+
return { scale, scaleAnchor };
|
|
11
|
+
};
|
|
12
|
+
exports.useItemScale = useItemScale;
|
|
@@ -138,6 +138,21 @@ class Animator {
|
|
|
138
138
|
opacity: rangeMap(pos, start.position, end.position, start.value.opacity, end.value.opacity, true)
|
|
139
139
|
};
|
|
140
140
|
}
|
|
141
|
+
getScale(values, pos) {
|
|
142
|
+
const keyframes = this.keyframesMap[sdk_1.KeyframeType.Scale];
|
|
143
|
+
if (!keyframes || !keyframes.length)
|
|
144
|
+
return values;
|
|
145
|
+
if (keyframes.length === 1) {
|
|
146
|
+
const [keyframe] = keyframes;
|
|
147
|
+
return {
|
|
148
|
+
scale: keyframe.value.scale
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
const { start, end } = this.getStartEnd(pos, keyframes);
|
|
152
|
+
return {
|
|
153
|
+
scale: rangeMap(pos, start.position, end.position, start.value.scale, end.value.scale, true)
|
|
154
|
+
};
|
|
155
|
+
}
|
|
141
156
|
getStartEnd(position, keyframes) {
|
|
142
157
|
const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
|
|
143
158
|
const end = index === keyframes.length ? index - 1 : index;
|
|
@@ -168,7 +183,8 @@ function createKeyframesMap() {
|
|
|
168
183
|
[sdk_1.KeyframeType.Color]: [],
|
|
169
184
|
[sdk_1.KeyframeType.Rotation]: [],
|
|
170
185
|
[sdk_1.KeyframeType.BorderColor]: [],
|
|
171
|
-
[sdk_1.KeyframeType.Opacity]: []
|
|
186
|
+
[sdk_1.KeyframeType.Opacity]: [],
|
|
187
|
+
[sdk_1.KeyframeType.Scale]: []
|
|
172
188
|
};
|
|
173
189
|
}
|
|
174
190
|
function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {
|
|
@@ -11,8 +11,7 @@ exports.FontStyles = {
|
|
|
11
11
|
};
|
|
12
12
|
class RichTextConverter {
|
|
13
13
|
toHtml(richText, layouts, hasPreset) {
|
|
14
|
-
const { text
|
|
15
|
-
const text = Array.from(rawText); // because of emoji
|
|
14
|
+
const { text, blocks = [] } = richText.commonParams;
|
|
16
15
|
const root = [];
|
|
17
16
|
const styleRules = layouts.reduce((rec, layout) => {
|
|
18
17
|
rec[layout.id] = [];
|
|
@@ -71,18 +70,18 @@ class RichTextConverter {
|
|
|
71
70
|
for (const entity of entitiesGroups) {
|
|
72
71
|
const entityKids = [];
|
|
73
72
|
if (offset < entity.start) {
|
|
74
|
-
kids.push(content
|
|
73
|
+
kids.push(sliceSymbols(content, offset, entity.start));
|
|
75
74
|
offset = entity.start;
|
|
76
75
|
}
|
|
77
76
|
for (const style of entity.stylesGroup) {
|
|
78
77
|
if (offset < style.start) {
|
|
79
|
-
entityKids.push(content
|
|
78
|
+
entityKids.push(sliceSymbols(content, offset, style.start));
|
|
80
79
|
}
|
|
81
|
-
entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: content
|
|
80
|
+
entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: sliceSymbols(content, style.start, style.end) }, style.start));
|
|
82
81
|
offset = style.end;
|
|
83
82
|
}
|
|
84
83
|
if (offset < entity.end) {
|
|
85
|
-
entityKids.push(content
|
|
84
|
+
entityKids.push(sliceSymbols(content, offset, entity.end));
|
|
86
85
|
offset = entity.end;
|
|
87
86
|
}
|
|
88
87
|
if (entity.link) {
|
|
@@ -91,8 +90,8 @@ class RichTextConverter {
|
|
|
91
90
|
}
|
|
92
91
|
kids.push(...entityKids);
|
|
93
92
|
}
|
|
94
|
-
if (offset < content
|
|
95
|
-
kids.push(content
|
|
93
|
+
if (offset < getSymbolsCount(content)) {
|
|
94
|
+
kids.push(sliceSymbols(content, offset));
|
|
96
95
|
}
|
|
97
96
|
for (const item of group) {
|
|
98
97
|
const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
|
|
@@ -224,3 +223,28 @@ function getResolvedValue(value, name) {
|
|
|
224
223
|
return value;
|
|
225
224
|
return value ? sdk_1.CntrlColor.parse(value).toCss() : value;
|
|
226
225
|
}
|
|
226
|
+
function sliceSymbols(text, start, end = NaN) {
|
|
227
|
+
let startOffset = NaN;
|
|
228
|
+
let endOffset = 0;
|
|
229
|
+
let count = -1;
|
|
230
|
+
for (const ch of text) {
|
|
231
|
+
count += 1;
|
|
232
|
+
if (count === start) {
|
|
233
|
+
startOffset = endOffset;
|
|
234
|
+
}
|
|
235
|
+
if (count === end)
|
|
236
|
+
break;
|
|
237
|
+
endOffset += ch.length;
|
|
238
|
+
}
|
|
239
|
+
if (isNaN(startOffset))
|
|
240
|
+
return '';
|
|
241
|
+
return text.slice(startOffset, endOffset + 1);
|
|
242
|
+
}
|
|
243
|
+
function getSymbolsCount(input) {
|
|
244
|
+
let count = 0;
|
|
245
|
+
let ch;
|
|
246
|
+
for (ch of input) {
|
|
247
|
+
count += 1;
|
|
248
|
+
}
|
|
249
|
+
return count;
|
|
250
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ScaleAnchorMap = void 0;
|
|
4
|
+
const sdk_1 = require("@cntrl-site/sdk");
|
|
5
|
+
exports.ScaleAnchorMap = {
|
|
6
|
+
[sdk_1.ScaleAnchor.TopLeft]: 'top left',
|
|
7
|
+
[sdk_1.ScaleAnchor.TopCenter]: 'top center',
|
|
8
|
+
[sdk_1.ScaleAnchor.TopRight]: 'top right',
|
|
9
|
+
[sdk_1.ScaleAnchor.MiddleLeft]: 'center left',
|
|
10
|
+
[sdk_1.ScaleAnchor.MiddleCenter]: 'center',
|
|
11
|
+
[sdk_1.ScaleAnchor.MiddleRight]: 'center right',
|
|
12
|
+
[sdk_1.ScaleAnchor.BottomLeft]: 'bottom left',
|
|
13
|
+
[sdk_1.ScaleAnchor.BottomCenter]: 'bottom center',
|
|
14
|
+
[sdk_1.ScaleAnchor.BottomRight]: 'bottom right'
|
|
15
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.6",
|
|
4
4
|
"description": "SDK for Next.js",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@cntrl-site/sdk": "^0.7.
|
|
24
|
+
"@cntrl-site/sdk": "^0.7.1",
|
|
25
25
|
"html-react-parser": "^3.0.1",
|
|
26
26
|
"styled-jsx": "^5.0.2"
|
|
27
27
|
},
|
package/src/components/Item.tsx
CHANGED
|
@@ -14,12 +14,13 @@ import { VimeoEmbedItem } from './items/VimeoEmbed';
|
|
|
14
14
|
import { YoutubeEmbedItem } from './items/YoutubeEmbed';
|
|
15
15
|
import { CustomItem } from './items/CustomItem';
|
|
16
16
|
import { useCntrlContext } from '../provider/useCntrlContext';
|
|
17
|
-
import { useItemAngle } from './useItemAngle';
|
|
18
17
|
import { useItemPosition } from './useItemPosition';
|
|
19
18
|
import { useItemDimensions } from './useItemDimensions';
|
|
20
19
|
import { getItemTopStyle, useItemSticky } from './items/useItemSticky';
|
|
21
20
|
import { castObject } from '../utils/castObject';
|
|
22
21
|
import { useCurrentLayout } from '../common/useCurrentLayout';
|
|
22
|
+
import { useItemScale } from './useItemScale';
|
|
23
|
+
import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
|
|
23
24
|
|
|
24
25
|
export interface ItemProps<I extends TArticleItemAny> {
|
|
25
26
|
item: I;
|
|
@@ -39,7 +40,7 @@ const noop = () => null;
|
|
|
39
40
|
|
|
40
41
|
export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
|
|
41
42
|
const { layouts } = useCntrlContext();
|
|
42
|
-
const
|
|
43
|
+
const { scale, scaleAnchor } = useItemScale(item);
|
|
43
44
|
const position = useItemPosition(item);
|
|
44
45
|
const layout = useCurrentLayout();
|
|
45
46
|
const [ref, setRef] = useState<HTMLDivElement | null>(null);
|
|
@@ -69,7 +70,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
|
|
|
69
70
|
}, [ref]);
|
|
70
71
|
|
|
71
72
|
const styles = {
|
|
72
|
-
transform: `
|
|
73
|
+
transform: `scale(${scale})`,
|
|
74
|
+
transformOrigin: ScaleAnchorMap[scaleAnchor],
|
|
73
75
|
left: `${position.left * 100}vw`,
|
|
74
76
|
width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
|
|
75
77
|
height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
|
|
@@ -96,7 +98,8 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
|
|
|
96
98
|
width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
|
|
97
99
|
height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'unset'};
|
|
98
100
|
z-index: ${area.zIndex};
|
|
99
|
-
transform:
|
|
101
|
+
transform: scale(${scale});
|
|
102
|
+
transform-origin: ${ScaleAnchorMap[scaleAnchor]};
|
|
100
103
|
}
|
|
101
104
|
`);
|
|
102
105
|
})}
|
|
@@ -3,9 +3,11 @@ import { CntrlColor, TImageItem } from '@cntrl-site/sdk';
|
|
|
3
3
|
import { ItemProps } from '../Item';
|
|
4
4
|
import { LinkWrapper } from '../LinkWrapper';
|
|
5
5
|
import { useFileItem } from './useFileItem';
|
|
6
|
+
import { useItemAngle } from '../useItemAngle';
|
|
6
7
|
|
|
7
8
|
export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
|
|
8
9
|
const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item);
|
|
10
|
+
const angle = useItemAngle(item);
|
|
9
11
|
const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
|
|
10
12
|
return (
|
|
11
13
|
<LinkWrapper url={item.link?.url}>
|
|
@@ -15,7 +17,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
|
|
|
15
17
|
borderRadius: `${radius * 100}vw`,
|
|
16
18
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
17
19
|
opacity: `${opacity}`,
|
|
18
|
-
borderColor: `${borderColor}
|
|
20
|
+
borderColor: `${borderColor}`,
|
|
21
|
+
transform: `rotate(${angle}deg)`
|
|
19
22
|
}}
|
|
20
23
|
>
|
|
21
24
|
<img className="image" src={item.commonParams.url} />
|
|
@@ -3,9 +3,11 @@ import { TRectangleItem, CntrlColor } from '@cntrl-site/sdk';
|
|
|
3
3
|
import { ItemProps } from '../Item';
|
|
4
4
|
import { LinkWrapper } from '../LinkWrapper';
|
|
5
5
|
import { useRectangleItem } from './useRectangleItem';
|
|
6
|
+
import { useItemAngle } from '../useItemAngle';
|
|
6
7
|
|
|
7
8
|
export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
|
|
8
9
|
const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item);
|
|
10
|
+
const angle = useItemAngle(item);
|
|
9
11
|
const backgroundColor = useMemo(() => CntrlColor.parse(fillColor).toCss(), [fillColor]);
|
|
10
12
|
const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
|
|
11
13
|
|
|
@@ -17,7 +19,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
|
|
|
17
19
|
backgroundColor: `${backgroundColor}`,
|
|
18
20
|
borderRadius: `${radius * 100}vw`,
|
|
19
21
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
20
|
-
borderColor: `${borderColor}
|
|
22
|
+
borderColor: `${borderColor}`,
|
|
23
|
+
transform: `rotate(${angle}deg)`
|
|
21
24
|
}}
|
|
22
25
|
/>
|
|
23
26
|
<style jsx>{`
|
|
@@ -4,13 +4,22 @@ import { TRichTextItem } from '@cntrl-site/sdk';
|
|
|
4
4
|
import JSXStyle from 'styled-jsx/style';
|
|
5
5
|
import { ItemProps } from '../Item';
|
|
6
6
|
import { useRichTextItem } from './useRichTextItem';
|
|
7
|
+
import { useItemAngle } from '../useItemAngle';
|
|
7
8
|
|
|
8
9
|
export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
|
|
9
10
|
const [content, styles, preset] = useRichTextItem(item);
|
|
11
|
+
const angle = useItemAngle(item);
|
|
10
12
|
const className = preset ? `cntrl-preset-${preset.id}` : undefined;
|
|
11
13
|
return (
|
|
12
14
|
<>
|
|
13
|
-
<div
|
|
15
|
+
<div
|
|
16
|
+
className={className}
|
|
17
|
+
style={{
|
|
18
|
+
transform: `rotate(${angle}deg)`
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
{content}
|
|
22
|
+
</div>
|
|
14
23
|
<JSXStyle id={item.id}>
|
|
15
24
|
{styles}
|
|
16
25
|
</JSXStyle>
|
|
@@ -3,9 +3,11 @@ import { CntrlColor, TVideoItem } from '@cntrl-site/sdk';
|
|
|
3
3
|
import { ItemProps } from '../Item';
|
|
4
4
|
import { LinkWrapper } from '../LinkWrapper';
|
|
5
5
|
import { useFileItem } from './useFileItem';
|
|
6
|
+
import { useItemAngle } from '../useItemAngle';
|
|
6
7
|
|
|
7
8
|
export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
|
|
8
9
|
const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item);
|
|
10
|
+
const angle = useItemAngle(item);
|
|
9
11
|
const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
|
|
10
12
|
return (
|
|
11
13
|
<LinkWrapper url={item.link?.url}>
|
|
@@ -14,7 +16,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
|
|
|
14
16
|
borderRadius: `${radius * 100}vw`,
|
|
15
17
|
borderWidth: `${strokeWidth * 100}vw`,
|
|
16
18
|
opacity: `${opacity}`,
|
|
17
|
-
borderColor: `${borderColor}
|
|
19
|
+
borderColor: `${borderColor}`,
|
|
20
|
+
transform: `rotate(${angle}deg)`
|
|
18
21
|
}}
|
|
19
22
|
>
|
|
20
23
|
<video autoPlay muted loop playsInline className="video">
|
|
@@ -3,9 +3,11 @@ import { TVimeoEmbedItem } from '@cntrl-site/core';
|
|
|
3
3
|
import { ItemProps } from '../Item';
|
|
4
4
|
import { LinkWrapper } from '../LinkWrapper';
|
|
5
5
|
import { useEmbedVideoItem } from './useEmbedVideoItem';
|
|
6
|
+
import { useItemAngle } from '../useItemAngle';
|
|
6
7
|
|
|
7
8
|
export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
|
|
8
9
|
const { radius } = useEmbedVideoItem(item);
|
|
10
|
+
const angle = useItemAngle(item);
|
|
9
11
|
const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
|
|
10
12
|
const getValidVimeoUrl = (url: string): string => {
|
|
11
13
|
const validURL = new URL(url);
|
|
@@ -27,7 +29,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
|
|
|
27
29
|
<LinkWrapper url={item.link?.url}>
|
|
28
30
|
<div className={`embed-video-wrapper-${item.id}`}
|
|
29
31
|
style={{
|
|
30
|
-
borderRadius: `${radius * 100}vw
|
|
32
|
+
borderRadius: `${radius * 100}vw`,
|
|
33
|
+
transform: `rotate(${angle}deg)`
|
|
31
34
|
}}
|
|
32
35
|
>
|
|
33
36
|
<iframe
|
|
@@ -43,9 +46,6 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
|
|
|
43
46
|
overflow: hidden;
|
|
44
47
|
width: 100%;
|
|
45
48
|
height: 100%;
|
|
46
|
-
top: 50%;
|
|
47
|
-
left: 50%;
|
|
48
|
-
transform: translate(-50%, -50%);
|
|
49
49
|
}
|
|
50
50
|
.embedVideo {
|
|
51
51
|
width: 100%;
|
|
@@ -4,10 +4,12 @@ import { ItemProps } from '../Item';
|
|
|
4
4
|
import { LinkWrapper } from '../LinkWrapper';
|
|
5
5
|
import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
|
|
6
6
|
import { useEmbedVideoItem } from './useEmbedVideoItem';
|
|
7
|
+
import { useItemAngle } from '../useItemAngle';
|
|
7
8
|
|
|
8
9
|
export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
|
|
9
10
|
const { autoplay, controls, url } = item.commonParams;
|
|
10
11
|
const { radius } = useEmbedVideoItem(item);
|
|
12
|
+
const angle = useItemAngle(item);
|
|
11
13
|
|
|
12
14
|
const getValidYoutubeUrl = (url: string): string => {
|
|
13
15
|
const newUrl = new URL(url);
|
|
@@ -25,7 +27,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
|
|
|
25
27
|
<LinkWrapper url={item.link?.url}>
|
|
26
28
|
<div className={`embed-youtube-video-wrapper-${item.id}`}
|
|
27
29
|
style={{
|
|
28
|
-
borderRadius: `${radius * 100}vw
|
|
30
|
+
borderRadius: `${radius * 100}vw`,
|
|
31
|
+
transform: `rotate(${angle}deg)`
|
|
29
32
|
}}
|
|
30
33
|
>
|
|
31
34
|
<iframe
|
|
@@ -41,9 +44,6 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) =>
|
|
|
41
44
|
overflow: hidden;
|
|
42
45
|
width: 100%;
|
|
43
46
|
height: 100%;
|
|
44
|
-
top: 50%;
|
|
45
|
-
left: 50%;
|
|
46
|
-
transform: translate(-50%, -50%);
|
|
47
47
|
}
|
|
48
48
|
.embedYoutubeVideo {
|
|
49
49
|
width: 100%;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { TArticleItemAny } from '@cntrl-site/sdk';
|
|
2
|
+
import { useKeyframeValue } from '../common/useKeyframeValue';
|
|
3
|
+
import { useCurrentLayout } from '../common/useCurrentLayout';
|
|
4
|
+
|
|
5
|
+
export const useItemScale = (item: TArticleItemAny) => {
|
|
6
|
+
const layout = useCurrentLayout();
|
|
7
|
+
const { scale } = useKeyframeValue(
|
|
8
|
+
item,
|
|
9
|
+
(item, layoutId) => ({ scale: layoutId ? item.area[layoutId].scale : 1 }),
|
|
10
|
+
(animator, scroll, value) => animator.getScale(value, scroll)
|
|
11
|
+
);
|
|
12
|
+
const scaleAnchor = item.area[layout].scaleAnchor;
|
|
13
|
+
|
|
14
|
+
return { scale, scaleAnchor };
|
|
15
|
+
};
|
|
@@ -178,6 +178,24 @@ export class Animator {
|
|
|
178
178
|
};
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
+
getScale(
|
|
182
|
+
values: TKeyframeValueMap[KeyframeType.Scale],
|
|
183
|
+
pos: number
|
|
184
|
+
): TKeyframeValueMap[KeyframeType.Scale] {
|
|
185
|
+
const keyframes = this.keyframesMap[KeyframeType.Scale];
|
|
186
|
+
if (!keyframes || !keyframes.length) return values;
|
|
187
|
+
if (keyframes.length === 1) {
|
|
188
|
+
const [keyframe] = keyframes;
|
|
189
|
+
return {
|
|
190
|
+
scale: keyframe.value.scale
|
|
191
|
+
};
|
|
192
|
+
}
|
|
193
|
+
const { start, end } = this.getStartEnd<KeyframeType.Scale>(pos, keyframes);
|
|
194
|
+
return {
|
|
195
|
+
scale: rangeMap(pos, start.position, end.position, start.value.scale, end.value.scale, true)
|
|
196
|
+
};
|
|
197
|
+
}
|
|
198
|
+
|
|
181
199
|
getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T> {
|
|
182
200
|
const index = binSearchInsertAt(keyframes, { position }, compare);
|
|
183
201
|
const end = index === keyframes.length ? index - 1 : index;
|
|
@@ -215,7 +233,8 @@ function createKeyframesMap(): KeyframesMap {
|
|
|
215
233
|
[KeyframeType.Color]: [],
|
|
216
234
|
[KeyframeType.Rotation]: [],
|
|
217
235
|
[KeyframeType.BorderColor]: [],
|
|
218
|
-
[KeyframeType.Opacity]: []
|
|
236
|
+
[KeyframeType.Opacity]: [],
|
|
237
|
+
[KeyframeType.Scale]: []
|
|
219
238
|
};
|
|
220
239
|
}
|
|
221
240
|
|
|
@@ -41,8 +41,7 @@ export class RichTextConverter {
|
|
|
41
41
|
layouts: TLayout[],
|
|
42
42
|
hasPreset: boolean
|
|
43
43
|
): [ReactNode[], string] {
|
|
44
|
-
const { text
|
|
45
|
-
const text = Array.from(rawText); // because of emoji
|
|
44
|
+
const { text, blocks = [] } = richText.commonParams;
|
|
46
45
|
const root: ReactElement[] = [];
|
|
47
46
|
const styleRules = layouts.reduce<Record<string, string[]>>((rec, layout) => {
|
|
48
47
|
rec[layout.id] = [];
|
|
@@ -102,18 +101,18 @@ export class RichTextConverter {
|
|
|
102
101
|
for (const entity of entitiesGroups) {
|
|
103
102
|
const entityKids: ReactNode[] = [];
|
|
104
103
|
if (offset < entity.start) {
|
|
105
|
-
kids.push(content
|
|
104
|
+
kids.push(sliceSymbols(content, offset, entity.start));
|
|
106
105
|
offset = entity.start;
|
|
107
106
|
}
|
|
108
107
|
for (const style of entity.stylesGroup) {
|
|
109
108
|
if (offset < style.start) {
|
|
110
|
-
entityKids.push(content
|
|
109
|
+
entityKids.push(sliceSymbols(content, offset, style.start));
|
|
111
110
|
}
|
|
112
|
-
entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{content
|
|
111
|
+
entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{sliceSymbols(content, style.start, style.end)}</span>);
|
|
113
112
|
offset = style.end;
|
|
114
113
|
}
|
|
115
114
|
if (offset < entity.end) {
|
|
116
|
-
entityKids.push(content
|
|
115
|
+
entityKids.push(sliceSymbols(content, offset, entity.end));
|
|
117
116
|
offset = entity.end;
|
|
118
117
|
}
|
|
119
118
|
if (entity.link) {
|
|
@@ -122,8 +121,8 @@ export class RichTextConverter {
|
|
|
122
121
|
}
|
|
123
122
|
kids.push(...entityKids);
|
|
124
123
|
}
|
|
125
|
-
if (offset < content
|
|
126
|
-
kids.push(content
|
|
124
|
+
if (offset < getSymbolsCount(content)) {
|
|
125
|
+
kids.push(sliceSymbols(content, offset));
|
|
127
126
|
}
|
|
128
127
|
for (const item of group) {
|
|
129
128
|
const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
|
|
@@ -258,3 +257,28 @@ function getResolvedValue(value: string | undefined, name: string) {
|
|
|
258
257
|
if (name !== 'COLOR') return value;
|
|
259
258
|
return value ? CntrlColor.parse(value).toCss() : value;
|
|
260
259
|
}
|
|
260
|
+
|
|
261
|
+
function sliceSymbols(text: string, start: number, end: number = NaN): string {
|
|
262
|
+
let startOffset = NaN;
|
|
263
|
+
let endOffset = 0;
|
|
264
|
+
let count = -1;
|
|
265
|
+
for (const ch of text) {
|
|
266
|
+
count += 1;
|
|
267
|
+
if (count === start) {
|
|
268
|
+
startOffset = endOffset;
|
|
269
|
+
}
|
|
270
|
+
if (count === end) break;
|
|
271
|
+
endOffset += ch.length;
|
|
272
|
+
}
|
|
273
|
+
if (isNaN(startOffset)) return '';
|
|
274
|
+
return text.slice(startOffset, endOffset + 1);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
function getSymbolsCount(input: string): number {
|
|
278
|
+
let count = 0;
|
|
279
|
+
let ch: string;
|
|
280
|
+
for (ch of input) {
|
|
281
|
+
count += 1;
|
|
282
|
+
}
|
|
283
|
+
return count;
|
|
284
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ScaleAnchor } from '@cntrl-site/sdk';
|
|
2
|
+
|
|
3
|
+
export const ScaleAnchorMap = {
|
|
4
|
+
[ScaleAnchor.TopLeft]: 'top left',
|
|
5
|
+
[ScaleAnchor.TopCenter]: 'top center',
|
|
6
|
+
[ScaleAnchor.TopRight]: 'top right',
|
|
7
|
+
[ScaleAnchor.MiddleLeft]: 'center left',
|
|
8
|
+
[ScaleAnchor.MiddleCenter]: 'center',
|
|
9
|
+
[ScaleAnchor.MiddleRight]: 'center right',
|
|
10
|
+
[ScaleAnchor.BottomLeft]: 'bottom left',
|
|
11
|
+
[ScaleAnchor.BottomCenter]: 'bottom center',
|
|
12
|
+
[ScaleAnchor.BottomRight]: 'bottom right'
|
|
13
|
+
};
|
|
Binary file
|
|
Binary file
|