@cntrl-site/sdk-nextjs 1.6.10 → 1.6.11-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cntrl-site-sdk-nextjs-1.6.11-alpha.0.tgz +0 -0
- package/lib/components/items/CompoundItem/CompoundChild.js +9 -8
- package/lib/components/items/GroupItem/GroupItem.js +3 -2
- package/lib/interactions/InteractionsRegistry.js +15 -22
- package/package.json +1 -1
- package/src/components/items/CompoundItem/CompoundChild.tsx +32 -27
- package/src/components/items/GroupItem/GroupItem.tsx +12 -4
- package/src/components/items/Item.tsx +7 -6
- package/src/interactions/InteractionsRegistry.ts +15 -10
- package/.idea/codeStyles/codeStyleConfig.xml +0 -5
- package/.idea/inspectionProfiles/Project_Default.xml +0 -15
|
Binary file
|
|
@@ -24,7 +24,7 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
|
|
|
24
24
|
const useItemArea_1 = require("../useItemArea");
|
|
25
25
|
const noop = () => null;
|
|
26
26
|
const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
27
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
27
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
28
28
|
const id = (0, react_1.useId)();
|
|
29
29
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
30
30
|
const layout = (0, useLayoutContext_1.useLayoutContext)();
|
|
@@ -33,13 +33,14 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
|
33
33
|
const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
|
|
34
34
|
const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
|
|
35
35
|
const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
|
|
36
|
-
const
|
|
36
|
+
const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height']);
|
|
37
|
+
const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['scale']);
|
|
37
38
|
const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
|
|
38
39
|
const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
|
|
39
|
-
top: (_c =
|
|
40
|
-
left: (_d =
|
|
41
|
-
width: (_e =
|
|
42
|
-
height: (_f =
|
|
40
|
+
top: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
|
|
41
|
+
left: (_d = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
|
|
42
|
+
width: (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
|
|
43
|
+
height: (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.height
|
|
43
44
|
});
|
|
44
45
|
const isInitialRef = (0, react_1.useRef)(true);
|
|
45
46
|
const sizingAxis = (0, useSizing_1.useSizing)(item);
|
|
@@ -49,7 +50,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
|
49
50
|
}, []);
|
|
50
51
|
const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
|
|
51
52
|
const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
|
|
52
|
-
const scale = (_h = (_g =
|
|
53
|
+
const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
|
|
53
54
|
const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
|
|
54
55
|
if (!item.compoundSettings)
|
|
55
56
|
return null;
|
|
@@ -69,7 +70,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
|
69
70
|
? { height: `${sizingAxis.y === 'manual'
|
|
70
71
|
? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
|
|
71
72
|
: 'unset'}` }
|
|
72
|
-
: {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k =
|
|
73
|
+
: {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
73
74
|
${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
|
|
74
75
|
const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
|
|
75
76
|
const scaleAnchor = area.scaleAnchor;
|
|
@@ -15,7 +15,8 @@ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
|
|
|
15
15
|
const useItemAngle_1 = require("../useItemAngle");
|
|
16
16
|
const useGroupItem_1 = require("./useGroupItem");
|
|
17
17
|
const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
|
|
18
|
-
const
|
|
18
|
+
const CompoundChild_1 = require("../CompoundItem/CompoundChild");
|
|
19
|
+
const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
|
|
19
20
|
var _a, _b, _c, _d, _e, _f;
|
|
20
21
|
const id = (0, react_1.useId)();
|
|
21
22
|
const { items } = item;
|
|
@@ -33,7 +34,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
|
|
|
33
34
|
(0, react_1.useEffect)(() => {
|
|
34
35
|
onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
|
|
35
36
|
}, [isInteractive, onVisibilityChange]);
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${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)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${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)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
37
38
|
.group-${item.id} {
|
|
38
39
|
position: absolute;
|
|
39
40
|
width: 100%;
|
|
@@ -1,15 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.InteractionsRegistry = void 0;
|
|
15
4
|
const sdk_1 = require("@cntrl-site/sdk");
|
|
@@ -204,22 +193,26 @@ class InteractionsRegistry {
|
|
|
204
193
|
}
|
|
205
194
|
}
|
|
206
195
|
unpackItems(article) {
|
|
207
|
-
var _a;
|
|
208
196
|
const itemsArr = [];
|
|
209
197
|
for (const section of article.sections) {
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
itemsArr.push(itemWithoutChildren);
|
|
213
|
-
if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
|
|
214
|
-
const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
|
|
215
|
-
for (const child of groupChildren) {
|
|
216
|
-
itemsArr.push(child);
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
}
|
|
198
|
+
const items = this.getNestedItems(section.items);
|
|
199
|
+
itemsArr.push(...items);
|
|
220
200
|
}
|
|
221
201
|
return itemsArr;
|
|
222
202
|
}
|
|
203
|
+
getNestedItems(items) {
|
|
204
|
+
var _a;
|
|
205
|
+
const allItems = [];
|
|
206
|
+
for (const item of items) {
|
|
207
|
+
if ((0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Group) || (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.Compound)) {
|
|
208
|
+
const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
|
|
209
|
+
const nestedItems = this.getNestedItems(groupChildren);
|
|
210
|
+
allItems.push(...nestedItems);
|
|
211
|
+
}
|
|
212
|
+
allItems.push(item);
|
|
213
|
+
}
|
|
214
|
+
return allItems;
|
|
215
|
+
}
|
|
223
216
|
getDefaultItemStages() {
|
|
224
217
|
const timestamp = Date.now();
|
|
225
218
|
const { items, layoutId } = this;
|
package/package.json
CHANGED
|
@@ -47,13 +47,14 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
47
47
|
const itemScale = useItemScale(item, sectionId);
|
|
48
48
|
const interactionCtrl = useItemInteractionCtrl(item.id);
|
|
49
49
|
const triggers = useItemTriggers(interactionCtrl);
|
|
50
|
-
const
|
|
50
|
+
const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
|
|
51
|
+
const innerStateProps = interactionCtrl?.getState(['scale']);
|
|
51
52
|
const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
|
|
52
53
|
const { width, height, top, left } = useItemArea(item, sectionId, {
|
|
53
|
-
top:
|
|
54
|
-
left:
|
|
55
|
-
width:
|
|
56
|
-
height:
|
|
54
|
+
top: wrapperStateProps?.styles?.top as number,
|
|
55
|
+
left: wrapperStateProps?.styles?.left as number,
|
|
56
|
+
width: wrapperStateProps?.styles?.width as number,
|
|
57
|
+
height: wrapperStateProps?.styles?.height as number
|
|
57
58
|
});
|
|
58
59
|
const isInitialRef = useRef(true);
|
|
59
60
|
const sizingAxis = useSizing(item);
|
|
@@ -65,7 +66,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
65
66
|
|
|
66
67
|
const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
|
|
67
68
|
const isRichText = isItemType(item, ArticleItemType.RichText);
|
|
68
|
-
const scale =
|
|
69
|
+
const scale = innerStateProps?.styles?.scale ?? itemScale;
|
|
69
70
|
const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
|
|
70
71
|
if (!item.compoundSettings) return null;
|
|
71
72
|
const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
|
|
@@ -83,41 +84,44 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
83
84
|
...(top !== undefined && compoundSettings ? { top: getCompoundTop(compoundSettings, top) } : {}),
|
|
84
85
|
...(left !== undefined && compoundSettings ? { left: getCompoundLeft(compoundSettings, left) } : {}),
|
|
85
86
|
...(width !== undefined && compoundSettings
|
|
86
|
-
? { width: `${sizingAxis.x === 'manual'
|
|
87
|
-
? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
|
|
87
|
+
? { width: `${sizingAxis.x === 'manual'
|
|
88
|
+
? getCompoundWidth(compoundSettings, width, isRichText, exemplary)
|
|
88
89
|
: 'max-content'}` }
|
|
89
90
|
: {}),
|
|
90
91
|
...(height !== undefined && compoundSettings
|
|
91
|
-
? { height: `${sizingAxis.y === 'manual'
|
|
92
|
-
? getCompoundHeight(compoundSettings, height)
|
|
92
|
+
? { height: `${sizingAxis.y === 'manual'
|
|
93
|
+
? getCompoundHeight(compoundSettings, height)
|
|
93
94
|
: 'unset'}` }
|
|
94
95
|
: {}),
|
|
95
96
|
...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
|
|
96
|
-
transition:
|
|
97
|
+
transition: wrapperStateProps?.transition ?? 'none',
|
|
97
98
|
cursor: hasClickTriggers ? 'pointer' : 'unset',
|
|
98
99
|
pointerEvents: allowPointerEvents ? 'auto' : 'none'
|
|
99
100
|
}}
|
|
100
101
|
{...triggers}
|
|
101
102
|
>
|
|
102
|
-
<div
|
|
103
|
+
<div
|
|
104
|
+
className={`item-${item.id}-inner`}
|
|
103
105
|
style={{
|
|
106
|
+
transition: innerStateProps?.transition ?? 'none',
|
|
104
107
|
...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
|
|
105
108
|
}}
|
|
106
109
|
>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
110
|
+
<RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
|
|
111
|
+
<ItemComponent
|
|
112
|
+
item={item}
|
|
113
|
+
sectionId={sectionId}
|
|
114
|
+
interactionCtrl={interactionCtrl}
|
|
115
|
+
onVisibilityChange={handleVisibilityChange}
|
|
116
|
+
isInCompound
|
|
117
|
+
/>
|
|
118
|
+
</RichTextWrapper>
|
|
115
119
|
</div>
|
|
116
120
|
<JSXStyle id={id}>{`
|
|
117
121
|
${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
122
|
+
const sizingAxis = parseSizing(layoutParams.sizing);
|
|
123
|
+
const scaleAnchor = area.scaleAnchor as AreaAnchor;
|
|
124
|
+
return (`
|
|
121
125
|
.item-${item.id}-inner {
|
|
122
126
|
width: 100%;
|
|
123
127
|
height: 100%;
|
|
@@ -131,15 +135,16 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
131
135
|
transition: opacity 0.2s linear 0.1s;
|
|
132
136
|
display: ${hidden ? 'none' : 'block'};
|
|
133
137
|
width: ${sizingAxis.x === 'manual'
|
|
134
|
-
|
|
135
|
-
|
|
138
|
+
? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
|
|
139
|
+
: 'max-content'};
|
|
136
140
|
height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
|
|
137
141
|
transform: ${getCompoundTransform(compoundSettings)};
|
|
138
142
|
z-index: ${area.zIndex};
|
|
139
143
|
}
|
|
140
144
|
`);
|
|
141
|
-
|
|
142
|
-
`}
|
|
145
|
+
})}
|
|
146
|
+
`}
|
|
147
|
+
</JSXStyle>
|
|
143
148
|
</div>
|
|
144
149
|
);
|
|
145
150
|
};
|
|
@@ -8,8 +8,9 @@ import { useCntrlContext } from '../../../provider/useCntrlContext';
|
|
|
8
8
|
import { useItemAngle } from '../useItemAngle';
|
|
9
9
|
import { useGroupItem } from './useGroupItem';
|
|
10
10
|
import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
|
|
11
|
+
import { CompoundChild } from '../CompoundItem/CompoundChild';
|
|
11
12
|
|
|
12
|
-
export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
|
|
13
|
+
export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
|
|
13
14
|
const id = useId();
|
|
14
15
|
const { items } = item;
|
|
15
16
|
const itemAngle = useItemAngle(item, sectionId);
|
|
@@ -39,7 +40,14 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
|
|
|
39
40
|
transition: stateParams?.transition ?? 'none'
|
|
40
41
|
}}
|
|
41
42
|
>
|
|
42
|
-
{items && items.map(item => (
|
|
43
|
+
{items && items.map(item => isInCompound ? (
|
|
44
|
+
<CompoundChild
|
|
45
|
+
item={item}
|
|
46
|
+
key={item.id}
|
|
47
|
+
sectionId={sectionId}
|
|
48
|
+
isParentVisible={isInteractive}
|
|
49
|
+
/>
|
|
50
|
+
) : (
|
|
43
51
|
<Item
|
|
44
52
|
item={item}
|
|
45
53
|
key={item.id}
|
|
@@ -57,13 +65,13 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
|
|
|
57
65
|
box-sizing: border-box;
|
|
58
66
|
}
|
|
59
67
|
${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
|
|
60
|
-
|
|
68
|
+
return (`
|
|
61
69
|
.group-${item.id} {
|
|
62
70
|
opacity: ${layoutParams.opacity};
|
|
63
71
|
transform: rotate(${area.angle}deg);
|
|
64
72
|
}
|
|
65
73
|
`);
|
|
66
|
-
|
|
74
|
+
})}
|
|
67
75
|
`}</JSXStyle>
|
|
68
76
|
</>
|
|
69
77
|
</LinkWrapper>
|
|
@@ -43,6 +43,7 @@ export interface ItemProps<I extends ItemAny> {
|
|
|
43
43
|
onResize?: (height: number) => void;
|
|
44
44
|
interactionCtrl?: ReturnType<typeof useItemInteractionCtrl>;
|
|
45
45
|
onVisibilityChange: (isVisible: boolean) => void;
|
|
46
|
+
isInCompound?: boolean;
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
export interface ItemWrapperProps {
|
|
@@ -107,7 +108,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
|
|
|
107
108
|
if (!item) return;
|
|
108
109
|
if (drag) {
|
|
109
110
|
setIsDraggingActive(true);
|
|
110
|
-
setPosition({
|
|
111
|
+
setPosition({
|
|
111
112
|
x: (currentX - startX) + lastX,
|
|
112
113
|
y: (currentY - startY) + lastY
|
|
113
114
|
});
|
|
@@ -183,12 +184,12 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
|
|
|
183
184
|
: {}),
|
|
184
185
|
...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
|
|
185
186
|
transition: innerStateProps?.transition ?? 'none',
|
|
186
|
-
cursor: isDraggingActive
|
|
187
|
-
? 'grabbing'
|
|
188
|
-
: isDraggable
|
|
187
|
+
cursor: isDraggingActive
|
|
188
|
+
? 'grabbing'
|
|
189
|
+
: isDraggable
|
|
189
190
|
? 'grab'
|
|
190
|
-
: hasClickTriggers
|
|
191
|
-
? 'pointer'
|
|
191
|
+
: hasClickTriggers
|
|
192
|
+
? 'pointer'
|
|
192
193
|
: 'unset',
|
|
193
194
|
pointerEvents: allowPointerEvents ? 'auto' : 'none',
|
|
194
195
|
userSelect: isDraggable ? 'none' : 'unset',
|
|
@@ -206,20 +206,25 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
|
|
|
206
206
|
private unpackItems(article: Article): ItemAny[] {
|
|
207
207
|
const itemsArr = [];
|
|
208
208
|
for (const section of article.sections) {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
itemsArr.push(itemWithoutChildren);
|
|
212
|
-
if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
|
|
213
|
-
const groupChildren = item?.items ?? [];
|
|
214
|
-
for (const child of groupChildren) {
|
|
215
|
-
itemsArr.push(child);
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
209
|
+
const items = this.getNestedItems(section.items);
|
|
210
|
+
itemsArr.push(...items);
|
|
219
211
|
}
|
|
220
212
|
return itemsArr;
|
|
221
213
|
}
|
|
222
214
|
|
|
215
|
+
private getNestedItems(items: ItemAny[]): ItemAny[] {
|
|
216
|
+
const allItems: ItemAny[] = [];
|
|
217
|
+
for (const item of items) {
|
|
218
|
+
if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
|
|
219
|
+
const groupChildren = item?.items ?? [];
|
|
220
|
+
const nestedItems = this.getNestedItems(groupChildren);
|
|
221
|
+
allItems.push(...nestedItems);
|
|
222
|
+
}
|
|
223
|
+
allItems.push(item);
|
|
224
|
+
}
|
|
225
|
+
return allItems;
|
|
226
|
+
}
|
|
227
|
+
|
|
223
228
|
private getDefaultItemStages(): ItemStages {
|
|
224
229
|
const timestamp = Date.now();
|
|
225
230
|
const { items, layoutId } = this;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<component name="InspectionProjectProfileManager">
|
|
2
|
-
<profile version="1.0">
|
|
3
|
-
<option name="myName" value="Project Default" />
|
|
4
|
-
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
|
|
5
|
-
<option name="myValues">
|
|
6
|
-
<value>
|
|
7
|
-
<list size="1">
|
|
8
|
-
<item index="0" class="java.lang.String" itemvalue="jsx" />
|
|
9
|
-
</list>
|
|
10
|
-
</value>
|
|
11
|
-
</option>
|
|
12
|
-
<option name="myCustomValuesEnabled" value="true" />
|
|
13
|
-
</inspection_tool>
|
|
14
|
-
</profile>
|
|
15
|
-
</component>
|