@daoyi/nmtl-ui 2.0.1-beta.129 → 2.0.1-beta.130

package/lib/components/SNA.js

@@ -1400,10 +1400,18 @@ function zoom() {
   return zoom;
 }
 
-var css_248z = ".SNA {\n  overflow: hidden;\n  object-fit: contain;\n  position: relative;\n  font-size: 0.75rem;\n  width: 100%;\n}\n.SNA--smallSize .node {\n  padding-top: 8px;\n  font-size: 0.75rem;\n  width: 3rem;\n  height: 3rem;\n  overflow: hidden;\n  white-space: pre-wrap;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n.SNA .node {\n  background-color: #4a4e69;\n  border-radius: 50%;\n  color: #fff;\n  font-size: 1.25rem;\n  font-weight: 500;\n  height: 54px;\n  width: 54px;\n  padding-top: 15px;\n  position: absolute;\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: grab;\n}\n.SNA .links line {\n  stroke: #c7bfb4;\n  stroke-width: 2;\n}\n.SNA .mainNode {\n  fill: #4e3a16;\n}\n.SNA .person {\n  fill: #867b3a;\n}\n.SNA .publication {\n  fill: #825c0d;\n}\n.SNA .article {\n  fill: #afafaf;\n}\n.SNA .keyword {\n  fill: #fcfae8;\n}\n.SNA .org {\n  fill: #000000;\n}\n.SNA #network-graph svg {\n  width: 100%;\n  height: 100%;\n}\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px;\n  }\n  .SNA .node {\n    background-color: #4a4e69;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 0.0625rem;\n    font-weight: 500;\n    height: 44px;\n    width: 44px;\n    padding-top: 12px;\n    position: absolute;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: grab;\n  }\n}\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px;\n  }\n}";
+var css_248z = "@charset \"UTF-8\";\n.SNA {\n  overflow: hidden;\n  object-fit: contain;\n  position: relative;\n  font-size: 0.75rem;\n  width: 100%;\n  /* 效能：MUI CssBaseline 的全域規則 `*, *::before, *::after { box-sizing: inherit }` 用了 inherit，\n     Chrome 對帶 inherit 的樣式無法重用快取；模擬每個 tick 改寫上千個 SVG 元素的 cx/cy/x/y/d，\n     每個元素都得完整重算樣式（ra 1,427 節點每格繪製約 2–4 秒）。\n     box-sizing 對 SVG 內部元素沒有作用，這裡改成固定值蓋掉 inherit，畫面不變、每格降到約 70 ms（micro-bench 實測） */\n}\n.SNA--smallSize .node {\n  padding-top: 8px;\n  font-size: 0.75rem;\n  width: 3rem;\n  height: 3rem;\n  overflow: hidden;\n  white-space: pre-wrap;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n.SNA .node {\n  background-color: #4a4e69;\n  border-radius: 50%;\n  color: #fff;\n  font-size: 1.25rem;\n  font-weight: 500;\n  height: 54px;\n  width: 54px;\n  padding-top: 15px;\n  position: absolute;\n  text-align: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: grab;\n}\n.SNA .links line {\n  stroke: #c7bfb4;\n  stroke-width: 2;\n}\n.SNA .mainNode {\n  fill: #4e3a16;\n}\n.SNA .person {\n  fill: #867b3a;\n}\n.SNA .publication {\n  fill: #825c0d;\n}\n.SNA .article {\n  fill: #afafaf;\n}\n.SNA .keyword {\n  fill: #fcfae8;\n}\n.SNA .org {\n  fill: #000000;\n}\n.SNA #network-graph svg {\n  width: 100%;\n  height: 100%;\n}\n.SNA #sna-graph svg * {\n  box-sizing: content-box;\n}\n\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px;\n  }\n  .SNA .node {\n    background-color: #4a4e69;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 0.0625rem;\n    font-weight: 500;\n    height: 44px;\n    width: 44px;\n    padding-top: 12px;\n    position: absolute;\n    text-align: center;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: grab;\n  }\n}\n@media only screen and (max-width: 484px) {\n  .SNA {\n    margin-left: 0px;\n  }\n}";
 styleInject(css_248z);
 
 /* eslint-disable indent */
+
+/* 每張 svg 對應的 force simulation：重設、資料變更、卸載時要停掉，
+   否則舊圖已移除，simulation 仍在背景 tick（原本 renderSNA 從未停止舊的） */
+var simulations = new WeakMap();
+var stopSimulation = function stopSimulation(svgNode) {
+  var simulation = svgNode && simulations.get(svgNode);
+  if (simulation) simulation.stop();
+};
 var SNA = function SNA(props) {
   // common
   var className = props.className,
@@ -1478,7 +1486,13 @@ var SNA = function SNA(props) {
       d.fx = event.x > contentWidth - 10 || event.x < 20 ? d.x : event.x;
       d.fy = event.y > contentHeight - 10 || event.y < 20 ? d.y : event.y;
     }
-    return drag().on('start', dragstarted).on('drag', dragged);
+
+    /* 效能：拖曳結束讓模擬降溫停下（d3 慣例）；節點仍固定在放開的位置（fx/fy 不清除，維持原行為）。
+       原本沒有 end：alphaTarget 停在 0.3，拖過一次模擬就永遠不會結束，每個 tick 持續重排整張圖 */
+    function dragended() {
+      if (!event.active) simulation.alphaTarget(0);
+    }
+    return drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
   };
   var calculateCurve = function calculateCurve(source, target, curveLen) {
     var mx = (target.x + source.x) * 0.5;
@@ -1526,7 +1540,7 @@ var SNA = function SNA(props) {
     }).strength(1).iterations(10)).force('x', x(contentWidth / 2)).force('y', y(contentHeight / 2)).force('radial', radial(100, contentWidth / 1.5, contentHeight / 1.5));
 
     /* 效能：SVG 先建在未掛上文件的節點，全部節點／標籤／連線建好後才一次掛進 #sna-graph（見 init 結尾）。
-       Adobe Fonts 動態子集 kit（abo/ada/hr/ra 的 index.html 載入）在 body 掛 MutationObserver，
+       Adobe Fonts 動態子集 kit（目前實際只有 ra 的 index.html 載入）在 body 掛 MutationObserver，
        每筆 mutation 都用 TreeWalker 重掃目標整棵子樹收集文字；d3 逐一 append 進 live DOM 時，
        每加一個節點就產生一筆以父層 <g> 為目標的紀錄 → O(n²)，ra 1,428 個節點首次載入主執行緒凍結 39–73 秒。
        離線建好再掛上，kit 只收到一筆紀錄、只掃一次 */
@@ -1586,10 +1600,16 @@ var SNA = function SNA(props) {
     /* WCAG 1.4.4 / Freego CS2140401C：SVG 文字字型尺寸改相對單位（14px→0.875rem） */.style('font-size', '0.875rem').text(function (d) {
       return d.name;
     });
-    var edgepaths = g.selectAll('.edgepath').data(links).enter().append('path').attr('class', 'edgepath').attr('fill-opacity', 0).attr('stroke-opacity', 0).attr('id', function (d, i) {
+
+    /* 效能：邊標籤（textPath）只為有文字的連線建立。edgepath 的 d 每個 tick 都重寫，瀏覽器就得重排所有參照它的 textPath；
+       各站組出的連線多半沒有 property（ra 預設 1,437 條全空），原本每個 tick 白白重排上千個空標籤 */
+    var labeledLinks = links.filter(function (d) {
+      return d.property !== undefined && d.property !== null && "".concat(d.property).trim() !== '';
+    });
+    var edgepaths = g.selectAll('.edgepath').data(labeledLinks).enter().append('path').attr('class', 'edgepath').attr('fill-opacity', 0).attr('stroke-opacity', 0).attr('id', function (d, i) {
       return "edgepath".concat(i);
     }).style('pointer-events', 'none');
-    var edgelabels = g.selectAll('.edgelabel').data(links).enter().append('text').style('pointer-events', 'none').attr('class', 'edgelabel')
+    var edgelabels = g.selectAll('.edgelabel').data(labeledLinks).enter().append('text').style('pointer-events', 'none').attr('class', 'edgelabel')
     /* rem 需以 style 設定（SVG presentation attribute 對 rem 支援不一致） */.style('font-size', edgeLabelSize).attr('fill', '#aaa').attr('visibility', 'visible').attr('key', function (d) {
       return d.type;
     }).attr('id', function (d, i) {
@@ -1636,6 +1656,7 @@ var SNA = function SNA(props) {
     });
 
     // 一次掛上（原因見上方建立 svg 處）；simulation 的 tick 由 d3-timer 排在之後的 frame，掛上前不會跑
+    simulations.set(svg.node(), simulation$1);
     var container = document.getElementById('sna-graph');
     if (container) container.appendChild(svg.node());
   };
@@ -1643,6 +1664,7 @@ var SNA = function SNA(props) {
     if (SNAData && SNAData.nodes && SNAData.nodes.length > 0) {
       var div = document.getElementById('sna-graph');
       if (div && div.childNodes[0]) {
+        stopSimulation(div.childNodes[0]);
         div.removeChild(div.childNodes[0]);
       }
       init(SNAData);
@@ -1652,6 +1674,11 @@ var SNA = function SNA(props) {
   // 資料異動或全螢幕切換，重新渲染網絡圖
   useEffect(function () {
     renderSNA();
+    var div = document.getElementById('sna-graph');
+    // 卸載或資料變更前停掉目前這張圖的 simulation（重設按鈕換過的 svg 也在同一個容器內）
+    return function () {
+      return stopSimulation(div && div.firstChild);
+    };
   }, [SNAData]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames('SNA', {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@daoyi/nmtl-ui",
 	"packageManager": "pnpm@10.34.5",
-	"version": "2.0.1-beta.129",
+	"version": "2.0.1-beta.130",
 	"description": "This project is to be used as a starter kit for building React component using Storybook and Rollup",
 	"author": "daoyi",
 	"main": "lib/index.js",