@cntrl-site/sdk 1.25.1-0 → 1.25.1-2

package/lib/Rect/Rect.d.ts

@@ -0,0 +1,34 @@
+import { Left, RectCoordinates, RectObject, ScaleOrigin, Sides, Top } from "../types/article/Rect";
+export declare class Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    static fromObject({ x, y, width, height }: RectObject): Rect;
+    static intersection(rect1: Rect, rect2: Rect): Rect;
+    static isSideBySide(rect1: Rect, rect2: Rect): boolean;
+    static isContained(rect1: Rect, rect2: Rect): boolean;
+    static isEqual(rect1: Rect, rect2: Rect): boolean;
+    static scale(rect: Rect, factor: number, origin: ScaleOrigin): Rect;
+    static scaleWithOrigin(rect: Rect, factor: number, kt: number, kl: number): Rect;
+    static getChildScaleOrigin(parentRect: Rect, childRect: Rect, parentOrigin: ScaleOrigin): Sides;
+    static getUnrotatedChildRect(parentRect: Rect, childRect: Rect, rotationAngle: number): Rect;
+    static getRotatedRectCoordinates(originalRect: Rect, newRect: Rect, angle: number): RectCoordinates;
+    static getUnRotatedPosition(coords: RectCoordinates, angle: number): [Top, Left];
+    static getOriginRectFromBoundary: (boundary: DOMRect, angle: number, ratio: number) => Rect;
+    static getRotatedBoundingBox(boundary: Rect, angle: number): Rect;
+    static getRelativeRect(src: Rect, origin: Rect): Rect;
+    static getDefault(): Rect;
+    static getHorizontallyIntersectingRects(selectedRect: Rect, unselectedRects: Rect[]): Rect[];
+    static getVerticallyIntersectingRects(selectedRect: Rect, unselectedRects: Rect[]): Rect[];
+    static roundRect(rect: Rect): Rect;
+    static roundRects(rects: Rect[]): Rect[];
+    constructor(x: number, y: number, width: number, height: number);
+    get left(): number;
+    get top(): number;
+    get right(): number;
+    get bottom(): number;
+    getScaled(xRatio: number, yRatio?: number): Rect;
+    getRelative(source: Rect): Rect;
+    private static getNewPosition;
+}

package/lib/Rect/Rect.js

