@cntrl-site/sdk-nextjs 1.9.14 → 1.9.16

package/lib/interactions/InteractionsRegistry.js

@@ -4,10 +4,12 @@ exports.InteractionsRegistry = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
 const isItemType_1 = require("../utils/isItemType");
 class InteractionsRegistry {
-    constructor(article, layoutId) {
+    constructor(article, layoutId, itemGeometryService) {
         var _a;
         this.ctrls = new Map();
+        this.itemScrollPositionAnimationMap = new Map();
         this.items = this.unpackItems(article);
+        this.itemGeometryService = itemGeometryService;
         const interactions = (_a = article.interactions[layoutId]) !== null && _a !== void 0 ? _a : [];
         const activeStatesIds = interactions.reduce((map, inter) => {
             var _a;
@@ -45,6 +47,7 @@ class InteractionsRegistry {
         this.interactionStateMap = interactionStateMap;
         const itemStages = this.getDefaultItemStages();
         this.itemsStages = itemStages;
+        this.itemScrollPositionAnimationMap = new Map();
     }
     register(itemId, ctrl) {
         this.ctrls.set(itemId, ctrl);
@@ -93,23 +96,62 @@ class InteractionsRegistry {
         for (const interaction of this.interactions) {
             const { triggers } = interaction;
             for (const trigger of triggers) {
-                if (!('itemId' in trigger))
+                if (!('triggerEvent' in trigger))
                     continue;
                 if (trigger.itemId !== itemId)
                     continue;
                 if (activeStates.includes(trigger.from)) {
-                    available.add(trigger.type);
+                    available.add(trigger.triggerEvent);
                 }
             }
         }
         return available;
     }
+    getTriggerPositionForItemScrollTrigger(trigger) {
+        const itemRect = this.itemGeometryService.getItemBoundary(trigger.itemId);
+        let triggerPosition = 0;
+        switch (trigger.screenPosition) {
+            case 'top':
+                triggerPosition = itemRect.top;
+                break;
+            case 'center':
+                triggerPosition = itemRect.top - window.innerHeight / 2;
+                break;
+            case 'bottom':
+                triggerPosition = itemRect.top - window.innerHeight;
+                break;
+            default:
+                triggerPosition = itemRect.top;
+                break;
+        }
+        switch (trigger.itemPosition) {
+            case 'top':
+                triggerPosition += 0;
+                break;
+            case 'center':
+                triggerPosition += itemRect.height / 2;
+                break;
+            case 'bottom':
+                triggerPosition += itemRect.height;
+                break;
+            default:
+                triggerPosition += 0;
+                break;
+        }
+        triggerPosition += trigger.offset;
+        return triggerPosition;
+    }
+    isItemScrollTriggerOnStartScreen(trigger) {
+        const triggerPosition = this.getTriggerPositionForItemScrollTrigger(trigger);
+        return triggerPosition < 0;
+    }
     notifyLoad() {
         var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find(trigger => 'position' in trigger && trigger.position === 0 && trigger.from === currentStateId);
+            const matchingTrigger = interaction.triggers.find(trigger => ('position' in trigger && trigger.position === 0 && trigger.from === currentStateId)
+                || (trigger.type === 'item-scroll-position' && this.items.find((item) => item.id === trigger.itemId) && trigger.from === currentStateId && this.isItemScrollTriggerOnStartScreen(trigger)));
             if (!matchingTrigger)
                 continue;
             const activeStateId = this.getActiveInteractionState(interaction.id);
@@ -147,6 +189,54 @@ class InteractionsRegistry {
             this.notifyTransitionStartForItems(transitioningItems, activeStateId);
         }
     }
+    scrollPositionNotifyScroll(trigger, position) {
+        if (trigger.position === 0)
+            return false;
+        const triggerPosition = trigger.position * window.innerWidth;
+        return triggerPosition < position;
+    }
+    scrollItemPositionNotifyScroll(trigger, position, interaction) {
+        let triggerPosition;
+        let isScrolledPastTrigger = false;
+        const itemRect = this.itemGeometryService.getItemBoundary(trigger.itemId);
+        if (!itemRect)
+            return false;
+        switch (trigger.screenPosition) {
+            case 'top':
+                triggerPosition = 0;
+                break;
+            case 'center':
+                triggerPosition = window.innerHeight / 2;
+                break;
+            case 'bottom':
+                triggerPosition = window.innerHeight;
+                break;
+            default:
+                triggerPosition = 0;
+                break;
+        }
+        triggerPosition -= trigger.offset;
+        switch (trigger.itemPosition) {
+            case 'top':
+                isScrolledPastTrigger = itemRect.y < triggerPosition;
+                break;
+            case 'center':
+                isScrolledPastTrigger = itemRect.y + itemRect.height / 2 < triggerPosition;
+                break;
+            case 'bottom':
+                isScrolledPastTrigger = itemRect.bottom < triggerPosition;
+                break;
+            default:
+                isScrolledPastTrigger = itemRect.y < triggerPosition;
+                break;
+        }
+        if (isScrolledPastTrigger && !this.itemScrollPositionAnimationMap.get(interaction.id)) {
+            this.itemScrollPositionAnimationMap.set(interaction.id, position + itemRect.y - triggerPosition);
+        }
+        if (this.itemScrollPositionAnimationMap.get(interaction.id) >= position)
+            isScrolledPastTrigger = false;
+        return isScrolledPastTrigger;
+    }
     notifyScroll(position) {
         var _a, _b, _c;
         const timestamp = Date.now();
@@ -154,19 +244,30 @@ class InteractionsRegistry {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
             const activeStateId = (_a = interaction.states.find((state) => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
             const matchingTrigger = interaction.triggers.find((trigger) => {
-                if (!('position' in trigger) || trigger.position === 0)
+                if (trigger.type !== 'scroll-position' && trigger.type !== 'item-scroll-position')
                     return false;
-                const triggerPosition = trigger.position * window.innerWidth;
-                const isScrolledPastTrigger = triggerPosition < position;
+                let isScrolledPastTrigger = false;
+                if (trigger.type === 'scroll-position') {
+                    isScrolledPastTrigger = this.scrollPositionNotifyScroll(trigger, position);
+                }
+                if (trigger.type === 'item-scroll-position') {
+                    isScrolledPastTrigger = this.scrollItemPositionNotifyScroll(trigger, position, interaction);
+                }
                 if (!isScrolledPastTrigger && !trigger.isReverse)
                     return false;
                 const stateId = isScrolledPastTrigger ? trigger.from : trigger.to;
                 return stateId === currentStateId;
             });
-            if (!matchingTrigger || !('position' in matchingTrigger) || !activeStateId)
+            if (!matchingTrigger || (matchingTrigger.type !== 'scroll-position' && matchingTrigger.type !== 'item-scroll-position') || !activeStateId)
                 continue;
-            const triggerPosition = matchingTrigger.position * window.innerWidth;
-            const isScrolledPastTrigger = triggerPosition < position;
+            let isScrolledPastTrigger = false;
+            if (matchingTrigger.type === 'scroll-position') {
+                const triggerPosition = matchingTrigger.position * window.innerWidth;
+                isScrolledPastTrigger = triggerPosition < position;
+            }
+            if (matchingTrigger.type === 'item-scroll-position') {
+                isScrolledPastTrigger = this.itemScrollPositionAnimationMap.get(interaction.id) < position; // scroll down
+            }
             const targetStateId = isScrolledPastTrigger ? matchingTrigger.to : matchingTrigger.from;
             this.setCurrentStateForInteraction(interaction.id, targetStateId);
             const transitioningItems = (_b = this.stateItemsIdsMap[activeStateId]) !== null && _b !== void 0 ? _b : [];
@@ -208,10 +309,10 @@ class InteractionsRegistry {
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
+            const matchingTrigger = interaction.triggers.find((trigger) => 'triggerEvent' in trigger
                 && trigger.itemId === itemId
                 && trigger.from === currentStateId
-                && trigger.type === triggerType);
+                && trigger.triggerEvent === triggerType);
             if (!matchingTrigger)
                 continue;
             const activeStateId = this.getActiveInteractionState(interaction.id);

package/lib/interactions/ItemInteractionCtrl.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemInteractionController = void 0;
 const getTransition_1 = require("./getTransition");
-const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+const CSSPropertyNameMap_1 = require("../ItemGeometry/CSSPropertyNameMap");
 class ItemInteractionController {
     constructor(itemId, registry, onChange) {
         this.itemId = itemId;

package/lib/interactions/getTransition.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTransition = void 0;
-const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+const CSSPropertyNameMap_1 = require("../ItemGeometry/CSSPropertyNameMap");
 function getTransition(state, keys) {
     if (Object.keys(state).length === 0)
         return 'none';

package/lib/provider/InteractionsContext.js

@@ -6,15 +6,17 @@ const react_1 = require("react");
 const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const ArticleRectContext_1 = require("./ArticleRectContext");
+const ItemGeometryContext_1 = require("../ItemGeometry/ItemGeometryContext");
 exports.InteractionsContext = (0, react_1.createContext)(undefined);
 const InteractionsProvider = ({ article, children }) => {
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
+    const itemGeometryService = (0, react_1.useContext)(ItemGeometryContext_1.ItemGeometryContext);
     const registry = (0, react_1.useMemo)(() => {
         if (!layoutId)
             return;
-        return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
-    }, [layoutId]);
+        return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId, itemGeometryService);
+    }, [layoutId, itemGeometryService]);
     (0, react_1.useEffect)(() => {
         if (!registry || !articleRectObserver)
             return;

package/lib/utils/CSSNumeric.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCSSNumber = exports.parseCSSNumber = void 0;
+const reCSSNumeric = /([+-]?(?:\d*\.\d|\d)\d*)(\w+)/;
+function parseCSSNumber(input) {
+    const match = reCSSNumeric.exec(input);
+    if (!match)
+        return { value: Number.NaN };
+    return {
+        value: Number.parseFloat(match[1]),
+        unit: match[2]
+    };
+}
+exports.parseCSSNumber = parseCSSNumber;
+function formatCSSNumber(input) {
+    var _a;
+    return `${input.value}${(_a = input.unit) !== null && _a !== void 0 ? _a : ''}`;
+}
+exports.formatCSSNumber = formatCSSNumber;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -76,18 +76,18 @@ class RichTextConverter {
                 for (const entity of entitiesGroups) {
                     const entityKids = [];
                     if (offset < entity.start) {
-                        kids.push(sliceSymbols(content, offset, entity.start));
+                        kids.push((0, jsx_runtime_1.jsx)("span", { children: sliceSymbols(content, offset, entity.start) }));
                         offset = entity.start;
                     }
                     for (const style of entity.stylesGroup) {
                         if (offset < style.start) {
-                            entityKids.push(sliceSymbols(content, offset, style.start));
+                            entityKids.push((0, jsx_runtime_1.jsx)("span", { children: sliceSymbols(content, offset, style.start) }));
                         }
                         entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: sliceSymbols(content, style.start, style.end) }, style.start));
                         offset = style.end;
                     }
                     if (offset < entity.end) {
-                        entityKids.push(sliceSymbols(content, offset, entity.end));
+                        entityKids.push((0, jsx_runtime_1.jsx)("span", { children: sliceSymbols(content, offset, entity.end) }));
                         offset = entity.end;
                     }
                     if (entity.link) {
@@ -97,7 +97,7 @@ class RichTextConverter {
                     kids.push(...entityKids);
                 }
                 if (offset < getSymbolsCount(content)) {
-                    kids.push(sliceSymbols(content, offset));
+                    kids.push((0, jsx_runtime_1.jsx)("span", { children: sliceSymbols(content, offset) }));
                 }
                 for (const item of group) {
                     const { exemplary } = layouts.find(l => l.id === item.layout);

package/lib/utils/domDfs.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.domDfs = void 0;
+function domDfs(root, visitor) {
+    const q = root;
+    for (let i = 0; i < q.length; i += 1) {
+        if (q[i].children.length > 0) {
+            q.push(...q[i].children);
+        }
+    }
+    for (let i = q.length - 1; i >= 0; i -= 1) {
+        visitor(q[i]);
+    }
+}
+exports.domDfs = domDfs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.14",
+  "version": "1.9.16",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/components": "^0.0.3",
     "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.25.0",
+    "@cntrl-site/sdk": "^1.25.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/ItemGeometry/GenericGeometryController.ts

@@ -0,0 +1,59 @@
+import { Rect } from '@cntrl-site/sdk';
+import { ItemGeometryController } from './ItemGeometryController';
+
+type GeomtryRegistry = {
+  getControllerById: (itemId: string) => ItemGeometryController;
+};
+
+export class GenericGeometryController implements ItemGeometryController {
+  private scale: number = 1;
+  private parentId?: string;
+  private offsetParent: HTMLElement | null = null;
+  private angle: number = 0;
+  private registry: GeomtryRegistry | undefined;
+
+  constructor(
+    private container: HTMLElement
+  ) { }
+
+  setRegistry(registry: GeomtryRegistry) {
+    this.registry = registry;
+  }
+
+  setParentId(parentId?: string) {
+    this.parentId = parentId;
+  }
+
+  getParentId(): string | undefined {
+    return this.parentId;
+  }
+
+  getBoundary(): Rect {
+    const rect = this.container.getBoundingClientRect();
+    return Rect.fromObject(rect);
+  }
+
+  getContentBoundary(): Rect {
+    return this.getBoundary();
+  }
+
+  setScale(scale: number): void {
+    this.scale = scale;
+  }
+
+  setAngle(angle: number) {
+    this.angle = angle;
+  }
+
+  setOptions(options?: unknown) {
+
+  }
+
+  getAngle(): number {
+    return 0;
+  }
+
+  getScale() {
+    return 1;
+  }
+}

package/src/ItemGeometry/ItemGeometryContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { ItemGeometryService } from "./ItemGeometryService";
+
+export const ItemGeometryContext = createContext(new ItemGeometryService());

package/src/ItemGeometry/ItemGeometryController.ts

@@ -0,0 +1,22 @@
+import { Rect } from '@cntrl-site/sdk';
+
+export interface GeometryControllerCtor {
+  new (element: HTMLElement): ItemGeometryController;
+}
+
+interface Registry {
+  getControllerById(itemId: string): ItemGeometryController;
+}
+
+export interface ItemGeometryController {
+  getBoundary(isRotatedBoundary?: boolean): Rect;
+  getContentBoundary(isRotatedBoundary?: boolean): Rect;
+  getScale(): number;
+  setScale(scale: number): void;
+  setAngle(angle: number): void;
+  setRegistry(regisrty: Registry): void;
+  setOptions(options?: unknown): void;
+  setParentId(parentId?: string): void;
+  getParentId(): string | undefined;
+  getAngle(): number;
+}

package/src/ItemGeometry/ItemGeometryService.ts

@@ -0,0 +1,34 @@
+import { Rect } from '@cntrl-site/sdk';
+import { ItemGeometryController } from './ItemGeometryController';
+
+export class ItemGeometryService {
+  private registry: Map<string, ItemGeometryController> = new Map();
+
+  register(itemId: string, controller: ItemGeometryController): () => void {
+    this.registry.set(itemId, controller);
+    controller.setRegistry(this);
+    return () => {
+      this.registry.delete(itemId);
+    };
+  }
+
+  getItemBoundary(itemId: string) {
+    const controller = this.registry.get(itemId);
+    if (!controller) {
+      return new Rect(0, 0, 0, 0);
+    }
+    return controller.getContentBoundary();
+  }
+
+  getControllerById(itemId: string): ItemGeometryController {
+    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: string): boolean {
+    return this.registry.has(itemId);
+  }
+}

package/src/ItemGeometry/RichTextGeometryController.ts

@@ -0,0 +1,166 @@
+import { measureFont, Rect } from '@cntrl-site/sdk';
+import { ItemGeometryController } from './ItemGeometryController';
+import { domDfs } from '../utils/domDfs';
+import { formatCSSNumber, parseCSSNumber } from '../utils/CSSNumeric';
+
+export enum SizingType {
+  Auto = 'auto',
+  Manual = 'manual',
+}
+
+interface RichTextGeometryOptions {
+  xSizing: SizingType;
+}
+
+type GeomtryRegistry = {
+  getControllerById: (itemId: string) => ItemGeometryController;
+};
+
+export class RichTextGeometryController implements ItemGeometryController {
+  private scale: number = 1;
+  private angle: number = 0;
+  private options!: RichTextGeometryOptions;
+  private parentId?: string;
+  private registry: GeomtryRegistry | undefined;
+  static parseCssValue(value: string) {
+    const parsedLs = Number.parseInt(value);
+    return Number.isNaN(parsedLs) ? 0 : parsedLs;
+  }
+
+  constructor(
+    private container: HTMLElement
+  ) { }
+
+  setRegistry(registry: GeomtryRegistry) {
+    this.registry = registry;
+  }
+
+  getBoundary(isRotatedBoundary?: boolean): Rect {
+    const rect = this.container.getBoundingClientRect();
+    if (isRotatedBoundary) {
+      return Rect.fromObject(rect);
+    }
+    const angle = this.getAngle();
+    if (angle === 0) return Rect.fromObject(rect);
+    const styles = getComputedStyle(this.container);
+    const ratio = Number.parseInt(styles.width) / Number.parseInt(styles.height);
+    return Rect.getOriginRectFromBoundary(rect, angle, ratio);
+  }
+
+  getContentGuides(): [boundary: Rect, xs: number[], ys: number[]] {
+    const boundary = this.getBoundary();
+    const contentXs: Set<number> = new Set();
+    const { xSizing } = this.options;
+    const contentYs: Set<number> = new Set();
+    domDfs(Array.from(this.container.children), (el) => {
+      if (el.children.length !== 0) return;
+      const rects = el.getClientRects();
+      const styles = window.getComputedStyle(el);
+      const ls = RichTextGeometryController.parseCssValue(styles.letterSpacing);
+      const metrics = measureFont(this.getFontStr(styles), el.textContent?.trim() ?? '');
+      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?: string) {
+    this.parentId = parentId;
+  }
+
+  getParentId(): string | undefined {
+    return this.parentId;
+  }
+
+  setScale(scale: number) {
+    this.scale = scale;
+  }
+
+  setAngle(angle: number) {
+    this.angle = angle;
+  }
+
+  getContentBoundary(): Rect {
+    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 Rect(
+      boundary.left + left,
+      boundary.top + top,
+      right - left,
+      bottom - top
+    );
+    return content;
+  }
+
+  private getFontStr(styles: CSSStyleDeclaration) {
+    const fontSize = parseCSSNumber(styles.fontSize);
+    const lineHeight = parseCSSNumber(styles.lineHeight);
+    const scaledFontSize = formatCSSNumber({
+      value: fontSize.value * this.getScale(),
+      unit: fontSize.unit
+    });
+    const scaledLineHeight = formatCSSNumber({
+      value: lineHeight.value * this.getScale(),
+      unit: lineHeight.unit
+    });
+    return `${scaledFontSize} / ${scaledLineHeight} ${styles.fontFamily}`;
+  }
+
+  setOptions(options?: RichTextGeometryOptions) {
+    if (!options) return;
+    this.options = options;
+  }
+
+  getAngle(): number {
+    return this.angle + this.getParentAngle();
+  }
+
+  getScale() {
+    return this.scale * this.getParentScale();
+  }
+
+  private getParentAngle() {
+    if (!this.registry || !this.parentId) return 0;
+    const parentController = this.registry.getControllerById(this.parentId);
+    return parentController.getAngle();
+  }
+
+  getParentScale(): number {
+    if (!this.registry || !this.parentId) return 1;
+    const parentController = this.registry.getControllerById(this.parentId);
+    return parentController.getScale();
+  }
+}

package/src/ItemGeometry/useItemGeometry.ts

@@ -0,0 +1,25 @@
+import { useContext, useEffect, useMemo } from 'react';
+import { GenericGeometryController } from './GenericGeometryController';
+import { GeometryControllerCtor } from './ItemGeometryController';
+import { ItemGeometryContext } from './ItemGeometryContext';
+
+export function useItemGeometry<T extends GeometryControllerCtor = typeof GenericGeometryController>(
+  itemId: string,
+  element?: HTMLElement | null,
+  // @ts-ignore
+  controllerCtor: T = GenericGeometryController,
+  options?: any
+): InstanceType<T> | undefined {
+  const itemGeometryService = useContext(ItemGeometryContext);
+  const controller = useMemo(() => {
+    if (!element) return undefined;
+    return new controllerCtor(element);
+  }, [element, controllerCtor]);
+  useEffect(() => {
+    if (!controller) return;
+    controller.setOptions(options);
+    return itemGeometryService.register(itemId, controller);
+  }, [itemGeometryService, itemId, controller]);
+  // @ts-ignore
+  return controller;
+}

package/src/components/Page.tsx

@@ -5,6 +5,8 @@ import { Article } from './Article';
 import { KeyframesContext } from '../provider/KeyframesContext';
 import { CNTRLHead } from './Head';
 import { Keyframes } from '../provider/Keyframes';
+import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
+import { ItemGeometryService } from '../ItemGeometry/ItemGeometryService';
 
 export interface PageProps {
   article: TArticle;
@@ -18,13 +20,16 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes, section
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
   const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
+  const itemGeometryService = useMemo(() => new ItemGeometryService(), []);
   return (
     <>
       <CNTRLHead project={project} meta={meta} />
       {afterBodyOpen}
-      <KeyframesContext.Provider value={keyframesRepo}>
-        <Article article={article} sectionData={sectionData} />
-      </KeyframesContext.Provider>
+      <ItemGeometryContext.Provider value={itemGeometryService}>
+        <KeyframesContext.Provider value={keyframesRepo}>
+          <Article article={article} sectionData={sectionData} />
+        </KeyframesContext.Provider>
+      </ItemGeometryContext.Provider>
       {beforeBodyClose}
     </>
   );