svg: fit arg (#1413)

Author: MykolaGolubyev

znai-docs/znai/release-notes/1.85/add-2026-01-19-svg-fit-arg.md

@@ -0,0 +1 @@
+* Add: SVG `fit` option

znai-reactjs/src/doc-elements/images/AnnotatedImage.tsx

@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import { CSSProperties} from "react";
-import React, { useState } from "react";
+import React, { CSSProperties, useState } from "react";
 
 import { imageAdditionalPreviewUrlParam } from "./imagePreviewAdditionalUrlParam";
 
-import { cssVarPixelValue } from "../../utils/cssVars";
+import { calcFitScale } from "./fitUtils";
 
 import Annotations from "./annotations/Annotations";
 import { zoom } from "../zoom/Zoom";
@@ -31,12 +30,10 @@ import { TooltipPlacement } from "../../components/Tooltip";
 
 import { WithElementsLibrary } from "../default-elements/DocElement";
 
-import { ContainerTitleCommonProps} from "../container/ContainerTitle";
-import { ContainerTitle, useIsUserDrivenCollapsed } from "../container/ContainerTitle";
+import { ContainerTitle, ContainerTitleCommonProps, useIsUserDrivenCollapsed } from "../container/ContainerTitle";
 
 import { useIsMobile } from "../../theme/ViewPortContext";
-import { ContainerCommonProps } from "../container/Container";
-import { Container } from "../container/Container";
+import { Container, ContainerCommonProps } from "../container/Container";
 
 import "./AnnotatedImage.css";
 
@@ -87,7 +84,7 @@ export function AnnotatedImage(props: AnnotatedImageProps) {
   const isMobile = useIsMobile();
   const { userDrivenCollapsed, collapseToggle } = useIsUserDrivenCollapsed(collapsed);
 
-  const scaleToUse = calcScale();
+  const scaleToUse = calcFitScale(fit, width, scale, isMobile);
 
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>({ x: -1, y: -1 });
 
@@ -243,15 +240,6 @@ export function AnnotatedImage(props: AnnotatedImageProps) {
     }
   }
 
-  function calcScale() {
-    if (!fit) {
-      return scale || 1.0;
-    }
-
-    const singleColumnWidth = isMobile ? window.innerWidth : cssVarPixelValue("znai-single-column-full-width");
-    return Math.min(1.0, singleColumnWidth / width);
-  }
-
   function renderTitle() {
     const renderedTitle = title ? (
       <ContainerTitle

znai-reactjs/src/doc-elements/images/fitUtils.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 znai maintainers
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { cssVarPixelValue } from "../../utils/cssVars";
+
+export function calcFitScale(
+  fit: boolean | undefined,
+  width: number,
+  scale: number | undefined,
+  isMobile: boolean
+): number {
+  if (!fit) {
+    return scale || 1.0;
+  }
+
+  const singleColumnWidth = isMobile
+    ? window.innerWidth
+    : cssVarPixelValue("znai-single-column-full-width");
+  return Math.min(1.0, singleColumnWidth / width);
+}

znai-reactjs/src/doc-elements/presentation/PresentationSlideContainer.tsx

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from "react";
 
-import { PresentationDimension, SlideAreaDimension } from './PresentationDimensions';
+import { PresentationDimension, SlideAreaDimension } from "./PresentationDimensions";
 
-import './PresentationSlideContainer.css';
+import "./PresentationSlideContainer.css";
 
 interface Props {
   slideIdx: number;
@@ -32,75 +32,108 @@ interface Props {
 }
 
 export function PresentationSlideContainer({
-                                             slideIdx,
-                                             maxScaleRatio,
-                                             isPadded,
-                                             isScaled,
-                                             isCentered,
-                                             presentationArea,
-                                             slideArea,
-                                             render
-                                           }: Props) {
+  slideIdx,
+  maxScaleRatio,
+  isPadded,
+  isScaled,
+  isCentered,
+  presentationArea,
+  slideArea,
+  render,
+}: Props) {
   const [scaleRatio, setScaleRatio] = useState(1);
   const [slideAppeared, setSlideAppeared] = useState(false);
 
   const contentNode = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    setScaleRatio(isScaled ?
-      calcScale(presentationArea, slideArea, contentNode.current!, isPadded, maxScaleRatio) :
-      1.0);
-
-    setSlideAppeared(true);
-  }, [isPadded, maxScaleRatio, isScaled, slideIdx, presentationArea, slideArea])
-
-  const className = "znai-presentation-slide-container " +
+    if (!isScaled) {
+      setScaleRatio(1.0);
+      setSlideAppeared(true);
+      return;
+    }
+
+    const node = contentNode.current!;
+
+    const tryCalcScale = () => {
+      if (!hasContentLoaded(node)) {
+        return false;
+      }
+      setScaleRatio(calcScale(presentationArea, slideArea, node, isPadded, maxScaleRatio));
+      setSlideAppeared(true);
+      return true;
+    };
+
+    if (tryCalcScale()) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (tryCalcScale()) {
+        resizeObserver.disconnect();
+      }
+    });
+    resizeObserver.observe(node);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [isPadded, maxScaleRatio, isScaled, slideIdx, presentationArea, slideArea]);
+
+  const className =
+    "znai-presentation-slide-container " +
     (isCentered ? " centered" : "") +
     (isPadded ? " padded" : "") +
     (slideAppeared ? " znai-presentation-slide-appeared" : "");
 
   const rendered = render();
 
   const wrappedChildren = isScaled ? (
-    <div ref={contentNode} style={{transform: "scale(" + scaleRatio + ")"}}>
+    <div ref={contentNode} style={{ transform: "scale(" + scaleRatio + ")" }}>
       {rendered}
     </div>
-  ) : rendered;
+  ) : (
+    rendered
+  );
 
