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

package/lib/components/BarChart.js

@@ -1,7 +1,7 @@
 import React__default, { useEffect } from 'react';
 import { c as classNames } from './index-b76a85f4.js';
 import PropTypes from 'prop-types';
-import { g as constant$1, h as interpolateNumber, j as color, k as interpolateRgb, l as interpolateString, n as exponent, o as ordinal, p as initRange, r as map, s as slice$1, u as bisectRight, v as formatSpecifier, w as formatPrefix, x as format, d as d3Select } from './transform-3a04288b.js';
+import { g as constant$1, h as interpolateNumber, j as color, k as interpolateRgb, l as interpolateString, n as exponent, o as ordinal, p as initRange, r as map, u as slice$1, v as bisectRight, w as formatSpecifier, x as formatPrefix, y as format, s as select } from './transform-849a452c.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 
 function sequence(start, stop, step) {
@@ -666,8 +666,8 @@ var BarChart = function BarChart(_ref) {
         maxValue = parseInt(item.count, 10);
       }
     });
-    d3Select('div#barChart').html('');
-    var svg = d3Select('#barChart').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', "translate(".concat(margin.left, ",").concat(margin.top, ")"));
+    select('div#barChart').html('');
+    var svg = select('#barChart').append('svg').attr('width', width + margin.left + margin.right).attr('height', height + margin.top + margin.bottom).append('g').attr('transform', "translate(".concat(margin.left, ",").concat(margin.top, ")"));
     // X axis
     var x = band().range([0, width]).domain(data.map(function (d) {
       return d.year;

package/lib/components/SNA.js

@@ -1,7 +1,7 @@
 import React__default, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classNames } from './index-b76a85f4.js';
-import { e as event, d as d3Select, a as dispatch, c as customEvent, D as DragEvent, q as quadtree, m as map, t as timer, T as Transform, i as identity, b as interrupt, o as ordinal, f as category10 } from './transform-3a04288b.js';
+import { s as select, c as creator, e as event, d as dispatch, a as customEvent, D as DragEvent, q as quadtree, m as map, t as timer, T as Transform, i as identity, b as interrupt, o as ordinal, f as category10 } from './transform-849a452c.js';
 import { E as ExtraTools } from './ExtraTools-2691c13e.js';
 import { getIntl } from './globalConfig';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
@@ -11,6 +11,10 @@ import '@material-ui/core';
 import './Tooltip-6ebfa9c1.js';
 import './dataExport-a9e3fae1.js';
 
+function d3Create(name) {
+  return select(creator(name).call(document.documentElement));
+}
+
 function sourceEvent() {
   var current = event, source;
   while (source = current.sourceEvent) current = source;
@@ -60,7 +64,7 @@ function noevent$1() {
 
 function dragDisable(view) {
   var root = view.document.documentElement,
-      selection = d3Select(view).on("dragstart.drag", noevent$1, true);
+      selection = select(view).on("dragstart.drag", noevent$1, true);
   if ("onselectstart" in root) {
     selection.on("selectstart.drag", noevent$1, true);
   } else {
@@ -71,7 +75,7 @@ function dragDisable(view) {
 
 function yesdrag(view, noclick) {
   var root = view.document.documentElement,
-      selection = d3Select(view).on("dragstart.drag", null);
+      selection = select(view).on("dragstart.drag", null);
   if (noclick) {
     selection.on("click.drag", noevent$1, true);
     setTimeout(function() { selection.on("click.drag", null); }, 0);
@@ -136,7 +140,7 @@ function drag() {
     if (touchending || !filter.apply(this, arguments)) return;
     var gesture = beforestart("mouse", container.apply(this, arguments), mouse, this, arguments);
     if (!gesture) return;
-    d3Select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
+    select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
     dragDisable(event.view);
     nopropagation$1();
     mousemoving = false;
@@ -155,7 +159,7 @@ function drag() {
   }
 
   function mouseupped() {
-    d3Select(event.view).on("mousemove.drag mouseup.drag", null);
+    select(event.view).on("mousemove.drag mouseup.drag", null);
     yesdrag(event.view, mousemoving);
     noevent$1();
     gestures.mouse("end");
@@ -1228,7 +1232,7 @@ function zoom() {
   function mousedowned() {
     if (touchending || !filter.apply(this, arguments)) return;
     var g = gesture(this, arguments, true),
-        v = d3Select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
+        v = select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
         p = mouse(this),
         x0 = event.clientX,
         y0 = event.clientY;
@@ -1265,8 +1269,8 @@ function zoom() {
         t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, arguments), translateExtent);
 
     noevent();
-    if (duration > 0) d3Select(this).transition().duration(duration).call(schedule, t1, p0);
-    else d3Select(this).call(zoom.transform, t1);
+    if (duration > 0) select(this).transition().duration(duration).call(schedule, t1, p0);
+    else select(this).call(zoom.transform, t1);
   }
 
   function touchstarted() {
@@ -1342,7 +1346,7 @@ function zoom() {
       g.end();
       // If this was a dbltap, reroute to the (optional) dblclick.zoom handler.
       if (g.taps === 2) {
-        var p = d3Select(this).on("dblclick.zoom");
+        var p = select(this).on("dblclick.zoom");
         if (p) p.apply(this, arguments);
       }
     }
@@ -1520,7 +1524,13 @@ var SNA = function SNA(props) {
     }).distance(50)).force('charge', manyBody().strength(-200).distanceMax(1000)).force('center', center(contentWidth / 2, contentHeight / 2)).force('collide', collide().radius(function () {
       return nodeRadius + 5;
     }).strength(1).iterations(10)).force('x', x(contentWidth / 2)).force('y', y(contentHeight / 2)).force('radial', radial(100, contentWidth / 1.5, contentHeight / 1.5));
-    var svg = d3Select('#sna-graph').append('svg').attr('viewBox', [0, 0, contentWidth, contentHeight]).style('background-color', backgroundColor);
+
+    /* 效能：SVG 先建在未掛上文件的節點，全部節點／標籤／連線建好後才一次掛進 #sna-graph（見 init 結尾）。
+       Adobe Fonts 動態子集 kit（abo/ada/hr/ra 的 index.html 載入）在 body 掛 MutationObserver，
+       每筆 mutation 都用 TreeWalker 重掃目標整棵子樹收集文字；d3 逐一 append 進 live DOM 時，
+       每加一個節點就產生一筆以父層 <g> 為目標的紀錄 → O(n²)，ra 1,428 個節點首次載入主執行緒凍結 39–73 秒。
+       離線建好再掛上，kit 只收到一筆紀錄、只掃一次 */
+    var svg = d3Create('svg').attr('viewBox', [0, 0, contentWidth, contentHeight]).style('background-color', backgroundColor);
     svg.append('defs').append('marker').attr('id', 'arrowhead').attr('viewBox', arrowViewBox).attr('refX', nodeRadius * 2 + nodeRadius * arrowPercent).attr('refY', 0).attr('orient', 'auto').attr('markerWidth', nodeRadius * (1 + arrowPercent)).attr('markerHeight', nodeRadius * (1 + arrowPercent)).attr('xoverflow', 'visible').append('svg:path').attr('d', arrowPath).attr('fill', '#999').style('stroke', 'none');
     // 增加一層g用來包住所有的物件，並對此g加入縮放功能
     g = svg.append('g');
@@ -1624,6 +1634,10 @@ var SNA = function SNA(props) {
         return getLineCurve(d.source, d.target, lineRaduis);
       });
     });
+
+    // 一次掛上（原因見上方建立 svg 處）；simulation 的 tick 由 d3-timer 排在之後的 frame，掛上前不會跑
+    var container = document.getElementById('sna-graph');
+    if (container) container.appendChild(svg.node());
   };
   var renderSNA = function renderSNA() {
     if (SNAData && SNAData.nodes && SNAData.nodes.length > 0) {

package/lib/components/{transform-3a04288b.js → transform-849a452c.js}

@@ -988,7 +988,7 @@ Selection$1.prototype = selection.prototype = {
   dispatch: selection_dispatch
 };
 
-function d3Select(selector) {
+function select(selector) {
   return typeof selector === "string"
       ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
       : new Selection$1([[selector]], root);
@@ -5472,4 +5472,4 @@ Transform.prototype = {
 
 var identity = new Transform(1, 0, 0);
 
-export { DragEvent as D, Transform as T, dispatch as a, interrupt as b, customEvent as c, d3Select as d, event as e, category10 as f, constant as g, interpolateNumber as h, identity as i, color as j, interpolateRgb as k, interpolateString as l, map$2 as m, exponent as n, ordinal as o, initRange as p, quadtree as q, map as r, slice as s, timer as t, bisectRight as u, formatSpecifier as v, formatPrefix as w, format as x };
+export { DragEvent as D, Transform as T, customEvent as a, interrupt as b, creator as c, dispatch as d, event as e, category10 as f, constant as g, interpolateNumber as h, identity as i, color as j, interpolateRgb as k, interpolateString as l, map$2 as m, exponent as n, ordinal as o, initRange as p, quadtree as q, map as r, select as s, timer as t, slice as u, bisectRight as v, formatSpecifier as w, formatPrefix as x, format as y };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@daoyi/nmtl-ui",
 	"packageManager": "pnpm@10.34.5",
-	"version": "2.0.1-beta.128",
+	"version": "2.0.1-beta.129",
 	"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",