@cntrl-site/sdk-nextjs 1.9.9 → 1.9.11

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.
Files changed (7) hide show
  1. package/lib/components/items/FileItem/ImageItem.js +23 -43
  2. package/lib/components/items/FileItem/VideoItem.js +21 -41
  3. package/lib/components/items/RectangleItem/RectangleItem.js +25 -46
  4. package/package.json +1 -1
  5. package/src/components/items/FileItem/ImageItem.tsx +14 -60
  6. package/src/components/items/FileItem/VideoItem.tsx +14 -60
  7. package/src/components/items/RectangleItem/RectangleItem.tsx +26 -57
package/lib/components/items/FileItem/ImageItem.js CHANGED
@@ -20,7 +20,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
20
20
  const useItemFXData_1 = require("../../../common/useItemFXData");
21
21
  const getFill_1 = require("../../../utils/getFill");
22
22
  const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
23
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
23
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
24
24
  const id = (0, react_1.useId)();
25
25
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
26
26
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -38,10 +38,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
38
38
  const width = area && exemplary ? area.width * exemplary : 0;
39
39
  const height = area && exemplary ? area.height * exemplary : 0;
40
40
  const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
41
- const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
42
- const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
43
- const stateStrokeFillLayers = (_b = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _b === void 0 ? void 0 : _b.strokeFill;
44
- const strokeSolidTransition = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _c !== void 0 ? _c : 'none';
41
+ const imgStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
45
42
  (0, react_1.useEffect)(() => {
46
43
  isInitialRef.current = false;
47
44
  }, []);
@@ -51,35 +48,30 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
51
48
  controlsValues
52
49
  }, width, height);
53
50
  const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
54
- const rectWidth = Math.floor((_d = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _d !== void 0 ? _d : 0);
55
- const rectHeight = Math.floor((_e = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _e !== void 0 ? _e : 0);
56
- const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.radius, itemRadius);
57
- const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _g === void 0 ? void 0 : _g.strokeWidth, itemStrokeWidth);
58
- const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.angle, itemAngle);
59
- const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.opacity, itemOpacity);
60
- const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.blur, itemBlur);
61
- const strokeValue = stateStrokeFillLayers
62
- ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
63
- : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
64
- const stroke = strokeValue
65
- ? (_l = (0, getFill_1.getFill)(strokeValue)) !== null && _l !== void 0 ? _l : 'transparent'
51
+ const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
52
+ const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
53
+ const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
54
+ const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _e === void 0 ? void 0 : _e.strokeWidth, itemStrokeWidth);
55
+ const strokeFill = (_h = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = (_f = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.styles) === null || _f === void 0 ? void 0 : _f.strokeFill) === null || _g === void 0 ? void 0 : _g[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _h !== void 0 ? _h : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
56
+ const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.angle, itemAngle);
57
+ const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.opacity, itemOpacity);
58
+ const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_l = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _l === void 0 ? void 0 : _l.blur, itemBlur);
59
+ const stroke = strokeFill
60
+ ? (_m = (0, getFill_1.getFill)(strokeFill)) !== null && _m !== void 0 ? _m : 'transparent'
66
61
  : 'transparent';
67
- const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
62
+ const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? {
63
+ borderColor: stroke,
64
+ borderWidth: `${strokeWidth * 100}vw`,
65
+ borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
66
+ borderStyle: 'solid',
67
+ } : {})), { transition: (_o = imgStateParams === null || imgStateParams === void 0 ? void 0 : imgStateParams.transition) !== null && _o !== void 0 ? _o : 'none' });
68
68
  const isInteractive = opacity !== 0;
69
69
  (0, react_1.useEffect)(() => {
70
70
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
71
71
  }, [isInteractive, onVisibilityChange]);
