@cardenelabs/cdl 0.113.0 → 0.115.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +71 -1
- package/dist/index.cjs +67 -30
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +67 -30
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +67 -30
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +67 -30
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/mind-map.tsx +113 -63
- package/src/kinds/tree.tsx +49 -2
package/dist/react.cjs
CHANGED
|
@@ -4912,6 +4912,28 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
|
|
|
4912
4912
|
const \u8981\u308B = measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize}) + (nodeW - \u4F7F\u3048\u308B\u5E45(nodeW));
|
|
4913
4913
|
return Math.min(Math.max(\u8981\u308B, nodeW), slotW * 0.92);
|
|
4914
4914
|
};
|
|
4915
|
+
const \u8449\u306E\u4E26\u3073 = [];
|
|
4916
|
+
const \u6BB5\u306E\u8868 = /* @__PURE__ */ new Map();
|
|
4917
|
+
const \u5E45\u306E\u8868 = /* @__PURE__ */ new Map();
|
|
4918
|
+
{
|
|
4919
|
+
const \u898B\u305F = /* @__PURE__ */ new Set();
|
|
4920
|
+
const \u4E0B\u898B = (n, depth) => {
|
|
4921
|
+
\u898B\u305F.add(n.id);
|
|
4922
|
+
\u6BB5\u306E\u8868.set(n.id, depth);
|
|
4923
|
+
\u5E45\u306E\u8868.set(n.id, \u7BB1\u306E\u5E45(n, depth));
|
|
4924
|
+
const kids = (childrenOf.get(n.id) ?? []).filter((k) => !\u898B\u305F.has(k.id));
|
|
4925
|
+
if (kids.length === 0) {
|
|
4926
|
+
\u8449\u306E\u4E26\u3073.push(n.id);
|
|
4927
|
+
return;
|
|
4928
|
+
}
|
|
4929
|
+
for (const k of kids) \u4E0B\u898B(k, depth + 1);
|
|
4930
|
+
};
|
|
4931
|
+
for (const r of roots) if (!\u898B\u305F.has(r.id)) \u4E0B\u898B(r, 0);
|
|
4932
|
+
}
|
|
4933
|
+
const \u8449\u306E\u6570 = Math.max(\u8449\u306E\u4E26\u3073.length, 1);
|
|
4934
|
+
const \u6BB5\u306E\u9699\u9593 = depthGap - nodeH;
|
|
4935
|
+
const \u8449\u306E\u9593\u9694 = Math.min(slotW, nodeW + \u6BB5\u306E\u9699\u9593);
|
|
4936
|
+
const \u8449\u306Ex = (i) => canvasW / 2 - (\u8449\u306E\u6570 - 1) * \u8449\u306E\u9593\u9694 / 2 + i * \u8449\u306E\u9593\u9694;
|
|
4915
4937
|
const posOf = /* @__PURE__ */ new Map();
|
|
4916
4938
|
const nodes = [];
|
|
4917
4939
|
const placed = /* @__PURE__ */ new Set();
|
|
@@ -4921,7 +4943,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
|
|
|
4921
4943
|
const kids = (childrenOf.get(n.id) ?? []).filter((k) => !placed.has(k.id));
|
|
4922
4944
|
let x;
|
|
4923
4945
|
if (kids.length === 0) {
|
|
4924
|
-
x = leafCursor
|
|
4946
|
+
x = \u8449\u306Ex(leafCursor);
|
|
4925
4947
|
leafCursor += 1;
|
|
4926
4948
|
} else {
|
|
4927
4949
|
const xs = kids.map((k) => place(k, depth + 1));
|
|
@@ -4935,7 +4957,7 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
|
|
|
4935
4957
|
...n.subtitle !== void 0 ? { subtitle: n.subtitle } : {},
|
|
4936
4958
|
x,
|
|
4937
4959
|
y,
|
|
4938
|
-
w: \u7BB1\u306E\u5E45(n, depth),
|
|
4960
|
+
w: \u5E45\u306E\u8868.get(n.id) ?? \u7BB1\u306E\u5E45(n, depth),
|
|
4939
4961
|
h: nodeH,
|
|
4940
4962
|
depth,
|
|
4941
4963
|
...n.unresolved ? { unresolved: true } : {}
|
|
@@ -5122,7 +5144,7 @@ function \u63CF\u304F\u6A2A\u306E\u7AEF(n) {
|
|
|
5122
5144
|
if (n.isRoot || !n.isLeaf) return [n.x - n.w / 2, n.x + n.w / 2];
|
|
5123
5145
|
const \u8D77\u70B9 = n.x + (n.side === "right" ? -n.w / 2 : n.w / 2);
|
|
5124
5146
|
const \u540D\u524D = \u653E\u5C04\u306E\u884C(n)[0];
|
|
5125
|
-
const \u5E45 =
|
|
5147
|
+
const \u5E45 = textWidth(\u540D\u524D.text, \u540D\u524D.fontSize);
|
|
5126
5148
|
return n.side === "right" ? [\u8D77\u70B9, \u8D77\u70B9 + \u5E45] : [\u8D77\u70B9 - \u5E45, \u8D77\u70B9];
|
|
5127
5149
|
}
|
|
5128
5150
|
function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
@@ -5195,38 +5217,52 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
5195
5217
|
if (kids.length === 0) return 1;
|
|
5196
5218
|
return kids.reduce((sum, k) => sum + leafCountOf(k.id, seen), 0);
|
|
5197
5219
|
};
|
|
5198
|
-
const
|
|
5220
|
+
const leftBranches = firstLevel.slice(0, leftCount);
|
|
5221
|
+
const rightBranches = firstLevel.slice(leftCount);
|
|
5199
5222
|
const minLayer1XOffset = rootW / 2 + branchW / 2 + MIND_BOX_GAP;
|
|
5200
5223
|
const preferredSubDx = subBranchW + 20;
|
|
5201
|
-
const reserve = maxSubDepth > 0 ? branchW / 2 + maxSubDepth * preferredSubDx : 0;
|
|
5202
|
-
const maxLayer1XOffset = Math.max(minLayer1XOffset, canvasW / 2 - reserve);
|
|
5203
|
-
const \u8449\u306E\u540D\u524D\u306E\u6700\u5927\u5E45 = Math.max(
|
|
5204
|
-
0,
|
|
5205
|
-
...firstLevel.filter((br) => (childrenOf.get(br.id) ?? []).length === 0).map((br) => {
|
|
5206
|
-
const \u540D\u524D = \u653E\u5C04\u306E\u884C({ title: br.title, isRoot: false })[0];
|
|
5207
|
-
return measureTextWidth(\u540D\u524D.text, { fontSize: \u540D\u524D.fontSize});
|
|
5208
|
-
})
|
|
5209
|
-
);
|
|
5210
|
-
const \u540D\u524D\u3067\u6C7A\u307E\u308B\u4E0A\u9650 = canvasW / 2 + branchW / 2 - \u8449\u306E\u540D\u524D\u306E\u6700\u5927\u5E45;
|
|
5211
|
-
const layer1XOffset = Math.max(minLayer1XOffset, Math.min(\u540D\u524D\u3067\u6C7A\u307E\u308B\u4E0A\u9650, maxLayer1XOffset));
|
|
5212
|
-
const room = canvasW / 2 - layer1XOffset;
|
|
5213
5224
|
const MIN_SUB_W = 56;
|
|
5214
5225
|
const PREFERRED_GAP = MIND_BOX_GAP;
|
|
5215
|
-
const
|
|
5216
|
-
|
|
5217
|
-
|
|
5218
|
-
|
|
5219
|
-
const
|
|
5220
|
-
|
|
5221
|
-
|
|
5222
|
-
|
|
5226
|
+
const \u679D\u306E\u540D\u524D\u306E\u5E45 = (title) => {
|
|
5227
|
+
const \u540D\u524D = \u653E\u5C04\u306E\u884C({ title, isRoot: false })[0];
|
|
5228
|
+
return textWidth(\u540D\u524D.text, \u540D\u524D.fontSize);
|
|
5229
|
+
};
|
|
5230
|
+
const \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B = (br) => {
|
|
5231
|
+
const maxSubDepth = subDepthOf(br.id, /* @__PURE__ */ new Set());
|
|
5232
|
+
const \u4E0A\u9650 = maxSubDepth > 0 ? canvasW / 2 - (branchW / 2 + maxSubDepth * preferredSubDx) : canvasW / 2 + branchW / 2 - \u679D\u306E\u540D\u524D\u306E\u5E45(br.title);
|
|
5233
|
+
const layer1XOffset = Math.floor(Math.max(minLayer1XOffset, \u4E0A\u9650));
|
|
5234
|
+
const room = canvasW / 2 - layer1XOffset;
|
|
5235
|
+
const gapRoom = maxSubDepth > 0 ? (room - branchW / 2 - maxSubDepth * MIN_SUB_W) / maxSubDepth : 0;
|
|
5236
|
+
const gap = Math.floor(Math.max(8, Math.min(PREFERRED_GAP, gapRoom)));
|
|
5237
|
+
const effSubW = maxSubDepth > 0 ? Math.floor(
|
|
5238
|
+
Math.max(1, Math.min(subBranchW, (room - branchW / 2 - maxSubDepth * gap) / maxSubDepth))
|
|
5239
|
+
) : subBranchW;
|
|
5240
|
+
const step1 = (branchW + effSubW) / 2 + gap;
|
|
5241
|
+
const stepN = effSubW + gap;
|
|
5242
|
+
return {
|
|
5243
|
+
layer1XOffset,
|
|
5244
|
+
effSubW,
|
|
5245
|
+
subOffset: (subDepth) => subDepth <= 0 ? 0 : step1 + (subDepth - 1) * stepN
|
|
5246
|
+
};
|
|
5247
|
+
};
|
|
5248
|
+
const \u6A2A\u306E\u5272\u4ED8\u8868 = new Map(
|
|
5249
|
+
firstLevel.map((br) => [br.id, \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B(br)])
|
|
5250
|
+
);
|
|
5251
|
+
const \u4E00\u756A\u5185\u5074\u306E\u96E2\u308C = Math.min(
|
|
5252
|
+
...firstLevel.length > 0 ? firstLevel.map((br) => \u6A2A\u306E\u5272\u4ED8\u8868.get(br.id).layer1XOffset) : [minLayer1XOffset]
|
|
5253
|
+
);
|
|
5223
5254
|
const leavesOfSide = (brs) => Math.max(
|
|
5224
5255
|
1,
|
|
5225
5256
|
brs.reduce((sum, br) => sum + leafCountOf(br.id, /* @__PURE__ */ new Set()), 0)
|
|
5226
5257
|
);
|
|
5227
5258
|
const sideLaneCount = Math.max(leavesOfSide(leftBranches), leavesOfSide(rightBranches));
|
|
5228
5259
|
const laneBandH = Math.max(0, canvasH - BRANCH_BOX_H_MAX);
|
|
5229
|
-
const rowGap = sideLaneCount > 1 ? Math.min(
|
|
5260
|
+
const rowGap = sideLaneCount > 1 ? Math.min(
|
|
5261
|
+
laneBandH / (sideLaneCount - 1),
|
|
5262
|
+
// 帯は図で 1 つなので、**一番内側の枝** から上限を取る (#966)。
|
|
5263
|
+
// 外へ出た枝に合わせると、内側に残った枝の傾きが 45 度を超える
|
|
5264
|
+
\u7E26\u306E\u9593\u9694\u306E\u4E0A\u9650(\u4E00\u756A\u5185\u5074\u306E\u96E2\u308C)
|
|
5265
|
+
) : subBranchH + 14;
|
|
5230
5266
|
const effSubH = Math.min(SUB_BOX_H_MAX, rowGap * 0.7);
|
|
5231
5267
|
const effBranchH = Math.min(BRANCH_BOX_H_MAX, rowGap * 0.7);
|
|
5232
5268
|
const \u7AEF\u306E\u4F59\u308A = Math.max(effSubH, effBranchH) / 2;
|
|
@@ -5242,11 +5278,11 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
5242
5278
|
const half = nodeHalfW.get(mindData.rootId) ?? rootW / 2;
|
|
5243
5279
|
return \u4E2D\u5FC3\u306Ex + (isLeft ? -half : half);
|
|
5244
5280
|
};
|
|
5245
|
-
const placeSubtree = (node, subDepth, isLeft, tone, placed, laneRef) => {
|
|
5281
|
+
const placeSubtree = (node, subDepth, isLeft, tone, placed, laneRef, \u6A2A) => {
|
|
5246
5282
|
placed.add(node.id);
|
|
5247
5283
|
const dirX = isLeft ? -1 : 1;
|
|
5248
|
-
const x = cx + dirX * (layer1XOffset + subOffset(subDepth));
|
|
5249
|
-
const w = subDepth === 0 ? branchW : effSubW;
|
|
5284
|
+
const x = cx + dirX * (\u6A2A.layer1XOffset + \u6A2A.subOffset(subDepth));
|
|
5285
|
+
const w = subDepth === 0 ? branchW : \u6A2A.effSubW;
|
|
5250
5286
|
const h = subDepth === 0 ? effBranchH : effSubH;
|
|
5251
5287
|
const myTone = node.tone ?? tone;
|
|
5252
5288
|
const kids = (childrenOf.get(node.id) ?? []).filter((k) => !placed.has(k.id));
|
|
@@ -5262,7 +5298,8 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
5262
5298
|
isLeft,
|
|
5263
5299
|
myTone ?? MIND_TONES[i % MIND_TONES.length],
|
|
5264
5300
|
placed,
|
|
5265
|
-
laneRef
|
|
5301
|
+
laneRef,
|
|
5302
|
+
\u6A2A
|
|
5266
5303
|
)
|
|
5267
5304
|
);
|
|
5268
5305
|
y = (ys[0] + ys[ys.length - 1]) / 2;
|
|
@@ -5295,7 +5332,7 @@ function computeMindMapLayout(mindData, cx, cy, canvasW, canvasH) {
|
|
|
5295
5332
|
const placed = /* @__PURE__ */ new Set();
|
|
5296
5333
|
brs.forEach((br, i) => {
|
|
5297
5334
|
const tone = br.tone ?? MIND_TONES[(toneBase + i) % MIND_TONES.length];
|
|
5298
|
-
placeSubtree(br, 0, isLeft, tone, placed, laneRef);
|
|
5335
|
+
placeSubtree(br, 0, isLeft, tone, placed, laneRef, \u6A2A\u306E\u5272\u4ED8\u8868.get(br.id) ?? \u679D\u306E\u6A2A\u3092\u6C7A\u3081\u308B(br));
|
|
5299
5336
|
});
|
|
5300
5337
|
};
|
|
5301
5338
|
placeSide(leftBranches, true, 0);
|