Skip to content

Commit 6d5b524

Browse files
coadometa-codesync[bot]
coado
authored and
meta-codesync[bot]
committed
Add support for other view props to the Animation Backend (#54947)
Summary: Pull Request resolved: #54947 ## Summary: Adds support for `borderCurves`, `borderStyles`, `pointerEvents`, `isolation`, `cursor`, `boxShadow`, and `mixBlendMode` props to be passed as `AnimatedProp` to the animation backend. ## Changelog: [General][Added] - Added support for `borderCurves`, `borderStyles`, `pointerEvents`, `isolation`, `cursor`, `boxShadow`, and `mixBlendMode` props to the AnimationBackend. Reviewed By: zeyap Differential Revision: D89544552 fbshipit-source-id: 7c465d6642419624209207f9ccf220953183da3f
1 parent bed1a9a commit 6d5b524

4 files changed

Lines changed: 440 additions & 0 deletions

File tree

‎packages/react-native/ReactCommon/react/renderer/animationbackend/AnimatedPropSerializer.cpp‎

Lines changed: 349 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,327 @@ void packOutlineWidth(
198198
dyn.insert("outlineWidth", get<Float>(animatedProp));
199199
}
200200

201+
void packBorderCurveEdge(
202+
folly::dynamic& dyn,
203+
const std::string& propName,
204+
const std::optional<BorderCurve>& curveValue) {
205+
if (curveValue.has_value()) {
206+
std::string curveStr;
207+
switch (curveValue.value()) {
208+
case BorderCurve::Circular:
209+
curveStr = "circular";
210+
break;
211+
case BorderCurve::Continuous:
212+
curveStr = "continuous";
213+
break;
214+
default:
215+
throw std::runtime_error("Unknown border curve");
216+
}
217+
dyn.insert(propName, curveStr);
218+
}
219+
}
220+
221+
void packBorderCurves(
222+
folly::dynamic& dyn,
223+
const AnimatedPropBase& animatedProp) {
224+
const auto& borderCurves = get<CascadedBorderCurves>(animatedProp);
225+
226+
packBorderCurveEdge(dyn, "borderTopLeftCurve", borderCurves.topLeft);
227+
packBorderCurveEdge(dyn, "borderTopRightCurve", borderCurves.topRight);
228+
packBorderCurveEdge(dyn, "borderBottomLeftCurve", borderCurves.bottomLeft);
229+
packBorderCurveEdge(dyn, "borderBottomRightCurve", borderCurves.bottomRight);
230+
231+
if (borderCurves.all.has_value()) {
232+
std::string curveStr;
233+
switch (borderCurves.all.value()) {
234+
case BorderCurve::Circular:
235+
curveStr = "circular";
236+
break;
237+
case BorderCurve::Continuous:
238+
curveStr = "continuous";
239+
break;
240+
default:
241+
throw std::runtime_error("Unknown border curve");
242+
}
243+
dyn.insert("borderCurve", curveStr);
244+
}
245+
}
246+
247+
std::string borderStyleToString(BorderStyle style) {
248+
switch (style) {
249+
case BorderStyle::Solid:
250+
return "solid";
251+
case BorderStyle::Dotted:
252+
return "dotted";
253+
case BorderStyle::Dashed:
254+
return "dashed";
255+
default:
256+
throw std::runtime_error("Unknown border style");
257+
}
258+
}
259+
260+
void packBorderStyleEdge(
261+
folly::dynamic& dyn,
262+
const std::string& propName,
263+
const std::optional<BorderStyle>& styleValue) {
264+
if (styleValue.has_value()) {
265+
dyn.insert(propName, borderStyleToString(styleValue.value()));
266+
}
267+
}
268+
269+
void packBorderStyles(
270+
folly::dynamic& dyn,
271+
const AnimatedPropBase& animatedProp) {
272+
const auto& borderStyles = get<CascadedBorderStyles>(animatedProp);
273+
274+
packBorderStyleEdge(dyn, "borderLeftStyle", borderStyles.left);
275+
packBorderStyleEdge(dyn, "borderTopStyle", borderStyles.top);
276+
packBorderStyleEdge(dyn, "borderRightStyle", borderStyles.right);
277+
packBorderStyleEdge(dyn, "borderBottomStyle", borderStyles.bottom);
278+
packBorderStyleEdge(dyn, "borderStartStyle", borderStyles.start);
279+
packBorderStyleEdge(dyn, "borderEndStyle", borderStyles.end);
280+
281+
if (borderStyles.all.has_value()) {
282+
dyn.insert("borderStyle", borderStyleToString(borderStyles.all.value()));
283+
}
284+
}
285+
286+
void packPointerEvents(
287+
folly::dynamic& dyn,
288+
const AnimatedPropBase& animatedProp) {
289+
const auto& pointerEvents = get<PointerEventsMode>(animatedProp);
290+
std::string pointerEventsStr;
291+
switch (pointerEvents) {
292+
case PointerEventsMode::Auto:
293+
pointerEventsStr = "auto";
294+
break;
295+
case PointerEventsMode::None:
296+
pointerEventsStr = "none";
297+
break;
298+
case PointerEventsMode::BoxNone:
299+
pointerEventsStr = "box-none";
300+
break;
301+
case PointerEventsMode::BoxOnly:
302+
pointerEventsStr = "box-only";
303+
break;
304+
default:
305+
throw std::runtime_error("Unknown pointer events mode");
306+
}
307+
dyn.insert("pointerEvents", pointerEventsStr);
308+
}
309+
310+
void packIsolation(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
311+
const auto& isolation = get<Isolation>(animatedProp);
312+
std::string isolationStr;
313+
switch (isolation) {
314+
case Isolation::Auto:
315+
isolationStr = "auto";
316+
break;
317+
case Isolation::Isolate:
318+
isolationStr = "isolate";
319+
break;
320+
default:
321+
throw std::runtime_error("Unknown isolation mode");
322+
}
323+
dyn.insert("isolation", isolationStr);
324+
}
325+
326+
void packCursor(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
327+
const auto& cursor = get<Cursor>(animatedProp);
328+
std::string cursorStr;
329+
switch (cursor) {
330+
case Cursor::Auto:
331+
cursorStr = "auto";
332+
break;
333+
case Cursor::Alias:
334+
cursorStr = "alias";
335+
break;
336+
case Cursor::AllScroll:
337+
cursorStr = "all-scroll";
338+
break;
339+
case Cursor::Cell:
340+
cursorStr = "cell";
341+
break;
342+
case Cursor::ColResize:
343+
cursorStr = "col-resize";
344+
break;
345+
case Cursor::ContextMenu:
346+
cursorStr = "context-menu";
347+
break;
348+
case Cursor::Copy:
349+
cursorStr = "copy";
350+
break;
351+
case Cursor::Crosshair:
352+
cursorStr = "crosshair";
353+
break;
354+
case Cursor::Default:
355+
cursorStr = "default";
356+
break;
357+
case Cursor::EResize:
358+
cursorStr = "e-resize";
359+
break;
360+
case Cursor::EWResize:
361+
cursorStr = "ew-resize";
362+
break;
363+
case Cursor::Grab:
364+
cursorStr = "grab";
365+
break;
366+
case Cursor::Grabbing:
367+
cursorStr = "grabbing";
368+
break;
369+
case Cursor::Help:
370+
cursorStr = "help";
371+
break;
372+
case Cursor::Move:
373+
cursorStr = "move";
374+
break;
375+
case Cursor::NResize:
376+
cursorStr = "n-resize";
377+
break;
378+
case Cursor::NEResize:
379+
cursorStr = "ne-resize";
380+
break;
381+
case Cursor::NESWResize:
382+
cursorStr = "nesw-resize";
383+
break;
384+
case Cursor::NSResize:
385+
cursorStr = "ns-resize";
386+
break;
387+
case Cursor::NWResize:
388+
cursorStr = "nw-resize";
389+
break;
390+
case Cursor::NWSEResize:
391+
cursorStr = "nwse-resize";
392+
break;
393+
case Cursor::NoDrop:
394+
cursorStr = "no-drop";
395+
break;
396+
case Cursor::None:
397+
cursorStr = "none";
398+
break;
399+
case Cursor::NotAllowed:
400+
cursorStr = "not-allowed";
401+
break;
402+
case Cursor::Pointer:
403+
cursorStr = "pointer";
404+
break;
405+
case Cursor::Progress:
406+
cursorStr = "progress";
407+
break;
408+
case Cursor::RowResize:
409+
cursorStr = "row-resize";
410+
break;
411+
case Cursor::SResize:
412+
cursorStr = "s-resize";
413+
break;
414+
case Cursor::SEResize:
415+
cursorStr = "se-resize";
416+
break;
417+
case Cursor::SWResize:
418+
cursorStr = "sw-resize";
419+
break;
420+
case Cursor::Text:
421+
cursorStr = "text";
422+
break;
423+
case Cursor::Url:
424+
cursorStr = "url";
425+
break;
426+
case Cursor::WResize:
427+
cursorStr = "w-resize";
428+
break;
429+
case Cursor::Wait:
430+
cursorStr = "wait";
431+
break;
432+
case Cursor::ZoomIn:
433+
cursorStr = "zoom-in";
434+
break;
435+
case Cursor::ZoomOut:
436+
cursorStr = "zoom-out";
437+
break;
438+
default:
439+
throw std::runtime_error("Unknown cursor type");
440+
}
441+
dyn.insert("cursor", cursorStr);
442+
}
443+
444+
void packBoxShadow(folly::dynamic& dyn, const AnimatedPropBase& animatedProp) {
445+
const auto& boxShadows = get<std::vector<BoxShadow>>(animatedProp);
446+
auto shadowArray = folly::dynamic::array();
447+
for (const auto& shadow : boxShadows) {
448+
folly::dynamic shadowObj = folly::dynamic::object();
449+
shadowObj["offsetX"] = shadow.offsetX;
450+
shadowObj["offsetY"] = shadow.offsetY;
451+
shadowObj["blurRadius"] = shadow.blurRadius;
452+
shadowObj["spreadDistance"] = shadow.spreadDistance;
453+
shadowObj["inset"] = shadow.inset;
454+
if (shadow.color) {
455+
shadowObj["color"] = static_cast<int32_t>(*shadow.color);
456+
}
457+
shadowArray.push_back(shadowObj);
458+
}
459+
dyn.insert("boxShadow", shadowArray);
460+
}
461+
462+
void packMixBlendMode(
463+
folly::dynamic& dyn,
464+
const AnimatedPropBase& animatedProp) {
465+
const auto& blendMode = get<BlendMode>(animatedProp);
466+
std::string blendModeStr;
467+
switch (blendMode) {
468+
case BlendMode::Normal:
469+
blendModeStr = "normal";
470+
break;
471+
case BlendMode::Multiply:
472+
blendModeStr = "multiply";
473+
break;
474+
case BlendMode::Screen:
475+
blendModeStr = "screen";
476+
break;
477+
case BlendMode::Overlay:
478+
blendModeStr = "overlay";
479+
break;
480+
case BlendMode::Darken:
481+
blendModeStr = "darken";
482+
break;
483+
case BlendMode::Lighten:
484+
blendModeStr = "lighten";
485+
break;
486+
case BlendMode::ColorDodge:
487+
blendModeStr = "color-dodge";
488+
break;
489+
case BlendMode::ColorBurn:
490+
blendModeStr = "color-burn";
491+
break;
492+
case BlendMode::HardLight:
493+
blendModeStr = "hard-light";
494+
break;
495+
case BlendMode::SoftLight:
496+
blendModeStr = "soft-light";
497+
break;
498+
case BlendMode::Difference:
499+
blendModeStr = "difference";
500+
break;
501+
case BlendMode::Exclusion:
502+
blendModeStr = "exclusion";
503+
break;
504+
case BlendMode::Hue:
505+
blendModeStr = "hue";
506+
break;
507+
case BlendMode::Saturation:
508+
blendModeStr = "saturation";
509+
break;
510+
case BlendMode::Color:
511+
blendModeStr = "color";
512+
break;
513+
case BlendMode::Luminosity:
514+
blendModeStr = "luminosity";
515+
break;
516+
default:
517+
throw std::runtime_error("Unknown blend mode");
518+
}
519+
dyn.insert("mixBlendMode", blendModeStr);
520+
}
521+
201522
void packAnimatedProp(
202523
folly::dynamic& dyn,
203524
const std::unique_ptr<AnimatedPropBase>& animatedProp) {
@@ -258,6 +579,34 @@ void packAnimatedProp(
258579
packOutlineWidth(dyn, *animatedProp);
259580
break;
260581

582+
case BORDER_CURVES:
583+
packBorderCurves(dyn, *animatedProp);
584+
break;
585+
586+
case BORDER_STYLES:
587+
packBorderStyles(dyn, *animatedProp);
588+
break;
589+
590+
case POINTER_EVENTS:
591+
packPointerEvents(dyn, *animatedProp);
592+
break;
593+
594+
case ISOLATION:
595+
packIsolation(dyn, *animatedProp);
596+
break;
597+
598+
case CURSOR:
599+
packCursor(dyn, *animatedProp);
600+
break;
601+
602+
case BOX_SHADOW:
603+
packBoxShadow(dyn, *animatedProp);
604+
break;
605+
606+
case MIX_BLEND_MODE:
607+
packMixBlendMode(dyn, *animatedProp);
608+
break;
609+
261610
case WIDTH:
262611
case HEIGHT:
263612
case FLEX:

0 commit comments

Comments
 (0)