@cntrl-site/sdk-nextjs 1.9.42 → 1.9.43

package/lib/utils/getItemTopStyle.js

@@ -1,7 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getItemTopStyle = void 0;
+exports.getItemTopStyle = exports.getPercentageBasedTopStyle = void 0;
 const sdk_1 = require("@cntrl-site/sdk");
+function getAnchorSideShift(anchorSide, height) {
+    if (!height)
+        return 0;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Center:
+            return height / 2;
+        case sdk_1.AnchorSide.Bottom:
+            return height;
+        default:
+            return 0;
+    }
+}
+function getPercentageBasedTopStyle(top, height, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+    }
+}
+exports.getPercentageBasedTopStyle = getPercentageBasedTopStyle;
 function getItemTopStyle(top, anchorSide) {
     const defaultValue = `${top * 100}vw`;
     if (!anchorSide)

package/package.json

@@ -1,60 +1,60 @@
-{
-  "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.42",
-  "description": "SDK for Next.js",
-  "author": "arsen@momdesign.nyc",
-  "license": "MIT",
-  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
-  },
-  "main": "lib/index.js",
-  "types": "src/index.ts",
-  "scripts": {
-    "test": "jest",
-    "prebuild": "rimraf ./lib",
-    "build": "tsc --project tsconfig.build.json",
-    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
-  },
-  "peerDependencies": {
-    "@types/lodash.isequal": "^4.5.6",
-    "lodash.isequal": "^4.5.0",
-    "next": "^14.2.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "dependencies": {
-    "@antfu/eslint-config": "^3.8.0",
-    "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^0.1.29",
-    "@cntrl-site/effects": "^1.4.0",
-    "@cntrl-site/sdk": "^1.25.6",
-    "@types/vimeo__player": "^2.18.0",
-    "@vimeo/player": "^2.25.0",
-    "html-react-parser": "^3.0.1",
-    "resize-observer-polyfill": "^1.5.1",
-    "styled-jsx": "^5.0.2"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.8",
-    "@testing-library/react": "^16.0.0",
-    "@tsconfig/node16": "^1.0.3",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^18.11.7",
-    "@types/react": "^18.0.15",
-    "cross-env": "^10.1.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "rimraf": "^6.0.1",
-    "ts-jest": "^29.0.3",
-    "typescript": "^5.2.2"
-  },
-  "directories": {
-    "lib": "lib"
-  }
-}
+{
+  "name": "@cntrl-site/sdk-nextjs",
+  "version": "1.9.43",
+  "description": "SDK for Next.js",
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
+  },
+  "main": "lib/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "test": "jest",
+    "prebuild": "rimraf ./lib",
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "cross-env NODE_ENV=production npm run build"
+  },
+  "peerDependencies": {
+    "@types/lodash.isequal": "^4.5.6",
+    "lodash.isequal": "^4.5.0",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@antfu/eslint-config": "^3.8.0",
+    "@cntrl-site/color": "^1.0.0",
+    "@cntrl-site/components": "^0.1.29",
+    "@cntrl-site/effects": "^1.4.0",
+    "@cntrl-site/sdk": "^1.25.8",
+    "@types/vimeo__player": "^2.18.0",
+    "@vimeo/player": "^2.25.0",
+    "html-react-parser": "^3.0.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "styled-jsx": "^5.0.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.15",
+    "cross-env": "^10.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rimraf": "^6.0.1",
+    "ts-jest": "^29.0.3",
+    "typescript": "^5.2.2"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/src/ItemGeometry/CSSPropertyNameMap.ts

@@ -1,37 +1,37 @@
-import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
-
-export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  width: 'width',
-  height: 'height',
-  top: 'top',
-  left: 'left',
-  scale: 'transform',
-  angle: 'transform',
-  opacity: 'opacity',
-  radius: 'border-radius',
-  strokeWidth: 'border-width',
-  strokeFill: 'border-color',
-  fill: 'background',
-  blur: 'filter',
-  backdropBlur: 'backdrop-filter',
-  letterSpacing: 'letter-spacing',
-  wordSpacing: 'word-spacing',
-  color: 'color'
-};
-
-const PropertyNameCSSMap: Record<string, string[]> = {
-  'transform': ['angle', 'scale'],
-  'border-radius': ['radius'],
-  'border-width': ['strokeWidth'],
-  'border-color': ['strokeFill'],
-  'background': ['fill'],
-  'filter': ['blur'],
-  'backdrop-filter': ['backdrop-blur'],
-  'letter-spacing': ['letterSpacing'],
-  'word-spacing': ['wordSpacing'],
-};
-
-export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
-  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
-  return key;
-}
+import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+
+export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
+  width: 'width',
+  height: 'height',
+  top: 'top',
+  left: 'left',
+  scale: 'transform',
+  angle: 'transform',
+  opacity: 'opacity',
+  radius: 'border-radius',
+  strokeWidth: 'border-width',
+  strokeFill: 'border-color',
+  fill: 'background',
+  blur: 'filter',
+  backdropBlur: 'backdrop-filter',
+  letterSpacing: 'letter-spacing',
+  wordSpacing: 'word-spacing',
+  color: 'color'
+};
+
+const PropertyNameCSSMap: Record<string, string[]> = {
+  'transform': ['angle', 'scale'],
+  'border-radius': ['radius'],
+  'border-width': ['strokeWidth'],
+  'border-color': ['strokeFill'],
+  'background': ['fill'],
+  'filter': ['blur'],
+  'backdrop-filter': ['backdrop-blur'],
+  'letter-spacing': ['letterSpacing'],
+  'word-spacing': ['wordSpacing'],
+};
+
+export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
+  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
+  return key;
+}

package/src/ItemGeometry/GenericGeometryController.ts

@@ -1,59 +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;
-  }
-}
+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

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

package/src/ItemGeometry/ItemGeometryController.ts

@@ -1,22 +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;
-}
+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

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