@@ -0,0 +1,207 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rect = void 0;
+const Rect_1 = require("../types/article/Rect");
+class Rect {
+    static fromObject({ x, y, width, height }) {
+        return new _a(x, y, width, height);
+    }
+    static intersection(rect1, rect2) {
+        const left = Math.max(rect1.left, rect2.left);
+        const top = Math.max(rect1.top, rect2.top);
+        const width = Math.min(rect1.right, rect2.right) - left;
+        const height = Math.min(rect1.bottom, rect2.bottom) - top;
+        return new _a(left, top, Math.max(width, 0), Math.max(height, 0));
+    }
+    static isSideBySide(rect1, rect2) {
+        return Math.round(rect1.left) === Math.round(rect2.left)
+            || Math.round(rect1.top) === Math.round(rect2.top)
+            || Math.round(rect1.right) === Math.round(rect2.right)
+            || Math.round(rect1.bottom) === Math.round(rect2.bottom);
+    }
+    static isContained(rect1, rect2) {
+        return rect1.left <= rect2.left && rect1.top <= rect2.top && rect1.right >= rect2.right && rect1.bottom >= rect2.bottom;
+    }
+    static isEqual(rect1, rect2) {
+        return Math.round(rect1.left) === Math.round(rect2.left)
+            && Math.round(rect1.top) === Math.round(rect2.top)
+            && Math.round(rect1.right) === Math.round(rect2.right)
+            && Math.round(rect1.bottom) === Math.round(rect2.bottom);
+    }
+    static scale(rect, factor, origin) {
+        const width = rect.width * factor;
+        const height = rect.height * factor;
+        const dw = rect.width - width;
+        const dh = rect.height - height;
+        const [kt, kl] = Rect_1.scaleMatrix[origin];
+        const x = rect.left + (kl * dw);
+        const y = rect.top + (kt * dh);
+        return new _a(x, y, width, height);
+    }
+    static scaleWithOrigin(rect, factor, kt, kl) {
+        const width = rect.width * factor;
+        const height = rect.height * factor;
+        const dw = rect.width - width;
+        const dh = rect.height - height;
+        const x = rect.left + (kl * dw);
+        const y = rect.top + (kt * dh);
+        return new _a(x, y, width, height);
+    }
+    static getChildScaleOrigin(parentRect, childRect, parentOrigin) {
+        if (childRect.width === 0 || childRect.height === 0 || parentRect.width === 0 || parentRect.height === 0) {
+            return [0, 0]; // Default or fallback value
+        }
+        const [kt, kl] = Rect_1.scaleMatrix[parentOrigin];
+        const dw = childRect.width / parentRect.width;
+        const dh = childRect.height / parentRect.height;
+        const clNormalized = childRect.left / childRect.width;
+        const ctNormalized = childRect.top / childRect.height;
+        const pw = 1 / dw;
+        const ph = 1 / dh;
+        const pl = kl * pw;
+        const pt = kt * ph;
+        const originLeft = pl - clNormalized;
+        const originTop = pt - ctNormalized;
+        return [originTop, originLeft];
+    }
+    static getUnrotatedChildRect(parentRect, childRect, rotationAngle) {
+        const radians = -1 * rotationAngle * (Math.PI / 180);
+        const parentCenterX = parentRect.left + parentRect.width / 2;
+        const parentCenterY = parentRect.top + parentRect.height / 2;
+        const relativeX = childRect.left + childRect.width / 2 - parentCenterX;
+        const relativeY = childRect.top + childRect.height / 2 - parentCenterY;
+        const unrotatedX = relativeX * Math.cos(radians) - relativeY * Math.sin(radians);
+        const unrotatedY = relativeX * Math.sin(radians) + relativeY * Math.cos(radians);
+        const finalX = unrotatedX + parentCenterX;
+        const finalY = unrotatedY + parentCenterY;
+        const unrotatedWidth = childRect.width;
+        const unrotatedHeight = childRect.height;
+        return new _a(finalX - unrotatedWidth / 2, finalY - unrotatedHeight / 2, unrotatedWidth, unrotatedHeight);
+    }
+    static getRotatedRectCoordinates(originalRect, newRect, angle) {
+        if (angle === 0)
+            return [newRect.left, newRect.top, newRect.right, newRect.bottom];
+        const radians = (Math.PI * angle) / 180;
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        const centerX = originalRect.left + originalRect.width / 2;
+        const centerY = originalRect.top + originalRect.height / 2;
+        const { left, top, right, bottom } = newRect;
+        const rotatedLeft = left * cos - top * sin - centerX * cos + centerY * sin + centerX;
+        const rotatedTop = left * sin + top * cos - centerX * sin - centerY * cos + centerY;
+        const rotatedRight = right * cos - bottom * sin - centerX * cos + centerY * sin + centerX;
+        const rotatedBottom = right * sin + bottom * cos - centerX * sin - centerY * cos + centerY;
+        return [rotatedLeft, rotatedTop, rotatedRight, rotatedBottom];
+    }
+    static getUnRotatedPosition(coords, angle) {
+        const [left, top, right, bottom] = coords;
+        const centerX = (right + left) / 2;
+        const centerY = (bottom + top) / 2;
+        const radians = -1 * (Math.PI * angle) / 180;
+        const cos = Math.cos(radians);
+        const sin = Math.sin(radians);
+        const newLeft = left * cos - top * sin - cos * centerX + sin * centerY + centerX;
+        const newTop = left * sin + top * cos - sin * centerX - cos * centerY + centerY;
+        return [newLeft, newTop];
+    }
+    static getRotatedBoundingBox(boundary, angle) {
+        if (angle === 0)
+            return _a.fromObject(boundary);
+        const { x, y, width, height } = boundary;
+        const radian = (angle * Math.PI) / 180;
+        const cx = x + width / 2;
+        const cy = y + height / 2;
+        const corners = [
+            { x, y },
+            { x: x + width, y },
+            { x, y: y + height },
+            { x: x + width, y: y + height }
+        ];
+        const rotatedCorners = corners.map((corner) => {
+            const dx = corner.x - cx;
+            const dy = corner.y - cy;
+            return {
+                x: cx + (dx * Math.cos(radian) - dy * Math.sin(radian)),
+                y: cy + (dx * Math.sin(radian) + dy * Math.cos(radian))
+            };
+        });
+        const xValues = rotatedCorners.map(point => point.x);
+        const yValues = rotatedCorners.map(point => point.y);
+        const minX = Math.min(...xValues);
+        const maxX = Math.max(...xValues);
+        const minY = Math.min(...yValues);
+        const maxY = Math.max(...yValues);
+        return new _a(minX, minY, maxX - minX, maxY - minY);
+    }
+    static getRelativeRect(src, origin) {
+        return new _a(src.left - origin.left, src.top - origin.top, src.width, src.height);
+    }
+    static getDefault() {
+        return new _a(0, 0, 0, 0);
+    }
+    static getHorizontallyIntersectingRects(selectedRect, unselectedRects) {
+        return unselectedRects.filter(rect => selectedRect.bottom >= rect.top && selectedRect.top <= rect.bottom);
+    }
+    static getVerticallyIntersectingRects(selectedRect, unselectedRects) {
+        return unselectedRects.filter(rect => selectedRect.right >= rect.left && selectedRect.left <= rect.right);
+    }
+    static roundRect(rect) {
+        return new _a(Math.round(rect.x), Math.round(rect.y), Math.round(rect.width), Math.round(rect.height));
+    }
+    static roundRects(rects) {
+        return rects.map(r => _a.roundRect(r));
+    }
+    constructor(x, y, width, height) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+    get left() {
+        return this.width >= 0 ? this.x : this.x + this.width;
+    }
+    get top() {
+        return this.height >= 0 ? this.y : this.y + this.height;
+    }
+    get right() {
+        return this.width >= 0 ? this.x + this.width : this.x;
+    }
+    get bottom() {
+        return this.height >= 0 ? this.y + this.height : this.y;
+    }
+    getScaled(xRatio, yRatio = xRatio) {
+        return new _a(this.x * xRatio, this.y * yRatio, this.width * xRatio, this.height * yRatio);
+    }
+    getRelative(source) {
+        return new _a(this.left - source.left, this.top - source.top, this.width, this.height);
+    }
+    static getNewPosition(rect, newDimensions) {
+        const x = rect.left + (rect.width - newDimensions.width) / 2;
+        const y = rect.top + (rect.height - newDimensions.height) / 2;
+        return { x, y };
+    }
+}
+exports.Rect = Rect;
+_a = Rect;
+Rect.getOriginRectFromBoundary = (boundary, angle, ratio) => {
+    const radians = angle * (Math.PI / 180);
+    const cos = Math.abs(Math.cos(radians));
+    const sin = Math.abs(Math.sin(radians));
+    const W = boundary.width;
+    const H = boundary.height;
+    if (Math.abs(angle % 180) === 90) {
+        const { x, y } = _a.getNewPosition(boundary, { width: H, height: W });
+        return new _a(x, y, H, W);
+    }
+    if (Math.abs(angle % 45) === 0) {
+        const w = W / (cos + sin / ratio);
+        const h = H / (cos + sin * ratio);
+        const { x, y } = _a.getNewPosition(boundary, { width: w, height: h });
+        return new _a(x, y, w, h);
+    }
+    const w = (W * cos - H * sin) / (cos * cos - sin * sin);
+    const h = (H - w * sin) / cos;
+    const { x, y } = _a.getNewPosition(boundary, { width: w, height: h });
+    return new _a(x, y, w, h);
+};

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 export { Client as CntrlClient } from './Client/Client';
 export { FontFaceGenerator } from './FontFaceGenerator/FontFaceGenerator';
-export { getLayoutStyles, getLayoutMediaQuery } from './utils';
+export { getLayoutStyles, getLayoutMediaQuery, measureFont } from './utils';
 export { ScrollPlaybackVideoManager } from './ScrollPlaybackVideoManager/ScrollPlaybackVideoManager';
+export { Rect } from './Rect/Rect';
 export { SectionHeightMode } from './types/article/Section';
 export { TextAlign, TextDecoration, TextTransform, VerticalAlign } from './types/article/RichText';
 export { ArticleItemType } from './types/article/ArticleItemType';
@@ -19,3 +20,4 @@ export type { Project } from './types/project/Project';
 export type { Meta } from './types/project/Meta';
 export type { KeyframeValueMap, KeyframeAny } from './types/keyframe/Keyframe';
 export type { CompoundSettings } from './types/article/CompoundSettings';
+export type { Dimensions, Left, Position, RectCoordinates, RectObject, ScaleOrigin, Sides, Top } from './types/article/Rect';

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.ScrollPlaybackVideoManager = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
+exports.KeyframeType = exports.PositionType = exports.DimensionMode = exports.AnchorSide = exports.AreaAnchor = exports.ArticleItemType = exports.VerticalAlign = exports.TextTransform = exports.TextDecoration = exports.TextAlign = exports.SectionHeightMode = exports.Rect = exports.ScrollPlaybackVideoManager = exports.measureFont = exports.getLayoutMediaQuery = exports.getLayoutStyles = exports.FontFaceGenerator = exports.CntrlClient = void 0;
 // logic
 var Client_1 = require("./Client/Client");
 Object.defineProperty(exports, "CntrlClient", { enumerable: true, get: function () { return Client_1.Client; } });
