@cntrl-site/sdk-nextjs 1.9.14 → 1.9.16

package/lib/ItemGeometry/GenericGeometryController.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericGeometryController = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+class GenericGeometryController {
+    constructor(container) {
+        this.container = container;
+        this.scale = 1;
+        this.offsetParent = null;
+        this.angle = 0;
+    }
+    setRegistry(registry) {
+        this.registry = registry;
+    }
+    setParentId(parentId) {
+        this.parentId = parentId;
+    }
+    getParentId() {
+        return this.parentId;
+    }
+    getBoundary() {
+        const rect = this.container.getBoundingClientRect();
+        return sdk_1.Rect.fromObject(rect);
+    }
+    getContentBoundary() {
+        return this.getBoundary();
+    }
+    setScale(scale) {
+        this.scale = scale;
+    }
+    setAngle(angle) {
+        this.angle = angle;
+    }
+    setOptions(options) {
+    }
+    getAngle() {
+        return 0;
+    }
+    getScale() {
+        return 1;
+    }
+}
+exports.GenericGeometryController = GenericGeometryController;

package/lib/ItemGeometry/ItemGeometryContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemGeometryContext = void 0;
+const react_1 = require("react");
+const ItemGeometryService_1 = require("./ItemGeometryService");
+exports.ItemGeometryContext = (0, react_1.createContext)(new ItemGeometryService_1.ItemGeometryService());

package/lib/ItemGeometry/ItemGeometryController.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ItemGeometry/ItemGeometryService.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemGeometryService = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+class ItemGeometryService {
+    constructor() {
+        this.registry = new Map();
+    }
+    register(itemId, controller) {
+        this.registry.set(itemId, controller);
+        controller.setRegistry(this);
+        return () => {
+            this.registry.delete(itemId);
+        };
+    }
+    getItemBoundary(itemId) {
+        const controller = this.registry.get(itemId);
+        if (!controller) {
+            return new sdk_1.Rect(0, 0, 0, 0);
+        }
+        return controller.getContentBoundary();
+    }
+    getControllerById(itemId) {
+        const controller = this.registry.get(itemId);
+        if (!controller) {
+            throw new ReferenceError(`There is no registred contoller for item w/ id ${itemId}`);
+        }
+        return controller;
+    }
+    hasItem(itemId) {
+        return this.registry.has(itemId);
+    }
+}
+exports.ItemGeometryService = ItemGeometryService;