72
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
73
- '--stroke-background-position': 'center',
74
- '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
75
- '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
76
- } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: [hasGLEffect && isFXAllowed
77
- ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
78
- : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })), strokeWidth !== 0 && strokeValue && ((0, jsx_runtime_1.jsx)("div", { className: `image-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
79
- backgroundPosition: 'center',
80
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
81
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
82
- } : { background: stroke })) : {})) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
72
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: hasGLEffect && isFXAllowed
73
+ ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
74
+ : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
83
75
  .image-wrapper-${item.id} {
84
76
  position: absolute;
85
77
  width: 100%;
@@ -115,21 +107,9 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
115
107
  }
116
108
  .image-${item.id} {
117
109
  border: solid;
118
- border-color: transparent;
119
- border-width: ${layoutParams.strokeWidth * 100}vw;
110
+ border-color: ${stroke};
120
111
  border-radius: ${layoutParams.radius * 100}vw;
121
- }
122
- .image-border-${item.id} {
123
- position: absolute;
124
- inset: 0;
125
- border-radius: inherit;
126
- pointer-events: none;
127
- z-index: 2;
128
- -webkit-mask:
129
- linear-gradient(#fff 0 0) content-box,
130
- linear-gradient(#fff 0 0);
131
- -webkit-mask-composite: xor;
132
- mask-composite: exclude;
112
+ border-width: ${layoutParams.strokeWidth * 100}vw;
133
113
  }
134
114
  `);
135
115
  })}
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -21,7 +21,7 @@ const useElementRect_1 = require("../../../utils/useElementRect");
21
21
  const useItemFXData_1 = require("../../../common/useItemFXData");
22
22
  const getFill_1 = require("../../../utils/getFill");
23
23
  const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
24
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
24
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
25
25
  const id = (0, react_1.useId)();
26
26
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
27
27
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
@@ -49,20 +49,15 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
49
49
  const layoutValues = [item.area, item.layoutParams];
50
50
  const hasScrollPlayback = scrollPlayback !== null;
51
51
  const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'opacity', 'blur']);
52
- const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius']);
53
- const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
54
- const stateStrokeFillLayers = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _d === void 0 ? void 0 : _d.strokeFill;
55
- const strokeSolidTransition = (_e = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _e !== void 0 ? _e : 'none';
56
- const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.angle, itemAngle);
57
- const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.opacity, itemOpacity);
58
- const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.blur, itemBlur);
59
- const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_j = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _j === void 0 ? void 0 : _j.strokeWidth, itemStrokeWidth);
60
- const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _k === void 0 ? void 0 : _k.radius, itemRadius);
61
- const strokeValue = stateStrokeFillLayers
62
- ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
63
- : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
64
- const stroke = strokeValue
65
- ? (_l = (0, getFill_1.getFill)(strokeValue)) !== null && _l !== void 0 ? _l : 'transparent'
52
+ const videoStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeWidth', 'radius', 'strokeFill']);
53
+ const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _d === void 0 ? void 0 : _d.angle, itemAngle);
54
+ const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _e === void 0 ? void 0 : _e.opacity, itemOpacity);
55
+ const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_f = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _f === void 0 ? void 0 : _f.blur, itemBlur);
56
+ const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _g === void 0 ? void 0 : _g.strokeWidth, itemStrokeWidth);
57
+ const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_h = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _h === void 0 ? void 0 : _h.radius, itemRadius);
58
+ const strokeFill = (_l = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_k = (_j = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.styles) === null || _j === void 0 ? void 0 : _j.strokeFill) === null || _k === void 0 ? void 0 : _k[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _l !== void 0 ? _l : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
59
+ const stroke = strokeFill
60
+ ? (_m = (0, getFill_1.getFill)(strokeFill)) !== null && _m !== void 0 ? _m : 'transparent'
66
61
  : 'transparent';
67
62
  (0, react_1.useEffect)(() => {
68
63
  isInitialRef.current = false;
@@ -73,7 +68,12 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
73
68
  controls: controlsValues
74
69
  }, width, height);
75
70
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
76
- const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), { transition: (_m = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _m !== void 0 ? _m : 'none' });
71
+ const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? {
72
+ borderWidth: `${strokeWidth * 100}vw`,
73
+ borderColor: stroke,
74
+ borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
75
+ borderStyle: 'solid'
76
+ } : {})), { transition: (_o = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _o !== void 0 ? _o : 'none' });
77
77
  const isInteractive = opacity !== 0;
78
78
  (0, react_1.useEffect)(() => {
79
79
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
@@ -96,11 +96,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
96
96
  observer.observe(ref);
97
97
  return () => observer.disconnect();
98
98
  }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
99
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_o = item.link) === null || _o === void 0 ? void 0 : _o.url, target: (_p = item.link) === null || _p === void 0 ? void 0 : _p.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
100
- '--stroke-background-position': 'center',
101
- '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
102
- '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
103
- } : {})) : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_q = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _q !== void 0 ? _q : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_r = item.commonParams.coverUrl) !== null && _r !== void 0 ? _r : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
99
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_p = item.link) === null || _p === void 0 ? void 0 : _p.url, target: (_q = item.link) === null || _q === void 0 ? void 0 : _q.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_r = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _r !== void 0 ? _r : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_s = item.commonParams.coverUrl) !== null && _s !== void 0 ? _s : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
104
100
  setIsVideoInteracted(true);