@@ -9,8 +9,11 @@ Object.defineProperty(exports, "FontFaceGenerator", { enumerable: true, get: fun
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getLayoutStyles", { enumerable: true, get: function () { return utils_1.getLayoutStyles; } });
 Object.defineProperty(exports, "getLayoutMediaQuery", { enumerable: true, get: function () { return utils_1.getLayoutMediaQuery; } });
+Object.defineProperty(exports, "measureFont", { enumerable: true, get: function () { return utils_1.measureFont; } });
 var ScrollPlaybackVideoManager_1 = require("./ScrollPlaybackVideoManager/ScrollPlaybackVideoManager");
 Object.defineProperty(exports, "ScrollPlaybackVideoManager", { enumerable: true, get: function () { return ScrollPlaybackVideoManager_1.ScrollPlaybackVideoManager; } });
+var Rect_1 = require("./Rect/Rect");
+Object.defineProperty(exports, "Rect", { enumerable: true, get: function () { return Rect_1.Rect; } });
 // enums
 var Section_1 = require("./types/article/Section");
 Object.defineProperty(exports, "SectionHeightMode", { enumerable: true, get: function () { return Section_1.SectionHeightMode; } });

package/lib/types/article/Rect.d.ts

@@ -0,0 +1,34 @@
+export interface RectObject {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface Dimensions {
+    width: number;
+    height: number;
+}
+export type Left = number;
+export type Top = number;
+export type Right = number;
+export type Bottom = number;
+export type RectCoordinates = [Left, Top, Right, Bottom];
+declare const ScaleOrigins: {
+    readonly TopLeft: "top-left";
+    readonly TopCenter: "top-center";
+    readonly TopRight: "top-right";
+    readonly MiddleLeft: "middle-left";
+    readonly MiddleCenter: "middle-center";
+    readonly MiddleRight: "middle-right";
+    readonly BottomLeft: "bottom-left";
+    readonly BottomCenter: "bottom-center";
+    readonly BottomRight: "bottom-right";
+};
+export type Sides = [top: number, left: number];
+export declare const scaleMatrix: Record<ScaleOrigin, Sides>;
+export type ScaleOrigin = typeof ScaleOrigins[keyof typeof ScaleOrigins];
+export {};

package/lib/types/article/Rect.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleMatrix = void 0;
+const ScaleOrigins = {
+    TopLeft: 'top-left',
+    TopCenter: 'top-center',
+    TopRight: 'top-right',
+    MiddleLeft: 'middle-left',
+    MiddleCenter: 'middle-center',
+    MiddleRight: 'middle-right',
+    BottomLeft: 'bottom-left',
+    BottomCenter: 'bottom-center',
+    BottomRight: 'bottom-right'
+};
+exports.scaleMatrix = {
+    [ScaleOrigins.TopLeft]: [0, 0],
+    [ScaleOrigins.TopCenter]: [0, 0.5],
+    [ScaleOrigins.TopRight]: [0, 1],
+    [ScaleOrigins.MiddleLeft]: [0.5, 0],
+    [ScaleOrigins.MiddleCenter]: [0.5, 0.5],
+    [ScaleOrigins.MiddleRight]: [0.5, 1],
+    [ScaleOrigins.BottomLeft]: [1, 0],
+    [ScaleOrigins.BottomCenter]: [1, 0.5],
+    [ScaleOrigins.BottomRight]: [1, 1]
+};

package/lib/utils.d.ts

@@ -1,3 +1,15 @@
 import { Layout } from './types/project/Layout';
 export declare function getLayoutStyles<V, M>(layouts: Layout[], layoutValues: Record<string, V>[], mapToStyles: (values: V[], exemplary: number) => M): string;
 export declare function getLayoutMediaQuery(layoutId: string, layouts: Layout[]): string;
+export declare function measureFont(font: string, text: string, win?: Window): FontMetrics;
+interface FontMetrics {
+    capHeight: number;
+    baseline: number;
+    fontBoxHeight: number;
+    xHeight: number;
+    leftMargin: number;
+    topMargin: number;
+    rightMargin: number;
+    bottomMargin: number;
+}
+export {};

package/lib/utils.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getLayoutStyles = getLayoutStyles;
 exports.getLayoutMediaQuery = getLayoutMediaQuery;
+exports.measureFont = measureFont;
 function getLayoutStyles(layouts, layoutValues, mapToStyles) {
     const mediaQueries = layouts
         .sort((a, b) => a.startsWith - b.startsWith)
@@ -28,3 +29,50 @@ function getLayoutMediaQuery(layoutId, layouts) {
     }
     return `@media (min-width: ${current.startsWith}px) and (max-width: ${next.startsWith - 1}px)`;
 }
+const canvases = new WeakMap();
+if (typeof window !== 'undefined') {
+    canvases.set(window, window.document.createElement('canvas'));
+}
+function measureFont(font, text, win = window) {
+    const canvas = resolveCanvas(win);
+    const context = canvas.getContext('2d');
+    if (!context) {
+        throw new ReferenceError('Canvas context is not available');
+    }
+    context.textBaseline = 'top';
+    context.font = font;
+    // measure "H" for basic font metrics
+    const hMetrics = context.measureText('H');
+    const capHeight = hMetrics.actualBoundingBoxDescent + hMetrics.actualBoundingBoxAscent;
+    const baseline = hMetrics.actualBoundingBoxDescent;
+    const topMargin = hMetrics.actualBoundingBoxAscent - hMetrics.fontBoundingBoxAscent;
+    // measure "x" for small letters metrics
+    const xMetrics = context.measureText('x');
+    const xHeight = xMetrics.actualBoundingBoxDescent + xMetrics.actualBoundingBoxAscent;
+    // measure "p" for descendants
+    const pMetrics = context.measureText('Hp');
+    const bottomMargin = pMetrics.actualBoundingBoxDescent - pMetrics.fontBoundingBoxDescent;
+    // measure first and last letter to get horizontal margins
+    const horMetrics = context.measureText(`${text.charAt(0)}${text.charAt(text.length - 1)}`);
+    const leftMargin = -horMetrics.actualBoundingBoxLeft;
+    const rightMargin = horMetrics.width - horMetrics.actualBoundingBoxRight;
+    return {
+        capHeight,
+        baseline,
+        fontBoxHeight: hMetrics.fontBoundingBoxDescent - hMetrics.fontBoundingBoxAscent,
+        xHeight,
+        leftMargin,
+        topMargin,
+        rightMargin,
+        bottomMargin
+    };
+}
+function resolveCanvas(win) {
+    if (typeof window === 'undefined') {
+        throw new TypeError('resolveCanvas() called on server');
+    }
+    if (!canvases.has(win)) {
+        canvases.set(win, win.document.createElement('canvas'));
+    }
+    return canvases.get(win);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk",
-  "version": "1.25.1-0",
+  "version": "1.25.1-2",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",