@bendyline/squisq-react 2.0.0 → 2.0.1

package/dist/index.d.ts

@@ -691,8 +691,10 @@ interface ImageLayerProps {
     };
     /** Current time relative to block start (for animation timing) */
     blockTime: number;
+    /** Whether authored and responsive image motion should run. */
+    animationsEnabled?: boolean;
 }
-declare function ImageLayer({ layer, basePath, viewport, blockTime }: ImageLayerProps): react_jsx_runtime.JSX.Element;
+declare function ImageLayer({ layer, basePath, viewport, blockTime, animationsEnabled, }: ImageLayerProps): react_jsx_runtime.JSX.Element;
 
 interface TextLayerProps {
     layer: TextLayer$1;

package/dist/index.js

@@ -207,7 +207,13 @@ function getAnchorOffset(anchor, width, height) {
 
 // src/layers/ImageLayer.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function ImageLayer({ layer, basePath, viewport, blockTime }) {
+function ImageLayer({
+  layer,
+  basePath,
+  viewport,
+  blockTime,
+  animationsEnabled = true
+}) {
   const { content, position, animation } = layer;
   const x = resolveValue(position.x, viewport.width);
   const y = resolveValue(position.y, viewport.height);
@@ -222,6 +228,50 @@ function ImageLayer({ layer, basePath, viewport, blockTime }) {
   const preserveAspectRatio = getPreserveAspectRatio(content.fit);
   const isCover = content.fit === "cover";
   const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
+  const usesPortraitPan = isCover && shouldUsePortraitPan(viewport, width, height, animationsEnabled, animation);
+  if (usesPortraitPan) {
+    const panClass = getPortraitPanClass(animation);
+    const panStyle = getPortraitPanStyle(isSpatialAnim ? animation : void 0);
+    const containerAnim = isSpatialAnim ? { className: "", style: {} } : animStyle;
+    return /* @__PURE__ */ jsx2(
+      "g",
+      {
+        className: `block-layer block-layer--image ${containerAnim.className}`,
+        style: containerAnim.style,
+        "data-layer-id": layer.id,
+        "data-image-framing": "portrait-pan",
+        children: /* @__PURE__ */ jsx2("foreignObject", { x: finalX, y: finalY, width, height, children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              width: `${width}px`,
+              height: `${height}px`,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src,
+                alt: content.alt || "",
+                className: panClass,
+                style: {
+                  width: `${width}px`,
+                  height: `${height}px`,
+                  objectFit: "cover",
+                  objectPosition: "center",
+                  display: "block",
+                  pointerEvents: "none",
+                  ...filter ? { filter } : {},
+                  ...content.blur && content.blur > 0 ? { transform: "scale(1.06)" } : {},
+                  ...panStyle
+                }
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
   if (isCover && isSpatialAnim && animation) {
     const kbAnim = remapToKenBurns(animation);
     const kbStyle = getAnimationStyle(kbAnim, blockTime);
@@ -317,6 +367,23 @@ function getPreserveAspectRatio(fit) {
   }
 }
 var SPATIAL_ANIMATION_TYPES = /* @__PURE__ */ new Set(["panLeft", "panRight", "slowZoom", "zoomIn", "zoomOut"]);
+var PORTRAIT_ASPECT_CUTOFF = 0.83;
+function shouldUsePortraitPan(viewport, layerWidth, layerHeight, animationsEnabled, animation) {
+  if (!animationsEnabled || animation?.type === "none") return false;
+  if (viewport.width / viewport.height >= PORTRAIT_ASPECT_CUTOFF) return false;
+  return layerWidth >= viewport.width * 0.7 && layerHeight >= viewport.height * 0.7;
+}
+function getPortraitPanClass(animation) {
+  const pansBack = animation?.type === "panRight" || animation?.type === "slowZoom" && animation.panDirection === "right";
+  return pansBack ? "squisq-image--portrait-pan-left" : "squisq-image--portrait-pan-right";
+}
+function getPortraitPanStyle(animation) {
+  return {
+    "--portrait-pan-duration": `${animation?.duration ?? 12}s`,
+    "--portrait-pan-delay": `${animation?.delay ?? 0}s`,
+    "--portrait-pan-easing": animation?.easing ?? "ease-in-out"
+  };
+}
 function remapToKenBurns(anim) {
   switch (anim.type) {
     case "panLeft":
@@ -766,6 +833,7 @@ function wrapText(text, fontSize, maxWidth) {
 // src/layers/ShapeLayer.tsx
 import { useId as useId2 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FULL_BLEED_OVERSCAN = 1;
 function ShapeLayer({ layer, viewport, blockTime }) {
   const { content, position, animation } = layer;
   const defsId = `${useId2().replace(/:/g, "")}-${layer.id}`;
@@ -776,6 +844,12 @@ function ShapeLayer({ layer, viewport, blockTime }) {
   const anchorOffset = getAnchorOffset(position.anchor, width, height);
   const x = rawX + anchorOffset.x;
   const y = rawY + anchorOffset.y;
+  const isUnborderedFullBleedRect = content.shape === "rect" && x === 0 && y === 0 && width === viewport.width && height === viewport.height && !content.stroke && !content.borderRadius;
+  const overscan = isUnborderedFullBleedRect ? FULL_BLEED_OVERSCAN : 0;
+  const paintX = x - overscan;
+  const paintY = y - overscan;
+  const paintWidth = width + overscan * 2;
+  const paintHeight = height + overscan * 2;
   const animStyle = getAnimationStyle(animation, blockTime);
   const fill = content.fill || "none";
   const isCSSGradient = typeof fill === "string" && fill.includes("gradient(");
@@ -786,12 +860,12 @@ function ShapeLayer({ layer, viewport, blockTime }) {
         className: `block-layer block-layer--shape ${animStyle.className}`,
         style: animStyle.style,
         "data-layer-id": layer.id,
-        children: /* @__PURE__ */ jsx5("foreignObject", { x, y, width, height, children: /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx5("foreignObject", { x: paintX, y: paintY, width: paintWidth, height: paintHeight, children: /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
-              width: `${width}px`,
-              height: `${height}px`,
+              width: `${paintWidth}px`,
+              height: `${paintHeight}px`,
               background: fill,
               borderRadius: content.borderRadius ? `${content.borderRadius}px` : void 0,
               pointerEvents: "none"
@@ -831,10 +905,10 @@ function ShapeLayer({ layer, viewport, blockTime }) {
         content.shape === "rect" && /* @__PURE__ */ jsx5(
           "rect",
           {
-            x,
-            y,
-            width,
-            height,
+            x: paintX,
+            y: paintY,
+            width: paintWidth,
+            height: paintHeight,
             rx: content.borderRadius,
             ry: content.borderRadius,
             ...shapeProps
@@ -1661,7 +1735,8 @@ function LayerRenderer({
           layer: renderedLayer,
           basePath,
           viewport,
-          blockTime
+          blockTime,
+          animationsEnabled
         }
       );
     case "text":
@@ -3946,6 +4021,9 @@ function LinearDocView({
           .squisq-linear-content p {
             margin-bottom: 0.75em;
           }
+          .squisq-linear-content p + p {
+            margin-top: 1.25em;
+          }
           .squisq-linear-content ul,
           .squisq-linear-content ol {
             padding-left: 2em;