@cntrl-site/sdk-nextjs 1.9.44 → 1.9.46

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 (3) hide show
  1. package/lib/components/items/RectangleItem/RectangleItem.js +20 -24
  2. package/package.json +1 -1
  3. package/src/components/items/RectangleItem/RectangleItem.tsx +16 -23
package/lib/components/items/RectangleItem/RectangleItem.js CHANGED
@@ -19,38 +19,38 @@ const getFill_1 = require("../../../utils/getFill");
19
19
  const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
20
20
  const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
21
21
  const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
22
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
22
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
23
23
  const id = (0, react_1.useId)();
24
24
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
25
25
  const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
26
26
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
27
- const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'backdropBlur', 'strokeFill']);
28
- const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill', 'strokeWidth', 'radius']);
27
+ const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'backdropBlur']);
28
+ const stateFillParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['fill', 'strokeWidth', 'radius', 'strokeFill']);
29
29
  const stateFillLayers = (_a = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _a === void 0 ? void 0 : _a.fill;
30
- const solidTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
30
+ const fillTransition = (_b = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.transition) !== null && _b !== void 0 ? _b : 'none';
31
31
  const styles = (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _c !== void 0 ? _c : {};
32
32
  const layoutValues = [item.area, item.layoutParams];
33
33
  const [ref, setRef] = (0, react_1.useState)(null);
34
34
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
35
35
  (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
36
36
  const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
37
- const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
38
- const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);
39
- 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];
37
+ const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
38
+ const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_e = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.styles) === null || _e === void 0 ? void 0 : _e.strokeWidth, itemStrokeWidth);
39
+ const strokeFill = (_h = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_g = (_f = stateFillParams === null || stateFillParams === void 0 ? void 0 : stateFillParams.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];
40
40
  const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
41
41
  const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
42
42
  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
43
- const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : [])
43
+ const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_j = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _j !== void 0 ? _j : [])
44
44
  || (strokeWidth !== 0 && strokeFill && strokeFill.value && color_1.CntrlColor.parse(strokeFill.value).getAlpha() !== 0);
45
45
  (0, react_1.useEffect)(() => {
46
46
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
47
47
  }, [isInteractive, onVisibilityChange]);
48
48
  const stroke = strokeFill
49
- ? (_g = (0, getFill_1.getFill)(strokeFill)) !== null && _g !== void 0 ? _g : 'transparent'
49
+ ? (_k = (0, getFill_1.getFill)(strokeFill)) !== null && _k !== void 0 ? _k : 'transparent'
50
50
  : 'transparent';
51
- 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({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
51
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.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({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
52
52
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
53
- : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), children: itemFill && itemFill.map((fill, index) => {
53
+ : {})), { transition: (_o = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: itemFill && itemFill.map((fill, index) => {
54
54
  var _a, _b;
55
55
  const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
56
56
  const value = stateFillLayer
@@ -59,7 +59,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
59
59
  const background = value
60
60
  ? (_b = (0, getFill_1.getFill)(value)) !== null && _b !== void 0 ? _b : 'transparent'
61
61
  : 'transparent';
62
- return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, solidTransition: solidTransition, transition: (stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) || '', radius: radius, strokeWidth: strokeWidth, isHighest: index === itemFill.length - 1, borderColor: stroke }, fill.id));
62
+ return ((0, jsx_runtime_1.jsx)(Fill, { fill: value, itemId: item.id, background: background, fillTransition: fillTransition, radius: radius, strokeWidth: strokeWidth, isHighest: index === itemFill.length - 1, borderColor: stroke }, fill.id));
63
63
  }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
64
64
  .rectangle-${item.id} {
65
65
  position: absolute;
@@ -80,10 +80,10 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
80
80
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
81
81
  return (`
82
82
  .rectangle-${item.id} {
83
- border-radius: ${layoutParams.radius * 100}vw
83
+ border-radius: ${layoutParams.radius * 100}vw;
84
84
  transform: rotate(${area.angle}deg);
85
85
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
86
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
86
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''};
87
87
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
88
88
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
89
89
  }
@@ -92,27 +92,23 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
92
92
  ` })] }) }));