package/lib/ItemGeometry/RichTextGeometryController.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextGeometryController = exports.SizingType = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const domDfs_1 = require("../utils/domDfs");
+const CSSNumeric_1 = require("../utils/CSSNumeric");
+var SizingType;
+(function (SizingType) {
+    SizingType["Auto"] = "auto";
+    SizingType["Manual"] = "manual";
+})(SizingType || (exports.SizingType = SizingType = {}));
+class RichTextGeometryController {
+    static parseCssValue(value) {
+        const parsedLs = Number.parseInt(value);
+        return Number.isNaN(parsedLs) ? 0 : parsedLs;
+    }
+    constructor(container) {
+        this.container = container;
+        this.scale = 1;
+        this.angle = 0;
+    }
+    setRegistry(registry) {
+        this.registry = registry;
+    }
+    getBoundary(isRotatedBoundary) {
+        const rect = this.container.getBoundingClientRect();
+        if (isRotatedBoundary) {
+            return sdk_1.Rect.fromObject(rect);
+        }
+        const angle = this.getAngle();
+        if (angle === 0)
+            return sdk_1.Rect.fromObject(rect);
+        const styles = getComputedStyle(this.container);
+        const ratio = Number.parseInt(styles.width) / Number.parseInt(styles.height);
+        return sdk_1.Rect.getOriginRectFromBoundary(rect, angle, ratio);
+    }
+    getContentGuides() {
+        const boundary = this.getBoundary();
+        const contentXs = new Set();
+        const { xSizing } = this.options;
+        const contentYs = new Set();
+        (0, domDfs_1.domDfs)(Array.from(this.container.children), (el) => {
+            var _a, _b;
+            if (el.children.length !== 0)
+                return;
+            const rects = el.getClientRects();
+            const styles = window.getComputedStyle(el);
+            const ls = RichTextGeometryController.parseCssValue(styles.letterSpacing);
+            const metrics = (0, sdk_1.measureFont)(this.getFontStr(styles), (_b = (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '');
+            const { capHeight, baseline, fontBoxHeight, xHeight, leftMargin, rightMargin } = metrics;
+            for (let i = 0; i <= rects.length - 1; i += 1) {
+                const rect = rects[i];
+                const halfLead = (rect.height - fontBoxHeight) / 2;
+                contentXs.add(rect.left + leftMargin - boundary.left);
+                contentXs.add(rect.right - rightMargin - ls - boundary.left);
+                contentYs.add(rect.top + halfLead + baseline - boundary.top); // baseline
+                if (i === 0) {
+                    contentYs.add(rect.top + halfLead + baseline - capHeight - boundary.top); // cap height
+                }
+                if (rects.length === 1) {
+                    contentYs.add(rect.top + halfLead + baseline - xHeight - boundary.top); // x-height
+                }
+            }
+        });
+        const left = xSizing === SizingType.Auto ? Math.min(...contentXs.values()) : 0;
+        const right = xSizing === SizingType.Auto ? Math.max(...contentXs.values()) : boundary.width;
+        const center = left + (right - left) / 2;
+        return [
+            boundary,
+            [left, center, right],
+            [...Array.from(contentYs.values(), y => y)]
+        ];
+    }
+    setParentId(parentId) {
+        this.parentId = parentId;
+    }
+    getParentId() {
+        return this.parentId;
+    }
+    setScale(scale) {
+        this.scale = scale;
+    }
+    setAngle(angle) {
+        this.angle = angle;
+    }
+    getContentBoundary() {
+        if (this.getAngle() !== 0) {
+            return this.getBoundary(true);
+        }
+        const [boundary, xs, ys] = this.getContentGuides();
+        const left = Math.min(...xs);
+        const right = Math.max(...xs);
+        const top = Math.min(...ys);
+        const bottom = Math.max(...ys);
+        const content = new sdk_1.Rect(boundary.left + left, boundary.top + top, right - left, bottom - top);
+        return content;
+    }
+    getFontStr(styles) {
+        const fontSize = (0, CSSNumeric_1.parseCSSNumber)(styles.fontSize);
+        const lineHeight = (0, CSSNumeric_1.parseCSSNumber)(styles.lineHeight);
+        const scaledFontSize = (0, CSSNumeric_1.formatCSSNumber)({
+            value: fontSize.value * this.getScale(),
+            unit: fontSize.unit
+        });
+        const scaledLineHeight = (0, CSSNumeric_1.formatCSSNumber)({
+            value: lineHeight.value * this.getScale(),
+            unit: lineHeight.unit
+        });
+        return `${scaledFontSize} / ${scaledLineHeight} ${styles.fontFamily}`;
+    }
+    setOptions(options) {
+        if (!options)
+            return;
+        this.options = options;
+    }
+    getAngle() {
+        return this.angle + this.getParentAngle();
+    }
+    getScale() {
+        return this.scale * this.getParentScale();
+    }
+    getParentAngle() {
+        if (!this.registry || !this.parentId)
+            return 0;
+        const parentController = this.registry.getControllerById(this.parentId);
+        return parentController.getAngle();
+    }
+    getParentScale() {
+        if (!this.registry || !this.parentId)
+            return 1;
+        const parentController = this.registry.getControllerById(this.parentId);
+        return parentController.getScale();
+    }
+}
+exports.RichTextGeometryController = RichTextGeometryController;

package/lib/ItemGeometry/useItemGeometry.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemGeometry = void 0;
+const react_1 = require("react");
+const GenericGeometryController_1 = require("./GenericGeometryController");
+const ItemGeometryContext_1 = require("./ItemGeometryContext");
+function useItemGeometry(itemId, element, 
+// @ts-ignore
+controllerCtor = GenericGeometryController_1.GenericGeometryController, options) {
+    const itemGeometryService = (0, react_1.useContext)(ItemGeometryContext_1.ItemGeometryContext);
+    const controller = (0, react_1.useMemo)(() => {
+        if (!element)
+            return undefined;
+        return new controllerCtor(element);
+    }, [element, controllerCtor]);
+    (0, react_1.useEffect)(() => {
+        if (!controller)
+            return;
+        controller.setOptions(options);
+        return itemGeometryService.register(itemId, controller);
+    }, [itemGeometryService, itemId, controller]);
+    // @ts-ignore
+    return controller;
+}
+exports.useItemGeometry = useItemGeometry;

package/lib/components/Page.js

@@ -11,10 +11,13 @@ const Article_1 = require("./Article");
 const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Head_1 = require("./Head");
 const Keyframes_1 = require("../provider/Keyframes");
+const ItemGeometryContext_1 = require("../ItemGeometry/ItemGeometryContext");
+const ItemGeometryService_1 = require("../ItemGeometry/ItemGeometryService");
 const Page = ({ article, project, meta, keyframes, sectionData }) => {
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }), beforeBodyClose] }));
+    const itemGeometryService = (0, react_1.useMemo)(() => new ItemGeometryService_1.ItemGeometryService(), []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(ItemGeometryContext_1.ItemGeometryContext.Provider, { value: itemGeometryService, children: (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }) }), beforeBodyClose] }));
 };
 exports.Page = Page;

