pptx-react-viewer 3.8.0 → 3.10.0

package/dist/{PieChart3DScene-CI6CW22C.mjs → PieChart3DScene-4L2VVIUJ.mjs}

@@ -1,22 +1,30 @@
-import { mountPieChart3D } from './chunk-6IMB5DNJ.mjs';
+import { useStableChart3DInteraction, useLatestRef } from './chunk-T6GFCLSM.mjs';
+import { mountPieChart3D } from './chunk-UKPGYJ7G.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-function PieChart3DScene({ options }) {
+function PieChart3DScene({
+  options,
+  interaction,
+  selectedPart = null
+}) {
   const containerRef = useRef(null);
   const handleRef = useRef(null);
+  const stableInteraction = useStableChart3DInteraction(interaction);
+  const selectedPartRef = useLatestRef(selectedPart);
   useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
     }
     let disposed = false;
-    void mountPieChart3D(container, options).then((handle) => {
+    void mountPieChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {
         handleRef.current = handle;
+        handle.setSelectedPart(selectedPartRef.current);
       }
       return void 0;
     });
@@ -25,10 +33,13 @@ function PieChart3DScene({ options }) {
       handleRef.current?.dispose();
       handleRef.current = null;
     };
-  }, [options]);
+  }, [options, stableInteraction]);
   useEffect(() => {
     handleRef.current?.resize(options.width, options.height);
   }, [options.width, options.height]);
+  useEffect(() => {
+    handleRef.current?.setSelectedPart(selectedPart);
+  }, [selectedPart]);
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/{PieChart3DScene-L3MHKQHW.js → PieChart3DScene-MV3JF7EM.js}

@@ -1,24 +1,32 @@
 'use strict';
 
-var chunkSN5EUDIT_js = require('./chunk-SN5EUDIT.js');
+var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
+var chunk2Q2NFPXA_js = require('./chunk-2Q2NFPXA.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-function PieChart3DScene({ options }) {
+function PieChart3DScene({
+  options,
+  interaction,
+  selectedPart = null
+}) {
   const containerRef = react.useRef(null);
   const handleRef = react.useRef(null);
+  const stableInteraction = chunkDNR6CH6I_js.useStableChart3DInteraction(interaction);
+  const selectedPartRef = chunkDNR6CH6I_js.useLatestRef(selectedPart);
   react.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
     }
     let disposed = false;
-    void chunkSN5EUDIT_js.mountPieChart3D(container, options).then((handle) => {
+    void chunk2Q2NFPXA_js.mountPieChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {
         handleRef.current = handle;
+        handle.setSelectedPart(selectedPartRef.current);
       }
       return void 0;
     });
@@ -27,10 +35,13 @@ function PieChart3DScene({ options }) {
       handleRef.current?.dispose();
       handleRef.current = null;
     };
-  }, [options]);
+  }, [options, stableInteraction]);
   react.useEffect(() => {
     handleRef.current?.resize(options.width, options.height);
   }, [options.width, options.height]);