93
93
  };
94
94
  exports.RectangleItem = RectangleItem;
95
- function Fill({ fill, itemId, background, solidTransition, transition, radius, strokeWidth, isHighest, borderColor }) {
95
+ function Fill({ fill, itemId, background, fillTransition, radius, strokeWidth, isHighest, borderColor }) {
96
+ var _a;
96
97
  const isRotatedImage = fill.type === 'image' && fill.rotation && fill.rotation !== 0;
97
- 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' ? {
98
- background,
99
- transition: transition && transition !== 'none' && transition.trim()
100
- ? `${solidTransition}, ${transition}`
101
- : solidTransition
102
- } : {})), (fill.type === 'image'
98
+ 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({}, (fill.type === 'solid' ? { background } : {})), (fill.type === 'image'
103
99
  ? {
104
- transform: `rotate(${fill.rotation}deg)`,
100
+ transform: `rotate(${(_a = fill.rotation) !== null && _a !== void 0 ? _a : 0}deg)`,
105
101
  backgroundImage: `url(${fill.src})`,
106
102
  backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
107
103
  backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
108
104
  backgroundOrigin: 'border-box',
109
105
  opacity: fill.opacity
110
106
  }
111
- : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, borderRadius: `${radius * 100}vw`, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none' }), (isHighest ? {
107
+ : { background })), { position: 'absolute', mixBlendMode: fill.blendMode, borderRadius: `${radius * 100}vw`, top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', transition: fillTransition }), (isHighest ? {
112
108
  borderColor,
113
109
  borderWidth: `${strokeWidth * 100}vw`,
114
110
  borderStyle: 'solid',
115
111
  boxSizing: 'border-box'
116
- } : {})), (isRotatedImage ? { overflow: 'hidden' } : {})), (fill.type !== 'solid' ? { transition } : {})) }));
112
+ } : {})), (isRotatedImage ? { overflow: 'hidden' } : {})) }));
117
113
  }
118
114
  ;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.44",
3
+ "version": "1.9.46",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { FC, useContext, useEffect, useId, useState } from 'react';
1
+ import { FC, useEffect, useId, useState } from 'react';
2
2
  import JSXStyle from 'styled-jsx/style';
3
3
  import { RectangleItem as TRectangleItem, getLayoutStyles, FillLayer } from '@cntrl-site/sdk';
4
4
  import { CntrlColor } from '@cntrl-site/color';
@@ -25,19 +25,19 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
25
25
  backdropBlur: itemBackdropBlur
26
26
  } = useRectangleItem(item, sectionId);
27
27
  const itemAngle = useItemAngle(item, sectionId);
28
- const stateParams = interactionCtrl?.getState<any>(['angle', 'blur', 'backdropBlur', 'strokeFill']);
29
- const stateFillParams = interactionCtrl?.getState<FillLayer[]>(['fill', 'strokeWidth', 'radius']);
28
+ const stateParams = interactionCtrl?.getState<any>(['angle', 'blur', 'backdropBlur']);
29
+ const stateFillParams = interactionCtrl?.getState<any>(['fill', 'strokeWidth', 'radius', 'strokeFill']);
30
30
  const stateFillLayers = stateFillParams?.styles?.fill;
31
- const solidTransition = stateFillParams?.transition ?? 'none';
31
+ const fillTransition = stateFillParams?.transition ?? 'none';
32
32
  const styles = stateParams?.styles ?? {};
33
33
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
34
34
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
35
35
  useRegisterResize(ref, onResize);
36
36
  useItemGeometry(item.id, ref);
37
37
  const backdropBlur = getStyleFromItemStateAndParams(styles?.backdropBlur, itemBackdropBlur);
38
- const radius = getStyleFromItemStateAndParams(styles?.radius, itemRadius);
39
- const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
40
- const strokeFill = getStyleFromItemStateAndParams(styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
38
+ const radius = getStyleFromItemStateAndParams(stateFillParams?.styles?.radius, itemRadius);
39
+ const strokeWidth = getStyleFromItemStateAndParams(stateFillParams?.styles?.strokeWidth, itemStrokeWidth);
40
+ const strokeFill = getStyleFromItemStateAndParams(stateFillParams?.styles?.strokeFill?.[0], itemStrokeFill?.[0]) ?? itemStrokeFill?.[0];
41
41
  const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
42
42
  const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
43
43
  const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
@@ -69,7 +69,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
69
69
  }}
