@gxpl/sdk 0.0.39 → 0.0.40
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.
|
@@ -40,11 +40,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
|
|
|
40
40
|
const stroke = strokeFill
|
|
41
41
|
? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
|
|
42
42
|
: 'transparent';
|
|
43
|
-
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(
|
|
44
|
-
backgroundPosition: 'center',
|
|
45
|
-
backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
|
|
46
|
-
backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
|
|
47
|
-
} : {})) : {})), { borderRadius: `${radius * 100}vw` }), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
|
|
48
44
|
? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
|
|
49
45
|
: {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: itemFill && itemFill.map((fill, i) => {
|
|
50
46
|
var _a, _b;
|
|
@@ -55,7 +51,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
|
|
|
55
51
|
const background = value
|
|
56
52
|
? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
|
|
57
53
|
: 'transparent';
|
|
58
|
-
return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth, fillId: fill.id }, `fill-${i}-${fill.id}`));
|
|
54
|
+
return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, transition: (stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) || '', solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth, fillId: fill.id, isHighest: i === itemFill.length - 1, borderColor: stroke }, `fill-${i}-${fill.id}`));
|
|
59
55
|
}) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
60
56
|
.rectangle-${item.id} {
|
|
61
57
|
position: absolute;
|
|
@@ -82,16 +78,27 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
|
|
|
82
78
|
` })] }) }));
|
|
83
79
|
};
|
|
84
80
|
exports.RectangleItem = RectangleItem;
|
|
85
|
-
function Fill({ fillId, fill, itemId, background, solidTransition, radius, strokeWidth, }) {
|
|
81
|
+
function Fill({ fillId, fill, itemId, background, transition, solidTransition, radius, strokeWidth, isHighest, borderColor, }) {
|
|
86
82
|
const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
|
|
87
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? {
|
|
83
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (fill.type === 'solid' ? {
|
|
84
|
+
background,
|
|
85
|
+
transition: transition && transition !== 'none' && transition.trim()
|
|
86
|
+
? `${solidTransition}, ${transition}`
|
|
87
|
+
: solidTransition
|
|
88
|
+
} : {})), (fill.type === 'image'
|
|
88
89
|
? {
|
|
89
90
|
transform: `rotate(${fill.rotation}deg)`,
|
|
90
91
|
backgroundImage: `url(${fill.src})`,
|
|
91
92
|
backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
|
|
92
93
|
backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
|
|
94
|
+
backgroundOrigin: 'border-box',
|
|
93
95
|
opacity: fill.opacity
|
|
94
96
|
}
|
|
95
|
-
: { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, borderRadius:
|
|
97
|
+
: { background })), { position: 'absolute', mixBlendMode: fill.blendMode, top: 0, left: 0, borderRadius: `${radius * 100}vw`, width: '100%', height: '100%', pointerEvents: 'none' }), (isHighest ? {
|
|
98
|
+
borderColor,
|
|
99
|
+
borderWidth: `${strokeWidth * 100}vw`,
|
|
100
|
+
borderStyle: 'solid',
|
|
101
|
+
boxSizing: 'border-box'
|
|
102
|
+
} : {})), (isRotatedImage ? { overflow: 'hidden' } : {})), (fill.type !== 'solid' ? { transition } : {})) }, fillId));
|
|
96
103
|
}
|
|
97
104
|
;
|