+  react.useEffect(() => {
+    handleRef.current?.setSelectedPart(selectedPart);
+  }, [selectedPart]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

package/dist/{SmartArt3DScene-ZO3KFDI2.js → SmartArt3DScene-BK7QN3WT.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
 var chunk6C2WYLZY_js = require('./chunk-6C2WYLZY.js');
 var chunkB4QYQLZU_js = require('./chunk-B4QYQLZU.js');
 require('./chunk-4VNS5WPM.js');
@@ -28,10 +29,17 @@ function wrapLines(ctx, text, maxWidth) {
   lines.push(line);
   return lines;
 }
-function makeTextTexture(text, color, fontSize, footW, footH) {
+function resolveEmphasisFont(color, emphasis) {
+  const weight = emphasis?.bold === void 0 ? "600" : emphasis.bold ? "700" : "400";
+  const italic = emphasis?.italic ? "italic " : "";
+  const scale = typeof emphasis?.fontScale === "number" && Number.isFinite(emphasis.fontScale) && emphasis.fontScale > 0 ? emphasis.fontScale : 1;
+  return { weight, italic, color: emphasis?.color ?? color, scale };
+}
+function makeTextTexture(text, color, fontSize, footW, footH, emphasis) {
   if (typeof document === "undefined" || !text.trim() || footW <= 0 || footH <= 0) {
     return null;
   }
+  const { weight, italic, color: effectiveColor, scale } = resolveEmphasisFont(color, emphasis);
   const worldWidth = footW * FILL;
   const worldHeight = footH * FILL;
   const canvas = document.createElement("canvas");
@@ -43,10 +51,11 @@ function makeTextTexture(text, color, fontSize, footW, footH) {
   }
   const family = "system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
   const maxTextWidth = canvas.width * 0.94;
-  let px = Math.max(6, fontSize) * SUPERSAMPLE;
+  const fontString = (px2) => `${italic}${weight} ${px2}px ${family}`;
+  let px = Math.max(6, fontSize) * scale * SUPERSAMPLE;
   let lines = [];
   for (let attempt = 0; attempt < 12; attempt++) {
-    ctx.font = `600 ${px}px ${family}`;
+    ctx.font = fontString(px);
     lines = wrapLines(ctx, text, maxTextWidth);
     const lineHeight2 = px * 1.2;
     if (lines.length * lineHeight2 <= canvas.height * 0.96 || px <= 6 * SUPERSAMPLE) {
@@ -55,15 +64,25 @@ function makeTextTexture(text, color, fontSize, footW, footH) {
     px *= 0.88;
   }
   ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = color;
+  ctx.fillStyle = effectiveColor;
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
-  ctx.font = `600 ${px}px ${family}`;
+  ctx.font = fontString(px);
   const lineHeight = px * 1.2;
   const blockHeight = lines.length * lineHeight;
   const startY = canvas.height / 2 - blockHeight / 2 + lineHeight / 2;
   for (let i = 0; i < lines.length; i++) {
-    ctx.fillText(lines[i], canvas.width / 2, startY + i * lineHeight);
+    const y = startY + i * lineHeight;
+    ctx.fillText(lines[i], canvas.width / 2, y);
+    if (emphasis?.underline) {
+      const w = ctx.measureText(lines[i]).width;
+      ctx.strokeStyle = effectiveColor;
+      ctx.lineWidth = Math.max(1, px * 0.06);
+      ctx.beginPath();
+      ctx.moveTo(canvas.width / 2 - w / 2, y + px * 0.32);
+      ctx.lineTo(canvas.width / 2 + w / 2, y + px * 0.32);
+      ctx.stroke();
+    }
   }
   const texture = new chunkB4QYQLZU_js.CanvasTexture(canvas);
   texture.colorSpace = chunkB4QYQLZU_js.SRGBColorSpace;
@@ -123,13 +142,20 @@ function addBlock(group, disposables, m) {
   }
   return geo;
 }
-function addLabel(group, disposables, m) {
+function buildLabelPlane(m, textStyle) {
   if (!m.text) {
-    return;
+    return null;
   }
-  const tex = makeTextTexture(m.text, m.textColor, m.fontSize, m.halfWidth * 2, m.halfHeight * 2);
+  const tex = makeTextTexture(
+    m.text,
+    m.textColor,
+    m.fontSize,
+    m.halfWidth * 2,
+    m.halfHeight * 2,
+    textStyle
+  );
   if (!tex) {
-    return;
+    return null;
   }
   const planeGeo = new chunkB4QYQLZU_js.PlaneGeometry(tex.worldWidth, tex.worldHeight);
   const planeMaterial = new chunkB4QYQLZU_js.MeshBasicMaterial({
@@ -142,8 +168,7 @@ function addLabel(group, disposables, m) {
   const offset = new chunkB4QYQLZU_js.Vector3(0, 0, m.depth + m.bevel + 0.4).applyEuler(euler);
   plane.position.set(m.position.x + offset.x, m.position.y + offset.y, m.position.z + offset.z);
   plane.rotation.copy(euler);
-  group.add(plane);
-  disposables.push(planeGeo, planeMaterial, tex.texture);
+  return { plane, disposables: [planeGeo, planeMaterial, tex.texture] };
 }
 function addConnectors(group, disposables, model) {
   for (const c of model.connectors) {
@@ -160,20 +185,48 @@ function addConnectors(group, disposables, model) {
     disposables.push(geo, material);
   }
 }
-function buildMeshGroup(model) {
-  const group = new chunkB4QYQLZU_js.Group();
-  const disposables = [];
-  for (const m of model.meshes) {
-    addBlock(group, disposables, m);
-    addLabel(group, disposables, m);
+function clearLabel(group, entry) {
+  if (entry.plane) {
+    group.remove(entry.plane);
   }
-  addConnectors(group, disposables, model);
+  for (const d of entry.disposables) {
+    d.dispose();
+  }
+  entry.plane = null;
+  entry.disposables = [];
+}
+function buildMeshGroup(model, textStyle) {
+  const group = new chunkB4QYQLZU_js.Group();
+  const blockDisposables = [];
+  const labelEntries = model.meshes.map((m) => {
+    addBlock(group, blockDisposables, m);
+    const built = buildLabelPlane(m, textStyle);
+    if (built) {
+      group.add(built.plane);
+    }
+    return { node: m, plane: built?.plane ?? null, disposables: built?.disposables ?? [] };
+  });
+  addConnectors(group, blockDisposables, model);
   return {
     group,
+    setTextStyle(style) {
+      for (const entry of labelEntries) {
+        clearLabel(group, entry);
+        const built = buildLabelPlane(entry.node, style);
+        if (built) {
+          group.add(built.plane);
+          entry.plane = built.plane;
+          entry.disposables = built.disposables;
+        }
+      }
+    },
     dispose() {
-      for (const d of disposables) {
+      for (const d of blockDisposables) {
         d.dispose();
       }
+      for (const entry of labelEntries) {
+        clearLabel(group, entry);
+      }
     }
   };
 }
@@ -245,7 +298,7 @@ function mountSmartArt3D(canvas, model, width, height, options = {}) {
   const fill = new chunkB4QYQLZU_js.DirectionalLight(16777215, 0.3);
   fill.position.set(cx - radius, cy - radius * 0.6, cz + dist * 0.6);
   scene.add(fill);
-  const built = buildMeshGroup(model);
+  const built = buildMeshGroup(model, options.textStyle);
   scene.add(built.group);
   let controls = null;
   const enableControls = (on) => {
@@ -286,6 +339,9 @@ function mountSmartArt3D(canvas, model, width, height, options = {}) {
     setInteractive(on) {
       enableControls(on);
     },
+    setTextStyle(style) {
+      built.setTextStyle(style);
+    },
     dispose() {
       disposed = true;
       cancelAnimationFrame(frame);
@@ -299,17 +355,20 @@ function SmartArt3DScene({
   model,
   width,
   height,
-  interactive
+  interactive,
+  textStyle
 }) {
   const canvasRef = react.useRef(null);
   const handleRef = react.useRef(null);
+  const textStyleRef = chunkDNR6CH6I_js.useLatestRef(textStyle);
   react.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
     }
     const handle = mountSmartArt3D(canvas, model, width, height, {
-      interactive
+      interactive,
+      textStyle: textStyleRef.current
     });
     handleRef.current = handle;
     return () => {
@@ -323,6 +382,9 @@ function SmartArt3DScene({
   react.useEffect(() => {
     handleRef.current?.setInteractive(interactive);
   }, [interactive]);
+  react.useEffect(() => {
+    handleRef.current?.setTextStyle(textStyle);
+  }, [textStyle]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "canvas",
     {

package/dist/{SmartArt3DScene-XCFVGCXE.mjs → SmartArt3DScene-ODKCGJBO.mjs}

@@ -1,3 +1,4 @@
+import { useLatestRef } from './chunk-T6GFCLSM.mjs';
 import { OrbitControls } from './chunk-3CBDTD46.mjs';
 import { WebGLRenderer, Scene, Color, PerspectiveCamera, AmbientLight, DirectionalLight, Group, MeshStandardMaterial, Mesh, EdgesGeometry, LineBasicMaterial, LineSegments, PlaneGeometry, MeshBasicMaterial, Euler, Vector3, BufferGeometry, Line, Shape, ExtrudeGeometry, CanvasTexture, SRGBColorSpace, LinearFilter, RepeatWrapping } from './chunk-XBMKFZVP.mjs';
 import './chunk-XGB3TDIC.mjs';
@@ -26,10 +27,17 @@ function wrapLines(ctx, text, maxWidth) {
   lines.push(line);
   return lines;
 }
-function makeTextTexture(text, color, fontSize, footW, footH) {
+function resolveEmphasisFont(color, emphasis) {
+  const weight = emphasis?.bold === void 0 ? "600" : emphasis.bold ? "700" : "400";
+  const italic = emphasis?.italic ? "italic " : "";
+  const scale = typeof emphasis?.fontScale === "number" && Number.isFinite(emphasis.fontScale) && emphasis.fontScale > 0 ? emphasis.fontScale : 1;
+  return { weight, italic, color: emphasis?.color ?? color, scale };
+}
+function makeTextTexture(text, color, fontSize, footW, footH, emphasis) {
   if (typeof document === "undefined" || !text.trim() || footW <= 0 || footH <= 0) {
     return null;
   }
+  const { weight, italic, color: effectiveColor, scale } = resolveEmphasisFont(color, emphasis);
   const worldWidth = footW * FILL;
   const worldHeight = footH * FILL;
   const canvas = document.createElement("canvas");
@@ -41,10 +49,11 @@ function makeTextTexture(text, color, fontSize, footW, footH) {
   }
   const family = "system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
   const maxTextWidth = canvas.width * 0.94;
-  let px = Math.max(6, fontSize) * SUPERSAMPLE;
+  const fontString = (px2) => `${italic}${weight} ${px2}px ${family}`;
+  let px = Math.max(6, fontSize) * scale * SUPERSAMPLE;
   let lines = [];
   for (let attempt = 0; attempt < 12; attempt++) {
-    ctx.font = `600 ${px}px ${family}`;
+    ctx.font = fontString(px);
     lines = wrapLines(ctx, text, maxTextWidth);
     const lineHeight2 = px * 1.2;
     if (lines.length * lineHeight2 <= canvas.height * 0.96 || px <= 6 * SUPERSAMPLE) {
@@ -53,15 +62,25 @@ function makeTextTexture(text, color, fontSize, footW, footH) {
     px *= 0.88;
   }
   ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = color;
+  ctx.fillStyle = effectiveColor;
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
-  ctx.font = `600 ${px}px ${family}`;
+  ctx.font = fontString(px);
   const lineHeight = px * 1.2;
   const blockHeight = lines.length * lineHeight;
   const startY = canvas.height / 2 - blockHeight / 2 + lineHeight / 2;
   for (let i = 0; i < lines.length; i++) {
-    ctx.fillText(lines[i], canvas.width / 2, startY + i * lineHeight);
+    const y = startY + i * lineHeight;
+    ctx.fillText(lines[i], canvas.width / 2, y);
+    if (emphasis?.underline) {
+      const w = ctx.measureText(lines[i]).width;
+      ctx.strokeStyle = effectiveColor;
+      ctx.lineWidth = Math.max(1, px * 0.06);
+      ctx.beginPath();
+      ctx.moveTo(canvas.width / 2 - w / 2, y + px * 0.32);
+      ctx.lineTo(canvas.width / 2 + w / 2, y + px * 0.32);
+      ctx.stroke();
+    }
   }
   const texture = new CanvasTexture(canvas);
   texture.colorSpace = SRGBColorSpace;
@@ -121,13 +140,20 @@ function addBlock(group, disposables, m) {
   }
   return geo;
 }
-function addLabel(group, disposables, m) {
+function buildLabelPlane(m, textStyle) {
   if (!m.text) {
-    return;
+    return null;
   }
-  const tex = makeTextTexture(m.text, m.textColor, m.fontSize, m.halfWidth * 2, m.halfHeight * 2);
+  const tex = makeTextTexture(
+    m.text,
+    m.textColor,
+    m.fontSize,
+    m.halfWidth * 2,
+    m.halfHeight * 2,
+    textStyle
+  );
   if (!tex) {
-    return;
+    return null;
   }
   const planeGeo = new PlaneGeometry(tex.worldWidth, tex.worldHeight);
   const planeMaterial = new MeshBasicMaterial({
@@ -140,8 +166,7 @@ function addLabel(group, disposables, m) {
   const offset = new Vector3(0, 0, m.depth + m.bevel + 0.4).applyEuler(euler);
   plane.position.set(m.position.x + offset.x, m.position.y + offset.y, m.position.z + offset.z);
   plane.rotation.copy(euler);
-  group.add(plane);
-  disposables.push(planeGeo, planeMaterial, tex.texture);
+  return { plane, disposables: [planeGeo, planeMaterial, tex.texture] };
 }
 function addConnectors(group, disposables, model) {
   for (const c of model.connectors) {
@@ -158,20 +183,48 @@ function addConnectors(group, disposables, model) {
     disposables.push(geo, material);
   }
 }
-function buildMeshGroup(model) {
-  const group = new Group();
-  const disposables = [];
-  for (const m of model.meshes) {
-    addBlock(group, disposables, m);
-    addLabel(group, disposables, m);
+function clearLabel(group, entry) {
+  if (entry.plane) {
+    group.remove(entry.plane);
   }
-  addConnectors(group, disposables, model);
+  for (const d of entry.disposables) {
+    d.dispose();
+  }
+  entry.plane = null;
+  entry.disposables = [];
+}
+function buildMeshGroup(model, textStyle) {
+  const group = new Group();
+  const blockDisposables = [];
+  const labelEntries = model.meshes.map((m) => {
+    addBlock(group, blockDisposables, m);
+    const built = buildLabelPlane(m, textStyle);
+    if (built) {
+      group.add(built.plane);
+    }
+    return { node: m, plane: built?.plane ?? null, disposables: built?.disposables ?? [] };
+  });
+  addConnectors(group, blockDisposables, model);
   return {
     group,
+    setTextStyle(style) {
+      for (const entry of labelEntries) {
+        clearLabel(group, entry);
+        const built = buildLabelPlane(entry.node, style);
+        if (built) {
+          group.add(built.plane);
+          entry.plane = built.plane;
+          entry.disposables = built.disposables;
+        }
+      }
+    },
     dispose() {
-      for (const d of disposables) {
+      for (const d of blockDisposables) {
         d.dispose();
       }
+      for (const entry of labelEntries) {
+        clearLabel(group, entry);
+      }
     }
   };
 }
@@ -243,7 +296,7 @@ function mountSmartArt3D(canvas, model, width, height, options = {}) {
   const fill = new DirectionalLight(16777215, 0.3);
   fill.position.set(cx - radius, cy - radius * 0.6, cz + dist * 0.6);
   scene.add(fill);
-  const built = buildMeshGroup(model);
+  const built = buildMeshGroup(model, options.textStyle);
   scene.add(built.group);
   let controls = null;
   const enableControls = (on) => {
@@ -284,6 +337,9 @@ function mountSmartArt3D(canvas, model, width, height, options = {}) {
     setInteractive(on) {
       enableControls(on);
     },
+    setTextStyle(style) {
+      built.setTextStyle(style);
+    },
     dispose() {
       disposed = true;
       cancelAnimationFrame(frame);
@@ -297,17 +353,20 @@ function SmartArt3DScene({
   model,
   width,
   height,
-  interactive
+  interactive,
+  textStyle
 }) {
   const canvasRef = useRef(null);
   const handleRef = useRef(null);
+  const textStyleRef = useLatestRef(textStyle);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) {
       return;
     }
     const handle = mountSmartArt3D(canvas, model, width, height, {
-      interactive
+      interactive,
+      textStyle: textStyleRef.current
     });
     handleRef.current = handle;
     return () => {
@@ -321,6 +380,9 @@ function SmartArt3DScene({
   useEffect(() => {
     handleRef.current?.setInteractive(interactive);
   }, [interactive]);
+  useEffect(() => {
+    handleRef.current?.setTextStyle(textStyle);
+  }, [textStyle]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {

package/dist/{SurfaceChart3DScene-JUXRC3K2.mjs → SurfaceChart3DScene-ARE7OBFI.mjs}

@@ -1,24 +1,33 @@
-import { mountSurfaceChart3D } from './chunk-6IMB5DNJ.mjs';
+import { useStableChart3DInteraction, useLatestRef } from './chunk-T6GFCLSM.mjs';
+import { mountSurfaceChart3D } from './chunk-UKPGYJ7G.mjs';
 import './chunk-XGB3TDIC.mjs';
 import { useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 function SurfaceChart3DScene({
-  options
+  options,
+  interaction,
+  selectedPart = null,
+  textStyle
 }) {
   const containerRef = useRef(null);
   const handleRef = useRef(null);
+  const stableInteraction = useStableChart3DInteraction(interaction);
+  const selectedPartRef = useLatestRef(selectedPart);
+  const textStyleRef = useLatestRef(textStyle);
   useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
     }
     let disposed = false;
-    void mountSurfaceChart3D(container, options).then((handle) => {
+    void mountSurfaceChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {
         handleRef.current = handle;
+        handle.setSelectedPart(selectedPartRef.current);
+        handle.setTextStyle(textStyleRef.current);
       }
       return void 0;
     });
@@ -27,10 +36,16 @@ function SurfaceChart3DScene({
       handleRef.current?.dispose();
       handleRef.current = null;
     };
-  }, [options]);
+  }, [options, stableInteraction]);
   useEffect(() => {
     handleRef.current?.resize(options.width, options.height);
   }, [options.width, options.height]);
+  useEffect(() => {
+    handleRef.current?.setSelectedPart(selectedPart);
+  }, [selectedPart]);
+  useEffect(() => {
+    handleRef.current?.setTextStyle(textStyle);
+  }, [textStyle]);
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/{SurfaceChart3DScene-5IER6VFW.js → SurfaceChart3DScene-SFIOK3G3.js}

@@ -1,26 +1,35 @@
 'use strict';
 
-var chunkSN5EUDIT_js = require('./chunk-SN5EUDIT.js');
+var chunkDNR6CH6I_js = require('./chunk-DNR6CH6I.js');
+var chunk2Q2NFPXA_js = require('./chunk-2Q2NFPXA.js');
 require('./chunk-4VNS5WPM.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function SurfaceChart3DScene({
-  options
+  options,
+  interaction,
+  selectedPart = null,
+  textStyle
 }) {
   const containerRef = react.useRef(null);
   const handleRef = react.useRef(null);
+  const stableInteraction = chunkDNR6CH6I_js.useStableChart3DInteraction(interaction);
+  const selectedPartRef = chunkDNR6CH6I_js.useLatestRef(selectedPart);
+  const textStyleRef = chunkDNR6CH6I_js.useLatestRef(textStyle);
   react.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
       return;
     }
     let disposed = false;
-    void chunkSN5EUDIT_js.mountSurfaceChart3D(container, options).then((handle) => {
+    void chunk2Q2NFPXA_js.mountSurfaceChart3D(container, options, stableInteraction).then((handle) => {
       if (disposed) {
         handle.dispose();
       } else {
         handleRef.current = handle;
+        handle.setSelectedPart(selectedPartRef.current);
+        handle.setTextStyle(textStyleRef.current);
       }
       return void 0;
     });
@@ -29,10 +38,16 @@ function SurfaceChart3DScene({
       handleRef.current?.dispose();
       handleRef.current = null;
     };
-  }, [options]);
+  }, [options, stableInteraction]);
   react.useEffect(() => {
     handleRef.current?.resize(options.width, options.height);
   }, [options.width, options.height]);
+  react.useEffect(() => {
+    handleRef.current?.setSelectedPart(selectedPart);
+  }, [selectedPart]);
+  react.useEffect(() => {
+    handleRef.current?.setTextStyle(textStyle);
+  }, [textStyle]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {