@cntrl-site/sdk-nextjs 1.9.77 → 1.9.79

package/src/ItemGeometry/RichTextGeometryController.ts

@@ -1,166 +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();
-  }
-}
+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

@@ -1,25 +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;
-}
+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/common/useCurrentLayout.ts

@@ -1,52 +1,52 @@
-import { useCntrlContext } from '../provider/useCntrlContext';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-
-interface LayoutData {
-  layoutId: string;
-  exemplary: number;
-  start: number;
-  end: number;
-}
-
-type UseCurrentLayoutReturn = {
-  layoutId: string | undefined;
-  layoutDeviation: number;
-};
-
-export function useCurrentLayout(): UseCurrentLayoutReturn {
-  const { layouts } = useCntrlContext();
-  const articleRectObserver = useContext(ArticleRectContext);
-  const layoutRanges = useMemo(() => {
-    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
-    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
-      const next = layouts[i + 1];
-      return [
-        ...acc,
-        {
-          layoutId: layout.id,
-          exemplary: layout.exemplary,
-          start: layout.startsWith,
-          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
-        }
-      ];
-    }, []);
-  }, [layouts]);
-  const getCurrentLayout = useCallback((articleWidth: number) => {
-    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
-    return range;
-  }, [layoutRanges]);
-  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
-  const [deviation, setDeviation] = useState(1);
-  useEffect(() => {
-    if (!articleRectObserver) return;
-    return articleRectObserver.on('resize', () => {
-      const articleWidth = articleRectObserver.width;
-      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
-      setLayoutId(layoutId);
-      setDeviation(articleWidth / exemplary);
-    });
-  }, [articleRectObserver, getCurrentLayout]);
-
-  return { layoutId, layoutDeviation: deviation };
-}
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+
+interface LayoutData {
+  layoutId: string;
+  exemplary: number;
+  start: number;
+  end: number;
+}
+
+type UseCurrentLayoutReturn = {
+  layoutId: string | undefined;
+  layoutDeviation: number;
+};
+
+export function useCurrentLayout(): UseCurrentLayoutReturn {
+  const { layouts } = useCntrlContext();
+  const articleRectObserver = useContext(ArticleRectContext);
+  const layoutRanges = useMemo(() => {
+    const sorted = layouts.slice().sort((la, lb) => la.startsWith - lb.startsWith);
+    return sorted.reduce<LayoutData[]>((acc, layout, i, layouts) => {
+      const next = layouts[i + 1];
+      return [
+        ...acc,
+        {
+          layoutId: layout.id,
+          exemplary: layout.exemplary,
+          start: layout.startsWith,
+          end: next ? next.startsWith : Number.MAX_SAFE_INTEGER
+        }
+      ];
+    }, []);
+  }, [layouts]);
+  const getCurrentLayout = useCallback((articleWidth: number) => {
+    const range = layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end);
+    return range;
+  }, [layoutRanges]);
+  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
+  const [deviation, setDeviation] = useState(1);
+  useEffect(() => {
+    if (!articleRectObserver) return;
+    return articleRectObserver.on('resize', () => {
+      const articleWidth = articleRectObserver.width;
+      const { layoutId, exemplary } = getCurrentLayout(articleWidth)!;
+      setLayoutId(layoutId);
+      setDeviation(articleWidth / exemplary);
+    });
+  }, [articleRectObserver, getCurrentLayout]);
+
+  return { layoutId, layoutDeviation: deviation };
+}

package/src/common/useExemplary.ts

@@ -1,9 +1,9 @@
-import { useCntrlContext } from "../provider/useCntrlContext";
-import { useLayoutContext } from "../components/useLayoutContext";
-
-export const useExemplary = () => {
-  const { layouts } = useCntrlContext();
-  const layout = useLayoutContext();
-  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
-  return exemplary;
-};
+import { useCntrlContext } from "../provider/useCntrlContext";
+import { useLayoutContext } from "../components/useLayoutContext";
+
+export const useExemplary = () => {
+  const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
+  const exemplary = layouts.find(l => l.id === layout)?.exemplary ?? 1;
+  return exemplary;
+};