package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -13,6 +13,7 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useCodeEmbedItem_1 = require("./useCodeEmbedItem");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const stylesMap = {
     [sdk_1.AreaAnchor.TopLeft]: {},
     [sdk_1.AreaAnchor.TopCenter]: { justifyContent: 'center' },
@@ -36,6 +37,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const html = decodeBase64(item.commonParams.html);
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const pos = stylesMap[anchor];
     const layoutValues = [item.area, item.layoutParams];
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -14,6 +14,7 @@ const useItemAngle_1 = require("../useItemAngle");
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useLayoutContext_1 = require("../../useLayoutContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     var _a, _b, _c, _d;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
@@ -25,6 +26,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     const { opacity: itemOpacity, blur: itemBlur } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);

package/lib/components/items/CompoundItem/CompoundItem.js

@@ -15,16 +15,21 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const CompoundChild_1 = require("./CompoundChild");
 const useCompoundItem_1 = require("./useCompoundItem");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const ItemGeometryContext_1 = require("../../../ItemGeometry/ItemGeometryContext");
 const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
     const id = (0, react_1.useId)();
     const { items } = item;
+    const itemIds = items ? items.map(item => item.id) : [];
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { opacity: itemOpacity } = (0, useCompoundItem_1.useCompoundItem)(item, sectionId);
     const layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
+    const itemGeometryService = (0, react_1.useContext)(ItemGeometryContext_1.ItemGeometryContext);
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
@@ -32,6 +37,18 @@ const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
+    (0, react_1.useEffect)(() => {
+        // because on first render controllers not yet initialized
+        setTimeout(() => {
+            for (const id of itemIds) {
+                const hasItem = itemGeometryService.hasItem(id);
+                if (hasItem) {
+                    const cntrl = itemGeometryService.getControllerById(id);
+                    cntrl.setParentId(item.id);
+                }
+            }
+        }, 0);
+    }, [itemIds, item.id]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `compound-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .compound-${item.id} {
           overflow: ${item.commonParams.overflow};

package/lib/components/items/CustomItem/CustomItem.js

@@ -11,6 +11,7 @@ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useItemAngle_1 = require("../useItemAngle");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
     var _a, _b, _c;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
@@ -20,6 +21,7 @@ const CustomItem = ({ item, onResize, sectionId, interactionCtrl }) => {
     const layoutValues = [item.area];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle']);
     const angle = (_b = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : itemAngle;
     if (!component)

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -25,6 +25,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const useEmbedVideoItem_1 = require("./useEmbedVideoItem");
 const LinkWrapper_1 = require("../LinkWrapper");
 const useLayoutContext_1 = require("../../useLayoutContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
@@ -47,6 +48,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.styles) === null || _c === void 0 ? void 0 : _c.opacity, itemOpacity);
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_d = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.styles) === null || _d === void 0 ? void 0 : _d.radius, itemRadius);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const validUrl = (0, react_1.useMemo)(() => {
         if (!layoutParams)
             return url;

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -17,6 +17,7 @@ const useYouTubeIframeApi_1 = require("../../../utils/Youtube/useYouTubeIframeAp
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useLayoutContext_1 = require("../../useLayoutContext");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const id = (0, react_1.useId)();
@@ -43,6 +44,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
     (0, useRegisterResize_1.useRegisterResize)(div, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, div);
     (0, react_1.useEffect)(() => {
         const newUrl = new URL(url);
         const videoId = (0, getValidYoutubeUrl_1.getYoutubeId)(newUrl);

package/lib/components/items/FileItem/ImageItem.js

@@ -19,6 +19,7 @@ const useLayoutContext_1 = require("../../useLayoutContext");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const id = (0, react_1.useId)();
@@ -28,6 +29,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, wrapperRef);
     const { url, hasGLEffect } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);

package/lib/components/items/FileItem/VideoItem.js

@@ -20,6 +20,7 @@ const useVideoFx_1 = require("../../../utils/effects/useVideoFx");
 const useElementRect_1 = require("../../../utils/useElementRect");
 const useItemFXData_1 = require("../../../common/useItemFXData");
 const getFill_1 = require("../../../utils/getFill");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const id = (0, react_1.useId)();
@@ -68,6 +69,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
         controls: controlsValues
     }, width, height);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const inlineStyles = Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? {
         borderWidth: `${strokeWidth * 100}vw`,
         borderColor: stroke,

package/lib/components/items/GroupItem/GroupItem.js

@@ -16,16 +16,21 @@ const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const CompoundChild_1 = require("../CompoundItem/CompoundChild");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const ItemGeometryContext_1 = require("../../../ItemGeometry/ItemGeometryContext");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
     var _a, _b, _c, _d, _e, _f;
     const id = (0, react_1.useId)();
     const { items } = item;
+    const itemIds = items ? items.map(item => item.id) : [];
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { opacity: itemOpacity, blur: itemBlur } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
     const layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
+    const itemGeometryService = (0, react_1.useContext)(ItemGeometryContext_1.ItemGeometryContext);
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
@@ -34,6 +39,18 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
+    (0, react_1.useEffect)(() => {
+        // because on first render controllers not yet initialized
+        setTimeout(() => {
+            for (const id of itemIds) {
+                const hasItem = itemGeometryService.hasItem(id);
+                if (hasItem) {
+                    const cntrl = itemGeometryService.getControllerById(id);
+                    cntrl.setParentId(item.id);
+                }
+            }
+        }, 0);
+    }, [itemIds, item.id]);
     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', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), 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: `
         .group-${item.id} {
           position: absolute;

package/lib/components/items/Item.js

@@ -28,6 +28,7 @@ const useSizing_1 = require("./useSizing");
 const useItemPointerEvents_1 = require("./useItemPointerEvents");
 const useItemArea_1 = require("./useItemArea");
 const useDraggable_1 = require("./useDraggable");
+const ItemGeometryContext_1 = require("../../ItemGeometry/ItemGeometryContext");
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
@@ -54,6 +55,13 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const [isDraggingActive, setIsDraggingActive] = (0, react_1.useState)(false);
     const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left']);
     const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale']);
+    const geometryService = (0, react_1.useContext)(ItemGeometryContext_1.ItemGeometryContext);
+    const triggerZone = geometryService.getItemBoundary(item.id);
+    const hasItem = geometryService.hasItem(item.id);
+    const geometryController = (0, react_1.useMemo)(() => hasItem ? geometryService.getControllerById(item.id) : undefined, [hasItem]);
+    if (geometryController) {
+        geometryController.setScale(itemScale);
+    }
     const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
         top: (_b = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _b === void 0 ? void 0 : _b.top,
         left: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.left,

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -17,6 +17,7 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const getFill_1 = require("../../../utils/getFill");
 const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const id = (0, react_1.useId)();
@@ -31,6 +32,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    (0, useItemGeometry_1.useItemGeometry)(item.id, ref);
     const backdropBlur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.backdropBlur, itemBackdropBlur);
     const radius = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.radius, itemRadius);
     const strokeWidth = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.strokeWidth, itemStrokeWidth);

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -18,17 +18,21 @@ const useExemplary_1 = require("../../../common/useExemplary");
 const useItemAngle_1 = require("../useItemAngle");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useCurrentLayout_1 = require("../../../common/useCurrentLayout");
+const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
+const RichTextGeometryController_1 = require("../../../ItemGeometry/RichTextGeometryController");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight, xSizing } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     const layoutValues = [item.area, item.layoutParams];
     const exemplary = (0, useExemplary_1.useExemplary)();
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
+    const geometry = (0, useItemGeometry_1.useItemGeometry)(item.id, ref, RichTextGeometryController_1.RichTextGeometryController, { xSizing });
+    geometry === null || geometry === void 0 ? void 0 : geometry.setAngle(itemAngle);
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color']);
     const stateStyles = (_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) !== null && _a !== void 0 ? _a : {};
     const transition = (_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _b !== void 0 ? _b : 'none';

package/lib/components/items/useRichTextItemValues.js

@@ -33,6 +33,7 @@ const useRichTextItemValues = (item, sectionId) => {
     }, (animator, scroll, value) => value ? animator.getTextColor({ color: value }, scroll).color : undefined, sectionId, [layoutId]);
     const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
     const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
-    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
+    const xSizing = layoutId ? item.layoutParams[layoutId].sizing : undefined;
+    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing };
 };
 exports.useRichTextItemValues = useRichTextItemValues;