Merge pull request #129 from TeselaGen/fix-simple-linear-circular-seq…

…uence-view fix: Pass editor name to simplelinearcircularSequenceView component
TeselaGen · Jan 22, 2025 · d4c1e71 · d4c1e71
2 parents 59052b9 + 7a945f6
commit d4c1e71
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/packages/ove/src/CircularView/RotateCircularViewSlider.js b/packages/ove/src/CircularView/RotateCircularViewSlider.js
@@ -12,16 +12,17 @@ export function RotateCircularViewSlider({
   smallSlider,
   editorName
 }) {
+  const mainSelector = editorName ? `.veEditor.${editorName}` : ".veEditor";
   const target = React.useRef();
   const svgEleRef = React.useRef();
 
   useEffect(() => {
     // use document.querySelector so that the code can still work after changing the parent node of this component
     const svgEle = document
-      .querySelector(`.veEditor.${editorName}`)
+      .querySelector(mainSelector)
       ?.querySelector(".veCircularView .circularViewSvg");
     svgEleRef.current = svgEle;
-  }, [editorName]);
+  }, [editorName, mainSelector]);
 
   const showLabelsDebounced = useDebouncedCallback(
     el => {
@@ -56,10 +57,11 @@ export function RotateCircularViewSlider({
           const val = 360 - _val;
           if (!svgEleRef.current) {
             svgEleRef.current = document
-              .querySelector(`.veEditor.${editorName}`)
+              .querySelector(mainSelector)
               ?.querySelector(".veCircularView .circularViewSvg");
           }
           const el = svgEleRef.current;
+          if (!el) return;
           const innerEl = el?.querySelector("g");
           innerEl.style.transform = `rotate(${val}deg)`;
           setRotationRadians((val * Math.PI) / 180);

diff --git a/packages/ove/src/SimpleCircularOrLinearView.js b/packages/ove/src/SimpleCircularOrLinearView.js
@@ -46,7 +46,8 @@ export default props => {
     withFullscreen,
     selectionLayer,
     selectionLayerUpdate,
-    caretPositionUpdate
+    caretPositionUpdate,
+    editorName = "tg-simple-dna-view"
   } = props;
   const [previewType, setPreviewType] = useState(
     _sequenceData.circular ? "circular" : "linear"
@@ -216,7 +217,7 @@ export default props => {
         <Component
           {...{
             showCicularViewInternalLabels: true,
-            className: "tg-simple-dna-view veEditor",
+            className: `${editorName} veEditor tg-simple-dna-view`,
             width: 300,
             height: 300,
             noWarnings,