70
70
  >
71
71
  {itemFill && itemFill.map((fill, index) => {
72
- const stateFillLayer = stateFillLayers?.find((layer) => layer.id === fill.id);
72
+ const stateFillLayer = stateFillLayers?.find((layer: FillLayer) => layer.id === fill.id);
73
73
  const value = stateFillLayer
74
74
  ? (getStyleFromItemStateAndParams<FillLayer>(stateFillLayer, fill) ?? fill)
75
75
  : fill;
@@ -83,8 +83,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
83
83
  fill={value}
84
84
  itemId={item.id}
85
85
  background={background}
86
- solidTransition={solidTransition}
87
- transition={stateParams?.transition || ''}
86
+ fillTransition={fillTransition}
88
87
  radius={radius}
89
88
  strokeWidth={strokeWidth}
90
89
  isHighest={index === itemFill.length - 1}
@@ -113,10 +112,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
113
112
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
114
113
  return (`
115
114
  .rectangle-${item.id} {
116
- border-radius: ${layoutParams.radius * 100}vw
115
+ border-radius: ${layoutParams.radius * 100}vw;
117
116
  transform: rotate(${area.angle}deg);
118
117
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
119
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
118
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''};
120
119
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
121
120
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
122
121
  }
@@ -128,12 +127,11 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
128
127
  );
129
128
  };
130
129
 
131
- function Fill({ fill, itemId, background, solidTransition, transition, radius, strokeWidth, isHighest, borderColor }: {
130
+ function Fill({ fill, itemId, background, fillTransition, radius, strokeWidth, isHighest, borderColor }: {
132
131
  fill: FillLayer;
133
132
  itemId: string;
134
133
  background: string;
135
- solidTransition: string;
136
- transition: string;
134
+ fillTransition: string;
137
135
  radius: number;
138
136
  strokeWidth: number;
139
137
  isHighest: boolean;
@@ -145,15 +143,10 @@ function Fill({ fill, itemId, background, solidTransition, transition, radius, s
145
143
  <div
146
144
  className={fill.type === 'image' ? `image-fill-${itemId}` : `fill-${itemId}`}
147
145
  style={{
148
- ...(fill.type === 'solid' ? {
149
- background,
150
- transition: transition && transition !== 'none' && transition.trim()
151
- ? `${solidTransition}, ${transition}`
152
- : solidTransition
153
- } : {}),
146
+ ...(fill.type === 'solid' ? { background } : {}),
154
147
  ...(fill.type === 'image'
155
148
  ? {
156
- transform: `rotate(${fill.rotation}deg)`,
149
+ transform: `rotate(${fill.rotation ?? 0}deg)`,
157
150
  backgroundImage: `url(${fill.src})`,
158
151
  backgroundSize: fill.behavior === 'repeat' ? `${fill.backgroundSize}%` : fill.behavior,
159
152
  backgroundRepeat: fill.behavior === 'repeat' ? 'repeat' : 'no-repeat',
@@ -169,6 +162,7 @@ function Fill({ fill, itemId, background, solidTransition, transition, radius, s
169
162
  width: '100%',
170
163
  height: '100%',
171
164
  pointerEvents: 'none',
165
+ transition: fillTransition,
172
166
  ...(isHighest ? {
173
167
  borderColor,
174
168
  borderWidth: `${strokeWidth * 100}vw`,
@@ -176,7 +170,6 @@ function Fill({ fill, itemId, background, solidTransition, transition, radius, s
176
170
  boxSizing: 'border-box'
177
171
  } : {}),
178
172
  ...(isRotatedImage ? { overflow: 'hidden' } : {}),
179
- ...(fill.type !== 'solid' ? { transition } : {})
180
173
  }}
181
174
  >
182
175
  </div>