@gxpl/sdk 0.0.58 → 0.0.60

package/lib/sdk/schemas/article/Item.schema.js

@@ -6,7 +6,6 @@ const ItemState_schema_1 = require("./ItemState.schema");
 const RichTextItem_schema_1 = require("./RichTextItem.schema");
 const ItemBase_schema_1 = require("./ItemBase.schema");
 const ArticleItemType_1 = require("../../types/article/ArticleItemType");
-const ItemArea_1 = require("../../types/article/ItemArea");
 const FillLayer_schema_1 = require("./FillLayer.schema");
 const pointerEvents = zod_1.z.enum(['never', 'when_visible', 'always']).optional();
 exports.FXControlSchema = zod_1.z.discriminatedUnion('type', [
@@ -154,7 +153,6 @@ const CodeEmbedItemSchema = ItemBase_schema_1.ItemBaseSchema.extend({
         html: zod_1.z.string(),
         scale: zod_1.z.boolean(),
         iframe: zod_1.z.boolean(),
-        areaAnchor: zod_1.z.nativeEnum(ItemArea_1.AreaAnchor),
         opacity: zod_1.z.number().nonnegative(),
         blur: zod_1.z.number(),
         isDraggable: zod_1.z.boolean().optional(),

package/lib/sdk/types/article/Item.d.ts

@@ -1,6 +1,6 @@
 import { RichTextBlock, RichTextStyle, TextAlign, TextTransform, VerticalAlign } from './RichText';
 import { ArticleItemType } from './ArticleItemType';
-import { AreaAnchor, ItemArea } from './ItemArea';
+import { ItemArea } from './ItemArea';
 import { ItemState } from './ItemState';
 import { FXControlAny } from './FX';
 import { CompoundSettings } from './CompoundSettings';
@@ -103,7 +103,6 @@ interface CodeEmbedParams extends ParamsBase {
     html: string;
     scale: boolean;
     iframe: boolean;
-    areaAnchor: AreaAnchor;
     opacity: number;
     blur: number;
     isDraggable?: boolean;

package/lib/sdk-nextjs/components/Scene.js

@@ -190,16 +190,17 @@ function getDirectionFromDelta(deltaX, deltaY) {
     return deltaY > 0 ? 'north' : 'south';
 }
 function canTransition(direction, el) {
+    const boundary = el.getBoundingClientRect();
     switch (direction) {
         case 'north':
             return el.scrollTop <= 0;
         case 'south': {
-            const isAllowed = el.scrollTop + el.clientHeight + 1 >= el.scrollHeight;
+            const isAllowed = el.scrollTop + boundary.height + 1 >= el.scrollHeight;
             return isAllowed;
         }
         case 'west':
             return el.scrollLeft === 0;
         case 'east':
-            return el.scrollLeft + el.clientWidth === window.innerWidth;
+            return Math.abs(el.scrollLeft + boundary.width - window.innerWidth) < 1;
     }
 }

package/lib/sdk-nextjs/components/items/RectangleItem/RectangleItem.js

@@ -15,7 +15,7 @@ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromIte
 const getFill_1 = require("../../../utils/getFill");
 const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisible");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = (0, react_1.useId)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -33,16 +33,16 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.angle, itemAngle);
     const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)(styles === null || styles === void 0 ? void 0 : styles.blur, itemBlur);
     const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
-    const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)((_g = strokeFill !== null && strokeFill !== void 0 ? strokeFill : itemStrokeFill) !== null && _g !== void 0 ? _g : []));
+    const isInteractive = (0, areFillsVisible_1.areFillsVisible)((_f = stateFillLayers !== null && stateFillLayers !== void 0 ? stateFillLayers : itemFill) !== null && _f !== void 0 ? _f : []) || (strokeWidth !== 0 && (0, areFillsVisible_1.areFillsVisible)(strokeFill ? [strokeFill] : itemStrokeFill !== null && itemStrokeFill !== void 0 ? itemStrokeFill : []));
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
     const stroke = strokeFill
-        ? (_h = (0, getFill_1.getFill)(strokeFill)) !== null && _h !== void 0 ? _h : 'transparent'
+        ? (_g = (0, getFill_1.getFill)(strokeFill)) !== null && _g !== void 0 ? _g : 'transparent'
         : 'transparent';
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { link: item.link, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
                         ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
-                        : {})), { transition: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: itemFill && itemFill.map((fill, i) => {
+                        : {})), { transition: (_h = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _h !== void 0 ? _h : 'none' }), children: itemFill && itemFill.map((fill, i) => {
                         var _a, _b;
                         const stateFillLayer = stateFillLayers === null || stateFillLayers === void 0 ? void 0 : stateFillLayers.find((layer) => layer.id === fill.id);
                         const value = stateFillLayer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gxpl/sdk",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "description": "Generic SDK for use in public websites.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",