105
101
  }, muted: layoutParams.muted, onPlay: () => {
106
102
  setIsVideoPlaying(true);
@@ -123,7 +119,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
123
119
  return;
124
120
  setIsVideoInteracted(true);
125
121
  videoRef.play();
126
- }, src: (_s = item.commonParams.coverUrl) !== null && _s !== void 0 ? _s : '', className: `video-cover-${item.id}`, onClick: () => {
122
+ }, src: (_t = item.commonParams.coverUrl) !== null && _t !== void 0 ? _t : '', className: `video-cover-${item.id}`, onClick: () => {
127
123
  if (!videoRef)
128
124
  return;
129
125
  setIsVideoInteracted(true);
@@ -138,11 +134,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
138
134
  else {
139
135
  videoRef.play();
140
136
  }
141
- } })))] })), strokeWidth !== 0 && strokeValue && ((0, jsx_runtime_1.jsx)("div", { className: `video-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
142
- backgroundPosition: 'center',
143
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
144
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
145
- } : { background: stroke })) : {})) }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
137
+ } })))] }))] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
146
138
  .video-wrapper-${item.id} {
147
139
  position: absolute;
148
140
  overflow: hidden;
@@ -202,21 +194,9 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
202
194
  }
203
195
  .video-${item.id} {
204
196
  border: solid;
205
- border-color: transparent;
206
- border-width: ${layoutParams.strokeWidth * 100}vw;
197
+ border-color: ${stroke};
207
198
  border-radius: ${layoutParams.radius * 100}vw;
208
- }
209
- .video-border-${item.id} {
210
- position: absolute;
211
- inset: 0;
212
- border-radius: inherit;
213
- pointer-events: none;
214
- z-index: 2;
215
- -webkit-mask:
216
- linear-gradient(#fff 0 0) content-box,
217
- linear-gradient(#fff 0 0);
218
- -webkit-mask-composite: xor;
219
- mask-composite: exclude;
199
+ border-width: ${layoutParams.strokeWidth * 100}vw;
220
200
  }
221
201
  `);
222
202
  })}
package/lib/components/items/RectangleItem/RectangleItem.js CHANGED
@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const react_1 = require("react");
9
9
  const style_1 = __importDefault(require("styled-jsx/style"));
10
10
  const sdk_1 = require("@cntrl-site/sdk");
11
+ const color_1 = require("@cntrl-site/color");
11
12
  const LinkWrapper_1 = require("../LinkWrapper");
12
13
  const useRectangleItem_1 = require("./useRectangleItem");
13
14
  const useItemAngle_1 = require("../useItemAngle");
@@ -17,61 +18,51 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
17
18
  const getFill_1 = require("../../../utils/getFill");
18
19
  const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
19
20
  const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
20
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
21
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
21
22
  const id = (0, react_1.useId)();
22
23
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
23
24
  const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
24
25
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
25
- const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
26
+ const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
26
27
  const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill']);
27
28
  const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
28
29
  const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
29
- const stateStrokeFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['strokeFill']);
30
- const stateStrokeFillLayers = (_c = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.styles) === null || _c === void 0 ? void 0 : _c.strokeFill;
31
- const strokeSolidTransition = (_d = stateStrokeFillParams === null || stateStrokeFillParams === void 0 ? void 0 : stateStrokeFillParams.transition) !== null && _d !== void 0 ? _d : 'none';
32
- const styles = (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _e !== void 0 ? _e : {};
30
+ const styles = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _c !== void 0 ? _c : {};
33
31
  const layoutValues = [item.area, item.layoutParams];
34
32
  const [ref, setRef] = (0, react_1.useState)(null);
35
33
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
36
34
  const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
37
35
  const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
38
36
  const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);
37
+ const strokeFill = (_e = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = styles === null || styles === void 0 ? void 0 : styles.strokeFill) === null || _d === void 0 ? void 0 : _d[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])) !== null && _e !== void 0 ? _e : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
39
38
  const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
40
39
  const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