package/src/common/useItemFXData.ts

@@ -1,63 +1,63 @@
-import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from './useKeyframeValue';
-import { useMemo } from 'react';
-
-const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform vec2 u_imgDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
-varying vec2 v_texCoord;`;
-
-export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
-  const { fragmentShader: shaderBody, FXControls, FXTextures } = item.commonParams;
-  const controls = FXControls ?? [];
-  const texturesUrls: string[] = useMemo(() => (FXTextures ?? []), [FXTextures]);
-  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-    .join('\n');
-  const patternsVariables = texturesUrls
-    .map((_, i) => `uniform sampler2D ${mediaEffectPatternUniformNames(i).tex};\nuniform vec2 ${mediaEffectPatternUniformNames(i).dim};`)
-    .join('\n');
-  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${patternsVariables}\n${shaderBody}`;
-  const controlsValues = useKeyframeValue(
-    item,
-    KeyframeType.FXParams,
-    () => {
-      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
-        if (Array.isArray(control.value)) {
-          acc[control.shaderParam] = control.value[0];
-        } else {
-          acc[control.shaderParam] = control.value;
-        }
-        return acc;
-      }, {});
-      return defaultValue;
-    },
-    (animator, scroll, value) => animator.getFXParams(value, scroll),
-    sectionId,
-  );
-  return {
-    fragmentShader,
-    controlsValues,
-    texturesUrls
-  };
-}
-
-function mediaEffectPatternUniformNames(slotIndex: number): {
-  tex: string;
-  dim: string;
-} {
-  if (slotIndex === 0) {
-    return { tex: 'u_pattern', dim: 'u_patternDimensions' };
-  }
-  const n = slotIndex + 1;
-  return { tex: `u_pattern${n}`, dim: `u_pattern${n}Dimensions` };
-}
-
-type FXData = {
-  fragmentShader: string;
-  controlsValues: Record<string, ControlValue>;
-  texturesUrls: string[];
-}
-
-type ControlValue = number;
+import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from './useKeyframeValue';
+import { useMemo } from 'react';
+
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform vec2 u_imgDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+
+export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
+  const { fragmentShader: shaderBody, FXControls, FXTextures } = item.commonParams;
+  const controls = FXControls ?? [];
+  const texturesUrls: string[] = useMemo(() => (FXTextures ?? []), [FXTextures]);
+  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+    .join('\n');
+  const patternsVariables = texturesUrls
+    .map((_, i) => `uniform sampler2D ${mediaEffectPatternUniformNames(i).tex};\nuniform vec2 ${mediaEffectPatternUniformNames(i).dim};`)
+    .join('\n');
+  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${patternsVariables}\n${shaderBody}`;
+  const controlsValues = useKeyframeValue(
+    item,
+    KeyframeType.FXParams,
+    () => {
+      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
+        if (Array.isArray(control.value)) {
+          acc[control.shaderParam] = control.value[0];
+        } else {
+          acc[control.shaderParam] = control.value;
+        }
+        return acc;
+      }, {});
+      return defaultValue;
+    },
+    (animator, scroll, value) => animator.getFXParams(value, scroll),
+    sectionId,
+  );
+  return {
+    fragmentShader,
+    controlsValues,
+    texturesUrls
+  };
+}
+
+function mediaEffectPatternUniformNames(slotIndex: number): {
+  tex: string;
+  dim: string;
+} {
+  if (slotIndex === 0) {
+    return { tex: 'u_pattern', dim: 'u_patternDimensions' };
+  }
+  const n = slotIndex + 1;
+  return { tex: `u_pattern${n}`, dim: `u_pattern${n}Dimensions` };
+}
+
+type FXData = {
+  fragmentShader: string;
+  controlsValues: Record<string, ControlValue>;
+  texturesUrls: string[];
+}
+
+type ControlValue = number;