@teselagen/ove 0.7.6 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,12 +12,10 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.27",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.7.10",
+    "@teselagen/ui": "0.7.11",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
-    "@blueprintjs/core": "3.54.0",
-    "@blueprintjs/datetime": "^3.24.1",
     "@blueprintjs/icons": "3.33.0",
     "@blueprintjs/select": "3.18.11",
     "@dnd-kit/core": "^6.1.0",
@@ -71,7 +69,6 @@
     "react-dom": "^18.3.1",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
-    "react-markdown": "9.0.1",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
@@ -83,7 +80,6 @@
     "redux-act": "^1.8.0",
     "redux-form": "^8.3.10",
     "redux-thunk": "2.4.1",
-    "remark-gfm": "^4.0.0",
     "reselect": "^4.1.7",
     "shortid": "^2.2.16",
     "tg-use-local-storage-state": "^16.0.3",

package/src/CircularView/RotateCircularViewSlider.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useDebouncedCallback } from "use-debounce";
 import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
 
@@ -9,15 +9,23 @@ export function RotateCircularViewSlider({
   zoomLevel,
   maxZoomLevel,
   bindOutsideChangeHelper,
-  smallSlider
+  smallSlider,
+  editorName
 }) {
   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(".veCircularView .circularViewSvg");
+    svgEleRef.current = svgEle;
+  }, [editorName]);
+
   const showLabelsDebounced = useDebouncedCallback(
-    () => {
+    el => {
       try {
-        const el = target.current
-          .closest(`.veCircularView`)
-          .querySelector(`.circularViewSvg`);
         if (el) el.classList.remove("veHideLabels");
         else {
           console.error(`whoops we shouldn't be here`);
@@ -46,18 +54,19 @@ export function RotateCircularViewSlider({
         bindOutsideChangeHelper={bindOutsideChangeHelper}
         onChange={_val => {
           const val = 360 - _val;
-          const el = target.current
-            .closest(`.veCircularView`)
-            .querySelector(`.circularViewSvg`);
-          const innerEl = target.current
-            .closest(`.veCircularView`)
-            .querySelector(`.circularViewSvg g`);
+          if (!svgEleRef.current) {
+            svgEleRef.current = document
+              .querySelector(`.veEditor.${editorName}`)
+              ?.querySelector(".veCircularView .circularViewSvg");
+          }
+          const el = svgEleRef.current;
+          const innerEl = el?.querySelector("g");
           innerEl.style.transform = `rotate(${val}deg)`;
           setRotationRadians((val * Math.PI) / 180);
           if (zoomLevel <= 1) {
             el.classList.add("veHideLabels");
           }
-          showLabelsDebounced();
+          showLabelsDebounced(el);
         }}
         smallSlider
         passedRef={target}
@@ -76,7 +85,7 @@ export function RotateCircularViewSlider({
         // initialValue={initialRotation || 0}
         max={360}
         min={0}
-      ></UncontrolledSliderWithPlusMinusBtns>
+      />
     </div>
   );
 }

package/src/CircularView/index.js

@@ -755,6 +755,7 @@ export function CircularView(props) {
           smallSlider={smallSlider}
           maxZoomLevel={maxZoomLevel}
           setRotationRadians={setRotationRadians}
+          editorName={editorName}
         ></RotateCircularViewSlider>
       )}
       {withZoomCircularView && hasZoomableLength && (