41
40
  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
42
- const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = stateStrokeFillLayers !== null && stateStrokeFillLayers !== void 0 ? stateStrokeFillLayers : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
41
+ const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : [])
42
+ || (strokeWidth !== 0 && strokeFill && strokeFill.value && color_1.CntrlColor.parse(strokeFill.value).getAlpha() !== 0);
43
43
  (0, react_1.useEffect)(() => {
44
44
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
45
45
  }, [isInteractive, onVisibilityChange]);
46
- const strokeValue = stateStrokeFillLayers
47
- ? (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateStrokeFillLayers[0], itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0])
48
- : itemStrokeFill === null || itemStrokeFill === void 0 ? void 0 : itemStrokeFill[0];
49
- const stroke = strokeValue
50
- ? (_h = (0, getFill_1.getFill)(strokeValue)) !== null && _h !== void 0 ? _h : 'transparent'
46
+ const stroke = strokeFill
47
+ ? (_g = (0, getFill_1.getFill)(strokeFill)) !== null && _g !== void 0 ? _g : 'transparent'
51
48
  : 'transparent';
52
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_j = item.link) === null || _j === void 0 ? void 0 : _j.url, target: (_k = item.link) === null || _k === void 0 ? void 0 : _k.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (strokeValue ? Object.assign({ '--stroke-background': stroke }, (strokeValue.type === 'image' ? {
49
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, 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(Object.assign(Object.assign({}, (strokeFill ? Object.assign({ borderColor: stroke, borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0, borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit', borderStyle: 'solid' }, (strokeFill.type === 'image' ? {
53
50
  backgroundPosition: 'center',
54
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
55
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
51
+ backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
52
+ backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
56
53
  } : {})) : {})), (radius !== undefined ? { 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
57
54
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
58
- : {})), { transition: (_l = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _l !== void 0 ? _l : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-border-${item.id}`, style: Object.assign({ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', zIndex: 2, WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)', WebkitMaskComposite: 'xor', maskComposite: 'exclude' }, (strokeWidth !== 0 && strokeValue ? Object.assign(Object.assign(Object.assign({}, (strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {})), (strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {})), (strokeValue.type === 'image' ? {
59
- backgroundPosition: 'center',
60
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
61
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
62
- } : {
63
- background: stroke,
64
- })) : { background: stroke })) }), itemFill && itemFill.map((fill) => {
65
- var _a, _b;
66
- const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
67
- const value = stateFillLayer
68
- ? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
69
- : fill;
70
- const background = value
71
- ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
72
- : 'transparent';
73
- return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition }));
74
- })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
55
+ : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), children: itemFill && itemFill.map((fill) => {
56
+ var _a, _b;
57
+ const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
58
+ const value = stateFillLayer
59
+ ? ((_a = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(stateFillLayer, fill)) !== null && _a !== void 0 ? _a : fill)
60
+ : fill;
61
+ const background = value
62
+ ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
63
+ : 'transparent';
64
+ return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, radius: radius, strokeWidth: strokeWidth }));
65
+ }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
75
66
  .rectangle-${item.id} {
76
67
  position: absolute;
77
68
  width: 100%;
@@ -97,25 +88,13 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
97
88
  ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
98
89
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
99
90
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
100
- },
101
- .rectangle-border-${item.id} {
102
- position: absolute;
103
- inset: 0;
104
- border-radius: inherit;
105
- pointer-events: none;
106
- z-index: 2;
107
- -webkit-mask:
108
- linear-gradient(#fff 0 0) content-box,
109
- linear-gradient(#fff 0 0);
110
- -webkit-mask-composite: xor;
111
- mask-composite: exclude;
112
91
  }
113
92
  `);
114
93
  })}
115
94
  ` })] }) }));
116
95
  };
117
96
  exports.RectangleItem = RectangleItem;
118
- function Fill({ fill, itemId, background, solidTransition }) {
97
+ function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth }) {
119
98
  const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
120
99
  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' ? { background, transition: solidTransition } : {})), (fill.type === 'image'
121
100
  ? {
@@ -125,6 +104,6 @@ function Fill({ fill, itemId, background, solidTransition }) {
125
104
  backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
126
105
  opacity: fill.opacity
127
106
  }
128
- : { background })), { position: 'absolute', borderRadius: 'inherit', mixBlendMode: fill.blendMode, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
107
+ : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isRotatedImage ? { overflow: 'hidden' } : {})) }, fill.id));
129
108
  }
130
109
  ;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.9",
3
+ "version": "1.9.11",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/FileItem/ImageItem.tsx CHANGED
@@ -1,7 +1,6 @@
1
- import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
1
+ import { FC, useEffect, useId, useRef, useState } from 'react';
2
2
  import JSXStyle from 'styled-jsx/style';
3
- import { CntrlColor } from '@cntrl-site/color';
4
- import { getLayoutStyles, ImageItem as TImageItem, FillLayer } from '@cntrl-site/sdk';
3
+ import { getLayoutStyles, ImageItem as TImageItem } from '@cntrl-site/sdk';
5
4
  import { ItemProps } from '../Item';
6
5
  import { LinkWrapper } from '../LinkWrapper';
7
6
  import { useFileItem } from './useFileItem';
@@ -40,11 +39,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
40
39
  const width = area && exemplary ? area.width * exemplary : 0;
41
40
  const height = area && exemplary ? area.height * exemplary : 0;
42
41
  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
43
- const imgStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
44
- const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
45
- const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
46
- const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
47
-
42
+ const imgStateParams = interactionCtrl?.getState<any>(['strokeWidth', 'radius', 'strokeFill']);
48
43
  useEffect(() => {
49
44
  isInitialRef.current = false;
50
45
  }, []);
@@ -64,19 +59,22 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
64
59
  const rectHeight = Math.floor(rect?.height ?? 0);
65
60
  const radius = getStyleFromItemStateAndParams(imgStateParams?.styles?.radius, itemRadius);
66
61
  const strokeWidth = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeWidth, itemStrokeWidth);
62
+ const strokeFill = getStyleFromItemStateAndParams(imgStateParams?.styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
67
63
  const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
68
64
  const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
69
65
  const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
70
66
 
71
- const strokeValue = stateStrokeFillLayers
72
- ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
73
- : itemStrokeFill?.[0];
74
- const stroke = strokeValue
75
- ? getFill(strokeValue) ?? 'transparent'
67
+ const stroke = strokeFill
68
+ ? getFill(strokeFill) ?? 'transparent'
76
69
  : 'transparent';
77
70
  const inlineStyles = {
78
71
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
79
- ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
72
+ ...(strokeWidth !== undefined ? {
73
+ borderColor: stroke,
74
+ borderWidth: `${strokeWidth * 100}vw`,
75
+ borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
76
+ borderStyle: 'solid',
77
+ } : {}),
80
78
  transition: imgStateParams?.transition ?? 'none'
81
79
  };
82
80
  const isInteractive = opacity !== 0;
@@ -93,14 +91,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
93
91
  ...(opacity !== undefined ? { opacity } : {}),
94
92
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
95
93
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
96
- ...(strokeValue ? {
97
- '--stroke-background': stroke,
98
- ...(strokeValue.type === 'image' ? {
99
- '--stroke-background-position': 'center',
100
- '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
101
- '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
102
- } : {})
103
- } : {}),
104
94
  willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
105
95
  transition: wrapperStateParams?.transition ?? 'none'
106
96
  }}
@@ -123,30 +113,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
123
113
  src={item.commonParams.url}
124
114
  />
125
115
  )}
126
- {strokeWidth !== 0 && strokeValue && (
127
- <div
128
- className={`image-border-${item.id}`}
129
- style={{
130
- position: 'absolute',
131
- inset: 0,
132
- borderRadius: 'inherit',
133
- pointerEvents: 'none',
134
- zIndex: 2,
135
- WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
136
- WebkitMaskComposite: 'xor',
137
- maskComposite: 'exclude',
138
- ...(strokeWidth !== 0 && strokeValue ? {
139
- ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
140
- ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
141
- ...(strokeValue.type === 'image' ? {
142
- backgroundPosition: 'center',
143
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
144
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
145
- } : { background: stroke })
146
- } : {}),
147
- }}
148
- />
149
- )}
150
116
  </div>
151
117
  <JSXStyle id={id}>{`
152
118
  .image-wrapper-${item.id} {
@@ -184,21 +150,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
184
150
  }
185
151
  .image-${item.id} {
186
152
  border: solid;
187
- border-color: transparent;
188
- border-width: ${layoutParams.strokeWidth * 100}vw;
153
+ border-color: ${stroke};
189
154
  border-radius: ${layoutParams.radius * 100}vw;
190
- }
191
- .image-border-${item.id} {
192
- position: absolute;
193
- inset: 0;
194
- border-radius: inherit;
195
- pointer-events: none;
196
- z-index: 2;
197
- -webkit-mask:
198
- linear-gradient(#fff 0 0) content-box,
199
- linear-gradient(#fff 0 0);
200
- -webkit-mask-composite: xor;
201
- mask-composite: exclude;
155
+ border-width: ${layoutParams.strokeWidth * 100}vw;
202
156
  }
203
157
  `);
204
158
  })}
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -1,7 +1,6 @@
1
- import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
1
+ import { FC, useEffect, useId, useRef, useState } from 'react';
2
2
  import JSXStyle from 'styled-jsx/style';
3
- import { CntrlColor } from '@cntrl-site/color';
4
- import { getLayoutStyles, VideoItem as TVideoItem, FillLayer } from '@cntrl-site/sdk';
3
+ import { getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
5
4
  import { ItemProps } from '../Item';
6
5
  import { LinkWrapper } from '../LinkWrapper';
7
6
  import { useFileItem } from './useFileItem';
@@ -50,21 +49,15 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
50
49
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
51
50
  const hasScrollPlayback = scrollPlayback !== null;
52
51
  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'opacity', 'blur']);
53
- const videoStateParams = interactionCtrl?.getState<number>(['strokeWidth', 'radius']);
54
- const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
55
- const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
56
- const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
52
+ const videoStateParams = interactionCtrl?.getState<any>(['strokeWidth', 'radius', 'strokeFill']);
57
53
  const angle = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.angle, itemAngle);
58
54
  const opacity = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.opacity, itemOpacity);
59
55
  const blur = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.blur, itemBlur);
60
56
  const strokeWidth = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.strokeWidth, itemStrokeWidth);
61
57
  const radius = getStyleFromItemStateAndParams(wrapperStateParams?.styles?.radius, itemRadius);
62
-
63
- const strokeValue = stateStrokeFillLayers
64
- ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
65
- : itemStrokeFill?.[0];
66
- const stroke = strokeValue
67
- ? getFill(strokeValue) ?? 'transparent'
58
+ const strokeFill = getStyleFromItemStateAndParams(videoStateParams?.styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
59
+ const stroke = strokeFill
60
+ ? getFill(strokeFill) ?? 'transparent'
68
61
  : 'transparent';
69
62
  useEffect(() => {
70
63
  isInitialRef.current = false;
@@ -83,7 +76,12 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
83
76
  useRegisterResize(ref, onResize);
84
77
  const inlineStyles = {
85
78
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
86
- ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
79
+ ...(strokeWidth !== undefined ? {
80
+ borderWidth: `${strokeWidth * 100}vw`,
81
+ borderColor: stroke,
82
+ borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
83
+ borderStyle: 'solid'
84
+ } : {}),
87
85
  transition: videoStateParams?.transition ?? 'none'
88
86
  };
89
87
  const isInteractive = opacity !== 0;
@@ -118,14 +116,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
118
116
  ...(opacity !== undefined ? { opacity } : {}),
119
117
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
120
118
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
121
- ...(strokeValue ? {
122
- '--stroke-background': stroke,
123
- ...(strokeValue.type === 'image' ? {
124
- '--stroke-background-position': 'center',
125
- '--stroke-background-size': strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
126
- '--stroke-background-repeat': strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
127
- } : {})
128
- } : {}),
129
119
  willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
130
120
  transition: wrapperStateParams?.transition ?? 'none'
131
121
  }}
@@ -217,30 +207,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
217
207
  ))}
218
208
  </>
219
209
  )}
220
- {strokeWidth !== 0 && strokeValue && (
221
- <div
222
- className={`video-border-${item.id}`}
223
- style={{
224
- position: 'absolute',
225
- inset: 0,
226
- borderRadius: 'inherit',
227
- pointerEvents: 'none',
228
- zIndex: 2,
229
- WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
230
- WebkitMaskComposite: 'xor',
231
- maskComposite: 'exclude',
232
- ...(strokeWidth !== 0 && strokeValue ? {
233
- ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
234
- ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
235
- ...(strokeValue.type === 'image' ? {
236
- backgroundPosition: 'center',
237
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
238
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
239
- } : { background: stroke })
240
- } : {}),
241
- }}
242
- />
243
- )}
244
210
  </div>
245
211
  <JSXStyle id={id}>{`
246
212
  .video-wrapper-${item.id} {
@@ -302,21 +268,9 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
302
268
  }
303
269
  .video-${item.id} {
304
270
  border: solid;
305
- border-color: transparent;
306
- border-width: ${layoutParams.strokeWidth * 100}vw;
271
+ border-color: ${stroke};
307
272
  border-radius: ${layoutParams.radius * 100}vw;
308
- }
309
- .video-border-${item.id} {
310
- position: absolute;
311
- inset: 0;
312
- border-radius: inherit;
313
- pointer-events: none;
314
- z-index: 2;
315
- -webkit-mask:
316
- linear-gradient(#fff 0 0) content-box,
317
- linear-gradient(#fff 0 0);
318
- -webkit-mask-composite: xor;
319
- mask-composite: exclude;
273
+ border-width: ${layoutParams.strokeWidth * 100}vw;
320
274
  }
321
275
  `);
322
276
  })}
package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import { FC, useEffect, useId, useMemo, useState } from 'react';
1
+ import { FC, useEffect, useId, useState } from 'react';
2
2
  import JSXStyle from 'styled-jsx/style';
3
- import { CntrlColor } from '@cntrl-site/color';
4
3
  import { RectangleItem as TRectangleItem, getLayoutStyles, FillLayer } from '@cntrl-site/sdk';
4
+ import { CntrlColor } from '@cntrl-site/color';
5
5
  import { ItemProps } from '../Item';
6
6
  import { LinkWrapper } from '../LinkWrapper';
7
7
  import { useRectangleItem } from './useRectangleItem';
@@ -24,13 +24,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
24
24
  backdropBlur: itemBackdropBlur
25
25
  } = useRectangleItem(item, sectionId);
26
26
  const itemAngle = useItemAngle(item, sectionId);
27
- const stateParams = interactionCtrl?.getState<number>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur']);
27
+ const stateParams = interactionCtrl?.getState<any>(['angle', 'strokeWidth', 'radius', 'blur', 'backdropBlur', 'strokeFill']);
28
28
  const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill']);
29
29
  const stateFillLayers = stateFillParams?.styles?.fill;
30
30
  const solidTransition = stateFillParams?.transition ?? 'none';
31
- const stateStrokeFillParams = interactionCtrl?.getState<FillLayer[]>(['strokeFill']);
32
- const stateStrokeFillLayers = stateStrokeFillParams?.styles?.strokeFill;
33
- const strokeSolidTransition = stateStrokeFillParams?.transition ?? 'none';
34
31
  const styles = stateParams?.styles ?? {};
35
32
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
36
33
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
@@ -38,19 +35,18 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
38
35
  const backdropBlur = getStyleFromItemStateAndParams(styles?.backdropBlur, itemBackdropBlur);
39
36
  const radius = getStyleFromItemStateAndParams(styles?.radius, itemRadius);
40
37
  const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
38
+ const strokeFill = getStyleFromItemStateAndParams(styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
41
39
  const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
42
40
  const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
43
41
  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
44
- const isInteractive = areFillsVisible(stateFillLayers ?? itemFill ?? []) || (strokeWidth !== 0 && areFillsVisible(stateStrokeFillLayers ?? itemStrokeFill ?? []));
42
+ const isInteractive = areFillsVisible(stateFillLayers ?? itemFill ?? [])
43
+ || (strokeWidth !== 0 && strokeFill && strokeFill.value && CntrlColor.parse(strokeFill.value).getAlpha() !== 0);
45
44
  useEffect(() => {
46
45
  onVisibilityChange?.(isInteractive);
47
46
  }, [isInteractive, onVisibilityChange]);
48
47
 
49
- const strokeValue = stateStrokeFillLayers
50
- ? getStyleFromItemStateAndParams<FillLayer>(stateStrokeFillLayers[0], itemStrokeFill?.[0])
51
- : itemStrokeFill?.[0];
52
- const stroke = strokeValue
53
- ? getFill(strokeValue) ?? 'transparent'
48
+ const stroke = strokeFill
49
+ ? getFill(strokeFill) ?? 'transparent'
54
50
  : 'transparent';
55
51
 
56
52
  return (
@@ -60,12 +56,15 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
60
56
  className={`rectangle-${item.id}`}
61
57
  ref={setRef}
62
58
  style={{
63
- ...(strokeValue ? {
64
- '--stroke-background': stroke,
65
- ...(strokeValue.type === 'image' ? {
59
+ ...(strokeFill ? {
60
+ borderColor: stroke,
61
+ borderWidth: strokeWidth !== undefined ? `${strokeWidth * 100}vw` : 0,
62
+ borderRadius: radius !== undefined ? `${radius * 100}vw` : 'inherit',
63
+ borderStyle: 'solid',
64
+ ...(strokeFill.type === 'image' ? {
66
65
  backgroundPosition: 'center',
67
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
68
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
66
+ backgroundSize: strokeFill.behavior === 'repeat' ? `${strokeFill.backgroundSize}%` : strokeFill.behavior,
67
+ backgroundRepeat: strokeFill.behavior === 'repeat' ? 'repeat' : 'no-repeat'
69
68
  } : {})
70
69
  } : {}),
71
70
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
@@ -79,31 +78,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
79
78
  transition: stateParams?.transition ?? 'none'
80
79
  }}
81
80
  >
82
- <div
83
- className={`rectangle-border-${item.id}`}
84
- style={{
85
- position: 'absolute',
86
- inset: 0,
87
- borderRadius: 'inherit',
88
- pointerEvents: 'none',
89
- zIndex: 2,
90
- WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
91
- WebkitMaskComposite: 'xor',
92
- maskComposite: 'exclude',
93
- ...(strokeWidth !== 0 && strokeValue ? {
94
- ...(strokeWidth ? { padding: `${strokeWidth * 100}vw` } : {}),
95
- ...(strokeValue.type === 'solid' ? { transition: strokeSolidTransition, background: stroke } : {}),
96
- ...(strokeValue.type === 'image' ? {
97
- backgroundPosition: 'center',
98
- backgroundSize: strokeValue.behavior === 'repeat' ? `${strokeValue.backgroundSize}%` : strokeValue.behavior,
99
- backgroundRepeat: strokeValue.behavior === 'repeat' ? 'repeat' : 'no-repeat'
100
- } : {
101
- background: stroke,
102
- }
103
- )
104
- } : { background: stroke }),
105
- }}
106
- />
107
81
  {itemFill && itemFill.map((fill) => {
108
82
  const stateFillLayer = stateFillLayers?.find((layer) => layer.id === fill.id);
109
83
  const value = stateFillLayer
@@ -114,7 +88,14 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
114
88
  : 'transparent';
115
89
 
116
90
  return (
117
- <Fill fill={value} itemId={item.id} background={background} solidTransition={solidTransition} />
91
+ <Fill
92
+ fill={value}
93
+ itemId={item.id}
94
+ background={background}
95
+ solidTransition={solidTransition}
96
+ radius={radius}
97
+ strokeWidth={strokeWidth}
98
+ />
118
99
  );
119
100
  })}
120
101
  </div>
@@ -144,18 +125,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
144
125
  ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
145
126
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
146
127
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
147
- },
148
- .rectangle-border-${item.id} {
149
- position: absolute;
150
- inset: 0;
151
- border-radius: inherit;
152
- pointer-events: none;
153
- z-index: 2;
154
- -webkit-mask:
155
- linear-gradient(#fff 0 0) content-box,
156
- linear-gradient(#fff 0 0);
157
- -webkit-mask-composite: xor;
158
- mask-composite: exclude;
159
128
  }
160
129
  `);
161
130
  })}
@@ -165,7 +134,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
165
134
  );
166
135
  };
167
136
 
168
- function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer; itemId: string; background: string; solidTransition: string; }) {
137
+ function Fill({ fill, itemId, background, solidTransition, radius, strokeWidth }: { fill: FillLayer; itemId: string; background: string; solidTransition: string; radius: number; strokeWidth: number; }) {
169
138
  const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
170
139
 
171
140
  return (
@@ -184,8 +153,8 @@ function Fill({ fill, itemId, background, solidTransition }: { fill: FillLayer;
184
153
  }
185
154
  : { background }),
186
155
  position: 'absolute',
187
- borderRadius: 'inherit',
188
156
  mixBlendMode: fill.blendMode as any,
157
+ borderRadius: `calc(${radius * 100}vw - ${strokeWidth * 100}vw)`,
189
158
  top: 0,
190
159
  left: 0,
191
160
  width: '100%',