-  const maxWidth = presentationArea.width * slideArea.widthPercentage / 100.0
-  const maxHeight = presentationArea.height * slideArea.heightPercentage / 100.0
+  const maxWidth = (presentationArea.width * slideArea.widthPercentage) / 100.0;
+  const maxHeight = (presentationArea.height * slideArea.heightPercentage) / 100.0;
 
   return (
-    <div className={className} style={{width: maxWidth, height: maxHeight}}>
+    <div className={className} style={{ width: maxWidth, height: maxHeight }}>
       {wrappedChildren}
     </div>
-  )
+  );
 }
 
-function calcScale(presentationArea: PresentationDimension,
-                   slideArea: SlideAreaDimension,
-                   contentNode: HTMLDivElement,
-                   isPadded: boolean,
-                   maxScaleRatio: number): number {
+function hasContentLoaded(contentNode: HTMLDivElement): boolean {
+  return contentNode.offsetWidth > 0 && contentNode.offsetHeight > 0;
+}
+
+function calcScale(
+  presentationArea: PresentationDimension,
+  slideArea: SlideAreaDimension,
+  contentNode: HTMLDivElement,
+  isPadded: boolean,
+  maxScaleRatio: number
+): number {
   // code based padding to avoid margin collapse
   const hPad = isPadded ? 60 : 0;
   const vPad = isPadded ? 30 : 0;
 
-  const maxWidth = calcMaxWidth(presentationArea, slideArea)
-  const maxHeight = calcMaxHeight(presentationArea, slideArea)
+  const maxWidth = calcMaxWidth(presentationArea, slideArea);
+  const maxHeight = calcMaxHeight(presentationArea, slideArea);
 
   const widthRatio = (maxWidth - hPad) / contentNode.offsetWidth;
   const heightRatio = (maxHeight - vPad) / contentNode.offsetHeight;
 
   return Math.min(widthRatio, heightRatio, maxScaleRatio);
 }
 
-function calcMaxWidth(presentationArea: PresentationDimension,
-                      slideArea: SlideAreaDimension) {
-  return presentationArea.width * slideArea.widthPercentage / 100.0
+function calcMaxWidth(presentationArea: PresentationDimension, slideArea: SlideAreaDimension) {
+  return (presentationArea.width * slideArea.widthPercentage) / 100.0;
 }
 
-function calcMaxHeight(presentationArea: PresentationDimension,
-                       slideArea: SlideAreaDimension) {
-  return presentationArea.height * slideArea.heightPercentage / 100.0
-}
+function calcMaxHeight(presentationArea: PresentationDimension, slideArea: SlideAreaDimension) {
+  return (presentationArea.height * slideArea.heightPercentage) / 100.0;
+}

znai-reactjs/src/doc-elements/svg/EmbeddedSvg.demo.jsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2025 znai maintainers
+ * Copyright 2019 TWO SIGMA OPEN SOURCE, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+
+import { Svg } from "./Svg";
+import { Registry, simulateState } from "react-component-viewer";
+import { svg } from "./svg.testdata";
+
+const [getActualSize, setActualSize] = simulateState(false);
+
+export function embeddedSvgDemo(registry: Registry) {
+  registry
+    .add("simple", () => <Svg svg={svg()} />)
+    .add("partially revealed", () => <Svg svg={svg()} idsToReveal={["partC"]} />)
+    .add("actual size", () => <Svg svg={svg()} actualSize={true} />)
+    .add("partially revealed with actual size", () => <Svg svg={svg()} idsToReveal={["partC"]} actualSize={true} />)
+    .add("actual size with scale", () => <Svg svg={svg()} actualSize={true} scale={0.5} />)
+    .add("partially revealed with actual size and scale", () => (
+      <Svg svg={svg()} idsToReveal={["partC"]} scale={0.5} actualSize={true} />
+    ))
+    .add("flip actual size for preview mode", () => (
+      <div>
+        <button onClick={toggleActualSize}>toggle actual size</button>
+        <Svg svg={svg(300, undefined)} idsToReveal={["partC"]} scale={0.5} actualSize={getActualSize()} />
+      </div>
+    ))
+    .add("wide svg without fit", () => <Svg svg={svg(1200, 400)} />)
+    .add("wide svg with fit", () => <Svg svg={svg(1200, 400)} fit={true} />)
+    .add("wide svg with fit and scale", () => <Svg svg={svg(1200, 400)} fit={true} scale={0.8} />);
+}
+
+function toggleActualSize() {
+  setActualSize(!getActualSize());
+}